pro-design-vue 1.2.20 → 1.2.22

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Pro Design Vue v1.2.20 */
+/*! Pro Design Vue v1.2.22 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ant-design-vue'), require('vue'), require('ant-design-vue/es/locale/zh_CN.js')) :
@@ -32,7 +32,7 @@
   const DEFAULT_NAMESPACE = "pro";
   const DEFAULT_LOCALE = "zh-CN";
 
-  const version$1 = "1.2.20";
+  const version$1 = "1.2.22";
 
   const makeInstaller = (components = []) => {
     const install = (app) => {
@@ -13444,7 +13444,17 @@
           onClose: handleClose
         }), vue.createSlots({
           default: vue.withCtx(() => [
-            vue.renderSlot(_ctx.$slots, "default")
+            vue.createElementVNode(
+              "div",
+              {
+                class: vue.normalizeClass(`${vue.unref(prefixCls)}-body`)
+              },
+              [
+                vue.renderSlot(_ctx.$slots, "default")
+              ],
+              2
+              /* CLASS */
+            )
           ]),
           _: 2
           /* DYNAMIC */
@@ -16126,7 +16136,7 @@
         type: String,
         default: "file"
       },
-      max: {
+      maxCount: {
         type: Number,
         default: void 0
       },
@@ -16144,25 +16154,31 @@
       },
       listType: {
         type: String,
-        default: "picture"
-      }
+        default: "picture-card"
+      },
+      listIgnore: {
+        type: Boolean,
+        default: true
+      },
+      showUploadList: {
+        type: [Boolean, Object],
+        default: true
+      },
+      customRequest: Function,
+      beforeUpload: Function
     },
     setup(props, {
       attrs
     }) {
       const intl = useIntl();
       const {
+        prefixCls,
         formData
       } = useInjectForm();
       const formSlotsContext = useInjectSlots$1();
-      const value = vue.computed(() => {
-        var _a;
-        return (_a = props.fileList) != null ? _a : props.value;
-      });
-      const showUploadButton = vue.computed(() => {
-        var _a;
-        return props.max === void 0 || !value.value || ((_a = value.value) == null ? void 0 : _a.length) < props.max;
-      });
+      const fileList = vue.ref([]);
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
+      const baseClassName = vue.computed(() => `${prefixCls}-upload`);
       const isPictureCard = vue.computed(() => props.listType === "picture-card");
       const slotsGetter = vue.computed(() => {
         const temp = {};
@@ -16203,22 +16219,94 @@
         }
         return props.title || intl.getMessage("upload.button", "\u5355\u51FB\u4E0A\u4F20");
       });
