@dative-gpi/foundation-shared-components 1.1.20-progress-bar → 1.1.20-progress-bar-2

package/components/FSProgressBar.vue

@@ -3,65 +3,43 @@
     align="center-center"
     :style="style"
   >
-    <template
-      v-if="isCentered"
+    <div
+      class="fs-progress-bar-wrapper"
     >
       <div
-        class="fs-progress-bar-centered-wrapper"
+        class="fs-progress-bar-track"
       >
         <div
-          class="fs-progress-bar-centered"
-        >
-          <template
-            v-if="$props.cursor"
-          >
-            <div
-              class="fs-progress-bar-centered-cursor"
-            ></div>
-          </template>
-          <template
-            v-else
-          >
-            <div
-              class="fs-progress-bar-centered-fill"
-            ></div>
-            <div
-              class="fs-progress-bar-centered-marker"
-            ></div>
-          </template>
-        </div>
+          v-if="$props.cursor && isValueInRange"
+          class="fs-progress-bar-cursor"
+        ></div>
+        <div
+          v-if="!$props.cursor"
+          class="fs-progress-bar-fill"
+        ></div>
+      </div>
+      <div
+        v-if="positionedLabels.length"
+        class="fs-progress-bar-labels"
+      >
         <div
-          v-if="$props.showLabels"
-          class="fs-progress-bar-centered-labels"
+          v-for="label in positionedLabels"
+          :key="label.value"
+          class="fs-progress-bar-label"
+          :class="{
+            'fs-progress-bar-label--start': label.percent === 0,
+            'fs-progress-bar-label--end': label.percent === 100
+          }"
+          :style="{ left: `${label.percent}%` }"
         >
           <FSText
             font="text-overline"
           >
-            {{ $props.min }}
-          </FSText>
-          <FSText
-            font="text-overline"
-            class="fs-progress-bar-centered-label-middle"
-          >
-            0
-          </FSText>
-          <FSText
-            font="text-overline"
-          >
-            {{ $props.max }}
+            {{ label.display }}
           </FSText>
         </div>
       </div>
-    </template>
-    <template
-      v-else
-    >
-      <div
-        class="fs-progress-bar-gradient"
-      >
-        <div></div>
-      </div>
-    </template>
+    </div>
     <FSText
       v-if="$props.showValue"
       font="text-button"
@@ -72,7 +50,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
 
 import { useColors } from '@dative-gpi/foundation-shared-components/composables';
 
