@redseed/redseed-ui-vue3 8.13.0 → 8.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.13.0",
+    "version": "8.13.2",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Card/CardHeader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, toRefs } from 'vue'
+import { computed, ref, toRefs, useAttrs } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
 import { useResponsiveWidth } from '../../helpers'
@@ -46,6 +46,10 @@ const props = defineProps({
 
 const { showDivider, headerOnlyCard } = toRefs(props)
 
+const attrs = useAttrs()
+
+const isClickable = computed(() => !!attrs.onClick)
+
 const cardHeaderElement = ref(null)
 
 const { responsiveWidth } = useResponsiveWidth(cardHeaderElement, 640)
@@ -67,6 +71,7 @@ function handleMoreActionsClick() {
         {
             'rsui-card-header--divider': showDivider,
             'rsui-card-header--padded-bottom': shouldPadBottom,
+            'rsui-card-header--clickable': isClickable,
         }
     ]"
 >

package/src/components/Disclosure/Disclosure.vue

@@ -51,15 +51,32 @@ async function resetContentMaxHeight() {
     contentRef.value.style.removeProperty('min-height')
 }
 
+// After open transition ends, remove inline min-height so h-auto handles dynamic content
+function handleContentTransitionEnd(e) {
+    if (e.propertyName !== 'min-height' || !contentRef.value) return
+
+    if (isOpen.value) {
+        contentRef.value.style.removeProperty('min-height')
+    }
+}
+
 watchEffect(() => {
     if (isOpen.value) {
         setContentMaxHeight()
         return
     }
 
+    // Removing inline min-height after class change triggers the closing transition
     resetContentMaxHeight()
 })
 
+// Before closing: synchronously set min-height to current height so closing transition has a start value
+watch(isOpen, (open, wasOpen) => {
+    if (!open && wasOpen && contentRef.value) {
+        contentRef.value.style.minHeight = contentRef.value.offsetHeight + 'px'
+    }
+}, { flush: 'sync' })
+
 const canTeleportTrigger = ref(false)
 const canTeleportContent = ref(false)
 
@@ -133,6 +150,7 @@ onMounted(() => {
                     'rsui-disclosure__content--open': isOpen,
                 }
             ]"
+            @transitionend="handleContentTransitionEnd"
         >
             <slot name="content"></slot>
         </div>

package/src/components/Section/SectionHeader.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, useSlots } from 'vue'
+import { ref, computed, useAttrs, useSlots } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import Icon from '../Icon/Icon.vue'
 import { useResponsiveWidth } from '../../helpers'
@@ -38,6 +38,10 @@ function handleMoreActionsClick() {
     emit('click:more-actions')
 }
 
+const attrs = useAttrs()
+
+const isClickable = computed(() => !!attrs.onClick)
+
 const slots = useSlots()
 
 const showToolbar = computed(() => {
@@ -51,7 +55,10 @@ const showToolbar = computed(() => {
 <div ref="sectionHeaderElement"
     :class="[
         'rsui-section-header',
-        { 'rsui-section-header--divider': showDivider }
+        {
+            'rsui-section-header--divider': showDivider,
+            'rsui-section-header--clickable': isClickable,
+        }
     ]"
 >
     <div class="rsui-section-header__header">