watercolor-ui
Version:
A modern minimalist cross-framework component library
11,898 lines • 365 kB
JavaScript
import { ref as A, computed as C, createElementBlock as y, openBlock as m, normalizeStyle as ce, normalizeClass as T, Fragment as ke, renderList as Ce, createElementVNode as _, toDisplayString as I, renderSlot as M, createTextVNode as he, createCommentVNode as j, createBlock as Se, withCtx as je, resolveDynamicComponent as ze, unref as ta, withModifiers as Ae, defineComponent as Fe, onMounted as Pe, onBeforeUnmount as Ze, watch as Re, onUnmounted as He, createVNode as Ge, Transition as Ke, resolveComponent as or, provide as it, inject as Le, nextTick as lt, defineAsyncComponent as jt, watchEffect as ir, mergeProps as ot, withKeys as We, Teleport as ct, getCurrentInstance as ut, withDirectives as Ea, vModelText as Ia } from "vue";
import dt, { useState as te, forwardRef as cr, useRef as Te, useEffect as ve, useImperativeHandle as ur, createContext as ft, useMemo as Oe, useContext as qe, lazy as yt, Suspense as aa, useId as Ba, useCallback as Ot } from "react";
import dr, { createPortal as Ra } from "react-dom";
const fr = ["default", "bordered", "filled"];
function pr(e = "default") {
return fr.includes(e) ? e : "default";
}
function mr(e) {
return e ? typeof e == "string" ? e : Array.isArray(e) ? e.filter(Boolean).join(" ") : typeof e == "object" ? Object.entries(e).filter(([, t]) => t).map(([t]) => t).join(" ") : "" : "";
}
function Pa(e = "default", t = "") {
const a = pr(e), n = mr(t);
return [
"wc-accordion",
a !== "default" ? `wc-accordion--${a}` : "",
n
].filter(Boolean).join(" ");
}
function Da(e = [], t, a = !1) {
return a ? e.includes(t) ? e.filter((n) => n !== t) : [...e, t] : e.includes(t) ? [] : [t];
}
const hr = ["onClick"], vr = { class: "wc-accordion-title" }, yr = { class: "wc-accordion-content-inner" }, mf = {
__name: "Accordion",
props: {
items: {
type: Array,
required: !0,
default: () => []
},
multiple: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "bordered", "filled"].includes(e)
},
class: {
type: [String, Array, Object],
default: ""
},
style: {
type: [String, Object],
default: () => ({})
}
},
emits: ["toggle"],
setup(e, { emit: t }) {
const a = e, n = t, r = A([]), s = C(() => Pa(a.variant, a.class)), l = (o) => {
r.value = Da(r.value, o, a.multiple), n("toggle", o, r.value.includes(o));
};
return (o, u) => (m(), y("div", {
class: T(s.value),
style: ce(e.style)
}, [
(m(!0), y(ke, null, Ce(e.items, (i, c) => (m(), y("div", {
key: c,
class: "wc-accordion-item"
}, [
_("button", {
class: T(["wc-accordion-header", { "wc-accordion-header--active": r.value.includes(c) }]),
type: "button",
onClick: (d) => l(c)
}, [
_("span", vr, I(i.title), 1),
_("span", {
class: T(["wc-accordion-icon", { "wc-accordion-icon--rotated": r.value.includes(c) }])
}, " ▼ ", 2)
], 10, hr),
_("div", {
class: T(["wc-accordion-content", { "wc-accordion-content--open": r.value.includes(c) }])
}, [
_("div", yr, [
M(o.$slots, `content-${c}`, { item: i }, () => [
he(I(i.content), 1)
])
])
], 2)
]))), 128))
], 6));
}
};
function gr(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var mt = { exports: {} }, tt = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var na;
function br() {
if (na) return tt;
na = 1;
var e = dt, t = Symbol.for("react.element"), a = Symbol.for("react.fragment"), n = Object.prototype.hasOwnProperty, r = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: !0, ref: !0, __self: !0, __source: !0 };
function l(o, u, i) {
var c, d = {}, p = null, h = null;
i !== void 0 && (p = "" + i), u.key !== void 0 && (p = "" + u.key), u.ref !== void 0 && (h = u.ref);
for (c in u) n.call(u, c) && !s.hasOwnProperty(c) && (d[c] = u[c]);
if (o && o.defaultProps) for (c in u = o.defaultProps, u) d[c] === void 0 && (d[c] = u[c]);
return { $$typeof: t, type: o, key: p, ref: h, props: d, _owner: r.current };
}
return tt.Fragment = a, tt.jsx = l, tt.jsxs = l, tt;
}
var at = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ra;
function wr() {
return ra || (ra = 1, process.env.NODE_ENV !== "production" && function() {
var e = dt, t = Symbol.for("react.element"), a = Symbol.for("react.portal"), n = Symbol.for("react.fragment"), r = Symbol.for("react.strict_mode"), s = Symbol.for("react.profiler"), l = Symbol.for("react.provider"), o = Symbol.for("react.context"), u = Symbol.for("react.forward_ref"), i = Symbol.for("react.suspense"), c = Symbol.for("react.suspense_list"), d = Symbol.for("react.memo"), p = Symbol.for("react.lazy"), h = Symbol.for("react.offscreen"), v = Symbol.iterator, g = "@@iterator";
function x(b) {
if (b === null || typeof b != "object")
return null;
var D = v && b[v] || b[g];
return typeof D == "function" ? D : null;
}
var $ = e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function B(b) {
{
for (var D = arguments.length, F = new Array(D > 1 ? D - 1 : 0), X = 1; X < D; X++)
F[X - 1] = arguments[X];
S("error", b, F);
}
}
function S(b, D, F) {
{
var X = $.ReactDebugCurrentFrame, de = X.getStackAddendum();
de !== "" && (D += "%s", F = F.concat([de]));
var ye = F.map(function(ue) {
return String(ue);
});
ye.unshift("Warning: " + D), Function.prototype.apply.call(console[b], console, ye);
}
}
var k = !1, w = !1, E = !1, W = !1, R = !1, Y;
Y = Symbol.for("react.module.reference");
function N(b) {
return !!(typeof b == "string" || typeof b == "function" || b === n || b === s || R || b === r || b === i || b === c || W || b === h || k || w || E || typeof b == "object" && b !== null && (b.$$typeof === p || b.$$typeof === d || b.$$typeof === l || b.$$typeof === o || b.$$typeof === u || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
b.$$typeof === Y || b.getModuleId !== void 0));
}
function O(b, D, F) {
var X = b.displayName;
if (X)
return X;
var de = D.displayName || D.name || "";
return de !== "" ? F + "(" + de + ")" : F;
}
function H(b) {
return b.displayName || "Context";
}
function Q(b) {
if (b == null)
return null;
if (typeof b.tag == "number" && B("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof b == "function")
return b.displayName || b.name || null;
if (typeof b == "string")
return b;
switch (b) {
case n:
return "Fragment";
case a:
return "Portal";
case s:
return "Profiler";
case r:
return "StrictMode";
case i:
return "Suspense";
case c:
return "SuspenseList";
}
if (typeof b == "object")
switch (b.$$typeof) {
case o:
var D = b;
return H(D) + ".Consumer";
case l:
var F = b;
return H(F._context) + ".Provider";
case u:
return O(b, b.render, "ForwardRef");
case d:
var X = b.displayName || null;
return X !== null ? X : Q(b.type) || "Memo";
case p: {
var de = b, ye = de._payload, ue = de._init;
try {
return Q(ue(ye));
} catch {
return null;
}
}
}
return null;
}
var q = Object.assign, ne = 0, V, K, ge, oe, P, z, Z;
function U() {
}
U.__reactDisabledLog = !0;
function J() {
{
if (ne === 0) {
V = console.log, K = console.info, ge = console.warn, oe = console.error, P = console.group, z = console.groupCollapsed, Z = console.groupEnd;
var b = {
configurable: !0,
enumerable: !0,
value: U,
writable: !0
};
Object.defineProperties(console, {
info: b,
log: b,
warn: b,
error: b,
group: b,
groupCollapsed: b,
groupEnd: b
});
}
ne++;
}
}
function re() {
{
if (ne--, ne === 0) {
var b = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: q({}, b, {
value: V
}),
info: q({}, b, {
value: K
}),
warn: q({}, b, {
value: ge
}),
error: q({}, b, {
value: oe
}),
group: q({}, b, {
value: P
}),
groupCollapsed: q({}, b, {
value: z
}),
groupEnd: q({}, b, {
value: Z
})
});
}
ne < 0 && B("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ee = $.ReactCurrentDispatcher, ae;
function se(b, D, F) {
{
if (ae === void 0)
try {
throw Error();
} catch (de) {
var X = de.stack.trim().match(/\n( *(at )?)/);
ae = X && X[1] || "";
}
return `
` + ae + b;
}
}
var G = !1, le;
{
var $e = typeof WeakMap == "function" ? WeakMap : Map;
le = new $e();
}
function L(b, D) {
if (!b || G)
return "";
{
var F = le.get(b);
if (F !== void 0)
return F;
}
var X;
G = !0;
var de = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var ye;
ye = ee.current, ee.current = null, J();
try {
if (D) {
var ue = function() {
throw Error();
};
if (Object.defineProperty(ue.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(ue, []);
} catch (Ee) {
X = Ee;
}
Reflect.construct(b, [], ue);
} else {
try {
ue.call();
} catch (Ee) {
X = Ee;
}
b.call(ue.prototype);
}
} else {
try {
throw Error();
} catch (Ee) {
X = Ee;
}
b();
}
} catch (Ee) {
if (Ee && X && typeof Ee.stack == "string") {
for (var ie = Ee.stack.split(`
`), Ne = X.stack.split(`
`), we = ie.length - 1, _e = Ne.length - 1; we >= 1 && _e >= 0 && ie[we] !== Ne[_e]; )
_e--;
for (; we >= 1 && _e >= 0; we--, _e--)
if (ie[we] !== Ne[_e]) {
if (we !== 1 || _e !== 1)
do
if (we--, _e--, _e < 0 || ie[we] !== Ne[_e]) {
var Ve = `
` + ie[we].replace(" at new ", " at ");
return b.displayName && Ve.includes("<anonymous>") && (Ve = Ve.replace("<anonymous>", b.displayName)), typeof b == "function" && le.set(b, Ve), Ve;
}
while (we >= 1 && _e >= 0);
break;
}
}
} finally {
G = !1, ee.current = ye, re(), Error.prepareStackTrace = de;
}
var Qe = b ? b.displayName || b.name : "", Ye = Qe ? se(Qe) : "";
return typeof b == "function" && le.set(b, Ye), Ye;
}
function De(b, D, F) {
return L(b, !1);
}
function Je(b) {
var D = b.prototype;
return !!(D && D.isReactComponent);
}
function Ue(b, D, F) {
if (b == null)
return "";
if (typeof b == "function")
return L(b, Je(b));
if (typeof b == "string")
return se(b);
switch (b) {
case i:
return se("Suspense");
case c:
return se("SuspenseList");
}
if (typeof b == "object")
switch (b.$$typeof) {
case u:
return De(b.render);
case d:
return Ue(b.type, D, F);
case p: {
var X = b, de = X._payload, ye = X._init;
try {
return Ue(ye(de), D, F);
} catch {
}
}
}
return "";
}
var et = Object.prototype.hasOwnProperty, zt = {}, Ft = $.ReactDebugCurrentFrame;
function pt(b) {
if (b) {
var D = b._owner, F = Ue(b.type, b._source, D ? D.type : null);
Ft.setExtraStackFrame(F);
} else
Ft.setExtraStackFrame(null);
}
function An(b, D, F, X, de) {
{
var ye = Function.call.bind(et);
for (var ue in b)
if (ye(b, ue)) {
var ie = void 0;
try {
if (typeof b[ue] != "function") {
var Ne = Error((X || "React class") + ": " + F + " type `" + ue + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof b[ue] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw Ne.name = "Invariant Violation", Ne;
}
ie = b[ue](D, ue, X, F, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (we) {
ie = we;
}
ie && !(ie instanceof Error) && (pt(de), B("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", X || "React class", F, ue, typeof ie), pt(null)), ie instanceof Error && !(ie.message in zt) && (zt[ie.message] = !0, pt(de), B("Failed %s type: %s", F, ie.message), pt(null));
}
}
}
var Ln = Array.isArray;
function kt(b) {
return Ln(b);
}
function zn(b) {
{
var D = typeof Symbol == "function" && Symbol.toStringTag, F = D && b[Symbol.toStringTag] || b.constructor.name || "Object";
return F;
}
}
function Fn(b) {
try {
return qt(b), !1;
} catch {
return !0;
}
}
function qt(b) {
return "" + b;
}
function Wt(b) {
if (Fn(b))
return B("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", zn(b)), qt(b);
}
var Ht = $.ReactCurrentOwner, qn = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ut, Yt;
function Wn(b) {
if (et.call(b, "ref")) {
var D = Object.getOwnPropertyDescriptor(b, "ref").get;
if (D && D.isReactWarning)
return !1;
}
return b.ref !== void 0;
}
function Hn(b) {
if (et.call(b, "key")) {
var D = Object.getOwnPropertyDescriptor(b, "key").get;
if (D && D.isReactWarning)
return !1;
}
return b.key !== void 0;
}
function Un(b, D) {
typeof b.ref == "string" && Ht.current;
}
function Yn(b, D) {
{
var F = function() {
Ut || (Ut = !0, B("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", D));
};
F.isReactWarning = !0, Object.defineProperty(b, "key", {
get: F,
configurable: !0
});
}
}
function Gn(b, D) {
{
var F = function() {
Yt || (Yt = !0, B("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", D));
};
F.isReactWarning = !0, Object.defineProperty(b, "ref", {
get: F,
configurable: !0
});
}
}
var Kn = function(b, D, F, X, de, ye, ue) {
var ie = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: t,
// Built-in properties that belong on the element
type: b,
key: D,
ref: F,
props: ue,
// Record the component responsible for creating this element.
_owner: ye
};
return ie._store = {}, Object.defineProperty(ie._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(ie, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: X
}), Object.defineProperty(ie, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: de
}), Object.freeze && (Object.freeze(ie.props), Object.freeze(ie)), ie;
};
function Jn(b, D, F, X, de) {
{
var ye, ue = {}, ie = null, Ne = null;
F !== void 0 && (Wt(F), ie = "" + F), Hn(D) && (Wt(D.key), ie = "" + D.key), Wn(D) && (Ne = D.ref, Un(D, de));
for (ye in D)
et.call(D, ye) && !qn.hasOwnProperty(ye) && (ue[ye] = D[ye]);
if (b && b.defaultProps) {
var we = b.defaultProps;
for (ye in we)
ue[ye] === void 0 && (ue[ye] = we[ye]);
}
if (ie || Ne) {
var _e = typeof b == "function" ? b.displayName || b.name || "Unknown" : b;
ie && Yn(ue, _e), Ne && Gn(ue, _e);
}
return Kn(b, ie, Ne, de, X, Ht.current, ue);
}
}
var _t = $.ReactCurrentOwner, Gt = $.ReactDebugCurrentFrame;
function Xe(b) {
if (b) {
var D = b._owner, F = Ue(b.type, b._source, D ? D.type : null);
Gt.setExtraStackFrame(F);
} else
Gt.setExtraStackFrame(null);
}
var Ct;
Ct = !1;
function St(b) {
return typeof b == "object" && b !== null && b.$$typeof === t;
}
function Kt() {
{
if (_t.current) {
var b = Q(_t.current.type);
if (b)
return `
Check the render method of \`` + b + "`.";
}
return "";
}
}
function Xn(b) {
return "";
}
var Jt = {};
function Qn(b) {
{
var D = Kt();
if (!D) {
var F = typeof b == "string" ? b : b.displayName || b.name;
F && (D = `
Check the top-level render call using <` + F + ">.");
}
return D;
}
}
function Xt(b, D) {
{
if (!b._store || b._store.validated || b.key != null)
return;
b._store.validated = !0;
var F = Qn(D);
if (Jt[F])
return;
Jt[F] = !0;
var X = "";
b && b._owner && b._owner !== _t.current && (X = " It was passed a child from " + Q(b._owner.type) + "."), Xe(b), B('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', F, X), Xe(null);
}
}
function Qt(b, D) {
{
if (typeof b != "object")
return;
if (kt(b))
for (var F = 0; F < b.length; F++) {
var X = b[F];
St(X) && Xt(X, D);
}
else if (St(b))
b._store && (b._store.validated = !0);
else if (b) {
var de = x(b);
if (typeof de == "function" && de !== b.entries)
for (var ye = de.call(b), ue; !(ue = ye.next()).done; )
St(ue.value) && Xt(ue.value, D);
}
}
}
function Zn(b) {
{
var D = b.type;
if (D == null || typeof D == "string")
return;
var F;
if (typeof D == "function")
F = D.propTypes;
else if (typeof D == "object" && (D.$$typeof === u || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
D.$$typeof === d))
F = D.propTypes;
else
return;
if (F) {
var X = Q(D);
An(F, b.props, "prop", X, b);
} else if (D.PropTypes !== void 0 && !Ct) {
Ct = !0;
var de = Q(D);
B("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", de || "Unknown");
}
typeof D.getDefaultProps == "function" && !D.getDefaultProps.isReactClassApproved && B("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function er(b) {
{
for (var D = Object.keys(b.props), F = 0; F < D.length; F++) {
var X = D[F];
if (X !== "children" && X !== "key") {
Xe(b), B("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", X), Xe(null);
break;
}
}
b.ref !== null && (Xe(b), B("Invalid attribute `ref` supplied to `React.Fragment`."), Xe(null));
}
}
var Zt = {};
function ea(b, D, F, X, de, ye) {
{
var ue = N(b);
if (!ue) {
var ie = "";
(b === void 0 || typeof b == "object" && b !== null && Object.keys(b).length === 0) && (ie += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var Ne = Xn();
Ne ? ie += Ne : ie += Kt();
var we;
b === null ? we = "null" : kt(b) ? we = "array" : b !== void 0 && b.$$typeof === t ? (we = "<" + (Q(b.type) || "Unknown") + " />", ie = " Did you accidentally export a JSX literal instead of a component?") : we = typeof b, B("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", we, ie);
}
var _e = Jn(b, D, F, de, ye);
if (_e == null)
return _e;
if (ue) {
var Ve = D.children;
if (Ve !== void 0)
if (X)
if (kt(Ve)) {
for (var Qe = 0; Qe < Ve.length; Qe++)
Qt(Ve[Qe], b);
Object.freeze && Object.freeze(Ve);
} else
B("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Qt(Ve, b);
}
if (et.call(D, "key")) {
var Ye = Q(b), Ee = Object.keys(D).filter(function(lr) {
return lr !== "key";
}), $t = Ee.length > 0 ? "{key: someKey, " + Ee.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Zt[Ye + $t]) {
var sr = Ee.length > 0 ? "{" + Ee.join(": ..., ") + ": ...}" : "{}";
B(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`, $t, Ye, sr, Ye), Zt[Ye + $t] = !0;
}
}
return b === n ? er(_e) : Zn(_e), _e;
}
}
function tr(b, D, F) {
return ea(b, D, F, !0);
}
function ar(b, D, F) {
return ea(b, D, F, !1);
}
var nr = ar, rr = tr;
at.Fragment = n, at.jsx = nr, at.jsxs = rr;
}()), at;
}
var sa;
function xr() {
return sa || (sa = 1, process.env.NODE_ENV === "production" ? mt.exports = br() : mt.exports = wr()), mt.exports;
}
var f = xr();
const kr = ({
items: e = [],
multiple: t = !1,
variant: a = "default",
onToggle: n,
className: r = "",
style: s = {},
...l
}) => {
const [o, u] = te([]), i = Pa(a, r), c = (p) => {
const h = Da(o, p, t);
u(h), n == null || n(p, h.includes(p));
}, d = (p) => o.includes(p);
return /* @__PURE__ */ f.jsx("div", { className: i, style: s, ...l, children: e.map((p, h) => /* @__PURE__ */ f.jsxs("div", { className: "wc-accordion-item", children: [
/* @__PURE__ */ f.jsxs(
"button",
{
className: `wc-accordion-header ${d(h) ? "wc-accordion-header--active" : ""}`,
onClick: () => c(h),
type: "button",
children: [
/* @__PURE__ */ f.jsx("span", { className: "wc-accordion-title", children: p.title }),
/* @__PURE__ */ f.jsx(
"span",
{
className: `wc-accordion-icon ${d(h) ? "wc-accordion-icon--rotated" : ""}`,
children: "▼"
}
)
]
}
),
/* @__PURE__ */ f.jsx(
"div",
{
className: `wc-accordion-content ${d(h) ? "wc-accordion-content--open" : ""}`,
children: /* @__PURE__ */ f.jsx("div", { className: "wc-accordion-content-inner", children: p.content })
}
)
] }, h)) });
};
kr.displayName = "Accordion";
const la = {
success: "✓",
info: "ⓘ",
warning: "⚠",
error: "✕"
};
function Va(e) {
return la[e] || la.info;
}
function Ma(e, t) {
return [
"wc-alert",
`wc-alert--${e}`,
`wc-alert--${t}`
];
}
function _r(e) {
return ["success", "info", "warning", "error"].includes(e);
}
function Cr(e) {
return ["filled", "outlined", "standard"].includes(e);
}
const Sr = {
key: 0,
class: "wc-alert-icon"
}, $r = ["innerHTML"], jr = { class: "wc-alert-content" }, Nr = {
key: 0,
class: "wc-alert-title"
}, Tr = { class: "wc-alert-message" }, hf = {
__name: "Alert",
props: {
type: {
type: String,
default: "info",
validator: _r
},
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
closable: {
type: Boolean,
default: !1
},
showIcon: {
type: Boolean,
default: !0
},
variant: {
type: String,
default: "filled",
validator: Cr
}
},
emits: ["close"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!0), s = C(() => Ma(a.type, a.variant)), l = C(() => Va(a.type)), o = () => {
r.value = !1, n("close");
};
return (u, i) => r.value ? (m(), y("div", {
key: 0,
class: T(s.value),
role: "alert"
}, [
e.showIcon ? (m(), y("div", Sr, [
_("span", { innerHTML: l.value }, null, 8, $r)
])) : j("", !0),
_("div", jr, [
e.title ? (m(), y("div", Nr, I(e.title), 1)) : j("", !0),
_("div", Tr, [
M(u.$slots, "default", {}, () => [
he(I(e.message), 1)
])
])
]),
e.closable ? (m(), y("button", {
key: 1,
class: "wc-alert-close",
type: "button",
"aria-label": "关闭",
onClick: o
}, " × ")) : j("", !0)
], 2)) : j("", !0);
}
};
function vf({
type: e = "info",
variant: t = "standard",
title: a = "",
closable: n = !1,
showIcon: r = !0,
className: s = "",
children: l,
onClose: o = () => {
}
}) {
const [u, i] = te(!0);
if (!u) return null;
const c = () => {
i(!1), o();
}, d = Ma(e, t), p = Va(e), h = [
...d,
s
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsxs("div", { className: h, role: "alert", children: [
r && /* @__PURE__ */ f.jsx("div", { className: "wc-alert-icon", children: /* @__PURE__ */ f.jsx("span", { children: p }) }),
/* @__PURE__ */ f.jsxs("div", { className: "wc-alert-content", children: [
a && /* @__PURE__ */ f.jsx("div", { className: "wc-alert-title", children: a }),
/* @__PURE__ */ f.jsx("div", { className: "wc-alert-message", children: l })
] }),
n && /* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: "wc-alert-close",
"aria-label": "关闭",
onClick: c,
children: "×"
}
)
] });
}
const yf = {
__name: "AppBar",
props: {
position: {
type: String,
default: "fixed",
validator: (e) => ["fixed", "absolute", "sticky", "static", "relative"].includes(e)
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "transparent", "inherit"].includes(e)
},
elevation: {
type: Number,
default: 4
},
variant: {
type: String,
default: "elevation",
validator: (e) => ["elevation", "outlined"].includes(e)
},
class: {
type: [String, Array, Object],
default: ""
},
style: {
type: [String, Object],
default: () => ({})
}
},
setup(e) {
const t = e;
return (a, n) => (m(), y("div", {
class: T(["wc-appbar", `wc-appbar--${t.position}`, `wc-appbar--${t.color}`, `wc-appbar--elevation-${t.elevation}`, `wc-appbar--${t.variant}`]),
style: ce(e.style)
}, [
M(a.$slots, "default")
], 6));
}
}, gf = ({
children: e,
position: t = "fixed",
color: a = "primary",
elevation: n = 4,
variant: r = "elevation",
className: s = "",
style: l = {},
...o
}) => {
const u = `wc-appbar wc-appbar--${t} wc-appbar--${a} wc-appbar--elevation-${n} wc-appbar--${r} ${s}`;
return /* @__PURE__ */ f.jsx("div", { className: u, style: l, ...o, children: e });
}, Er = ["xs", "sm", "md", "lg", "xl"], Ir = ["circular", "rounded", "square"], Br = ["default", "primary", "secondary", "success", "warning", "error"];
function Rr(e) {
return typeof e == "number" ? e > 0 : Er.includes(e);
}
function Pr(e) {
return Ir.includes(e);
}
function Dr(e) {
return Br.includes(e);
}
function Vr({ size: e, variant: t, color: a, src: n, imgError: r }) {
const s = ["wc-avatar"];
return typeof e == "string" && s.push(`wc-avatar--${e}`), s.push(`wc-avatar--${t}`), (!n || r) && s.push(`wc-avatar--${a}`), s;
}
function Mr(e) {
const t = {};
return typeof e == "number" && (t.width = `${e}px`, t.height = `${e}px`, t.fontSize = `${e * 0.4}px`), t;
}
function Or(e) {
if (!e) return "";
const t = e.trim(), a = t.charAt(0);
if (/[\u4e00-\u9fa5]/.test(a))
return a;
const r = t.split(/\s+/).filter(Boolean);
return r.length === 1 ? r[0].charAt(0).toUpperCase() : (r[0].charAt(0) + r[1].charAt(0)).toUpperCase();
}
function Ar(e) {
e(!0);
}
function Lr(e) {
e(!1);
}
const zr = ["src", "alt"], Fr = {
key: 1,
class: "wc-avatar-text"
}, bf = {
__name: "Avatar",
props: {
src: {
type: String,
default: ""
},
alt: {
type: String,
default: ""
},
size: {
type: [String, Number],
default: "md",
validator: Rr
},
variant: {
type: String,
default: "circular",
validator: Pr
},
color: {
type: String,
default: "default",
validator: Dr
},
children: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = A(!1), n = C(
() => Vr({
size: t.size,
variant: t.variant,
color: t.color,
src: t.src,
imgError: a.value
})
), r = C(() => Mr(t.size)), s = C(() => Or(t.children)), l = () => Ar((u) => {
a.value = u;
}), o = () => Lr((u) => {
a.value = u;
});
return (u, i) => (m(), y("div", {
class: T(n.value),
style: ce(r.value)
}, [
e.src && !a.value ? (m(), y("img", {
key: 0,
src: e.src,
alt: e.alt,
onError: l,
onLoad: o
}, null, 40, zr)) : !e.src && e.children ? (m(), y("span", Fr, I(s.value), 1)) : M(u.$slots, "default", { key: 2 })
], 6));
}
}, Oa = [
"primary",
"secondary",
"success",
"warning",
"error",
"purple",
"orange",
"cyan",
"pink"
], qr = ["sm", "md", "lg"];
function Wr(e) {
return Oa.includes(e);
}
function Hr(e) {
return Wr(e) ? e : "primary";
}
function Aa({ variant: e, size: t, dot: a, className: n }) {
const s = [
"wc-badge",
`wc-badge--${Hr(e)}`
];
return a ? s.push(`wc-badge--dot-${t}`) : s.push(`wc-badge--${t}`), n && s.push(n), s.filter(Boolean).join(" ");
}
const wf = {
__name: "Badge",
props: {
variant: {
type: String,
default: "primary",
validator: (e) => Oa.includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => qr.includes(e)
},
dot: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(
() => Aa({
variant: t.variant,
size: t.size,
dot: t.dot,
className: ""
})
);
return (n, r) => (m(), y("span", {
class: T(a.value)
}, [
e.dot ? j("", !0) : M(n.$slots, "default", { key: 0 })
], 2));
}
}, Ur = ({
children: e,
variant: t = "primary",
size: a = "md",
dot: n = !1,
className: r = "",
...s
}) => {
const l = Aa({ variant: t, size: a, dot: n, className: r });
return /* @__PURE__ */ f.jsx("span", { className: l, ...s, children: !n && e });
};
Ur.displayName = "Badge";
const oa = {
success: "✓",
info: "📢",
warning: "⚠",
error: "✕"
}, Yr = ["success", "info", "warning", "error"], Gr = ["top", "bottom"];
function Kr(e) {
return Yr.includes(e);
}
function Jr(e) {
return Gr.includes(e);
}
function La(e, t, a) {
const n = [
"wc-banner",
`wc-banner--${e}`,
`wc-banner--${t}`
];
return a && n.push("wc-banner--sticky"), n.join(" ");
}
function za(e) {
return oa[e] || oa.info;
}
function Fa(e) {
return { zIndex: e };
}
function qa(e, t) {
e(!1), t && t();
}
function Wa(e) {
e && e();
}
const Xr = { class: "wc-banner-content" }, Qr = {
key: 0,
class: "wc-banner-icon"
}, Zr = ["innerHTML"], es = { class: "wc-banner-text" }, ts = {
key: 0,
class: "wc-banner-title"
}, as = { class: "wc-banner-message" }, ns = {
key: 1,
class: "wc-banner-actions"
}, xf = {
__name: "Banner",
props: {
type: {
type: String,
default: "info",
validator: Kr
},
position: {
type: String,
default: "top",
validator: Jr
},
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
closable: {
type: Boolean,
default: !0
},
showIcon: {
type: Boolean,
default: !0
},
showDefaultAction: {
type: Boolean,
default: !1
},
actionText: {
type: String,
default: "立即行动"
},
sticky: {
type: Boolean,
default: !0
},
zIndex: {
type: Number,
default: 1e3
}
},
emits: ["close", "action"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!0), s = C(() => La(a.type, a.position, a.sticky)), l = C(() => Fa(a.zIndex)), o = C(() => za(a.type)), u = () => {
qa((c) => {
r.value = c;
}, () => n("close"));
}, i = () => {
Wa(() => n("action"));
};
return (c, d) => r.value ? (m(), y("div", {
key: 0,
class: T(s.value),
style: ce(l.value)
}, [
_("div", Xr, [
e.showIcon ? (m(), y("div", Qr, [
_("span", { innerHTML: o.value }, null, 8, Zr)
])) : j("", !0),
_("div", es, [
e.title ? (m(), y("div", ts, I(e.title), 1)) : j("", !0),
_("div", as, [
M(c.$slots, "default", {}, () => [
he(I(e.message), 1)
])
])
]),
c.$slots.actions || e.showDefaultAction ? (m(), y("div", ns, [
M(c.$slots, "actions", {}, () => [
e.showDefaultAction ? (m(), y("button", {
key: 0,
class: "wc-banner-action-btn",
type: "button",
onClick: i
}, I(e.actionText), 1)) : j("", !0)
])
])) : j("", !0),
e.closable ? (m(), y("button", {
key: 2,
class: "wc-banner-close",
type: "button",
"aria-label": "关闭",
onClick: u
}, " × ")) : j("", !0)
])
], 6)) : j("", !0);
}
};
function kf({
type: e = "info",
position: t = "top",
title: a = "",
message: n = "",
closable: r = !0,
showIcon: s = !0,
showDefaultAction: l = !1,
actionText: o = "立即行动",
sticky: u = !0,
zIndex: i = 1e3,
onClose: c,
onAction: d,
children: p
}) {
const [h, v] = te(!0);
if (!h) return null;
const g = La(e, t, u), x = Fa(i), $ = za(e), B = () => {
qa(v, c);
}, S = () => {
Wa(d);
}, k = p && dt.Children.count(p) > 0;
return /* @__PURE__ */ f.jsx(
"div",
{
className: g,
style: x,
children: /* @__PURE__ */ f.jsxs("div", { className: "wc-banner-content", children: [
s && /* @__PURE__ */ f.jsx("div", { className: "wc-banner-icon", children: $ }),
/* @__PURE__ */ f.jsxs("div", { className: "wc-banner-text", children: [
a && /* @__PURE__ */ f.jsx("div", { className: "wc-banner-title", children: a }),
/* @__PURE__ */ f.jsx("div", { className: "wc-banner-message", children: n })
] }),
(k || l) && /* @__PURE__ */ f.jsx("div", { className: "wc-banner-actions", children: k ? p : /* @__PURE__ */ f.jsx(
"button",
{
onClick: S,
className: "wc-banner-action-btn",
children: o
}
) }),
r && /* @__PURE__ */ f.jsx(
"button",
{
onClick: B,
className: "wc-banner-close",
"aria-label": "关闭",
children: "×"
}
)
] })
}
);
}
const rs = ["filled", "outlined", "minimal", "elevated"], ss = ["default", "primary", "success", "warning", "error", "info"], ls = ["small", "medium", "large"];
function Ha(e = "", t = "filled", a = "default", n = "medium", r = !0, s = !0) {
const l = ["wc-card"];
return t && t !== "filled" && l.push(`wc-card--${t}`), a && a !== "default" && l.push(`wc-card--${a}`), n && n !== "medium" && l.push(`wc-card--${n}`), r && l.push("wc-card--interactive"), s && l.push("wc-card--no-border"), e && l.push(e), l.filter(Boolean).join(" ");
}
const os = {
key: 0,
class: "wc-card-header"
}, is = {
key: 0,
class: "wc-card__title"
}, cs = { class: "wc-card-content" }, us = {
key: 1,
class: "wc-card-footer"
}, ds = {
__name: "Card",
props: {
title: {
type: String,
default: ""
},
variant: {
type: String,
default: "filled",
validator: (e) => rs.includes(e)
},
color: {
type: String,
default: "default",
validator: (e) => ss.includes(e)
},
size: {
type: String,
default: "medium",
validator: (e) => ls.includes(e)
},
interactive: {
type: Boolean,
default: !0
},
noBorder: {
type: Boolean,
default: !0
},
className: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = C(
() => Ha(t.className, t.variant, t.color, t.size, t.interactive, t.noBorder)
);
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
e.title || n.$slots.header ? (m(), y("div", os, [
M(n.$slots, "header", {}, () => [
e.title ? (m(), y("h3", is, I(e.title), 1)) : j("", !0)
])
])) : j("", !0),
_("div", cs, [
M(n.$slots, "default")
]),
n.$slots.footer ? (m(), y("div", us, [
M(n.$slots, "footer")
])) : j("", !0)
], 2));
}
};
function Ua(e = "", t = "default", a = !0, n = !0, r = "medium", s = "default") {
const l = ["wc-blockquote"];
return t && t !== "default" && t !== "card" && l.push(`wc-blockquote--${t}`), a && l.push("wc-blockquote--no-border"), n && l.push("wc-blockquote--interactive"), r && r !== "medium" && l.push(`wc-blockquote--${r}`), s && s !== "default" && l.push(`wc-blockquote--${s}`), e && l.push(e), l.filter(Boolean).join(" ");
}
const fs = { class: "quote-text" }, ps = {
key: 0,
class: "quote-cite"
}, ms = { class: "quote-text" }, hs = {
key: 0,
class: "quote-cite"
}, _f = {
__name: "Blockquote",
props: {
cite: {
type: String,
default: ""
},
className: {
type: String,
default: ""
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "minimal", "card"].includes(e)
},
noBorder: {
type: Boolean,
default: !0
},
interactive: {
type: Boolean,
default: !0
},
size: {
type: String,
default: "medium",
validator: (e) => ["small", "medium", "large"].includes(e)
},
color: {
type: String,
default: "default",
validator: (e) => ["default", "primary", "success", "warning", "error", "info"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => t.variant === "card"), n = C(
() => a.value ? "wc-blockquote" : Ua(t.className, t.variant, t.noBorder, t.interactive, t.size, t.color)
);
return (r, s) => a.value ? (m(), Se(ds, {
key: 0,
variant: "filled",
color: t.color,
size: t.size,
interactive: t.interactive,
noBorder: t.noBorder,
class: T(t.className)
}, {
default: je(() => [
_("p", fs, [
M(r.$slots, "default")
]),
e.cite ? (m(), y("footer", ps, "— " + I(e.cite), 1)) : j("", !0)
]),
_: 3
}, 8, ["color", "size", "interactive", "noBorder", "class"])) : (m(), y("blockquote", {
key: 1,
class: T(n.value)
}, [
_("p", ms, [
M(r.$slots, "default")
]),
e.cite ? (m(), y("footer", hs, "— " + I(e.cite), 1)) : j("", !0)
], 2));
}
}, Ya = ({
children: e,
title: t = "",
variant: a = "filled",
color: n = "default",
size: r = "medium",
interactive: s = !0,
noBorder: l = !0,
className: o = "",
header: u = null,
footer: i = null,
style: c = {},
onClick: d,
onMouseEnter: p,
onMouseLeave: h,
...v
}) => {
const g = Ha(o, a, n, r, s, l), x = ($) => {
s && d && d($);
};
return /* @__PURE__ */ f.jsxs(
"div",
{
className: g,
style: c,
onClick: x,
onMouseEnter: p,
onMouseLeave: h,
role: d ? "button" : void 0,
tabIndex: d ? 0 : void 0,
...v,
children: [
u && /* @__PURE__ */ f.jsx("div", { className: "wc-card-header", children: u }),
t && /* @__PURE__ */ f.jsx("div", { className: "wc-card-header", children: /* @__PURE__ */ f.jsx("h3", { className: "wc-card__title", children: t }) }),
/* @__PURE__ */ f.jsx("div", { className: "wc-card-content", children: e }),
i && /* @__PURE__ */ f.jsx("div", { className: "wc-card-footer", children: i })
]
}
);
};
Ya.displayName = "Card";
function Cf({
cite: e = "",
children: t,
className: a = "",
variant: n = "default",
noBorder: r = !0,
interactive: s = !0,
size: l = "medium",
color: o = "default",
...u
}) {
if (n === "card")
return /* @__PURE__ */ f.jsxs(
Ya,
{
variant: "filled",
color: o,
size: l,
interactive: s,
noBorder: r,
className: a,
...u,
children: [
/* @__PURE__ */ f.jsx("p", { className: "quote-text", children: t }),
e && /* @__PURE__ */ f.jsxs("footer", { className: "quote-cite", children: [
"— ",
e
] })
]
}
);
const i = Ua(a, n, r, s, l, o);
return /* @__PURE__ */ f.jsxs("blockquote", { className: i, ...u, children: [
/* @__PURE__ */ f.jsx("p", { className: "quote-text", children: t }),
e && /* @__PURE__ */ f.jsxs("footer", { className: "quote-cite", children: [
"— ",
e
] })
] });
}
const Ie = {
0: "0",
1: "0.25rem",
2: "0.5rem",
3: "0.75rem",
4: "1rem",
5: "1.25rem",
6: "1.5rem",
8: "2rem",
10: "2.5rem",
12: "3rem",
16: "4rem",
20: "5rem",
24: "6rem"
}, ia = {
flex: "flex",
block: "block",
inline: "inline",
"inline-block": "inline-block",
none: "hidden",
grid: "grid"
}, ca = {
row: "flex-row",
column: "flex-col",
"row-reverse": "flex-row-reverse",
"column-reverse": "flex-col-reverse"
}, ua = {
"flex-start": "justify-start",
center: "justify-center",
"flex-end": "justify-end",
"space-between": "justify-between",
"space-around": "justify-around",
"space-evenly": "justify-evenly"
}, da = {
"flex-start": "items-start",
center: "items-center",
"flex-end": "items-end",
stretch: "items-stretch",
baseline: "items-baseline"
}, fa = {
wrap: "flex-wrap",
nowrap: "flex-nowrap",
"wrap-reverse": "flex-wrap-reverse"
};
function xe(e) {
return typeof e == "number" ? `${e}px` : e;
}
function Ga(e) {
const t = [];
if (e.display && ia[e.display] && t.push(ia[e.display]), e.flexDirection && ca[e.flexDirection] && t.push(ca[e.flexDirection]), e.justifyContent && ua[e.justifyContent] && t.push(ua[e.justifyContent]), e.alignItems && da[e.alignItems] && t.push(da[e.alignItems]), e.flexWrap && fa[e.flexWrap] && t.push(fa[e.flexWrap]), e.gap !== void 0) {
const a = e.gap.toString();
["0", "1", "2", "3", "4", "5", "6", "8", "10", "12", "16", "20", "24"].includes(a) && t.push(`gap-${a}`);
}
return t;
}
function Ka(e) {
const t = {};
if (e.p !== void 0 && (t.padding = Ie[e.p] || xe(e.p)), e.pt !== void 0 && (t.paddingTop = Ie[e.pt] || xe(e.pt)), e.pr !== void 0 && (t.paddingRight = Ie[e.pr] || xe(e.pr)), e.pb !== void 0 && (t.paddingBottom = Ie[e.pb] || xe(e.pb)), e.pl !== void 0 && (t.paddingLeft = Ie[e.pl] || xe(e.pl)), e.px !== void 0) {
const a = Ie[e.px] || xe(e.px);
t.paddingLeft = a, t.paddingRight = a;
}
if (e.py !== void 0) {
const a = Ie[e.py] || xe(e.py);
t.paddingTop = a, t.paddingBottom = a;
}
if (e.m !== void 0 && (t.margin = Ie[e.m] || xe(e.m)), e.mt !== void 0 && (t.marginTop = Ie[e.mt] || xe(e.mt)), e.mr !== void 0 && (t.marginRight = Ie[e.mr] || xe(e.mr)), e.mb !== void 0 && (t.marginBottom = Ie[e.mb] || xe(e.mb)), e.ml !== void 0 && (t.marginLeft = Ie[e.ml] || xe(e.ml)), e.mx !== void 0) {
const a = Ie[e.mx] || xe(e.mx);
t.marginLeft = a, t.marginRight = a;
}
if (e.my !== void 0) {
const a = Ie[e.my] || xe(e.my);
t.marginTop = a, t.marginBottom = a;
}
return e.display && (t.display = e.display), e.flexDirection && (t.flexDirection = e.flexDirection), e.justifyContent && (t.justifyContent = e.justifyContent), e.alignItems && (t.alignItems = e.alignItems), e.flexWrap && (t.flexWrap = e.flexWrap), e.gap !== void 0 && (t.gap = xe(e.gap)), e.bgcolor && (t.backgroundColor = e.bgcolor), e.color && (t.color = e.color), e.border && (t.border = e.border), e.borderRadius !== void 0 && (t.borderRadius = typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius), e.width !== void 0 && (t.width = xe(e.width)), e.height !== void 0 && (t.height = xe(e.height)), e.minWidth !== void 0 && (t.minWidth = xe(e.minWidth)), e.minHeight !== void 0 && (t.minHeight = xe(e.minHeight)), e.maxWidth !== void 0 && (t.maxWidth = xe(e.maxWidth)), e.maxHeight !== void 0 && (t.maxHeight = xe(e.maxHeight)), t;
}
const Sf = {
__name: "Box",
props: {
component: {
type: String,
default: "div"
},
// Spacing props
p: [String, Number],
pt: [String, Number],
pr: [String, Number],
pb: [String, Number],
pl: [String, Number],
px: [String, Number],
py: [String, Number],
m: [String, Number],
mt: [String, Number],
mr: [String, Number],
mb: [String, Number],
ml: [String, Number],
mx: [String, Number],
my: [String, Number],
// Display
display: String,
// Flexbox
flexDirection: String,
justifyContent: String,
alignItems: String,
flexWrap: String,
gap: [String, Number],
// Colors
bgcolor: String,
color: String,
// Border
border: [String, Number],
borderRadius: [String, Number],
// Width and Height
width: [String, Number],
height: [String, Number],
minWidth: [String, Number],
minHeight: [String, Number],
maxWidth: [String, Number],
maxHeight: [String, Number]
},
setup(e) {
const t = e, a = C(() => Ga(t)), n = C(() => Ka(t));
return (r, s) => (m(), Se(ze(e.component), {
class: T(a.value),
style: ce(n.value)
}, {
default: je(() => [
M(r.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]));
}
};
function $f({
component: e = "div",
children: t,
className: a = "",
// Spacing
p: n,
pt: r,
pr: s,
pb: l,
pl: o,
px: u,
py: i,
m: c,
mt: d,
mr: p,
mb: h,
ml: v,
mx: g,
my: x,
// Flex & layout
display: $,
flexDirection: B,
justifyContent: S,
alignItems: k,
flexWrap: w,
gap: E,
// Colors & border
bgcolor: W,
color: R,
border: Y,
borderRadius: N,
// Size
width: O,
height: H,
minWidth: Q,
minHeight: q,
maxWidth: ne,
maxHeight: V,
style: K = {},
...ge
}) {
const oe = Ga({
display: $,
flexDirection: B,
justifyContent: S,
alignItems: k,
flexWrap: w,
gap: E
}).concat(a).filter(Boolean).join(" "), P = {
...Ka({
p: n,
pt: r,
pr: s,
pb: l,
pl: o,
px: u,
py: i,
m: c,
mt: d,
mr: p,
mb: h,
ml: v,
mx: g,
my: x,
display: $,
flexDirection: B,
justifyContent: S,
alignItems: k,
flexWrap: w,
gap: E,
bgcolor: W,
color: R,
border: Y,
borderRadius: N,
width: O,
height: H,
minWidth: Q,
minHeight: q,
maxWidth: ne,
maxHeight: V
}),
...K
};
return /* @__PURE__ */ f.jsx(e, { className: oe, style: P, ...ge, children: t });
}
const vs = ["default"];
function ys(e) {
return vs.includes(e);
}
function Ja(e, t, a, n) {
let r = [...e];
if (t && r.length && r[0].label !== "首页" && r.unshift({ label: "首页", icon: a, href: "/" }), n > 0 && r.length > n) {
const s = Math.max(1, n - 2);
r = [
...r.slice(0, s),
{ label: "...", disabled: !0, isEllipsis: !0 },
...r.slice(-1)
];
}
return r;
}
function Xa(e) {
return `wc-breadcrumb wc-breadcrumb--${e}`;
}
function Qa(e, t) {
const a = ["wc-breadcrumb-item"];
return e === t - 1 && a.push("wc-breadcrumb-item--current"), a.join(" ");
}
function gt(e) {
const t = ["wc-breadcrumb-link"];
return e && t.push("wc-breadcrumb-link--disabled"), t.join(" ");
}
function Za(e, t, a, n, r) {
return t.disabled || t.isEllipsis || a === n - 1 ? (e.preventDefault(), !1) : (r && r(e, t, a), !0);
}
function Vt(e, t, a, n) {
return e !== t - 1 && !a && !n;
}
const gs = { class: "wc-breadcrumb-list" }, bs = ["innerHTML"], ws = {
key: 0,
class: "wc-breadcrumb-separator",
"aria-hidden": "true"
}, jf = {
__name: "Breadcrumb",
props: {
items: {
type: Array,
required: !0,
default: () => []
},
separator: {
type: String,
default: "/"
},
maxItems: {
type: Number,
default: 0
},
showHome: {
type: Boolean,
default: !1
},
homeIcon: {
type: String,
default: "🏠"
},
variant: {
type: String,
default: "default",
validator: ys
}
},
emits: ["click"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(() => Xa(a.variant)), s = C(
() => Ja(a.items, a.showHome, a.homeIcon, a.maxItems)
), l = (i, c) => Vt(c, s.value.length, i.disabled, i.isEllipsis) ? i.href ? "a" : i.to ? "router-link" : "button" : "span", o = (i, c) => {
if (Vt(c, s.value.length, i.disabled, i.isEllipsis))
return i.href;
}, u = (i, c, d) => {
Za(
i,
c,
d,
s.value.length,
(h, v, g) => n("click", { event: h, item: v, index: g })
);
};
return (i, c) => (m(), y("nav", {
class: T(r.value),
"aria-label": "面包屑导航",
role: "navigation"
}, [
_("ol", gs, [
(m(!0), y(ke, null, Ce(s.value, (d, p) => (m(), y("li", {
key: p,
class: T(ta(Qa)(p, s.value.length))
}, [
(m(), Se(ze(l(d, p)), {
class: T(ta(gt)(d.disabled)),
href: o(d, p),
"aria-current": p === s.value.length - 1 ? "page" : void 0,
onClick: (h) => u(h, d, p)
}, {
default: je(() => [
d.icon ? (m(), y("span", {
key: 0,
class: "wc-breadcrumb-icon",
innerHTML: d.icon
}, null, 8, bs)) : j("", !0),
he(" " + I(d.label), 1)
]),
_: 2
}, 1032, ["class", "href", "aria-current", "onClick"])),
p < s.value.length - 1 ? (m(), y("span", ws, I(e.separator), 1)) : j("", !0)
], 2))), 128))
])
], 2));
}
};
function Nf({
items: e = [],
separator: t = "/",
variant: a = "default",
showHome: n = !1,
homeIcon: r = "🏠",
maxItems: s = 0,
onItemClick: l
}) {
const o = dt.useMemo(
() => Ja(e, n, r, s),
[e, n, r, s]
), u = (c, d, p) => {
Za(c, d, p, o.length, l);
}, i = Xa(a);
return /* @__PURE__ */ f.jsx("nav", { className: i, "aria-label": "面包屑导航", role: "navigation", children: /* @__PURE__ */ f.jsx("ol", { className: "wc-breadcrumb-list", children: o.map((c, d) => /* @__PURE__ */ f.jsxs("li", { className: Qa(d, o.length), children: [
Vt(d, o.length, c.disabled, c.isEllipsis) ? c.href ? /* @__PURE__ */ f.jsxs(
"a",
{
href: c.href,
className: gt(c.disabled),
onClick: (p) => u(p, c, d),
children: [
c.icon && /* @__PURE__ */ f.jsx("span", { className: "wc-breadcrumb-icon", dangerouslySetInnerHTML: { __html: c.icon } }),
c.label
]
}
) : /* @__PURE__ */ f.jsxs(
"button",
{
type: "button",
onClick: (p) => u(p, c, d),
className: gt(c.disabled),
children: [
c.icon && /* @__PURE__ */ f.jsx("span", { className: "wc-breadcrumb-icon", dangerouslySetInnerHTML: { __html: c.icon } }),
c.label
]
}
) : /* @__PURE__ */ f.jsxs("span", { className: gt(!0), "aria-current": "page", children: [
c.icon && /* @__PURE__ */ f.jsx("span", { className: "wc-breadcrumb-icon", dangerouslySetInnerHTML: { __html: c.icon } }),
c.label
] }),
d < o.length - 1 && /* @__PURE__ */ f.jsx("span", { className: "wc-breadcrumb-separator", children: t })
] }, d)) }) });
}
const xs = [
"primary",
"secondary",
"filled",
"outlined",
"text",
"success",
"warning",
"error",
"info",
"purple",
"orange",
"cyan",
"pink"
], ks = ["default", "outlined", "filled"], _s = ["xs", "sm", "md", "lg", "xl"], Cs = ["button", "submit", "reset"], Ss = ["none", "sm", "md", "lg", "full"];
function en(e) {
return xs.includes(e);
}
function $s(e) {
return _s.includes(e);
}
function js(e) {
return Cs.includes(e);
}
function Ns(e) {
return typeof e == "boolean" || Ss.includes(e);
}
function Ts(e) {
return ks.includes(e);
}
function Es(e) {
return en(e) ? e : "primary";
}
function tn(e) {
const { variant: t, size: a, disabled: n, loading: r, fullWidth: s, uppercase: l, rounded: o, buttonStyle: u = "filled" } = e, i = ["wc-btn"];
return i.push(`wc-btn--style-${u}`), i.push(`wc-btn--${Es(t)}`), i.push(`wc-btn--${a}`), (n || r) && i.push("wc-btn--disabled"), r && i.push("wc-btn--loading"), s && i.push("wc-btn--full-width"), l && i.push("wc-btn--uppercase"), o === !1 || o === "none" ? i.push("wc-btn--rounded-none") : typeof o == "string" ? i.push(`wc-btn--rounded-${o}`) : i.push("wc-btn--rounded"), i;
}
function an({ event: e, disabled: t, loading: a, href: n, target: r, onClick: s }) {
!t && !a && (n && window.open(n, r), s == null || s(e));
}
const Is = ["disabled", "type"], Bs = {
key: 0,
class: "wc-btn__loading"
}, Rs = {
key: 1,
class: "wc-btn__start-icon"
}, Ps = {
key: 2,
class: "wc-btn__end-icon"
}, Ds = {
__name: "Button",
props: {
variant: {
type: String,
default: "primary",
validator: en
},
buttonStyle: {
type: String,
default: "filled",
validator: Ts
},
size: {
type: String,
default: "md",
validator: $s
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
},
fullWidth: {
type: Boolean,
default: !1
},
type: {
type: String,
default: "button",
validator: js
},
href: {
type: String,
default: null
},
target: {
type: String,
default: "_self"
},
startIcon: {
type: String,
default: null
},
endIcon: {
type: String,
default: null
},
rounded: {
type: [Boolean, String],
default: !0,
validator: Ns
},
uppercase: {
type: Boolean,
default: !1
},
ripple: {
type: Boolean,
default: !0
}
},
emits: ["click", "mouseover", "mouseout", "focus", "blur"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = A(!1), l = C(() => tn(a)), o = C(() => ({})), u = (h) => {
an({
event: h,
disabled: a.disabled,
loading: a.loading,
href: a.href,
target: a.target,
onClick: (v) => n("click", v)
});
}, i = (h) => {
r.value = !0, n("mouseover", h);
}, c = (h) => {
r.value = !1, n("mouseout", h);
}, d = (h) => {
s.value = !0, n("focus", h);
}, p = (h) => {
s.value = !1, n("blur", h);
};
return (h, v) => (m(), y("button", {
class: T(l.value),
disabled: e.disabled || e.loading,
type: e.type,
style: ce(o.value),
onClick: u,
onMouseover: i,
onMouseout: c,
onFocus: d,
onBlur: p
}, [
e.loading ? (m(), y("span", Bs, v[0] || (v[0] = [
_("svg", {
class: "animate-spin h-4 w-4",
fill: "none",
viewBox: "0 0 24 24"
}, [
_("circle", {
class: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
"stroke-width": "4"
}),
_("path", {
class: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
})
], -1)
]))) : j("", !0),
e.startIcon && !e.loading ? (m(), y("span", Rs, [
M(h.$slots, "startIcon", {}, () => [
he(I(e.startIcon), 1)
])
])) : j("", !0),
_("span", {
class: T(["wc-btn__content", { "opacity-0": e.loading }])
}, [
M(h.$slots, "default")
], 2),
e.endIcon && !e.loading ? (m(), y("span", Ps, [
M(h.$slots, "endIcon", {}, () => [
he(I(e.endIcon), 1)
])
])) : j("", !0)
], 46, Is));
}
}, Vs = ({
children: e,
variant: t = "primary",
buttonStyle: a = "filled",
size: n = "md",
disabled: r = !1,
loading: s = !1,
fullWidth: l = !1,
type: o = "button",
href: u = null,
target: i = "_self",
startIcon: c = null,
endIcon: d = null,
rounded: p = !0,
uppercase: h = !1,
ripple: v = !0,
onClick: g,
onMouseOver: x,
onMouseOut: $,
onFocus: B,
onBlur: S,
className: k = "",
style: w = {},
...E
}) => {
const [W, R] = te(!1), [Y, N] = te(!1), O = tn({
variant: t,
buttonStyle: a,
size: n,
disabled: r,
loading: s,
fullWidth: l,
uppercase: h,
rounded: p
}).concat(k).filter(Boolean).join(" "), H = {
...w
}, Q = (oe) => {
an({
event: oe,
disabled: r,
loading: s,
href: u,
target: i,
onClick: g
});
}, q = (oe) => {
R(!0), x == null || x(oe);
}, ne = (oe) => {
R(!1), $ == null || $(oe);
}, V = (oe) => {
N(!0), B == null || B(oe);
}, K = (oe) => {
N(!1), S == null || S(oe);
}, ge = () => /* @__PURE__ */ f.jsx("span", { className: "wc-btn__loading", children: /* @__PURE__ */ f.jsxs("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ f.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
/* @__PURE__ */ f.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
] }) });
return /* @__PURE__ */ f.jsxs(
"button",
{
className: O,
disabled: r || s,
type: o,
style: H,
onClick: Q,
onMouseOver: q,
onMouseOut: ne,
onFocus: V,
onBlur: K,
...E,
children: [
s && /* @__PURE__ */ f.jsx(ge, {}),
c && !s && /* @__PURE__ */ f.jsx("span", { className: "wc-btn__start-icon", children: c }),
/* @__PURE__ */ f.jsx("span", { className: `wc-btn__content ${s ? "opacity-0" : ""}`, children: e }),
d && !s && /* @__PURE__ */ f.jsx("span", { className: "wc-btn__end-icon", children: d })
]
}
);
};
Vs.displayName = "Button";
const Tf = {
__name: "CardActions",
props: {
disableSpacing: {
type: Boolean,
default: !1
},
disablePadding: {
type: Boolean,
default: !1
},
justifyContent: {
type: String,
default: "flex-start",
validator: (e) => ["flex-start", "center", "flex-end", "space-between", "space-around"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-card-actions wc-flex wc-items-center"];
t.disablePadding || r.push("wc-padding-2"), t.disableSpacing || r.push("wc-gap-2");
const s = {
"flex-start": "wc-justify-start",
center: "wc-justify-center",
"flex-end": "wc-justify-end",
"space-between": "wc-justify-between",
"space-around": "wc-justify-around"
};
return r.push(s[t.justifyContent]), r;
});
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
M(n.$slots, "default")
], 2));
}
}, Ef = {
__name: "CardContent",
props: {
disablePadding: {
type: Boolean,
default: !1
},
padding: {
type: String,
default: "normal",
validator: (e) => ["none", "dense", "normal", "comfortable"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-card-content"];
if (!t.disablePadding) {
const s = {
none: "",
dense: "wc-padding-dense",
normal: "wc-padding-normal",
comfortable: "wc-padding-comfortable"
};
r.push(s[t.padding]);
}
return r;
});
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
M(n.$slots, "default")
], 2));
}
}, Ms = ["checked", "disabled"], Os = {
key: 0,
class: "checkmark-icon",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "3"
}, As = {
key: 1,
class: "indeterminate-icon"
}, Ls = {
key: 0,
class: "checkbox-label"
}, If = {
__name: "Checkbox",
props: {
modelValue: {
type: [Boolean, Array],
default: !1
},
value: {
type: [String, Number, Boolean],
default: !0
},
label: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
indeterminate: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "success", "error", "warning", "info"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = C(() => Array.isArray(a.modelValue) ? a.modelValue.includes(a.value) : !!a.modelValue), l = C(() => {
const p = ["wc-checkbox"];
return p.push(`wc-checkbox--${a.size}`), a.disabled && p.push("wc-checkbox--disabled"), r.value && p.push("wc-checkbox--focused"), p;
}), o = C(() => ["wc-checkbox__input"]), u = C(() => {
const p = ["wc-checkbox__checkmark"];
return p.push(`wc-checkbox__checkmark--${a.color}`), p.push(`wc-checkbox__checkmark--${a.size}`), (s.value || a.indeterminate) && p.push("wc-checkbox__checkmark--checked"), a.indeterminate && p.push("wc-checkbox__checkmark--indeterminate"), p;
}), i = (p) => {
if (a.disabled) return;
const h = p.target.checked;
if (Array.isArray(a.modelValue)) {
const v = [...a.modelValue];
if (h)
v.includes(a.value) || v.push(a.value);
else {
const g = v.indexOf(a.value);
g > -1 && v.splice(g, 1);
}
n("update:modelValue", v);
} else
n("update:modelValue", h);
n("change", h);
}, c = () => {
r.value = !0;
}, d = () => {
r.value = !1;
};
return (p, h) => (m(), y("label", {
class: T(l.value)
}, [
_("input", {
type: "checkbox",
checked: s.value,
disabled: e.disabled,
class: T(o.value),
onChange: i,
onFocus: c,
onBlur: d
}, null, 42, Ms),
_("span", {
class: T(u.value)
}, [
s.value && !e.indeterminate ? (m(), y("svg", Os, h[0] || (h[0] = [
_("polyline", { points: "20,6 9,17 4,12" }, null, -1)
]))) : e.indeterminate ? (m(), y("div", As)) : j("", !0)
], 2),
p.$slots.default || e.label ? (m(), y("span", Ls, [
M(p.$slots, "default", {}, () => [
he(I(e.label), 1)
])
])) : j("", !0)
], 2));
}
}, zs = ["sm", "md", "lg"], Fs = ["filled", "outlined"], qs = ["default", "primary", "secondary", "success", "warning", "error"];
function Ws(e) {
return zs.includes(e);
}
function Hs(e) {
return Fs.includes(e);
}
function Us(e) {
return qs.includes(e);
}
function nn(e) {
const {
size: t = "md",
variant: a = "filled",
color: n = "default",
clickable: r = !1,
disabled: s = !1,
className: l = ""
} = e, o = ["wc-chip"];
return o.push(`wc-chip--${t}`), o.push(`wc-chip--${a}`), o.push(`wc-chip--${n}`), r && !s && o.push("wc-chip--clickable"), s && o.push("wc-chip--disabled"), l && o.push(l), o.filter(Boolean).join(" ");
}
function rn(e, t, a, n) {
t && !a && n && n(e);
}
function sn(e, t, a) {
e.stopPropagation(), !t && a && a(e);
}
function Ys() {
return "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z";
}
function Gs() {
return /* @__PURE__ */ f.jsx(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 20 20",
fill: "currentColor",
className: "w-4 h-4",
children: /* @__PURE__ */ f.jsx(
"path",
{
fillRule: "evenodd",
d: Ys(),
clipRule: "evenodd"
}
)
}
);
}
const Ks = {
key: 0,
class: "wc-chip-avatar"
}, Js = ["src"], Xs = { class: "wc-chip-label" }, Qs = ["aria-label"], Bf = {
__name: "Chip",
props: {
label: {
type: String,
default: ""
},
avatar: {
type: String,
default: ""
},
deletable: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
clickable: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "filled",
validator: Hs
},
size: {
type: String,
default: "md",
validator: Ws
},
color: {
type: String,
default: "default",
validator: Us
},
deleteIcon: {
type: String,
default: ""
}
},
emits: ["click", "delete"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(
() => nn(a)
), s = (o) => {
rn(o, a.clickable, a.disabled, (u) => n("click", u));
}, l = (o) => {
sn(o, a.disabled, (u) => n("delete", u));
};
return (o, u) => (m(), y("div", {
class: T(r.value),
onClick: s
}, [
o.$slots.avatar || e.avatar ? (m(), y("div", Ks, [
M(o.$slots, "avatar", {}, () => [
e.avatar ? (m(), y("img", {
key: 0,
src: e.avatar,
alt: "",
class: "w-full h-full object-cover rounded-full"
}, null, 8, Js)) : j("", !0)
])
])) : j("", !0),
_("span", Xs, [
M(o.$slots, "default", {}, () => [
he(I(e.label), 1)
])
]),
e.deletable ? (m(), y("button", {
key: 1,
type: "button",
class: "wc-chip-delete",
"aria-label": e.deleteIcon || "删除",
onClick: Ae(l, ["stop"])
}, [
M(o.$slots, "deleteIcon", {}, () => [
u[0] || (u[0] = _("svg", {
class: "w-4 h-4",
fill: "currentColor",
viewBox: "0 0 20 20"
}, [
_("path", {
"fill-rule": "evenodd",
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
"clip-rule": "evenodd"
})
], -1))
])
], 8, Qs)) : j("", !0)
], 2));
}
};
function Rf({
label: e = "",
avatar: t = "",
deletable: a = !1,
disabled: n = !1,
clickable: r = !1,
variant: s = "filled",
size: l = "md",
color: o = "default",
deleteIcon: u = null,
onClick: i,
onDelete: c,
children: d
}) {
const p = nn({
size: l,
variant: s,
color: o,
clickable: r,
disabled: n
}), h = (g) => {
rn(g, r, n, i);
}, v = (g) => {
sn(g, n, c);
};
return /* @__PURE__ */ f.jsxs(
"div",
{
className: p,
onClick: h,
children: [
d && d.avatar || t ? /* @__PURE__ */ f.jsx("div", { className: "wc-chip-avatar", children: d && d.avatar ? d.avatar : /* @__PURE__ */ f.jsx("img", { src: t, alt: "", className: "w-full h-full object-cover rounded-full" }) }) : null,
/* @__PURE__ */ f.jsx("span", { className: "wc-chip-label", children: (d == null ? void 0 : d.label) || e }),
a && /* @__PURE__ */ f.jsx(
"button",
{
type: "button",
onClick: v,
className: "wc-chip-delete",
"aria-label": "删除",
children: u || Gs()
}
)
]
}
);
}
const Zs = ["aria-valuenow"], el = ["width", "height", "viewBox"], tl = ["cx", "cy", "r", "stroke-width"], al = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], nl = {
key: 0,
class: "wc-circular-progress-value"
}, Pf = {
__name: "CircularProgress",
props: {
value: {
type: Number,
default: 0,
validator: (e) => e >= 0 && e <= 100
},
size: {
type: [Number, String],
default: 40
},
thickness: {
type: Number,
default: 3.6
},
variant: {
type: String,
default: "indeterminate",
validator: (e) => ["determinate", "indeterminate"].includes(e)
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "success", "warning", "error", "inherit"].includes(e)
},
showValue: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(() => typeof t.size == "string" ? parseInt(t.size) : t.size), n = C(() => a.value / 2), r = C(() => (a.value - t.thickness) / 2), s = C(() => 2 * Math.PI * r.value), l = C(() => `0 0 ${a.value} ${a.value}`), o = C(() => t.variant === "determinate" ? s.value - t.value / 100 * s.value : 0), u = C(() => {
const p = ["wc-circular-progress inline-flex relative items-center justify-center"];
return p.push(`wc-circular-progress--${t.color}`), t.variant === "indeterminate" && p.push("wc-circular-progress--indeterminate"), p;
}), i = C(() => t.variant === "indeterminate" ? ["wc-circular-progress-circle--indeterminate"] : []), c = C(() => t.variant === "determinate" ? t.value : void 0);
return (d, p) => (m(), y("div", {
class: T(u.value),
role: "progressbar",
"aria-valuenow": c.value,
"aria-valuemin": 0,
"aria-valuemax": 100
}, [
(m(), y("svg", {
width: e.size,
height: e.size,
viewBox: l.value,
class: "wc-circular-progress-svg"
}, [
_("circle", {
cx: n.value,
cy: n.value,
r: r.value,
"stroke-width": e.thickness,
stroke: "currentColor",
fill: "none",
class: "wc-circular-progress-bg"
}, null, 8, tl),
_("circle", {
cx: n.value,
cy: n.value,
r: r.value,
"stroke-width": e.thickness,
stroke: "currentColor",
fill: "none",
"stroke-dasharray": s.value,
"stroke-dashoffset": o.value,
class: T([i.value, "wc-circular-progress-circle"])
}, null, 10, al)
], 8, el)),
e.showValue ? (m(), y("div", nl, I(Math.round(e.value)) + "% ", 1)) : j("", !0)
], 10, Zs));
}
};
function rl(e, t) {
const a = typeof e == "string" ? parseInt(e, 10) : e, n = a / 2, r = (a - t) / 2, s = 2 * Math.PI * r;
return {
sizeNumber: a,
center: n,
radius: r,
circumference: s
};
}
function sl(e, t, a) {
return e === "determinate" ? a - t / 100 * a : 0;
}
function ll(e) {
const {
color: t = "primary",
variant: a = "indeterminate",
className: n = ""
} = e, r = [
"wc-circular-progress",
"inline-flex",
"relative",
"items-center",
"justify-center"
];
return r.push(`wc-circular-progress--${t}`), a === "indeterminate" && r.push("wc-circular-progress--indeterminate"), n && r.push(n), r.filter(Boolean);
}
function ol(e) {
const t = ["wc-circular-progress-circle"];
return e === "indeterminate" && t.push("wc-circular-progress-circle--indeterminate"), t.filter(Boolean);
}
function il(e) {
return Math.round(e);
}
function cl(e) {
const { value: t = 0, variant: a } = e, n = {
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": 100
};
return a === "determinate" && (n["aria-valuenow"] = t), n;
}
function Df({
value: e = 0,
size: t = 40,
thickness: a = 3.6,
variant: n = "indeterminate",
// 'determinate' | 'indeterminate'
color: r = "primary",
showValue: s = !1,
className: l = "",
...o
}) {
const { sizeNumber: u, center: i, radius: c, circumference: d } = rl(t, a), p = sl(n, e, d), h = ll({
color: r,
variant: n,
className: l
}).join(" "), v = ol(n).join(" "), g = cl({ value: e, variant: n });
return /* @__PURE__ */ f.jsxs(
"div",
{
className: h,
...g,
...o,
children: [
/* @__PURE__ */ f.jsxs(
"svg",
{
width: u,
height: u,
viewBox: `0 0 ${u} ${u}`,
className: "wc-circular-progress-svg",
children: [
/* @__PURE__ */ f.jsx(
"circle",
{
cx: i,
cy: i,
r: c,
strokeWidth: a,
stroke: "currentColor",
fill: "none",
className: "wc-circular-progress-bg"
}
),
/* @__PURE__ */ f.jsx(
"circle",
{
cx: i,
cy: i,
r: c,
strokeWidth: a,
stroke: "currentColor",
fill: "none",
strokeDasharray: d,
strokeDashoffset: p,
className: v
}
)
]
}
),
s && /* @__PURE__ */ f.jsxs("div", { className: "wc-circular-progress-value", children: [
il(e),
"%"
] })
]
}
);
}
function ln(e) {
const {
size: t = "md",
shape: a = "circle",
disabled: n = !1,
className: r = ""
} = e, s = ["wc-color-picker"];
return s.push(`wc-color-picker--${t}`), s.push(`wc-color-picker--${a}`), n && s.push("wc-color-picker--disabled"), r && s.push(r), s.filter(Boolean);
}
function ul(e, t, a) {
!t && a && a(e.target.value);
}
function on(e) {
return {
backgroundColor: e
};
}
const dl = ["value", "disabled"], Vf = /* @__PURE__ */ Fe({
__name: "ColorPicker",
props: {
modelValue: { default: "#ffffff" },
size: { default: "md" },
shape: { default: "circle" },
disabled: { type: Boolean, default: !1 },
className: { default: "" }
},
emits: ["update:modelValue"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(() => ln({
size: a.size,
shape: a.shape,
disabled: a.disabled,
className: a.className
}).join(" ")), s = C(() => on(a.modelValue));
function l(o) {
const u = o.target;
a.disabled || n("update:modelValue", u.value);
}
return (o, u) => (m(), y("label", {
class: T(r.value)
}, [
_("input", {
class: "wc-color-picker__input",
type: "color",
value: o.modelValue,
disabled: o.disabled,
onInput: l
}, null, 40, dl),
_("span", {
class: "wc-color-picker__preview",
style: ce(s.value)
}, null, 4)
], 2));
}
});
function Mf({
value: e = "#ffffff",
onChange: t,
size: a = "md",
shape: n = "circle",
disabled: r = !1,
className: s = ""
}) {
const l = ln({
size: a,
shape: n,
disabled: r,
className: s
}).join(" "), o = on(e), u = (i) => {
ul(i, r, t);
};
return /* @__PURE__ */ f.jsxs("label", { className: l, children: [
/* @__PURE__ */ f.jsx(
"input",
{
type: "color",
value: e,
onChange: u,
disabled: r,
className: "wc-color-picker__input"
}
),
/* @__PURE__ */ f.jsx(
"span",
{
className: "wc-color-picker__preview",
style: o
}
)
] });
}
const fl = ["xs", "sm", "md", "lg", "xl", "2xl"];
function cn(e) {
return fl.includes(e);
}
const pa = {
xs: "max-w-xs",
sm: "max-w-sm",
md: "max-w-md",
lg: "max-w-4xl",
xl: "max-w-6xl",
"2xl": "max-w-7xl"
};
function pl(e) {
const {
maxWidth: t = "lg",
fluid: a = !1,
fixed: n = !1,
className: r = ""
} = e, s = ["wc-container"];
return a ? s.push("wc-container--fluid") : n ? s.push("wc-container--fixed") : t && cn(t) && s.push(`wc-container--${t}`), r && s.push(r), s.filter(Boolean);
}
function ml(e) {
const {
maxWidth: t = "lg",
fluid: a = !1,
fixed: n = !1,
className: r = ""
} = e, l = ["mx-auto px-4 sm:px-6 lg:px-8"];
return a || n ? l.push("w-full") : t && pa[t] && l.push(pa[t]), r && l.push(r), l.filter(Boolean);
}
const Of = {
__name: "Container",
props: {
maxWidth: {
type: String,
default: "lg",
validator: cn
},
fluid: {
type: Boolean,
default: !1
},
fixed: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(
() => pl(t).join(" ")
);
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
M(n.$slots, "default")
], 2));
}
};
function Af({
maxWidth: e = "lg",
fluid: t = !1,
fixed: a = !1,
className: n = "",
children: r
}) {
const s = ml({
maxWidth: e,
fluid: t,
fixed: a,
className: n
}).join(" ");
return /* @__PURE__ */ f.jsx("div", { className: s, children: r });
}
const hl = { class: "wc-copy-text" }, vl = { class: "wc-copy-action" }, yl = ["innerHTML"], gl = {
key: 0,
class: "wc-copy-label"
}, Lf = {
__name: "Copy",
props: {
text: {
type: String,
required: !0
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "outlined", "filled", "minimal"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
showLabel: {
type: Boolean,
default: !0
},
showTooltip: {
type: Boolean,
default: !0
},
copyLabel: {
type: String,
default: "复制"
},
copiedLabel: {
type: String,
default: "已复制"
},
tooltipSuccess: {
type: String,
default: "复制成功!"
},
tooltipError: {
type: String,
default: "复制失败"
},
resetDelay: {
type: Number,
default: 2e3
}
},
emits: ["copy", "error"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = A(!1), l = A(!1), o = C(() => [
"wc-copy",
`wc-copy--${a.variant}`,
`wc-copy--${a.size}`,
{
"wc-copy--copied": r.value,
"wc-copy--error": l.value
}
]), u = C(() => l.value ? "❌" : r.value ? "✓" : "📋"), i = C(() => l.value ? "错误" : r.value ? a.copiedLabel : a.copyLabel), c = C(() => l.value ? a.tooltipError : r.value ? a.tooltipSuccess : ""), d = async () => {
try {
if (navigator.clipboard && navigator.clipboard.writeText)
await navigator.clipboard.writeText(a.text);
else {
const p = document.createElement("textarea");
p.value = a.text, p.style.position = "fixed", p.style.left = "-999999px", p.style.top = "-999999px", document.body.appendChild(p), p.focus(), p.select(), document.execCommand("copy"), document.body.removeChild(p);
}
r.value = !0, l.value = !1, n("copy", a.text), a.showTooltip && (s.value = !0, setTimeout(() => {
s.value = !1;
}, 1500)), setTimeout(() => {
r.value = !1;
}, a.resetDelay);
} catch (p) {
l.value = !0, r.value = !1, n("error", p), a.showTooltip && (s.value = !0, setTimeout(() => {
s.value = !1;
}, 1500)), setTimeout(() => {
l.value = !1;
}, a.resetDelay);
}
};
return (p, h) => (m(), y("div", {
class: T(o.value),
onClick: d
}, [
M(p.$slots, "content", {}, () => [
_("span", hl, I(e.text), 1)
]),
_("div", vl, [
M(p.$slots, "icon", {}, () => [
_("span", {
class: "wc-copy-icon",
innerHTML: u.value
}, null, 8, yl)
]),
e.showLabel ? (m(), y("span", gl, I(i.value), 1)) : j("", !0)
]),
e.showTooltip && s.value ? (m(), y("div", {
key: 0,
class: T(["wc-copy-tooltip", { "wc-copy-tooltip--success": r.value }])
}, I(c.value), 3)) : j("", !0)
], 2));
}
};
function bl(e) {
const {
variant: t = "default",
size: a = "md",
copied: n = !1,
copyError: r = !1,
className: s = ""
} = e, l = ["wc-copy"];
return l.push(`wc-copy--${t}`), l.push(`wc-copy--${a}`), n && l.push("wc-copy--copied"), r && l.push("wc-copy--error"), s && l.push(s), l.filter(Boolean);
}
function wl(e, t) {
return t ? "❌" : e ? "✓" : "📋";
}
function xl(e, t, a, n) {
return t ? "错误" : e ? n : a;
}
function kl(e, t, a, n) {
return t ? n : e ? a : "";
}
async function _l(e) {
var t;
try {
if ((t = navigator.clipboard) != null && t.writeText)
return await navigator.clipboard.writeText(e), !0;
{
const a = document.createElement("textarea");
a.value = e, a.style.position = "fixed", a.style.left = "-999999px", a.style.top = "-999999px", document.body.appendChild(a), a.focus(), a.select();
const n = document.execCommand("copy");
return document.body.removeChild(a), n;
}
} catch (a) {
return console.warn("复制失败:", a), !1;
}
}
async function Cl(e, t, a, n, r, s, l, o) {
await _l(e) ? (n(!0), r(!1), t(e)) : (n(!1), r(!0), a(new Error("复制失败"))), l && s && (s(!0), setTimeout(() => s(!1), 1500)), setTimeout(() => {
n(!1), r(!1);
}, o);
}
function Sl(e, t) {
let a = "wc-copy-tooltip";
return e && (a += " wc-copy-tooltip--success"), t && (a += " wc-copy-tooltip--error"), a;
}
function zf({
text: e,
variant: t = "default",
size: a = "md",
showLabel: n = !0,
showTooltip: r = !0,
copyLabel: s = "复制",
copiedLabel: l = "已复制",
tooltipSuccess: o = "复制成功!",
tooltipError: u = "复制失败",
resetDelay: i = 2e3,
onCopy: c = () => {
},
onError: d = () => {
},
className: p = "",
children: h,
icon: v
}) {
const [g, x] = te(!1), [$, B] = te(!1), [S, k] = te(!1), w = bl({
variant: t,
size: a,
copied: g,
copyError: $,
className: p
}).join(" "), E = wl(g, $), W = xl(g, $, s, l), R = kl(g, $, o, u), Y = Sl(g, $), N = async () => {
await Cl(
e,
c,
d,
x,
B,
k,
r,
i
);
};
return /* @__PURE__ */ f.jsxs("div", { className: w, onClick: N, children: [
h ?? /* @__PURE__ */ f.jsx("span", { className: "wc-copy-text", children: e }),
/* @__PURE__ */ f.jsxs("div", { className: "wc-copy-action", children: [
v ? /* @__PURE__ */ f.jsx(v, { className: "wc-copy-icon" }) : /* @__PURE__ */ f.jsx("span", { className: "wc-copy-icon", dangerouslySetInnerHTML: { __html: E } }),
n && /* @__PURE__ */ f.jsx("span", { className: "wc-copy-label", children: W })
] }),
r && S && /* @__PURE__ */ f.jsx("div", { className: Y, children: R })
] });
}
function nt(e) {
return String(e).padStart(2, "0");
}
function un(e, t = !0) {
const a = Math.floor(e / 3600), n = Math.floor(e % 3600 / 60), r = e % 60;
return t && a > 0 ? `${nt(a)}:${nt(n)}:${nt(r)}` : `${nt(n)}:${nt(r)}`;
}
function dn(e) {
const {
size: t = "md",
color: a = "default",
format: n = "simple",
finished: r = !1,
warningTime: s = null,
remaining: l = 0,
className: o = ""
} = e, u = ["wc-countdown"];
return u.push(`wc-countdown--${t}`), a !== "default" && u.push(`wc-countdown--${a}`), n === "detailed" && u.push("wc-countdown--with-labels"), n === "card" && (u.push("wc-countdown--card"), n === "card" && u.push("wc-countdown--with-labels")), r || l === 0 ? u.push("wc-countdown--finished") : s && l <= s && u.push("wc-countdown--warning-time"), o && u.push(o), u.filter(Boolean);
}
function fn() {
return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches ? "var(--wc-neutral-100)" : "var(--wc-neutral-900)";
}
function $l(e) {
let t = null;
return { start: () => {
t || (t = setInterval(e, 1e3));
}, stop: () => {
t && (clearInterval(t), t = null);
}, isRunning: () => !!t };
}
const Ff = /* @__PURE__ */ Fe({
__name: "Countdown",
props: {
seconds: {},
autoStart: { type: Boolean, default: !0 },
size: { default: "md" },
color: { default: "default" },
customColor: { default: "" },
fontSize: { default: "" },
format: { default: "simple" },
warningTime: { default: null },
className: { default: "" }
},
emits: ["finish"],
setup(e, { expose: t, emit: a }) {
const n = e, r = a, s = A(n.seconds);
let l = null;
const o = () => {
l || (l = window.setInterval(() => {
s.value > 0 ? s.value -= 1 : (u(), r("finish"));
}, 1e3));
}, u = () => {
l && (clearInterval(l), l = null);
};
Pe(() => {
n.autoStart && o();
}), Ze(() => {
u();
}), Re(() => n.seconds, (h) => {
s.value = h, u(), n.autoStart && o();
});
const i = C(() => un(s.value)), c = C(() => n.customColor || (n.fontSize ? fn() : void 0)), d = C(() => {
const h = {};
return n.fontSize && (h.fontSize = n.fontSize), c.value && (h.color = c.value), h;
}), p = C(
() => dn({
size: n.size,
color: n.color,
format: n.format,
finished: s.value === 0,
warningTime: n.warningTime,
remaining: s.value,
className: n.className
}).join(" ")
);
return t({ start: o, clear: u }), (h, v) => (m(), y("span", {
class: T(p.value),
style: ce(d.value)
}, I(i.value), 7));
}
}), qf = cr(function({
seconds: t,
autoStart: a = !0,
size: n = "md",
color: r = "default",
format: s = "simple",
fontSize: l = "",
customColor: o = "",
warningTime: u = null,
onFinish: i = () => {
},
className: c = ""
}, d) {
const [p, h] = te(t);
Te(null);
const v = $l(() => {
h((w) => w > 0 ? w - 1 : (v.stop(), i(), 0));
}), g = () => {
v.stop();
}, x = () => {
v.start();
};
ve(() => (h(t), g(), a && x(), () => g()), [t]), ve(() => {
a && x();
}, []), ur(d, () => ({ start: x, clear: g }));
const $ = dn({
size: n,
color: r,
format: s,
finished: p === 0,
warningTime: u,
remaining: p,
className: c
}).join(" "), B = un(p), S = o || (l ? fn() : void 0), k = {};
return l && (k.fontSize = l), S && (k.color = S), /* @__PURE__ */ f.jsx(
"span",
{
className: $,
style: k,
children: B
}
);
}), jl = ["value", "placeholder", "disabled"], Nl = { class: "wc-datepicker-header" }, Tl = { class: "wc-datepicker-title" }, El = { class: "wc-datepicker-weekdays" }, Il = { class: "wc-datepicker-days" }, Bl = ["disabled", "onClick"], Rl = {
key: 0,
class: "wc-datepicker-footer"
}, Wf = {
__name: "DatePicker",
props: {
modelValue: {
type: [Date, String],
default: null
},
placeholder: {
type: String,
default: "请选择日期"
},
format: {
type: String,
default: "YYYY-MM-DD"
},
disabled: {
type: Boolean,
default: !1
},
showToday: {
type: Boolean,
default: !0
},
minDate: {
type: [Date, String],
default: null
},
maxDate: {
type: [Date, String],
default: null
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "outlined", "filled"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(null), s = A(null), l = A(!1), o = A(/* @__PURE__ */ new Date()), u = ["日", "一", "二", "三", "四", "五", "六"], i = C(() => [
"wc-datepicker-wrapper",
`wc-datepicker-wrapper--${a.variant}`,
`wc-datepicker-wrapper--${a.size}`,
{
"wc-datepicker-wrapper--disabled": a.disabled,
"wc-datepicker-wrapper--open": l.value
}
]), c = C(() => ({
zIndex: 1e3
})), d = C(() => a.modelValue ? a.modelValue instanceof Date ? a.modelValue : new Date(a.modelValue) : null), p = C(() => d.value ? S(d.value, a.format) : ""), h = C(() => {
const N = o.value.getFullYear(), O = o.value.getMonth() + 1;
return `${N}年${O}月`;
}), v = C(() => {
const N = o.value.getFullYear(), O = o.value.getMonth(), H = new Date(N, O, 1), Q = new Date(N, O + 1, 0), q = H.getDay(), ne = Q.getDate(), V = [], K = new Date(N, O - 1, 0);
for (let oe = q - 1; oe >= 0; oe--)
V.push({
day: K.getDate() - oe,
month: "prev",
date: new Date(N, O - 1, K.getDate() - oe)
});
for (let oe = 1; oe <= ne; oe++)
V.push({
day: oe,
month: "current",
date: new Date(N, O, oe)
});
const ge = 42 - V.length;
for (let oe = 1; oe <= ge; oe++)
V.push({
day: oe,
month: "next",
date: new Date(N, O + 1, oe)
});
return V;
}), g = (N) => [
"wc-datepicker-day",
{
"wc-datepicker-day--prev": N.month === "prev",
"wc-datepicker-day--next": N.month === "next",
"wc-datepicker-day--current": N.month === "current",
"wc-datepicker-day--selected": x(N.date),
"wc-datepicker-day--today": $(N.date),
"wc-datepicker-day--disabled": B(N)
}
], x = (N) => d.value ? N.toDateString() === d.value.toDateString() : !1, $ = (N) => {
const O = /* @__PURE__ */ new Date();
return N.toDateString() === O.toDateString();
}, B = (N) => {
const { date: O } = N;
if (a.minDate) {
const H = a.minDate instanceof Date ? a.minDate : new Date(a.minDate);
if (O < H) return !0;
}
if (a.maxDate) {
const H = a.maxDate instanceof Date ? a.maxDate : new Date(a.maxDate);
if (O > H) return !0;
}
return !1;
}, S = (N, O) => {
const H = N.getFullYear(), Q = String(N.getMonth() + 1).padStart(2, "0"), q = String(N.getDate()).padStart(2, "0");
return O.replace("YYYY", H).replace("MM", Q).replace("DD", q);
}, k = () => {
a.disabled || (l.value = !l.value);
}, w = (N) => {
const O = new Date(o.value);
O.setMonth(O.getMonth() + N), o.value = O;
}, E = (N) => {
if (B(N)) return;
const O = new Date(N.date);
n("update:modelValue", O), n("change", O), l.value = !1;
}, W = () => {
const N = /* @__PURE__ */ new Date();
n("update:modelValue", N), n("change", N), l.value = !1;
}, R = () => {
n("update:modelValue", null), n("change", null), l.value = !1;
}, Y = (N) => {
r.value && !r.value.contains(N.target) && (l.value = !1);
};
return Re(() => a.modelValue, (N) => {
if (N) {
const O = N instanceof Date ? N : new Date(N);
o.value = new Date(O.getFullYear(), O.getMonth(), 1);
}
}), Pe(() => {
document.addEventListener("click", Y);
}), He(() => {
document.removeEventListener("click", Y);
}), (N, O) => (m(), y("div", {
ref_key: "datePickerRef",
ref: r,
class: "wc-datepicker"
}, [
_("div", {
class: T(i.value),
onClick: k
}, [
_("input", {
ref_key: "inputRef",
ref: s,
type: "text",
value: p.value,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: "",
class: "wc-datepicker-input"
}, null, 8, jl),
O[2] || (O[2] = _("span", { class: "wc-datepicker-icon" }, "📅", -1))
], 2),
l.value ? (m(), y("div", {
key: 0,
class: "wc-datepicker-dropdown",
style: ce(c.value)
}, [
_("div", Nl, [
_("button", {
type: "button",
class: "wc-datepicker-nav",
onClick: O[0] || (O[0] = (H) => w(-1))
}, " ‹ "),
_("span", Tl, I(h.value), 1),
_("button", {
type: "button",
class: "wc-datepicker-nav",
onClick: O[1] || (O[1] = (H) => w(1))
}, " › ")
]),
_("div", El, [
(m(), y(ke, null, Ce(u, (H) => _("div", {
key: H,
class: "wc-datepicker-weekday"
}, I(H), 1)), 64))
]),
_("div", Il, [
(m(!0), y(ke, null, Ce(v.value, (H) => (m(), y("button", {
key: `${H.month}-${H.day}`,
type: "button",
class: T(g(H)),
disabled: B(H),
onClick: (Q) => E(H)
}, I(H.day), 11, Bl))), 128))
]),
e.showToday ? (m(), y("div", Rl, [
_("button", {
type: "button",
class: "wc-datepicker-today",
onClick: W
}, " 今天 "),
_("button", {
type: "button",
class: "wc-datepicker-clear",
onClick: R
}, " 清除 ")
])) : j("", !0)
], 4)) : j("", !0)
], 512));
}
};
function Pl(e, t = "YYYY-MM-DD") {
if (!e || !(e instanceof Date)) return "";
const a = e.getFullYear(), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
return t.replace("YYYY", a).replace("MM", n).replace("DD", r);
}
function Dl(e) {
if (!e) return !1;
const t = /* @__PURE__ */ new Date();
return e.toDateString() === t.toDateString();
}
function Vl(e, t) {
return !e || !t ? !1 : e.toDateString() === t.toDateString();
}
function Ml(e) {
const t = e.getFullYear(), a = e.getMonth(), n = new Date(t, a, 1), r = new Date(t, a + 1, 0), s = n.getDay(), l = r.getDate(), o = [], u = new Date(t, a - 1, 0);
for (let c = s - 1; c >= 0; c--)
o.push({
day: u.getDate() - c,
month: "prev",
date: new Date(t, a - 1, u.getDate() - c)
});
for (let c = 1; c <= l; c++)
o.push({
day: c,
month: "current",
date: new Date(t, a, c)
});
const i = 42 - o.length;
for (let c = 1; c <= i; c++)
o.push({
day: c,
month: "next",
date: new Date(t, a + 1, c)
});
return o;
}
function Ol(e = "md", t = "default", a = !1, n = !1, r = !1) {
const s = [
"wc-datepicker-wrapper",
`wc-datepicker-wrapper--${e}`,
`wc-datepicker-wrapper--${t}`
];
return a && s.push("wc-datepicker-wrapper--disabled"), n && s.push("wc-datepicker-wrapper--focused"), r && s.push("wc-datepicker-wrapper--open"), s.join(" ");
}
function Al(e, t) {
const a = ["wc-datepicker-day"];
return e.month === "prev" && a.push("wc-datepicker-day--prev"), e.month === "next" && a.push("wc-datepicker-day--next"), e.month === "current" && a.push("wc-datepicker-day--current"), t && Vl(e.date, t) && a.push("wc-datepicker-day--selected"), Dl(e.date) && a.push("wc-datepicker-day--today"), a.join(" ");
}
function Hf({
value: e = null,
onChange: t = () => {
},
placeholder: a = "请选择日期",
disabled: n = !1,
size: r = "md",
variant: s = "default",
format: l = "YYYY-MM-DD",
showToday: o = !0,
minDate: u = null,
maxDate: i = null,
className: c = "",
...d
}) {
const p = Te(null), [h, v] = te(!1), [g, x] = te(
() => e ? new Date(e) : /* @__PURE__ */ new Date()
), [$, B] = te(e ? new Date(e) : null);
ve(() => {
B(e ? new Date(e) : null);
}, [e]), ve(() => {
const q = (ne) => {
p.current && !p.current.contains(ne.target) && v(!1);
};
return document.addEventListener("click", q), () => document.removeEventListener("click", q);
}, []);
const S = $ ? Pl($, l) : "", k = () => {
n || v((q) => !q);
}, w = (q) => {
x((ne) => {
const V = new Date(ne);
return V.setMonth(V.getMonth() + q), V;
});
}, E = (q) => {
if (Y(q)) return;
const ne = new Date(q.date);
B(ne), t(ne), v(!1);
}, W = () => {
const q = /* @__PURE__ */ new Date();
B(q), t(q), v(!1);
}, R = () => {
B(null), t(null), v(!1);
}, Y = (q) => {
const { date: ne } = q;
if (u) {
const V = u instanceof Date ? u : new Date(u);
if (ne < V) return !0;
}
if (i) {
const V = i instanceof Date ? i : new Date(i);
if (ne > V) return !0;
}
return !1;
}, N = Ml(g), O = ["日", "一", "二", "三", "四", "五", "六"], H = `${g.getFullYear()}年${g.getMonth() + 1}月`, Q = [
Ol(r, s, n, !1, h),
c
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsxs("div", { className: "wc-datepicker", ref: p, ...d, children: [
/* @__PURE__ */ f.jsxs("div", { className: Q, onClick: k, children: [
/* @__PURE__ */ f.jsx(
"input",
{
type: "text",
className: "wc-datepicker-input",
value: S,
placeholder: a,
disabled: n,
readOnly: !0
}
),
/* @__PURE__ */ f.jsx("span", { className: "wc-datepicker-icon", children: "📅" })
] }),
h && /* @__PURE__ */ f.jsxs("div", { className: "wc-datepicker-dropdown", style: { zIndex: 1e3 }, children: [
/* @__PURE__ */ f.jsxs("div", { className: "wc-datepicker-header", children: [
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: "wc-datepicker-nav",
onClick: () => w(-1),
children: "‹"
}
),
/* @__PURE__ */ f.jsx("span", { className: "wc-datepicker-title", children: H }),
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: "wc-datepicker-nav",
onClick: () => w(1),
children: "›"
}
)
] }),
/* @__PURE__ */ f.jsx("div", { className: "wc-datepicker-weekdays", children: O.map((q) => /* @__PURE__ */ f.jsx("div", { className: "wc-datepicker-weekday", children: q }, q)) }),
/* @__PURE__ */ f.jsx("div", { className: "wc-datepicker-days", children: N.map((q) => {
const ne = Al(q, $), V = Y(q);
return /* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: ne,
disabled: V,
onClick: () => E(q),
children: q.day
},
`${q.month}-${q.day}`
);
}) }),
o && /* @__PURE__ */ f.jsxs("div", { className: "wc-datepicker-footer", children: [
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: "wc-datepicker-today",
onClick: W,
children: "今天"
}
),
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: "wc-datepicker-clear",
onClick: R,
children: "清除"
}
)
] })
] })
] });
}
const Ll = { class: "wc-dropdown__button" }, zl = {
key: 0,
class: "wc-dropdown__card"
}, Fl = { class: "wc-dropdown__card-illustration" }, ql = ["src", "alt"], Wl = {
key: 1,
class: "wc-dropdown__illustration-placeholder"
}, Hl = {
key: 0,
class: "wc-dropdown__card-info"
}, Ul = {
key: 0,
class: "wc-dropdown__card-title"
}, Yl = {
key: 1,
class: "wc-dropdown__card-description"
}, Gl = { class: "wc-dropdown__card-list" }, Kl = ["onClick"], Jl = {
key: 0,
class: "wc-dropdown__icon"
}, Xl = { class: "wc-dropdown__label" }, Ql = { key: 1 }, Zl = ["onClick"], eo = {
key: 0,
class: "wc-dropdown__icon"
}, to = { class: "wc-dropdown__label" }, Uf = {
__name: "Dropdown",
props: {
items: {
type: Array,
default: () => []
},
triggerText: {
type: String,
default: "选择选项"
},
placement: {
type: String,
default: "bottom-start",
validator: (e) => ["bottom-start", "bottom-end", "top-start", "top-end"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
trigger: {
type: String,
default: "click",
validator: (e) => ["click", "hover"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "card"].includes(e)
},
illustration: {
type: String,
default: ""
},
illustrationAlt: {
type: String,
default: "示意图"
},
cardTitle: {
type: String,
default: ""
},
cardDescription: {
type: String,
default: ""
},
isDarkMode: {
type: Boolean,
default: !1
}
},
emits: ["select", "open", "close"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = A(null), l = A(null), o = A(null), u = C(() => {
const h = ["wc-dropdown__menu", `wc-dropdown__menu--${a.placement}`];
return a.variant === "card" && h.push("wc-dropdown__menu--card"), h;
}), i = C(() => a.variant === "card" ? {
minWidth: "320px",
maxWidth: "450px"
} : {
minWidth: "120px"
}), c = () => {
a.disabled || (r.value = !r.value, r.value ? n("open") : n("close"));
}, d = (h, v) => {
h.disabled || h.divider || (n("select", h, v), r.value = !1, n("close"));
}, p = (h) => {
s.value && !s.value.contains(h.target) && (r.value = !1, n("close"));
};
return Pe(() => {
document.addEventListener("click", p);
}), He(() => {
document.removeEventListener("click", p);
}), (h, v) => (m(), y("div", {
ref_key: "dropdownRef",
ref: s,
class: T(["wc-dropdown", { dark: e.isDarkMode }]),
style: { backgroundColor: "var(--wc-bg-surface)", color: "var(--wc-text-primary)" }
}, [
_("div", {
ref_key: "triggerRef",
ref: l,
class: "wc-dropdown__trigger",
onClick: c
}, [
M(h.$slots, "trigger", {}, () => [
_("button", Ll, [
he(I(e.triggerText) + " ", 1),
_("span", {
class: T(["wc-dropdown__arrow", { "wc-dropdown__arrow--open": r.value }])
}, " ▼ ", 2)
])
])
], 512),
Ge(Ke, { name: "dropdown" }, {
default: je(() => [
r.value ? (m(), y("div", {
key: 0,
ref_key: "menuRef",
ref: o,
class: T(u.value),
style: ce(i.value)
}, [
M(h.$slots, "content", {}, () => [
e.variant === "card" ? (m(), y("div", zl, [
_("div", Fl, [
M(h.$slots, "illustration", {}, () => [
e.illustration ? (m(), y("img", {
key: 0,
src: e.illustration,
alt: e.illustrationAlt,
class: "wc-dropdown__illustration-image"
}, null, 8, ql)) : (m(), y("div", Wl, v[0] || (v[0] = [
_("span", null, "🎨", -1)
])))
]),
e.cardTitle || e.cardDescription ? (m(), y("div", Hl, [
e.cardTitle ? (m(), y("h4", Ul, I(e.cardTitle), 1)) : j("", !0),
e.cardDescription ? (m(), y("p", Yl, I(e.cardDescription), 1)) : j("", !0)
])) : j("", !0)
]),
_("div", Gl, [
(m(!0), y(ke, null, Ce(e.items, (g, x) => (m(), y("div", {
key: g.key || x,
class: T([
g.divider ? "wc-dropdown__divider" : "wc-dropdown__item",
{
"wc-dropdown__item--disabled": g.disabled && !g.divider
}
]),
onClick: ($) => d(g, x)
}, [
g.icon ? (m(), y("span", Jl, I(g.icon), 1)) : j("", !0),
_("span", Xl, I(g.label), 1)
], 10, Kl))), 128))
])
])) : (m(), y("div", Ql, [
(m(!0), y(ke, null, Ce(e.items, (g, x) => (m(), y("div", {
key: g.key || x,
class: T([
g.divider ? "wc-dropdown__divider" : "wc-dropdown__item",
{
"wc-dropdown__item--disabled": g.disabled && !g.divider
}
]),
onClick: ($) => d(g, x)
}, [
g.icon ? (m(), y("span", eo, I(g.icon), 1)) : j("", !0),
_("span", to, I(g.label), 1)
], 10, Zl))), 128))
]))
])
], 6)) : j("", !0)
]),
_: 3
})
], 2));
}
}, me = (e, t) => {
const a = e.__vccOpts || e;
for (const [n, r] of t)
a[n] = r;
return a;
}, ao = ["disabled"], no = {
key: 0,
class: "fab-icon"
}, ro = ["innerHTML"], so = {
key: 1,
class: "fab-label"
}, lo = {
__name: "Fab",
props: {
variant: {
type: String,
default: "circular",
validator: (e) => ["circular", "extended"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "inherit"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
icon: {
type: String,
default: ""
}
},
emits: ["click"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = C(() => {
const i = ["wc-fab"];
return i.push(`wc-fab--${a.variant}`), i.push(`wc-fab--${a.size}`), i.push(`wc-fab--${a.color}`), a.disabled && i.push("wc-fab--disabled"), r.value && i.push("wc-fab--focused"), i;
}), l = (i) => {
a.disabled || n("click", i);
}, o = () => {
r.value = !0;
}, u = () => {
r.value = !1;
};
return (i, c) => (m(), y("button", {
class: T(s.value),
disabled: e.disabled,
onClick: l,
onFocus: o,
onBlur: u
}, [
i.$slots.icon || e.icon ? (m(), y("span", no, [
M(i.$slots, "icon", {}, () => [
e.icon ? (m(), y("span", {
key: 0,
innerHTML: e.icon
}, null, 8, ro)) : j("", !0)
], !0)
])) : j("", !0),
e.variant === "extended" && (i.$slots.default || e.label) ? (m(), y("span", so, [
M(i.$slots, "default", {}, () => [
he(I(e.label), 1)
], !0)
])) : j("", !0)
], 42, ao));
}
}, Yf = /* @__PURE__ */ me(lo, [["__scopeId", "data-v-520d7cb2"]]), Mt = Fe({
name: "FeedItem",
components: {},
// will be replaced later for recursion
props: {
item: { type: Object, required: !0 },
showAvatar: { type: Boolean, default: !0 },
variant: { type: String, default: "timeline" },
color: { type: String, default: "var(--wc-primary-500)" },
dotSize: { type: [String, Number], default: 12 },
lineWidth: { type: [String, Number], default: 2 }
},
emits: ["item-click"],
computed: {
feedItemStyles() {
const e = typeof this.dotSize == "number" ? `${this.dotSize}px` : this.dotSize, t = typeof this.lineWidth == "number" ? `${this.lineWidth}px` : this.lineWidth;
return {
"--feed-color": this.color,
"--feed-dot-size": e,
"--feed-line-width": t
};
}
},
methods: {
handleClick() {
this.$emit("item-click", this.item);
}
},
template: `
<li
class="wc-feed-item"
:class="[variant, (item.children && item.children.length) ? 'has-children' : '']"
:style="feedItemStyles"
@click="handleClick"
>
<div v-if="showAvatar && item.avatar" class="wc-feed-avatar"><img :src="item.avatar" alt="avatar" /></div>
<div class="wc-feed-content">
<div class="wc-feed-header">
<strong class="wc-feed-author">{{ item.author }}</strong>
<span class="wc-feed-time">{{ item.time }}</span>
</div>
<p class="wc-feed-text">{{ item.text }}</p>
<ul v-if="item.children && item.children.length" class="wc-feed-children">
<FeedItem
v-for="child in item.children"
:key="child.id || child.time"
:item="child"
:variant="variant"
:show-avatar="showAvatar"
:color="color"
:dot-size="dotSize"
:line-width="lineWidth"
@item-click="$emit('item-click', $event)"
/>
</ul>
</div>
</li>
`
});
Mt.components = { FeedItem: Mt };
const oo = {
name: "Feed",
components: { FeedItem: Mt },
props: {
items: { type: Array, default: () => [] },
variant: { type: String, default: "timeline" },
// timeline 默认
showAvatar: { type: Boolean, default: !0 },
color: { type: String, default: "var(--wc-primary-500)" },
// 主题颜色
dotSize: { type: [String, Number], default: 12 },
// 圆点大小
lineWidth: { type: [String, Number], default: 3 }
// 线条粗细
},
emits: ["item-click"],
setup(e) {
return {
feedListStyles: C(() => {
const a = typeof e.lineWidth == "number" ? `${e.lineWidth}px` : e.lineWidth;
return {
"--feed-color": e.color,
"--feed-line-width": a
};
})
};
}
};
function io(e, t, a, n, r, s) {
const l = or("FeedItem");
return m(), y("ul", {
class: T(["wc-feed-list", a.variant]),
style: ce(n.feedListStyles)
}, [
(m(!0), y(ke, null, Ce(a.items, (o) => (m(), Se(l, {
key: o.id || o.time,
item: o,
"show-avatar": a.showAvatar,
variant: a.variant,
color: a.color,
"dot-size": a.dotSize,
"line-width": a.lineWidth,
onItemClick: t[0] || (t[0] = (u) => e.$emit("item-click", u))
}, null, 8, ["item", "show-avatar", "variant", "color", "dot-size", "line-width"]))), 128)),
M(e.$slots, "default")
], 6);
}
const Gf = /* @__PURE__ */ me(oo, [["render", io]]), pn = ({
item: e,
showAvatar: t = !0,
variant: a = "timeline",
color: n = "var(--wc-primary-500)",
dotSize: r = 12,
lineWidth: s = 2,
onItemClick: l
}) => {
const o = Array.isArray(e.children) && e.children.length, u = typeof r == "number" ? `${r}px` : r, i = typeof s == "number" ? `${s}px` : s, c = {
"--feed-color": n,
"--feed-dot-size": u,
"--feed-line-width": i,
display: "flex",
gap: 12,
position: "relative"
};
return /* @__PURE__ */ f.jsxs(
"li",
{
className: `wc-feed-item ${a} ${o ? "has-children" : ""}`,
style: c,
onClick: () => l && l(e),
children: [
t && e.avatar && /* @__PURE__ */ f.jsx("div", { className: "wc-feed-avatar", style: { flexShrink: 0 }, children: /* @__PURE__ */ f.jsx("img", { src: e.avatar, alt: "avatar", style: { width: 40, height: 40, borderRadius: "50%", objectFit: "cover" } }) }),
/* @__PURE__ */ f.jsxs("div", { className: "wc-feed-content", style: { flex: 1 }, children: [
/* @__PURE__ */ f.jsxs("div", { className: "wc-feed-header", style: { display: "flex", gap: 8, alignItems: "center" }, children: [
/* @__PURE__ */ f.jsx("strong", { className: "wc-feed-author", style: { color: "var(--color-text,#111827)" }, children: e.author }),
/* @__PURE__ */ f.jsx("span", { className: "wc-feed-time", style: { fontSize: "0.75rem", color: "var(--color-text-secondary,#6b7280)" }, children: e.time })
] }),
/* @__PURE__ */ f.jsx("p", { className: "wc-feed-text", style: { margin: "4px 0 0", fontSize: "0.875rem", color: "var(--color-text,#374151)" }, children: e.text }),
o && /* @__PURE__ */ f.jsx("ul", { className: "wc-feed-children", style: { listStyle: "none", margin: "12px 0 0 52px", padding: 0, display: "flex", flexDirection: "column", gap: 16 }, children: e.children.map((d) => /* @__PURE__ */ f.jsx(
pn,
{
item: d,
showAvatar: t,
variant: a,
color: n,
dotSize: r,
lineWidth: s,
onItemClick: l
},
d.id || d.time
)) })
] })
]
}
);
}, co = ({
items: e = [],
variant: t = "timeline",
showAvatar: a = !0,
color: n = "var(--wc-primary-500)",
dotSize: r = 12,
lineWidth: s = 2,
onItemClick: l,
className: o = ""
}) => {
const u = typeof s == "number" ? `${s}px` : s, i = {
"--feed-color": n,
"--feed-line-width": u,
listStyle: "none",
padding: 0,
margin: 0,
display: "flex",
flexDirection: "column",
gap: 16
};
return /* @__PURE__ */ f.jsx("ul", { className: `wc-feed-list ${t} ${o}`, style: i, children: e.map((c) => /* @__PURE__ */ f.jsx(
pn,
{
item: c,
variant: t,
showAvatar: a,
color: n,
dotSize: r,
lineWidth: s,
onItemClick: l
},
c.id || c.time
)) });
};
co.displayName = "Feed";
const uo = {
name: "Feature",
props: {
title: { type: String, default: "Awesome Feature" },
description: { type: String, default: "Feature description goes here." },
icon: { type: String, default: "" },
// svg/html string
iconSize: { type: [Number, String], default: 48 },
align: { type: String, default: "left" },
// left | center
bgColor: { type: String, default: "" },
reverse: { type: Boolean, default: !1 },
ctaLabel: { type: String, default: "" },
ctaHref: { type: String, default: "#" },
variant: { type: String, default: "default", validator: (e) => ["default", "elevated", "minimal"].includes(e) },
isDarkMode: { type: Boolean, default: !1 }
},
emits: ["click", "cta-click"],
computed: {
cardClasses() {
const e = [
"wc-feature-card",
"wc-feature-card--clickable"
];
return this.variant !== "default" && e.push(`wc-feature-card--${this.variant}`), this.align === "center" ? e.push("wc-feature-card--center") : e.push("wc-feature-card--left"), this.reverse && e.push("wc-feature-card--reverse"), e;
},
cardStyle() {
return this.bgColor ? { background: this.bgColor } : void 0;
},
iconStyle() {
const e = typeof this.iconSize == "number" ? `${this.iconSize}px` : this.iconSize;
return { width: e, height: e, fontSize: `calc(${e} * 0.75)` };
}
}
}, fo = ["innerHTML"], po = { class: "wc-feature-content" }, mo = { class: "wc-feature-title" }, ho = { class: "wc-feature-description" }, vo = ["href"];
function yo(e, t, a, n, r, s) {
return m(), y("div", {
class: T([s.cardClasses, { dark: a.isDarkMode }]),
style: ce(s.cardStyle),
onClick: t[1] || (t[1] = (l) => e.$emit("click"))
}, [
a.icon ? (m(), y("div", {
key: 0,
class: "wc-feature-icon",
style: ce(s.iconStyle),
innerHTML: a.icon
}, null, 12, fo)) : j("", !0),
_("div", po, [
_("h3", mo, I(a.title), 1),
_("p", ho, [
M(e.$slots, "default", {}, () => [
he(I(a.description), 1)
])
]),
a.ctaLabel ? (m(), y("a", {
key: 0,
href: a.ctaHref,
class: "wc-feature-cta",
onClick: t[0] || (t[0] = Ae((l) => e.$emit("cta-click"), ["stop"]))
}, I(a.ctaLabel), 9, vo)) : j("", !0)
])
], 6);
}
const Kf = /* @__PURE__ */ me(uo, [["render", yo]]), go = ({ align: e, size: t, background: a, reverse: n, vertical: r, clickable: s, disabled: l, className: o, isDarkMode: u }) => [
"wc-feature-card",
s && "wc-feature-card--clickable",
l,
n && "wc-feature-card--reverse",
r && "wc-feature-card--vertical",
`wc-feature-card--${t}`,
`wc-feature-card--${a}`,
`wc-feature-card--${e}`,
o,
u && "dark"
].filter(Boolean);
function bo(e, t) {
return [
"wc-feature-icon",
`wc-feature-icon--${e}`,
t
].filter(Boolean);
}
function wo(e, t) {
return [
"wc-feature-content",
`wc-feature-content--${e}`,
t
].filter(Boolean);
}
function xo(e, t) {
return [
"wc-feature-title",
`wc-feature-title--${e}`,
t
].filter(Boolean);
}
const ko = (e, t) => [
"wc-feature-description",
`wc-feature-description--${e}`,
t
].filter(Boolean);
function _o(e, t, a) {
a && a(e);
}
function Co(e, t) {
e.stopPropagation(), t && t(e);
}
function So(e) {
return typeof e == "string" ? () => {
const t = document.createElement("span");
return t.innerHTML = e, t;
} : e;
}
const $o = ({
title: e = "Awesome Feature",
description: t = "Feature description goes here.",
icon: a = "",
iconSize: n = 48,
size: r = "md",
align: s = "left",
background: l = "default",
bgColor: o = "",
reverse: u = !1,
vertical: i = !1,
ctaLabel: c = "",
ctaHref: d = "#",
onClick: p,
onCtaClick: h,
children: v,
className: g = "",
style: x = {},
isDarkMode: $ = !1
}) => {
const B = go({
align: s,
size: r,
background: l,
reverse: u,
vertical: i,
clickable: !!p,
disabled: !1,
className: g
}).join(" "), S = bo(n).join(" "), k = wo(s).join(" "), w = xo(r).join(" "), E = ko(r).join(" "), W = {
...o ? { background: o } : {},
...x
};
return /* @__PURE__ */ f.jsxs(
"div",
{
className: `${B} ${$ ? "dark" : ""}`,
style: W,
onClick: (R) => _o(R, !1, p),
children: [
a && /* @__PURE__ */ f.jsx("div", { className: S, children: So(a) }),
/* @__PURE__ */ f.jsxs("div", { className: k, children: [
/* @__PURE__ */ f.jsx("h3", { className: w, children: e }),
/* @__PURE__ */ f.jsx("p", { className: E, children: v || t }),
c && /* @__PURE__ */ f.jsx(
"a",
{
href: d,
className: "wc-feature-cta",
onClick: (R) => Co(R, h),
children: c
}
)
] })
]
}
);
};
$o.displayName = "Feature";
const jo = {
name: "FileInput",
props: {
multiple: { type: Boolean, default: !1 },
variant: { type: String, default: "block" },
// block | button | icon
accept: { type: String, default: "" },
label: { type: String, default: "选择文件" }
},
emits: ["change", "invalid"],
computed: {
wrapperClasses() {
return [
"wc-file-input-wrapper",
`variant-${this.variant}`
];
}
},
methods: {
validateFiles(e) {
if (!this.accept) return !0;
const t = this.accept.split(",").map((n) => n.trim()), a = [...e].filter((n) => !t.some((r) => r.startsWith(".") ? n.name.endsWith(r) : n.type === r));
return a.length ? (this.$emit("invalid", a), !1) : !0;
},
onChange(e) {
const t = e.target.files;
this.validateFiles(t) && this.$emit("change", t);
},
onDrop(e) {
const t = e.dataTransfer.files;
this.validateFiles(t) && this.$emit("change", t);
}
}
}, No = ["multiple", "accept"], To = {
key: 0,
class: "wc-file-input-content"
}, Eo = {
key: 1,
class: "wc-file-button"
}, Io = {
key: 2,
class: "wc-file-icon"
};
function Bo(e, t, a, n, r, s) {
return m(), y("label", {
class: T(s.wrapperClasses),
onDragover: t[1] || (t[1] = Ae(() => {
}, ["prevent"])),
onDrop: t[2] || (t[2] = Ae((...l) => s.onDrop && s.onDrop(...l), ["prevent"]))
}, [
_("input", {
type: "file",
class: "wc-file-input",
multiple: a.multiple,
accept: a.accept,
onChange: t[0] || (t[0] = (...l) => s.onChange && s.onChange(...l))
}, null, 40, No),
a.variant === "block" ? (m(), y("div", To, [
M(e.$slots, "default", {}, () => [
he(I(a.label), 1)
])
])) : a.variant === "button" ? (m(), y("span", Eo, I(a.label), 1)) : a.variant === "icon" ? (m(), y("span", Io, "⬆️")) : j("", !0)
], 34);
}
const Jf = /* @__PURE__ */ me(jo, [["render", Bo]]), Ro = ({
multiple: e = !1,
variant: t = "block",
// block | button | icon
accept: a = "",
label: n = "选择文件",
onChange: r,
onInvalid: s,
className: l = "",
style: o = {}
}) => {
const u = Te(null), i = (v) => {
if (!a) return !0;
const g = a.split(",").map(($) => $.trim()), x = [...v].filter(($) => !g.some((B) => B.startsWith(".") ? $.name.endsWith(B) : $.type === B));
return x.length ? (s && s(x), !1) : !0;
}, c = (v) => {
const g = v.target.files;
i(g) && r && r(g);
}, d = (v) => {
v.preventDefault();
const g = v.dataTransfer.files;
i(g) && r && r(g);
}, p = () => {
var v;
(v = u.current) == null || v.click();
}, h = () => {
switch (t) {
case "button":
return /* @__PURE__ */ f.jsx("span", { className: "wc-file-button", children: n });
case "icon":
return /* @__PURE__ */ f.jsx("span", { className: "wc-file-icon", children: "⬆️" });
default:
return /* @__PURE__ */ f.jsx("strong", { className: "wc-file-input-content__title", children: n });
}
};
return /* @__PURE__ */ f.jsxs(
"label",
{
className: `wc-file-input-wrapper variant-${t} ${l}`,
onDragOver: (v) => v.preventDefault(),
onDrop: d,
onClick: t !== "block" ? p : void 0,
children: [
/* @__PURE__ */ f.jsx(
"input",
{
ref: u,
type: "file",
multiple: e,
accept: a,
style: { display: "none" },
onChange: c
}
),
t === "block" ? /* @__PURE__ */ f.jsx("div", { className: "wc-file-input-content", children: h() }) : h()
]
}
);
};
Ro.displayName = "FileInput";
const Po = {
__name: "FormControl",
props: {
disabled: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "outlined",
validator: (e) => ["outlined", "filled", "standard"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
fullWidth: {
type: Boolean,
default: !1
},
margin: {
type: String,
default: "normal",
validator: (e) => ["none", "dense", "normal"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const n = [];
return t.fullWidth && n.push("form-control--full-width"), t.margin === "dense" ? n.push("form-control--margin-dense") : t.margin === "normal" && n.push("form-control--margin-normal"), t.disabled && n.push("form-control--disabled"), t.error && n.push("form-control--error"), n;
});
return it("formControlContext", {
disabled: t.disabled,
error: t.error,
required: t.required,
variant: t.variant,
size: t.size
}), (n, r) => (m(), y("div", {
class: T(["form-control", a.value])
}, [
M(n.$slots, "default", {}, void 0, !0)
], 2));
}
}, Xf = /* @__PURE__ */ me(Po, [["__scopeId", "data-v-7222714e"]]), mn = ft(null), Do = ({
disabled: e = !1,
error: t = !1,
required: a = !1,
variant: n = "outlined",
// outlined | filled | standard
size: r = "md",
// sm | md | lg
fullWidth: s = !1,
margin: l = "normal",
// none | dense | normal
className: o = "",
style: u = {},
children: i,
...c
}) => {
const d = Oe(() => ({
disabled: e,
error: t,
required: a,
variant: n,
size: r
}), [e, t, a, n, r]), p = [
"form-control",
s && "form-control--full-width",
l === "dense" && "form-control--margin-dense",
l === "normal" && "form-control--margin-normal",
e && "form-control--disabled",
t && "form-control--error",
o
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx(mn.Provider, { value: d, children: /* @__PURE__ */ f.jsx("div", { className: p, style: u, ...c, children: i }) });
};
Do.displayName = "FormControl";
const Vo = {
key: 0,
class: "form-control-label__required"
}, Mo = { class: "form-control-label__control" }, Oo = {
key: 0,
class: "form-control-label__required"
}, Ao = {
__name: "FormControlLabel",
props: {
label: {
type: String,
required: !0
},
labelPlacement: {
type: String,
default: "end",
validator: (e) => ["start", "end", "top", "bottom"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
checked: {
type: Boolean,
default: void 0
},
value: {
type: [String, Number, Boolean],
default: void 0
}
},
emits: ["change"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(() => {
const o = [];
return a.labelPlacement === "start" ? o.push("form-control-label--placement-start") : a.labelPlacement === "end" ? o.push("form-control-label--placement-end") : a.labelPlacement === "top" ? o.push("form-control-label--placement-top") : a.labelPlacement === "bottom" && o.push("form-control-label--placement-bottom"), a.disabled && o.push("form-control-label--disabled"), o;
}), s = C(() => {
const o = [];
return a.disabled && o.push("form-control-label__text--disabled"), o;
}), l = (o) => {
a.disabled || n("change", o);
};
return (o, u) => (m(), y("label", {
class: T(["form-control-label", r.value]),
onClick: l
}, [
e.labelPlacement === "start" ? (m(), y("span", {
key: 0,
class: T(["form-control-label__text", s.value])
}, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", Vo, "*")) : j("", !0)
], 2)) : j("", !0),
_("span", Mo, [
M(o.$slots, "default", {}, void 0, !0)
]),
e.labelPlacement !== "start" ? (m(), y("span", {
key: 1,
class: T(["form-control-label__text", s.value])
}, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", Oo, "*")) : j("", !0)
], 2)) : j("", !0)
], 2));
}
}, Qf = /* @__PURE__ */ me(Ao, [["__scopeId", "data-v-5c71fa97"]]), Lo = ({
label: e,
labelPlacement: t = "end",
// start | end | top | bottom
disabled: a = !1,
required: n = !1,
checked: r,
value: s,
className: l = "",
style: o = {},
onChange: u,
children: i,
...c
}) => {
const d = (v) => {
a || u == null || u(v);
}, p = [
"form-control-label",
t === "start" && "form-control-label--placement-start",
t === "end" && "form-control-label--placement-end",
t === "top" && "form-control-label--placement-top",
t === "bottom" && "form-control-label--placement-bottom",
a && "form-control-label--disabled",
l
].filter(Boolean).join(" "), h = [
"form-control-label__text",
a && "form-control-label__text--disabled"
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsxs("label", { className: p, onClick: d, style: o, ...c, children: [
t === "start" && /* @__PURE__ */ f.jsxs("span", { className: h, children: [
e,
n && /* @__PURE__ */ f.jsx("span", { className: "form-control-label__required", children: "*" })
] }),
/* @__PURE__ */ f.jsx("span", { className: "form-control-label__control", children: i }),
t !== "start" && /* @__PURE__ */ f.jsxs("span", { className: h, children: [
e,
n && /* @__PURE__ */ f.jsx("span", { className: "form-control-label__required", children: "*" })
] })
] });
};
Lo.displayName = "FormControlLabel";
const zo = {
__name: "FormGroup",
props: {
row: {
type: Boolean,
default: !1
},
spacing: {
type: String,
default: "normal",
validator: (e) => ["compact", "normal", "comfortable"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const n = [];
return t.row && n.push("form-group--row"), t.spacing === "compact" ? n.push("form-group--spacing-compact") : t.spacing === "comfortable" && n.push("form-group--spacing-comfortable"), n;
});
return (n, r) => (m(), y("div", {
class: T(["form-group", a.value])
}, [
M(n.$slots, "default", {}, void 0, !0)
], 2));
}
}, Zf = /* @__PURE__ */ me(zo, [["__scopeId", "data-v-1f9a4f70"]]), Fo = ({
row: e = !1,
spacing: t = "normal",
// compact | normal | comfortable
className: a = "",
style: n = {},
children: r,
...s
}) => {
const l = [
"form-group",
e && "form-group--row",
t === "compact" && "form-group--spacing-compact",
t === "comfortable" && "form-group--spacing-comfortable",
a
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx("div", { className: l, style: n, ...s, children: r });
};
Fo.displayName = "FormGroup";
const qo = ["id"], Wo = {
__name: "FormHelperText",
props: {
disabled: {
type: Boolean,
default: !1
},
error: {
type: Boolean,
default: !1
},
filled: {
type: Boolean,
default: !1
},
focused: {
type: Boolean,
default: !1
},
margin: {
type: String,
default: "normal",
validator: (e) => ["normal", "dense", "none"].includes(e)
},
required: {
type: Boolean,
default: !1
},
variant: {
type: String,
default: "outlined",
validator: (e) => ["standard", "outlined", "filled"].includes(e)
},
id: {
type: String,
default: void 0
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
setup(e) {
const t = e, a = Le("formControlContext", null), n = C(() => {
const r = [];
t.size === "sm" ? r.push("form-helper-text--size-sm") : t.size === "lg" && r.push("form-helper-text--size-lg"), t.margin === "dense" ? r.push("form-helper-text--margin-dense") : t.margin === "normal" && r.push("form-helper-text--margin-normal");
const s = t.error || (a == null ? void 0 : a.error), l = t.disabled || (a == null ? void 0 : a.disabled);
return s ? r.push("form-helper-text--error") : l && r.push("form-helper-text--disabled"), t.focused && r.push("form-helper-text--focused"), r;
});
return (r, s) => (m(), y("p", {
id: e.id,
class: T(["form-helper-text", n.value])
}, [
M(r.$slots, "default", {}, void 0, !0)
], 10, qo));
}
}, ep = /* @__PURE__ */ me(Wo, [["__scopeId", "data-v-b80fac14"]]), Ho = ({
disabled: e = !1,
error: t = !1,
filled: a = !1,
focused: n = !1,
margin: r = "normal",
// normal | dense | none
required: s = !1,
variant: l = "outlined",
// standard | outlined | filled
id: o,
size: u = "md",
className: i = "",
style: c = {},
children: d,
...p
}) => {
const h = qe(mn) || {}, v = t || h.error, g = e || h.disabled, x = [
"form-helper-text",
u === "sm" && "form-helper-text--size-sm",
u === "lg" && "form-helper-text--size-lg",
r === "dense" && "form-helper-text--margin-dense",
r === "normal" && "form-helper-text--margin-normal",
v && "form-helper-text--error",
g && "form-helper-text--disabled",
n && "form-helper-text--focused",
i
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx("p", { id: o, className: x, style: c, ...p, children: d });
};
Ho.displayName = "FormHelperText";
const tp = {
__name: "Grid",
props: {
container: {
type: Boolean,
default: !1
},
item: {
type: Boolean,
default: !1
},
xs: [Number, String],
sm: [Number, String],
md: [Number, String],
lg: [Number, String],
xl: [Number, String],
spacing: {
type: [Number, String],
default: 0
},
direction: {
type: String,
default: "row",
validator: (e) => ["row", "column", "row-reverse", "column-reverse"].includes(e)
},
justifyContent: {
type: String,
default: "flex-start",
validator: (e) => ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"].includes(e)
},
alignItems: {
type: String,
default: "stretch",
validator: (e) => ["flex-start", "center", "flex-end", "stretch", "baseline"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const n = [];
if (t.container) {
n.push("flex", "flex-wrap");
const r = {
row: "flex-row",
column: "flex-col",
"row-reverse": "flex-row-reverse",
"column-reverse": "flex-col-reverse"
};
n.push(r[t.direction]);
const s = {
"flex-start": "justify-start",
center: "justify-center",
"flex-end": "justify-end",
"space-between": "justify-between",
"space-around": "justify-around",
"space-evenly": "justify-evenly"
};
n.push(s[t.justifyContent]);
const l = {
"flex-start": "items-start",
center: "items-center",
"flex-end": "items-end",
stretch: "items-stretch",
baseline: "items-baseline"
};
if (n.push(l[t.alignItems]), t.spacing > 0) {
const o = t.spacing.toString();
["1", "2", "3", "4", "5", "6", "8", "10", "12"].includes(o) ? n.push(`gap-${o}`) : n.push(`gap-${Math.floor(t.spacing / 4)}`);
}
}
return t.item && (n.push("flex-shrink-0"), Object.entries({ xs: "", sm: "sm:", md: "md:", lg: "lg:", xl: "xl:" }).forEach(([s, l]) => {
const o = t[s];
if (o !== void 0)
if (o === "auto")
n.push(`${l}flex-auto`);
else if (o === !0)
n.push(`${l}flex-1`);
else {
const u = Math.round(o / 12 * 100);
n.push(`${l}w-${u === 100 ? "full" : u === 50 ? "1/2" : u === 25 ? "1/4" : u === 75 ? "3/4" : `[${u}%]`}`);
}
})), n;
});
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
M(n.$slots, "default")
], 2));
}
}, Uo = ({
container: e = !1,
item: t = !1,
xs: a,
sm: n,
md: r,
lg: s,
xl: l,
spacing: o = 0,
direction: u = "row",
justifyContent: i = "flex-start",
alignItems: c = "stretch",
className: d = "",
style: p = {},
children: h,
...v
}) => {
const g = [];
if (e) {
g.push("flex", "flex-wrap");
const x = {
row: "flex-row",
column: "flex-col",
"row-reverse": "flex-row-reverse",
"column-reverse": "flex-col-reverse"
};
g.push(x[u]);
const $ = {
"flex-start": "justify-start",
center: "justify-center",
"flex-end": "justify-end",
"space-between": "justify-between",
"space-around": "justify-around",
"space-evenly": "justify-evenly"
};
g.push($[i]);
const B = {
"flex-start": "items-start",
center: "items-center",
"flex-end": "items-end",
stretch: "items-stretch",
baseline: "items-baseline"
};
if (g.push(B[c]), o > 0) {
const S = o.toString();
["1", "2", "3", "4", "5", "6", "8", "10", "12"].includes(S) ? g.push(`gap-${S}`) : g.push(`gap-${Math.floor(o / 4)}`);
}
}
return t && (g.push("flex-shrink-0"), Object.entries({ xs: "", sm: "sm:", md: "md:", lg: "lg:", xl: "xl:" }).forEach(([$, B]) => {
const S = { xs: a, sm: n, md: r, lg: s, xl: l }[$];
if (S !== void 0)
if (S === "auto")
g.push(`${B}flex-auto`);
else if (S === !0)
g.push(`${B}flex-1`);
else {
const k = Math.round(S / 12 * 100);
g.push(`${B}w-${k === 100 ? "full" : k === 50 ? "1/2" : k === 25 ? "1/4" : k === 75 ? "3/4" : `[${k}%]`}`);
}
})), /* @__PURE__ */ f.jsx("div", { className: [...g, d].filter(Boolean).join(" "), style: p, ...v, children: h });
};
Uo.displayName = "Grid";
const Yo = {
name: "HoverCard",
props: {
triggerText: {
type: String,
default: "Hover me"
},
cardData: {
type: Object,
default: () => ({
title: "Card Title",
description: "This is a preview card that appears on hover.",
image: null,
imageAlt: "",
meta: [],
actions: []
})
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "outlined", "filled", "minimal"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
cardSize: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
},
position: {
type: String,
default: "top",
validator: (e) => ["top", "bottom", "left", "right"].includes(e)
},
delay: {
type: Number,
default: 300
},
hideDelay: {
type: Number,
default: 100
},
showArrow: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
}
},
emits: ["show", "hide", "action"],
setup(e, { emit: t }) {
const a = A(!1), n = A(null), r = A(`hover-card-${Math.random().toString(36).substr(2, 9)}`), s = A(null), l = A(null), o = C(() => ({
zIndex: 1e3
})), u = () => {
e.disabled || (clearTimeout(l.value), s.value = setTimeout(() => {
a.value = !0, t("show");
}, e.delay));
}, i = () => {
e.disabled || (clearTimeout(s.value), l.value = setTimeout(() => {
a.value = !1, t("hide");
}, e.hideDelay));
}, c = (h) => {
h.style.opacity = "0", h.style.transform = "scale(0.95)", lt(() => {
h.style.transition = "opacity 0.2s ease, transform 0.2s ease", h.style.opacity = "1", h.style.transform = "scale(1)";
});
}, d = (h) => {
h.style.transition = "opacity 0.15s ease, transform 0.15s ease", h.style.opacity = "0", h.style.transform = "scale(0.95)";
}, p = (h) => {
t("action", h), h.onClick && h.onClick();
};
return Ze(() => {
clearTimeout(s.value), clearTimeout(l.value);
}), {
isVisible: a,
cardRef: n,
triggerId: r,
cardStyle: o,
showCard: u,
hideCard: i,
onEnter: c,
onLeave: d,
handleAction: p
};
}
}, Go = { class: "hover-card-trigger" }, Ko = ["aria-describedby"], Jo = { class: "hover-card-content" }, Xo = {
key: 0,
class: "hover-card-image"
}, Qo = ["src", "alt"], Zo = { class: "hover-card-body" }, ei = {
key: 0,
class: "hover-card-title"
}, ti = {
key: 1,
class: "hover-card-description"
}, ai = {
key: 2,
class: "hover-card-meta"
}, ni = {
key: 3,
class: "hover-card-actions"
}, ri = ["onClick"];
function si(e, t, a, n, r, s) {
return m(), y("div", {
class: T(["hover-card-container", [
`hover-card-${a.variant}`,
`hover-card-size-${a.size}`,
a.disabled && "hover-card-disabled"
]]),
onMouseenter: t[0] || (t[0] = (...l) => n.showCard && n.showCard(...l)),
onMouseleave: t[1] || (t[1] = (...l) => n.hideCard && n.hideCard(...l)),
onTouchstart: t[2] || (t[2] = (...l) => n.showCard && n.showCard(...l)),
onTouchend: t[3] || (t[3] = (...l) => n.hideCard && n.hideCard(...l))
}, [
_("span", Go, [
M(e.$slots, "default", {}, () => [
he(I(a.triggerText), 1)
], !0)
]),
Ge(Ke, {
name: "hover-card-transition",
onEnter: n.onEnter,
onLeave: n.onLeave
}, {
default: je(() => [
n.isVisible ? (m(), y("div", {
key: 0,
ref: "cardRef",
class: T(["hover-card-popup", [
`hover-card-position-${a.position}`,
`hover-card-card-size-${a.cardSize}`
]]),
style: ce(n.cardStyle),
role: "tooltip",
"aria-describedby": n.triggerId
}, [
a.showArrow ? (m(), y("div", {
key: 0,
class: T(["hover-card-arrow", `hover-card-arrow-${a.position}`])
}, null, 2)) : j("", !0),
_("div", Jo, [
M(e.$slots, "card", { data: a.cardData }, () => [
a.cardData.image ? (m(), y("div", Xo, [
_("img", {
src: a.cardData.image,
alt: a.cardData.imageAlt || a.cardData.title
}, null, 8, Qo)
])) : j("", !0),
_("div", Zo, [
a.cardData.title ? (m(), y("h3", ei, I(a.cardData.title), 1)) : j("", !0),
a.cardData.description ? (m(), y("p", ti, I(a.cardData.description), 1)) : j("", !0),
a.cardData.meta ? (m(), y("div", ai, [
(m(!0), y(ke, null, Ce(a.cardData.meta, (l, o) => (m(), y("span", {
key: o,
class: "hover-card-meta-item"
}, I(l), 1))), 128))
])) : j("", !0),
a.cardData.actions ? (m(), y("div", ni, [
(m(!0), y(ke, null, Ce(a.cardData.actions, (l, o) => (m(), y("button", {
key: o,
class: "hover-card-action-btn",
onClick: (u) => n.handleAction(l)
}, I(l.label), 9, ri))), 128))
])) : j("", !0)
])
], !0)
])
], 14, Ko)) : j("", !0)
]),
_: 3
}, 8, ["onEnter", "onLeave"])
], 34);
}
const ap = /* @__PURE__ */ me(Yo, [["render", si], ["__scopeId", "data-v-1324702d"]]), li = ({
triggerText: e = "Hover me",
cardData: t = {},
variant: a = "default",
// default | outlined | filled | minimal
size: n = "md",
// sm | md | lg
cardSize: r = "md",
// sm | md | lg | xl
position: s = "top",
// top | bottom | left | right
delay: l = 300,
hideDelay: o = 100,
showArrow: u = !0,
disabled: i = !1,
onShow: c,
onHide: d,
onAction: p,
className: h = "",
style: v = {},
children: g,
card: x,
...$
}) => {
var q, ne;
const [B, S] = te(!1), k = Te(null), w = Te(null), E = Te(null), W = Te(`hover-card-${Math.random().toString(36).substr(2, 9)}`), R = () => {
clearTimeout(k.current), clearTimeout(w.current);
}, Y = () => {
i || (R(), k.current = setTimeout(() => {
S(!0), c == null || c();
}, l));
}, N = () => {
i || (R(), w.current = setTimeout(() => {
S(!1), d == null || d();
}, o));
};
ve(() => () => R(), []);
const O = (V) => {
var K;
p == null || p(V), (K = V == null ? void 0 : V.onClick) == null || K.call(V);
}, H = [
"hover-card-container",
`hover-card-${a}`,
`hover-card-size-${n}`,
i && "hover-card-disabled",
h
].filter(Boolean).join(" "), Q = [
"hover-card-popup",
`hover-card-position-${s}`,
`hover-card-card-size-${r}`
].join(" ");
return /* @__PURE__ */ f.jsxs(
"div",
{
className: H,
onMouseEnter: Y,
onMouseLeave: N,
onTouchStart: Y,
onTouchEnd: N,
style: v,
...$,
children: [
/* @__PURE__ */ f.jsx("span", { className: "hover-card-trigger", children: g || e }),
B && /* @__PURE__ */ f.jsxs(
"div",
{
ref: E,
className: Q,
style: { zIndex: 1e3 },
role: "tooltip",
"aria-describedby": W.current,
children: [
u && /* @__PURE__ */ f.jsx("div", { className: `hover-card-arrow hover-card-arrow-${s}` }),
/* @__PURE__ */ f.jsx("div", { className: "hover-card-content", children: x ? typeof x == "function" ? x(t) : x : /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
t.image && /* @__PURE__ */ f.jsx("div", { className: "hover-card-image", children: /* @__PURE__ */ f.jsx("img", { src: t.image, alt: t.imageAlt || t.title }) }),
/* @__PURE__ */ f.jsxs("div", { className: "hover-card-body", children: [
t.title && /* @__PURE__ */ f.jsx("h3", { className: "hover-card-title", children: t.title }),
t.description && /* @__PURE__ */ f.jsx("p", { className: "hover-card-description", children: t.description }),
((q = t.meta) == null ? void 0 : q.length) && /* @__PURE__ */ f.jsx("div", { className: "hover-card-meta", children: t.meta.map((V, K) => /* @__PURE__ */ f.jsx("span", { className: "hover-card-meta-item", children: V }, K)) }),
((ne = t.actions) == null ? void 0 : ne.length) && /* @__PURE__ */ f.jsx("div", { className: "hover-card-actions", children: t.actions.map((V, K) => /* @__PURE__ */ f.jsx(
"button",
{
className: "hover-card-action-btn",
onClick: () => O(V),
children: V.label
},
K
)) })
] })
] }) })
]
}
)
]
}
);
};
li.displayName = "HoverCard";
const oi = ["innerHTML"], ii = ["innerHTML"], ci = {
__name: "Icon",
props: {
// Icon库和名称
library: {
type: String,
default: "lucide",
validator: (e) => ["lucide", "heroicons", "tabler", "phosphor", "feather", "html"].includes(e)
},
name: {
type: String,
default: ""
},
// HTML图标（用于自定义SVG或字体图标）
html: {
type: String,
default: ""
},
// 尺寸
size: {
type: [String, Number],
default: 24
},
// 颜色
color: {
type: String,
default: "currentColor"
},
// 描边宽度（适用于支持的图标库）
strokeWidth: {
type: [String, Number],
default: 2
},
// 样式变体（适用于heroicons）
variant: {
type: String,
default: "outline",
validator: (e) => ["outline", "solid", "mini"].includes(e)
},
// 自定义CSS类
className: {
type: String,
default: ""
}
},
setup(e) {
const t = e, a = C(() => {
if (!t.name) return null;
try {
switch (t.library) {
case "lucide":
return jt(
() => import("lucide-vue-next").then((i) => {
const c = t.name.charAt(0).toUpperCase() + t.name.slice(1);
return i[c] || i.HelpCircle;
})
);
case "heroicons":
return console.warn("Heroicons support is currently disabled due to build constraints"), null;
case "tabler":
return jt(
() => import("@tabler/icons-vue").then((i) => {
const c = "Icon" + t.name.split("-").map(
(d) => d.charAt(0).toUpperCase() + d.slice(1)
).join("");
return i[c] || i.IconHelp;
})
);
case "phosphor":
return jt(
() => import("@phosphor-icons/vue").then((i) => {
const c = "Ph" + t.name.split("-").map(
(d) => d.charAt(0).toUpperCase() + d.slice(1)
).join("");
return i[c] || i.PhQuestion;
})
);
default:
return null;
}
} catch {
return console.warn(`Icon "${t.name}" not found in library "${t.library}"`), null;
}
}), n = C(() => t.library === "html" && t.html ? t.html : ""), r = A("");
ir(async () => {
var i;
if (t.library === "feather" && t.name)
try {
const c = await import("feather-icons"), d = c.default || c, p = l(t.size);
r.value = ((i = d.icons[t.name]) == null ? void 0 : i.toSvg({
width: p,
height: p,
"stroke-width": t.strokeWidth
})) || "";
} catch {
console.warn(`Feather icon "${t.name}" not found`), r.value = "";
}
else
r.value = "";
});
const s = C(() => {
const i = ["wc-icon"];
return t.className && i.push(t.className), i;
}), l = (i) => typeof i == "number" ? i : {
xs: 16,
sm: 20,
md: 24,
lg: 32,
xl: 48
}[i] || parseInt(i) || 24, o = C(() => {
const i = {};
if (t.color && t.color !== "currentColor" && (i.color = t.color), t.size) {
const c = l(t.size);
i.width = `${c}px`, i.height = `${c}px`;
}
return i;
}), u = C(() => {
const c = {
size: l(t.size),
color: t.color
};
return t.library === "lucide" && (c.strokeWidth = t.strokeWidth), t.library === "tabler" && (c.stroke = t.strokeWidth), c;
});
return (i, c) => a.value ? (m(), Se(ze(a.value), ot({
key: 0,
class: s.value,
style: o.value
}, u.value), null, 16, ["class", "style"])) : r.value ? (m(), y("span", {
key: 1,
class: T(s.value),
style: ce(o.value),
innerHTML: r.value
}, null, 14, oi)) : n.value ? (m(), y("span", {
key: 2,
class: T(s.value),
style: ce(o.value),
innerHTML: n.value
}, null, 14, ii)) : (m(), y("span", {
key: 3,
class: T(s.value),
style: ce(o.value)
}, [
M(i.$slots, "default", {}, void 0, !0)
], 6));
}
}, np = /* @__PURE__ */ me(ci, [["__scopeId", "data-v-135f7b18"]]);
var ht = { exports: {} }, vt = { exports: {} }, fe = {};
/** @license React v16.13.1
* react-is.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ma;
function ui() {
if (ma) return fe;
ma = 1;
var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, a = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, r = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, l = e ? Symbol.for("react.provider") : 60109, o = e ? Symbol.for("react.context") : 60110, u = e ? Symbol.for("react.async_mode") : 60111, i = e ? Symbol.for("react.concurrent_mode") : 60111, c = e ? Symbol.for("react.forward_ref") : 60112, d = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, h = e ? Symbol.for("react.memo") : 60115, v = e ? Symbol.for("react.lazy") : 60116, g = e ? Symbol.for("react.block") : 60121, x = e ? Symbol.for("react.fundamental") : 60117, $ = e ? Symbol.for("react.responder") : 60118, B = e ? Symbol.for("react.scope") : 60119;
function S(w) {
if (typeof w == "object" && w !== null) {
var E = w.$$typeof;
switch (E) {
case t:
switch (w = w.type, w) {
case u:
case i:
case n:
case s:
case r:
case d:
return w;
default:
switch (w = w && w.$$typeof, w) {
case o:
case c:
case v:
case h:
case l:
return w;
default:
return E;
}
}
case a:
return E;
}
}
}
function k(w) {
return S(w) === i;
}
return fe.AsyncMode = u, fe.ConcurrentMode = i, fe.ContextConsumer = o, fe.ContextProvider = l, fe.Element = t, fe.ForwardRef = c, fe.Fragment = n, fe.Lazy = v, fe.Memo = h, fe.Portal = a, fe.Profiler = s, fe.StrictMode = r, fe.Suspense = d, fe.isAsyncMode = function(w) {
return k(w) || S(w) === u;
}, fe.isConcurrentMode = k, fe.isContextConsumer = function(w) {
return S(w) === o;
}, fe.isContextProvider = function(w) {
return S(w) === l;
}, fe.isElement = function(w) {
return typeof w == "object" && w !== null && w.$$typeof === t;
}, fe.isForwardRef = function(w) {
return S(w) === c;
}, fe.isFragment = function(w) {
return S(w) === n;
}, fe.isLazy = function(w) {
return S(w) === v;
}, fe.isMemo = function(w) {
return S(w) === h;
}, fe.isPortal = function(w) {
return S(w) === a;
}, fe.isProfiler = function(w) {
return S(w) === s;
}, fe.isStrictMode = function(w) {
return S(w) === r;
}, fe.isSuspense = function(w) {
return S(w) === d;
}, fe.isValidElementType = function(w) {
return typeof w == "string" || typeof w == "function" || w === n || w === i || w === s || w === r || w === d || w === p || typeof w == "object" && w !== null && (w.$$typeof === v || w.$$typeof === h || w.$$typeof === l || w.$$typeof === o || w.$$typeof === c || w.$$typeof === x || w.$$typeof === $ || w.$$typeof === B || w.$$typeof === g);
}, fe.typeOf = S, fe;
}
var pe = {};
/** @license React v16.13.1
* react-is.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ha;
function di() {
return ha || (ha = 1, process.env.NODE_ENV !== "production" && function() {
var e = typeof Symbol == "function" && Symbol.for, t = e ? Symbol.for("react.element") : 60103, a = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, r = e ? Symbol.for("react.strict_mode") : 60108, s = e ? Symbol.for("react.profiler") : 60114, l = e ? Symbol.for("react.provider") : 60109, o = e ? Symbol.for("react.context") : 60110, u = e ? Symbol.for("react.async_mode") : 60111, i = e ? Symbol.for("react.concurrent_mode") : 60111, c = e ? Symbol.for("react.forward_ref") : 60112, d = e ? Symbol.for("react.suspense") : 60113, p = e ? Symbol.for("react.suspense_list") : 60120, h = e ? Symbol.for("react.memo") : 60115, v = e ? Symbol.for("react.lazy") : 60116, g = e ? Symbol.for("react.block") : 60121, x = e ? Symbol.for("react.fundamental") : 60117, $ = e ? Symbol.for("react.responder") : 60118, B = e ? Symbol.for("react.scope") : 60119;
function S(L) {
return typeof L == "string" || typeof L == "function" || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
L === n || L === i || L === s || L === r || L === d || L === p || typeof L == "object" && L !== null && (L.$$typeof === v || L.$$typeof === h || L.$$typeof === l || L.$$typeof === o || L.$$typeof === c || L.$$typeof === x || L.$$typeof === $ || L.$$typeof === B || L.$$typeof === g);
}
function k(L) {
if (typeof L == "object" && L !== null) {
var De = L.$$typeof;
switch (De) {
case t:
var Je = L.type;
switch (Je) {
case u:
case i:
case n:
case s:
case r:
case d:
return Je;
default:
var Ue = Je && Je.$$typeof;
switch (Ue) {
case o:
case c:
case v:
case h:
case l:
return Ue;
default:
return De;
}
}
case a:
return De;
}
}
}
var w = u, E = i, W = o, R = l, Y = t, N = c, O = n, H = v, Q = h, q = a, ne = s, V = r, K = d, ge = !1;
function oe(L) {
return ge || (ge = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), P(L) || k(L) === u;
}
function P(L) {
return k(L) === i;
}
function z(L) {
return k(L) === o;
}
function Z(L) {
return k(L) === l;
}
function U(L) {
return typeof L == "object" && L !== null && L.$$typeof === t;
}
function J(L) {
return k(L) === c;
}
function re(L) {
return k(L) === n;
}
function ee(L) {
return k(L) === v;
}
function ae(L) {
return k(L) === h;
}
function se(L) {
return k(L) === a;
}
function G(L) {
return k(L) === s;
}
function le(L) {
return k(L) === r;
}
function $e(L) {
return k(L) === d;
}
pe.AsyncMode = w, pe.ConcurrentMode = E, pe.ContextConsumer = W, pe.ContextProvider = R, pe.Element = Y, pe.ForwardRef = N, pe.Fragment = O, pe.Lazy = H, pe.Memo = Q, pe.Portal = q, pe.Profiler = ne, pe.StrictMode = V, pe.Suspense = K, pe.isAsyncMode = oe, pe.isConcurrentMode = P, pe.isContextConsumer = z, pe.isContextProvider = Z, pe.isElement = U, pe.isForwardRef = J, pe.isFragment = re, pe.isLazy = ee, pe.isMemo = ae, pe.isPortal = se, pe.isProfiler = G, pe.isStrictMode = le, pe.isSuspense = $e, pe.isValidElementType = S, pe.typeOf = k;
}()), pe;
}
var va;
function hn() {
return va || (va = 1, process.env.NODE_ENV === "production" ? vt.exports = ui() : vt.exports = di()), vt.exports;
}
/*
object-assign
(c) Sindre Sorhus
@license MIT
*/
var Nt, ya;
function fi() {
if (ya) return Nt;
ya = 1;
var e = Object.getOwnPropertySymbols, t = Object.prototype.hasOwnProperty, a = Object.prototype.propertyIsEnumerable;
function n(s) {
if (s == null)
throw new TypeError("Object.assign cannot be called with null or undefined");
return Object(s);
}
function r() {
try {
if (!Object.assign)
return !1;
var s = new String("abc");
if (s[5] = "de", Object.getOwnPropertyNames(s)[0] === "5")
return !1;
for (var l = {}, o = 0; o < 10; o++)
l["_" + String.fromCharCode(o)] = o;
var u = Object.getOwnPropertyNames(l).map(function(c) {
return l[c];
});
if (u.join("") !== "0123456789")
return !1;
var i = {};
return "abcdefghijklmnopqrst".split("").forEach(function(c) {
i[c] = c;
}), Object.keys(Object.assign({}, i)).join("") === "abcdefghijklmnopqrst";
} catch {
return !1;
}
}
return Nt = r() ? Object.assign : function(s, l) {
for (var o, u = n(s), i, c = 1; c < arguments.length; c++) {
o = Object(arguments[c]);
for (var d in o)
t.call(o, d) && (u[d] = o[d]);
if (e) {
i = e(o);
for (var p = 0; p < i.length; p++)
a.call(o, i[p]) && (u[i[p]] = o[i[p]]);
}
}
return u;
}, Nt;
}
var Tt, ga;
function At() {
if (ga) return Tt;
ga = 1;
var e = "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";
return Tt = e, Tt;
}
var Et, ba;
function vn() {
return ba || (ba = 1, Et = Function.call.bind(Object.prototype.hasOwnProperty)), Et;
}
var It, wa;
function pi() {
if (wa) return It;
wa = 1;
var e = function() {
};
if (process.env.NODE_ENV !== "production") {
var t = /* @__PURE__ */ At(), a = {}, n = /* @__PURE__ */ vn();
e = function(s) {
var l = "Warning: " + s;
typeof console < "u" && console.error(l);
try {
throw new Error(l);
} catch {
}
};
}
function r(s, l, o, u, i) {
if (process.env.NODE_ENV !== "production") {
for (var c in s)
if (n(s, c)) {
var d;
try {
if (typeof s[c] != "function") {
var p = Error(
(u || "React class") + ": " + o + " type `" + c + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof s[c] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`."
);
throw p.name = "Invariant Violation", p;
}
d = s[c](l, c, u, o, null, t);
} catch (v) {
d = v;
}
if (d && !(d instanceof Error) && e(
(u || "React class") + ": type specification of " + o + " `" + c + "` is invalid; the type checker function must return `null` or an `Error` but returned a " + typeof d + ". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."
), d instanceof Error && !(d.message in a)) {
a[d.message] = !0;
var h = i ? i() : "";
e(
"Failed " + o + " type: " + d.message + (h ?? "")
);
}
}
}
}
return r.resetWarningCache = function() {
process.env.NODE_ENV !== "production" && (a = {});
}, It = r, It;
}
var Bt, xa;
function mi() {
if (xa) return Bt;
xa = 1;
var e = hn(), t = fi(), a = /* @__PURE__ */ At(), n = /* @__PURE__ */ vn(), r = /* @__PURE__ */ pi(), s = function() {
};
process.env.NODE_ENV !== "production" && (s = function(o) {
var u = "Warning: " + o;
typeof console < "u" && console.error(u);
try {
throw new Error(u);
} catch {
}
});
function l() {
return null;
}
return Bt = function(o, u) {
var i = typeof Symbol == "function" && Symbol.iterator, c = "@@iterator";
function d(P) {
var z = P && (i && P[i] || P[c]);
if (typeof z == "function")
return z;
}
var p = "<<anonymous>>", h = {
array: $("array"),
bigint: $("bigint"),
bool: $("boolean"),
func: $("function"),
number: $("number"),
object: $("object"),
string: $("string"),
symbol: $("symbol"),
any: B(),
arrayOf: S,
element: k(),
elementType: w(),
instanceOf: E,
node: N(),
objectOf: R,
oneOf: W,
oneOfType: Y,
shape: H,
exact: Q
};
function v(P, z) {
return P === z ? P !== 0 || 1 / P === 1 / z : P !== P && z !== z;
}
function g(P, z) {
this.message = P, this.data = z && typeof z == "object" ? z : {}, this.stack = "";
}
g.prototype = Error.prototype;
function x(P) {
if (process.env.NODE_ENV !== "production")
var z = {}, Z = 0;
function U(re, ee, ae, se, G, le, $e) {
if (se = se || p, le = le || ae, $e !== a) {
if (u) {
var L = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types"
);
throw L.name = "Invariant Violation", L;
} else if (process.env.NODE_ENV !== "production" && typeof console < "u") {
var De = se + ":" + ae;
!z[De] && // Avoid spamming the console because they are often not actionable except for lib authors
Z < 3 && (s(
"You are manually calling a React.PropTypes validation function for the `" + le + "` prop on `" + se + "`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."
), z[De] = !0, Z++);
}
}
return ee[ae] == null ? re ? ee[ae] === null ? new g("The " + G + " `" + le + "` is marked as required " + ("in `" + se + "`, but its value is `null`.")) : new g("The " + G + " `" + le + "` is marked as required in " + ("`" + se + "`, but its value is `undefined`.")) : null : P(ee, ae, se, G, le);
}
var J = U.bind(null, !1);
return J.isRequired = U.bind(null, !0), J;
}
function $(P) {
function z(Z, U, J, re, ee, ae) {
var se = Z[U], G = V(se);
if (G !== P) {
var le = K(se);
return new g(
"Invalid " + re + " `" + ee + "` of type " + ("`" + le + "` supplied to `" + J + "`, expected ") + ("`" + P + "`."),
{ expectedType: P }
);
}
return null;
}
return x(z);
}
function B() {
return x(l);
}
function S(P) {
function z(Z, U, J, re, ee) {
if (typeof P != "function")
return new g("Property `" + ee + "` of component `" + J + "` has invalid PropType notation inside arrayOf.");
var ae = Z[U];
if (!Array.isArray(ae)) {
var se = V(ae);
return new g("Invalid " + re + " `" + ee + "` of type " + ("`" + se + "` supplied to `" + J + "`, expected an array."));
}
for (var G = 0; G < ae.length; G++) {
var le = P(ae, G, J, re, ee + "[" + G + "]", a);
if (le instanceof Error)
return le;
}
return null;
}
return x(z);
}
function k() {
function P(z, Z, U, J, re) {
var ee = z[Z];
if (!o(ee)) {
var ae = V(ee);
return new g("Invalid " + J + " `" + re + "` of type " + ("`" + ae + "` supplied to `" + U + "`, expected a single ReactElement."));
}
return null;
}
return x(P);
}
function w() {
function P(z, Z, U, J, re) {
var ee = z[Z];
if (!e.isValidElementType(ee)) {
var ae = V(ee);
return new g("Invalid " + J + " `" + re + "` of type " + ("`" + ae + "` supplied to `" + U + "`, expected a single ReactElement type."));
}
return null;
}
return x(P);
}
function E(P) {
function z(Z, U, J, re, ee) {
if (!(Z[U] instanceof P)) {
var ae = P.name || p, se = oe(Z[U]);
return new g("Invalid " + re + " `" + ee + "` of type " + ("`" + se + "` supplied to `" + J + "`, expected ") + ("instance of `" + ae + "`."));
}
return null;
}
return x(z);
}
function W(P) {
if (!Array.isArray(P))
return process.env.NODE_ENV !== "production" && (arguments.length > 1 ? s(
"Invalid arguments supplied to oneOf, expected an array, got " + arguments.length + " arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."
) : s("Invalid argument supplied to oneOf, expected an array.")), l;
function z(Z, U, J, re, ee) {
for (var ae = Z[U], se = 0; se < P.length; se++)
if (v(ae, P[se]))
return null;
var G = JSON.stringify(P, function($e, L) {
var De = K(L);
return De === "symbol" ? String(L) : L;
});
return new g("Invalid " + re + " `" + ee + "` of value `" + String(ae) + "` " + ("supplied to `" + J + "`, expected one of " + G + "."));
}
return x(z);
}
function R(P) {
function z(Z, U, J, re, ee) {
if (typeof P != "function")
return new g("Property `" + ee + "` of component `" + J + "` has invalid PropType notation inside objectOf.");
var ae = Z[U], se = V(ae);
if (se !== "object")
return new g("Invalid " + re + " `" + ee + "` of type " + ("`" + se + "` supplied to `" + J + "`, expected an object."));
for (var G in ae)
if (n(ae, G)) {
var le = P(ae, G, J, re, ee + "." + G, a);
if (le instanceof Error)
return le;
}
return null;
}
return x(z);
}
function Y(P) {
if (!Array.isArray(P))
return process.env.NODE_ENV !== "production" && s("Invalid argument supplied to oneOfType, expected an instance of array."), l;
for (var z = 0; z < P.length; z++) {
var Z = P[z];
if (typeof Z != "function")
return s(
"Invalid argument supplied to oneOfType. Expected an array of check functions, but received " + ge(Z) + " at index " + z + "."
), l;
}
function U(J, re, ee, ae, se) {
for (var G = [], le = 0; le < P.length; le++) {
var $e = P[le], L = $e(J, re, ee, ae, se, a);
if (L == null)
return null;
L.data && n(L.data, "expectedType") && G.push(L.data.expectedType);
}
var De = G.length > 0 ? ", expected one of type [" + G.join(", ") + "]" : "";
return new g("Invalid " + ae + " `" + se + "` supplied to " + ("`" + ee + "`" + De + "."));
}
return x(U);
}
function N() {
function P(z, Z, U, J, re) {
return q(z[Z]) ? null : new g("Invalid " + J + " `" + re + "` supplied to " + ("`" + U + "`, expected a ReactNode."));
}
return x(P);
}
function O(P, z, Z, U, J) {
return new g(
(P || "React class") + ": " + z + " type `" + Z + "." + U + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + J + "`."
);
}
function H(P) {
function z(Z, U, J, re, ee) {
var ae = Z[U], se = V(ae);
if (se !== "object")
return new g("Invalid " + re + " `" + ee + "` of type `" + se + "` " + ("supplied to `" + J + "`, expected `object`."));
for (var G in P) {
var le = P[G];
if (typeof le != "function")
return O(J, re, ee, G, K(le));
var $e = le(ae, G, J, re, ee + "." + G, a);
if ($e)
return $e;
}
return null;
}
return x(z);
}
function Q(P) {
function z(Z, U, J, re, ee) {
var ae = Z[U], se = V(ae);
if (se !== "object")
return new g("Invalid " + re + " `" + ee + "` of type `" + se + "` " + ("supplied to `" + J + "`, expected `object`."));
var G = t({}, Z[U], P);
for (var le in G) {
var $e = P[le];
if (n(P, le) && typeof $e != "function")
return O(J, re, ee, le, K($e));
if (!$e)
return new g(
"Invalid " + re + " `" + ee + "` key `" + le + "` supplied to `" + J + "`.\nBad object: " + JSON.stringify(Z[U], null, " ") + `
Valid keys: ` + JSON.stringify(Object.keys(P), null, " ")
);
var L = $e(ae, le, J, re, ee + "." + le, a);
if (L)
return L;
}
return null;
}
return x(z);
}
function q(P) {
switch (typeof P) {
case "number":
case "string":
case "undefined":
return !0;
case "boolean":
return !P;
case "object":
if (Array.isArray(P))
return P.every(q);
if (P === null || o(P))
return !0;
var z = d(P);
if (z) {
var Z = z.call(P), U;
if (z !== P.entries) {
for (; !(U = Z.next()).done; )
if (!q(U.value))
return !1;
} else
for (; !(U = Z.next()).done; ) {
var J = U.value;
if (J && !q(J[1]))
return !1;
}
} else
return !1;
return !0;
default:
return !1;
}
}
function ne(P, z) {
return P === "symbol" ? !0 : z ? z["@@toStringTag"] === "Symbol" || typeof Symbol == "function" && z instanceof Symbol : !1;
}
function V(P) {
var z = typeof P;
return Array.isArray(P) ? "array" : P instanceof RegExp ? "object" : ne(z, P) ? "symbol" : z;
}
function K(P) {
if (typeof P > "u" || P === null)
return "" + P;
var z = V(P);
if (z === "object") {
if (P instanceof Date)
return "date";
if (P instanceof RegExp)
return "regexp";
}
return z;
}
function ge(P) {
var z = K(P);
switch (z) {
case "array":
case "object":
return "an " + z;
case "boolean":
case "date":
case "regexp":
return "a " + z;
default:
return z;
}
}
function oe(P) {
return !P.constructor || !P.constructor.name ? p : P.constructor.name;
}
return h.checkPropTypes = r, h.resetWarningCache = r.resetWarningCache, h.PropTypes = h, h;
}, Bt;
}
var Rt, ka;
function hi() {
if (ka) return Rt;
ka = 1;
var e = /* @__PURE__ */ At();
function t() {
}
function a() {
}
return a.resetWarningCache = t, Rt = function() {
function n(l, o, u, i, c, d) {
if (d !== e) {
var p = new Error(
"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types"
);
throw p.name = "Invariant Violation", p;
}
}
n.isRequired = n;
function r() {
return n;
}
var s = {
array: n,
bigint: n,
bool: n,
func: n,
number: n,
object: n,
string: n,
symbol: n,
any: n,
arrayOf: r,
element: n,
elementType: n,
instanceOf: r,
node: n,
objectOf: r,
oneOf: r,
oneOfType: r,
shape: r,
exact: r,
checkPropTypes: a,
resetWarningCache: t
};
return s.PropTypes = s, s;
}, Rt;
}
var _a;
function vi() {
if (_a) return ht.exports;
if (_a = 1, process.env.NODE_ENV !== "production") {
var e = hn(), t = !0;
ht.exports = /* @__PURE__ */ mi()(e.isElement, t);
} else
ht.exports = /* @__PURE__ */ hi()();
return ht.exports;
}
var yi = /* @__PURE__ */ vi();
const Be = /* @__PURE__ */ gr(yi), gi = (e, t, a) => {
switch (e) {
case "lucide":
return yt(
() => import("lucide-react").then((n) => {
const r = t.charAt(0).toUpperCase() + t.slice(1);
return { default: n[r] || n.HelpCircle };
})
);
case "heroicons":
return console.warn("Heroicons support is currently disabled due to build constraints"), null;
case "tabler":
return yt(
() => import("@tabler/icons-react").then((n) => {
const r = "Icon" + t.split("-").map(
(s) => s.charAt(0).toUpperCase() + s.slice(1)
).join("");
return { default: n[r] || n.IconHelp };
})
);
case "phosphor":
return yt(
() => import("@phosphor-icons/react").then((n) => {
const r = t.split("-").map(
(s) => s.charAt(0).toUpperCase() + s.slice(1)
).join("");
return { default: n[r] || n.Question };
})
);
default:
return null;
}
}, Pt = (e) => typeof e == "number" ? e : {
xs: 16,
sm: 20,
md: 24,
lg: 32,
xl: 48
}[e] || parseInt(e) || 24, bi = ({
library: e = "lucide",
name: t = "",
html: a = "",
size: n = 24,
color: r = "currentColor",
strokeWidth: s = 2,
variant: l = "outline",
className: o = "",
children: u,
...i
}) => {
const c = Oe(() => {
if (!t) return null;
try {
return gi(e, t, l);
} catch {
return console.warn(`Icon "${t}" not found in library "${e}"`), null;
}
}, [e, t, l]), d = Oe(() => e === "feather" && t ? yt(async () => {
var x;
try {
const $ = await import("feather-icons"), B = $.default || $, S = Pt(n), k = ((x = B.icons[t]) == null ? void 0 : x.toSvg({
width: S,
height: S,
"stroke-width": s
})) || "";
return {
default: ({ className: w, style: E }) => /* @__PURE__ */ f.jsx(
"span",
{
className: w,
style: E,
dangerouslySetInnerHTML: { __html: k }
}
)
};
} catch {
return console.warn(`Feather icon "${t}" not found`), { default: () => /* @__PURE__ */ f.jsx("span", {}) };
}
}) : null, [e, t, n, s]), p = Oe(() => e === "html" && a ? a : "", [e, a]), h = Oe(() => {
const x = {};
if (r && r !== "currentColor" && (x.color = r), n) {
const $ = Pt(n);
x.width = `${$}px`, x.height = `${$}px`;
}
return x;
}, [r, n]), v = Oe(() => {
const $ = {
size: Pt(n),
color: r,
...i
};
return e === "lucide" && ($.strokeWidth = s), e === "tabler" && ($.stroke = s), $;
}, [e, n, r, s, i]), g = `wc-icon ${o}`.trim();
return d ? /* @__PURE__ */ f.jsx(aa, { fallback: /* @__PURE__ */ f.jsx("span", { className: g, style: h }), children: /* @__PURE__ */ f.jsx(
d,
{
className: g,
style: h
}
) }) : c ? /* @__PURE__ */ f.jsx(aa, { fallback: /* @__PURE__ */ f.jsx("span", { className: g, style: h }), children: /* @__PURE__ */ f.jsx(
c,
{
className: g,
style: h,
...v
}
) }) : p ? /* @__PURE__ */ f.jsx(
"span",
{
className: g,
style: h,
dangerouslySetInnerHTML: { __html: p }
}
) : /* @__PURE__ */ f.jsx("span", { className: g, style: h, children: u });
};
bi.propTypes = {
library: Be.oneOf(["lucide", "heroicons", "tabler", "phosphor", "feather", "html"]),
name: Be.string,
html: Be.string,
size: Be.oneOfType([Be.string, Be.number]),
color: Be.string,
strokeWidth: Be.oneOfType([Be.string, Be.number]),
variant: Be.oneOf(["outline", "solid", "mini"]),
className: Be.string,
children: Be.node
};
const wi = ["disabled"], xi = { class: "icon-button-icon" }, ki = ["innerHTML"], _i = {
__name: "IconButton",
props: {
color: {
type: String,
default: "default",
validator: (e) => ["default", "primary", "secondary", "error", "warning", "info", "success"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
edge: {
type: String,
default: !1,
validator: (e) => [!1, "start", "end"].includes(e)
},
disabled: {
type: Boolean,
default: !1
},
icon: {
type: String,
default: ""
}
},
emits: ["click"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(!1), s = C(() => {
const i = ["wc-icon-button"];
return i.push(`wc-icon-button--${a.color}`), i.push(`wc-icon-button--${a.size}`), a.edge && i.push(`wc-icon-button--edge-${a.edge}`), a.disabled && i.push("wc-icon-button--disabled"), r.value && i.push("wc-icon-button--focused"), i;
}), l = (i) => {
a.disabled || n("click", i);
}, o = () => {
r.value = !0;
}, u = () => {
r.value = !1;
};
return (i, c) => (m(), y("button", {
class: T(s.value),
disabled: e.disabled,
onClick: l,
onFocus: o,
onBlur: u
}, [
_("span", xi, [
M(i.$slots, "default", {}, () => [
e.icon ? (m(), y("span", {
key: 0,
innerHTML: e.icon
}, null, 8, ki)) : j("", !0)
], !0)
])
], 42, wi));
}
}, rp = /* @__PURE__ */ me(_i, [["__scopeId", "data-v-8a067fed"]]), Ci = {
name: "ImageGallery",
props: {
images: {
type: Array,
default: () => []
},
title: {
type: String,
default: ""
},
layout: {
type: String,
default: "grid",
validator: (e) => ["grid", "masonry", "carousel"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
},
columns: {
type: Number,
default: 3
},
gap: {
type: Number,
default: 16
},
showInfo: {
type: Boolean,
default: !0
},
showCount: {
type: Boolean,
default: !0
},
showDownload: {
type: Boolean,
default: !1
},
showPagination: {
type: Boolean,
default: !1
},
itemsPerPage: {
type: Number,
default: 12
},
lazyLoad: {
type: Boolean,
default: !0
},
loading: {
type: Boolean,
default: !1
}
},
emits: ["select", "download", "lightbox-open", "lightbox-close"],
setup(e, { emit: t }) {
const a = A(-1), n = A(!1), r = A(0), s = A(1), l = A({}), o = C(() => ({
gridTemplateColumns: `repeat(${e.columns}, 1fr)`,
gap: `${e.gap}px`
})), u = C(() => e.showPagination ? Math.ceil(e.images.length / e.itemsPerPage) : 1), i = C(() => {
if (!e.showPagination) return e.images;
const w = (s.value - 1) * e.itemsPerPage, E = w + e.itemsPerPage;
return e.images.slice(w, E);
}), c = C(() => e.images[r.value]), d = (w) => {
a.value = w, t("select", { index: w, image: e.images[w] });
}, p = (w) => {
r.value = w, n.value = !0, t("lightbox-open", { index: w, image: e.images[w] }), document.body.style.overflow = "hidden";
}, h = () => {
n.value = !1, t("lightbox-close"), document.body.style.overflow = "";
}, v = () => {
r.value > 0 && r.value--;
}, g = () => {
r.value < e.images.length - 1 && r.value++;
}, x = (w) => {
t("download", w);
const E = document.createElement("a");
E.href = w.src, E.download = w.title || "image", document.body.appendChild(E), E.click(), document.body.removeChild(E);
}, $ = (w) => {
s.value = w;
}, B = (w) => {
l.value[w] = !0;
}, S = (w) => {
console.warn(`Failed to load image at index ${w}`);
}, k = (w) => {
if (n.value)
switch (w.key) {
case "ArrowLeft":
v();
break;
case "ArrowRight":
g();
break;
case "Escape":
h();
break;
}
};
return Pe(() => {
document.addEventListener("keydown", k);
}), Ze(() => {
document.removeEventListener("keydown", k), document.body.style.overflow = "";
}), {
selectedIndex: a,
lightboxVisible: n,
lightboxIndex: r,
currentPage: s,
loadedImages: l,
gridStyle: o,
totalPages: u,
paginatedImages: i,
currentLightboxImage: c,
selectImage: d,
openLightbox: p,
closeLightbox: h,
previousImage: v,
nextImage: g,
downloadImage: x,
goToPage: $,
onImageLoad: B,
onImageError: S
};
}
}, Si = {
key: 0,
class: "gallery-header"
}, $i = { class: "gallery-title" }, ji = {
key: 0,
class: "gallery-count"
}, Ni = ["aria-label", "onClick", "onKeydown"], Ti = { class: "gallery-image-container" }, Ei = ["src", "alt", "loading", "onLoad", "onError"], Ii = {
key: 0,
class: "gallery-image-placeholder"
}, Bi = { class: "gallery-overlay" }, Ri = { class: "gallery-overlay-content" }, Pi = ["aria-label", "onClick"], Di = ["aria-label", "onClick"], Vi = {
key: 1,
class: "gallery-info"
}, Mi = {
key: 0,
class: "gallery-info-title"
}, Oi = {
key: 1,
class: "gallery-info-description"
}, Ai = {
key: 1,
class: "gallery-pagination"
}, Li = ["disabled"], zi = { class: "gallery-page-info" }, Fi = ["disabled"], qi = { class: "gallery-lightbox-image-container" }, Wi = ["src", "alt"], Hi = { class: "gallery-lightbox-info" }, Ui = {
key: 0,
class: "gallery-lightbox-title"
}, Yi = {
key: 1,
class: "gallery-lightbox-description"
}, Gi = { class: "gallery-lightbox-navigation" }, Ki = ["disabled"], Ji = { class: "gallery-lightbox-counter" }, Xi = ["disabled"];
function Qi(e, t, a, n, r, s) {
var l, o, u, i;
return m(), y("div", {
class: T(["image-gallery", [
`gallery-layout-${a.layout}`,
`gallery-size-${a.size}`,
a.loading && "gallery-loading"
]])
}, [
a.title || e.$slots.title ? (m(), y("div", Si, [
M(e.$slots, "title", {}, () => [
_("h2", $i, I(a.title), 1)
], !0),
a.showCount ? (m(), y("div", ji, I(a.images.length) + " 张图片 ", 1)) : j("", !0)
])) : j("", !0),
_("div", {
class: "gallery-grid",
style: ce(n.gridStyle)
}, [
(m(!0), y(ke, null, Ce(n.paginatedImages, (c, d) => (m(), y("div", {
key: c.id || d,
class: T(["gallery-item", { "gallery-item-selected": n.selectedIndex === d }]),
tabindex: 0,
role: "button",
"aria-label": `查看图片 ${d + 1}: ${c.alt || c.title || "无描述"}`,
onClick: (p) => n.selectImage(d),
onKeydown: [
We((p) => n.selectImage(d), ["enter"]),
We(Ae((p) => n.selectImage(d), ["prevent"]), ["space"])
]
}, [
_("div", Ti, [
_("img", {
src: c.thumbnail || c.src,
alt: c.alt || c.title,
class: "gallery-image",
loading: a.lazyLoad ? "lazy" : "eager",
onLoad: (p) => n.onImageLoad(d),
onError: (p) => n.onImageError(d)
}, null, 40, Ei),
!n.loadedImages[d] && a.loading ? (m(), y("div", Ii, t[8] || (t[8] = [
_("div", { class: "gallery-loading-spinner" }, null, -1)
]))) : j("", !0),
_("div", Bi, [
_("div", Ri, [
_("button", {
class: "gallery-action-btn gallery-view-btn",
"aria-label": `在灯箱中查看图片 ${d + 1}`,
onClick: Ae((p) => n.openLightbox(d), ["stop"])
}, " 👁️ ", 8, Pi),
a.showDownload ? (m(), y("button", {
key: 0,
class: "gallery-action-btn gallery-download-btn",
"aria-label": `下载图片 ${d + 1}`,
onClick: Ae((p) => n.downloadImage(c), ["stop"])
}, " 📥 ", 8, Di)) : j("", !0)
])
]),
a.showInfo ? (m(), y("div", Vi, [
c.title ? (m(), y("div", Mi, I(c.title), 1)) : j("", !0),
c.description ? (m(), y("div", Oi, I(c.description), 1)) : j("", !0)
])) : j("", !0)
])
], 42, Ni))), 128))
], 4),
a.showPagination && n.totalPages > 1 ? (m(), y("div", Ai, [
_("button", {
class: "gallery-page-btn",
disabled: n.currentPage === 1,
onClick: t[0] || (t[0] = (c) => n.goToPage(n.currentPage - 1))
}, " 上一页 ", 8, Li),
_("span", zi, " 第 " + I(n.currentPage) + " 页，共 " + I(n.totalPages) + " 页 ", 1),
_("button", {
class: "gallery-page-btn",
disabled: n.currentPage === n.totalPages,
onClick: t[1] || (t[1] = (c) => n.goToPage(n.currentPage + 1))
}, " 下一页 ", 8, Fi)
])) : j("", !0),
(m(), Se(ct, { to: "body" }, [
n.lightboxVisible ? (m(), y("div", {
key: 0,
class: "gallery-lightbox",
tabindex: "-1",
onClick: t[6] || (t[6] = (...c) => n.closeLightbox && n.closeLightbox(...c)),
onKeydown: t[7] || (t[7] = We((...c) => n.closeLightbox && n.closeLightbox(...c), ["esc"]))
}, [
_("div", {
class: "gallery-lightbox-content",
onClick: t[5] || (t[5] = Ae(() => {
}, ["stop"]))
}, [
_("button", {
class: "gallery-lightbox-close",
"aria-label": "关闭灯箱",
onClick: t[2] || (t[2] = (...c) => n.closeLightbox && n.closeLightbox(...c))
}, " ✕ "),
_("div", qi, [
_("img", {
src: (l = n.currentLightboxImage) == null ? void 0 : l.src,
alt: (o = n.currentLightboxImage) == null ? void 0 : o.alt,
class: "gallery-lightbox-image"
}, null, 8, Wi)
]),
_("div", Hi, [
(u = n.currentLightboxImage) != null && u.title ? (m(), y("h3", Ui, I(n.currentLightboxImage.title), 1)) : j("", !0),
(i = n.currentLightboxImage) != null && i.description ? (m(), y("p", Yi, I(n.currentLightboxImage.description), 1)) : j("", !0)
]),
_("div", Gi, [
_("button", {
class: "gallery-lightbox-nav gallery-lightbox-prev",
disabled: n.lightboxIndex === 0,
"aria-label": "上一张图片",
onClick: t[3] || (t[3] = (...c) => n.previousImage && n.previousImage(...c))
}, " ‹ ", 8, Ki),
_("span", Ji, I(n.lightboxIndex + 1) + " / " + I(a.images.length), 1),
_("button", {
class: "gallery-lightbox-nav gallery-lightbox-next",
disabled: n.lightboxIndex === a.images.length - 1,
"aria-label": "下一张图片",
onClick: t[4] || (t[4] = (...c) => n.nextImage && n.nextImage(...c))
}, " › ", 8, Xi)
])
])
], 32)) : j("", !0)
]))
], 2);
}
const sp = /* @__PURE__ */ me(Ci, [["render", Qi], ["__scopeId", "data-v-7a2ed0bf"]]), Zi = ({
images: e = [],
title: t = "",
layout: a = "grid",
// grid | masonry | carousel (only grid implemented)
size: n = "md",
// sm | md | lg | xl (affects aspect ratio)
columns: r = 3,
gap: s = 16,
showInfo: l = !0,
showCount: o = !0,
showDownload: u = !1,
showPagination: i = !1,
itemsPerPage: c = 12,
lazyLoad: d = !0,
loading: p = !1,
className: h = "",
style: v = {},
onSelect: g,
onDownload: x,
onLightboxOpen: $,
onLightboxClose: B,
...S
}) => {
const [k, w] = te(-1), [E, W] = te(1), R = i ? Math.ceil(e.length / c) : 1, Y = { sm: "75%", md: "66.67%", lg: "56.25%", xl: "50%" }, N = i ? e.slice((E - 1) * c, E * c) : e, O = (V) => {
const K = i ? (E - 1) * c + V : V;
w(K);
const ge = e[K];
g == null || g({ index: K, image: ge }), $ == null || $({ index: K, image: ge });
}, H = (V) => {
x == null || x(V);
const K = document.createElement("a");
K.href = V.src, K.download = V.title || "image", document.body.appendChild(K), K.click(), document.body.removeChild(K);
}, Q = () => {
w(-1), B == null || B();
}, q = () => w((V) => V > 0 ? V - 1 : V), ne = () => w((V) => V < e.length - 1 ? V + 1 : V);
return ve(() => {
const V = (K) => {
K.key === "Escape" && Q(), k !== -1 && (K.key === "ArrowLeft" && q(), K.key === "ArrowRight" && ne());
};
return window.addEventListener("keydown", V), () => window.removeEventListener("keydown", V);
}, [k]), /* @__PURE__ */ f.jsxs("div", { className: [
"image-gallery",
`gallery-layout-${a}`,
`gallery-size-${n}`,
p && "gallery-loading",
h
].filter(Boolean).join(" "), style: v, ...S, children: [
(t || o) && /* @__PURE__ */ f.jsxs("div", { className: "gallery-header", children: [
t && /* @__PURE__ */ f.jsx("h2", { className: "gallery-title", children: t }),
o && /* @__PURE__ */ f.jsxs("div", { className: "gallery-count", children: [
e.length,
" 张图片"
] })
] }),
/* @__PURE__ */ f.jsx(
"div",
{
className: "gallery-grid",
style: a === "grid" ? { gridTemplateColumns: `repeat(${r},1fr)`, gap: s } : a === "masonry" ? { columnCount: r, columnGap: s } : { gap: s },
children: N.map((V, K) => /* @__PURE__ */ f.jsxs(
"div",
{
className: "gallery-item",
onClick: () => O(K),
tabIndex: 0,
role: "button",
"aria-label": `查看图片 ${K + 1}`,
children: [
/* @__PURE__ */ f.jsxs("div", { className: "gallery-image-container", style: { paddingBottom: Y[n] }, children: [
/* @__PURE__ */ f.jsx(
"img",
{
src: V.thumbnail || V.src,
alt: V.alt || V.title,
className: "gallery-image",
loading: d ? "lazy" : "eager"
}
),
/* @__PURE__ */ f.jsx("div", { className: "gallery-overlay", children: /* @__PURE__ */ f.jsxs("div", { className: "gallery-overlay-content", children: [
/* @__PURE__ */ f.jsx(
"button",
{
className: "gallery-action-btn gallery-view-btn",
"aria-label": `在灯箱中查看图片 ${K + 1}`,
onClick: (ge) => {
ge.stopPropagation(), O(K);
},
children: "👁️"
}
),
u && /* @__PURE__ */ f.jsx(
"button",
{
className: "gallery-action-btn gallery-download-btn",
"aria-label": `下载图片 ${K + 1}`,
onClick: (ge) => {
ge.stopPropagation(), H(V);
},
children: "📥"
}
)
] }) })
] }),
l && (V.title || V.description) && /* @__PURE__ */ f.jsxs("div", { className: "gallery-info", children: [
V.title && /* @__PURE__ */ f.jsx("div", { className: "gallery-info-title", children: V.title }),
V.description && /* @__PURE__ */ f.jsx("div", { className: "gallery-info-description", children: V.description })
] })
]
},
V.id || K
))
}
),
i && R > 1 && /* @__PURE__ */ f.jsxs("div", { className: "gallery-pagination", children: [
/* @__PURE__ */ f.jsx("button", { className: "gallery-page-btn", disabled: E === 1, onClick: () => W((V) => V - 1), children: "上一页" }),
/* @__PURE__ */ f.jsxs("span", { className: "gallery-page-info", children: [
"第 ",
E,
" 页，共 ",
R,
" 页"
] }),
/* @__PURE__ */ f.jsx("button", { className: "gallery-page-btn", disabled: E === R, onClick: () => W((V) => V + 1), children: "下一页" })
] }),
k !== -1 && /* @__PURE__ */ f.jsx(
"div",
{
className: "gallery-lightbox",
onClick: Q,
role: "dialog",
"aria-modal": "true",
"aria-labelledby": "lightbox-title",
children: /* @__PURE__ */ f.jsxs("div", { className: "gallery-lightbox-content", onClick: (V) => V.stopPropagation(), children: [
/* @__PURE__ */ f.jsx("button", { className: "gallery-lightbox-close", onClick: Q, children: "✕" }),
/* @__PURE__ */ f.jsx("div", { className: "gallery-lightbox-image-container", children: /* @__PURE__ */ f.jsx("img", { src: e[k].src, alt: e[k].alt, className: "gallery-lightbox-image" }) }),
(e[k].title || e[k].description) && /* @__PURE__ */ f.jsxs("div", { className: "gallery-lightbox-info", children: [
e[k].title && /* @__PURE__ */ f.jsx("h3", { id: "lightbox-title", className: "gallery-lightbox-title", children: e[k].title }),
e[k].description && /* @__PURE__ */ f.jsx("p", { className: "gallery-lightbox-description", children: e[k].description })
] }),
/* @__PURE__ */ f.jsxs("div", { className: "gallery-lightbox-navigation", children: [
/* @__PURE__ */ f.jsx(
"button",
{
className: "gallery-lightbox-nav gallery-lightbox-prev",
disabled: k === 0,
"aria-label": "上一张图片",
onClick: q,
children: "‹"
}
),
/* @__PURE__ */ f.jsxs("span", { className: "gallery-lightbox-counter", children: [
k + 1,
" / ",
e.length
] }),
/* @__PURE__ */ f.jsx(
"button",
{
className: "gallery-lightbox-nav gallery-lightbox-next",
disabled: k === e.length - 1,
"aria-label": "下一张图片",
onClick: ne,
children: "›"
}
)
] }),
u && /* @__PURE__ */ f.jsx("button", { className: "gallery-action-btn gallery-download-btn", onClick: () => H(e[k]), children: "下载" })
] })
}
)
] });
};
Zi.displayName = "ImageGallery";
const ec = ["for"], tc = {
key: 0,
class: "text-error-500 ml-1"
}, ac = { class: "wc-input-wrapper" }, nc = ["id", "type", "placeholder", "disabled", "readonly", "required", "value"], rc = {
key: 0,
class: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"
}, sc = {
key: 1,
class: "mt-2 text-sm text-error-500"
}, lc = {
key: 2,
class: "mt-2 text-sm text-neutral-500 dark:text-neutral-400"
}, lp = {
__name: "Input",
props: {
modelValue: {
type: [String, Number],
default: ""
},
type: {
type: String,
default: "text"
},
label: {
type: String,
default: ""
},
placeholder: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
error: {
type: String,
default: ""
},
helpText: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
emits: ["update:modelValue", "focus", "blur"],
setup(e, { emit: t }) {
const a = e, n = t, r = ut(), s = A(`input-${(r == null ? void 0 : r.uid) || Math.random().toString(36).substr(2, 9)}`), l = C(() => {
const d = ["wc-input-container"];
return a.disabled && d.push("opacity-50", "cursor-not-allowed"), d;
}), o = C(() => {
const d = ["wc-input", `wc-input--${a.size}`, "wc-input--filled"], p = {
sm: ["px-2", "py-1", "text-sm"],
md: ["px-3", "py-2", "text-sm"],
lg: ["px-4", "py-3", "text-base"]
};
return d.push(...p[a.size]), a.error && d.push("wc-input--error"), a.disabled && d.push("wc-input--disabled"), d;
}), u = (d) => {
n("update:modelValue", d.target.value);
}, i = (d) => {
n("focus", d);
}, c = (d) => {
n("blur", d);
};
return (d, p) => (m(), y("div", {
class: T(l.value)
}, [
e.label ? (m(), y("label", {
key: 0,
for: s.value,
class: "block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2"
}, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", tc, "*")) : j("", !0)
], 8, ec)) : j("", !0),
_("div", ac, [
_("input", ot({
id: s.value,
class: o.value,
type: e.type,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
required: e.required,
value: e.modelValue
}, d.$attrs, {
onInput: u,
onFocus: i,
onBlur: c
}), null, 16, nc),
e.error ? (m(), y("div", rc, p[0] || (p[0] = [
_("svg", {
class: "h-5 w-5 text-error-500",
fill: "currentColor",
viewBox: "0 0 20 20"
}, [
_("path", {
"fill-rule": "evenodd",
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
"clip-rule": "evenodd"
})
], -1)
]))) : j("", !0)
]),
e.error ? (m(), y("p", sc, I(e.error), 1)) : e.helpText ? (m(), y("p", lc, I(e.helpText), 1)) : j("", !0)
], 2));
}
}, oc = ({
value: e = "",
onChange: t,
type: a = "text",
placeholder: n = "",
disabled: r = !1,
readonly: s = !1,
required: l = !1,
autoFocus: o = !1,
maxLength: u,
minLength: i,
size: c = "md",
variant: d = "filled",
color: p = "primary",
error: h = !1,
helperText: v = "",
label: g = "",
startAdornment: x = null,
endAdornment: $ = null,
fullWidth: B = !1,
multiline: S = !1,
rows: k = 4,
autoComplete: w = "off",
name: E = "",
id: W = "",
className: R = "",
style: Y = {},
onFocus: N,
onBlur: O,
onKeyDown: H,
onKeyUp: Q,
onKeyPress: q,
...ne
}) => {
const [V, K] = te(!1), [ge, oe] = te(!!e), P = Te(null), z = Ba(), Z = W || z;
ve(() => {
oe(!!e);
}, [e]), ve(() => {
o && P.current && P.current.focus();
}, [o]);
const U = (G) => {
const le = G.target.value;
oe(!!le), t == null || t(G);
}, J = (G) => {
K(!0), N == null || N(G);
}, re = (G) => {
K(!1), O == null || O(G);
}, ee = () => {
const G = ["wc-input"];
return G.push(`wc-input--${c}`), G.push(`wc-input--${d}`), h && G.push("wc-input--error"), r && G.push("wc-input--disabled"), s && G.push("wc-input--readonly"), V && G.push("wc-input--focused"), ge && G.push("wc-input--has-value"), B && G.push("wc-input--full-width"), x && G.push("wc-input--has-start-adornment"), $ && G.push("wc-input--has-end-adornment"), G.concat(R).filter(Boolean).join(" ");
}, ae = () => ({ ...Y }), se = S ? "textarea" : "input";
return /* @__PURE__ */ f.jsxs("div", { className: "wc-input-container", children: [
g && /* @__PURE__ */ f.jsxs(
"label",
{
htmlFor: Z,
className: `wc-input-label ${V || ge ? "wc-input-label--active" : ""} ${h ? "wc-input-label--error" : ""}`,
children: [
g,
l && /* @__PURE__ */ f.jsx("span", { className: "wc-input-label__required", children: "*" })
]
}
),
/* @__PURE__ */ f.jsxs("div", { className: "wc-input-wrapper", children: [
x && /* @__PURE__ */ f.jsx("div", { className: "wc-input-adornment wc-input-adornment--start", children: x }),
/* @__PURE__ */ f.jsx(
se,
{
ref: P,
className: ee(),
style: ae(),
type: S ? void 0 : a,
value: e,
onChange: U,
onFocus: J,
onBlur: re,
onKeyDown: H,
onKeyUp: Q,
onKeyPress: q,
placeholder: n,
disabled: r,
readOnly: s,
required: l,
maxLength: u,
minLength: i,
rows: S ? k : void 0,
autoComplete: w,
name: E,
id: Z,
...ne
}
),
$ && /* @__PURE__ */ f.jsx("div", { className: "wc-input-adornment wc-input-adornment--end", children: $ })
] }),
(v || h) && /* @__PURE__ */ f.jsx("div", { className: `wc-input-helper-text ${h ? "wc-input-helper-text--error" : ""}`, children: h || v })
] });
};
oc.displayName = "Input";
const ic = { class: "wc-list-subheader" }, op = /* @__PURE__ */ Object.assign({
inheritAttrs: !1
}, {
__name: "List",
props: {
dense: {
type: Boolean,
default: !1
},
disablePadding: {
type: Boolean,
default: !1
},
subheader: {
type: String,
default: ""
},
component: {
type: String,
default: "ul"
},
nav: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(() => {
const n = ["wc-list", "w-full"];
return t.dense && n.push("wc-list--dense"), t.disablePadding ? n.push("wc-list--no-padding") : n.push("py-2"), t.nav && n.push("wc-list--nav"), n;
});
return it("listContext", {
dense: t.dense
}), (n, r) => e.subheader ? (m(), y(ke, { key: 0 }, [
_("div", ic, I(e.subheader), 1),
(m(), Se(ze(e.component), {
class: T(a.value),
role: "list"
}, {
default: je(() => [
M(n.$slots, "default")
]),
_: 3
}, 8, ["class"]))
], 64)) : (m(), Se(ze(e.component), ot({
key: 1,
class: a.value,
role: "list"
}, n.$attrs), {
default: je(() => [
M(n.$slots, "default")
]),
_: 3
}, 16, ["class"]));
}
}), wt = ft({ dense: !1 }), ip = ({
children: e,
dense: t = !1,
disablePadding: a = !1,
subheader: n = "",
className: r = "",
...s
}) => {
const l = [
"w-full",
!a && "py-2",
r
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx(wt.Provider, { value: { dense: t }, children: /* @__PURE__ */ f.jsx("ul", { role: "list", className: l, ...s, children: e }) });
}, cc = ["tabindex", "disabled"], uc = {
key: 0,
class: "flex-shrink-0 mr-3"
}, dc = { class: "flex-1 min-w-0" }, fc = {
key: 1,
class: "flex-shrink-0 ml-3"
}, cp = {
__name: "ListItem",
props: {
button: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
divider: {
type: Boolean,
default: !1
},
dense: {
type: Boolean,
default: void 0
},
selected: {
type: Boolean,
default: !1
},
disableGutters: {
type: Boolean,
default: !1
},
alignItems: {
type: String,
default: "center",
validator: (e) => ["flex-start", "center", "flex-end"].includes(e)
}
},
emits: ["click"],
setup(e, { emit: t }) {
const a = e, n = t, r = Le("listContext", { dense: !1 }), s = C(() => a.dense !== void 0 ? a.dense : r.dense), l = C(() => {
const u = ["wc-list-item", "flex", "w-full", "transition-colors", "duration-150"];
return a.alignItems === "flex-start" ? u.push("items-start", "wc-list-item--align-start") : a.alignItems === "flex-end" ? u.push("items-end", "wc-list-item--align-end") : u.push("items-center"), a.disableGutters || (s.value ? u.push("px-4", "py-1") : u.push("px-4", "py-2")), a.button && (u.push("wc-list-item--button", "cursor-pointer", "focus:outline-none"), a.disabled || (a.selected ? u.push("bg-primary-50", "dark:bg-primary-900/20", "text-primary-600", "dark:text-primary-400") : u.push("hover:bg-neutral-50", "dark:hover:bg-neutral-800", "focus:bg-neutral-100", "dark:focus:bg-neutral-700"))), a.selected && u.push("wc-list-item--selected"), s.value && u.push("wc-list-item--dense"), a.disabled && u.push("wc-list-item--disabled", "opacity-50", "cursor-not-allowed"), a.divider && u.push("wc-list-item--divider", "border-b", "border-neutral-200", "dark:border-neutral-700"), u;
}), o = (u) => {
a.button && !a.disabled && n("click", u);
};
return (u, i) => (m(), y("li", {
class: T(l.value),
role: "listitem",
tabindex: e.button ? 0 : -1,
disabled: e.disabled,
onClick: o,
onKeydown: [
We(o, ["enter"]),
We(o, ["space"])
]
}, [
u.$slots.icon ? (m(), y("div", uc, [
M(u.$slots, "icon")
])) : j("", !0),
_("div", dc, [
M(u.$slots, "default")
]),
u.$slots.action ? (m(), y("div", fc, [
M(u.$slots, "action")
])) : j("", !0)
], 42, cc));
}
}, up = ({
children: e,
button: t = !1,
disabled: a = !1,
divider: n = !1,
dense: r,
selected: s = !1,
disableGutters: l = !1,
className: o = "",
onClick: u,
...i
}) => {
const { dense: c } = qe(wt), p = [
"flex items-center w-full transition-colors duration-150",
!l && ((r !== void 0 ? r : c) ? "px-4 py-1" : "px-4 py-2"),
t && !a && "cursor-pointer focus:outline-none",
a && "opacity-50 cursor-not-allowed",
n && "border-b border-neutral-200 dark:border-neutral-700",
// 选中/悬浮状态
s && t && !a && "bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400",
!s && t && !a && "hover:bg-neutral-50 dark:hover:bg-neutral-800 focus:bg-neutral-100 dark:focus:bg-neutral-700",
o
].filter(Boolean).join(" "), h = (v) => {
t && !a && (u == null || u(v));
};
return /* @__PURE__ */ f.jsx(
"li",
{
role: "listitem",
tabIndex: t ? 0 : -1,
className: p,
onClick: h,
onKeyDown: (v) => {
(v.key === "Enter" || v.key === " ") && t && !a && h(v);
},
...i,
children: e
}
);
}, pc = {
__name: "ListItemIcon",
setup(e) {
const t = Le("listContext", {
dense: !1,
disablePadding: !1
}), a = C(() => {
const r = ["wc-list-item-icon inline-flex items-center justify-center flex-shrink-0"];
return t.dense ? r.push("w-4 h-4 mr-4 text-base") : r.push("w-5 h-5 mr-4 text-lg"), r.push("text-neutral-600"), r.push("dark:text-neutral-400"), r;
});
return (n, r) => (m(), y("div", {
class: T(a.value)
}, [
M(n.$slots, "default", {}, void 0, !0)
], 2));
}
}, dp = /* @__PURE__ */ me(pc, [["__scopeId", "data-v-9ea8b8e9"]]), fp = ({ children: e, className: t = "", ...a }) => {
const { dense: n } = qe(wt), r = [
"wc-list-item-icon inline-flex items-center justify-center flex-shrink-0",
n ? "w-4 h-4 mr-4 text-base" : "w-5 h-5 mr-4 text-lg",
"text-neutral-600 dark:text-neutral-400",
t
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx("div", { className: r, ...a, children: e });
}, mc = { class: "flex-1 min-w-0" }, pp = {
__name: "ListItemText",
props: {
primary: {
type: String,
default: ""
},
secondary: {
type: String,
default: ""
},
inset: {
type: Boolean,
default: !1
},
disableTypography: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = Le("listContext", { dense: !1 }), n = C(() => {
const s = ["text-neutral-900 dark:text-neutral-100"];
return t.disableTypography || (a.dense ? s.push("text-sm font-medium") : s.push("text-base font-medium")), t.inset && s.push("ml-14"), s;
}), r = C(() => {
const s = ["text-neutral-600 dark:text-neutral-400 mt-1"];
return t.disableTypography || (a.dense ? s.push("text-xs") : s.push("text-sm")), t.inset && s.push("ml-14"), s;
});
return (s, l) => (m(), y("div", mc, [
_("div", {
class: T(n.value)
}, [
M(s.$slots, "default", {}, () => [
he(I(e.primary), 1)
])
], 2),
e.secondary || s.$slots.secondary ? (m(), y("div", {
key: 0,
class: T(r.value)
}, [
M(s.$slots, "secondary", {}, () => [
he(I(e.secondary), 1)
])
], 2)) : j("", !0)
]));
}
}, mp = ({
primary: e = "",
secondary: t = "",
inset: a = !1,
disableTypography: n = !1,
children: r,
className: s = "",
...l
}) => {
const { dense: o } = qe(wt), u = [
"text-neutral-900 dark:text-neutral-100",
!n && (o ? "text-sm font-medium" : "text-base font-medium"),
a && "ml-14",
s
].filter(Boolean).join(" "), i = [
"text-neutral-600 dark:text-neutral-400 mt-1",
!n && (o ? "text-xs" : "text-sm"),
a && "ml-14"
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsxs("div", { className: "flex-1 min-w-0", ...l, children: [
/* @__PURE__ */ f.jsx("div", { className: u, children: r || e }),
(t || null) && /* @__PURE__ */ f.jsx("div", { className: i, children: t })
] });
}, hc = {
name: "Marquee",
props: {
text: {
type: String,
default: "This is a scrolling marquee text"
},
speed: {
type: Number,
default: 50,
validator: (e) => e > 0 && e <= 200
},
direction: {
type: String,
default: "left",
validator: (e) => ["left", "right", "up", "down"].includes(e)
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "outlined", "filled", "gradient"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
},
pauseOnHover: {
type: Boolean,
default: !1
},
loop: {
type: Boolean,
default: !0
},
showGradient: {
type: Boolean,
default: !0
},
showControls: {
type: Boolean,
default: !1
},
allowReverse: {
type: Boolean,
default: !0
},
allowSpeedControl: {
type: Boolean,
default: !0
},
autoStart: {
type: Boolean,
default: !0
},
loading: {
type: Boolean,
default: !1
},
height: {
type: [String, Number],
default: "auto"
},
backgroundColor: {
type: String,
default: ""
},
textColor: {
type: String,
default: ""
}
},
emits: ["start", "pause", "resume", "complete", "direction-change", "speed-change"],
setup(e, { emit: t }) {
const a = A(null), n = A(!e.autoStart), r = A(e.direction), s = A(e.speed), l = A(1), o = A(null), u = A(!1), i = [5, 25, 50], c = C(() => {
const R = {};
return e.height !== "auto" && (R.height = typeof e.height == "number" ? `${e.height}px` : e.height), e.backgroundColor && (R.backgroundColor = e.backgroundColor), e.textColor && (R.color = e.textColor), R;
}), d = C(() => {
const R = ["up", "down"].includes(r.value), Y = 100 / s.value;
let N;
switch (r.value) {
case "left":
N = "marquee-scroll-left";
break;
case "right":
N = "marquee-scroll-right";
break;
case "up":
N = "marquee-scroll-up";
break;
case "down":
N = "marquee-scroll-down";
break;
}
return {
animationName: n.value || e.loading ? "none" : N,
animationDuration: `${Y}s`,
animationTimingFunction: "linear",
animationIterationCount: e.loop ? "infinite" : "1",
flexDirection: R ? "column" : "row"
};
}), p = C(() => {
const R = e.pauseOnHover && !e.showControls && u.value;
return n.value || R || e.loading;
}), h = () => {
u.value = !0;
}, v = () => {
u.value = !1;
}, g = () => {
n.value = !n.value, n.value ? t("pause") : t("resume");
}, x = () => {
const R = ["left", "right", "up", "down"], N = (R.indexOf(r.value) + 1) % R.length;
r.value = R[N], t("direction-change", r.value);
}, $ = () => {
l.value = (l.value + 1) % i.length, s.value = i[l.value], t("speed-change", {
speed: s.value,
level: ["slow", "normal", "fast"][l.value]
});
}, B = () => {
n.value = !1, t("start");
}, S = () => {
n.value = !0, t("pause");
}, k = () => {
n.value = !1, t("resume");
}, w = (R) => {
s.value = Math.max(1, Math.min(200, R));
}, E = (R) => {
["left", "right", "up", "down"].includes(R) && (r.value = R);
}, W = () => {
e.loop || t("complete");
};
return Pe(() => {
a.value && a.value.addEventListener("animationend", W), e.autoStart && t("start");
}), Ze(() => {
a.value && a.value.removeEventListener("animationend", W), o.value && cancelAnimationFrame(o.value);
}), {
marqueeRef: a,
isPaused: n,
currentDirection: r,
currentSpeed: s,
isHovered: u,
containerStyle: c,
contentStyle: d,
paused: p,
handleMouseEnter: h,
handleMouseLeave: v,
togglePause: g,
toggleDirection: x,
toggleSpeed: $,
start: B,
pause: S,
resume: k,
setSpeed: w,
setDirection: E
};
}
}, vc = { class: "marquee-item" }, yc = {
key: 0,
class: "marquee-item marquee-clone"
}, gc = {
key: 0,
class: "marquee-gradient marquee-gradient-left"
}, bc = {
key: 1,
class: "marquee-gradient marquee-gradient-right"
}, wc = {
key: 2,
class: "marquee-controls"
}, xc = ["aria-label"], kc = {
key: 3,
class: "marquee-loading-overlay"
};
function _c(e, t, a, n, r, s) {
return m(), y("div", {
class: T(["marquee-container", [
`marquee-${a.variant}`,
`marquee-size-${a.size}`,
`marquee-direction-${n.currentDirection}`,
n.paused && "marquee-paused",
a.loading && "marquee-loading"
]]),
style: ce(n.containerStyle),
onMouseenter: t[3] || (t[3] = (...l) => n.handleMouseEnter && n.handleMouseEnter(...l)),
onMouseleave: t[4] || (t[4] = (...l) => n.handleMouseLeave && n.handleMouseLeave(...l))
}, [
_("div", {
ref: "marqueeRef",
class: "marquee-content",
style: ce(n.contentStyle)
}, [
_("div", vc, [
M(e.$slots, "default", {}, () => [
he(I(a.text), 1)
])
]),
a.loop ? (m(), y("div", yc, [
M(e.$slots, "default", {}, () => [
he(I(a.text), 1)
])
])) : j("", !0)
], 4),
a.showGradient ? (m(), y("div", gc)) : j("", !0),
a.showGradient ? (m(), y("div", bc)) : j("", !0),
a.showControls ? (m(), y("div", wc, [
_("button", {
class: "marquee-control-btn",
"aria-label": n.isPaused ? "播放" : "暂停",
onClick: t[0] || (t[0] = (...l) => n.togglePause && n.togglePause(...l))
}, I(n.isPaused ? "▶️" : "⏸️"), 9, xc),
a.allowReverse ? (m(), y("button", {
key: 0,
class: "marquee-control-btn",
"aria-label": "改变方向",
onClick: t[1] || (t[1] = (...l) => n.toggleDirection && n.toggleDirection(...l))
}, " 🔄 ")) : j("", !0),
a.allowSpeedControl ? (m(), y("button", {
key: 1,
class: "marquee-control-btn",
"aria-label": "改变速度",
onClick: t[2] || (t[2] = (...l) => n.toggleSpeed && n.toggleSpeed(...l))
}, " ⚡ ")) : j("", !0)
])) : j("", !0),
a.loading ? (m(), y("div", kc, t[5] || (t[5] = [
_("div", { class: "marquee-loading-spinner" }, null, -1),
_("span", { class: "marquee-loading-text" }, "加载中...", -1)
]))) : j("", !0)
], 38);
}
const hp = /* @__PURE__ */ me(hc, [["render", _c]]), Cc = {
slow: 25,
normal: 50,
fast: 100
}, Sc = {
left: "marquee-scroll-left",
right: "marquee-scroll-right",
up: "marquee-scroll-up",
down: "marquee-scroll-down"
}, $c = (e) => {
const {
variant: t = "default",
size: a = "md",
direction: n = "left",
paused: r = !1,
loading: s = !1,
className: l = ""
} = e, o = [
"marquee-container",
`marquee-${t}`,
`marquee-size-${a}`,
`marquee-direction-${n}`
];
return r && o.push("marquee-paused"), s && o.push("marquee-loading"), l && o.push(l), o;
}, jc = (e) => {
const { direction: t = "left", speed: a = 50, paused: n = !1, loading: r = !1 } = e, s = Tc(a), l = Sc[t];
return {
animationName: n || r ? "none" : l,
animationDuration: `${s}s`,
animationTimingFunction: "linear",
animationIterationCount: "infinite",
animationPlayState: n || r ? "paused" : "running"
};
}, Nc = (e) => {
var s;
const { height: t = "auto", backgroundColor: a, textColor: n } = e, r = {};
return t !== "auto" && (r.height = typeof t == "number" ? `${t}px` : t), a && (r.backgroundColor = a, (s = r.setProperty) == null || s.call(r, "--marquee-bg", a)), n && (r.color = n), r;
}, Tc = (e) => Math.max(1, 100 / Math.max(1, Math.min(200, e))), Ec = (e) => {
const t = Object.values(Cc), a = t.findIndex((n) => n >= e);
return a === -1 || a === t.length - 1 ? t[0] : t[a + 1];
}, vp = ({
text: e = "This is a scrolling marquee text",
speed: t = 50,
direction: a = "left",
variant: n = "default",
size: r = "md",
pauseOnHover: s = !1,
loop: l = !0,
showGradient: o = !0,
showControls: u = !1,
allowReverse: i = !0,
allowSpeedControl: c = !0,
autoStart: d = !0,
loading: p = !1,
height: h = "auto",
backgroundColor: v = "",
textColor: g = "",
className: x = "",
children: $,
onStart: B,
onPause: S,
onResume: k,
onComplete: w,
onDirectionChange: E,
onSpeedChange: W,
...R
}) => {
const Y = Te(null), [N, O] = te(!d), [H, Q] = te(a), [q, ne] = te(t), V = (U, ...J) => typeof U == "function" && U(...J);
ve(() => {
d && V(B);
}, []), ve(() => {
const U = Y.current;
if (!U || !s) return;
const J = () => O(!0), re = () => O(!1);
return U.addEventListener("mouseenter", J), U.addEventListener("mouseleave", re), () => {
U.removeEventListener("mouseenter", J), U.removeEventListener("mouseleave", re);
};
}, [s]), ve(() => {
V(N ? S : k);
}, [N]);
const K = $c({
variant: n,
size: r,
direction: H,
paused: N,
loading: p,
className: x
}).join(" "), ge = {
...Nc({ height: h, backgroundColor: v, textColor: g })
}, oe = jc({
direction: H,
speed: q,
paused: N,
loading: p
}), P = () => O((U) => !U), z = () => {
if (!i) return;
const U = {
left: "right",
right: "left",
up: "down",
down: "up"
}[H];
Q(U), V(E, U);
}, Z = () => {
if (!c) return;
const U = Ec(q);
ne(U), V(W, U);
};
return /* @__PURE__ */ f.jsxs(
"div",
{
ref: Y,
className: K,
style: ge,
...R,
children: [
/* @__PURE__ */ f.jsxs("div", { className: "marquee-content", style: oe, children: [
/* @__PURE__ */ f.jsx("div", { className: "marquee-item", children: $ || e }),
l && /* @__PURE__ */ f.jsx("div", { className: "marquee-item marquee-clone", children: $ || e })
] }),
o && /* @__PURE__ */ f.jsx("div", { className: "marquee-gradient marquee-gradient-left" }),
o && /* @__PURE__ */ f.jsx("div", { className: "marquee-gradient marquee-gradient-right" }),
u && /* @__PURE__ */ f.jsxs("div", { className: "marquee-controls", children: [
/* @__PURE__ */ f.jsx(
"button",
{
className: "marquee-control-btn",
"aria-label": N ? "播放" : "暂停",
onClick: P,
children: N ? "▶️" : "⏸️"
}
),
i && /* @__PURE__ */ f.jsx(
"button",
{
className: "marquee-control-btn",
"aria-label": "改变方向",
onClick: z,
children: "🔄"
}
),
c && /* @__PURE__ */ f.jsx(
"button",
{
className: "marquee-control-btn",
"aria-label": "改变速度",
onClick: Z,
children: "⚡"
}
)
] }),
p && /* @__PURE__ */ f.jsxs("div", { className: "marquee-loading-overlay", children: [
/* @__PURE__ */ f.jsx("div", { className: "marquee-loading-spinner" }),
/* @__PURE__ */ f.jsx("span", { className: "marquee-loading-text", children: "加载中..." })
] })
]
}
);
}, Ic = {
key: 0,
class: "wc-modal__overlay"
}, Bc = ["aria-labelledby"], Rc = {
key: 1,
class: "wc-modal__header"
}, Pc = { class: "wc-modal__body" }, Dc = {
key: 2,
class: "wc-modal__footer"
}, Vc = {
__name: "Modal",
props: {
// 基础属性
visible: {
type: Boolean,
default: void 0
},
open: {
type: Boolean,
default: void 0
},
modelValue: {
type: Boolean,
default: void 0
},
title: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => ["xs", "sm", "md", "lg", "xl"].includes(e)
},
maxWidth: {
type: String,
default: null,
validator: (e) => e === null || ["xs", "sm", "md", "lg", "xl"].includes(e)
},
// 显示控制
closable: {
type: Boolean,
default: !0
},
showCloseButton: {
type: Boolean,
default: !0
},
maskClosable: {
type: Boolean,
default: !0
},
closeOnOverlay: {
type: Boolean,
default: !0
},
disableBackdropClick: {
type: Boolean,
default: !1
},
disableEscapeKeyDown: {
type: Boolean,
default: !1
},
// 布局
centered: {
type: Boolean,
default: !0
},
fullWidth: {
type: Boolean,
default: !1
},
fullScreen: {
type: Boolean,
default: !1
},
position: {
type: String,
default: "center",
validator: (e) => ["center", "top", "bottom"].includes(e)
},
// 滚动
scroll: {
type: String,
default: "paper",
validator: (e) => ["paper", "body"].includes(e)
},
lockScroll: {
type: Boolean,
default: !0
},
// 样式
zIndex: {
type: Number,
default: 1e3
},
showOverlay: {
type: Boolean,
default: !0
}
},
emits: ["close", "update:modelValue"],
setup(e, { emit: t }) {
const a = e, n = t, r = ut(), s = `modal-title-${(r == null ? void 0 : r.uid) || Math.random().toString(36).substr(2, 9)}`, l = A(null), o = A(null), u = C({
get() {
return a.modelValue !== void 0 ? a.modelValue : a.visible !== void 0 ? a.visible : a.open !== void 0 ? a.open : !1;
},
set(R) {
n("update:modelValue", R), n("close");
}
}), i = C(() => a.maxWidth || a.size), c = C(() => {
const R = ["wc-modal-overlay"];
return a.position === "center" && a.centered ? R.push("wc-modal-overlay--centered") : a.position && a.position !== "center" && R.push(`wc-modal-overlay--${a.position}`), R;
}), d = C(() => {
const R = ["wc-modal"];
return i.value && !a.fullScreen && R.push(`wc-modal--${i.value}`), a.fullScreen && R.push("wc-modal--fullscreen"), a.fullWidth && !a.fullScreen && R.push("wc-modal--full-width"), a.scroll === "body" ? R.push("wc-modal--scroll-body") : R.push("wc-modal--scroll-paper"), R;
}), p = C(() => ({
zIndex: a.zIndex
})), h = C(() => {
const R = {};
return a.fullScreen && (R.width = "100vw", R.height = "100vh", R.maxWidth = "none", R.maxHeight = "none"), R;
}), v = C(() => a.closable && a.showCloseButton), g = () => {
n("close"), n("update:modelValue", !1);
}, x = () => {
a.maskClosable && a.closeOnOverlay && !a.disableBackdropClick && g();
}, $ = (R) => {
R.key === "Escape" && a.closable && !a.disableEscapeKeyDown && g();
}, B = (R) => {
if (R) {
const Y = R.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
Y.length > 0 ? Y[0].focus() : R.focus();
}
}, S = (R) => {
if (!R) return () => {
};
const Y = R.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
), N = Y[0], O = Y[Y.length - 1], H = (Q) => {
Q.key === "Tab" && (Q.shiftKey ? document.activeElement === N && (Q.preventDefault(), O == null || O.focus()) : document.activeElement === O && (Q.preventDefault(), N == null || N.focus()));
};
return R.addEventListener("keydown", H), () => {
R.removeEventListener("keydown", H);
};
};
let k = "";
const w = () => {
a.lockScroll && (k = document.body.style.overflow, document.body.style.overflow = "hidden");
}, E = () => {
a.lockScroll && (document.body.style.overflow = k);
};
let W = null;
return Re(u, async (R) => {
R ? (o.value = document.activeElement, w(), await lt(), setTimeout(() => {
l.value && (B(l.value), W = S(l.value));
}, 100), document.addEventListener("keydown", $)) : (document.removeEventListener("keydown", $), W && (W(), W = null), o.value && o.value.focus && o.value.focus(), E());
}, { immediate: !0 }), He(() => {
document.removeEventListener("keydown", $), W && W(), E();
}), (R, Y) => (m(), Se(ct, { to: "body" }, [
Ge(Ke, {
name: "modal",
appear: ""
}, {
default: je(() => [
u.value ? (m(), y("div", {
key: 0,
class: T(c.value),
style: ce(p.value),
onClick: x
}, [
e.showOverlay ? (m(), y("div", Ic)) : j("", !0),
_("div", {
ref_key: "modalRef",
ref: l,
class: T(d.value),
style: ce(h.value),
role: "dialog",
"aria-modal": "true",
"aria-labelledby": e.title ? s : void 0,
tabindex: "-1",
onClick: Y[0] || (Y[0] = Ae(() => {
}, ["stop"]))
}, [
v.value ? (m(), Se(Ds, {
key: 0,
variant: "text",
size: "sm",
class: "wc-modal__close",
"aria-label": "关闭",
onClick: g
}, {
default: je(() => Y[1] || (Y[1] = [
he(" × ")
])),
_: 1,
__: [1]
})) : j("", !0),
e.title || R.$slots.header ? (m(), y("div", Rc, [
M(R.$slots, "header", {}, () => [
e.title ? (m(), y("h3", {
key: 0,
id: s,
class: "wc-modal__title"
}, I(e.title), 1)) : j("", !0)
], !0)
])) : j("", !0),
_("div", Pc, [
M(R.$slots, "default", {}, void 0, !0)
]),
R.$slots.footer ? (m(), y("div", Dc, [
M(R.$slots, "footer", {}, void 0, !0)
])) : j("", !0)
], 14, Bc)
], 6)) : j("", !0)
]),
_: 3
})
]));
}
}, yp = /* @__PURE__ */ me(Vc, [["__scopeId", "data-v-4ded9ee1"]]), Mc = {
__name: "NumberAnimation",
props: {
value: {
type: Number,
required: !1,
default: void 0
},
from: {
type: Number,
default: 0
},
duration: {
type: Number,
default: 2e3
},
decimals: {
type: Number,
default: 0
},
separator: {
type: String,
default: ""
},
prefix: {
type: String,
default: ""
},
suffix: {
type: String,
default: ""
},
formatter: {
type: Function,
default: null
},
easing: {
type: String,
default: "linear",
validator: (e) => ["linear", "ease-in", "ease-out", "ease-in-out"].includes(e)
},
autoPlay: {
type: Boolean,
default: !0
},
active: {
type: Boolean,
default: void 0
// 如果传入则覆盖 autoPlay
},
to: {
type: Number,
default: void 0
},
precision: {
type: Number,
default: void 0
},
showSeparator: {
type: Boolean,
default: !1
},
locale: {
type: String,
default: ""
}
},
emits: ["complete"],
setup(e, { expose: t, emit: a }) {
const n = e, r = a, s = A(n.from), l = A(!1);
let o = null;
const u = C(() => n.active !== void 0 ? n.active : n.autoPlay), i = C(() => {
const x = ["wc-number-animation"];
return n.easing && x.push(`wc-number-animation--${n.easing}`), (l.value || u.value) && x.push("wc-number-animation--playing"), x;
}), c = C(() => n.to !== void 0 ? n.to : n.value), d = C(() => n.precision !== void 0 ? n.precision : n.decimals), p = C(() => n.showSeparator ? n.separator || "," : n.separator), h = C(() => {
let x = s.value;
if (n.formatter)
return n.formatter(x);
if (d.value > 0 ? x = x.toFixed(d.value) : x = Math.round(x).toString(), p.value) {
const $ = x.toString().split(".");
$[0] = $[0].replace(/\B(?=(\d{3})+(?!\d))/g, p.value), x = $.join(".");
}
return `${n.prefix}${x}${n.suffix}`;
}), v = () => {
const x = Date.now(), $ = s.value, B = c.value, S = B - $;
l.value = !0;
const k = () => {
const w = Date.now() - x, E = Math.min(w / n.duration, 1);
let W = E;
switch (n.easing) {
case "ease-in":
W = E * E;
break;
case "ease-out":
W = 1 - (1 - E) * (1 - E);
break;
case "ease-in-out":
W = E < 0.5 ? 2 * E * E : 1 - Math.pow(-2 * E + 2, 2) / 2;
break;
default:
W = E;
}
s.value = $ + S * W, E < 1 ? typeof window < "u" && window.requestAnimationFrame && !window.vi ? o = requestAnimationFrame(k) : o = setTimeout(k, 16) : (s.value = B, l.value = !1, r("complete"));
};
k();
}, g = () => {
o && (typeof window < "u" && window.requestAnimationFrame && !window.vi ? cancelAnimationFrame(o) : clearTimeout(o), o = null), l.value = !1;
};
return Re(() => c.value, () => {
g(), u.value ? v() : s.value = c.value;
}), Pe(() => {
u.value ? v() : s.value = c.value;
}), He(() => {
g();
}), t({
start: v,
stop: g
}), (x, $) => (m(), y("span", {
class: T(i.value)
}, I(h.value), 3));
}
}, gp = /* @__PURE__ */ me(Mc, [["__scopeId", "data-v-d929cdcb"]]), bp = ({
active: e = !0,
duration: t = 3e3,
from: a = 0,
to: n,
locale: r = "",
precision: s = 0,
showSeparator: l = !1,
prefix: o = "",
suffix: u = "",
separator: i = "",
formatter: c = null,
easing: d = "linear",
onFinish: p,
className: h = "",
style: v = {},
...g
}) => {
const [x, $] = te(a), [B, S] = te(!1), k = Te(null), w = Te(null), E = (O) => {
k.current === null && (k.current = O);
const H = Math.min((O - k.current) / t, 1);
$(a + (n - a) * H), H < 1 && e ? w.current = requestAnimationFrame(E) : ($(n), S(!1), p == null || p());
}, W = () => {
R(), k.current = null, e ? (S(!0), w.current = requestAnimationFrame(E)) : ($(n), S(!1));
}, R = () => {
w.current && (cancelAnimationFrame(w.current), w.current = null);
};
ve(() => (W(), R), [e, a, n, t]);
const Y = (O) => {
if (c)
return c(O);
const H = O.toFixed(s);
let Q = H;
if (l || i)
if (i) {
const q = H.split(".");
q[0] = q[0].replace(/\B(?=(\d{3})+(?!\d))/g, i), Q = q.join(".");
} else
Q = Number(H).toLocaleString(r || void 0, {
minimumFractionDigits: s,
maximumFractionDigits: s
});
return `${o}${Q}${u}`;
}, N = [
"wc-number-animation",
B ? "wc-number-animation--playing" : "",
d && ["ease-in", "ease-out", "ease-in-out"].includes(d) ? `wc-number-animation--${d}` : "",
h
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx("span", { className: N, style: v, ...g, children: Y(x) });
}, Oc = {
name: "Pagination",
props: {
modelValue: {
type: Number,
default: 1
},
currentPage: {
type: Number,
default: 1
},
total: {
type: Number,
required: !0
},
pageSize: {
type: Number,
default: 10
},
siblingCount: {
type: Number,
default: 1
},
boundaryCount: {
type: Number,
default: 1
},
showSizeChanger: {
type: Boolean,
default: !1
},
showQuickJumper: {
type: Boolean,
default: !1
},
pageSizeOptions: {
type: Array,
default: () => [10, 20, 50, 100]
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg", "xl"].includes(e)
}
},
emits: ["update:modelValue", "change", "page-change", "size-change"],
setup(e, { emit: t }) {
const a = A(e.currentPage || e.modelValue);
Re(() => e.modelValue, (c) => {
a.value = c;
}), Re(() => e.currentPage, (c) => {
a.value = c;
});
const n = C(() => {
const c = ["pagination", "wc-pagination"];
return e.size !== "md" && c.push(`wc-pagination--${e.size}`), c;
}), r = C(() => Math.max(1, Math.ceil(e.total / e.pageSize))), s = (c, d) => {
const p = [];
for (let h = c; h <= d; h++) p.push(h);
return p;
}, l = C(() => {
const c = r.value, d = a.value, { siblingCount: p, boundaryCount: h } = e, v = p * 2 + 3 + h * 2;
if (c <= v)
return s(1, c).map((k) => ({ key: k, num: k }));
const g = Math.max(d - p, h + 2), x = Math.min(d + p, c - h - 1), $ = g > h + 2, B = x < c - h - 1, S = [];
for (let k = 1; k <= h; k++) S.push({ key: "b" + k, num: k });
$ && S.push({ key: "l-ellipsis", ellipsis: !0 });
for (let k = g; k <= x; k++) S.push({ key: "m" + k, num: k });
B && S.push({ key: "r-ellipsis", ellipsis: !0 });
for (let k = c - h + 1; k <= c; k++) S.push({ key: "e" + k, num: k });
return S;
}), o = (c) => {
c < 1 || c > r.value || c === a.value || (a.value = c, t("update:modelValue", c), t("change", c), t("page-change", c));
};
return {
currentPageInternal: a,
pageCount: r,
pageItems: l,
select: o,
paginationClasses: n,
handleSizeChange: (c) => {
const d = parseInt(c.target.value);
t("size-change", d);
},
handleQuickJump: (c) => {
const d = parseInt(c.target.value);
d >= 1 && d <= r.value && (o(d), c.target.value = "");
}
};
}
}, Ac = ["disabled"], Lc = ["onClick"], zc = {
key: 1,
class: "page-ellipsis wc-page-ellipsis"
}, Fc = ["disabled"], qc = {
key: 0,
class: "wc-pagination-size-selector"
}, Wc = ["value", "selected"], Hc = {
key: 1,
class: "wc-pagination-quick-jumper"
}, Uc = ["max"];
function Yc(e, t, a, n, r, s) {
return n.pageCount > 1 ? (m(), y("nav", {
key: 0,
class: T(n.paginationClasses),
"aria-label": "分页导航"
}, [
_("button", {
class: "page-btn wc-page-btn wc-page-btn--prev wc-page-btn--nav",
disabled: n.currentPageInternal === 1,
"aria-label": "上一页",
onClick: t[0] || (t[0] = (l) => n.select(n.currentPageInternal - 1))
}, " ‹ ", 8, Ac),
(m(!0), y(ke, null, Ce(n.pageItems, (l) => (m(), y(ke, {
key: l.key
}, [
l.ellipsis ? (m(), y("span", zc, "…")) : (m(), y("button", {
key: 0,
class: T(["page-btn", "wc-page-btn", { active: l.num === n.currentPageInternal, "wc-page-btn--active": l.num === n.currentPageInternal }]),
onClick: (o) => n.select(l.num)
}, I(l.num), 11, Lc))
], 64))), 128)),
_("button", {
class: "page-btn wc-page-btn wc-page-btn--next wc-page-btn--nav",
disabled: n.currentPageInternal === n.pageCount,
"aria-label": "下一页",
onClick: t[1] || (t[1] = (l) => n.select(n.currentPageInternal + 1))
}, " › ", 8, Fc),
a.showSizeChanger ? (m(), y("div", qc, [
_("select", {
onChange: t[2] || (t[2] = (...l) => n.handleSizeChange && n.handleSizeChange(...l))
}, [
(m(!0), y(ke, null, Ce(a.pageSizeOptions, (l) => (m(), y("option", {
key: l,
value: l,
selected: l === a.pageSize
}, I(l) + " / 页 ", 9, Wc))), 128))
], 32)
])) : j("", !0),
a.showQuickJumper ? (m(), y("div", Hc, [
t[4] || (t[4] = _("span", null, "跳转到", -1)),
_("input", {
type: "number",
min: 1,
max: n.pageCount,
placeholder: "页码",
onKeyup: t[3] || (t[3] = We((...l) => n.handleQuickJump && n.handleQuickJump(...l), ["enter"]))
}, null, 40, Uc)
])) : j("", !0)
], 2)) : j("", !0);
}
const wp = /* @__PURE__ */ me(Oc, [["render", Yc]]);
function xp({
value: e = 1,
onChange: t,
total: a,
pageSize: n = 10,
siblingCount: r = 1,
boundaryCount: s = 1,
size: l = "md",
// sm | md | lg | xl
className: o = "",
...u
}) {
const [i, c] = te(e);
ve(() => {
c(e);
}, [e]);
const d = Oe(() => Math.max(1, Math.ceil(a / n)), [a, n]), p = (x, $) => {
const B = [];
for (let S = x; S <= $; S++) B.push(S);
return B;
}, h = Oe(() => {
const x = r * 2 + 3 + s * 2;
if (d <= x)
return p(1, d).map((E) => ({ key: E, num: E }));
const $ = Math.max(i - r, s + 2), B = Math.min(i + r, d - s - 1), S = $ > s + 2, k = B < d - s - 1, w = [];
for (let E = 1; E <= s; E++) w.push({ key: "b" + E, num: E });
S && w.push({ key: "l-ellipsis", ellipsis: !0 });
for (let E = $; E <= B; E++) w.push({ key: "m" + E, num: E });
k && w.push({ key: "r-ellipsis", ellipsis: !0 });
for (let E = d - s + 1; E <= d; E++) w.push({ key: "e" + E, num: E });
return w;
}, [i, d, r, s]), v = Ot(
(x) => {
x < 1 || x > d || x === i || (c(x), t == null || t(x));
},
[i, d, t]
);
if (d <= 1) return null;
const g = [
"pagination",
"wc-pagination",
l !== "md" ? `wc-pagination--${l}` : "",
o
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsxs("nav", { className: g, "aria-label": "分页导航", ...u, children: [
/* @__PURE__ */ f.jsx(
"button",
{
className: "page-btn wc-page-btn wc-page-btn--prev wc-page-btn--nav",
disabled: i === 1,
onClick: () => v(i - 1),
"aria-label": "上一页",
children: "‹"
}
),
h.map(
(x) => x.ellipsis ? /* @__PURE__ */ f.jsx("span", { className: "page-ellipsis", children: "…" }, x.key) : /* @__PURE__ */ f.jsx(
"button",
{
className: `page-btn wc-page-btn${x.num === i ? " active wc-page-btn--active" : ""}`,
onClick: () => v(x.num),
children: x.num
},
x.key
)
),
/* @__PURE__ */ f.jsx(
"button",
{
className: "page-btn wc-page-btn wc-page-btn--next wc-page-btn--nav",
disabled: i === d,
onClick: () => v(i + 1),
"aria-label": "下一页",
children: "›"
}
)
] });
}
const kp = {
__name: "Paper",
props: {
elevation: {
type: Number,
default: 1,
validator: (e) => e >= 0 && e <= 24
},
variant: {
type: String,
default: "elevation",
validator: (e) => ["elevation", "outlined"].includes(e)
},
square: {
type: Boolean,
default: !1
},
rounded: {
type: Boolean,
default: !1
},
component: {
type: String,
default: "div"
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-paper transition-all duration-250 bg-[var(--wc-neutral-0)] dark:bg-[var(--wc-neutral-800)]"];
return t.variant === "outlined" ? (r.push("wc-paper--outlined"), r.push("border border-[var(--wc-neutral-200)] dark:border-[var(--wc-neutral-700)]")) : t.elevation > 0 && (r.push(`wc-paper--elevation-${t.elevation}`), r.push("border border-[var(--wc-neutral-200)] dark:border-[var(--wc-neutral-700)]")), t.rounded && r.push("wc-paper--rounded"), !t.square && !t.rounded && r.push("rounded-lg"), r;
});
return (n, r) => (m(), Se(ze(e.component), {
class: T(a.value)
}, {
default: je(() => [
M(n.$slots, "default")
]),
_: 3
}, 8, ["class"]));
}
}, Ca = {
ELEVATION: "elevation",
OUTLINED: "outlined"
}, Gc = {
SQUARE: "square",
ROUNDED_SM: "rounded-sm",
ROUNDED_LG: "rounded-lg",
ROUNDED_XL: "rounded-xl",
ROUNDED_2XL: "rounded-2xl",
ROUNDED_FULL: "rounded-full"
}, Kc = {
SM: "sm",
MD: "md",
LG: "lg",
XL: "xl"
}, Dt = {
DEFAULT: "default",
PRIMARY: "primary",
SUCCESS: "success",
WARNING: "warning",
ERROR: "error",
INFO: "info"
};
function Jc(e = {}) {
const {
variant: t = Ca.ELEVATION,
elevation: a = 1,
square: n = !1,
shape: r = null,
size: s = null,
color: l = Dt.DEFAULT,
hoverable: o = !1,
clickable: u = !1,
gradient: i = !1,
frosted: c = !1,
textured: d = !1,
className: p = ""
} = e, h = ["wc-paper"];
if (t === Ca.OUTLINED)
h.push("wc-paper--outlined");
else {
h.push("wc-paper--elevation");
const v = Math.max(0, Math.min(24, Math.floor(Number(a) || 0)));
h.push(`wc-paper--elevation-${v}`);
}
return n ? h.push("wc-paper--square") : r && Gc[r.toUpperCase()] && h.push(`wc-paper--${r}`), s && Kc[s.toUpperCase()] && h.push(`wc-paper--${s}`), l !== Dt.DEFAULT && Dt[l.toUpperCase()] && h.push(`wc-paper--${l}`), o && h.push("wc-paper--hoverable"), u && h.push("wc-paper--clickable"), i && h.push("wc-paper--gradient"), c && h.push("wc-paper--frosted"), d && h.push("wc-paper--textured"), p && h.push(p), h.join(" ");
}
function _p({
variant: e = "elevation",
elevation: t = 1,
square: a = !1,
hoverable: n = !1,
clickable: r = !1,
color: s = "default",
size: l = null,
className: o = "",
children: u,
onClick: i,
onMouseEnter: c,
onMouseLeave: d,
...p
}) {
const h = Math.max(0, Math.min(24, Math.floor(Number(t) || 0))), v = Jc({
variant: e,
elevation: h,
square: a,
hoverable: n,
clickable: r,
color: s,
size: l,
className: o
}), g = (x) => {
r && i && i(x);
};
return /* @__PURE__ */ f.jsx(
"div",
{
className: v,
onClick: g,
onMouseEnter: c,
onMouseLeave: d,
style: {
cursor: r ? "pointer" : "default",
...p.style
},
...p,
children: u
}
);
}
const Xc = ["title"], Cp = /* @__PURE__ */ Fe({
__name: "Paradox",
props: {
/** 显示的悖论文本 */
content: {
type: String,
default: "这句话是假。"
},
/** 鼠标悬停提示 */
tooltip: {
type: String,
default: "若此句为真，则为假；若此句为假，则为真。"
},
/** 是否启用动画 */
animated: {
type: Boolean,
default: !1
},
/** 变换类型 */
transform: {
type: String,
default: "none",
validator: (e) => ["none", "rotate", "scale", "skew"].includes(e)
},
/** 动画速度 */
speed: {
type: String,
default: "normal",
validator: (e) => ["slow", "normal", "fast"].includes(e)
},
/** 是否启用悬停效果 */
hoverEffect: {
type: Boolean,
default: !1
},
/** 是否无限循环 */
infinite: {
type: Boolean,
default: !1
}
},
setup(e, { expose: t }) {
const a = e, n = A(!1), r = A(!1), s = A(0);
let l = null;
const o = C(() => {
const v = ["wc-paradox"];
return a.animated && v.push("wc-paradox--animated"), a.transform !== "none" && v.push(`wc-paradox--${a.transform}`), a.speed !== "normal" && v.push(`wc-paradox--${a.speed}`), a.hoverEffect && n.value && v.push("wc-paradox--hover"), v;
}), u = () => {
a.hoverEffect && (n.value = !0);
}, i = () => {
a.hoverEffect && (n.value = !1);
}, c = () => {
if (a.animated && !r.value && a.infinite) {
const v = () => {
s.value = (s.value + 1) % 360, r.value || (l = requestAnimationFrame(v));
};
l = requestAnimationFrame(v);
}
};
return t({
pause: () => {
r.value = !0, l && (cancelAnimationFrame(l), l = null);
},
resume: () => {
r.value = !1, c();
},
reset: () => {
s.value = 0, l && (cancelAnimationFrame(l), l = null);
},
isPaused: r,
currentFrame: s,
infinite: C(() => a.infinite)
}), Pe(() => {
a.animated && a.infinite && c();
}), He(() => {
l && cancelAnimationFrame(l);
}), (v, g) => (m(), y("div", {
class: T(o.value),
title: e.tooltip,
onMouseenter: u,
onMouseleave: i
}, [
M(v.$slots, "default", {}, () => [
he(I(e.content), 1)
])
], 42, Xc));
}
});
function Sp({ content: e = "这句话是假。", tooltip: t = "若此句为真，则为假；若此句为假，则为真。", className: a = "" }) {
return /* @__PURE__ */ f.jsx("blockquote", { className: `wc-paradox ${a}`.trim(), title: t, children: e });
}
const Qc = {
name: "Popover",
directives: {
outside: {
beforeMount(e, t) {
e.__clickOutside__ = (a) => {
e.contains(a.target) || t.value(a);
}, document.addEventListener("mousedown", e.__clickOutside__);
},
unmounted(e) {
document.removeEventListener("mousedown", e.__clickOutside__);
}
}
},
props: {
modelValue: {
type: Boolean,
default: !1
},
triggerText: {
type: String,
default: "打开弹窗"
},
placement: {
type: String,
default: "bottom",
validator: (e) => ["top", "bottom", "left", "right"].includes(e)
},
offset: {
type: Number,
default: 8
}
},
emits: ["update:modelValue", "open", "close"],
setup(e, { emit: t }) {
const a = A(e.modelValue), n = A(null), r = A(null), s = () => {
a.value || (a.value = !0, t("update:modelValue", !0), t("open"), lt(u));
}, l = () => {
a.value && (a.value = !1, t("update:modelValue", !1), t("close"));
}, o = () => {
a.value ? l() : s();
}, u = () => {
const i = n.value, c = r.value;
if (!i || !c) return;
const d = i.getBoundingClientRect(), p = c.getBoundingClientRect(), { placement: h, offset: v } = e;
let g = 0, x = 0;
switch (h) {
case "top":
g = d.top - p.height - v, x = d.left + (d.width - p.width) / 2;
break;
case "bottom":
g = d.bottom + v, x = d.left + (d.width - p.width) / 2;
break;
case "left":
g = d.top + (d.height - p.height) / 2, x = d.left - p.width - v;
break;
case "right":
g = d.top + (d.height - p.height) / 2, x = d.right + v;
break;
}
c.style.top = `${g + window.scrollY}px`, c.style.left = `${x + window.scrollX}px`;
};
return Pe(() => {
a.value && lt(u), window.addEventListener("resize", u), window.addEventListener("scroll", u);
}), Ze(() => {
window.removeEventListener("resize", u), window.removeEventListener("scroll", u);
}), { isOpen: a, open: s, close: l, toggle: o, triggerWrapper: n, popoverRef: r };
}
}, Zc = {
ref: "triggerWrapper",
class: "popover-container"
}, eu = ["aria-expanded"];
function tu(e, t, a, n, r, s) {
return m(), y("div", Zc, [
M(e.$slots, "trigger", {
open: n.open,
close: n.close
}, () => [
_("button", {
class: "popover-trigger",
"aria-expanded": n.isOpen.toString(),
onClick: t[0] || (t[0] = (...l) => n.toggle && n.toggle(...l))
}, I(a.triggerText), 9, eu)
]),
(m(), Se(ct, { to: "body" }, [
Ge(Ke, { name: "popover-fade" }, {
default: je(() => [
n.isOpen ? (m(), y("div", {
key: 0,
ref: "popoverRef",
class: T(["popover-content", [`popover-${a.placement}`]]),
role: "dialog",
onClick: t[1] || (t[1] = (...l) => n.close && n.close(...l))
}, [
M(e.$slots, "default", {}, () => [
t[2] || (t[2] = he(" 这是默认的弹出内容。 "))
])
], 2)) : j("", !0)
]),
_: 3
})
]))
], 512);
}
const $p = /* @__PURE__ */ me(Qc, [["render", tu]]);
function jp({
open: e,
onOpenChange: t,
triggerText: a = "打开弹窗",
trigger: n,
placement: r = "bottom",
offset: s = 8,
children: l,
className: o = ""
}) {
const [u, i] = te(e ?? !1), c = e !== void 0, d = Te(null), p = Te(null), h = c ? e : u, v = (k) => {
c || i(k), t == null || t(k);
}, g = () => v(!1), x = () => v(!h), $ = Ot(() => {
const k = d.current, w = p.current;
if (!k || !w) return;
const E = k.getBoundingClientRect(), W = w.getBoundingClientRect();
let R = 0, Y = 0;
switch (r) {
case "top":
R = E.top - W.height - s, Y = E.left + (E.width - W.width) / 2;
break;
case "bottom":
R = E.bottom + s, Y = E.left + (E.width - W.width) / 2;
break;
case "left":
R = E.top + (E.height - W.height) / 2, Y = E.left - W.width - s;
break;
case "right":
R = E.top + (E.height - W.height) / 2, Y = E.right + s;
break;
}
w.style.top = `${R + window.scrollY}px`, w.style.left = `${Y + window.scrollX}px`;
}, [r, s]);
ve(() => (h && ($(), window.addEventListener("resize", $), window.addEventListener("scroll", $), document.addEventListener("mousedown", B)), () => {
window.removeEventListener("resize", $), window.removeEventListener("scroll", $), document.removeEventListener("mousedown", B);
}), [h, $]);
const B = (k) => {
p.current && !p.current.contains(k.target) && !d.current.contains(k.target) && g();
}, S = n ? dt.cloneElement(n, {
ref: d,
onClick: x,
"aria-expanded": h
}) : /* @__PURE__ */ f.jsx("button", { ref: d, className: "popover-trigger", onClick: x, "aria-expanded": h, children: a });
return /* @__PURE__ */ f.jsxs("div", { className: o, style: { display: "inline-block" }, children: [
S,
h && dr.createPortal(
/* @__PURE__ */ f.jsx("div", { ref: p, className: `popover-content popover-${r}`.trim(), role: "dialog", children: l }),
document.body
)
] });
}
const au = {
name: "PricingTable",
props: {
plans: { type: Array, default: () => [] },
columns: { type: Number, default: 3 }
},
computed: {
gridStyle() {
return { gridTemplateColumns: `repeat(${this.columns}, minmax(0,1fr))` };
}
}
}, nu = { class: "plan-name" }, ru = { class: "plan-price" }, su = { class: "plan-features" }, lu = { class: "plan-btn" };
function ou(e, t, a, n, r, s) {
return m(), y("div", {
class: "pricing-grid",
style: ce(s.gridStyle)
}, [
(m(!0), y(ke, null, Ce(a.plans, (l) => (m(), y("div", {
key: l.name,
class: T(["plan-card", { popular: l.popular }])
}, [
_("h3", nu, I(l.name), 1),
_("p", ru, I(l.price), 1),
_("ul", su, [
(m(!0), y(ke, null, Ce(l.features, (o) => (m(), y("li", { key: o }, I(o), 1))), 128))
]),
_("button", lu, I(l.button || "选择"), 1)
], 2))), 128))
], 4);
}
const Np = /* @__PURE__ */ me(au, [["render", ou]]);
function Tp({ plans: e = [], columns: t = 3, className: a = "" }) {
const n = {
gridTemplateColumns: `repeat(${t}, minmax(0,1fr))`
};
return /* @__PURE__ */ f.jsx("div", { className: `pricing-grid ${a}`.trim(), style: n, children: e.map((r) => {
var s;
return /* @__PURE__ */ f.jsxs("div", { className: `plan-card${r.popular ? " popular" : ""}`, children: [
/* @__PURE__ */ f.jsx("h3", { className: "plan-name", children: r.name }),
/* @__PURE__ */ f.jsx("p", { className: "plan-price", children: r.price }),
/* @__PURE__ */ f.jsx("ul", { className: "plan-features", children: (s = r.features) == null ? void 0 : s.map((l) => /* @__PURE__ */ f.jsx("li", { children: l }, l)) }),
/* @__PURE__ */ f.jsx("button", { className: "plan-btn", children: r.button || "选择" })
] }, r.name);
}) });
}
const iu = { class: "wc-progress-wrapper" }, cu = {
key: 0,
class: "wc-progress-header"
}, uu = {
key: 0,
class: "wc-progress-label"
}, du = {
key: 1,
class: "wc-progress-percent"
}, fu = {
__name: "Progress",
props: {
value: {
type: Number,
default: 0,
validator: (e) => e >= 0 && e <= 100
},
label: {
type: String,
default: ""
},
showPercent: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "success", "warning", "error", "purple", "orange", "cyan", "pink"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
animated: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(() => ["wc-progress", `wc-progress--${t.size}`]), n = C(() => [
"wc-progress__bar",
`wc-progress__bar--${t.color}`,
t.animated && "wc-progress__bar--animated"
].filter(Boolean)), r = C(() => ({
width: `${Math.max(0, Math.min(100, t.value))}%`
}));
return (s, l) => (m(), y("div", iu, [
e.label || e.showPercent ? (m(), y("div", cu, [
e.label ? (m(), y("label", uu, I(e.label), 1)) : j("", !0),
e.showPercent ? (m(), y("span", du, I(Math.round(e.value)) + "% ", 1)) : j("", !0)
])) : j("", !0),
_("div", {
class: T(a.value)
}, [
_("div", {
class: T(n.value),
style: ce(r.value)
}, null, 6)
], 2)
]));
}
}, Ep = /* @__PURE__ */ me(fu, [["__scopeId", "data-v-3a9eaee4"]]), pu = ({
value: e = 0,
label: t = "",
showPercent: a = !1,
color: n = "primary",
size: r = "md",
animated: s = !1,
className: l = "",
...o
}) => {
const i = ["primary", "success", "warning", "error", "purple", "orange", "cyan", "pink"].includes(n) ? n : "primary", c = Math.max(0, Math.min(100, e)), d = ["wc-progress", `wc-progress--${r}`], p = [
"wc-progress__bar",
`wc-progress__bar--${i}`,
s && "wc-progress__bar--animated"
].filter(Boolean).join(" "), h = {
width: `${c}%`
};
return /* @__PURE__ */ f.jsxs("div", { className: `wc-progress-wrapper ${l}`, ...o, children: [
(t || a) && /* @__PURE__ */ f.jsxs("div", { className: "wc-progress-header", children: [
t && /* @__PURE__ */ f.jsx("label", { className: "wc-progress-label", children: t }),
a && /* @__PURE__ */ f.jsxs("span", { className: "wc-progress-percent", children: [
Math.round(c),
"%"
] })
] }),
/* @__PURE__ */ f.jsx("div", { className: d.join(" "), children: /* @__PURE__ */ f.jsx(
"div",
{
className: p,
style: h
}
) })
] });
};
pu.displayName = "Progress";
const mu = ["name", "value", "checked", "disabled"], hu = {
key: 0,
class: "radio-dot"
}, vu = {
key: 0,
class: "radio-label"
}, Ip = {
__name: "Radio",
props: {
modelValue: {
type: [String, Number, Boolean],
default: null
},
value: {
type: [String, Number, Boolean],
required: !0
},
name: {
type: String,
default: ""
},
label: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "success", "error", "warning", "info"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = Le("radioGroup", null), s = A(!1), l = C(() => r ? r.modelValue.value === a.value : a.modelValue === a.value);
C(() => r ? r.name.value : a.name);
const o = C(() => r && r.disabled.value || a.disabled), u = C(() => {
const v = ["wc-radio"];
return v.push(`wc-radio--${a.size}`), o.value && v.push("wc-radio--disabled"), s.value && v.push("wc-radio--focused"), v;
}), i = C(() => ["wc-radio__input"]), c = C(() => {
const v = ["wc-radio__button"];
return v.push(`wc-radio__button--${a.color}`), v.push(`wc-radio__button--${a.size}`), l.value && v.push("wc-radio__button--checked"), v;
}), d = (v) => {
if (o.value) return;
const g = a.value;
r ? r.updateValue(g) : n("update:modelValue", g), n("change", g);
}, p = () => {
s.value = !0;
}, h = () => {
s.value = !1;
};
return (v, g) => (m(), y("label", {
class: T(u.value)
}, [
_("input", {
type: "radio",
name: e.name,
value: e.value,
checked: l.value,
disabled: e.disabled,
class: T(i.value),
onChange: d,
onFocus: p,
onBlur: h
}, null, 42, mu),
_("span", {
class: T(c.value)
}, [
l.value ? (m(), y("span", hu)) : j("", !0)
], 2),
v.$slots.default || e.label ? (m(), y("span", vu, [
M(v.$slots, "default", {}, () => [
he(I(e.label), 1)
])
])) : j("", !0)
], 2));
}
}, yn = ft(null);
function Bp({ value: e, onChange: t, name: a, disabled: n = !1, children: r, className: s = "" }) {
const [l, o] = te(e), u = e !== void 0, i = u ? e : l, c = Ot(
(d) => {
n || (u || o(d), t == null || t(d));
},
[n, u, t]
);
return /* @__PURE__ */ f.jsx(yn.Provider, { value: { value: i, updateValue: c, name: a, disabled: n }, children: /* @__PURE__ */ f.jsx("div", { className: s, children: r }) });
}
function Rp({
value: e,
checked: t,
onChange: a,
label: n,
name: r,
disabled: s = !1,
color: l = "primary",
size: o = "md",
className: u = "",
children: i,
...c
}) {
const d = qe(yn), p = d ? d.value === e : t !== void 0 ? t : void 0, h = d ? d.name : r, v = d && d.disabled || s, g = (x) => {
v || (d ? d.updateValue(e) : a == null || a(e));
};
return /* @__PURE__ */ f.jsxs(
"label",
{
className: `wc-radio wc-radio--${o}${v ? " wc-radio--disabled" : ""} ${u}`.trim(),
children: [
/* @__PURE__ */ f.jsx(
"input",
{
type: "radio",
className: "wc-radio__input",
name: h,
value: e,
checked: p,
disabled: v,
onChange: g,
...c
}
),
/* @__PURE__ */ f.jsx("span", { className: `wc-radio__button wc-radio__button--${l} wc-radio__button--${o}${p ? " wc-radio__button--checked" : ""}` }),
(i || n) && /* @__PURE__ */ f.jsx("span", { className: "radio-label", children: i || n })
]
}
);
}
const yu = { class: "wc-radio-group" }, gu = {
key: 0,
class: "wc-radio-group-label"
}, bu = {
key: 0,
class: "text-error-500"
}, wu = {
key: 1,
class: "mt-2"
}, xu = {
key: 0,
class: "text-sm text-error-500"
}, ku = {
key: 1,
class: "text-sm text-neutral-500"
}, Pp = {
__name: "RadioGroup",
props: {
modelValue: {
type: [String, Number, Boolean],
default: ""
},
name: {
type: String,
required: !0
},
label: {
type: String,
default: ""
},
row: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
},
error: {
type: String,
default: ""
},
helperText: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "secondary", "success", "warning", "error"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(() => {
const l = ["wc-radio-group-content"];
return a.row ? l.push("flex flex-wrap gap-4") : l.push("space-y-2"), l;
});
return it("radioGroupContext", {
modelValue: a.modelValue,
name: a.name,
disabled: a.disabled,
size: a.size,
color: a.color,
updateValue: (s) => {
n("update:modelValue", s), n("change", s);
}
}), (s, l) => (m(), y("div", yu, [
e.label ? (m(), y("label", gu, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", bu, "*")) : j("", !0)
])) : j("", !0),
_("div", {
class: T(r.value)
}, [
M(s.$slots, "default")
], 2),
e.error || e.helperText ? (m(), y("div", wu, [
e.error ? (m(), y("p", xu, I(e.error), 1)) : e.helperText ? (m(), y("p", ku, I(e.helperText), 1)) : j("", !0)
])) : j("", !0)
]));
}
}, _u = {
name: "Rating",
props: {
modelValue: {
type: Number,
default: 0
},
max: {
type: Number,
default: 5
},
readonly: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = A(e.modelValue), n = A(0);
return Re(() => e.modelValue, (l) => a.value = l), { internalValue: a, hovered: n, select: (l) => {
if (e.readonly) return;
const o = l === a.value ? 0 : l;
a.value = o, t("update:modelValue", o), t("change", o);
}, hover: (l) => {
e.readonly || (n.value = l);
} };
}
}, Cu = {
class: "rating",
role: "radiogroup",
"aria-label": "评分组件"
}, Su = ["aria-checked", "disabled", "onMouseenter", "onClick"];
function $u(e, t, a, n, r, s) {
return m(), y("div", Cu, [
(m(!0), y(ke, null, Ce(a.max, (l) => (m(), y("button", {
key: l,
class: T(["rating-item", l <= n.hovered || l <= n.internalValue ? "active" : ""]),
"aria-checked": l === n.internalValue ? "true" : "false",
role: "radio",
disabled: a.readonly,
onMouseenter: (o) => n.hover(l),
onMouseleave: t[0] || (t[0] = (o) => n.hover(0)),
onClick: (o) => n.select(l)
}, " ★ ", 42, Su))), 128))
]);
}
const Dp = /* @__PURE__ */ me(_u, [["render", $u]]), Vp = ({ value: e = 0, max: t = 5, readOnly: a = !1, onChange: n = () => {
}, className: r = "", style: s = {}, ...l }) => {
const [o, u] = te(0), [i, c] = te(e);
ve(() => c(e), [e]), ve(() => {
if (document.getElementById("wc-rating-style")) return;
const v = document.createElement("style");
v.id = "wc-rating-style", v.innerHTML = `
.wc-rating{display:inline-flex;gap:4px;}
.wc-rating-item{background:none;border:none;cursor:pointer;font-size:1.5rem;line-height:1;padding:0;color:var(--wc-neutral-300);transition:color 0.2s ease;}
.wc-rating-item.active{color:var(--wc-warning-500);}
.wc-rating-item:hover{transform:scale(1.1);}
.wc-rating-item:disabled{cursor:default;}
.dark .wc-rating-item{color:var(--wc-neutral-500);}
.dark .wc-rating-item.active{color:var(--wc-warning-400);}
`, document.head.appendChild(v);
}, []);
const d = (v) => {
if (a) return;
const g = v === i ? 0 : v;
c(g), n(g);
}, p = (v) => {
a || u(v);
}, h = [];
for (let v = 1; v <= t; v++) {
const g = v <= o || v <= i;
h.push(
/* @__PURE__ */ f.jsx(
"button",
{
type: "button",
className: `wc-rating-item ${g ? "active" : ""}`,
onMouseEnter: () => p(v),
onMouseLeave: () => p(0),
onClick: () => d(v),
disabled: a,
"aria-checked": v === i,
role: "radio",
children: g ? "★" : "☆"
},
v
)
);
}
return /* @__PURE__ */ f.jsx("div", { className: `wc-rating ${r}`, role: "radiogroup", "aria-label": "评分组件", style: s, ...l, children: h });
}, ju = { class: "wc-select" }, Nu = ["for"], Tu = {
key: 0,
class: "wc-select__required"
}, Eu = { class: "wc-select__value" }, Iu = { key: 0 }, Bu = {
key: 1,
class: "wc-select__placeholder"
}, Ru = { class: "wc-select__indicators" }, Pu = {
key: 1,
class: "wc-select__dropdown"
}, Du = {
key: 0,
class: "wc-select__search"
}, Vu = { class: "wc-select__options" }, Mu = ["onClick"], Ou = { class: "wc-select__option-text" }, Au = {
key: 0,
class: "wc-select__option-check",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2"
}, Lu = {
key: 0,
class: "wc-select__no-options"
}, zu = { key: 2 }, Fu = {
key: 0,
class: "wc-select__error"
}, qu = {
key: 1,
class: "wc-select__helper"
}, Mp = {
__name: "Select",
props: {
modelValue: {
type: [String, Number, Array],
default: null
},
options: {
type: Array,
default: () => []
},
label: {
type: String,
default: ""
},
placeholder: {
type: String,
default: "请选择..."
},
disabled: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
error: {
type: String,
default: ""
},
helperText: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
variant: {
type: String,
default: "outlined",
validator: (e) => ["outlined", "filled", "standard"].includes(e)
},
multiple: {
type: Boolean,
default: !1
},
searchable: {
type: Boolean,
default: !1
},
valueKey: {
type: String,
default: "value"
},
labelKey: {
type: String,
default: "label"
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = ut(), s = A(`select-${(r == null ? void 0 : r.uid) || Math.random().toString(36).substr(2, 9)}`), l = A(!1), o = A(""), u = C(() => {
const S = ["wc-select__label"];
return S.push(`wc-select__label--${a.size}`), a.error && S.push("wc-select__label--error"), S;
}), i = C(() => {
const S = ["wc-select__container"];
return S.push(`wc-select__container--${a.variant}`), S.push(`wc-select__container--${a.size}`), a.disabled && S.push("wc-select__container--disabled"), a.error && S.push("wc-select__container--error"), l.value && S.push("wc-select__container--open"), S;
}), c = C(() => !a.searchable || !o.value ? a.options : a.options.filter((S) => h(S).toLowerCase().includes(o.value.toLowerCase()))), d = C(() => {
if (a.multiple && Array.isArray(a.modelValue)) {
if (a.modelValue.length === 0) return "";
if (a.modelValue.length === 1) {
const S = a.options.find((k) => p(k) === a.modelValue[0]);
return S ? h(S) : "";
}
return `已选择 ${a.modelValue.length} 项`;
} else {
const S = a.options.find((k) => p(k) === a.modelValue);
return S ? h(S) : "";
}
}), p = (S) => typeof S == "object" ? S[a.valueKey] : S, h = (S) => typeof S == "object" ? S[a.labelKey] : S, v = (S) => {
const k = p(S);
return a.multiple && Array.isArray(a.modelValue) ? a.modelValue.includes(k) : a.modelValue === k;
}, g = (S) => {
const k = ["wc-select__option"];
return v(S) && k.push("wc-select__option--selected"), k;
}, x = () => {
a.disabled || (l.value = !l.value, l.value && (o.value = ""));
}, $ = (S) => {
const k = p(S);
if (a.multiple) {
const w = Array.isArray(a.modelValue) ? [...a.modelValue] : [], E = w.indexOf(k);
E > -1 ? w.splice(E, 1) : w.push(k), n("update:modelValue", w), n("change", w);
} else
n("update:modelValue", k), n("change", k), l.value = !1;
}, B = (S) => {
S.target.closest(".wc-select") || (l.value = !1);
};
return Pe(() => {
document.addEventListener("click", B);
}), He(() => {
document.removeEventListener("click", B);
}), (S, k) => (m(), y("div", ju, [
e.label ? (m(), y("label", {
key: 0,
for: s.value,
class: T(u.value)
}, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", Tu, "*")) : j("", !0)
], 10, Nu)) : j("", !0),
_("div", {
class: T(i.value),
onClick: x
}, [
_("div", Eu, [
d.value ? (m(), y("span", Iu, I(d.value), 1)) : (m(), y("span", Bu, I(e.placeholder), 1))
]),
_("div", Ru, [
_("div", {
class: T(["wc-select__arrow", { "wc-select__arrow--open": l.value }])
}, k[2] || (k[2] = [
_("svg", {
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
"stroke-width": "2"
}, [
_("polyline", { points: "6,9 12,15 18,9" })
], -1)
]), 2)
])
], 2),
l.value ? (m(), y("div", Pu, [
e.searchable ? (m(), y("div", Du, [
Ea(_("input", {
"onUpdate:modelValue": k[0] || (k[0] = (w) => o.value = w),
class: "wc-select__search-input",
placeholder: "搜索...",
onClick: k[1] || (k[1] = Ae(() => {
}, ["stop"]))
}, null, 512), [
[Ia, o.value]
])
])) : j("", !0),
_("div", Vu, [
(m(!0), y(ke, null, Ce(c.value, (w) => (m(), y("div", {
key: p(w),
class: T(g(w)),
onClick: (E) => $(w)
}, [
_("span", Ou, I(h(w)), 1),
v(w) ? (m(), y("svg", Au, k[3] || (k[3] = [
_("polyline", { points: "20,6 9,17 4,12" }, null, -1)
]))) : j("", !0)
], 10, Mu))), 128)),
c.value.length === 0 ? (m(), y("div", Lu, " 没有找到选项 ")) : j("", !0)
])
])) : j("", !0),
e.error || e.helperText ? (m(), y("div", zu, [
e.error ? (m(), y("p", Fu, I(e.error), 1)) : e.helperText ? (m(), y("p", qu, I(e.helperText), 1)) : j("", !0)
])) : j("", !0)
]));
}
}, Wu = /* @__PURE__ */ Fe({
__name: "Skeleton",
props: {
/** 是否显示加载状态 */
loading: {
type: Boolean,
default: !0
},
/** 动画效果。false 表示无动画，pulse 脉冲动画，wave 波浪动画 */
animation: {
type: [String, Boolean],
default: "pulse",
validator: (e) => [!1, "pulse", "wave"].includes(e)
},
/** 根元素类型 */
component: {
type: String,
default: "div"
},
/** 组件高度，支持 number(px) 或 string */
height: {
type: [String, Number],
default: void 0
},
/** 组件宽度，支持 number(px) 或 string */
width: {
type: [String, Number],
default: void 0
},
/** 形状变体 */
variant: {
type: String,
default: "text",
validator: (e) => ["text", "rectangular", "rounded", "circular"].includes(e)
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-skeleton"];
return r.push(`wc-skeleton--${t.variant}`), t.animation === "pulse" ? r.push("wc-skeleton--pulse") : t.animation === "wave" && r.push("wc-skeleton--wave"), r.join(" ");
}), n = C(() => {
const r = {};
return t.width !== void 0 && (r.width = typeof t.width == "number" ? `${t.width}px` : t.width), t.height !== void 0 && (r.height = typeof t.height == "number" ? `${t.height}px` : t.height), !t.width && !t.height && (t.variant === "circular" ? (r.width = "40px", r.height = "40px") : t.variant === "text" ? (r.width = "100%", r.height = "16px") : (r.width = "100%", r.height = "128px")), r;
});
return (r, s) => e.loading ? (m(), Se(ze(e.component), {
key: 0,
class: T(a.value),
style: ce(n.value),
role: "status",
"aria-live": "polite"
}, null, 8, ["class", "style"])) : M(r.$slots, "default", { key: 1 }, void 0, !0);
}
}), Op = /* @__PURE__ */ me(Wu, [["__scopeId", "data-v-d5fa7567"]]), Sa = {
text: "wc-skeleton--text",
rectangular: "wc-skeleton--rectangular",
rounded: "wc-skeleton--rounded",
circular: "wc-skeleton--circular"
}, Ap = ({ animation: e = "pulse", component: t = "div", height: a, width: n, variant: r = "text", style: s = {}, className: l = "", ...o }) => {
const u = Oe(() => {
const c = ["wc-skeleton", Sa[r] || Sa.text];
return e === "pulse" && c.push("wc-skeleton--pulse"), e === "wave" && c.push("wc-skeleton--wave"), c.join(" ");
}, [e, r]);
ve(() => {
if (!document.getElementById("wc-skeleton-style")) {
const c = document.createElement("style");
c.id = "wc-skeleton-style", c.innerHTML = `
.wc-skeleton{background-color:var(--wc-neutral-200);display:block;position:relative;overflow:hidden;}
.wc-skeleton--text{border-radius:4px;}
.wc-skeleton--rectangular{border-radius:4px;}
.wc-skeleton--rounded{border-radius:8px;}
.wc-skeleton--circular{border-radius:50%;}
.wc-skeleton--pulse{animation:wc-skeleton-pulse 1.5s ease-in-out infinite;}
@keyframes wc-skeleton-pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.wc-skeleton--wave::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:wc-skeleton-wave 1.6s linear infinite;}
@keyframes wc-skeleton-wave{0%{transform:translateX(-100%);}50%{transform:translateX(100%);}100%{transform:translateX(100%);}}
.dark .wc-skeleton{background-color:var(--wc-neutral-700);}
`, document.head.appendChild(c);
}
}, []);
const i = { ...s };
return n !== void 0 && (i.width = typeof n == "number" ? `${n}px` : n), a !== void 0 && (i.height = typeof a == "number" ? `${a}px` : a), !n && !a && (r === "circular" ? (i.width = "40px", i.height = "40px") : r === "text" ? (i.width = "100%", i.height = "16px") : (i.width = "100%", i.height = "128px")), /* @__PURE__ */ f.jsx(t, { className: `${u} ${l}`, style: i, role: "status", "aria-live": "polite", ...o });
}, Hu = { class: "wc-slider" }, Uu = {
key: 0,
class: "wc-slider__label"
}, Yu = ["tabindex", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Gu = {
key: 1,
class: "wc-slider__value"
}, Ku = {
__name: "Slider",
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: ""
},
valueLabelDisplay: {
type: String,
default: "off"
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(null), s = A(!1), l = C(() => (a.modelValue - a.min) / (a.max - a.min) * 100), o = (v) => {
if (a.disabled) return;
const g = Math.round(v / a.step) * a.step, x = Math.min(Math.max(g, a.min), a.max);
n("update:modelValue", x), n("change", x);
}, u = (v) => {
const g = r.value.getBoundingClientRect(), x = Math.max(0, Math.min(1, (v - g.left) / g.width));
return a.min + x * (a.max - a.min);
}, i = (v) => {
if (a.disabled || s.value) return;
const g = u(v.clientX);
o(g);
}, c = (v) => {
a.disabled || (v.preventDefault(), v.stopPropagation(), s.value = !0, document.addEventListener("mousemove", d), document.addEventListener("mouseup", p), document.body.style.userSelect = "none");
}, d = (v) => {
if (!s.value || a.disabled) return;
const g = u(v.clientX);
o(g);
}, p = () => {
s.value = !1, document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", p), document.body.style.userSelect = "";
}, h = (v) => {
if (a.disabled) return;
let g = a.modelValue;
switch (v.key) {
case "ArrowRight":
case "ArrowUp":
g += a.step;
break;
case "ArrowLeft":
case "ArrowDown":
g -= a.step;
break;
case "Home":
g = a.min;
break;
case "End":
g = a.max;
break;
default:
return;
}
v.preventDefault(), o(g);
};
return He(() => {
document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", p), document.body.style.userSelect = "";
}), (v, g) => (m(), y("div", Hu, [
e.label ? (m(), y("div", Uu, I(e.label), 1)) : j("", !0),
_("div", {
ref_key: "sliderTrack",
ref: r,
class: "wc-slider__track",
onClick: i
}, [
g[1] || (g[1] = _("div", { class: "wc-slider__rail" }, null, -1)),
_("div", {
class: "wc-slider__track-active",
style: ce({ width: l.value + "%" })
}, null, 4),
_("div", {
class: "wc-slider__thumb",
style: ce({ left: l.value + "%" }),
tabindex: e.disabled ? -1 : 0,
role: "slider",
"aria-valuemin": e.min,
"aria-valuemax": e.max,
"aria-valuenow": e.modelValue,
onKeydown: h,
onMousedown: c
}, g[0] || (g[0] = [
_("div", { class: "wc-slider__thumb-inner" }, null, -1)
]), 44, Yu)
], 512),
e.valueLabelDisplay !== "off" ? (m(), y("div", Gu, I(e.modelValue), 1)) : j("", !0)
]));
}
}, Lp = /* @__PURE__ */ me(Ku, [["__scopeId", "data-v-950e7a9e"]]), zp = ({ value: e, defaultValue: t = 0, min: a = 0, max: n = 100, step: r = 1, disabled: s = !1, label: l = "", valueLabelDisplay: o = "off", onChange: u = () => {
}, className: i = "", style: c = {}, ...d }) => {
const [p, h] = te(e !== void 0 ? e : t);
ve(() => {
e !== void 0 && h(e);
}, [e]);
const v = ($) => {
const B = Number($.target.value);
e === void 0 && h(B), u(B);
};
ve(() => {
if (document.getElementById("wc-slider-style")) return;
const $ = document.createElement("style");
$.id = "wc-slider-style", $.innerHTML = `
.wc-slider{display:flex;flex-direction:column;gap:8px;width:100%;}
.wc-slider__label{font-size:0.875rem;font-weight:500;color:var(--wc-neutral-700);}
.wc-slider__input{appearance:none;width:100%;height:4px;background:var(--wc-neutral-300);border-radius:2px;outline:none;cursor:pointer;}
.wc-slider__input::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:var(--wc-primary-500);border:2px solid var(--wc-neutral-0);cursor:pointer;}
.wc-slider__input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--wc-primary-500);border:2px solid var(--wc-neutral-0);cursor:pointer;}
.wc-slider__value{font-size:0.875rem;text-align:center;color:var(--wc-neutral-700);}
`, document.head.appendChild($);
}, []);
const g = Oe(() => (p - a) / (n - a) * 100, [p, a, n]), x = {
background: `linear-gradient(to right, var(--wc-primary-500) 0%, var(--wc-primary-500) ${g}%, var(--wc-neutral-300) ${g}%, var(--wc-neutral-300) 100%)`
};
return /* @__PURE__ */ f.jsxs("div", { className: `wc-slider ${i}`, style: c, ...d, children: [
l && /* @__PURE__ */ f.jsx("div", { className: "wc-slider__label", children: l }),
/* @__PURE__ */ f.jsx(
"input",
{
type: "range",
className: "wc-slider__input",
min: a,
max: n,
step: r,
value: p,
onChange: v,
disabled: s,
style: x,
"aria-valuemin": a,
"aria-valuemax": n,
"aria-valuenow": p,
role: "slider"
}
),
o !== "off" && /* @__PURE__ */ f.jsx("div", { className: "wc-slider__value", children: p })
] });
}, Ju = {
name: "SlideOver",
props: {
modelValue: {
type: Boolean,
default: !1
},
placement: {
type: String,
default: "right",
validator: (e) => ["left", "right"].includes(e)
},
width: {
type: [String, Number],
default: "400px"
}
},
emits: ["update:modelValue", "open", "close"],
setup(e, { emit: t }) {
const a = C({
get: () => e.modelValue,
set: (s) => t("update:modelValue", s)
}), n = () => {
a.value = !1, t("close");
}, r = C(() => ({ width: typeof e.width == "number" ? e.width + "px" : e.width }));
return { model: a, close: n, panelStyle: r };
}
}, Xu = {
key: 0,
class: "slideover-header"
}, Qu = { class: "slideover-body" }, Zu = {
key: 1,
class: "slideover-footer"
};
function ed(e, t, a, n, r, s) {
return m(), Se(ct, { to: "body" }, [
Ge(Ke, { name: "slideover" }, {
default: je(() => [
n.model ? (m(), y("div", {
key: 0,
class: "slideover-wrapper",
tabindex: "-1",
onKeydown: t[2] || (t[2] = We((...l) => n.close && n.close(...l), ["esc"]))
}, [
_("div", {
class: "slideover-overlay",
onClick: t[0] || (t[0] = (...l) => n.close && n.close(...l))
}),
_("div", {
class: T(["slideover-panel", [`slideover-${a.placement}`]]),
style: ce(n.panelStyle)
}, [
e.$slots.header ? (m(), y("header", Xu, [
M(e.$slots, "header", {}, void 0, !0)
])) : j("", !0),
_("div", Qu, [
M(e.$slots, "default", {}, void 0, !0)
]),
e.$slots.footer ? (m(), y("footer", Zu, [
M(e.$slots, "footer", {}, void 0, !0)
])) : j("", !0),
_("button", {
class: "slideover-close",
"aria-label": "关闭",
onClick: t[1] || (t[1] = (...l) => n.close && n.close(...l))
}, " ✕ ")
], 6)
], 32)) : j("", !0)
]),
_: 3
})
]);
}
const Fp = /* @__PURE__ */ me(Ju, [["render", ed], ["__scopeId", "data-v-a1e76874"]]), qp = ({ open: e = !1, onClose: t = () => {
}, placement: a = "right", width: n = 400, children: r, header: s, footer: l }) => (ve(() => {
if (!e) return;
const o = (u) => {
u.key === "Escape" && t();
};
return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
}, [e, t]), typeof document > "u" ? null : Ra(
e ? /* @__PURE__ */ f.jsxs("div", { className: "slideover-wrapper", role: "dialog", "aria-modal": "true", children: [
/* @__PURE__ */ f.jsx("div", { className: "slideover-overlay", onClick: t }),
/* @__PURE__ */ f.jsxs(
"div",
{
className: `slideover-panel slideover-${a}`,
style: { width: typeof n == "number" ? `${n}px` : n },
children: [
s && /* @__PURE__ */ f.jsx("header", { className: "slideover-header", children: s }),
/* @__PURE__ */ f.jsx("div", { className: "slideover-body", children: r }),
l && /* @__PURE__ */ f.jsx("footer", { className: "slideover-footer", children: l }),
/* @__PURE__ */ f.jsx("button", { className: "slideover-close", onClick: t, "aria-label": "关闭", children: "✕" })
]
}
),
/* @__PURE__ */ f.jsx("style", { children: `
.slideover-wrapper{position:fixed;inset:0;z-index:3000;display:flex;}
.slideover-overlay{flex:1 1 auto;background:rgba(0,0,0,0.4);backdrop-filter:blur(2px);}
.slideover-panel{position:relative;background:var(--wc-neutral-0);max-height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
.slideover-left{order:0;} .slideover-right{order:1;}
.slideover-close{position:absolute;top:8px;right:8px;background:none;border:none;font-size:1.25rem;cursor:pointer;}
.slideover-header,.slideover-footer{padding:16px;border-bottom:1px solid var(--wc-neutral-200);}
.slideover-footer{border-top:1px solid var(--wc-neutral-200);border-bottom:none;}
.slideover-body{padding:16px;flex:1 1 auto;}
.slideover-enter{opacity:0;transform:translateX(${a === "right" ? "100%" : "-100%"});}
` })
] }) : null,
document.body
)), td = { class: "flex items-start gap-3 w-full" }, ad = { class: "flex-1 min-w-0" }, nd = {
key: 0,
class: "font-semibold text-sm mb-1 leading-tight"
}, rd = { class: "text-sm" }, sd = {
key: 1,
class: "flex-shrink-0"
}, ld = {
key: 2,
class: "flex-shrink-0"
}, od = {
key: 0,
class: "mt-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1"
}, Wp = {
__name: "Snackbar",
props: {
open: {
type: Boolean,
default: !1
},
modelValue: {
type: Boolean,
default: void 0
},
message: {
type: String,
default: ""
},
title: {
type: String,
default: ""
},
autoHideDuration: {
type: Number,
default: 6e3
},
anchorOrigin: {
type: Object,
default: () => ({ vertical: "bottom", horizontal: "left" })
},
severity: {
type: String,
default: "info",
validator: (e) => ["success", "info", "warning", "error"].includes(e)
},
variant: {
type: String,
default: "filled",
validator: (e) => ["filled", "outlined", "standard"].includes(e)
},
action: {
type: String,
default: ""
},
closable: {
type: Boolean,
default: !0
},
showIcon: {
type: Boolean,
default: !0
},
showProgress: {
type: Boolean,
default: !1
}
},
emits: ["close", "action", "update:modelValue"],
setup(e, { emit: t }) {
const a = e, n = t, r = C(
() => a.modelValue !== void 0 ? a.modelValue : a.open
), s = {
success: "✓",
info: "ℹ",
warning: "⚠",
error: "✕"
};
let l = null, o = null;
const u = A(100), i = C(() => {
const k = ["fixed z-50 w-full max-w-sm bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 transition-all duration-300 ease-in-out"], { vertical: w, horizontal: E } = a.anchorOrigin;
if (w === "top" ? k.push("top-4") : k.push("bottom-4"), E === "left" ? k.push("left-4") : E === "right" ? k.push("right-4") : k.push("left-1/2 transform -translate-x-1/2"), a.variant === "filled") {
const W = {
success: "bg-success-500 border-success-500",
info: "bg-primary-500 border-primary-500",
warning: "bg-warning-500 border-warning-500",
error: "bg-error-500 border-error-500"
};
k.push(W[a.severity]);
} else if (a.variant === "outlined") {
const W = {
success: "border-success-500 text-success-600 dark:text-success-400 border-l-4",
info: "border-primary-500 text-primary-600 dark:text-primary-400 border-l-4",
warning: "border-warning-500 text-warning-600 dark:text-warning-400 border-l-4",
error: "border-error-500 text-error-600 dark:text-error-400 border-l-4"
};
k.push(W[a.severity]);
} else
k.push("text-neutral-900 dark:text-neutral-100");
return k;
}), c = C(() => {
const k = ["text-sm font-medium px-3 py-1 rounded-md transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2"];
if (a.variant === "filled")
k.push("hover:bg-white hover:bg-opacity-20 focus:ring-white");
else {
const w = {
success: "text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/20 focus:ring-success-500",
info: "text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 focus:ring-primary-500",
warning: "text-warning-600 dark:text-warning-400 hover:bg-warning-50 dark:hover:bg-warning-900/20 focus:ring-warning-500",
error: "text-error-600 dark:text-error-400 hover:bg-error-50 dark:hover:bg-error-900/20 focus:ring-error-500"
};
k.push(w[a.severity]);
}
return k;
}), d = C(() => {
const k = ["inline-flex rounded-md p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors duration-150"];
if (a.variant === "filled")
k.push("hover:bg-white hover:bg-opacity-20 focus:ring-white");
else {
const w = {
success: "text-success-400 hover:text-success-500 focus:ring-success-500",
info: "text-primary-400 hover:text-primary-500 focus:ring-primary-500",
warning: "text-warning-400 hover:text-warning-500 focus:ring-warning-500",
error: "text-error-400 hover:text-error-500 focus:ring-error-500"
};
k.push(w[a.severity] || "text-neutral-400 hover:text-neutral-500 focus:ring-neutral-500");
}
return k;
}), p = C(() => a.variant === "filled" ? "text-gray" : {
success: "text-success-500",
info: "text-primary-500",
warning: "text-warning-500",
error: "text-error-500"
}[a.severity]), h = C(() => a.variant === "filled" ? "bg-white bg-opacity-30" : {
success: "bg-success-500",
info: "bg-primary-500",
warning: "bg-warning-500",
error: "bg-error-500"
}[a.severity]), v = C(() => s[a.severity] || s.info), g = () => {
n("close"), a.modelValue !== void 0 && n("update:modelValue", !1);
}, x = () => n("action"), $ = () => {
if (a.autoHideDuration > 0) {
u.value = 100;
const S = Date.now();
l = setTimeout(() => {
g();
}, a.autoHideDuration), a.showProgress && (o = setInterval(() => {
const k = Date.now() - S, w = Math.max(0, 100 - k / a.autoHideDuration * 100);
u.value = w, w <= 0 && clearInterval(o);
}, 50));
}
}, B = () => {
l && (clearTimeout(l), l = null), o && (clearInterval(o), o = null);
};
return Re(r, (S) => {
S ? $() : B();
}), Pe(() => {
r.value && $();
}), He(() => B()), (S, k) => (m(), Se(ct, { to: "body" }, [
Ge(Ke, {
name: "snackbar",
"enter-active-class": "transition ease-out duration-300",
"enter-from-class": "opacity-0 translate-y-2",
"enter-to-class": "opacity-100 translate-y-0",
"leave-active-class": "transition ease-in duration-200",
"leave-from-class": "opacity-100 translate-y-0",
"leave-to-class": "opacity-0 translate-y-2"
}, {
default: je(() => [
r.value ? (m(), y("div", {
key: 0,
class: T(i.value),
role: "alert",
"aria-live": "assertive",
"aria-atomic": "true"
}, [
_("div", td, [
e.showIcon ? (m(), y("div", {
key: 0,
class: T([p.value, "flex-shrink-0 w-5 h-5 flex items-center justify-center font-bold text-lg"])
}, I(v.value), 3)) : j("", !0),
_("div", ad, [
e.title ? (m(), y("div", nd, I(e.title), 1)) : j("", !0),
M(S.$slots, "default", {}, () => [
_("div", rd, I(e.message), 1)
])
]),
S.$slots.action || e.action ? (m(), y("div", sd, [
M(S.$slots, "action", {}, () => [
e.action ? (m(), y("button", {
key: 0,
type: "button",
class: T(c.value),
onClick: x
}, I(e.action), 3)) : j("", !0)
])
])) : j("", !0),
e.closable ? (m(), y("div", ld, [
_("button", {
type: "button",
class: T(d.value),
"aria-label": "关闭",
onClick: g
}, k[0] || (k[0] = [
_("svg", {
class: "w-4 h-4",
fill: "currentColor",
viewBox: "0 0 20 20"
}, [
_("path", {
"fill-rule": "evenodd",
d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
"clip-rule": "evenodd"
})
], -1)
]), 2)
])) : j("", !0)
]),
e.showProgress && e.autoHideDuration > 0 ? (m(), y("div", od, [
_("div", {
class: T([h.value, "h-1 rounded-full transition-all duration-100"]),
style: ce({ width: `${u.value}%` })
}, null, 6)
])) : j("", !0)
], 2)) : j("", !0)
]),
_: 3
})
]));
}
}, id = {
success: "✓",
info: "ℹ",
warning: "⚠",
error: "✕"
};
function Hp({
open: e = !1,
message: t = "",
title: a = "",
severity: n = "info",
variant: r = "filled",
autoHideDuration: s = 6e3,
anchorOrigin: l = { vertical: "bottom", horizontal: "left" },
action: o = "",
closable: u = !0,
showIcon: i = !0,
showProgress: c = !1,
onClose: d = () => {
},
onAction: p = () => {
},
children: h
}) {
const [v, g] = te(e), [x, $] = te(100);
ve(() => {
g(e), e && $(100);
}, [e]), ve(() => {
if (!v || s <= 0) return;
const H = Date.now(), Q = setTimeout(() => {
B();
}, s);
if (c) {
const q = setInterval(() => {
const ne = Date.now() - H, V = Math.max(0, 100 - ne / s * 100);
$(V), V <= 0 && clearInterval(q);
}, 50);
return () => {
clearTimeout(Q), clearInterval(q);
};
}
return () => clearTimeout(Q);
}, [v, s, c]);
const B = () => {
g(!1), d();
}, S = () => {
p();
};
if (!v) return null;
const w = ["fixed z-50 w-full max-w-sm bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 p-4 transition-all duration-300 ease-in-out"], { vertical: E, horizontal: W } = l;
if (w.push(E === "top" ? "top-4" : "bottom-4"), W === "left" ? w.push("left-4") : W === "right" ? w.push("right-4") : w.push("left-1/2 transform -translate-x-1/2"), r === "filled") {
const H = {
success: "bg-success-500 border-success-500",
info: "bg-primary-500 border-primary-500",
warning: "bg-warning-500 border-warning-500",
error: "bg-error-500 border-error-500"
};
w.push(H[n]);
} else if (r === "outlined") {
const H = {
success: "border-success-500 text-success-600 dark:text-success-400 border-l-4",
info: "border-primary-500 text-primary-600 dark:text-primary-400 border-l-4",
warning: "border-warning-500 text-warning-600 dark:text-warning-400 border-l-4",
error: "border-error-500 text-error-600 dark:text-error-400 border-l-4"
};
w.push(H[n]);
} else
w.push("text-neutral-900 dark:text-neutral-100");
const R = r === "filled" ? "hover:bg-white hover:bg-opacity-20 focus:ring-white text-sm font-medium px-3 py-1 rounded-md transition-colors" : {
success: "text-success-600 dark:text-success-400 hover:bg-success-50 dark:hover:bg-success-900/20",
info: "text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20",
warning: "text-warning-600 dark:text-warning-400 hover:bg-warning-50 dark:hover:bg-warning-900/20",
error: "text-error-600 dark:text-error-400 hover:bg-error-50 dark:hover:bg-error-900/20"
}[n] + " text-sm font-medium px-3 py-1 rounded-md transition-colors", Y = r === "filled" ? "inline-flex rounded-md p-1 hover:bg-white hover:bg-opacity-20 transition-colors" : "inline-flex rounded-md p-1 text-neutral-400 hover:text-neutral-500 transition-colors", N = r === "filled" ? "text-gray" : {
success: "text-success-500",
info: "text-primary-500",
warning: "text-warning-500",
error: "text-error-500"
}[n], O = /* @__PURE__ */ f.jsxs("div", { className: w.join(" "), role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: [
/* @__PURE__ */ f.jsxs("div", { className: "flex items-start gap-3 w-full", children: [
i && /* @__PURE__ */ f.jsx("div", { className: `flex-shrink-0 w-5 h-5 flex items-center justify-center font-bold text-lg ${N}`, children: id[n] }),
/* @__PURE__ */ f.jsxs("div", { className: "flex-1 min-w-0", children: [
a && /* @__PURE__ */ f.jsx("div", { className: "font-semibold text-sm mb-1 leading-tight", children: a }),
h || /* @__PURE__ */ f.jsx("div", { className: "text-sm", children: t })
] }),
(o || (h == null ? void 0 : h.action)) && /* @__PURE__ */ f.jsx("div", { className: "flex-shrink-0", children: (h == null ? void 0 : h.action) || /* @__PURE__ */ f.jsx("button", { className: R, onClick: S, type: "button", children: o }) }),
u && /* @__PURE__ */ f.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ f.jsx("button", { className: Y, onClick: B, "aria-label": "关闭", type: "button", children: /* @__PURE__ */ f.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ f.jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }) })
] }),
c && s > 0 && /* @__PURE__ */ f.jsx("div", { className: "mt-3 w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1", children: /* @__PURE__ */ f.jsx(
"div",
{
className: `h-1 rounded-full transition-all duration-100 ${r === "filled" ? "bg-white bg-opacity-30" : {
success: "bg-success-500",
info: "bg-primary-500",
warning: "bg-warning-500",
error: "bg-error-500"
}[n]}`,
style: { width: `${x}%` }
}
) })
] });
return Ra(O, document.body);
}
const cd = {
key: 0,
class: "wc-spinner__text"
}, ud = {
__name: "Spinner",
props: {
size: {
type: Number,
default: 40
},
color: {
type: String,
default: "var(--wc-primary-500)"
},
thickness: {
type: Number,
default: 4
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "dots", "pulse"].includes(e)
},
text: {
type: String,
default: ""
},
speed: {
type: String,
default: "1s"
},
overlay: {
type: Boolean,
default: !1
},
centered: {
type: Boolean,
default: !1
},
inline: {
type: Boolean,
default: !1
},
visible: {
type: Boolean,
default: !0
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-spinner"];
return t.variant !== "default" && r.push(`wc-spinner--${t.variant}`), t.overlay && r.push("wc-spinner--overlay"), t.centered && r.push("wc-spinner--centered"), t.inline && r.push("wc-spinner--inline"), r;
}), n = C(() => {
const r = {
width: t.size + "px",
height: t.size + "px",
borderWidth: t.thickness + "px",
borderTopColor: t.color
};
return t.speed !== "1s" && (r["--spinner-speed"] = t.speed), r;
});
return (r, s) => e.visible ? (m(), y("div", {
key: 0,
class: T(a.value),
style: ce(n.value)
}, [
e.text || r.$slots.default ? (m(), y("div", cd, [
M(r.$slots, "default", {}, () => [
he(I(e.text), 1)
], !0)
])) : j("", !0)
], 6)) : j("", !0);
}
}, Up = /* @__PURE__ */ me(ud, [["__scopeId", "data-v-9b0facd8"]]), Yp = ({ size: e = 40, thickness: t = 4, color: a = "var(--wc-primary-500)", style: n = {}, className: r = "", ...s }) => {
ve(() => {
if (!document.getElementById("wc-spinner-keyframes")) {
const o = document.createElement("style");
o.id = "wc-spinner-keyframes", o.innerHTML = "@keyframes wc-spin { to { transform: rotate(360deg); } }", document.head.appendChild(o);
}
}, []);
const l = {
width: e,
height: e,
borderWidth: t,
borderStyle: "solid",
borderColor: "var(--wc-neutral-200)",
borderTopColor: a,
borderRadius: "50%",
animation: "wc-spin 1s linear infinite",
...n
};
return /* @__PURE__ */ f.jsx("div", { className: `wc-spinner ${r}`, style: l, ...s });
}, dd = { class: "switch-wrapper" }, fd = {
key: 0,
class: "switch-label"
}, pd = {
key: 0,
class: "switch-required"
}, md = { class: "switch-container" }, hd = ["disabled", "aria-checked"], vd = {
key: 0,
class: "switch-description"
}, yd = {
__name: "Switch",
props: {
modelValue: {
type: Boolean,
default: !1
},
label: {
type: String,
default: ""
},
description: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
color: {
type: String,
default: "primary",
validator: (e) => ["primary", "success", "warning", "error", "purple", "orange", "cyan", "pink"].includes(e)
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = ut(), s = `switch-label-${(r == null ? void 0 : r.uid) || Math.random().toString(36).substr(2, 9)}`, l = C(() => {
const i = [];
return a.size === "sm" ? i.push("switch--size-sm") : a.size === "lg" && i.push("switch--size-lg"), a.modelValue && (i.push("switch--checked"), i.push(`switch--color-${a.color}`)), a.disabled && i.push("switch--disabled"), i;
}), o = C(() => {
const i = [];
return a.modelValue && i.push("switch__thumb--checked"), a.size === "sm" ? i.push("switch__thumb--size-sm") : a.size === "lg" && i.push("switch__thumb--size-lg"), i;
}), u = () => {
if (a.disabled) return;
const i = !a.modelValue;
n("update:modelValue", i), n("change", i);
};
return (i, c) => (m(), y("div", dd, [
e.label ? (m(), y("label", fd, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", pd, "*")) : j("", !0)
])) : j("", !0),
_("div", md, [
_("button", {
class: T(["switch", l.value]),
disabled: e.disabled,
type: "button",
role: "switch",
"aria-checked": e.modelValue,
"aria-labelledby": s,
onClick: u
}, [
c[0] || (c[0] = _("span", { class: "switch__track" }, null, -1)),
_("span", {
class: T(["switch__thumb", o.value])
}, null, 2)
], 10, hd),
e.description ? (m(), y("span", vd, I(e.description), 1)) : j("", !0)
])
]));
}
}, Gp = /* @__PURE__ */ me(yd, [["__scopeId", "data-v-f5e06078"]]), gd = ({
checked: e = !1,
onChange: t,
label: a = "",
description: n = "",
disabled: r = !1,
required: s = !1,
color: l = "primary",
size: o = "md",
className: u = "",
...i
}) => {
const c = Ba(), p = ["primary", "success", "warning", "error", "purple", "orange", "cyan", "pink"].includes(l) ? l : "primary", v = ["sm", "md", "lg"].includes(o) ? o : "md", g = [
"wc-switch",
`wc-switch--${p}`,
v !== "md" && `wc-switch--${v}`,
r && "wc-switch--disabled",
u
].filter(Boolean).join(" "), x = ($) => {
r || !t || t($.target.checked);
};
return /* @__PURE__ */ f.jsxs("div", { className: "wc-switch-wrapper", children: [
a && /* @__PURE__ */ f.jsxs(
"label",
{
id: c,
className: "block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2",
children: [
a,
s && /* @__PURE__ */ f.jsx("span", { className: "text-error-500 ml-1", children: "*" })
]
}
),
/* @__PURE__ */ f.jsxs("div", { className: "flex items-center gap-3", children: [
/* @__PURE__ */ f.jsxs("label", { className: g, "aria-disabled": r, children: [
/* @__PURE__ */ f.jsx(
"input",
{
type: "checkbox",
className: "wc-switch__input",
checked: e,
disabled: r,
"aria-labelledby": c,
role: "switch",
onChange: x,
...i
}
),
/* @__PURE__ */ f.jsx("span", { className: "wc-switch__track", children: /* @__PURE__ */ f.jsx("span", { className: "wc-switch__thumb" }) })
] }),
n && /* @__PURE__ */ f.jsx("span", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: n })
] })
] });
};
gd.displayName = "Switch";
const Kp = {
__name: "Table",
props: {
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
stickyHeader: {
type: Boolean,
default: !1
},
dense: {
type: Boolean,
default: !1
},
hover: {
type: Boolean,
default: !1
},
striped: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(() => {
const r = ["wc-table-container"];
return t.stickyHeader && r.push("wc-table-container--sticky"), r;
}), n = C(() => {
const r = ["wc-table"];
return r.push(`wc-table--${t.size}`), t.hover && r.push("wc-table--hover"), t.striped && r.push("wc-table--striped"), t.dense && r.push("wc-table--dense"), r;
});
return it("tableContext", {
size: t.size,
dense: t.dense,
hover: t.hover,
striped: t.striped,
stickyHeader: t.stickyHeader
}), (r, s) => (m(), y("div", {
class: T(a.value)
}, [
_("table", {
class: T(n.value)
}, [
M(r.$slots, "default")
], 2)
], 2));
}
}, xt = ft({ size: "md", dense: !1, hover: !1, striped: !1 }), gn = ({
size: e = "md",
stickyHeader: t = !1,
dense: a = !1,
hover: n = !1,
striped: r = !1,
children: s,
className: l = "",
...o
}) => /* @__PURE__ */ f.jsx(
"div",
{
className: `wc-table-container${t ? " wc-table-container--sticky" : ""} ${l}`,
...o,
children: /* @__PURE__ */ f.jsx(
"table",
{
className: `wc-table wc-table--${e}${n ? " wc-table--hover" : ""}${r ? " wc-table--striped" : ""}${a ? " wc-table--dense" : ""}`,
children: /* @__PURE__ */ f.jsx(xt.Provider, { value: { size: e, dense: a, hover: n, striped: r, stickyHeader: t }, children: s })
}
)
}
);
gn.displayName = "Table";
const bn = ({ children: e, className: t = "", ...a }) => {
const { stickyHeader: n } = qe(xt);
return /* @__PURE__ */ f.jsx("thead", { className: `wc-table-head${n ? " wc-table-head--sticky" : ""} ${t}`, ...a, children: e });
};
bn.displayName = "TableHead";
const wn = ({ children: e, className: t = "", ...a }) => /* @__PURE__ */ f.jsx("tbody", { className: `wc-table-body ${t}`, ...a, children: e });
wn.displayName = "TableBody";
const xn = ({
hover: e,
selected: t = !1,
clickable: a = !1,
children: n,
className: r = "",
onClick: s,
...l
}) => {
const o = qe(xt), i = [
"wc-table-row",
(e !== void 0 ? e : o.hover) || a ? "wc-table-row--hover" : "",
t ? "wc-table-row--selected" : "",
a ? "wc-table-row--clickable" : "",
r
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx(
"tr",
{
className: i,
onClick: a ? s : void 0,
...l,
children: n
}
);
};
xn.displayName = "TableRow";
const kn = ({
component: e = "td",
align: t = "inherit",
padding: a = "normal",
size: n,
sortDirection: r = !1,
variant: s = "body",
scope: l,
children: o,
className: u = "",
...i
}) => {
const c = qe(xt), d = n || (c.dense ? "small" : "medium"), p = [
"wc-table-cell",
`wc-table-cell--${s}`,
`wc-table-cell--${d}`,
`wc-table-cell--padding-${a}`,
t !== "inherit" ? `wc-table-cell--align-${t}` : "",
r ? "wc-table-cell--sortable" : "",
r ? `wc-table-cell--sort-${r}` : "",
u
].filter(Boolean).join(" ");
return /* @__PURE__ */ f.jsx(e, { className: p, scope: e === "th" || s === "head" ? l : void 0, ...i, children: o });
};
kn.displayName = "TableCell";
const Jp = Object.assign(gn, { Head: bn, Body: wn, Row: xn, Cell: kn }), Xp = {
__name: "TableBody",
setup(e) {
Le("tableContext", {
size: "md",
dense: !1,
hover: !1,
striped: !1
});
const t = C(() => ["wc-table-body"]);
return (a, n) => (m(), y("tbody", {
class: T(t.value)
}, [
M(a.$slots, "default")
], 2));
}
}, Qp = {
__name: "TableCell",
props: {
component: {
type: String,
default: "td"
},
align: {
type: String,
default: "inherit",
validator: (e) => ["inherit", "left", "center", "right", "justify"].includes(e)
},
padding: {
type: String,
default: "normal",
validator: (e) => ["normal", "checkbox", "none"].includes(e)
},
size: {
type: String,
default: void 0,
validator: (e) => !e || ["small", "medium"].includes(e)
},
sortDirection: {
type: [String, Boolean],
default: !1,
validator: (e) => [!1, "asc", "desc"].includes(e)
},
variant: {
type: String,
default: "body",
validator: (e) => ["head", "body", "footer"].includes(e)
},
scope: {
type: String,
default: void 0
}
},
setup(e) {
const t = e, a = Le("tableContext", {
size: "md",
dense: !1
}), n = C(() => t.component === "th" || t.variant === "head"), r = C(() => {
const l = ["wc-table-cell"];
l.push(`wc-table-cell--${t.variant}`);
const o = t.size || (a.dense ? "small" : "medium");
return l.push(`wc-table-cell--${o}`), l.push(`wc-table-cell--padding-${t.padding}`), t.align !== "inherit" && l.push(`wc-table-cell--align-${t.align}`), t.sortDirection && (l.push("wc-table-cell--sortable"), l.push(`wc-table-cell--sort-${t.sortDirection}`)), l;
}), s = C(() => ({}));
return (l, o) => (m(), Se(ze(e.component), {
class: T(r.value),
style: ce(s.value),
scope: n.value ? e.scope : void 0
}, {
default: je(() => [
M(l.$slots, "default")
]),
_: 3
}, 8, ["class", "style", "scope"]));
}
}, Zp = {
__name: "TableHead",
setup(e) {
const t = Le("tableContext", {
size: "md",
dense: !1,
hover: !1,
striped: !1,
stickyHeader: !1
}), a = C(() => {
const n = ["wc-table-head"];
return t.stickyHeader && n.push("wc-table-head--sticky"), n;
});
return (n, r) => (m(), y("thead", {
class: T(a.value)
}, [
M(n.$slots, "default")
], 2));
}
}, em = {
__name: "TableRow",
props: {
hover: {
type: Boolean,
default: void 0
},
selected: {
type: Boolean,
default: !1
},
clickable: {
type: Boolean,
default: !1
}
},
emits: ["click"],
setup(e, { emit: t }) {
const a = e, n = t, r = Le("tableContext", {
size: "md",
dense: !1,
hover: !1,
striped: !1
}), s = C(() => {
const o = ["wc-table-row"];
return ((a.hover !== void 0 ? a.hover : r.hover) || a.clickable) && o.push("wc-table-row--hover"), a.selected && o.push("wc-table-row--selected"), a.clickable && o.push("wc-table-row--clickable"), o;
}), l = (o) => {
a.clickable && n("click", o);
};
return (o, u) => (m(), y("tr", {
class: T(s.value),
onClick: l
}, [
M(o.$slots, "default")
], 2));
}
}, bd = { class: "wc-tabs-wrapper" }, wd = ["disabled", "onClick"], xd = { class: "wc-tab-content mt-6" }, tm = {
__name: "Tabs",
props: {
tabs: {
type: Array,
required: !0,
validator: (e) => e.every((t) => t.title)
},
modelValue: {
type: Number,
default: 0
},
variant: {
type: String,
default: "default",
validator: (e) => ["default", "pills", "underline"].includes(e)
}
},
emits: ["update:modelValue", "change"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(a.modelValue), s = C(() => a.tabs[r.value]), l = C(() => {
const i = ["wc-tabs"];
switch (a.variant) {
case "pills":
i.push("wc-tabs--pills");
break;
case "underline":
i.push("wc-tabs--underline");
break;
default:
i.push("wc-tabs--default");
}
return i;
}), o = (i) => {
var v;
const c = "wc-tab", d = r.value === i ? "wc-tab--active" : "", p = (v = a.tabs[i]) != null && v.disabled ? "opacity-50 cursor-not-allowed" : "";
let h = "";
return a.variant === "underline" && (h = "border-b-2 border-transparent rounded-none px-4 py-2 -mb-px", r.value === i && (h += " border-primary-500 bg-transparent text-primary-600 dark:text-primary-400")), [c, d, p, h];
}, u = (i) => {
var c;
(c = a.tabs[i]) != null && c.disabled || (r.value = i, n("update:modelValue", i), n("change", i, a.tabs[i]));
};
return Re(
() => a.modelValue,
(i) => {
r.value = i;
}
), (i, c) => (m(), y("div", bd, [
_("div", {
class: T(l.value)
}, [
(m(!0), y(ke, null, Ce(e.tabs, (d, p) => (m(), y("button", {
key: d.key || p,
class: T(o(p)),
disabled: d.disabled,
type: "button",
onClick: (h) => u(p)
}, I(d.title), 11, wd))), 128))
], 2),
_("div", xd, [
M(i.$slots, "default", {
activeTab: s.value,
activeIndex: r.value
})
])
]));
}
}, kd = ({
tabs: e = [],
activeIndex: t,
onChange: a,
variant: n = "default",
children: r,
className: s = "",
...l
}) => {
const [o, u] = te(t || 0), i = t !== void 0, c = i ? t : o;
ve(() => {
i && u(t);
}, [t, i]);
const d = [
"wc-tabs",
n === "pills" && "wc-tabs--pills",
n === "underline" && "wc-tabs--underline",
(n === "default" || !["pills", "underline"].includes(n)) && "wc-tabs--default",
s
].filter(Boolean).join(" "), p = (g, x) => {
const $ = ["wc-tab"];
return c === g && $.push("wc-tab--active"), x && $.push("opacity-50 cursor-not-allowed"), $.join(" ");
}, h = (g, x) => {
x.disabled || (i || u(g), a && a(g, x));
}, v = e[c];
return /* @__PURE__ */ f.jsxs("div", { className: "wc-tabs-wrapper", ...l, children: [
/* @__PURE__ */ f.jsx("div", { className: d, children: e.map((g, x) => /* @__PURE__ */ f.jsx(
"button",
{
className: p(x, g.disabled),
onClick: () => h(x, g),
disabled: g.disabled,
type: "button",
children: g.title
},
g.key || x
)) }),
/* @__PURE__ */ f.jsx("div", { className: "wc-tab-content mt-6", children: typeof r == "function" ? r({ activeTab: v, activeIndex: c }) : r })
] });
};
kd.displayName = "Tabs";
const _d = ["for"], Cd = {
key: 0,
class: "wc-textfield__required required-indicator"
}, Sd = {
key: 0,
class: "wc-textfield__adornment wc-textfield__adornment--start adornment start-adornment"
}, $d = ["id", "type", "placeholder", "disabled", "readonly", "required", "value", "autocomplete"], jd = ["id", "placeholder", "disabled", "readonly", "required", "rows", "value"], Nd = {
key: 3,
class: "wc-textfield__adornment wc-textfield__adornment--end adornment end-adornment"
}, Td = {
key: 0,
class: "wc-textfield__error-icon",
fill: "currentColor",
viewBox: "0 0 20 20"
}, Ed = { key: 0 }, Id = {
__name: "TextField",
props: {
modelValue: {
type: [String, Number],
default: ""
},
label: {
type: String,
default: ""
},
type: {
type: String,
default: "text"
},
placeholder: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
required: {
type: Boolean,
default: !1
},
error: {
type: String,
default: ""
},
helperText: {
type: String,
default: ""
},
size: {
type: String,
default: "md",
validator: (e) => ["sm", "md", "lg"].includes(e)
},
variant: {
type: String,
default: "outlined",
validator: (e) => ["outlined", "filled", "standard"].includes(e)
},
fullWidth: {
type: Boolean,
default: !1
},
multiline: {
type: Boolean,
default: !1
},
rows: {
type: Number,
default: 4
},
startAdornment: String,
endAdornment: String,
autocomplete: String
},
emits: ["update:modelValue", "focus", "blur", "keydown"],
setup(e, { emit: t }) {
const a = e, n = t, r = ut(), s = A(`textfield-${(r == null ? void 0 : r.uid) || Math.random().toString(36).substr(2, 9)}`), l = A(!1), o = C(() => {
const v = ["wc-textfield__label"];
return v.push(`wc-textfield__label--${a.size}`), a.error && v.push("wc-textfield__label--error"), v;
}), u = C(() => {
const v = ["wc-textfield__container"];
return v.push(`wc-textfield__container--${a.variant}`), v.push(`wc-textfield__container--${a.size}`), a.fullWidth && v.push("wc-textfield__container--full-width"), a.disabled && v.push("wc-textfield__container--disabled"), a.error && v.push("wc-textfield__container--error"), l.value && v.push("wc-textfield__container--focused"), v;
}), i = C(() => {
const v = ["wc-textfield__input"];
return v.push(`wc-textfield__input--${a.size}`), a.multiline && v.push("wc-textfield__textarea"), v;
}), c = (v) => {
n("update:modelValue", v.target.value);
}, d = (v) => {
l.value = !0, n("focus", v);
}, p = (v) => {
l.value = !1, n("blur", v);
}, h = (v) => {
n("keydown", v);
};
return (v, g) => (m(), y("div", {
class: T(["wc-textfield", { "wc-textfield--full-width": e.fullWidth, "wc-textfield--multiline": e.multiline }])
}, [
e.label ? (m(), y("label", {
key: 0,
for: s.value,
class: T(o.value)
}, [
he(I(e.label) + " ", 1),
e.required ? (m(), y("span", Cd, "*")) : j("", !0)
], 10, _d)) : j("", !0),
_("div", {
class: T(u.value)
}, [
v.$slots.startAdornment || e.startAdornment ? (m(), y("div", Sd, [
M(v.$slots, "startAdornment", {}, () => [
_("span", null, I(e.startAdornment), 1)
], !0)
])) : j("", !0),
e.multiline ? (m(), y("textarea", ot({
key: 2,
id: s.value,
class: i.value,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
required: e.required,
rows: e.rows,
value: e.modelValue
}, v.$attrs, {
onInput: c,
onFocus: d,
onBlur: p
}), null, 16, jd)) : (m(), y("input", ot({
key: 1,
id: s.value,
class: i.value,
type: e.type,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
required: e.required,
value: e.modelValue,
autocomplete: e.autocomplete
}, v.$attrs, {
onInput: c,
onFocus: d,
onBlur: p,
onKeydown: h
}), null, 16, $d)),
v.$slots.endAdornment || e.endAdornment || e.error ? (m(), y("div", Nd, [
e.error ? (m(), y("svg", Td, g[0] || (g[0] = [
_("path", {
"fill-rule": "evenodd",
d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
"clip-rule": "evenodd"
}, null, -1)
]))) : j("", !0),
M(v.$slots, "endAdornment", {}, () => [
e.endAdornment ? (m(), y("span", Ed, I(e.endAdornment), 1)) : j("", !0)
], !0)
])) : j("", !0)
], 2),
e.error || e.helperText ? (m(), y("div", {
key: 1,
class: T(["wc-textfield__helper-text helper-text helper-text-content", { "wc-textfield__helper-text--error error-text": e.error }])
}, I(e.error || e.helperText), 3)) : j("", !0)
], 2));
}
}, am = /* @__PURE__ */ me(Id, [["__scopeId", "data-v-59d034dc"]]), _n = (e, t, a = "") => {
const r = ["flex items-center w-full"];
return e === "dense" ? r.push("min-h-12 py-2") : r.push("min-h-16 py-3"), t || r.push("px-4 sm:px-6 lg:px-8"), a && r.push(a), r.join(" ");
}, nm = {
__name: "Toolbar",
props: {
variant: {
type: String,
default: "regular",
validator: (e) => ["regular", "dense"].includes(e)
},
disableGutters: {
type: Boolean,
default: !1
},
class: {
type: [String, Array, Object],
default: ""
},
style: {
type: [String, Object],
default: () => ({})
}
},
setup(e) {
const t = e;
function a(r) {
return r ? typeof r == "string" ? r : Array.isArray(r) ? r.filter(Boolean).join(" ") : typeof r == "object" ? Object.entries(r).filter(([, s]) => s).map(([s]) => s).join(" ") : "" : "";
}
const n = C(() => {
const r = a(t.class);
return _n(t.variant, t.disableGutters, r);
});
return (r, s) => (m(), y("div", {
class: T(n.value),
style: ce(e.style)
}, [
M(r.$slots, "default")
], 6));
}
}, rm = ({
children: e,
variant: t = "regular",
disableGutters: a = !1,
className: n = "",
style: r = {},
...s
}) => {
const l = _n(t, a, n);
return /* @__PURE__ */ f.jsx("div", { className: l, style: r, ...s, children: e });
}, $a = {
top: "wc-tooltip--top",
bottom: "wc-tooltip--bottom",
left: "wc-tooltip--left",
right: "wc-tooltip--right"
}, Bd = ["top", "bottom", "left", "right"];
function Cn(e) {
return Bd.includes(e);
}
function Sn(e) {
return $a[e] || $a.top;
}
const sm = /* @__PURE__ */ Fe({
__name: "Tooltip",
props: {
text: {},
placement: { default: "top" },
className: { default: "" }
},
setup(e) {
const t = e;
Cn(t.placement) || console.warn(`Invalid tooltip placement: ${t.placement}. Using 'top' as default.`);
const a = A(!1), n = C(() => Sn(t.placement));
return (r, s) => (m(), y("span", {
class: T(["wc-tooltip-wrapper relative inline-block", r.className]),
onMouseenter: s[0] || (s[0] = (l) => a.value = !0),
onMouseleave: s[1] || (s[1] = (l) => a.value = !1)
}, [
M(r.$slots, "default"),
Ge(Ke, { name: "tooltip-fade" }, {
default: je(() => [
a.value ? (m(), y("div", {
key: 0,
class: T(["wc-tooltip absolute z-50 px-2 py-1 rounded text-xs whitespace-nowrap", n.value])
}, I(r.text), 3)) : j("", !0)
]),
_: 1
})
], 34));
}
});
function lm({
text: e,
placement: t = "top",
// 'top' | 'bottom' | 'left' | 'right'
children: a,
className: n = ""
}) {
Cn(t) || console.warn(`Invalid tooltip placement: ${t}. Using 'top' as default.`);
const [r, s] = te(!1), [l, o] = te(!1), u = Sn(t), i = () => {
s(!0), o(!0);
}, c = () => {
s(!1), setTimeout(() => o(!1), 150);
};
return /* @__PURE__ */ f.jsxs(
"span",
{
className: `wc-tooltip-wrapper relative inline-block ${n}`,
onMouseEnter: i,
onMouseLeave: c,
children: [
a,
(r || l) && /* @__PURE__ */ f.jsx(
"div",
{
className: `wc-tooltip absolute z-50 px-2 py-1 rounded text-xs whitespace-nowrap ${u} ${r ? "tooltip-fade-enter-to" : "tooltip-fade-leave-to"}`,
children: e
}
)
]
}
);
}
const Rd = {
h1: "h1",
h2: "h2",
h3: "h3",
h4: "h4",
h5: "h5",
h6: "h6",
subtitle1: "h6",
subtitle2: "h6",
body1: "p",
body2: "p",
caption: "span",
overline: "span",
button: "span"
}, Pd = {
h1: "text-6xl font-light tracking-tight",
h2: "text-5xl font-light tracking-tight",
h3: "text-4xl font-normal",
h4: "text-3xl font-normal",
h5: "text-2xl font-normal",
h6: "text-xl font-medium",
subtitle1: "text-base font-normal",
subtitle2: "text-sm font-medium",
body1: "text-base font-normal",
body2: "text-sm font-normal",
caption: "text-xs font-normal",
overline: "text-xs font-medium uppercase tracking-wide",
button: "text-sm font-medium uppercase tracking-wide"
}, Dd = {
inherit: "text-inherit",
primary: "text-primary-600 dark:text-primary-400",
secondary: "text-neutral-600 dark:text-neutral-400",
success: "text-success-600 dark:text-success-400",
warning: "text-warning-600 dark:text-warning-400",
error: "text-error-600 dark:text-error-400",
textPrimary: "text-neutral-900 dark:text-neutral-100",
textSecondary: "text-neutral-600 dark:text-neutral-400",
textDisabled: "text-neutral-400 dark:text-neutral-600"
}, Vd = {
left: "text-left",
center: "text-center",
right: "text-right",
justify: "text-justify"
}, $n = {
h1: "1.2",
h2: "1.2",
h3: "1.3",
h4: "1.3",
h5: "1.4",
h6: "1.4",
subtitle1: "1.5",
subtitle2: "1.5",
body1: "1.6",
body2: "1.6",
caption: "1.4",
overline: "1.4",
button: "1.4"
};
function jn(e, t) {
return t || Rd[e] || "p";
}
function Nn(e, t, a, n, r, s = "") {
return [
Pd[e],
Dd[t],
a !== "inherit" ? Vd[a] : null,
n ? "mb-4" : null,
r ? "truncate" : null,
s
].filter(Boolean).join(" ");
}
const om = {
__name: "Typography",
props: {
variant: {
type: String,
default: "body1",
validator: (e) => [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"subtitle1",
"subtitle2",
"body1",
"body2",
"caption",
"overline",
"button"
].includes(e)
},
component: {
type: String,
default: ""
},
color: {
type: String,
default: "inherit",
validator: (e) => [
"inherit",
"primary",
"secondary",
"success",
"warning",
"error",
"textPrimary",
"textSecondary",
"textDisabled"
].includes(e)
},
align: {
type: String,
default: "inherit",
validator: (e) => ["inherit", "left", "center", "right", "justify"].includes(e)
},
gutterBottom: {
type: Boolean,
default: !1
},
noWrap: {
type: Boolean,
default: !1
}
},
setup(e) {
const t = e, a = C(() => jn(t.variant, t.component)), n = C(
() => Nn(
t.variant,
t.color,
t.align,
t.gutterBottom,
t.noWrap
)
), r = C(() => ({
lineHeight: $n[t.variant]
}));
return (s, l) => (m(), Se(ze(a.value), {
class: T(n.value),
style: ce(r.value)
}, {
default: je(() => [
M(s.$slots, "default")
]),
_: 3
}, 8, ["class", "style"]));
}
}, Md = ({
variant: e = "body1",
component: t,
color: a = "inherit",
align: n = "inherit",
gutterBottom: r = !1,
noWrap: s = !1,
children: l,
className: o = "",
style: u = {},
...i
}) => {
const c = jn(e, t), d = Nn(e, a, n, r, s, o), p = {
lineHeight: $n[e],
...u
};
return /* @__PURE__ */ f.jsx(c, { className: d, style: p, ...i, children: l });
};
Md.displayName = "Typography";
class Tn {
constructor(t, a = {}) {
this.text = t, this.speed = a.speed || 100, this.pause = a.pause || 1500, this.loop = a.loop || !1, this.erase = a.erase || !1, this.index = 0, this.direction = 1, this.timer = null, this.onUpdate = a.onUpdate || (() => {
});
}
step() {
this.direction === 1 ? this.index < this.text.length ? (this.index += 1, this.onUpdate(this.text.slice(0, this.index))) : this.loop ? this.erase ? this.direction = -1 : (this.stop(), setTimeout(() => {
this.index = 0, this.onUpdate(""), this.start();
}, this.pause)) : this.stop() : this.index > 0 ? (this.index -= 1, this.onUpdate(this.text.slice(0, this.index))) : this.direction = 1;
}
start() {
this.stop(), this.timer = setInterval(() => this.step(), this.speed);
}
stop() {
this.timer && (clearInterval(this.timer), this.timer = null);
}
reset() {
this.stop(), this.index = 0, this.direction = 1, this.onUpdate("");
}
updateText(t) {
this.text = t, this.reset(), this.start();
}
}
const Od = {
name: "TypingText",
props: {
text: { type: String, default: "Hello, Watercolor UI!" },
speed: { type: Number, default: 100 },
// ms per char
pause: { type: Number, default: 1500 },
// pause before delete/retype
loop: { type: Boolean, default: !1 },
erase: { type: Boolean, default: !1 },
// if true, erase then loop
showCursor: { type: Boolean, default: !0 }
},
setup(e) {
const t = A("");
let a = null;
const n = () => {
a && a.stop(), a = new Tn(e.text, {
speed: e.speed,
pause: e.pause,
loop: e.loop,
erase: e.erase,
onUpdate: (r) => {
t.value = r;
}
}), a.start();
};
return Pe(n), Ze(() => {
a && a.stop();
}), Re(() => [e.text, e.speed, e.pause, e.loop, e.erase], n), { displayText: t };
}
}, Ad = { class: "typing-wrapper" }, Ld = { class: "typing-text" }, zd = {
key: 0,
class: "typing-cursor"
};
function Fd(e, t, a, n, r, s) {
return m(), y("span", Ad, [
_("span", Ld, I(n.displayText), 1),
a.showCursor ? (m(), y("span", zd)) : j("", !0)
]);
}
const im = /* @__PURE__ */ me(Od, [["render", Fd], ["__scopeId", "data-v-e1549f69"]]), qd = ({
text: e = "Hello, Watercolor UI!",
speed: t = 100,
pause: a = 1500,
loop: n = !1,
erase: r = !1,
showCursor: s = !0,
className: l = "",
style: o = {},
...u
}) => {
const [i, c] = te(""), d = Te(null);
return ve(() => (d.current = new Tn(e, {
speed: t,
pause: a,
loop: n,
erase: r,
onUpdate: c
}), d.current.start(), () => {
d.current && d.current.stop();
}), [e, t, a, n, r]), /* @__PURE__ */ f.jsxs("span", { className: `typing-wrapper ${l}`, style: o, ...u, children: [
/* @__PURE__ */ f.jsx("span", { className: "typing-text", children: i }),
s && /* @__PURE__ */ f.jsx("span", { className: "typing-cursor" })
] });
};
qd.displayName = "TypingText";
const Wd = ["id", "name", "onInput", "onKeydown"], cm = /* @__PURE__ */ Fe({
__name: "VerificationCodeInput",
props: {
length: {
type: Number,
default: 6
},
modelValue: {
type: String,
default: ""
},
autoFocus: {
type: Boolean,
default: !1
}
},
emits: ["update:modelValue", "complete"],
setup(e, { emit: t }) {
const a = e, n = t, r = A(Array.from({ length: a.length })), s = A([]);
Re(
() => a.modelValue,
(d) => {
d.length === a.length && n("complete", d), r.value.forEach((p, h) => {
s.value[h] && (s.value[h].value = d[h] || "");
});
},
{ immediate: !0 }
);
function l(d) {
lt(() => {
const p = s.value[d];
p && p.focus();
});
}
function o(d, p) {
const h = p.target, v = h.value.replace(/[^0-9a-zA-Z]/g, "");
h.value = v.toUpperCase();
const g = s.value.map((x) => x.value).join("");
n("update:modelValue", g), v && d < a.length - 1 && l(d + 1), g.length === a.length && n("complete", g);
}
function u(d, p) {
!p.target.value && d > 0 && l(d - 1);
}
function i(d) {
d.target.select();
}
function c(d) {
var h;
const p = (((h = d.clipboardData) == null ? void 0 : h.getData("text")) || "").trim().slice(0, a.length);
p && (p.split("").forEach((v, g) => {
s.value[g] && (s.value[g].value = v);
}), n("update:modelValue", p), p.length === a.length && n("complete", p));
}
return Pe(() => {
a.autoFocus && l(0);
}), (d, p) => (m(), y("div", {
class: "wc-input-code",
onPaste: Ae(c, ["prevent"])
}, [
(m(!0), y(ke, null, Ce(r.value, (h, v) => (m(), y("input", {
key: v,
ref_for: !0,
ref_key: "inputs",
ref: s,
id: `wc-input-code-${v}`,
name: `wc-input-code-${v}`,
class: "wc-input-code__box",
type: "text",
maxlength: "1",
autocomplete: "one-time-code",
inputmode: "numeric",
onInput: (g) => o(v, g),
onKeydown: We(Ae((g) => u(v, g), ["prevent"]), ["backspace"]),
onFocus: p[0] || (p[0] = (g) => i(g))
}, null, 40, Wd))), 128))
], 32));
}
});
function bt(e) {
const t = Math.floor(e / 60), a = Math.floor(e % 60).toString().padStart(2, "0");
return `${t}:${a}`;
}
function En(e, t) {
const a = e.currentTarget.getBoundingClientRect();
return (e.clientX - a.left) / a.width * t;
}
function In(e) {
var t, a;
e && (document.fullscreenElement ? (a = document.exitFullscreen) == null || a.call(document) : (t = e.requestFullscreen) == null || t.call(e));
}
const Hd = {
name: "VideoPlayer",
props: {
src: { type: String, required: !0 },
autoplay: { type: Boolean, default: !1 },
loop: { type: Boolean, default: !1 }
},
setup(e) {
const t = A(null), a = A(!1), n = A(0), r = A(0.7), s = A(!1), l = A(0), o = A(0), u = C(() => bt(o.value)), i = C(() => bt(l.value)), c = () => {
t.value && (t.value.paused ? t.value.play() : t.value.pause());
}, d = () => {
t.value && (l.value = t.value.duration || 0, o.value = t.value.currentTime, n.value = l.value ? o.value / l.value * 100 : 0, a.value = !t.value.paused);
}, p = (x) => {
t.value && (t.value.currentTime = En(x, l.value));
}, h = () => {
s.value = !s.value, t.value && (t.value.muted = s.value);
}, v = () => {
var x;
In((x = t.value) == null ? void 0 : x.parentElement);
};
Re(r, (x) => {
t.value && (t.value.volume = x);
});
const g = () => {
a.value = !1;
};
return Pe(() => {
t.value && (t.value.volume = r.value, t.value.muted = s.value, t.value.loop = e.loop, e.autoplay && t.value.play());
}), {
video: t,
playing: a,
progress: n,
togglePlay: c,
updateProgress: d,
seek: p,
volume: r,
muted: s,
toggleMute: h,
handleFullscreen: v,
formattedCurrent: u,
formattedDuration: i,
onEnded: g
};
}
}, Ud = { class: "video-wrapper" }, Yd = ["src"], Gd = { class: "controls" }, Kd = { class: "time" };
function Jd(e, t, a, n, r, s) {
return m(), y("div", Ud, [
_("video", {
ref: "video",
class: "video-el",
src: a.src,
onTimeupdate: t[0] || (t[0] = (...l) => n.updateProgress && n.updateProgress(...l)),
onEnded: t[1] || (t[1] = (...l) => n.onEnded && n.onEnded(...l))
}, null, 40, Yd),
_("div", Gd, [
_("button", {
class: "ctrl-btn",
onClick: t[2] || (t[2] = (...l) => n.togglePlay && n.togglePlay(...l))
}, I(n.playing ? "❚❚" : "▶️"), 1),
_("div", {
class: "progress",
onClick: t[3] || (t[3] = (l) => n.seek(l))
}, [
_("div", {
class: "progress-bar",
style: ce({ width: n.progress + "%" })
}, null, 4)
]),
_("span", Kd, I(n.formattedCurrent) + " / " + I(n.formattedDuration), 1),
_("button", {
class: "ctrl-btn",
onClick: t[4] || (t[4] = (...l) => n.toggleMute && n.toggleMute(...l))
}, I(n.muted ? "🔇" : "🔊"), 1),
Ea(_("input", {
"onUpdate:modelValue": t[5] || (t[5] = (l) => n.volume = l),
class: "volume",
type: "range",
min: "0",
max: "1",
step: "0.05"
}, null, 512), [
[
Ia,
n.volume,
void 0,
{ number: !0 }
]
]),
_("button", {
class: "ctrl-btn",
onClick: t[6] || (t[6] = (...l) => n.handleFullscreen && n.handleFullscreen(...l))
}, " ⛶ ")
])
]);
}
const um = /* @__PURE__ */ me(Hd, [["render", Jd], ["__scopeId", "data-v-f494d003"]]), Xd = ({
src: e,
autoplay: t = !1,
loop: a = !1,
className: n = "",
style: r = {},
...s
}) => {
const l = Te(null), [o, u] = te(!1), [i, c] = te(0), [d, p] = te(0.7), [h, v] = te(!1), [g, x] = te(0), [$, B] = te(0), S = bt($), k = bt(g), w = () => {
const N = l.current;
N && (N.paused ? N.play() : N.pause());
}, E = () => {
const N = l.current;
N && (x(N.duration || 0), B(N.currentTime), c(N.duration ? N.currentTime / N.duration * 100 : 0), u(!N.paused));
}, W = (N) => {
const O = l.current;
O && (O.currentTime = En(N, g));
}, R = () => {
v((N) => {
const O = !N;
return l.current && (l.current.muted = O), O;
});
}, Y = () => {
var N;
In((N = l.current) == null ? void 0 : N.parentElement);
};
return ve(() => {
l.current && (l.current.volume = d);
}, [d]), ve(() => {
const N = l.current;
N && (N.muted = h, N.loop = a, t && N.play());
}, [t, a, h]), /* @__PURE__ */ f.jsxs("div", { className: `video-wrapper ${n}`, style: r, ...s, children: [
/* @__PURE__ */ f.jsx(
"video",
{
ref: l,
className: "video-el",
src: e,
onTimeUpdate: E,
onEnded: () => u(!1)
}
),
/* @__PURE__ */ f.jsxs("div", { className: "controls", children: [
/* @__PURE__ */ f.jsx("button", { className: "ctrl-btn", onClick: w, children: o ? "❚❚" : "▶️" }),
/* @__PURE__ */ f.jsx("div", { className: "progress", onClick: W, children: /* @__PURE__ */ f.jsx("div", { className: "progress-bar", style: { width: `${i}%` } }) }),
/* @__PURE__ */ f.jsxs("span", { className: "time", children: [
S,
" / ",
k
] }),
/* @__PURE__ */ f.jsx("button", { className: "ctrl-btn", onClick: R, children: h ? "🔇" : "🔊" }),
/* @__PURE__ */ f.jsx("input", { className: "volume", type: "range", min: "0", max: "1", step: "0.05", value: d, onChange: (N) => p(Number(N.target.value)) }),
/* @__PURE__ */ f.jsx("button", { className: "ctrl-btn", onClick: Y, children: "⛶" })
] })
] });
};
Xd.displayName = "VideoPlayer";
const be = {
content: "",
cross: !1,
debug: !1,
fontSize: 14,
fontFamily: "sans-serif",
fontStyle: "normal",
fontVariant: "",
fontWeight: 400,
fontColor: "var(--wc-neutral-500, rgba(128,128,128,.3))",
fullscreen: !1,
globalRotate: 0,
lineHeight: 14,
height: 64,
width: 200,
image: void 0,
imageHeight: void 0,
imageWidth: void 0,
imageOpacity: 1,
rotate: 0,
selectable: !0,
textAlign: "center",
xGap: 48,
yGap: 48,
xOffset: 0,
yOffset: 0,
zIndex: 10
};
function Qd(e) {
if (typeof e == "string" && e.startsWith("var(")) {
const t = e.match(/--[^, )]+/);
if (t)
return getComputedStyle(document.documentElement).getPropertyValue(t[0]).trim() || e;
}
return e;
}
function Bn(e) {
const t = document.createElement("canvas"), a = t.getContext("2d");
let n = e.width, r = e.height;
if (!e.image && e.content) {
a.font = `${e.fontStyle} ${e.fontVariant} ${e.fontWeight} ${e.fontSize}px ${e.fontFamily}`;
const u = e.content.split(/\n/), i = Math.max(...u.map((d) => a.measureText(d).width)), c = e.lineHeight * u.length;
n = Math.max(n, Math.ceil(i)), r = Math.max(r, Math.ceil(c));
}
if (n += e.xGap, r += e.yGap, t.width = n, t.height = r, e.image)
return new Promise((u) => {
const i = new Image();
i.crossOrigin = "anonymous", i.onload = () => {
t.width = (e.imageWidth || i.width) + e.xGap, t.height = (e.imageHeight || i.height) + e.yGap, a.clearRect(0, 0, t.width, t.height), a.globalAlpha = e.imageOpacity, a.translate(t.width / 2, t.height / 2), a.rotate(e.rotate * Math.PI / 180);
const c = e.imageWidth || i.width, d = e.imageHeight || i.height;
a.drawImage(i, -c / 2, -d / 2, c, d), u(t.toDataURL());
}, i.src = e.image;
});
const s = (e.content || "").split(/\n/);
a.textAlign = e.textAlign || "center", a.textBaseline = "middle";
const l = e.fontColor.startsWith("var(") ? Qd(e.fontColor) : e.fontColor;
a.fillStyle = l, a.font = `${e.fontStyle} ${e.fontVariant} ${e.fontWeight} ${e.fontSize}px ${e.fontFamily}`, a.translate(n / 2, r / 2), a.rotate(e.rotate * Math.PI / 180);
const o = -(s.length - 1) * e.lineHeight / 2;
return s.forEach((u, i) => {
const c = o + i * e.lineHeight;
a.fillText(u, 0, c);
}), Promise.resolve(t.toDataURL());
}
function Rn(e, t) {
const a = {
position: e.fullscreen ? "fixed" : "absolute",
top: 0,
left: 0,
width: e.fullscreen ? "100vw" : "100%",
height: e.fullscreen ? "100vh" : "100%",
pointerEvents: e.selectable ? "none" : "auto",
backgroundImage: `url(${t})`,
backgroundRepeat: "repeat",
backgroundPosition: `${e.xOffset}px ${e.yOffset}px`,
zIndex: e.zIndex,
transform: `rotate(${e.globalRotate}deg)`,
mixBlendMode: "multiply"
};
return e.debug && (a.outline = "1px dashed red"), e.cross || (a.overflow = "hidden"), a;
}
const Zd = /* @__PURE__ */ Fe({
__name: "Watermark",
props: {
content: String,
cross: { type: Boolean, default: be.cross },
debug: { type: Boolean, default: be.debug },
fontSize: { type: Number, default: be.fontSize },
fontFamily: { type: String, default: be.fontFamily },
fontStyle: { type: String, default: be.fontStyle },
fontVariant: { type: String, default: be.fontVariant },
fontWeight: { type: Number, default: be.fontWeight },
fontColor: { type: String, default: "var(--wc-neutral-500, rgba(128,128,128,.3))" },
fullscreen: { type: Boolean, default: be.fullscreen },
globalRotate: { type: Number, default: be.globalRotate },
lineHeight: { type: Number, default: be.lineHeight },
height: { type: Number, default: be.height },
width: { type: Number, default: be.width },
image: String,
imageHeight: Number,
imageWidth: Number,
imageOpacity: { type: Number, default: be.imageOpacity },
rotate: { type: Number, default: be.rotate },
selectable: { type: Boolean, default: be.selectable },
textAlign: { type: String, default: be.textAlign },
xGap: { type: Number, default: be.xGap },
yGap: { type: Number, default: be.yGap },
xOffset: { type: Number, default: be.xOffset },
yOffset: { type: Number, default: be.yOffset },
zIndex: { type: Number, default: be.zIndex }
},
setup(e) {
const t = e, a = A(""), n = C(() => !!t.content || !!t.image);
async function r() {
n.value && (a.value = await Bn(t));
}
Re(() => ({ ...t }), r, { immediate: !0, deep: !0 });
const s = C(() => Rn(t, a.value));
return (l, o) => (m(), y(ke, null, [
n.value ? (m(), y("div", {
key: 0,
class: "wc-watermark",
style: ce(s.value)
}, null, 4)) : j("", !0),
M(l.$slots, "default", {}, void 0, !0)
], 64));
}
}), dm = /* @__PURE__ */ me(Zd, [["__scopeId", "data-v-91ae1756"]]), ef = (e) => {
const t = { ...be, ...e }, [a, n] = te(""), r = !!t.content || !!t.image, s = Oe(() => {
const {
children: o,
// eslint-disable-line @typescript-eslint/no-unused-vars
...u
} = t;
return JSON.stringify(u);
}, [t]);
ve(() => {
if (!r) return;
let o = !0;
return Bn(t).then((u) => {
o && n(u);
}), () => {
o = !1;
};
}, [s, r]);
const l = Oe(() => r ? Rn(t, a) : {}, [a, r, t]);
return r ? /* @__PURE__ */ f.jsxs(f.Fragment, { children: [
/* @__PURE__ */ f.jsx("div", { className: "wc-watermark", style: l }),
t.children
] }) : t.children || null;
};
ef.displayName = "Watermark";
function Pn(e) {
const t = document.documentElement;
e.primary && Object.entries(e.primary).forEach(([a, n]) => {
t.style.setProperty(`--wc-primary-${a}`, n);
}), e.secondary && Object.entries(e.secondary).forEach(([a, n]) => {
t.style.setProperty(`--wc-secondary-${a}`, n);
}), e.neutral && Object.entries(e.neutral).forEach(([a, n]) => {
t.style.setProperty(`--wc-neutral-${a}`, n);
}), e.success && Object.entries(e.success).forEach(([a, n]) => {
t.style.setProperty(`--wc-success-${a}`, n);
}), e.warning && Object.entries(e.warning).forEach(([a, n]) => {
t.style.setProperty(`--wc-warning-${a}`, n);
}), e.error && Object.entries(e.error).forEach(([a, n]) => {
t.style.setProperty(`--wc-error-${a}`, n);
}), e.info && Object.entries(e.info).forEach(([a, n]) => {
t.style.setProperty(`--wc-info-${a}`, n);
}), e.danger && Object.entries(e.danger).forEach(([a, n]) => {
t.style.setProperty(`--wc-danger-${a}`, n);
}), e.purple && Object.entries(e.purple).forEach(([a, n]) => {
t.style.setProperty(`--wc-purple-${a}`, n);
}), e.pink && Object.entries(e.pink).forEach(([a, n]) => {
t.style.setProperty(`--wc-pink-${a}`, n);
}), e.teal && Object.entries(e.teal).forEach(([a, n]) => {
t.style.setProperty(`--wc-teal-${a}`, n);
}), e.indigo && Object.entries(e.indigo).forEach(([a, n]) => {
t.style.setProperty(`--wc-indigo-${a}`, n);
}), e.fonts && Lt(e.fonts), e.radius && Object.entries(e.radius).forEach(([a, n]) => {
const r = `--wc-radius-${a}`;
t.style.setProperty(r, n);
});
}
function fm(e) {
console.warn("applyCSSTheme is deprecated. Use loadThemeConfig() for file-based themes.");
}
function Lt(e) {
const t = document.documentElement, a = [];
e.chinese && a.push(`"${e.chinese}"`), e.english && a.push(`"${e.english}"`);
const n = e.fallback || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
a.push(n);
const r = a.join(", ");
t.style.setProperty("--wc-font-family", r), t.style.setProperty("--wc-font-chinese", e.chinese || ""), t.style.setProperty("--wc-font-english", e.english || ""), document.body.style.fontFamily = r;
}
function ja(e) {
const t = document.documentElement;
e ? t.classList.add("dark") : t.classList.remove("dark");
}
function pm() {
return document.documentElement.classList.contains("dark");
}
const tf = {
// 保留默认主题作为fallback
default: {
primary: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a"
},
secondary: {
50: "#f3f4ff",
100: "#e5e7ff",
200: "#c7d2fe",
300: "#a5b4fc",
400: "#818cf8",
500: "#6366f1",
600: "#4f46e5",
700: "#4338ca",
800: "#3730a3",
900: "#312e81"
}
}
};
function Na(e) {
if (console.warn("applyTheme is deprecated. Use loadThemeConfig() for file-based themes."), e === "default") {
const t = tf[e];
Pn({
primary: t.primary,
secondary: t.secondary
});
} else
console.warn(`Theme "${e}" is no longer supported. Please use theme.config.json file.`);
}
const af = {
// System default fonts
system: {
english: "system-ui",
chinese: "system-ui",
fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
},
// Chinese-friendly font combination
chinese: {
chinese: "PingFang SC",
english: "SF Pro Display",
fallback: '"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif'
},
// Modern English fonts
modern: {
english: "Inter",
chinese: "Noto Sans SC",
fallback: '"Inter", "Noto Sans SC", sans-serif'
},
// Elegant font combination
elegant: {
english: "Poppins",
chinese: "Source Han Sans",
fallback: '"Poppins", "Source Han Sans", "Noto Sans CJK SC", sans-serif'
},
// Readability first
readable: {
english: "IBM Plex Sans",
chinese: "IBM Plex Sans SC",
fallback: '"IBM Plex Sans", "IBM Plex Sans SC", sans-serif'
},
// Apple style
apple: {
english: "SF Pro Display",
chinese: "PingFang SC",
fallback: '"SF Pro Display", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif'
},
// Google fonts
google: {
english: "Roboto",
chinese: "Noto Sans SC",
fallback: '"Roboto", "Noto Sans SC", sans-serif'
}
};
function mm(e) {
Lt(af[e]);
}
function hm() {
const e = document.documentElement;
return {
chinese: e.style.getPropertyValue("--wc-font-chinese") || void 0,
english: e.style.getPropertyValue("--wc-font-english") || void 0,
fallback: e.style.getPropertyValue("--wc-font-family") || void 0
};
}
async function nf(e = "/theme.config.json") {
if (!(typeof window > "u" || typeof fetch > "u"))
try {
const t = await fetch(e, { cache: "no-store" });
if (!t.ok) {
console.info("[Watercolor UI] theme.config.json not found, using default theme");
return;
}
const a = await t.json();
Pn(a), a.fonts && Lt(a.fonts), console.info("[Watercolor UI] Theme loaded from theme.config.json");
} catch (t) {
console.warn("[Watercolor UI] 无法加载自定义 theme.config.json:", t), console.info("[Watercolor UI] Using default theme");
}
}
typeof window < "u" && nf();
const Dn = {
// 基础图标
heart: "heart",
star: "star",
user: "user",
home: "home",
search: "search",
menu: "menu",
close: "x",
check: "check",
plus: "plus",
minus: "minus",
// 箭头图标
arrowUp: "arrow-up",
arrowDown: "arrow-down",
arrowLeft: "arrow-left",
arrowRight: "arrow-right",
chevronUp: "chevron-up",
chevronDown: "chevron-down",
chevronLeft: "chevron-left",
chevronRight: "chevron-right",
// 状态图标
info: "info",
warning: "alert-triangle",
error: "alert-circle",
success: "check-circle",
help: "help-circle",
// 操作图标
edit: "edit",
delete: "trash-2",
copy: "copy",
download: "download",
upload: "upload",
share: "share",
save: "save",
print: "printer",
// 媒体图标
play: "play",
pause: "pause",
stop: "square",
volume: "volume-2",
volumeOff: "volume-x",
// 通信图标
mail: "mail",
phone: "phone",
message: "message-circle",
// 设置图标
settings: "settings",
gear: "cog",
lock: "lock",
unlock: "unlock",
// 文件图标
file: "file",
folder: "folder",
image: "image",
video: "video",
// 社交图标
github: "github",
twitter: "twitter",
facebook: "facebook",
linkedin: "linkedin",
// 加载图标
loader: "loader",
refresh: "refresh-cw",
// 导航图标
external: "external-link",
link: "link",
bookmark: "bookmark",
// 购物图标
cart: "shopping-cart",
bag: "shopping-bag",
credit: "credit-card",
// 时间图标
clock: "clock",
calendar: "calendar",
// 位置图标
map: "map",
location: "map-pin",
// 天气图标
sun: "sun",
moon: "moon",
cloud: "cloud",
// 工具图标
tool: "wrench",
filter: "filter",
sort: "arrow-up-down"
}, rf = {
// 基础图标
heart: "heart",
star: "star",
user: "user-circle",
home: "home",
search: "magnifying-glass",
menu: "bars-3",
close: "x-mark",
check: "check",
plus: "plus",
minus: "minus",
// 箭头图标
arrowUp: "arrow-up",
arrowDown: "arrow-down",
arrowLeft: "arrow-left",
arrowRight: "arrow-right",
chevronUp: "chevron-up",
chevronDown: "chevron-down",
chevronLeft: "chevron-left",
chevronRight: "chevron-right",
// 状态图标
info: "information-circle",
warning: "exclamation-triangle",
error: "x-circle",
success: "check-circle",
// 操作图标
edit: "pencil",
delete: "trash",
copy: "document-duplicate",
download: "arrow-down-tray",
upload: "arrow-up-tray",
share: "share",
// 设置图标
settings: "cog-6-tooth",
lock: "lock-closed",
unlock: "lock-open"
}, sf = {
// 基础图标
heart: "heart",
star: "star",
user: "user",
home: "home",
search: "search",
menu: "menu",
close: "x",
check: "check",
plus: "plus",
minus: "minus",
// 箭头图标
arrowUp: "arrow-up",
arrowDown: "arrow-down",
arrowLeft: "arrow-left",
arrowRight: "arrow-right",
chevronUp: "chevron-up",
chevronDown: "chevron-down",
chevronLeft: "chevron-left",
chevronRight: "chevron-right",
// 状态图标
info: "info",
warning: "alert-triangle",
error: "alert-circle",
success: "check-circle",
help: "help-circle",
// 操作图标
edit: "edit",
delete: "trash-2",
copy: "copy",
download: "download",
upload: "upload",
share: "share",
save: "save",
print: "printer",
// 媒体图标
play: "play",
pause: "pause",
stop: "square",
volume: "volume-2",
volumeOff: "volume-x",
// 通信图标
mail: "mail",
phone: "phone",
message: "message-circle",
// 设置图标
settings: "settings",
lock: "lock",
// 文件图标
file: "file",
folder: "folder",
image: "image",
video: "video",
// 社交图标
github: "github",
twitter: "twitter",
facebook: "facebook",
// 加载图标
loader: "loader",
refresh: "refresh-cw",
// 导航图标
external: "external-link",
link: "link",
bookmark: "bookmark",
// 购物图标
cart: "shopping-cart",
bag: "shopping-bag",
// 时间图标
clock: "clock",
calendar: "calendar",
// 位置图标
map: "map",
location: "map-pin",
// 天气图标
sun: "sun",
moon: "moon",
cloud: "cloud"
};
function lf(e) {
return {
library: "lucide",
variant: "outline",
size: "md",
color: "currentColor",
strokeWidth: 2,
...e
};
}
function vm(e, t = "lucide") {
switch (t) {
case "lucide":
return Dn[e] || e;
case "heroicons":
return rf[e] || e;
case "feather":
return sf[e] || e;
default:
return e;
}
}
const Ta = {
xs: 16,
sm: 20,
md: 24,
lg: 32,
xl: 48
};
function ym(e) {
return typeof e == "string" && e in Ta ? Ta[e] : e;
}
function Me(e, t = {}) {
return lf({
name: Dn[e],
...t
});
}
const gm = {
// 状态图标
loading: Me("loader", { className: "wc-icon--spinning" }),
success: Me("success", { color: "var(--wc-success-500)" }),
warning: Me("warning", { color: "var(--wc-warning-500)" }),
error: Me("error", { color: "var(--wc-error-500)" }),
info: Me("info", { color: "var(--wc-info-500)" }),
// 操作图标
close: Me("close", { className: "wc-icon--clickable" }),
menu: Me("menu", { className: "wc-icon--clickable" }),
search: Me("search", { className: "wc-icon--clickable" }),
// 导航图标
back: Me("arrowLeft", { className: "wc-icon--clickable" }),
forward: Me("arrowRight", { className: "wc-icon--clickable" }),
up: Me("chevronUp", { className: "wc-icon--clickable" }),
down: Me("chevronDown", { className: "wc-icon--clickable" })
}, of = {
light: {
primary: "#3b82f6",
secondary: "#6b7280",
success: "#10b981",
warning: "#f59e0b",
error: "#ef4444",
info: "#06b6d4",
muted: "#9ca3af"
},
dark: {
primary: "#60a5fa",
secondary: "#9ca3af",
success: "#34d399",
warning: "#fbbf24",
error: "#f87171",
info: "#22d3ee",
muted: "#6b7280"
}
};
function bm(e, t = "light") {
return of[t][e] || e;
}
function Vn(e = "default", t = !1) {
const a = localStorage.getItem("wc-color"), n = localStorage.getItem("wc-scheme");
let r = a || e, s = n ? n === "dark" : t;
return Na(r), ja(s), {
get color() {
return r;
},
get dark() {
return s;
},
setColor: (u) => {
u !== r && (r = u, Na(u), localStorage.setItem("wc-color", u));
},
toggleDark: () => {
s = !s, ja(s), localStorage.setItem("wc-scheme", s ? "dark" : "light");
}
};
}
const Mn = Symbol("Water_ColorTheme"), rt = Vn();
function cf() {
const e = A(rt.color), t = A(rt.dark);
return { color: e, dark: t, setColor: (r) => {
rt.setColor(r), e.value = r;
}, toggleDark: () => {
rt.toggleDark(), t.value = rt.dark;
} };
}
function uf() {
const e = cf();
it(Mn, e);
}
function wm() {
const e = Le(Mn);
if (!e)
throw new Error("No theme store provided. Call provideTheme() in root component.");
return e;
}
Fe({
name: "ThemeProvider",
setup(e, { slots: t }) {
return uf(), () => t.default ? t.default() : null;
}
});
const On = ft(void 0), st = Vn(), xm = ({ children: e }) => {
const [t, a] = te(st.color), [n, r] = te(st.dark), s = (o) => {
st.setColor(o), a(o);
}, l = () => {
st.toggleDark(), r(st.dark);
};
return /* @__PURE__ */ f.jsx(On.Provider, { value: { color: t, setColor: s, dark: n, toggleDark: l }, children: e });
};
function km() {
const e = qe(On);
if (!e) throw new Error("useTheme must be used within ThemeProvider");
return e;
}
export {
kr as AccordionReact,
mf as AccordionVue,
vf as AlertReact,
hf as AlertVue,
gf as AppBarReact,
yf as AppBarVue,
bf as AvatarVue,
Ur as BadgeReact,
wf as BadgeVue,
kf as BannerReact,
xf as BannerVue,
_f as Blockquote,
Cf as BlockquoteReact,
$f as BoxReact,
Sf as BoxVue,
Nf as BreadcrumbReact,
jf as BreadcrumbVue,
Vs as ButtonReact,
Ds as ButtonVue,
Tf as CardActionsVue,
Ef as CardContentVue,
Ya as CardReact,
ds as CardVue,
If as CheckboxVue,
Rf as ChipReact,
Bf as ChipVue,
Df as CircularProgressReact,
Pf as CircularProgressVue,
Vf as ColorPicker,
Mf as ColorPickerReact,
Af as ContainerReact,
Of as ContainerVue,
zf as CopyReact,
Lf as CopyVue,
Ff as Countdown,
qf as CountdownReact,
Hf as DatePickerReact,
Wf as DatePickerVue,
Uf as DropdownVue,
sf as FEATHER_ICONS,
Yf as FabVue,
Kf as Feature,
$o as FeatureReact,
Gf as Feed,
co as FeedReact,
Jf as FileInput,
Ro as FileInputReact,
Lo as FormControlLabelReact,
Qf as FormControlLabelVue,
Do as FormControlReact,
Xf as FormControlVue,
Fo as FormGroupReact,
Zf as FormGroupVue,
Ho as FormHelperTextReact,
ep as FormHelperTextVue,
Uo as GridReact,
tp as GridVue,
rf as HEROICONS,
ap as HoverCard,
li as HoverCardReact,
gm as ICON_PRESETS,
Ta as ICON_SIZES,
of as ICON_THEMES,
rp as IconButtonVue,
bi as IconReact,
np as IconVue,
sp as ImageGallery,
Zi as ImageGalleryReact,
oc as InputReact,
lp as InputVue,
Dn as LUCIDE_ICONS,
fp as ListItemIconReact,
dp as ListItemIconVue,
up as ListItemReact,
mp as ListItemTextReact,
pp as ListItemTextVue,
cp as ListItemVue,
ip as ListReact,
op as ListVue,
hp as Marquee,
vp as MarqueeReact,
yp as ModalVue,
gp as NumberAnimation,
bp as NumberAnimationReact,
wp as Pagination,
xp as PaginationReact,
_p as PaperReact,
kp as PaperVue,
Cp as Paradox,
Sp as ParadoxReact,
$p as Popover,
jp as PopoverReact,
Np as PricingTable,
Tp as PricingTableReact,
pu as ProgressReact,
Ep as ProgressVue,
Bp as RadioGroupReact,
Pp as RadioGroupVue,
Rp as RadioReact,
Ip as RadioVue,
Dp as Rating,
Vp as RatingReact,
Mp as SelectVue,
Ap as SkeletonReact,
Op as SkeletonVue,
Fp as SlideOver,
qp as SlideOverReact,
zp as SliderReact,
Lp as SliderVue,
Hp as SnackbarReact,
Wp as SnackbarVue,
Up as Spinner,
Yp as SpinnerReact,
gd as SwitchReact,
Gp as SwitchVue,
Xp as TableBodyVue,
Qp as TableCellVue,
Zp as TableHeadVue,
Jp as TableReact,
em as TableRowVue,
Kp as TableVue,
kd as TabsReact,
tm as TabsVue,
am as TextFieldVue,
xm as ThemeProvider,
rm as ToolbarReact,
nm as ToolbarVue,
lm as TooltipReact,
sm as TooltipVue,
im as TypingText,
qd as TypingTextReact,
Md as TypographyReact,
om as TypographyVue,
cm as VerificationCodeInput,
um as VideoPlayer,
Xd as VideoPlayerReact,
dm as Watermark,
ef as WatermarkReact,
fm as applyCSSTheme,
mm as applyFontTheme,
Na as applyTheme,
lf as createIconConfig,
Me as createPresetIcon,
af as fontThemes,
hm as getCurrentFonts,
vm as getIconName,
ym as getIconSize,
bm as getThemeColor,
pm as isDarkMode,
nf as loadThemeConfig,
uf as provideTheme,
Lt as setFonts,
Pn as setTheme,
tf as themes,
ja as toggleDarkMode,
km as useReactTheme,
wm as useVueTheme
};