@cghbcf/xp-ui 1.0.0 → 1.0.1

package/dist/cghbcf-xp-ui.es.js

@@ -0,0 +1,1342 @@
+import { ref as _, openBlock as r, createBlock as z, Transition as N, withCtx as S, createElementBlock as i, normalizeClass as $, createElementVNode as c, toDisplayString as k, renderSlot as b, createTextVNode as X, createCommentVNode as g, computed as w, normalizeStyle as C, Teleport as L, createVNode as B, withModifiers as K, onMounted as Q, onBeforeUnmount as J, Fragment as W, renderList as q, nextTick as Z, inject as oe, provide as se } from "vue";
+const v = (e, t) => {
+  const a = e.__vccOpts || e;
+  for (const [l, n] of t)
+    a[l] = n;
+  return a;
+}, re = { class: "xp-alert__icon" }, ie = { class: "xp-alert__content" }, de = { class: "xp-alert__title" }, ce = {
+  key: 0,
+  class: "xp-alert__description"
+}, ue = {
+  __name: "Alert",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "info",
+      validator: (e) => ["success", "warning", "danger", "info"].includes(e)
+    },
+    effect: {
+      type: String,
+      default: "light",
+      validator: (e) => ["light", "dark", "plain"].includes(e)
+    },
+    closable: {
+      type: Boolean,
+      default: !0
+    },
+    showIcon: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["close"],
+  setup(e, { emit: t }) {
+    const a = t, l = _(!0), n = {
+      success: "✓",
+      warning: "!",
+      danger: "×",
+      info: "i"
+    }, s = () => {
+      l.value = !1, a("close");
+    };
+    return (o, u) => (r(), z(N, { name: "xp-alert-fade" }, {
+      default: S(() => [
+        l.value ? (r(), i("div", {
+          key: 0,
+          class: $(["xp-alert", [
+            `xp-alert--${e.type}`,
+            `xp-alert--${e.effect}`,
+            { "xp-alert--plain": e.effect === "plain" }
+          ]]),
+          role: "alert"
+        }, [
+          c("span", re, k(n[e.type]), 1),
+          c("div", ie, [
+            c("span", de, [
+              b(o.$slots, "default", {}, () => [
+                X(k(e.title), 1)
+              ], !0)
+            ]),
+            o.$slots.default ? (r(), i("p", ce, [
+              b(o.$slots, "default", {}, void 0, !0)
+            ])) : g("", !0)
+          ]),
+          e.closable ? (r(), i("i", {
+            key: 0,
+            class: "xp-alert__close-btn",
+            onClick: s
+          }, "×")) : g("", !0)
+        ], 2)) : g("", !0)
+      ]),
+      _: 3
+    }));
+  }
+}, pe = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-91d792bd"]]), fe = ["src", "alt"], he = {
+  key: 1,
+  class: "xp-avatar__slot"
+}, me = {
+  key: 2,
+  class: "xp-avatar__text"
+}, ge = {
+  __name: "Avatar",
+  props: {
+    src: {
+      type: String,
+      default: ""
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (e) => ["circle", "square"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    icon: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["error"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = _(!1), s = w(() => ({
+      backgroundColor: a.src ? "transparent" : "var(--xp-color-primary-bg)",
+      color: a.src ? void 0 : "var(--xp-color-primary)"
+    })), o = () => {
+      n.value = !0, l("error");
+    };
+    return (u, f) => (r(), i("span", {
+      class: $(["xp-avatar", [
+        `xp-avatar--${e.shape}`,
+        `xp-avatar--${e.size}`,
+        { "xp-avatar--fit": e.src }
+      ]]),
+      style: C(s.value)
+    }, [
+      e.src && !n.value ? (r(), i("img", {
+        key: 0,
+        src: e.src,
+        alt: e.alt,
+        onError: o
+      }, null, 40, fe)) : u.$slots.default ? (r(), i("span", he, [
+        b(u.$slots, "default", {}, void 0, !0)
+      ])) : (r(), i("span", me, k(e.alt || "A"), 1))
+    ], 6));
+  }
+}, be = /* @__PURE__ */ v(ge, [["__scopeId", "data-v-a9a54bc5"]]), xe = { key: 0 }, ve = {
+  __name: "Badge",
+  props: {
+    value: {
+      type: [String, Number],
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 99
+    },
+    type: {
+      type: String,
+      default: "danger",
+      validator: (e) => ["primary", "success", "warning", "danger", "info"].includes(e)
+    },
+    isDot: {
+      type: Boolean,
+      default: !1
+    },
+    hidden: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, a = w(() => typeof t.value == "number" && t.value > t.max ? `${t.max}+` : t.value), l = w(() => t.value !== 0 && t.value !== "" && t.value !== null && t.value !== void 0);
+    return (n, s) => (r(), i("div", {
+      class: $(["xp-badge", { "xp-badge--dot": e.isDot, "xp-badge--hidden": e.hidden }])
+    }, [
+      b(n.$slots, "default", {}, void 0, !0),
+      !e.hidden && (e.isDot || l.value) ? (r(), i("sup", {
+        key: 0,
+        class: $(["xp-badge__content", [
+          `xp-badge__content--${e.type}`,
+          { "xp-badge__content--dot": e.isDot }
+        ]])
+      }, [
+        e.isDot ? g("", !0) : (r(), i("span", xe, k(a.value), 1))
+      ], 2)) : g("", !0)
+    ], 2));
+  }
+}, ye = /* @__PURE__ */ v(ve, [["__scopeId", "data-v-207db6dd"]]), _e = ["disabled"], $e = {
+  key: 0,
+  class: "xp-button__loading"
+}, ke = { class: "xp-button__text" }, we = {
+  __name: "Button",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["primary", "default", "success", "warning", "danger", "info"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    plain: {
+      type: Boolean,
+      default: !1
+    },
+    text: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = (s) => {
+      !a.disabled && !a.loading && l("click", s);
+    };
+    return (s, o) => (r(), i("button", {
+      class: $(["xp-button", [
+        `xp-button--${e.type}`,
+        `xp-button--${e.size}`,
+        {
+          "xp-button--disabled": e.disabled,
+          "xp-button--loading": e.loading,
+          "xp-button--plain": e.plain,
+          "xp-button--text": e.text
+        }
+      ]]),
+      disabled: e.disabled || e.loading,
+      onClick: n
+    }, [
+      e.loading ? (r(), i("span", $e)) : g("", !0),
+      c("span", ke, [
+        b(s.$slots, "default", {}, void 0, !0)
+      ])
+    ], 10, _e));
+  }
+}, F = /* @__PURE__ */ v(we, [["__scopeId", "data-v-a768661d"]]), Ce = {
+  key: 0,
+  class: "xp-card__header"
+}, Se = { class: "xp-card__title" }, Be = {
+  key: 0,
+  class: "xp-card__extra"
+}, Ve = { class: "xp-card__body" }, Te = {
+  key: 1,
+  class: "xp-card__footer"
+}, Ie = {
+  __name: "Card",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    shadow: {
+      type: String,
+      default: "always",
+      validator: (e) => ["always", "hover", "never"].includes(e)
+    },
+    bordered: {
+      type: Boolean,
+      default: !0
+    },
+    hover: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, a) => (r(), i("div", {
+      class: $(["xp-card", [
+        `xp-card--${e.shadow}`,
+        {
+          "xp-card--bordered": e.bordered,
+          "xp-card--hover": e.hover
+        }
+      ]])
+    }, [
+      e.title || t.$slots.header ? (r(), i("div", Ce, [
+        b(t.$slots, "header", {}, () => [
+          c("h3", Se, k(e.title), 1)
+        ], !0),
+        t.$slots.extra ? (r(), i("div", Be, [
+          b(t.$slots, "extra", {}, void 0, !0)
+        ])) : g("", !0)
+      ])) : g("", !0),
+      c("div", Ve, [
+        b(t.$slots, "default", {}, void 0, !0)
+      ]),
+      t.$slots.footer ? (r(), i("div", Te, [
+        b(t.$slots, "footer", {}, void 0, !0)
+      ])) : g("", !0)
+    ], 2));
+  }
+}, Re = /* @__PURE__ */ v(Ie, [["__scopeId", "data-v-e65cbe05"]]), Me = { class: "xp-checkbox__input" }, Ne = ["checked", "disabled", ".indeterminate"], Xe = { class: "xp-checkbox__label" }, Ae = {
+  __name: "Checkbox",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = (s) => {
+      if (a.disabled) return;
+      const o = s.target.checked;
+      l("update:modelValue", o), l("change", o);
+    };
+    return (s, o) => (r(), i("label", {
+      class: $(["xp-checkbox", [
+        {
+          "xp-checkbox--checked": e.modelValue,
+          "xp-checkbox--disabled": e.disabled,
+          "xp-checkbox--indeterminate": e.indeterminate
+        }
+      ]])
+    }, [
+      c("span", Me, [
+        o[0] || (o[0] = c("span", { class: "xp-checkbox__inner" }, null, -1)),
+        c("input", {
+          type: "checkbox",
+          class: "xp-checkbox__original",
+          checked: e.modelValue,
+          disabled: e.disabled,
+          onChange: n,
+          ".indeterminate": e.indeterminate
+        }, null, 40, Ne)
+      ]),
+      c("span", Xe, [
+        b(s.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+}, Oe = /* @__PURE__ */ v(Ae, [["__scopeId", "data-v-7c078f46"]]), je = { class: "xp-dialog__header" }, De = { class: "xp-dialog__title" }, Ee = { class: "xp-dialog__body" }, ze = {
+  key: 0,
+  class: "xp-dialog__footer"
+}, Fe = {
+  __name: "Dialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: String,
+      default: "500px"
+    },
+    confirmButtonText: {
+      type: String,
+      default: "确定"
+    },
+    cancelButtonText: {
+      type: String,
+      default: "取消"
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: !0
+    },
+    showDefaultFooter: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["confirm", "cancel", "update:visible", "close"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = () => {
+      l("update:visible", !1), l("close");
+    }, s = () => {
+      a.closeOnClickModal && n();
+    }, o = () => {
+      l("confirm"), n();
+    }, u = () => {
+      l("cancel"), n();
+    };
+    return (f, p) => (r(), z(L, { to: "body" }, [
+      B(N, { name: "xp-dialog-fade" }, {
+        default: S(() => [
+          e.visible ? (r(), i("div", {
+            key: 0,
+            class: "xp-dialog__wrapper",
+            onClick: K(s, ["self"])
+          }, [
+            p[0] || (p[0] = c("div", { class: "xp-dialog__mask" }, null, -1)),
+            B(N, {
+              name: "xp-dialog-slide",
+              appear: ""
+            }, {
+              default: S(() => [
+                e.visible ? (r(), i("div", {
+                  key: 0,
+                  class: "xp-dialog",
+                  style: C({ width: e.width })
+                }, [
+                  c("div", je, [
+                    c("h3", De, k(e.title), 1),
+                    c("button", {
+                      class: "xp-dialog__close",
+                      onClick: n
+                    }, "×")
+                  ]),
+                  c("div", Ee, [
+                    b(f.$slots, "default", {}, void 0, !0)
+                  ]),
+                  f.$slots.footer || e.showDefaultFooter ? (r(), i("div", ze, [
+                    b(f.$slots, "footer", {}, () => [
+                      B(F, { onClick: u }, {
+                        default: S(() => [
+                          X(k(e.cancelButtonText), 1)
+                        ]),
+                        _: 1
+                      }),
+                      B(F, {
+                        type: "primary",
+                        onClick: o
+                      }, {
+                        default: S(() => [
+                          X(k(e.confirmButtonText), 1)
+                        ]),
+                        _: 1
+                      })
+                    ], !0)
+                  ])) : g("", !0)
+                ], 4)) : g("", !0)
+              ]),
+              _: 3
+            })
+          ])) : g("", !0)
+        ]),
+        _: 3
+      })
+    ]));
+  }
+}, Pe = /* @__PURE__ */ v(Fe, [["__scopeId", "data-v-ef43d114"]]), Le = ["onClick"], Je = { key: 0 }, We = {
+  key: 1,
+  class: "xp-dropdown__divider"
+}, qe = {
+  __name: "Dropdown",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["select", "command", "open", "close"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = _(!1), s = _({}), o = _(null), u = _(null), f = () => {
+      Z(() => {
+        if (!o.value || !u.value) return;
+        const d = o.value.getBoundingClientRect(), y = u.value.getBoundingClientRect();
+        let x = d.bottom + 6, I = d.left;
+        I + y.width > window.innerWidth - 10 && (I = window.innerWidth - y.width - 10), x + y.height > window.innerHeight - 10 && (x = d.top - y.height - 6), s.value = {
+          top: `${x + window.scrollY}px`,
+          left: `${I + window.scrollX}px`
+        };
+      });
+    }, p = () => {
+      a.disabled || (n.value = !n.value, n.value ? (f(), l("open")) : l("close"));
+    }, m = (d) => {
+      d.disabled || d.divider || (l("select", d), d.command !== void 0 && l("command", d.command, d), n.value = !1, l("close"));
+    }, h = (d) => {
+      var y;
+      n.value && o.value && !o.value.contains(d.target) && !((y = u.value) != null && y.contains(d.target)) && (n.value = !1, l("close"));
+    };
+    return Q(() => {
+      document.addEventListener("click", h);
+    }), J(() => {
+      document.removeEventListener("click", h);
+    }), (d, y) => (r(), i("div", {
+      class: "xp-dropdown",
+      ref_key: "dropdownRef",
+      ref: o
+    }, [
+      c("div", {
+        class: "xp-dropdown__trigger",
+        onClick: p
+      }, [
+        b(d.$slots, "default", {}, void 0, !0)
+      ]),
+      (r(), z(L, { to: "body" }, [
+        B(N, { name: "xp-dropdown-fade" }, {
+          default: S(() => [
+            n.value ? (r(), i("div", {
+              key: 0,
+              class: "xp-dropdown__menu",
+              style: C(s.value),
+              ref_key: "menuRef",
+              ref: u
+            }, [
+              (r(!0), i(W, null, q(e.items, (x, I) => (r(), i("div", {
+                key: I,
+                class: $(["xp-dropdown__item", { "xp-dropdown__item--disabled": x.disabled, "xp-dropdown__item--divider": x.divider }]),
+                onClick: (Lt) => m(x)
+              }, [
+                x.divider ? g("", !0) : (r(), i("span", Je, k(x.label), 1)),
+                x.divider ? (r(), i("span", We)) : g("", !0)
+              ], 10, Le))), 128))
+            ], 4)) : g("", !0)
+          ]),
+          _: 1
+        })
+      ]))
+    ], 512));
+  }
+}, He = /* @__PURE__ */ v(qe, [["__scopeId", "data-v-ad741cd8"]]), Ue = {
+  key: 0,
+  class: "xp-input__prefix"
+}, Ye = ["type", "value", "placeholder", "disabled", "maxlength"], Ge = {
+  key: 2,
+  class: "xp-input__suffix"
+}, Ke = {
+  __name: "Input",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text",
+      validator: (e) => ["text", "password", "number", "email", "tel", "url"].includes(e)
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    maxlength: {
+      type: [String, Number],
+      default: null
+    },
+    showClear: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "focus", "blur", "clear"],
+  setup(e, { emit: t }) {
+    const a = t, l = _(null), n = _(!1), s = (p) => {
+      a("update:modelValue", p.target.value);
+    }, o = (p) => {
+      n.value = !0, a("focus", p);
+    }, u = (p) => {
+      n.value = !1, a("blur", p);
+    }, f = () => {
+      a("update:modelValue", ""), a("clear"), l.value && l.value.focus();
+    };
+    return (p, m) => (r(), i("div", {
+      class: $(["xp-input", [
+        `xp-input--${e.size}`,
+        {
+          "xp-input--disabled": e.disabled,
+          "xp-input--prefix": p.$slots.prefix,
+          "xp-input--suffix": p.$slots.suffix || e.showClear,
+          "xp-input--focus": n.value
+        }
+      ]])
+    }, [
+      p.$slots.prefix ? (r(), i("span", Ue, [
+        b(p.$slots, "prefix", {}, void 0, !0)
+      ])) : g("", !0),
+      c("input", {
+        ref_key: "inputRef",
+        ref: l,
+        class: "xp-input__inner",
+        type: e.type,
+        value: e.modelValue,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        maxlength: e.maxlength,
+        onInput: s,
+        onFocus: o,
+        onBlur: u
+      }, null, 40, Ye),
+      e.showClear && e.modelValue && !e.disabled ? (r(), i("span", {
+        key: 1,
+        class: "xp-input__clear",
+        onClick: f
+      }, "×")) : g("", !0),
+      p.$slots.suffix && !e.showClear ? (r(), i("span", Ge, [
+        b(p.$slots, "suffix", {}, void 0, !0)
+      ])) : g("", !0)
+    ], 2));
+  }
+}, Qe = /* @__PURE__ */ v(Ke, [["__scopeId", "data-v-f671ef9a"]]), Ze = { class: "xp-progress__bar" }, et = {
+  key: 0,
+  class: "xp-progress__text"
+}, tt = {
+  __name: "Progress",
+  props: {
+    percentage: {
+      type: Number,
+      default: 0,
+      validator: (e) => e >= 0 && e <= 100
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    showText: {
+      type: Boolean,
+      default: !0
+    },
+    type: {
+      type: String,
+      default: "line",
+      validator: (e) => ["line", "circle"].includes(e)
+    },
+    status: {
+      type: String,
+      default: "",
+      validator: (e) => ["", "success", "warning", "exception"].includes(e)
+    }
+  },
+  setup(e) {
+    const t = e, a = w(() => t.color ? t.color : t.status === "success" ? "var(--xp-color-success)" : t.status === "warning" ? "var(--xp-color-warning)" : t.status === "exception" ? "var(--xp-color-danger)" : "var(--xp-color-primary)");
+    return (l, n) => (r(), i("div", {
+      class: $(["xp-progress", [`xp-progress--${e.type}`]])
+    }, [
+      c("div", Ze, [
+        c("div", {
+          class: "xp-progress__inner",
+          style: C({ width: `${e.percentage}%`, backgroundColor: a.value })
+        }, null, 4)
+      ]),
+      e.showText ? (r(), i("span", et, [
+        b(l.$slots, "default", {}, () => [
+          X(k(e.percentage) + "%", 1)
+        ], !0)
+      ])) : g("", !0)
+    ], 2));
+  }
+}, at = /* @__PURE__ */ v(tt, [["__scopeId", "data-v-a95933c8"]]), lt = { class: "xp-radio__input" }, nt = ["checked", "disabled"], ot = { class: "xp-radio__label" }, st = {
+  __name: "Radio",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    value: {
+      type: [String, Number, Boolean],
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = () => {
+      a.disabled || (l("update:modelValue", a.value), l("change", a.value));
+    };
+    return (s, o) => (r(), i("label", {
+      class: $(["xp-radio", [
+        {
+          "xp-radio--checked": e.modelValue === e.value,
+          "xp-radio--disabled": e.disabled
+        }
+      ]])
+    }, [
+      c("span", lt, [
+        o[0] || (o[0] = c("span", { class: "xp-radio__inner" }, null, -1)),
+        c("input", {
+          type: "radio",
+          class: "xp-radio__original",
+          checked: e.modelValue === e.value,
+          disabled: e.disabled,
+          onChange: n
+        }, null, 40, nt)
+      ]),
+      c("span", ot, [
+        b(s.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+}, rt = /* @__PURE__ */ v(st, [["__scopeId", "data-v-02a0d80d"]]), it = { class: "xp-rate" }, dt = ["onClick", "onMouseenter"], ct = { class: "xp-rate__star" }, ut = {
+  key: 0,
+  class: "xp-rate__text"
+}, pt = {
+  __name: "Rate",
+  props: {
+    modelValue: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 5
+    },
+    color: {
+      type: String,
+      default: "#f7ba2a"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    showText: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = _(0), s = w(() => n.value || a.modelValue), o = (f) => {
+      const p = s.value - f + 1;
+      return p >= 1 ? 100 : p > 0 ? p * 100 : 0;
+    }, u = (f) => {
+      a.disabled || (l("update:modelValue", f), l("change", f));
+    };
+    return (f, p) => (r(), i("div", it, [
+      (r(!0), i(W, null, q(e.max, (m) => (r(), i("span", {
+        key: m,
+        class: $(["xp-rate__item", {
+          "xp-rate__item--disabled": e.disabled
+        }]),
+        style: C({ cursor: e.disabled ? "default" : "pointer" }),
+        onClick: (h) => u(m),
+        onMouseenter: (h) => n.value = m,
+        onMouseleave: p[0] || (p[0] = (h) => n.value = 0)
+      }, [
+        c("span", ct, [
+          c("span", {
+            class: "xp-rate__star-inner",
+            style: C({ width: o(m) + "%", color: e.color })
+          }, " ★ ", 4),
+          p[1] || (p[1] = c("span", { class: "xp-rate__star-outer" }, "★", -1))
+        ])
+      ], 46, dt))), 128)),
+      e.showText && !e.disabled ? (r(), i("span", ut, k(e.modelValue) + " / " + k(e.max), 1)) : g("", !0)
+    ]));
+  }
+}, ft = /* @__PURE__ */ v(pt, [["__scopeId", "data-v-17bb0933"]]), ht = ["aria-checked"], mt = {
+  key: 0,
+  class: "xp-switch__label"
+}, gt = {
+  __name: "Switch",
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = () => {
+      if (a.disabled) return;
+      const s = !a.modelValue;
+      l("update:modelValue", s), l("change", s);
+    };
+    return (s, o) => (r(), i("div", {
+      class: $(["xp-switch", [
+        `xp-switch--${e.size}`,
+        {
+          "xp-switch--checked": e.modelValue,
+          "xp-switch--disabled": e.disabled
+        }
+      ]]),
+      role: "switch",
+      "aria-checked": e.modelValue,
+      onClick: n
+    }, [
+      o[0] || (o[0] = c("span", { class: "xp-switch__core" }, [
+        c("span", { class: "xp-switch__action" })
+      ], -1)),
+      s.$slots.default ? (r(), i("span", mt, [
+        b(s.$slots, "default", {}, void 0, !0)
+      ])) : g("", !0)
+    ], 10, ht));
+  }
+}, bt = /* @__PURE__ */ v(gt, [["__scopeId", "data-v-5a5e33c5"]]), xt = {
+  key: 0,
+  class: "xp-tab-pane"
+}, vt = {
+  __name: "TabPane",
+  props: {
+    name: {
+      type: [String, Number],
+      required: !0
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, a = oe("xpTabs", null), l = w(() => a ? a.currentValue.value === t.name : !0);
+    return Q(() => {
+      a && a.addTab && a.addTab({ name: t.name, title: t.title, disabled: t.disabled });
+    }), J(() => {
+      a && a.removeTab && a.removeTab(t.name);
+    }), (n, s) => l.value ? (r(), i("div", xt, [
+      b(n.$slots, "default", {}, void 0, !0)
+    ])) : g("", !0);
+  }
+}, yt = /* @__PURE__ */ v(vt, [["__scopeId", "data-v-6fe7943a"]]), _t = { class: "xp-tabs" }, $t = {
+  class: "xp-tabs__nav",
+  role: "tablist"
+}, kt = ["onClick"], wt = { class: "xp-tabs__content" }, Ct = {
+  __name: "Tabs",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: null
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = _([]), s = w(() => {
+      var m;
+      return a.modelValue !== null && a.modelValue !== void 0 && a.modelValue !== "" ? a.modelValue : ((m = n.value[0]) == null ? void 0 : m.name) ?? null;
+    }), o = w(() => {
+      const m = n.value.findIndex((d) => d.name === s.value);
+      return {
+        transform: `translateX(${(m >= 0 ? m : 0) * 100}%)`,
+        width: `${n.value.length ? 100 / n.value.length : 0}%`
+      };
+    }), u = (m) => {
+      m.disabled || (l("update:modelValue", m.name), l("change", m.name));
+    };
+    return se("xpTabs", { addTab: (m) => {
+      n.value.find((h) => h.name === m.name) || n.value.push(m);
+    }, removeTab: (m) => {
+      const h = n.value.findIndex((d) => d.name === m);
+      h >= 0 && n.value.splice(h, 1);
+    }, currentValue: s }), (m, h) => (r(), i("div", _t, [
+      c("div", $t, [
+        (r(!0), i(W, null, q(n.value, (d, y) => (r(), i("div", {
+          key: d.name || y,
+          class: $(["xp-tabs__item", [
+            {
+              "xp-tabs__item--active": s.value === d.name,
+              "xp-tabs__item--disabled": d.disabled
+            }
+          ]]),
+          role: "tab",
+          onClick: (x) => u(d)
+        }, k(d.title), 11, kt))), 128)),
+        c("div", {
+          class: "xp-tabs__active-bar",
+          style: C(o.value)
+        }, null, 4)
+      ]),
+      c("div", wt, [
+        b(m.$slots, "default", {}, void 0, !0)
+      ])
+    ]));
+  }
+}, St = /* @__PURE__ */ v(Ct, [["__scopeId", "data-v-3e658dba"]]), Bt = {
+  __name: "Tag",
+  props: {
+    type: {
+      type: String,
+      default: "default",
+      validator: (e) => ["primary", "default", "success", "warning", "danger", "info"].includes(e)
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    color: {
+      type: String,
+      default: ""
+    },
+    plain: {
+      type: Boolean,
+      default: !1
+    },
+    round: {
+      type: Boolean,
+      default: !1
+    },
+    closable: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click", "close"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, n = w(() => a.color ? a.color.startsWith("#") || a.color.startsWith("rgb") ? {
+      backgroundColor: a.color,
+      borderColor: a.color,
+      color: "#fff"
+    } : {} : {}), s = (u) => {
+      l("click", u);
+    }, o = (u) => {
+      l("close", u);
+    };
+    return (u, f) => (r(), i("span", {
+      class: $(["xp-tag", [
+        `xp-tag--${e.type}`,
+        `xp-tag--${e.size}`,
+        {
+          "xp-tag--plain": e.plain,
+          "xp-tag--round": e.round,
+          "xp-tag--closable": e.closable
+        }
+      ]]),
+      style: C(n.value),
+      onClick: s
+    }, [
+      b(u.$slots, "default", {}, void 0, !0),
+      e.closable ? (r(), i("span", {
+        key: 0,
+        class: "xp-tag__close",
+        onClick: K(o, ["stop"])
+      }, "×")) : g("", !0)
+    ], 6));
+  }
+}, Vt = /* @__PURE__ */ v(Bt, [["__scopeId", "data-v-903813de"]]), Tt = { class: "xp-tooltip__content" }, It = {
+  __name: "Tooltip",
+  props: {
+    content: {
+      type: String,
+      default: ""
+    },
+    placement: {
+      type: String,
+      default: "top",
+      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
+    },
+    trigger: {
+      type: String,
+      default: "hover",
+      validator: (e) => ["hover", "click", "manual"].includes(e)
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    const t = e, a = _(!1), l = _({}), n = _(null), s = _(null);
+    let o = null;
+    const u = () => {
+      Z(() => {
+        if (!n.value || !s.value) return;
+        const h = n.value.getBoundingClientRect(), d = s.value.getBoundingClientRect();
+        let y = 0, x = 0;
+        switch (t.placement) {
+          case "top":
+            y = h.top - d.height - 8, x = h.left + h.width / 2 - d.width / 2;
+            break;
+          case "bottom":
+            y = h.bottom + 8, x = h.left + h.width / 2 - d.width / 2;
+            break;
+          case "left":
+            y = h.top + h.height / 2 - d.height / 2, x = h.left - d.width - 8;
+            break;
+          case "right":
+            y = h.top + h.height / 2 - d.height / 2, x = h.right + 8;
+            break;
+        }
+        l.value = {
+          top: `${y + window.scrollY}px`,
+          left: `${x + window.scrollX}px`
+        };
+      });
+    }, f = () => {
+      t.disabled || (clearTimeout(o), o = setTimeout(() => {
+        a.value = !0, u();
+      }, 100));
+    }, p = () => {
+      clearTimeout(o), o = setTimeout(() => {
+        a.value = !1;
+      }, 150);
+    }, m = () => {
+      t.trigger !== "click" || t.disabled || (a.value = !a.value, a.value && u());
+    };
+    return J(() => {
+      clearTimeout(o);
+    }), (h, d) => (r(), i("div", {
+      class: "xp-tooltip",
+      ref_key: "tooltipRef",
+      ref: n
+    }, [
+      c("div", {
+        class: "xp-tooltip__trigger",
+        onMouseenter: f,
+        onMouseleave: p,
+        onClick: m
+      }, [
+        b(h.$slots, "default", {}, void 0, !0)
+      ], 32),
+      (r(), z(L, { to: "body" }, [
+        B(N, { name: "xp-tooltip-fade" }, {
+          default: S(() => [
+            a.value ? (r(), i("div", {
+              key: 0,
+              class: $(["xp-tooltip__popper", [`xp-tooltip__popper--${e.placement}`]]),
+              style: C(l.value),
+              ref_key: "popperRef",
+              ref: s
+            }, [
+              c("div", Tt, [
+                b(h.$slots, "content", {}, () => [
+                  X(k(e.content), 1)
+                ], !0)
+              ]),
+              d[0] || (d[0] = c("div", { class: "xp-tooltip__arrow" }, null, -1))
+            ], 6)) : g("", !0)
+          ]),
+          _: 3
+        })
+      ]))
+    ], 512));
+  }
+}, Rt = /* @__PURE__ */ v(It, [["__scopeId", "data-v-6d9af40b"]]), Mt = /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, Nt = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([\d.]+))?\s*\)$/;
+function E(e) {
+  if (typeof e != "string") return null;
+  const t = e.trim(), a = t.match(Mt);
+  if (a) {
+    let n = a[1];
+    n.length === 3 && (n = n.split("").map((f) => f + f).join(""));
+    const s = parseInt(n.slice(0, 2), 16), o = parseInt(n.slice(2, 4), 16), u = parseInt(n.slice(4, 6), 16);
+    return { r: s, g: o, b: u, a: 1 };
+  }
+  const l = t.match(Nt);
+  return l ? {
+    r: parseInt(l[1], 10),
+    g: parseInt(l[2], 10),
+    b: parseInt(l[3], 10),
+    a: l[4] ? parseFloat(l[4]) : 1
+  } : null;
+}
+function Xt(e) {
+  return Math.max(0, Math.min(255, Math.round(e)));
+}
+function At(e, t, a) {
+  const l = (n) => Xt(n).toString(16).padStart(2, "0");
+  return "#" + l(e) + l(t) + l(a);
+}
+function ee(e, t, a = 0.5) {
+  const l = E(e), n = E(t);
+  if (!l || !n) return "#000000";
+  const s = Math.max(0, Math.min(1, a)), o = l.r * (1 - s) + n.r * s, u = l.g * (1 - s) + n.g * s, f = l.b * (1 - s) + n.b * s;
+  return At(o, u, f);
+}
+function j(e, t) {
+  return ee(e, "#ffffff", t);
+}
+function D(e, t) {
+  return ee(e, "#000000", t);
+}
+function Wt(e) {
+  return j(e, 0.3);
+}
+function qt(e) {
+  return D(e, 0.2);
+}
+function Ht(e, t) {
+  const a = E(e);
+  if (!a) return e;
+  const l = Math.max(0, Math.min(1, t));
+  return `rgba(${a.r}, ${a.g}, ${a.b}, ${l})`;
+}
+function Ut(e) {
+  const t = E(e);
+  return t ? (t.r * 299 + t.g * 587 + t.b * 114) / 1e3 < 128 : !1;
+}
+function te(e, t) {
+  const a = j(e, 0.3), l = D(e, 0.2), n = t === "dark" ? D(e, 0.85) : j(e, 0.9), s = t === "dark" ? D(e, 0.7) : j(e, 0.7);
+  return { base: e, light: a, dark: l, bg: n, border: s };
+}
+const V = {
+  primary: "#409eff",
+  success: "#67c23a",
+  warning: "#e6a23c",
+  danger: "#f56c6c",
+  info: "#909399"
+}, A = {
+  light: {
+    text: { primary: "#303133", regular: "#606266", secondary: "#909399", placeholder: "#c0c4cc" },
+    border: { base: "#dcdfe6", light: "#ebeef5", lighter: "#f2f6fc" },
+    bg: { base: "#ffffff", page: "#f2f3f5", soft: "#f5f7fa", overlay: "rgba(0, 0, 0, 0.5)" },
+    fill: { base: "#f0f2f5", light: "#f5f7fa", lighter: "#fafafa" },
+    shadow: {
+      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+      md: "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
+      lg: "0 4px 20px 0 rgba(0, 0, 0, 0.15)",
+      overlay: "0 8px 24px 0 rgba(0, 0, 0, 0.2)"
+    }
+  },
+  dark: {
+    text: { primary: "#e5eaf3", regular: "#cfd3dc", secondary: "#a3a6ad", placeholder: "#8d9095" },
+    border: { base: "#4c4d4f", light: "#414243", lighter: "#363637" },
+    bg: { base: "#1d1e1f", page: "#141414", soft: "#2a2b2c", overlay: "rgba(0, 0, 0, 0.7)" },
+    fill: { base: "#303030", light: "#262727", lighter: "#1d1d1d" },
+    shadow: {
+      sm: "0 1px 2px 0 rgba(0, 0, 0, 0.4)",
+      md: "0 2px 12px 0 rgba(0, 0, 0, 0.45)",
+      lg: "0 4px 20px 0 rgba(0, 0, 0, 0.5)",
+      overlay: "0 8px 24px 0 rgba(0, 0, 0, 0.6)"
+    }
+  }
+};
+function T() {
+  return {
+    primary: { ...V },
+    light: U(A.light),
+    dark: U(A.dark)
+  };
+}
+function U(e) {
+  return JSON.parse(JSON.stringify(e));
+}
+function Y(e, t) {
+  const a = ["primary", "success", "warning", "danger", "info"], l = [];
+  for (const n of a) {
+    const s = e[n] || V[n], o = te(s, t);
+    l.push(`  --xp-color-${n}: ${s};`), l.push(`  --xp-color-${n}-light: ${o.light};`), l.push(`  --xp-color-${n}-dark: ${o.dark};`), l.push(`  --xp-color-${n}-bg: ${o.bg};`), l.push(`  --xp-color-${n}-border: ${o.border};`);
+  }
+  return l.join(`
+`);
+}
+function G(e) {
+  const t = [];
+  for (const a of Object.keys(e.text)) t.push(`  --xp-text-color-${a}: ${e.text[a]};`);
+  t.push(`  --xp-border-color: ${e.border.base};`), t.push(`  --xp-border-color-light: ${e.border.light};`), t.push(`  --xp-border-color-lighter: ${e.border.lighter};`);
+  for (const a of Object.keys(e.bg)) {
+    const l = a === "base" ? "" : `-${a}`;
+    t.push(`  --xp-bg-color${l}: ${e.bg[a]};`);
+  }
+  for (const a of Object.keys(e.fill)) {
+    const l = a === "base" ? "" : `-${a}`;
+    t.push(`  --xp-fill-color${l}: ${e.fill[a]};`);
+  }
+  for (const a of Object.keys(e.shadow)) t.push(`  --xp-shadow-${a}: ${e.shadow[a]};`);
+  return t.join(`
+`);
+}
+function Ot(e, t) {
+  const a = {}, l = e.primary || V, n = ["primary", "success", "warning", "danger", "info"];
+  for (const o of n) {
+    const u = l[o] || V[o], f = te(u, t);
+    a[`--xp-color-${o}`] = u, a[`--xp-color-${o}-light`] = f.light, a[`--xp-color-${o}-dark`] = f.dark, a[`--xp-color-${o}-bg`] = f.bg, a[`--xp-color-${o}-border`] = f.border;
+  }
+  const s = e[t] || A[t];
+  for (const o of Object.keys(s.text)) a[`--xp-text-color-${o}`] = s.text[o];
+  a["--xp-border-color"] = s.border.base, a["--xp-border-color-light"] = s.border.light, a["--xp-border-color-lighter"] = s.border.lighter;
+  for (const o of Object.keys(s.bg)) a[`--xp-bg-color${o === "base" ? "" : "-" + o}`] = s.bg[o];
+  for (const o of Object.keys(s.fill)) a[`--xp-fill-color${o === "base" ? "" : "-" + o}`] = s.fill[o];
+  for (const o of Object.keys(s.shadow)) a[`--xp-shadow-${o}`] = s.shadow[o];
+  return a;
+}
+function ae(e) {
+  return [
+    ':root, [data-theme="light"] {',
+    Y(e.primary || V, "light"),
+    G(e.light || A.light),
+    "}",
+    "",
+    '[data-theme="dark"] {',
+    Y(e.primary || V, "dark"),
+    G(e.dark || A.dark),
+    "}"
+  ].join(`
+`);
+}
+let O = null;
+function jt() {
+  if (typeof document > "u") return null;
+  if (O && document.contains(O)) return O;
+  let e = document.querySelector("style[data-xp-ui-theme]");
+  return e || (e = document.createElement("style"), e.setAttribute("data-xp-ui-theme", "true"), document.head.appendChild(e)), O = e, e;
+}
+function Dt(e) {
+  const t = jt();
+  t && (t.textContent = ae(e));
+}
+const H = _("light"), le = _(T());
+function R(e) {
+  if (["light", "dark"].includes(e) && (H.value = e, typeof document < "u")) {
+    document.documentElement.setAttribute("data-theme", e);
+    try {
+      localStorage.setItem("xp-ui-theme", e);
+    } catch {
+    }
+  }
+}
+function Et() {
+  R(H.value === "light" ? "dark" : "light");
+}
+function M(e) {
+  if (!e) return;
+  const t = T();
+  e.primary && (t.primary = { ...t.primary, ...e.primary }), e.light && (t.light = P(t.light, e.light)), e.dark && (t.dark = P(t.dark, e.dark)), le.value = t, Dt(t);
+  try {
+    localStorage.setItem("xp-ui-theme-config", JSON.stringify(t));
+  } catch {
+  }
+}
+function zt() {
+  M(T());
+}
+function Ft() {
+  if (typeof document > "u") return;
+  let e = null;
+  try {
+    e = localStorage.getItem("xp-ui-theme");
+  } catch {
+  }
+  e === "light" || e === "dark" ? R(e) : typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? R("dark") : R("light");
+  let t = null;
+  try {
+    t = localStorage.getItem("xp-ui-theme-config");
+  } catch {
+  }
+  if (t)
+    try {
+      M(JSON.parse(t));
+    } catch {
+      M(T());
+    }
+  else
+    M(T());
+}
+function P(e, t) {
+  if (!t || typeof t != "object") return e;
+  const a = Array.isArray(e) ? [...e] : { ...e };
+  for (const l of Object.keys(t))
+    t[l] && typeof t[l] == "object" && !Array.isArray(t[l]) ? a[l] = P(e[l] || {}, t[l]) : a[l] = t[l];
+  return a;
+}
+function Yt() {
+  return {
+    theme: H,
+    themeConfig: le,
+    setTheme: R,
+    toggleTheme: Et,
+    initTheme: Ft,
+    applyThemeConfig: M,
+    resetThemeConfig: zt,
+    getDefaultThemeConfig: T,
+    buildCssString: ae,
+    buildCssVars: Ot
+  };
+}
+const ne = {
+  XpAlert: pe,
+  XpAvatar: be,
+  XpBadge: ye,
+  XpButton: F,
+  XpCard: Re,
+  XpCheckbox: Oe,
+  XpDialog: Pe,
+  XpDropdown: He,
+  XpInput: Qe,
+  XpProgress: at,
+  XpRadio: rt,
+  XpRate: ft,
+  XpSwitch: bt,
+  XpTabPane: yt,
+  XpTabs: St,
+  XpTag: Vt,
+  XpTooltip: Rt
+}, Pt = (e) => {
+  Object.entries(ne).forEach(([t, a]) => {
+    e.component(t, a);
+  });
+}, Gt = {
+  install: Pt,
+  ...ne
+};
+export {
+  V as DEFAULT_PRIMARY,
+  A as DEFAULT_TOKENS,
+  pe as XpAlert,
+  be as XpAvatar,
+  ye as XpBadge,
+  F as XpButton,
+  Re as XpCard,
+  Oe as XpCheckbox,
+  Pe as XpDialog,
+  He as XpDropdown,
+  Qe as XpInput,
+  at as XpProgress,
+  rt as XpRadio,
+  ft as XpRate,
+  bt as XpSwitch,
+  yt as XpTabPane,
+  St as XpTabs,
+  Vt as XpTag,
+  Rt as XpTooltip,
+  M as applyThemeConfig,
+  ae as buildCssString,
+  Ot as buildCssVars,
+  D as darken,
+  Gt as default,
+  qt as deriveDark,
+  Wt as deriveLight,
+  T as getDefaultThemeConfig,
+  Ft as initTheme,
+  Pt as install,
+  Ut as isDark,
+  j as lighten,
+  ee as mix,
+  E as parseColor,
+  zt as resetThemeConfig,
+  R as setTheme,
+  At as toHex,
+  Et as toggleTheme,
+  Yt as useTheme,
+  Ht as withAlpha
+};