@nexxtmove/ui 1.1.2 → 1.1.3

package/dist/components/TemplateCard/TemplateCard.vue.d.ts

@@ -0,0 +1,16 @@
+export type NexxtTemplateCardContentFeature = 'references' | 'valuation' | 'reviews' | 'packages';
+export interface NexxtTemplateCardProps {
+    image?: string;
+    title: string;
+    subtitle?: string;
+    contentFeatures?: NexxtTemplateCardContentFeature[];
+    messages?: Partial<Record<NexxtTemplateCardContentFeature, string>>;
+}
+declare const __VLS_export: import('vue').DefineComponent<NexxtTemplateCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtTemplateCardProps> & Readonly<{}>, {
+    image: string;
+    messages: Partial<Record<NexxtTemplateCardContentFeature, string>>;
+    subtitle: string;
+    contentFeatures: NexxtTemplateCardContentFeature[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.d.ts

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

package/dist/index.js

@@ -4508,65 +4508,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			})
 		])], 8, Oa)]));
 	}
-}), Ba = [
-	"data-event-source",
-	"data-event-date",
-	"date-event-type"
-], Va = { class: "heading-3" }, Ha = ["href"], Ua = { class: "truncate group-hover:underline" }, Wa = {
-	key: 1,
-	class: "mt-1 text-sm text-gray-500"
-}, Ga = /* @__PURE__ */ p({
-	name: "NexxtTimelineEvent",
-	__name: "TimelineEvent",
-	props: {
-		event: {},
-		splitView: {
-			type: Boolean,
-			default: !0
-		}
-	},
-	setup(e) {
-		let t = {
-			label: "Gebeurtenis",
-			icon: "info",
-			color: "bg-gray-500"
-		}, n = i(() => Qn[r.event.type] || {
-			...t,
-			label: r.event.type
-		}), r = e, a = i(() => {
-			let e = new Date(r.event.happened_at);
-			return `${e.toLocaleDateString("nl-NL", {
-				day: "numeric",
-				month: "short",
-				year: "numeric"
-			})} om ${e.toLocaleTimeString("nl-NL", {
-				hour: "2-digit",
-				minute: "2-digit"
-			})}`;
-		}), l = i(() => r.splitView && r.event.direction === "inbound");
-		return (t, r) => (w(), s("div", {
-			"data-event-source": e.event.direction,
-			"data-event-date": e.event.happened_at,
-			"date-event-type": e.event.type,
-			class: y(["relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2", { "justify-end": l.value }])
-		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex h-10 w-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Z, {
-			name: n.value.icon,
-			class: "flex h-6 w-6 text-xl text-white"
-		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
-			c("span", Va, k(n.value.label), 1),
-			e.event.url ? (w(), s("a", {
-				key: 0,
-				href: e.event.url,
-				target: "_blank",
-				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
-			}, [c("span", Ua, k(e.event.description || e.event.url), 1), f(Z, {
-				name: "external-link",
-				class: "ml-1 h-4 w-4 text-gray-950"
-			})], 8, Ha)) : o("", !0),
-			e.event.request_reason ? (w(), s("span", Wa, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
-		], 2)], 2)], 10, Ba));
-	}
-}), Ka = /* @__PURE__ */ p({
+}), Ba = /* @__PURE__ */ p({
 	name: "NexxtTooltip",
 	__name: "Tooltip",
 	props: {
@@ -4618,13 +4560,140 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			_: 3
 		}));
 	}
