feat(switch): add loading prop (#914)

components/switch/__tests__/switch-914.spec.ts

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils';
+import FSwitch from '../switch.vue';
+
+const prefixCls = 'fes-switch';
+
+describe('switch loading prop #914', () => {
+    test('loading: true shows the loading icon', async () => {
+        const wrapper = mount(FSwitch, {
+            props: {
+                modelValue: false,
+                loading: true,
+            },
+        });
+
+        const loadingIcon = wrapper.find(`.${prefixCls}-loading`);
+        expect(loadingIcon.exists()).toBe(true);
+    });
+
+    test('loading: true blocks click toggle', async () => {
+        const wrapper = mount(FSwitch, {
+            props: {
+                modelValue: false,
+                loading: true,
+            },
+        });
+
+        expect(wrapper.classes('is-checked')).toBe(false);
+
+        await wrapper.trigger('click');
+
+        expect(wrapper.classes('is-checked')).toBe(false);
+    });
+
+    test('loading: true shows loading icon in checked state', async () => {
+        const wrapper = mount(FSwitch, {
+            props: {
+                modelValue: true,
+                loading: true,
+            },
+        });
+
+        expect(wrapper.classes('is-checked')).toBe(true);
+        const loadingIcon = wrapper.find(`.${prefixCls}-loading`);
+        expect(loadingIcon.exists()).toBe(true);
+    });
+
+    test('loading: false does not show loading icon', async () => {
+        const wrapper = mount(FSwitch, {
+            props: {
+                modelValue: false,
+                loading: false,
+            },
+        });
+
+        const loadingIcon = wrapper.find(`.${prefixCls}-loading`);
+        expect(loadingIcon.exists()).toBe(false);
+    });
+
+    test('normal toggle works when loading is false', async () => {
+        const wrapper = mount(FSwitch, {
+            props: {
+                modelValue: false,
+                loading: false,
+            },
+        });
+
+        expect(wrapper.classes('is-checked')).toBe(false);
+
+        await wrapper.trigger('click');
+
+        expect(wrapper.classes('is-checked')).toBe(true);
+    });
+});

components/switch/switch.vue

@@ -55,6 +55,10 @@ export const switchProps = {
         type: String as PropType<SwitchSize>,
         default: 'normal',
     },
+    loading: {
+        type: Boolean,
+        default: false,
+    },
 } as const satisfies ComponentObjectPropsOptions;
 
 export type SwitchProps = ExtractPublicPropTypes<typeof switchProps>;
@@ -87,7 +91,10 @@ export default defineComponent({
             }
         });
 
-        const loadingRef = ref(false);
+        const beforeChangeLoadingRef = ref(false);
+        const loadingRef = computed(
+            () => props.loading || beforeChangeLoadingRef.value,
+        );
 
         const handleChange = () => {
             ctx.emit(CHANGE_EVENT, currentValue.value);
@@ -108,18 +115,21 @@ export default defineComponent({
             if (innerDisabled.value) {
                 return;
             }
+            if (loadingRef.value) {
+                return;
+            }
             if (isFunction(props.beforeChange)) {
-                loadingRef.value = true;
+                beforeChangeLoadingRef.value = true;
                 try {
                     const confirm = await props.beforeChange(
                         currentValue.value,
                     );
-                    loadingRef.value = false;
+                    beforeChangeLoadingRef.value = false;
                     if (confirm === false) {
                         return;
                     }
                 } catch (e) {
-                    loadingRef.value = false;
+                    beforeChangeLoadingRef.value = false;
                     return;
                 }
             }