pro-design-vue 0.0.1-beta.1

package/es/components/form/src/fields/FieldUploadPicture.mjs

@@ -0,0 +1,272 @@
+import { defineComponent, ref, computed, createVNode, mergeProps } from 'vue';
+import { Form, FormItemRest, Upload, Spin, message } from 'ant-design-vue';
+import { LoadingOutlined, PlusOutlined, CloseOutlined } from '@ant-design/icons-vue';
+import { ProModal } from '../../../modal/index.mjs';
+import { commonFieldProps } from '../props.mjs';
+import { useInjectForm } from '../context/FormContext.mjs';
+import { ProCropper } from '../../../cropper/index.mjs';
+import { useIntl } from '../../../config-provider/src/useIntl.mjs';
+import { omit } from '../../../../utils/omit.mjs';
+
+const defaultCropperProps = {
+  aspectRatio: 1,
+  cropBoxMovable: false,
+  cropBoxResizable: false,
+  dragMode: "move",
+  viewMode: 1
+};
+var FieldUploadPicture = /* @__PURE__ */ defineComponent({
+  name: "FieldUploadPicture",
+  inheritAttrs: false,
+  props: {
+    ...commonFieldProps(),
+    title: {
+      type: String
+    },
+    showTitle: {
+      type: Boolean,
+      default: void 0
+    },
+    name: {
+      type: String,
+      default: "file"
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    allowClear: {
+      type: Boolean,
+      default: void 0
+    },
+    isCropper: {
+      type: Boolean,
+      default: true
+    },
+    cropperModalTitle: {
+      type: String
+    },
+    cropperModalWidth: {
+      type: Number,
+      default: 520
+    },
+    cropperWidth: {
+      type: Number,
+      default: 100
+    },
+    cropperHeight: {
+      type: Number,
+      default: 100
+    },
+    cropperProps: {
+      type: Object,
+      default: () => ({})
+    },
+    width: {
+      type: Number,
+      default: 50
+    },
+    height: {
+      type: Number,
+      default: 50
+    },
+    customRequest: Function
+  },
+  setup(props, {
+    attrs
+  }) {
+    const open = ref(false);
+    const loading = ref(false);
+    const imgSrc = ref("");
+    const originFile = ref();
+    const cropperRef = ref();
+    const intl = useIntl();
+    const {
+      prefixCls,
+      disabled
+    } = useInjectForm();
+    const formItemContext = Form.useInjectFormItemContext();
+    const mergeCropperProps = computed(() => ({
+      ...defaultCropperProps,
+      ...props.cropperProps
+    }));
+    const beforeUpload = async (file, fileList) => {
+      var _a;
+      const custom = await ((_a = attrs == null ? void 0 : attrs.beforeUpload) == null ? void 0 : _a.call(attrs, file, fileList));
+      if (props.isCropper) {
+        const isImage = file.type.indexOf("image") >= 0;
+        if (!isImage) {
+          message.error(`${file.name} ${intl.getMessage("upload.picture.required", "\u5FC5\u987B\u662F\u56FE\u7247")}`);
+        }
+        return isImage || Upload.LIST_IGNORE;
+      }
+      return custom;
+    };
+    const dataURLtoFile = (dataurl) => {
+      var _a, _b;
+      const arr = dataurl.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]);
+      let n = bstr.length;
+      const u8arr = new Uint8Array(n);
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], (_b = (_a = originFile.value) == null ? void 0 : _a.name) != null ? _b : "", {
+        type: mime
+      });
+    };
+    const customRequest = async ({
+      file
+    }) => {
+      var _a;
+      const formData = new FormData();
+      formData.append(props.name, file);
+      loading.value = true;
+      try {
+        if (props.customRequest) {
+          const {
+            url
+          } = await props.customRequest(formData);
+          if (url) {
+            (_a = props.onChange) == null ? void 0 : _a.call(props, url);
+            formItemContext.onFieldChange();
+          }
+        }
+      } catch (error) {
+        console.log("\u{1F680} ~ customRequest ~ error:", error);
+      }
+      loading.value = false;
+    };
+    const uploadProps = computed(() => {
+      const newProps = omit(attrs, ["beforeUpload"]);
+      if (props.isCropper) {
+        newProps.customRequest = function() {
+        };
+      } else {
+        if (props.customRequest) {
+          newProps.customRequest = customRequest;
+        }
+      }
+      return newProps;
+    });
+    const onUploadChange = (info) => {
+      originFile.value = info.file.originFileObj;
+      if (props.isCropper) {
+        const reader = new FileReader();
+        reader.onload = function(e) {
+          open.value = true;
+          imgSrc.value = e.target.result;
+        };
+        reader.readAsDataURL(info.file.originFileObj);
+      }
+    };
+    const onConfirm = () => {
+      var _a, _b;
+      const base64 = (_a = cropperRef.value) == null ? void 0 : _a.getCroppedCanvas(originFile.value, {
+        width: props.cropperWidth,
+        height: props.cropperHeight
+      });
+      if (base64) {
+        const file = dataURLtoFile(base64);
+        open.value = false;
+        if (props.customRequest) {
+          customRequest({
+            file
+          });
+        } else {
+          (_b = props.onChange) == null ? void 0 : _b.call(props, base64, file);
+          formItemContext.onFieldChange();
+        }
+      }
+    };
+    const onClear = (e) => {
+      var _a;
+      e.stopPropagation();
+      (_a = props.onChange) == null ? void 0 : _a.call(props, "");
+      formItemContext.onFieldChange();
+    };
+    return () => {
+      if (props.readonly) {
+        return createVNode("div", {
+          "class": `${prefixCls}-upload-picture`,
+          "style": {
+            width: props.width + "px",
+            height: props.height + "px",
+            display: "block"
+          }
+        }, [createVNode("div", {
+          "class": `${prefixCls}-upload-picture-button`,
+          "style": {
+            width: props.width + "px",
+            height: props.height + "px",
+            cursor: "auto"
+          }
+        }, [props.value ? createVNode("div", {
+          "style": `width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url("${props.value}");`
+        }, null) : createVNode("div", {
+          "class": `${prefixCls}-upload-picture-button-empty`
+        }, null)])]);
+      }
+      return createVNode(FormItemRest, null, {
+        default: () => [createVNode(Upload, mergeProps(uploadProps.value, {
+          "before-upload": beforeUpload,
+          "show-upload-list": false,
+          "name": props.name,
+          "multiple": false,
+          "class": `${prefixCls}-upload-picture`,
+          "style": {
+            width: props.width + "px",
+            height: props.height + "px",
+            display: "block"
+          },
+          "onChange": onUploadChange
+        }), {
+          default: () => [createVNode(Spin, {
+            "spinning": loading.value,
+            "indicator": createVNode(LoadingOutlined, null, null),
+            "delay": 300
+          }, {
+            default: () => {
+              var _a, _b, _c;
+              return [createVNode("div", {
+                "class": `${prefixCls}-upload-picture-button`,
+                "style": {
+                  width: props.width + "px",
+                  height: props.height + "px",
+                  cursor: !((_a = props.disabled) != null ? _a : disabled == null ? void 0 : disabled.value) ? "pointer" : "not-allowed"
+                }
+              }, [props.value ? createVNode("div", {
+                "style": `width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url("${props.value}");`
+              }, null) : createVNode("div", {
+                "class": `${prefixCls}-upload-picture-button-empty`
+              }, [createVNode(PlusOutlined, null, null)]), props.showTitle && !((_b = props.disabled) != null ? _b : disabled == null ? void 0 : disabled.value) && createVNode("div", {
+                "class": `${prefixCls}-upload-picture-button-mask`
+              }, [props.title || intl.getMessage("upload.picture.title", "\u4FEE\u6539\u56FE\u7247")]), props.allowClear && props.value && !((_c = props.disabled) != null ? _c : disabled == null ? void 0 : disabled.value) && createVNode("div", {
+                "class": `${prefixCls}-upload-picture-button-clear`,
+                "onClick": onClear
+              }, [createVNode(CloseOutlined, null, null)])])];
+            }
+          })]
+        }), props.isCropper && createVNode(ProModal, {
+          "open": open.value,
+          "onUpdate:open": ($event) => open.value = $event,
+          "width": props.cropperModalWidth,
+          "title": props.cropperModalTitle || intl.getMessage("upload.picture.cropperModalTitle", "\u88C1\u526A\u56FE\u7247"),
+          "destroy-on-close": true,
+          "show-fullscreen": false,
+          "onOk": onConfirm
+        }, {
+          default: () => [createVNode(ProCropper, {
+            "ref": cropperRef,
+            "img-src": imgSrc.value,
+            "cropper-props": mergeCropperProps.value,
+            "cropper-width": props.cropperWidth,
+            "cropper-height": props.cropperHeight
+          }, null)]
+        })]
+      });
+    };
+  }
+});
+
+export { FieldUploadPicture as default };
+//# sourceMappingURL=FieldUploadPicture.mjs.map

