@mtn-ui/components 1.0.8 → 1.0.9

package/dist/antd-wrapped/action-group/action-group.vue.js

@@ -1,7 +1,7 @@
 import o from "./action-group.vue2.js";
 /* empty css                  */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ccd228a1"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-29d941f4"]]);
 export {
-  a as default
+  m as default
 };

package/dist/antd-wrapped/action-group/action-group.vue2.js

@@ -1,262 +1,292 @@
-import { defineComponent as Ce, useSlots as be, ref as x, inject as Pe, computed as l, shallowRef as ze, watch as ne, createElementBlock as f, openBlock as r, createVNode as j, createElementVNode as re, unref as v, mergeProps as I, withCtx as a, createBlock as u, createCommentVNode as Ae, Fragment as g, renderList as _, resolveDynamicComponent as m, createSlots as O, createTextVNode as $, toDisplayString as K, cloneVNode as oe } from "vue";
-import { useElementSize as Se, useDebounceFn as Me } from "@vueuse/core";
-import { MoreOutlined as xe } from "@ant-design/icons-vue";
-import { Menu as w } from "ant-design-vue";
-import Ie from "../button/button.js";
-import Be from "../button-group/button-group.js";
-import ie from "../dropdown-button/dropdown-button.js";
-import { actionGroupProps as Ee } from "./props.js";
-import { PERMISSION_CHECKER_KEY as Ne, defaultPermissionChecker as Te } from "@mtn-ui/shared";
-import { filterValidChildren as Re, getButtonKey as se } from "./utils.js";
-const G = "link", le = "small", Ve = 150, Fe = /* @__PURE__ */ Ce({
+import { defineComponent as Ae, useSlots as Me, useAttrs as Se, ref as I, inject as Ie, computed as i, shallowRef as Te, watch as te, cloneVNode as oe, onMounted as Ee, nextTick as K, onUnmounted as Ne, createElementBlock as v, openBlock as r, createVNode as $, createElementVNode as re, unref as C, normalizeProps as se, guardReactiveProps as Re, withCtx as m, createBlock as u, createCommentVNode as Ve, Fragment as P, renderList as z, resolveDynamicComponent as d, mergeProps as U, createSlots as F, createTextVNode as G, toDisplayString as L, normalizeStyle as we } from "vue";
+import { useDebounceFn as Be } from "@vueuse/core";
+import { MoreOutlined as Oe } from "@ant-design/icons-vue";
+import { Menu as Y } from "ant-design-vue";
+import Ue from "../button/button.js";
+import De from "../button-group/button-group.js";
+import le from "../dropdown-button/dropdown-button.js";
+import { actionGroupProps as je } from "./props.js";
+import { PERMISSION_CHECKER_KEY as We, defaultPermissionChecker as Ke } from "@mtn-ui/shared";
+import { filterValidChildren as $e, getButtonKey as Fe } from "./utils.js";
+const H = "link", ae = "small", Ge = 150, tn = /* @__PURE__ */ Ae({
   name: "MActionGroup",
   inheritAttrs: !1,
   __name: "action-group",
-  props: Ee,
+  props: je,
   emits: ["action-click"],
-  setup(ue, { emit: ae }) {
-    const n = ue, ce = ae, W = be(), Y = x(), C = x(), b = x(), { width: P } = Se(Y), me = Pe(Ne, x(Te));
-    function F(e) {
-      if (!e) return;
-      const o = e;
-      return o.name || o.__name || o.displayName;
-    }
-    const z = l(() => n.mode === "table"), A = l(
-      () => z.value ? "small" : n.size
-    ), B = l(
-      () => z.value ? "link" : "default"
-    ), H = l(
-      () => z.value ? "" : n.moreText
-    ), L = l(() => n.moreIcon || xe);
-    function E(e) {
+  setup(ie, { emit: ue }) {
+    const t = ie, ce = ue, D = Me(), pe = Se(), y = I(), T = I(), E = I(), me = Ie(We, I(Ke)), x = i(() => t.mode === "table"), A = i(() => x.value ? "small" : t.size), N = i(() => x.value ? "link" : "default"), q = i(() => x.value ? "" : t.moreText), Z = i(() => t.moreIcon || Oe);
+    function R(e) {
       return e ? me.value(e) : !0;
     }
-    const N = l(() => {
+    const J = i(() => {
       var e;
-      return Re((e = W.default) == null ? void 0 : e.call(W));
-    }), d = ze([]);
-    function q(e) {
-      var t, i, s;
+      return $e((e = D.default) == null ? void 0 : e.call(D));
+    }), h = Te([]);
+    function Q(e) {
+      var c, l, p;
+      const o = e.icon && (e.icon.name || e.icon.__name) || "", n = e.component && (e.component.name || e.component.__name) || "";
       return [
         e.key ?? "",
         e.label ?? "",
-        F(e.icon) ?? "",
-        F(e.component) ?? "",
+        o,
+        n,
         Array.isArray(e.permission) ? e.permission.join(",") : e.permission ?? "",
         e.permissionAction ?? "",
         String(e.disabled ?? !1),
-        String(((t = e.componentProps) == null ? void 0 : t.confirm) ?? ""),
-        String(((i = e.componentProps) == null ? void 0 : i.showSuccess) ?? ""),
-        String(((s = e.componentProps) == null ? void 0 : s.danger) ?? "")
+        String(((c = e.componentProps) == null ? void 0 : c.confirm) ?? ""),
+        String(((l = e.componentProps) == null ? void 0 : l.showSuccess) ?? ""),
+        String(((p = e.componentProps) == null ? void 0 : p.danger) ?? "")
       ].join("|");
     }
-    ne(
-      () => n.actions,
+    te(
+      () => t.actions,
       (e) => {
         if (!e) {
-          d.value = [];
+          h.value = [];
           return;
         }
-        if (d.value.length !== e.length) {
-          d.value = e;
+        if (h.value.length !== e.length) {
+          h.value = e;
           return;
         }
-        const o = e.map(q).join("||"), t = d.value.map(q).join("||");
-        o !== t && (d.value = e);
+        const o = e.map(Q).join("||"), n = h.value.map(Q).join("||");
+        o !== n && (h.value = e);
       },
       { immediate: !0, deep: !1 }
     );
-    const T = l(() => d.value.length ? d.value.filter((e) => E(e.permission)) : []), c = l(() => n.actions ? T.value.length : N.value.length);
-    function pe() {
-      if (!C.value || !b.value || !P.value)
-        return Math.min(n.maxItems, c.value);
-      const e = b.value.offsetWidth, o = Array.from(
-        C.value.querySelectorAll(".measure-item")
-      );
-      if (o.length === 0) return Math.min(n.maxItems, c.value);
-      let t = e, i = 0;
-      for (let s = 0; s < o.length - 1; s++) {
-        const y = o[s].offsetWidth + n.gap;
-        if (t + y <= P.value)
-          t += y, i++;
-        else
-          break;
+    const j = i(() => h.value.length ? h.value.filter((e) => R(e.permission)) : []), f = i(() => t.actions ? j.value.length : J.value.length), V = i(() => t.actions ? j.value.map((e, o) => ({
+      key: be(e, o),
+      label: e.label || "",
+      icon: e.icon || null,
+      component: ge(e),
+      props: _e(e),
+      menuProps: Ce(e),
+      handler: () => Pe(e)
+    })) : J.value.filter((e) => {
+      const o = e.props || {};
+      return o.permission && o.permissionAction === "hide" ? R(o.permission) : !0;
+    }).map((e, o) => {
+      var l, p;
+      const n = Fe(e, o), s = oe(e, {
+        type: ((l = e.props) == null ? void 0 : l.type) ?? (x.value ? N.value : void 0),
+        size: ((p = e.props) == null ? void 0 : p.size) ?? A.value
+      }), c = oe(e, {
+        ...e.props,
+        type: H,
+        size: ae
+      });
+      return {
+        key: n,
+        label: "",
+        // 插槽模式没有 label，由组件自身渲染
+        icon: null,
+        component: s,
+        props: {},
+        // 插槽模式使用 cloneVNode 已经处理了 props
+        menuProps: {},
+        // 菜单模式使用 cloneVNode 已经处理了 props
+        handler: null,
+        // 插槽模式的事件由组件自身处理
+        vnode: s,
+        // 保存原始 vnode 用于渲染
+        menuVnode: c
+        // 保存菜单模式的 vnode
+      };
+    })), X = i(() => V.value.slice(0, ee.value)), W = i(() => V.value.slice(ee.value)), fe = i(() => ({
+      size: A.value,
+      compact: t.compact,
+      vertical: t.vertical,
+      block: t.block,
+      ...pe
+    })), de = i(() => ({
+      text: q.value,
+      size: A.value,
+      type: N.value,
+      ...t.moreProps
+    })), w = I(t.maxItems);
+    function ve() {
+      if (!y.value || !T.value || !E.value)
+        return Math.min(t.maxItems, f.value);
+      const e = y.value.clientWidth, o = T.value.querySelectorAll(".measure-item");
+      if (o.length === 0) return Math.min(t.maxItems, f.value);
+      const n = f.value, s = [];
+      for (let a = 0; a < Math.min(n, o.length); a++)
+        s.push(o[a].offsetWidth);
+      const c = E.value.offsetWidth ?? 0;
+      let l = 0, p = 0;
+      for (let a = 0; a < s.length; a++) {
+        const k = s[a], b = l === 0 ? k : l + t.gap + k, _ = s.length - (a + 1) > 0 ? l === 0 ? c : t.gap + c : 0;
+        if (b + _ <= e) {
+          l = b, p++;
+          continue;
+        }
+        break;
       }
-      return Math.max(0, Math.min(i, n.maxItems, c.value));
+      return Math.max(0, Math.min(p, t.maxItems, n));
     }
-    const S = x(n.maxItems), fe = Me(() => {
-      S.value = pe();
-    }, Ve);
-    ne(
-      [P, c, () => n.maxItems, () => n.gap],
-      () => {
-        if (n.disableCollapse) {
-          S.value = c.value;
-          return;
-        }
-        if (c.value <= 1) {
-          S.value = c.value;
-          return;
-        }
-        C.value && b.value && P.value ? fe() : S.value = Math.min(n.maxItems, c.value);
+    const B = () => {
+      if (t.disableCollapse) {
+        w.value = f.value;
+        return;
+      }
+      if (f.value <= 1) {
+        w.value = f.value;
+        return;
+      }
+      w.value = ve();
+    }, g = Be(() => {
+      B();
+    }, Ge), M = (e = !1) => {
+      e ? (typeof g == "function" && "cancel" in g && g.cancel(), B()) : g();
+    };
+    M.cancel = () => {
+      typeof g == "function" && "cancel" in g && g.cancel();
+    };
+    let S = null;
+    const ye = async () => {
+      await K(), B(), y.value && typeof ResizeObserver < "u" && (S = new ResizeObserver((e) => {
+        e[0].contentRect.width > 0 && M();
+      }), S.observe(y.value));
+    }, ke = () => {
+      S && y.value && S.unobserve(y.value), S = null, "cancel" in M && M.cancel();
+    };
+    Ee(async () => {
+      B(), await K(), ye();
+    }), Ne(() => {
+      ke();
+    }), te(
+      [j, f, () => t.maxItems, () => t.gap],
+      async () => {
+        await K(), M(!0);
       },
-      { immediate: !0 }
+      { deep: !1 }
     );
-    const k = l(() => n.disableCollapse || c.value <= 1 ? c.value : C.value && b.value && P.value ? S.value : Math.min(n.maxItems, c.value)), ve = l(() => n.actions ? T.value.slice(0, k.value) : []), Z = l(() => n.actions ? T.value.slice(k.value) : []), de = l(() => {
-      if (n.actions) return [];
-      const e = N.value;
-      return k.value >= e.length ? e : e.slice(0, k.value);
-    }), J = l(() => {
-      if (n.actions) return [];
-      const e = N.value;
-      return k.value >= e.length ? [] : e.slice(k.value);
-    }), ye = l(() => n.actions ? [] : J.value.filter((e) => {
-      const o = e.props || {};
-      return o.permission && o.permissionAction === "hide" ? E(o.permission) : !0;
-    })), ke = l(() => n.disableCollapse ? !1 : (n.actions ? Z.value.length : J.value.length) > 0);
-    function D(e) {
-      return e.component || Ie;
+    const ee = i(() => t.disableCollapse || f.value <= 1 ? f.value : T.value && E.value && y.value ? w.value : Math.min(t.maxItems, f.value)), he = i(() => t.disableCollapse ? !1 : W.value.length > 0);
+    function ge(e) {
+      return e.component || Ue;
     }
-    function Q(e, o) {
+    function be(e, o) {
       return e.key || e.label || `action-${o}`;
     }
-    function X(e) {
+    function ne(e) {
       const {
         label: o,
-        key: t,
-        onClick: i,
-        permission: s,
-        permissionAction: p,
-        icon: y,
-        component: h,
-        componentProps: M,
-        slot: R,
-        type: U,
-        size: V,
-        disabled: ge,
-        ..._e
+        key: n,
+        onClick: s,
+        permission: c,
+        permissionAction: l,
+        icon: p,
+        component: a,
+        componentProps: k,
+        slot: b,
+        type: O,
+        size: _,
+        disabled: ze,
+        ...xe
       } = e;
       return {
-        component: h,
-        componentProps: M,
-        type: U,
-        size: V,
-        rest: _e,
-        permission: s,
-        permissionAction: p,
-        disabled: ge
+        component: a,
+        componentProps: k,
+        type: O,
+        size: _,
+        rest: xe,
+        permission: c,
+        permissionAction: l,
+        disabled: ze
       };
     }
-    function ee(e) {
-      const { component: o, componentProps: t, type: i, rest: s, permission: p, permissionAction: y, disabled: h } = X(e), M = {
-        type: i || B.value,
+    function _e(e) {
+      const { component: o, componentProps: n, type: s, rest: c, permission: l, permissionAction: p, disabled: a } = ne(e), k = {
+        type: s || N.value,
         size: A.value,
-        disabled: h || !E(p) && y === "disable",
-        ...s
+        disabled: a || !R(l) && p === "disable",
+        ...c
       };
-      if (o && t) {
-        const R = { ...M, ...t };
-        return z.value && (R.type = "link"), R;
+      if (o && n) {
+        const b = { ...k, ...n };
+        return x.value && (b.type = "link"), b;
       }
-      return M;
+      return k;
     }
-    function he(e) {
-      const { component: o, componentProps: t, rest: i, permission: s, permissionAction: p, disabled: y } = X(e), h = {
-        type: G,
-        size: le,
-        disabled: y || !E(s) && p === "disable",
-        ...i
+    function Ce(e) {
+      const { component: o, componentProps: n, rest: s, permission: c, permissionAction: l, disabled: p } = ne(e), a = {
+        type: H,
+        size: ae,
+        disabled: p || !R(c) && l === "disable",
+        ...s
       };
-      if (o && t) {
-        const { type: M, size: R, ...U } = t, V = { ...h, ...U };
-        return V.type = G, V;
+      if (o && n) {
+        const { type: k, size: b, ...O } = n, _ = { ...a, ...O };
+        return _.type = H, _;
       }
-      return h;
+      return a;
     }
-    function te(e) {
+    function Pe(e) {
       e.onClick && e.onClick(e), ce("action-click", e);
     }
-    return (e, o) => (r(), f("div", {
+    return (e, o) => (r(), v("div", {
       ref_key: "containerRef",
-      ref: Y,
+      ref: y,
       class: "mtn-action-group"
     }, [
-      j(v(Be), I({
-        size: A.value,
-        compact: e.compact,
-        vertical: e.vertical,
-        block: e.block
-      }, e.$attrs), {
-        default: a(() => [
-          n.actions ? (r(!0), f(g, { key: 0 }, _(ve.value, (t, i) => (r(), u(m(D(t)), I({
-            key: Q(t, i)
-          }, { ref_for: !0 }, ee(t), {
-            onClick: (s) => te(t)
-          }), O({
-            default: a(() => [
-              $(" " + K(t.label), 1)
+      $(C(De), se(Re(fe.value)), {
+        default: m(() => [
+          t.actions ? (r(!0), v(P, { key: 0 }, z(X.value, (n) => (r(), u(d(n.component), U({
+            key: n.key,
+            ref_for: !0
+          }, n.props, {
+            onClick: n.handler
+          }), F({
+            default: m(() => [
+              G(" " + L(n.label), 1)
             ]),
             _: 2
           }, [
-            t.icon ? {
+            n.icon ? {
               name: "icon",
-              fn: a(() => [
-                (r(), u(m(t.icon)))
+              fn: m(() => [
+                (r(), u(d(n.icon)))
               ]),
               key: "0"
             } : void 0
-          ]), 1040, ["onClick"]))), 128)) : (r(!0), f(g, { key: 1 }, _(de.value, (t, i) => {
-            var s, p;
-            return r(), u(m(oe(t, {
-              type: ((s = t.props) == null ? void 0 : s.type) ?? (z.value ? B.value : void 0),
-              size: ((p = t.props) == null ? void 0 : p.size) ?? A.value
-            })), {
-              key: v(se)(t, i)
-            });
-          }), 128)),
-          ke.value ? (r(), u(v(ie), I({
-            key: 2,
-            text: H.value,
-            size: A.value,
-            type: B.value
-          }, n.moreProps), {
-            icon: a(() => [
-              (r(), u(m(L.value)))
+          ]), 1040, ["onClick"]))), 128)) : (r(!0), v(P, { key: 1 }, z(X.value, (n) => (r(), u(d(n.vnode), {
+            key: n.key
+          }))), 128)),
+          he.value ? (r(), u(C(le), se(U({ key: 2 }, de.value)), {
+            icon: m(() => [
+              (r(), u(d(Z.value)))
             ]),
-            overlay: a(() => [
-              j(v(w), null, {
-                default: a(() => [
-                  n.actions ? (r(!0), f(g, { key: 0 }, _(Z.value, (t, i) => (r(), u(v(w).Item, {
-                    key: Q(t, i)
+            overlay: m(() => [
+              $(C(Y), null, {
+                default: m(() => [
+                  t.actions ? (r(!0), v(P, { key: 0 }, z(W.value, (n) => (r(), u(C(Y).Item, {
+                    key: n.key
                   }, {
-                    default: a(() => [
-                      (r(), u(m(D(t)), I({ ref_for: !0 }, he(t), {
-                        onClick: (s) => te(t)
-                      }), O({
-                        default: a(() => [
-                          $(" " + K(t.label), 1)
+                    default: m(() => [
+                      (r(), u(d(n.component), U({ ref_for: !0 }, n.menuProps, {
+                        onClick: n.handler
+                      }), F({
+                        default: m(() => [
+                          G(" " + L(n.label), 1)
                         ]),
                         _: 2
                       }, [
-                        t.icon ? {
+                        n.icon ? {
                           name: "icon",
-                          fn: a(() => [
-                            (r(), u(m(t.icon)))
+                          fn: m(() => [
+                            (r(), u(d(n.icon)))
                           ]),
                           key: "0"
                         } : void 0
                       ]), 1040, ["onClick"]))
                     ]),
                     _: 2
-                  }, 1024))), 128)) : (r(!0), f(g, { key: 1 }, _(ye.value, (t, i) => (r(), u(v(w).Item, {
-                    key: v(se)(t, i)
+                  }, 1024))), 128)) : (r(!0), v(P, { key: 1 }, z(W.value, (n) => (r(), u(C(Y).Item, {
+                    key: n.key
                   }, {
-                    default: a(() => [
-                      (r(), u(m(oe(t, {
-                        ...t.props,
-                        type: G,
-                        size: le
-                      }))))
+                    default: m(() => [
+                      (r(), u(d(n.menuVnode)))
                     ]),
                     _: 2
                   }, 1024))), 128))
@@ -265,59 +295,60 @@ const G = "link", le = "small", Ve = 150, Fe = /* @__PURE__ */ Ce({
               })
             ]),
             _: 1
-          }, 16, ["text", "size", "type"])) : Ae("", !0)
+          }, 16)) : Ve("", !0)
         ]),
         _: 1
-      }, 16, ["size", "compact", "vertical", "block"]),
+      }, 16),
       re("div", {
         ref_key: "measureRef",
-        ref: C,
-        class: "mtn-action-group-measure"
+        ref: T,
+        class: "mtn-action-group-measure",
+        style: we({ gap: `${t.gap}px` })
       }, [
-        n.actions ? (r(!0), f(g, { key: 0 }, _(T.value, (t, i) => (r(), f("span", {
-          key: i,
+        t.actions ? (r(!0), v(P, { key: 0 }, z(V.value, (n, s) => (r(), v("span", {
+          key: s,
           class: "measure-item"
         }, [
-          (r(), u(m(D(t)), I({ ref_for: !0 }, ee(t)), O({
-            default: a(() => [
-              $(" " + K(t.label), 1)
+          (r(), u(d(n.component), U({ ref_for: !0 }, n.props), F({
+            default: m(() => [
+              G(" " + L(n.label), 1)
             ]),
             _: 2
           }, [
-            t.icon ? {
+            n.icon ? {
               name: "icon",
-              fn: a(() => [
-                (r(), u(m(t.icon)))
+              fn: m(() => [
+                (r(), u(d(n.icon)))
               ]),
               key: "0"
             } : void 0
           ]), 1040))
-        ]))), 128)) : (r(!0), f(g, { key: 1 }, _(N.value, (t, i) => (r(), f("span", {
-          key: i,
+        ]))), 128)) : (r(!0), v(P, { key: 1 }, z(V.value, (n, s) => (r(), v("span", {
+          key: s,
           class: "measure-item"
         }, [
-          (r(), u(m(t)))
+          (r(), u(d(n.vnode)))
         ]))), 128)),
         re("span", {
           ref_key: "moreTriggerRef",
-          ref: b,
+          ref: E,
           class: "measure-item"
         }, [
-          j(v(ie), {
-            text: H.value,
+          $(C(le), {
+            text: q.value,
             size: A.value,
-            type: B.value
+            type: N.value
           }, {
-            icon: a(() => [
-              (r(), u(m(L.value)))
+            icon: m(() => [
+              (r(), u(d(Z.value)))
             ]),
             _: 1
           }, 8, ["text", "size", "type"])
         ], 512)
-      ], 512)
+      ], 4)
     ], 512));
   }
 });
 export {
-  Fe as default
+  tn as default
 };

package/dist/components.css

@@ -1 +1 @@
-.mtn-action-group[data-v-ccd228a1]{width:100%;container-type:inline-size}.mtn-action-group-measure[data-v-ccd228a1]{position:fixed;top:-9999px;left:-9999px;display:flex;visibility:hidden;align-items:center;overflow:hidden;pointer-events:none;white-space:nowrap;opacity:0;z-index:-9999;clip-path:inset(100%)}.measure-item[data-v-ccd228a1]{display:inline-flex}[data-v-a943bc19] .ant-btn-dangerous{transition:transform .1s ease}[data-v-a943bc19] .ant-btn-dangerous:active{transform:scale(.95)}
+.mtn-action-group[data-v-29d941f4]{width:100%;container-type:inline-size}.mtn-action-group-measure[data-v-29d941f4]{position:absolute;display:flex;visibility:hidden;align-items:center;height:0;overflow:hidden;pointer-events:none;white-space:nowrap}.measure-item[data-v-29d941f4]{display:inline-flex}[data-v-a943bc19] .ant-btn-dangerous{transition:transform .1s ease}[data-v-a943bc19] .ant-btn-dangerous:active{transform:scale(.95)}