@nexxtmove/ui 1.2.3 → 1.2.5

package/dist/nuxt.js

@@ -47613,7 +47613,9 @@ var Xw, Zw, Qw, $w, eT, tT = f((() => {
 	NexxtTabs: "components/Tabs/Tabs.vue",
 	NexxtTemplateCard: "components/TemplateCard/TemplateCard.vue",
 	NexxtTimelineEvent: "components/TimelineEvent/TimelineEvent.vue",
+	NexxtTimelineLanes: "components/TimelineLanes/TimelineLanes.vue",
 	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+	NexxtTimelineTrack: "components/TimelineTrack/TimelineTrack.vue",
 	NexxtToast: "components/Toast/Toast.vue",
 	NexxtToaster: "components/Toaster/Toaster.vue",
 	NexxtToggleGroup: "components/ToggleGroup/ToggleGroup.vue",
@@ -47645,7 +47647,7 @@ var Xw, Zw, Qw, $w, eT, tT = f((() => {
 				getContents: () => `
 @import "tailwindcss";
 @import "@nexxtmove/ui/theme";
-@source "${e}/**/*.vue";
+@source "${e}/**/*.{vue,ts}";
 `,
 				write: !0
 			}), o.options.css.push("#build/nexxtmove-ui.css");

package/package.json

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

package/src/components/Header/Header.vue

@@ -2,7 +2,8 @@
 import Button from '../Button/Button.vue'
 
 interface NexxtHeaderProps {
-  title: string
+  /** Optional when the title slot is used. */
+  title?: string
   headingType?: 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4'
   backButtonText?: string
   backButtonAction?: () => void
@@ -37,7 +38,12 @@ const {
           {{ backButtonText }}
         </Button>
       </slot>
-      <span class="min-w-0 flex-1 truncate text-sapphire-500" :class="headingType">
+      <!-- The title slot replaces the static title, keeping the same flex-1 and
+           min-w-0 sizing so a centered slot stays centered. -->
+      <div v-if="$slots.title" class="flex min-w-0 flex-1 items-center">
+        <slot name="title" />
+      </div>
+      <span v-else class="min-w-0 flex-1 truncate text-sapphire-500" :class="headingType">
         {{ title }}
       </span>
     </div>

package/src/components/Squircle/Squircle.vue

@@ -23,21 +23,39 @@ const px = computed(() => (typeof props.size === 'number' ? props.size : sizeMap
 
 const id = Math.random().toString(36).slice(2, 9)
 const clipPathId = `squircle-clip-${id}`
+
+// Squircle outline normalised to a 0-1 box so a single path works at any size.
+// Safari renders foreignObject content unreliably, so the slot lives in a plain
+// element that is clipped with an objectBoundingBox clipPath instead.
+const squirclePath =
+  'M0.5,1 c0.219,0 0.341,0 0.4205,-0.0795 C1,0.841 1,0.719 1,0.5 s0,-0.341 -0.0795,-0.4205 ' +
+  'C0.841,0 0.719,0 0.5,0 S0.159,0 0.0795,0.0795 C0,0.159 0,0.281 0,0.5 ' +
+  's0,0.341 0.0795,0.4205 C0.159,1 0.281,1 0.5,1 Z'
+
+const style = computed(() => ({
+  width: `${px.value}px`,
+  height: `${px.value}px`,
+  clipPath: `url(#${clipPathId})`,
+  WebkitClipPath: `url(#${clipPathId})`,
+}))
 </script>
 
 <template>
-  <svg :viewBox="`0 0 ${px} ${px}`" :width="px" :height="px">
-    <defs>
-      <clipPath :id="clipPathId">
-        <path
-          :transform="`scale(${px / 200})`"
-          d="M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z"
-        />
-      </clipPath>
-    </defs>
-
-    <foreignObject x="0" y="0" width="100%" height="100%" :clip-path="`url(#${clipPathId})`">
-      <slot />
-    </foreignObject>
-  </svg>
+  <div class="relative block shrink-0 overflow-hidden" :style="style">
+    <svg
+      class="absolute h-0 w-0 overflow-hidden"
+      aria-hidden="true"
+      focusable="false"
+      width="0"
+      height="0"
+    >
+      <defs>
+        <clipPath :id="clipPathId" clipPathUnits="objectBoundingBox">
+          <path :d="squirclePath" />
+        </clipPath>
+      </defs>
+    </svg>
+
+    <slot />
+  </div>
 </template>

package/src/components/StepperHeader/StepperHeader.vue

@@ -3,7 +3,8 @@ import Header from '../Header/Header.vue'
 import ProgressBar from '../ProgressBar/ProgressBar.vue'
 
 interface NexxtStepperHeaderProps {
-  title: string
+  /** Optional when the title slot is used. */
+  title?: string
   currentStep: InstanceType<typeof ProgressBar>['currentStep']
   steps: InstanceType<typeof ProgressBar>['stepTitles']
   backButtonText?: InstanceType<typeof Header>['backButtonText']
@@ -21,6 +22,12 @@ defineProps<NexxtStepperHeaderProps>()
 
 <template>
   <Header :title="title" :back-button-action="backButtonAction" :back-button-text="backButtonText">
+    <template v-if="$slots['back-button']" #back-button>
+      <slot name="back-button" />
+    </template>
+    <template v-if="$slots.title" #title>
+      <slot name="title" />
+    </template>
     <template v-if="steps" #center>
       <ProgressBar
         class="w-full"

package/src/components/TimelineEvent/TimelineEvent.vue

@@ -19,8 +19,16 @@ const defaultEventConfig: EventConfig = {
   color: 'bg-gray-500',
 }
 
-const eventConfig = computed(() => {
-  return EVENT_CONFIG_MAP[props.event.type] || { ...defaultEventConfig, label: props.event.type }
+// Resolved per field so an event can override only its label (e.g. a dynamic
+// "Status gewijzigd van X naar Y") and still take icon and color from the map.
+const eventConfig = computed<EventConfig>(() => {
+  const mapped = EVENT_CONFIG_MAP[props.event.type]
+
+  return {
+    label: props.event.label ?? mapped?.label ?? props.event.type,
+    icon: props.event.icon ?? mapped?.icon ?? defaultEventConfig.icon,
+    color: props.event.color ?? mapped?.color ?? defaultEventConfig.color,
+  }
 })
 
 const props = withDefaults(
@@ -102,6 +110,9 @@ const isContactEvent = computed(() => {
           </span>
           <NexxtIcon name="external-link" class="ml-1 h-4 w-4 text-gray-950" />
         </a>
+        <span v-else-if="event.description" class="mt-1 text-sm text-gray-500">
+          {{ event.description }}
+        </span>
         <span v-if="event.request_reason" class="mt-1 text-sm text-gray-500">
           Reden: {{ event.request_reason }}
         </span>

package/src/components/TimelineEvent/TimelineTypes.ts

@@ -1,15 +1,22 @@
 export interface TimelineEvent {
-  id: number
+  id: string | number
   type: string
   happened_at: string
-  medium_type: string | null
-  url: string | null
-  page_title: string | null
-  request_reason: string | null
-  agenda_item_type: string | null
-  source: string
-  direction: string
-  description: string | null
+  /** Required when the event is rendered in split view ('outbound' | 'inbound'). */
+  direction?: string
+  medium_type?: string | null
+  url?: string | null
+  page_title?: string | null
+  request_reason?: string | null
+  agenda_item_type?: string | null
+  source?: string
+  description?: string | null
+  /** Overrides the label from EVENT_CONFIG_MAP. Use for dynamic labels. */
+  label?: string | null
+  /** Overrides the icon from EVENT_CONFIG_MAP. */
+  icon?: string | null
+  /** Overrides the background color class from EVENT_CONFIG_MAP. */
+  color?: string | null
 }
 
 export interface TimelinePhase {
@@ -137,9 +144,34 @@ export const EVENT_CONFIG_MAP: Record<string, { label: string; icon: string; col
     icon: 'pen-fancy',
     color: 'bg-emerald-500',
   },
+  proposal_created: { label: 'Voorstel aangemaakt', icon: 'file-plus', color: 'bg-blue-500' },
+  proposal_scheduled: { label: 'Voorstel ingepland', icon: 'calendar-clock', color: 'bg-blue-400' },
   proposal_sent: { label: 'Voorstel verzonden', icon: 'paper-plane-top', color: 'bg-blue-400' },
+  proposal_delivered: {
+    label: 'Voorstel afgeleverd',
+    icon: 'envelope-circle-check',
+    color: 'bg-blue-300',
+  },
+  // Mail geopend (read_at) is a different moment than the proposal itself being
+  // viewed (opened_at, proposal_opened below).
+  proposal_mail_opened: {
+    label: 'Mail geopend',
+    icon: 'envelope-open-text',
+    color: 'bg-blue-200',
+  },
   proposal_opened: { label: 'Voorstel geopend', icon: 'envelope-open', color: 'bg-blue-300' },
   proposal_accepted: { label: 'Voorstel geaccepteerd', icon: 'check', color: 'bg-emerald-500' },
+  proposal_send_failed: {
+    label: 'Verzenden mislukt',
+    icon: 'triangle-exclamation',
+    color: 'bg-red-500',
+  },
+  proposal_expired: { label: 'Voorstel verlopen', icon: 'clock-rotate-left', color: 'bg-gray-500' },
+  proposal_status_changed: {
+    label: 'Status gewijzigd',
+    icon: 'repeat',
+    color: 'bg-purple-500',
+  },
 
   // Aftercare
   final_inspection_agenda_item_scheduled: {

package/src/components/TimelineLanes/TimelineLanes.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtTooltip from '../Tooltip/Tooltip.vue'
+
+defineOptions({
+  name: 'NexxtTimelineLanes',
+})
+
+withDefaults(
+  defineProps<{
+    leftLabel?: string
+    rightLabel?: string
+    /** Tooltip next to the left label. Omit or pass an empty string to hide it. */
+    leftTooltip?: string
+    /** Tooltip next to the right label. Omit or pass an empty string to hide it. */
+    rightTooltip?: string
+  }>(),
+  {
+    leftLabel: 'Outbound',
+    rightLabel: 'Inbound',
+    leftTooltip: 'Vanuit Nexxtmove',
+    rightTooltip: 'Vanuit relatie',
+  },
+)
+</script>
+
+<template>
+  <div class="relative z-10">
+    <div class="flex items-center justify-between px-4 py-2">
+      <span class="flex gap-1">
+        {{ leftLabel }}
+        <NexxtTooltip v-if="leftTooltip">
+          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <template #tooltip
+            ><span class="text-sm">{{ leftTooltip }}</span></template
+          >
+        </NexxtTooltip>
+      </span>
+      <span class="flex gap-1">
+        {{ rightLabel }}
+        <NexxtTooltip v-if="rightTooltip">
+          <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
+          <template #tooltip
+            ><span class="text-sm">{{ rightTooltip }}</span></template
+          >
+        </NexxtTooltip>
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/TimelinePhaseblock/TimelinePhaseblock.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import NexxtIcon from '../Icon/Icon.vue'
-import NexxtTooltip from '../Tooltip/Tooltip.vue'
 import { computed } from 'vue'
 
 defineOptions({
   name: 'NexxtTimelinePhaseblock',
 })
 import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
 import { PHASE_MAP, type TimelinePhase } from '../TimelineEvent/TimelineTypes'
 
 const props = defineProps<{
@@ -69,26 +69,7 @@ const getPhaseDirection = () => {
 
 <template>
   <div class="relative z-10 flex flex-col gap-16" :data-phase="phase.phase.value">
-    <template v-if="index === 0 && isSplitView">
-      <div class="relative z-10">
-        <div class="flex items-center justify-between px-4 py-2">
-          <span class="flex gap-1">
-            Outbound
-            <NexxtTooltip>
-              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
-              <template #tooltip><span class="text-sm">Vanuit Nexxtmove</span></template>
-            </NexxtTooltip>
-          </span>
-          <span class="flex gap-1">
-            Inbound
-            <NexxtTooltip as-child>
-              <NexxtIcon name="circle-info" class="h-4 w-4 text-xs text-gray-600" />
-              <template #tooltip><span class="text-sm">Vanuit relatie</span></template>
-            </NexxtTooltip>
-          </span>
-        </div>
-      </div>
-    </template>
+    <NexxtTimelineLanes v-if="index === 0 && isSplitView" />
     <!-- Left timeline line (always shown) -->
     <div
       class="absolute bottom-0 left-5 w-0 border-l"

package/src/components/TimelineTrack/TimelineTrack.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({
+  name: 'NexxtTimelineTrack',
+})
+import NexxtTimelineEvent from '../TimelineEvent/TimelineEvent.vue'
+import NexxtTimelineLanes from '../TimelineLanes/TimelineLanes.vue'
+import type { TimelineEvent as Event } from '../TimelineEvent/TimelineTypes'
+
+const props = withDefaults(
+  defineProps<{
+    /** Events, newest first. Ignored when the default slot is used. */
+    events?: Event[]
+    splitView?: boolean
+    /** Border color class for the vertical timeline lines. */
+    color?: string
+    /** Set to false to hide the lane headers in split view. */
+    showLanes?: boolean
+    leftLabel?: string
+    rightLabel?: string
+    leftTooltip?: string
+    rightTooltip?: string
+  }>(),
+  {
+    events: () => [],
+    splitView: true,
+    color: 'border-gray-200',
+    showLanes: true,
+    leftLabel: 'Outbound',
+    rightLabel: 'Inbound',
+    leftTooltip: 'Vanuit Nexxtmove',
+    rightTooltip: 'Vanuit relatie',
+  },
+)
+
+const hasLanes = computed(() => props.splitView && props.showLanes)
+</script>
+
+<template>
+  <div class="relative z-10 flex flex-col gap-16">
+    <NexxtTimelineLanes
+      v-if="hasLanes"
+      :left-label="leftLabel"
+      :right-label="rightLabel"
+      :left-tooltip="leftTooltip"
+      :right-tooltip="rightTooltip"
+    />
+
+    <!-- Left timeline line (always shown) -->
+    <div
+      class="absolute bottom-0 left-5 w-0 border-l"
+      :class="[color, hasLanes ? 'top-10' : 'top-0']"
+    ></div>
+
+    <!-- Right timeline line (split view only) -->
+    <div
+      v-if="splitView"
+      class="absolute right-5 bottom-0 w-0 border-l"
+      :class="[color, hasLanes ? 'top-10' : 'top-0']"
+    ></div>
+
+    <slot>
+      <NexxtTimelineEvent v-for="ev in events" :key="ev.id" :event="ev" :split-view="splitView" />
+    </slot>
+  </div>
+</template>

package/src/components.json

@@ -48,7 +48,9 @@
   "NexxtTabs": "components/Tabs/Tabs.vue",
   "NexxtTemplateCard": "components/TemplateCard/TemplateCard.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
+  "NexxtTimelineLanes": "components/TimelineLanes/TimelineLanes.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
+  "NexxtTimelineTrack": "components/TimelineTrack/TimelineTrack.vue",
   "NexxtToast": "components/Toast/Toast.vue",
   "NexxtToaster": "components/Toaster/Toaster.vue",
   "NexxtToggleGroup": "components/ToggleGroup/ToggleGroup.vue",

package/src/index.ts

@@ -2,6 +2,14 @@
 // Third-party type re-exports for consumers of this library
 export type { Placement } from '@floating-ui/vue'
 
+// Non-component modules that consumers need (types, config maps)
+export { EVENT_CONFIG_MAP, PHASE_MAP } from './components/TimelineEvent/TimelineTypes'
+export type {
+  TimelineEvent,
+  TimelinePhase,
+  TimelineResponse,
+} from './components/TimelineEvent/TimelineTypes'
+
 export { default as NexxtAnimatedNumber } from './components/AnimatedNumber/AnimatedNumber.vue'
 export { default as NexxtAnnouncement } from './components/Announcement/Announcement.vue'
 export { default as NexxtAvatar } from './components/Avatar/Avatar.vue'
@@ -51,7 +59,9 @@ export { default as NexxtTable } from './components/Table/Table.vue'
 export { default as NexxtTabs } from './components/Tabs/Tabs.vue'
 export { default as NexxtTemplateCard } from './components/TemplateCard/TemplateCard.vue'
 export { default as NexxtTimelineEvent } from './components/TimelineEvent/TimelineEvent.vue'
+export { default as NexxtTimelineLanes } from './components/TimelineLanes/TimelineLanes.vue'
 export { default as NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
+export { default as NexxtTimelineTrack } from './components/TimelineTrack/TimelineTrack.vue'
 export { default as NexxtToast } from './components/Toast/Toast.vue'
 export { default as NexxtToaster } from './components/Toaster/Toaster.vue'
 export { default as NexxtToggleGroup } from './components/ToggleGroup/ToggleGroup.vue'

package/src/nuxt.ts

@@ -62,8 +62,11 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
     }
 
     if (options.addCSS) {
-      // Tailwind scans the shipped .vue source for class names only — this
-      // does not involve the consumer's type-checker.
+      // Tailwind scans the shipped source for class names only — this does not
+      // involve the consumer's type-checker. The .ts files are scanned too
+      // because config maps hold class names outside any template (e.g.
+      // EVENT_CONFIG_MAP and PHASE_MAP in TimelineEvent/TimelineTypes.ts);
+      // without them those utilities are never generated.
       const componentsDir = resolve('../src/components')
 
       addTemplate({
@@ -71,7 +74,7 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
         getContents: () => `
 @import "tailwindcss";
 @import "@nexxtmove/ui/theme";
-@source "${componentsDir}/**/*.vue";
+@source "${componentsDir}/**/*.{vue,ts}";
 `,
         write: true,
       })

package/src/test-setup.ts

@@ -0,0 +1,9 @@
+// jsdom ships no media playback, so components driving a <video> element make it
+// log "Not implemented: HTMLMediaElement's play() method" on every test run.
+// The stubs stay configurable and writable so individual tests can still spy on
+// or override them per element.
+Object.defineProperties(HTMLMediaElement.prototype, {
+  play: { configurable: true, writable: true, value: () => Promise.resolve() },
+  pause: { configurable: true, writable: true, value: () => {} },
+  load: { configurable: true, writable: true, value: () => {} },
+})