feat: expose more slotProps (#915)

* fix(Progress): indeterminate state is wrong when value is 0 (#911) * fix(Select): make `null` to showPlaceholder (#912) * feat: expost slotProps to all useVModel state * docs: codegen * chore: make sure boolean state is correct
radix-vue · May 13, 2024 · f0bd36b · f0bd36b
1 parent 6f55576
commit f0bd36b
Show file tree

Hide file tree

Showing 46 changed files with 374 additions and 32 deletions.
diff --git a/docs/content/meta/CheckboxRoot.md b/docs/content/meta/CheckboxRoot.md
@@ -66,3 +66,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'checked',
+    'description': '<p>Current checked state</p>\n',
+    'type': 'false | true | \'indeterminate\''
+  }
+]" />
diff --git a/docs/content/meta/ContextMenuSub.md b/docs/content/meta/ContextMenuSub.md
@@ -22,3 +22,11 @@
     'type': '[payload: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/DialogRoot.md b/docs/content/meta/DialogRoot.md
@@ -30,3 +30,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/DropdownMenuRoot.md b/docs/content/meta/DropdownMenuRoot.md
@@ -35,3 +35,11 @@
     'type': '[payload: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/DropdownMenuSub.md b/docs/content/meta/DropdownMenuSub.md
@@ -22,3 +22,11 @@
     'type': '[payload: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/HoverCardRoot.md b/docs/content/meta/HoverCardRoot.md
@@ -37,3 +37,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/ListboxFilter.md b/docs/content/meta/ListboxFilter.md
@@ -35,3 +35,11 @@
     'type': '[string]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string | undefined'
+  }
+]" />
diff --git a/docs/content/meta/MenubarRoot.md b/docs/content/meta/MenubarRoot.md
@@ -35,3 +35,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string'
+  }
+]" />
diff --git a/docs/content/meta/MenubarSub.md b/docs/content/meta/MenubarSub.md
@@ -22,3 +22,11 @@
     'type': '[payload: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/NavigationMenuRoot.md b/docs/content/meta/NavigationMenuRoot.md
@@ -76,3 +76,11 @@
     'type': '[value: string]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string'
+  }
+]" />
diff --git a/docs/content/meta/NavigationMenuSub.md b/docs/content/meta/NavigationMenuSub.md
@@ -42,3 +42,11 @@
     'type': '[value: string]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string'
+  }
+]" />
diff --git a/docs/content/meta/PopoverRoot.md b/docs/content/meta/PopoverRoot.md
@@ -30,3 +30,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/ProgressRoot.md b/docs/content/meta/ProgressRoot.md
@@ -49,6 +49,14 @@
   }
 ]" />
 
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'number | null | undefined'
+  }
+]" />
+
 <MethodsTable :data="[
   {
     'name': 'getValueLabel',

diff --git a/docs/content/meta/RadioGroupRoot.md b/docs/content/meta/RadioGroupRoot.md
@@ -74,3 +74,11 @@
     'type': '[payload: string]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string | undefined'
+  }
+]" />
diff --git a/docs/content/meta/SelectRoot.md b/docs/content/meta/SelectRoot.md
@@ -70,3 +70,16 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string'
+  },
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/SwitchRoot.md b/docs/content/meta/SwitchRoot.md
@@ -66,3 +66,11 @@
     'type': '[payload: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'checked',
+    'description': '<p>Current checked state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/TabsRoot.md b/docs/content/meta/TabsRoot.md
@@ -55,3 +55,11 @@
     'type': '[payload: StringOrNumber]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'modelValue',
+    'description': '<p>Current input values</p>\n',
+    'type': 'string | number'
+  }
+]" />
diff --git a/docs/content/meta/ToastRoot.md b/docs/content/meta/ToastRoot.md
@@ -92,6 +92,11 @@
 ]" />
 
 <SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  },
   {
     'name': 'remaining',
     'description': '<p>Remaining time (in ms)</p>\n',

diff --git a/docs/content/meta/Toggle.md b/docs/content/meta/Toggle.md
@@ -42,3 +42,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'pressed',
+    'description': '<p>Current pressed state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/docs/content/meta/TooltipRoot.md b/docs/content/meta/TooltipRoot.md
@@ -53,3 +53,11 @@
     'type': '[value: boolean]'
   }
 ]" />
