@vunk/form 2.14.18 → 2.14.20

package/components/upload/index.mjs

@@ -1,12 +1,13 @@
 import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
 import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
-import { uploadProps, ElProgress, ElIcon, useNamespace, useLocale, ElUpload, ElLink, ElMessageBox, genFileId } from 'element-plus';
-import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, createCommentVNode, normalizeClass, createBlock, createElementVNode, withModifiers, createVNode, withCtx, toDisplayString, normalizeStyle, shallowRef, normalizeProps, guardReactiveProps, mergeProps, createSlots, renderSlot, createTextVNode } from 'vue';
+import { uploadProps, ElProgress, ElIcon, ElButton, useNamespace, useLocale, ElUpload, ElLink, ElMessageBox, genFileId } from 'element-plus';
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, createCommentVNode, normalizeClass, createBlock, createElementVNode, withModifiers, createVNode, withCtx, toDisplayString, createTextVNode, normalizeStyle, shallowRef, normalizeProps, guardReactiveProps, mergeProps, createSlots, renderSlot } from 'vue';
 import { pickObject } from '@vunk/core/shared/utils-object';
 import { createUploadBindProps } from '@vunk/form/shared/element-plus';
 import { h as check_default, z as zoom_in_default, d as delete_default, i as close_default, j as circle_check_default, k as document_default, a as download_default } from '../index.mjs';
-import { NOOP } from '@vunk/core/shared/utils-function';
 import { RestFetch } from '@vunk/core/shared/utils-fetch';
+import { NOOP } from '@vunk/core/shared/utils-function';
+import { isCallable } from '@vunk/shared/function';
 import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
 import { useComputedReadonly } from '@vunk/form/composables';
 import progress from '@vunk/form/shared/progress-it';
@@ -18,10 +19,7 @@ const props = {
     type: String,
     default: ""
   },
-  preview: {
-    type: Boolean,
-    default: false
-  },
+  preview: null,
   beforeUpload: {
     type: Function,
     default: void 0
@@ -77,7 +75,8 @@ var _sfc_main$1 = defineComponent({
     Close: close_default,
     CircleCheck: circle_check_default,
     Document: document_default,
-    Download: download_default
+    Download: download_default,
+    ElButton
   },
   props: {
     listType: {
@@ -101,12 +100,12 @@ var _sfc_main$1 = defineComponent({
       default: void 0
     },
     preview: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: false
     }
   },
   emits: {
-    "remove": (e) => e
+    remove: (e) => e
   },
   setup(props, { emit }) {
     const nsUpload = useNamespace("upload");
@@ -133,12 +132,23 @@ var _sfc_main$1 = defineComponent({
         method: "GET"
       });
     };
+    const previewable = computed(() => {
+      if (isCallable(props.preview)) {
+        return props.preview(props.file);
+      }
+      return props.preview;
+    });
+    const handlePreview = (file = props.file) => {
+      previewable.value && props.onPreview(file);
+    };
     return {
       handleRemove,
       t,
       nsIcon,
       nsUpload,
-      handleDownload
+      handleDownload,
+      handlePreview,
+      previewable
     };
   }
 });
