@redseed/redseed-ui-vue3 2.20.0 → 2.21.0

package/package.json

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

package/src/components/Progress/ProgressTracker.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { ref, computed, watch } from 'vue'
+import ProgressTrackerStep from './ProgressTrackerStep.vue'
+
+const props = defineProps({
+    steps: {
+        type: Array,
+        default: () => [],
+    },
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
+    skippable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const internalSteps = ref(props.steps)
+
+const activeStep = ref(props.steps.find(step => !!step.active) || props.steps[0])
+
+const activeStepIndex = computed(() => internalSteps.value.findIndex(step => step === activeStep.value))
+
+watch(() => props.steps, () => {
+    internalSteps.value = props.steps
+    activeStep.value = internalSteps.value.find(step => !!step.active) || internalSteps.value[0]
+}, { deep: true })
+
+const emit = defineEmits(['change'])
+
+function handleStepClick(clickedStep) {
+    if (!props.clickable) return
+
+    const currentActiveStep = internalSteps.value.find(step => step === activeStep.value)
+    currentActiveStep.completed = true
+    currentActiveStep.active = false
+
+    const step = internalSteps.value.find(step => step === clickedStep)
+    step.active = true
+    activeStep.value = step
+
+    emit('change', step)
+}
+</script>
+<template>
+    <div class="rsui-progress-tracker">
+        <slot :internalSteps="internalSteps">
+            <ProgressTrackerStep v-for="(step, index) in internalSteps"
+                :key="step"
+                :step="step"
+                :completed="!!step.completed"
+                :active="index === activeStepIndex"
+                :clickable="clickable"
+                :skippable="skippable || index === activeStepIndex + 1"
+                @click="handleStepClick(step)"
+            >
+                <template #indicator>
+                    {{ index + 1 }}
+                </template>
+
+                {{ step.label }}
+            </ProgressTrackerStep>
+        </slot>
+    </div>
+</template>
+<style lang="scss" scoped>
+.rsui-progress-tracker {
+    @apply grid grid-flow-col auto-cols-fr gap-16;
+    @apply text-xl font-medium;
+}
+</style>

package/src/components/Progress/ProgressTrackerStep.vue

@@ -0,0 +1,107 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    step: {
+        type: Object,
+        default: null,
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    completed: {
+        type: Boolean,
+        default: false,
+    },
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
+    skippable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const canClick = computed(() => {
+    if (!props.active && !props.completed) {
+        return props.clickable && props.skippable
+    }
+
+    return props.clickable
+})
+
+const emit = defineEmits(['click'])
+
+const componentClass = computed(() => [
+    'rsui-progress-tracker-step',
+    {
+        'rsui-progress-tracker-step--completed': props.completed,
+        'rsui-progress-tracker-step--active': props.active,
+        'rsui-progress-tracker-step--clickable': canClick.value,
+    }
+])
+
+const indicatorClass = computed(() => [
+    'rsui-progress-tracker-step__indicator',
+    {
+        'rsui-progress-tracker-step__indicator--completed': props.completed,
+        'rsui-progress-tracker-step__indicator--active': props.active,
+    }
+])
+
+function handleClick() {
+    if (!canClick.value) return
+
+    if (!props.step) {
+        emit('click')
+        return
+    }
+
+    emit('click', props.step)
+}
+</script>
+<template>
+    <div :class="componentClass"
+        @click="handleClick"
+    >
+        <div :class="indicatorClass">
+            <slot name="indicator"></slot>
+        </div>
+        <slot>Step</slot>
+    </div>
+</template>
+<style lang="scss" scoped>
+.rsui-progress-tracker-step {
+    @apply relative flex flex-col items-center text-center gap-4;
+
+    // add a line before each step
+    @apply after:content-[''] after:absolute after:bg-rsui-grey-300;
+    @apply after:top-6 after:-left-8 after:-translate-x-1/2;
+    @apply after:w-[160%] xs:after:w-[140%] lg:after:w-[120%] 3xl:after:w-[104%] after:h-1;
+    // hide the line before the first step
+    @apply first:after:hidden;
+
+    &--active,
+    &--completed {
+        @apply after:bg-primary;
+    }
+
+    &--clickable {
+        @apply cursor-pointer;
+    }
+
+    &__indicator {
+        @apply relative z-1 size-13 rounded-full border-2 overflow-hidden select-none;
+        @apply bg-rsui-grey-300 border-rsui-grey-300 text-white;
+        @apply flex items-center justify-center;
+        &--completed {
+            @apply bg-primary border-primary text-primary-content;
+        }
+        &--active {
+            @apply bg-primary-content border-primary text-primary;
+        }
+    }
+}
+</style>

package/src/components/Progress/index.js

@@ -1,5 +1,9 @@
 import ProgressCircle from './ProgressCircle.vue'
+import ProgressTracker from './ProgressTracker.vue'
+import ProgressTrackerStep from './ProgressTrackerStep.vue'
 
 export {
     ProgressCircle,
+    ProgressTracker,
+    ProgressTrackerStep
 }