package/es/components/form/src/fields/FieldUploadPicture.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldUploadPicture.mjs","sources":["../../../../../../../packages/components/form/src/fields/FieldUploadPicture.tsx"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2023-08-10 14:34:03\n * @LastEditors: shen\n * @LastEditTime: 2025-08-27 11:22:38\n * @Description:\n */\nimport type { PropType } from 'vue'\nimport type { UploadProps, UploadChangeParam } from 'ant-design-vue'\nimport type { ProCropperInstance } from '../../../cropper'\nimport { computed, defineComponent, ref } from 'vue'\nimport { Upload, Spin, message, FormItemRest, Form } from 'ant-design-vue'\nimport { CloseOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue'\nimport { ProModal } from '@pro-design-vue/components/modal'\nimport { commonFieldProps } from '../props'\nimport { useInjectForm } from '../context/FormContext'\nimport { ProCropper } from '../../../cropper'\nimport { omit } from '@pro-design-vue/utils'\nimport { useIntl } from '@pro-design-vue/components/config-provider'\n\nconst defaultCropperProps = {\n  aspectRatio: 1,\n  cropBoxMovable: false,\n  cropBoxResizable: false,\n  dragMode: 'move',\n  viewMode: 1,\n}\n\nexport default defineComponent({\n  name: 'FieldUploadPicture',\n  inheritAttrs: false,\n  props: {\n    ...commonFieldProps(),\n    title: {\n      type: String,\n    },\n    showTitle: {\n      type: Boolean,\n      default: undefined,\n    },\n    name: {\n      type: String,\n      default: 'file',\n    },\n    disabled: {\n      type: Boolean,\n      default: undefined,\n    },\n    allowClear: {\n      type: Boolean,\n      default: undefined,\n    },\n    isCropper: {\n      type: Boolean,\n      default: true,\n    },\n    cropperModalTitle: {\n      type: String,\n    },\n    cropperModalWidth: {\n      type: Number,\n      default: 520,\n    },\n    cropperWidth: {\n      type: Number,\n      default: 100,\n    },\n    cropperHeight: {\n      type: Number,\n      default: 100,\n    },\n    cropperProps: {\n      type: Object as PropType<Record<string, any>>,\n      default: () => ({}),\n    },\n    width: {\n      type: Number,\n      default: 50,\n    },\n    height: {\n      type: Number,\n      default: 50,\n    },\n    customRequest: Function,\n  },\n  setup(props, { attrs }) {\n    const open = ref(false)\n    const loading = ref(false)\n    const imgSrc = ref('')\n    const originFile = ref<File>()\n    const cropperRef = ref<ProCropperInstance>()\n    const intl = useIntl()\n    const { prefixCls, disabled } = useInjectForm()\n    const formItemContext = Form.useInjectFormItemContext()\n\n    const mergeCropperProps = computed(() => ({ ...defaultCropperProps, ...props.cropperProps }))\n\n    const beforeUpload: UploadProps['beforeUpload'] = async (file, fileList) => {\n      const custom = await (attrs as any)?.beforeUpload?.(file, fileList)\n\n      if (props.isCropper) {\n        const isImage = file.type.indexOf('image') >= 0\n        if (!isImage) {\n          message.error(`${file.name} ${intl.getMessage('upload.picture.required', '必须是图片')}`)\n        }\n        return isImage || Upload.LIST_IGNORE\n      }\n\n      return custom\n    }\n\n    const dataURLtoFile = (dataurl: any) => {\n      const arr = dataurl.split(','),\n        mime = arr[0].match(/:(.*?);/)[1],\n        bstr = atob(arr[1])\n      let n = bstr.length\n      const u8arr = new Uint8Array(n)\n      while (n--) {\n        u8arr[n] = bstr.charCodeAt(n)\n      }\n      return new File([u8arr], originFile.value?.name ?? '', { type: mime })\n    }\n\n    const customRequest = async ({ file }) => {\n      const formData = new FormData()\n      formData.append(props.name, file)\n      loading.value = true\n      try {\n        if (props.customRequest) {\n          const { url } = await props.customRequest(formData)\n          if (url) {\n            props.onChange?.(url)\n            formItemContext.onFieldChange()\n          }\n        }\n      } catch (error) {\n        console.log('🚀 ~ customRequest ~ error:', error)\n      }\n      loading.value = false\n    }\n\n    const uploadProps = computed(() => {\n      const newProps = omit(attrs, ['beforeUpload'])\n      if (props.isCropper) {\n        newProps.customRequest = function () {}\n      } else {\n        if (props.customRequest) {\n          newProps.customRequest = customRequest\n        }\n      }\n      return newProps\n    })\n\n    const onUploadChange = (info: UploadChangeParam) => {\n      originFile.value = info.file.originFileObj!\n      if (props.isCropper) {\n        const reader = new FileReader()\n        reader.onload = function (e: any) {\n          open.value = true\n          imgSrc.value = e.target.result\n        }\n        reader.readAsDataURL(info.file.originFileObj!)\n      }\n    }\n\n    const onConfirm = () => {\n      const base64 = cropperRef.value?.getCroppedCanvas(originFile.value!, {\n        width: props.cropperWidth,\n        height: props.cropperHeight,\n      })\n      if (base64) {\n        const file = dataURLtoFile(base64)\n        open.value = false\n        if (props.customRequest) {\n          customRequest({ file } as any)\n        } else {\n          props.onChange?.(base64, file)\n          formItemContext.onFieldChange()\n        }\n      }\n    }\n\n    const onClear = (e: MouseEvent) => {\n      e.stopPropagation()\n      props.onChange?.('')\n      formItemContext.onFieldChange()\n    }\n\n    return () => {\n      if (props.readonly) {\n        return (\n          <div\n            class={`${prefixCls}-upload-picture`}\n            style={{ width: props.width + 'px', height: props.height + 'px', display: 'block' }}\n          >\n            <div\n              class={`${prefixCls}-upload-picture-button`}\n              style={{\n                width: props.width + 'px',\n                height: props.height + 'px',\n                cursor: 'auto',\n              }}\n            >\n              {props.value ? (\n                <div\n                  style={`width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(\"${props.value}\");`}\n                ></div>\n              ) : (\n                <div class={`${prefixCls}-upload-picture-button-empty`}></div>\n              )}\n            </div>\n          </div>\n        )\n      }\n      return (\n        <FormItemRest>\n          <Upload\n            {...uploadProps.value}\n            before-upload={beforeUpload}\n            show-upload-list={false}\n            name={props.name}\n            multiple={false}\n            class={`${prefixCls}-upload-picture`}\n            style={{ width: props.width + 'px', height: props.height + 'px', display: 'block' }}\n            onChange={onUploadChange}\n          >\n            <Spin spinning={loading.value} indicator={<LoadingOutlined />} delay={300}>\n              <div\n                class={`${prefixCls}-upload-picture-button`}\n                style={{\n                  width: props.width + 'px',\n                  height: props.height + 'px',\n                  cursor: !(props.disabled ?? disabled?.value) ? 'pointer' : 'not-allowed',\n                }}\n              >\n                {props.value ? (\n                  <div\n                    style={`width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url(\"${props.value}\");`}\n                  ></div>\n                ) : (\n                  <div class={`${prefixCls}-upload-picture-button-empty`}>\n                    <PlusOutlined />\n                  </div>\n                )}\n                {props.showTitle && !(props.disabled ?? disabled?.value) && (\n                  <div class={`${prefixCls}-upload-picture-button-mask`}>\n                    {props.title || intl.getMessage('upload.picture.title', '修改图片')}\n                  </div>\n                )}\n                {props.allowClear && props.value && !(props.disabled ?? disabled?.value) && (\n                  <div class={`${prefixCls}-upload-picture-button-clear`} onClick={onClear}>\n                    <CloseOutlined />\n                  </div>\n                )}\n              </div>\n            </Spin>\n          </Upload>\n          {props.isCropper && (\n            <ProModal\n              v-model:open={open.value}\n              width={props.cropperModalWidth}\n              title={\n                props.cropperModalTitle ||\n                intl.getMessage('upload.picture.cropperModalTitle', '裁剪图片')\n              }\n              destroy-on-close\n              show-fullscreen={false}\n              onOk={onConfirm}\n            >\n              <ProCropper\n                ref={cropperRef}\n                img-src={imgSrc.value}\n                cropper-props={mergeCropperProps.value}\n                cropper-width={props.cropperWidth}\n                cropper-height={props.cropperHeight}\n              />\n            </ProModal>\n          )}\n        </FormItemRest>\n      )\n    }\n  },\n})\n"],"names":["defaultCropperProps","aspectRatio","cropBoxMovable","cropBoxResizable","dragMode","viewMode","name","inheritAttrs","props","commonFieldProps","title","type","String","showTitle","Boolean","default","undefined","disabled","allowClear","isCropper","cropperModalTitle","cropperModalWidth","Number","cropperWidth","cropperHeight","cropperProps","Object","width","height","customRequest","Function","setup","attrs","open","ref","loading","imgSrc","originFile","cropperRef","intl","useIntl","prefixCls","useInjectForm","formItemContext","Form","useInjectFormItemContext","mergeCropperProps","computed","beforeUpload","file","fileList","custom","isImage","indexOf","message","error","getMessage","Upload","LIST_IGNORE","dataURLtoFile","dataurl","arr","split","mime","match","bstr","atob","n","length","u8arr","Uint8Array","charCodeAt","File","value","formData","FormData","append","url","onChange","onFieldChange","console","log","uploadProps","newProps","omit","onUploadChange","info","originFileObj","reader","FileReader","onload","e","target","result","readAsDataURL","onConfirm","base64","getCroppedCanvas","onClear","stopPropagation","readonly","_createVNode","display","cursor","FormItemRest","_mergeProps","Spin","LoadingOutlined","PlusOutlined","CloseOutlined","ProModal","$event","ProCropper"],"mappings":"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"}

