vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
375 lines (374 loc) • 15.7 kB
JavaScript
import { defineComponent as ze, ref as a, computed as T, watch as q, watchEffect as oe, onMounted as Re, onBeforeUnmount as xe, nextTick as Oe, createElementBlock as y, openBlock as h, normalizeStyle as ae, normalizeClass as C, unref as M, createElementVNode as g, createBlock as Pe, withDirectives as W, vModelText as De, toDisplayString as ne, withModifiers as F, Teleport as He, createVNode as G, Transition as We, withCtx as ue, createCommentVNode as Fe, mergeProps as Ne, Fragment as Ie, renderList as Ue, vShow as J } 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"], ot = /* @__PURE__ */ ze({
__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(se, { emit: ie }) {
const t = se, N = a(!1), c = a([]), u = a(), z = a(null), f = a(), d = a(!1), R = a(!1), r = a(), n = a(!1), p = a(!0), $ = a(!1), I = a(!1), b = a(!1), x = a(!1), { colorPalettes: U, shadowColor: re } = Xe("Select"), s = a(null), K = a(0), O = a(0), Q = a("bottom"), j = a(null), w = a(), A = a(null), P = a(), X = a(null), Y = a(), ce = a(document.documentElement.clientWidth), D = a(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 pe = T(() => ({
maxHeight: `${t.maxDisplay * 32 + 8}px`
})), me = T(() => {
const e = w.value?.top ?? 0, l = P.value?.top ?? 0, o = e - l, m = w.value?.bottom ?? 0, L = (P.value?.bottom ?? 0) - m, v = w.value?.left ?? 0, H = P.value?.left ?? 0, i = v - H, E = w.value?.width ?? 0;
switch (Q.value) {
case "bottom":
return {
transformOrigin: "0 0",
top: `${o + O.value}px`,
left: `${i}px`,
minWidth: `${E}px`,
width: `${E}px`
};
case "top":
return {
transformOrigin: "100% 100%",
bottom: `${L + O.value}px`,
left: `${i}px`,
minWidth: `${E}px`,
width: `${E}px`
};
default:
return {
transformOrigin: "0 0",
top: `${o + O.value}px`,
left: `${i}px`,
minWidth: `${E}px`,
width: `${E}px`
};
}
});
q(
() => [t.placement, t.flip],
() => {
V();
},
{
deep: !0
}
), q(n, (e) => {
e && !N.value && (N.value = !0);
}), q(n, (e) => {
k("openChange", e), t.search && !e && (f.value = void 0, R.value = !1);
}), oe(() => {
t.search ? (f.value ? c.value = t.options.filter((e) => typeof t.filter == "function" ? t.filter(f.value, e) : e[t.label].includes(f.value)) : n.value ? c.value = [...t.options] : setTimeout(() => {
c.value = [...t.options];
}, 200), c.value.length && f.value ? r.value = c.value[0][t.value] : r.value = null) : c.value = t.options;
}), oe(() => {
Ce();
}), Re(() => {
_();
}), xe(() => {
ee();
});
const Z = qe(
s,
() => {
K.value !== s.value?.scrollTop && (K.value = s.value?.scrollTop ?? 0, V());
},
{ subtree: !0, attributes: !0 }
);
Ge(window, "resize", ge);
function he() {
let e = X.value?.parentElement;
for (; e; ) {
if (e === document.documentElement) {
A.value = document.documentElement;
return;
}
const { position: l } = getComputedStyle(e);
if (l !== "static") {
A.value = e;
return;
}
e = e.parentElement;
}
}
function ge() {
ce.value = document.documentElement.clientWidth, D.value = document.documentElement.clientHeight, _(), V();
}
function _() {
ee(), s.value = te(j.value), s.value && s.value.addEventListener(
"scroll",
V,
ve.value ? { passive: !0 } : void 0
), s.value === document.documentElement ? Z.start() : Z.stop();
}
function ee() {
s.value && s.value.removeEventListener("scroll", V), s.value = null;
}
function be(e) {
return e === document.documentElement ? null : e.parentElement;
}
function te(e) {
if (e === null) return null;
const l = be(e);
return l === null ? null : l === document.documentElement ? document.documentElement : ((m) => {
const { overflow: S, overflowX: L, overflowY: v } = getComputedStyle(m);
return /(auto|scroll|overlay)/.test(S + v + L);
})(l) ? l : te(l);
}
function V() {
n.value && le();
}
async function le() {
await Oe(), he(), P.value = A.value?.getBoundingClientRect(), w.value = j.value?.getBoundingClientRect(), Y.value = X.value?.offsetHeight, O.value = w.value.height + 4, t.flip && (Q.value = ye());
}
function we() {
if (s.value) {
const e = s.value.getBoundingClientRect();
return {
top: e.top < 0 ? 0 : e.top,
bottom: e.bottom > D.value ? D.value : e.bottom
};
}
return {
top: 0,
bottom: D.value
};
}
function ye() {
const { top: e, bottom: l } = w.value, { top: o, bottom: m } = we(), S = e - o, L = m - l;
return v(t.placement, []);
function v(H, i) {
if (H === "bottom")
if (i.includes("bottom")) {
if (!i.includes("top"))
return v("top", i);
} else
return L < Y.value + 4 ? v("top", [...i, "bottom"]) : "bottom";
else if (H === "top")
if (i.includes("top")) {
if (!i.includes("bottom"))
return v("bottom", i);
} else
return S < Y.value + 4 ? v("bottom", [...i, "top"]) : "top";
return t.placement;
}
}
function Ce() {
if (t.modelValue) {
const e = t.options.find((l) => l[t.value] === t.modelValue);
e ? (u.value = e[t.label], r.value = e[t.value]) : (u.value = t.modelValue, r.value = null);
} else
u.value = null, r.value = null;
}
function $e() {
x.value = !0;
}
function Be() {
x.value = !1, n.value && (n.value = !1), t.search && (b.value = !1, p.value = !0, R.value = !1);
}
function Se() {
d.value = !0, t.allowClear && (u.value || t.search && f.value) && (p.value = !1, $.value = !0, t.search && (b.value = !1));
}
function Ee() {
d.value = !1, t.allowClear && $.value && ($.value = !1, t.search || (p.value = !0)), t.search && (n.value ? (b.value = !0, p.value = !1) : (b.value = !1, p.value = !0));
}
function Me(e, l) {
d.value = !!l, r.value = e;
}
async function ke() {
if (B(), !t.search && z.value && (z.value.style.opacity = "0"), n.value = !n.value, n.value && le(), !r.value && u.value) {
const e = t.options.find((l) => l[t.label] === u.value);
r.value = e ? e[t.value] : null;
}
t.search && ($.value || (p.value = !n.value, b.value = n.value));
}
function Ve(e) {
R.value = !!e.target?.value;
}
function Le() {
x.value && (B(), I.value = !0), $.value = !1, u.value = null, r.value = null, n.value = !1, b.value = !1, p.value = !0, k("update:modelValue"), k("change");
}
function B() {
z.value?.focus();
}
function Te(e, l, o) {
t.modelValue !== e && (u.value = l, r.value = e, k("update:modelValue", e), k("change", e, l, o)), I.value = !1, B();
}
return (e, l) => (h(), y("div", {
class: C(["select-wrap", {
"select-focused": x.value,
"search-select": e.search,
"select-small": e.size === "small",
"select-large": e.size === "large",
"select-disabled": e.disabled
}]),
style: ae(`
--select-width: ${fe.value};
--select-height: ${de.value};
--select-primary-color-hover: ${M(U)[4]};
--select-primary-color-focus: ${M(U)[4]};
--select-primary-shadow-color: ${M(re)};
`),
onClick: l[7] || (l[7] = (o) => e.disabled ? () => !1 : ke())
}, [
g("div", {
ref_key: "selectContentRef",
ref: j,
class: "select-content-container",
onMouseenter: Se,
onMouseleave: Ee
}, [
g("span", Je, [
W(g("input", {
ref_key: "inputRef",
ref: z,
class: C(["search-input", { "caret-show": n.value || I.value }]),
type: "text",
autocomplete: "off",
readonly: !e.search,
disabled: e.disabled,
onInput: Ve,
"onUpdate:modelValue": l[0] || (l[0] = (o) => f.value = o),
onBlur: l[1] || (l[1] = (o) => !d.value && !e.disabled ? Be() : () => !1),
onFocus: l[2] || (l[2] = (o) => e.disabled ? () => !1 : $e())
}, null, 42, Ke), [
[De, f.value]
])
]),
g("span", {
class: C(["select-item", { "select-placeholder": !u.value || n.value, "select-item-hidden": R.value }]),
title: u.value
}, ne(u.value || e.placeholder), 11, Qe),
(h(), y("svg", {
class: C(["arrow-svg", { "arrow-rotate": n.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] = [
g("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)),
(h(), y("svg", {
class: C(["search-svg", { "show-svg": b.value }]),
focusable: "false",
"data-icon": "search",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [...l[9] || (l[9] = [
g("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)),
(h(), y("svg", {
class: C(["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: F(Le, ["stop"])
}, [...l[10] || (l[10] = [
g("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),
(h(), Pe(He, {
disabled: e.to === !1,
to: e.to === !1 ? null : e.to
}, [
G(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: ue(() => [
N.value ? W((h(), y("div", {
key: 0,
ref_key: "selectPanelRef",
ref: X,
class: "select-panel-container",
style: ae({
...me.value,
"--select-option-bg-color-active": M(U)[0]
})
}, [
W(G(M(Ae), Ne({
style: { ...pe.value, "--scrollbar-rail-vertical-right": "2px 0 2px auto" },
class: "select-options-panel",
onClick: F(B, ["stop"]),
onMouseenter: l[3] || (l[3] = (o) => d.value = !0),
onMouseleave: l[4] || (l[4] = (o) => d.value = !1)
}, e.scrollbarProps), {
default: ue(() => [
(h(!0), y(Ie, null, Ue(c.value, (o, m) => (h(), y("p", {
key: m,
class: C([
"select-option",
{
"option-hover": !o.disabled && o[e.value] === r.value,
"option-selected": o[e.label] === u.value,
"option-disabled": o.disabled
}
]),
title: o[e.label],
onMouseenter: (S) => Me(o[e.value], o.disabled),
onClick: F((S) => o.disabled ? B() : Te(o[e.value], o[e.label], m), ["stop"])
}, ne(o[e.label]), 43, Ze))), 128))
]),
_: 1
}, 16, ["style"]), [
[J, c.value.length]
]),
W(g("div", {
class: "select-options-panel options-panel-empty",
onClick: F(B, ["stop"]),
onMouseenter: l[5] || (l[5] = (o) => d.value = !0),
onMouseleave: l[6] || (l[6] = (o) => d.value = !1)
}, [
G(M(je), { image: "outlined" })
], 544), [
[J, !c.value.length]
])
], 4)), [
[J, n.value]
]) : Fe("", !0)
]),
_: 1
})
], 8, ["disabled", "to"]))
], 6));
}
});
export {
ot as default
};