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