@redseed/redseed-ui-vue3 5.3.9 → 5.4.0

package/index.js

@@ -12,6 +12,7 @@ export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/CardGroup'
+export * from './src/components/Disclosure'
 export * from './src/components/DropdownMenu'
 export * from './src/components/Empty'
 export * from './src/components/Form'
@@ -33,4 +34,5 @@ export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'
 export * from './src/components/Table'
-export * from './src/components/Toggle'
+export * from './src/components/Toggle'
+export * from './src/helpers'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "5.3.9",
+  "version": "5.4.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -12,8 +12,8 @@
   "license": "ISC",
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
-    "@vueuse/components": "^12.8.2",
-    "@vueuse/core": "^12.7.0",
+    "@vueuse/components": "^13.2.0",
+    "@vueuse/core": "^13.2.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "vue": "^3.5.13"

package/src/components/Card/Card.vue

@@ -100,10 +100,10 @@ function onClick() {
     }
 
     &__content {
-        @apply min-h-16 flex-1 flex flex-col relative gap-y-3;
+        @apply flex-1 flex flex-col relative gap-y-3;
 
         &--padded {
-            @apply py-5 px-4 sm:px-6;
+            @apply py-5 px-4 sm:px-6 min-h-16;
         }
     }
 

package/src/components/Card/CardHeader.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
 defineProps({
@@ -132,12 +132,13 @@ const emit = defineEmits(['click:more-actions'])
 </template>
 <style lang="scss" scoped>
 .rsui-card-header {
-    @apply flex flex-col gap-x-3 gap-y-5 overflow-hidden;
+    @apply flex flex-col gap-x-3 gap-y-5 overflow-hidden transition-all;
     @apply md:flex-row md:justify-between md:items-center;
     @apply py-4 px-4 sm:px-6;
+    @apply border-b border-transparent;
 
     &--divider {
-        @apply border-b border-rsui-grey-400;
+        @apply border-rsui-grey-400;
     }
 
     &__header {

package/src/components/CardGroup/CardGroup.vue

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue'
 import Empty from '../Empty/Empty.vue'
 import Pagination from '../Pagination/Pagination.vue'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
     controlApplied: {
@@ -86,42 +86,46 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
         <slot></slot>
     </div>
     <div v-if="showEmptyMessage" class="rsui-card-group__empty">
-        <Empty
-            @clickPrimaryAction="$emit('clickEmptyAction')"
-            @clickSecondaryAction="$emit('clickSecondaryEmptyAction')"
-            @clickTertiaryAction="$emit('clickTertiaryEmptyAction')"
-        >
-            <template #image>
-                <slot name="empty-image"></slot>
-            </template>
-
-            <template #title v-if="$slots['empty-title']">
-                <slot name="empty-title"></slot>
-            </template>
-
-            <slot name="empty-description">It looks like there's nothing here yet.</slot>
-
-            <template #actions="{ isWide }" v-if="$slots['empty-actions']">
-                <slot name="empty-actions" :isWide="isWide"></slot>
-            </template>
-
-            <template #primary-action-label v-if="$slots['empty-action-label']">
-                <slot name="empty-action-label"></slot>
-            </template>
-
-            <template #secondary-action-label v-if="$slots['empty-secondary-action-label']">
-                <slot name="empty-secondary-action-label"></slot>
-            </template>
-
-            <template #tertiary-action-label v-if="$slots['empty-tertiary-action-label']">
-                <slot name="empty-tertiary-action-label"></slot>
-            </template>
-        </Empty>
+        <slot name="empty">
+            <Empty
+                @clickPrimaryAction="$emit('clickEmptyAction')"
+                @clickSecondaryAction="$emit('clickSecondaryEmptyAction')"
+                @clickTertiaryAction="$emit('clickTertiaryEmptyAction')"
+            >
+                <template #image>
+                    <slot name="empty-image"></slot>
+                </template>
+
+                <template #title v-if="$slots['empty-title']">
+                    <slot name="empty-title"></slot>
+                </template>
+
+                <slot name="empty-description">It looks like there's nothing here yet.</slot>
+
+                <template #actions="{ isWide }" v-if="$slots['empty-actions']">
+                    <slot name="empty-actions" :isWide="isWide"></slot>
+                </template>
+
+                <template #primary-action-label v-if="$slots['empty-action-label']">
+                    <slot name="empty-action-label"></slot>
+                </template>
+
+                <template #secondary-action-label v-if="$slots['empty-secondary-action-label']">
+                    <slot name="empty-secondary-action-label"></slot>
+                </template>
+
+                <template #tertiary-action-label v-if="$slots['empty-tertiary-action-label']">
+                    <slot name="empty-tertiary-action-label"></slot>
+                </template>
+            </Empty>
+        </slot>
     </div>
-    <div v-if="showNotFoundMessage" class="rsui-card-group">
-        <Empty>
-            <slot name="filter-empty-description">No items meet your filter criteria.</slot>
-        </Empty>
+    <div v-if="showNotFoundMessage" class="rsui-card-group__empty">
+        <slot name="not-found">
+            <Empty>
+                <slot name="filter-empty-description">No items meet your filter criteria.</slot>
+            </Empty>
+        </slot>
     </div>
 </div>
 </template>

package/src/components/Disclosure/Disclosure.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { ref, watch, watchEffect, nextTick } from 'vue'
+import { ChevronUpIcon } from '@heroicons/vue/24/outline'
+import { ButtonTertiary } from '../Button'
+
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+const emit = defineEmits(['click'])
+
+const triggerId = ref(_.uniqueId('disclosure-trigger-'))
+const contentId = ref(_.uniqueId('disclosure-content-'))
+
+const isOpen = ref(props.open)
+watch(() => props.open, () => isOpen.value = props.open)
+
+function handleTrigger() {
+    isOpen.value = !isOpen.value
+
+    emit('click', { open: isOpen.value })
+}
+
+const contentRef = ref(null)
+
+async function setContentMaxHeight() {
+    if (!contentRef.value) return
+
+    await nextTick()
+
+    contentRef.value.style.maxHeight = contentRef.value.scrollHeight + 'px'
+}
+
+async function resetContentMaxHeight() {
+    if (!contentRef.value) return
+
+    await nextTick()
+
+    contentRef.value.style.maxHeight = '0px'
+}
+
+watchEffect(() => {
+    if (isOpen.value) {
+        setContentMaxHeight()
+        return
+    }
+
+    resetContentMaxHeight()
+})
+</script>
+
+<template>
+    <div class="rsui-disclosure">
+        <slot name="child"
+            :isOpen="isOpen"
+            :triggerId="triggerId"
+            :contentId="contentId"
+            :handleTrigger="handleTrigger"
+        ></slot>
+    </div>
+
+    <Teleport :to="`#${triggerId}`">
+        <slot name="trigger"
+            :handleTrigger="handleTrigger"
+        >
+            <ButtonTertiary
+                :sm="$attrs.sm"
+                :md="$attrs.md"
+                :lg="$attrs.lg"
+                :xl="$attrs.xl"
+                :2xl="$attrs['2xl']"
+                :full="$attrs.full"
+                @click.stop="handleTrigger"
+            >
+                <ChevronUpIcon
+                    :class="[
+                        'rsui-disclosure__trigger-icon',
+                        {
+                            'rsui-disclosure__trigger-icon--open': isOpen,
+                        }
+                    ]"
+                ></ChevronUpIcon>
+            </ButtonTertiary>
+        </slot>
+    </Teleport>
+
+    <Teleport :to="`#${contentId}`">
+        <div ref="contentRef"
+            :class="[
+                'rsui-disclosure__content',
+                {
+                    'rsui-disclosure__content--open': isOpen,
+                }
+            ]"
+        >
+            <slot name="content"></slot>
+        </div>
+    </Teleport>
+</template>
+
+<style lang="scss" scoped>
+.rsui-disclosure {
+    &__trigger-icon {
+        @apply transition-all;
+
+        &--open {
+            @apply rotate-180;
+        }
+    }
+
+    &__content {
+        @apply transition-all max-h-0 overflow-hidden opacity-0;
+
+        &--open {
+            @apply overflow-visible opacity-100;
+        }
+    }
+}
+</style>

package/src/components/Disclosure/index.js

@@ -0,0 +1,6 @@
+
+import Disclosure from './Disclosure.vue'
+
+export {
+    Disclosure
+}

package/src/components/Empty/Empty.vue

@@ -5,7 +5,14 @@ import ButtonSecondary from '../Button/ButtonSecondary.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import BodyText from '../HTML/BodyText.vue'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
+
+const props = defineProps({
+    showImage: {
+        type: Boolean,
+        default: true,
+    },
+})
 
 const emit = defineEmits(['clickPrimaryAction', 'clickSecondaryAction', 'clickTertiaryAction'])
 
@@ -32,7 +39,9 @@ const emptyClass = computed(() => [
         This slot is used to render the image.
         The image is used to display an icon or an image.
     -->
-    <div class="rsui-empty__image">
+    <div v-if="showImage"
+        class="rsui-empty__image"
+    >
         <slot name="image">
             <ExclamationCircleIcon></ExclamationCircleIcon>
         </slot>

package/src/components/Layouts/HeroSection.vue

@@ -1,10 +1,34 @@
 <script setup>
+defineProps({
+    showContent: {
+        type: Boolean,
+        default: true,
+    },
+})
 </script>
 <template>
 <div class="rsui-hero-section">
     <slot name="header"></slot>
 
-    <div class="rsui-hero-section__cards">
+    <div v-if="$slots.content"
+        :class="[
+            'rsui-hero-section__content',
+            {
+                'rsui-hero-section__content--hidden': !showContent,
+            }
+        ]"
+    >
+        <slot name="content"></slot>
+    </div>
+
+    <div v-if="$slots.default"
+        :class="[
+            'rsui-hero-section__cards',
+            {
+                'rsui-hero-section__cards--hidden': !showContent,
+            }
+        ]"
+    >
         <slot></slot>
     </div>
 </div>
@@ -15,6 +39,16 @@
 
     &__cards {
         @apply grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-6;
+
+        &--hidden {
+            @apply hidden;
+        }
+    }
+
+    &__content {
+        &--hidden {
+            @apply hidden;
+        }
     }
 }
 </style>

package/src/components/Layouts/SectionHeader.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 
 defineProps({
@@ -101,10 +101,12 @@ const emit = defineEmits(['click:more-actions'])
 </template>
 <style lang="scss" scoped>
 .rsui-section-header {
-    @apply flex flex-col gap-x-3 gap-y-5;
+    @apply flex flex-col gap-x-3 gap-y-5 transition-all;
     @apply md:flex-row md:justify-between md:items-center;
+    @apply border-b border-transparent;
+
     &--divider {
-        @apply border-b border-rsui-grey-400 pb-5;
+        @apply border-rsui-grey-400 pb-5;
     }
 
     &__header {

package/src/components/List/ListControl.vue

@@ -4,7 +4,7 @@ import FormFieldSearch from '../FormField/FormFieldSearch.vue'
 import FormFieldSelect from '../FormField/FormFieldSelect.vue'
 import Sorting from '../Sorting/Sorting.vue'
 import Pagination from '../Pagination/Pagination.vue'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
     searchable: {

package/src/components/List/ListItem.vue

@@ -2,7 +2,7 @@
 import { ref, computed, useSlots } from 'vue'
 import { UserIcon } from '@heroicons/vue/24/solid'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
-import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
     avatar: {

package/src/components/Loader/Loader.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import LottieCubes from './LottieCubes.json'
-import { useLottie } from '../../helpers/Lottie'
+import { useLottie } from '../../helpers'
 
 const props = defineProps({
     primary: {

package/src/helpers/index.js

@@ -0,0 +1,7 @@
+import { useLottie } from './Lottie'
+import { useResponsiveWidth } from './ResponsiveWidth'
+
+export {
+    useLottie,
+    useResponsiveWidth,
+}