ant-design-x-vue 1.1.1 → 1.2.0

package/es/attachments/FileList/FileListCard.mjs

@@ -0,0 +1,168 @@
+import { defineComponent as N, toRef as M, createVNode as e, computed as n, useTemplateRef as V, watch as U, onWatcherCleanup as X, Fragment as S, mergeProps as G } from "vue";
+import { c as W } from "../Attachments2.mjs";
+import { A as D } from "./AudioIcon2.mjs";
+import K from "./VideoIcon.mjs";
+import { useAttachmentContextInject as Y } from "../context.mjs";
+import Z from "../../x-provider/hooks/use-x-provider-context.mjs";
+import "../../x-provider/context.mjs";
+import { Image as q, Progress as H } from "ant-design-vue";
+import { previewImage as J } from "../util.mjs";
+import Q from "../style/index.mjs";
+import _ from "../../_util/hooks/use-state.mjs";
+import { F as ee, a as le, b as te, c as ie, d as ne, e as oe, f as ae, g as se, C as ce } from "./FileList2.mjs";
+const v = " ", d = "#8c8c8c", Ie = /* @__PURE__ */ N({
+  name: "AXAttachmentsFileListCard",
+  __name: "FileListCard",
+  props: {
+    prefixCls: null,
+    item: null,
+    onRemove: {
+      type: Function
+    },
+    className: null,
+    style: null,
+    imageProps: null
+  },
+  setup(l, {
+    expose: h
+  }) {
+    M(l, "prefixCls");
+    const x = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg"], P = [{
+      icon: e(ee, null, null),
+      color: "#22b35e",
+      ext: ["xlsx", "xls"]
+    }, {
+      icon: e(le, null, null),
+      color: d,
+      ext: x
+    }, {
+      icon: e(te, null, null),
+      color: d,
+      ext: ["md", "mdx"]
+    }, {
+      icon: e(ie, null, null),
+      color: "#ff4d4f",
+      ext: ["pdf"]
+    }, {
+      icon: e(ne, null, null),
+      color: "#ff6e31",
+      ext: ["ppt", "pptx"]
+    }, {
+      icon: e(oe, null, null),
+      color: "#1677ff",
+      ext: ["doc", "docx"]
+    }, {
+      icon: e(ae, null, null),
+      color: "#fab714",
+      ext: ["zip", "rar", "7z", "tar", "gz"]
+    }, {
+      icon: e(K, null, null),
+      color: "#ff4d4f",
+      ext: ["mp4", "avi", "mov", "wmv", "flv", "mkv"]
+    }, {
+      icon: e(D, null, null),
+      color: "#8c8c8c",
+      ext: ["mp3", "wav", "flac", "ape", "aac", "ogg"]
+    }];
+    function g(o, i) {
+      return i.some((s) => o.toLowerCase() === `.${s}`);
+    }
+    function b(o) {
+      let i = o;
+      const s = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
+      let f = 0;
+      for (; i >= 1024 && f < s.length - 1; )
+        i /= 1024, f++;
+      return `${i.toFixed(0)} ${s[f]}`;
+    }
+    const y = Y(), E = n(() => y.value.disabled), O = n(() => l.item.name), p = n(() => l.item.size), r = n(() => l.item.percent), a = n(() => l.item.status || "done"), F = n(() => l.item.description), {
+      getPrefixCls: R
+    } = Z(), C = n(() => R("attachment", l.prefixCls)), t = `${C.value}-list-card`, [j, z, A] = Q(C), B = V("file-list-card-container"), c = n(() => {
+      const o = O.value || "", i = o.match(/^(.*)\.[^.]+$/);
+      return {
+        namePrefix: i ? i[1] : o,
+        nameSuffix: i ? o.slice(i[1].length) : ""
+      };
+    }), T = n(() => g(c.value.nameSuffix, x)), $ = n(() => F.value ? F.value : a.value === "uploading" ? `${r.value || 0}%` : a.value === "error" ? l.item.response || v : p.value ? b(p.value) : v), I = n(() => {
+      for (const {
+        ext: o,
+        icon: i,
+        color: s
+      } of P)
+        if (g(c.value.nameSuffix, o))
+          return {
+            icon: i,
+            iconColor: s
+          };
+      return {
+        icon: e(se, {
+          key: "defaultIcon"
+        }, null),
+        iconColor: d
+      };
+    }), [L, w] = _();
+    U(() => l.item.originFileObj, () => {
+      if (l.item.originFileObj) {
+        let o = !0;
+        J(l.item.originFileObj).then((i) => {
+          o && w(i);
+        }), X(() => {
+          o = !1;
+        });
+      }
+      w(void 0);
+    }, {
+      immediate: !0
+    });
+    const u = n(() => l.item.thumbUrl || l.item.url || L.value), m = n(() => T.value && (l.item.originFileObj || u.value)), k = n(() => m.value ? e(S, null, [u.value && e(q, G(l.imageProps, {
+      alt: "preview",
+      src: u.value
+    }), null), a.value !== "done" && e("div", {
+      class: `${t}-img-mask`
+    }, [a.value === "uploading" && r.value !== void 0 && e(H, {
+      percent: r.value,
+      prefixCls: t
+    }, null), a.value === "error" && e("div", {
+      class: `${t}-desc`
+    }, [e("div", {
+      class: `${t}-ellipsis-prefix`
+    }, [$.value])])])]) : e(S, null, [e("div", {
+      class: `${t}-icon`,
+      style: {
+        color: I.value.iconColor
+      }
+    }, [I.value.icon]), e("div", {
+      class: `${t}-content`
+    }, [e("div", {
+      class: `${t}-name`
+    }, [e("div", {
+      class: `${t}-ellipsis-prefix`
+    }, [c.value.namePrefix ?? v]), e("div", {
+      class: `${t}-ellipsis-suffix`
+    }, [c.value.nameSuffix])]), e("div", {
+      class: `${t}-desc`
+    }, [e("div", {
+      class: `${t}-ellipsis-prefix`
+    }, [$.value])])])]));
+    return h({
+      nativeElement: B
+    }), () => j(e("div", {
+      class: W(t, {
+        [`${t}-status-${a.value}`]: a.value,
+        [`${t}-type-preview`]: m.value,
+        [`${t}-type-overview`]: !m.value
+      }, l.className, z.value, A),
+      style: l.style,
+      ref: "file-list-card-container"
+    }, [k.value, !E.value && l.onRemove && e("button", {
+      type: "button",
+      class: `${t}-remove`,
+      onClick: () => {
+        l.onRemove(l.item);
+      }
+    }, [e(ce, null, null)])]));
+  }
+});
+export {
+  Ie as default
+};

