@redseed/redseed-ui-vue3 2.1.0 → 2.2.0

package/index.js

@@ -4,6 +4,7 @@ export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/DropdownMenu'
+export * from './src/components/Empty'
 export * from './src/components/Form'
 export * from './src/components/FormField'
 export * from './src/components/Image'

package/package.json

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

package/src/components/Empty/Empty.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } 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'
+
+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 width = emptyElement.value.offsetWidth
+
+    isWide.value = width >= 480
+    if (isWide.value) {
+        emptyElement.value.classList.add('rsui-empty--wide')
+    } else {
+        emptyElement.value.classList.remove('rsui-empty--wide')
+    }
+}
+
+onMounted(() => {
+    calculateWidth()
+    window.addEventListener('resize', calculateWidth)
+})
+
+onUnmounted(() => window.addEventListener('resize', calculateWidth))
+</script>
+<template>
+<div v-if="$slots.title || $slots.default"
+    ref="emptyElement"
+    :class="emptyClass"
+>
+    <div class="rsui-empty__image">
+        <slot name="image">
+            <ExclamationCircleIcon></ExclamationCircleIcon>
+        </slot>
+    </div>
+    <div v-if="$slots.title"
+        class="rsui-empty__title"
+    >
+        <slot name="title"></slot>
+    </div>
+    <BodyText v-if="$slots.default"
+        class="rsui-empty__description"
+    >
+        <slot></slot>
+    </BodyText>
+    <div v-if="$slots['primary-action-label'] || $slots['secondary-action-label'] || $slots['tertiary-action-label']"
+        class="rsui-empty__action"
+    >
+        <ButtonPrimary sm :full="!isWide"
+            v-if="$slots['primary-action-label']"
+            @click="$emit('clickPrimaryAction')"
+        >
+            <slot name="primary-action-label"></slot>
+        </ButtonPrimary>
+        <ButtonSecondary sm :full="!isWide"
+            v-if="$slots['secondary-action-label']"
+            @click="$emit('clickSecondaryAction')"
+        >
+            <slot name="secondary-action-label"></slot>
+        </ButtonSecondary>
+        <ButtonTertiary sm :full="!isWide"
+            v-if="$slots['tertiary-action-label']"
+            @click="$emit('clickTertiaryAction')"
+        >
+            <slot name="tertiary-action-label"></slot>
+        </ButtonTertiary>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-empty {
+    @apply w-full flex flex-col items-center justify-center gap-5;
+    @apply px-3 py-4 rounded-md bg-white text-rsui-default;
+    &--wide {
+        .rsui-empty__image {
+            :deep(svg) {
+                @apply size-14;
+            }
+        }
+    }
+    &__image {
+        @apply w-full flex items-center justify-center;
+        :deep(svg) {
+            @apply size-11;
+        }
+    }
+    &__title {
+        @apply text-lg font-semibold text-center;
+    }
+    &__description {
+        @apply text-sm text-center *:mb-2;
+    }
+    &__action {
+        @apply w-full flex flex-wrap items-center justify-center gap-2;
+    }
+}
+</style>

package/src/components/Empty/index.js

@@ -0,0 +1,5 @@
+import Empty from './Empty.vue'
+
+export {
+    Empty,
+}

package/src/components/List/List.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 import ListControl from './ListControl.vue'
+import Empty from '../Empty/Empty.vue'
 
 defineOptions({
     inheritAttrs: false,
@@ -17,13 +18,17 @@ const props = defineProps({
     },
 })
 
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change', 'clickEmptyAction'])
 
 const controlApplied = ref(false)
 
 const showControl = computed(() => props.control && (controlApplied.value || props.totalItems > 0))
 
-const showEmptyMessage = computed(() => !props.totalItems)
+const showEmptyMessage = computed(() => !props.totalItems && !controlApplied.value)
+
+const showNotFoundMessage = computed(() => !props.totalItems && controlApplied.value)
+
+const showItems = computed(() => props.totalItems > 0)
 
 function controlChanged(event) {
     controlApplied.value = true
@@ -46,7 +51,7 @@ function controlChanged(event) {
             <slot name="sort-desc-label"></slot>
         </template>
     </ListControl>
-    <div v-if="!showEmptyMessage"
+    <div v-if="showItems"
         class="rsui-list__items"
     >
         <slot></slot>
@@ -54,7 +59,26 @@ function controlChanged(event) {
     <div v-if="showEmptyMessage"
         class="rsui-list__empty"
     >
-        <slot name="empty">No items found.</slot>
+        <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-list__empty"
+    >
+        <Empty>
+            <slot name="filter-empty-description">No items meet your filter criteria.</slot>
+        </Empty>
     </div>
 </div>
 </template>