@quidgest/ui 0.19.0 → 0.20.1

package/esm/components/QPhoneField/QPhoneField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QPhoneField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QPhoneField/QPhoneField.vue"],"names":[],"mappings":"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"}

package/esm/components/QPhoneField/QPhoneField.vue.js

@@ -0,0 +1,478 @@
+import { useId as e } from "../../composables/uid.js";
+import { QClearButton as t } from "../__internal__/QClearButton/index.js";
+import { QTextField as n } from "../QTextField/index.js";
+import { QInputGroup as r } from "../QInputGroup/index.js";
+import { DEFAULT_TEXTS as i } from "./constants.js";
+import { QSelect as a } from "../QSelect/index.js";
+import o from "../../vendors/country-flag-icons/modules/hasFlag.js";
+import s from "../../vendors/libphonenumber-js/examples.mobile.json.js";
+import c from "../../vendors/libphonenumber-js/es6/parseIncompletePhoneNumber.js";
+import { parsePhoneNumber as l } from "../../vendors/libphonenumber-js/max/exports/parsePhoneNumber.js";
+import { AsYouType as u } from "../../vendors/libphonenumber-js/max/exports/AsYouType.js";
+import { isSupportedCountry as d } from "../../vendors/libphonenumber-js/max/exports/isSupportedCountry.js";
+import { getCountries as ee } from "../../vendors/libphonenumber-js/max/exports/getCountries.js";
+import { getCountryCallingCode as f } from "../../vendors/libphonenumber-js/max/exports/getCountryCallingCode.js";
+import { getExampleNumber as te } from "../../vendors/libphonenumber-js/max/exports/getExampleNumber.js";
+import { formatIncompletePhoneNumber as ne } from "../../vendors/libphonenumber-js/max/exports/formatIncompletePhoneNumber.js";
+import { computed as p, createBlock as re, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as ie, createVNode as _, defineComponent as ae, mergeModels as v, mergeProps as oe, nextTick as y, normalizeClass as b, openBlock as x, ref as S, renderSlot as C, toDisplayString as w, toRef as se, unref as T, useAttrs as ce, useModel as E, useSlots as le, useTemplateRef as D, watch as O, withCtx as k } from "vue";
+//#region src/components/QPhoneField/QPhoneField.vue?vue&type=script&setup=true&lang.ts
+var ue = { class: "q-phone-field__flag-code" }, de = {
+	key: 1,
+	class: "q-phone-field__flag-fallback",
+	"aria-hidden": "true"
+}, fe = { class: "q-phone-field__country-code" }, pe = { class: "q-phone-field__flag-code" }, me = {
+	key: 1,
+	class: "q-phone-field__flag-fallback",
+	"aria-hidden": "true"
+}, he = { class: "q-phone-field__country-name" }, ge = { class: "q-phone-field__item-code" }, _e = {
+	key: 0,
+	class: "q-phone-field__empty"
+}, ve = [
+	"name",
+	"value",
+	"form",
+	"disabled"
+], ye = ["id"], be = {
+	key: 0,
+	class: "q-phone-field__validation-message",
+	role: "alert"
+}, A = /*@__PURE__*/ ae({
+	inheritAttrs: !1,
+	__name: "QPhoneField",
+	props: /*@__PURE__*/ v({
+		id: {},
+		class: {},
+		label: {},
+		required: { type: Boolean },
+		for: {},
+		labelPosition: {},
+		size: {},
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		invalid: { type: Boolean },
+		placeholder: {},
+		defaultCountry: {},
+		countries: {},
+		locale: { default: "en-US" },
+		clearable: { type: Boolean },
+		autoValidate: {
+			type: Boolean,
+			default: !0
+		},
+		inline: { type: Boolean },
+		texts: { default: () => i }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {},
+		country: {},
+		countryModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ v(["click:clear", "validity-change"], [
+		"update:modelValue",
+		"update:country",
+		"update:open"
+	]),
+	setup(i, { expose: ae, emit: v }) {
+		let A = i, xe = v, Se = le(), j = E(i, "modelValue"), M = E(i, "country"), N = E(i, "open"), Ce = /^[+\d\s().-]+$/;
+		function we(e) {
+			let t = e?.toUpperCase();
+			return t && d(t) ? t : void 0;
+		}
+		function Te(e) {
+			if (e) return we(e.split(/[-_]/).slice(1).find((e) => /^[A-Za-z]{2}$/.test(e)));
+		}
+		let P = ce(), F = e(se(A, "id")), Ee = p(() => `${F.value}_country`), I = p(() => `${F.value}_validation`), De = p(() => typeof P.name == "string" && P.name ? P.name : void 0), Oe = p(() => typeof P.form == "string" && P.form ? P.form : void 0), ke = p(() => Object.fromEntries(Object.entries(P).filter(([e]) => ![
+			"aria-describedby",
+			"aria-label",
+			"name"
+		].includes(e)))), Ae = p(() => {
+			let e = P["aria-label"];
+			return typeof e == "string" && e ? e : A.label ? void 0 : A.texts.phoneNumber;
+		}), je = D("field"), Me = D("input"), Ne = D("countrySelect"), Pe = D("searchField"), Fe = p(() => je.value?.fieldRef ?? null), L = p(() => Me.value?.inputRef ?? null), R = S(""), z = S(""), B = S(), V = S(""), Ie = S(!1), H = !1, Le = p(() => {
+			try {
+				return new Intl.DisplayNames([A.locale], { type: "region" });
+			} catch {
+				return new Intl.DisplayNames(["en-US"], { type: "region" });
+			}
+		});
+		function U(e) {
+			let t = Le.value.of(e);
+			return !t || t === e ? e : t;
+		}
+		let W = p(() => {
+			let e = A.countries ?? ee(), t = e.filter((t, n) => d(t) && e.indexOf(t) === n);
+			return A.countries ? t : t.sort(Je);
+		}), Re = p(() => W.value.map((e) => {
+			let t = U(e), n = f(e);
+			return {
+				key: e,
+				label: `${t} (+${n})`,
+				name: t,
+				callingCode: n,
+				hasFlag: o(e),
+				searchValue: qe(`${t} ${e} +${n}`)
+			};
+		})), ze = p(() => {
+			let e = qe(z.value);
+			return e ? Re.value.filter((t) => t.searchValue.includes(e)) : Re.value;
+		}), G = p(() => B.value ? f(B.value) : V.value), Be = p(() => B.value ? o(B.value) : !1), Ve = p({
+			get: () => B.value,
+			set: (e) => {
+				e && lt(e);
+			}
+		}), He = p(() => !B.value || !G.value ? A.texts.selectCountry : `${A.texts.selectCountry}: ${U(B.value)} (+${G.value})`), Ue = p(() => {
+			if (A.readonly || A.disabled) return;
+			if (A.placeholder !== void 0) return A.placeholder;
+			if (!B.value) return;
+			let e = te(B.value, s);
+			if (e) return Y(e.formatInternational(), e.countryCallingCode).replace(/\d/g, "0");
+		}), We = p(() => A.clearable && !!j.value && !A.readonly && !A.disabled), K = p(() => {
+			let e = j.value ? l(j.value, { extract: !1 }) : void 0, t = e?.country ?? B.value, n = e?.countryCallingCode ?? G.value, r = e && !e.country && e.countryCallingCode && (e.isPossible() || e.isValid()) ? A.countries === void 0 : t ? W.value.includes(t) : !!n && W.value.some((e) => f(e) === n);
+			return {
+				isPossible: !!e?.isPossible(),
+				isValid: !!e?.isValid(),
+				isAllowedCountry: r
+			};
+		}), Ge = p(() => A.autoValidate && Ie.value && !A.readonly && !A.disabled && (A.required && !j.value || !!j.value && (!K.value.isValid || !K.value.isAllowedCountry))), q = p(() => A.invalid || Ge.value), J = p(() => {
+			if (Ge.value) return j.value ? K.value.isValid ? A.texts.unsupportedCountry : A.texts.invalidNumber : A.texts.requiredNumber;
+		}), Ke = p(() => [P["aria-describedby"], J.value || Se.extras ? I.value : void 0].filter(Boolean).join(" ") || void 0);
+		function qe(e) {
+			return e.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+		}
+		function Je(e, t) {
+			try {
+				return U(e).localeCompare(U(t), A.locale);
+			} catch {
+				return U(e).localeCompare(U(t), "en-US");
+			}
+		}
+		function Ye(e) {
+			return c(e.trim().replace(/^00/, "+"));
+		}
+		function Xe(e, t) {
+			let n = e.getNumber(), r = e.getCountry() ?? n?.country;
+			if (r) return r;
+			let i = e.getCallingCode(), a = n?.nationalNumber ?? "", o = n?.getPossibleCountries() ?? [];
+			return t && (o.includes(t) || a && i && f(t) === i) ? t : o.length === 1 ? o[0] : void 0;
+		}
+		function Ze(e, t, n) {
+			if (!e) return "";
+			let r = n ? l(n, { extract: !1 }) : void 0;
+			if (r && (r.isPossible() || r.isValid())) return Y(r.formatInternational(), r.countryCallingCode);
+			if (!t) return ne(e);
+			let i = f(t);
+			return Y(new u().input(`+${i}${e}`), i);
+		}
+		function Y(e, t) {
+			return e.slice(`+${t}`.length).trim();
+		}
+		function Qe(e) {
+			let t = e.trim();
+			return /\d/.test(t) && Ce.test(t) && (t.match(/\+/g) ?? []).length <= 1 && (!t.includes("+") || t.startsWith("+"));
+		}
+		let X;
+		function Z(e) {
+			j.value !== e && (X = e, j.value = e, j.value === e && (X = void 0));
+		}
+		function $e(e) {
+			M.value !== e && (M.value = e);
+		}
+		function Q(e, t = "") {
+			B.value = e, V.value = e ? f(e) : t, $e(e);
+		}
+		function et() {
+			if (M.value && W.value.includes(M.value)) return M.value;
+			if (A.defaultCountry && W.value.includes(A.defaultCountry)) return A.defaultCountry;
+			let e = Te(A.locale);
+			return e && W.value.includes(e) ? e : W.value[0];
+		}
+		function tt(e, t) {
+			let n = Ye(e);
+			if (!n) {
+				R.value = "", t && Z("");
+				return;
+			}
+			let r = new u();
+			r.input(n);
+			let i = r.getNumber(), a = r.getCallingCode() ?? "", o = Xe(r, B.value), s = r.getNumberValue()?.toString() ?? n, c = i?.nationalNumber ?? (a ? n.slice(`+${a}`.length) : n);
+			Q(o, a), R.value = Ze(c, o, s), t && Z(s);
+		}
+		function nt(e) {
+			if (B.value || Q(et()), !e) {
+				R.value = "";
+				return;
+			}
+			let t = e.trim();
+			if (t.startsWith("+") || t.startsWith("00")) {
+				tt(t, !0);
+				return;
+			}
+			rt(t);
+		}
+		function rt(e, t) {
+			let n = c(e).replace(/^\+/, "").replace(/\D/g, "");
+			if (!n) {
+				R.value = "", Z(""), $(t);
+				return;
+			}
+			let r = B.value;
+			R.value = (r ? new u(r) : new u(V.value ? { defaultCallingCode: V.value } : void 0)).input(n);
+			let i = r ? f(r) : V.value;
+			Z(i ? `+${i}${n}` : `+${n}`), $(t);
+		}
+		function it(e) {
+			let t = e.selectionStart ?? e.value.length;
+			return {
+				digitOffset: (e.value.slice(0, t).match(/\d/g) ?? []).length,
+				atEnd: t === e.value.length
+			};
+		}
+		async function $(e) {
+			if (!e) return;
+			await y();
+			let t = L.value;
+			if (!t) return;
+			if (e.atEnd) {
+				t.setSelectionRange(t.value.length, t.value.length);
+				return;
+			}
+			if (e.digitOffset === 0) {
+				t.setSelectionRange(0, 0);
+				return;
+			}
+			let n = 0, r = 0;
+			for (let [i, a] of [...t.value].entries()) if (/\d/.test(a) && (n += 1), r = i + 1, n >= e.digitOffset) break;
+			t.setSelectionRange(r, r);
+		}
+		function at(e) {
+			let t = e.value, n = it(e);
+			if (t.trim().startsWith("+") || t.trim().startsWith("00")) {
+				tt(t, !0), e.value = R.value, $(n);
+				return;
+			}
+			rt(t, n), e.value = R.value;
+		}
+		function ot(e) {
+			at(e.target);
+		}
+		function st(e) {
+			if (A.readonly || A.disabled) {
+				e.preventDefault();
+				return;
+			}
+			let t = e.clipboardData?.getData("text/plain") ?? e.clipboardData?.getData("text");
+			if (t === void 0 || (e.preventDefault(), !Qe(t))) return;
+			let n = e.currentTarget, r = n.selectionStart ?? n.value.length, i = n.selectionEnd ?? r, a = `${n.value.slice(0, r)}${t}${n.value.slice(i)}`;
+			if (!Qe(a)) return;
+			n.value = a;
+			let o = r + t.length;
+			n.setSelectionRange(o, o), at(n);
+		}
+		function ct() {
+			return (j.value ? l(j.value, { extract: !1 }) : void 0)?.nationalNumber ?? R.value.replace(/\D/g, "");
+		}
+		function lt(e) {
+			if (A.readonly || A.disabled || !W.value.includes(e)) return;
+			let t = ct(), n = f(e);
+			if (H = N.value, t) {
+				let r = `+${n}${t}`, i = new u();
+				i.input(r);
+				let a = Xe(i, e) ?? e;
+				Q(a, n), R.value = Ze(t, a, r), Z(r);
+			} else Q(e, n);
+			N.value = !1;
+		}
+		function ut(e) {
+			["ArrowDown", "ArrowUp"].includes(e.key) && (e.preventDefault(), Ne.value?.focusList());
+		}
+		async function dt() {
+			await y(), Pe.value?.inputRef?.focus();
+		}
+		function ft() {
+			z.value = "", H && (H = !1, y(() => L.value?.focus()));
+		}
+		function pt() {
+			Ie.value = !0;
+		}
+		function mt(e) {
+			R.value = "", Z(""), xe("click:clear", e), y(() => L.value?.focus());
+		}
+		return O(j, (e) => {
+			if (e === X) {
+				X = void 0;
+				return;
+			}
+			X = void 0, nt(e);
+		}, {
+			immediate: !0,
+			flush: "sync"
+		}), O(M, (e) => {
+			e && d(e) && W.value.includes(e) && e !== B.value && lt(e);
+		}, { flush: "sync" }), O(W, () => {
+			!j.value && !W.value.includes(B.value) && Q(et());
+		}), O(K, (e) => xe("validity-change", e), { immediate: !0 }), ae({
+			fieldRef: Fe,
+			inputRef: L,
+			validity: K
+		}), (e, i) => (x(), re(T(r), {
+			ref: "field",
+			class: b(["q-phone-field", A.class]),
+			for: T(F),
+			label: A.label,
+			"label-position": A.labelPosition,
+			size: A.size,
+			required: A.required,
+			readonly: A.readonly,
+			disabled: A.disabled,
+			invalid: q.value
+		}, ie({
+			"label.prepend": k(() => [C(e.$slots, "label.prepend")]),
+			"label.append": k(() => [C(e.$slots, "label.append")]),
+			default: k(() => [
+				_(T(a), {
+					id: Ee.value,
+					ref: "countrySelect",
+					modelValue: Ve.value,
+					"onUpdate:modelValue": i[1] ||= (e) => Ve.value = e,
+					open: N.value,
+					"onUpdate:open": i[2] ||= (e) => N.value = e,
+					class: "q-phone-field__country-select",
+					"item-label": "label",
+					"item-value": "key",
+					size: "mini",
+					items: ze.value,
+					"overlay-anchor": Fe.value,
+					readonly: A.readonly,
+					disabled: A.disabled || W.value.length === 0,
+					inline: A.inline,
+					"select-on-tab": !1,
+					"aria-label": He.value,
+					onShow: dt,
+					onHide: ft
+				}, {
+					prepend: k(() => [Be.value && B.value ? (x(), h("span", {
+						key: 0,
+						class: b(["q-phone-field__flag", `flag:${B.value}`]),
+						"aria-hidden": "true"
+					}, [g("span", ue, w(B.value), 1)], 2)) : B.value ? (x(), h("span", de, w(B.value), 1)) : m("v-if", !0)]),
+					value: k(() => [g("span", fe, w(G.value ? `+${G.value}` : "-"), 1)]),
+					"body.prepend": k(() => [_(T(n), {
+						ref: "searchField",
+						modelValue: z.value,
+						"onUpdate:modelValue": i[0] ||= (e) => z.value = e,
+						class: "q-phone-field__search",
+						size: "block",
+						clearable: "",
+						autocomplete: "off",
+						"aria-label": A.texts.searchCountry,
+						placeholder: A.texts.searchCountry,
+						texts: A.texts,
+						onKeydown: ut
+					}, null, 8, [
+						"modelValue",
+						"aria-label",
+						"placeholder",
+						"texts"
+					])]),
+					item: k(({ item: e }) => [
+						e.hasFlag ? (x(), h("span", {
+							key: 0,
+							class: b(["q-phone-field__flag", `flag:${e.key}`]),
+							"aria-hidden": "true"
+						}, [g("span", pe, w(e.key), 1)], 2)) : (x(), h("span", me, w(e.key), 1)),
+						g("span", he, w(e.name), 1),
+						g("span", ge, "+" + w(e.callingCode), 1)
+					]),
+					"body.append": k(() => [ze.value.length === 0 ? (x(), h("div", _e, w(A.texts.noCountries), 1)) : m("v-if", !0)]),
+					_: 1
+				}, 8, [
+					"id",
+					"modelValue",
+					"open",
+					"items",
+					"overlay-anchor",
+					"readonly",
+					"disabled",
+					"inline",
+					"aria-label"
+				]),
+				_(T(n), oe(ke.value, {
+					id: T(F),
+					ref: "input",
+					modelValue: R.value,
+					"onUpdate:modelValue": i[3] ||= (e) => R.value = e,
+					class: "q-phone-field__input",
+					type: "tel",
+					inputmode: "tel",
+					autocomplete: "tel",
+					size: "block",
+					required: A.required,
+					placeholder: Ue.value,
+					readonly: A.readonly,
+					disabled: A.disabled,
+					invalid: q.value,
+					"aria-label": Ae.value,
+					"aria-invalid": q.value || void 0,
+					"aria-describedby": Ke.value,
+					onInput: ot,
+					onPaste: st,
+					onBlur: pt
+				}), ie({ _: 2 }, [e.$slots.append || We.value ? {
+					name: "append",
+					fn: k(() => [C(e.$slots, "append"), We.value ? (x(), re(T(t), {
+						key: 0,
+						"data-testid": "q-phone-field__clear-button",
+						texts: A.texts,
+						onClick: mt
+					}, null, 8, ["texts"])) : m("v-if", !0)]),
+					key: "0"
+				} : void 0]), 1040, [
+					"id",
+					"modelValue",
+					"required",
+					"placeholder",
+					"readonly",
+					"disabled",
+					"invalid",
+					"aria-label",
+					"aria-invalid",
+					"aria-describedby"
+				]),
+				De.value ? (x(), h("input", {
+					key: 0,
+					type: "hidden",
+					name: De.value,
+					value: j.value,
+					form: Oe.value,
+					disabled: A.disabled
+				}, null, 8, ve)) : m("v-if", !0)
+			]),
+			_: 2
+		}, [e.$slots.extras || J.value ? {
+			name: "extras",
+			fn: k(() => [g("div", { id: I.value }, [C(e.$slots, "extras", {
+				message: J.value,
+				validity: K.value,
+				validationId: I.value
+			}, () => [J.value ? (x(), h("span", be, w(J.value), 1)) : m("v-if", !0)])], 8, ye)]),
+			key: "0"
+		} : void 0]), 1032, [
+			"class",
+			"for",
+			"label",
+			"label-position",
+			"size",
+			"required",
+			"readonly",
+			"disabled",
+			"invalid"
+		]));
+	}
+});
+//#endregion
+export { A as default };

package/esm/components/QPhoneField/QPhoneField2.vue.js

@@ -0,0 +1,5 @@
+import e from "./QPhoneField.vue.js";
+//#region src/components/QPhoneField/QPhoneField.vue
+var t = e;
+//#endregion
+export { t as default };

package/esm/components/QPhoneField/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const DEFAULT_TEXTS: {
+    phoneNumber: string;
+    selectCountry: string;
+    searchCountry: string;
+    noCountries: string;
+    requiredNumber: string;
+    invalidNumber: string;
+    unsupportedCountry: string;
+    clearValue: string;
+};
+//# sourceMappingURL=constants.d.ts.map

package/esm/components/QPhoneField/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QPhoneField/constants.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa;;;;;;;;;CASQ,CAAA"}

package/esm/components/QPhoneField/constants.js

@@ -0,0 +1,14 @@
+import { DEFAULT_TEXTS as e } from "../__internal__/QClearButton/constants.js";
+//#region src/components/QPhoneField/constants.ts
+var t = {
+	...e,
+	phoneNumber: "Phone number",
+	selectCountry: "Select country",
+	searchCountry: "Search by country or calling code",
+	noCountries: "No countries found",
+	requiredNumber: "The phone number is required.",
+	invalidNumber: "Enter a valid phone number.",
+	unsupportedCountry: "This number country is not available."
+};
+//#endregion
+export { t as DEFAULT_TEXTS };