feat(switch): add disabled prop & mark disable deprecated (#2959)

jdf2e · Mar 11, 2024 · ca94cef · ca94cef
1 parent 27bc52d
commit ca94cef
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 15 deletions.
diff --git a/packages/nutui-taro-demo/src/feedback/pages/switch/disabled.vue b/packages/nutui-taro-demo/src/feedback/pages/switch/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-switch v-model="val" disable />
+  <nut-switch v-model="val" disabled />
 </template>
 <script setup>
 import { ref } from 'vue';

diff --git a/src/packages/__VUE/switch/__tests__/switch.spec.ts b/src/packages/__VUE/switch/__tests__/switch.spec.ts
@@ -24,13 +24,13 @@ test('prop modelValue test', () => {
   expect(wrapper.classes()).toContain('nut-switch-open');
 });
 
-test('prop disable test', () => {
+test('prop disabled test', () => {
   const wrapper = mount(Switch, {
     props: {
-      disable: true
+      disabled: true
     }
   });
-  expect(wrapper.classes()).toContain('nut-switch-disable');
+  expect(wrapper.classes()).toContain('nut-switch-disabled');
 });
 
 test('prop loading test', () => {

diff --git a/src/packages/__VUE/switch/demo/disabled.vue b/src/packages/__VUE/switch/demo/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <nut-switch v-model="val" disable />
+  <nut-switch v-model="val" disabled />
 </template>
 <script setup>
 import { ref } from 'vue';

diff --git a/src/packages/__VUE/switch/doc.en-US.md b/src/packages/__VUE/switch/doc.en-US.md
@@ -53,14 +53,15 @@ app.use(Switch);
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | v-model | Status of Switch | boolean \| string \| number | `false` |
-| disable | Disable status | boolean | `false` |
+| disabled `version` | Disable status | boolean | `false` |
 | loading | Loading status | boolean | `false` |
 | active-color | Background color when active | string | `#fa2c19` |
 | inactive-color | Background color when inactive | string | `#ebebeb` |
 | active-text | Word description when active | string | - |
 | inactive-text | Word description when inactive | string | - |
 | active-value | Value when active | boolean ｜ string ｜ number | `true` |
 | inactive-value | Value when inactive | boolean ｜ string ｜ number | `false` |
+| disable `deprecated` | Disable status | boolean | `false` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/switch/doc.md b/src/packages/__VUE/switch/doc.md
@@ -53,14 +53,15 @@ app.use(Switch);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model | 开关状态 | boolean \| string \| number | `false` |
-| disable | 禁用状态 | boolean | `false` |
+| disabled `version` | 禁用状态 | boolean | `false` |
 | loading | 加载状态 | boolean | `false` |
 | active-color | 打开时的背景颜色 | string | `#fa2c19` |
 | inactive-color | 关闭时的背景颜色 | string | `#ebebeb` |
 | active-text | 打开时文字描述 | string | - |
 | inactive-text | 关闭时文字描述 | string | - |
 | active-value | 打开时组件的值 | boolean ｜ string ｜ number | `true` |
 | inactive-value | 关闭组件的值 | boolean ｜ string ｜ number | `false` |
+| disable `deprecated` | 禁用状态 | boolean | `false` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/switch/doc.taro.md b/src/packages/__VUE/switch/doc.taro.md
@@ -53,14 +53,15 @@ app.use(Switch);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model | 开关状态 | boolean \| string \| number | `false` |
-| disable | 禁用状态 | boolean | `false` |
+| disabled `version` | 禁用状态 | boolean | `false` |
 | loading | 加载状态 | boolean | `false` |
 | active-color | 打开时的背景颜色 | string | `#fa2c19` |
 | inactive-color | 关闭时的背景颜色 | string | `#ebebeb` |
 | active-text | 打开时文字描述 | string | - |
 | inactive-text | 关闭时文字描述 | string | - |
 | active-value | 打开时组件的值 | boolean ｜ string ｜ number | `true` |
 | inactive-value | 关闭组件的值 | boolean ｜ string ｜ number | `false` |
+| disable `deprecated` | 禁用状态 | boolean | `false` |
 
 ### Slots
 

diff --git a/src/packages/__VUE/switch/index.scss b/src/packages/__VUE/switch/index.scss
@@ -36,7 +36,7 @@
       }
     }
   }
-  &.nut-switch-disable {
+  &.nut-switch-disabled {
     opacity: 0.6;
   }
   &.nut-switch-base {

diff --git a/src/packages/__VUE/switch/index.taro.vue b/src/packages/__VUE/switch/index.taro.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, toRef, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading1 } from '@nutui/icons-vue-taro';
 import { useFormDisabled } from '../form/common';
@@ -26,6 +26,13 @@ export default create({
       type: [String, Number, Boolean],
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @deprecated Please use `disabled` prop instead.
+     */
     disable: {
       type: Boolean,
       default: false
@@ -61,14 +68,15 @@ export default create({
   },
   emits: ['change', 'update:modelValue', 'update:loading'],
   setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disable'));
+    const legacyDisabled = computed(() => props.disabled || props.disable);
+    const disabled = useFormDisabled(legacyDisabled);
     const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
         [isActive.value ? 'nut-switch-open' : 'nut-switch-close']: true,
-        [`${prefixCls}-disable`]: disabled.value,
+        [`${prefixCls}-disabled`]: disabled.value,
         [`${prefixCls}-base`]: true
       };
     });

diff --git a/src/packages/__VUE/switch/index.vue b/src/packages/__VUE/switch/index.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { computed, toRef, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { Loading1 } from '@nutui/icons-vue';
 import { useFormDisabled } from '../form/common';
@@ -26,6 +26,13 @@ export default create({
       type: [String, Number, Boolean],
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @deprecated Please use `disabled` prop instead.
+     */
     disable: {
       type: Boolean,
       default: false
@@ -61,14 +68,15 @@ export default create({
   },
   emits: ['change', 'update:modelValue', 'update:loading'],
   setup(props, { emit }) {
-    const disabled = useFormDisabled(toRef(props, 'disable'));
+    const legacyDisabled = computed(() => props.disabled || props.disable);
+    const disabled = useFormDisabled(legacyDisabled);
     const isActive = computed(() => props.modelValue === props.activeValue);
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
         [isActive.value ? 'nut-switch-open' : 'nut-switch-close']: true,
-        [`${prefixCls}-disable`]: disabled.value,
+        [`${prefixCls}-disabled`]: disabled.value,
         [`${prefixCls}-base`]: true
       };
     });