@vergelijkdirect/comparison-forms 2.0.0-rc.12 → 2.0.0-rc.14

package/dist/wc-forms/VdSelect-BPB3Jh_f.js

@@ -0,0 +1,108 @@
+import { Ft as e, Gt as t, Jt as n, Kt as r, On as i, Tt as a, Un as o, Xn as s, Yn as c, Yt as l, fr as u, in as d, li as f, lr as p, oi as m, qr as h, ri as g, tn as _, ur as v, wr as y } from "./useValidator-DdXn8soU.js";
+//#region src/components/ui/VdSelect.vue?vue&type=script&setup=true&lang.ts
+var b = { class: "vd-field" }, x = ["for"], S = {
+	key: 0,
+	class: "vd-field__asterisk"
+}, C = {
+	key: 1,
+	class: "vd-field__popover"
+}, w = { class: "vd-field__wrapper" }, T = [
+	"id",
+	"name",
+	"disabled"
+], E = {
+	key: 0,
+	value: "",
+	disabled: "",
+	selected: ""
+}, D = [
+	"value",
+	"selected",
+	"disabled"
+], O = {
+	key: 0,
+	class: "vd-field__icon-and-loader"
+}, k = ["for"], A = {
+	key: 0,
+	class: "vd-field__message vd-field__message--error"
+}, j = {
+	key: 1,
+	class: "vd-field__message vd-field__message--information"
+}, M = /* @__PURE__ */ d({
+	__name: "VdSelect",
+	props: /*@__PURE__*/ i({
+		id: { default: null },
+		name: {},
+		label: { default: "" },
+		placeholder: { default: "Maak je keuze" },
+		options: {},
+		errorMessage: { default: null },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		required: {
+			type: Boolean,
+			default: !0
+		},
+		verified: {
+			type: Boolean,
+			default: !1
+		},
+		infoMessage: { default: "" },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["blur", "select"], ["update:modelValue"]),
+	setup(i, { emit: d }) {
+		let M = i, N = v(i, "modelValue"), P = d, F = u(), I = M.id ?? p(), L = t({
+			get: () => N.value ?? "",
+			set: (e) => {
+				N.value = e === "" ? null : e;
+			}
+		}), R = h(!0), z = t(() => !M.errorMessage && M.verified && !M.disabled && !M.loading), B = t(() => !M.errorMessage && !z.value), V = t(() => !!M.errorMessage), H = () => `vd-field__select--placeholder-${!N.value && R.value ? "shown" : "hidden"}`, U = (e) => {
+			P("select", e.target.value), R.value = !1;
+		}, W = (e) => {
+			P("blur", e.target.value);
+		};
+		return (t, u) => (o(), l("div", b, [
+			r("div", { class: m(["vd-field__label-wrapper", { "vd-field__label-wrapper--disabled": i.disabled }]) }, [i.label || g(F).label ? (o(), l("label", {
+				key: 0,
+				for: i.name,
+				class: "vd-field__label"
+			}, [r("span", null, [s(t.$slots, "label", {}, () => [_(f(i.label), 1)]), i.required ? (o(), l("span", S, "*")) : n("", !0)])], 8, x)) : n("", !0), g(F).popover ? (o(), l("span", C, [s(t.$slots, "popover")])) : n("", !0)], 2),
+			r("div", w, [y(r("select", {
+				id: g(I),
+				"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
+				name: i.name,
+				disabled: i.disabled,
+				class: m(["vd-field__input vd-field__select", [H(), {
+					"vd-field__input--error": V.value,
+					"vd-field__input--verified": z.value,
+					"vd-field__input--default": B.value,
+					"vd-field__select--placeholder-with-loader-and-icon-shown": i.loading
+				}]]),
+				onChange: U,
+				onBlur: W
+			}, [i.placeholder ? (o(), l("option", E, f(i.placeholder), 1)) : n("", !0), (o(!0), l(e, null, c(i.options, (e, t) => (o(), l("option", {
+				key: e.value + "_" + t,
+				value: e.value,
+				selected: e.selected || !1,
+				disabled: e.disabled || !1
+			}, f(e.title), 9, D))), 128))], 42, T), [[a, L.value]]), i.loading ? (o(), l("div", O, [...u[1] ||= [r("div", { class: "vd-field__loader-circle vd-field__loader-circle--and-icon" }, null, -1), r("span", { class: "vd-field__icon vd-field__icon--with-loader" }, [r("i", { class: "fas vd-field__select-icon--with-loader" })], -1)]])) : (o(), l("label", {
+				key: 1,
+				for: g(I),
+				class: "vd-field__select-icon"
+			}, null, 8, k))]),
+			V.value || g(F).errorMessage ? (o(), l("div", A, [s(t.$slots, "errorMessage", {}, () => [u[2] ||= r("i", { class: "fas fa-exclamation-circle vd-field__message-icon" }, null, -1), _(" " + f(i.errorMessage), 1)])])) : n("", !0),
+			i.infoMessage || g(F).information ? (o(), l("div", j, [s(t.$slots, "information", {}, () => [u[3] ||= r("i", { class: "fas fa-info-circle vd-field__message-icon" }, null, -1), _(" " + f(i.infoMessage), 1)])])) : n("", !0)
+		]));
+	}
+});
+//#endregion
+export { M as t };