@vunk/form 0.0.1-alpha.21 → 0.0.1-alpha.23

package/components/radio/index.js

@@ -3,6 +3,7 @@ import { radioGroupProps, radioGroupEmits, ElRadio, ElRadioGroup, ElRadioButton
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, createElementBlock, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString } from 'vue';
 import { createRadioGroupBindProps, createRadioGroupOnEmits } from '@vunk/form/shared/element-plus';
 import { pickObject } from '@vunk/core/shared/utils-object';
+import { useComputedReadonly } from '@vunk/form/composables';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -47,17 +48,19 @@ var script = defineComponent({
   props,
   setup(props2, { emit }) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const coreBindProps = createRadioGroupBindProps(props2);
+    const coreBindProps = createRadioGroupBindProps(props2, ["disabled"]);
     const coreOnEmits = createRadioGroupOnEmits(emit);
     const options = computed(() => {
       return props2.options.filter((item) => item.value !== void 0 && item.value !== null);
     });
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       coreBindProps,
       coreOnEmits,
       options,
-      pickObject
+      pickObject,
+      readonly
     };
   }
 });
@@ -67,7 +70,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfFormItem = resolveComponent("VkfFormItem");
   return openBlock(), createBlock(_component_VkfFormItem, normalizeProps(guardReactiveProps(_ctx.formItemBindProps)), {
     default: withCtx(() => [
-      createVNode(_component_ElRadioGroup, mergeProps(_ctx.coreBindProps, toHandlers(_ctx.coreOnEmits)), {
+      createVNode(_component_ElRadioGroup, mergeProps({
+        class: {
+          "is-readonly": _ctx.readonly
+        }
+      }, _ctx.coreBindProps, toHandlers(_ctx.coreOnEmits), {
+        disabled: _ctx.readonly || _ctx.disabled
+      }), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item) => {
             return openBlock(), createBlock(resolveDynamicComponent(_ctx.type === "button" ? "ElRadioButton" : "ElRadio"), mergeProps({
@@ -87,7 +96,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ]),
         _: 1
-      }, 16)
+      }, 16, ["class", "disabled"])
     ]),
     _: 1
   }, 16);

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

@@ -63,6 +63,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     "update:modelValue": (val: string | number | boolean) => boolean;

package/components/radio/src/index.vue.d.ts

@@ -61,6 +61,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }, {
     formItemBindProps: import("vue").ComputedRef<{
         required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -77,16 +81,16 @@ declare const _default: import("vue").DefineComponent<{
         formItemSlots: import("../../form-item/src/types").FormItemSlots | undefined;
         elRef: any;
         inline: boolean;
+        readonly: boolean | undefined;
     }>;
     coreBindProps: import("vue").ComputedRef<{
         label: string | undefined;
         size: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never> | undefined;
         fill: string;
         name: string | undefined;
-        disabled: boolean;
         id: string | undefined;
-        modelValue: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
         validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+        modelValue: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
         textColor: string;
     }>;
     coreOnEmits: {
@@ -98,6 +102,7 @@ declare const _default: import("vue").DefineComponent<{
         excludes?: EX | undefined;
         includes?: KI[] | undefined;
     } | undefined) => { [P in EX extends (infer KE)[] ? Exclude<KI, KE> : KI]: T[P]; };
+    readonly: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | number | boolean) => boolean;
     change: (val: string | number | boolean) => boolean;
@@ -164,9 +169,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
-    onChange?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
+    onChange?: ((val: string | number | boolean) => any) | undefined;
 }, {
     required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     type: "default" | "button";
@@ -177,13 +186,14 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     fill: string;
     name: string;
     disabled: boolean;
     id: string;
-    modelValue: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
     validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    textColor: string;
+    modelValue: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor, BooleanConstructor], unknown, unknown>;
     options: import("../../../shared/types/form").RadioProps[];
+    textColor: string;
 }>;
 export default _default;

package/components/select/index.css

@@ -0,0 +1,11 @@
+
+.el-select.is-readonly{
+  --el-readonly-cursor: text;
+  --el-disabled-bg-color: initial;
+  --el-disabled-text-color: var(--el-input-text-color);
+}
+.el-select.is-readonly .el-input.is-disabled .el-input__inner,
+.el-select.is-readonly .el-input.is-disabled .el-select__caret,
+.el-select.is-readonly .el-input.is-disabled .el-input__wrapper{
+  cursor: var(--el-readonly-cursor);
+}

package/components/select/index.js

@@ -3,6 +3,7 @@ import { selectProps, selectEmits, createSelectBindProps, createSelectOnEmits }
 import { defineComponent, computed, ref, watch, nextTick, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, mergeProps, toHandlers, createSlots, createElementBlock, Fragment, renderList, renderSlot, resolveDynamicComponent, createCommentVNode } from 'vue';
 import { ElSelect, ElOption } from 'element-plus';
 import { isPlainObject } from '@vunk/core/shared/utils-object';