package/es/components/form/src/fields/FieldUploadPictureList.d.ts

@@ -0,0 +1,134 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    crossOrigin: {
+        type: PropType<"anonymous" | "use-credentials">;
+        default: string;
+    };
+    maxCount: {
+        type: NumberConstructor;
+    };
+    customRequest: FunctionConstructor;
+    value: {
+        type: PropType<any>;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readonlyProps: {
+        type: PropType<import("pro-design-vue").ProFormItemType["readonlyProps"]>;
+        default: undefined;
+    };
+    valueEnum: {
+        type: PropType<import("pro-design-vue").ProFormItemType["valueEnum"]>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<import("pro-design-vue").ProFormItemType["options"]>;
+        default: undefined;
+    };
+    request: {
+        type: PropType<import("pro-design-vue").ProFormItemType["request"]>;
+        default: undefined;
+    };
+    params: {
+        type: PropType<import("pro-design-vue").ProFormItemType["params"]>;
+        default: undefined;
+    };
+    dependencies: {
+        type: PropType<import("pro-design-vue").ProFormItemType["dependencies"]>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<import("pro-design-vue").ProFormItemType["onChange"]>;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    crossOrigin: {
+        type: PropType<"anonymous" | "use-credentials">;
+        default: string;
+    };
+    maxCount: {
+        type: NumberConstructor;
+    };
+    customRequest: FunctionConstructor;
+    value: {
+        type: PropType<any>;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    readonlyProps: {
+        type: PropType<import("pro-design-vue").ProFormItemType["readonlyProps"]>;
+        default: undefined;
+    };
+    valueEnum: {
+        type: PropType<import("pro-design-vue").ProFormItemType["valueEnum"]>;
+        default: undefined;
+    };
+    options: {
+        type: PropType<import("pro-design-vue").ProFormItemType["options"]>;
+        default: undefined;
+    };
+    request: {
+        type: PropType<import("pro-design-vue").ProFormItemType["request"]>;
+        default: undefined;
+    };
+    params: {
+        type: PropType<import("pro-design-vue").ProFormItemType["params"]>;
+        default: undefined;
+    };
+    dependencies: {
+        type: PropType<import("pro-design-vue").ProFormItemType["dependencies"]>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<import("pro-design-vue").ProFormItemType["onChange"]>;
+    };
+}>> & Readonly<{}>, {
+    width: number;
+    disabled: boolean;
+    name: string;
+    height: number;
+    options: (string | number | import("pro-design-vue").RequestOptionsType)[] | ((formData: import("pro-design-vue").Entity, rowData?: import("pro-design-vue").Entity) => (string | number | import("pro-design-vue").RequestOptionsType)[]) | undefined;
+    readonlyProps: import("pro-design-vue").ReadonlyProps | undefined;
+    params: Record<string, any> | ((record: import("pro-design-vue").Entity) => Record<string, any>) | undefined;
+    request: import("pro-design-vue").FieldRequestData<any> | undefined;
+    readonly: boolean;
+    valueEnum: import("pro-design-vue").ProValueEnumObj | import("pro-design-vue").ProValueEnumMap | ((formData: import("pro-design-vue").Entity) => import("pro-design-vue").ProValueEnumObj | import("pro-design-vue").ProValueEnumMap) | undefined;
+    dependencies: import("pro-design-vue").NamePath[] | undefined;
+    crossOrigin: "anonymous" | "use-credentials";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/form/src/fields/FieldUploadPictureList.mjs

@@ -0,0 +1,142 @@
+import { defineComponent, ref, computed, watch, createVNode, Fragment, mergeProps } from 'vue';
+import { Upload, Modal } from 'ant-design-vue';
+import { PlusOutlined } from '@ant-design/icons-vue';
+import { commonFieldProps } from '../props.mjs';
+import { useInjectForm } from '../context/FormContext.mjs';
+import { useIntl } from '../../../config-provider/src/useIntl.mjs';
+import { isEqual } from 'lodash-unified';
+
+var FieldUploadPictureList = /* @__PURE__ */ defineComponent({
+  name: "FieldUploadPictureList",
+  inheritAttrs: false,
+  props: {
+    ...commonFieldProps(),
+    name: {
+      type: String,
+      default: "file"
+    },
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    width: {
+      type: Number,
+      default: 80
+    },
+    height: {
+      type: Number,
+      default: 80
+    },
+    crossOrigin: {
+      type: String,
+      default: ""
+    },
+    maxCount: {
+      type: Number
+    },
+    customRequest: Function
+  },
+  setup(props, {
+    attrs
+  }) {
+    const fileList = ref([]);
+    const previewVisible = ref(false);
+    const previewImage = ref("");
+    const intl = useIntl();
+    const {
+      prefixCls,
+      disabled
+    } = useInjectForm();
+    const mergeDisabled = computed(() => props.readonly || (disabled == null ? void 0 : disabled.value));
+    const customRequest = async (option) => {
+      var _a, _b;
+      const formData = new FormData();
+      formData.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
+      } = await props.customRequest(formData, onUploadProgress);
+      if (success) {
+        (_a = option.onSuccess) == null ? void 0 : _a.call(option, data);
+      } else {
+        (_b = option.onError) == null ? void 0 : _b.call(option, error, data);
+      }
+    };
+    const uploadProps = computed(() => {
+      const newProps = {
+        ...attrs
+      };
+      if (props.customRequest) {
+        newProps.customRequest = customRequest;
+      }
+      return newProps;
+    });
+    const getBase64 = (file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+      });
+    };
+    const handlePreview = async (file) => {
+      if (!file.url && !file.preview) {
+        file.preview = await getBase64(file.originFileObj);
+      }
+      previewImage.value = file.url || file.preview;
+      previewVisible.value = true;
+    };
+    watch(() => props.value, (newValue) => {
+      if (!isEqual(newValue, fileList.value)) {
+        fileList.value = newValue.map((item) => ({
+          ...item,
+          crossOrigin: props.crossOrigin
+        }));
+      }
+    });
+    watch(fileList, () => {
+      var _a;
+      (_a = props.onChange) == null ? void 0 : _a.call(props, fileList.value);
+    });
+    return () => createVNode(Fragment, null, [createVNode(Upload, mergeProps(uploadProps.value, {
+      "fileList": fileList.value,
+      "onUpdate:fileList": ($event) => fileList.value = $event,
+      "name": props.name,
+      "disabled": mergeDisabled.value,
+      "list-type": "picture-card",
+      "maxCount": props.maxCount,
+      "class": `${prefixCls}-upload-picture-list`,
+      "style": {
+        "--s-upload-picture-list-width": props.width + "px",
+        "--s-upload-picture-list-height": props.height + "px"
+      },
+      "onPreview": handlePreview
+    }), {
+      default: () => [(!mergeDisabled.value || !props.maxCount || fileList.value.length < props.maxCount) && createVNode(PlusOutlined, null, null)]
+    }), createVNode(Modal, {
+      "open": previewVisible.value,
+      "onUpdate:open": ($event) => previewVisible.value = $event,
+      "width": 800,
+      "title": intl.getMessage("upload.picture.viewModalTitle", "\u67E5\u770B\u56FE\u7247"),
+      "footer": null
+    }, {
+      default: () => [createVNode("img", {
+        "alt": "preview",
+        "style": "width: 100%",
+        "crossorigin": props.crossOrigin,
+        "src": previewImage.value
+      }, null)]
+    })]);
+  }
+});
+
+export { FieldUploadPictureList as default };
+//# sourceMappingURL=FieldUploadPictureList.mjs.map

