vue-custom-select-box
Version:
Quick start [install component NPM packages](https://www.npmjs.com/package/vue-custom-select-box).
374 lines (373 loc) • 11.9 kB
JavaScript
import { resolveComponent as V, openBlock as a, createElementBlock as r, createVNode as u, normalizeProps as m, guardReactiveProps as $, createElementVNode as l, renderSlot as y, mergeProps as g, withModifiers as c, Fragment as k, renderList as S, toDisplayString as p, createCommentVNode as f, withDirectives as O, vModelText as A } from "vue";
const w = (e, t) => {
const s = e.__vccOpts || e;
for (const [o, i] of t)
s[o] = i;
return s;
}, B = {
name: "IconComponent"
};
function C(e, t, s, o, i, b) {
const d = V("v-icon");
return a(), r("div", null, [
u(d, m($(e.$attrs)), null, 16)
]);
}
const T = /* @__PURE__ */ w(B, [["render", C]]), _ = {
props: {
placeholder: {
type: String,
default: "-- Select --"
},
searchPlaceholder: {
type: String,
default: "Search e.g abc.."
},
selectAllLabel: {
type: String,
default: "Select all"
},
limit: {
type: Number,
default: void 0
},
selectAll: {
type: Boolean,
default: !0
},
multiple: {
type: Boolean,
default: !1
},
options: {
type: Array,
default: Array
},
modelValue: {
type: [Object, Array, Number, String],
default: void 0
},
optionValue: {
type: String,
default: void 0
},
optionText: {
type: String,
default: void 0
},
trackBy: {
type: String,
default: void 0
},
animated: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
},
closeOnSelect: {
type: Boolean,
default: !1
},
clearInputOnSelect: {
type: Boolean,
default: !1
}
},
data() {
return {
items: this.modelValue,
search: null
};
},
watch: {
items(e) {
this.$emit("update:modelValue", e);
}
},
computed: {
displayPlaceholder() {
var s;
const e = this.modelValue, t = typeof this.items;
return e && !this.multiple ? (t === "object" ? this.items[this.optionText] || this.items : (s = this.options.find(
(o) => o[this.optionValue] === this.items
)) == null ? void 0 : s[this.optionText]) || this.placeholder : this.placeholder;
},
filterTags() {
const e = this.options.filter((t) => {
const s = this.items, o = s == null ? void 0 : s.map((i) => i[this.optionValue] || i);
if (o != null && o.length)
return o.includes(t[this.optionValue]) ? t : !1;
});
if (e.length)
return typeof this.limit == "number" ? e == null ? void 0 : e.slice(0, this.limit) : e;
},
allSelected() {
return this.options.every(
(e) => {
var t;
return (t = this.items) == null ? void 0 : t.map((s) => s[this.optionValue] || s).includes(e[this.optionValue] || e);
}
);
},
isSelected() {
return (e) => {
var t;
return Array.isArray(this.items) ? (t = this.items) == null ? void 0 : t.some(
(s) => (s[this.optionValue] || s) === (e[this.optionValue] || e)
) : (e[this.optionValue] || e) === this.items;
};
},
filterOptions() {
const e = this.trackBy || this.optionText, t = this.options.filter(
(s) => {
var o, i;
return (i = s[e]) == null ? void 0 : i.toLowerCase().match((o = this.search) == null ? void 0 : o.toLowerCase());
}
);
return e ? t : this.options;
},
getLimitedLength() {
if (typeof this.limit == "number")
return this.items.length - this.limit;
}
},
methods: {
pushOption(e, t) {
var o;
if (!e.target.checked) {
if (this.multiple) {
if (!this.items)
return;
this.items = (o = this.items) == null ? void 0 : o.filter(
(i) => (i[this.optionValue] || i) !== (t[this.optionValue] || t)
);
} else
this.items = null;
return;
}
this.multiple ? (this.items || (this.items = []), this.items.push(t[this.optionValue] || t)) : this.items = t[this.optionValue] || t, this.closeOnSelect && this.openDropdown(), this.clearInputOnSelect && this.search && (this.search = null);
},
pushAllOptions(e) {
const t = e.target.checked, s = this.optionValue ? this.options.map((b) => b[this.optionValue]) : [];
let o, i = 0;
if (t) {
if (this.items || (this.items = []), s.length) {
if (this.items = [], !this.animated) {
this.items = s;
return;
}
o = setInterval(() => {
if (i++, i > this.options.length) {
clearInterval(o);
return;
}
this.items.push(
s[i - 1][this.optionValue] || s[i - 1]
);
}, 0);
}
} else {
if (!this.animated) {
this.items = [];
return;
}
i = s.length, o = setInterval(() => {
if (i--, i < 0) {
clearInterval(o);
return;
}
this.items.splice(i, 1);
}, 0);
}
this.closeOnSelect && this.openDropdown(), this.clearInputOnSelect && this.search && (this.search = null);
},
openDropdown() {
this.$refs.vsbContainer.classList.toggle("vsb-show");
},
clearAllSelected() {
const e = this.items;
Array.isArray(e) ? this.items = [] : this.items = null;
}
}
};
const I = {
name: "VueSelectBox",
components: { Icon: T },
mixins: [_]
}, L = { style: { "max-width": "480px", "margin-inline": "auto", padding: "20px" } }, D = {
class: "vsb-container",
ref: "vsbContainer"
}, P = { class: "vsb-head" }, N = ["disabled"], E = { class: "vsb-label-box" }, M = {
key: 0,
class: "vsb-tags"
}, R = {
key: 0,
class: "vsb-tag"
}, j = {
key: 1,
class: "vsb-label"
}, q = {
class: "vsb-dropdown",
ref: "vsbDropdown"
}, z = { class: "vsb-dropdown-search" }, F = { class: "vsb-dropdown-search-box" }, U = { class: "vsb-dropdown-icon" }, G = ["placeholder", "disabled", "readOnly"], H = { class: "vsb-dropdown-box" }, J = {
key: 0,
class: "vsb-dropdown-item"
}, K = { class: "vsb-dropdown-option" }, Q = ["checked", "disabled"], W = {
for: "vsb-checkbox-all",
class: "vsb-dropdown-item-label"
}, X = {
key: 1,
class: "vsb-dropdown-option"
}, Y = ["id", "onChange", "checked", "disabled"], Z = ["id", "onChange", "checked"], x = ["for"], ee = {
key: 2,
class: "vsb-dropdown-item vsb-dropdown-noresult"
};
function te(e, t, s, o, i, b) {
const d = V("Icon");
return a(), r("div", L, [
l("figure", D, [
l("figcaption", P, [
e.$slots.selectButton ? y(e.$slots, "selectButton", m(g({ key: 0 }, {
open: e.openDropdown,
tags: e.filterTags,
multiple: e.multiple,
originalLimit: e.limit,
limited: e.getLimitedLength,
label: e.displayPlaceholder
})), void 0, !0) : (a(), r("button", {
key: 1,
class: "vsb-btn",
onClick: t[0] || (t[0] = c((...n) => e.openDropdown && e.openDropdown(...n), ["prevent"])),
disabled: e.disabled || !e.filterOptions.length
}, [
l("div", E, [
e.multiple && (e.filterTags || []).length ? (a(), r("ul", M, [
(a(!0), r(k, null, S(e.filterTags, (n, h) => (a(), r("li", {
class: "vsb-tag",
key: h
}, [
l("p", null, p(n[e.optionText]), 1),
l("button", null, [
u(d, {
name: "io-close",
class: "vsb-icon",
fill: "#ffffff",
scale: "0.7"
})
])
]))), 128)),
e.limit && typeof e.limit == "number" ? (a(), r("li", R, [
l("p", null, p(e.getLimitedLength), 1)
])) : f("", !0)
])) : (a(), r("p", j, p(e.displayPlaceholder), 1))
]),
l("div", null, [
u(d, {
name: "fa-sort",
scale: "0.8",
class: "vsb-icon"
})
])
], 8, N))
]),
l("blockquote", q, [
l("div", z, [
l("div", F, [
l("div", U, [
u(d, {
name: "io-search-outline",
class: "vsb-icon",
fill: "#6c757d"
})
]),
O(l("input", {
type: "text",
name: "vsb-search",
id: "vsb-search",
class: "vsb-search",
autocomplete: "off",
spellcheck: "false",
placeholder: e.searchPlaceholder,
"onUpdate:modelValue": t[1] || (t[1] = (n) => e.search = n),
disabled: !e.optionText || !e.trackBy,
readOnly: !e.optionText || !e.trackBy
}, null, 8, G), [
[
A,
e.search,
void 0,
{ trim: !0 }
]
]),
e.items ? (a(), r("button", {
key: 0,
class: "vsb-dropdown-icon",
onClick: t[2] || (t[2] = c((...n) => e.clearAllSelected && e.clearAllSelected(...n), ["prevent"]))
}, [
u(d, {
name: "io-close",
class: "vsb-icon",
fill: "#6c757d"
})
])) : f("", !0)
])
]),
l("ul", H, [
e.selectAll && e.multiple && (e.filterOptions || []).length ? (a(), r("li", J, [
l("div", K, [
l("input", {
type: "checkbox",
name: "vsb-checkbox",
id: "vsb-checkbox-all",
class: "vsb-checkbox",
onChange: t[3] || (t[3] = c((...n) => e.pushAllOptions && e.pushAllOptions(...n), ["prevent"])),
checked: e.allSelected,
disabled: !e.optionText || !e.optionValue
}, null, 40, Q),
l("label", W, p(e.selectAllLabel), 1)
])
])) : f("", !0),
(a(!0), r(k, null, S(e.filterOptions, (n, h) => (a(), r("li", {
key: h,
class: "vsb-dropdown-item"
}, [
e.$slots.option ? y(e.$slots, "option", m(g({ key: 0 }, n)), void 0, !0) : (a(), r("div", X, [
e.multiple ? (a(), r("input", {
key: 0,
type: "checkbox",
name: "vsb-checkbox",
id: `vsb-checkbox-${h}`,
class: "vsb-checkbox",
onChange: c((v) => e.pushOption(v, n), ["prevent"]),
checked: e.isSelected(n),
disabled: !e.optionText || !e.optionValue
}, null, 40, Y)) : (a(), r("input", {
key: 1,
type: "radio",
name: "vsb-checkbox",
id: `vsb-checkbox-${h}`,
class: "vsb-checkbox",
onChange: c((v) => e.pushOption(v, n), ["prevent"]),
checked: e.isSelected(n)
}, null, 40, Z)),
l("label", {
for: `vsb-checkbox-${h}`,
class: "vsb-dropdown-item-label"
}, p(n[e.optionText] || n), 9, x)
]))
]))), 128)),
e.$slots.noResult ? y(e.$slots, "noResult", m(g({ key: 1 }, e.search)), void 0, !0) : (e.filterOptions || []).length ? f("", !0) : (a(), r("li", ee, [
l("p", null, p(e.search ? `No result found by " ${e.search} "` : "No result"), 1)
]))
])
], 512)
], 512)
]);
}
const oe = /* @__PURE__ */ w(I, [["render", te], ["__scopeId", "data-v-160bc553"]]);
export {
oe as default
};