x-next 1.4.0 → 1.6.0

package/dist/es/components/tabs/tabs-nav.js

@@ -1,4 +1,4 @@
-import { defineComponent as ae, toRefs as le, ref as y, computed as h, watch as I, nextTick as N, onMounted as ie, createVNode as r } from "vue";
+import { defineComponent as ae, toRefs as le, ref as b, computed as h, watch as H, nextTick as I, onMounted as ie, createVNode as r } from "vue";
 import { getTabListStyle as ne, updateScrollOffset as oe } from "./utils.js";
 import re from "./tabs-tab.vue.js";
 import W from "./tabs-button.js";
@@ -56,7 +56,9 @@ const Re = /* @__PURE__ */ ae({
       default: !0
     },
     scrollPosition: {
-      type: String,
+      /* ScrollPosition 含 number（滚动到指定像素），只声明 String 会让
+         `:scroll-position="200"` 触发 prop 类型校验告警 */
+      type: [String, Number],
       default: "auto"
     }
   },
@@ -73,10 +75,10 @@ const Re = /* @__PURE__ */ ae({
       scrollPosition: s
     } = le(a), u = ce("tabs--nav"), {
       t: q
-    } = ve(), n = y(), m = y(), g = y({}), b = h(() => {
+    } = ve(), n = b(), m = b(), g = b({}), y = h(() => {
       if (!P(S.value))
         return g.value[S.value];
-    }), C = y(), L = h(() => a.editable && ["line", "card", "card-gutter"].includes(a.type)), d = y(!1), B = y(0), k = y(0), o = y(0), M = () => {
+    }), C = b(), L = h(() => a.editable && ["line", "card", "card-gutter"].includes(a.type)), d = b(!1), B = b(0), k = b(0), o = b(0), M = () => {
       var e, t;
       return (T.value === "vertical" ? (e = n.value) == null ? void 0 : e.offsetHeight : (t = n.value) == null ? void 0 : t.offsetWidth) ?? 0;
     }, D = () => !m.value || !n.value ? 0 : T.value === "vertical" ? m.value.offsetHeight - n.value.offsetHeight : m.value.offsetWidth - n.value.offsetWidth, w = () => {
@@ -84,9 +86,9 @@ const Re = /* @__PURE__ */ ae({
     }, K = () => n.value && m.value ? a.direction === "vertical" ? m.value.offsetHeight > n.value.offsetHeight : m.value.offsetWidth > n.value.offsetWidth : !1, f = (e) => {
       (!n.value || !m.value || e < 0) && (e = 0), o.value = Math.min(e, k.value);
     }, E = () => {
-      if (!b.value || !n.value || !d.value) return;
+      if (!y.value || !n.value || !d.value) return;
       oe(n.value, T.value);
-      const e = T.value === "horizontal", t = e ? "offsetLeft" : "offsetTop", c = e ? "offsetWidth" : "offsetHeight", l = b.value[t], i = b.value[c], v = n.value[c], ee = window.getComputedStyle(b.value), te = e ? s.value === "end" ? "marginRight" : "marginLeft" : s.value === "end" ? "marginBottom" : "marginTop", x = parseFloat(ee[te]) || 0;
+      const e = T.value === "horizontal", t = e ? "offsetLeft" : "offsetTop", c = e ? "offsetWidth" : "offsetHeight", l = y.value[t], i = y.value[c], v = n.value[c], ee = window.getComputedStyle(y.value), te = e ? s.value === "end" ? "marginRight" : "marginLeft" : s.value === "end" ? "marginBottom" : "marginTop", x = parseFloat(ee[te]) || 0;
       s.value === "auto" ? l < o.value ? f(l - x) : l + i > o.value + v && f(l + i - v + x) : s.value === "center" ? f(l + (i - v + x) / 2) : s.value === "start" ? f(l - x) : s.value === "end" ? f(l + i - v + x) : fe(s.value) && f(l - s.value);
     }, U = (e) => {
       if (!d.value) return;
@@ -99,7 +101,7 @@ const Re = /* @__PURE__ */ ae({
     }, j = (e, t) => {
       z("click", e, t);
     }, F = () => a.tabs.filter((e) => !e.disabled), V = (e) => {
-      N(() => {
+      I(() => {
         var t;
         (t = g.value[e]) == null || t.focus();
       });
@@ -115,27 +117,27 @@ const Re = /* @__PURE__ */ ae({
       }
     }, Y = (e, t) => {
       z("delete", e, t);
-    }, A = (e) => {
+    }, N = (e) => {
       const t = e === "previous" ? o.value - B.value : o.value + B.value;
       f(t);
     }, G = () => {
       w(), C.value && C.value.$forceUpdate();
     };
-    I($, () => {
-      N(() => {
+    H($, () => {
+      I(() => {
         const e = new Set(a.tabs.map((t) => String(t.key)));
         Object.keys(g.value).forEach((t) => {
           e.has(t) || delete g.value[t];
         }), w();
       });
-    }), I([p, s], () => {
+    }), H([p, s], () => {
       setTimeout(() => {
         E();
       }, 0);
     }), ie(() => {
       w();
     });
-    const H = () => !L.value || !a.showAddButton ? null : r(se, {
+    const A = () => !L.value || !a.showAddButton ? null : r(se, {
       as: "button",
       "aria-label": q("tabs.add"),
       class: u.element("add-btn"),
@@ -162,7 +164,7 @@ const Re = /* @__PURE__ */ ae({
         type: "previous",
         direction: a.direction,
         disabled: o.value <= 0,
-        onClick: A
+        onClick: N
       }, null), r(O, {
         onResize: () => w()
       }, {
@@ -192,22 +194,22 @@ const Re = /* @__PURE__ */ ae({
               var l, i;
               return [((i = (l = t.slots).title) == null ? void 0 : i.call(l)) ?? t.title];
             }
-          })), a.type === "line" && b.value && r(ue, {
+          })), a.type === "line" && y.value && r(ue, {
             ref: C,
-            activeTabRef: b.value,
+            activeTabRef: y.value,
             direction: a.direction,
             disabled: !1,
             animation: a.animation
           }, null)])]
-        }), !d.value && H()])]
+        }), !d.value && A()])]
       }), d.value && r(W, {
         type: "next",
         direction: a.direction,
         disabled: o.value >= k.value,
-        onClick: A
+        onClick: N
       }, null), r("div", {
         class: u.element("extra")
-      }, [d.value && H(), (e = R.extra) == null ? void 0 : e.call(R)])]);
+      }, [d.value && A(), (e = R.extra) == null ? void 0 : e.call(R)])]);
     };
   }
 });

