@redseed/redseed-ui-vue3 2.7.1 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.7.1",
+  "version": "2.9.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/CardGroup/CardGroup.vue

@@ -1,9 +1,8 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { useElementSize } from '@vueuse/core'
 import Empty from '../Empty/Empty.vue'
 import Pagination from '../Pagination/Pagination.vue'
-
+import { useResponsiveWidth } from '../../helpers/responsiveWidth'
 
 const props = defineProps({
     controlApplied: {
@@ -24,21 +23,21 @@ const props = defineProps({
     },
 })
 
-const cardGroupElement = ref(null);
+const cardGroupElement = ref(null)
 
-const { width } = useElementSize(cardGroupElement);
+const { responsiveWidth } = useResponsiveWidth(cardGroupElement)
 
 const cardGroupClasses = computed(() => [
     'rsui-card-group',
     {
-        'rsui-card-group--2xs': width.value < 375,
-        'rsui-card-group--xs': width.value >= 375 && width.value < 480,
-        'rsui-card-group--sm': width.value >= 480 && width.value < 640,
-        'rsui-card-group--md': width.value >= 640 && width.value < 768,
-        'rsui-card-group--lg': width.value >= 768 && width.value < 1024,
-        'rsui-card-group--xl': width.value >= 1024 && width.value < 1280,
-        'rsui-card-group--2xl': width.value >= 1280 && width.value < 1536,
-        'rsui-card-group--3xl': width.value >= 1536
+        'rsui-card-group--2xs': responsiveWidth.value['2xs'],
+        'rsui-card-group--xs': responsiveWidth.value['xs'],
+        'rsui-card-group--sm': responsiveWidth.value['sm'],
+        'rsui-card-group--md': responsiveWidth.value['md'],
+        'rsui-card-group--lg': responsiveWidth.value['lg'],
+        'rsui-card-group--xl': responsiveWidth.value['xl'],
+        'rsui-card-group--2xl': responsiveWidth.value['2xl'],
+        'rsui-card-group--3xl': responsiveWidth.value['3xl'],
     }
 ])
 
@@ -46,60 +45,48 @@ const pageUpdated = (event) => {
     emit('pageUpdated', event)
 }
 
-const emit = defineEmits(['pageUpdated']);
+const emit = defineEmits(['pageUpdated'])
 
 const showEmptyMessage = computed(() => !props.totalItems && !props.controlApplied)
 
 const showNotFoundMessage = computed(() => !props.totalItems && props.controlApplied)
-
 </script>
 <template>
-    <div ref="cardGroupElement" :class="cardGroupClasses">
-        <div class="rsui-card-group__pagination">
-            <Pagination v-if="totalItems > perPage" :totalItems="totalItems" :perPage="perPage" :currentPage="currentPage"
-                @change="pageUpdated"></Pagination>
-        </div>
-
-        <div v-if="totalItems" class="rsui-card-group__cards">
-
-
-            <slot></slot>
-
-        </div>
-
-        <div v-if="showEmptyMessage" class="rsui-card-group__empty">
-            <Empty @clickPrimaryAction="$emit('clickEmptyAction')">
-                <template #image>
-                    <slot name="empty-image"></slot>
-                </template>
-                <template #title v-if="$slots['empty-title']">
-                    <slot name="empty-title"></slot>
-                </template>
-                <template #primary-action-label v-if="$slots['empty-action-label']">
-                    <slot name="empty-action-label"></slot>
-                </template>
-
-                <slot name="empty-description">It looks like there's nothing here yet.</slot>
-            </Empty>
-        </div>
-        <div v-if="showNotFoundMessage" class="rsui-card-group">
-            <Empty>
-                <slot name="filter-empty-description">No items meet your filter criteria.</slot>
-            </Empty>
-        </div>
+<div ref="cardGroupElement" :class="cardGroupClasses">
+    <div class="rsui-card-group__pagination">
+        <Pagination v-if="totalItems > perPage" :totalItems="totalItems" :perPage="perPage" :currentPage="currentPage"
+            @change="pageUpdated"></Pagination>
     </div>
+    <div v-if="totalItems" class="rsui-card-group__cards">
+        <slot></slot>
+    </div>
+    <div v-if="showEmptyMessage" class="rsui-card-group__empty">
+        <Empty @clickPrimaryAction="$emit('clickEmptyAction')">
+            <template #image>
+                <slot name="empty-image"></slot>
+            </template>
+            <template #title v-if="$slots['empty-title']">
+                <slot name="empty-title"></slot>
+            </template>
+            <template #primary-action-label v-if="$slots['empty-action-label']">
+                <slot name="empty-action-label"></slot>
+            </template>
+
+            <slot name="empty-description">It looks like there's nothing here yet.</slot>
+        </Empty>
+    </div>
+    <div v-if="showNotFoundMessage" class="rsui-card-group">
+        <Empty>
+            <slot name="filter-empty-description">No items meet your filter criteria.</slot>
+        </Empty>
+    </div>
+</div>
 </template>
 <style scoped lang="scss">
 .rsui-card-group {
     &__cards {
         @apply grid;
-    }
-
-    &--2xs,
-    &--xs {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-1;
-        }
+        @apply gap-4 grid-cols-1;
     }
 
     &--sm,
@@ -124,7 +111,6 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
     }
     &__pagination {
         @apply w-full flex items-center justify-center mb-4;
-
     }
 }
 </style>

