@vergelijkdirect/comparison-forms 2.0.2-rc.0 → 2.1.0-ver-9053.0

package/README.md

@@ -33,12 +33,12 @@ import '@vergelijkdirect/comparison-forms/vue/styles';
 
 ```vue
 <script setup>
-import { ComparisonFormFlow } from '@vergelijkdirect/comparison-forms/vue';
+import { VdComparisonForm } from '@vergelijkdirect/comparison-forms/vue';
 // ITC must already be initialized (see "Install & prerequisites" above)
 </script>
 
 <template>
-    <ComparisonFormFlow
+    <VdComparisonForm
         form="bike"
         link="https://www.vergelijkdirect.com/fietsverzekering/"
         layout="horizontal"
@@ -58,7 +58,7 @@ yours to wire, with the user's data available in `payload.user`.
 ```vue
 <script setup>
 import {
-    BikeForm,
+    VdBikeForm,
     bikePresenter,
     useComparisonSubmit,
 } from '@vergelijkdirect/comparison-forms/vue';
@@ -70,14 +70,14 @@ const { submit, isSubmitting } = useComparisonSubmit({
 </script>
 
 <template>
-    <BikeForm @submitted="(data) => submit(bikePresenter(data))" />
+    <VdBikeForm @submitted="(data) => submit(bikePresenter(data))" />
 </template>
 ```
 
 Or skip the flow entirely (result-page edit, custom persistence):
 
 ```vue
-<BikeForm :initial-data="savedBike" @submitted="updateMyComparison" />
+<VdBikeForm :initial-data="savedBike" @submitted="updateMyComparison" />
 ```
 
 `initialData` is read once on mount — remount with `:key` when it arrives async.

package/dist/vue/VdInput-CRb-iTiH.js

@@ -0,0 +1,145 @@
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, toDisplayString as d, unref as f, useId as p, useModel as m, useSlots as h, withCtx as g, withDirectives as _, withModifiers as v } from "vue";
+import { vMaska as y } from "maska/vue";
+import { Label as b } from "reka-ui";
+//#region src/components/ui/VdInput.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "vd-field" }, S = {
+	key: 0,
+	class: "vd-field__asterisk"
+}, C = {
+	key: 1,
+	class: "vd-field__popover"
+}, w = [
+	"id",
+	"value",
+	"type",
+	"name",
+	"inputmode",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"autocomplete"
+], T = {
+	key: 0,
+	class: "vd-field__icon-and-loader"
+}, E = {
+	key: 0,
+	class: "vd-field__icon vd-field__icon--with-loader"
+}, D = { key: 1 }, O = {
+	key: 0,
+	class: "vd-field__loader-circle"
+}, k = {
+	key: 0,
+	class: "vd-field__message vd-field__message--error"
+}, A = {
+	key: 1,
+	class: "vd-field__message vd-field__message--information"
+}, j = /* @__PURE__ */ o({
+	__name: "VdInput",
+	props: /*@__PURE__*/ s({
+		id: { default: null },
+		name: {},
+		type: { default: "text" },
+		label: { default: "" },
+		placeholder: { default: "" },
+		errorMessage: { default: null },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !0
+		},
+		verified: {
+			type: Boolean,
+			default: !1
+		},
+		mask: { default: "" },
+		autocomplete: {
+			type: Boolean,
+			default: !1
+		},
+		infoMessage: { default: "" },
+		icon: { default: "" },
+		iconLeft: {
+			type: Boolean,
+			default: !1
+		},
+		capitalize: {
+			type: Boolean,
+			default: !1
+		},
+		hasError: {
+			type: [Boolean, null],
+			default: null
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		inputmode: { default: void 0 }
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["blur", "change"], ["update:modelValue"]),
+	setup(o, { emit: s }) {
+		let j = o, M = m(o, "modelValue"), N = s, P = h(), F = j.id ?? p(), I = (e) => j.capitalize ? e.toUpperCase() : e, L = e(() => !j.errorMessage && !j.verified && !j.hasError), R = e(() => !!M.value && !j.errorMessage && j.verified && !j.hasError && !j.loading), z = e(() => !!j.errorMessage || !!j.hasError), B = e(() => !!j.errorMessage || !!P.errorMessage), V = (e) => {
+			M.value = I(e.target.value);
+		}, H = (e) => {
+			N("blur", I(e.target.value));
+		}, U = (e) => {
+			N("change", I(e.target.value));
+		};
+		return (e, s) => (l(), r("div", x, [
+			i("div", {
+				class: c(["vd-field__label-wrapper", { "vd-field__label-wrapper--disabled": o.disabled }]),
+				onClick: s[0] ||= v(() => {}, ["prevent"])
+			}, [o.label || f(P).label ? (l(), t(f(b), {
+				key: 0,
+				for: f(F),
+				class: "vd-field__label"
+			}, {
+				default: g(() => [i("span", null, [u(e.$slots, "label", {}, () => [a(d(o.label), 1)]), o.required ? (l(), r("span", S, "*")) : n("", !0)])]),
+				_: 3
+			}, 8, ["for"])) : n("", !0), f(P).popover ? (l(), r("span", C, [u(e.$slots, "popover")])) : n("", !0)], 2),
+			i("div", { class: c(["vd-field__wrapper", { "vd-field__wrapper-checkmark": R.value && !(o.icon || f(P).icon) }]) }, [_(i("input", {
+				id: f(F),
+				value: M.value,
+				type: o.type,
+				name: o.name,
+				inputmode: o.inputmode,
+				placeholder: o.placeholder,
+				disabled: o.disabled,
+				readonly: o.readonly,
+				autocomplete: o.autocomplete ? "off" : "on",
+				class: c(["vd-field__input", {
+					"vd-field__input--verified": R.value,
+					"vd-field__input--default": L.value,
+					"vd-field__input--error": z.value,
+					"vd-field__input--icon-left": (o.icon || f(P).icon) && o.iconLeft,
+					"vd-field__input--icon-right": (o.icon || f(P).icon) && !o.iconLeft,
+					"vd-field__input--loading": o.loading,
+					"vd-field__input--loading vd-field__input--icon": o.loading && !o.iconLeft && (o.icon || f(P).icon)
+				}]),
+				onInput: V,
+				onChange: U,
+				onBlur: H
+			}, null, 42, w), [[f(y), o.mask || void 0]]), o.loading && o.icon && !o.iconLeft ? (l(), r("div", T, [s[1] ||= i("div", { class: "vd-field__loader-circle vd-field__loader-circle--and-icon" }, null, -1), o.icon || f(P).icon ? (l(), r("span", E, [u(e.$slots, "icon", {}, () => [i("i", { class: c(o.icon) }, null, 2)])])) : n("", !0)])) : (l(), r("div", D, [o.loading ? (l(), r("div", O)) : n("", !0), o.icon || f(P).icon ? (l(), r("span", {
+				key: 1,
+				class: c(["vd-field__icon", {
+					"vd-field__icon--left": o.iconLeft,
+					"vd-field__icon--disabled": o.disabled
+				}])
+			}, [u(e.$slots, "icon", {}, () => [i("i", { class: c(o.icon) }, null, 2)])], 2)) : n("", !0)]))], 2),
+			B.value || f(P).errorMessage ? (l(), r("div", k, [u(e.$slots, "errorMessage", {}, () => [s[2] ||= i("i", { class: "fas fa-exclamation-circle vd-field__message-icon" }, null, -1), a(" " + d(o.errorMessage), 1)])])) : n("", !0),
+			o.infoMessage || f(P).information ? (l(), r("div", A, [u(e.$slots, "information", {}, () => [s[3] ||= i("i", { class: "fas fa-info-circle vd-field__message-icon" }, null, -1), a(" " + d(o.infoMessage), 1)])])) : n("", !0)
+		]));
+	}
+});
+//#endregion
+export { j as t };

package/dist/vue/VdPopover-B78nVpNU.js

@@ -0,0 +1,200 @@
+import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, withModifiers as p } from "vue";
+import { autoUpdate as m, flip as h, offset as g, shift as _, useFloating as v } from "@floating-ui/vue";
+//#region src/components/ui/popover/VdPopoverHeader.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "vd-popover__title" }, b = {
+	key: 0,
+	class: "vd-popover__title-icon"
+}, x = { key: 1 }, S = /* @__PURE__ */ a({
+	__name: "VdPopoverHeader",
+	props: {
+		title: { default: "" },
+		icon: { default: "" }
+	},
+	emits: ["close"],
+	setup(e, { emit: i }) {
+		let a = i, s = () => {
+			a("close");
+		};
+		return (i, a) => (c(), n("div", { class: o(["vd-popover__header", { "vd-popover__header--only-close-icon": !e.title }]) }, [e.title ? u(i.$slots, "default", { key: 0 }, () => [r("div", y, [e.icon ? (c(), n("div", b, [r("i", { class: o(e.icon) }, null, 2)])) : t("", !0), e.title ? (c(), n("span", x, d(e.title), 1)) : t("", !0)])]) : t("", !0), r("button", {
+			class: "vd-popover__close-btn",
+			onClick: s
+		}, [...a[0] ||= [r("i", { class: "far fa-times vd-popover__close-btn-icon" }, null, -1)]])], 2));
+	}
+}), C = ["innerHTML"], w = /* @__PURE__ */ a({
+	__name: "VdPopoverTooltip",
+	props: {
+		content: { default: () => ({
+			title: "",
+			description: ""
+		}) },
+		variant: { default: void 0 },
+		size: { default: void 0 },
+		hideHeaderTooltip: {
+			type: Boolean,
+			default: !1
+		},
+		headerIconTooltip: { default: "" }
+	},
+	emits: ["close"],
+	setup(r, { emit: i }) {
+		let a = i, s = () => {
+			a("close");
+		};
+		return (i, a) => (c(), n("div", {
+			class: o(["vd-popover__tooltip", [r.size ? `vd-popover__tooltip--${r.size}` : "", r.variant ? `vd-popover__tooltip--${r.variant}` : ""]]),
+			onPointerdown: a[0] ||= p(() => {}, ["prevent"])
+		}, [r.hideHeaderTooltip ? t("", !0) : (c(), e(S, {
+			key: 0,
+			title: r.content.title,
+			icon: r.headerIconTooltip,
+			onClose: s
+		}, null, 8, ["title", "icon"])), r.content && r.content.description ? (c(), n("p", {
+			key: 1,
+			class: "vd-popover__description",
+			innerHTML: r.content.description
+		}, null, 8, C)) : t("", !0)], 34));
+	}
+}), T = { key: 1 }, E = /* @__PURE__ */ a({
+	__name: "VdPopoverReference",
+	props: {
+		label: { default: "" },
+		icon: { default: "fas fa-info-circle" },
+		variant: { default: void 0 },
+		iconLeft: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (r, i) => (c(), n("span", { class: o(["vd-popover__reference", [e.variant ? `vd-popover__reference--${e.variant}` : ""]]) }, [
+			e.iconLeft ? (c(), n("i", {
+				key: 0,
+				class: o(e.icon)
+			}, null, 2)) : t("", !0),
+			e.label ? (c(), n("span", T, d(e.label), 1)) : t("", !0),
+			e.iconLeft ? t("", !0) : (c(), n("i", {
+				key: 2,
+				class: o(e.icon)
+			}, null, 2))
+		], 2));
+	}
+}), D = /* @__PURE__ */ a({
+	__name: "VdPopover",
+	props: {
+		label: { default: "" },
+		iconRef: { default: "fas fa-info-circle" },
+		refVariant: { default: void 0 },
+		iconLeftRef: {
+			type: Boolean,
+			default: !1
+		},
+		offSet: { default: 8 },
+		content: { default: () => ({
+			title: "",
+			description: ""
+		}) },
+		tooltipVariant: { default: void 0 },
+		tooltipSize: { default: void 0 },
+		hideHeaderTooltip: {
+			type: Boolean,
+			default: !1
+		},
+		headerIconTooltip: { default: "fas fa-info-circle" },
+		fixed: {
+			type: Boolean,
+			default: !1
+		},
+		display: { default: "inline-block" },
+		position: { default: "top-start" },
+		disableHoverListener: {
+			type: Boolean,
+			default: !1
+		},
+		disableClickListener: {
+			type: Boolean,
+			default: !1
+		},
+		mousedownListener: {
+			type: Boolean,
+			default: !1
+		},
+		fullWidth: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let a = e, d = l(null), y = l(null), { floatingStyles: b } = v(d, y, {
+			placement: a.position,
+			middleware: [
+				g(a.offSet),
+				h({ mainAxis: !a.fixed }),
+				_({
+					crossAxis: !1,
+					padding: 10
+				})
+			],
+			whileElementsMounted: m
+		}), x = l(!1), S = l(!1), C = () => {
+			x.value = !0, S.value = !0;
+		}, T = () => {
+			x.value = !1, S.value = !1;
+		}, D = () => {
+			a.disableClickListener || a.mousedownListener || (S.value ? T() : C());
+		}, O = () => {
+			a.mousedownListener && (x.value ? T() : C());
+		}, k = () => {
+			a.disableHoverListener || (x.value = !0);
+		}, A = () => {
+			a.disableHoverListener || S.value || (x.value = !1);
+		};
+		return (l, m) => (c(), n("span", { class: o(["vd-popover", `vd-popover--${e.display}`]) }, [r("span", {
+			ref_key: "reference",
+			ref: d,
+			class: "vd-popover__reference-wrapper",
+			onClick: p(D, ["stop"]),
+			onMouseover: k,
+			onMouseleave: A,
+			onMousedown: O
+		}, [u(l.$slots, "reference", {
+			toggleOnClick: D,
+			onHover: k,
+			onLeave: A,
+			onMousedown: O,
+			isOpen: x.value,
+			close: T
+		}, () => [i(E, {
+			variant: e.refVariant,
+			label: e.label,
+			icon: e.iconRef,
+			"icon-left": e.iconLeftRef
+		}, null, 8, [
+			"variant",
+			"label",
+			"icon",
+			"icon-left"
+		])])], 544), x.value ? (c(), n("div", {
+			key: 0,
+			ref_key: "floating",
+			ref: y,
+			style: s(f(b)),
+			class: o(["vd-popover__floating", a.fullWidth ? "vd-popover__floating--full-width" : ""]),
+			onPointerdown: m[0] ||= p(() => {}, ["prevent"])
+		}, [u(l.$slots, "tooltip", { close: T }, () => [i(w, {
+			content: e.content,
+			variant: e.tooltipVariant,
+			size: e.tooltipSize,
+			"hide-header-tooltip": e.hideHeaderTooltip,
+			"header-icon-tooltip": e.headerIconTooltip,
+			onClose: T
+		}, null, 8, [
+			"content",
+			"variant",
+			"size",
+			"hide-header-tooltip",
+			"header-icon-tooltip"
+		])])], 38)) : t("", !0)], 2));
+	}
+});
+//#endregion
+export { D as t };

package/dist/vue/VdRadioGroup-D5kHcpsY.js

@@ -0,0 +1,166 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, mergeModels as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, toDisplayString as p, unref as m, useId as h, useModel as g, useSlots as _, vModelRadio as v, withCtx as y, withDirectives as b } from "vue";
+//#region src/components/ui/VdRadio.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "vd-radio-field" }, S = { class: "vd-radio-field__input" }, C = [
+	"id",
+	"disabled",
+	"name",
+	"value"
+], w = ["for"], T = /* @__PURE__ */ s({
+	__name: "VdRadio",
+	props: /*@__PURE__*/ c({
+		name: {},
+		value: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				null
+			],
+			default: null
+		},
+		id: { default: null },
+		label: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		green: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				null
+			],
+			default: null
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "blur"], ["update:modelValue"]),
+	setup(e, { emit: t }) {
+		let n = e, s = g(e, "modelValue"), c = t, d = _(), y = n.id ?? h(), T = (e) => {
+			c("change", n.value, e.target.value);
+		}, E = (e) => {
+			c("blur", n.value, e.target.value);
+		};
+		return (t, n) => (u(), i("div", x, [
+			a("div", S, [b(a("input", {
+				id: m(y),
+				"onUpdate:modelValue": n[0] ||= (e) => s.value = e,
+				disabled: e.disabled,
+				name: e.name,
+				value: e.value,
+				class: l(["vd-radio", {
+					"vd-radio--error": e.invalid,
+					"vd-radio--green": e.green
+				}]),
+				type: "radio",
+				onChange: T,
+				onBlur: E
+			}, null, 42, C), [[v, s.value]])]),
+			e.label || m(d).label ? (u(), i("label", {
+				key: 0,
+				class: "vd-radio-field__label",
+				for: m(y)
+			}, [f(t.$slots, "label", {}, () => [o(p(e.label), 1)])], 8, w)) : r("", !0),
+			f(t.$slots, "popover")
+		]));
+	}
+}), E = ["disabled"], D = { class: "vd-field__label" }, O = {
+	key: 0,
+	class: "vd-field__asterisk"
+}, k = {
+	key: 0,
+	class: "vd-field__popover"
+}, A = {
+	key: 1,
+	class: "vd-field__message vd-field__message--error"
+}, j = {
+	key: 2,
+	class: "vd-field__message vd-field__message--information"
+}, M = /* @__PURE__ */ s({
+	__name: "VdRadioGroup",
+	props: /*@__PURE__*/ c({
+		name: {},
+		options: {},
+		legend: { default: "" },
+		errorMessage: { default: null },
+		infoMessage: { default: null },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !0
+		},
+		variant: { default: "default" },
+		groupClass: { default: void 0 }
+	}, {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				null
+			],
+			required: !0
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["change", "blur"], ["update:modelValue"]),
+	setup(s, { emit: c }) {
+		let h = s, v = g(s, "modelValue"), b = c, x = _(), S = t(() => !!h.errorMessage), C = t(() => ({
+			"vd-radio-group--horizontal": h.variant === "horizontal",
+			"vd-radio-group--boxed": h.variant === "boxed"
+		})), w = (e) => {
+			b("change", e);
+		}, M = (e) => {
+			b("blur", e);
+		};
+		return (t, c) => (u(), i("fieldset", {
+			class: l(["vd-field vd-radio-group", C.value]),
+			disabled: s.disabled
+		}, [
+			s.legend || m(x).legend ? (u(), i("legend", {
+				key: 0,
+				class: l(["vd-field__label-wrapper", { "vd-field__label-wrapper--disabled": s.disabled }])
+			}, [a("div", D, [f(t.$slots, "legend", {}, () => [o(p(s.legend), 1)]), s.required ? (u(), i("span", O, "*")) : r("", !0)]), m(x).popover ? (u(), i("span", k, [f(t.$slots, "popover")])) : r("", !0)], 2)) : r("", !0),
+			a("div", { class: l(["vd-radio-group__list", s.groupClass]) }, [(u(!0), i(e, null, d(s.options, (e) => (u(), n(T, {
+				key: e.value,
+				modelValue: v.value,
+				"onUpdate:modelValue": c[0] ||= (e) => v.value = e,
+				value: e.value,
+				label: e.label,
+				name: s.name,
+				disabled: e.disabled,
+				invalid: S.value,
+				onChange: w,
+				onBlur: M
+			}, {
+				label: y(() => [f(t.$slots, "label", { option: e })]),
+				popover: y(() => [f(t.$slots, "label_popover", { option: e })]),
+				_: 2
+			}, 1032, [
+				"modelValue",
+				"value",
+				"label",
+				"name",
+				"disabled",
+				"invalid"
+			]))), 128))], 2),
+			S.value ? (u(), i("div", A, [c[1] ||= a("i", { class: "fas fa-exclamation-circle vd-field__message-icon" }, null, -1), o(" " + p(s.errorMessage), 1)])) : r("", !0),
+			s.infoMessage || m(x).information ? (u(), i("div", j, [f(t.$slots, "information", {}, () => [c[2] ||= a("i", { class: "fas fa-info-circle vd-field__message-icon" }, null, -1), o(" " + p(s.infoMessage), 1)])])) : r("", !0)
+		], 10, E));
+	}
+});
+//#endregion
+export { M as t };