@redseed/redseed-ui-vue3 2.5.1 → 2.7.0

package/index.js

@@ -3,6 +3,7 @@ export * from './src/components/BodyText'
 export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
+export * from './src/components/CardGroup'
 export * from './src/components/DropdownMenu'
 export * from './src/components/Empty'
 export * from './src/components/Form'

package/package.json

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

package/src/components/CardGroup/CardGroup.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import Empty from '../Empty/Empty.vue'
+import Pagination from '../Pagination/Pagination.vue'
+
+
+const props = defineProps({
+    controlApplied: {
+        type: Boolean,
+        default: false
+    },
+    totalItems: {
+        type: Number,
+        default: 0
+    },
+    perPage: {
+        type: Number,
+        default: 10
+    },
+    currentPage: {
+        type: Number,
+        default: 1
+    },
+})
+
+const cardGroupElement = ref(null);
+
+const { width } = useElementSize(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
+    }
+])
+
+const pageUpdated = (event) => {
+    emit('pageUpdated', event)
+}
+
+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>
+</template>
+<style scoped lang="scss">
+.rsui-card-group {
+    &__cards {
+        @apply grid;
+    }
+
+    &--2xs,
+    &--xs {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-1;
+        }
+    }
+
+    &--sm,
+    &--md {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-2;
+        }
+    }
+
+    &--lg,
+    &--xl {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-3;
+        }
+    }
+
+    &--2xl,
+    &--3xl {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-5;
+        }
+    }
+    &__pagination {
+        @apply w-full flex items-center justify-center mb-4;
+
+    }
+}
+</style>

package/src/components/CardGroup/index.js

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

package/src/components/Form/FormFieldset.vue

@@ -0,0 +1,30 @@
+<script setup>
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-fieldset">
+    <fieldset v-bind="$attrs">
+        <legend>
+            <slot name="legend"></slot>
+        </legend>
+        <div class="rsui-fieldset__fields">
+            <slot></slot>
+        </div>
+    </fieldset>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-fieldset {
+    fieldset {
+    }
+    legend {
+        @apply text-base text-rsui-default font-semibold;
+    }
+    &__fields {
+        @apply mt-3 px-2;
+        @apply flex flex-col gap-3;
+    }
+}
+</style>

package/src/components/Form/index.js

@@ -1,3 +1,4 @@
+import FormFieldset from './FormFieldset.vue'
 import FormFieldsLogin from './FormFieldsLogin.vue'
 import FormFieldsRegister from './FormFieldsRegister.vue'
 import FormSlot from './FormSlot.vue'
@@ -5,6 +6,7 @@ import FormWrapperBuild from './FormWrapperBuild.vue'
 import FormWrapperLMS from './FormWrapperLMS.vue'
 
 export {
+    FormFieldset,
     FormFieldsLogin,
     FormFieldsRegister,
     FormSlot,

package/src/components/FormField/FormFieldCheckbox.vue

@@ -52,18 +52,18 @@ function check(event) {
         @apply flex;
     }
     &__label {
-        @apply ml-2;
+        @apply ml-2 font-normal;
     }
     &__check {
-        @apply size-6 shrink-0 relative bg-white rounded-md;
-        @apply has-[:disabled]:text-rsui-light;
+        @apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
+        @apply has-[:disabled]:text-rsui-light has-[:disabled]:cursor-default;
 
         input[type="checkbox"] {
-            @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none;
+            @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none cursor-pointer;
             @apply w-full h-full text-rsui-default border border-rsui-grey-200 text-transparent bg-none;
             @apply focus:ring focus:ring-highlight focus:border-highlight;
             @apply invalid:border-danger invalid:ring-0;
-            @apply disabled:text-rsui-light disabled:bg-rsui-grey-200;
+            @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:cursor-default;
         }
         svg {
             @apply size-full relative z-1;

package/src/components/FormField/FormFieldSelect.vue

@@ -158,7 +158,7 @@ function choose(option) {
 
         select {
             @apply pl-5 pr-14 truncate;
-            @apply appearance-none rounded-full cursor-pointer;
+            @apply appearance-none rounded-full;
             @apply focus:ring focus:ring-highlight focus:border-highlight;
             option {
                 @apply hidden;

package/src/components/FormField/FormFieldSlot.vue

@@ -33,7 +33,9 @@ const formFieldSlotClass = computed(() => [
             <slot name="label"></slot>
         </label>
     </div>
-    <div class="rsui-form-field-slot__field">
+    <div v-if="$slots.default || $slots.help || $slots.error"
+        class="rsui-form-field-slot__field"
+    >
         <slot></slot>
         <div v-if="$slots.help"
             class="rsui-form-field-slot__help"
@@ -62,7 +64,7 @@ const formFieldSlotClass = computed(() => [
 
     &__label {
         label {
-            @apply font-medium text-base text-rsui-default;
+            @apply font-semibold text-base text-rsui-default;
         }
     }
 
@@ -91,11 +93,11 @@ const formFieldSlotClass = computed(() => [
         @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
     }
     select {
-        @apply block w-full border ring-0 bg-none;
+        @apply block w-full border ring-0 bg-none cursor-pointer;
         @apply text-base text-rsui-default transition py-3 px-4 rounded-md outline-none focus:outline-none;
         @apply bg-white placeholder-rsui-light border-rsui-grey-200;
         @apply invalid:border-danger invalid:ring-0;
-        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
+        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
     }
 }
 </style>