sd-component-library
Version:
A Vue3 + Element Plus components library
1,339 lines (1,338 loc) • 46.1 kB
JavaScript
import { getCurrentInstance as te, inject as pe, ref as E, computed as f, shallowRef as ul, watch as H, unref as I, onMounted as Ee, nextTick as W, defineComponent as X, createElementBlock as V, createBlock as z, openBlock as S, normalizeStyle as ee, normalizeClass as g, createElementVNode as T, createCommentVNode as $, renderSlot as k, withModifiers as N, withCtx as D, createVNode as A, Transition as ut, toRaw as rt, toRefs as Be, reactive as fe, onBeforeUnmount as rl, withDirectives as ce, toDisplayString as K, vShow as Ne, watchEffect as ct, provide as cl, resolveComponent as Y, resolveDirective as dt, toHandlerKey as pt, Fragment as el, renderList as ll, createTextVNode as tl, withKeys as ie, vModelText as ft, resolveDynamicComponent as De, isVNode as vt } from "vue";
import { j as ue, u as J, g as mt, h as nl, l as ht, E as bt, m as gt } from "./index-ran13ZnV.js";
import { j as yt, e as Q, i as de, l as St, q as Ct, C as Ot, E as Et } from "./index-wLHcMAiU.js";
import { c as wt, l as dl, E as $e, y as ol, o as Vt, p as Tt, V as It, s as kt, i as al, x as Dt, f as $t } from "./use-form-common-props-OaJxnfm7.js";
import { b as we, i as P, k as Me, x as Mt, _ as ve, u as le, w as pl, t as Rt, s as U, e as fl, h as j, p as Oe, A as sl, c as Lt, j as Bt, B as Nt, l as Ft, d as re, o as vl } from "./base-B4QkiMzD.js";
import { g as x, u as zt, U as _, C as ml } from "./event-DTJXlN9S.js";
import { h as Pt, j as Wt } from "./index-CAnh-j1Y.js";
import { s as At, f as Kt } from "./vnode-CphlQsmd.js";
function Ht(e, s, o, b) {
e.length;
for (var i = o + 1; i--; )
if (s(e[i], i, e))
return i;
return -1;
}
function Ut(e, s, o) {
var b = e == null ? 0 : e.length;
if (!b)
return -1;
var i = b - 1;
return Ht(e, yt(s), i);
}
const jt = Symbol("emptyValuesContextKey"), Gt = "use-empty-values", qt = ["", void 0, null], Qt = void 0, Yt = we({
emptyValues: Array,
valueOnClear: {
type: [String, Number, Boolean, Function],
default: void 0,
validator: (e) => P(e) ? !e() : !e
}
}), Jt = (e, s) => {
const o = te() ? pe(jt, E({})) : E({}), b = f(() => e.emptyValues || o.value.emptyValues || qt), i = f(() => P(e.valueOnClear) ? e.valueOnClear() : e.valueOnClear !== void 0 ? e.valueOnClear : P(o.value.valueOnClear) ? o.value.valueOnClear() : o.value.valueOnClear !== void 0 ? o.value.valueOnClear : Qt), y = (t) => b.value.includes(t);
return b.value.includes(i.value) || Me(Gt, "value-on-clear should be a value of empty-values"), {
emptyValues: b,
valueOnClear: i,
isEmptyValue: y
};
};
function Xt(e, {
disabled: s,
beforeFocus: o,
afterFocus: b,
beforeBlur: i,
afterBlur: y
} = {}) {
const t = te(), { emit: v } = t, m = ul(), u = E(!1), p = (a) => {
const d = P(o) ? o(a) : !1;
I(s) || u.value || d || (u.value = !0, v("focus", a), b == null || b());
}, c = (a) => {
var d;
const O = P(i) ? i(a) : !1;
I(s) || a.relatedTarget && ((d = m.value) != null && d.contains(a.relatedTarget)) || O || (u.value = !1, v("blur", a), y == null || y());
}, r = (a) => {
var d, O;
I(s) || Pt(a.target) || (d = m.value) != null && d.contains(document.activeElement) && m.value !== document.activeElement || (O = e.value) == null || O.focus();
};
return H([m, () => I(s)], ([a, d]) => {
a && (d ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "-1"));
}), ue(m, "focus", p, !0), ue(m, "blur", c, !0), ue(m, "click", r, !0), process.env.NODE_ENV === "test" && Ee(() => {
const a = Mt(e.value) ? e.value : document.querySelector("input,textarea");
a && (ue(a, "focus", p, !0), ue(a, "blur", c, !0));
}), {
isFocused: u,
wrapperRef: m,
handleFocus: p,
handleBlur: c
};
}
const Zt = (e) => /([\uAC00-\uD7AF\u3130-\u318F])+/gi.test(e);
function _t({
afterComposition: e,
emit: s
}) {
const o = E(!1), b = (v) => {
s == null || s("compositionstart", v), o.value = !0;
}, i = (v) => {
var m;
s == null || s("compositionupdate", v);
const u = (m = v.target) == null ? void 0 : m.value, p = u[u.length - 1] || "";
o.value = !Zt(p);
}, y = (v) => {
s == null || s("compositionend", v), o.value && (o.value = !1, W(() => e(v)));
};
return {
isComposing: o,
handleComposition: (v) => {
v.type === "compositionend" ? y(v) : i(v);
},
handleCompositionStart: b,
handleCompositionUpdate: i,
handleCompositionEnd: y
};
}
const Re = we({
type: {
type: String,
values: ["primary", "success", "info", "warning", "danger"],
default: "primary"
},
closable: Boolean,
disableTransitions: Boolean,
hit: Boolean,
color: String,
size: {
type: String,
values: wt
},
effect: {
type: String,
values: ["dark", "light", "plain"],
default: "light"
},
round: Boolean
}), xt = {
close: (e) => e instanceof MouseEvent,
click: (e) => e instanceof MouseEvent
}, en = X({
name: "ElTag"
}), ln = /* @__PURE__ */ X({
...en,
props: Re,
emits: xt,
setup(e, { emit: s }) {
const o = e, b = dl(), i = le("tag"), y = f(() => {
const { type: u, hit: p, effect: c, closable: r, round: a } = o;
return [
i.b(),
i.is("closable", r),
i.m(u || "primary"),
i.m(b.value),
i.m(c),
i.is("hit", p),
i.is("round", a)
];
}), t = (u) => {
s("close", u);
}, v = (u) => {
s("click", u);
}, m = (u) => {
var p, c, r;
(r = (c = (p = u == null ? void 0 : u.component) == null ? void 0 : p.subTree) == null ? void 0 : c.component) != null && r.bum && (u.component.subTree.component.bum = null);
};
return (u, p) => u.disableTransitions ? (S(), V("span", {
key: 0,
class: g(I(y)),
style: ee({ backgroundColor: u.color }),
onClick: v
}, [
T("span", {
class: g(I(i).e("content"))
}, [
k(u.$slots, "default")
], 2),
u.closable ? (S(), z(I($e), {
key: 0,
class: g(I(i).e("close")),
onClick: N(t, ["stop"])
}, {
default: D(() => [
A(I(ol))
]),
_: 1
}, 8, ["class", "onClick"])) : $("v-if", !0)
], 6)) : (S(), z(ut, {
key: 1,
name: `${I(i).namespace.value}-zoom-in-center`,
appear: "",
onVnodeMounted: m
}, {
default: D(() => [
T("span", {
class: g(I(y)),
style: ee({ backgroundColor: u.color }),
onClick: v
}, [
T("span", {
class: g(I(i).e("content"))
}, [
k(u.$slots, "default")
], 2),
u.closable ? (S(), z(I($e), {
key: 0,
class: g(I(i).e("close")),
onClick: N(t, ["stop"])
}, {
default: D(() => [
A(I(ol))
]),
_: 1
}, 8, ["class", "onClick"])) : $("v-if", !0)
], 6)
]),
_: 3
}, 8, ["name"]));
}
});
var tn = /* @__PURE__ */ ve(ln, [["__file", "tag.vue"]]);
const nn = pl(tn);
function on() {
const e = ul(), s = E(0), o = 11, b = f(() => ({
minWidth: `${Math.max(s.value, o)}px`
}));
return J(e, () => {
var y, t;
s.value = (t = (y = e.value) == null ? void 0 : y.getBoundingClientRect().width) != null ? t : 0;
}), {
calculatorRef: e,
calculatorWidth: s,
inputStyle: b
};
}
const hl = Symbol("ElSelectGroup"), Ve = Symbol("ElSelect"), Le = "ElOption", an = we({
value: {
type: [String, Number, Boolean, Object],
required: !0
},
label: {
type: [String, Number]
},
created: Boolean,
disabled: Boolean
}), sn = (e = "") => e.replace(/[|\\{}()[\]^$+*?.]/g, "\\$&").replace(/-/g, "\\x2d");
function un(e, s) {
const o = pe(Ve);
o || Rt(Le, "usage: <el-select><el-option /></el-select/>");
const b = pe(hl, { disabled: !1 }), i = f(() => p(Q(o.props.modelValue), e.value)), y = f(() => {
var a;
if (o.props.multiple) {
const d = Q((a = o.props.modelValue) != null ? a : []);
return !i.value && d.length >= o.props.multipleLimit && o.props.multipleLimit > 0;
} else
return !1;
}), t = f(() => {
var a;
return (a = e.label) != null ? a : U(e.value) ? "" : e.value;
}), v = f(() => e.value || e.label || ""), m = f(() => e.disabled || s.groupDisabled || y.value), u = te(), p = (a = [], d) => {
if (U(e.value)) {
const O = o.props.valueKey;
return a && a.some((M) => rt(x(M, O)) === x(d, O));
} else
return a && a.includes(d);
}, c = () => {
!e.disabled && !b.disabled && (o.states.hoveringIndex = o.optionsArray.indexOf(u.proxy));
}, r = (a) => {
const d = new RegExp(sn(a), "i");
s.visible = d.test(String(t.value)) || e.created;
};
return H(() => t.value, () => {
!e.created && !o.props.remote && o.setSelected();
}), H(() => e.value, (a, d) => {
const { remote: O, valueKey: M } = o.props;
if ((O ? a !== d : !de(a, d)) && (o.onOptionDestroy(d, u.proxy), o.onOptionCreate(u.proxy)), !e.created && !O) {
if (M && U(a) && U(d) && a[M] === d[M])
return;
o.setSelected();
}
}), H(() => b.disabled, () => {
s.groupDisabled = b.disabled;
}, { immediate: !0 }), {
select: o,
currentLabel: t,
currentValue: v,
itemSelected: i,
isDisabled: m,
hoverItem: c,
updateOption: r
};
}
const rn = X({
name: Le,
componentName: Le,
props: an,
setup(e) {
const s = le("select"), o = fl(), b = f(() => [
s.be("dropdown", "item"),
s.is("disabled", I(v)),
s.is("selected", I(t)),
s.is("hovering", I(r))
]), i = fe({
index: -1,
groupDisabled: !1,
visible: !0,
hover: !1
}), {
currentLabel: y,
itemSelected: t,
isDisabled: v,
select: m,
hoverItem: u,
updateOption: p
} = un(e, i), { visible: c, hover: r } = Be(i), a = te().proxy;
m.onOptionCreate(a), rl(() => {
const O = a.value, { selected: M } = m.states, R = M.some((C) => C.value === a.value);
W(() => {
m.states.cachedOptions.get(O) === a && !R && m.states.cachedOptions.delete(O);
}), m.onOptionDestroy(O, a);
});
function d() {
v.value || m.handleOptionSelect(a);
}
return {
ns: s,
id: o,
containerKls: b,
currentLabel: y,
itemSelected: t,
isDisabled: v,
select: m,
visible: c,
hover: r,
states: i,
hoverItem: u,
updateOption: p,
selectOptionClick: d
};
}
});
function cn(e, s) {
return ce((S(), V("li", {
id: e.id,
class: g(e.containerKls),
role: "option",
"aria-disabled": e.isDisabled || void 0,
"aria-selected": e.itemSelected,
onMousemove: e.hoverItem,
onClick: N(e.selectOptionClick, ["stop"])
}, [
k(e.$slots, "default", {}, () => [
T("span", null, K(e.currentLabel), 1)
])
], 42, ["id", "aria-disabled", "aria-selected", "onMousemove", "onClick"])), [
[Ne, e.visible]
]);
}
var Fe = /* @__PURE__ */ ve(rn, [["render", cn], ["__file", "option.vue"]]);
const dn = X({
name: "ElSelectDropdown",
componentName: "ElSelectDropdown",
setup() {
const e = pe(Ve), s = le("select"), o = f(() => e.props.popperClass), b = f(() => e.props.multiple), i = f(() => e.props.fitInputWidth), y = E("");
function t() {
var v;
y.value = `${(v = e.selectRef) == null ? void 0 : v.offsetWidth}px`;
}
return Ee(() => {
t(), J(e.selectRef, t);
}), {
ns: s,
minWidth: y,
popperClass: o,
isMultiple: b,
isFitInputWidth: i
};
}
});
function pn(e, s, o, b, i, y) {
return S(), V("div", {
class: g([e.ns.b("dropdown"), e.ns.is("multiple", e.isMultiple), e.popperClass]),
style: ee({ [e.isFitInputWidth ? "width" : "minWidth"]: e.minWidth })
}, [
e.$slots.header ? (S(), V("div", {
key: 0,
class: g(e.ns.be("dropdown", "header"))
}, [
k(e.$slots, "header")
], 2)) : $("v-if", !0),
k(e.$slots, "default"),
e.$slots.footer ? (S(), V("div", {
key: 1,
class: g(e.ns.be("dropdown", "footer"))
}, [
k(e.$slots, "footer")
], 2)) : $("v-if", !0)
], 6);
}
var fn = /* @__PURE__ */ ve(dn, [["render", pn], ["__file", "select-dropdown.vue"]]);
const vn = (e, s) => {
const { t: o } = zt(), b = fl(), i = le("select"), y = le("input"), t = fe({
inputValue: "",
options: /* @__PURE__ */ new Map(),
cachedOptions: /* @__PURE__ */ new Map(),
optionValues: [],
selected: [],
selectionWidth: 0,
collapseItemWidth: 0,
selectedLabel: "",
hoveringIndex: -1,
previousQuery: null,
inputHovering: !1,
menuVisibleOnFocus: !1,
isBeforeHide: !1
}), v = E(), m = E(), u = E(), p = E(), c = E(), r = E(), a = E(), d = E(), O = E(), M = E(), R = E(), C = E(!1), F = E(), { form: me, formItem: G } = Vt(), { inputId: gl } = Tt(e, {
formItemContext: G
}), { valueOnClear: yl, isEmptyValue: Sl } = Jt(e), {
isComposing: ze,
handleCompositionStart: Cl,
handleCompositionUpdate: Ol,
handleCompositionEnd: El
} = _t({
afterComposition: (l) => Qe(l)
}), ne = f(() => e.disabled || !!(me != null && me.disabled)), { wrapperRef: Pe, isFocused: We, handleBlur: wl } = Xt(c, {
disabled: ne,
afterFocus() {
e.automaticDropdown && !C.value && (C.value = !0, t.menuVisibleOnFocus = !0);
},
beforeBlur(l) {
var n, h;
return ((n = u.value) == null ? void 0 : n.isFocusInsideContent(l)) || ((h = p.value) == null ? void 0 : h.isFocusInsideContent(l));
},
afterBlur() {
var l;
C.value = !1, t.menuVisibleOnFocus = !1, e.validateEvent && ((l = G == null ? void 0 : G.validate) == null || l.call(G, "blur").catch((n) => Me(n)));
}
}), Te = f(() => j(e.modelValue) ? e.modelValue.length > 0 : !Sl(e.modelValue)), Vl = f(() => {
var l;
return (l = me == null ? void 0 : me.statusIcon) != null ? l : !1;
}), Tl = f(() => e.clearable && !ne.value && t.inputHovering && Te.value), Ae = f(() => e.remote && e.filterable && !e.remoteShowSuffix ? "" : e.suffixIcon), Il = f(() => i.is("reverse", !!(Ae.value && C.value))), Ie = f(() => (G == null ? void 0 : G.validateState) || ""), kl = f(() => Ie.value && It[Ie.value]), Dl = f(() => e.remote ? 300 : 0), $l = f(() => e.remote && !t.inputValue && t.options.size === 0), Ml = f(() => e.loading ? e.loadingText || o("el.select.loading") : e.filterable && t.inputValue && t.options.size > 0 && oe.value === 0 ? e.noMatchText || o("el.select.noMatch") : t.options.size === 0 ? e.noDataText || o("el.select.noData") : null), oe = f(() => L.value.filter((l) => l.visible).length), L = f(() => {
const l = Array.from(t.options.values()), n = [];
return t.optionValues.forEach((h) => {
const w = l.findIndex((B) => B.value === h);
w > -1 && n.push(l[w]);
}), n.length >= l.length ? n : l;
}), Rl = f(() => Array.from(t.cachedOptions.values())), Ll = f(() => {
const l = L.value.filter((n) => !n.created).some((n) => n.currentLabel === t.inputValue);
return e.filterable && e.allowCreate && t.inputValue !== "" && !l;
}), Ke = () => {
e.filterable && P(e.filterMethod) || e.filterable && e.remote && P(e.remoteMethod) || L.value.forEach((l) => {
var n;
(n = l.updateOption) == null || n.call(l, t.inputValue);
});
}, He = dl(), Bl = f(() => ["small"].includes(He.value) ? "small" : "default"), Nl = f({
get() {
return C.value && !$l.value;
},
set(l) {
C.value = l;
}
}), Fl = f(() => {
if (e.multiple && !Oe(e.modelValue))
return Q(e.modelValue).length === 0 && !t.inputValue;
const l = j(e.modelValue) ? e.modelValue[0] : e.modelValue;
return e.filterable || Oe(l) ? !t.inputValue : !0;
}), zl = f(() => {
var l;
const n = (l = e.placeholder) != null ? l : o("el.select.placeholder");
return e.multiple || !Te.value ? n : t.selectedLabel;
}), Pl = f(() => sl ? null : "mouseenter");
H(() => e.modelValue, (l, n) => {
e.multiple && e.filterable && !e.reserveKeyword && (t.inputValue = "", he("")), be(), !de(l, n) && e.validateEvent && (G == null || G.validate("change").catch((h) => Me(h)));
}, {
flush: "post",
deep: !0
}), H(() => C.value, (l) => {
l ? he(t.inputValue) : (t.inputValue = "", t.previousQuery = null, t.isBeforeHide = !0), s("visible-change", l);
}), H(() => t.options.entries(), () => {
Lt && (be(), e.defaultFirstOption && (e.filterable || e.remote) && oe.value && Ue());
}, {
flush: "post"
}), H([() => t.hoveringIndex, L], ([l]) => {
Bt(l) && l > -1 ? F.value = L.value[l] || {} : F.value = {}, L.value.forEach((n) => {
n.hover = F.value === n;
});
}), ct(() => {
t.isBeforeHide || Ke();
});
const he = (l) => {
t.previousQuery === l || ze.value || (t.previousQuery = l, e.filterable && P(e.filterMethod) ? e.filterMethod(l) : e.filterable && e.remote && P(e.remoteMethod) && e.remoteMethod(l), e.defaultFirstOption && (e.filterable || e.remote) && oe.value ? W(Ue) : W(Wl));
}, Ue = () => {
const l = L.value.filter((B) => B.visible && !B.disabled && !B.states.groupDisabled), n = l.find((B) => B.created), h = l[0], w = L.value.map((B) => B.value);
t.hoveringIndex = Ze(w, n || h);
}, be = () => {
if (e.multiple)
t.selectedLabel = "";
else {
const n = j(e.modelValue) ? e.modelValue[0] : e.modelValue, h = je(n);
t.selectedLabel = h.currentLabel, t.selected = [h];
return;
}
const l = [];
Oe(e.modelValue) || Q(e.modelValue).forEach((n) => {
l.push(je(n));
}), t.selected = l;
}, je = (l) => {
let n;
const h = Nt(l);
for (let Z = t.cachedOptions.size - 1; Z >= 0; Z--) {
const q = Rl.value[Z];
if (h ? x(q.value, e.valueKey) === x(l, e.valueKey) : q.value === l) {
n = {
value: l,
currentLabel: q.currentLabel,
get isDisabled() {
return q.isDisabled;
}
};
break;
}
}
if (n)
return n;
const w = h ? l.label : l ?? "";
return {
value: l,
currentLabel: w
};
}, Wl = () => {
t.hoveringIndex = L.value.findIndex((l) => t.selected.some((n) => Se(n) === Se(l)));
}, Al = () => {
t.selectionWidth = Number.parseFloat(window.getComputedStyle(m.value).width);
}, Kl = () => {
t.collapseItemWidth = M.value.getBoundingClientRect().width;
}, ke = () => {
var l, n;
(n = (l = u.value) == null ? void 0 : l.updatePopper) == null || n.call(l);
}, Ge = () => {
var l, n;
(n = (l = p.value) == null ? void 0 : l.updatePopper) == null || n.call(l);
}, qe = () => {
t.inputValue.length > 0 && !C.value && (C.value = !0), he(t.inputValue);
}, Qe = (l) => {
if (t.inputValue = l.target.value, e.remote)
Ye();
else
return qe();
}, Ye = St(() => {
qe();
}, Dl.value), ae = (l) => {
de(e.modelValue, l) || s(ml, l);
}, Hl = (l) => Ut(l, (n) => {
const h = t.cachedOptions.get(n);
return h && !h.disabled && !h.states.groupDisabled;
}), Ul = (l) => {
if (e.multiple && l.code !== Wt.delete && l.target.value.length <= 0) {
const n = Q(e.modelValue).slice(), h = Hl(n);
if (h < 0)
return;
const w = n[h];
n.splice(h, 1), s(_, n), ae(n), s("remove-tag", w);
}
}, jl = (l, n) => {
const h = t.selected.indexOf(n);
if (h > -1 && !ne.value) {
const w = Q(e.modelValue).slice();
w.splice(h, 1), s(_, w), ae(w), s("remove-tag", n.value);
}
l.stopPropagation(), ye();
}, Je = (l) => {
l.stopPropagation();
const n = e.multiple ? [] : yl.value;
if (e.multiple)
for (const h of t.selected)
h.isDisabled && n.push(h.value);
s(_, n), ae(n), t.hoveringIndex = -1, C.value = !1, s("clear"), ye();
}, Xe = (l) => {
var n;
if (e.multiple) {
const h = Q((n = e.modelValue) != null ? n : []).slice(), w = Ze(h, l);
w > -1 ? h.splice(w, 1) : (e.multipleLimit <= 0 || h.length < e.multipleLimit) && h.push(l.value), s(_, h), ae(h), l.created && he(""), e.filterable && !e.reserveKeyword && (t.inputValue = "");
} else
s(_, l.value), ae(l.value), C.value = !1;
ye(), !C.value && W(() => {
ge(l);
});
}, Ze = (l, n) => Oe(n) ? -1 : U(n.value) ? l.findIndex((h) => de(x(h, e.valueKey), Se(n))) : l.indexOf(n.value), ge = (l) => {
var n, h, w, B, Z;
const q = j(l) ? l[0] : l;
let Ce = null;
if (q != null && q.value) {
const se = L.value.filter((it) => it.value === q.value);
se.length > 0 && (Ce = se[0].$el);
}
if (u.value && Ce) {
const se = (B = (w = (h = (n = u.value) == null ? void 0 : n.popperRef) == null ? void 0 : h.contentRef) == null ? void 0 : w.querySelector) == null ? void 0 : B.call(w, `.${i.be("dropdown", "wrap")}`);
se && At(se, Ce);
}
(Z = R.value) == null || Z.handleScroll();
}, Gl = (l) => {
t.options.set(l.value, l), t.cachedOptions.set(l.value, l);
}, ql = (l, n) => {
t.options.get(l) === n && t.options.delete(l);
}, Ql = f(() => {
var l, n;
return (n = (l = u.value) == null ? void 0 : l.popperRef) == null ? void 0 : n.contentRef;
}), Yl = () => {
t.isBeforeHide = !1, W(() => {
var l;
(l = R.value) == null || l.update(), ge(t.selected);
});
}, ye = () => {
var l;
(l = c.value) == null || l.focus();
}, Jl = () => {
var l;
if (C.value) {
C.value = !1, W(() => {
var n;
return (n = c.value) == null ? void 0 : n.blur();
});
return;
}
(l = c.value) == null || l.blur();
}, Xl = (l) => {
Je(l);
}, Zl = (l) => {
if (C.value = !1, We.value) {
const n = new FocusEvent("focus", l);
W(() => wl(n));
}
}, _l = () => {
t.inputValue.length > 0 ? t.inputValue = "" : C.value = !1;
}, _e = () => {
ne.value || (sl && (t.inputHovering = !0), t.menuVisibleOnFocus ? t.menuVisibleOnFocus = !1 : C.value = !C.value);
}, xl = () => {
if (!C.value)
_e();
else {
const l = L.value[t.hoveringIndex];
l && !l.isDisabled && Xe(l);
}
}, Se = (l) => U(l.value) ? x(l.value, e.valueKey) : l.value, et = f(() => L.value.filter((l) => l.visible).every((l) => l.isDisabled)), lt = f(() => e.multiple ? e.collapseTags ? t.selected.slice(0, e.maxCollapseTags) : t.selected : []), tt = f(() => e.multiple ? e.collapseTags ? t.selected.slice(e.maxCollapseTags) : [] : []), xe = (l) => {
if (!C.value) {
C.value = !0;
return;
}
if (!(t.options.size === 0 || oe.value === 0 || ze.value) && !et.value) {
l === "next" ? (t.hoveringIndex++, t.hoveringIndex === t.options.size && (t.hoveringIndex = 0)) : l === "prev" && (t.hoveringIndex--, t.hoveringIndex < 0 && (t.hoveringIndex = t.options.size - 1));
const n = L.value[t.hoveringIndex];
(n.isDisabled || !n.visible) && xe(l), W(() => ge(F.value));
}
}, nt = () => {
if (!m.value)
return 0;
const l = window.getComputedStyle(m.value);
return Number.parseFloat(l.gap || "6px");
}, ot = f(() => {
const l = nt();
return { maxWidth: `${M.value && e.maxCollapseTags === 1 ? t.selectionWidth - t.collapseItemWidth - l : t.selectionWidth}px` };
}), at = f(() => ({ maxWidth: `${t.selectionWidth}px` })), st = (l) => {
s("popup-scroll", l);
};
return J(m, Al), J(d, ke), J(Pe, ke), J(O, Ge), J(M, Kl), Ee(() => {
be();
}), {
inputId: gl,
contentId: b,
nsSelect: i,
nsInput: y,
states: t,
isFocused: We,
expanded: C,
optionsArray: L,
hoverOption: F,
selectSize: He,
filteredOptionsCount: oe,
updateTooltip: ke,
updateTagTooltip: Ge,
debouncedOnInputChange: Ye,
onInput: Qe,
deletePrevTag: Ul,
deleteTag: jl,
deleteSelected: Je,
handleOptionSelect: Xe,
scrollToOption: ge,
hasModelValue: Te,
shouldShowPlaceholder: Fl,
currentPlaceholder: zl,
mouseEnterEventName: Pl,
needStatusIcon: Vl,
showClose: Tl,
iconComponent: Ae,
iconReverse: Il,
validateState: Ie,
validateIcon: kl,
showNewOption: Ll,
updateOptions: Ke,
collapseTagSize: Bl,
setSelected: be,
selectDisabled: ne,
emptyText: Ml,
handleCompositionStart: Cl,
handleCompositionUpdate: Ol,
handleCompositionEnd: El,
onOptionCreate: Gl,
onOptionDestroy: ql,
handleMenuEnter: Yl,
focus: ye,
blur: Jl,
handleClearClick: Xl,
handleClickOutside: Zl,
handleEsc: _l,
toggleMenu: _e,
selectOption: xl,
getValueKey: Se,
navigateOptions: xe,
dropdownMenuVisible: Nl,
showTagList: lt,
collapseTagList: tt,
popupScroll: st,
tagStyle: ot,
collapseTagStyle: at,
popperRef: Ql,
inputRef: c,
tooltipRef: u,
tagTooltipRef: p,
prefixRef: r,
suffixRef: a,
selectRef: v,
wrapperRef: Pe,
selectionRef: m,
scrollbarRef: R,
menuRef: d,
tagMenuRef: O,
collapseItemRef: M
};
};
var mn = X({
name: "ElOptions",
setup(e, { slots: s }) {
const o = pe(Ve);
let b = [];
return () => {
var i, y;
const t = (i = s.default) == null ? void 0 : i.call(s), v = [];
function m(u) {
j(u) && u.forEach((p) => {
var c, r, a, d;
const O = (c = (p == null ? void 0 : p.type) || {}) == null ? void 0 : c.name;
O === "ElOptionGroup" ? m(!Ft(p.children) && !j(p.children) && P((r = p.children) == null ? void 0 : r.default) ? (a = p.children) == null ? void 0 : a.default() : p.children) : O === "ElOption" ? v.push((d = p.props) == null ? void 0 : d.value) : j(p.children) && m(p.children);
});
}
return t.length && m((y = t[0]) == null ? void 0 : y.children), de(v, b) || (b = v, o && (o.states.optionValues = v)), t;
};
}
});
const hn = we({
name: String,
id: String,
modelValue: {
type: re([
Array,
String,
Number,
Boolean,
Object
]),
default: void 0
},
autocomplete: {
type: String,
default: "off"
},
automaticDropdown: Boolean,
size: $t,
effect: {
type: re(String),
default: "light"
},
disabled: Boolean,
clearable: Boolean,
filterable: Boolean,
allowCreate: Boolean,
loading: Boolean,
popperClass: {
type: String,
default: ""
},
popperOptions: {
type: re(Object),
default: () => ({})
},
remote: Boolean,
loadingText: String,
noMatchText: String,
noDataText: String,
remoteMethod: Function,
filterMethod: Function,
multiple: Boolean,
multipleLimit: {
type: Number,
default: 0
},
placeholder: {
type: String
},
defaultFirstOption: Boolean,
reserveKeyword: {
type: Boolean,
default: !0
},
valueKey: {
type: String,
default: "value"
},
collapseTags: Boolean,
collapseTagsTooltip: Boolean,
maxCollapseTags: {
type: Number,
default: 1
},
teleported: nl.teleported,
persistent: {
type: Boolean,
default: !0
},
clearIcon: {
type: al,
default: Dt
},
fitInputWidth: Boolean,
suffixIcon: {
type: al,
default: kt
},
tagType: { ...Re.type, default: "info" },
tagEffect: { ...Re.effect, default: "light" },
validateEvent: {
type: Boolean,
default: !0
},
remoteShowSuffix: Boolean,
showArrow: {
type: Boolean,
default: !0
},
offset: {
type: Number,
default: 12
},
placement: {
type: re(String),
values: ht,
default: "bottom-start"
},
fallbackPlacements: {
type: re(Array),
default: ["bottom-start", "top-start", "right", "left"]
},
tabindex: {
type: [String, Number],
default: 0
},
appendTo: nl.appendTo,
...Yt,
...mt(["ariaLabel"])
});
Ct.scroll;
const il = "ElSelect", bn = X({
name: il,
componentName: il,
components: {
ElSelectMenu: fn,
ElOption: Fe,
ElOptions: mn,
ElTag: nn,
ElScrollbar: Et,
ElTooltip: bt,
ElIcon: $e
},
directives: { ClickOutside: Ot },
props: hn,
emits: [
_,
ml,
"remove-tag",
"clear",
"visible-change",
"focus",
"blur",
"popup-scroll"
],
setup(e, { emit: s, slots: o }) {
const b = te();
b.appContext.config.warnHandler = (...r) => {
!r[0] || r[0].includes('Slot "default" invoked outside of the render function') || console.warn(...r);
};
const i = f(() => {
const { modelValue: r, multiple: a } = e, d = a ? [] : void 0;
return j(r) ? a ? r : d : a ? d : r;
}), y = fe({
...Be(e),
modelValue: i
}), t = vn(y, s), { calculatorRef: v, inputStyle: m } = on(), u = (r) => r.reduce((a, d) => (a.push(d), d.children && d.children.length > 0 && a.push(...u(d.children)), a), []), p = (r) => {
Kt(r || []).forEach((d) => {
var O;
if (U(d) && (d.type.name === "ElOption" || d.type.name === "ElTree")) {
const M = d.type.name;
if (M === "ElTree") {
const R = ((O = d.props) == null ? void 0 : O.data) || [];
u(R).forEach((F) => {
F.currentLabel = F.label || (U(F.value) ? "" : F.value), t.onOptionCreate(F);
});
} else if (M === "ElOption") {
const R = { ...d.props };
R.currentLabel = R.label || (U(R.value) ? "" : R.value), t.onOptionCreate(R);
}
}
});
};
H(() => {
var r;
return (r = o.default) == null ? void 0 : r.call(o);
}, (r) => {
e.persistent || p(r);
}, {
immediate: !0
}), cl(Ve, fe({
props: y,
states: t.states,
selectRef: t.selectRef,
optionsArray: t.optionsArray,
setSelected: t.setSelected,
handleOptionSelect: t.handleOptionSelect,
onOptionCreate: t.onOptionCreate,
onOptionDestroy: t.onOptionDestroy
}));
const c = f(() => e.multiple ? t.states.selected.map((r) => r.currentLabel) : t.states.selectedLabel);
return rl(() => {
b.appContext.config.warnHandler = void 0;
}), {
...t,
modelValue: i,
selectedLabel: c,
calculatorRef: v,
inputStyle: m
};
}
});
function gn(e, s) {
const o = Y("el-tag"), b = Y("el-tooltip"), i = Y("el-icon"), y = Y("el-option"), t = Y("el-options"), v = Y("el-scrollbar"), m = Y("el-select-menu"), u = dt("click-outside");
return ce((S(), V("div", {
ref: "selectRef",
class: g([e.nsSelect.b(), e.nsSelect.m(e.selectSize)]),
[pt(e.mouseEnterEventName)]: (p) => e.states.inputHovering = !0,
onMouseleave: (p) => e.states.inputHovering = !1
}, [
A(b, {
ref: "tooltipRef",
visible: e.dropdownMenuVisible,
placement: e.placement,
teleported: e.teleported,
"popper-class": [e.nsSelect.e("popper"), e.popperClass],
"popper-options": e.popperOptions,
"fallback-placements": e.fallbackPlacements,
effect: e.effect,
pure: "",
trigger: "click",
transition: `${e.nsSelect.namespace.value}-zoom-in-top`,
"stop-popper-mouse-event": !1,
"gpu-acceleration": !1,
persistent: e.persistent,
"append-to": e.appendTo,
"show-arrow": e.showArrow,
offset: e.offset,
onBeforeShow: e.handleMenuEnter,
onHide: (p) => e.states.isBeforeHide = !1
}, {
default: D(() => {
var p;
return [
T("div", {
ref: "wrapperRef",
class: g([
e.nsSelect.e("wrapper"),
e.nsSelect.is("focused", e.isFocused),
e.nsSelect.is("hovering", e.states.inputHovering),
e.nsSelect.is("filterable", e.filterable),
e.nsSelect.is("disabled", e.selectDisabled)
]),
onClick: N(e.toggleMenu, ["prevent"])
}, [
e.$slots.prefix ? (S(), V("div", {
key: 0,
ref: "prefixRef",
class: g(e.nsSelect.e("prefix"))
}, [
k(e.$slots, "prefix")
], 2)) : $("v-if", !0),
T("div", {
ref: "selectionRef",
class: g([
e.nsSelect.e("selection"),
e.nsSelect.is("near", e.multiple && !e.$slots.prefix && !!e.states.selected.length)
])
}, [
e.multiple ? k(e.$slots, "tag", {
key: 0,
data: e.states.selected,
deleteTag: e.deleteTag,
selectDisabled: e.selectDisabled
}, () => [
(S(!0), V(el, null, ll(e.showTagList, (c) => (S(), V("div", {
key: e.getValueKey(c),
class: g(e.nsSelect.e("selected-item"))
}, [
A(o, {
closable: !e.selectDisabled && !c.isDisabled,
size: e.collapseTagSize,
type: e.tagType,
effect: e.tagEffect,
"disable-transitions": "",
style: ee(e.tagStyle),
onClose: (r) => e.deleteTag(r, c)
}, {
default: D(() => [
T("span", {
class: g(e.nsSelect.e("tags-text"))
}, [
k(e.$slots, "label", {
label: c.currentLabel,
value: c.value
}, () => [
tl(K(c.currentLabel), 1)
])
], 2)
]),
_: 2
}, 1032, ["closable", "size", "type", "effect", "style", "onClose"])
], 2))), 128)),
e.collapseTags && e.states.selected.length > e.maxCollapseTags ? (S(), z(b, {
key: 0,
ref: "tagTooltipRef",
disabled: e.dropdownMenuVisible || !e.collapseTagsTooltip,
"fallback-placements": ["bottom", "top", "right", "left"],
effect: e.effect,
placement: "bottom",
"popper-class": e.popperClass,
teleported: e.teleported
}, {
default: D(() => [
T("div", {
ref: "collapseItemRef",
class: g(e.nsSelect.e("selected-item"))
}, [
A(o, {
closable: !1,
size: e.collapseTagSize,
type: e.tagType,
effect: e.tagEffect,
"disable-transitions": "",
style: ee(e.collapseTagStyle)
}, {
default: D(() => [
T("span", {
class: g(e.nsSelect.e("tags-text"))
}, " + " + K(e.states.selected.length - e.maxCollapseTags), 3)
]),
_: 1
}, 8, ["size", "type", "effect", "style"])
], 2)
]),
content: D(() => [
T("div", {
ref: "tagMenuRef",
class: g(e.nsSelect.e("selection"))
}, [
(S(!0), V(el, null, ll(e.collapseTagList, (c) => (S(), V("div", {
key: e.getValueKey(c),
class: g(e.nsSelect.e("selected-item"))
}, [
A(o, {
class: "in-tooltip",
closable: !e.selectDisabled && !c.isDisabled,
size: e.collapseTagSize,
type: e.tagType,
effect: e.tagEffect,
"disable-transitions": "",
onClose: (r) => e.deleteTag(r, c)
}, {
default: D(() => [
T("span", {
class: g(e.nsSelect.e("tags-text"))
}, [
k(e.$slots, "label", {
label: c.currentLabel,
value: c.value
}, () => [
tl(K(c.currentLabel), 1)
])
], 2)
]),
_: 2
}, 1032, ["closable", "size", "type", "effect", "onClose"])
], 2))), 128))
], 2)
]),
_: 3
}, 8, ["disabled", "effect", "popper-class", "teleported"])) : $("v-if", !0)
]) : $("v-if", !0),
T("div", {
class: g([
e.nsSelect.e("selected-item"),
e.nsSelect.e("input-wrapper"),
e.nsSelect.is("hidden", !e.filterable)
])
}, [
ce(T("input", {
id: e.inputId,
ref: "inputRef",
"onUpdate:modelValue": (c) => e.states.inputValue = c,
type: "text",
name: e.name,
class: g([e.nsSelect.e("input"), e.nsSelect.is(e.selectSize)]),
disabled: e.selectDisabled,
autocomplete: e.autocomplete,
style: ee(e.inputStyle),
tabindex: e.tabindex,
role: "combobox",
readonly: !e.filterable,
spellcheck: "false",
"aria-activedescendant": ((p = e.hoverOption) == null ? void 0 : p.id) || "",
"aria-controls": e.contentId,
"aria-expanded": e.dropdownMenuVisible,
"aria-label": e.ariaLabel,
"aria-autocomplete": "none",
"aria-haspopup": "listbox",
onKeydown: [
ie(N((c) => e.navigateOptions("next"), ["stop", "prevent"]), ["down"]),
ie(N((c) => e.navigateOptions("prev"), ["stop", "prevent"]), ["up"]),
ie(N(e.handleEsc, ["stop", "prevent"]), ["esc"]),
ie(N(e.selectOption, ["stop", "prevent"]), ["enter"]),
ie(N(e.deletePrevTag, ["stop"]), ["delete"])
],
onCompositionstart: e.handleCompositionStart,
onCompositionupdate: e.handleCompositionUpdate,
onCompositionend: e.handleCompositionEnd,
onInput: e.onInput,
onClick: N(e.toggleMenu, ["stop"])
}, null, 46, ["id", "onUpdate:modelValue", "name", "disabled", "autocomplete", "tabindex", "readonly", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label", "onKeydown", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onInput", "onClick"]), [
[ft, e.states.inputValue]
]),
e.filterable ? (S(), V("span", {
key: 0,
ref: "calculatorRef",
"aria-hidden": "true",
class: g(e.nsSelect.e("input-calculator")),
textContent: K(e.states.inputValue)
}, null, 10, ["textContent"])) : $("v-if", !0)
], 2),
e.shouldShowPlaceholder ? (S(), V("div", {
key: 1,
class: g([
e.nsSelect.e("selected-item"),
e.nsSelect.e("placeholder"),
e.nsSelect.is("transparent", !e.hasModelValue || e.expanded && !e.states.inputValue)
])
}, [
e.hasModelValue ? k(e.$slots, "label", {
key: 0,
label: e.currentPlaceholder,
value: e.modelValue
}, () => [
T("span", null, K(e.currentPlaceholder), 1)
]) : (S(), V("span", { key: 1 }, K(e.currentPlaceholder), 1))
], 2)) : $("v-if", !0)
], 2),
T("div", {
ref: "suffixRef",
class: g(e.nsSelect.e("suffix"))
}, [
e.iconComponent && !e.showClose ? (S(), z(i, {
key: 0,
class: g([e.nsSelect.e("caret"), e.nsSelect.e("icon"), e.iconReverse])
}, {
default: D(() => [
(S(), z(De(e.iconComponent)))
]),
_: 1
}, 8, ["class"])) : $("v-if", !0),
e.showClose && e.clearIcon ? (S(), z(i, {
key: 1,
class: g([
e.nsSelect.e("caret"),
e.nsSelect.e("icon"),
e.nsSelect.e("clear")
]),
onClick: e.handleClearClick
}, {
default: D(() => [
(S(), z(De(e.clearIcon)))
]),
_: 1
}, 8, ["class", "onClick"])) : $("v-if", !0),
e.validateState && e.validateIcon && e.needStatusIcon ? (S(), z(i, {
key: 2,
class: g([
e.nsInput.e("icon"),
e.nsInput.e("validateIcon"),
e.nsInput.is("loading", e.validateState === "validating")
])
}, {
default: D(() => [
(S(), z(De(e.validateIcon)))
]),
_: 1
}, 8, ["class"])) : $("v-if", !0)
], 2)
], 10, ["onClick"])
];
}),
content: D(() => [
A(m, { ref: "menuRef" }, {
default: D(() => [
e.$slots.header ? (S(), V("div", {
key: 0,
class: g(e.nsSelect.be("dropdown", "header")),
onClick: N(() => {
}, ["stop"])
}, [
k(e.$slots, "header")
], 10, ["onClick"])) : $("v-if", !0),
ce(A(v, {
id: e.contentId,
ref: "scrollbarRef",
tag: "ul",
"wrap-class": e.nsSelect.be("dropdown", "wrap"),
"view-class": e.nsSelect.be("dropdown", "list"),
class: g([e.nsSelect.is("empty", e.filteredOptionsCount === 0)]),
role: "listbox",
"aria-label": e.ariaLabel,
"aria-orientation": "vertical",
onScroll: e.popupScroll
}, {
default: D(() => [
e.showNewOption ? (S(), z(y, {
key: 0,
value: e.states.inputValue,
created: !0
}, null, 8, ["value"])) : $("v-if", !0),
A(t, null, {
default: D(() => [
k(e.$slots, "default")
]),
_: 3
})
]),
_: 3
}, 8, ["id", "wrap-class", "view-class", "class", "aria-label", "onScroll"]), [
[Ne, e.states.options.size > 0 && !e.loading]
]),
e.$slots.loading && e.loading ? (S(), V("div", {
key: 1,
class: g(e.nsSelect.be("dropdown", "loading"))
}, [
k(e.$slots, "loading")
], 2)) : e.loading || e.filteredOptionsCount === 0 ? (S(), V("div", {
key: 2,
class: g(e.nsSelect.be("dropdown", "empty"))
}, [
k(e.$slots, "empty", {}, () => [
T("span", null, K(e.emptyText), 1)
])
], 2)) : $("v-if", !0),
e.$slots.footer ? (S(), V("div", {
key: 3,
class: g(e.nsSelect.be("dropdown", "footer")),
onClick: N(() => {
}, ["stop"])
}, [
k(e.$slots, "footer")
], 10, ["onClick"])) : $("v-if", !0)
]),
_: 3
}, 512)
]),
_: 3
}, 8, ["visible", "placement", "teleported", "popper-class", "popper-options", "fallback-placements", "effect", "transition", "persistent", "append-to", "show-arrow", "offset", "onBeforeShow", "onHide"])
], 16, ["onMouseleave"])), [
[u, e.handleClickOutside, e.popperRef]
]);
}
var yn = /* @__PURE__ */ ve(bn, [["render", gn], ["__file", "select.vue"]]);
const Sn = X({
name: "ElOptionGroup",
componentName: "ElOptionGroup",
props: {
label: String,
disabled: Boolean
},
setup(e) {
const s = le("select"), o = E(), b = te(), i = E([]);
cl(hl, fe({
...Be(e)
}));
const y = f(() => i.value.some((u) => u.visible === !0)), t = (u) => {
var p;
return u.type.name === "ElOption" && !!((p = u.component) != null && p.proxy);
}, v = (u) => {
const p = Q(u), c = [];
return p.forEach((r) => {
var a;
vt(r) && (t(r) ? c.push(r.component.proxy) : j(r.children) && r.children.length ? c.push(...v(r.children)) : (a = r.component) != null && a.subTree && c.push(...v(r.component.subTree)));
}), c;
}, m = () => {
i.value = v(b.subTree);
};
return Ee(() => {
m();
}), gt(o, m, {
attributes: !0,
subtree: !0,
childList: !0
}), {
groupRef: o,
visible: y,
ns: s
};
}
});
function Cn(e, s, o, b, i, y) {
return ce((S(), V("ul", {
ref: "groupRef",
class: g(e.ns.be("group", "wrap"))
}, [
T("li", {
class: g(e.ns.be("group", "title"))
}, K(e.label), 3),
T("li", null, [
T("ul", {
class: g(e.ns.b("group"))
}, [
k(e.$slots, "default")
], 2)
])
], 2)), [
[Ne, e.visible]
]);
}
var bl = /* @__PURE__ */ ve(Sn, [["render", Cn], ["__file", "option-group.vue"]]);
const $n = pl(yn, {
Option: Fe,
OptionGroup: bl
}), Mn = vl(Fe);
vl(bl);
export {
$n as E,
Mn as a,
_t as b,
Xt as u
};