@redseed/redseed-ui-vue3 8.47.0 → 8.49.0

package/package.json

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

package/src/components/FormField/FormFieldTextarea.vue

@@ -55,6 +55,7 @@ defineExpose({
         :required="$attrs.required"
         :showAsterisk="$attrs.showAsterisk"
         :compact="$attrs.compact"
+        :lg="$attrs.lg"
     >
         <template #label v-if="$slots.label">
             <slot name="label"></slot>

package/src/components/Progress/ProgressTracker.vue

@@ -19,6 +19,11 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    // fills the connector line leading into the active step by this percentage (0-100)
+    activeStepProgress: {
+        type: Number,
+        default: null,
+    },
     sm: {
         type: Boolean,
         default: false,
@@ -93,6 +98,7 @@ const componentClass = computed(() => [
                 :step="step"
                 :completed="!!step.completed"
                 :active="index === activeStepIndex"
+                :progress="index === activeStepIndex ? activeStepProgress : null"
                 :clickable="clickable"
                 :skippable="skippable || index === activeStepIndex + 1"
                 :sm="isSmall"

package/src/components/Progress/ProgressTrackerStep.vue

@@ -14,6 +14,11 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    // fills the connector line leading into this step by this percentage (0-100)
+    progress: {
+        type: Number,
+        default: null,
+    },
     clickable: {
         type: Boolean,
         default: false,
@@ -48,11 +53,14 @@ const emit = defineEmits(['click'])
 
 const defaultSize = computed(() => !props.sm && !props.md && !props.lg)
 
+const hasProgress = computed(() => props.active && props.progress !== null)
+
 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--progress': hasProgress.value,
         'rsui-progress-tracker-step--clickable': canClick.value,
         'rsui-progress-tracker-step--sm': props.sm,
         'rsui-progress-tracker-step--md': props.md,
@@ -60,6 +68,10 @@ const componentClass = computed(() => [
     }
 ])
 
+const connectorStyle = computed(() => hasProgress.value
+    ? { '--rsui-progress-tracker-connector-progress': `${Math.min(100, Math.max(0, props.progress))}%` }
+    : undefined)
+
 const indicatorClass = computed(() => [
     'rsui-progress-tracker-step__indicator',
     {
@@ -84,6 +96,7 @@ function handleClick() {
 </script>
 <template>
     <div :class="componentClass"
+        :style="connectorStyle"
         :tabindex="canClick ? 0 : undefined"
         :role="canClick ? 'button' : undefined"
         :aria-current="active ? 'step' : undefined"