package/dist/es/components/tabs/tabs-tab.vue.js

@@ -1,14 +1,16 @@
-import n from "./tabs-tab.vue2.js";
-import { resolveComponent as a, openBlock as o, createElementBlock as i, mergeProps as r, createElementVNode as d, normalizeClass as t, renderSlot as c, createBlock as b, withModifiers as m, withCtx as p, createVNode as f, createCommentVNode as u } from "vue";
+import i from "./tabs-tab.vue2.js";
+import { resolveComponent as a, openBlock as o, createElementBlock as n, mergeProps as r, createElementVNode as d, normalizeClass as t, renderSlot as c, createBlock as b, withModifiers as m, withCtx as p, createVNode as f, createCommentVNode as u } from "vue";
 import v from "../../_virtual/_plugin-vue_export-helper.js";
-const h = ["tabindex", "aria-selected", "aria-disabled"];
+const h = ["id", "tabindex", "aria-selected", "aria-disabled", "aria-controls"];
 function k(e, C, N, $, B, V) {
-  const s = a("icon-close"), l = a("icon-hover");
-  return o(), i("div", r({
+  const l = a("icon-close"), s = a("icon-hover");
+  return o(), n("div", r({
     role: "tab",
+    id: e.tab.tabId,
     tabindex: e.active && !e.tab.disabled ? 0 : -1,
     "aria-selected": e.active,
     "aria-disabled": e.tab.disabled || void 0,
+    "aria-controls": e.tab.panelId,
     class: e.cls
   }, e.eventHandlers), [
     d("span", {
@@ -16,7 +18,7 @@ function k(e, C, N, $, B, V) {
     }, [
       c(e.$slots, "default")
     ], 2),
-    e.editable && e.tab.closable ? (o(), b(l, {
+    e.editable && e.tab.closable ? (o(), b(s, {
       key: 0,
       as: "button",
       "aria-label": e.t("tabs.close", { title: String(e.tab.title ?? e.tab.key) }),
@@ -24,13 +26,13 @@ function k(e, C, N, $, B, V) {
       onClick: m(e.handleDelete, ["stop"])
     }, {
       default: p(() => [
-        f(s)
+        f(l)
       ]),
       _: 1
     }, 8, ["aria-label", "class", "onClick"])) : u("", !0)
   ], 16, h);
 }
-const E = /* @__PURE__ */ v(n, [["render", k]]);
+const E = /* @__PURE__ */ v(i, [["render", k]]);
 export {
   E as default
 };

package/dist/es/components/trigger/Trigger.js

@@ -2,12 +2,12 @@ import { defineComponent as Be, toRefs as Oe, computed as P, inject as Ee, ref a
 import { getScrollElements as le, getElementScrollRect as ne, getPopupStyle as $e, getTransformOrigin as Ge, getArrowStyle as He } from "./utils.js";
 import ue from "../../_container/resize-observer-v2.js";
 import { on as G, off as ie } from "../../_utils/dom.js";
-import { isEmptyChildren as Ue, mergeFirstChild as _e } from "../../_utils/vue-eco.js";
-import Ke from "../../_hooks/use-pick-slots.js";
+import { isEmptyChildren as Ue, mergeFirstChild as Ke } from "../../_utils/vue-eco.js";
+import Xe from "../../_hooks/use-pick-slots.js";
 import { triggerInjectionKey as ae } from "./context.js";
 import { throttleByRaf as se } from "../../_utils/throttle-by-raf.js";
-import Xe from "../../_hooks/use-popup-manager.js";
-import { useResizeObserver as Ye } from "../../_hooks/use-resize-observer.js";
+import Ye from "../../_hooks/use-popup-manager.js";
+import { useResizeObserver as _e } from "../../_hooks/use-resize-observer.js";
 import qe from "../../_container/client-only.js";
 import { useTeleportContainer as Je } from "../../_hooks/use-teleport-container.js";
 import { useFirstElement as Qe } from "../../_hooks/use-first-element.js";
@@ -337,7 +337,7 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
     } = Oe(o), g = eo("trigger"), ce = P(() => Ze(n, oo)), p = P(() => [].concat(o.trigger)), k = /* @__PURE__ */ new Set(), u = Ee(ae, void 0), {
       children: M,
       firstElement: T
-    } = Qe(), y = s(), H = s(o.defaultPopupVisible), B = s(o.position), U = s({}), _ = s({}), K = s({}), S = s(!1), fe = s(), f = s({
+    } = Qe(), y = s(), H = s(o.defaultPopupVisible), B = s(o.position), U = s({}), K = s({}), X = s({}), S = s(!1), fe = s(), f = s({
       top: 0,
       left: 0
     });
@@ -351,7 +351,7 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
       documentContainer: !0
     }), {
       zIndex: me
-    } = Xe("popup", {
+    } = Ye("popup", {
       visible: l
     });
     let R = 0, h = !1, z = !1;
@@ -368,7 +368,7 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
           left: t
         };
       }
-    }, X = () => {
+    }, Y = () => {
       S.value = !0;
     }, m = () => {
       if (!T.value || !y.value || !D.value)
@@ -396,13 +396,13 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
         customStyle: o.popupStyle,
         autoFitPosition: o.autoFitPosition
       });
-      o.autoFitTransformOrigin && (_.value = {
+      o.autoFitTransformOrigin && (K.value = {
         transformOrigin: Ge(C)
       }), o.autoFitPopupMinWidth ? w.minWidth = `${t.width}px` : o.autoFitPopupWidth && (w.width = `${t.width}px`), B.value !== C && (B.value = C), U.value = w, o.showArrow ? $(() => {
-        K.value = He(C, t, i(), {
+        X.value = He(C, t, i(), {
           customStyle: o.arrowStyle
-        }), X();
-      }) : X();
+        }), Y();
+      }) : Y();
     }, a = (e, t) => {
       const i = R !== 0;
       if (e === l.value && !i)
@@ -420,11 +420,11 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
     }, pe = (e) => {
       var t;
       (t = n.onClick) == null || t.call(n, e), !(o.disabled || l.value && !o.clickToClose) && (p.value.includes("click") ? (V(e), a(!l.value)) : p.value.includes("contextMenu") && l.value && a(!1));
-    }, Y = (e) => {
+    }, _ = (e) => {
       var t;
       (t = n.onMouseenter) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && (V(e), a(!0, o.mouseEnterDelay));
     }, q = (e) => {
-      u == null || u.onMouseenter(e), Y(e);
+      u == null || u.onMouseenter(e), _(e);
     }, J = (e) => {
       var t;
       (t = n.onMouseleave) == null || t.call(n, e), !(o.disabled || !p.value.includes("hover")) && a(!1, o.mouseLeaveDelay);
@@ -452,7 +452,7 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
     }));
     const j = () => {
       ie(document.documentElement, "mousedown", W), h = !1;
-    }, N = Ke(v, "content"), Ce = P(() => {
+    }, N = Xe(v, "content"), Ce = P(() => {
       var e;
       return o.hideEmpty && Ue((e = N.value) == null ? void 0 : e.call(N));
     }), W = (e) => {
@@ -512,7 +512,7 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
     const {
       createResizeObserver: Se,
       destroyResizeObserver: Re
-    } = Ye({
+    } = _e({
       elementRef: D,
       onResize: x
     });
@@ -542,10 +542,10 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
     };
     return () => {
       var e;
-      return M.value = ((e = v.default) == null ? void 0 : e.call(v)) ?? [], _e(M.value, {
+      return M.value = ((e = v.default) == null ? void 0 : e.call(v)) ?? [], Ke(M.value, {
         class: Te.value,
         onClick: pe,
-        onMouseenter: Y,
+        onMouseenter: _,
         onMouseleave: J,
         onFocusin: ye,
         onFocusout: he,
@@ -590,14 +590,14 @@ const oo = ["onClick", "onMouseenter", "onMouseleave", "onFocusin", "onFocusout"
                 var t;
                 return [xe(c("div", {
                   class: g.element("popup-wrapper"),
-                  style: _.value
+                  style: K.value
                 }, [c("div", {
                   class: [g.element("content"), o.contentClass],
                   style: o.contentStyle
                 }, [(t = v.content) == null ? void 0 : t.call(v)]), o.showArrow && c("div", {
                   ref: fe,
                   class: [g.element("arrow"), o.arrowClass],
-                  style: K.value
+                  style: X.value
                 }, null)]), [[Ie, l.value]])];
               }
             })])]

package/dist/es/icons/_self/empty-better.js

@@ -1,6 +1,11 @@
 import { h as a, createVNode as l } from "vue";
-import { generateIcon as t } from "../icon.js";
-const n = t("EmptyBetter", a(l("svg", {
+import { generateIcon as e } from "../icon.js";
+const t = {
+  planes: "var(--x-empty-illustration-planes)",
+  mid: "var(--x-empty-illustration-mid)",
+  strong: "var(--x-empty-illustration-strong)",
+  highlight: "var(--x-empty-illustration-highlight)"
+}, n = e("EmptyBetter", a(l("svg", {
   width: "184",
   height: "152",
   viewBox: "0 0 184 152",
@@ -12,30 +17,42 @@ const n = t("EmptyBetter", a(l("svg", {
   transform: "translate(24 31.67)"
 }, [l("ellipse", {
   "fill-opacity": ".8",
-  fill: "#F5F5F7",
+  style: {
+    fill: t.planes
+  },
   cx: "67.797",
   cy: "106.89",
   rx: "67.797",
   ry: "12.668"
 }, null), l("path", {
   d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z",
-  fill: "#AEB8C2"
+  style: {
+    fill: t.strong
+  }
 }, null), l("path", {
   d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z",
   fill: "url(#linearGradient-1)",
   transform: "translate(13.56)"
 }, null), l("path", {
   d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z",
-  fill: "#F5F5F7"
+  style: {
+    fill: t.planes
+  }
 }, null), l("path", {
   d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z",
-  fill: "#DCE0E6"
+  style: {
+    fill: t.mid
+  }
 }, null)]), l("path", {
   d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z",
-  fill: "#DCE0E6"
+  style: {
+    fill: t.mid
+  }
 }, null), l("g", {
   transform: "translate(149.65 15.383)",
-  fill: "#FFF"
+  style: {
+    fill: t.highlight
+  }
 }, [l("ellipse", {
   cx: "20.654",
   cy: "3.167",