@aplus-frontend/ui 7.10.6 → 7.11.1

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

@@ -1,18 +1,19 @@
-import { defineComponent as O, computed as f, ref as S, createElementBlock as A, openBlock as r, mergeProps as T, unref as e, renderSlot as c, createCommentVNode as N, createVNode as p, withCtx as d, createElementVNode as s, normalizeClass as i, createBlock as C, 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,39 +22,46 @@ 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: a, em: k } = K("ap-appendix"), { t: u } = Q(), I = H("ap-appendix"), t = 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"
-    ), v = f(
-      () => J(
-        t?.needName ?? h?.value?.needName,
+    ), y = g(
+      () => W(
+        t?.needName ?? _?.value?.needName,
         t?.fileList ?? []
       )
-    ), x = f(
-      () => t.getOssAccess || h.value?.getOssAccess
-    ), g = f(
-      () => !(Array.isArray(v.value) && v.value.length)
-    ), o = S([]), B = f(() => t.title || u("ap.apAppendix.appendix"));
-    async function b(n, m) {
-      if (!(o.value.findIndex((l) => l === m) > -1)) {
-        o.value = [...o.value, m];
+    ), 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 l = [n].map((L) => ({
-              objectName: L.path,
-              fileName: L.fileName
+          if (F.value?.trigger) {
+            let l = [n].map((v) => ({
+              objectName: v.path,
+              fileName: v.fileName
             }));
-            await _.value?.trigger(l);
+            await F.value?.trigger(l);
           }
         } finally {
-          o.value = o.value.filter((l) => l !== m);
+          o.value = o.value.filter((l) => l !== f);
         }
       }
     }
-    return (n, m) => (r(), A("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)]
     }, {
       ...n.$attrs
     }, {
@@ -61,33 +69,33 @@ const Y = ["onClick"], de = /* @__PURE__ */ O({
         "--ap-appendix-column": `repeat(${Number(t?.column || 2)}, 1fr)`
       }
     }), [
-      c(n.$slots, "title", {
+      d(n.$slots, "title", {
         fileList: t.fileList
       }, () => [
-        p(W, {
-          title: B.value,
+        r(Z, {
+          title: S.value,
           "help-message": t?.tooltip
         }, {
-          suffix: d(() => [
+          suffix: c(() => [
             s("div", {
-              class: i([e(a)("suffix")])
+              class: a([e(i)("suffix")])
             }, [
-              c(n.$slots, "titleSuffix", {
+              d(n.$slots, "titleSuffix", {
                 fileList: t.fileList
               }),
-              c(n.$slots, "titleDownloadAllBtn", {
+              d(n.$slots, "titleDownloadAllBtn", {
                 fileList: t.fileList
               }, () => [
-                g.value ? N("", !0) : (r(), C(X, {
+                A.value ? k("", !0) : (p(), C(ee, {
                   key: 0,
-                  class: i([e(a)("download-all")]),
-                  text: e(u)("ap.apAppendix.downloadAll"),
-                  "get-oss-access": x.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: d(() => [
-                    p(e(R))
+                  icon: c(() => [
+                    r(e(q))
                   ]),
                   _: 1
                 }, 8, ["class", "text", "get-oss-access", "file-name", "need-name"]))
@@ -97,80 +105,108 @@ const Y = ["onClick"], de = /* @__PURE__ */ O({
           _: 3
         }, 8, ["title", "help-message"])
       ]),
-      g.value ? N("", !0) : c(n.$slots, "fileArea", {
+      A.value ? k("", !0) : d(n.$slots, "fileArea", {
         key: 0,
         fileList: t.fileList
       }, () => [
         s("div", {
-          class: i({
-            [e(a)("file-area")]: !0,
-            [e(k)("file-area", "border")]: !!t.isFileAreaBorder
+          class: a({
+            [e(i)("file-area")]: !0,
+            [e(w)("file-area", "border")]: !!t.isFileAreaBorder
           })
         }, [
           s("div", {
-            class: i([e(a)("file-area-content")])
+            class: a([e(i)("file-area-content")])
           }, [
-            (r(!0), A(V, null, D(v.value, (y, l) => (r(), A("div", {
+            (p(!0), L(G, null, U(y.value, (u, l) => (p(), L("div", {
               key: l,
-              class: i({
-                [e(a)("file-area-content-item")]: !0,
-                [e(k)("file-area-content-item", "loading")]: o.value.includes(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: d(() => [
-                  s("div", {
-                    class: i({
-                      [e(a)("file-area-content-item-content")]: !0,
-                      [e(a)("file-area-content-item--loading-content")]: o.value.includes(l)
-                    }),
-                    onClick: (L) => b(y, l)
-                  }, [
+              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: i([e(a)("file-area-content-item-icon")])
+                      class: a([e(i)("file-area-content-item-content-text")]),
+                      onClick: (v) => D(u)
                     }, [
-                      o.value.includes(l) ? (r(), C(e(M), { key: 0 })) : (r(), C(e(q), { key: 1 }))
-                    ], 2),
+                      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: i([e(a)("file-area-content-item-file-name")])
+                      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(l) ? void 0 : {
-                  name: "title",
-                  fn: d(() => [
-                    P(G(e(u)("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(n.$slots, "empty", { key: 1 }, () => [
+      A.value ? d(n.$slots, "empty", { key: 1 }, () => [
         s("div", {
-          class: i([e(a)("empty")])
+          class: a([e(i)("empty")])
         }, [
           s("div", {
-            class: i([e(a)("empty-content")])
+            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)
-      ]) : N("", !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,