feat(toggle): support disabled

docs/components/toggle.md

@@ -11,7 +11,8 @@ This document is mainly used to describe some features and usage of the ShadcnTo
 ::: raw
 
 <CodeRunner title="Usage">
-    <ShadcnToggle v-model="defaultValue">B</ShadcnToggle>
+    <p>Default Value: {{ defaultValue }}</p>
+    <ShadcnToggle v-model="defaultValue" value="B">B</ShadcnToggle>
 </CodeRunner>
 
 :::
@@ -20,30 +21,55 @@ This document is mainly used to describe some features and usage of the ShadcnTo
 
 ```vue
 <template>
-     <ShadcnToggle v-model="defaultValue">B</ShadcnToggle>
+    <p>Default Value: {{ defaultValue }}</p>
+    <ShadcnToggle v-model="defaultValue" value="B">B</ShadcnToggle>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const defaultValue = ref(false)
+const defaultValue = ref(null)
 </script>
 ```
 
 :::
 
+## Disabled
+
+::: raw
+
+<CodeRunner title="Disabled">
+    <ShadcnToggle v-model="defaultValue" value="B">B</ShadcnToggle>
+    <ShadcnToggle v-model="disabledValue" disabled value="D">D</ShadcnToggle>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnToggle value="B">B</ShadcnToggle>
+    <ShadcnToggle disabled value="D">D</ShadcnToggle>
+</template>
+```
+
+:::
+
 ## Toggle Props
 
 <ApiTable title="Props"
     :headers="['Attribute', 'Description', 'Type', 'Default Value']"
     :columns="[
         ['modelValue', 'You can use v-model to bind data in both directions', 'any', '-'],
         ['value', 'The value of the toggle', 'any', '-'],
+        ['disabled', 'Whether the toggle is disabled', 'boolean', 'false'],
     ]">
 </ApiTable>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const defaultValue = ref(false)
+const defaultValue = ref(null)
+const disabledValue = ref(null)
 </script>

src/App.vue

@@ -1,12 +1,15 @@
 <template>
   <div class="p-32">
     <p>Default Value: {{ defaultValue }}</p>
-    <ShadcnToggle v-model="defaultValue" value="love">Love</ShadcnToggle>
+    <ShadcnSpace>
+      <ShadcnToggle v-model="defaultValue" value="B">B</ShadcnToggle>
+      <ShadcnToggle v-model="defaultValue" disabled value="D">D</ShadcnToggle>
+    </ShadcnSpace>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const defaultValue = ref(false)
+const defaultValue = ref(null)
 </script>

src/ui/toggle/ShadcnToggle.vue

@@ -1,10 +1,15 @@
 <template>
   <button :aria-checked="isSelected"
           :data-state="isSelected ? 'checked' : 'unchecked'"
+          :disabled="disabled"
           :class="[
-              'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+              'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
               'h-10 w-10 px-1 py-1',
-              isSelected && 'bg-accent text-accent-foreground'
+              isSelected && 'bg-accent text-accent-foreground',
+              {
+                'cursor-pointer': !disabled,
+                'cursor-not-allowed opacity-50': disabled
+              }
           ]"
           @click="onToggle">
     <slot/>
@@ -15,13 +20,17 @@
 import { computed } from 'vue'
 import { ToggleEmits, ToggleProps } from './types'
 
-const props = defineProps<ToggleProps>()
+const props = withDefaults(defineProps<ToggleProps>(), {
+  disabled: false
+})
 const emit = defineEmits<ToggleEmits>()
 
 const isSelected = computed(() => props.modelValue === props.value)
 
 const onToggle = () => {
-  emit('update:modelValue', props.value)
-  emit('on-change', props.value)
+  if (!props.disabled) {
+    emit('update:modelValue', isSelected.value ? null : props.value)
+    emit('on-change', isSelected.value ? null : props.value)
+  }
 }
 </script>

src/ui/toggle/types.ts

@@ -2,6 +2,7 @@ export interface ToggleProps
 {
     modelValue?: any
     value?: any
+    disabled?: boolean
 }
 
 export type ToggleEmits = {