package/src/components/Empty/Empty.vue

@@ -1,40 +1,26 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed } from 'vue'
 import ButtonPrimary from '../Button/ButtonPrimary.vue'
 import ButtonSecondary from '../Button/ButtonSecondary.vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
 import BodyText from '../BodyText/BodyText.vue'
 import { ExclamationCircleIcon } from '@heroicons/vue/24/outline'
+import { useResponsiveWidth } from '../../helpers/responsiveWidth'
 
 const emit = defineEmits(['clickPrimaryAction', 'clickSecondaryAction', 'clickTertiaryAction'])
 
-const emptyClass = computed(() => [
-    'rsui-empty',
-])
-
 const emptyElement = ref(null)
 
-const isWide = ref(false)
-
-function calculateWidth() {
-    if (!emptyElement.value) return
+const { responsiveWidth } = useResponsiveWidth(emptyElement, 480)
 
-    const width = emptyElement.value.offsetWidth
+const isWide = computed(() => !!responsiveWidth.value.specific)
 
-    isWide.value = width >= 480
-    if (isWide.value) {
-        emptyElement.value.classList.add('rsui-empty--wide')
-    } else {
-        emptyElement.value.classList.remove('rsui-empty--wide')
+const emptyClass = computed(() => [
+    'rsui-empty',
+    {
+        'rsui-empty--wide': isWide.value,
     }
-}
-
-onMounted(() => {
-    calculateWidth()
-    window.addEventListener('resize', calculateWidth)
-})
-
-onUnmounted(() => window.addEventListener('resize', calculateWidth))
+])
 </script>
 <template>
 <div v-if="$slots.title || $slots.default"

package/src/components/List/ListControl.vue

@@ -1,9 +1,10 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, watch } from 'vue'
 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'
 
 const props = defineProps({
     searchable: {
@@ -43,6 +44,20 @@ const emit = defineEmits(['change'])
 
 const listControlElement = ref(null)
 
+const { responsiveWidth } = useResponsiveWidth(listControlElement)
+
+const listControlClass = computed(() => [
+    'rsui-list-control',
+    {
+        'rsui-list-control--sm': responsiveWidth.value.sm,
+        'rsui-list-control--md': responsiveWidth.value.md,
+        'rsui-list-control--lg': responsiveWidth.value.lg,
+        'rsui-list-control--xl': responsiveWidth.value.xl,
+        'rsui-list-control--2xl': responsiveWidth.value['2xl'],
+        'rsui-list-control--3xl': responsiveWidth.value['3xl'],
+    }
+])
+
 const filterLimit = ref(4)
 
 const searchText = ref('')
@@ -63,50 +78,10 @@ function fireChangeEvent() {
         pagination: pagination.value
     })
 }
-
-function calculateWidth() {
-    if (!listControlElement.value) return
-
-    const sizeClasses = [
-        'rsui-list-control--sm',
-        'rsui-list-control--md',
-        'rsui-list-control--lg',
-        'rsui-list-control--xl',
-    ]
-
-    listControlElement.value.classList.remove(...sizeClasses)
-
-    const width = listControlElement.value.offsetWidth
-
-    if (width >= 1280) {
-        listControlElement.value.classList.add(sizeClasses[3])
-        return
-    }
-
-    if (width >= 1024) {
-        listControlElement.value.classList.add(sizeClasses[2])
-        return
-    }
-
-    if (width >= 640) {
-        listControlElement.value.classList.add(sizeClasses[1])
-        return
-    }
-
-    listControlElement.value.classList.add(sizeClasses[0])
-    return
-}
-
-onMounted(() => {
-    calculateWidth()
-    window.addEventListener('resize', calculateWidth)
-})
-
-onUnmounted(() => window.addEventListener('resize', calculateWidth))
 </script>
 <template>
 <div ref="listControlElement"
-    class="rsui-list-control"
+    :class="listControlClass"
 >
     <div v-if="searchable"
         class="rsui-list-control__search"
@@ -168,14 +143,14 @@ onUnmounted(() => window.addEventListener('resize', calculateWidth))
 .rsui-list-control {
     @apply flex flex-wrap justify-between gap-x-2 gap-y-3;
     &--sm {
-        .rsui-list-control__search {
-            @apply w-full;
-        }
         .rsui-list-control__filters {
             @apply w-full grid-cols-2;
         }
     }
     &--md {
+        .rsui-list-control__search {
+            @apply w-auto;
+        }
         .rsui-list-control__filters {
             @apply flex;
         }
@@ -184,11 +159,17 @@ onUnmounted(() => window.addEventListener('resize', calculateWidth))
         }
     }
     &--lg {
+        .rsui-list-control__search {
+            @apply w-auto;
+        }
         .rsui-list-control__filters {
             @apply flex-1 grid-cols-4;
         }
     }
-    &--xl {
+    &--xl, &--2xl, &--3xl {
+        .rsui-list-control__search {
+            @apply w-auto;
+        }
         .rsui-list-control__filters {
             @apply grid-cols-4;
         }
@@ -198,7 +179,7 @@ onUnmounted(() => window.addEventListener('resize', calculateWidth))
     }
 
     &__search {
-        @apply w-auto;
+        @apply w-full;
     }
     &__filters {
         @apply grid gap-2;

package/src/components/List/ListItem.vue

@@ -1,7 +1,8 @@
 <script setup>
-import { ref, computed, useSlots, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, useSlots } from 'vue'
 import { UserIcon } from '@heroicons/vue/24/solid'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import { useResponsiveWidth } from '../../helpers/responsiveWidth'
 
 const props = defineProps({
     avatar: {
@@ -20,27 +21,9 @@ const props = defineProps({
 
 const listItemElement = ref(null)
 
-const isWide = ref(false)
+const { responsiveWidth } = useResponsiveWidth(listItemElement, 480)
 
-function calculateWidth() {
-    if (!listItemElement.value) return
-
-    const width = listItemElement.value.offsetWidth
-
-    isWide.value = width >= 480
-    if (isWide.value) {
-        listItemElement.value.classList.add('rsui-list-item--wide')
-    } else {
-        listItemElement.value.classList.remove('rsui-list-item--wide')
-    }
-}
-
-onMounted(() => {
-    calculateWidth()
-    window.addEventListener('resize', calculateWidth)
-})
-
-onUnmounted(() => window.addEventListener('resize', calculateWidth))
+const isWide = computed(() => !!responsiveWidth.value.specific)
 
 const slots = useSlots()
 
@@ -53,6 +36,7 @@ const listItemClass = computed(() => [
     {
         'rsui-list-item--clickable': props.clickable,
         'rsui-list-item--avatar': props.avatar,
+        'rsui-list-item--wide': isWide.value,
     }
 ])
 

package/src/components/Loader/Loader.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import lottie from 'lottie-web'
+import { ref, computed } from 'vue'
 import LottieCubes from './LottieCubes.json'
+import { useLottie } from '../../helpers/Lottie'
 
 const props = defineProps({
     primary: {
@@ -41,21 +41,7 @@ const loaderClass = computed(() => [
 
 const loaderElement = ref(null)
 
-function load() {
-    if (!lottie) return
-    if (!LottieCubes) return
-    if (!loaderElement.value) return
-
-    lottie.loadAnimation({
-        container: loaderElement.value,
-        renderer: 'svg',
-        loop: true,
-        autoplay: true,
-        animationData: LottieCubes
-    })
-}
-
-onMounted(load)
+useLottie(loaderElement, LottieCubes)
 </script>
 <template>
 <div ref="loaderElement"

package/src/helpers/Lottie.js

@@ -0,0 +1,32 @@
+import { ref, watchEffect } from 'vue'
+import Lottie from 'lottie-web'
+
+export function useLottie(elementRef, animationData = null) {
+
+    const lottieAnimation = ref(null)
+
+    watchEffect(() => {
+        if (!elementRef.value) return
+        if (!animationData) return
+
+        loadLottie()
+    })
+
+    function loadLottie() {
+        if (!elementRef.value) return
+        if (!animationData) return
+
+        if (lottieAnimation.value) {
+            lottieAnimation.value.destroy()
+            lottieAnimation.value = null
+        }
+
+        lottieAnimation.value = Lottie.loadAnimation({
+            container: elementRef.value,
+            renderer: 'svg',
+            loop: true,
+            autoplay: true,
+            animationData: animationData
+        })
+    }
+}

package/src/helpers/ResponsiveWidth.js

@@ -0,0 +1,55 @@
+import { ref, watch } from 'vue'
+import { useElementBounding } from '@vueuse/core'
+
+export function useResponsiveWidth(elementRef, specific = null) {
+
+    const breakpoints = {
+        '2xs': 375,
+        'xs': 480,
+        'sm': 640,
+        'md': 768,
+        'lg': 1024,
+        'xl': 1280,
+        '2xl': 1536,
+        '3xl': 1920,
+    }
+
+    const responsiveWidth = ref({
+        '2xs': false,
+        'xs': false,
+        'sm': false,
+        'md': false,
+        'lg': false,
+        'xl': false,
+        '2xl': false,
+        '3xl': false,
+        'specific': false,
+    })
+
+    const { width } = useElementBounding(elementRef)
+
+    watch(width, calculateResponsiveWidth)
+
+    function calculateResponsiveWidth() {
+        if (specific && Number.isInteger(specific)) {
+            if (width.value >= specific) responsiveWidth.value.specific = true
+            if (width.value < specific) responsiveWidth.value.specific = false
+        }
+
+        // reset all responsiveWidth values
+        for (const key in breakpoints) { responsiveWidth.value[key] = false }
+
+        if (width.value >= breakpoints['3xl']) return responsiveWidth.value['3xl'] = true
+        if (width.value >= breakpoints['2xl']) return responsiveWidth.value['2xl'] = true
+        if (width.value >= breakpoints['xl']) return responsiveWidth.value['xl'] = true
+        if (width.value >= breakpoints['lg']) return responsiveWidth.value['lg'] = true
+        if (width.value >= breakpoints['md']) return responsiveWidth.value['md'] = true
+        if (width.value >= breakpoints['sm']) return responsiveWidth.value['sm'] = true
+        if (width.value >= breakpoints['xs']) return responsiveWidth.value['xs'] = true
+        if (width.value >= breakpoints['2xs']) return responsiveWidth.value['2xs'] = true
+    }
+
+    return {
+        responsiveWidth,
+    }
+}