@redseed/redseed-ui-vue3 6.4.0 → 6.4.2

package/package.json

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

package/src/components/Badge/BadgeError.vue

@@ -0,0 +1,10 @@
+<script setup>
+import Badge from './Badge.vue'
+</script>
+<template>
+<Badge error>
+    <slot></slot>
+</Badge>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Badge/index.js

@@ -1,9 +1,11 @@
 import Badge from './Badge.vue'
 import BadgeInfo from './BadgeInfo.vue'
-import BadgeNeutral from './BadgeNeutral.vue'
 import BadgeSuccess from './BadgeSuccess.vue'
 import BadgeWarning from './BadgeWarning.vue'
 import BadgeGroup from './BadgeGroup.vue'
+import BadgeSecondary from './BadgeSecondary.vue'
+import BadgeNeutral from './BadgeSecondary.vue'
+import BadgeError from './BadgeError.vue'
 
 export {
     Badge,
@@ -12,4 +14,6 @@ export {
     BadgeSuccess,
     BadgeWarning,
     BadgeGroup,
+    BadgeSecondary,
+    BadgeError
 }

package/src/components/Card/Card.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
     clickable: {
@@ -22,14 +23,23 @@ const props = defineProps({
 
 const emit = defineEmits(['click'])
 
+const cardElement = ref(null)
+const { responsiveWidth } = useResponsiveWidth(cardElement)
+
 const cardClass = computed(() => [
     'rsui-card',
     {
         'rsui-card--hoverable': props.hoverable,
-    },
-    {
         'rsui-card--clickable': props.clickable && !props.disabled,
-    },
+        'rsui-card--2xs': responsiveWidth.value['2xs'],
+        'rsui-card--xs': responsiveWidth.value['xs'],
+        'rsui-card--sm': responsiveWidth.value['sm'],
+        'rsui-card--md': responsiveWidth.value['md'],
+        'rsui-card--lg': responsiveWidth.value['lg'],
+        'rsui-card--xl': responsiveWidth.value['xl'],
+        'rsui-card--2xl': responsiveWidth.value['2xl'],
+        'rsui-card--3xl': responsiveWidth.value['3xl'],
+    }
 ])
 
 function onClick() {
@@ -39,39 +49,28 @@ function onClick() {
 }
 </script>
 <template>
-<div :class="cardClass" data-testid="card">
-    <div v-if="clickable"
-        class="rsui-card__action-layer"
-        :title="$attrs.title"
-        @click="onClick"
-    ></div>
-
-    <div v-if="$slots.image"
-        class="rsui-card__image"
-    >
-        <slot name="image"></slot>
-    </div>
+    <div ref="cardElement" :class="cardClass" data-testid="card">
+        <div v-if="clickable" class="rsui-card__action-layer" :title="$attrs.title" @click="onClick"></div>
+
+        <div v-if="$slots.image" class="rsui-card__image">
+            <slot name="image"></slot>
+        </div>
+
+        <div v-if="$slots.header" class="rsui-card__header" :title="$attrs.title">
+            <slot name="header"></slot>
 
-    <div v-if="$slots.header"
-        class="rsui-card__header"
-        :title="$attrs.title"
-    >
-        <slot name="header"></slot>
-        
-    </div>
-    <div v-if="$slots.default || $slots.meta" :class="[
-        'rsui-card__content',
-        { 'rsui-card__content--padded': padded },
-    ]">
-        <slot></slot>
-
-        <div v-if="$slots.meta"
-            class="rsui-card__meta"
-        >
-            <slot name="meta"></slot>
+        </div>
+        <div v-if="$slots.default || $slots.meta" :class="[
+            'rsui-card__content',
+            { 'rsui-card__content--padded': padded },
+        ]">
+            <slot></slot>
+
+            <div v-if="$slots.meta" class="rsui-card__meta">
+                <slot name="meta"></slot>
+            </div>
         </div>
     </div>
-</div>
 </template>
 <style lang="scss" scoped>
 .rsui-card {
@@ -85,9 +84,11 @@ function onClick() {
 
     &--clickable {
         @apply cursor-pointer;
+
         .rsui-card__image {
             @apply pointer-events-none;
         }
+
         .rsui-card__content {
             @apply pointer-events-none;
         }
@@ -110,7 +111,54 @@ function onClick() {
     }
 
     &__meta {
-        @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
+        @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-6 gap-y-2 ;
+    }
+
+    &--2xs {
+        .rsui-card__meta {
+            @apply grid-cols-2;
+            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
+            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
+        }
+    }
+
+    &--xs {
+        .rsui-card__meta {
+            @apply grid-cols-2;
+            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
+        }
     }
+
+    &--sm {
+        .rsui-card__meta {
+            @apply grid-cols-2;
+        }
+    }
+
+
+    &--md {
+        .rsui-card__meta {
+            @apply grid-cols-3;
+        }
+    }
+
+    &--lg {
+        .rsui-card__meta {
+            @apply flex space-x-8;
+        }
+    }
+
+    &--xl {
+
+    }
+
+    &--2xl {
+
+    }
+
+    &--3xl {
+
+    }
+
 }
 </style>

package/src/components/Layouts/SingleColumnLayout.vue

@@ -7,6 +7,6 @@
 </template>
 <style lang="scss">
 .rsui-single-column-layout {
-    @apply mx-auto w-full max-w-3xl;
+    @apply w-full max-w-3xl;
 }
 </style>