feat(Toggle): pass state of toggle to slot props (#1703)

dan-hale · zernonia · web-flow · commit 0b48a4cef9f1 · 2025-03-14T11:51:34.000+08:00
* feat: Pass state of toggle to slot props

* chore: rename to slotProps

* refactor: add jsdoc, rename to pressed state

* docs: doc gen

* feat: expose state as well

---------

Co-authored-by: zernonia &lt;zernonia@gmail.com&gt;
diff --git a/docs/content/meta/Toggle.md b/docs/content/meta/Toggle.md
@@ -58,7 +58,22 @@
 <SlotsTable :data="[
   {
     'name': 'modelValue',
+    'description': '<p>Current value</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'state',
+    'description': '<p>Current state</p>\n',
+    'type': '\'on\' | \'off\''
+  },
+  {
+    'name': 'pressed',
     'description': '<p>Current pressed state</p>\n',
     'type': 'boolean'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disabled state</p>\n',
+    'type': 'boolean'
   }
 ]" />
diff --git a/docs/content/meta/ToggleGroupItem.md b/docs/content/meta/ToggleGroupItem.md
@@ -27,3 +27,26 @@
     'required': true
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current value</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'state',
+    'description': '<p>Current state</p>\n',
+    'type': '\'on\' | \'off\''
+  },
+  {
+    'name': 'pressed',
+    'description': '<p>Current pressed state</p>\n',
+    'type': 'boolean'
+  },
+  {
+    'name': 'disabled',
+    'description': '<p>Current disabled state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/packages/core/src/Toggle/Toggle.vue b/packages/core/src/Toggle/Toggle.vue
@@ -43,8 +43,14 @@ const emits = defineEmits<ToggleEmits>()
 
 defineSlots<{
   default: (props: {
-    /** Current pressed state */
+    /** Current value */
     modelValue: typeof modelValue.value
+    /** Current state */
+    state: typeof dataState.value
+    /** Current pressed state */
+    pressed: typeof modelValue.value
+    /** Current disabled state */
+    disabled: boolean
   }) => any
 }>()
 
@@ -79,7 +85,12 @@ const isFormControl = useFormControl(currentElement)
     :disabled="disabled"
     @click="togglePressed"
   >
-    <slot :model-value="modelValue" />
+    <slot
+      :model-value="modelValue"
+      :disabled="disabled"
+      :pressed="modelValue"
+      :state="dataState"
+    />
 
     <VisuallyHiddenInput
       v-if="isFormControl && name && !toggleGroupContext"
diff --git a/packages/core/src/ToggleGroup/ToggleGroupItem.vue b/packages/core/src/ToggleGroup/ToggleGroupItem.vue
@@ -39,11 +39,12 @@ const { forwardRef } = useForwardExpose()
     <Toggle
       v-bind="props"
       :ref="forwardRef"
+      v-slot="slotProps"
       :disabled="disabled"
       :model-value="pressed"
       @update:model-value="rootContext.changeModelValue(value)"
     >
-      <slot />
+      <slot v-bind="slotProps" />
     </Toggle>
   </component>
 </template>
