@redseed/redseed-ui-vue3 2.10.0 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "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/FormField/FormFieldCheckbox.vue

@@ -35,7 +35,10 @@ function check(event) {
                 >
             </div>
             <div v-if="$slots.label"
-                class="rsui-form-field-checkbox__label"
+                :class="[
+                    'rsui-form-field-checkbox__label',
+                    { 'rsui-form-field-checkbox__label--required': $attrs.required !== undefined },
+                ]"
             >
                 <slot name="label"></slot>
             </div>
@@ -53,6 +56,9 @@ function check(event) {
     }
     &__label {
         @apply ml-2 font-normal;
+        &--required {
+            @apply after:content-['*'] after:text-danger;
+        }
     }
     &__check {
         @apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
@@ -69,5 +75,9 @@ function check(event) {
             @apply size-full relative z-1;
         }
     }
+
+    :deep(.rsui-form-field-slot__label) {
+        @apply after:hidden;
+    }
 }
 </style>

package/src/components/FormField/FormFieldSelect.vue

@@ -42,8 +42,9 @@ function choose(option) {
 <template>
 <FormFieldSlot
     ref="formFieldSelectElement"
-    class="rsui-form-field-select"
     :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-select']"
+    :required="$attrs.required"
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">

package/src/components/FormField/FormFieldSlot.vue

@@ -21,11 +21,18 @@ const formFieldSlotClass = computed(() => [
         'rsui-form-field-slot--compact': props.compact,
     },
 ])
+
+const formFieldSlotLabelClass = computed(() => [
+    'rsui-form-field-slot__label',
+    {
+        'rsui-form-field-slot__label--required': attrs.required !== undefined,
+    },
+])
 </script>
 <template>
 <div :class="formFieldSlotClass">
     <div v-if="$slots.label"
-        class="rsui-form-field-slot__label"
+        :class="formFieldSlotLabelClass"
     >
         <label
             :for="$attrs.id"
@@ -57,12 +64,15 @@ const formFieldSlotClass = computed(() => [
         @apply flex-row justify-between gap-x-2;
         .rsui-form-field-slot {
             &__label {
-                @apply pt-3 truncate;
+                @apply pt-3 whitespace-nowrap;
             }
         }
     }
 
     &__label {
+        &--required {
+            @apply after:content-['*'] after:text-danger after:ml-1;
+        }
         label {
             @apply font-semibold text-base text-rsui-default;
         }

package/src/components/FormField/FormFieldText.vue

@@ -16,6 +16,7 @@ const inputElement = ref(null)
 <FormFieldSlot
     :id="$attrs.id"
     :class="[$attrs.class, 'rsui-form-field-text']"
+    :required="$attrs.required"
     :compact="$attrs.compact"
 >
     <template #label v-if="$slots.label">

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>