@@ -146,13 +156,14 @@ var _sfc_main$1 = defineComponent({
 const _hoisted_1$1 = ["src"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Document = resolveComponent("Document");
-  const _component_el_icon = resolveComponent("el-icon");
+  const _component_ElIcon = resolveComponent("ElIcon");
   const _component_Download = resolveComponent("Download");
-  const _component_el_progress = resolveComponent("el-progress");
-  const _component_circle_check = resolveComponent("circle-check");
+  const _component_ElButton = resolveComponent("ElButton");
+  const _component_ElProgress = resolveComponent("ElProgress");
+  const _component_CircleCheck = resolveComponent("CircleCheck");
   const _component_Check = resolveComponent("Check");
   const _component_Close = resolveComponent("Close");
-  const _component_zoom_in = resolveComponent("zoom-in");
+  const _component_ZoomIn = resolveComponent("ZoomIn");
   const _component_Delete = resolveComponent("Delete");
   return openBlock(), createElementBlock(
     Fragment,
@@ -168,13 +179,19 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass(_ctx.nsUpload.be("list", "item-thumbnail")),
             src: _ctx.file.url,
             alt: ""
-          }, null, 10, _hoisted_1$1)) : (openBlock(), createBlock(_component_Document, { key: 1 }))
+          }, null, 10, _hoisted_1$1)) : (openBlock(), createBlock(_component_Document, {
+            key: 1,
+            class: normalizeClass([
+              _ctx.nsUpload.be("list", "item-thumbnail"),
+              _ctx.nsIcon.m("document")
+            ])
+          }, null, 8, ["class"]))
         ],
         64
         /* STABLE_FRAGMENT */
       )) : createCommentVNode("v-if", true),
       createCommentVNode(" text "),