-}), qa = ["data-phase"], Ja = {
+}), Va = { class: "w-full max-w-105 rounded-xl border border-gray-200" }, Ha = { class: "h-38 w-full" }, Ua = ["src", "alt"], Wa = {
+	key: 1,
+	class: "flex h-38 w-full items-center justify-center rounded-t-xl bg-gray-100"
+}, Ga = { class: "rounded-b-xl px-8 pt-3.5 pb-4" }, Ka = { class: "truncate heading-4 text-gray-900" }, qa = {
+	key: 0,
+	class: "truncate body-normal text-gray-700"
+}, Ja = {
+	key: 1,
+	class: "mt-3 flex flex-wrap gap-2"
+}, Ya = { class: "body-small text-gray-700" }, Xa = /* @__PURE__ */ p({
+	name: "NexxtTemplateCard",
+	__name: "TemplateCard",
+	props: {
+		image: { default: void 0 },
+		title: {},
+		subtitle: { default: void 0 },
+		contentFeatures: { default: () => [] },
+		messages: { default: () => ({}) }
+	},
+	setup(t) {
+		let n = {
+			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"
+			}
+		}, r = {
+			references: "Referenties",
+			valuation: "Waardebepaling",
+			reviews: "Reviews",
+			packages: "Courtage"
+		}, a = t, l = i(() => ({
+			...r,
+			...a.messages
+		}));
+		return (r, i) => (w(), s("div", Va, [c("picture", Ha, [t.image ? (w(), s("img", {
+			key: 0,
+			src: t.image,
+			alt: t.title,
+			loading: "lazy",
+			class: "w-full rounded-t-xl object-cover"
+		}, null, 8, Ua)) : (w(), s("div", Wa, [f(Z, {
+			name: "image",
+			class: "text-4xl text-gray-400"
+		})]))]), c("div", Ga, [
+			c("h3", Ka, k(t.title), 1),
+			t.subtitle ? (w(), s("p", qa, k(t.subtitle), 1)) : o("", !0),
+			t.contentFeatures.length ? (w(), s("ul", Ja, [(w(!0), s(e, null, E(t.contentFeatures, (e) => (w(), s("li", { key: e }, [f(Ba, null, {
+				tooltip: R(() => [c("span", Ya, k(l.value[e]), 1)]),
+				default: R(() => [c("div", { class: y([[n[e].backgroundColor, n[e].textColor], "flex size-8 items-center justify-center rounded-full"]) }, [f(Z, { name: n[e].icon }, null, 8, ["name"])], 2)]),
+				_: 2
+			}, 1024)]))), 128))])) : o("", !0)
+		])]));
+	}
+}), Za = [
+	"data-event-source",
+	"data-event-date",
+	"date-event-type"
+], Qa = { class: "heading-3" }, $a = ["href"], eo = { class: "truncate group-hover:underline" }, to = {
+	key: 1,
+	class: "mt-1 text-sm text-gray-500"
+}, no = /* @__PURE__ */ p({
+	name: "NexxtTimelineEvent",
+	__name: "TimelineEvent",
+	props: {
+		event: {},
+		splitView: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = {
+			label: "Gebeurtenis",
+			icon: "info",
+			color: "bg-gray-500"
+		}, n = i(() => Qn[r.event.type] || {
+			...t,
+			label: r.event.type
+		}), r = e, a = i(() => {
+			let e = new Date(r.event.happened_at);
+			return `${e.toLocaleDateString("nl-NL", {
+				day: "numeric",
+				month: "short",
+				year: "numeric"
+			})} om ${e.toLocaleTimeString("nl-NL", {
+				hour: "2-digit",
+				minute: "2-digit"
+			})}`;
+		}), l = i(() => r.splitView && r.event.direction === "inbound");
+		return (t, r) => (w(), s("div", {
+			"data-event-source": e.event.direction,
+			"data-event-date": e.event.happened_at,
+			"date-event-type": e.event.type,
+			class: y(["relative z-20 flex flex-wrap items-center gap-x-6 gap-y-2", { "justify-end": l.value }])
+		}, [c("div", { class: y(["w-full px-24 extra-small-normal text-gray-600", { "text-right": l.value }]) }, k(a.value), 3), c("div", { class: y(["flex w-full shrink-0 items-center gap-6", { "flex-row-reverse": l.value }]) }, [c("div", { class: y(["flex h-10 w-10 shrink-0 items-center justify-center rounded-full", [n.value.color]]) }, [f(Z, {
+			name: n.value.icon,
+			class: "flex h-6 w-6 text-xl text-white"
+		}, null, 8, ["name"])], 2), c("div", { class: y(["flex w-full flex-col gap-2 rounded-xl border border-gray-200 p-8", { "max-w-lg": e.splitView }]) }, [
+			c("span", Qa, k(n.value.label), 1),
+			e.event.url ? (w(), s("a", {
+				key: 0,
+				href: e.event.url,
+				target: "_blank",
+				class: "group mt-1 flex justify-between gap-2 text-sm text-cornflower-blue-500 hover:text-cornflower-blue-600"
+			}, [c("span", eo, k(e.event.description || e.event.url), 1), f(Z, {
+				name: "external-link",
+				class: "ml-1 h-4 w-4 text-gray-950"
+			})], 8, $a)) : o("", !0),
+			e.event.request_reason ? (w(), s("span", to, " Reden: " + k(e.event.request_reason), 1)) : o("", !0)
+		], 2)], 2)], 10, Za));
+	}
+}), ro = ["data-phase"], io = {
 	key: 0,
 	class: "relative z-10"
-}, Ya = { class: "flex items-center justify-between px-4 py-2" }, Xa = { class: "flex gap-1" }, Za = { class: "flex gap-1" }, Qa = { class: "text-sm font-semibold tracking-wider uppercase" }, $a = { class: "mt-2 font-medium text-xs text-gray-500" }, eo = {
+}, ao = { class: "flex items-center justify-between px-4 py-2" }, oo = { class: "flex gap-1" }, so = { class: "flex gap-1" }, co = { class: "text-sm font-semibold tracking-wider uppercase" }, lo = { class: "mt-2 font-medium text-xs text-gray-500" }, uo = {
 	key: 1,
 	class: "h-1"
-}, to = /* @__PURE__ */ p({
+}, fo = /* @__PURE__ */ p({
 	name: "NexxtTimelinePhaseblock",
 	__name: "TimelinePhaseblock",
 	props: {
@@ -4660,14 +4729,14 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			class: "relative z-10 flex flex-col gap-16",
 			"data-phase": t.phase.phase.value
 		}, [
-			t.index === 0 && t.isSplitView ? (w(), s("div", Ja, [c("div", Ya, [c("span", Xa, [i[1] ||= d(" Outbound ", -1), f(Ka, null, {
+			t.index === 0 && t.isSplitView ? (w(), s("div", io, [c("div", ao, [c("span", oo, [i[1] ||= d(" Outbound ", -1), f(Ba, null, {
 				tooltip: R(() => [...i[0] ||= [c("span", { class: "text-sm" }, "Vanuit Nexxtmove", -1)]]),
 				default: R(() => [f(Z, {
 					name: "circle-info",
 					class: "h-4 w-4 text-xs text-gray-600"
 				})]),
 				_: 1
-			})]), c("span", Za, [i[3] ||= d(" Inbound ", -1), f(Ka, { "as-child": "" }, {
+			})]), c("span", so, [i[3] ||= d(" Inbound ", -1), f(Ba, { "as-child": "" }, {
 				tooltip: R(() => [...i[2] ||= [c("span", { class: "text-sm" }, "Vanuit relatie", -1)]]),
 				default: R(() => [f(Z, {
 					name: "circle-info",
@@ -4680,7 +4749,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				key: 1,
 				class: y(["absolute right-5 bottom-0 w-0 border-l", [A($)[t.phase.phase.value].color, t.index === 0 ? "top-10" : "top-0"]])
 			}, null, 2)) : o("", !0),
-			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(Ga, {
+			(w(!0), s(e, null, E(t.phase.events, (e) => (w(), a(no, {
 				key: e.id,
 				event: e,
 				"split-view": t.isSplitView
@@ -4689,36 +4758,36 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				key: 2,
 				class: y(["relative flex flex-col items-center pt-8 pb-24 text-center", { "pl-16": !t.isSplitView }])
 			}, [
-				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A($)[t.phase.phase.value].bgColor, A($)[t.phase.phase.value].textColor]]) }, [c("span", Qa, k(A($)[t.phase.phase.value].label), 1), p() ? (w(), a(Z, {
+				c("div", { class: y(["flex items-center gap-2 rounded-full px-12 py-4", [A($)[t.phase.phase.value].bgColor, A($)[t.phase.phase.value].textColor]]) }, [c("span", co, k(A($)[t.phase.phase.value].label), 1), p() ? (w(), a(Z, {
 					key: 0,
 					name: p() === "up" ? "arrow-up" : "arrow-down",
 					class: "h-4 w-4 text-white"
 				}, null, 8, ["name"])) : o("", !0)], 2),
-				c("span", $a, k(u()), 1),
+				c("span", lo, k(u()), 1),
 				t.isSplitView ? (w(), s("div", {
 					key: 0,
 					class: y(["mt-4 h-px w-[75%]", A($)[t.phase.phase.value].bgColor])
 				}, null, 2)) : o("", !0),
-				t.isLast ? o("", !0) : (w(), s("div", eo)),
+				t.isLast ? o("", !0) : (w(), s("div", uo)),
 				c("div", { class: y(["absolute top-0 bottom-0 left-5 w-px bg-linear-to-b", r.value]) }, null, 2),
 				t.isSplitView ? (w(), s("div", {
 					key: 2,
 					class: y(["absolute top-0 right-5 bottom-0 w-px bg-linear-to-b", r.value])
 				}, null, 2)) : o("", !0)
 			], 2))
-		], 8, qa));
+		], 8, ro));
 	}
-}), no = ["role", "aria-live"], ro = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, io = {
+}), po = ["role", "aria-live"], mo = { class: "flex min-w-0 flex-1 flex-col gap-0.5 pt-0.5" }, ho = {
 	key: 1,
 	class: "body-normal"
-}, ao = ["aria-label"], oo = {
+}, go = ["aria-label"], _o = {
 	key: 0,
 	class: "absolute inset-0 -rotate-90 text-gray-400",
 	viewBox: "0 0 24 24",
 	width: "32",
 	height: "32",
 	"aria-hidden": "true"
-}, so = 56.55, co = /*#__PURE__*/ Mn(/* @__PURE__ */ p({
+}, vo = 56.55, yo = /*#__PURE__*/ Mn(/* @__PURE__ */ p({
 	name: "NexxtToast",
 	__name: "Toast",
 	props: {
@@ -4733,7 +4802,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 	},
 	emits: ["dismiss"],
 	setup(e, { emit: t }) {
-		j((e) => ({ v3e3d3e68: so }));
+		j((e) => ({ v3e3d3e68: vo }));
 		let n = {
 			info: {
 				icon: "info",
@@ -4781,12 +4850,12 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				name: l.value.icon,
 				class: "text-xl"
 			}, null, 8, ["name"])], 2),
-			c("div", ro, [
+			c("div", mo, [
 				e.title ? (w(), s("p", {
 					key: 0,
 					class: y(["heading-4", l.value.titleColor])
 				}, k(e.title), 3)) : o("", !0),
-				e.message ? (w(), s("p", io, k(e.message), 1)) : o("", !0),
+				e.message ? (w(), s("p", ho, k(e.message), 1)) : o("", !0),
 				D(t.$slots, "default", {}, void 0, !0)
 			]),
 			e.dismissible ? (w(), s("button", {
@@ -4795,7 +4864,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				class: "relative flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center focus:outline-none",
 				"aria-label": e.autoClose ? `Sluiten (verdwijnt automatisch na ${e.autoClose / 1e3} seconden)` : "Sluiten",
 				onClick: n[0] ||= (e) => r("dismiss")
-			}, [e.autoClose ? (w(), s("svg", oo, [c("circle", {
+			}, [e.autoClose ? (w(), s("svg", _o, [c("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9",
@@ -4803,7 +4872,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				stroke: "currentColor",
 				"stroke-width": "1.2",
 				"stroke-linecap": "round",
-				"stroke-dasharray": so,
+				"stroke-dasharray": vo,
 				class: "timer-circle",
 				style: x({
 					animationDuration: `${e.autoClose}ms`,
@@ -4812,10 +4881,10 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			}, null, 4)])) : o("", !0), f(Z, {
 				name: "xmark",
 				class: "text-sm"
-			})], 8, ao)) : o("", !0)
-		], 42, no));
+			})], 8, go)) : o("", !0)
+		], 42, po));
 	}
-}), [["__scopeId", "data-v-89269eaa"]]), lo = /* @__PURE__ */ p({
+}), [["__scopeId", "data-v-89269eaa"]]), bo = /* @__PURE__ */ p({
 	name: "NexxtToaster",
 	__name: "Toaster",
 	props: {
@@ -4848,7 +4917,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			default: R(() => [(w(!0), s(e, null, E(n.toasts, (e) => (w(), s("div", {
 				key: e.id,
 				class: "pointer-events-auto"
-			}, [f(co, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
+			}, [f(yo, _({ ref_for: !0 }, e, { onDismiss: (t) => o("dismiss", e.id) }), null, 16, ["onDismiss"])]))), 128))]),
 			_: 1
 		}, 8, [
 			"class",
@@ -4856,19 +4925,19 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			"leave-to-class"
 		])], 2)]));
 	}
-}), uo = { class: "flex flex-col gap-1" }, fo = {
+}), xo = { class: "flex flex-col gap-1" }, So = {
 	key: 0,
 	class: "text-color-gray-700 justify-start body-normal text-sm"
-}, po = ["onClick"], mo = {
+}, Co = ["onClick"], wo = {
 	key: 1,
 	class: "extra-small-semibold"
-}, ho = ["onClick"], go = {
+}, To = ["onClick"], Eo = {
 	key: 1,
 	class: "extra-small-semibold"
-}, _o = {
+}, Do = {
 	key: 1,
 	class: "extra-small-semibold"
-}, vo = /* @__PURE__ */ p({
+}, Oo = /* @__PURE__ */ p({
 	name: "NexxtToggleGroup",
 	__name: "ToggleGroup",
 	props: /*@__PURE__*/ g({
@@ -4899,7 +4968,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 		};
 		return I(r, async () => await m()), et(i, () => m()), S(async () => {
 			await document.fonts.ready, await m(), await v(), p.value = !0;
-		}), (n, m) => (w(), s("div", uo, [t.label ? (w(), s("label", fo, k(t.label), 1)) : o("", !0), c("div", {
+		}), (n, m) => (w(), s("div", xo, [t.label ? (w(), s("label", So, k(t.label), 1)) : o("", !0), c("div", {
 			ref_key: "containerRef",
 			ref: i,
 			class: y(["relative isolate flex h-10 gap-1 rounded-xl bg-gray-100 p-1", { "flex-wrap": !t.equalWidth }])
@@ -4909,7 +4978,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				class: y(["absolute inset-y-1 left-0 rounded-lg bg-white", p.value ? "transition-transform duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : ""]),
 				style: x(u.value)
 			}, null, 6),
-			(w(!0), s(e, null, E(t.options, (n, i) => (w(), s(e, { key: n.value }, [n.tooltip ? (w(), a(Ka, {
+			(w(!0), s(e, null, E(t.options, (n, i) => (w(), s(e, { key: n.value }, [n.tooltip ? (w(), a(Ba, {
 				key: 0,
 				"disable-closing-trigger": ""
 			}, {
@@ -4923,7 +4992,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				}, [n.icon ? (w(), a(Z, {
 					key: 0,
 					name: n.icon
-				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", mo, k(n.label), 1)) : o("", !0)], 10, po)]),
+				}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", wo, k(n.label), 1)) : o("", !0)], 10, Co)]),
 				_: 2
 			}, 1024)) : (w(), s("button", {
 				key: 1,
@@ -4935,7 +5004,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			}, [n.icon ? (w(), a(Z, {
 				key: 0,
 				name: n.icon
-			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", go, k(n.label), 1)) : o("", !0)], 10, ho))], 64))), 128)),
+			}, null, 8, ["name"])) : o("", !0), n.label ? (w(), s("span", Eo, k(n.label), 1)) : o("", !0)], 10, To))], 64))), 128)),
 			c("div", {
 				"aria-hidden": "true",
 				class: y(["pointer-events-none absolute inset-0 z-20 flex gap-1 p-1", [p.value ? "transition-[clip-path] duration-500 ease-[cubic-bezier(0.34,1.2,0.64,1)]" : "", { "flex-wrap": !t.equalWidth }]]),
@@ -4946,29 +5015,29 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 			}, [e.icon ? (w(), a(Z, {
 				key: 0,
 				name: e.icon
-			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", _o, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
+			}, null, 8, ["name"])) : o("", !0), e.label ? (w(), s("span", Do, k(e.label), 1)) : o("", !0)], 2))), 128))], 6)
 		], 2)]));
 	}
-}), yo = [
+}), ko = [
 	"src",
 	"loop",
 	"aria-label"
-], bo = {
+], Ao = {
 	key: 0,
 	role: "alert",
 	class: "absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-900 text-white"
-}, xo = { class: "heading-4" }, So = { class: "max-w-xs truncate extra-small-normal text-white/50" }, Co = {
+}, jo = { class: "heading-4" }, Mo = { class: "max-w-xs truncate extra-small-normal text-white/50" }, No = {
 	key: 0,
 	class: "pointer-events-none absolute inset-0 flex items-center justify-center"
-}, wo = {
+}, Po = {
 	class: "flex h-16 w-16 items-center justify-center rounded-full bg-black/50 text-white",
 	"aria-hidden": "true"
-}, To = [
+}, Fo = [
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext"
-], Eo = { class: "flex items-center gap-2" }, Do = ["aria-label"], Oo = { class: "extra-small-normal text-white/70 tabular-nums" }, ko = ["aria-label"], Ao = ["aria-label"], jo = /* @__PURE__ */ p({
+], Io = { class: "flex items-center gap-2" }, Lo = ["aria-label"], Ro = { class: "extra-small-normal text-white/70 tabular-nums" }, zo = ["aria-label"], Bo = ["aria-label"], Vo = /* @__PURE__ */ p({
 	__name: "VideoPlayer",
 	props: {
 		src: {},
@@ -5049,15 +5118,15 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				"aria-label": a.value.video,
 				onError: r[0] ||= (e) => E.value = !0,
 				onClick: r[1] ||= (t) => e.showControls === !1 ? void 0 : L()
-			}, null, 42, yo),
-			E.value ? (w(), s("div", bo, [
+			}, null, 42, ko),
+			E.value ? (w(), s("div", Ao, [
 				f(Z, {
 					name: "circle-exclamation",
 					class: "text-3xl text-red-400",
 					"aria-hidden": "true"
 				}),
-				c("p", xo, k(a.value.error), 1),
-				c("p", So, k(e.src), 1)
+				c("p", jo, k(a.value.error), 1),
+				c("p", Mo, k(e.src), 1)
 			])) : o("", !0),
 			f(n, {
 				"enter-active-class": "transition-opacity duration-100 ease-out",
@@ -5065,7 +5134,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 				"enter-from-class": "opacity-0",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: R(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", Co, [c("div", wo, [f(Z, {
+				default: R(() => [e.showControls !== !1 && D.value && !E.value ? (w(), s("div", No, [c("div", Po, [f(Z, {
 					name: D.value,
 					class: "text-2xl"
 				}, null, 8, ["name"])])])) : o("", !0)]),
@@ -5108,7 +5177,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 					class: "absolute top-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-sapphire-100 opacity-0 shadow transition-opacity group-hover/player:opacity-100",
 					style: x({ left: `${ee.value}%` })
 				}, null, 4)
-			], 40, To), c("div", Eo, [
+			], 40, Fo), c("div", Io, [
 				c("button", {
 					type: "button",
 					"aria-label": A(u) ? a.value.pause : a.value.play,
@@ -5118,8 +5187,8 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 					name: A(u) ? "pause" : "play",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Do),
-				c("span", Oo, k(F(W.value)) + " / " + k(F(A(m))), 1),
+				}, null, 8, ["name"])], 8, Lo),
+				c("span", Ro, k(F(W.value)) + " / " + k(F(A(m))), 1),
 				r[7] ||= c("div", { class: "flex-1" }, null, -1),
 				c("button", {
 					type: "button",
@@ -5130,7 +5199,7 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 					name: A(h) ? "volume-xmark" : "volume-high",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, ko),
+				}, null, 8, ["name"])], 8, zo),
 				c("button", {
 					type: "button",
 					"aria-label": A(_) ? a.value.exitFullscreen : a.value.enterFullscreen,
@@ -5140,10 +5209,10 @@ var Zi = { render: Xi }, Qi = { class: "flex items-center justify-end self-stret
 					name: A(_) ? "compress" : "expand",
 					class: "text-sm",
 					"aria-hidden": "true"
-				}, null, 8, ["name"])], 8, Ao)
+				}, null, 8, ["name"])], 8, Bo)
 			])], 4)) : o("", !0)
 		], 32));
 	}
 });
 //#endregion
