@nexxtmove/ui 1.1.3 → 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",

package/package.json

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

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'