@aplus-frontend/ui 7.10.5 → 7.11.0

package/es/src/business/ap-appendix/ap-appendix.vue2.mjs

@@ -1,18 +1,19 @@
-import { defineComponent as O, computed as d, ref as S, createElementBlock as L, openBlock as r, mergeProps as T, unref as e, renderSlot as c, createCommentVNode as C, createVNode as p, withCtx as u, createElementVNode as n, normalizeClass as i, createBlock as N, Fragment as V, renderList as D, createSlots as j, createTextVNode as P, toDisplayString as G } from "vue";
-import { LoadingOutlined as M } from "@ant-design/icons-vue";
-import { Tooltip as U, TypographyText as z, Empty as $ } from "@aplus-frontend/antdv";
-import { IconVariantDownload as R, IconApAdLineCloseAttachments as q } from "@aplus-frontend/icon";
+import { defineComponent as V, computed as g, ref as j, createElementBlock as L, openBlock as p, mergeProps as M, unref as e, renderSlot as d, createCommentVNode as k, createVNode as r, withCtx as c, createElementVNode as s, normalizeClass as a, createBlock as C, Fragment as G, renderList as U, createSlots as x, createTextVNode as N, toDisplayString as h } from "vue";
+import { LoadingOutlined as z } from "@ant-design/icons-vue";
+import { Tooltip as $, TypographyText as R, Empty as I } from "@aplus-frontend/antdv";
+import { IconVariantDownload as q, IconApAdLineCloseAttachments as H, IconApAdLineDownload as J } from "@aplus-frontend/icon";
 import "../../config-provider/index.mjs";
 import "../ap-download/ap-download.vue2.mjs";
+import { ApFilePreview as K } from "../ap-file-preview/index.mjs";
 import "../ap-title/ApTitle.vue.mjs";