package/es/attachments/FileList/Progress.mjs

@@ -0,0 +1,49 @@
+import { defineComponent as s, createVNode as e, createTextVNode as n } from "vue";
+import { theme as a, Progress as p } from "ant-design-vue";
+const l = /* @__PURE__ */ s({
+  name: "AXAttachmentsProgress",
+  __name: "Progress",
+  props: {
+    prefixCls: {},
+    type: {},
+    percent: {},
+    format: {},
+    status: {},
+    showInfo: {
+      type: Boolean
+    },
+    strokeWidth: {},
+    strokeLinecap: {},
+    strokeColor: {},
+    trailColor: {},
+    width: {},
+    success: {},
+    gapDegree: {},
+    gapPosition: {},
+    size: {},
+    steps: {},
+    successPercent: {},
+    title: {},
+    progressStatus: {}
+  },
+  setup(t) {
+    const {
+      token: o
+    } = a.useToken();
+    return () => e(p, {
+      type: "circle",
+      percent: t.percent,
+      size: o.value.fontSizeHeading2 * 2,
+      strokeColor: "#FFF",
+      trailColor: "rgba(255, 255, 255, 0.3)",
+      format: (r) => e("span", {
+        style: {
+          color: "#FFF"
+        }
+      }, [(r || 0).toFixed(0), n("%")])
+    }, null);
+  }
+});
+export {
+  l as default
+};

