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

package/components/FSProgressBar.vue

@@ -3,16 +3,70 @@
     align="center-center"
     :style="style"
   >
-    <div
-      class="fs-progress-bar-gradient"
+    <template
+      v-if="isCentered"
     >
-      <div></div>
-    </div>
+      <div
+        class="fs-progress-bar-centered-wrapper"
+      >
+        <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>
+        <div
+          v-if="$props.showLabels"
+          class="fs-progress-bar-centered-labels"
+        >
+          <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 }}
+          </FSText>
+        </div>
+      </div>
+    </template>
+    <template
+      v-else
+    >
+      <div
+        class="fs-progress-bar-gradient"
+      >
+        <div></div>
+      </div>
+    </template>
     <FSText
       v-if="$props.showValue"
       font="text-button"
     >
-      {{ fixedRate }}%
+      {{ displayValue }}
     </FSText>
   </FSRow>
 </template>
@@ -50,6 +104,26 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: true
+    },
+    min: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    max: {
+      type: Number,
+      required: false,
+      default: undefined
+    },
+    showLabels: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    cursor: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   setup(props) {
@@ -58,7 +132,7 @@ export default defineComponent({
     const lightColors = getColors(ColorEnum.Light);
     const successColors = getColors(ColorEnum.Success);
     const errorColors = getColors(ColorEnum.Error);
- 
+
     const fixedRate = computed(() => {
       return (props.modelValue * 100).toFixed(0);
     });
@@ -66,7 +140,7 @@ export default defineComponent({
     const relativeWidth = computed(() => {
       return props.modelValue ? 100 / props.modelValue : 0;
     });
-    
+
     const startColor = computed(() => {
       return props.startColor ?? errorColors.base;
     });
@@ -75,7 +149,50 @@ export default defineComponent({
       return props.endColor ?? successColors.base;
     });
 
+    const isCentered = computed(() => {
+      return props.min !== undefined && props.max !== undefined;
+    });
+
+    const effectiveMin = computed(() => props.min ?? -1);
+    const effectiveMax = computed(() => props.max ?? 1);
+
+    const centerPercent = computed(() => {
+      return ((0 - effectiveMin.value) / (effectiveMax.value - effectiveMin.value)) * 100;
+    });
+
+    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 fillLeft = computed(() => {
+      return Math.min(centerPercent.value, valuePercent.value);
+    });
+
+    const fillWidth = computed(() => {
+      return Math.abs(valuePercent.value - centerPercent.value);
+    });
+
+    const displayValue = computed(() => {
+      return isCentered.value
+        ? props.modelValue.toFixed(2)
+        : `${fixedRate.value}%`;
+    });
+
     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}%`
+        };
+      }
       return {
         '--progress-bar-background-color': lightColors.dark,
         '--progress-bar-gradient-start-color': startColor.value,
@@ -86,8 +203,9 @@ export default defineComponent({
     });
 
     return {
+      isCentered,
       style,
-      fixedRate
+      displayValue
     }
   },
 });

package/components/map/FSMap.vue

@@ -389,7 +389,7 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: 14 });
+      fitBounds(props.bounds, { maxZoom: props.zoom });
     });
 
     watch(() => props.enableScrollWheelZoom, (newValue) => {

package/package.json

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

package/styles/components/fs_progress_bar.scss

@@ -11,4 +11,62 @@
         width: var(--progress-bar-gradient-width);
         border-radius: 4px;
     }
+}
+
+.fs-progress-bar-centered-wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.fs-progress-bar-centered {
+    position: relative;
+    background-color: var(--progress-bar-background-color);
+    height: 8px;
+    border-radius: 4px;
+
+    .fs-progress-bar-centered-fill {
+        position: absolute;
+        height: 100%;
+        background-color: var(--progress-bar-fill-color);
+        left: var(--progress-bar-fill-left);
+        width: var(--progress-bar-fill-width);
+        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 {
+        position: absolute;
+        top: 0;
+        height: 100%;
+        width: 12px;
+        border-radius: 4px;
+        background-color: var(--progress-bar-fill-color);
+        left: var(--progress-bar-value-position);
+        transform: translateX(-50%);
+        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+}
+
+.fs-progress-bar-centered-labels {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+
+    .fs-progress-bar-centered-label-middle {
+        position: absolute;
+        left: var(--progress-bar-center-position);
+        transform: translateX(-50%);
+    }
 }