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

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

@@ -76,6 +76,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     click: (evt: MouseEvent) => boolean;

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

@@ -74,6 +74,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }, {
     formBindProps: import("vue").ComputedRef<{
         required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown> | undefined;
@@ -90,6 +94,7 @@ 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<{
         type: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "success" | "text" | "primary" | "warning" | "info" | "danger", unknown>;
@@ -190,6 +195,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
     onClick?: ((evt: MouseEvent) => any) | undefined;
 }, {
@@ -201,6 +210,7 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     link: boolean;
     validate: boolean;
     disabled: boolean;

package/components/checkbox/index.css

@@ -0,0 +1,38 @@
+
+.el-checkbox-group.is-readonly .el-checkbox,
+.el-checkbox-group.is-readonly{
+  --el-readonly-cursor: auto;
+  --el-disabled-text-color: var(--el-checkbox-text-color);
+  --el-checkbox-disabled-checked-input-fill: var(--el-checkbox-bg-color);
+  --el-checkbox-disabled-checked-icon-color: var(--el-checkbox-checked-icon-color);
+}
+
+
+.el-checkbox-group.is-readonly .el-checkbox__input.is-checked+.el-checkbox__label {
+  color: var(--el-checkbox-checked-text-color);
+}
+.el-checkbox-group.is-readonly .el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: var(--el-checkbox-checked-bg-color);
+    border-color: var(--el-checkbox-checked-input-border-color);
+}
+.el-checkbox-group.is-readonly .el-checkbox__input.is-disabled+span.el-checkbox__label,
+.el-checkbox-group.is-readonly .el-checkbox__input.is-disabled .el-checkbox__inner {
+  cursor: var(--el-readonly-cursor);
+}
+
+
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-checked:first-child .el-checkbox-button__inner{
+  border-left-color: var(--el-checkbox-button-checked-border-color);
+}
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-checked .el-checkbox-button__inner {
+    color: var(--el-checkbox-button-checked-text-color);
+    background-color: var(--el-checkbox-button-checked-bg-color);
+    border-color: var(--el-checkbox-button-checked-border-color);
+    box-shadow: -1px 0 0 0 var(--el-color-primary-light-7);
+}
+
+.el-checkbox-group.is-readonly .el-checkbox-button.is-disabled .el-checkbox-button__inner{
+  cursor: var(--el-readonly-cursor);
+}

package/components/checkbox/index.js

@@ -3,6 +3,7 @@ import { useCheckboxGroupProps, checkboxGroupEmits, ElCheckbox, ElCheckboxGroup,
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, createElementBlock, Fragment, renderList, resolveDynamicComponent, createTextVNode, toDisplayString } from 'vue';
 import { createCheckboxGroupBindProps, createCheckboxGroupOnEmits } 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;
@@ -55,18 +56,20 @@ var script = defineComponent({
   props,
   setup(props2, { emit }) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const coreBindProps = createCheckboxGroupBindProps(props2);
+    const coreBindProps = createCheckboxGroupBindProps(props2, ["disabled"]);
     const coreOnEmits = createCheckboxGroupOnEmits(emit);
     const options = computed(() => {
       return props2.options.filter((item) => item.value !== void 0 && item.value !== null);
     });
     !props2.modelValue && props2.defaultModelValue && emit("update:modelValue", props2.defaultModelValue);
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       coreBindProps,
       coreOnEmits,
       options,
-      pickObject
+      pickObject,
+      readonly
     };
   }
 });
@@ -76,7 +79,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_ElCheckboxGroup, mergeProps(_ctx.coreBindProps, toHandlers(_ctx.coreOnEmits)), {
+      createVNode(_component_ElCheckboxGroup, 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" ? "ElCheckboxButton" : "ElCheckbox"), mergeProps({
@@ -96,7 +105,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           }), 128))
         ]),
         _: 1
-      }, 16)
+      }, 16, ["class", "disabled"])
     ]),
     _: 1
   }, 16);

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

@@ -96,6 +96,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     "update:modelValue": (val: import("element-plus").CheckboxValueType[]) => boolean;

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

@@ -94,6 +94,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;
@@ -110,17 +114,17 @@ 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 | undefined;
-        disabled: boolean;
         id: string | undefined;
