@xto/navigation 1.1.0 → 1.2.0

package/es/index.mjs

@@ -1,95 +1,99 @@
-import { defineComponent as y, useSlots as P, ref as _, watch as T, provide as I, computed as v, openBlock as u, createElementBlock as m, normalizeClass as s, createElementVNode as h, unref as r, Fragment as x, renderList as E, toDisplayString as k, renderSlot as p, inject as w, withDirectives as O, createCommentVNode as H, vShow as W, normalizeStyle as S, createTextVNode as C, createVNode as X, Transition as D, withCtx as F, onMounted as q } from "vue";
-import { useNamespace as L } from "@xto/core";
-const J = ["onClick"], s2 = /* @__PURE__ */ y({
+import { defineComponent as V, useSlots as W, ref as w, watch as T, provide as A, computed as m, openBlock as u, createElementBlock as d, normalizeClass as o, createElementVNode as h, unref as r, Fragment as S, renderList as q, toDisplayString as H, renderSlot as f, inject as B, withDirectives as N, createCommentVNode as C, vShow as O, normalizeStyle as I, createTextVNode as $, createVNode as X, Transition as j, withCtx as G, onMounted as J } from "vue";
+import { useNamespace as g } from "@xto/core";
+const Q = ["onClick"], n0 = /* @__PURE__ */ V({
   name: "XTabs",
   __name: "index",
   props: {
-    modelValue: { default: "" },
+    modelValue: { default: void 0 },
+    activeKey: { default: void 0 },
     type: { default: "line" },
     tabPosition: { default: "top" },
     addable: { type: Boolean, default: !1 },
     closable: { type: Boolean, default: !1 }
   },
-  emits: ["update:modelValue", "tabClick", "edit"],
-  setup(t, { emit: n }) {
-    const a = t, e = n, l = L("tabs"), o = P(), d = _(a.modelValue);
-    T(() => a.modelValue, (c) => {
-      d.value = c;
+  emits: ["update:modelValue", "update:activeKey", "tabClick", "edit"],
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("tabs"), t = W(), v = w(e.modelValue ?? e.activeKey ?? "");
+    T([() => e.modelValue, () => e.activeKey], ([i, p]) => {
+      const c = i ?? p;
+      c !== void 0 && (v.value = c);
     });
-    const f = (c, M) => {
-      d.value = c, e("update:modelValue", c);
+    const z = (i, p) => {
+      v.value = i, a("update:modelValue", i), a("update:activeKey", i);
     };
-    I("tabs", {
-      props: a,
-      activeName: d,
-      handleTabClick: f
+    A("tabs", {
+      props: e,
+      activeName: v,
+      handleTabClick: z
     });
-    const V = v(() => [
+    const M = m(() => [
       l.b(),
-      l.m(a.type),
-      l.is(`position-${a.tabPosition}`)
-    ]), b = v(() => {
-      var M;
-      return (((M = o.default) == null ? void 0 : M.call(o)) || []).filter((i) => i.type && i.type.name === "XTabPane").map((i) => {
-        var z, g, A, N;
+      l.m(e.type),
+      l.is(`position-${e.tabPosition}`)
+    ]), b = m(() => {
+      var p;
+      return (((p = t.default) == null ? void 0 : p.call(t)) || []).filter((c) => c.type && c.type.name === "XTabPane").map((c) => {
+        var k, y, L, D, P, E, K;
         return {
-          name: ((z = i.props) == null ? void 0 : z.name) || ((g = i.props) == null ? void 0 : g.label),
-          label: (A = i.props) == null ? void 0 : A.label,
-          disabled: ((N = i.props) == null ? void 0 : N.disabled) === !0
+          name: ((k = c.props) == null ? void 0 : k.name) || ((y = c.props) == null ? void 0 : y.key) || ((L = c.props) == null ? void 0 : L.label) || ((D = c.props) == null ? void 0 : D.tab),
+          label: ((P = c.props) == null ? void 0 : P.label) || ((E = c.props) == null ? void 0 : E.tab),
+          disabled: ((K = c.props) == null ? void 0 : K.disabled) === !0
         };
       });
     });
-    return (c, M) => (u(), m("div", {
-      class: s(V.value)
+    return (i, p) => (u(), d("div", {
+      class: o(M.value)
     }, [
       h("div", {
-        class: s(r(l).e("header"))
+        class: o(r(l).e("header"))
       }, [
         h("div", {
-          class: s(r(l).e("nav"))
+          class: o(r(l).e("nav"))
         }, [
-          (u(!0), m(x, null, E(b.value, (i) => (u(), m("div", {
-            key: i.name,
-            class: s([
+          (u(!0), d(S, null, q(b.value, (c) => (u(), d("div", {
+            key: c.name,
+            class: o([
               r(l).e("item"),
-              r(l).em("item", d.value === i.name ? "active" : ""),
-              r(l).is("disabled", i.disabled)
+              r(l).em("item", v.value === c.name ? "active" : ""),
+              r(l).is("disabled", c.disabled)
             ]),
-            onClick: (z) => i.disabled ? null : f(i.name)
-          }, k(i.label), 11, J))), 128))
+            onClick: (k) => c.disabled ? null : z(c.name)
+          }, H(c.label), 11, Q))), 128))
         ], 2)
       ], 2),
       h("div", {
-        class: s(r(l).e("content"))
+        class: o(r(l).e("content"))
       }, [
-        p(c.$slots, "default")
+        f(i.$slots, "default")
       ], 2)
     ], 2));
   }
-}), K = {
+}), U = {
   class: "x-tab-pane",
   role: "tabpanel"
-}, t2 = /* @__PURE__ */ y({
+}, c0 = /* @__PURE__ */ V({
   name: "XTabPane",
   __name: "TabPane",
   props: {
     label: {},
+    tab: {},
     name: {},
+    key: {},
     disabled: { type: Boolean, default: !1 },
     closable: { type: Boolean, default: !1 },
     lazy: { type: Boolean, default: !1 }
   },
-  setup(t) {
-    const n = t, a = w("tabs"), e = _(!1), l = v(() => n.name || n.label), o = v(() => (a == null ? void 0 : a.activeName.value) === l.value);
-    return T(() => a == null ? void 0 : a.activeName.value, () => {
-      o.value && n.lazy && !e.value && (e.value = !0);
-    }, { immediate: !0 }), o.value && n.lazy && (e.value = !0), (d, f) => O((u(), m("div", K, [
-      e.value || !t.lazy ? p(d.$slots, "default", { key: 0 }) : H("", !0)
+  setup(s) {
+    const n = s, e = B("tabs"), a = w(!1), l = m(() => n.name || n.key || n.label || n.tab), t = m(() => (e == null ? void 0 : e.activeName.value) === l.value);
+    return T(() => e == null ? void 0 : e.activeName.value, () => {
+      t.value && n.lazy && !a.value && (a.value = !0);
+    }, { immediate: !0 }), t.value && n.lazy && (a.value = !0), (v, z) => N((u(), d("div", U, [
+      a.value || !s.lazy ? f(v.$slots, "default", { key: 0 }) : C("", !0)
     ], 512)), [
-      [W, o.value]
+      [O, t.value]
     ]);
   }
-}), o2 = /* @__PURE__ */ y({
+}), i0 = /* @__PURE__ */ V({
   name: "XMenu",
   __name: "index",
   props: {
@@ -103,41 +107,41 @@ const J = ["onClick"], s2 = /* @__PURE__ */ y({
     router: { type: Boolean }
   },
   emits: ["update:modelValue", "select", "open", "close"],
-  setup(t, { emit: n }) {
-    const a = t, e = n, l = L("menu"), o = _(a.modelValue), d = _([...a.defaultOpeneds]);
-    T(() => a.modelValue, (i) => {
-      o.value = i;
-    }), I("menu", {
-      props: a,
-      activeIndex: o,
-      openedMenus: d,
-      handleSelect: (i, z = []) => {
-        o.value = i, e("update:modelValue", i), e("select", i, z);
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("menu"), t = w(e.modelValue), v = w([...e.defaultOpeneds]);
+    T(() => e.modelValue, (c) => {
+      t.value = c;
+    }), A("menu", {
+      props: e,
+      activeIndex: t,
+      openedMenus: v,
+      handleSelect: (c, k = []) => {
+        t.value = c, a("update:modelValue", c), a("select", c, k);
       },
-      handleOpen: (i, z = []) => {
-        d.value.includes(i) || d.value.push(i), e("open", i, z);
+      handleOpen: (c, k = []) => {
+        v.value.includes(c) || v.value.push(c), a("open", c, k);
       },
-      handleClose: (i, z = []) => {
-        const g = d.value.indexOf(i);
-        g > -1 && d.value.splice(g, 1), e("close", i, z);
+      handleClose: (c, k = []) => {
+        const y = v.value.indexOf(c);
+        y > -1 && v.value.splice(y, 1), a("close", c, k);
       }
     });
-    const c = v(() => [
+    const i = m(() => [
       l.b(),
-      l.is("collapse", a.collapse),
-      l.is(`mode-${a.mode}`)
-    ]), M = v(() => ({
-      backgroundColor: a.backgroundColor,
-      color: a.textColor
+      l.is("collapse", e.collapse),
+      l.is(`mode-${e.mode}`)
+    ]), p = m(() => ({
+      backgroundColor: e.backgroundColor,
+      color: e.textColor
     }));
-    return (i, z) => (u(), m("ul", {
-      class: s(c.value),
-      style: S(M.value)
+    return (c, k) => (u(), d("ul", {
+      class: o(i.value),
+      style: I(p.value)
     }, [
-      p(i.$slots, "default")
+      f(c.$slots, "default")
     ], 6));
   }
-}), G = {
+}), F = {
   // 箭头类
   "arrow-up": "M12 19V5m0 0l-7 7m7-7l7 7",
   "arrow-down": "M12 5v14m0 0l7-7m-7 7l-7-7",
@@ -240,6 +244,7 @@ const J = ["onClick"], s2 = /* @__PURE__ */ y({
   list: "M4 6h16M4 10h16M4 14h16M4 18h16",
   grid: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
   fullscreen: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4",
+  "fullscreen-exit": "M9 4V9H4m11-5v5h5M4 15h5v5m11-5h-5v5",
   "zoom-in": "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7",
   "zoom-out": "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7",
   print: "M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z",
@@ -250,12 +255,17 @@ const J = ["onClick"], s2 = /* @__PURE__ */ y({
   database: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4",
   server: "M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01",
   cloud: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z",
-  gift: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+  gift: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
+  // 主题类
+  moon: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",
+  sun: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",
+  theme: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01",
+  skin: "M7 4h2v1c0 1.66 1.34 3 3 3s3-1.34 3-3V4h2l3 3v6h-4l1 3v5H7v-5l1-3H4V7l3-3z"
 };
-function Q(t) {
-  return t in G;
+function Y(s) {
+  return s in F;
 }
-const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
+const Z = ["stroke-width"], e0 = ["d"], R = /* @__PURE__ */ V({
   name: "XIcon",
   __name: "index",
   props: {
@@ -265,38 +275,38 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     spin: { type: Boolean, default: !1 },
     strokeWidth: { default: 2 }
   },
-  setup(t) {
-    const n = t, a = L("icon"), e = v(() => typeof n.size == "number" ? `${n.size}px` : n.size), l = v(() => ({
-      width: e.value,
-      height: e.value,
+  setup(s) {
+    const n = s, e = g("icon"), a = m(() => typeof n.size == "number" ? `${n.size}px` : n.size), l = m(() => ({
+      width: a.value,
+      height: a.value,
       color: n.color
-    })), o = v(() => ({
+    })), t = m(() => ({
       strokeWidth: n.strokeWidth
-    })), d = v(() => [
-      a.b(),
-      a.is("spin", n.spin)
-    ]), f = v(() => n.name && Q(n.name) ? G[n.name] : "");
-    return (V, b) => (u(), m("span", {
-      class: s(d.value),
-      style: S(l.value)
+    })), v = m(() => [
+      e.b(),
+      e.is("spin", n.spin)
+    ]), z = m(() => n.name && Y(n.name) ? F[n.name] : "");
+    return (M, b) => (u(), d("span", {
+      class: o(v.value),
+      style: I(l.value)
     }, [
-      f.value ? (u(), m("svg", {
+      z.value ? (u(), d("svg", {
         key: 0,
         viewBox: "0 0 24 24",
         fill: "none",
         stroke: "currentColor",
-        "stroke-width": t.strokeWidth,
+        "stroke-width": s.strokeWidth,
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
-        style: S(o.value)
+        style: I(t.value)
       }, [
-        h("path", { d: f.value }, null, 8, U)
-      ], 12, R)) : p(V.$slots, "default", { key: 1 }, () => [
-        C(k(t.name), 1)
+        h("path", { d: z.value }, null, 8, e0)
+      ], 12, Z)) : f(M.$slots, "default", { key: 1 }, () => [
+        $(H(s.name), 1)
       ])
     ], 6));
   }
-}), B = "x-menu-item", n2 = /* @__PURE__ */ y({
+}), x = "x-menu-item", r0 = /* @__PURE__ */ V({
   name: "XMenuItem",
   __name: "MenuItem",
   props: {
@@ -304,65 +314,65 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     disabled: { type: Boolean, default: !1 },
     icon: {}
   },
-  setup(t) {
-    const n = t, a = w("menu");
-    P();
-    const e = v(() => (a == null ? void 0 : a.activeIndex.value) === n.index), l = v(() => a == null ? void 0 : a.props.collapse), o = v(() => (a == null ? void 0 : a.props.mode) === "horizontal"), d = v(() => [
-      B,
+  setup(s) {
+    const n = s, e = B("menu");
+    W();
+    const a = m(() => (e == null ? void 0 : e.activeIndex.value) === n.index), l = m(() => e == null ? void 0 : e.props.collapse), t = m(() => (e == null ? void 0 : e.props.mode) === "horizontal"), v = m(() => [
+      x,
       {
-        "is-active": e.value,
+        "is-active": a.value,
         "is-disabled": n.disabled,
-        "is-horizontal": o.value,
+        "is-horizontal": t.value,
         "is-collapse": l.value
       }
-    ]), f = v(() => e.value && (a != null && a.props.activeTextColor) ? { color: a.props.activeTextColor } : {}), V = () => {
-      n.disabled || n.index && (a == null || a.handleSelect(n.index, [n.index]));
+    ]), z = m(() => a.value && (e != null && e.props.activeTextColor) ? { color: e.props.activeTextColor } : {}), M = () => {
+      n.disabled || n.index && (e == null || e.handleSelect(n.index, [n.index]));
     };
-    return (b, c) => (u(), m("li", {
-      class: s(d.value),
-      style: S(f.value),
-      onClick: V
+    return (b, i) => (u(), d("li", {
+      class: o(v.value),
+      style: I(z.value),
+      onClick: M
     }, [
       h("div", {
-        class: s(B + "__content")
+        class: o(x + "__content")
       }, [
-        t.icon ? (u(), m("span", {
+        s.icon ? (u(), d("span", {
           key: 0,
-          class: s(B + "__icon")
+          class: o(x + "__icon")
         }, [
-          X(r(j), {
-            name: t.icon,
+          X(r(R), {
+            name: s.icon,
             size: 18
           }, null, 8, ["name"])
-        ], 2)) : b.$slots.icon ? (u(), m("span", {
+        ], 2)) : b.$slots.icon ? (u(), d("span", {
           key: 1,
-          class: s(B + "__icon")
+          class: o(x + "__icon")
         }, [
-          p(b.$slots, "icon")
-        ], 2)) : H("", !0),
+          f(b.$slots, "icon")
+        ], 2)) : C("", !0),
         h("span", {
-          class: s(B + "__text")
+          class: o(x + "__text")
         }, [
-          p(b.$slots, "default")
+          f(b.$slots, "default")
         ], 2)
       ], 2)
     ], 6));
   }
-}), Y = { class: "x-menu-item-group" }, Z = { class: "x-menu-item-group__title" }, c2 = /* @__PURE__ */ y({
+}), a0 = { class: "x-menu-item-group" }, l0 = { class: "x-menu-item-group__title" }, u0 = /* @__PURE__ */ V({
   name: "XMenuItemGroup",
   __name: "MenuItemGroup",
   props: {
     title: {}
   },
-  setup(t) {
-    return (n, a) => (u(), m("li", Y, [
-      h("div", Z, k(t.title), 1),
+  setup(s) {
+    return (n, e) => (u(), d("li", a0, [
+      h("div", l0, H(s.title), 1),
       h("ul", null, [
-        p(n.$slots, "default")
+        f(n.$slots, "default")
       ])
     ]));
   }
-}), $ = "x-sub-menu", i2 = /* @__PURE__ */ y({
+}), _ = "x-sub-menu", d0 = /* @__PURE__ */ V({
   name: "XSubMenu",
   __name: "SubMenu",
   props: {
@@ -371,65 +381,65 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     disabled: { type: Boolean, default: !1 },
     icon: {}
   },
-  setup(t) {
-    const n = t, a = w("menu"), e = w("subMenu", null), l = _(!1), o = v(() => !!e), d = v(() => a == null ? void 0 : a.props.collapse), f = v(() => (a == null ? void 0 : a.activeIndex.value) === n.index), V = v(() => [
-      $,
-      $ + ((a == null ? void 0 : a.props.mode) === "horizontal" ? "--horizontal" : "--vertical"),
+  setup(s) {
+    const n = s, e = B("menu"), a = B("subMenu", null), l = w(!1), t = m(() => !!a), v = m(() => e == null ? void 0 : e.props.collapse), z = m(() => (e == null ? void 0 : e.activeIndex.value) === n.index), M = m(() => [
+      _,
+      _ + ((e == null ? void 0 : e.props.mode) === "horizontal" ? "--horizontal" : "--vertical"),
       {
-        "is-active": f.value,
+        "is-active": z.value,
         "is-opened": l.value,
         "is-disabled": n.disabled,
-        "is-nested": o.value,
-        "is-collapse": d.value
+        "is-nested": t.value,
+        "is-collapse": v.value
       }
     ]), b = () => {
-      n.disabled || d.value || (l.value = !l.value);
-    }, c = () => {
-      n.disabled || ((a == null ? void 0 : a.props.mode) === "horizontal" || d.value) && (l.value = !0);
-    }, M = () => {
-      ((a == null ? void 0 : a.props.mode) === "horizontal" || d.value) && (l.value = !1);
+      n.disabled || v.value || (l.value = !l.value);
+    }, i = () => {
+      n.disabled || ((e == null ? void 0 : e.props.mode) === "horizontal" || v.value) && (l.value = !0);
+    }, p = () => {
+      ((e == null ? void 0 : e.props.mode) === "horizontal" || v.value) && (l.value = !1);
     };
-    return I("subMenu", {
+    return A("subMenu", {
       isOpen: l,
-      isNested: o
-    }), (i, z) => {
-      var g;
-      return u(), m("li", {
-        class: s(V.value),
-        onMouseenter: c,
-        onMouseleave: M
+      isNested: t
+    }), (c, k) => {
+      var y;
+      return u(), d("li", {
+        class: o(M.value),
+        onMouseenter: i,
+        onMouseleave: p
       }, [
         h("div", {
-          class: s($ + "__title"),
+          class: o(_ + "__title"),
           onClick: b
         }, [
           h("div", {
-            class: s($ + "__content")
+            class: o(_ + "__content")
           }, [
-            t.icon ? (u(), m("span", {
+            s.icon ? (u(), d("span", {
               key: 0,
-              class: s($ + "__icon")
+              class: o(_ + "__icon")
             }, [
-              X(r(j), {
-                name: t.icon,
+              X(r(R), {
+                name: s.icon,
                 size: 18
               }, null, 8, ["name"])
-            ], 2)) : i.$slots.icon ? (u(), m("span", {
+            ], 2)) : c.$slots.icon ? (u(), d("span", {
               key: 1,
-              class: s($ + "__icon")
+              class: o(_ + "__icon")
             }, [
-              p(i.$slots, "icon")
-            ], 2)) : H("", !0),
+              f(c.$slots, "icon")
+            ], 2)) : C("", !0),
             h("span", {
-              class: s($ + "__text")
+              class: o(_ + "__text")
             }, [
-              p(i.$slots, "title", {}, () => [
-                C(k(t.title), 1)
+              f(c.$slots, "title", {}, () => [
+                $(H(s.title), 1)
               ])
             ], 2),
             h("span", {
-              class: s([$ + "__arrow", { "is-open": l.value }])
-            }, [...z[0] || (z[0] = [
+              class: o([_ + "__arrow", { "is-open": l.value }])
+            }, [...k[0] || (k[0] = [
               h("svg", {
                 viewBox: "0 0 1024 1024",
                 width: "12",
@@ -443,18 +453,18 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
             ])], 2)
           ], 2)
         ], 2),
-        X(D, {
-          name: ((g = r(a)) == null ? void 0 : g.props.mode) === "horizontal" ? "zoom-in-top" : "zoom-in-left"
+        X(j, {
+          name: ((y = r(e)) == null ? void 0 : y.props.mode) === "horizontal" ? "zoom-in-top" : "zoom-in-left"
         }, {
-          default: F(() => {
-            var A;
+          default: G(() => {
+            var L;
             return [
-              O(h("ul", {
-                class: s([$ + "__menu", { "is-horizontal": ((A = r(a)) == null ? void 0 : A.props.mode) === "horizontal", "is-collapse": d.value }])
+              N(h("ul", {
+                class: o([_ + "__menu", { "is-horizontal": ((L = r(e)) == null ? void 0 : L.props.mode) === "horizontal", "is-collapse": v.value }])
               }, [
-                p(i.$slots, "default")
+                f(c.$slots, "default")
               ], 2), [
-                [W, l.value]
+                [O, l.value]
               ])
             ];
           }),
@@ -463,32 +473,32 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
       ], 34);
     };
   }
-}), r2 = /* @__PURE__ */ y({
+}), v0 = /* @__PURE__ */ V({
   name: "XBreadcrumb",
   __name: "index",
   props: {
     separator: { default: "/" },
     separatorIcon: {}
   },
-  setup(t) {
-    const n = t, a = L("breadcrumb");
-    I("breadcrumb", {
-      separator: v(() => n.separator),
-      separatorIcon: v(() => n.separatorIcon)
+  setup(s) {
+    const n = s, e = g("breadcrumb");
+    A("breadcrumb", {
+      separator: m(() => n.separator),
+      separatorIcon: m(() => n.separatorIcon)
     });
-    const e = v(() => [a.b()]);
-    return (l, o) => (u(), m("nav", {
-      class: s(e.value),
+    const a = m(() => [e.b()]);
+    return (l, t) => (u(), d("nav", {
+      class: o(a.value),
       "aria-label": "Breadcrumb"
     }, [
       h("ol", {
-        class: s(r(a).e("list"))
+        class: o(r(e).e("list"))
       }, [
-        p(l.$slots, "default")
+        f(l.$slots, "default")
       ], 2)
     ], 2));
   }
-}), a2 = ["aria-current"], u2 = /* @__PURE__ */ y({
+}), s0 = ["aria-current"], m0 = /* @__PURE__ */ V({
   name: "XBreadcrumbItem",
   __name: "BreadcrumbItem",
   props: {
@@ -497,50 +507,50 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     disabled: { type: Boolean }
   },
   emits: ["click"],
-  setup(t, { emit: n }) {
-    const a = t, e = n, l = L("breadcrumb"), o = w("breadcrumb"), d = v(() => [
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("breadcrumb"), t = B("breadcrumb"), v = m(() => [
       l.e("item"),
-      l.is("link", !!a.to && !a.disabled),
-      l.is("disabled", a.disabled)
-    ]), f = v(() => {
-      var c;
-      return ((c = o == null ? void 0 : o.separator) == null ? void 0 : c.value) || "/";
-    }), V = v(() => {
-      var c;
-      return (c = o == null ? void 0 : o.separatorIcon) == null ? void 0 : c.value;
-    }), b = (c) => {
-      a.disabled || (e("click", c), a.to && typeof a.to == "string" && (a.replace ? window.location.replace(a.to) : window.location.href = a.to));
+      l.is("link", !!e.to && !e.disabled),
+      l.is("disabled", e.disabled)
+    ]), z = m(() => {
+      var i;
+      return ((i = t == null ? void 0 : t.separator) == null ? void 0 : i.value) || "/";
+    }), M = m(() => {
+      var i;
+      return (i = t == null ? void 0 : t.separatorIcon) == null ? void 0 : i.value;
+    }), b = (i) => {
+      e.disabled || (a("click", i), e.to && typeof e.to == "string" && (e.replace ? window.location.replace(e.to) : window.location.href = e.to));
     };
-    return (c, M) => (u(), m("li", {
-      class: s(d.value)
+    return (i, p) => (u(), d("li", {
+      class: o(v.value)
     }, [
-      t.to && !t.disabled ? (u(), m("span", {
+      s.to && !s.disabled ? (u(), d("span", {
         key: 0,
-        class: s(r(l).e("link")),
+        class: o(r(l).e("link")),
         onClick: b
       }, [
-        p(c.$slots, "default")
-      ], 2)) : (u(), m("span", {
+        f(i.$slots, "default")
+      ], 2)) : (u(), d("span", {
         key: 1,
-        class: s(r(l).e("text")),
-        "aria-current": t.disabled ? "page" : void 0
+        class: o(r(l).e("text")),
+        "aria-current": s.disabled ? "page" : void 0
       }, [
-        p(c.$slots, "default")
-      ], 10, a2)),
+        f(i.$slots, "default")
+      ], 10, s0)),
       h("span", {
-        class: s(r(l).e("separator")),
+        class: o(r(l).e("separator")),
         "aria-hidden": "true"
       }, [
-        V.value ? (u(), m("span", {
+        M.value ? (u(), d("span", {
           key: 0,
-          class: s(r(l).e("separator-icon"))
-        }, k(V.value), 3)) : (u(), m(x, { key: 1 }, [
-          C(k(f.value), 1)
+          class: o(r(l).e("separator-icon"))
+        }, H(M.value), 3)) : (u(), d(S, { key: 1 }, [
+          $(H(z.value), 1)
         ], 64))
       ], 2)
     ], 2));
   }
-}), m2 = /* @__PURE__ */ y({
+}), h0 = /* @__PURE__ */ V({
   name: "XSteps",
   __name: "index",
   props: {
@@ -553,37 +563,37 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     space: {}
   },
   emits: ["change", "update:active"],
-  setup(t, { emit: n }) {
-    const a = t, e = n, l = L("steps"), o = _(a.active), d = _(0);
-    T(() => a.active, (M) => {
-      o.value = M;
-    }), I("steps", {
-      props: a,
-      currentActive: o,
-      stepCount: d,
-      setCurrentActive: (M) => {
-        o.value = M, e("change", M), e("update:active", M);
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("steps"), t = w(e.active), v = w(0);
+    T(() => e.active, (p) => {
+      t.value = p;
+    }), A("steps", {
+      props: e,
+      currentActive: t,
+      stepCount: v,
+      setCurrentActive: (p) => {
+        t.value = p, a("change", p), a("update:active", p);
       },
-      setStepCount: (M) => {
-        d.value = M;
+      setStepCount: (p) => {
+        v.value = p;
       }
     });
-    const b = v(() => [
+    const b = m(() => [
       l.b(),
-      l.m(a.direction),
-      l.is("simple", a.simple),
-      l.is("center", a.alignCenter)
-    ]), c = v(() => a.space ? {
-      "--steps-space": typeof a.space == "number" ? `${a.space}px` : a.space
+      l.m(e.direction),
+      l.is("simple", e.simple),
+      l.is("center", e.alignCenter)
+    ]), i = m(() => e.space ? {
+      "--steps-space": typeof e.space == "number" ? `${e.space}px` : e.space
     } : {});
-    return (M, i) => (u(), m("div", {
-      class: s(b.value),
-      style: S(c.value)
+    return (p, c) => (u(), d("div", {
+      class: o(b.value),
+      style: I(i.value)
     }, [
-      p(M.$slots, "default")
+      f(p.$slots, "default")
     ], 6));
   }
-}), v2 = /* @__PURE__ */ y({
+}), p0 = /* @__PURE__ */ V({
   name: "XStep",
   __name: "Step",
   props: {
@@ -592,96 +602,96 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     icon: {},
     status: {}
   },
-  setup(t) {
-    const n = t, a = L("step"), e = w("steps"), l = _(-1);
-    q(() => {
-      e && (l.value = e.stepCount.value, e.setStepCount(e.stepCount.value + 1));
+  setup(s) {
+    const n = s, e = g("step"), a = B("steps"), l = w(-1);
+    J(() => {
+      a && (l.value = a.stepCount.value, a.setStepCount(a.stepCount.value + 1));
     });
-    const o = v(() => {
-      var M, i, z;
+    const t = m(() => {
+      var p, c, k;
       if (n.status) return n.status;
-      const c = ((M = e == null ? void 0 : e.currentActive) == null ? void 0 : M.value) ?? 0;
-      return l.value < c ? ((i = e == null ? void 0 : e.props) == null ? void 0 : i.finishStatus) || "finish" : l.value === c ? ((z = e == null ? void 0 : e.props) == null ? void 0 : z.processStatus) || "process" : "wait";
-    }), d = v(() => {
-      var c;
-      return l.value === (((c = e == null ? void 0 : e.stepCount) == null ? void 0 : c.value) || 0) - 1;
-    }), f = v(() => l.value === 0);
-    v(() => ({
+      const i = ((p = a == null ? void 0 : a.currentActive) == null ? void 0 : p.value) ?? 0;
+      return l.value < i ? ((c = a == null ? void 0 : a.props) == null ? void 0 : c.finishStatus) || "finish" : l.value === i ? ((k = a == null ? void 0 : a.props) == null ? void 0 : k.processStatus) || "process" : "wait";
+    }), v = m(() => {
+      var i;
+      return l.value === (((i = a == null ? void 0 : a.stepCount) == null ? void 0 : i.value) || 0) - 1;
+    }), z = m(() => l.value === 0);
+    m(() => ({
       wait: "#c0c4cc",
       process: "#409eff",
       finish: "#67c23a",
       error: "#f56c6c",
       success: "#67c23a"
-    })[o.value] || "#c0c4cc");
-    const V = v(() => {
-      var c;
+    })[t.value] || "#c0c4cc");
+    const M = m(() => {
+      var i;
       return [
-        a.b(),
-        a.is(o.value),
-        a.is("last", d.value),
-        a.m(((c = e == null ? void 0 : e.props) == null ? void 0 : c.direction) || "horizontal")
+        e.b(),
+        e.is(t.value),
+        e.is("last", v.value),
+        e.m(((i = a == null ? void 0 : a.props) == null ? void 0 : i.direction) || "horizontal")
       ];
     }), b = () => {
-      var c;
-      l.value > -1 && ((c = e == null ? void 0 : e.setCurrentActive) == null || c.call(e, l.value));
+      var i;
+      l.value > -1 && ((i = a == null ? void 0 : a.setCurrentActive) == null || i.call(a, l.value));
     };
-    return (c, M) => (u(), m("div", {
-      class: s(V.value),
+    return (i, p) => (u(), d("div", {
+      class: o(M.value),
       onClick: b
     }, [
       h("div", {
-        class: s(r(a).e("head"))
+        class: o(r(e).e("head"))
       }, [
-        f.value ? H("", !0) : (u(), m("div", {
+        z.value ? C("", !0) : (u(), d("div", {
           key: 0,
-          class: s([r(a).e("line"), r(a).em("line", "prev")])
+          class: o([r(e).e("line"), r(e).em("line", "prev")])
         }, null, 2)),
         h("div", {
-          class: s(r(a).e("icon"))
+          class: o(r(e).e("icon"))
         }, [
-          t.icon ? (u(), m("span", {
+          s.icon ? (u(), d("span", {
             key: 0,
-            class: s(r(a).e("icon-inner"))
-          }, k(t.icon), 3)) : (u(), m("span", {
+            class: o(r(e).e("icon-inner"))
+          }, H(s.icon), 3)) : (u(), d("span", {
             key: 1,
-            class: s(r(a).e("icon-inner"))
+            class: o(r(e).e("icon-inner"))
           }, [
-            o.value === "finish" || o.value === "success" ? (u(), m(x, { key: 0 }, [
-              C("✓")
-            ], 64)) : o.value === "error" ? (u(), m(x, { key: 1 }, [
-              C("✕")
-            ], 64)) : (u(), m(x, { key: 2 }, [
-              C(k(l.value + 1), 1)
+            t.value === "finish" || t.value === "success" ? (u(), d(S, { key: 0 }, [
+              $("✓")
+            ], 64)) : t.value === "error" ? (u(), d(S, { key: 1 }, [
+              $("✕")
+            ], 64)) : (u(), d(S, { key: 2 }, [
+              $(H(l.value + 1), 1)
             ], 64))
           ], 2))
         ], 2),
-        d.value ? H("", !0) : (u(), m("div", {
+        v.value ? C("", !0) : (u(), d("div", {
           key: 1,
-          class: s(r(a).e("line"))
+          class: o(r(e).e("line"))
         }, null, 2))
       ], 2),
       h("div", {
-        class: s(r(a).e("content"))
+        class: o(r(e).e("content"))
       }, [
         h("div", {
-          class: s(r(a).e("title"))
+          class: o(r(e).e("title"))
         }, [
-          p(c.$slots, "title", {}, () => [
-            C(k(t.title), 1)
+          f(i.$slots, "title", {}, () => [
+            $(H(s.title), 1)
           ])
         ], 2),
-        t.description || c.$slots.description ? (u(), m("div", {
+        s.description || i.$slots.description ? (u(), d("div", {
           key: 0,
-          class: s(r(a).e("description"))
+          class: o(r(e).e("description"))
         }, [
-          p(c.$slots, "description", {}, () => [
-            C(k(t.description), 1)
+          f(i.$slots, "description", {}, () => [
+            $(H(s.description), 1)
           ])
-        ], 2)) : H("", !0)
+        ], 2)) : C("", !0)
       ], 2)
     ], 2));
   }
-}), d2 = /* @__PURE__ */ y({
+}), M0 = /* @__PURE__ */ V({
   name: "XPageHeader",
   __name: "index",
   props: {
@@ -691,79 +701,186 @@ const R = ["stroke-width"], U = ["d"], j = /* @__PURE__ */ y({
     showBack: { type: Boolean, default: !1 }
   },
   emits: ["back"],
-  setup(t, { emit: n }) {
-    const a = n, e = L("page-header"), l = () => {
-      a("back");
+  setup(s, { emit: n }) {
+    const e = n, a = g("page-header"), l = () => {
+      e("back");
     };
-    return (o, d) => (u(), m("div", {
-      class: s(r(e).b())
+    return (t, v) => (u(), d("div", {
+      class: o(r(a).b())
     }, [
       h("div", {
-        class: s(r(e).e("main"))
+        class: o(r(a).e("main"))
       }, [
         h("div", {
-          class: s(r(e).e("left"))
+          class: o(r(a).e("left"))
         }, [
-          t.showBack ? (u(), m("span", {
+          s.showBack ? (u(), d("span", {
             key: 0,
-            class: s(r(e).e("back")),
+            class: o(r(a).e("back")),
             onClick: l
           }, [
             h("span", {
-              class: s(r(e).e("back-icon"))
+              class: o(r(a).e("back-icon"))
             }, "←", 2),
-            t.backText ? (u(), m("span", {
+            s.backText ? (u(), d("span", {
               key: 0,
-              class: s(r(e).e("back-text"))
-            }, k(t.backText), 3)) : H("", !0)
-          ], 2)) : H("", !0),
+              class: o(r(a).e("back-text"))
+            }, H(s.backText), 3)) : C("", !0)
+          ], 2)) : C("", !0),
           h("span", {
-            class: s(r(e).e("title"))
+            class: o(r(a).e("title"))
           }, [
-            p(o.$slots, "title", {}, () => [
-              C(k(t.title), 1)
+            f(t.$slots, "title", {}, () => [
+              $(H(s.title), 1)
             ])
           ], 2),
-          t.subtitle || o.$slots.subtitle ? (u(), m("span", {
+          s.subtitle || t.$slots.subtitle ? (u(), d("span", {
             key: 1,
-            class: s(r(e).e("subtitle"))
+            class: o(r(a).e("subtitle"))
           }, [
-            p(o.$slots, "subtitle", {}, () => [
-              C(k(t.subtitle), 1)
+            f(t.$slots, "subtitle", {}, () => [
+              $(H(s.subtitle), 1)
             ])
-          ], 2)) : H("", !0)
+          ], 2)) : C("", !0)
         ], 2),
         h("div", {
-          class: s(r(e).e("extra"))
+          class: o(r(a).e("extra"))
         }, [
-          p(o.$slots, "extra")
+          f(t.$slots, "extra")
         ], 2)
       ], 2),
-      o.$slots.default ? (u(), m("div", {
+      t.$slots.default ? (u(), d("div", {
         key: 0,
-        class: s(r(e).e("content"))
+        class: o(r(a).e("content"))
       }, [
-        p(o.$slots, "default")
-      ], 2)) : H("", !0),
-      o.$slots.footer ? (u(), m("div", {
+        f(t.$slots, "default")
+      ], 2)) : C("", !0),
+      t.$slots.footer ? (u(), d("div", {
         key: 1,
-        class: s(r(e).e("footer"))
+        class: o(r(a).e("footer"))
+      }, [
+        f(t.$slots, "footer")
+      ], 2)) : C("", !0)
+    ], 2));
+  }
+}), f0 = /* @__PURE__ */ V({
+  name: "XDropdown",
+  __name: "index",
+  props: {
+    trigger: { default: "hover" },
+    placement: { default: "bottom" },
+    disabled: { type: Boolean, default: !1 },
+    visible: { type: Boolean },
+    hideOnClick: { type: Boolean, default: !0 }
+  },
+  emits: ["visible-change", "click", "command"],
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("dropdown"), t = w(e.visible || !1), v = w(), z = () => {
+      e.disabled || (t.value = !0, a("visible-change", !0));
+    }, M = () => {
+      t.value = !1, a("visible-change", !1);
+    }, b = () => {
+      t.value ? M() : z();
+    };
+    A("x-dropdown", {
+      visible: t,
+      handleClick: (y) => {
+        a("click", y), a("command", y), e.hideOnClick && M();
+      },
+      hide: M
+    });
+    const p = () => {
+      e.trigger === "hover" && z();
+    }, c = () => {
+      e.trigger === "hover" && M();
+    }, k = (y) => {
+      v.value && !v.value.contains(y.target) && M();
+    };
+    return typeof window < "u" && document.addEventListener("click", k), (y, L) => (u(), d("div", {
+      ref_key: "dropdownRef",
+      ref: v,
+      class: o([r(l).b(), r(l).is("disabled", s.disabled)]),
+      onMouseenter: p,
+      onMouseleave: c
+    }, [
+      h("div", {
+        class: o(r(l).e("trigger")),
+        onClick: L[0] || (L[0] = (D) => s.trigger === "click" && b())
       }, [
-        p(o.$slots, "footer")
-      ], 2)) : H("", !0)
+        f(y.$slots, "default")
+      ], 2),
+      X(j, { name: "x-dropdown-zoom" }, {
+        default: G(() => [
+          N(h("div", {
+            class: o([r(l).e("menu"), r(l).m(s.placement)])
+          }, [
+            f(y.$slots, "dropdown")
+          ], 2), [
+            [O, t.value]
+          ])
+        ]),
+        _: 3
+      })
+    ], 34));
+  }
+}), z0 = /* @__PURE__ */ V({
+  name: "XDropdownMenu",
+  __name: "DropdownMenu",
+  setup(s) {
+    const n = g("dropdown-menu");
+    return (e, a) => (u(), d("ul", {
+      class: o(r(n).b())
+    }, [
+      f(e.$slots, "default")
+    ], 2));
+  }
+}), b0 = /* @__PURE__ */ V({
+  name: "XDropdownItem",
+  __name: "DropdownItem",
+  props: {
+    command: {},
+    disabled: { type: Boolean },
+    divided: { type: Boolean },
+    icon: {}
+  },
+  emits: ["click"],
+  setup(s, { emit: n }) {
+    const e = s, a = n, l = g("dropdown-item"), t = B("x-dropdown"), v = (M) => {
+      e.disabled || (a("click", M), t != null && t.handleClick && t.handleClick(e.command ?? M));
+    }, z = m(() => [
+      l.b(),
+      l.is("disabled", e.disabled),
+      l.is("divided", e.divided)
+    ]);
+    return (M, b) => (u(), d("li", {
+      class: o(z.value),
+      onClick: v
+    }, [
+      s.icon ? (u(), d("span", {
+        key: 0,
+        class: o(r(l).e("icon"))
+      }, H(s.icon), 3)) : C("", !0),
+      h("span", {
+        class: o(r(l).e("content"))
+      }, [
+        f(M.$slots, "default")
+      ], 2)
     ], 2));
   }
 });
 export {
-  r2 as Breadcrumb,
-  u2 as BreadcrumbItem,
-  o2 as Menu,
-  n2 as MenuItem,
-  c2 as MenuItemGroup,
-  d2 as PageHeader,
-  v2 as Step,
-  m2 as Steps,
-  i2 as SubMenu,
-  t2 as TabPane,
-  s2 as Tabs
+  v0 as Breadcrumb,
+  m0 as BreadcrumbItem,
+  f0 as Dropdown,
+  b0 as DropdownItem,
+  z0 as DropdownMenu,
+  i0 as Menu,
+  r0 as MenuItem,
+  u0 as MenuItemGroup,
+  M0 as PageHeader,
+  p0 as Step,
+  h0 as Steps,
+  d0 as SubMenu,
+  c0 as TabPane,
+  n0 as Tabs
 };