@@ -105,20 +83,25 @@ export default defineComponent({
       required: false,
       default: true
     },
+    valueFormat: {
+      type: String as PropType<"percentage" | "raw">,
+      required: false,
+      default: "percentage"
+    },
     min: {
       type: Number,
       required: false,
-      default: undefined
+      default: 0
     },
     max: {
       type: Number,
       required: false,
-      default: undefined
+      default: 1
     },
-    showLabels: {
-      type: Boolean,
+    labels: {
+      type: Array as PropType<Array<{ value: number; text?: string }>>,
       required: false,
-      default: true
+      default: () => []
     },
     cursor: {
       type: Boolean,
@@ -133,80 +116,91 @@ export default defineComponent({
     const successColors = getColors(ColorEnum.Success);
     const errorColors = getColors(ColorEnum.Error);
 
-    const fixedRate = computed(() => {
-      return (props.modelValue * 100).toFixed(0);
-    });
+    const isValid = computed(() => props.max > props.min);
 
-    const relativeWidth = computed(() => {
-      return props.modelValue ? 100 / props.modelValue : 0;
+    const range = computed(() => props.max - props.min);
+
+    const clampedValue = computed(() => {
+      if (!isValid.value) { 
+        return props.min; 
+      }
+      return Math.min(Math.max(props.modelValue, props.min), props.max);
     });
 
-    const startColor = computed(() => {
-      return props.startColor ?? errorColors.base;
+    const valuePercent = computed(() => {
+      if (!isValid.value) { 
+        return 0; 
+      }
+      return ((clampedValue.value - props.min) / range.value) * 100;
     });
 
-    const endColor = computed(() => {
-      return props.endColor ?? successColors.base;
+    const isValueInRange = computed(() => {
+      return props.modelValue >= props.min && props.modelValue <= props.max;
     });
 
-    const isCentered = computed(() => {
-      return props.min !== undefined && props.max !== undefined;
+    const zeroPercent = computed(() => {
+      if (!isValid.value) { return 0; }
+      const zero = Math.min(Math.max(0, props.min), props.max);
+      return ((zero - props.min) / range.value) * 100;
     });
 
-    const effectiveMin = computed(() => props.min ?? -1);
-    const effectiveMax = computed(() => props.max ?? 1);
+    const fillLeft = computed(() => Math.min(zeroPercent.value, valuePercent.value));
 
-    const centerPercent = computed(() => {
-      return ((0 - effectiveMin.value) / (effectiveMax.value - effectiveMin.value)) * 100;
-    });
+    const fillWidth = computed(() => Math.abs(valuePercent.value - zeroPercent.value));
 
-    const valuePercent = computed(() => {
-      const clamped = Math.min(Math.max(props.modelValue, effectiveMin.value), effectiveMax.value);
-      return ((clamped - effectiveMin.value) / (effectiveMax.value - effectiveMin.value)) * 100;
+    const gradientStartStop = computed(() => {
+      if (fillWidth.value === 0) { return "0%"; }
+      return `${-(fillLeft.value / fillWidth.value) * 100}%`;
     });
 
-    const fillLeft = computed(() => {
-      return Math.min(centerPercent.value, valuePercent.value);
+    const gradientEndStop = computed(() => {
+      if (fillWidth.value === 0) { return "100%"; }
+      return `${((100 - fillLeft.value) / fillWidth.value) * 100}%`;
     });
 
-    const fillWidth = computed(() => {
-      return Math.abs(valuePercent.value - centerPercent.value);
+    const fillColor = computed(() => {
+      return clampedValue.value >= 0
+        ? (props.endColor ?? successColors.base)
+        : (props.startColor ?? errorColors.base);
     });
 
-    const displayValue = computed(() => {
-      return isCentered.value
-        ? props.modelValue.toFixed(2)
-        : `${fixedRate.value}%`;
-    });
+    const positionedLabels = computed(() => {
+      return props.labels.map(label => {
+        const percent = isValid.value
+          ? ((label.value - props.min) / range.value) * 100
+          : 0;
 
-    const style = computed((): StyleValue => {
-      if (isCentered.value) {
-        const fillColor = props.modelValue >= 0
-          ? (props.endColor ?? successColors.dark)
-          : (props.startColor ?? errorColors.dark);
         return {
-          '--progress-bar-background-color': lightColors.dark,
-          '--progress-bar-fill-color': fillColor,
-          '--progress-bar-fill-left': `${fillLeft.value}%`,
-          '--progress-bar-fill-width': `${fillWidth.value}%`,
-          '--progress-bar-center-position': `${centerPercent.value}%`,
-          '--progress-bar-value-position': `${valuePercent.value}%`
+          value: label.value,
+          display: label.text ?? label.value,
+          percent: Math.min(Math.max(percent, 0), 100)
         };
-      }
-      return {
-        '--progress-bar-background-color': lightColors.dark,
-        '--progress-bar-gradient-start-color': startColor.value,
-        '--progress-bar-gradient-end-color': endColor.value,
-        '--progress-bar-gradient-width': `min(100%, ${fixedRate.value}%)`,
-        '--progress-bar-total-relative-width': `${relativeWidth.value}%`
-      };
+      });
+    });
+
+    const displayValue = computed(() => {
+      if (props.valueFormat === "raw") { return props.modelValue.toFixed(2); }
+      return `${Math.round(valuePercent.value)}%`;
     });
 
+    const style = computed((): StyleValue => ({
+      "--progress-bar-background": lightColors.dark,
+      "--progress-bar-gradient-start": props.startColor ?? errorColors.base,
+      "--progress-bar-gradient-start-stop": gradientStartStop.value,
+      "--progress-bar-gradient-end": props.endColor ?? successColors.base,
+      "--progress-bar-gradient-end-stop": gradientEndStop.value,
+      "--progress-bar-fill-color": fillColor.value,
+      "--progress-bar-fill-left": `${fillLeft.value}%`,
+      "--progress-bar-fill-width": `${fillWidth.value}%`,
+      "--progress-bar-cursor-position": `${valuePercent.value}%`
+    }));
+
     return {
-      isCentered,
-      style,
-      displayValue
-    }
-  },
+      positionedLabels,
+      isValueInRange,
+      displayValue,
+      style
+    };
+  }
 });
-</script>
+</script>

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://github.com/Dative-GPI/foundation-shared-ui.git"
   },
   "sideEffects": false,
-  "version": "1.1.20-progress-bar",
+  "version": "1.1.20-progress-bar-2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,8 +13,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.1.20-progress-bar",
-    "@dative-gpi/foundation-shared-services": "1.1.20-progress-bar"
+    "@dative-gpi/foundation-shared-domain": "1.1.20-progress-bar-2",
+    "@dative-gpi/foundation-shared-services": "1.1.20-progress-bar-2"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -38,5 +38,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0b4a2295745dff49b26c5c3934a04af92560c8b1"
+  "gitHead": "1bf7de326389a2bb6cee7baa796033b0fd2c22f9"
 }

package/styles/components/fs_progress_bar.scss

@@ -1,72 +1,53 @@
-.fs-progress-bar-gradient {
-    flex: 1;
-    background-color: var(--progress-bar-background-color);
-    height: 8px;
-    border-radius: 4px;
-
-    div {
-        transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-        height: 100%;
-        background: linear-gradient(to right, var(--progress-bar-gradient-start-color) 0%, var(--progress-bar-gradient-end-color) var(--progress-bar-total-relative-width));
-        width: var(--progress-bar-gradient-width);
-        border-radius: 4px;
-    }
-}
-
-.fs-progress-bar-centered-wrapper {
+.fs-progress-bar-wrapper {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 2px;
 }
 
-.fs-progress-bar-centered {
+.fs-progress-bar-track {
     position: relative;
-    background-color: var(--progress-bar-background-color);
+    background-color: var(--progress-bar-background);
     height: 8px;
     border-radius: 4px;
 
-    .fs-progress-bar-centered-fill {
+    .fs-progress-bar-fill {
         position: absolute;
         height: 100%;
-        background-color: var(--progress-bar-fill-color);
         left: var(--progress-bar-fill-left);
         width: var(--progress-bar-fill-width);
+        background-color: var(--progress-bar-fill-color);
         border-radius: 4px;
         transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    .fs-progress-bar-centered-marker {
-        position: absolute;
-        top: 0;
-        height: 100%;
-        width: 2px;
-        background-color: var(--progress-bar-background-color);
-        left: var(--progress-bar-center-position);
-        transform: translateX(-50%);
-    }
-
-    .fs-progress-bar-centered-cursor {
+    .fs-progress-bar-cursor {
         position: absolute;
         top: 0;
         height: 100%;
         width: 12px;
         border-radius: 4px;
         background-color: var(--progress-bar-fill-color);
-        left: var(--progress-bar-value-position);
+        left: var(--progress-bar-cursor-position);
         transform: translateX(-50%);
         transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
 }
 
-.fs-progress-bar-centered-labels {
+.fs-progress-bar-labels {
     position: relative;
-    display: flex;
-    justify-content: space-between;
+    height: 16px;
 
-    .fs-progress-bar-centered-label-middle {
+    .fs-progress-bar-label {
         position: absolute;
-        left: var(--progress-bar-center-position);
         transform: translateX(-50%);
+
+        &.fs-progress-bar-label--start {
+            transform: translateX(0);
+        }
+
+        &.fs-progress-bar-label--end {
+            transform: translateX(-100%);
+        }
     }
 }