ant-design-x-vue 1.3.2 → 1.4.0

package/es/actions/ActionMenu.mjs

@@ -0,0 +1,67 @@
+import { defineComponent as g, computed as o, createVNode as r } from "vue";
+import { Dropdown as k } from "ant-design-vue";
+import "../x-provider/index.mjs";
+import x from "../x-provider/hooks/use-x-provider-context.mjs";
+import { E as h } from "../chunks/module-chunk.mjs";
+const E = /* @__PURE__ */ g({
+  name: "AXActionMenu",
+  __name: "ActionMenu",
+  props: {
+    item: null,
+    prefixCls: null
+  },
+  emits: ["click"],
+  setup(u, {
+    emit: p
+  }) {
+    const t = u, a = p, c = (i, n) => {
+      const s = i[0];
+      for (const e of n)
+        if (e.key === s) {
+          if (i.length === 1) return e;
+          if ("children" in e && e.children)
+            return c(i.slice(1), e.children);
+        }
+      return null;
+    }, {
+      getPrefixCls: f
+    } = x(), l = f("actions", t.prefixCls), d = o(() => {
+      var i;
+      return ((i = t.item) == null ? void 0 : i.icon) ?? r(h, null, null);
+    }), m = o(() => t.item.children || []), v = o(() => t.item.triggerSubMenuAction || "hover"), C = o(() => ({
+      items: m.value,
+      onClick: ({
+        key: i,
+        keyPath: n,
+        domEvent: s
+      }) => {
+        const e = c(n, m.value);
+        if (e != null && e.onItemClick) {
+          e.onItemClick(e);
+          return;
+        }
+        a("click", {
+          key: i,
+          keyPath: [...n, t.item.key],
+          domEvent: s,
+          item: e
+        });
+      }
+    }));
+    return () => r(k, {
+      menu: C.value,
+      overlayClassName: `${l}-sub-item`,
+      arrow: !0,
+      trigger: [v.value]
+    }, {
+      default: () => [r("div", {
+        class: `${l}-list-item`
+      }, [r("div", {
+        class: `${l}-list-item-icon`
+      }, [d.value])])]
+    });
+  }
+});
+export {
+  E as default
+};

package/es/actions/Actions.mjs

@@ -0,0 +1,100 @@
+import { defineComponent as P, computed as i, createVNode as r, mergeProps as p, isVNode as $ } from "vue";
+import { Tooltip as j } from "ant-design-vue";
+import { b as c } from "../chunks/module-chunk.mjs";
+import A from "../_util/pick-attrs.mjs";
+import V from "../_util/hooks/use-x-component-config.mjs";
+import "../x-provider/index.mjs";
+import X from "./ActionMenu.mjs";
+import O from "./style/index.mjs";
+import T from "../x-provider/hooks/use-x-provider-context.mjs";
+function w(s) {
+  return typeof s == "function" || Object.prototype.toString.call(s) === "[object Object]" && !$(s);
+}
+const J = /* @__PURE__ */ P({
+  name: "AXActions",
+  __name: "Actions",
+  props: {
+    items: {
+      default: () => []
+    },
+    rootClassName: {
+      default: ""
+    },
+    block: {
+      type: Boolean,
+      default: !1
+    },
+    onClick: {
+      type: Function
+    },
+    style: null,
+    variant: {
+      default: "borderless"
+    },
+    prefixCls: null
+  },
+  emits: ["click"],
+  setup(s, {
+    emit: f
+  }) {
+    const o = s, a = f, {
+      getPrefixCls: d,
+      direction: C
+    } = T(), l = d("actions", o.prefixCls), m = V("actions"), [k, y, v] = O(l), b = i(() => c(l, m.value.className, o.rootClassName, v, y.value, {
+      [`${l}-rtl`]: C.value === "rtl"
+    })), g = i(() => ({
+      ...m.value.style,
+      ...typeof o.style == "object" ? o.style : {}
+    })), x = (t, e, n) => e ? r(j, p(n, {
+      title: e
+    }), w(t) ? t : {
+      default: () => [t]
+    }) : t, h = (t, e, n) => {
+      if (e.onItemClick) {
+        e.onItemClick(e);
+        return;
+      }
+      a("click", {
+        key: t,
+        item: e,
+        keyPath: [t],
+        domEvent: n
+      });
+    }, S = (t) => {
+      a("click", t);
+    }, _ = (t) => {
+      const {
+        icon: e,
+        label: n,
+        key: u
+      } = t;
+      return r("div", {
+        class: c(`${l}-list-item`),
+        onClick: (I) => h(u, t, I),
+        key: u
+      }, [x(r("div", {
+        class: `${l}-list-item-icon`
+      }, [e]), n)]);
+    }, N = i(() => A(o, {
+      aria: !0,
+      data: !0
+    }));
+    return () => k(r("div", p({
+      class: b.value
+    }, N.value, {
+      style: g.value
+    }), [r("div", {
+      class: c(`${l}-list`, o.variant, {
+        block: o.block
+      })
+    }, [o.items.map((t) => "children" in t && t.children ? r(X, {
+      key: t.key,
+      item: t,
+      prefixCls: l,
+      onClick: S
+    }, null) : _(t))])]));
+  }
+});
+export {
+  J as default
+};