package/es/attachments/FileList/VideoIcon.mjs

@@ -0,0 +1,30 @@
+import { createElementBlock as t, openBlock as n, createElementVNode as e } from "vue";
+import { _ as r } from "./AudioIcon2.mjs";
+const l = {}, i = {
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 16 16",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink"
+};
+function s(c, o) {
+  return n(), t("svg", i, o[0] || (o[0] = [
+    e("title", null, "video", -1),
+    e("g", {
+      stroke: "none",
+      "stroke-width": "1",
+      fill: "none",
+      "fill-rule": "evenodd"
+    }, [
+      e("path", {
+        d: "M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M12.9678571,4.67857143 L9.60714286,1.31785714 L9.60714286,4.67857143 L12.9678571,4.67857143 Z M10.5379461,10.3101106 L6.68957555,13.0059749 C6.59910784,13.0693494 6.47439406,13.0473861 6.41101953,12.9569184 C6.3874624,12.9232903 6.37482581,12.8832269 6.37482581,12.8421686 L6.37482581,7.45043999 C6.37482581,7.33998304 6.46436886,7.25043999 6.57482581,7.25043999 C6.61588409,7.25043999 6.65594753,7.26307658 6.68957555,7.28663371 L10.5379461,9.98249803 C10.6284138,10.0458726 10.6503772,10.1705863 10.5870027,10.2610541 C10.5736331,10.2801392 10.5570312,10.2967411 10.5379461,10.3101106 Z",
+        fill: "currentColor"
+      })
+    ], -1)
+  ]));
+}
+const m = /* @__PURE__ */ r(l, [["render", s]]);
+export {
+  m as default
+};

package/es/attachments/FileList/index.mjs

@@ -0,0 +1,6 @@
+import { _ as t } from "./FileList2.mjs";
+import { default as i } from "./FileListCard.mjs";
+export {
+  t as FileList,
+  i as FileListCard
+};

package/es/attachments/PlaceholderUploader.mjs

@@ -0,0 +1,79 @@
+import { defineComponent as y, mergeDefaults as D, computed as d, useTemplateRef as x, isVNode as c, createVNode as l, mergeProps as C } from "vue";
+import { c as T } from "./Attachments2.mjs";
+import { useAttachmentContextInject as $ } from "./context.mjs";
+import A from "../_util/hooks/use-state.mjs";
+import { Flex as b, Typography as o, Upload as N } from "ant-design-vue";
+const E = /* @__PURE__ */ y({
+  name: "AXAttachmentsPlaceholderUploader",
+  __name: "PlaceholderUploader",
+  props: D({
+    prefixCls: null,
+    placeholder: null,
+    upload: null,
+    className: null,
+    style: null
+  }, {
+    placeholder: () => ({})
+  }),
+  setup(e, {
+    expose: i
+  }) {
+    const a = `${e.prefixCls}-placeholder`, r = d(() => e.placeholder || {}), u = x("upload-dragger"), s = $(), [p, n] = A(!1), f = () => {
+      n(!0);
+    }, m = (t) => {
+      t.currentTarget.contains(t.relatedTarget) || n(!1);
+    }, g = () => {
+      n(!1);
+    };
+    i({
+      nativeElement: u
+    });
+    const h = (t) => Array.isArray(t) && t.every(c), v = d(() => c(e.placeholder) || h(e.placeholder) ? e.placeholder : l(b, {
+      align: "center",
+      justify: "center",
+      vertical: !0,
+      class: `${a}-inner`
+    }, {
+      default: () => [l(o.Text, {
+        class: `${a}-icon`
+      }, {
+        default: () => [r.value.icon]
+      }), l(o.Title, {
+        class: `${a}-title`,
+        level: 5
+      }, {
+        default: () => [r.value.title]
+      }), l(o.Text, {
+        class: `${a}-description`,
+        type: "secondary"
+      }, {
+        default: () => [r.value.description]
+      })]
+    }));
+    return () => l("div", {
+      class: T(a, {
+        [`${a}-drag-in`]: p.value,
+        [`${a}-disabled`]: s.value.disabled
+      }, e.className),
+      onDragenter: f,
+      onDragleave: m,
+      onDrop: g,
+      "aria-hidden": s.value.disabled,
+      style: e.style
+    }, [l(N.Dragger, C({
+      showUploadList: !1
+    }, e.upload, {
+      ref: "upload-dragger",
+      style: {
+        padding: 0,
+        border: 0,
+        background: "transparent"
+      }
+    }), {
+      default: () => [v.value]
+    })]);
+  }
+});
+export {
+  E as default
+};