+import { useComputedReadonly } from '@vunk/form/composables';
 
 var __defProp$1 = Object.defineProperty;
 var __defProps$1 = Object.defineProperties;
@@ -65,7 +66,7 @@ var script = defineComponent({
   props,
   setup(props2, { emit }) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const selectBindProps = createSelectBindProps(props2);
+    const selectBindProps = createSelectBindProps(props2, ["disabled"]);
     const selectOnEmits = createSelectOnEmits(emit);
     const getKey = (item) => isPlainObject(item.value) ? item.value[selectBindProps.value.valueKey] : item.value;
     const selectOptions = computed(() => {
@@ -87,12 +88,14 @@ var script = defineComponent({
         reshow.value = true;
       });
     });
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       selectBindProps,
       selectOnEmits,
       selectOptions,
-      reshow
+      reshow,
+      readonly
     };
   }
 });
@@ -103,7 +106,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfFormItem = resolveComponent("VkfFormItem");
   return openBlock(), createBlock(_component_VkfFormItem, normalizeProps(guardReactiveProps(_ctx.formItemBindProps)), {
     default: withCtx(() => [
-      _ctx.reshow ? (openBlock(), createBlock(_component_ElSelect, mergeProps({ key: 0 }, _ctx.selectBindProps, toHandlers(_ctx.selectOnEmits)), createSlots({
+      _ctx.reshow ? (openBlock(), createBlock(_component_ElSelect, mergeProps({ key: 0 }, _ctx.selectBindProps, toHandlers(_ctx.selectOnEmits), {
+        disabled: _ctx.readonly || _ctx.disabled,
+        class: {
+          "is-readonly": _ctx.readonly
+        }
+      }), createSlots({
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selectOptions, (item) => {
             return openBlock(), createBlock(_component_ElOption, mergeProps(item, {
@@ -122,7 +130,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           };
         })
-      ]), 1040)) : createCommentVNode("v-if", true)
+      ]), 1040, ["disabled", "class"])) : createCommentVNode("v-if", true)
     ]),
     _: 3
   }, 16);

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

@@ -189,6 +189,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     'update:modelValue': null;

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

@@ -186,6 +186,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }, {
     formItemBindProps: import("vue").ComputedRef<{
         required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -202,19 +206,19 @@ declare const _default: import("vue").DefineComponent<{
         formItemSlots: import("../../form-item/src/types").FormItemSlots | undefined;
         elRef: any;
         inline: boolean;
+        readonly: boolean | undefined;
     }>;
     selectBindProps: import("vue").ComputedRef<{
         size: "" | "default" | "small" | "large" | undefined;
         name: string | undefined;
-        disabled: boolean;
         loading: boolean;
         multiple: boolean;
         id: string | undefined;
-        modelValue: string | number | boolean | Record<string, any> | unknown[] | undefined;
         popperClass: string;
         clearable: boolean;
         clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
         placeholder: string | undefined;
+        modelValue: string | number | boolean | Record<string, any> | unknown[] | undefined;
         autocomplete: string;
         suffixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
         automaticDropdown: boolean;
@@ -310,6 +314,7 @@ declare const _default: import("vue").DefineComponent<{
         key: any;
     })[]>;
     reshow: import("vue").Ref<boolean>;
+    readonly: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:modelValue': null;
     change: null;
@@ -506,10 +511,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
-    onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     "onVisible-change"?: ((...args: any[]) => any) | undefined;
     onClear?: ((...args: any[]) => any) | undefined;
@@ -522,10 +531,31 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     disabled: boolean;
     loading: boolean;
     multiple: boolean;
+    popperClass: string;
+    clearable: boolean;
+    clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
     modelValue: string | number | boolean | Record<string, any> | unknown[];
+    autocomplete: string;
+    suffixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
+    automaticDropdown: boolean;
+    effect: string;
+    filterable: boolean;
+    allowCreate: boolean;
+    remote: boolean;
+    multipleLimit: number;
+    defaultFirstOption: boolean;
+    reserveKeyword: boolean;
+    valueKey: string;
+    collapseTags: boolean;
+    collapseTagsTooltip: boolean;
+    teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    persistent: boolean;
+    fitInputWidth: boolean;
+    tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>;
     options: import("@vunk/core").VueComponentPropsType<import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
         value: {
             required: true;
@@ -586,26 +616,6 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
         created: boolean;
     }>>>[];
-    popperClass: string;
-    clearable: boolean;
-    clearIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    autocomplete: string;
-    suffixIcon: string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
-    automaticDropdown: boolean;
-    effect: string;
-    filterable: boolean;
-    allowCreate: boolean;
-    remote: boolean;
-    multipleLimit: number;
-    defaultFirstOption: boolean;
-    reserveKeyword: boolean;
-    valueKey: string;
-    collapseTags: boolean;
-    collapseTagsTooltip: boolean;
-    teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    persistent: boolean;
-    fitInputWidth: boolean;
-    tagType: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "success" | "warning" | "info" | "danger", unknown>;
     selectSlots: import("./types").SelectSlots;
 }>;
 export default _default;

package/components/switch/index.css

@@ -0,0 +1,11 @@
+
+.el-switch.is-readonly{
+ --el-readonly-cursor: auto;
+}
+.el-switch.is-readonly.is-readonly{
+  opacity: .9;
+}
+.el-switch.is-readonly.is-readonly .el-switch__core, 
+.el-switch.is-readonly.is-readonly .el-switch__label{
+  cursor: var(--el-readonly-cursor);
+}

package/components/switch/index.js

@@ -2,6 +2,7 @@ import { switchProps, switchEmits, ElSwitch } from 'element-plus';
 import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
 import { defineComponent, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, renderSlot } from 'vue';
 import { createSwitchBindProps, createSwitchOnEmits } from '@vunk/form/shared/element-plus';
+import { useComputedReadonly } from '@vunk/form/composables';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -44,12 +45,17 @@ var script = defineComponent({
   props,
   setup(props2, { emit }) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const switchBindProps = createSwitchBindProps(props2, ["modelValue"]);
+    const switchBindProps = createSwitchBindProps(props2, [
+      "modelValue",
+      "disabled"
+    ]);
     const switchOnEmits = createSwitchOnEmits(emit);
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       switchBindProps,
-      switchOnEmits
+      switchOnEmits,
+      readonly
     };
   }
 });
