@redseed/redseed-ui-vue3 7.6.1 → 7.6.2

package/package.json

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

package/src/components/Progress/ProgressTracker.vue

@@ -15,6 +15,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    showLabel: {
+        type: Boolean,
+        default: true,
+    },
     sm: {
         type: Boolean,
         default: false,
@@ -27,10 +31,18 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // when the number of steps reaches threshold, use small indicator
+    threshold: {
+        type: Number,
+        default: 10,
+        validator: value => value >= 10,
+    }
 })
 
 const internalSteps = ref(props.steps)
 
+const thresholdReached = computed(() => internalSteps.value.length >= props.threshold)
+
 const activeStep = ref(props.steps.find(step => !!step.active) || props.steps[0])
 
 const activeStepIndex = computed(() => internalSteps.value.findIndex(step => step === activeStep.value))
@@ -58,12 +70,18 @@ function handleStepClick(clickedStep) {
 
 const defaultSize = computed(() => !props.sm && !props.md && !props.lg)
 
+const isSmall = computed(() => props.sm || thresholdReached.value)
+
+const isMedium = computed(() => props.md && !thresholdReached.value)
+
+const isLarge = computed(() => (props.lg || defaultSize.value) && !thresholdReached.value)
+
 const componentClass = computed(() => [
     'rsui-progress-tracker',
     {
-        'rsui-progress-tracker--sm': props.sm,
-        'rsui-progress-tracker--md': props.md,
-        'rsui-progress-tracker--lg': props.lg || defaultSize.value,
+        'rsui-progress-tracker--sm': isSmall.value,
+        'rsui-progress-tracker--md': isMedium.value,
+        'rsui-progress-tracker--lg': isLarge.value,
     }
 ])
 </script>
@@ -77,16 +95,18 @@ const componentClass = computed(() => [
                 :active="index === activeStepIndex"
                 :clickable="clickable"
                 :skippable="skippable || index === activeStepIndex + 1"
-                :sm="sm"
-                :md="md"
-                :lg="lg"
+                :sm="isSmall"
+                :md="isMedium"
+                :lg="isLarge"
                 @click="handleStepClick(step)"
             >
                 <template #indicator>
                     {{ index + 1 }}
                 </template>
 
-                {{ step.label }}
+                <div v-if="showLabel">
+                    {{ step.label }}
+                </div>
             </ProgressTrackerStep>
         </slot>
     </div>

package/src/components/Progress/ProgressTrackerStep.vue

@@ -89,6 +89,7 @@ function handleClick() {
         <div :class="indicatorClass">
             <slot name="indicator"></slot>
         </div>
-        <slot>Step</slot>
+
+        <slot></slot>
     </div>
 </template>