fluenzymet-ui
Version:
WinUI3风格的Vue3组件库，包含按钮、输入框、开关、下拉框等常用组件
1,463 lines • 55.1 kB
JavaScript
var ie = Object.defineProperty;
var le = (e, t, o) => t in e ? ie(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o;
var U = (e, t, o) => le(e, typeof t != "symbol" ? t + "" : t, o);
import { createElementBlock as a, openBlock as l, normalizeClass as V, renderSlot as F, defineComponent as x, computed as S, createCommentVNode as f, withDirectives as ne, toDisplayString as g, createElementVNode as d, vModelText as ae, normalizeStyle as K, ref as L, onMounted as j, onUnmounted as Z, nextTick as re, unref as M, createVNode as q, Transition as Y, withCtx as O, Fragment as N, renderList as A, watch as Q, createBlock as E, Teleport as oe, withModifiers as de, createTextVNode as H, resolveDynamicComponent as X, vShow as ue, TransitionGroup as ce, inject as te, provide as he, createApp as pe } from "vue";
const fe = {
name: "FButton",
props: {
type: {
type: String,
default: "button"
},
disabled: {
type: Boolean,
default: !1
},
buttonType: {
type: String,
default: "primary"
// primary, accent, standard
}
},
emits: ["click", "focus", "blur", "mouseenter", "mouseleave"],
methods: {
handleClick(e) {
this.disabled || this.$emit("click", e);
},
handleFocus(e) {
this.$emit("focus", e);
},
handleBlur(e) {
this.$emit("blur", e);
},
handleMouseEnter(e) {
this.$emit("mouseenter", e);
},
handleMouseLeave(e) {
this.$emit("mouseleave", e);
}
}
}, T = (e, t) => {
const o = e.__vccOpts || e;
for (const [s, r] of t)
o[s] = r;
return o;
}, me = ["type", "disabled"];
function ve(e, t, o, s, r, i) {
return l(), a("button", {
class: V(["winui-button", [o.buttonType, { disabled: o.disabled }]]),
type: o.type,
disabled: o.disabled,
onClick: t[0] || (t[0] = (...n) => i.handleClick && i.handleClick(...n)),
onFocus: t[1] || (t[1] = (...n) => i.handleFocus && i.handleFocus(...n)),
onBlur: t[2] || (t[2] = (...n) => i.handleBlur && i.handleBlur(...n)),
onMouseenter: t[3] || (t[3] = (...n) => i.handleMouseEnter && i.handleMouseEnter(...n)),
onMouseleave: t[4] || (t[4] = (...n) => i.handleMouseLeave && i.handleMouseLeave(...n))
}, [
F(e.$slots, "default", {}, void 0, !0)
], 42, me);
}
const z = /* @__PURE__ */ T(fe, [["render", ve], ["__scopeId", "data-v-7290208d"]]), ge = x({
name: "FInput",
props: {
modelValue: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
}
},
emits: [
"update:modelValue",
"input",
"focus",
"blur",
"keydown",
"keyup",
"keypress",
"change"
],
setup(e, { emit: t }) {
const o = S({
get: () => e.modelValue,
set: (u) => {
t("update:modelValue", u);
}
});
return {
localValue: o,
updateValue: (u) => {
const $ = u.target;
o.value = $.value, t("input", $.value);
},
handleFocus: (u) => {
t("focus", u);
},
handleBlur: (u) => {
t("blur", u);
},
handleKeydown: (u) => {
t("keydown", u);
},
handleKeyup: (u) => {
t("keyup", u);
},
handleKeypress: (u) => {
t("keypress", u);
},
handleChange: (u) => {
const $ = u.target;
t("change", $.value);
}
};
}
}), ye = { class: "winui-input-container" }, be = {
key: 0,
class: "winui-input-label"
}, we = ["placeholder"];
function ke(e, t, o, s, r, i) {
return l(), a("div", ye, [
e.label ? (l(), a("label", be, g(e.label), 1)) : f("", !0),
ne(d("input", {
class: "winui-input",
placeholder: e.placeholder,
"onUpdate:modelValue": t[0] || (t[0] = (n) => e.localValue = n),
onInput: t[1] || (t[1] = (...n) => e.updateValue && e.updateValue(...n)),
onFocus: t[2] || (t[2] = (...n) => e.handleFocus && e.handleFocus(...n)),
onBlur: t[3] || (t[3] = (...n) => e.handleBlur && e.handleBlur(...n)),
onKeydown: t[4] || (t[4] = (...n) => e.handleKeydown && e.handleKeydown(...n)),
onKeyup: t[5] || (t[5] = (...n) => e.handleKeyup && e.handleKeyup(...n)),
onKeypress: t[6] || (t[6] = (...n) => e.handleKeypress && e.handleKeypress(...n)),
onChange: t[7] || (t[7] = (...n) => e.handleChange && e.handleChange(...n))
}, null, 40, we), [
[ae, e.localValue]
])
]);
}
const Ce = /* @__PURE__ */ T(ge, [["render", ke], ["__scopeId", "data-v-d0f6feee"]]), $e = ["checked", "disabled"], _e = { class: "f-switch__track" }, Ve = { class: "f-switch__thumb" }, Be = {
key: 0,
class: "f-switch__on-content"
}, Me = {
key: 1,
class: "f-switch__off-content"
}, Ie = {
key: 0,
class: "f-switch__label"
}, Fe = /* @__PURE__ */ x({
__name: "Switch",
props: {
modelValue: { type: Boolean, default: !1 },
label: {},
disabled: { type: Boolean, default: !1 },
onContent: {},
offContent: {},
width: { default: 44 }
},
emits: ["update:modelValue", "change", "focus", "blur", "click"],
setup(e, { emit: t }) {
const o = e, s = t, r = S(() => o.modelValue), i = S(() => ({
"--switch-width": `${o.width}px`,
"--switch-height": `${o.width * 0.48}px`,
"--switch-thumb-size": `${o.width * 0.36}px`
})), n = (u) => {
const $ = u.target.checked;
s("update:modelValue", $), s("change", $);
}, p = (u) => {
s("focus", u);
}, y = (u) => {
s("blur", u);
}, C = (u) => {
o.disabled || s("click", u);
};
return (u, $) => (l(), a("label", {
class: V(["f-switch", {
"f-switch--checked": r.value,
"f-switch--disabled": u.disabled,
"f-switch--on-content": u.onContent,
"f-switch--off-content": u.offContent
}]),
style: K(i.value)
}, [
d("input", {
type: "checkbox",
class: "f-switch__input",
checked: r.value,
disabled: u.disabled,
onChange: n,
onFocus: p,
onBlur: y,
onClick: C
}, null, 40, $e),
d("div", _e, [
d("div", Ve, [
r.value && u.onContent ? (l(), a("div", Be, g(u.onContent), 1)) : f("", !0),
!r.value && u.offContent ? (l(), a("div", Me, g(u.offContent), 1)) : f("", !0)
])
]),
u.label ? (l(), a("div", Ie, g(u.label), 1)) : f("", !0)
], 6));
}
}), Te = /* @__PURE__ */ T(Fe, [["__scopeId", "data-v-8b2f76c2"]]);
function Le(e, t) {
const o = L(!1), s = L(""), r = L(), i = L(), n = L(-1), p = S(
() => e.options.find((c) => c.value === e.modelValue)
), y = S(() => {
var c;
return o.value && s.value ? s.value : ((c = p.value) == null ? void 0 : c.label) || "";
}), C = S(() => s.value ? e.options.filter(
(c) => c.label.toLowerCase().includes(s.value.toLowerCase()) && !c.disabled
) : e.options), u = () => {
e.disabled || e.readonly || (o.value = !o.value, o.value ? (s.value = "", n.value = -1, re(() => {
var c;
(c = r.value) == null || c.focus();
}), t("open")) : t("close"));
}, $ = (c) => {
c.disabled || (t("update:modelValue", c.value), t("change", c.value, c), o.value = !1, s.value = "");
}, _ = (c) => {
const b = c.target;
s.value = b.value, t("search", b.value), o.value || (o.value = !0, t("open"));
}, m = (c) => {
if (!o.value) {
(c.key === "Enter" || c.key === " " || c.key === "ArrowDown") && (c.preventDefault(), u());
return;
}
switch (c.key) {
case "Escape":
o.value = !1;
break;
case "Enter":
c.preventDefault(), n.value >= 0 && C.value[n.value] && $(C.value[n.value]);
break;
case "ArrowDown":
c.preventDefault(), n.value = Math.min(
n.value + 1,
C.value.length - 1
);
break;
case "ArrowUp":
c.preventDefault(), n.value = Math.max(n.value - 1, 0);
break;
}
}, B = (c) => {
t("focus", c);
}, R = (c) => {
setTimeout(() => {
var b;
(b = i.value) != null && b.contains(document.activeElement) || (o.value = !1, s.value = "");
}, 100), t("blur", c);
}, k = (c) => {
var G, W;
const b = c.target, P = (W = (G = r.value) == null ? void 0 : G.parentElement) == null ? void 0 : W.parentElement;
P && !P.contains(b) && (o.value = !1, s.value = "");
};
return j(() => {
document.addEventListener("click", k);
}), Z(() => {
document.removeEventListener("click", k);
}), {
isOpen: o,
searchText: s,
inputRef: r,
dropdownRef: i,
selectedIndex: n,
displayText: y,
filteredOptions: C,
selectedOption: p,
toggleDropdown: u,
selectOption: $,
handleInput: _,
handleKeydown: m,
handleFocus: B,
handleBlur: R,
handleClickOutside: k
};
}
const Se = { class: "combo-box-input-container" }, Ee = ["value", "placeholder", "disabled", "readonly"], Pe = ["disabled"], Oe = { class: "combo-box-list" }, Ne = ["onClick"], He = { class: "combo-box-option-label" }, Ke = {
key: 0,
class: "combo-box-check-icon",
viewBox: "0 0 16 16",
fill: "none"
}, Re = {
key: 0,
class: "combo-box-no-results"
}, Ae = /* @__PURE__ */ x({
__name: "ComboBox",
props: {
modelValue: {},
options: {},
placeholder: { default: "请选择..." },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
width: {},
maxHeight: { default: "200px" }
},
emits: ["update:modelValue", "change", "focus", "blur", "click", "keydown", "keyup", "search", "open", "close"],
setup(e, { emit: t }) {
const o = e, s = t, {
isOpen: r,
inputRef: i,
dropdownRef: n,
selectedIndex: p,
displayText: y,
filteredOptions: C,
toggleDropdown: u,
selectOption: $,
handleInput: _,
handleKeydown: m,
handleFocus: B,
handleBlur: R
} = Le(o, s);
return (k, c) => (l(), a("div", {
class: V(["combo-box", {
"is-open": M(r),
"is-disabled": k.disabled,
"is-readonly": k.readonly
}]),
style: K({ width: k.width ? typeof k.width == "number" ? k.width + "px" : k.width : "240px" })
}, [
d("div", Se, [
d("input", {
ref_key: "inputRef",
ref: i,
type: "text",
class: "combo-box-input",
value: M(y),
placeholder: k.placeholder,
disabled: k.disabled,
readonly: k.readonly,
onInput: c[0] || (c[0] = //@ts-ignore
(...b) => M(_) && M(_)(...b)),
onKeydown: c[1] || (c[1] = //@ts-ignore
(...b) => M(m) && M(m)(...b)),
onFocus: c[2] || (c[2] = //@ts-ignore
(...b) => M(B) && M(B)(...b)),
onBlur: c[3] || (c[3] = //@ts-ignore
(...b) => M(R) && M(R)(...b))
}, null, 40, Ee),
d("button", {
class: "combo-box-toggle",
type: "button",
disabled: k.disabled,
onClick: c[4] || (c[4] = //@ts-ignore
(...b) => M(u) && M(u)(...b))
}, c[5] || (c[5] = [
d("svg", {
class: "combo-box-icon",
viewBox: "0 0 12 12",
fill: "none"
}, [
d("path", {
d: "M2.5 4.5L6 8L9.5 4.5",
stroke: "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
})
], -1)
]), 8, Pe)
]),
q(Y, { name: "dropdown" }, {
default: O(() => [
M(r) ? (l(), a("div", {
key: 0,
ref_key: "dropdownRef",
ref: n,
class: "combo-box-dropdown",
style: K({ maxHeight: k.maxHeight ? typeof k.maxHeight == "number" ? k.maxHeight + "px" : k.maxHeight : "200px" })
}, [
d("div", Oe, [
(l(!0), a(N, null, A(M(C), (b, P) => (l(), a("div", {
key: b.value,
class: V(["combo-box-option", {
"is-selected": b.value === k.modelValue,
"is-highlighted": P === M(p),
"is-disabled": b.disabled
}]),
onClick: (G) => M($)(b)
}, [
c[7] || (c[7] = d("div", { class: "combo-box-option-indicator" }, null, -1)),
d("span", He, g(b.label), 1),
b.value === k.modelValue ? (l(), a("svg", Ke, c[6] || (c[6] = [
d("path", {
d: "M13.5 4.5L6 12L2.5 8.5",
stroke: "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round",
"stroke-linejoin": "round"
}, null, -1)
]))) : f("", !0)
], 10, Ne))), 128)),
M(C).length === 0 ? (l(), a("div", Re, " 无匹配选项 ")) : f("", !0)
])
], 4)) : f("", !0)
]),
_: 1
})
], 6));
}
}), xe = /* @__PURE__ */ T(Ae, [["__scopeId", "data-v-00162f1b"]]), De = {
key: 0,
class: "content-dialog-header"
}, ze = ["aria-label"], Ge = {
key: 1,
class: "content-dialog-footer"
}, We = {
key: 2,
class: "content-dialog-footer"
}, Ue = /* @__PURE__ */ x({
name: "FContentDialog",
__name: "ContentDialog",
props: {
modelValue: { type: Boolean, default: !1 },
title: { default: "" },
content: { default: "" },
primaryButtonText: { default: "" },
secondaryButtonText: { default: "" },
closeButtonLabel: { default: "Close" },
size: { default: "medium" },
showCloseButton: { type: Boolean, default: !0 },
showTitle: { type: Boolean, default: !0 },
fullSize: { type: Boolean, default: !1 },
preventCloseOnOverlay: { type: Boolean, default: !1 },
preventCloseOnEscape: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "primary", "secondary", "close", "opened", "closed", "click", "keydown", "overlayClick"],
setup(e, { expose: t, emit: o }) {
const s = e, r = o, i = L(s.modelValue), n = "content-dialog-title-" + Math.random().toString(36).substr(2, 9), p = "content-dialog-content-" + Math.random().toString(36).substr(2, 9);
Q(() => s.modelValue, (m) => {
i.value = m;
}), Q(i, (m) => {
r("update:modelValue", m), m ? (r("opened"), document.body.style.overflow = "hidden") : (r("closed"), document.body.style.overflow = "");
});
const y = (m) => {
m.key === "Escape" && !s.preventCloseOnEscape && u();
}, C = () => {
r("overlayClick"), s.preventCloseOnOverlay || u();
}, u = () => {
i.value = !1, r("close");
}, $ = () => {
r("primary");
}, _ = () => {
r("secondary");
};
return j(() => {
i.value && (document.body.style.overflow = "hidden"), document.addEventListener("keydown", y);
}), Z(() => {
document.body.style.overflow = "", document.removeEventListener("keydown", y);
}), t({
open: () => {
i.value = !0;
},
close: () => {
i.value = !1;
}
}), (m, B) => (l(), E(oe, { to: "body" }, [
q(Y, { name: "content-dialog" }, {
default: O(() => [
i.value ? (l(), a("div", {
key: 0,
class: "content-dialog-overlay",
onClick: C
}, [
d("div", {
class: V(["content-dialog", [
`content-dialog--${m.size}`,
m.fullSize && "content-dialog--full-size"
]]),
role: "dialog",
"aria-modal": !0,
"aria-labelledby": n,
"aria-describedby": p,
onClick: B[0] || (B[0] = de(() => {
}, ["stop"]))
}, [
m.showTitle || m.$slots.header ? (l(), a("div", De, [
d("div", {
class: "content-dialog-title",
id: n
}, [
F(m.$slots, "title", {}, () => [
H(g(m.title), 1)
], !0)
]),
m.showCloseButton ? (l(), a("button", {
key: 0,
class: "content-dialog-close",
onClick: u,
"aria-label": m.closeButtonLabel
}, B[1] || (B[1] = [
d("svg", {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none"
}, [
d("path", {
d: "M2.22 2.22a.75.75 0 0 1 1.06 0L6 4.94 8.72 2.22a.75.75 0 1 1 1.06 1.06L7.06 6l2.72 2.72a.75.75 0 1 1-1.06 1.06L6 7.06l-2.72 2.72a.75.75 0 0 1-1.06-1.06L4.94 6 2.22 3.28a.75.75 0 0 1 0-1.06Z",
fill: "currentColor"
})
], -1)
]), 8, ze)) : f("", !0)
])) : f("", !0),
d("div", {
class: "content-dialog-content",
id: p
}, [
F(m.$slots, "default", {}, () => [
H(g(m.content), 1)
], !0)
]),
m.$slots.footer ? (l(), a("div", Ge, [
F(m.$slots, "footer", {}, void 0, !0)
])) : m.primaryButtonText || m.secondaryButtonText ? (l(), a("div", We, [
m.secondaryButtonText ? (l(), E(z, {
key: 0,
"button-type": "standard",
onClick: _
}, {
default: O(() => [
H(g(m.secondaryButtonText), 1)
]),
_: 1
})) : f("", !0),
m.primaryButtonText ? (l(), E(z, {
key: 1,
"button-type": "primary",
onClick: $
}, {
default: O(() => [
H(g(m.primaryButtonText), 1)
]),
_: 1
})) : f("", !0)
])) : f("", !0)
], 2)
])) : f("", !0)
]),
_: 3
})
]));
}
}), je = /* @__PURE__ */ T(Ue, [["__scopeId", "data-v-f03f7710"]]), Ze = {
name: "MenuFlyout",
props: {
visible: {
type: Boolean,
default: !1
},
items: {
type: Array,
default: () => [],
required: !0
},
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
},
trigger: {
type: String,
default: "click",
// 'click', 'hover', 'manual'
validator: (e) => ["click", "hover", "manual"].includes(e)
},
placement: {
type: String,
default: "bottom-start",
// 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'
validator: (e) => ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end"].includes(e)
}
},
emits: ["update:visible", "itemClick", "show", "hide", "triggerClick", "triggerEnter", "triggerLeave", "menuEnter", "menuLeave"],
data() {
return {
hoveredIndex: null,
containerHeight: 0,
triggerHovered: !1,
menuHovered: !1,
internalVisible: !1
};
},
computed: {
computedVisible() {
return this.trigger === "manual" ? this.visible : this.internalVisible;
},
flyoutStyle() {
const e = {};
return this.placement.startsWith("top") ? e.transformOrigin = "bottom left" : e.transformOrigin = "top left", e;
}
},
methods: {
isComponent(e) {
return typeof e == "object";
},
handleItemClick(e, t) {
e.disabled || e.separator || (e.onClick && e.onClick(), this.$emit("itemClick", e, t), this.trigger === "click" && (this.internalVisible = !1, this.$emit("update:visible", !1), this.$emit("hide")));
},
handleItemHover(e) {
this.hoveredIndex = e;
},
handleItemLeave() {
this.hoveredIndex = null;
},
handleClickOutside(e) {
this.computedVisible && this.$refs.menuWrapper && !this.$refs.menuWrapper.contains(e.target) && this.trigger !== "hover" && (this.internalVisible = !1, this.$emit("update:visible", !1), this.$emit("hide"));
},
handleTriggerClick() {
this.trigger === "click" && (this.internalVisible = !this.internalVisible, this.$emit("update:visible", this.internalVisible), this.$emit("triggerClick"), this.internalVisible ? this.$emit("show") : this.$emit("hide"));
},
handleTriggerMouseEnter() {
this.trigger === "hover" && (this.triggerHovered = !0, this.internalVisible = !0, this.$emit("update:visible", !0), this.$emit("triggerEnter"), this.$emit("show"));
},
handleTriggerMouseLeave() {
this.trigger === "hover" && (this.triggerHovered = !1, this.$emit("triggerLeave"), setTimeout(() => {
!this.menuHovered && !this.triggerHovered && (this.internalVisible = !1, this.$emit("update:visible", !1), this.$emit("hide"));
}, 100));
},
handleMenuMouseEnter() {
this.trigger === "hover" && (this.menuHovered = !0, this.$emit("menuEnter"));
},
handleMenuMouseLeave() {
this.trigger === "hover" && (this.menuHovered = !1, this.$emit("menuLeave"), setTimeout(() => {
!this.menuHovered && !this.triggerHovered && (this.internalVisible = !1, this.$emit("update:visible", !1), this.$emit("hide"));
}, 100));
},
setContainerHeight() {
this.$refs.flyoutContainer && (this.containerHeight = this.$refs.flyoutContainer.offsetHeight);
},
updatePosition() {
if (this.$slots.trigger && this.$refs.trigger && this.$refs.flyoutContainer) {
const e = this.$refs.trigger.getBoundingClientRect(), t = this.$refs.flyoutContainer.parentElement;
t.style.position = "fixed", t.style.left = `${e.left}px`, t.style.top = `${e.bottom}px`, this.$nextTick(() => {
const o = t.getBoundingClientRect();
let s, r;
switch (this.placement) {
case "top":
s = e.left + e.width / 2 - o.width / 2, r = e.top - o.height;
break;
case "top-start":
s = e.left, r = e.top - o.height;
break;
case "top-end":
s = e.right - o.width, r = e.top - o.height;
break;
case "bottom":
s = e.left + e.width / 2 - o.width / 2, r = e.bottom;
break;
case "bottom-start":
s = e.left, r = e.bottom;
break;
case "bottom-end":
s = e.right - o.width, r = e.bottom;
break;
default:
s = e.left, r = e.bottom;
}
t.style.left = `${s}px`, t.style.top = `${r}px`;
});
}
this.$nextTick(() => {
this.setContainerHeight();
});
}
},
mounted() {
document.addEventListener("click", this.handleClickOutside), this.$refs.flyoutContainer && (this.$refs.flyoutContainer.addEventListener("mouseenter", this.handleMenuMouseEnter), this.$refs.flyoutContainer.addEventListener("mouseleave", this.handleMenuMouseLeave));
},
beforeUnmount() {
document.removeEventListener("click", this.handleClickOutside), this.$refs.flyoutContainer && (this.$refs.flyoutContainer.removeEventListener("mouseenter", this.handleMenuMouseEnter), this.$refs.flyoutContainer.removeEventListener("mouseleave", this.handleMenuMouseLeave));
},
watch: {
computedVisible(e) {
e && this.$nextTick(() => {
this.updatePosition();
});
},
items() {
this.computedVisible && this.$nextTick(() => {
this.updatePosition();
});
}
}
}, qe = {
class: "menu-wrapper",
ref: "menuWrapper"
}, Je = {
class: "menu-flyout-container",
ref: "flyoutContainer"
}, Qe = ["onClick", "onMouseenter", "onMouseleave"], Xe = {
key: 0,
class: "menu-item-icon"
}, Ye = { class: "menu-item-text" }, et = {
key: 1,
class: "menu-item-shortcut"
};
function tt(e, t, o, s, r, i) {
return l(), a("div", qe, [
e.$slots.trigger ? (l(), a("div", {
key: 0,
class: "menu-trigger",
ref: "trigger",
onClick: t[0] || (t[0] = (...n) => i.handleTriggerClick && i.handleTriggerClick(...n)),
onMouseenter: t[1] || (t[1] = (...n) => i.handleTriggerMouseEnter && i.handleTriggerMouseEnter(...n)),
onMouseleave: t[2] || (t[2] = (...n) => i.handleTriggerMouseLeave && i.handleTriggerMouseLeave(...n))
}, [
F(e.$slots, "trigger", {}, void 0, !0)
], 544)) : f("", !0),
ne(d("div", {
class: "menu-flyout",
style: K(i.flyoutStyle)
}, [
d("div", Je, [
(l(!0), a(N, null, A(o.items, (n, p) => (l(), a("div", {
key: p,
class: V({
"menu-item": !n.separator,
"menu-separator": n.separator
}),
onClick: (y) => i.handleItemClick(n, p),
onMouseenter: (y) => i.handleItemHover(p),
onMouseleave: (y) => i.handleItemLeave(p)
}, [
n.separator ? f("", !0) : (l(), a(N, { key: 0 }, [
n.icon ? (l(), a("span", Xe, [
i.isComponent(n.icon) ? (l(), E(X(n.icon), { key: 0 })) : (l(), a("i", {
key: 1,
class: V(n.icon)
}, null, 2))
])) : f("", !0),
d("span", Ye, g(n.text), 1),
n.shortcut ? (l(), a("span", et, g(n.shortcut), 1)) : f("", !0)
], 64))
], 42, Qe))), 128))
], 512)
], 4), [
[ue, i.computedVisible]
])
], 512);
}
const nt = /* @__PURE__ */ T(Ze, [["render", tt], ["__scopeId", "data-v-d97d0268"]]), ot = {
name: "NavigationView",
props: {
paneOpen: {
type: Boolean,
default: !0
},
compact: {
type: Boolean,
default: !1
},
showTopNav: {
type: Boolean,
default: !1
},
menuItems: {
type: Array,
default: () => []
}
},
emits: ["update:paneOpen", "itemSelect", "paneToggle", "groupToggle", "itemClick"],
data() {
return {
isPaneOpen: this.paneOpen,
isCompact: this.compact,
currentItem: null
};
},
mounted() {
const e = this.findFirstSelectableItem(this.menuItems);
e && (this.currentItem = e);
},
methods: {
togglePane() {
this.isCompact = !this.isCompact, this.$emit("update:paneCompact", this.isCompact), this.$emit("paneToggle", this.isCompact);
},
selectItem(e, t) {
e.disabled || (this.currentItem = e, this.$emit("itemSelect", e, t), this.$emit("itemClick", e, t));
},
isActiveItem(e) {
return this.currentItem === e;
},
toggleGroup(e) {
e.expanded = !e.expanded, this.$set(e, "expanded", e.expanded), this.$emit("groupToggle", e, e.expanded);
},
findFirstSelectableItem(e) {
for (const t of e)
if (t.type === "group" && t.children) {
const o = this.findFirstSelectableItem(t.children);
if (o) return o;
} else if (!t.type && !t.disabled)
return t;
return null;
}
}
}, st = { class: "pane-header" }, it = ["aria-label"], lt = { class: "pane-content" }, at = { class: "navigation-menu" }, rt = { class: "menu-list" }, dt = {
key: 0,
class: "menu-separator"
}, ut = {
key: 1,
class: "menu-header"
}, ct = { class: "menu-header-content" }, ht = {
key: 0,
class: "menu-header-text"
}, pt = ["onClick"], ft = { class: "menu-item-content" }, mt = { class: "menu-item-icon" }, vt = {
key: 0,
class: "menu-item-text"
}, gt = {
key: 0,
class: "expand-icon"
}, yt = {
key: 0,
class: "submenu-list"
}, bt = ["onClick"], wt = { class: "menu-item-content" }, kt = { class: "menu-item-icon" }, Ct = {
key: 0,
class: "menu-item-text"
}, $t = ["onClick"], _t = { class: "menu-item-content" }, Vt = { class: "menu-item-icon" }, Bt = {
key: 0,
class: "menu-item-text"
}, Mt = {
key: 0,
class: "pane-footer"
}, It = { style: { "border-radius": "12px", display: "flex", flex: "1", height: "calc(100% - 45px)", "margin-top": "45px", width: "100%", position: "relative", top: "-8px", "z-index": "999999" } }, Ft = { class: "content-area" }, Tt = { class: "content" };
function Lt(e, t, o, s, r, i) {
return l(), a("div", {
class: V(["navigation-view", { expanded: r.isPaneOpen, compact: !r.isPaneOpen }])
}, [
d("div", {
class: V(["navigation-pane", {
open: r.isPaneOpen,
closed: !r.isPaneOpen,
compact: r.isCompact,
expanded: !r.isCompact
}])
}, [
d("div", st, [
d("button", {
class: "pane-toggle-button",
onClick: t[0] || (t[0] = (...n) => i.togglePane && i.togglePane(...n)),
"aria-label": r.isCompact ? "收起导航面板" : "展开导航面板"
}, t[1] || (t[1] = [
d("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24"
}, [
d("g", {
id: "menu_line",
fill: "none"
}, [
d("path", { d: "M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z" }),
d("path", {
fill: "#09244BFF",
d: "M20 18a1 1 0 0 1 .117 1.993L20 20H4a1 1 0 0 1-.117-1.993L4 18zm0-7a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0-7a1 1 0 1 1 0 2H4a1 1 0 0 1 0-2z"
})
])
], -1)
]), 8, it),
F(e.$slots, "title", {}, void 0, !0)
]),
d("div", lt, [
d("nav", at, [
d("ul", rt, [
(l(!0), a(N, null, A(o.menuItems, (n, p) => (l(), a(N, { key: p }, [
n.type === "separator" ? (l(), a("li", dt)) : n.type === "header" ? (l(), a("li", ut, [
d("div", ct, [
r.isPaneOpen ? (l(), a("span", ht, g(n.title), 1)) : f("", !0)
])
])) : n.type === "group" ? (l(), a("li", {
key: 2,
class: V(["menu-group", { expanded: n.expanded }])
}, [
d("div", {
class: "menu-group-header",
onClick: (y) => i.toggleGroup(n)
}, [
d("div", ft, [
d("div", mt, [
F(e.$slots, "icon", {
item: n,
index: p
}, () => [
n.icon ? (l(), a("i", {
key: 0,
class: V(["menu-item-icon", n.icon])
}, null, 2)) : f("", !0)
], !0)
]),
r.isPaneOpen ? (l(), a("span", vt, g(n.title), 1)) : f("", !0)
]),
r.isPaneOpen ? (l(), a("div", gt, t[2] || (t[2] = [
d("svg", {
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none"
}, [
d("path", {
d: "M6 12L10 8L6 4",
stroke: "#757575",
"stroke-width": "1.33333",
"stroke-linecap": "round",
"stroke-linejoin": "round"
})
], -1)
]))) : f("", !0)
], 8, pt),
n.expanded && n.children ? (l(), a("ul", yt, [
(l(!0), a(N, null, A(n.children, (y, C) => (l(), a("li", {
key: C,
class: V(["submenu-item", {
active: i.isActiveItem(y),
disabled: y.disabled
}]),
onClick: (u) => i.selectItem(y, `${p}-${C}`)
}, [
d("div", wt, [
d("div", kt, [
F(e.$slots, "icon", {
item: y,
index: `${p}-${C}`
}, () => [
y.icon ? (l(), a("i", {
key: 0,
class: V(["menu-item-icon", y.icon])
}, null, 2)) : f("", !0)
], !0)
]),
r.isPaneOpen ? (l(), a("span", Ct, g(y.title), 1)) : f("", !0)
])
], 10, bt))), 128))
])) : f("", !0)
], 2)) : (l(), a("li", {
key: 3,
class: V(["menu-item", {
active: i.isActiveItem(n),
disabled: n.disabled
}]),
onClick: (y) => i.selectItem(n, p)
}, [
d("div", _t, [
d("div", Vt, [
F(e.$slots, "icon", {
item: n,
index: p
}, () => [
n.icon ? (l(), a("i", {
key: 0,
class: V(["menu-item-icon", n.icon])
}, null, 2)) : f("", !0)
], !0)
]),
r.isPaneOpen ? (l(), a("span", Bt, g(n.title), 1)) : f("", !0)
])
], 10, $t))
], 64))), 128))
])
]),
e.$slots.footer ? (l(), a("div", Mt, [
F(e.$slots, "footer", {}, void 0, !0)
])) : f("", !0)
])
], 2),
d("div", It, [
d("div", Ft, [
d("div", Tt, [
F(e.$slots, "default", {}, void 0, !0)
])
])
])
], 2);
}
const St = /* @__PURE__ */ T(ot, [["render", Lt], ["__scopeId", "data-v-17e24428"]]), Et = ["onMouseenter", "onMouseleave"], Pt = { class: "f-notification__header" }, Ot = { class: "f-notification__icon" }, Nt = ["src"], Ht = { class: "f-notification__content" }, Kt = {
key: 0,
class: "f-notification__title"
}, Rt = ["onClick"], At = {
key: 0,
class: "f-notification__body"
}, xt = {
key: 1,
class: "f-notification__progress"
}, Dt = { class: "f-notification__progress-text" }, zt = {
key: 2,
class: "f-notification__actions"
}, Gt = /* @__PURE__ */ x({
__name: "FNotification",
props: {
position: { default: "top-right" },
maxCount: { default: 5 }
},
emits: ["show", "close", "closeAll", "action", "pause", "resume"],
setup(e, { expose: t, emit: o }) {
const s = {
template: `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M8 6V8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M8 11V11.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
`
}, r = {
template: `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M5.5 8L7 9.5L10.5 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
`
}, i = {
template: `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M8 5V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M8 12V12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
`
}, n = {
template: `
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path
d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
stroke="currentColor"
stroke-width="1.5"
/>
<path d="M5.5 5.5L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M10.5 5.5L5.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
`
}, p = L([]);
let y = 0;
const C = e, u = o, $ = (w) => {
const v = w.id || `notification-${++y}`, h = p.value.findIndex((D) => D.id === v);
h !== -1 && p.value.splice(h, 1);
const I = {
...w,
id: v,
type: w.type || "info",
variant: w.variant || "standard",
duration: w.duration ?? 4e3
};
if (p.value.unshift(I), p.value.length > C.maxCount && (p.value = p.value.slice(0, C.maxCount)), I.duration > 0) {
const D = setTimeout(() => {
_(v);
}, I.duration);
I.timeoutId = D;
}
return u("show", I), v;
}, _ = (w) => {
const v = p.value.findIndex((h) => h.id === w);
if (v !== -1) {
const h = p.value[v];
h.timeoutId && clearTimeout(h.timeoutId), p.value.splice(v, 1), u("close", h);
}
}, m = () => {
p.value.forEach((w) => {
w.timeoutId && clearTimeout(w.timeoutId);
}), u("closeAll"), p.value = [];
}, B = (w, v) => {
const h = p.value.find((I) => I.id === w);
h && (h.progress = Math.max(0, Math.min(100, v)), h.showProgress = !0);
}, R = (w) => {
const v = p.value.find((h) => h.id === w);
v && v.timeoutId && (clearTimeout(v.timeoutId), delete v.timeoutId, u("pause", v));
}, k = (w) => {
const v = p.value.find((h) => h.id === w);
if (v && !v.timeoutId && v.duration > 0) {
const h = setTimeout(() => {
_(w);
}, v.duration);
v.timeoutId = h, u("resume", v);
}
}, c = (w, v) => {
u("action", { notification: w, action: v }), v.handler(), _(w.id);
}, b = (w) => {
switch (w) {
case "success":
return r;
case "warning":
return i;
case "error":
return n;
default:
return s;
}
};
t({
show: $,
close: _,
closeAll: m,
updateProgress: B
});
let P = null;
const W = (P || (P = {
show: $,
close: _,
closeAll: m,
updateProgress: B
}), P);
return typeof window < "u" && (window.$notification = W), j(() => {
}), Z(() => {
m();
}), (w, v) => (l(), E(oe, { to: "body" }, [
q(ce, {
name: "notification",
tag: "div",
class: V(["f-notification-container", [`f-notification-container--${w.position}`]])
}, {
default: O(() => [
(l(!0), a(N, null, A(p.value, (h) => (l(), a("div", {
key: h.id,
class: V(["f-notification", [
`f-notification--${h.type}`,
`f-notification--${h.variant}`,
{ "f-notification--has-action": h.action }
]]),
onMouseenter: (I) => R(h.id),
onMouseleave: (I) => k(h.id)
}, [
d("div", Pt, [
d("div", Ot, [
h.iconUrl ? (l(), a("img", {
key: 0,
src: h.iconUrl,
class: "f-notification__icon-img",
alt: ""
}, null, 8, Nt)) : h.icon ? (l(), E(X(h.icon), { key: 1 })) : (l(), E(X(b(h.type)), { key: 2 }))
]),
d("div", Ht, [
h.title ? (l(), a("div", Kt, g(h.title), 1)) : f("", !0)
]),
d("button", {
class: "f-notification__close",
onClick: (I) => _(h.id),
"aria-label": "关闭通知"
}, v[0] || (v[0] = [
d("svg", {
width: "12",
height: "12",
viewBox: "0 0 12 12",
fill: "none"
}, [
d("path", {
d: "M2.25 2.25L9.75 9.75M9.75 2.25L2.25 9.75",
stroke: "currentColor",
"stroke-width": "1.5",
"stroke-linecap": "round"
})
], -1)
]), 8, Rt)
]),
h.body ? (l(), a("div", At, g(h.body), 1)) : f("", !0),
h.showProgress && typeof h.progress == "number" ? (l(), a("div", xt, [
d("div", {
class: "f-notification__progress-bar",
style: K({ width: Math.max(0, Math.min(100, h.progress)) + "%" })
}, null, 4),
d("div", Dt, g(Math.round(h.progress)) + "%", 1)
])) : f("", !0),
h.action || h.actions ? (l(), a("div", zt, [
h.action && !h.actions ? (l(), E(z, {
key: 0,
"button-type": h.action.type || "standard",
class: "f-notification__action-btn",
onClick: (I) => c(h, h.action)
}, {
default: O(() => [
H(g(h.action.text), 1)
]),
_: 2
}, 1032, ["button-type", "onClick"])) : f("", !0),
(l(!0), a(N, null, A(h.actions, (I, D) => {
var ee;
return l(), E(z, {
key: D,
"button-type": I.type || "standard",
class: V(["f-notification__action-btn", `f-notification__action-btn--${((ee = h.actions) == null ? void 0 : ee.length) || 1}`]),
onClick: ($n) => c(h, I)
}, {
default: O(() => [
H(g(I.text), 1)
]),
_: 2
}, 1032, ["button-type", "class", "onClick"]);
}), 128))
])) : f("", !0)
], 42, Et))), 128))
]),
_: 1
}, 8, ["class"])
]));
}
}), se = /* @__PURE__ */ T(Gt, [["__scopeId", "data-v-1f4bf731"]]), Wt = {
name: "FRadio",
props: {
value: {
type: [String, Number],
required: !0
},
groupName: {
type: String,
default: "defaultGroup"
}
},
setup(e) {
const t = te("updateValue");
return {
isChecked: S(() => te("radioGroup", { value: null }).value === e.value),
handleChange: () => {
t && t(e.value);
},
handleFocus: (p) => {
},
handleBlur: (p) => {
},
handleClick: (p) => {
}
};
}
}, Ut = { class: "radio-container" }, jt = ["name", "value", "checked"], Zt = { class: "radio-label" };
function qt(e, t, o, s, r, i) {
return l(), a("label", Ut, [
d("input", {
type: "radio",
name: o.groupName,
value: o.value,
checked: s.isChecked,
onChange: t[0] || (t[0] = (...n) => s.handleChange && s.handleChange(...n)),
onFocus: t[1] || (t[1] = (...n) => s.handleFocus && s.handleFocus(...n)),
onBlur: t[2] || (t[2] = (...n) => s.handleBlur && s.handleBlur(...n)),
onClick: t[3] || (t[3] = (...n) => s.handleClick && s.handleClick(...n))
}, null, 40, jt),
t[4] || (t[4] = d("span", { class: "radio-checkmark" }, null, -1)),
d("span", Zt, [
F(e.$slots, "default", {}, void 0, !0)
])
]);
}
const Jt = /* @__PURE__ */ T(Wt, [["render", qt], ["__scopeId", "data-v-050bfc6b"]]), Qt = {
name: "FRadioGroup",
props: {
modelValue: {
type: [String, Number],
default: null
}
},
setup(e, { slots: t, emit: o }) {
const s = L(e.modelValue);
return Q(() => e.modelValue, (i) => {
s.value = i;
}), he("updateValue", (i) => {
s.value = i, o("update:modelValue", i), o("change", i);
}), {
localValue: s
};
}
}, Xt = { class: "radio-group" };
function Yt(e, t, o, s, r, i) {
return l(), a("div", Xt, [
F(e.$slots, "default", {}, void 0, !0)
]);
}
const en = /* @__PURE__ */ T(Qt, [["render", Yt], ["__scopeId", "data-v-9cc75180"]]), tn = x({
name: "FSlider",
props: {
modelValue: {
type: Number,
default: 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
showValue: {
type: Boolean,
default: !1
},
showThumbValue: {
type: Boolean,
default: !1
},
valuePosition: {
type: String,
default: "header"
}
},
emits: ["update:modelValue", "change", "input", "focus", "blur", "mousedown", "mouseup", "keydown", "keyup"],
setup(e, { emit: t }) {
const o = L(null), s = L(!1), r = S(() => e.label || e.showValue && e.valuePosition === "header"), i = S(() => `value-${e.valuePosition}`), n = S(() => {
const _ = (e.modelValue - e.min) / (e.max - e.min) * 100;
return Math.max(0, Math.min(100, _));
}), p = (_) => {
t("update:modelValue", _);
}, y = (_) => {
const m = _.target, B = parseFloat(m.value);
p(B), t("input", B);
}, C = (_) => {
const m = _.target, B = parseFloat(m.value);
t("change", B);
}, u = () => {
s.value = !0;
}, $ = () => {
s.value = !1;
};
return j(() => {
o.value && (o.value.addEventListener("mousedown", u), window.addEventListener("mouseup", $));
}), Z(() => {
o.value && o.value.removeEventListener("mousedown", u), window.removeEventListener("mouseup", $);
}), {
sliderRef: o,
isDragging: s,
fillPercentage: n,
handleInput: y,
handleChange: C,
showHeader: r,
valuePositionClass: i
};
}
}), nn = {
key: 0,
class: "winui-slider-header"
}, on = {
key: 0,
class: "winui-slider-label"
}, sn = {
key: 1,
class: "winui-slider-value"
}, ln = { class: "winui-slider-wrapper" }, an = ["min", "max", "step", "value", "disabled"], rn = { class: "winui-slider-track" }, dn = {
key: 0,
class: "winui-slider-thumb-value"
}, un = {
key: 0,
class: "winui-slider-value-below"
}, cn = {
key: 1,
class: "winui-slider-value-above"
}, hn = {
key: 1,
class: "winui-slider-value-left"
}, pn = {
key: 2,
class: "winui-slider-value-right"
};
function fn(e, t, o, s, r, i) {
return l(), a("div", {
class: V(["winui-slider-container", e.valuePositionClass])
}, [
e.showHeader ? (l(), a("div", nn, [
e.label ? (l(), a("label", on, g(e.label), 1)) : f("", !0),
e.showValue && e.valuePosition === "header" ? (l(), a("span", sn, g(e.modelValue), 1)) : f("", !0)
])) : f("", !0),
d("div", ln, [
d("input", {
ref: "sliderRef",
type: "range",
class: "winui-slider",
min: e.min,
max: e.max,
step: e.step,
value: e.modelValue,
disabled: e.disabled,
onInput: t[0] || (t[0] = (...n) => e.handleInput && e.handleInput(...n)),
onChange: t[1] || (t[1] = (...n) => e.handleChange && e.handleChange(...n)),
onFocus: t[2] || (t[2] = (...n) => e.handleFocus && e.handleFocus(...n)),
onBlur: t[3] || (t[3] = (...n) => e.handleBlur && e.handleBlur(...n)),
onKeydown: t[4] || (t[4] = (...n) => e.handleKeydown && e.handleKeydown(...n)),
onKeyup: t[5] || (t[5] = (...n) => e.handleKeyup && e.handleKeyup(...n))
}, null, 40, an),
d("div", rn, [
d("div", {
class: "winui-slider-track-fill",
style: K({ width: e.fillPercentage + "%" })
}, null, 4)
]),
d("div", {
class: V(["winui-slider-thumb", { active: e.isDragging }]),
style: K({ left: e.fillPercentage + "%" })
}, [
e.showThumbValue ? (l(), a("div", dn, g(e.modelValue), 1)) : f("", !0)
], 6),
e.showValue && e.valuePosition === "below" ? (l(), a("div", un, g(e.modelValue), 1)) : f("", !0),
e.showValue && e.valuePosition === "above" ? (l(), a("div", cn, g(e.modelValue), 1)) : f("", !0)
]),
e.showValue && e.valuePosition === "left" ? (l(), a("div", hn, g(e.modelValue), 1)) : f("", !0),
e.showValue && e.valuePosition === "right" ? (l(), a("div", pn, g(e.modelValue), 1)) : f("", !0)
], 2);
}
const mn = /* @__PURE__ */ T(tn, [["render", fn], ["__scopeId", "data-v-f4303e86"]]), vn = {
name: "FTooltips",
props: {
text: {
type: String,
default: ""
},
position: {
type: String,
default: "top",
validator: (e) => ["top", "bottom", "left", "right"].includes(e)
},
delay: {
type: Number,
default: 500
},
disabled: {
type: Boolean,
default: !1
}
},
data() {
return {
visible: !1,
timeoutId: null
};
},
methods: {
showTooltip() {
this.disabled || (this.timeoutId = setTimeout(() => {
this.visible = !0, this.$emit("show"), this.$nextTick(() => {
this.calculatePosition();
});
}, this.delay));
},
hideTooltip() {
this.timeoutId && (clearTimeout(this.timeoutId), this.timeoutId = null), this.visible = !1, this.$emit("hide");
},
calculatePosition() {
const e = this.$refs.tooltipContainer.querySelector(".tooltip-trigger"), t = this.$refs.tooltip;
if (!e || !t) return;
const o = e.