@vuesimple/vs-select
Version:
A simple vue select. Perfect for all your select scenarios.
537 lines (536 loc) • 31.1 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(`[data-theme=dark] .vs-select,.dark .vs-select{--vs-select-color: #4ea8f5;--vs-select-bg: #1e1e1e;--vs-select-border: #5c6970;--vs-select-border-hover: #4ea8f5;--vs-select-hover: #333333;--vs-select-error: #ff6b72;--vs-select-icon: #5c6970;--vs-select-input: #ffffff;--vs-select-placeholder: #959595;--vs-select-label: #ffffff;--vs-select-border-radius: 4px;--vs-select-disabled-bg: rgba(255, 255, 255, .08);--vs-select-disabled-border: #39434b;--vs-select-disabled-color: #5c6970;--vs-select-menu-bg: #1c2227;--vs-select-menu-border: #39434b}.vs-select{--vs-select-color: #1f73b7;--vs-select-bg: #ffffff;--vs-select-border: #d8dcde;--vs-select-border-hover: #5293c7;--vs-select-hover: #edf7ff;--vs-select-error: #cc3340;--vs-select-icon: #68737d;--vs-select-input: #2f3941;--vs-select-placeholder: #959595;--vs-select-label: #2f3941;--vs-select-border-radius: 4px;--vs-select-disabled-bg: #f8f9f9;--vs-select-disabled-border: #e9ebed;--vs-select-disabled-color: #808080;--vs-select-menu-bg: #ffffff;--vs-select-menu-border: #d8dcde;width:100%;position:relative}.vs-select .vs-select__input-wrapper:hover,.vs-select .vs-select__input-wrapper:focus-within{border-color:var(--vs-select-border-hover)}.vs-select .vs-select__input-wrapper:focus,.vs-select .vs-select__input-wrapper:focus-within{border-color:var(--vs-select-color);box-shadow:#1f73b759 0 0 0 3px}.vs-select__label{line-height:1.42857;color:var(--vs-select-label);font-size:14px;font-weight:600;margin-bottom:8px;display:inline-block}.vs-select--cursor-pointer{cursor:pointer}.vs-select--error.vs-select__input-wrapper{border-color:var(--vs-select-error)!important}.vs-select--compact .vs-select__input-wrapper{min-height:32px;max-height:32px}.vs-select--compact .vs-select__input{padding:6px 37px 6px 11px}.vs-select--compact .vs-select__menu--top{bottom:32px}.vs-select--required{color:#cc3340}.vs-select__input-wrapper{overflow:hidden;position:relative;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;outline:0;border:1px solid var(--vs-select-border);border-radius:var(--vs-select-border-radius);background-color:var(--vs-select-bg);width:100%;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1.28571;color:#2f3941;font-family:inherit;font-size:14px}.vs-select__input-wrapper .vs-select__icon{position:absolute;top:0;bottom:0;right:0;cursor:pointer;color:var(--vs-select-icon);background:transparent;display:flex;align-items:center;padding:0 12px}.vs-select__input-wrapper .vs-select__icon svg{transition:.17s all linear;width:12px;height:12px}.vs-select__input-wrapper.vs-select--is-open{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-select__input-wrapper.vs-select--is-open:before{transform:rotate(180deg) translateY(-1px)}.vs-select__input-wrapper.vs-select--is-open .vs-select__icon svg{transform:rotate(180deg)}.vs-select__input-wrapper.vs-select--menu{border-color:var(--vs-select-color)}.vs-select__input-wrapper.vs-select--menu .vs-select__input,.vs-select__input-wrapper.vs-select--menu .vs-select__icon{color:var(--vs-select-color)}.vs-select__input-wrapper.vs-select--disabled{background:var(--vs-select-disabled-bg);cursor:no-drop;border-color:var(--vs-select-disabled-border);-webkit-user-select:none;user-select:none}.vs-select__input-wrapper.vs-select--disabled:hover{border-color:var(--vs-select-disabled-border)}.vs-select__input-wrapper.vs-select--disabled .vs-select__input{cursor:no-drop;-webkit-user-select:none;user-select:none;color:var(--vs-select-disabled-color);background:transparent}.vs-select__input-wrapper.vs-select--disabled .vs-select__icon{cursor:no-drop;-webkit-user-select:none;user-select:none;color:var(--vs-select-disabled-border);background:transparent}.vs-select__input{color:var(--vs-select-input);width:100%;border:none!important;padding:10px 37px 10px 15px;box-shadow:none!important;outline:none!important;font-family:inherit;background:transparent;position:relative;z-index:50;line-height:18px}.vs-select__input:read-only{cursor:pointer;-webkit-user-select:none;user-select:none}.vs-select__input--placeholder{color:var(--vs-select-placeholder)}.vs-select__menu{z-index:150;max-height:250px;overflow:auto;display:inline-block;position:absolute;margin:0;box-sizing:border-box;border:1px solid var(--vs-select-menu-border);border-radius:var(--vs-select-border-radius);box-shadow:0 10px 20px #04444d26;background-color:var(--vs-select-menu-bg);cursor:default;padding:0;min-width:120px;text-align:left;white-space:normal;font-size:14px;font-weight:400;width:100%;left:0}.vs-select__menu--top{bottom:40px;box-shadow:0 -2px 20px #04444d26}.vs-select__menu-item{display:block;position:relative;z-index:0;cursor:pointer;padding:8px 36px;text-decoration:none;line-height:20px;word-wrap:break-word;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vs-select__menu-item:hover,.vs-select__menu-item:focus-within{background-color:var(--vs-select-hover);text-decoration:none}.vs-select__menu-item:focus{outline:none}.vs-select__menu-item:first-child{margin-top:4px}.vs-select__menu-item:last-child{margin-bottom:4px}.vs-select__menu-item:before{position:absolute;top:0;left:0;-webkit-transition:opacity .1s ease-in-out;transition:opacity .1s ease-in-out;opacity:0;background:no-repeat 50%/16px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%231f73b7'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M1 9l4 4L15 3'/%3E%3C/svg%3E");width:32px;height:40px;content:""}.vs-select__menu-item--is-disabled{color:#c2c8cc;cursor:no-drop}.vs-select__menu-item--is-disabled:hover{background-color:transparent}.vs-select__menu--no-item{text-align:center}.vs-select .vs-select__menu--is-checked:before,.vs-select .vs-select__menu-item[aria-checked=true]:before{opacity:1}.vs-select .vs-select__menu.vs-select--menu-hidden{display:inline-block;transition:opacity .2s ease-in-out,visibility .2s linear 0s;visibility:hidden;opacity:0}[data-theme=dark] .vs-multiselect,.dark .vs-multiselect{--vs-select-color: #4ea8f5;--vs-select-bg: #1e1e1e;--vs-select-border: #5c6970;--vs-select-border-hover: #4ea8f5;--vs-select-hover: #333333;--vs-select-error: #ff6b72;--vs-select-icon: #5c6970;--vs-select-input: #ffffff;--vs-select-placeholder: #959595;--vs-select-label: #ffffff;--vs-select-border-radius: 4px;--vs-select-disabled-bg: rgba(255, 255, 255, .08);--vs-select-disabled-border: #39434b;--vs-select-disabled-color: #5c6970;--vs-select-menu-bg: #1c2227;--vs-select-menu-border: #39434b}.vs-multiselect{--vs-select-bg: #ffffff;--vs-select-border: #d8dcde;--vs-select-border-hover: #5293c7;--vs-select-hover: #edf7ff;--vs-select-error: #cc3340;--vs-select-icon: #68737d;--vs-select-input: #2f3941;--vs-select-placeholder: #959595;--vs-select-label: #2f3941;--vs-select-border-radius: 4px;--vs-select-disabled-bg: #f8f9f9;--vs-select-disabled-border: #e9ebed;--vs-select-disabled-color: #5c6970;--vs-select-menu-bg: #ffffff;--vs-select-menu-border: #d8dcde;width:100%;position:relative}.vs-multiselect__select-wrapper:hover{border-color:var(--vs-select-border-hover)}.vs-multiselect__select-wrapper:focus,.vs-multiselect__select-wrapper:focus-within{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-multiselect__label{line-height:1.42857;color:var(--vs-select-label);font-size:14px;font-weight:600;margin-bottom:8px;display:inline-block}.vs-multiselect__input-wrapper:hover,.vs-multiselect__input-wrapper:focus,.vs-multiselect__input-wrapper:focus-within{background-color:transparent!important}.vs-multiselect--compact .vs-multiselect__select-wrapper{min-height:32px}.vs-multiselect--compact .vs-multiselect__select-wrapper span{padding:7px 37px 7px 11px;line-height:16px}.vs-multiselect--compact .vs-multiselect__menu--top{bottom:32px}.vs-multiselect--required{color:#cc3340}.vs-multiselect__input{width:85%;border:none!important;padding:.71429em 1.14286em;box-shadow:none!important;outline:none!important;font-family:inherit;background:transparent}.vs-multiselect__placeholder{color:var(--vs-select-placeholder)}.vs-multiselect__select-wrapper{display:grid;align-items:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;text-align:left;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;outline:0;border:1px solid var(--vs-select-border);border-radius:var(--vs-select-border-radius);background-color:var(--vs-select-bg);width:100%;min-height:40px;box-sizing:border-box;vertical-align:middle;line-height:1.28571;color:var(--vs-select-input);font-family:inherit;font-size:14px}.vs-multiselect__select-wrapper.vs-multiselect--error{border-color:var(--vs-select-error)!important}.vs-multiselect__select-wrapper .vs-multiselect__icon{position:absolute;top:56%;right:14px;cursor:pointer;transform:translateY(-50%);color:var(--vs-select-icon)}.vs-multiselect__select-wrapper .vs-multiselect__icon svg{transition:.17s all linear;width:12px;height:12px}.vs-multiselect__select-wrapper span{padding:10px 40px 10px 15px}.vs-multiselect__select-wrapper.vs-multiselect--is-open{border-color:var(--vs-select-border-hover);box-shadow:#1f73b759 0 0 0 3px}.vs-multiselect__select-wrapper.vs-multiselect--is-open .vs-multiselect__icon svg{transform:rotate(180deg)}.vs-multiselect__select-wrapper.vs-multiselect--disabled{background:var(--vs-select-disabled-bg);color:#c2c8cc;cursor:no-drop;border-color:var(--vs-select-disabled-border);-webkit-user-select:none;user-select:none}.vs-multiselect__select-wrapper.vs-multiselect--disabled:hover{border-color:var(--vs-select-disabled-border)}.vs-multiselect__select-wrapper.vs-multiselect--disabled .vs-multiselect__input,.vs-multiselect__select-wrapper.vs-multiselect--disabled .vs-multiselect__icon{background:transparent;cursor:no-drop;-webkit-user-select:none;user-select:none;color:#c2c8cc}.vs-multiselect__no-search li:nth-child(2){margin-top:4px}.vs-multiselect__menu{z-index:150;max-height:250px;overflow-x:hidden;overflow-y:auto;display:inline-block;position:absolute;margin:0;box-sizing:border-box;border:1px solid var(--vs-select-menu-border);border-radius:var(--vs-select-border-radius);box-shadow:0 10px 20px #04444d26;background-color:var(--vs-select-menu-bg);cursor:default;padding:0;min-width:180px;text-align:left;white-space:normal;font-size:14px;font-weight:400;width:100%;left:0}.vs-multiselect__menu--top{bottom:40px;box-shadow:0 -2px 20px #04444d26}.vs-multiselect__menu-item{display:block;position:relative;z-index:0;cursor:pointer;padding:8px 36px;text-decoration:none;line-height:20px;word-wrap:break-word;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vs-multiselect__menu-item:hover,.vs-multiselect__menu-item:focus-within{background-color:var(--vs-select-hover);text-decoration:none}.vs-multiselect__menu-item:focus{outline:none}.vs-multiselect__menu-item:first-child{margin-top:4px;padding:0}.vs-multiselect__menu-item:last-child{margin-bottom:4px}.vs-multiselect__menu-item:before{position:absolute;top:0;left:0;-webkit-transition:opacity .1s ease-in-out;transition:opacity .1s ease-in-out;opacity:0;background:no-repeat 50%/16px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%231f73b7'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' d='M1 9l4 4L15 3'/%3E%3C/svg%3E");width:32px;height:40px;content:""}.vs-multiselect__menu-item--is-disabled{color:#c2c8cc;cursor:no-drop}.vs-multiselect__menu-item--is-disabled:hover{background-color:transparent}.vs-multiselect__menu--no-item{margin-bottom:8px;padding:10px;text-align:center}.vs-multiselect .vs-multiselect__menu--is-checked:before,.vs-multiselect .vs-multiselect__menu-item[aria-checked=true]:before{opacity:1}.vs-multiselect .vs-multiselect__menu.vs-multiselect--menu-hidden{display:inline-block;transition:opacity .2s ease-in-out,visibility .2s linear 0s;visibility:hidden;opacity:0}`)),document.head.appendChild(e)}}catch(s){console.error("vite-plugin-css-injected-by-js",s)}})();
import { openBlock as c, createElementBlock as d, normalizeClass as a, createElementVNode as r, toDisplayString as v, createCommentVNode as h, withDirectives as p, withKeys as o, withModifiers as f, vModelText as _, Fragment as y, renderList as O, vShow as j } from "vue";
const w = (e, t) => {
const s = e.__vccOpts || e;
for (const [b, i] of t)
s[b] = i;
return s;
}, S = {
props: {
label: {
type: String,
required: !1
},
required: {
type: Boolean
},
placeholder: {
type: String,
required: !1,
default: "Select"
},
// For array of object - pass value
preselected: {},
modelValue: {},
// Array or array of object
// 1) [1,2,3]
// 2) [{label: 'Jack', value: '1'}, {label: 'Bill', value: '2'}]
options: {
type: Array,
required: !0
},
hasEmptyOption: {
type: Boolean,
required: !1
},
isError: {
type: Boolean,
requied: !1
},
isSearch: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
isMenu: {
type: Boolean,
default: !1
},
isCompact: {
type: Boolean,
default: !1
},
emptyItemsText: {
type: String,
default: "No Data Available"
}
},
data() {
return {
isMenuHidden: !0,
inputValue: this.placeholder,
selected: null,
selectedObject: {},
isObject: !1,
searchTerm: "",
isMenuTop: !1
};
},
computed: {
selectOptions() {
return this.options.filter(
(e) => !this.searchTerm || new RegExp(this.searchTerm, "i").test(this.isObject ? e.label : e)
) || "";
},
isReadonly() {
return !(this.isSearch && !this.isMenuHidden && !this.disabled && !this.isMenu);
}
},
watch: {
inputValue(e) {
this.isMenuHidden || (this.searchTerm = e);
},
preselected() {
this.selected = this.preselected;
},
modelValue() {
this.initOptions();
},
options: {
handler: "initOptions",
immediate: !1
}
},
created() {
this.initOptions();
},
mounted() {
window && (window.addEventListener("click", (e) => {
this.$el.contains(e.target) || this.setSelectClose();
}), this.handleScroll(), window.addEventListener("scroll", this.handleScroll));
},
destroyed() {
window && window.removeEventListener("scroll", this.handleScroll);
},
methods: {
initOptions() {
if (this.options.some((e) => typeof e == "object")) {
if (this.isObject = !0, this.selected = "", this.preselected) {
const e = this.options.filter((t) => t.value == this.preselected);
if (e.length > 0) {
this.selectedObject = e[0], this.selected = this.selectedObject.value, this.inputValue = this.selectedObject.label;
return;
}
}
if (typeof this.modelValue < "u") {
const e = this.options.filter((t) => t.value === this.modelValue);
e.length > 0 && (this.selectedObject = e[0], this.selected = this.selectedObject.value, this.inputValue = this.selectedObject.label);
}
} else {
if (this.isObject = !1, this.selected = "", this.preselected) {
this.selected = this.inputValue = this.preselected;
return;
}
this.modelValue && (this.selected = this.inputValue = this.modelValue);
}
},
onSelectedItem(e) {
this.searchTerm = "", this.inputValue = "", this.isMenuHidden = !0, this.isObject ? (this.selectedObject = this.options.filter((t) => t.value === e.value)[0], this.selected = this.selectedObject.label, this.$emit("update:modelValue", this.selectedObject.value), this.$emit("change", this.selectedObject.value, this.selectedObject)) : (this.selected = this.options.filter((t) => t === e)[0], this.$emit("update:modelValue", this.selected), this.$emit("change", this.options.indexOf(this.selected), this.selected)), this.searchTerm = "", this.setSelectClose();
},
searchSelectList() {
this.searchTerm = this.selected;
},
setInnerText(e) {
this.inputValue = e;
},
handleScroll() {
const e = this.$refs["vs-select"], t = this.$refs["vs-select-dropdown"];
e.offsetTop + (t && t.offsetHeight || 0) + 100 > window.innerHeight + window.pageYOffset ? this.isMenuTop = !0 : this.isMenuTop = !1;
},
setSelectEnv() {
if (this.$emit("open"), this.handleScroll(), !this.isMenuHidden && !this.searchTerm) {
this.setSelectClose();
return;
}
this.$refs["vs-select-box"].focus(), this.isMenuHidden = !1, this.isSearch && !this.isMenu && (this.inputValue = "");
},
setSelectClose() {
this.isMenuHidden = !0, this.selected && !this.isObject && (this.inputValue = this.selected), this.selected && this.isObject && (this.inputValue = this.selectedObject.label), !this.selected && typeof this.selected != "boolean" && (this.inputValue = this.placeholder);
}
}
}, M = {
key: 0,
class: "vs-select__label"
}, V = {
key: 0,
class: "vs-select--required"
}, g = ["disabled", "readonly", "aria-expanded"], k = /* @__PURE__ */ r("div", { class: "vs-select__icon" }, [
/* @__PURE__ */ r("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12",
viewBox: "0 0 12 12"
}, [
/* @__PURE__ */ r("path", {
fill: "currentColor",
d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
})
])
], -1), T = {
key: 1,
class: "vs-select__menu-wrapper"
}, H = ["aria-selected", "onClick", "onKeydown", "onKeyup", "onBlur"], x = { key: 0 }, A = { key: 1 }, C = {
key: 1,
class: "vs-select__menu-item vs-select__menu--no-item",
role: "menuitem"
};
function E(e, t, s, b, i, n) {
return c(), d("div", {
class: a(["vs-select", { "vs-select--compact": s.isCompact }]),
ref: "vs-select"
}, [
s.label ? (c(), d("label", M, [
r("span", null, v(s.label), 1),
s.required ? (c(), d("span", V, " *")) : h("", !0)
])) : h("", !0),
r("div", {
class: a(["vs-select__input-wrapper", [
{ "vs-select--error": s.isError },
{ "vs-select--cursor-pointer": !s.isSearch },
{ "vs-select--is-open": !i.isMenuHidden },
{ "vs-select--disabled": s.disabled },
{ "vs-select--menu": s.isMenu }
]])
}, [
p(r("input", {
ref: "vs-select-box",
class: a([
"vs-select__input",
{ "vs-select--cursor-pointer": i.isMenuHidden },
i.inputValue === s.placeholder ? "vs-select__input--placeholder" : ""
]),
disabled: s.disabled,
onClick: t[0] || (t[0] = (l) => s.disabled ? null : n.setSelectEnv()),
onKeydown: t[1] || (t[1] = o(f((l) => s.disabled ? null : n.setSelectEnv(), ["prevent"]), ["space"])),
onKeyup: t[2] || (t[2] = o((l) => s.disabled ? null : i.isMenuHidden = !0, ["esc"])),
"onUpdate:modelValue": t[3] || (t[3] = (l) => i.inputValue = l),
readonly: n.isReadonly,
role: "menu",
"aria-haspopup": "true",
"aria-expanded": !i.isMenuHidden
}, null, 42, g), [
[_, i.inputValue]
]),
k
], 2),
s.disabled ? h("", !0) : (c(), d("div", T, [
r("ul", {
class: a(["vs-select__menu", { "vs-select__menu--top": i.isMenuTop }, { "vs-select--menu-hidden": i.isMenuHidden }]),
ref: "vs-select-dropdown"
}, [
s.hasEmptyOption ? (c(), d("li", {
key: 0,
class: "vs-select__menu-item",
onClick: t[4] || (t[4] = (l) => n.onSelectedItem(-1)),
role: "menuitem"
}, "-")) : h("", !0),
(c(!0), d(y, null, O(n.selectOptions, (l, u) => (c(), d("li", {
key: "vs-selected-" + u,
class: a([
"vs-select__menu-item",
{ "vs-select__menu--is-checked": !s.isMenu && i.selected === l },
{
"vs-select__menu--is-checked": !s.isMenu && i.isObject && i.selectedObject.value === l.value
},
{ "vs-select__menu-item--is-disabled": l.disabled }
]),
"aria-selected": i.isObject && i.selectedObject.value === l.value || i.selected === l,
onClick: (m) => l.disabled ? null : n.onSelectedItem(l, u),
onKeydown: o(f((m) => l.disabled ? null : n.onSelectedItem(l, u), ["prevent"]), ["space"]),
onKeyup: [
o((m) => l.disabled ? null : n.onSelectedItem(l, u), ["enter"]),
t[5] || (t[5] = o((m) => i.isMenuHidden = !0, ["esc"]))
],
onBlur: (m) => u === n.selectOptions.length - 1 ? n.setSelectClose() : null,
role: "menuitem",
tabIndex: "0"
}, [
i.isObject ? (c(), d("span", x, v(l.label), 1)) : (c(), d("span", A, v(l), 1))
], 42, H))), 128)),
n.selectOptions.length ? h("", !0) : (c(), d("li", C, v(s.emptyItemsText), 1))
], 2)
]))
], 2);
}
const B = /* @__PURE__ */ w(S, [["render", E]]);
const I = {
props: {
label: {
type: String,
required: !1
},
required: {
type: Boolean
},
placeholder: {
type: String,
required: !1,
default: "Select"
},
// For array of object - pass value
preselected: {
type: Array,
required: !1
},
modelValue: {},
// Array or array of object
// 1) [1,2,3]
// 2) [{label: 'Jack', value: '1'}, {label: 'Bill', value: '2'}]
options: {
type: Array,
required: !0
},
hasEmptyOption: {
type: Boolean,
required: !1
},
isError: {
type: Boolean,
requied: !1
},
isSearch: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
emptyItemsText: {
type: String,
default: "No Data Available"
},
isCompact: {
type: Boolean,
default: !1
}
},
data() {
return {
isMenuHidden: !0,
inputValue: this.placeholder,
selected: null,
selectedObject: {},
isObject: !1,
searchTerm: "",
selectedArrayObject: [],
isMenuTop: !1
};
},
computed: {
selectOptions() {
return this.options.filter(
(e) => !this.searchTerm || new RegExp(this.searchTerm, "i").test(this.isObject ? e.label : e)
) || "";
},
selectedItems() {
const e = this.selectedArrayObject;
return this.isObject ? e.length > 2 ? `${e[0].label}, ${e[1].label}, and ${e.length - 2} more` : this.selectedArrayObject.map((t) => t.label).join(", ") : e.length > 2 ? `${e[0]}, ${e[1]}, and ${e.length - 2} more` : this.selectedArrayObject.map((t) => t).join(", ");
}
},
watch: {
inputValue(e) {
this.isMenuHidden || (this.searchTerm = e);
},
modelValue(e) {
this.selectedArrayObject = e;
},
options: {
handler: "initOptions",
immediate: !1
}
},
created() {
this.initOptions();
},
mounted() {
window && (window.addEventListener("click", (e) => {
this.$el.contains(e.target) || (this.isMenuHidden = !0);
}), window.addEventListener("scroll", this.handleScroll));
},
destroyed() {
window && window.removeEventListener("scroll", this.handleScroll);
},
methods: {
initOptions() {
if (this.options.some((e) => typeof e == "object")) {
if (this.isObject = !0, this.preselected) {
this.selectedArrayObject = this.options.filter(
({ value: e }) => this.preselected && this.preselected.some((t) => t === e)
);
return;
}
this.modelValue && (this.selectedArrayObject = this.options.filter(
({ value: e }) => this.modelValue && this.modelValue.some((t) => t.value === e)
));
} else {
if (this.isObject = !1, this.preselected) {
this.selectedArrayObject = this.preselected;
return;
}
this.modelValue && (this.selectedArrayObject = this.modelValue);
}
},
setSelected(e) {
return this.isObject ? this.selectedArrayObject.filter((t) => t.value === e.value).length > 0 : this.selectedArrayObject.filter((t) => t === e).length > 0;
},
onSelectedItem(e) {
this.searchTerm = "", this.inputValue = "", this.isMenuHidden = !1, this.isObject ? this.containsObject(this.selectedArrayObject, e) ? this.selectedArrayObject = this.selectedArrayObject.filter((s) => s.value !== e.value) : this.selectedArrayObject.push(e) : this.selectedArrayObject.includes(e) ? this.selectedArrayObject = this.selectedArrayObject.filter((s) => s !== e) : this.selectedArrayObject.push(e), this.$emit("update:modelValue", this.selectedArrayObject), this.$emit("change", this.selectedArrayObject), this.searchTerm = "", this.inputValue = this.selected;
},
containsObject(e, t) {
return e.some((s) => s.value === t.value);
},
searchSelectList() {
this.searchTerm = this.selected;
},
isMenu() {
this.isMenuHidden = !this.isMenuHidden;
},
setInnerText(e) {
this.inputValue = e;
},
handleScroll() {
const e = this.$refs["vs-multiselect-wrapper"], t = this.$refs["vs-multiselect-dropdown"];
e.offsetTop + (t && t.offsetHeight || 0) + 100 > window.innerHeight + window.pageYOffset ? this.isMenuTop = !0 : this.isMenuTop = !1;
},
setSelectEnv() {
if (this.$emit("open"), this.handleScroll(), !this.isMenuHidden) {
this.isMenuHidden = !0, this.$refs["vs-multiselect-box"].blur();
return;
}
this.isMenuHidden = !1, this.$nextTick(() => this.$refs["vs-multiselect-box"].focus()), this.selected || (this.inputValue = "");
}
// setSelectClose() {
// this.isMenuHidden = true;
// this.$refs['vs-multiselect-box'].blur();
// if (this.selectedArrayObject.length > 0) {
// this.inputValue = this.selectedArrayObject;
// }
// if (!this.selectedArrayObject <= 0) {
// this.inputValue = this.label;
// }
// },
}
}, q = {
key: 0,
class: "vs-multiselect__label"
}, K = {
key: 0,
class: "vs-multiselect--required"
}, L = ["aria-expanded"], D = /* @__PURE__ */ r("div", { class: "vs-multiselect__icon" }, [
/* @__PURE__ */ r("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12",
viewBox: "0 0 12 12"
}, [
/* @__PURE__ */ r("path", {
fill: "currentColor",
d: "M1.646 3.646a.5.5 0 01.638-.057l.07.057L6 7.293l3.646-3.647a.5.5 0 01.638-.057l.07.057a.5.5 0 01.057.638l-.057.07-4 4a.5.5 0 01-.638.057l-.07-.057-4-4a.5.5 0 010-.708z"
})
])
], -1), N = {
key: 1,
class: "vs-multiselect__menu-wrapper"
}, R = {
class: "vs-multiselect__menu-item vs-multiselect__input-wrapper",
role: "menuitem"
}, z = ["disabled"], F = ["onClick", "onKeydown", "onKeyup", "onBlur", "aria-selected"], U = { key: 0 }, Y = { key: 1 }, G = {
key: 1,
class: "vs-multiselect__menu-item vs-multiselect__menu--no-item",
role: "menuitem"
};
function J(e, t, s, b, i, n) {
return c(), d("div", {
class: a(["vs-multiselect", { "vs-multiselect--compact": s.isCompact }]),
ref: "vs-multiselect-wrapper"
}, [
s.label ? (c(), d("label", q, [
r("span", null, v(s.label), 1),
s.required ? (c(), d("span", K, " *")) : h("", !0)
])) : h("", !0),
r("div", {
class: a(["vs-multiselect__select-wrapper", [
{ "vs-multiselect--error": s.isError },
{ "vs-multiselect--is-open": !i.isMenuHidden },
{ "vs-multiselect--disabled": s.disabled }
]]),
onClick: t[0] || (t[0] = (l) => s.disabled ? null : n.setSelectEnv()),
onKeydown: t[1] || (t[1] = o(f((l) => s.disabled ? null : n.setSelectEnv(), ["prevent"]), ["space"])),
onKeyup: t[2] || (t[2] = o((l) => s.disabled ? null : i.isMenuHidden = !0, ["esc"])),
role: "menu",
ref: "vs-multiselect",
"aria-haspopup": "true",
tabindex: "0",
"aria-expanded": !i.isMenuHidden
}, [
r("span", {
class: a({ "vs-multiselect__placeholder": !n.selectedItems })
}, v(n.selectedItems ? n.selectedItems : s.placeholder), 3),
D
], 42, L),
s.disabled ? h("", !0) : (c(), d("div", N, [
r("ul", {
class: a([
"vs-multiselect__menu",
{ "vs-multiselect__menu--top": i.isMenuTop },
{ "vs-multiselect__no-search": !s.isSearch },
{ "vs-multiselect--menu-hidden": i.isMenuHidden }
]),
ref: "vs-multiselect-dropdown"
}, [
s.hasEmptyOption ? (c(), d("li", {
key: 0,
class: "vs-multiselect__menu-item",
onClick: t[3] || (t[3] = (l) => n.onSelectedItem(-1))
}, "-")) : h("", !0),
p(r("li", R, [
p(r("input", {
ref: "vs-multiselect-box",
class: "vs-multiselect__input",
disabled: s.disabled,
"onUpdate:modelValue": t[4] || (t[4] = (l) => i.inputValue = l),
placeholder: "Search..."
}, null, 8, z), [
[_, i.inputValue]
])
], 512), [
[j, s.isSearch]
]),
(c(!0), d(y, null, O(n.selectOptions, (l, u) => (c(), d("li", {
key: "vs-selected-" + u,
class: a(["vs-multiselect__menu-item", [
{ "vs-multiselect__menu--is-checked": n.setSelected(l) },
{ "vs-multiselect__menu-item--is-disabled": l.disabled }
]]),
onClick: (m) => l.disabled ? null : n.onSelectedItem(l, u),
onKeydown: o(f((m) => l.disabled ? null : n.onSelectedItem(l, u), ["prevent"]), ["space"]),
onKeyup: [
o((m) => l.disabled ? null : n.onSelectedItem(l, u), ["enter"]),
t[5] || (t[5] = o((m) => s.disabled ? null : i.isMenuHidden = !0, ["esc"]))
],
onBlur: (m) => u === n.selectOptions.length - 1 ? i.isMenuHidden = !0 : null,
"aria-selected": n.setSelected(l),
role: "menuitem",
tabIndex: "0"
}, [
i.isObject ? (c(), d("span", U, v(l.label), 1)) : (c(), d("span", Y, v(l), 1))
], 42, F))), 128)),
n.selectOptions.length ? h("", !0) : (c(), d("li", G, v(s.emptyItemsText), 1))
], 2)
]))
], 2);
}
const P = /* @__PURE__ */ w(I, [["render", J]]), W = {
install(e) {
e.component("VsSelect", B), e.component("VsMultiselect", P);
}
};
export {
P as VsMultiselect,
B as VsSelect,
W as plugin
};