@nexxtmove/ui 1.1.5 → 1.1.7

package/package.json

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

package/src/components/ProgressBar/ProgressBar.vue

@@ -8,6 +8,7 @@ interface NexxtProgressBarProps {
   currentStep: number
   progressLabel?: string
   stepTitles?: string[]
+  maxInlineSteps?: number
 }
 
 defineOptions({
@@ -22,6 +23,7 @@ const {
   stepTitles,
   steps,
   currentStep,
+  maxInlineSteps = 7,
 } = defineProps<NexxtProgressBarProps>()
 
 const isPercentage = computed(() => variant === 'percentage')
@@ -45,6 +47,14 @@ const percentage = computed(() => {
 
 const hasTitles = computed(() => !isPercentage.value && Boolean(stepTitles?.length))
 
+// Reserve the current-step number at the width of the total, so a 9 -> 10
+// transition doesn't shift the "/x" that follows it.
+const stepDigits = computed(() => String(Math.max(steps, 0)).length)
+
+// When there are more titles than can comfortably fit side by side, fall back to
+// the compact treatment (current title + "x/y" counter) at every breakpoint.
+const isCompact = computed(() => hasTitles.value && (stepTitles?.length ?? 0) > maxInlineSteps)
+
 watchEffect(() => {
   if (stepTitles && stepTitles.length !== steps) {
     console.warn(
@@ -89,24 +99,37 @@ watchEffect(() => {
         </div>
         <div
           v-if="hasTitles"
-          class="flex items-center small-normal tabular-nums @md:hidden"
+          class="flex items-center gap-0.5 small-normal tabular-nums"
+          :class="isCompact ? '' : '@md:hidden'"
           aria-hidden="true"
         >
-          <AnimatedNumber :value="displayStep" />
-          <span>/{{ steps }}</span>
+          <span class="flex justify-end" :style="{ minWidth: `${stepDigits}ch` }">
+            <AnimatedNumber :value="displayStep" />
+          </span>
+          <span>/</span>
+          <span>{{ steps }}</span>
         </div>
       </div>
       <ol
         v-if="hasTitles"
-        class="flex justify-between @max-md:order-first @max-md:justify-center"
+        class="flex @max-md:order-first"
+        :class="isCompact ? 'order-first justify-center' : 'justify-between @max-md:justify-center'"
         aria-label="Progress steps"
       >
         <li
           v-for="(title, index) in stepTitles"
           :key="title"
-          class="rounded-xs transition-colors duration-500 focus-visible:outline-3 @max-md:hidden @max-md:body-normal @min-md:small-normal"
+          class="rounded-xs transition-colors duration-500 focus-visible:outline-3"
           :class="[
-            index === clampedStep ? 'text-sapphire-500 @max-md:inline' : '',
+            isCompact
+              ? index === clampedStep
+                ? 'body-normal'
+                : 'hidden'
+              : [
+                  '@max-md:body-normal @min-md:small-normal',
+                  index === clampedStep ? '@max-md:inline' : '@max-md:hidden',
+                ],
+            index === clampedStep ? 'text-sapphire-500' : '',
             index < clampedStep ? 'cursor-pointer duration-200! hover:text-sapphire-400' : '',
           ]"
           :aria-current="index === clampedStep ? 'step' : undefined"

package/src/components/ReferenceCard/ReferenceCard.vue

@@ -31,22 +31,36 @@ export interface ProposalReference {
   pricePerSquareMeter: string | null
 }
 
+export type NexxtReferenceCardMessage = 'selected' | 'unselected' | 'details' | 'energyLabel'
+
 export interface NexxtReferenceCardProps {
   reference: ProposalReference
-  selectedLabel?: string
-  unselectedLabel?: string
-  detailsLabel?: string
+  messages?: Partial<Record<NexxtReferenceCardMessage, string>>
+  locale?: string
+  currency?: string
+}
+
+const DEFAULT_MESSAGES: Record<NexxtReferenceCardMessage, string> = {
+  selected: 'Meegenomen in advies',
+  unselected: 'Selecteer deze woning',
+  details: 'Meer details',
+  energyLabel: 'Energielabel',
 }
 
 defineOptions({ name: 'NexxtReferenceCard' })
 
 const {
   reference,
-  selectedLabel = 'Meegenomen in advies',
-  unselectedLabel = 'Selecteer deze woning',
-  detailsLabel = 'Meer details',
+  messages = {},
+  locale = 'nl-NL',
+  currency = 'EUR',
 } = defineProps<NexxtReferenceCardProps>()
 
+const label = computed<Record<NexxtReferenceCardMessage, string>>(() => ({
+  ...DEFAULT_MESSAGES,
+  ...messages,
+}))
+
 const selected = defineModel<boolean>({ default: false })
 
 defineEmits<{ details: [reference: ProposalReference] }>()
@@ -57,6 +71,19 @@ const location = computed(() => `${reference.postalCode} ${reference.city}`)
 
 const energyLabel = computed(() => (reference.energyLabel ?? null) as EnergyLabelLetter | null)
 
+const salePrice = computed(() => {
+  if (!reference.salePrice) return null
+
+  const amount = Number(reference.salePrice)
+  if (Number.isNaN(amount)) return reference.salePrice
+
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency,
+    maximumFractionDigits: 0,
+  }).format(amount)
+})
+
 const saleDate = computed(() => {
   if (!reference.saleDate) return null
 
@@ -80,7 +107,9 @@ const saleDate = computed(() => {
     :class="[
       '@container flex w-full cursor-pointer flex-col overflow-hidden rounded-lg border transition-colors duration-200',
       'focus-visible:ring-2 focus-visible:ring-cornflower-blue-400 focus-visible:ring-offset-2 focus-visible:outline-none',
-      selected ? 'border-cornflower-blue-500' : 'border-gray-200',
+      selected
+        ? 'border-cornflower-blue-500 hover:border-cornflower-blue-600'
+        : 'border-gray-200 hover:border-cornflower-blue-300',
     ]"
     @click="selected = !selected"
     @keydown.space.prevent="selected = !selected"
@@ -88,16 +117,16 @@ const saleDate = computed(() => {
   >
     <div class="flex flex-col items-stretch bg-white @lg:flex-row">
       <div
-        class="relative h-40 w-full self-stretch overflow-hidden bg-gray-100 @lg:h-auto @lg:w-48 @lg:shrink-0"
+        class="relative h-40 w-full self-stretch overflow-hidden bg-gray-100 @lg:h-auto @lg:min-h-32 @lg:w-48 @lg:shrink-0"
       >
         <img
           v-if="reference.mainImageUrl"
           :src="reference.mainImageUrl"
           :alt="address"
           loading="lazy"
-          class="h-full w-full object-cover"
+          class="absolute inset-0 size-full object-cover"
         />
-        <div v-else class="flex h-full min-h-32 w-full items-center justify-center">
+        <div v-else class="absolute inset-0 flex items-center justify-center">
           <NexxtIcon name="house" class="text-4xl text-gray-500" />
         </div>
       </div>
@@ -107,25 +136,25 @@ const saleDate = computed(() => {
       >
         <p class="truncate heading-4">{{ address }}</p>
         <p class="truncate body-normal text-gray-800">{{ location }}</p>
-        <div v-if="energyLabel" class="flex items-center justify-between gap-2">
-          <span class="body-normal text-gray-800">Energielabel</span>
+        <div v-if="energyLabel" class="mt-2 flex items-center justify-between gap-2">
+          <span class="small-normal text-gray-700">{{ label.energyLabel }}</span>
           <NexxtEnergyLabel :label="energyLabel" />
         </div>
       </div>
 
       <div
+        v-if="salePrice"
         class="flex flex-col justify-center gap-1 border-t border-gray-200 p-4 text-left @lg:min-w-56 @lg:shrink-0 @lg:border-t-0 @lg:border-l"
       >
-        <p v-if="reference.salePrice" class="heading-4 whitespace-nowrap">
-          {{ reference.salePrice }}
-        </p>
+        <p class="heading-4 whitespace-nowrap">{{ salePrice }}</p>
         <p v-if="saleDate" class="body-normal text-gray-800">{{ saleDate }}</p>
       </div>
     </div>
 
     <div
       :class="[
-        'flex flex-wrap items-center justify-between gap-x-4 gap-y-2 border-t px-4 py-2',
+        'flex flex-col-reverse gap-3 border-t px-4 py-3',
+        '@lg:flex-row @lg:flex-wrap @lg:items-center @lg:justify-between @lg:gap-x-4 @lg:gap-y-2 @lg:py-2',
         selected
           ? 'border-cornflower-blue-500 bg-cornflower-blue-50'
           : 'border-gray-200 bg-gray-50',
@@ -134,12 +163,16 @@ const saleDate = computed(() => {
       <div aria-hidden="true" class="pointer-events-none flex min-w-0 items-center gap-3">
         <NexxtCheckbox :model-value="selected" tabindex="-1" />
         <span class="truncate body-normal">
-          {{ selected ? selectedLabel : unselectedLabel }}
+          {{ selected ? label.selected : label.unselected }}
         </span>
       </div>
 
-      <NexxtButton variant="secondary" @click.stop="$emit('details', reference)">
-        {{ detailsLabel }}
+      <NexxtButton
+        variant="secondary"
+        class="w-full @lg:w-auto"
+        @click.stop="$emit('details', reference)"
+      >
+        {{ label.details }}
       </NexxtButton>
     </div>
   </div>