From e759dd505ff305b6ab9248be62c0112974237857 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 23 Mar 2023 22:16:34 +0800
Subject: [PATCH] feat(components): add disabled prop supports for switch
 component (#3564)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area console

#### What this PR does / why we need it:

为 Switch 组件添加 disabled 属性以支持禁用。

<img width="1403" alt="image" src="https://user-images.githubusercontent.com/21301288/226829739-914eca3d-6d33-4d8c-9cc8-fe19b655ad9d.png">

#### Special notes for your reviewer:

1. `cd path/to/console/packages/components`
2. `pnpm story:dev`
3. 测试 Switch 组件的 disabled 属性是否工作正常。

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../components/src/components/switch/Switch.vue       | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/console/packages/components/src/components/switch/Switch.vue b/console/packages/components/src/components/switch/Switch.vue
index 443659a6c..01fced8e9 100644
--- a/console/packages/components/src/components/switch/Switch.vue
+++ b/console/packages/components/src/components/switch/Switch.vue
@@ -2,9 +2,11 @@
 const props = withDefaults(
   defineProps<{
     modelValue?: boolean;
+    disabled?: boolean;
   }>(),
   {
     modelValue: false,
+    disabled: false,
   }
 );
 
@@ -14,6 +16,8 @@ const emit = defineEmits<{
 }>();
 
 const handleChange = () => {
+  if (props.disabled) return;
+
   emit("update:modelValue", !props.modelValue);
   emit("change", !props.modelValue);
 };
@@ -24,11 +28,13 @@ const handleChange = () => {
       :class="{
         'bg-gray-200': !modelValue,
         '!bg-primary': modelValue,
+        'switch-disabled': disabled,
       }"
       aria-checked="false"
       class="switch-inner"
       role="switch"
       type="button"
+      :disabled="disabled"
       @click="handleChange"
     >
       <span
@@ -63,6 +69,11 @@ const handleChange = () => {
     ease-in-out
     duration-200;
 
+    &.switch-disabled {
+      @apply opacity-60
+      cursor-not-allowed;
+    }
+
     .switch-indicator {
       @apply pointer-events-none
       inline-block