@redseed/redseed-ui-vue3 3.0.2 → 3.1.0

package/package.json

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

package/src/components/Badge/Badge.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
 
 const props = defineProps({
     sm: {
@@ -47,9 +47,16 @@ const badgeClass = computed(() => [
     },
 ])
 
+const badgeRef = ref(null)
+
+defineExpose({
+    badgeRef
+})
 </script>
 <template>
-<div :class="badgeClass">
+<div ref="badgeRef"
+    :class="badgeClass"
+>
     <slot></slot>
 </div>
 </template>
@@ -57,7 +64,7 @@ const badgeClass = computed(() => [
 .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-sm font-medium leading-4;
     &--sm {
         @apply px-2 py-1;
     }
@@ -81,7 +88,7 @@ const badgeClass = computed(() => [
     }
 
     :deep(svg) {
-        @apply size-3;
+        @apply size-4;
     }
 }
 </style>

package/src/components/Badge/BadgeGroup.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { ref, computed, watch, watchPostEffect, useAttrs } from 'vue'
+import Badge from './Badge.vue'
+
+defineProps({
+    badgeEnd: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const parentBadge = ref(null)
+
+const childBadgeStyle = ref(getChildBadgeStyle())
+
+const attrs = useAttrs()
+
+// Watch the attrs for changes and update the child badge style
+watch(() => attrs, () => {
+    childBadgeStyle.value = getChildBadgeStyle()
+}, { deep: true, flush: 'post' })
+
+// Watch the component for changes and update the child badge style
+watchPostEffect(() => { childBadgeStyle.value = getChildBadgeStyle() }, { flush: 'post' })
+
+function getChildBadgeStyle() {
+    if (!parentBadge.value) return {}
+    if (!parentBadge.value.badgeRef) return {}
+
+    // Get the parent badge element
+    const parentBadgeElement = parentBadge.value.badgeRef
+
+    // Get the computed style of the parent badge element
+    const parentBadgeStyle = window.getComputedStyle(parentBadgeElement)
+
+    // Use the background color of the parent badge as the text color of the child badge
+    const childColor = parentBadgeStyle.backgroundColor == 'rgba(0, 0, 0, 0)'
+        ? 'white'
+        : parentBadgeStyle.backgroundColor
+
+    // Use the text color of the parent badge as the background color of the child badge
+    const childBackgroundColor = parentBadgeStyle.color
+
+    // Return the style for the child badge
+    return {
+        color: childColor,
+        backgroundColor: childBackgroundColor,
+    }
+}
+</script>
+<template>
+<Badge v-if="$slots.badge || $slots.default"
+    ref="parentBadge"
+    :class="[
+        'badge-group',
+        {
+            'badge-group--badge-end': badgeEnd,
+            'badge-group--no-text': !$slots.default,
+            'badge-group--no-badge': !$slots.badge,
+        },
+    ]"
+>
+    <Badge v-if="$slots.badge"
+        class="badge-group__badge"
+        :style="childBadgeStyle"
+    >
+        <slot name="badge"></slot>
+    </Badge>
+    <slot></slot>
+</Badge>
+</template>
+<style lang="scss" scoped>
+.badge-group {
+    @apply pl-1 pr-3 gap-x-3;
+    &--badge-end {
+        @apply pl-3 pr-1;
+    }
+    &--no-text {
+        @apply px-1;
+    }
+    &--no-badge {
+        @apply px-2;
+    }
+}
+.badge-group--badge-end {
+    .badge-group__badge {
+        @apply order-last;
+    }
+}
+</style>

package/src/components/Badge/index.js

@@ -4,6 +4,7 @@ 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'
 
 export {
     Badge,
@@ -12,4 +13,5 @@ export {
     BadgeNeutral,
     BadgeSuccess,
     BadgeWarning,
+    BadgeGroup,
 }

package/src/components/List/List.vue

@@ -82,29 +82,24 @@ function controlChanged(event) {
         <slot></slot>
     </div>
 
-    <slot name="control"
-        :showControl="showControl"
-        :totalItems="totalItems"
-        :controlChanged="controlChanged"
+    <div v-if="showControl"
+        class="rsui-list__control-bottom"
     >
-        <ListControl
-            v-if="showControl"
-            v-bind="$attrs"
-            class="rsui-list___control"
+        <slot name="control-bottom"
+            :showControl="showControl"
             :totalItems="totalItems"
-            :searchable="false"
-            :sortable="false"
-            :filters="[]"
-            @change="controlChanged"
+            :controlChanged="controlChanged"
         >
-            <template #sort-asc-label v-if="$slots['sort-asc-label']">
-                <slot name="sort-asc-label"></slot>
-            </template>
-            <template #sort-desc-label v-if="$slots['sort-desc-label']">
-                <slot name="sort-desc-label"></slot>
-            </template>
-        </ListControl>
-    </slot>
+            <ListControl
+                v-bind="$attrs"
+                :searchable="false"
+                :sortable="false"
+                :filters="[]"
+                :totalItems="totalItems"
+                @change="controlChanged"
+            ></ListControl>
+        </slot>
+    </div>
 
     <!--
         Empty slot with a default empty component.
@@ -154,7 +149,7 @@ function controlChanged(event) {
             class="rsui-list__empty"
         >
             <Empty>
-                <slot name="filter-empty-description">No items meet your filter criteria.</slot>
+                <slot name="control-empty-description">No items meet your filter criteria.</slot>
             </Empty>
         </div>
     </slot>
@@ -168,7 +163,7 @@ function controlChanged(event) {
     &__empty {
         @apply mt-6;
     }
-    &___control {
+    &__control-bottom {
         @apply mt-3;
     }
 }