@nexxtmove/ui 0.1.38 → 0.1.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -20,6 +20,7 @@
     "tailwind"
   ],
   "dependencies": {
+    "@number-flow/vue": "^0.5.0",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "reka-ui": "^2.9.2"

package/src/components/AnimatedNumber/AnimatedNumber.vue

@@ -1,65 +1,21 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import NumberFlow from '@number-flow/vue'
 
 defineOptions({
   name: 'NexxtAnimatedNumber',
 })
 
-type EasingFunction = 'ease-linear' | 'ease-in' | 'ease-out' | 'ease-in-out'
-
 const {
   value,
   duration = 500,
-  easing = 'ease-out',
+  delay = 0,
 } = defineProps<{
   value: number
   duration?: number
-  easing?: EasingFunction
+  delay?: number
 }>()
-
-const direction = ref<'up' | 'down'>('up')
-const digits = computed(() => String(value).split(''))
-const transitionDuration = computed(() => `duration-${duration}`)
-
-watch(
-  () => value,
-  (newVal, oldVal) => {
-    direction.value = newVal > oldVal ? 'up' : 'down'
-  },
-)
 </script>
 
 <template>
-  <TransitionGroup
-    tag="div"
-    class="relative flex shrink-0 items-center tabular-nums"
-    :aria-label="value"
-    :enter-active-class="`transition-all ${transitionDuration} ${easing}`"
-    :leave-active-class="`absolute transition-all ${transitionDuration} ${easing}`"
-    :enter-from-class="
-      direction === 'up' ? 'translate-y-full opacity-0' : '-translate-y-full opacity-0'
-    "
-    :leave-to-class="
-      direction === 'up' ? '-translate-y-full opacity-0' : 'translate-y-full opacity-0'
-    "
-    move-class="transition-all duration-500 ease-in-out"
-  >
-    <div
-      v-for="(digit, i) in digits"
-      :key="i"
-      class="relative inline-flex h-[1.5em] w-[1ch] items-center justify-center overflow-hidden"
-      aria-hidden="true"
-    >
-      <Transition
-        :enter-active-class="`transition-transform ${transitionDuration} ${easing}`"
-        :leave-active-class="`absolute inset-0 transition-transform ${transitionDuration} ${easing}`"
-        :enter-from-class="direction === 'up' ? 'translate-y-full' : '-translate-y-full'"
-        :leave-to-class="direction === 'up' ? '-translate-y-full' : 'translate-y-full'"
-      >
-        <span :key="digit" class="flex h-full w-full items-center justify-center">
-          {{ digit }}
-        </span>
-      </Transition>
-    </div>
-  </TransitionGroup>
+  <NumberFlow :value="value" :transform-timing="{ duration, delay }" />
 </template>

package/src/components/CustomerJourneyTile/CustomerJourneyTile.vue

@@ -1,35 +1,43 @@
 <script lang="ts" setup>
 import NexxtIcon from '../Icon/Icon.vue'
-import { computed } from 'vue'
-
-type Phase = 'Latent' | 'Oriëntatie' | 'Actief zoeken' | 'Selectie' | 'Transactie' | 'Wonen'
+import NexxtAnimatedNumber from '../AnimatedNumber/AnimatedNumber.vue'
+import { computed, onMounted, ref } from 'vue'
+import { PHASE_MAP } from '../TimelineEvent/TimelineTypes'
 
 interface NexxtCustomerJourneyTileProps {
+  as?: keyof HTMLElementTagNameMap
   title?: string
   amount?: number
+  animated?: boolean
+  delay?: number
   percentage?: number
   percentageExplanaition?: string
 }
 
-const PHASE_ICON_MAP: 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',
 })
 
