@redseed/redseed-ui-vue3 2.10.1 → 2.10.3

package/package.json

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

package/src/components/Badge/Badge.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    neutral: {
+        type: Boolean,
+        default: false,
+    },
+    info: {
+        type: Boolean,
+        default: false,
+    },
+    success: {
+        type: Boolean,
+        default: false,
+    },
+    warning: {
+        type: Boolean,
+        default: false,
+    },
+    danger: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const defaultSize = computed(() => !props.sm && !props.md)
+
+const badgeClass = computed(() => [
+    'rsui-badge',
+    {
+        'rsui-badge--sm': props.sm || defaultSize.value,
+        'rsui-badge--md': props.md,
+        'rsui-badge--neutral': props.neutral,
+        'rsui-badge--info': props.info,
+        'rsui-badge--success': props.success,
+        'rsui-badge--warning': props.warning,
+        'rsui-badge--danger': props.danger,
+    },
+])
+
+</script>
+<template>
+<div :class="badgeClass">
+    <slot></slot>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-badge {
+    @apply inline-flex items-center justify-center gap-x-1;
+    @apply w-fit h-fit rounded-full;
+    @apply text-xs font-semibold leading-3;
+    &--sm {
+        @apply px-2 py-1;
+    }
+    &--md {
+        @apply px-2 py-2;
+    }
+    &--neutral {
+        @apply text-rsui-default bg-rsui-grey-200;
+    }
+    &--info {
+        @apply text-info-content bg-info;
+    }
+    &--success {
+        @apply text-success-content bg-success;
+    }
+    &--warning {
+        @apply text-warning-content bg-warning;
+    }
+    &--danger {
+        @apply text-danger-content bg-danger;
+    }
+
+    :deep(svg) {
+        @apply size-3;
+    }
+}
+</style>

package/src/components/Badge/BadgeDanger.vue

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

package/src/components/Badge/BadgeInfo.vue

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

package/src/components/Badge/BadgeNeutral.vue

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

package/src/components/Badge/BadgeSuccess.vue

@@ -1,13 +1,10 @@
 <script setup>
-import BadgeSlot from './BadgeSlot.vue'
+import Badge from './Badge.vue'
 </script>
 <template>
-<BadgeSlot class="rsui-badge-success">
+<Badge success>
     <slot></slot>
-</BadgeSlot>
+</Badge>
 </template>
 <style lang="scss" scoped>
-.rsui-badge-success {
-    @apply text-white bg-success;
-}
 </style>

package/src/components/Badge/BadgeWarning.vue

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

package/src/components/Badge/index.js

@@ -1,7 +1,15 @@
-import BadgeSlot from './BadgeSlot.vue'
+import Badge from './Badge.vue'
+import BadgeDanger from './BadgeDanger.vue'
+import BadgeInfo from './BadgeInfo.vue'
+import BadgeNeutral from './BadgeNeutral.vue'
 import BadgeSuccess from './BadgeSuccess.vue'
+import BadgeWarning from './BadgeWarning.vue'
 
 export {
-    BadgeSlot,
+    Badge,
+    BadgeDanger,
+    BadgeInfo,
+    BadgeNeutral,
     BadgeSuccess,
+    BadgeWarning,
 }

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/ResponsiveWidth'
 
 const props = defineProps({
     controlApplied: {

package/src/components/Empty/Empty.vue

@@ -5,7 +5,7 @@ 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'
+import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
 
 const emit = defineEmits(['clickPrimaryAction', 'clickSecondaryAction', 'clickTertiaryAction'])
 

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/ResponsiveWidth'
 
 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/ResponsiveWidth'
 
 const props = defineProps({
     avatar: {

package/src/components/Badge/BadgeSlot.vue

@@ -1,51 +0,0 @@
-<script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-    sm: {
-        type: Boolean,
-        default: false,
-    },
-    md: {
-        type: Boolean,
-        default: false,
-    },
-})
-
-const defaultSize = computed(() => !props.sm && !props.md)
-
-const badgeClass = computed(() => [
-    'rsui-badge',
-    {
-        'rsui-badge--sm': props.sm || defaultSize.value,
-        'rsui-badge--md': props.md,
-    },
-])
-
-</script>
-<template>
-<div :class="badgeClass">
-    <slot></slot>
-</div>
-</template>
-<style lang="scss" scoped>
-.rsui-badge {
-    @apply inline-flex items-center justify-center gap-x-1;
-    @apply w-fit h-fit rounded-full;
-    @apply text-xs font-semibold leading-3;
-    @apply text-white bg-black;
-    &--sm {
-        @apply px-2 py-1;
-    }
-    &--md {
-        @apply px-2 py-2;
-    }
-}
-</style>
-<style lang="scss">
-.rsui-badge {
-    svg {
-        @apply w-3 h-3;
-    }
-}
-</style>