package/es/actions/index.mjs

@@ -0,0 +1,8 @@
+import n from "./Actions.mjs";
+n.install = function(t) {
+  return t.component(n.name, n), t;
+};
+export {
+  n as Actions,
+  n as default
+};

package/es/actions/interface.mjs

@@ -0,0 +1 @@
+

package/es/actions/style/index.mjs

@@ -0,0 +1,76 @@
+import "vue";
+import "../../_util/cssinjs/StyleContext.mjs";
+import "../../_util/cssinjs/theme/ThemeCache.mjs";
+import "../../_util/warning.mjs";
+import "../../_util/cssinjs/transformers/legacyLogicalProperties.mjs";
+import { merge as e } from "../../_util/cssinjs-utils/util/statistic.mjs";
+import { genStyleHooks as t } from "../../theme/genStyleUtils.mjs";
+const n = (i) => {
+  const { componentCls: o, calc: r } = i;
+  return {
+    [o]: {
+      [`&${o}-rtl`]: {
+        direction: "rtl"
+      },
+      [`${o}-list`]: {
+        display: "inline-flex",
+        flexDirection: "row",
+        gap: i.paddingXS,
+        color: i.colorTextDescription,
+        "&-item, &-sub-item": {
+          cursor: "pointer",
+          padding: i.paddingXXS,
+          borderRadius: i.borderRadius,
+          height: i.controlHeightSM,
+          width: i.controlHeightSM,
+          boxSizing: "border-box",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "&-icon": {
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: i.fontSize,
+            width: "100%",
+            height: "100%"
+          },
+          "&:hover": {
+            background: i.colorBgTextHover
+          }
+        }
+      },
+      "& .border": {
+        padding: `${i.paddingXS}px ${i.paddingSM}px`,
+        gap: i.paddingSM,
+        borderRadius: r(i.borderRadiusLG).mul(1.5).equal(),
+        backgroundColor: i.colorBorderSecondary,
+        color: i.colorTextSecondary,
+        [`${o}-list-item, ${o}-list-sub-item`]: {
+          padding: 0,
+          lineHeight: i.lineHeight,
+          "&-icon": {
+            fontSize: i.fontSizeLG
+          },
+          "&:hover": {
+            opacity: 0.8
+          }
+        }
+      },
+      "& .block": {
+        display: "flex"
+      }
+    }
+  };
+}, d = () => ({}), u = t(
+  "Actions",
+  (i) => {
+    const o = e(i, {});
+    return [n(o)];
+  },
+  d
+);
+export {
+  u as default,
+  d as prepareComponentToken
+};

package/es/attachments/FileList/FileList.mjs