-        modelValue: (string | number)[] | undefined;
         validateEvent: boolean;
-        min: number | undefined;
+        modelValue: (string | number)[] | undefined;
         max: number | undefined;
+        min: number | undefined;
         textColor: string | undefined;
         tag: string;
     }>;
@@ -133,6 +137,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: import("element-plus").CheckboxValueType[]) => boolean;
     change: (val: import("element-plus").CheckboxValueType[]) => boolean;
@@ -232,9 +237,13 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 }>> & {
-    onChange?: ((val: import("element-plus").CheckboxValueType[]) => any) | undefined;
     "onUpdate:modelValue"?: ((val: import("element-plus").CheckboxValueType[]) => any) | undefined;
+    onChange?: ((val: import("element-plus").CheckboxValueType[]) => any) | undefined;
 }, {
     required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     type: "default" | "button";
@@ -245,16 +254,17 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     fill: string;
     disabled: boolean;
     id: string;
-    modelValue: (string | number)[];
     validateEvent: boolean;
-    min: number;
+    modelValue: (string | number)[];
+    options: import("../../../shared/types/form").CheckboxProps[];
+    defaultModelValue: any[];
     max: number;
+    min: number;
     textColor: string;
     tag: string;
-    options: import("../../../shared/types/form").CheckboxProps[];
-    defaultModelValue: any[];
 }>;
 export default _default;

package/components/color-picker/src/ctx.d.ts

