vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
375 lines (374 loc) • 15.7 kB
JavaScript
import { defineComponent as Te, ref as o, computed as T, watch as G, watchEffect as oe, onMounted as ze, onBeforeUnmount as Re, nextTick as Oe, createElementBlock as C, openBlock as g, normalizeStyle as ne, normalizeClass as x, unref as M, createElementVNode as b, createBlock as Pe, withDirectives as F, vModelText as De, toDisplayString as ue, withModifiers as N, Teleport as He, createVNode as J, Transition as We, withCtx as se, createCommentVNode as Fe, mergeProps as Ne, Fragment as Ie, renderList as Ue, vShow as K } from "vue";
import je from "../empty/index.js";
import Ae from "../scrollbar/index.js";
import { useInject as Xe, useOptionsSupported as Ye, useMutationObserver as qe, useEventListener as Ge } from "../utils/index.js";
const Je = { class: "select-search" }, Ke = ["readonly", "disabled"], Qe = ["title"], Ze = ["title", "onMouseenter", "onClick"], at = /* @__PURE__ */ Te({
__name: "Select",
props: {
options: { default: () => [] },
label: { default: "label" },
value: { default: "value" },
placeholder: { default: "请选择" },
disabled: { type: Boolean, default: !1 },
width: { default: "auto" },
height: { default: void 0 },
size: { default: "middle" },
allowClear: { type: Boolean, default: !1 },
search: { type: Boolean, default: !1 },
placement: { default: "bottom" },
flip: { type: Boolean, default: !0 },
to: { type: [String, Boolean], default: "body" },
filter: { type: [Function, Boolean], default: !0 },
maxDisplay: { default: 6 },
scrollbarProps: { default: () => ({}) },
modelValue: { default: void 0 }
},
emits: ["update:modelValue", "change", "openChange"],
setup(n, { emit: ie }) {
const t = n, I = o(!1), v = o([]), s = o(), z = o(null), d = o(), m = o(!1), R = o(!1), c = o(), u = o(!1), p = o(!0), $ = o(!1), U = o(!1), w = o(!1), O = o(!1), { colorPalettes: j, shadowColor: re } = Xe("Select"), i = o(null), Q = o(0), P = o(0), Z = o("bottom"), A = o(null), y = o(), X = o(null), D = o(), Y = o(null), q = o(), ce = o(document.documentElement.clientWidth), H = o(document.documentElement.clientHeight), { isSupported: ve } = Ye("passive"), k = ie, fe = T(() => typeof t.width == "number" ? `${t.width}px` : t.width), de = T(() => {
const e = {
small: 24,
middle: 32,
large: 40
};
return t.height !== void 0 ? `${t.height}px` : `${e[t.size]}px`;
});
T(() => t.options.length > t.maxDisplay);
const me = T(() => ({
maxHeight: `${t.maxDisplay * 32 + 8}px`
})), pe = T(() => {
const e = y.value?.top ?? 0, l = D.value?.top ?? 0, a = e - l, h = y.value?.bottom ?? 0, L = (D.value?.bottom ?? 0) - h, f = y.value?.left ?? 0, W = D.value?.left ?? 0, r = f - W, E = y.value?.width ?? 0;
switch (Z.value) {
case "bottom":
return {
transformOrigin: "0 0",
top: `${a + P.value}px`,
left: `${r}px`,
minWidth: `${E}px`,
width: `${E}px`
};
case "top":
return {
transformOrigin: "100% 100%",
bottom: `${L + P.value}px`,
left: `${r}px`,
minWidth: `${E}px`,
width: `${E}px`
};
default:
return {
transformOrigin: "0 0",
top: `${a + P.value}px`,
left: `${r}px`,
minWidth: `${E}px`,
width: `${E}px`
};
}
});
G(
() => [t.placement, t.flip],
() => {
V();
},
{
deep: !0
}
), G(u, (e) => {
e && !I.value && (I.value = !0);
}), G(u, (e) => {
k("openChange", e), t.search && !e && (d.value = void 0, R.value = !1);
}), oe(() => {
t.search ? (d.value ? v.value = t.options.filter((e) => typeof t.filter == "function" ? t.filter(d.value, e) : e[t.label].includes(d.value)) : u.value ? v.value = [...t.options] : setTimeout(() => {
v.value = [...t.options];
}, 200), v.value.length && d.value ? c.value = v.value[0][t.value] : c.value = null) : v.value = t.options;
}), oe(() => {
Ce();
}), ze(() => {
ee();
}), Re(() => {
te();
});
const _ = qe(
i,
() => {
Q.value !== i.value?.scrollTop && (Q.value = i.value?.scrollTop ?? 0, V());
},
{ subtree: !0, attributes: !0 }
);
Ge(window, "resize", ge);
function he() {
let e = Y.value?.parentElement;
for (; e; ) {
if (e === document.documentElement) {
X.value = document.documentElement;
return;
}
const { position: l } = getComputedStyle(e);
if (l !== "static") {
X.value = e;
return;
}
e = e.parentElement;
}
}
function ge() {
ce.value = document.documentElement.clientWidth, H.value = document.documentElement.clientHeight, ee(), V();
}
function ee() {
te(), i.value = le(A.value), i.value && i.value.addEventListener(
"scroll",
V,
ve.value ? { passive: !0 } : void 0
), i.value === document.documentElement ? _.start() : _.stop();
}
function te() {
i.value && i.value.removeEventListener("scroll", V), i.value = null;
}
function be(e) {
return e === document.documentElement ? null : e.parentElement;
}
function le(e) {
if (e === null) return null;
const l = be(e);
return l === null ? null : l === document.documentElement ? document.documentElement : ((h) => {
const { overflow: S, overflowX: L, overflowY: f } = getComputedStyle(h);
return /(auto|scroll|overlay)/.test(S + f + L);
})(l) ? l : le(l);
}
function V() {
u.value && ae();
}
async function ae() {
await Oe(), he(), D.value = X.value?.getBoundingClientRect(), y.value = A.value?.getBoundingClientRect(), q.value = Y.value?.offsetHeight, P.value = y.value.height + 4, t.flip && (Z.value = ye());
}
function we() {
if (i.value) {
const e = i.value.getBoundingClientRect();
return {
top: e.top < 0 ? 0 : e.top,
bottom: e.bottom > H.value ? H.value : e.bottom
};
}
return {
top: 0,
bottom: H.value
};
}
function ye() {
const { top: e, bottom: l } = y.value, { top: a, bottom: h } = we(), S = e - a, L = h - l;
return f(t.placement, []);
function f(W, r) {
if (W === "bottom")
if (r.includes("bottom")) {
if (!r.includes("top"))
return f("top", r);
} else
return L < q.value + 4 ? f("top", [...r, "bottom"]) : "bottom";
else if (W === "top")
if (r.includes("top")) {
if (!r.includes("bottom"))
return f("bottom", r);
} else
return S < q.value + 4 ? f("bottom", [...r, "top"]) : "top";
return t.placement;
}
}
function Ce() {
if (t.modelValue) {
const e = t.options.find((l) => l[t.value] === t.modelValue);
e ? (s.value = e[t.label], c.value = e[t.value]) : (s.value = t.modelValue, c.value = null);
} else
s.value = null, c.value = null;
}
function xe() {
O.value = !0;
}
function $e() {
O.value = !1, u.value && (u.value = !1), t.search && (w.value = !1, p.value = !0, R.value = !1);
}
function Be() {
m.value = !0, t.allowClear && (s.value || t.search && d.value) && (p.value = !1, $.value = !0, t.search && (w.value = !1));
}
function Se() {
m.value = !1, t.allowClear && $.value && ($.value = !1, t.search || (p.value = !0)), t.search && (u.value ? (w.value = !0, p.value = !1) : (w.value = !1, p.value = !0));
}
function Ee(e, l) {
m.value = !!l, c.value = e;
}
async function Me() {
if (B(), !t.search && z.value && (z.value.style.opacity = "0"), u.value = !u.value, u.value && ae(), !c.value && s.value) {
const e = t.options.find((l) => l[t.label] === s.value);
c.value = e ? e[t.value] : null;
}
t.search && ($.value || (p.value = !u.value, w.value = u.value));
}
function ke(e) {
R.value = !!e.target?.value;
}
function Ve() {
O.value && (B(), U.value = !0), $.value = !1, s.value = null, c.value = null, u.value = !1, w.value = !1, p.value = !0, k("update:modelValue"), k("change");
}
function B() {
z.value?.focus();
}
function Le(e, l, a) {
t.modelValue !== e && (s.value = l, c.value = e, k("update:modelValue", e), k("change", e, l, a)), U.value = !1, B();
}
return (e, l) => (g(), C("div", {
class: x(["select-wrap", {
"select-focused": O.value,
"search-select": n.search,
"select-small": n.size === "small",
"select-large": n.size === "large",
"select-disabled": n.disabled
}]),
style: ne(`
--select-width: ${fe.value};
--select-height: ${de.value};
--select-primary-color-hover: ${M(j)[4]};
--select-primary-color-focus: ${M(j)[4]};
--select-primary-shadow-color: ${M(re)};
`),
onClick: l[7] || (l[7] = (a) => n.disabled ? () => !1 : Me())
}, [
b("div", {
ref_key: "selectContentRef",
ref: A,
class: "select-content-container",
onMouseenter: Be,
onMouseleave: Se
}, [
b("span", Je, [
F(b("input", {
ref_key: "inputRef",
ref: z,
class: x(["search-input", { "caret-show": u.value || U.value }]),
type: "text",
autocomplete: "off",
readonly: !n.search,
disabled: n.disabled,
onInput: ke,
"onUpdate:modelValue": l[0] || (l[0] = (a) => d.value = a),
onBlur: l[1] || (l[1] = (a) => !m.value && !n.disabled ? $e() : () => !1),
onFocus: l[2] || (l[2] = (a) => n.disabled ? () => !1 : xe())
}, null, 42, Ke), [
[De, d.value]
])
]),
b("span", {
class: x(["select-item", { "select-placeholder": !s.value || u.value, "select-item-hidden": R.value }]),
title: s.value
}, ue(s.value || n.placeholder), 11, Qe),
(g(), C("svg", {
class: x(["arrow-svg", { "arrow-rotate": u.value, "show-svg": p.value }]),
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [...l[8] || (l[8] = [
b("path", { d: "M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1)
])], 2)),
(g(), C("svg", {
class: x(["search-svg", { "show-svg": w.value }]),
focusable: "false",
"data-icon": "search",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [...l[9] || (l[9] = [
b("path", { d: "M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z" }, null, -1)
])], 2)),
(g(), C("svg", {
class: x(["clear-svg", { "show-svg": $.value }]),
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
"fill-rule": "evenodd",
viewBox: "64 64 896 896",
onClick: N(Ve, ["stop"])
}, [...l[10] || (l[10] = [
b("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }, null, -1)
])], 2))
], 544),
(g(), Pe(He, {
disabled: n.to === !1,
to: n.to === !1 ? null : n.to
}, [
J(We, {
name: "slide",
"enter-from-class": "slide-enter",
"enter-active-class": "slide-enter",
"enter-to-class": "slide-enter slide-enter-active",
"leave-from-class": "slide-leave",
"leave-active-class": "slide-leave slide-leave-active",
"leave-to-class": "slide-leave slide-leave-active"
}, {
default: se(() => [
I.value ? F((g(), C("div", {
key: 0,
ref_key: "selectPanelRef",
ref: Y,
class: "select-panel-container",
style: ne({
...pe.value,
"--select-option-bg-color-active": M(j)[0]
})
}, [
F(J(M(Ae), Ne({
style: { ...me.value, "--scrollbar-rail-vertical-right": "2px 0 2px auto" },
class: "select-options-panel",
onClick: N(B, ["stop"]),
onMouseenter: l[3] || (l[3] = (a) => m.value = !0),
onMouseleave: l[4] || (l[4] = (a) => m.value = !1)
}, n.scrollbarProps), {
default: se(() => [
(g(!0), C(Ie, null, Ue(v.value, (a, h) => (g(), C("p", {
key: h,
class: x([
"select-option",
{
"option-hover": !a.disabled && a[n.value] === c.value,
"option-selected": a[n.label] === s.value,
"option-disabled": a.disabled
}
]),
title: a[n.label],
onMouseenter: (S) => Ee(a[n.value], a.disabled),
onClick: N((S) => a.disabled ? B() : Le(a[n.value], a[n.label], h), ["stop"])
}, ue(a[n.label]), 43, Ze))), 128))
]),
_: 1
}, 16, ["style"]), [
[K, v.value.length]
]),
F(b("div", {
class: "select-options-panel options-panel-empty",
onClick: N(B, ["stop"]),
onMouseenter: l[5] || (l[5] = (a) => m.value = !0),
onMouseleave: l[6] || (l[6] = (a) => m.value = !1)
}, [
J(M(je), { image: "outlined" })
], 544), [
[K, !v.value.length]
])
], 4)), [
[K, u.value]
]) : Fe("", !0)
]),
_: 1
})
], 8, ["disabled", "to"]))
], 6));
}
});
export {
at as default
};