@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1,057 lines (1,056 loc) • 40.6 kB
JavaScript
import { defineComponent as Vl, useSlots as Dl, toRef as Ve, ref as b, reactive as ge, computed as h, watchEffect as Hl, watch as G, onMounted as Wl, nextTick as ql, openBlock as f, createElementBlock as m, unref as l, normalizeClass as o, createElementVNode as O, normalizeStyle as B, renderSlot as x, createVNode as p, withCtx as u, createCommentVNode as w, Fragment as oe, withModifiers as J, createTextVNode as K, toDisplayString as S, createBlock as Q, renderList as jl, mergeProps as Ie, Transition as ul, normalizeProps as Gl, guardReactiveProps as Jl } from "vue";
import "../icon/index.mjs";
import "../input/index.mjs";
import "../native-scroll/index.mjs";
import "../option/index.mjs";
import "../overflow/index.mjs";
import "../popper/index.mjs";
import "../renderer/index.mjs";
import "../tag/index.mjs";
import "../tooltip/index.mjs";
import "../virtual-list/index.mjs";
import "../form/index.mjs";
import { placementWhileList as Ql, useMounted as Ul, useClickOutside as Xl, usePopper as Yl, useHover as Zl, useModifier as et } from "@vexip-ui/hooks";
import { useNameHelper as lt, useProps as tt, createSizeProp as at, createStateProp as it, createIconProp as De, useLocale as st, useIcons as nt, emitEvent as T } from "@vexip-ui/config";
import { isNull as N, decide as rt, removeArrayItem as ot, getRangeWidth as ut, getLast as dl, toAttrValue as fl } from "@vexip-ui/utils";
import { selectProps as dt } from "./props.mjs";
import { defaultKeyConfig as ft } from "./symbol.mjs";
import { useFieldStore as pt } from "../form/helper.mjs";
import $ from "../renderer/renderer.mjs";
import U from "../icon/icon.mjs";
import ct from "../overflow/overflow.mjs";
import Te from "../tag/tag.mjs";
import vt from "../tooltip/tooltip.mjs";
import bt from "../native-scroll/native-scroll.mjs";
import mt from "../popper/popper.vue.mjs";
import ht from "../input/input.mjs";
import gt from "../virtual-list/virtual-list.mjs";
import yt from "../option/option.vue2.mjs";
const Ct = ["id", "aria-disabled", "aria-expanded", "aria-labelledby"], kt = { key: 1 }, xt = ["disabled", "name"], wt = ["disabled", "name"], $t = ["aria-label"], Pt = ["title"], la = /* @__PURE__ */ Vl({
name: "Select",
__name: "select",
props: dt,
emits: ["update:value", "update:visible", "update:label"],
setup(pl, { expose: cl, emit: vl }) {
function bl(e, a) {
const i = Array.isArray(e), n = Array.isArray(a);
if (i !== n) return !1;
if (i && n) {
if (e.length !== a.length) return !1;
for (let r = 0, v = e.length; r < v; ++r)
if (e[r] !== a[r]) return !1;
return !0;
}
return N(e) ? N(a) : e === a;
}
const {
idFor: He,
labelId: We,
state: ml,
disabled: hl,
loading: gl,
size: yl,
validateField: qe,
clearField: Cl,
getFieldValue: kl,
setFieldValue: je
} = pt(Ee), s = lt("select"), t = tt("select", pl, {
size: at(yl),
state: it(ml),
locale: null,
visible: {
default: !1,
static: !0
},
options: {
default: () => [],
static: !0
},
disabled: () => hl.value,
transitionName: () => s.ns("drop"),
outsideClose: !0,
placeholder: null,
prefix: De(),
prefixColor: "",
suffix: De(),
suffixColor: "",
noSuffix: !1,
value: {
default: () => kl(),
static: !0
},
multiple: !1,
clearable: !1,
maxListHeight: 300,
listClass: null,
placement: {
default: "bottom",
validator: (e) => Ql.includes(e)
},
transfer: !1,
optionCheck: !1,
emptyText: null,
staticSuffix: !1,
loading: () => gl.value,
loadingIcon: De(),
loadingLock: !1,
loadingEffect: null,
keyConfig: () => ({}),
filter: !1,
ignoreCase: !1,
creatable: !1,
transparent: !1,
maxTagCount: 0,
noRestTip: !1,
tagType: null,
noPreview: !1,
remote: !1,
fitPopper: !1,
name: {
default: "",
static: !0
},
popperAlive: null,
countLimit: 0,
filterPosition: "in-control",
slots: () => ({})
}), X = vl, ue = Dl(), Y = st("select", Ve(t, "locale")), R = nt(), c = b(t.visible), y = b([]), d = b([]), V = b(-1), xl = Ve(t, "placement"), wl = Ve(t, "transfer"), Ge = b([]), P = b(""), ye = b(0), z = b([]), Je = b(0), A = b(!1), _ = b(!1), { isMounted: $l } = Ul(), L = ge({
disabled: !1,
divided: !1,
title: "",
value: "",
label: "",
group: !1,
depth: 0,
parent: null,
hidden: !1,
hitting: !0,
data: ""
}), Ce = ge(/* @__PURE__ */ new Set()), Ae = b(), Z = h(() => z.value.concat(Ge.value)), D = h(() => Z.value.filter((e) => !e.hidden)), Pl = h(() => ({ ...ft, ...t.keyConfig })), H = Xl(Ol), Le = b(), Qe = b(), ke = b(), xe = b(), W = b(), we = b(), k = h(() => {
var e;
return ((e = Qe.value) == null ? void 0 : e.input) ?? Le.value;
}), { reference: ee, transferTo: Ue, updatePopper: de } = Yl({
placement: xl,
transfer: wl,
wrapper: H,
popper: h(() => {
var e;
return (e = W.value) == null ? void 0 : e.wrapper;
}),
isDrop: !0
}), { isHover: Xe } = Zl(ee), E = ge(/* @__PURE__ */ new Map()), le = b(/* @__PURE__ */ new Map());
let g = t.value;
const Ye = b(0);
Hl(() => {
t.keyConfig.value, t.keyConfig.label, t.keyConfig.disabled, t.keyConfig.divided, t.keyConfig.title, t.keyConfig.group, t.keyConfig.children;
for (let e = 0, a = t.options.length; e < a; ++e)
t.options[e];
Ye.value++;
}), G(Ye, Sl, { immediate: !0 });
function Sl() {
const {
value: e,
label: a,
disabled: i,
divided: n,
title: r,
group: v,
children: C
} = Pl.value, Se = le.value, Ke = /* @__PURE__ */ new Map(), rl = [], Ne = t.options.map((M) => ({ option: M, depth: 0, parent: null })).reverse();
Ce.clear();
for (const M of z.value)
Ke.set(M.value, M), Ce.add(M.value);
for (; Ne.length; ) {
const { option: M, depth: ol, parent: El } = Ne.pop(), me = typeof M == "string" ? { [e]: M } : M, ze = !!me[v], he = me[e];
if (!ze && N(he)) continue;
const Kl = me[a] || String(he), {
[i]: Nl = !1,
[n]: zl = !1,
[r]: Bl = "",
[C]: Be = null
} = me, re = Se.get(me.value), Re = ge({
disabled: Nl,
divided: zl,
title: Bl,
value: he,
label: Kl,
group: ze,
depth: ol,
parent: El,
hidden: (re == null ? void 0 : re.hidden) ?? !1,
hitting: (re == null ? void 0 : re.hitting) ?? !1,
data: M
});
rl.push(Re), ze || (Ke.set(he, Re), Ce.add(String(he))), Array.isArray(Be) && Be.length && Ne.push(
...Be.map((Rl) => ({ option: Rl, depth: ol + 1, parent: Re })).reverse()
);
}
le.value = Ke, Ge.value = rl, al(g);
}
et({
target: H,
passive: !1,
onKeyDown: (e, a) => {
if (_.value) {
e.stopPropagation();
return;
}
if (!c.value) {
(a.space || a.enter) && (e.preventDefault(), e.stopPropagation(), ve());
return;
}
if (a.tab || a.escape) {
q(!1), a.resetAll();
return;
}
rt(
[
[
() => a.up || a.down,
() => {
const i = D.value, n = i.length;
if (!n) return;
const r = a.down ? 1 : -1;
let v = (Math.max(-1, V.value + r) + n) % n, C = i[v];
for (let Se = 0; (C.disabled || C.group) && Se < n; ++Se)
v += r, v = (v + n) % n, C = i[v];
j(v);
}
],
[
() => a.enter || !t.filter && a.space,
() => {
V.value >= 0 ? ie(pe.value[V.value]) : Fe.value ? ie(L) : q(!1);
}
]
],
{
beforeMatchAny: () => {
e.preventDefault(), e.stopPropagation();
},
afterMatchAny: a.resetAll
}
);
}
});
const Il = h(() => ({
[s.b()]: !0,
[s.ns("input-vars")]: !0,
[s.bs("vars")]: !0,
[s.bm("inherit")]: t.inherit,
[s.bm("multiple")]: t.multiple,
[s.bm("filter")]: t.filter,
[s.bm("responsive")]: t.multiple && t.maxTagCount <= 0,
[s.bm("disabled")]: t.disabled
})), te = h(() => t.loading && t.loadingLock), Tl = h(() => {
const e = s.be("selector");
return {
[e]: !0,
[`${e}--focused`]: !t.disabled && c.value,
[`${e}--disabled`]: t.disabled,
[`${e}--readonly`]: te.value,
[`${e}--loading`]: t.loading,
[`${e}--${t.size}`]: t.size !== "default",
[`${e}--${t.state}`]: t.state !== "default",
[`${e}--has-prefix`]: Ze.value,
[`${e}--has-suffix`]: !t.noSuffix,
[`${e}--transparent`]: t.transparent
};
}), fe = h(
() => !N(d.value[0]) && (t.multiple || d.value[0] !== "")
), Ze = h(() => !!(ue.prefix || t.prefix || t.slots.prefix)), Fe = h(() => !!(t.filter && t.creatable && L.value && !Ce.has(L.value))), pe = h(() => Fe.value ? [L].concat(D.value) : D.value), ce = h(() => Z.value.filter((e) => !e.group)), Al = h(() => {
const e = ce.value, a = /* @__PURE__ */ new Map();
for (let i = 0, n = e.length; i < n; ++i) {
const r = e[i];
r.parent && a.set(r.value, r.parent);
}
return a;
}), el = h(() => !t.disabled && !te.value && t.clearable && Xe.value && fe.value), ae = h(() => !t.noPreview && c.value ? Ae.value : void 0), ll = h(() => t.multiple && t.countLimit > 0 && d.value.length >= t.countLimit), Ll = h(() => t.filterPosition !== "in-control" ? !fe.value && !ae.value && !!(t.placeholder ?? Y.value.placeholder) : !_.value && !(fe.value && (t.noPreview || t.multiple || !c.value)) && !(!ae.value && !(t.placeholder ?? Y.value.placeholder)) && !(c.value && P.value));
function I(e) {
return N(e) ? null : le.value.get(e) ?? E.get(e) ?? null;
}
function tl() {
requestAnimationFrame(() => {
var e;
de(), H.value && ((e = W.value) != null && e.wrapper) && (typeof t.fitPopper == "number" ? W.value.wrapper.style.width = `${t.fitPopper}px` : t.fitPopper ? W.value.wrapper.style.width = `${H.value.offsetWidth}px` : W.value.wrapper.style.minWidth = `${H.value.offsetWidth}px`);
});
}
G(
() => t.visible,
(e) => {
c.value = e;
}
), G(c, (e) => {
e && (A.value = !1, Me(), tl()), t.filterPosition !== "in-control" ? requestAnimationFrame(se) : se();
}), G(
() => t.value,
(e) => {
(!g || !bl(e, g)) && (g = e, al(e), se());
}
), G(
() => t.disabled,
(e) => {
e && q(!1);
}
), G(te, (e) => {
e && q(!1);
}), G(P, (e) => {
L.value = e, L.label = e, L.data = e, il(e);
}), cl({
idFor: He,
labelId: We,
currentVisible: c,
currentValues: d,
currentLabels: y,
optionStates: Z,
isHover: Xe,
currentFilter: P,
composing: _,
visibleOptions: D,
totalOptions: pe,
wrapper: H,
reference: ee,
popper: W,
input: k,
device: ke,
virtualList: xe,
restTip: we,
updatePopper: de,
isSelected: F,
getOptionFromMap: I,
updateHitting: j,
handleClear: sl,
focus: Ee,
blur: () => {
var e, a;
(e = k.value) == null || e.blur(), (a = ee.value) == null || a.blur();
}
}), Wl(() => {
se(), t.visible && (A.value = !1, Me(), tl());
});
function al(e) {
if (N(e)) {
d.value = [], y.value = [];
return;
}
const a = Array.isArray(e) ? e : [e], i = new Set(a), n = [], r = [];
i.forEach((v) => {
let C = I(v);
C ? (n.push(C.value), r.push(C.label), E.has(C.value) || E.set(C.value, C)) : t.remote && (C = ge({
value: v,
disabled: !1,
divided: !1,
title: "",
label: String(v),
group: !1,
depth: -1,
parent: null,
hidden: !0,
hitting: !1,
data: v
}), E.set(v, C), n.push(v), r.push(C.label));
});
for (const v of Array.from(E.keys()))
i.has(v) || E.delete(v);
d.value = n, y.value = r, Me(), il(P.value);
}
function Me() {
const e = d.value[0];
if (N(e))
j(-1);
else {
if (!$l.value) return;
j(D.value.findIndex((a) => a.value === e));
}
}
function q(e) {
c.value !== e && (c.value = e, X("update:visible", e), T(t.onToggle, e));
}
function j(e, a = !0) {
V.value = e, Ae.value = void 0;
let i = -1;
Z.value.forEach((n) => {
n.hidden ? n.hitting = !1 : (i += 1, n.hitting = e === i, n.hitting && (Ae.value = n));
}), a && c.value && xe.value && xe.value.ensureIndexInView(e);
}
function F(e) {
return t.multiple ? d.value.includes(e.value) : d.value[0] === e.value;
}
function il(e) {
const a = t.filter;
if (!(!a || t.remote)) {
if (!e)
Z.value.forEach((i) => {
i.hidden = !1;
});
else {
if (Z.value.forEach((n) => {
n.hidden = !0;
}), typeof a == "function")
ce.value.forEach((n) => {
n.hidden = !a(e, n);
});
else if (t.ignoreCase) {
const n = e.toString().toLocaleLowerCase();
ce.value.forEach((r) => {
var v;
r.hidden = !((v = r.label) != null && v.toString().toLocaleLowerCase().includes(n));
});
} else
ce.value.forEach((n) => {
var r;
n.hidden = !((r = n.label) != null && r.toString().includes(e == null ? void 0 : e.toString()));
});
const i = Al.value;
ce.value.forEach((n) => {
if (!n.hidden && n.parent) {
let r = i.get(n.value) || null;
for (; r && r.hidden; )
r.hidden = !1, r = r.parent;
}
});
}
j(V.value);
}
}
function Oe(e) {
t.disabled || te.value || !N(e) && ie(I(e));
}
function Fl(e) {
var a;
Oe(e), A.value && ((a = we.value) == null || a.updatePopper());
}
function ie(e) {
if (!e) return;
const a = F(e), i = e.value;
if (a)
z.value.find((n) => n.value === i) && (ot(z.value, (n) => n.value === i), le.value.delete(i)), E.delete(i);
else {
if (t.multiple || (z.value.length = 0), ll.value) return;
if (L.value && i === L.value) {
const n = { ...L };
z.value.push(n), le.value.set(i, n);
}
E.set(e.value, e);
}
T(
t[t.multiple && a ? "onCancel" : "onSelect"],
i,
e.data
), Ml(e), t.multiple ? (t.filterPosition === "in-control" && (P.value = "", se()), requestAnimationFrame(de)) : q(!1), ye.value = 0;
}
function Ml(e) {
if (t.multiple) {
if (F(e)) {
const a = d.value.findIndex((i) => i === e.value);
~a && (d.value.splice(a, 1), y.value.splice(a, 1));
} else
d.value.push(e.value), y.value.push(e.label);
g = Array.from(d.value), X("update:value", g), X("update:label", y.value), je(g), T(
t.onChange,
g,
g.map((a) => {
var i;
return ((i = I(a)) == null ? void 0 : i.data) ?? a;
})
), qe();
} else {
const a = d.value[0];
d.value.length = 0, y.value.length = 0, d.value.push(e.value), y.value.push(e.label), a !== e.value && (g = e.value, X("update:value", g), X("update:label", y.value[0]), je(g), T(t.onChange, g, e.data), qe());
}
}
function ve() {
t.disabled || te.value || q(!c.value);
}
function Ol() {
A.value = !1, T(t.onClickOutside), t.outsideClose && c.value && (q(!1), T(t.onOutsideClose));
}
function sl() {
if (!(t.disabled || te.value) && t.clearable) {
for (const e of z.value)
le.value.delete(e.value);
E.clear(), z.value.length = 0, d.value.length = 0, y.value.length = 0, A.value = !1, g = t.multiple ? [] : "", se(), X("update:value", g), T(t.onChange, g, t.multiple ? [] : ""), T(t.onClear), Cl(g), de();
}
}
let be = !1;
function $e(e) {
be || (be = !0, T(t.onFocus, e));
}
function Pe(e) {
be && (be = !1, setTimeout(() => {
be || T(t.onBlur, e);
}, 120));
}
function se() {
if (!k.value) return;
const e = c.value;
t.multiple ? k.value.value = "" : k.value.value = e ? "" : y.value[0] || "", e ? k.value.focus() : k.value.blur();
}
function _e() {
if (!k.value || _.value) return;
let e;
P.value = k.value.value, P.value ? Fe.value || V.value !== -1 ? e = 0 : (e = D.value.findIndex(
(a) => String(a.label) === P.value
), e = e === -1 ? 0 : e) : e = -1, requestAnimationFrame(() => {
e || (e = D.value.findIndex(
(a) => !d.value.includes(a.value)
)), e !== V.value && j(e), t.multiple && ke.value && (ye.value = ut(ke.value)), de();
}), T(t.onFilterInput, P.value);
}
function ne() {
_.value && (_.value = !1, k.value && k.value.dispatchEvent(new Event("input")));
}
function nl(e) {
k.value && t.filterPosition !== "in-list" && e.key === "Backspace" && !k.value.value && !N(dl(d.value)) && (e.stopPropagation(), Oe(dl(d.value)));
}
function _l() {
c.value ? (ve(), A.value = !1) : (A.value = !A.value, A.value && ql(() => {
var e;
(e = we.value) == null || e.updatePopper();
}));
}
function Ee(e) {
var a, i;
c.value ? (a = k.value || ee.value) == null || a.focus(e) : (i = ee.value) == null || i.focus(e);
}
return (e, a) => (f(), m("div", {
id: l(He),
ref_key: "wrapper",
ref: H,
class: o(Il.value),
role: "group",
"aria-disabled": l(fl)(l(t).disabled),
"aria-expanded": l(fl)(c.value),
"aria-haspopup": "listbox",
"aria-labelledby": l(We),
onClick: ve
}, [
O("div", {
ref_key: "reference",
ref: ee,
class: o(Tl.value),
tabindex: "0",
onFocus: $e,
onBlur: a[9] || (a[9] = (i) => {
(!l(t).filter || !c.value) && Pe(i);
})
}, [
Ze.value ? (f(), m("div", {
key: 0,
class: o([l(s).be("icon"), l(s).be("prefix")]),
style: B({ color: l(t).prefixColor })
}, [
x(e.$slots, "prefix", {}, () => [
p(l($), {
renderer: l(t).slots.prefix
}, {
default: u(() => [
p(l(U), {
icon: l(t).prefix
}, null, 8, ["icon"])
]),
_: 1
}, 8, ["renderer"])
])
], 6)) : w("", !0),
O("div", {
class: o(l(s).be("control"))
}, [
x(e.$slots, "control", {}, () => [
p(l($), {
renderer: l(t).slots.control
}, {
default: u(() => [
l(t).multiple ? (f(), m(oe, { key: 0 }, [
p(l(ct), {
inherit: "",
class: o([l(s).be("tags")]),
items: d.value,
"max-count": l(t).maxTagCount,
style: B({
maxWidth: l(t).maxTagCount <= 0 && `calc(100% - ${ye.value}px)`
}),
onRestChange: a[0] || (a[0] = (i) => Je.value = i)
}, {
default: u(({ item: i, index: n }) => [
p(l(Te), {
inherit: "",
class: o(l(s).be("tag")),
type: l(t).tagType,
closable: "",
disabled: l(t).disabled,
onClick: J(ve, ["stop"]),
onClose: (r) => Oe(i)
}, {
default: u(() => [
O("span", {
class: o(l(s).be("label"))
}, [
x(e.$slots, "selected", {
option: I(i)
}, () => [
p(l($), {
renderer: l(t).slots.selected,
data: { option: I(i) }
}, {
default: u(() => [
K(S(y.value[n]), 1)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2)
]),
_: 2
}, 1032, ["class", "type", "disabled", "onClose"])
]),
counter: u(({ count: i }) => [
l(t).noRestTip ? (f(), Q(l(Te), {
key: 0,
inherit: "",
class: o([l(s).be("tag"), l(s).be("counter")]),
type: l(t).tagType,
disabled: l(t).disabled,
onClick: J(ve, ["stop"])
}, {
default: u(() => [
K(S(`+${i}`), 1)
]),
_: 2
}, 1032, ["class", "type", "disabled"])) : (f(), m("span", kt, [
p(l(vt), {
ref_key: "restTip",
ref: we,
inherit: "",
transfer: !1,
visible: A.value,
trigger: "custom",
placement: "top-end",
"tip-class": l(s).be("rest-tip"),
onClick: J(_l, ["stop"])
}, {
trigger: u(() => [
p(l(Te), {
inherit: "",
class: o([l(s).be("tag"), l(s).be("counter")]),
type: l(t).tagType,
disabled: l(t).disabled
}, {
default: u(() => [
K(S(`+${i}`), 1)
]),
_: 2
}, 1032, ["class", "type", "disabled"])
]),
default: u(() => [
p(l(bt), {
inherit: "",
"use-y-bar": ""
}, {
default: u(() => [
(f(!0), m(oe, null, jl(d.value, (n, r) => (f(), m(oe, { key: r }, [
r >= d.value.length - Je.value ? (f(), Q(l(Te), {
key: 0,
inherit: "",
class: o(l(s).be("tag")),
closable: "",
type: l(t).tagType,
disabled: l(t).disabled,
onClose: (v) => Fl(n)
}, {
default: u(() => [
O("span", {
class: o(l(s).be("label"))
}, [
x(e.$slots, "selected", {
option: I(n)
}, () => [
p(l($), {
renderer: l(t).slots.selected,
data: { option: I(n) }
}, {
default: u(() => [
K(S(y.value[r]), 1)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 2)
]),
_: 2
}, 1032, ["class", "type", "disabled", "onClose"])) : w("", !0)
], 64))), 128))
]),
_: 3
})
]),
_: 2
}, 1032, ["visible", "tip-class"])
]))
]),
_: 3
}, 8, ["class", "items", "max-count", "style"]),
l(t).filter && l(t).filterPosition === "in-control" ? (f(), m("div", {
key: 0,
class: o(l(s).be("anchor")),
style: B({
width: `${ye.value}px`
})
}, [
O("input", {
ref_key: "nativeInput",
ref: Le,
class: o([
l(s).be("input"),
l(s).bem("input", "multiple"),
c.value && l(s).bem("input", "visible")
]),
disabled: l(t).disabled,
autocomplete: "off",
tabindex: "-1",
role: "combobox",
"aria-autocomplete": "list",
name: l(t).name,
onSubmit: a[1] || (a[1] = J(() => {
}, ["prevent"])),
onInput: _e,
onKeydown: nl,
onFocus: a[2] || (a[2] = (i) => $e(i)),
onBlur: a[3] || (a[3] = (i) => Pe(i)),
onCompositionstart: a[4] || (a[4] = (i) => _.value = !0),
onCompositionend: ne,
onChange: ne
}, null, 42, xt),
O("span", {
ref_key: "device",
ref: ke,
class: o(l(s).be("device")),
"aria-hidden": "true"
}, S(P.value), 3)
], 6)) : w("", !0)
], 64)) : (f(), m(oe, { key: 1 }, [
l(t).filter && l(t).filterPosition === "in-control" ? (f(), m("input", {
key: 0,
ref_key: "nativeInput",
ref: Le,
class: o([l(s).be("input"), c.value && l(s).bem("input", "visible")]),
disabled: l(t).disabled,
autocomplete: "off",
tabindex: "-1",
role: "combobox",
"aria-autocomplete": "list",
name: l(t).name,
style: B({
opacity: c.value ? void 0 : "0%"
}),
onSubmit: a[5] || (a[5] = J(() => {
}, ["prevent"])),
onInput: _e,
onFocus: a[6] || (a[6] = (i) => $e(i)),
onBlur: a[7] || (a[7] = (i) => Pe(i)),
onCompositionstart: a[8] || (a[8] = (i) => _.value = !0),
onCompositionend: ne,
onChange: ne
}, null, 46, wt)) : w("", !0),
(l(t).noPreview || !c.value) && fe.value && (l(t).filterPosition !== "in-control" || !P.value) ? (f(), m("span", {
key: 1,
class: o({
[l(s).be("selected")]: !0,
[l(s).bem("selected", "placeholder")]: l(t).filter && c.value && fe.value
})
}, [
I(d.value[0]) ? x(e.$slots, "selected", {
key: 0,
option: I(d.value[0])
}, () => [
p(l($), {
renderer: l(t).slots.selected,
data: { option: I(d.value[0]) }
}, {
default: u(() => [
K(S(y.value[0]), 1)
]),
_: 1
}, 8, ["renderer", "data"])
]) : (f(), m(oe, { key: 1 }, [
K(S(y.value[0]), 1)
], 64))
], 2)) : w("", !0)
], 64)),
Ll.value ? (f(), m("span", {
key: 2,
class: o(l(s).be("placeholder"))
}, [
ae.value ? x(e.$slots, "selected", {
key: 0,
preview: !0,
option: ae.value
}, () => [
p(l($), {
renderer: l(t).slots.selected,
data: { preview: !0, option: ae.value }
}, {
default: u(() => [
K(S(ae.value.label), 1)
]),
_: 1
}, 8, ["renderer", "data"])
]) : (f(), m(oe, { key: 1 }, [
K(S(l(t).placeholder ?? l(Y).placeholder), 1)
], 64))
], 2)) : w("", !0)
]),
_: 3
}, 8, ["renderer"])
])
], 2),
l(t).noSuffix ? l(t).clearable || l(t).loading ? (f(), m("div", {
key: 2,
class: o([l(s).be("icon"), l(s).bem("icon", "placeholder"), l(s).be("suffix")])
}, null, 2)) : w("", !0) : (f(), m("div", {
key: 1,
class: o([l(s).be("icon"), l(s).be("suffix")]),
style: B({
color: l(t).suffixColor,
opacity: el.value || l(t).loading ? "0%" : ""
})
}, [
x(e.$slots, "suffix", {}, () => [
p(l($), {
renderer: l(t).slots.suffix
}, {
default: u(() => [
l(t).suffix ? (f(), Q(l(U), {
key: 0,
icon: l(t).suffix,
class: o({
[l(s).be("arrow")]: !l(t).staticSuffix
})
}, null, 8, ["icon", "class"])) : (f(), Q(l(U), Ie({ key: 1 }, l(R).angleDown, {
class: l(s).be("arrow")
}), null, 16, ["class"]))
]),
_: 1
}, 8, ["renderer"])
])
], 6)),
p(ul, {
name: l(s).ns("fade"),
appear: ""
}, {
default: u(() => [
el.value ? (f(), m("button", {
key: 0,
class: o([l(s).be("icon"), l(s).be("clear")]),
type: "button",
tabindex: "-1",
"aria-label": l(Y).ariaLabel.clear,
onClick: J(sl, ["stop"])
}, [
p(l(U), Ie(l(R).clear, { label: "clear" }), null, 16)
], 10, $t)) : l(t).loading ? (f(), m("div", {
key: 1,
class: o([l(s).be("icon"), l(s).be("loading")])
}, [
p(l(U), Ie(l(R).loading, {
effect: l(t).loadingEffect || l(R).loading.effect,
icon: l(t).loadingIcon || l(R).loading.icon,
label: "loading"
}), null, 16, ["effect", "icon"])
], 2)) : w("", !0)
]),
_: 1
}, 8, ["name"])
], 34),
p(l(mt), {
ref_key: "popper",
ref: W,
class: o([l(s).be("popper"), l(s).bs("vars")]),
visible: c.value,
to: l(Ue),
transition: l(t).transitionName,
alive: l(t).popperAlive ?? !l(Ue),
onClick: J(Ee, ["stop"]),
onAfterLeave: a[11] || (a[11] = (i) => P.value = "")
}, {
default: u(() => [
x(e.$slots, "list", {
options: pe.value,
isSelected: F,
handleSelect: ie
}, () => [
p(l($), {
renderer: l(t).slots.list,
data: { options: pe.value, isSelected: F, handleSelect: ie }
}, {
default: u(() => [
O("div", {
class: o([
l(s).be("list"),
(ue.prepend || ue.append) && l(s).bem("list", "with-extra"),
l(t).listClass
])
}, [
l(t).filter && l(t).filterPosition === "in-list" ? (f(), m("div", {
key: 0,
class: o(l(s).be("filter"))
}, [
p(l(ht), {
ref_key: "filterInput",
ref: Qe,
class: o(l(s).be("filter-input")),
transparent: "",
disabled: l(t).disabled,
placeholder: l(Y).search,
autocomplete: !1,
tabindex: -1,
role: "combobox",
"aria-autocomplete": "list",
onInput: _e,
onKeydown: nl,
onFocus: $e,
onBlur: Pe,
onCompositionstart: a[10] || (a[10] = (i) => _.value = !0),
onCompositionend: ne,
onChange: ne
}, {
suffix: u(() => [
p(l(U), Gl(Jl(l(R).search)), null, 16)
]),
_: 1
}, 8, ["class", "disabled", "placeholder"])
], 2)) : w("", !0),
ue.prepend || l(t).slots.prepend ? x(e.$slots, "prepend", { key: 1 }, () => [
p(l($), {
renderer: l(t).slots.prepend
}, null, 8, ["renderer"])
]) : w("", !0),
p(l(gt), {
ref_key: "virtualList",
ref: xe,
inherit: "",
style: B({
height: void 0,
maxHeight: `${l(t).maxListHeight}px`
}),
items: pe.value,
"item-size": 32,
"use-y-bar": "",
height: "100%",
"id-key": "value",
"items-attrs": {
class: [l(s).be("options"), l(t).optionCheck ? l(s).bem("options", "has-check") : ""],
role: "listbox",
ariaLabel: "options",
ariaMultiselectable: l(t).multiple
}
}, {
default: u(({ item: i, index: n }) => [
i.group ? (f(), m("li", {
key: 0,
class: o([l(s).ns("option-vars"), l(s).be("group")]),
title: i.label
}, [
x(e.$slots, "group", {
option: i,
index: n
}, () => [
p(l($), {
renderer: l(t).slots.group,
data: { option: i, index: n }
}, {
default: u(() => [
O("div", {
class: o([l(s).be("label"), l(s).bem("label", "group")]),
style: B({ paddingInlineStart: `${i.depth * 6}px` })
}, S(i.label), 7)
]),
_: 2
}, 1032, ["renderer", "data"])
])
], 10, Pt)) : (f(), Q(l(yt), {
key: 1,
label: i.label,
value: i.value,
disabled: i.disabled || ll.value && !F(i),
divided: i.divided,
"no-title": i.title,
hitting: i.hitting,
selected: F(i),
"no-hover": "",
onSelect: (r) => ie(i),
onMousemove: (r) => j(n, !1)
}, {
default: u(() => [
x(e.$slots, "default", {
option: i,
index: n,
selected: F(i)
}, () => [
p(l($), {
renderer: l(t).slots.default,
data: { option: i, index: n, selected: F(i) }
}, {
default: u(() => [
O("span", {
class: o(l(s).be("label")),
style: B({ paddingInlineStart: `${i.depth * 6}px` })
}, S(i.label), 7),
l(t).optionCheck ? (f(), Q(ul, {
key: 0,
name: l(s).ns("fade"),
appear: ""
}, {
default: u(() => [
F(i) ? (f(), Q(l(U), Ie({ key: 0 }, l(R).check, {
class: l(s).be("check")
}), null, 16, ["class"])) : w("", !0)
]),
_: 2
}, 1032, ["name"])) : w("", !0)
]),
_: 2
}, 1032, ["renderer", "data"])
])
]),
_: 2
}, 1032, ["label", "value", "disabled", "divided", "no-title", "hitting", "selected", "onSelect", "onMousemove"]))
]),
empty: u(() => [
O("div", {
class: o(l(s).be("empty"))
}, [
x(e.$slots, "empty", {}, () => [
p(l($), {
renderer: l(t).slots.empty
}, {
default: u(() => [
K(S(l(t).emptyText ?? l(Y).empty), 1)
]),
_: 1
}, 8, ["renderer"])
])
], 2)
]),
_: 3
}, 8, ["style", "items", "items-attrs"]),
ue.append || l(t).slots.append ? x(e.$slots, "append", { key: 2 }, () => [
p(l($), {
renderer: l(t).slots.append
}, null, 8, ["renderer"])
]) : w("", !0)
], 2)
]),
_: 3
}, 8, ["renderer", "data"])
])
]),
_: 3
}, 8, ["class", "visible", "to", "transition", "alive"])
], 10, Ct));
}
});
export {
la as default
};
//# sourceMappingURL=select.vue2.mjs.map