-export { tt as NexxtAnimatedNumber, rt as NexxtAnnouncement, ct as NexxtAvatar, ut as NexxtButton, Ht as NexxtCalendar, Gt as NexxtCard, qt as NexxtCheckbox, Jt as NexxtChip, ln as NexxtColorPicker, jn as NexxtCombobox, An as NexxtComboboxPanel, Rn as NexxtContactInfoCard, Zn as NexxtCountrySelect, nr as NexxtCustomerJourneyTile, rr as NexxtDatePicker, dr as NexxtDoughnutChart, gr as NexxtDropdownButton, Q as NexxtFloatingPanel, yr as NexxtHeader, Z as NexxtIcon, xr as NexxtInfoBlock, _n as NexxtInputField, Ar as NexxtInputSelect, Pr as NexxtModal, Fr as NexxtPagination, zr as NexxtPresenceIndicator, Jr as NexxtProgressBar, ai as NexxtPropertyCard, ei as NexxtPropertyListing, mi as NexxtSelect, bi as NexxtSidebarMenuItem, Si as NexxtSkeleton, Ei as NexxtSkeletonPropertyCard, ki as NexxtSocialIcons, Ni as NexxtSocialMediaCustomTemplate, Hi as NexxtSocialMediaTemplate, na as NexxtSocialMediaType, ha as NexxtSource, st as NexxtSquircle, ga as NexxtStepperHeader, ya as NexxtSwitch, Ea as NexxtTabbedContent, za as NexxtTable, Sa as NexxtTabs, Ga as NexxtTimelineEvent, to as NexxtTimelinePhaseblock, co as NexxtToast, lo as NexxtToaster, vo as NexxtToggleGroup, Ka as NexxtTooltip, jo as NexxtVideoPlayer, fa as SOURCE_MAP };
+export { tt as NexxtAnimatedNumber, rt as NexxtAnnouncement, ct as NexxtAvatar, ut as NexxtButton, Ht as NexxtCalendar, Gt as NexxtCard, qt as NexxtCheckbox, Jt as NexxtChip, ln as NexxtColorPicker, jn as NexxtCombobox, An as NexxtComboboxPanel, Rn as NexxtContactInfoCard, Zn as NexxtCountrySelect, nr as NexxtCustomerJourneyTile, rr as NexxtDatePicker, dr as NexxtDoughnutChart, gr as NexxtDropdownButton, Q as NexxtFloatingPanel, yr as NexxtHeader, Z as NexxtIcon, xr as NexxtInfoBlock, _n as NexxtInputField, Ar as NexxtInputSelect, Pr as NexxtModal, Fr as NexxtPagination, zr as NexxtPresenceIndicator, Jr as NexxtProgressBar, ai as NexxtPropertyCard, ei as NexxtPropertyListing, mi as NexxtSelect, bi as NexxtSidebarMenuItem, Si as NexxtSkeleton, Ei as NexxtSkeletonPropertyCard, ki as NexxtSocialIcons, Ni as NexxtSocialMediaCustomTemplate, Hi as NexxtSocialMediaTemplate, na as NexxtSocialMediaType, ha as NexxtSource, st as NexxtSquircle, ga as NexxtStepperHeader, ya as NexxtSwitch, Ea as NexxtTabbedContent, za as NexxtTable, Sa as NexxtTabs, Xa as NexxtTemplateCard, no as NexxtTimelineEvent, fo as NexxtTimelinePhaseblock, yo as NexxtToast, bo as NexxtToaster, Oo as NexxtToggleGroup, Ba as NexxtTooltip, Vo as NexxtVideoPlayer, fa as SOURCE_MAP };

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

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'