feat(form): 新增禁用（disabled）属性 (#2690)

jdf2e · Feb 9, 2024 · 14da68a · 14da68a
1 parent 791e8b0
commit 14da68a
Show file tree

Hide file tree

Showing 24 changed files with 158 additions and 90 deletions.
diff --git a/src/packages/__VUE/checkbox/index.taro.vue b/src/packages/__VUE/checkbox/index.taro.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
 import type { Component, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue-taro';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
+import { useFormDisabled } from '../form/common';
 const { create, componentName } = createComponent('checkbox');
 
 export default create({
@@ -40,6 +41,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const parent: any = inject(CHECKBOX_KEY, null);
     const state = reactive({
       partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
     });
 
     const pDisabled = computed(() => {
-      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
+      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
     });
 
     const checked = computed(() => !!props.modelValue);

diff --git a/src/packages/__VUE/checkbox/index.vue b/src/packages/__VUE/checkbox/index.vue
@@ -1,10 +1,11 @@
 <script lang="ts">
-import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount } from 'vue';
+import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, onBeforeUnmount, toRef } from 'vue';
 import type { Component, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { CheckNormal, Checked, CheckDisabled } from '@nutui/icons-vue';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { CHECKBOX_KEY, CheckboxTextPosition, CheckboxShape } from './types';
+import { useFormDisabled } from '../form/common';
 const { create, componentName } = createComponent('checkbox');
 
 export default create({
@@ -40,6 +41,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const parent: any = inject(CHECKBOX_KEY, null);
     const state = reactive({
       partialSelect: props.indeterminate
@@ -56,7 +58,7 @@ export default create({
     });
 
     const pDisabled = computed(() => {
-      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : props.disabled) : props.disabled;
+      return hasParent.value ? (parent.disabled.value ? parent.disabled.value : disabled.value) : disabled.value;
     });
 
     const checked = computed(() => !!props.modelValue);

diff --git a/src/packages/__VUE/form/common.ts b/src/packages/__VUE/form/common.ts
@@ -1,10 +1,16 @@
 import { getPropByPath, isPromise } from '@/packages/utils/util';
-import { computed, PropType, provide, reactive, watch } from 'vue';
+import { computed, provide, reactive, watch } from 'vue';
+import { useChildren, useParent } from '@/packages/utils';
 import { FORM_KEY } from './types';
-import { useChildren } from '@/packages/utils';
+import type { ComputedRef, PropType, Ref } from 'vue';
 import type { FormItemRule } from '../formitem/types';
 import type { ErrorMessage, FormRule, FormRules, FormLabelPosition, FormStarPosition } from './types';
 
+export const useFormDisabled = (disabled: Ref<boolean>): ComputedRef<boolean> => {
+  const { parent } = useParent(FORM_KEY);
+  return computed(() => disabled.value || parent?.props?.disabled || false);
+};
+
 export const component = (components: any) => {
   return {
     props: {
@@ -16,6 +22,10 @@ export const component = (components: any) => {
         type: Object as PropType<FormRules>,
         default: () => ({})
       },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
       labelPosition: {
         type: String as PropType<FormLabelPosition>,
         default: 'left'
@@ -71,7 +81,7 @@ export const component = (components: any) => {
       };
 
       const checkRule = async (item: FormRule): Promise<ErrorMessage | boolean> => {
-        const { rules, prop } = item;
+        const { rules = [], prop } = item;
 
         const _Promise = (errorMsg: ErrorMessage): Promise<ErrorMessage> => {
           return new Promise((resolve, reject) => {

diff --git a/src/packages/__VUE/form/doc.en-US.md b/src/packages/__VUE/form/doc.en-US.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | Form data object (required when using form verification) | object |  |
 | rules | Unified configuration FormItem attr rules | { prop: FormItemRule[] } | `{}` |
+| disabled | Disable all data entry components under the form | boolean | `false` |
 | label-position`v4.2.4` | The location of the form item label | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | The red star position of the single label is required | `left` \| `right` | `left` |
 

diff --git a/src/packages/__VUE/form/doc.md b/src/packages/__VUE/form/doc.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
 | rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
+| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
 | label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
 

diff --git a/src/packages/__VUE/form/doc.taro.md b/src/packages/__VUE/form/doc.taro.md
@@ -47,6 +47,7 @@ app.use(FormItem);
 | --- | --- | --- | --- |
 | model-value | 表单数据对象(使用表单校验时，_必填_) | object |  |
 | rules | 统一配置每个 `FormItem` 的 `rules` | { prop: FormItemRule[] } | `{}` |
+| disabled | 禁用表单下的所有数据录入组件 | boolean | `false` |
 | label-position`v4.2.4` | 表单项 label 的位置 | `top` \| `left` \| `right` | `left` |
 | star-position`v4.2.4` | 必填表单项 label 的红色星标位置 | `left` \| `right` | `left` |
 

diff --git a/src/packages/__VUE/input/index.taro.vue b/src/packages/__VUE/input/index.taro.vue
@@ -56,12 +56,14 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
+import Taro from '@tarojs/taro';
+import { MaskClose } from '@nutui/icons-vue-taro';
+import { ref, reactive, computed, onMounted, watch, h, toRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber } from './util';
-import { MaskClose } from '@nutui/icons-vue-taro';
-import Taro from '@tarojs/taro';
+import { useFormDisabled } from '../form/common';
 
+import type { PropType, ComputedRef } from 'vue';
 import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType, InputEvent } from './type';
 
 const { componentName, create } = createComponent('input');
@@ -158,6 +160,7 @@ export default create({
   emits: ['update:modelValue', 'blur', 'focus', 'clear', 'keypress', 'click', 'clickInput', 'confirm'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const active = ref(false);
 
     const inputRef = ref();
@@ -193,7 +196,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--disabled`]: disabled.value,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
         [`${prefixCls}--border`]: props.border,
@@ -243,7 +246,7 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       active.value = true;
@@ -252,7 +255,7 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       setTimeout(() => {
@@ -271,7 +274,7 @@ export default create({
 
     const clear = (event: Event) => {
       event.stopPropagation();
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('update:modelValue', '', event);
       // emit('change', '', event);
       emit('clear', '', event);
@@ -285,7 +288,7 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       emit('clickInput', event);
@@ -341,6 +344,7 @@ export default create({
       active,
       classes,
       styles,
+      disabled,
       onInput,
       onFocus,
       onBlur,

diff --git a/src/packages/__VUE/input/index.vue b/src/packages/__VUE/input/index.vue
@@ -52,10 +52,11 @@
   </view>
 </template>
 <script lang="ts">
-import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h } from 'vue';
+import { PropType, ref, reactive, computed, onMounted, watch, ComputedRef, h, toRef } from 'vue';
+import { MaskClose } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { formatNumber, mapInputType } from './util';
-import { MaskClose } from '@nutui/icons-vue';
+import { useFormDisabled } from '../form/common';
 
 import type { InputType, InputAlignType, InputFormatTrigger, InputTarget, ConfirmTextType } from './type';
 
@@ -146,6 +147,7 @@ export default create({
   expose: ['focus', 'blur', 'select'],
 
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const active = ref(false);
     const inputRef = ref();
     const getModelValue = () => String(props.modelValue ?? '');
@@ -162,7 +164,7 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--disabled`]: disabled.value,
         [`${prefixCls}--required`]: props.required,
         [`${prefixCls}--error`]: props.error,
         [`${prefixCls}--border`]: props.border,
@@ -208,7 +210,7 @@ export default create({
     };
 
     const onFocus = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       active.value = true;
@@ -217,7 +219,7 @@ export default create({
     };
 
     const onBlur = (event: Event) => {
-      if (props.disabled || props.readonly) {
+      if (disabled.value || props.readonly) {
         return;
       }
       setTimeout(() => {
@@ -236,7 +238,7 @@ export default create({
 
     const clear = (event: Event) => {
       event.stopPropagation();
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('update:modelValue', '', event);
       // emit('change', '', event);
       emit('clear', '', event);
@@ -250,7 +252,7 @@ export default create({
     };
 
     const onClickInput = (event: MouseEvent) => {
-      if (props.disabled) {
+      if (disabled.value) {
         return;
       }
       emit('clickInput', event);
@@ -306,6 +308,7 @@ export default create({
       active,
       classes,
       styles,
+      disabled,
       onInput,
       onFocus,
       onBlur,

diff --git a/src/packages/__VUE/inputnumber/index.taro.vue b/src/packages/__VUE/inputnumber/index.taro.vue
@@ -38,10 +38,11 @@
   </view>
 </template>
 <script lang="ts">
-import { computed, watch } from 'vue';
+import { computed, toRef, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { pxCheck } from '@/packages/utils/pxCheck';
 import { Minus, Plus } from '@nutui/icons-vue-taro';
+import { useFormDisabled } from '../form/common';
 const { componentName, create } = createComponent('input-number');
 export default create({
   components: { Minus, Plus },
@@ -85,11 +86,12 @@ export default create({
   },
   emits: ['update:modelValue', 'change', 'blur', 'focus', 'reduce', 'add', 'overlimit'],
   setup(props, { emit }) {
+    const disabled = useFormDisabled(toRef(props, 'disabled'));
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--disabled`]: props.disabled
+        [`${prefixCls}--disabled`]: disabled.value
       };
     });
     const fixedDecimalPlaces = (v: string | number): string => {
@@ -106,13 +108,13 @@ export default create({
       if (Number(props.modelValue) !== Number(output_value)) emit('change', output_value, event);
     };
     const addAllow = (value = Number(props.modelValue)): boolean => {
-      return value < Number(props.max) && !props.disabled;
+      return value < Number(props.max) && !disabled.value;
     };
     const reduceAllow = (value = Number(props.modelValue)): boolean => {
-      return value > Number(props.min) && !props.disabled;
+      return value > Number(props.min) && !disabled.value;
     };
     const reduce = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('reduce', event);
       let output_value = Number(props.modelValue) - Number(props.step);
       if (reduceAllow() && output_value >= Number(props.min)) {
@@ -123,7 +125,7 @@ export default create({
       }
     };
     const add = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       emit('add', event);
       let output_value = Number(props.modelValue) + Number(props.step);
       if (addAllow() && output_value <= Number(props.max)) {
@@ -134,15 +136,15 @@ export default create({
       }
     };
     const focus = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) {
         blur(event);
         return;
       }
       emit('focus', event);
     };
     const blur = (event: Event) => {
-      if (props.disabled) return;
+      if (disabled.value) return;
       if (props.readonly) return;
       const input = event.target as HTMLInputElement;
       let value = Number(input.value);
@@ -178,6 +180,7 @@ export default create({
 
     return {
       classes,
+      disabled,
       change,
       blur,
       focus,