-      const onChange = (info) => {
+      const beforeUpload = async (file, fileList2) => {
         var _a;
-        (_a = props.onChange) == null ? void 0 : _a.call(props, info.fileList, info);
+        const result = await ((_a = props.beforeUpload) == null ? void 0 : _a.call(props, file, fileList2));
+        if (!result && props.listIgnore) {
+          return antDesignVue.Upload.LIST_IGNORE;
+        }
+        return result;
       };
-      return () => vue.createVNode(antDesignVue.Upload, vue.mergeProps({
-        "fileList": value.value
-      }, attrs, {
-        "listType": props.listType,
+      const customRequest = async (option) => {
+        var _a, _b, _c;
+        const formData2 = new FormData();
+        formData2.append(props.name, option.file);
+        const onUploadProgress = (e) => {
+          var _a2;
+          if (e.total > 0) {
+            e.percent = e.loaded / e.total * 100;
+          }
+          (_a2 = option == null ? void 0 : option.onProgress) == null ? void 0 : _a2.call(option, e);
+        };
+        const {
+          success,
+          error,
+          data
+        } = (_a = await props.customRequest(formData2, onUploadProgress)) != null ? _a : {};
+        if (success) {
+          (_b = option.onSuccess) == null ? void 0 : _b.call(option, data);
+          formItemContext.onFieldChange();
+        } else {
+          (_c = option.onError) == null ? void 0 : _c.call(option, error, data);
+        }
+      };
+      const uploadProps = vue.computed(() => {
+        const newProps = {
+          ...attrs
+        };
+        if (props.customRequest) {
+          newProps.customRequest = customRequest;
+        }
+        if (props.beforeUpload) {
+          newProps.beforeUpload = beforeUpload;
+        }
+        return newProps;
+      });
+      vue.watch(() => props.value, (newValue) => {
+        var _a;
+        fileList.value = [...newValue == null ? void 0 : newValue.map((item) => ({
+          ...item,
+          name: item.name || item.url
+        }))];
+        if (!((_a = fileList.value) == null ? void 0 : _a.length)) {
+          formItemContext.onFieldChange();
+        }
+      });
+      const onUploadChange = (info) => {
+        var _a;
+        (_a = props.onChange) == null ? void 0 : _a.call(props, info.fileList.map((item) => {
+          var _a2, _b, _c;
+          return {
+            ...item,
+            name: item.name || ((_a2 = item.response) == null ? void 0 : _a2.name) || item.url || ((_b = item.response) == null ? void 0 : _b.url),
+            url: ((_c = item.response) == null ? void 0 : _c.url) || item.url
+          };
+        }), info.file);
+      };
+      return () => vue.createVNode(antDesignVue.Upload, vue.mergeProps(uploadProps.value, {
+        "class": {
+          [`${baseClassName.value}-readonly`]: props.readonly
+        },
+        "fileList": fileList.value,
+        "onUpdate:fileList": ($event) => fileList.value = $event,
         "name": props.name,
-        "onChange": onChange
+        "maxCount": props.maxCount,
+        "listType": props.listType,
+        "showUploadList": props.readonly || props.showUploadList,
+        "disabled": props.readonly || props.disabled,
+        "style": attrs == null ? void 0 : attrs.style,
+        "onChange": onUploadChange
       }), {
-        default: () => [showUploadButton.value && (isPictureCard.value ? vue.createVNode("span", null, [icon.value, title.value]) : vue.createVNode(antDesignVue.Button, vue.mergeProps({
-          "disabled": props.disabled
-        }, props.buttonProps), {
-          default: () => [icon.value, title.value]
-        }))],
+        default: () => {
+          var _a;
+          return [isPictureCard.value ? props.maxCount !== void 0 && ((_a = fileList.value) == null ? void 0 : _a.length) < props.maxCount && vue.createVNode("div", null, [icon.value, vue.createVNode("div", {
+            "style": "margin-top: 8px"
+          }, [vue.createTextVNode(" "), title.value])]) : vue.createVNode(antDesignVue.Button, vue.mergeProps({
+            "disabled": props.disabled
+          }, props.buttonProps), {
+            default: () => [icon.value, title.value]
+          })];
+        },
         ...slotsGetter.value
       });
     }
@@ -16274,29 +16362,30 @@
       fileList: {
         type: Array,
         default: void 0
-      }
+      },
+      listIgnore: {
+        type: Boolean,
+        default: true
+      },
+      showUploadList: {
+        type: [Boolean, Object],
+        default: true
+      },
+      customRequest: Function,
+      beforeUpload: Function
     },
     setup(props, {
       attrs
     }) {
-      const {
-        token
-      } = antDesignVue.theme.useToken();
       const {
         prefixCls,
         formData
       } = useInjectForm();
       const intl = useIntl();
       const formSlotsContext = useInjectSlots$1();
-      const value = vue.computed(() => {
-        var _a;
-        return (_a = props.fileList) != null ? _a : props.value;
-      });
+      const fileList = vue.ref([]);
+      const formItemContext = antDesignVue.Form.useInjectFormItemContext();
       const baseClassName = vue.computed(() => `${prefixCls}-upload`);
-      const showUploadButton = vue.computed(() => {
-        var _a;
-        return props.max === void 0 || !value.value || ((_a = value.value) == null ? void 0 : _a.length) < props.max;
-      });
       const slotsGetter = vue.computed(() => {
         const temp = {};
         SLOT_NAMES$1.forEach((name) => {
@@ -16345,24 +16434,86 @@
         }
         return props.description || intl.getMessage("upload.dragger.hint", "\u652F\u6301\u5355\u6B21\u6216\u6279\u91CF\u4E0A\u4F20");
       });
-      const onChange = (info) => {
+      const beforeUpload = async (file, fileList2) => {
         var _a;
-        (_a = props.onChange) == null ? void 0 : _a.call(props, info.fileList, info);
+        const result = await ((_a = props.beforeUpload) == null ? void 0 : _a.call(props, file, fileList2));
+        if (!result && props.listIgnore) {
+          return antDesignVue.Upload.LIST_IGNORE;
+        }
+        return result;
       };
-      return () => vue.createVNode(antDesignVue.Upload.Dragger, vue.mergeProps({
-        "fileList": value.value
-      }, attrs, {
-        "name": props.name,
-        "style": {
-          ...attrs == null ? void 0 : attrs.style,
-          display: !showUploadButton.value ? "none" : void 0
+      const customRequest = async (option) => {
+        var _a, _b, _c;
+        const formData2 = new FormData();
+        formData2.append(props.name, option.file);
+        const onUploadProgress = (e) => {
+          var _a2;
+          if (e.total > 0) {
+            e.percent = e.loaded / e.total * 100;
+          }
+          (_a2 = option == null ? void 0 : option.onProgress) == null ? void 0 : _a2.call(option, e);
+        };
+        const {
+          success,
+          error,
+          data
+        } = (_a = await props.customRequest(formData2, onUploadProgress)) != null ? _a : {};
+        if (success) {
+          (_b = option.onSuccess) == null ? void 0 : _b.call(option, data);
+          formItemContext.onFieldChange();
+        } else {
+          (_c = option.onError) == null ? void 0 : _c.call(option, error, data);
+        }
+      };
+      const uploadProps = vue.computed(() => {
+        const newProps = {
+          ...attrs
+        };
+        if (props.customRequest) {
+          newProps.customRequest = customRequest;
+        }
+        if (props.beforeUpload) {
+          newProps.beforeUpload = beforeUpload;
+        }
+        return newProps;
+      });
+      vue.watch(() => props.value, (newValue) => {
+        var _a;
+        fileList.value = [...newValue == null ? void 0 : newValue.map((item) => ({
+          ...item,
+          name: item.name || item.url
+        }))];
+        if (!((_a = fileList.value) == null ? void 0 : _a.length)) {
+          formItemContext.onFieldChange();
+        }
+      });
+      const onUploadChange = (info) => {
+        var _a;
+        (_a = props.onChange) == null ? void 0 : _a.call(props, info.fileList.map((item) => {
+          var _a2, _b, _c;
+          return {
+            ...item,
+            name: item.name || ((_a2 = item.response) == null ? void 0 : _a2.name) || item.url || ((_b = item.response) == null ? void 0 : _b.url),
+            url: ((_c = item.response) == null ? void 0 : _c.url) || item.url
+          };
+        }), info.file);
+      };
+      return () => vue.createVNode(antDesignVue.Upload.Dragger, vue.mergeProps(uploadProps.value, {
+        "class": {
+          [`${baseClassName.value}-readonly`]: props.readonly
         },
-        "onChange": onChange
+        "fileList": fileList.value,
+        "onUpdate:fileList": ($event) => fileList.value = $event,
+        "name": props.name,
+        "showUploadList": props.readonly || props.showUploadList,
+        "disabled": props.readonly || props.disabled,
+        "style": attrs == null ? void 0 : attrs.style,
+        "onChange": onUploadChange
       }), {
         default: () => [vue.createVNode("p", {
           "class": `${baseClassName.value}-drag-icon`,
           "style": {
-            color: token.value.colorPrimary
+            color: "hsl(var(--pro-primary))"
           }
         }, [icon.value]), vue.createVNode("p", {
           "class": `${baseClassName.value}-text`
@@ -36787,6 +36938,10 @@
       tooltip: {
         type: [String, Boolean],
         default: ""
+      },
+      readonly: {
+        type: Boolean,
+        default: false
       }
     },
     setup(props) {
@@ -36801,7 +36956,8 @@
       }, [vue.createVNode(RenderVNode$1, {
         "vnode": title.value,
         "props": {
-          formData: formData.value
+          formData: formData.value,
+          readonly: props.readonly
         }
       }, null)]), props.tooltip && vue.createVNode(antDesignVue.Tooltip, null, {
         default: () => [vue.createVNode(QuestionCircleOutlined, {
@@ -36811,7 +36967,8 @@
         title: () => props.tooltip === true ? vue.createVNode(RenderVNode$1, {
           "vnode": title.value,
           "props": {
-            formData: formData.value
+            formData: formData.value,
+            readonly: props.readonly
           }
         }, null) : props.tooltip
       })]);
@@ -38403,6 +38560,7 @@
       "data",
       "directory",
       "disabled",
+      "listIgnore",
       "downloadIcon",
       "fileList",
       "headers",
@@ -38436,6 +38594,7 @@
       "id",
       "accept",
       "action",
+      "listIgnore",
       "beforeUpload",
       "customRequest",
       "data",
@@ -38477,6 +38636,7 @@
       "accept",
       "action",
       "beforeUpload",
+      "listIgnore",
       "name",
       "headers",
       "isCropper",
@@ -38503,6 +38663,7 @@
       "multiple",
       "maxCount",
       "beforeUpload",
+      "listIgnore",
       "name",
       "previewFile",
       "allowClear",
@@ -38724,7 +38885,8 @@
             "style": formItemProps.value.titleStyles
           }, [vue.createVNode(FormTitle, {
             "title": props.item.title,
-            "tooltip": props.item.tooltip
+            "tooltip": props.item.tooltip,
+            "readonly": mergeReadonly.value
           }, null)]), vue.createVNode("div", {
             "class": `${prefixCls}-item-title-extra`
           }, [vue.createVNode(RenderVNode$1, {