@nexxtmove/ui 1.1.3 → 1.1.5

package/dist/nuxt.js

@@ -47509,6 +47509,7 @@ var Yw, Xw, Zw, Qw, $w, eT = d((() => {
 	NexxtDatePicker: "components/DatePicker/DatePicker.vue",
 	NexxtDoughnutChart: "components/DoughnutChart/DoughnutChart.vue",
 	NexxtDropdownButton: "components/DropdownButton/DropdownButton.vue",
+	NexxtEnergyLabel: "components/EnergyLabel/EnergyLabel.vue",
 	NexxtFloatingPanel: "components/FloatingPanel/FloatingPanel.vue",
 	NexxtHeader: "components/Header/Header.vue",
 	NexxtIcon: "components/Icon/Icon.vue",
@@ -47521,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.3",
+  "version": "1.1.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,12 +34,12 @@
     "@eslint/js": "^10.0.1",
     "@nuxt/kit": "^4.4.8",
     "@nuxt/schema": "^4.4.4",
-    "@storybook/addon-a11y": "^10.5.0",
+    "@storybook/addon-a11y": "^10.5.2",
     "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.5.0",
-    "@storybook/addon-vitest": "^10.5.0",
-    "@storybook/builder-vite": "^10.5.0",
-    "@storybook/vue3-vite": "^10.5.0",
+    "@storybook/addon-docs": "^10.5.2",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/builder-vite": "^10.5.2",
+    "@storybook/vue3-vite": "^10.5.2",
     "@tailwindcss/vite": "^4.3.1",
     "@types/node": "^26.0.1",
     "@types/react": "^19.2.17",
@@ -53,7 +53,7 @@
     "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.5.0",
+    "eslint-plugin-storybook": "10.5.2",
     "eslint-plugin-vue": "^10.9.2",
     "flag-icons": "^7.5.0",
     "globals": "^17.7.0",
@@ -63,7 +63,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.5.0",
+    "storybook": "^10.5.2",
     "typescript-eslint": "^8.62.0",
     "vite": "^8.1.0",
     "vite-plugin-dts": "^5.0.3",

package/src/components/EnergyLabel/EnergyLabel.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+export type EnergyLabelLetter =
+  | 'A++++'
+  | 'A+++'
+  | 'A++'
+  | 'A+'
+  | 'A'
+  | 'B'
+  | 'C'
+  | 'D'
+  | 'E'
+  | 'F'
+  | 'G'
+
+interface NexxtEnergyLabelProps {
+  label: EnergyLabelLetter | Lowercase<EnergyLabelLetter>
+}
+
+const COLORS: Record<EnergyLabelLetter, string> = {
+  'A++++': '#00953F',
+  'A+++': '#00953F',
+  'A++': '#00953F',
+  'A+': '#00953F',
+  A: '#00953F',
+  B: '#52AE32',
+  C: '#A5CE6D',
+  D: '#FFCC00',
+  E: '#F9A93C',
+  F: '#EF7D34',
+  G: '#E63329',
+}
+
+defineOptions({
+  name: 'NexxtEnergyLabel',
+})
+
+const { label } = defineProps<NexxtEnergyLabelProps>()
+
+const normalized = computed(() => label.toUpperCase() as EnergyLabelLetter)
+
+const color = computed(() => COLORS[normalized.value])
+</script>
+
+<template>
+  <span
+    role="img"
+    :aria-label="`Energielabel ${normalized}`"
+    class="relative isolate mr-3 inline-flex h-6 items-center justify-center rounded-l px-2 extra-small-semibold text-white after:absolute after:top-1/2 after:left-full after:size-4.25 after:-translate-x-1/2 after:-translate-y-1/2 after:rotate-45 after:rounded-tr after:bg-(--energy-label-color) after:content-['']"
+    :style="{ backgroundColor: color, '--energy-label-color': color }"
+  >
+    <span aria-hidden="true" class="relative z-10">{{ normalized }}</span>
+  </span>
+</template>

package/src/components/ReferenceCard/ReferenceCard.vue

@@ -0,0 +1,146 @@
+<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 interface NexxtReferenceCardProps {
+  reference: ProposalReference
+  selectedLabel?: string
+  unselectedLabel?: string
+  detailsLabel?: string
+}
+
+defineOptions({ name: 'NexxtReferenceCard' })
+
+const {
+  reference,
+  selectedLabel = 'Meegenomen in advies',
+  unselectedLabel = 'Selecteer deze woning',
+  detailsLabel = 'Meer details',
+} = defineProps<NexxtReferenceCardProps>()
+
+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 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' : 'border-gray-200',
+    ]"
+    @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:w-48 @lg:shrink-0"
+      >
+        <img
+          v-if="reference.mainImageUrl"
+          :src="reference.mainImageUrl"
+          :alt="address"
+          loading="lazy"
+          class="h-full w-full object-cover"
+        />
+        <div v-else class="flex h-full min-h-32 w-full 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="flex items-center justify-between gap-2">
+          <span class="body-normal text-gray-800">Energielabel</span>
+          <NexxtEnergyLabel :label="energyLabel" />
+        </div>
+      </div>
+
+      <div
+        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 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',
+        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 ? selectedLabel : unselectedLabel }}
+        </span>
+      </div>
+
+      <NexxtButton variant="secondary" @click.stop="$emit('details', reference)">
+        {{ detailsLabel }}
+      </NexxtButton>
+    </div>
+  </div>
+</template>

package/src/components.json

@@ -16,6 +16,7 @@
   "NexxtDatePicker": "components/DatePicker/DatePicker.vue",
   "NexxtDoughnutChart": "components/DoughnutChart/DoughnutChart.vue",
   "NexxtDropdownButton": "components/DropdownButton/DropdownButton.vue",
+  "NexxtEnergyLabel": "components/EnergyLabel/EnergyLabel.vue",
   "NexxtFloatingPanel": "components/FloatingPanel/FloatingPanel.vue",
   "NexxtHeader": "components/Header/Header.vue",
   "NexxtIcon": "components/Icon/Icon.vue",
@@ -28,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

@@ -19,6 +19,7 @@ export { default as NexxtCustomerJourneyTile } from './components/CustomerJourne
 export { default as NexxtDatePicker } from './components/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/DropdownButton/DropdownButton.vue'
+export { default as NexxtEnergyLabel } from './components/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/FloatingPanel/FloatingPanel.vue'
 export { default as NexxtHeader } from './components/Header/Header.vue'
 export { default as NexxtIcon } from './components/Icon/Icon.vue'
@@ -31,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'