-      _ctx.listType !== "picture" && (_ctx.file.status === "uploading" || _ctx.listType !== "picture-card") ? (openBlock(), createElementBlock(
+      _ctx.listType !== "picture-card" || _ctx.file.status === "uploading" ? (openBlock(), createElementBlock(
         "div",
         {
           key: 1,
@@ -185,10 +202,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "a",
             {
               class: normalizeClass(_ctx.nsUpload.be("list", "item-name")),
-              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.onPreview(_ctx.file), ["prevent"]))
+              onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.handlePreview(_ctx.file), ["prevent"]))
             },
             [
-              createVNode(_component_el_icon, {
+              createVNode(_component_ElIcon, {
                 class: normalizeClass(_ctx.nsIcon.m("document"))
               }, {
                 default: withCtx(() => [
@@ -197,12 +214,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
                 /* STABLE */
               }, 8, ["class"]),
-              createVNode(_component_el_icon, {
+              createVNode(_component_ElIcon, {
                 class: normalizeClass([
                   _ctx.nsIcon.m("download"),
                   _ctx.nsIcon.m("download-primary")
                 ]),
-                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleDownload(_ctx.file))
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.handleDownload(_ctx.file), ["stop"]))
               }, {
                 default: withCtx(() => [
                   createVNode(_component_Download)
@@ -223,8 +240,47 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             2
             /* CLASS */
           ),
-          _ctx.file.status === "uploading" ? (openBlock(), createBlock(_component_el_progress, {
-            key: 0,
+          _ctx.listType === "picture" ? (openBlock(), createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: normalizeClass(_ctx.nsUpload.be("list", "item-file-actions"))
+            },
+            [
+              createCommentVNode(" \u9884\u89C8 "),
+              createVNode(_component_ElButton, {
+                disabled: !_ctx.previewable,
+                plain: "",
+                size: "small",
+                round: "",
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handlePreview(_ctx.file))
+              }, {
+                default: withCtx(() => _cache[8] || (_cache[8] = [
+                  createTextVNode(" \u9884\u89C8 ")
+                ])),
+                _: 1,
+                __: [8]
+              }, 8, ["disabled"]),
+              createCommentVNode(" \u4E0B\u8F7D "),
+              createVNode(_component_ElButton, {
+                plain: "",
+                size: "small",
+                round: "",
+                type: "primary",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleDownload(_ctx.file))
+              }, {
+                default: withCtx(() => _cache[9] || (_cache[9] = [
+                  createTextVNode(" \u4E0B\u8F7D ")
+                ])),
+                _: 1,
+                __: [9]
+              })
+            ],
+            2
+            /* CLASS */
+          )) : createCommentVNode("v-if", true),
+          _ctx.file.status === "uploading" ? (openBlock(), createBlock(_component_ElProgress, {
+            key: 1,
             type: _ctx.listType === "picture-card" ? "circle" : "line",
             "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
             percentage: Number(_ctx.file.percentage),
@@ -234,13 +290,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         2
         /* CLASS */
       )) : createCommentVNode("v-if", true),
+      createCommentVNode(" label "),
       createElementVNode(
         "label",
         {
           class: normalizeClass(_ctx.nsUpload.be("list", "item-status-label"))
         },
         [
-          _ctx.listType === "text" ? (openBlock(), createBlock(_component_el_icon, {
+          _ctx.listType === "text" ? (openBlock(), createBlock(_component_ElIcon, {
             key: 0,
             class: normalizeClass([
               _ctx.nsIcon.m("upload-success"),
@@ -248,11 +305,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           }, {
             default: withCtx(() => [
-              createVNode(_component_circle_check)
+              createVNode(_component_CircleCheck)
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(_component_el_icon, {
+          }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(_component_ElIcon, {
             key: 1,
             class: normalizeClass([_ctx.nsIcon.m("upload-success"), _ctx.nsIcon.m("check")])
           }, {
@@ -266,10 +323,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         2
         /* CLASS */
       ),
-      !_ctx.disabled ? (openBlock(), createBlock(_component_el_icon, {
+      !_ctx.disabled ? (openBlock(), createBlock(_component_ElIcon, {
         key: 2,
         class: normalizeClass(_ctx.nsIcon.m("close")),
-        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handleRemove(_ctx.file))
+        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleRemove(_ctx.file))
       }, {
         default: withCtx(() => [
           createVNode(_component_Close)
@@ -277,7 +334,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
         /* STABLE */
       }, 8, ["class"])) : createCommentVNode("v-if", true),
-      createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
+      createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn "),
       createCommentVNode(" This is a bug which needs to be fixed "),
       createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
       createCommentVNode(` <i v-if="!disabled" :class="nsIcon.m('close-tip')">{{
@@ -291,19 +348,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           class: normalizeClass(_ctx.nsUpload.be("list", "item-actions"))
         },
         [
-          _ctx.preview ? (openBlock(), createElementBlock(
+          createCommentVNode(" \u9884\u89C8 "),
+          _ctx.previewable ? (openBlock(), createElementBlock(
             "span",
             {
               key: 0,
               class: normalizeClass(_ctx.nsUpload.be("list", "item-preview")),
-              onClick: _cache[3] || (_cache[3] = ($event) => _ctx.onPreview(_ctx.file))
+              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handlePreview(_ctx.file))
             },
             [
-              createVNode(_component_el_icon, {
+              createVNode(_component_ElIcon, {
                 class: normalizeClass(_ctx.nsIcon.m("zoom-in"))
               }, {
                 default: withCtx(() => [
-                  createVNode(_component_zoom_in)
+                  createVNode(_component_ZoomIn)
                 ]),
                 _: 1
                 /* STABLE */
@@ -317,10 +375,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "span",
             {
               class: normalizeClass(_ctx.nsUpload.be("list", "item-download")),
-              onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleDownload(_ctx.file))
+              onClick: _cache[6] || (_cache[6] = ($event) => _ctx.handleDownload(_ctx.file))
             },
             [
-              createVNode(_component_el_icon, {
+              createVNode(_component_ElIcon, {
                 class: normalizeClass(_ctx.nsIcon.m("download"))
               }, {
                 default: withCtx(() => [
@@ -338,10 +396,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             {
               key: 1,
               class: normalizeClass(_ctx.nsUpload.be("list", "item-delete")),
-              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleRemove(_ctx.file))
+              onClick: _cache[7] || (_cache[7] = ($event) => _ctx.handleRemove(_ctx.file))
             },
             [
-              createVNode(_component_el_icon, {
+              createVNode(_component_ElIcon, {
                 class: normalizeClass(_ctx.nsIcon.m("delete"))
               }, {
                 default: withCtx(() => [

package/components/upload/src/ctx.d.ts

@@ -7,10 +7,7 @@ export declare const props: {
         type: StringConstructor;
         default: string;
     };
-    preview: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    preview: any;
     beforeUpload: {
         type: FunctionConstructor;
         default: any;