@redseed/redseed-ui-vue3 8.24.0 → 8.25.1

package/index.js

@@ -39,6 +39,7 @@ export * from './src/components/Skeleton'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'
+export * from './src/components/TabSlider'
 export * from './src/components/Table'
 export * from './src/components/Toggle'
 export * from './src/components/Tooltip'

package/package.json

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

package/src/components/TabSlider/TabSlider.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import TabSliderItem from './TabSliderItem.vue'
+
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true,
+    },
+    full: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['change'])
+
+const activeItem = ref(props.items.find(item => item.active) || props.items[0])
+
+function setActiveItem(item) {
+    if (activeItem.value == item) return
+    activeItem.value = item
+    emit('change', item)
+}
+</script>
+<template>
+<div class="rsui-tab-slider"
+    :class="{
+        'rsui-tab-slider--full': props.full,
+    }"
+>
+    <TabSliderItem v-for="item in items"
+        :key="item.id"
+        :active="activeItem.id == item.id"
+        :disabled="item.disabled"
+        @click="setActiveItem(item)"
+    >
+            <Icon v-if="item.icon">
+                <component :is="item.icon"></component>
+            </Icon>
+
+            {{ item.label }}
+
+            <template #badge v-if="item.badge && item.badgeText">
+                <component :is="item.badge">
+                    {{ item.badgeText }}
+                </component>
+            </template>
+    </TabSliderItem>
+</div>
+</template>

package/src/components/TabSlider/TabSliderItem.vue

@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+    if (props.disabled) return
+
+    emit('click')
+}
+</script>
+<template>
+<div class="rsui-tab-slider-item"
+    :class="{
+        'rsui-tab-slider-item--active': props.active && !props.disabled,
+        'rsui-tab-slider-item--disabled': props.disabled,
+    }"
+    @click="handleClick"
+>
+    <slot></slot>
+    <div v-if="$slots.badge" class="rsui-tab-slider-item__badge">
+        <slot name="badge"></slot>
+    </div>
+</div>
+</template>

package/src/components/TabSlider/index.js

@@ -0,0 +1,7 @@
+import TabSlider from './TabSlider.vue'
+import TabSliderItem from './TabSliderItem.vue'
+
+export {
+    TabSlider,
+    TabSliderItem,
+}

package/src/helpers/ResponsiveWidth.js

@@ -28,9 +28,11 @@ export function useResponsiveWidth(elementRef, specific = null) {
 
     const { width } = useElementBounding(elementRef)
 
-    watch(width, calculateResponsiveWidth)
+    watch(width, calculateResponsiveWidth, { immediate: true })
 
     function calculateResponsiveWidth() {
+        if (width.value === 0) return
+
         if (specific && Number.isInteger(specific)) {
             if (width.value >= specific) responsiveWidth.value.specific = true
             if (width.value < specific) responsiveWidth.value.specific = false