From ed2c45ac76285bb394fa16970fca27690d3de454 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 30 May 2024 12:36:48 +0200
Subject: [PATCH] feat: expose `open` state to slots

---
 src/runtime/components/Accordion.vue    | 19 +++++++++++++------
 src/runtime/components/Collapsible.vue  |  6 +++---
 src/runtime/components/DropdownMenu.vue |  6 +++---
 src/runtime/components/Modal.vue        |  6 +++---
 src/runtime/components/Popover.vue      |  6 +++---
 src/runtime/components/Slideover.vue    |  6 +++---
 src/runtime/components/Tooltip.vue      |  6 +++---
 7 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/runtime/components/Accordion.vue b/src/runtime/components/Accordion.vue
index f365f6f2..fa97db6a 100644
--- a/src/runtime/components/Accordion.vue
+++ b/src/runtime/components/Accordion.vue
@@ -28,7 +28,7 @@ export interface AccordionProps<T> extends Omit<AccordionRootProps, 'asChild' |
 
 export interface AccordionEmits extends AccordionRootEmits {}
 
-type SlotProps<T> = (props: { item: T, index: number }) => any
+type SlotProps<T> = (props: { item: T, index: number, open: boolean }) => any
 
 export type AccordionSlots<T extends { slot?: string }> = {
   leading: SlotProps<T>
@@ -60,25 +60,32 @@ const ui = computed(() => tv({ extend: accordion, slots: props.ui })({ disabled:
 
 <template>
   <AccordionRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
-    <AccordionItem v-for="(item, index) in items" :key="index" :value="item.value || String(index)" :disabled="item.disabled" :class="ui.item()">
+    <AccordionItem
+      v-for="(item, index) in items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="ui.item()"
+    >
       <AccordionHeader :class="ui.header()">
         <AccordionTrigger :class="ui.trigger({ disabled: item.disabled })">
-          <slot name="leading" :item="item" :index="index">
+          <slot name="leading" :item="item" :index="index" :open="open">
             <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon()" />
           </slot>
 
           <span v-if="item.label || !!slots.default" :class="ui.label()">
-            <slot :item="item" :index="index">{{ item.label }}</slot>
+            <slot :item="item" :index="index" :open="open">{{ item.label }}</slot>
           </span>
 
-          <slot name="trailing" :item="item" :index="index">
+          <slot name="trailing" :item="item" :index="index" :open="open">
             <UIcon :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.trailingIcon()" />
           </slot>
         </AccordionTrigger>
       </AccordionHeader>
 
       <AccordionContent v-if="item.content || !!slots.content || (item.slot && !!slots[item.slot])" v-bind="contentProps" :class="ui.content()">
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
+        <slot :name="item.slot || 'content'" :item="item" :index="index" :open="open">
           {{ item.content }}
         </slot>
       </AccordionContent>
diff --git a/src/runtime/components/Collapsible.vue b/src/runtime/components/Collapsible.vue
index eeb5b83c..ca872954 100644
--- a/src/runtime/components/Collapsible.vue
+++ b/src/runtime/components/Collapsible.vue
@@ -17,7 +17,7 @@ export interface CollapsibleProps extends Omit<CollapsibleRootProps, 'asChild'>
 export interface CollapsibleEmits extends CollapsibleRootEmits {}
 
 export interface CollapsibleSlots {
-  default(): any
+  default(props: { open: boolean }): any
   content(): any
 }
 </script>
@@ -37,9 +37,9 @@ const ui = computed(() => tv({ extend: collapsible, slots: props.ui })())
 </script>
 
 <template>
-  <CollapsibleRoot v-bind="rootProps" :class="ui.root({ class: props.class })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="ui.root({ class: props.class })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
-      <slot />
+      <slot :open="open" />
     </CollapsibleTrigger>
 
     <CollapsibleContent :class="ui.content()">
diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue
index f2b56e4a..49804af2 100644
--- a/src/runtime/components/DropdownMenu.vue
+++ b/src/runtime/components/DropdownMenu.vue
@@ -43,7 +43,7 @@ export interface DropdownMenuEmits extends DropdownMenuRootEmits {}
 type SlotProps<T> = (props: { item: T, active?: boolean, index: number }) => any
 
 export type DropdownMenuSlots<T extends { slot?: string }> = {
-  'default'(): any
+  'default'(props: { open: boolean }): any
   'item': SlotProps<T>
   'item-leading': SlotProps<T>
   'item-label': SlotProps<T>
@@ -75,9 +75,9 @@ const ui = computed(() => tv({ extend: dropdownMenu, slots: props.ui })())
 </script>
 
 <template>
-  <DropdownMenuRoot v-bind="rootProps">
+  <DropdownMenuRoot v-slot="{ open }" v-bind="rootProps">
     <DropdownMenuTrigger v-if="!!slots.default" as-child :disabled="disabled">
-      <slot />
+      <slot :open="open" />
     </DropdownMenuTrigger>
 
     <UDropdownMenuContent :class="ui.content({ class: props.class })" :ui="ui" v-bind="contentProps" :items="items" :portal="portal">
diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 426520cf..9b679d2d 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -27,7 +27,7 @@ export interface ModalProps extends DialogRootProps {
 export interface ModalEmits extends DialogRootEmits {}
 
 export interface ModalSlots {
-  default(): any
+  default(props: { open: boolean }): any
   content(): any
   header(): any
   title(): any
@@ -75,9 +75,9 @@ const ui = computed(() => tv({ extend: modal, slots: props.ui })({
 </script>
 
 <template>
-  <DialogRoot v-bind="rootProps">
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child>
-      <slot />
+      <slot :open="open" />
     </DialogTrigger>
 
     <DialogPortal :disabled="!portal">
diff --git a/src/runtime/components/Popover.vue b/src/runtime/components/Popover.vue
index 51ccc43d..7df06758 100644
--- a/src/runtime/components/Popover.vue
+++ b/src/runtime/components/Popover.vue
@@ -25,7 +25,7 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
 export interface PopoverEmits extends PopoverRootEmits {}
 
 export interface PopoverSlots {
-  default(): any
+  default(props: { open: boolean }): any
   content(): any
 }
 </script>
@@ -57,9 +57,9 @@ const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
 </script>
 
 <template>
-  <Component.Root v-bind="rootProps">
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
     <Component.Trigger v-if="!!slots.default" as-child>
-      <slot />
+      <slot :open="open" />
     </Component.Trigger>
 
     <Component.Portal :disabled="!portal">
diff --git a/src/runtime/components/Slideover.vue b/src/runtime/components/Slideover.vue
index 151977a4..9f333c69 100644
--- a/src/runtime/components/Slideover.vue
+++ b/src/runtime/components/Slideover.vue
@@ -29,7 +29,7 @@ export interface SlideoverProps extends DialogRootProps {
 export interface SlideoverEmits extends DialogRootEmits {}
 
 export interface SlideoverSlots {
-  default(): any
+  default(props: { open: boolean }): any
   content(): any
   header(): any
   title(): any
@@ -78,9 +78,9 @@ const ui = computed(() => tv({ extend: slideover, slots: props.ui })({
 </script>
 
 <template>
-  <DialogRoot v-bind="rootProps">
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child>
-      <slot />
+      <slot :open="open" />
     </DialogTrigger>
 
     <DialogPortal :disabled="!portal">
diff --git a/src/runtime/components/Tooltip.vue b/src/runtime/components/Tooltip.vue
index 1ae775f4..4cc0c12b 100644
--- a/src/runtime/components/Tooltip.vue
+++ b/src/runtime/components/Tooltip.vue
@@ -23,7 +23,7 @@ export interface TooltipProps extends TooltipRootProps {
 export interface TooltipEmits extends TooltipRootEmits {}
 
 export interface TooltipSlots {
-  default(): any
+  default(props: { open: boolean }): any
   content(): any
 }
 </script>
@@ -47,9 +47,9 @@ const ui = computed(() => tv({ extend: tooltip, slots: props.ui })({ side: conte
 </script>
 
 <template>
-  <TooltipRoot v-bind="rootProps">
+  <TooltipRoot v-slot="{ open }" v-bind="rootProps">
     <TooltipTrigger v-if="!!slots.default" as-child>
-      <slot />
+      <slot :open="open" />
     </TooltipTrigger>
 
     <TooltipPortal :disabled="!portal">