@nexxtmove/ui 0.1.64 → 0.1.66

package/dist/index.d.ts

@@ -1184,6 +1184,7 @@ declare interface NexxtCustomerJourneyTileProps {
     delay?: number;
     percentage?: number;
     percentageExplanaition?: string;
+    invertPercentageColor?: boolean;
     variant?: 'information' | 'display';
     selected?: boolean;
 }

package/dist/index.js

@@ -5116,6 +5116,7 @@ const no = /* @__PURE__ */ vZ($Z, [["render", ms]]), Ms = {
     delay: {},
     percentage: {},
     percentageExplanaition: {},
+    invertPercentageColor: { type: Boolean, default: !1 },
     variant: { default: "information" },
     selected: { type: Boolean, default: !1 }
   },
@@ -5182,7 +5183,7 @@ const no = /* @__PURE__ */ vZ($Z, [["render", ms]]), Ms = {
             I("span", {
               class: F([
                 "extra-small-semibold",
-                i.percentage > 0 ? "text-green-500" : i.percentage === 0 ? "text-orange-500" : "text-brick-500"
+                i.percentage === 0 ? "text-orange-500" : i.percentage > 0 !== i.invertPercentageColor ? "text-green-500" : "text-brick-500"
               ])
             }, [
               i.percentage > 0 ? (o(), y(V, { key: 0 }, [
@@ -5852,7 +5853,7 @@ const no = /* @__PURE__ */ vZ($Z, [["render", ms]]), Ms = {
   },
   emits: ["update:currentStep"],
   setup(i) {
-    const x = u(() => i.variant === "percentage"), m = u(() => Math.min(Math.max(0, i.currentStep), Math.max(0, i.steps - 1))), M = u(() => i.steps > 0 ? m.value + 1 : 0), c = u(() => i.steps <= 1 ? i.steps === 1 ? 100 : 0 : m.value / (i.steps - 1) * 100), l = u(() => !x.value && !!i.stepTitles?.length);
+    const x = u(() => i.variant === "percentage"), m = u(() => x.value ? Math.max(0, i.currentStep) : Math.min(Math.max(0, i.currentStep), Math.max(0, i.steps - 1))), M = u(() => i.steps > 0 ? m.value + 1 : 0), c = u(() => x.value ? i.steps <= 0 ? 0 : Math.min(Math.round(m.value / i.steps * 100), 100) : i.steps <= 1 ? i.steps === 1 ? 100 : 0 : m.value / (i.steps - 1) * 100), l = u(() => !x.value && !!i.stepTitles?.length);
     return Tm(() => {
       i.stepTitles && i.stepTitles.length !== i.steps && console.warn(
         `[NexxtProgressBar] The "stepTitles" array length (${i.stepTitles.length}) must match the "steps" prop (${i.steps}).`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -12,6 +12,7 @@ interface NexxtCustomerJourneyTileProps {
   delay?: number
   percentage?: number
   percentageExplanaition?: string
+  invertPercentageColor?: boolean
   variant?: 'information' | 'display'
   selected?: boolean
 }
@@ -28,6 +29,7 @@ const {
   delay,
   percentage,
   percentageExplanaition,
+  invertPercentageColor = false,
   variant = 'information',
   selected = false,
 } = defineProps<NexxtCustomerJourneyTileProps>()
@@ -118,10 +120,10 @@ const iconColors = computed(() => {
         <span
           class="extra-small-semibold"
           :class="
-            percentage > 0
-              ? 'text-green-500'
-              : percentage === 0
-                ? 'text-orange-500'
+            percentage === 0
+              ? 'text-orange-500'
+              : percentage > 0 !== invertPercentageColor
+                ? 'text-green-500'
                 : 'text-brick-500'
           "
           ><template v-if="percentage > 0">+</template>{{ percentage }}%</span

package/src/components/ProgressBar/ProgressBar.vue

@@ -26,10 +26,19 @@ const {
 
 const isPercentage = computed(() => variant === 'percentage')
 
-const clampedStep = computed(() => Math.min(Math.max(0, currentStep), Math.max(0, steps - 1)))
+const clampedStep = computed(() => {
+  if (isPercentage.value) return Math.max(0, currentStep)
+  return Math.min(Math.max(0, currentStep), Math.max(0, steps - 1))
+})
+
 const displayStep = computed(() => (steps > 0 ? clampedStep.value + 1 : 0))
 
 const percentage = computed(() => {
+  if (isPercentage.value) {
+    if (steps <= 0) return 0
+    return Math.min(Math.round((clampedStep.value / steps) * 100), 100)
+  }
+
   if (steps <= 1) return steps === 1 ? 100 : 0
   return (clampedStep.value / (steps - 1)) * 100
 })