@nexxtmove/ui 1.1.2 → 1.1.4

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",
@@ -47536,6 +47537,7 @@ var Yw, Xw, Zw, Qw, $w, eT = d((() => {
 	NexxtTabbedContent: "components/TabbedContent/TabbedContent.vue",
 	NexxtTable: "components/Table/Table.vue",
 	NexxtTabs: "components/Tabs/Tabs.vue",
+	NexxtTemplateCard: "components/TemplateCard/TemplateCard.vue",
 	NexxtTimelineEvent: "components/TimelineEvent/TimelineEvent.vue",
 	NexxtTimelinePhaseblock: "components/TimelinePhaseblock/TimelinePhaseblock.vue",
 	NexxtToast: "components/Toast/Toast.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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/TemplateCard/TemplateCard.vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { IconName } from '@awesome.me/kit-37b149f3ef/icons'
+import { computed } from 'vue'
+import NexxtIcon from '../Icon/Icon.vue'
+import NexxtTooltip from '../Tooltip/Tooltip.vue'
+
+export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages'
+
+export interface NexxtTemplateCardProps {
+  image?: string
+  title: string
+  subtitle?: string
+  contentFeatures?: NexxtTemplateCardContentFeature[]
+  messages?: Partial<Record<NexxtTemplateCardContentFeature, string>>
+}
+
+type TemplateCardIcon = {
+  icon: IconName
+  textColor: string
+  backgroundColor: string
+}
+
+const ICON_MAP: Record<NexxtTemplateCardContentFeature, TemplateCardIcon> = {
+  references: {
+    icon: 'house-circle-check',
+    textColor: 'text-cornflower-blue-500',
+    backgroundColor: 'bg-cornflower-blue-50',
+  },
+  valuation: { icon: 'circle-euro', textColor: 'text-rose-500', backgroundColor: 'bg-rose-50' },
+  reviews: { icon: 'star', textColor: 'text-orange-500', backgroundColor: 'bg-orange-50' },
+  packages: { icon: 'piggy-bank', textColor: 'text-green-500', backgroundColor: 'bg-green-50' },
+}
+
+const DEFAULT_MESSAGES: Record<NexxtTemplateCardContentFeature, string> = {
+  references: 'Referenties',
+  valuation: 'Waardebepaling',
+  reviews: 'Reviews',
+  packages: 'Courtage',
+}
+
+defineOptions({ name: 'NexxtTemplateCard' })
+
+const props = withDefaults(defineProps<NexxtTemplateCardProps>(), {
+  image: undefined,
+  subtitle: undefined,
+  contentFeatures: () => [],
+  messages: () => ({}),
+})
+
+const featureMessages = computed<Record<NexxtTemplateCardContentFeature, string>>(() => ({
+  ...DEFAULT_MESSAGES,
+  ...props.messages,
+}))
+</script>
+
+<template>
+  <div class="w-full max-w-105 rounded-xl border border-gray-200">
+    <picture class="h-38 w-full">
+      <img
+        v-if="image"
+        :src="image"
+        :alt="title"
+        loading="lazy"
+        class="w-full rounded-t-xl object-cover"
+      />
+      <div v-else class="flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100">
+        <NexxtIcon name="image" class="text-4xl text-gray-400" />
+      </div>
+    </picture>
+    <div class="rounded-b-xl px-8 pt-3.5 pb-4">
+      <h3 class="truncate heading-4 text-gray-900">{{ title }}</h3>
+      <p v-if="subtitle" class="truncate body-normal text-gray-700">{{ subtitle }}</p>
+      <ul v-if="contentFeatures.length" class="mt-3 flex flex-wrap gap-2">
+        <li v-for="feature in contentFeatures" :key="feature">
+          <NexxtTooltip>
+            <div
+              :class="[ICON_MAP[feature].backgroundColor, ICON_MAP[feature].textColor]"
+              class="flex size-8 items-center justify-center rounded-full"
+            >
+              <NexxtIcon :name="ICON_MAP[feature].icon" />
+            </div>
+            <template #tooltip>
+              <span class="body-small text-gray-700">{{ featureMessages[feature] }}</span>
+            </template>
+          </NexxtTooltip>
+        </li>
+      </ul>
+    </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",
@@ -43,6 +44,7 @@
   "NexxtTabbedContent": "components/TabbedContent/TabbedContent.vue",
   "NexxtTable": "components/Table/Table.vue",
   "NexxtTabs": "components/Tabs/Tabs.vue",
+  "NexxtTemplateCard": "components/TemplateCard/TemplateCard.vue",
   "NexxtTimelineEvent": "components/TimelineEvent/TimelineEvent.vue",
   "NexxtTimelinePhaseblock": "components/TimelinePhaseblock/TimelinePhaseblock.vue",
   "NexxtToast": "components/Toast/Toast.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'
@@ -46,6 +47,7 @@ export { default as NexxtSwitch } from './components/Switch/Switch.vue'
 export { default as NexxtTabbedContent } from './components/TabbedContent/TabbedContent.vue'
 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 NexxtTimelinePhaseblock } from './components/TimelinePhaseblock/TimelinePhaseblock.vue'
 export { default as NexxtToast } from './components/Toast/Toast.vue'