-const { title, amount, percentage, percentageExplanaition } =
-  defineProps<NexxtCustomerJourneyTileProps>()
+const {
+  as = 'div',
+  title,
+  amount,
+  animated = false,
+  delay,
+  percentage,
+  percentageExplanaition,
+} = defineProps<NexxtCustomerJourneyTileProps>()
+
+const displayAmount = ref(animated ? 0 : (amount ?? 0))
+
+onMounted(() => {
+  if (animated && amount !== undefined) displayAmount.value = amount
+})
 
 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(() => {
@@ -46,10 +54,10 @@ const ariaLabel = computed(() => {
 </script>
 
 <template>
-  <button
-    type="button"
+  <component
+    :is="as"
     :aria-label="ariaLabel"
-    class="flex cursor-pointer rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
+    class="flex rounded-xl bg-white outline outline-gray-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500"
     :class="icon ? 'gap-6 p-1.5' : 'p-4'"
   >
     <div
@@ -63,19 +71,26 @@ const ariaLabel = computed(() => {
       <span
         class="heading-1"
         :class="icon ? 'text-purple-500' : 'text-sapphire-900'"
-        v-if="amount"
-        >{{ amount }}</span
+        v-if="amount !== undefined"
       >
-      <div v-if="percentage" class="flex gap-0.5">
+        <NexxtAnimatedNumber :value="displayAmount" :delay="delay" />
+      </span>
+      <div v-if="percentage !== undefined" class="flex gap-0.5">
         <span
           class="extra-small-semibold"
-          :class="percentage > 0 ? 'text-green-500' : 'text-brick-500'"
+          :class="
+            percentage > 0
+              ? 'text-green-500'
+              : percentage === 0
+                ? 'text-orange-500'
+                : 'text-brick-500'
+          "
           ><template v-if="percentage > 0">+</template>{{ percentage }}%</span
         >
-        <span class="extra-small-normal" v-if="percentageExplanaition">{{
+        <span class="ml-0.5 text-left extra-small-normal" v-if="percentageExplanaition">{{
           percentageExplanaition
         }}</span>
       </div>
     </div>
-  </button>
+  </component>
 </template>

package/src/components/DropdownButton/DropdownButton.vue

@@ -6,14 +6,21 @@ interface NexxtDropdownButton {
   label: string
   action: string | (() => void)
   icon?: InstanceType<typeof NexxtIcon>['name']
+  selected?: boolean
 }
 
-export interface NexxtDropdownButtonProps extends NexxtDropdownButton {
+type NexxtDropdownButtonBase = {
   variant?: 'primary' | 'secondary'
   options: NexxtDropdownButton[]
   placement?: 'left' | 'right'
+  triggerIcon?: InstanceType<typeof NexxtIcon>['name']
+  icon?: InstanceType<typeof NexxtIcon>['name']
 }
 
+export type NexxtDropdownButtonProps =
+  | (NexxtDropdownButtonBase & { iconOnly?: false; label: string; action: string | (() => void) })
+  | (NexxtDropdownButtonBase & { iconOnly: true; label?: string; action?: string | (() => void) })
+
 const {
   variant = 'primary',
   options,
@@ -21,6 +28,8 @@ const {
   action,
   icon,
   placement = 'right',
+  iconOnly = false,
+  triggerIcon = 'chevron-down',
 } = defineProps<NexxtDropdownButtonProps>()
 
 const emit = defineEmits<{
@@ -106,31 +115,33 @@ const transitionClasses = computed(() => {
     :class="placement === 'right' ? 'items-end' : 'items-start'"
   >
     <div class="inline-flex items-center overflow-hidden rounded-md" :class="componentClasses">
+      <template v-if="!iconOnly">
+        <button
+          class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
+          :class="buttonClasses"
+          @click="action && handleAction(action)"
+        >
+          <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
+          {{ label }}
+        </button>
+        <span
+          class="h-7 w-px rounded-sm"
+          :class="variant === 'primary' ? 'bg-white' : 'bg-gray-200'"
+          aria-hidden="true"
+        ></span>
+      </template>
       <button
-        class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
-        :class="buttonClasses"
-        @click="handleAction(action)"
-      >
-        <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
-        {{ label }}
-      </button>
-      <span
-        class="h-7 w-px rounded-sm"
-        :class="variant === 'primary' ? 'bg-white' : 'bg-gray-200'"
-        aria-hidden="true"
-      ></span>
-      <button
-        class="cursor-pointer px-2 py-2 transition-colors duration-200"
-        :class="buttonClasses"
-        @click="toggleDropdown"
+        class="w-10 shrink-0 cursor-pointer transition-colors duration-200"
+        :class="[buttonClasses, iconOnly ? 'p-2' : 'px-2 py-2']"
+        @click="iconOnly ? toggleDropdown() : toggleDropdown()"
         aria-haspopup="menu"
         :aria-expanded="isOpen"
         :aria-label="`Open ${label} menu`"
       >
         <NexxtIcon
-          name="chevron-down"
+          :name="triggerIcon"
           class="transition-transform duration-200"
-          :class="{ 'rotate-180': isOpen }"
+          :class="{ 'rotate-180': isOpen && triggerIcon === 'chevron-down' }"
           aria-hidden="true"
         />
       </button>
@@ -148,6 +159,7 @@ const transitionClasses = computed(() => {
           :key="option.label"
           role="menuitem"
           class="flex w-full min-w-42 cursor-pointer items-center gap-2 px-4 py-2 text-left text-sm whitespace-nowrap text-gray-700 transition-colors duration-200 hover:bg-gray-100 hover:text-purple-600 focus:bg-gray-100 focus:outline-none"
+          :class="option.selected ? 'bg-cornflower-blue-100' : ''"
           @click="handleOptionClick(option.action)"
         >
           <NexxtIcon v-if="option.icon" :name="option.icon" aria-hidden="true" />

package/src/components/Header/Header.vue

@@ -3,6 +3,7 @@ import Button from '../Button/Button.vue'
 
 interface NexxtHeaderProps {
   title: string
+  headingType?: 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4'
   backButtonText?: string
   backButtonAction?: () => void
 }
@@ -12,6 +13,7 @@ defineOptions({
 })
 
 const {
+  headingType = 'heading-4',
   backButtonText,
   backButtonAction = () => {
     window.history.back()
@@ -29,7 +31,7 @@ const {
         @click="backButtonAction"
         >{{ backButtonText }}</Button
       >
-      <span class="block truncate heading-4 text-sapphire-500">
+      <span class="block truncate text-sapphire-500" :class="headingType">
         {{ title }}
       </span>
     </div>

package/src/components/InputField/InputField.vue

@@ -33,7 +33,7 @@ const modelValue = defineModel<string>()
     </label>
 
     <div
-      class="flex items-center gap-2 rounded-lg px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      class="flex items-center gap-2 rounded-sm px-3 ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
       :class="error ? 'ring-brick-400' : 'ring-gray-200'"
     >
       <span v-if="leftIcon" class="flex items-center">
@@ -47,10 +47,11 @@ const modelValue = defineModel<string>()
         v-bind="$attrs"
         class="h-10 min-w-60 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
       />
-
-      <span v-if="rightIcon" class="flex items-center">
-        <Icon :name="rightIcon" />
-      </span>
+      <slot name="right">
+        <span v-if="rightIcon" class="flex items-center">
+          <Icon :name="rightIcon" />
+        </span>
+      </slot>
     </div>
 
     <Transition

package/src/components/Table/Table.vue

@@ -8,6 +8,7 @@ export interface TableColumn<K extends string = string> {
   label: string
   sortable?: boolean
   width?: string
+  minCellWidth?: number
 }
 
 export interface NexxtTableProps<
@@ -17,12 +18,19 @@ export interface NexxtTableProps<
   columns: TableColumn<TKey>[]
   rows: TRow[]
   selectable?: boolean
+  loading?: boolean
 }
 
 const INTERACTIVE = ['a', 'button', 'input', 'select', 'textarea', 'label']
 
 defineOptions({ name: 'NexxtTable' })
 
+defineSlots<
+  { [K in TKey as `cell-${K}`]?: (props: { row: TRow; value: TRow[K] }) => unknown } & {
+    [key: string]: ((props: Record<string, unknown>) => unknown) | undefined
+  }
+>()
+
 const props = defineProps<NexxtTableProps<TKey, TRow>>()
 const emit = defineEmits<{
   'row-click': [row: TRow]
@@ -54,7 +62,9 @@ const toggleRow = (row: TRow) => {
 }
 
 const columnTemplate = computed(() =>
-  props.columns.map((col) => `minmax(100px, ${col.width ?? '1fr'})`).join(' '),
+  props.columns
+    .map((col) => `minmax(${col.minCellWidth ?? 150}px, ${col.width ?? '1fr'})`)
+    .join(' '),
 )
 
 const gridTemplate = computed(() =>
@@ -87,7 +97,8 @@ const getRowRoundedClass = (rowIndex: number) => {
   return ''
 }
 
-const rowValue = (row: TRow, key: TKey) => (row as Record<TKey, unknown>)[key]
+const rowValue = (row: TRow, key: TKey): TRow[TKey] => row[key]
+const cellSlotName = (key: TKey): string => `cell-${key}`
 
 const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
   if (event.key === 'ArrowDown') {
@@ -102,12 +113,12 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
 
 <template>
   <div class="flex flex-col gap-3">
-    <div class="overflow-auto">
+    <div class="overflow-x-auto">
       <div
         role="grid"
         :aria-colcount="columns.length + (selectable ? 1 : 0)"
         :aria-rowcount="rows.length + 1"
-        class="w-full min-w-max"
+        class="min-w-full"
       >
         <div class="sticky top-0 z-10 mb-0.5">
           <div v-if="$slots.toolbar">
@@ -156,7 +167,9 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
               @keydown.enter.prevent="handleSort(column)"
               @keydown.space.prevent="handleSort(column)"
             >
-              {{ column.label }}
+              <span :class="sortKey === column.key ? 'text-cornflower-blue-600' : ''">{{
+                column.label
+              }}</span>
               <Icon
                 v-if="column.sortable"
                 :name="
@@ -173,7 +186,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
           </div>
         </div>
 
-        <div role="rowgroup">
+        <div role="rowgroup" class="relative">
           <div
             v-for="(row, rowIndex) in rows"
             :key="rowIndex"
@@ -215,7 +228,7 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
               role="gridcell"
               :aria-colindex="colIndex + (selectable ? 2 : 1)"
             >
-              <slot :name="`cell-${column.key}`" :row="row" :value="rowValue(row, column.key)">
+              <slot :name="cellSlotName(column.key)" :row="row" :value="rowValue(row, column.key)">
                 {{ rowValue(row, column.key) }}
               </slot>
             </div>
@@ -224,6 +237,23 @@ const handleRowKeydown = (event: KeyboardEvent, rowIndex: number) => {
           <div v-if="!rows.length" class="px-4 py-8 text-center text-sm text-slate-400" role="row">
             <slot name="empty">Geen data beschikbaar</slot>
           </div>
+
+          <Transition
+            enter-active-class="transition-opacity duration-200"
+            leave-active-class="transition-opacity duration-200"
+            enter-from-class="opacity-0"
+            leave-to-class="opacity-0"
+          >
+            <div
+              v-if="loading"
+              data-testid="loading-overlay"
+              class="absolute inset-0 flex items-center justify-center rounded-md bg-white/40 backdrop-blur-sm"
+            >
+              <slot name="loading"
+                ><Icon name="spinner-third" class="fa-spin text-3xl text-purple-500"
+              /></slot>
+            </div>
+          </Transition>
         </div>
       </div>
     </div>

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,14 +181,16 @@ 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',
     textColor: 'text-gray-700',
   },
   1: {
-    label: 'Latente woonfase',
+    label: 'Latent',
     color: 'border-amber-500',
+    icon: 'eye-closed',
     bgColor: 'bg-amber-500',
     fromColor: 'from-amber-500',
     toColor: 'to-amber-500',
@@ -196,14 +199,16 @@ 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',
     textColor: 'text-white',
   },
   3: {
-    label: 'Actieve zoektocht',
+    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',