@stanislav-ernst/vue-bootstrap-select
Version:
A Vue.js 3 version of bootstrap select.
241 lines (240 loc) • 7.63 kB
JavaScript
import { resolveDirective as A, withDirectives as a, openBlock as c, createElementBlock as u, withKeys as p, withModifiers as b, normalizeClass as w, createElementVNode as o, toDisplayString as r, vModelText as x, vShow as v, createCommentVNode as g, Fragment as V, renderList as S, createTextVNode as D } from "vue";
const P = function() {
return document.ontouchstart !== null ? "click" : "touchstart";
}, f = "__vue_click_away__", m = function(e, t, s) {
O(e);
let d = s.context, n = t.value, i = !1;
setTimeout(function() {
i = !0;
}, 0), e[f] = function(h) {
if ((!e || !e.contains(h.target)) && n && i && typeof n == "function")
return n.call(d, h);
}, document.addEventListener(P(), e[f], !1);
}, O = function(e) {
document.removeEventListener(P(), e[f], !1), delete e[f];
}, _ = function(e, t, s) {
t.value !== t.oldValue && m(e, t, s);
}, k = {
mounted: m,
updated: _,
unmounted: O
}, E = {
directives: {
ClickAway: k
}
}, L = (e, t) => {
const s = e.__vccOpts || e;
for (const [d, n] of t)
s[d] = n;
return s;
}, C = {
name: "VueBootstrapSelect",
mixins: [E],
props: {
disabled: {
type: Boolean,
default: !1
},
disabledProp: {
type: String,
default: "disabled"
},
labelTitle: {
type: String,
default: "Nothing selected"
},
labelNotFound: {
type: String,
default: "No results matched"
},
labelSearchPlaceholder: {
type: String,
default: "Search"
},
options: {
type: Array,
default: () => []
},
searchable: {
type: Boolean,
default: !1
},
showDefaultOption: {
type: Boolean,
default: !1
},
textProp: {
type: String,
default: "text"
},
descriptionProp: {
type: Array,
default: () => ["description"]
},
modelValue: {
type: [Object, String, Number],
default: null
},
valueProp: {
type: String,
default: "value"
}
},
data() {
return {
show: !1,
selectedValue: null,
searchValue: "",
typeAheadPointer: -1
};
},
computed: {
title() {
return this.selectedValue ? this.getOptionLabel(this.selectedValue) : this.labelTitle;
},
filteredOptions() {
return this.searchable && this.searchValue.length > 0 ? this.options.filter((e) => typeof e == "object" ? e[this.textProp].toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1 : e.toLowerCase().indexOf(this.searchValue.toLowerCase()) !== -1) : this.options;
},
reversedOptions() {
return [...this.filteredOptions].reverse();
},
lastOptionIndex() {
return this.filteredOptions.length - 1;
}
},
watch: {
modelValue: {
immediate: !0,
handler(e) {
const t = this.options.findIndex(
(s) => this.isEqualOption(s, e)
);
this.onSelect(e, t);
}
}
},
methods: {
onSelect(e, t) {
e && !e[this.disabledProp] ? (this.selectedValue = e, this.typeAheadPointer = t, this.hideDropdown(), this.$emit("update:modelValue", e, e[this.valueProp], t)) : e === null && (this.selectedValue = null);
},
onEscape() {
this.hideDropdown();
},
typeAheadUp() {
if (this.show || (this.show = !0), this.typeAheadPointer > 0) {
const e = this.typeAheadPointer - 1, t = this.filteredOptions[e];
t && t[this.disabledProp] || !1 ? (this.typeAheadPointer--, this.typeAheadUp()) : this.typeAheadPointer--;
} else {
const e = this.reversedOptions.findIndex(
(t) => t[this.disabledProp] !== !0
);
this.typeAheadPointer = this.lastOptionIndex - e;
}
},
typeAheadDown() {
if (this.show || (this.show = !0), this.typeAheadPointer < this.lastOptionIndex) {
const e = this.typeAheadPointer + 1, t = this.filteredOptions[e];
t && t[this.disabledProp] || !1 ? (this.typeAheadPointer++, this.typeAheadDown()) : this.typeAheadPointer++;
} else {
const e = this.filteredOptions.findIndex(
(t) => t[this.disabledProp] !== !0
);
this.typeAheadPointer = e;
}
},
typeAheadSelect() {
this.filteredOptions[this.typeAheadPointer] && this.onSelect(
this.filteredOptions[this.typeAheadPointer],
this.typeAheadPointer
);
},
hideDropdown() {
this.show = !1, this.searchValue = "";
},
getOptionLabel(e) {
return typeof e == "object" ? e[this.textProp] : e;
},
getOptionDescriptionLabel(e) {
if (typeof e == "object") {
let t = "";
return this.descriptionProp.forEach(function(s) {
e[s] && (t === "" ? t = e[s] : t = t + " - " + e[s]);
}), "- " + t;
}
return "";
},
isSelectedOption(e, t) {
return this.typeAheadPointer === -1 && this.selectedValue ? this.isEqualOption(e, this.selectedValue) : this.typeAheadPointer === t;
},
isEqualOption(e, t) {
return e && t && typeof e == "object" && typeof t == "object" ? e[this.textProp] === t[this.textProp] && e[this.valueProp] === t[this.valueProp] : e === t;
},
toggle() {
this.disabled || (this.show = !this.show);
}
}
}, I = { class: "v-dropdown-container" }, N = { class: "v-bs-searchbox" }, U = ["placeholder"], T = {
key: 0,
class: "v-dropdown-item disabled default-option"
}, B = ["onClick"], j = { class: "text-muted" };
function q(e, t, s, d, n, i) {
const h = A("click-away");
return a((c(), u("div", {
onKeyup: t[2] || (t[2] = p((...l) => i.onEscape && i.onEscape(...l), ["esc"])),
onKeydown: [
t[3] || (t[3] = p(b((...l) => i.typeAheadUp && i.typeAheadUp(...l), ["prevent"]), ["up"])),
t[4] || (t[4] = p(b((...l) => i.typeAheadDown && i.typeAheadDown(...l), ["prevent"]), ["down"])),
t[5] || (t[5] = p(b((...l) => i.typeAheadSelect && i.typeAheadSelect(...l), ["prevent"]), ["enter"]))
],
class: w(["v-select", { disabled: s.disabled }])
}, [
o("button", {
onClick: t[0] || (t[0] = (...l) => i.toggle && i.toggle(...l)),
type: "button",
class: "v-select-toggle"
}, [
o("div", null, r(i.title), 1),
t[6] || (t[6] = o("div", { class: "arrow-down" }, null, -1))
]),
a(o("div", I, [
a(o("div", N, [
a(o("input", {
placeholder: s.labelSearchPlaceholder,
class: "form-control",
type: "text",
"onUpdate:modelValue": t[1] || (t[1] = (l) => n.searchValue = l),
autofocus: ""
}, null, 8, U), [
[x, n.searchValue]
])
], 512), [
[v, s.searchable]
]),
o("ul", null, [
a(o("li", { class: "v-dropdown-item" }, r(s.labelNotFound) + ' "' + r(n.searchValue) + '" ', 513), [
[v, s.searchable && i.filteredOptions.length === 0]
]),
s.showDefaultOption ? (c(), u("li", T, r(s.labelTitle), 1)) : g("", !0),
(c(!0), u(V, null, S(i.filteredOptions, (l, y) => (c(), u("li", {
key: `v-select-${y}`,
class: w(["v-dropdown-item", {
selected: i.isSelectedOption(l, y),
disabled: l[s.disabledProp]
}]),
onClick: (F) => i.onSelect(l, y)
}, [
D(r(i.getOptionLabel(l)) + " ", 1),
o("span", j, r(i.getOptionDescriptionLabel(l)), 1)
], 10, B))), 128))
])
], 512), [
[v, n.show]
])
], 34)), [
[h, i.hideDropdown]
]);
}
const M = /* @__PURE__ */ L(C, [["render", q], ["__scopeId", "data-v-dd5f839b"]]);
export {
M as default
};