package/es/components/form/src/fields/FieldUploadPictureList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldUploadPictureList.mjs","sources":["../../../../../../../packages/components/form/src/fields/FieldUploadPictureList.tsx"],"sourcesContent":["/*\n * @Author: shen\n * @Date: 2023-08-10 14:34:03\n * @LastEditors: shen\n * @LastEditTime: 2025-07-27 12:03:22\n * @Description:\n */\nimport type { PropType } from 'vue'\nimport type { UploadProps } from 'ant-design-vue'\n\nimport { computed, defineComponent, ref, watch } from 'vue'\nimport { Upload, Modal } from 'ant-design-vue'\nimport { PlusOutlined } from '@ant-design/icons-vue'\nimport { commonFieldProps } from '../props'\nimport { useInjectForm } from '../context/FormContext'\nimport { isEqual } from '@pro-design-vue/utils'\nimport { useIntl } from '@pro-design-vue/components/config-provider'\n\nexport default defineComponent({\n  name: 'FieldUploadPictureList',\n  inheritAttrs: false,\n  props: {\n    ...commonFieldProps(),\n    name: {\n      type: String,\n      default: 'file',\n    },\n    disabled: {\n      type: Boolean,\n      default: undefined,\n    },\n    width: {\n      type: Number,\n      default: 80,\n    },\n    height: {\n      type: Number,\n      default: 80,\n    },\n    crossOrigin: {\n      type: String as PropType<'anonymous' | 'use-credentials'>,\n      default: '',\n    },\n    maxCount: {\n      type: Number,\n    },\n    customRequest: Function,\n  },\n  setup(props, { attrs }) {\n    const fileList = ref<any[]>([])\n    const previewVisible = ref(false)\n    const previewImage = ref('')\n    const intl = useIntl()\n    const { prefixCls, disabled } = useInjectForm()\n\n    const mergeDisabled = computed(() => props.readonly || disabled?.value)\n\n    const customRequest: UploadProps['customRequest'] = async (option) => {\n      const formData = new FormData()\n      formData.append(props.name, option.file)\n      const onUploadProgress = (e) => {\n        if (e.total > 0) {\n          e.percent = (e.loaded / e.total) * 100\n        }\n        option?.onProgress?.(e)\n      }\n      const { success, error, data } = await props.customRequest!(formData, onUploadProgress)\n      if (success) {\n        option.onSuccess?.(data)\n      } else {\n        option.onError?.(error, data)\n      }\n    }\n\n    const uploadProps = computed(() => {\n      const newProps = { ...attrs }\n      if (props.customRequest) {\n        newProps.customRequest = customRequest\n      }\n      return newProps\n    })\n\n    const getBase64 = (file: File) => {\n      return new Promise((resolve, reject) => {\n        const reader = new FileReader()\n        reader.readAsDataURL(file)\n        reader.onload = () => resolve(reader.result)\n        reader.onerror = (error) => reject(error)\n      })\n    }\n\n    const handlePreview = async (file) => {\n      if (!file.url && !file.preview) {\n        file.preview = (await getBase64(file.originFileObj)) as string\n      }\n      previewImage.value = file.url || file.preview\n      previewVisible.value = true\n    }\n\n    watch(\n      () => props.value,\n      (newValue) => {\n        if (!isEqual(newValue, fileList.value)) {\n          fileList.value = newValue.map((item) => ({ ...item, crossOrigin: props.crossOrigin }))\n        }\n      },\n    )\n\n    watch(fileList, () => {\n      props.onChange?.(fileList.value)\n    })\n\n    return () => (\n      <>\n        <Upload\n          {...uploadProps.value}\n          v-model:fileList={fileList.value}\n          name={props.name}\n          disabled={mergeDisabled.value}\n          list-type=\"picture-card\"\n          maxCount={props.maxCount}\n          class={`${prefixCls}-upload-picture-list`}\n          style={{\n            '--s-upload-picture-list-width': props.width + 'px',\n            '--s-upload-picture-list-height': props.height + 'px',\n          }}\n          onPreview={handlePreview}\n        >\n          {(!mergeDisabled.value || !props.maxCount || fileList.value.length < props.maxCount) && (\n            <PlusOutlined />\n          )}\n        </Upload>\n        <Modal\n          v-model:open={previewVisible.value}\n          width={800}\n          title={intl.getMessage('upload.picture.viewModalTitle', '查看图片')}\n          footer={null}\n        >\n          <img\n            alt=\"preview\"\n            style=\"width: 100%\"\n            crossorigin={props.crossOrigin}\n            src={previewImage.value}\n          />\n        </Modal>\n      </>\n    )\n  },\n})\n"],"names":["name","inheritAttrs","props","commonFieldProps","type","String","default","disabled","Boolean","undefined","width","Number","height","crossOrigin","maxCount","customRequest","Function","setup","attrs","fileList","ref","previewVisible","previewImage","intl","useIntl","prefixCls","useInjectForm","mergeDisabled","computed","readonly","value","option","formData","FormData","append","file","onUploadProgress","e","_a","total","percent","loaded","onProgress","success","error","data","onSuccess","onError","uploadProps","newProps","getBase64","Promise","resolve","reject","reader","FileReader","readAsDataURL","onload","result","onerror","handlePreview","url","preview","originFileObj","watch","newValue","isEqual","map","item","onChange","_createVNode","_Fragment","Upload","_mergeProps","$event","length","PlusOutlined","Modal","getMessage"],"mappings":"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"}

package/es/components/form/src/hooks/useAction.d.ts

@@ -0,0 +1,14 @@
+import type { Ref, ShallowRef } from 'vue';
+import type { ProFormActionType, Entity } from '../type';
+import type { ProFormProps } from '../props';
+import type { FormInstance } from 'ant-design-vue';
+export declare function useAction({ props, formRef, formData, initialValues, hasInitial, onFinish, onReset, onFinishFailed, }: {
+    props: ProFormProps;
+    formRef: Ref<FormInstance | undefined>;
+    formData: Ref<Entity>;
+    initialValues: ShallowRef<Entity>;
+    hasInitial: Ref<boolean>;
+    onFinish: ProFormProps['onFinish'];
+    onReset: ProFormProps['onReset'];
+    onFinishFailed: ProFormProps['onFinishFailed'];
+}): ProFormActionType;