x-next 1.5.0 → 1.7.0

package/dist/es/components/skeleton/SkeletonShape.vue.js

@@ -1,12 +1,13 @@
-import o from "./SkeletonShape.vue2.js";
-import { openBlock as r, createElementBlock as t, normalizeClass as n } from "vue";
-import s from "../../_virtual/_plugin-vue_export-helper.js";
-function c(e, a, l, p, m, f) {
-  return r(), t("div", {
-    class: n(e.cls)
+import r from "./SkeletonShape.vue2.js";
+import { openBlock as o, createElementBlock as t, normalizeClass as n } from "vue";
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+function s(e, c, l, p, i, m) {
+  return o(), t("div", {
+    class: n(e.cls),
+    "aria-hidden": "true"
   }, null, 2);
 }
-const u = /* @__PURE__ */ s(o, [["render", c]]);
+const u = /* @__PURE__ */ a(r, [["render", s]]);
 export {
   u as default
 };

package/dist/es/components/spin/Spin.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, computed as B, createVNode as t, mergeProps as S, Fragment as c, cloneVNode as N } from "vue";
-import L from "../../icons/animation/animation-loading.js";
-import k from "./dot-loading.js";
-import { getFirstComponent as C } from "../../_utils/vue-eco.js";
-import { getClassNameMixin as I } from "../../_utils/config.js";
-import { useLocale as x } from "../../locale/index.js";
-const M = /* @__PURE__ */ p({
+import { defineComponent as D, computed as s, ref as S, watch as x, onUnmounted as B, onMounted as R, onUpdated as U, createVNode as r, mergeProps as V, Fragment as A, cloneVNode as H } from "vue";
+import O from "../../icons/animation/animation-loading.js";
+import _ from "./dot-loading.js";
+import { getFirstComponent as q } from "../../_utils/vue-eco.js";
+import { getClassNameMixin as P } from "../../_utils/config.js";
+import { useLocale as $ } from "../../locale/index.js";
+const j = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])', Y = /* @__PURE__ */ D({
   name: "Spin",
   inheritAttrs: !1,
   props: {
@@ -28,6 +28,16 @@ const M = /* @__PURE__ */ p({
      * @en Whether it is loading state (Only effective in container mode)
      */
     loading: Boolean,
+    /**
+     * @zh 延迟显示加载态的时间，单位毫秒。用于避免「请求很快就结束」时闪一下加载态；
+     * 加载结束时立即收起，不会拖住已经加载好的内容（这一点与 AntDV 的双向延迟不同）
+     * @en Delay in milliseconds before showing the loading state. Prevents a flash of
+     * loading for fast requests; hiding is immediate (unlike AntDV's symmetric delay)
+     */
+    delay: {
+      type: Number,
+      default: 0
+    },
     /**
      * @zh 是否使用点类型的动画
      * @en Whether to use dot type animation
@@ -47,6 +57,14 @@ const M = /* @__PURE__ */ p({
     hideIcon: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * @zh 提示文字是否开启扫光效果（需要同时设置 tip）
+     * @en Whether the tip text uses a shimmer sweep (requires tip)
+     */
+    tipShimmer: {
+      type: Boolean,
+      default: !1
     }
   },
   /**
@@ -65,71 +83,117 @@ const M = /* @__PURE__ */ p({
    * @slot tip
    */
   setup(e, {
-    attrs: u,
-    slots: i
+    attrs: T,
+    slots: n
   }) {
-    const n = I("spin"), {
-      t: m
-    } = x(), f = B(() => [n.block, e.display === "inline" ? n.modifier("inline") : n.modifier("block"), {
-      [n.modifier("loading")]: e.loading,
-      [n.modifier("with-tip")]: e.tip && !i.default
-    }]), s = () => {
-      if (i.icon) {
-        const a = C(i.icon());
-        if (a)
-          return N(a, {
+    const a = P("spin"), {
+      t: k
+    } = $(), o = s(() => !!n.default), u = S(!1);
+    let c;
+    const v = () => {
+      c !== void 0 && (clearTimeout(c), c = void 0);
+    };
+    x(() => [e.loading, e.delay, o.value], ([t, i, d]) => {
+      if (v(), !d) {
+        u.value = !0;
+        return;
+      }
+      if (!t) {
+        u.value = !1;
+        return;
+      }
+      if (u.value || !i || !Number.isFinite(i) || i <= 0) {
+        u.value = !0;
+        return;
+      }
+      c = setTimeout(() => {
+        u.value = !0, c = void 0;
+      }, i);
+    }, {
+      immediate: !0
+    }), B(v);
+    const l = s(() => e.loading && u.value), z = s(() => [a.block, e.display === "inline" ? a.modifier("inline") : a.modifier("block"), {
+      [a.modifier("loading")]: l.value,
+      [a.modifier("with-tip")]: e.tip && !n.default,
+      /*
+       * 扫光只作用于提示文字。tip 是 prop 时 with-tip 才成立；
+       * 自定义 tip 插槽的内容结构未知，不加扫光，避免破坏使用方自己的样式。
+       */
+      [a.modifier("tip-shimmer")]: e.tipShimmer && !!e.tip
+    }]), C = () => {
+      if (n.icon) {
+        const t = q(n.icon());
+        if (t)
+          return H(t, {
             spin: !0
           });
       }
-      return i.element ? i.element() : e.dot ? t(k, {
+      return n.element ? n.element() : e.dot ? r(_, {
         size: e.size,
         type: e.dot === "color" ? "color" : "default"
-      }, null) : t(L, {
-        spin: !0,
+      }, null) : r(O, {
         size: e.size
       }, null);
-    }, o = () => {
-      var l;
-      const a = e.size ? {
+    }, p = () => {
+      var d;
+      const t = e.size ? {
         fontSize: `${e.size}px`
-      } : void 0, d = !!(i.tip ?? e.tip);
-      return t(c, null, [!e.hideIcon && t("div", {
-        class: n.element("icon"),
-        style: a
-      }, [s()]), d && t("div", {
-        class: n.element("tip")
-      }, [((l = i.tip) == null ? void 0 : l.call(i)) ?? e.tip])]);
+      } : void 0, i = !!(n.tip ?? e.tip);
+      return r(A, null, [!e.hideIcon && r("div", {
+        class: a.element("icon"),
+        style: t
+      }, [C()]), i && r("div", {
+        class: a.element("tip")
+      }, [((d = n.tip) == null ? void 0 : d.call(n)) ?? e.tip])]);
+    }, m = typeof HTMLElement < "u" && "inert" in HTMLElement.prototype, y = S(), f = /* @__PURE__ */ new Map(), b = () => {
+      const t = y.value;
+      t && t.querySelectorAll(j).forEach((i) => {
+        f.has(i) || (f.set(i, i.getAttribute("tabindex")), i.setAttribute("tabindex", "-1"));
+      });
+    }, h = () => {
+      f.forEach((t, i) => {
+        t === null ? i.removeAttribute("tabindex") : i.setAttribute("tabindex", t);
+      }), f.clear();
+    }, g = (t) => {
+      m || (t ? b() : h());
     };
-    return () => {
-      var r;
-      const a = !!i.default, {
-        class: d,
-        style: l,
-        role: g,
-        "aria-live": y,
-        "aria-busy": v,
-        "aria-label": h,
-        ...b
-      } = u, z = !!(i.tip ?? e.tip);
-      return t("div", S(b, {
-        class: [f.value, d],
-        style: l,
-        role: g ?? (a ? void 0 : "status"),
-        "aria-live": y ?? (a && !e.loading ? void 0 : "polite"),
-        "aria-busy": v ?? (a ? e.loading : !0),
-        "aria-label": h ?? (z ? void 0 : m("common.loading"))
-      }), [a ? t(c, null, [t("div", {
-        class: n.element("children"),
-        "aria-hidden": e.loading ? "true" : void 0,
-        inert: e.loading ? "" : void 0
-      }, [(r = i.default) == null ? void 0 : r.call(i)]), e.loading && t("div", {
-        class: n.element("mask")
-      }, [t("div", {
-        class: n.element("mask--icon")
-      }, [o()])])]) : o()]);
+    return x(l, g, {
+      flush: "post"
+    }), R(() => g(l.value)), U(() => {
+      !m && l.value && b();
+    }), B(() => {
+      m || h();
+    }), () => {
+      var L;
+      const {
+        class: t,
+        style: i,
+        role: d,
+        "aria-live": E,
+        "aria-busy": N,
+        "aria-label": F,
+        ...I
+      } = T, M = !!(n.tip ?? e.tip), w = o.value ? l.value : !0;
+      return r("div", V(I, {
+        class: [z.value, t],
+        style: i,
+        role: d ?? (o.value ? void 0 : "status"),
+        "aria-live": E ?? (o.value && !l.value ? void 0 : "polite"),
+        "aria-busy": N ?? (o.value ? l.value : !0),
+        "aria-label": F ?? (w && !M ? k("common.loading") : void 0)
+      }), [o.value ? r(A, null, [r("div", {
+        ref: y,
+        class: a.element("children"),
+        "aria-hidden": l.value ? "true" : void 0,
+        inert: l.value ? "" : void 0
+      }, [(L = n.default) == null ? void 0 : L.call(n)]), l.value && r("div", {
+        class: a.element("mask")
+      }, [r("div", {
+        class: a.element("mask--icon")
+      }, [p()])])]) : p()]);
     };
   }
 });
 export {
-  M as default
+  Y as default
 };

package/dist/es/components/table/Table.js

@@ -1033,7 +1033,9 @@ const bt = {
       }, {
         default: () => {
           var e;
-          return [((e = s.empty) == null ? void 0 : e.call(s)) ?? u(aa, null, null)];
+          return [((e = s.empty) == null ? void 0 : e.call(s)) ?? u(aa, {
+            component: "table"
+          }, null)];
         }
       })]
     }), Al = (e) => {

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]])];
               }
             })])]