feat(v-collapsible): pass open value into header slot

gitsindonesia · Apr 8, 2022 · 071198a · 071198a
1 parent 7293254
commit 071198a
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/packages/collapsible/src/VCollapsible.vue b/packages/collapsible/src/VCollapsible.vue
@@ -76,18 +76,31 @@ watch(isOpen, (value) => {
 <template>
   <div>
     <div
-      class="py-3 w-full flex justify-between items-center px-4 gap-x-4 transition duration-300 group cursor-pointer font-semibold"
+      class="
+        py-3
+        w-full
+        flex
+        justify-between
+        items-center
+        px-4
+        gap-x-4
+        transition
+        duration-300
+        group
+        cursor-pointer
+        font-semibold
+      "
       :class="[activatorClass, isOpen ? activeClass : inactiveClass]"
       @click="toggle"
     >
-      <slot name="header">
+      <slot name="header" :is-open="isOpen">
         {{ title }}
       </slot>
 
       <slot name="icon">
         <ChevronDownIcon
-          class="w-5 h-5"
-          :class="[isOpen ? 'transform rotate-180' : '']"
+          class="w-5 h-5 transform transition duration-300"
+          :class="[isOpen ? 'rotate-180' : '']"
         />
       </slot>
     </div>