@@ -62,13 +68,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       var _a;
       return [
         createVNode(_component_ElSwitch, mergeProps({
+          class: {
+            "is-readonly": _ctx.readonly
+          },
           modelValue: (_a = _ctx.modelValue) != null ? _a : _ctx.defaultModelValue
-        }, _ctx.switchBindProps, toHandlers(_ctx.switchOnEmits)), {
+        }, _ctx.switchBindProps, toHandlers(_ctx.switchOnEmits), {
+          disabled: _ctx.readonly || _ctx.disabled
+        }), {
           default: withCtx(() => [
             renderSlot(_ctx.$slots, "default")
           ]),
           _: 3
-        }, 16, ["modelValue"])
+        }, 16, ["class", "modelValue", "disabled"])
       ];
     }),
     _: 3

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

@@ -83,6 +83,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     "update:modelValue": (val: string | number | boolean) => boolean;

package/components/switch/src/index.vue.d.ts

@@ -83,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }, {
     formItemBindProps: import("vue").ComputedRef<{
         required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -99,12 +103,12 @@ declare const _default: import("vue").DefineComponent<{
         formItemSlots: import("../../form-item/src/types").FormItemSlots | undefined;
         elRef: any;
         inline: boolean;
+        readonly: boolean | undefined;
     }>;
     switchBindProps: import("vue").ComputedRef<{
         size: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => ("" | "default" | "small" | "large") & {}) | (() => "" | "default" | "small" | "large") | ((new (...args: any[]) => ("" | "default" | "small" | "large") & {}) | (() => "" | "default" | "small" | "large"))[], unknown, "" | "default" | "small" | "large"> | undefined;
         name: string;
         value: import("element-plus/es/utils").EpPropMergeType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
-        disabled: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         loading: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         width: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
         borderColor: string;
@@ -127,6 +131,7 @@ declare const _default: import("vue").DefineComponent<{
         change: (val: string | number | boolean) => void;
         "update:modelValue": (val: string | number | boolean) => void;
     };
+    readonly: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (val: string | number | boolean) => boolean;
     change: (val: string | number | boolean) => boolean;
@@ -216,9 +221,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
-    onChange?: ((val: string | number | boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((val: string | number | boolean) => any) | undefined;
+    onChange?: ((val: string | number | boolean) => any) | undefined;
     onInput?: ((val: string | number | boolean) => any) | undefined;
 }, {
     required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -228,15 +237,15 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     name: string;
     value: import("element-plus/es/utils").EpPropMergeType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     disabled: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     loading: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     width: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     borderColor: string;
-    modelValue: boolean;
     validateEvent: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    defaultModelValue: boolean;
+    modelValue: boolean;
     inlinePrompt: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     activeIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;
     inactiveIcon: import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) | ((new (...args: any[]) => (string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>) & {}) | (() => string | import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>))[], unknown, unknown>;
@@ -246,5 +255,6 @@ declare const _default: import("vue").DefineComponent<{
     inactiveColor: string;
     activeValue: import("element-plus/es/utils").EpPropMergeType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
     inactiveValue: import("element-plus/es/utils").EpPropMergeType<readonly [BooleanConstructor, StringConstructor, NumberConstructor], unknown, unknown>;
+    defaultModelValue: boolean;
 }>;
 export default _default;

package/components/upload/index.css

@@ -1,3 +1,13 @@
+
+
+.vkf-upload.is-readonly .el-upload,
+.vkf-upload.is-readonly .el-upload{
+  display: none;
+}
+.vkf-upload .el-upload-list{
+  min-width: 100px;
+}
+
 
 .el-upload-list__item-status-label{
   z-index: 1;

package/components/upload/index.js

@@ -5,6 +5,7 @@ import { pickObject } from '@vunk/core/shared/utils-object';
 import { createUploadBindProps } from '@vunk/form/shared/element-plus';
 import { NOOP } from '@vunk/core/shared/utils-function';
 import { RestFetch } from '@vunk/core/shared/utils-fetch';
+import { useComputedReadonly } from '@vunk/form/composables';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -398,18 +399,20 @@ var script = defineComponent({
   props,
   setup(props2) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const coreBindProps = createUploadBindProps(props2);
+    const coreBindProps = createUploadBindProps(props2, ["disabled"]);
     const uploadRef = shallowRef();
     const handleRemove = (file) => {
       var _a;
       (_a = uploadRef.value) == null ? void 0 : _a.handleRemove(file);
     };
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       pickObject,
       coreBindProps,
       uploadRef,
-      handleRemove
+      handleRemove,
+      readonly
     };
   }
 });
@@ -423,15 +426,20 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfFormItem = resolveComponent("VkfFormItem");
   return openBlock(), createBlock(_component_VkfFormItem, normalizeProps(guardReactiveProps(_ctx.formItemBindProps)), {
     default: withCtx(() => [
-      createVNode(_component_ElUpload, mergeProps(_ctx.coreBindProps, {
+      createVNode(_component_ElUpload, mergeProps({
+        class: ["vkf-upload", {
+          "is-readonly": _ctx.readonly
+        }]
+      }, _ctx.coreBindProps, {
         "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:fileList", $event)),
-        ref: "uploadRef"
+        ref: "uploadRef",
+        disabled: _ctx.readonly || _ctx.disabled
       }), createSlots({
         file: withCtx(({ file }) => [
           createVNode(_component_FileVue, {
             file,
             listType: _ctx.listType,
-            disabled: _ctx.disabled,
+            disabled: _ctx.readonly || _ctx.disabled,
             onPreview: _ctx.onPreview,
             onRemove: _ctx.handleRemove
           }, null, 8, ["file", "listType", "disabled", "onPreview", "onRemove"])
@@ -453,7 +461,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             createElementVNode("div", _hoisted_2, toDisplayString(_ctx.tip), 1)
           ])
         } : void 0
-      ]), 1040)
+      ]), 1040, ["class", "disabled"])
     ]),
     _: 3
   }, 16);

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