+
+<SlotsTable :data="[
+  {
+    'name': 'open',
+    'description': '<p>Current open state</p>\n',
+    'type': 'boolean'
+  }
+]" />
diff --git a/packages/radix-vue/src/Checkbox/CheckboxRoot.vue b/packages/radix-vue/src/Checkbox/CheckboxRoot.vue
@@ -53,6 +53,14 @@ const props = withDefaults(defineProps<CheckboxRootProps>(), {
   as: 'button',
 })
 const emits = defineEmits<CheckboxRootEmits>()
+
+defineSlots<{
+  default(props: {
+    /** Current checked state */
+    checked: typeof checked.value
+  }): any
+}>()
+
 const { disabled } = toRefs(props)
 
 const checked = useVModel(props, 'checked', emits, {
@@ -92,7 +100,7 @@ provideCheckboxRootContext({
     }"
     @click="checked = isIndeterminate(checked) ? true : !checked"
   >
-    <slot />
+    <slot :checked="checked" />
   </Primitive>
 
   <input

diff --git a/packages/radix-vue/src/ContextMenu/ContextMenuSub.vue b/packages/radix-vue/src/ContextMenu/ContextMenuSub.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { MenuSubEmits, MenuSubProps } from '@/Menu'
+import type { Ref } from 'vue'
 
 export type ContextMenuSubEmits = MenuSubEmits
 export interface ContextMenuSubProps extends MenuSubProps {
@@ -18,16 +19,23 @@ const props = withDefaults(defineProps<ContextMenuSubProps>(), {
 })
 const emit = defineEmits<ContextMenuSubEmits>()
 
+defineSlots<{
+  default(props: {
+    /** Current open state */
+    open: typeof open.value
+  }): any
+}>()
+
 useForwardExpose()
 
 const open = useVModel(props, 'open', emit, {
   defaultValue: props.defaultOpen,
   passive: (props.open === undefined) as false,
-})
+}) as Ref<boolean>
 </script>
 
 <template>
   <MenuSub v-model:open="open">
-    <slot />
+    <slot :open="open" />
   </MenuSub>
 </template>
diff --git a/packages/radix-vue/src/Dialog/DialogRoot.vue b/packages/radix-vue/src/Dialog/DialogRoot.vue
@@ -45,6 +45,13 @@ const props = withDefaults(defineProps<DialogRootProps>(), {
 })
 const emit = defineEmits<DialogRootEmits>()
 
+defineSlots<{
+  default(props: {
+    /** Current open state */
+    open: typeof open.value
+  }): any
+}>()
+
 const open = useVModel(props, 'open', emit, {
   defaultValue: props.defaultOpen,
   passive: (props.open === undefined) as false,
@@ -75,5 +82,5 @@ provideDialogRootContext({
 </script>
 
 <template>
-  <slot />
+  <slot :open="open" />
 </template>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
@@ -36,6 +36,13 @@ const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
 })
 const emit = defineEmits<DropdownMenuRootEmits>()
 
+defineSlots<{
+  default(props: {
+    /** Current open state */
+    open: typeof open.value
+  }): any
+}>()
+
 useForwardExpose()
 const open = useVModel(props, 'open', emit, {
   defaultValue: props.defaultOpen,
@@ -64,6 +71,6 @@ provideDropdownMenuRootContext({
 
 <template>
   <MenuRoot v-model:open="open" :dir="dir" :modal="modal">
-    <slot />
+    <slot :open="open" />
   </MenuRoot>
 </template>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuSub.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuSub.vue
@@ -1,5 +1,6 @@
 <script lang="ts">
 import type { MenuSubEmits, MenuSubProps } from '@/Menu'
+import type { Ref } from 'vue'
 
 export type DropdownMenuSubEmits = MenuSubEmits
 export interface DropdownMenuSubProps extends MenuSubProps {
@@ -18,16 +19,23 @@ const props = withDefaults(defineProps<DropdownMenuSubProps>(), {
 })
 const emit = defineEmits<DropdownMenuSubEmits>()
 
+defineSlots<{
+  default(props: {
+    /** Current open state */
+    open: typeof open.value
+  }): any
+}>()
+
 const open = useVModel(props, 'open', emit, {
   passive: (props.open === undefined) as false,
   defaultValue: props.defaultOpen ?? false,
-})
+}) as Ref<boolean>
 
 useForwardExpose()
 </script>
 
 <template>
   <MenuSub v-model:open="open">
-    <slot />
+    <slot :open="open" />
   </MenuSub>
 </template>