feat(dropdown): add toggle prop to trigger slot (#1086)

oruga-ui · Oct 30, 2024 · c9b51f3 · c9b51f3
1 parent 6466757
commit c9b51f3
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 10 deletions.
diff --git a/packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap b/packages/oruga/src/components/autocomplete/tests/__snapshots__/autocomplete.test.ts.snap
@@ -6,6 +6,7 @@ exports[`OAutocomplete tests > render correctly 1`] = `
     <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
     <div data-oruga="input" class="o-input__wrapper"><input role="combobox" aria-autocomplete="list" aria-controls="v-0" aria-expanded="false" id="v-1" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
       <!--v-if-->
@@ -20,7 +21,7 @@ exports[`OAutocomplete tests > render correctly 1`] = `
       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
       <!--v-if-->
     </div>

diff --git a/packages/oruga/src/components/datepicker/tests/__snapshots__/datepicker.test.ts.snap b/packages/oruga/src/components/datepicker/tests/__snapshots__/datepicker.test.ts.snap
@@ -7,6 +7,7 @@ exports[`ODatepicker > render correctly 1`] = `
       <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
       <div data-oruga="input" class="o-input__wrapper"><input id="v-0" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
         <!--v-if-->
@@ -21,7 +22,7 @@ exports[`ODatepicker > render correctly 1`] = `
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
         <div class="o-dpck__box" role="listitem" tabindex="0" data-oruga="dropdown-item" aria-selected="false" aria-disabled="false">
           <!--

diff --git a/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap b/packages/oruga/src/components/datetimepicker/tests/__snapshots__/datetimepicker.test.ts.snap
@@ -7,6 +7,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
       <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
       <div data-oruga="input" class="o-input__wrapper"><input class="o-dtpck__date o-input" id="v-0" data-oruga-input="text" type="text" autocomplete="off">
         <!--v-if-->
@@ -21,7 +22,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
         <div class="o-dpck__box" role="listitem" tabindex="0" data-oruga="dropdown-item" aria-selected="false" aria-disabled="false">
           <!--
@@ -333,7 +334,7 @@ exports[`ODatetimepicker tests > render correctly 1`] = `
                       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
                       <div class="o-tpck__box" role="listitem" tabindex="0" data-oruga="dropdown-item" aria-selected="false" aria-disabled="false">
                         <!--

diff --git a/packages/oruga/src/components/dropdown/Dropdown.vue b/packages/oruga/src/components/dropdown/Dropdown.vue
@@ -432,8 +432,9 @@ defineExpose({ $trigger: triggerRef, $content: contentRef, value: vmodel });
             <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
-            <slot name="trigger" :active="isActive">
+            <slot name="trigger" :active="isActive" :toggle="onClick">
                 {{ label }}
             </slot>
         </component>
@@ -471,7 +472,7 @@ defineExpose({ $trigger: triggerRef, $content: contentRef, value: vmodel });
                     <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
                     <slot :active="isActive" :toggle="toggle">
                         <template v-for="group in groupedOptions">

diff --git a/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.integration.test.ts.snap b/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.integration.test.ts.snap
@@ -6,6 +6,7 @@ exports[`Dropdown integration tests > render correctly 1`] = `
     <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             --><button class="trigger">trigger</button>
   </div>
   <!--teleport start-->
@@ -15,7 +16,7 @@ exports[`Dropdown integration tests > render correctly 1`] = `
       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
       <div class="o-drop__item o-drop__item--clickable text-break" role="listitem" tabindex="0" data-oruga="dropdown-item" aria-selected="false" aria-disabled="false">
         <!--

diff --git a/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.test.ts.snap b/packages/oruga/src/components/dropdown/tests/__snapshots__/dropdown.test.ts.snap
@@ -6,6 +6,7 @@ exports[`Dropdown tests > render correctly 1`] = `
     <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
   </div>
   <!--teleport start-->
@@ -15,7 +16,7 @@ exports[`Dropdown tests > render correctly 1`] = `
       <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
       <!--v-if-->
     </div>

diff --git a/packages/oruga/src/components/taginput/tests/__snapshots__/taginput.test.ts.snap b/packages/oruga/src/components/taginput/tests/__snapshots__/taginput.test.ts.snap
@@ -13,6 +13,7 @@ exports[`OTaginput tests > render correctly 1`] = `
         <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
         <div data-oruga="input" class="o-input__wrapper o-input__wrapper--expanded"><input has-counter="false" role="combobox" aria-autocomplete="list" aria-controls="v-0" aria-expanded="false" id="v-1" data-oruga-input="text" type="text" class="o-input o-taginput__input" autocomplete="off">
           <!--v-if-->
@@ -27,7 +28,7 @@ exports[`OTaginput tests > render correctly 1`] = `
           <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
           <!--v-if-->
         </div>

diff --git a/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap b/packages/oruga/src/components/timepicker/tests/__snapshots__/timepicker.test.ts.snap
@@ -7,6 +7,7 @@ exports[`OTimepicker tests > render correctly 1`] = `
       <!--
                 @slot Override the trigger element, default is label prop
                 @binding {boolean} active - dropdown active state
+                @binding {() => void} toggle - toggle dropdown active state
             -->
       <div data-oruga="input" class="o-input__wrapper"><input id="v-0" data-oruga-input="text" type="text" class="o-input" autocomplete="off">
         <!--v-if-->
@@ -21,7 +22,7 @@ exports[`OTimepicker tests > render correctly 1`] = `
         <!--
                         @slot Place dropdown items here
                         @binding {boolean} active - dropdown active state
-                        @binding {boolean} toggle - toggle active state function
+                        @binding {() => void} toggle - toggle dropdown active state
                     -->
         <div class="o-tpck__box" role="listitem" tabindex="0" data-oruga="dropdown-item" aria-selected="false" aria-disabled="false">
           <!--