package/es/attachments/SilentUploader.mjs

@@ -0,0 +1,27 @@
+import { defineComponent as a, useTemplateRef as t, createVNode as n, mergeProps as r } from "vue";
+import { Upload as p } from "ant-design-vue";
+const u = /* @__PURE__ */ a({
+  name: "AXAttachmentsSilentUploader",
+  __name: "SilentUploader",
+  props: {
+    children: null,
+    upload: null,
+    rootClassName: null
+  },
+  setup(e, {
+    expose: l
+  }) {
+    const o = t("upload");
+    return l({
+      nativeElement: o
+    }), () => n(p, r(e.upload, {
+      showUploadList: !1,
+      ref: "upload"
+    }), {
+      default: () => [e.children]
+    });
+  }
+});
+export {
+  u as default
+};

package/es/attachments/context.mjs

@@ -0,0 +1,32 @@
+import { shallowRef as c, defineComponent as m, computed as o, provide as u, watch as i, unref as p, triggerRef as d, inject as f } from "vue";
+import { objectType as h } from "../_util/type.mjs";
+const a = Symbol("AttachmentContext"), n = c(), A = (t) => {
+  u(a, t), i(
+    t,
+    () => {
+      n.value = p(t), d(n);
+    },
+    { immediate: !0, deep: !0 }
+  );
+}, l = () => f(
+  a,
+  o(() => n.value || {})
+), s = m({
+  inheritAttrs: !1,
+  props: {
+    value: h()
+  },
+  setup(t, { slots: e }) {
+    return A(o(() => t.value)), () => {
+      var r;
+      return (r = e.default) == null ? void 0 : r.call(e);
+    };
+  }
+});
+export {
+  s as AttachmentContextProvider,
+  s as default,
+  n as globalAttachmentContextApi,
+  l as useAttachmentContextInject,
+  A as useAttachmentContextProvider
+};

package/es/attachments/index.mjs

@@ -0,0 +1,12 @@
+import { _ as t } from "./Attachments2.mjs";
+import "vue";
+import "ant-design-vue";
+import "./context.mjs";
+import m from "./FileList/FileListCard.mjs";
+const p = Object.assign(t, {
+  FileCard: m
+});
+export {
+  p as Attachments,
+  p as default
+};

package/es/attachments/interface.mjs

@@ -0,0 +1 @@
+

package/es/attachments/style/fileCard.mjs

