vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
237 lines (236 loc) • 10.9 kB
JavaScript
import { defineComponent as _, ref as o, computed as k, watchEffect as D, watch as ee, nextTick as le, createElementBlock as c, openBlock as f, normalizeStyle as ae, normalizeClass as h, unref as b, createElementVNode as m, createVNode as L, withDirectives as se, vModelText as te, toDisplayString as E, withModifiers as B, Transition as oe, withCtx as N, createCommentVNode as ue, mergeProps as ne, Fragment as ie, renderList as re } from "vue";
import ve from "../empty/index.js";
import de from "../scrollbar/index.js";
import { useInject as ce } from "../utils/index.js";
const fe = { class: "select-search" }, pe = ["readonly", "disabled"], he = ["title"], me = ["title", "onMouseenter", "onClick"], Ce = /* @__PURE__ */ _({
__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 },
filter: { type: [Function, Boolean], default: !0 },
maxDisplay: { default: 6 },
scrollbarProps: { default: () => ({}) },
modelValue: { default: void 0 }
},
emits: ["update:modelValue", "change", "openChange"],
setup(P, { emit: R }) {
const l = P, i = o(), u = o(), $ = o(null), r = o(), v = o(!1), M = o(!1), n = o(), y = o(), F = o(0), t = o(!1), d = o(!0), w = o(!1), V = o(!1), p = o(!1), S = o(!1), { colorPalettes: z, shadowColor: H } = ce("Select"), C = R, I = k(() => typeof l.width == "number" ? `${l.width}px` : l.width), O = k(() => {
const e = {
small: 24,
middle: 32,
large: 40
};
return l.height !== void 0 ? `${l.height}px` : `${e[l.size]}px`;
}), j = k(() => l.options.length > l.maxDisplay), A = k(() => ({
maxHeight: `${l.maxDisplay * 32 + 8}px`
}));
D(() => {
l.search ? (r.value ? (t.value = !0, i.value = l.options.filter((e) => typeof l.filter == "function" ? l.filter(r.value, e) : e[l.label].includes(r.value))) : i.value = [...l.options], i.value.length && r.value ? n.value = i.value[0][l.value] : n.value = null) : i.value = l.options;
}), D(() => {
U();
}), ee(t, async (e) => {
if (j.value)
if (e)
await le(), y.value && y.value.scrollTo({
top: F.value,
behavior: "instant"
});
else {
const a = y.value && y.value.getScrollData();
F.value = (a == null ? void 0 : a.scrollTop) || 0;
}
C("openChange", e), l.search && !e && (r.value = void 0, M.value = !1);
});
function U() {
if (l.modelValue) {
const e = l.options.find((a) => a[l.value] === l.modelValue);
e ? (u.value = e[l.label], n.value = e[l.value]) : (u.value = l.modelValue, n.value = null);
} else
u.value = null, n.value = null;
}
function W() {
S.value = !0;
}
function q() {
S.value = !1, t.value && (t.value = !1), l.search && (p.value = !1, d.value = !0, M.value = !1);
}
function G() {
v.value = !0, l.allowClear && (u.value || l.search && r.value) && (d.value = !1, w.value = !0, l.search && (p.value = !1));
}
function J() {
v.value = !1, l.allowClear && w.value && (w.value = !1, l.search || (d.value = !0)), l.search && (t.value ? (p.value = !0, d.value = !1) : (p.value = !1, d.value = !0));
}
function K(e, a) {
v.value = !!a, n.value = e;
}
function Q() {
if (g(), !l.search && $.value && ($.value.style.opacity = "0"), t.value = !t.value, !n.value && u.value) {
const e = l.options.find((a) => a[l.label] === u.value);
n.value = e ? e[l.value] : null;
}
l.search && (w.value || (d.value = !t.value, p.value = t.value));
}
function X(e) {
var a;
M.value = !!((a = e.target) != null && a.value);
}
function Y() {
S.value && (g(), V.value = !0), w.value = !1, u.value = null, n.value = null, t.value = !1, p.value = !1, d.value = !0, C("update:modelValue"), C("change");
}
function g() {
var e;
(e = $.value) == null || e.focus();
}
function Z(e, a, s) {
l.modelValue !== e && (u.value = a, n.value = e, C("update:modelValue", e), C("change", e, a, s)), V.value = !1, g();
}
return (e, a) => (f(), c("div", {
class: h(["m-select", {
"select-focused": S.value,
"search-select": e.search,
"select-small": e.size === "small",
"select-large": e.size === "large",
"select-disabled": e.disabled
}]),
style: ae(`
--select-width: ${I.value};
--select-height: ${O.value};
--select-primary-color-hover: ${b(z)[4]};
--select-primary-color-focus: ${b(z)[4]};
--select-primary-shadow-color: ${b(H)};
--select-item-bg-color-active: ${b(z)[0]};
`),
onClick: a[7] || (a[7] = (s) => e.disabled ? () => !1 : Q())
}, [
m("div", {
class: "select-wrap",
onMouseenter: G,
onMouseleave: J
}, [
m("span", fe, [
se(m("input", {
ref_key: "inputRef",
ref: $,
class: h(["search-input", { "caret-show": t.value || V.value }]),
type: "text",
autocomplete: "off",
readonly: !e.search,
disabled: e.disabled,
onInput: X,
"onUpdate:modelValue": a[0] || (a[0] = (s) => r.value = s),
onBlur: a[1] || (a[1] = (s) => !v.value && !e.disabled ? q() : () => !1),
onFocus: a[2] || (a[2] = (s) => e.disabled ? () => !1 : W())
}, null, 42, pe), [
[te, r.value]
])
]),
m("span", {
class: h(["select-item", { "select-placeholder": !u.value || t.value, "select-item-hidden": M.value }]),
title: u.value
}, E(u.value || e.placeholder), 11, he),
(f(), c("svg", {
class: h(["arrow-svg", { "arrow-rotate": t.value, "show-svg": d.value }]),
focusable: "false",
"data-icon": "down",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, a[8] || (a[8] = [
m("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)),
(f(), c("svg", {
class: h(["search-svg", { "show-svg": p.value }]),
focusable: "false",
"data-icon": "search",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, a[9] || (a[9] = [
m("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)),
(f(), c("svg", {
class: h(["clear-svg", { "show-svg": w.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: B(Y, ["stop"])
}, a[10] || (a[10] = [
m("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))
], 32),
L(oe, {
name: "slide-down",
"enter-from-class": "slide-down-enter",
"enter-active-class": "slide-down-enter",
"enter-to-class": "slide-down-enter slide-down-enter-active",
"leave-from-class": "slide-down-leave",
"leave-active-class": "slide-down-leave slide-down-leave-active",
"leave-to-class": "slide-down-leave slide-down-leave-active"
}, {
default: N(() => [
t.value && i.value && i.value.length ? (f(), c("div", {
key: 0,
class: "select-options-panel",
onClick: B(g, ["stop"]),
onMouseenter: a[3] || (a[3] = (s) => v.value = !0),
onMouseleave: a[4] || (a[4] = (s) => v.value = !1)
}, [
L(b(de), ne({
ref_key: "scrollbarRef",
ref: y,
"content-style": { padding: "4px" },
style: A.value
}, e.scrollbarProps), {
default: N(() => [
(f(!0), c(ie, null, re(i.value, (s, T) => (f(), c("p", {
key: T,
class: h([
"select-option",
{
"option-hover": !s.disabled && s[e.value] === n.value,
"option-selected": s[e.label] === u.value,
"option-disabled": s.disabled
}
]),
title: s[e.label],
onMouseenter: (x) => K(s[e.value], s.disabled),
onClick: B((x) => s.disabled ? g() : Z(s[e.value], s[e.label], T), ["stop"])
}, E(s[e.label]), 43, me))), 128))
]),
_: 1
}, 16, ["style"])
], 32)) : t.value && i.value && !i.value.length ? (f(), c("div", {
key: 1,
class: "select-options-panel options-empty",
onClick: B(g, ["stop"]),
onMouseenter: a[5] || (a[5] = (s) => v.value = !0),
onMouseleave: a[6] || (a[6] = (s) => v.value = !1)
}, [
L(b(ve), { image: "outlined" })
], 32)) : ue("", !0)
]),
_: 1
})
], 6));
}
});
export {
Ce as default
};