@vunk/form 2.14.18 → 2.14.20

package/components/tables-select/src/index.vue.d.ts

@@ -4919,6 +4919,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } & {
                 readonly default: true;
             };
+            readonly modalPenetrable: BooleanConstructor;
             readonly openDelay: {
                 readonly type: import("vue").PropType<number>;
                 readonly required: false;
@@ -4967,16 +4968,45 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } & {
                 readonly default: "2";
             };
+            readonly transition: {
+                readonly type: import("vue").PropType<unknown>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly center: BooleanConstructor;
-            readonly alignCenter: BooleanConstructor;
+            readonly alignCenter: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly closeIcon: {
                 readonly type: import("vue").PropType<unknown>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
-            readonly draggable: BooleanConstructor;
-            readonly overflow: BooleanConstructor;
+            readonly draggable: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
+            readonly overflow: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly fullscreen: BooleanConstructor;
             readonly showClose: {
                 readonly type: import("vue").PropType<boolean>;
@@ -5027,12 +5057,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             readonly title: string;
             readonly center: boolean;
             readonly overflow: boolean;
+            readonly transition: unknown;
             readonly modelValue: boolean;
             readonly ariaLevel: string;
             readonly appendTo: string | HTMLElement;
-            readonly showClose: boolean;
             readonly alignCenter: boolean;
             readonly draggable: boolean;
+            readonly showClose: boolean;
             readonly fullscreen: boolean;
             readonly closeOnClickModal: boolean;
             readonly closeOnPressEscape: boolean;
@@ -5043,6 +5074,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             readonly headerAriaLevel: string;
             readonly appendToBody: boolean;
             readonly destroyOnClose: boolean;
+            readonly modalPenetrable: boolean;
             readonly trapFocus: boolean;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
@@ -5100,6 +5132,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } & {
                 readonly default: true;
             };
+            readonly modalPenetrable: BooleanConstructor;
             readonly openDelay: {
                 readonly type: import("vue").PropType<number>;
                 readonly required: false;
@@ -5148,16 +5181,45 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             } & {
                 readonly default: "2";
             };
+            readonly transition: {
+                readonly type: import("vue").PropType<unknown>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly center: BooleanConstructor;
-            readonly alignCenter: BooleanConstructor;
+            readonly alignCenter: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly closeIcon: {
                 readonly type: import("vue").PropType<unknown>;
                 readonly required: false;
                 readonly validator: ((val: unknown) => boolean) | undefined;
                 __epPropKey: true;
             };
-            readonly draggable: BooleanConstructor;
-            readonly overflow: BooleanConstructor;
+            readonly draggable: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
+            readonly overflow: {
+                readonly type: import("vue").PropType<boolean>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            } & {
+                readonly default: undefined;
+            };
             readonly fullscreen: BooleanConstructor;
             readonly showClose: {
                 readonly type: import("vue").PropType<boolean>;
@@ -5200,12 +5262,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             readonly title: string;
             readonly center: boolean;
             readonly overflow: boolean;
+            readonly transition: unknown;
             readonly modelValue: boolean;
             readonly ariaLevel: string;
             readonly appendTo: string | HTMLElement;
-            readonly showClose: boolean;
             readonly alignCenter: boolean;
             readonly draggable: boolean;
+            readonly showClose: boolean;
             readonly fullscreen: boolean;
             readonly closeOnClickModal: boolean;
             readonly closeOnPressEscape: boolean;
@@ -5216,6 +5279,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             readonly headerAriaLevel: string;
             readonly appendToBody: boolean;
             readonly destroyOnClose: boolean;
+            readonly modalPenetrable: boolean;
             readonly trapFocus: boolean;
         }>;
         __isFragment?: never;
@@ -5270,6 +5334,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             readonly default: true;
         };
+        readonly modalPenetrable: BooleanConstructor;
         readonly openDelay: {
             readonly type: import("vue").PropType<number>;
             readonly required: false;
@@ -5318,16 +5383,45 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             readonly default: "2";
         };
+        readonly transition: {
+            readonly type: import("vue").PropType<unknown>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: undefined;
+        };
         readonly center: BooleanConstructor;
-        readonly alignCenter: BooleanConstructor;
+        readonly alignCenter: {
+            readonly type: import("vue").PropType<boolean>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: undefined;
+        };
         readonly closeIcon: {
             readonly type: import("vue").PropType<unknown>;
             readonly required: false;
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly draggable: BooleanConstructor;
-        readonly overflow: BooleanConstructor;
+        readonly draggable: {
+            readonly type: import("vue").PropType<boolean>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: undefined;
+        };
+        readonly overflow: {
+            readonly type: import("vue").PropType<boolean>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        } & {
+            readonly default: undefined;
+        };
         readonly fullscreen: BooleanConstructor;
         readonly showClose: {
             readonly type: import("vue").PropType<boolean>;
@@ -5378,12 +5472,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly title: string;
         readonly center: boolean;
         readonly overflow: boolean;
+        readonly transition: unknown;
         readonly modelValue: boolean;
         readonly ariaLevel: string;
         readonly appendTo: string | HTMLElement;
-        readonly showClose: boolean;
         readonly alignCenter: boolean;
         readonly draggable: boolean;
+        readonly showClose: boolean;
         readonly fullscreen: boolean;
         readonly closeOnClickModal: boolean;
         readonly closeOnPressEscape: boolean;
@@ -5394,6 +5489,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly headerAriaLevel: string;
         readonly appendToBody: boolean;
         readonly destroyOnClose: boolean;
+        readonly modalPenetrable: boolean;
         readonly trapFocus: boolean;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {

package/components/upload/index.cjs

@@ -9,8 +9,9 @@ var vue = require('vue');
 var utilsObject = require('@vunk/core/shared/utils-object');
 var elementPlus$1 = require('@vunk/form/shared/element-plus');
 var index = require('../index.cjs');
-var utilsFunction = require('@vunk/core/shared/utils-function');
 var utilsFetch = require('@vunk/core/shared/utils-fetch');
+var utilsFunction = require('@vunk/core/shared/utils-function');
+var _function = require('@vunk/shared/function');
 var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
 var composables = require('@vunk/form/composables');
 var progress = require('@vunk/form/shared/progress-it');
@@ -22,10 +23,7 @@ const props = {
     type: String,
     default: ""
   },
-  preview: {
-    type: Boolean,
-    default: false
-  },
+  preview: null,
   beforeUpload: {
     type: Function,
     default: void 0
@@ -81,7 +79,8 @@ var _sfc_main$1 = vue.defineComponent({
     Close: index.close_default,
     CircleCheck: index.circle_check_default,
     Document: index.document_default,
-    Download: index.download_default
+    Download: index.download_default,
+    ElButton: elementPlus.ElButton
   },
   props: {
     listType: {
@@ -105,12 +104,12 @@ var _sfc_main$1 = vue.defineComponent({
       default: void 0
     },
     preview: {
-      type: Boolean,
+      type: [Boolean, Function],
       default: false
     }
   },
   emits: {
-    "remove": (e) => e
+    remove: (e) => e
   },
   setup(props, { emit }) {
     const nsUpload = elementPlus.useNamespace("upload");
@@ -137,12 +136,23 @@ var _sfc_main$1 = vue.defineComponent({
         method: "GET"
       });
     };
+    const previewable = vue.computed(() => {
+      if (_function.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
     };
   }
 });
@@ -150,13 +160,14 @@ var _sfc_main$1 = vue.defineComponent({
 const _hoisted_1$1 = ["src"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Document = vue.resolveComponent("Document");
-  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
   const _component_Download = vue.resolveComponent("Download");
-  const _component_el_progress = vue.resolveComponent("el-progress");
-  const _component_circle_check = vue.resolveComponent("circle-check");
+  const _component_ElButton = vue.resolveComponent("ElButton");
+  const _component_ElProgress = vue.resolveComponent("ElProgress");
+  const _component_CircleCheck = vue.resolveComponent("CircleCheck");
   const _component_Check = vue.resolveComponent("Check");
   const _component_Close = vue.resolveComponent("Close");
-  const _component_zoom_in = vue.resolveComponent("zoom-in");
+  const _component_ZoomIn = vue.resolveComponent("ZoomIn");
   const _component_Delete = vue.resolveComponent("Delete");
   return vue.openBlock(), vue.createElementBlock(
     vue.Fragment,
@@ -172,13 +183,19 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-thumbnail")),
             src: _ctx.file.url,
             alt: ""
-          }, null, 10, _hoisted_1$1)) : (vue.openBlock(), vue.createBlock(_component_Document, { key: 1 }))
+          }, null, 10, _hoisted_1$1)) : (vue.openBlock(), vue.createBlock(_component_Document, {
+            key: 1,
+            class: vue.normalizeClass([
+              _ctx.nsUpload.be("list", "item-thumbnail"),
+              _ctx.nsIcon.m("document")
+            ])
+          }, null, 8, ["class"]))
         ],
         64
         /* STABLE_FRAGMENT */
       )) : vue.createCommentVNode("v-if", true),
       vue.createCommentVNode(" text "),
-      _ctx.listType !== "picture" && (_ctx.file.status === "uploading" || _ctx.listType !== "picture-card") ? (vue.openBlock(), vue.createElementBlock(
+      _ctx.listType !== "picture-card" || _ctx.file.status === "uploading" ? (vue.openBlock(), vue.createElementBlock(
         "div",
         {
           key: 1,
@@ -189,10 +206,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "a",
             {
               class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-name")),
-              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.onPreview(_ctx.file), ["prevent"]))
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.handlePreview(_ctx.file), ["prevent"]))
             },
             [
-              vue.createVNode(_component_el_icon, {
+              vue.createVNode(_component_ElIcon, {
                 class: vue.normalizeClass(_ctx.nsIcon.m("document"))
               }, {
                 default: vue.withCtx(() => [
@@ -201,12 +218,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
                 /* STABLE */
               }, 8, ["class"]),
-              vue.createVNode(_component_el_icon, {
+              vue.createVNode(_component_ElIcon, {
                 class: vue.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] = vue.withModifiers(($event) => _ctx.handleDownload(_ctx.file), ["stop"]))
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_Download)
@@ -227,8 +244,47 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             2
             /* CLASS */
           ),
-          _ctx.file.status === "uploading" ? (vue.openBlock(), vue.createBlock(_component_el_progress, {
-            key: 0,
+          _ctx.listType === "picture" ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-file-actions"))
+            },
+            [
+              vue.createCommentVNode(" \u9884\u89C8 "),
+              vue.createVNode(_component_ElButton, {
+                disabled: !_ctx.previewable,
+                plain: "",
+                size: "small",
+                round: "",
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handlePreview(_ctx.file))
+              }, {
+                default: vue.withCtx(() => _cache[8] || (_cache[8] = [
+                  vue.createTextVNode(" \u9884\u89C8 ")
+                ])),
+                _: 1,
+                __: [8]
+              }, 8, ["disabled"]),
+              vue.createCommentVNode(" \u4E0B\u8F7D "),
+              vue.createVNode(_component_ElButton, {
+                plain: "",
+                size: "small",
+                round: "",
+                type: "primary",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleDownload(_ctx.file))
+              }, {
+                default: vue.withCtx(() => _cache[9] || (_cache[9] = [
+                  vue.createTextVNode(" \u4E0B\u8F7D ")
+                ])),
+                _: 1,
+                __: [9]
+              })
+            ],
+            2
+            /* CLASS */
+          )) : vue.createCommentVNode("v-if", true),
+          _ctx.file.status === "uploading" ? (vue.openBlock(), vue.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),
@@ -238,13 +294,14 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         2
         /* CLASS */
       )) : vue.createCommentVNode("v-if", true),
+      vue.createCommentVNode(" label "),
       vue.createElementVNode(
         "label",
         {
           class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-status-label"))
         },
         [
-          _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
             key: 0,
             class: vue.normalizeClass([
               _ctx.nsIcon.m("upload-success"),
@@ -252,11 +309,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           }, {
             default: vue.withCtx(() => [
-              vue.createVNode(_component_circle_check)
+              vue.createVNode(_component_CircleCheck)
             ]),
             _: 1
             /* STABLE */
-          }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+          }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
             key: 1,
             class: vue.normalizeClass([_ctx.nsIcon.m("upload-success"), _ctx.nsIcon.m("check")])
           }, {
@@ -270,10 +327,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         2
         /* CLASS */
       ),
-      !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+      !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
         key: 2,
         class: vue.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: vue.withCtx(() => [
           vue.createVNode(_component_Close)
@@ -281,7 +338,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
         /* STABLE */
       }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-      vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
+      vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn "),
       vue.createCommentVNode(" This is a bug which needs to be fixed "),
       vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
       vue.createCommentVNode(` <i v-if="!disabled" :class="nsIcon.m('close-tip')">{{
@@ -295,19 +352,20 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-actions"))
         },
         [
-          _ctx.preview ? (vue.openBlock(), vue.createElementBlock(
+          vue.createCommentVNode(" \u9884\u89C8 "),
+          _ctx.previewable ? (vue.openBlock(), vue.createElementBlock(
             "span",
             {
               key: 0,
               class: vue.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))
             },
             [
-              vue.createVNode(_component_el_icon, {
+              vue.createVNode(_component_ElIcon, {
                 class: vue.normalizeClass(_ctx.nsIcon.m("zoom-in"))
               }, {
                 default: vue.withCtx(() => [
-                  vue.createVNode(_component_zoom_in)
+                  vue.createVNode(_component_ZoomIn)
                 ]),
                 _: 1
                 /* STABLE */
@@ -321,10 +379,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             "span",
             {
               class: vue.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))
             },
             [
-              vue.createVNode(_component_el_icon, {
+              vue.createVNode(_component_ElIcon, {
                 class: vue.normalizeClass(_ctx.nsIcon.m("download"))
               }, {
                 default: vue.withCtx(() => [
@@ -342,10 +400,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             {
               key: 1,
               class: vue.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))
             },
             [
-              vue.createVNode(_component_el_icon, {
+              vue.createVNode(_component_ElIcon, {
                 class: vue.normalizeClass(_ctx.nsIcon.m("delete"))
               }, {
                 default: vue.withCtx(() => [

package/components/upload/index.css

@@ -7,6 +7,9 @@
 .el-upload-list__item-name .el-icon.el-icon--download-primary{
   color: var(--el-color-primary);
 }
+.el-upload-list__item-file-actions{
+  margin-top: 4px;
+}
 .vkf-upload {
   width: 100%;
 }