@@ -0,0 +1,157 @@
+const o = (i) => {
+  const { componentCls: d, antCls: t, calc: r } = i, e = `${d}-list-card`, a = r(i.fontSize).mul(i.lineHeight).mul(2).add(i.paddingSM).add(i.paddingSM).equal();
+  return {
+    [e]: {
+      borderRadius: i.borderRadius,
+      position: "relative",
+      background: i.colorFillContent,
+      borderWidth: i.lineWidth,
+      borderStyle: "solid",
+      borderColor: "transparent",
+      flex: "none",
+      // =============================== Desc ================================
+      [`${e}-name,${e}-desc`]: {
+        display: "flex",
+        flexWrap: "nowrap",
+        maxWidth: "100%"
+      },
+      [`${e}-ellipsis-prefix`]: {
+        flex: "0 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      },
+      [`${e}-ellipsis-suffix`]: {
+        flex: "none"
+      },
+      // ============================= Overview ==============================
+      "&-type-overview": {
+        padding: r(i.paddingSM).sub(i.lineWidth).equal(),
+        paddingInlineStart: r(i.padding).add(i.lineWidth).equal(),
+        display: "flex",
+        flexWrap: "nowrap",
+        gap: i.paddingXS,
+        alignItems: "flex-start",
+        width: 236,
+        // Icon
+        [`${e}-icon`]: {
+          fontSize: r(i.fontSizeLG).mul(2).equal(),
+          lineHeight: 1,
+          paddingTop: r(i.paddingXXS).mul(1.5).equal(),
+          flex: "none"
+        },
+        // Content
+        [`${e}-content`]: {
+          flex: "auto",
+          minWidth: 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "stretch"
+        },
+        [`${e}-desc`]: {
+          color: i.colorTextTertiary
+        }
+      },
+      // ============================== Preview ==============================
+      "&-type-preview": {
+        width: a,
+        height: a,
+        lineHeight: 1,
+        display: "flex",
+        alignItems: "center",
+        [`&:not(${e}-status-error)`]: {
+          border: 0
+        },
+        // Img
+        [`${t}-image`]: {
+          width: "100%",
+          height: "100%",
+          borderRadius: "inherit",
+          img: {
+            height: "100%",
+            objectFit: "cover",
+            borderRadius: "inherit"
+          }
+        },
+        // Mask
+        [`${e}-img-mask`]: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          background: `rgba(0, 0, 0, ${i.opacityLoading})`,
+          borderRadius: "inherit"
+        },
+        // Error
+        [`&${e}-status-error`]: {
+          [`img, ${e}-img-mask`]: {
+            borderRadius: r(i.borderRadius).sub(i.lineWidth).equal()
+          },
+          [`${e}-desc`]: {
+            paddingInline: i.paddingXXS
+          }
+        },
+        // Progress
+        [`${e}-progress`]: {}
+      },
+      // ============================ Remove Icon ============================
+      [`${e}-remove`]: {
+        position: "absolute",
+        top: 0,
+        insetInlineEnd: 0,
+        border: 0,
+        padding: i.paddingXXS,
+        background: "transparent",
+        lineHeight: 1,
+        transform: "translate(50%, -50%)",
+        fontSize: i.fontSize,
+        cursor: "pointer",
+        opacity: i.opacityLoading,
+        display: "none",
+        "&:dir(rtl)": {
+          transform: "translate(-50%, -50%)"
+        },
+        "&:hover": {
+          opacity: 1
+        },
+        "&:active": {
+          opacity: i.opacityLoading
+        }
+      },
+      [`&:hover ${e}-remove`]: {
+        display: "block"
+      },
+      // ============================== Status ===============================
+      "&-status-error": {
+        borderColor: i.colorError,
+        [`${e}-desc`]: {
+          color: i.colorError
+        }
+      },
+      // ============================== Motion ===============================
+      "&-motion": {
+        overflow: "hidden",
+        transition: ["opacity", "width", "margin", "padding"].map((n) => `${n} ${i.motionDurationSlow}`).join(","),
+        [`${e}-remove`]: {
+          display: "none !important"
+        },
+        "&-appear-start": {
+          width: 0,
+          transition: "none"
+        },
+        "&-leave-active": {
+          opacity: 0,
+          width: 0,
+          paddingInline: 0,
+          borderInlineWidth: 0,
+          marginInlineEnd: r(i.paddingSM).mul(-1).equal()
+        }
+      }
+    }
+  };
+};
+export {
+  o as default
+};