@@ -62,6 +62,10 @@ export declare const props: {
         type: BooleanConstructor;
         default: boolean;
     };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
 };
 export declare const emits: {
     change: null;

package/components/color-picker/src/index.vue.d.ts

@@ -62,6 +62,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;
@@ -78,18 +82,19 @@ 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: "" | "default" | "small" | "large" | undefined;
         disabled: boolean;
         id: string | undefined;
-        modelValue: string | undefined;
         tabindex: string | number;
         validateEvent: boolean;
+        popperClass: string | undefined;
+        modelValue: string | undefined;
         showAlpha: boolean;
         colorFormat: string | undefined;
-        popperClass: string | undefined;
         predefine: unknown[] | undefined;
     }>;
     coreOnEmits: {
@@ -165,9 +170,13 @@ 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;
+    onChange?: ((...args: any[]) => any) | undefined;
     "onActive-change"?: ((...args: any[]) => any) | undefined;
 }, {
     required: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -178,6 +187,7 @@ declare const _default: import("vue").DefineComponent<{
     formItemSize: "default" | "small" | "large";
     formItemSlots: import("../../form-item/src/types").FormItemSlots;
     inline: boolean;
+    readonly: boolean;
     disabled: boolean;
     tabindex: string | number;
     validateEvent: boolean;

package/components/date-picker/index.js

@@ -2,6 +2,7 @@ import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
 import { datePickerProps, datePickerEmits as datePickerEmits$1, createDatePickerBindProps, createDatePickerOnEmits } from '@vunk/form/shared/element-plus';
 import { defineComponent, resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createVNode, mergeProps, toHandlers, createSlots, renderList, resolveDynamicComponent } from 'vue';
 import { ElDatePicker } from 'element-plus';
+import { useComputedReadonly } from '@vunk/form/composables';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -22,7 +23,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const props = __spreadProps(__spreadValues(__spreadValues({}, _VkfFormItemCtx.props), datePickerProps), {
+const props = __spreadProps(__spreadValues(__spreadValues({}, datePickerProps), _VkfFormItemCtx.props), {
   datePickerSlots: {
     type: Object,
     default: void 0
@@ -40,12 +41,17 @@ var script = defineComponent({
   props,
   setup(props2, { emit }) {
     const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
-    const datePickerBindProps = createDatePickerBindProps(props2, ["type"]);
+    const datePickerBindProps = createDatePickerBindProps(props2, [
+      "type",
+      "readonly"
+    ]);
     const datePickerOnEmits = createDatePickerOnEmits(emit);
+    const readonly = useComputedReadonly(props2);
     return {
       formItemBindProps,
       datePickerBindProps,
-      datePickerOnEmits
+      datePickerOnEmits,
+      readonly
     };
   }
 });
@@ -55,7 +61,7 @@ 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_ElDatePicker, mergeProps(_ctx.datePickerBindProps, { type: _ctx.type }, toHandlers(_ctx.datePickerOnEmits)), createSlots({ _: 2 }, [
+      createVNode(_component_ElDatePicker, mergeProps(_ctx.datePickerBindProps, { type: _ctx.type }, toHandlers(_ctx.datePickerOnEmits), { readonly: _ctx.readonly }), createSlots({ _: 2 }, [
         renderList(_ctx.datePickerSlots, (item, key) => {
           return {
             name: key,
@@ -64,7 +70,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           };
         })
-      ]), 1040, ["type"])
+      ]), 1040, ["type", "readonly"])
     ]),
     _: 1
   }, 16);

package/components/date-picker/src/ctx.d.ts

@@ -5,6 +5,51 @@ export declare const props: {
         type: PropType<DatePickerSlots>;
         default: undefined;
     };
+    required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
+    label: StringConstructor;
+    labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
+    prop: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemProp & {}) | (() => import("element-plus").FormItemProp) | ((new (...args: any[]) => import("element-plus").FormItemProp & {}) | (() => import("element-plus").FormItemProp))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    rules: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    error: StringConstructor;
+    validateStatus: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    for: StringConstructor;
+    inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
+    showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    formItemSize: {
+        type: PropType<"default" | "small" | "large">;
+        default: string;
+    };
+    formItemSlots: {
+        type: PropType<import("../../form-item/src/types").FormItemSlots>;
+        default: undefined;
+    };
+    elRef: {
+        type: PropType<any>;
+        required: boolean;
+    };
+    inline: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     type: {
         type: PropType<"year" | "month" | "date" | "dates" | "week" | "datetime" | "datetimerange" | "daterange" | "monthrange">;
         default: string;
@@ -23,7 +68,6 @@ export declare const props: {
     };
     shortcuts: import("element-plus/es/utils").EpPropFinalized<ArrayConstructor, unknown, unknown, () => never[], boolean>;
     arrowControl: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    label: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
     tabindex: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (string | number) & {}) | (() => string | number) | ((new (...args: any[]) => (string | number) & {}) | (() => string | number))[], unknown, unknown, 0, boolean>;
     validateEvent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     unlinkPanels: BooleanConstructor;
@@ -65,7 +109,6 @@ export declare const props: {
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
     disabled: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
     placeholder: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => {}, boolean>;
@@ -86,46 +129,6 @@ export declare const props: {
         __epPropKey: true;
     };
     isRange: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    required: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
-    labelWidth: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, "", boolean>;
-    prop: {
-        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemProp & {}) | (() => import("element-plus").FormItemProp) | ((new (...args: any[]) => import("element-plus").FormItemProp & {}) | (() => import("element-plus").FormItemProp))[], unknown, unknown>>;
-        readonly required: false;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    rules: {
-        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>) | ((new (...args: any[]) => import("element-plus").FormItemRule | import("element-plus").FormItemRule[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").FormItemRule>))[], unknown, unknown>>;
-        readonly required: false;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    error: StringConstructor;
-    validateStatus: {
-        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "error" | "success" | "validating", unknown>>;
-        readonly required: false;
-        readonly validator: ((val: unknown) => boolean) | undefined;
-        __epPropKey: true;
-    };
-    for: StringConstructor;
-    inlineMessage: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, BooleanConstructor], unknown, unknown, "", boolean>;
-    showMessage: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    formItemSize: {
-        type: PropType<"default" | "small" | "large">;
-        default: string;
-    };
-    formItemSlots: {
-        type: PropType<import("../../form-item/src/types").FormItemSlots>;
-        default: undefined;
-    };
-    elRef: {
-        type: PropType<any>;
-        required: boolean;
-    };
-    inline: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
 };
 export declare const emits: {
     'update:modelValue': null;

package/components/date-picker/src/ctx.js

@@ -20,7 +20,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const props = __spreadProps(__spreadValues(__spreadValues({}, _VkfFormItemCtx.props), datePickerProps), {
+const props = __spreadProps(__spreadValues(__spreadValues({}, datePickerProps), _VkfFormItemCtx.props), {
   datePickerSlots: {
     type: Object,
     default: void 0