-import H from "./style/index.mjs";
-import { getFileInfo as J } from "./utils/index.mjs";
-import { useNamespace as K } from "../../config-provider/hooks/use-namespace.mjs";
-import { useLocale as Q } from "../../config-provider/hooks/use-locale.mjs";
-import { useGlobalConfig as w } from "../../config-provider/hooks/use-global-config.mjs";
-import W from "../ap-title/ApTitle.vue2.mjs";
-import X from "../ap-download/ap-download.vue.mjs";
-const Y = ["onClick"], de = /* @__PURE__ */ O({
+import Q from "./style/index.mjs";
+import { getFileInfo as W } from "./utils/index.mjs";
+import { useNamespace as X } from "../../config-provider/hooks/use-namespace.mjs";
+import { useLocale as Y } from "../../config-provider/hooks/use-locale.mjs";
+import { useGlobalConfig as E } from "../../config-provider/hooks/use-global-config.mjs";
+import Z from "../ap-title/ApTitle.vue2.mjs";
+import ee from "../ap-download/ap-download.vue.mjs";
+const te = ["onClick"], ie = ["onClick"], Ae = /* @__PURE__ */ V({
   __name: "ap-appendix",
   props: {
     fileList: {},
@@ -21,155 +22,191 @@ const Y = ["onClick"], de = /* @__PURE__ */ O({
     title: {},
     tooltip: {},
     column: { default: 2 },
-    isFileAreaBorder: { type: Boolean, default: !1 }
+    isFileAreaBorder: { type: Boolean, default: !1 },
+    emptyText: {}
   },
-  setup(E) {
-    const { b: F, e: l, em: k } = K("ap-appendix"), { t: v } = Q(), I = H("ap-appendix"), a = E, h = w("apUpload"), _ = w(
+  setup(T) {
+    const { b: B, e: i, em: w } = X("ap-appendix"), { t: m } = Y(), b = Q("ap-appendix"), t = T, _ = E("apUpload"), F = E(
       "downloadCenterTriggerConfig"
-    ), m = d(
-      () => J(
-        a?.needName ?? h?.value?.needName,
-        a?.fileList ?? []
+    ), y = g(
+      () => W(
+        t?.needName ?? _?.value?.needName,
+        t?.fileList ?? []
       )
-    ), x = d(
-      () => a.getOssAccess || h.value?.getOssAccess
-    ), g = d(
-      () => !(Array.isArray(m.value) && m.value.length)
-    ), o = S([]), B = d(() => a.title || v("ap.apAppendix.appendix"));
-    async function b(s, f) {
-      if (!(o.value.findIndex((t) => t === f) > -1)) {
+    ), O = g(
+      () => t.getOssAccess || _.value?.getOssAccess
+    ), A = g(
+      () => !(Array.isArray(y.value) && y.value.length)
+    ), o = j([]), S = g(() => t.title || m("ap.apAppendix.appendix"));
+    async function P(n, f) {
+      if (!(o.value.findIndex((l) => l === f) > -1)) {
         o.value = [...o.value, f];
         try {
-          if (_.value?.trigger) {
-            let t = [s].map((A) => ({
-              objectName: A.path,
-              fileName: A.fileName
+          if (F.value?.trigger) {
+            let l = [n].map((v) => ({
+              objectName: v.path,
+              fileName: v.fileName
             }));
-            await _.value?.trigger(t);
+            await F.value?.trigger(l);
           }
         } finally {
-          o.value = o.value.filter((t) => t !== f);
+          o.value = o.value.filter((l) => l !== f);
         }
       }
     }
-    return (s, f) => (r(), L("div", T({
-      class: [e(F)(), e(I)]
+    async function D(n) {
+      K.createFilePreviewModal({
+        src: n.path,
+        fileName: n.fileName
+      });
+    }
+    return (n, f) => (p(), L("div", M({
+      class: [e(B)(), e(b)]
     }, {
-      ...s.$attrs
+      ...n.$attrs
     }, {
       style: {
-        "--ap-appendix-column": `repeat(${Number(a?.column || 2)}, 1fr)`
+        "--ap-appendix-column": `repeat(${Number(t?.column || 2)}, 1fr)`
       }
     }), [
-      c(s.$slots, "title", {
-        fileList: a.fileList
+      d(n.$slots, "title", {
+        fileList: t.fileList
       }, () => [
-        p(W, {
-          title: B.value,
-          "help-message": a?.tooltip
+        r(Z, {
+          title: S.value,
+          "help-message": t?.tooltip
         }, {
-          suffix: u(() => [
-            n("div", {
-              class: i([e(l)("suffix")])
+          suffix: c(() => [
+            s("div", {
+              class: a([e(i)("suffix")])
             }, [
-              c(s.$slots, "titleSuffix", {
-                fileList: a.fileList
+              d(n.$slots, "titleSuffix", {
+                fileList: t.fileList
               }),
-              c(s.$slots, "titleDownloadAllBtn", {
-                fileList: a.fileList
+              d(n.$slots, "titleDownloadAllBtn", {
+                fileList: t.fileList
               }, () => [
-                g.value ? C("", !0) : (r(), N(X, {
+                A.value ? k("", !0) : (p(), C(ee, {
                   key: 0,
-                  class: i([e(l)("download-all")]),
-                  text: e(v)("ap.apAppendix.downloadAll"),
-                  "get-oss-access": x.value,
-                  "file-name": m.value
+                  class: a([e(i)("download-all")]),
+                  text: e(m)("ap.apAppendix.downloadAll"),
+                  "get-oss-access": O.value,
+                  "file-name": t?.fileList ?? [],
+                  "need-name": t.needName
                 }, {
-                  icon: u(() => [
-                    p(e(R))
+                  icon: c(() => [
+                    r(e(q))
                   ]),
                   _: 1
-                }, 8, ["class", "text", "get-oss-access", "file-name"]))
+                }, 8, ["class", "text", "get-oss-access", "file-name", "need-name"]))
               ])
             ], 2)
           ]),
           _: 3
         }, 8, ["title", "help-message"])
       ]),
-      g.value ? C("", !0) : c(s.$slots, "fileArea", {
+      A.value ? k("", !0) : d(n.$slots, "fileArea", {
         key: 0,
-        fileList: a.fileList
+        fileList: t.fileList
       }, () => [
-        n("div", {
-          class: i({
-            [e(l)("file-area")]: !0,
-            [e(k)("file-area", "border")]: !!a.isFileAreaBorder
+        s("div", {
+          class: a({
+            [e(i)("file-area")]: !0,
+            [e(w)("file-area", "border")]: !!t.isFileAreaBorder
           })
         }, [
-          n("div", {
-            class: i([e(l)("file-area-content")])
+          s("div", {
+            class: a([e(i)("file-area-content")])
           }, [
-            (r(!0), L(V, null, D(m.value, (y, t) => (r(), L("div", {
-              key: t,
-              class: i({
-                [e(l)("file-area-content-item")]: !0,
-                [e(k)("file-area-content-item", "loading")]: o.value.includes(t)
+            (p(!0), L(G, null, U(y.value, (u, l) => (p(), L("div", {
+              key: l,
+              class: a({
+                [e(i)("file-area-content-item")]: !0,
+                [e(w)("file-area-content-item", "loading")]: o.value.includes(l)
               })
             }, [
-              p(e(U), null, j({
-                default: u(() => [
-                  n("div", {
-                    class: i({
-                      [e(l)("file-area-content-item-content")]: !0,
-                      [e(l)("file-area-content-item--loading-content")]: o.value.includes(t)
-                    }),
-                    onClick: (A) => b(y, t)
-                  }, [
-                    n("div", {
-                      class: i([e(l)("file-area-content-item-icon")])
+              s("div", {
+                class: a({
+                  [e(i)("file-area-content-item-content")]: !0,
+                  [e(i)("file-area-content-item--loading-content")]: o.value.includes(l)
+                })
+              }, [
+                r(e($), null, x({
+                  default: c(() => [
+                    s("div", {
+                      class: a([e(i)("file-area-content-item-content-text")]),
+                      onClick: (v) => D(u)
                     }, [
-                      o.value.includes(t) ? (r(), N(e(M), { key: 0 })) : (r(), N(e(q), { key: 1 }))
-                    ], 2),
-                    n("div", {
-                      class: i([e(l)("file-area-content-item-file-name")])
+                      s("div", {
+                        class: a([e(i)("file-area-content-item-icon")])
+                      }, [
+                        o.value.includes(l) ? (p(), C(e(z), { key: 0 })) : (p(), C(e(H), { key: 1 }))
+                      ], 2),
+                      s("div", {
+                        class: a([e(i)("file-area-content-item-file-name")])
+                      }, [
+                        r(e(R), {
+                          ellipsis: "",
+                          content: u.fileName
+                        }, null, 8, ["content"])
+                      ], 2)
+                    ], 10, te)
+                  ]),
+                  _: 2
+                }, [
+                  o.value.includes(l) ? void 0 : {
+                    name: "title",
+                    fn: c(() => [
+                      N(h(e(m)("ap.apAppendix.previewFile")), 1)
+                    ]),
+                    key: "0"
+                  }
+                ]), 1024),
+                r(e($), null, x({
+                  default: c(() => [
+                    s("div", {
+                      class: a([e(i)("file-area-content-item-icon-preview")]),
+                      onClick: (v) => P(u, l)
                     }, [
-                      p(e(z), {
-                        ellipsis: "",
-                        content: y.fileName
-                      }, null, 8, ["content"])
-                    ], 2)
-                  ], 10, Y)
-                ]),
-                _: 2
-              }, [
-                o.value.includes(t) ? void 0 : {
-                  name: "title",
-                  fn: u(() => [
-                    P(G(e(v)("ap.apAppendix.downloadFile")), 1)
+                      r(e(J))
+                    ], 10, ie)
                   ]),
-                  key: "0"
-                }
-              ]), 1024)
+                  _: 2
+                }, [
+                  o.value.includes(l) ? void 0 : {
+                    name: "title",
+                    fn: c(() => [
+                      N(h(e(m)("ap.apAppendix.downloadFile")), 1)
+                    ]),
+                    key: "0"
+                  }
+                ]), 1024)
+              ], 2)
             ], 2))), 128))
           ], 2)
         ], 2)
       ]),
-      g.value ? c(s.$slots, "empty", { key: 1 }, () => [
-        n("div", {
-          class: i([e(l)("empty")])
+      A.value ? d(n.$slots, "empty", { key: 1 }, () => [
+        s("div", {
+          class: a([e(i)("empty")])
         }, [
-          n("div", {
-            class: i([e(l)("empty-content")])
+          s("div", {
+            class: a([e(i)("empty-content")])
           }, [
-            p(e($), {
-              image: e($).PRESENTED_IMAGE_SIMPLE
-            }, null, 8, ["image"])
+            r(e(I), {
+              image: e(I).PRESENTED_IMAGE_SIMPLE
+            }, {
+              description: c(() => [
+                N(h(t.emptyText || e(m)("ap.apAppendix.empty")), 1)
+              ]),
+              _: 1
+            }, 8, ["image"])
           ], 2)
         ], 2)
-      ]) : C("", !0)
+      ]) : k("", !0)
     ], 16));
   }
 });
 export {
-  de as default
+  Ae as default
 };

package/es/src/business/ap-appendix/interface.d.ts

@@ -48,6 +48,10 @@ export interface ApAppendixProps<FileType = any> {
      * 文件区域是否带边框
      */
     isFileAreaBorder?: boolean;
+    /**
+     * 空状态自定义文字
+     */
+    emptyText?: string;
 }
 export interface ApAppendixSlots<FileType = any> {
     fileArea: (props: ApAppendixBaseSlotProps<FileType>) => any;

package/es/src/business/ap-appendix/style/index.mjs

@@ -1,45 +1,72 @@
-import { genComponentStyleHook as t } from "../../../utils/cssinjs/index.mjs";
-import { defaultToken as i } from "./token.mjs";
-const r = (o) => {
-  const { componentCls: e } = o;
+import { genComponentStyleHook as i } from "../../../utils/cssinjs/index.mjs";
+import { defaultToken as t } from "./token.mjs";
+const r = (e) => {
+  const { componentCls: o } = e;
   return {
-    [e]: {
-      [`${e}__suffix`]: {
+    [o]: {
+      [`${o}__suffix`]: {
         width: "100%",
         display: "flex",
         alignItems: "center"
       },
-      [`${e}__download-all`]: {
+      [`${o}__download-all`]: {
         marginLeft: "auto",
         padding: 0,
         height: "min-content"
       },
-      [`${e}__file-area`]: {
-        marginBlockStart: o.spaceLG,
+      [`${o}__file-area`]: {
+        marginBlockStart: e.spaceLG,
         "&--border": {
-          border: `${o.lineWidth} dashed ${o.borderColorBase}`,
-          padding: o.spaceLG,
-          borderRadius: o.borderRadius
+          border: `${e.lineWidth} dashed ${e.borderColorBase}`,
+          padding: e.spaceLG,
+          borderRadius: e.borderRadius
         },
         "&-content": {
           display: "grid",
-          rowGap: o.spaceXL,
-          columnGap: o.calc(o.spaceXL).mul(5).equal(),
-          gridTemplateColumns: o.apAppendixColumn,
+          rowGap: e.spaceLG,
+          columnGap: e.calc(e.spaceXL).mul(5).equal(),
+          gridTemplateColumns: e.apAppendixColumn,
           "&-item": {
             overflow: "hidden",
             userSelect: "none",
+            "&:hover": {
+              [`${o}__file-area-content-item-icon-preview`]: {
+                display: "flex"
+              }
+            },
             "&-content": {
               display: "flex",
               alignItems: "center",
               width: "max-content",
               cursor: "pointer",
-              maxWidth: "100%"
+              maxWidth: "100%",
+              "&-text": {
+                display: "flex",
+                alignItems: "center",
+                width: "max-content",
+                cursor: "pointer",
+                maxWidth: "100%",
+                minWidth: 0,
+                overflow: "hidden",
+                "&:hover": {
+                  ".ant-typography": {
+                    color: e.colorLink
+                  }
+                }
+              }
+            },
+            "&-icon-preview": {
+              marginLeft: e.space,
+              fontSize: e.fontSizeXL,
+              color: e.colorLink,
+              display: "none",
+              alignItems: "center",
+              flexShrink: 0
             },
             "&-icon": {
-              marginRight: o.space,
-              fontSize: o.fontSizeXL,
-              color: o.textColor4
+              marginRight: e.space,
+              fontSize: e.fontSizeXL,
+              color: e.textColor4
             },
             "&-file-name": {
               minWidth: 0,
@@ -48,15 +75,10 @@ const r = (o) => {
               display: "flex",
               alignItems: "center",
               ".ant-typography": {
-                fontSize: o.fontSize,
-                lineHeight: o.lineHeight,
-                color: o.textColor1,
-                transition: `color ${o.motionDurationMid}`
-              }
-            },
-            "&-content:hover": {
-              ".ant-typography": {
-                color: o.colorLink
+                fontSize: e.fontSize,
+                lineHeight: e.lineHeight,
+                color: e.textColor1,
+                transition: `color ${e.motionDurationMid}`
               }
             },
             "&--loading": {
@@ -64,18 +86,18 @@ const r = (o) => {
                 cursor: "not-allowed"
               },
               ".ant-typography": {
-                color: o.textColor4
+                color: e.textColor4
               },
               "&-content:hover": {
                 ".ant-typography": {
-                  color: o.textColor4
+                  color: e.textColor4
                 }
               }
             }
           }
         }
       },
-      [`${e}__empty`]: {
+      [`${o}__empty`]: {
         ".ant-empty": {
           margin: 0,
           "&-description": {
@@ -85,10 +107,10 @@ const r = (o) => {
       }
     }
   };
-}, l = t(
+}, l = i(
   "ApAppendix",
-  (o) => [r(o)],
-  i
+  (e) => [r(e)],
+  t
 );
 export {
   l as default,