@@ -1,11 +1,14 @@
-import { defineComponent as $, computed as b, useTemplateRef as x, watchEffect as L, onWatcherCleanup as R, watch as y, nextTick as P, createVNode as t, Fragment as E } from "vue";
-import { b as v, P as N, L as p, R as T } from "../../chunks/module-chunk.mjs";
+import { defineComponent as b, computed as $, useTemplateRef as E, watchEffect as N, onWatcherCleanup as P, watch as k, nextTick as O, createVNode as i, TransitionGroup as T, Fragment as I, isVNode as j } from "vue";
+import { b as g, P as A, L as F, R as M } from "../../chunks/module-chunk.mjs";
 import { Button as s } from "ant-design-vue";
-import a from "../../_util/hooks/use-state.mjs";
-import { useAttachmentContextInject as k } from "../context.mjs";
-import O from "../SilentUploader.mjs";
-import A from "./FileListCard.mjs";
-const d = 1, I = /* @__PURE__ */ $({
+import c from "../../_util/hooks/use-state.mjs";
+import { useAttachmentContextInject as W } from "../context.mjs";
+import X from "../SilentUploader.mjs";
+import z from "./FileListCard.mjs";
+function H(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !j(t);
+}
+const p = 1, Q = /* @__PURE__ */ b({
   name: "AXAttachmentsFileList",
   __name: "FileList",
   props: {
@@ -20,79 +23,128 @@ const d = 1, I = /* @__PURE__ */ $({
     itemClassName: {},
     itemStyle: {}
   },
-  setup(e) {
-    const n = b(() => `${e.prefixCls}-list`), i = x("file-list-container"), [F, c] = a(!1), h = k();
-    L(() => {
-      c(!0), R(() => {
-        c(!1);
+  setup(t) {
+    const n = $(() => `${t.prefixCls}-list`), r = E("file-list-container"), [V, m] = c(!1), v = W();
+    N(() => {
+      m(!0), P(() => {
+        m(!1);
       });
     });
-    const [g, r] = a(!1), [C, f] = a(!1), m = () => {
-      const l = i.value;
-      l && (e.overflow === "scrollX" ? (r(Math.abs(l.scrollLeft) >= d), f(l.scrollWidth - l.clientWidth - Math.abs(l.scrollLeft) >= d)) : e.overflow === "scrollY" && (r(l.scrollTop !== 0), f(l.scrollHeight - l.clientHeight !== l.scrollTop)));
+    const [w, f] = c(!1), [x, u] = c(!1), d = () => {
+      const e = r.value;
+      e && (t.overflow === "scrollX" ? (f(Math.abs(e.scrollLeft) >= p), u(e.scrollWidth - e.clientWidth - Math.abs(e.scrollLeft) >= p)) : t.overflow === "scrollY" && (f(e.scrollTop !== 0), u(e.scrollHeight - e.clientHeight !== e.scrollTop)));
     };
-    y([() => e.overflow, () => e.items.length], () => {
-      P(() => {
-        m();
+    k([() => t.overflow, () => t.items.length], () => {
+      O(() => {
+        d();
       });
     }, {
       immediate: !0
     });
-    const u = (l) => {
-      const o = i.value;
-      o && o.scrollTo({
-        left: o.scrollLeft + l * o.clientWidth,
+    const h = (e) => {
+      const l = r.value;
+      l && l.scrollTo({
+        left: l.scrollLeft + e * l.clientWidth,
         behavior: "smooth"
       });
-    }, w = () => {
-      u(-1);
-    }, S = () => {
-      u(1);
-    };
-    return () => t("div", {
-      class: v(n.value, {
-        [`${n.value}-overflow-${e.overflow}`]: e.overflow,
-        [`${n.value}-overflow-ping-start`]: g.value,
-        [`${n.value}-overflow-ping-end`]: C.value
-      }, e.listClassName),
-      ref: "file-list-container",
-      onScroll: m,
-      style: e.listStyle
-    }, [e.items.map((l) => t(A, {
-      key: l.uid,
-      prefixCls: e.prefixCls,
-      item: l,
-      onRemove: e.onRemove,
-      className: v(e.itemClassName),
-      imageProps: e.imageProps,
-      style: {
-        ...e.itemStyle
-      }
-    }, null)), !h.value.disabled && t(O, {
-      upload: e.upload,
-      children: t(s, {
-        class: `${n.value}-upload-btn`,
-        type: "dashed"
+    }, y = () => {
+      h(-1);
+    }, C = () => {
+      h(1);
+    }, L = (e, l) => {
+      const a = e.classList.contains("ant-attachment-list-card-type-preview") ? [{
+        width: "0px"
+      }, {
+        width: "64px"
+      }] : [{
+        width: "0px"
+      }, {
+        width: "236px"
+      }], o = e.animate(a, {
+        duration: 300,
+        easing: "ease",
+        fill: "forwards"
+      });
+      o.onfinish = () => l();
+    }, R = (e, l) => {
+      const a = e.classList.contains("ant-attachment-list-card-type-preview") ? [{
+        opacity: 1,
+        width: "64px",
+        marginRight: "0px"
       }, {
-        default: () => [t(N, {
-          class: `${n.value}-upload-btn-icon`
-        }, null)]
-      })
-    }, null), e.overflow === "scrollX" && t(E, null, [t(s, {
-      size: "small",
-      shape: "circle",
-      class: `${n.value}-prev-btn`,
-      icon: t(p, null, null),
-      onClick: w
-    }, null), t(s, {
-      size: "small",
-      shape: "circle",
-      class: `${n.value}-next-btn`,
-      icon: t(T, null, null),
-      onClick: S
-    }, null)])]);
+        opacity: 0,
+        width: "0px",
+        marginRight: "-10px"
+      }] : [{
+        opacity: 1,
+        width: "236px",
+        marginRight: "0px"
+      }, {
+        opacity: 0,
+        width: "0px",
+        marginRight: "-10px",
+        paddingRight: "0px",
+        paddingLeft: "0px"
+      }], o = e.animate(a, {
+        duration: 300,
+        easing: "ease",
+        fill: "forwards"
+      });
+      o.onfinish = () => l();
+    };
+    return () => {
+      let e;
+      return i("div", {
+        class: g(n.value, {
+          [`${n.value}-overflow-${t.overflow}`]: t.overflow,
+          [`${n.value}-overflow-ping-start`]: w.value,
+          [`${n.value}-overflow-ping-end`]: x.value
+        }, t.listClassName),
+        ref: "file-list-container",
+        onScroll: d,
+        style: t.listStyle
+      }, [i(T, {
+        onEnter: L,
+        onLeave: R,
+        css: !1
+      }, H(e = t.items.map((l) => i(z, {
+        key: l.uid,
+        prefixCls: t.prefixCls,
+        item: l,
+        onRemove: t.onRemove,
+        className: g(t.itemClassName),
+        imageProps: t.imageProps,
+        style: {
+          ...t.itemStyle
+        }
+      }, null))) ? e : {
+        default: () => [e]
+      }), !v.value.disabled && i(X, {
+        upload: t.upload,
+        children: i(s, {
+          class: `${n.value}-upload-btn`,
+          type: "dashed"
+        }, {
+          default: () => [i(A, {
+            class: `${n.value}-upload-btn-icon`
+          }, null)]
+        })
+      }, null), t.overflow === "scrollX" && i(I, null, [i(s, {
+        size: "small",
+        shape: "circle",
+        class: `${n.value}-prev-btn`,
+        icon: i(F, null, null),
+        onClick: y
+      }, null), i(s, {
+        size: "small",
+        shape: "circle",
+        class: `${n.value}-next-btn`,
+        icon: i(M, null, null),
+        onClick: C
+      }, null)])]);
+    };
   }
 });
 export {
-  I as default
+  Q as default
 };