@nexxtmove/ui 1.1.4 → 1.1.6

package/dist/nuxt.js

@@ -47522,6 +47522,7 @@ var Yw, Xw, Zw, Qw, $w, eT = d((() => {
 	NexxtProgressBar: "components/ProgressBar/ProgressBar.vue",
 	NexxtPropertyCard: "components/PropertyCard/PropertyCard.vue",
 	NexxtPropertyListing: "components/PropertyListing/PropertyListing.vue",
+	NexxtReferenceCard: "components/ReferenceCard/ReferenceCard.vue",
 	NexxtSelect: "components/Select/Select.vue",
 	NexxtSidebarMenuItem: "components/SidebarMenuItem/SidebarMenuItem.vue",
 	NexxtSkeleton: "components/Skeleton/Skeleton.vue",

package/package.json

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

package/src/components/ReferenceCard/ReferenceCard.vue

@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtButton from '../Button/Button.vue'
+import NexxtCheckbox from '../Checkbox/Checkbox.vue'
+import NexxtEnergyLabel, { type EnergyLabelLetter } from '../EnergyLabel/EnergyLabel.vue'
+import NexxtIcon from '../Icon/Icon.vue'
+
+export interface ProposalReference {
+  index: number
+  postalCode: string
+  streetName: string
+  houseNumber: number
+  houseType: string
+  city: string
+  mainImageUrl: string | null
+  latitude: number
+  longitude: number
+  useSurface: number | null
+  parcelSurface: number | null
+  buildYear: number | null
+  volume: number | null
+  energyLabel: string | null
+  garage: string | null
+  insulation: string | null
+  shedStorageType: string | null
+  saleDate: string | null
+  dateOnOfferSince: string | null
+  transportDate: string | null
+  salePrice: string | null
+  indexedSalePrice: string | null
+  pricePerSquareMeter: string | null
+}
+
+export type NexxtReferenceCardMessage = 'selected' | 'unselected' | 'details' | 'energyLabel'
+
+export interface NexxtReferenceCardProps {
+  reference: ProposalReference
+  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,
+  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] }>()
+
+const address = computed(() => `${reference.streetName} ${reference.houseNumber}`)
+
+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
+
+  const date = new Date(reference.saleDate)
+  if (Number.isNaN(date.getTime())) return reference.saleDate
+
+  return new Intl.DateTimeFormat('nl-NL', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  }).format(date)
+})
+</script>
+
+<template>
+  <div
+    role="checkbox"
+    :aria-checked="selected"
+    :aria-label="`${address}, ${location}`"
+    tabindex="0"
+    :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 hover:border-cornflower-blue-600'
+        : 'border-gray-200 hover:border-cornflower-blue-300',
+    ]"
+    @click="selected = !selected"
+    @keydown.space.prevent="selected = !selected"
+    @keydown.enter.prevent="selected = !selected"
+  >
+    <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:min-h-32 @lg:w-48 @lg:shrink-0"
+      >
+        <img
+          v-if="reference.mainImageUrl"
+          :src="reference.mainImageUrl"
+          :alt="address"
+          loading="lazy"
+          class="absolute inset-0 size-full object-cover"
+        />
+        <div v-else class="absolute inset-0 flex items-center justify-center">
+          <NexxtIcon name="house" class="text-4xl text-gray-500" />
+        </div>
+      </div>
+
+      <div
+        class="flex min-w-0 flex-1 flex-col justify-center gap-1 border-t border-gray-200 p-4 @lg:border-t-0 @lg:border-l"
+      >
+        <p class="truncate heading-4">{{ address }}</p>
+        <p class="truncate body-normal text-gray-800">{{ location }}</p>
+        <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 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-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',
+      ]"
+    >
+      <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 ? label.selected : label.unselected }}
+        </span>
+      </div>
+
+      <NexxtButton
+        variant="secondary"
+        class="w-full @lg:w-auto"
+        @click.stop="$emit('details', reference)"
+      >
+        {{ label.details }}
+      </NexxtButton>
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -29,6 +29,7 @@
   "NexxtProgressBar": "components/ProgressBar/ProgressBar.vue",
   "NexxtPropertyCard": "components/PropertyCard/PropertyCard.vue",
   "NexxtPropertyListing": "components/PropertyListing/PropertyListing.vue",
+  "NexxtReferenceCard": "components/ReferenceCard/ReferenceCard.vue",
   "NexxtSelect": "components/Select/Select.vue",
   "NexxtSidebarMenuItem": "components/SidebarMenuItem/SidebarMenuItem.vue",
   "NexxtSkeleton": "components/Skeleton/Skeleton.vue",

package/src/index.ts

@@ -32,6 +32,7 @@ export { default as NexxtPresenceIndicator } from './components/PresenceIndicato
 export { default as NexxtProgressBar } from './components/ProgressBar/ProgressBar.vue'
 export { default as NexxtPropertyCard } from './components/PropertyCard/PropertyCard.vue'
 export { default as NexxtPropertyListing } from './components/PropertyListing/PropertyListing.vue'
+export { default as NexxtReferenceCard } from './components/ReferenceCard/ReferenceCard.vue'
 export { default as NexxtSelect } from './components/Select/Select.vue'
 export { default as NexxtSidebarMenuItem } from './components/SidebarMenuItem/SidebarMenuItem.vue'
 export { default as NexxtSkeleton } from './components/Skeleton/Skeleton.vue'