@@ -157,6 +157,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     'update:fileList': null;

package/components/upload/src/index.vue.d.ts

@@ -158,6 +158,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }, {
     formItemBindProps: import("vue").ComputedRef<{
         required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -174,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
         formItemSlots: import("../../form-item/src/types").FormItemSlots | undefined;
         elRef: any;
         inline: boolean;
+        readonly: boolean | undefined;
     }>;
     pickObject: <T extends import("@vunk/core").NormalObject, EX extends (keyof T)[] | undefined, KI extends keyof T>(data: T, opts?: {
         excludes?: EX | undefined;
@@ -183,7 +188,6 @@ declare const _default: import("vue").DefineComponent<{
         type: string;
         name: string;
         data: Record<string, any>;
-        disabled: boolean;
         drag: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         multiple: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         onChange: (uploadFile: UploadFile, uploadFiles: import("element-plus").UploadFiles) => void;
@@ -211,6 +215,7 @@ declare const _default: import("vue").DefineComponent<{
         handleRemove: AnyFunc;
     } | undefined>;
     handleRemove: (file: UploadFile) => void;
+    readonly: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:fileList': null;
     remove: (e: UploadFile) => UploadFile;
@@ -372,6 +377,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
     onRemove?: ((e: UploadFile) => any) | undefined;
     "onUpdate:fileList"?: ((...args: any[]) => any) | undefined;
@@ -384,6 +393,7 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     name: string;
     data: Record<string, any>;
     disabled: boolean;

package/composables/index.d.ts

@@ -1 +1,2 @@
 export * from './useSourceManager';
+export * from './useForm';