@nexxtmove/ui 0.1.39 → 0.1.41

package/dist/index.js

@@ -1219,7 +1219,7 @@ function D(A, e) {
   const t = A < 0 ? "-" : "", a = Math.abs(A).toString().padStart(e, "0");
   return t + a;
 }
-const q = {
+const L = {
   // Year
   y(A, e) {
     const t = A.getFullYear(), a = t > 0 ? t : 1 - t;
@@ -1302,7 +1302,7 @@ const q = {
       const a = A.getFullYear(), i = a > 0 ? a : 1 - a;
       return t.ordinalNumber(i, { unit: "year" });
     }
-    return q.y(A, e);
+    return L.y(A, e);
   },
   // Local week-numbering year
   Y: function(A, e, t, a) {
@@ -1401,7 +1401,7 @@ const q = {
     switch (e) {
       case "M":
       case "MM":
-        return q.M(A, e);
+        return L.M(A, e);
       // 1st, 2nd, ..., 12th
       case "Mo":
         return t.ordinalNumber(a + 1, { unit: "month" });
@@ -1462,7 +1462,7 @@ const q = {
   },
   // Day of the month
   d: function(A, e, t) {
-    return e === "do" ? t.ordinalNumber(A.getDate(), { unit: "date" }) : q.d(A, e);
+    return e === "do" ? t.ordinalNumber(A.getDate(), { unit: "date" }) : L.d(A, e);
   },
   // Day of year
   D: function(A, e, t) {
@@ -1697,11 +1697,11 @@ const q = {
       let a = A.getHours() % 12;
       return a === 0 && (a = 12), t.ordinalNumber(a, { unit: "hour" });
     }
-    return q.h(A, e);
+    return L.h(A, e);
   },
   // Hour [0-23]
   H: function(A, e, t) {
-    return e === "Ho" ? t.ordinalNumber(A.getHours(), { unit: "hour" }) : q.H(A, e);
+    return e === "Ho" ? t.ordinalNumber(A.getHours(), { unit: "hour" }) : L.H(A, e);
   },
   // Hour [0-11]
   K: function(A, e, t) {
@@ -1715,15 +1715,15 @@ const q = {
   },
   // Minute
   m: function(A, e, t) {
-    return e === "mo" ? t.ordinalNumber(A.getMinutes(), { unit: "minute" }) : q.m(A, e);
+    return e === "mo" ? t.ordinalNumber(A.getMinutes(), { unit: "minute" }) : L.m(A, e);
   },
   // Second
   s: function(A, e, t) {
-    return e === "so" ? t.ordinalNumber(A.getSeconds(), { unit: "second" }) : q.s(A, e);
+    return e === "so" ? t.ordinalNumber(A.getSeconds(), { unit: "second" }) : L.s(A, e);
   },
   // Fraction of second
   S: function(A, e) {
-    return q.S(A, e);
+    return L.S(A, e);
   },
   // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
   X: function(A, e, t) {
@@ -3242,10 +3242,11 @@ const Ka = {
     icon: "user-slash",
     color: "bg-red-500"
   }
-}, L = {
+}, q = {
   0: {
     label: "Inactief",
     color: "border-slate-300",
+    icon: "eye-closed",
     bgColor: "bg-slate-300",
     fromColor: "from-slate-300",
     toColor: "to-slate-300",
@@ -3254,6 +3255,7 @@ const Ka = {
   1: {
     label: "Latent",
     color: "border-amber-500",
+    icon: "eye-closed",
     bgColor: "bg-amber-500",
     fromColor: "from-amber-500",
     toColor: "to-amber-500",
@@ -3262,6 +3264,7 @@ const Ka = {
   2: {
     label: "Oriëntatie",
     color: "border-purple-500",
+    icon: "building-magnifying-glass",
     bgColor: "bg-purple-500",
     fromColor: "from-purple-500",
     toColor: "to-purple-500",
@@ -3270,6 +3273,7 @@ const Ka = {
   3: {
     label: "Actief zoeken",
     color: "border-yellow-500",
+    icon: "house-person-return",
     bgColor: "bg-yellow-500",
     fromColor: "from-yellow-500",
     toColor: "to-yellow-500",
@@ -3278,6 +3282,7 @@ const Ka = {
   4: {
     label: "Selectie",
     color: "border-blue-500",
+    icon: "handshake",
     bgColor: "bg-blue-500",
     fromColor: "from-blue-500",
     toColor: "to-blue-500",
@@ -3286,6 +3291,7 @@ const Ka = {
   5: {
     label: "Transactie",
     color: "border-emerald-500",
+    icon: "pencil-mechanical",
     bgColor: "bg-emerald-500",
     fromColor: "from-emerald-500",
     toColor: "to-emerald-500",
@@ -3294,6 +3300,7 @@ const Ka = {
   6: {
     label: "Wonen",
     color: "border-green-500",
+    icon: "house-heart",
     bgColor: "bg-green-500",
     fromColor: "from-green-500",
     toColor: "to-green-500",
@@ -3321,47 +3328,40 @@ const Ka = {
     percentageExplanaition: {}
   },
   setup(A) {
-    const e = {
-      Latent: "eye-closed",
-      Oriëntatie: "building-magnifying-glass",
-      "Actief zoeken": "house-person-return",
-      Selectie: "handshake",
-      Transactie: "pencil-mechanical",
-      Wonen: "house-heart"
-    }, t = b(A.animated ? 0 : A.amount ?? 0);
+    const e = b(A.animated ? 0 : A.amount ?? 0);
     gA(() => {
-      A.animated && A.amount !== void 0 && (t.value = A.amount);
+      A.animated && A.amount !== void 0 && (e.value = A.amount);
     });
-    const a = x(() => A.title && e[A.title] || null), i = x(() => {
-      const n = [];
-      if (A.title && n.push(A.title), A.amount !== void 0 && n.push(`${A.amount} contacten`), A.percentage !== void 0) {
-        const r = A.percentage > 0 ? "+" : "", o = A.percentageExplanaition ? ` ${A.percentageExplanaition}` : "";
-        n.push(`${r}${A.percentage}%${o}`);
+    const t = x(() => A.title && Object.values(q).find((n) => n.label === A.title)?.icon || null), a = x(() => {
+      const i = [];
+      if (A.title && i.push(A.title), A.amount !== void 0 && i.push(`${A.amount} contacten`), A.percentage !== void 0) {
+        const n = A.percentage > 0 ? "+" : "", r = A.percentageExplanaition ? ` ${A.percentageExplanaition}` : "";
+        i.push(`${n}${A.percentage}%${r}`);
       }
-      return n.join(", ");
+      return i.join(", ");
     });
-    return (n, r) => (m(), w(fe(A.as), {
-      "aria-label": i.value,
-      class: c(["flex rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500", a.value ? "gap-6 p-1.5" : "p-4"])
+    return (i, n) => (m(), w(fe(A.as), {
+      "aria-label": a.value,
+      class: c(["flex rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500", t.value ? "gap-6 p-1.5" : "p-4"])
     }, {
       default: X(() => [
-        a.value ? (m(), d("div", Li, [
+        t.value ? (m(), d("div", Li, [
           f(N, {
-            name: a.value,
+            name: t.value,
             class: "text-2xl text-purple-500",
             "aria-hidden": "true"
           }, null, 8, ["name"])
         ])) : Q("", !0),
         I("div", {
-          class: c(["flex flex-col items-start gap-1", a.value ? "py-6 pr-4" : ""])
+          class: c(["flex flex-col items-start gap-1", t.value ? "py-6 pr-4" : ""])
         }, [
           A.title ? (m(), d("span", ji, F(A.title), 1)) : Q("", !0),
           A.amount !== void 0 ? (m(), d("span", {
             key: 1,
-            class: c(["heading-1", a.value ? "text-purple-500" : "text-sapphire-900"])
+            class: c(["heading-1", t.value ? "text-purple-500" : "text-sapphire-900"])
           }, [
             f(xe, {
-              value: t.value,
+              value: e.value,
               delay: A.delay
             }, null, 8, ["value", "delay"])
           ], 2)) : Q("", !0),
@@ -3823,7 +3823,7 @@ const Ka = {
                 key: r,
                 value: n.value,
                 disabled: A.disabled,
-                class: "h-8 w-8 cursor-pointer rounded-lg border border-gray-200 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
+                class: "h-9 min-w-9 cursor-pointer rounded-lg border border-gray-200 px-2 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
               }, {
                 default: X(() => [
                   k(F(n.value), 1)
@@ -4595,7 +4595,7 @@ const Zn = { render: Rn }, Gn = { class: "flex items-center justify-end self-str
     const e = A, t = x(() => {
       const r = e.phase.phase.value, o = e.phases[e.index + 1];
       if (!o) return "";
-      const s = L[r].fromColor, E = L[o.phase.value].toColor;
+      const s = q[r].fromColor, E = q[o.phase.value].toColor;
       return `${s} ${E}`;
     }), a = (r) => {
       if (!r) return "";
@@ -4654,11 +4654,11 @@ const Zn = { render: Rn }, Gn = { class: "flex items-center justify-end self-str
         ])
       ])) : Q("", !0),
       I("div", {
-        class: c(["absolute top-0 bottom-0 left-5 w-0 border-l", P(L)[A.phase.phase.value].color])
+        class: c(["absolute top-0 bottom-0 left-5 w-0 border-l", P(q)[A.phase.phase.value].color])
       }, null, 2),
       A.isSplitView ? (m(), d("div", {
         key: 1,
-        class: c(["absolute top-0 right-5 bottom-0 w-0 border-l", P(L)[A.phase.phase.value].color])
+        class: c(["absolute top-0 right-5 bottom-0 w-0 border-l", P(q)[A.phase.phase.value].color])
       }, null, 2)) : Q("", !0),
       (m(!0), d(V, null, Z(A.phase.events, (s) => (m(), w(Ir, {
         key: s.id,
@@ -4670,9 +4670,9 @@ const Zn = { render: Rn }, Gn = { class: "flex items-center justify-end self-str
         class: c(["relative flex flex-col items-center bg-white pt-8 pb-24 text-center", { "pl-16": !A.isSplitView }])
       }, [
         I("div", {
-          class: c(["flex items-center gap-2 rounded-full px-12 py-4", [P(L)[A.phase.phase.value].bgColor, P(L)[A.phase.phase.value].textColor]])
+          class: c(["flex items-center gap-2 rounded-full px-12 py-4", [P(q)[A.phase.phase.value].bgColor, P(q)[A.phase.phase.value].textColor]])
         }, [
-          I("span", fr, F(P(L)[A.phase.phase.value].label), 1),
+          I("span", fr, F(P(q)[A.phase.phase.value].label), 1),
           n() ? (m(), w(N, {
             key: 0,
             name: n() === "up" ? "arrow-up" : "arrow-down",
@@ -4682,7 +4682,7 @@ const Zn = { render: Rn }, Gn = { class: "flex items-center justify-end self-str
         I("span", zr, F(i()), 1),
         A.isSplitView ? (m(), d("div", {
           key: 0,
-          class: c(["mt-4 h-px w-[75%]", P(L)[A.phase.phase.value].bgColor])
+          class: c(["mt-4 h-px w-[75%]", P(q)[A.phase.phase.value].bgColor])
         }, null, 2)) : Q("", !0),
         A.isLast ? Q("", !0) : (m(), d("div", Qr)),
         I("div", {

package/package.json

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

package/src/components/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -4,8 +4,6 @@ import NexxtAnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
 import { computed, onMounted, ref } from 'vue'
 import { PHASE_MAP } from '../TimelineEvent/TimelineTypes'
 
-type Phase = (typeof PHASE_MAP)[keyof typeof PHASE_MAP]['label']
-
 interface NexxtCustomerJourneyTileProps {
   as?: keyof HTMLElementTagNameMap
   title?: string
@@ -16,15 +14,6 @@ interface NexxtCustomerJourneyTileProps {
   percentageExplanaition?: string
 }
 
-const PHASE_ICON_MAP: Partial<Record<Phase, string>> = {
-  Latent: 'eye-closed',
-  Oriëntatie: 'building-magnifying-glass',
-  'Actief zoeken': 'house-person-return',
-  Selectie: 'handshake',
-  Transactie: 'pencil-mechanical',
-  Wonen: 'house-heart',
-}
-
 defineOptions({
   name: 'NexxtCustomerJourneyTile',
 })
@@ -47,7 +36,8 @@ onMounted(() => {
 
 const icon = computed(() => {
   if (!title) return null
-  return (PHASE_ICON_MAP[title as Phase] as InstanceType<typeof NexxtIcon>['name']) || null
+  const phase = Object.values(PHASE_MAP).find((p) => p.label === title)
+  return (phase?.icon as InstanceType<typeof NexxtIcon>['name']) || null
 })
 
 const ariaLabel = computed(() => {

package/src/components/Pagination/Pagination.vue

@@ -64,7 +64,7 @@ const {
           :key="index"
           :value="page.value"
           :disabled="disabled"
-          class="h-8 w-8 cursor-pointer rounded-lg border border-gray-200 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
+          class="h-9 min-w-9 cursor-pointer rounded-lg border border-gray-200 px-2 transition hover:bg-cornflower-blue-50 disabled:cursor-not-allowed data-selected:border-cornflower-blue-500 data-selected:bg-cornflower-blue-500 data-selected:text-white data-selected:shadow-sm"
         >
           {{ page.value }}
         </PaginationListItem>

package/src/components/TimelineEvent/TimelineTypes.ts

@@ -34,6 +34,7 @@ export interface TimelineResponse {
 export interface PhaseConfig {
   label: string
   color: string
+  icon: string
   bgColor: string
   fromColor: string
   toColor: string
@@ -180,6 +181,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   0: {
     label: 'Inactief',
     color: 'border-slate-300',
+    icon: 'eye-closed',
     bgColor: 'bg-slate-300',
     fromColor: 'from-slate-300',
     toColor: 'to-slate-300',
@@ -188,6 +190,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   1: {
     label: 'Latent',
     color: 'border-amber-500',
+    icon: 'eye-closed',
     bgColor: 'bg-amber-500',
     fromColor: 'from-amber-500',
     toColor: 'to-amber-500',
@@ -196,6 +199,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   2: {
     label: 'Oriëntatie',
     color: 'border-purple-500',
+    icon: 'building-magnifying-glass',
     bgColor: 'bg-purple-500',
     fromColor: 'from-purple-500',
     toColor: 'to-purple-500',
@@ -204,6 +208,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   3: {
     label: 'Actief zoeken',
     color: 'border-yellow-500',
+    icon: 'house-person-return',
     bgColor: 'bg-yellow-500',
     fromColor: 'from-yellow-500',
     toColor: 'to-yellow-500',
@@ -212,6 +217,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   4: {
     label: 'Selectie',
     color: 'border-blue-500',
+    icon: 'handshake',
     bgColor: 'bg-blue-500',
     fromColor: 'from-blue-500',
     toColor: 'to-blue-500',
@@ -220,6 +226,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   5: {
     label: 'Transactie',
     color: 'border-emerald-500',
+    icon: 'pencil-mechanical',
     bgColor: 'bg-emerald-500',
     fromColor: 'from-emerald-500',
     toColor: 'to-emerald-500',
@@ -228,6 +235,7 @@ export const PHASE_MAP: Record<number, PhaseConfig> = {
   6: {
     label: 'Wonen',
     color: 'border-green-500',
+    icon: 'house-heart',
     bgColor: 'bg-green-500',
     fromColor: 'from-green-500',
     toColor: 'to-green-500',