@nexxtmove/ui 1.1.1 → 1.1.3

package/dist/nuxt.js

@@ -47536,6 +47536,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.1",
+  "version": "1.1.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/DropdownButton/DropdownButton.vue

@@ -27,7 +27,7 @@ type NexxtDropdownButtonBase = {
 }
 
 export type NexxtDropdownButtonProps =
-  | (NexxtDropdownButtonBase & { iconOnly?: false; label: string; action: string | (() => void) })
+  | (NexxtDropdownButtonBase & { iconOnly?: false; label: string; action?: string | (() => void) })
   | (NexxtDropdownButtonBase & { iconOnly: true; label?: string; action?: string | (() => void) })
 
 const {
@@ -134,7 +134,7 @@ const buttonClasses = computed(() => {
           <button
             class="flex cursor-pointer items-center gap-2 px-4 py-2 transition-colors duration-200"
             :class="buttonClasses"
-            @click="action && handleAction(action)"
+            @click="action ? handleAction(action) : toggle()"
           >
             <NexxtIcon v-if="icon" :name="icon" aria-hidden="true" />
             {{ label }}

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

@@ -43,6 +43,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

@@ -46,6 +46,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'