@bagelink/vue 1.7.49 → 1.7.53

package/dist/index.mjs

@@ -6060,6 +6060,7 @@ function txtField(e, t, j) {
 		vIf: j?.vIf,
 		transform: j?.transform,
 		attrs: {
+			title: j?.title,
 			autocomplete: j?.autocomplete,
 			pattern: j?.pattern,
 			multiline: j?.multiline,
@@ -6088,6 +6089,7 @@ function selectField(e, t, j, M) {
 		options: j,
 		attrs: {
 			...M?.attrs,
+			title: M?.title,
 			searchable: M?.searchable,
 			multiselect: M?.multiselect,
 			clearable: M?.clearable
@@ -6123,6 +6125,7 @@ function emailField(e, t, j) {
 		vIf: j?.vIf,
 		transform: j?.transform,
 		attrs: {
+			title: j?.title,
 			autocorrect: j?.autocorrect,
 			serverValidate: j?.serverValidate,
 			preventFakeEmails: j?.preventFakeEmails,
@@ -6142,6 +6145,7 @@ function dateField(e, t, j) {
 		vIf: j?.vIf,
 		transform: j?.transform,
 		attrs: {
+			title: j?.title,
 			disabled: j?.disabled,
 			autocomplete: j?.autocomplete,
 			enableTime: j?.enableTime,
@@ -6165,6 +6169,7 @@ function numField(e, t, j) {
 		vIf: j?.vIf,
 		transform: j?.transform,
 		attrs: {
+			title: j?.title,
 			autocomplete: j?.autocomplete,
 			step: j?.step,
 			min: j?.min,
@@ -6241,6 +6246,7 @@ function telField(e, t, j) {
 		transform: j?.transform,
 		attrs: {
 			...j?.attrs,
+			title: j?.title,
 			pattern: j?.pattern,
 			autocomplete: j?.autocomplete
 		}
@@ -9049,9 +9055,10 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 			if (M.multiselect) {
 				let t = [e].flat();
 				Kj(t, yj.value) || yj.value.splice(0, bj.value, ...t);
-			} else {
+			} else if (e == null) yj.value.length > 0 && (yj.value = []);
+			else {
 				let t = Array.isArray(M.options) ? M.options.find((t) => Bj(t) === e) ?? e : e;
-				t != null && !Ij(t) && (yj.value = [t]);
+				Ij(t) || (yj.value = [t]);
 			}
 		}, { immediate: !0 }), watch(() => wj.value, (e) => {
 			e && (jj.value = -1, setTimeout(() => {
@@ -9076,7 +9083,7 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 			});
 		}, { deep: !0 }), onMounted(() => {
 			let e = M.options;
-			if (M.defaultValue !== void 0 && Array.isArray(e)) {
+			if (M.modelValue == null && M.defaultValue !== void 0 && Array.isArray(e)) {
 				let t = e.find((e) => Bj(e) === Bj(M.defaultValue));
 				if (t === void 0) return;
 				yj.value = [t];
@@ -9190,7 +9197,7 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 			_: 3
 		}, 8, ["shown", "placement"]));
 	}
-}), [["__scopeId", "data-v-5beb2e3d"]]), _hoisted_1$42 = ["title"], _hoisted_2$28 = ["for"], _hoisted_3$22 = { key: 0 }, _hoisted_4$13 = [
+}), [["__scopeId", "data-v-53212b64"]]), _hoisted_1$42 = ["title"], _hoisted_2$28 = ["for"], _hoisted_3$22 = { key: 0 }, _hoisted_4$13 = [
 	"id",
 	"name",
 	"title",
@@ -9247,33 +9254,47 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 	},
 	emits: ["update:modelValue", "debounce"],
 	setup(e, { expose: t, emit: j }) {
-		let M = e, N = j, V = ref(), hj = ref();
-		useValidateFieldValue(() => V.value, () => hj.value, M.validate, M.getFormData);
-		let _j = computed(() => {
+		let M = e, N = j, V = computed(() => {
+			if (!M.pattern) return;
+			let { pattern: e } = M;
+			e = e.replace(/^\^/, "").replace(/\$$/, "");
+			try {
+				return e;
+			} catch {
+				try {
+					return e;
+				} catch (e) {
+					console.error("Invalid pattern:", M.pattern, e);
+					return;
+				}
+			}
+		}), hj = ref(), _j = ref();
+		useValidateFieldValue(() => hj.value, () => _j.value, M.validate, M.getFormData);
+		let vj = computed(() => {
 			let e = Number(M.rows) || 1;
-			return M.autoheight && (e = Math.max(e, String(V.value).split("\n").length)), (M.multiline || M.code) && (e = Math.max(e, 4)), e;
-		}), vj = useDebounceFn(() => {
-			N("debounce", V.value);
+			return M.autoheight && (e = Math.max(e, String(hj.value).split("\n").length)), (M.multiline || M.code) && (e = Math.max(e, 4)), e;
+		}), yj = useDebounceFn(() => {
+			N("debounce", hj.value);
 		}, 700);
-		function yj() {
-			if (!M.autoheight || !hj.value || hj.value.tagName !== "TEXTAREA") return;
-			let e = hj.value;
+		function bj() {
+			if (!M.autoheight || !_j.value || _j.value.tagName !== "TEXTAREA") return;
+			let e = _j.value;
 			e.style.height = "auto", e.style.height = `${e.scrollHeight + 1}px`;
 		}
-		function bj() {
-			M.disabled || (N("update:modelValue", V.value), vj(), M.autoheight && nextTick(() => {
-				yj();
+		function xj() {
+			M.disabled || (N("update:modelValue", hj.value), yj(), M.autoheight && nextTick(() => {
+				bj();
 			}));
 		}
 		return watch(() => M.modelValue, (e) => {
-			e !== V.value && (V.value = e, M.autoheight && nextTick(() => {
-				yj();
+			e !== hj.value && (hj.value = e, M.autoheight && nextTick(() => {
+				bj();
 			}));
 		}, { immediate: !0 }), t({
-			focus: () => hj.value?.focus(),
-			hasFocus: () => document.activeElement === hj.value
+			focus: () => _j.value?.focus(),
+			hasFocus: () => document.activeElement === _j.value
 		}), onMounted(async () => {
-			M.autofocus && (await until(() => hj.value).toBeTruthy(), await sleep(400), hj.value?.focus()), M.autoheight && (await nextTick(), yj());
+			M.autofocus && (await until(() => _j.value).toBeTruthy(), await sleep(400), _j.value?.focus()), M.autoheight && (await nextTick(), bj());
 		}), (e, t) => (openBlock(), createElementBlock("div", {
 			class: normalizeClass(["bagel-input text-input", {
 				dense: e.dense,
@@ -9287,12 +9308,12 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 		}, [createElementVNode("label", { for: e.id }, [
 			createTextVNode(toDisplayString(e.label) + " ", 1),
 			e.required && e.label ? (openBlock(), createElementBlock("span", _hoisted_3$22, "*")) : createCommentVNode("", !0),
-			!e.multiline && !e.autoheight && !e.code && _j.value < 2 ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
+			!e.multiline && !e.autoheight && !e.code && vj.value < 2 ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
 				key: 1,
 				id: e.id,
 				ref_key: "input",
-				ref: hj,
-				"onUpdate:modelValue": t[0] ||= (e) => V.value = e,
+				ref: _j,
+				"onUpdate:modelValue": t[0] ||= (e) => hj.value = e,
 				name: e.name,
 				title: e.title,
 				autocomplete: e.autocomplete,
@@ -9300,35 +9321,35 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 				rows: 1,
 				placeholder: e.placeholder || e.label,
 				disabled: e.disabled,
-				required: e.required,
-				pattern: e.pattern
+				required: e.required
 			}, e.nativeInputAttrs, {
+				pattern: V.value,
 				onFocusout: t[1] ||= (...t) => e.onFocusout && e.onFocusout(...t),
 				onFocus: t[2] ||= (...t) => e.onFocus && e.onFocus(...t),
-				onInput: bj
+				onInput: xj
 			}), null, 16, _hoisted_4$13)), [[
 				vModelDynamic,
-				V.value,
+				hj.value,
 				void 0,
 				{ trim: !0 }
 			]]) : withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
 				key: 2,
 				id: e.id,
 				ref_key: "input",
-				ref: hj,
-				"onUpdate:modelValue": t[3] ||= (e) => V.value = e,
+				ref: _j,
+				"onUpdate:modelValue": t[3] ||= (e) => hj.value = e,
 				name: e.name,
 				title: e.title,
 				type: e.type,
-				rows: _j.value,
+				rows: vj.value,
 				placeholder: e.placeholder || e.label,
 				disabled: e.disabled,
-				required: e.required,
-				pattern: e.pattern
+				required: e.required
 			}, e.nativeInputAttrs, {
-				onInput: bj,
+				pattern: V.value,
+				onInput: xj,
 				onFocusout: t[4] ||= (...t) => e.onFocusout && e.onFocusout(...t)
-			}), null, 16, _hoisted_5$13)), [[vModelText, V.value]]),
+			}), null, 16, _hoisted_5$13)), [[vModelText, hj.value]]),
 			e.helptext ? (openBlock(), createElementBlock("p", _hoisted_6$11, toDisplayString(e.helptext), 1)) : createCommentVNode("", !0),
 			e.iconStart ? (openBlock(), createBlock(unref(Icon_default), {
 				key: 4,
@@ -9341,7 +9362,7 @@ var _hoisted_1$51 = ["title"], _hoisted_2$36 = ["for"], _hoisted_3$29 = { class:
 			}, null, 8, ["icon"])) : createCommentVNode("", !0)
 		], 8, _hoisted_2$28)], 10, _hoisted_1$42));
 	}
-}), [["__scopeId", "data-v-ab83eb49"]]);
+}), [["__scopeId", "data-v-1d2dc7ba"]]);
 const tableTools = [
 	"mergeCells",
 	"splitCells",
@@ -24510,9 +24531,9 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 				e = e.filter((e) => e.name.toLowerCase().includes(t) || e.iso2.toLowerCase().includes(t) || e.dialCode.includes(hj.value.replace("+", "")));
 			}
 			return e;
-		}), wj = computed(() => vj.value?.iso2);
-		function Tj(e) {
-			if (vj.value = e, bj.value = !1, hj.value = "", !V.value) V.value = `+${vj.value.dialCode}`;
+		}), wj = computed(() => vj.value?.iso2), Tj = computed(() => M.placeholder ? M.placeholder : vj.value ? `+${vj.value.dialCode} ${M.label || "Phone Number"}` : M.label || "Phone Number");
+		function Ej(e) {
+			if (vj.value = e, bj.value = !1, hj.value = "", !V.value) M.required && (V.value = `+${vj.value.dialCode}`);
 			else if (V.value.startsWith("+")) {
 				let t = Cj.value.find((e) => V.value.startsWith(`+${e.dialCode}`));
 				if (t && t !== e) {
@@ -24521,66 +24542,75 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 				}
 			} else V.value = `+${vj.value.dialCode} ${V.value.replace(/^0+/, "")}`;
 		}
-		async function Ej() {
+		async function Dj() {
 			let { country_code: e } = await ipapi();
-			Tj(Cj.value.find((t) => t.iso2 === e) ?? Cj.value[0]);
+			Ej(Cj.value.find((t) => t.iso2 === e) ?? Cj.value[0]);
 		}
-		function Dj() {
+		function Oj() {
 			return vj.value?.iso2 ? vj.value.iso2.toUpperCase() : void 0;
 		}
-		function Oj(e) {
+		function kj(e) {
 			if (!e) return e;
 			try {
-				let t = parsePhoneNumber(e, Dj());
+				let t = parsePhoneNumber(e, Oj());
 				if (t && t.isValid()) return t.formatInternational();
 			} catch (e) {
 				console.error("Error parsing phone number:", e);
 			}
 			return e;
 		}
-		function kj() {
-			if (xj.value) try {
-				let e = parsePhoneNumber(V.value, Dj());
-				e && e.isValid() ? (xj.value.setCustomValidity(""), Sj.value = !0) : (xj.value.setCustomValidity("Please enter a valid phone number"), Sj.value = !1);
-			} catch (e) {
-				console.error("Error validating phone number:", e), xj.value.setCustomValidity("Please enter a valid phone number"), Sj.value = !1;
+		function jj() {
+			if (xj.value) {
+				if (!M.required) {
+					let e = V.value.replace(/[\s+]/g, ""), t = vj.value && e === vj.value.dialCode;
+					if (!V.value || t) {
+						xj.value.setCustomValidity(""), Sj.value = !0;
+						return;
+					}
+				}
+				try {
+					let e = parsePhoneNumber(V.value, Oj());
+					e && e.isValid() ? (xj.value.setCustomValidity(""), Sj.value = !0) : (xj.value.setCustomValidity("Please enter a valid phone number"), Sj.value = !1);
+				} catch (e) {
+					console.error("Error validating phone number:", e), xj.value.setCustomValidity("Please enter a valid phone number"), Sj.value = !1;
+				}
 			}
 		}
-		function jj(e) {
+		function Mj(e) {
 			if (!e.startsWith("+")) return !1;
 			let t = e.replace(/\D/g, "");
 			if (t.length <= 1) return !1;
-			for (let e of Cj.value) if (t.startsWith(e.dialCode) && e !== vj.value) return Tj(e), !0;
+			for (let e of Cj.value) if (t.startsWith(e.dialCode) && e !== vj.value) return Ej(e), !0;
 			return !1;
 		}
-		async function Mj() {
-			V.value ? jj(V.value) : await Ej();
-			let e = Oj(V.value);
-			e !== V.value && (V.value = e, N("input", V.value), kj()), kj();
+		async function Nj() {
+			V.value ? Mj(V.value) : await Dj();
+			let e = kj(V.value);
+			e !== V.value && (V.value = e, N("input", V.value), jj()), jj();
 		}
-		function Nj(e) {
+		function Pj(e) {
 			let { value: t } = e.target;
-			if (jj(t), t.startsWith("+")) {
-				let j = Oj(t);
+			if (Mj(t), t.startsWith("+")) {
+				let j = kj(t);
 				if (j !== t) {
-					V.value = j, N("input", e), kj();
+					V.value = j, N("input", e), jj();
 					return;
 				}
 			}
-			V.value = t, N("input", e), kj();
+			V.value = t, N("input", e), jj();
 		}
-		function Pj(e) {
+		function Ij(e) {
 			if (V.value && !V.value.startsWith("+") && vj.value) {
 				let e = V.value.replace(/^0+/, "");
 				V.value = `+${vj.value.dialCode} ${e}`;
-			} else V.value &&= Oj(V.value);
-			kj(), N("blur", e);
+			} else V.value &&= kj(V.value);
+			jj(), N("blur", e);
 		}
-		let Ij = computed(() => Cj.value.length === 1 && !hj.value), Lj = computed(() => Cj.value.length > 7 || hj.value);
-		function Rj() {
+		let Lj = computed(() => Cj.value.length === 1 && !hj.value), Rj = computed(() => Cj.value.length > 7 || hj.value);
+		function Bj() {
 			setTimeout(() => yj.value?.focus(), 100);
 		}
-		return onMounted(Mj), (e, j) => {
+		return onMounted(Nj), (e, j) => {
 			let M = resolveDirective("pattern");
 			return openBlock(), createElementBlock("div", { class: normalizeClass(["bagel-input text-input", { invalid: !Sj.value }]) }, [createElementVNode("label", null, [
 				createTextVNode(toDisplayString(e.label) + " ", 1),
@@ -24596,17 +24626,17 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 					shown: bj.value,
 					"onUpdate:shown": j[1] ||= (e) => bj.value = e,
 					placement: "bottom-start",
-					disabled: Ij.value,
-					onShow: Rj
+					disabled: Lj.value,
+					onShow: Bj
 				}, {
-					trigger: withCtx(() => [createElementVNode("span", _hoisted_3$18, [Ij.value ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(Icon_default), {
+					trigger: withCtx(() => [createElementVNode("span", _hoisted_3$18, [Lj.value ? createCommentVNode("", !0) : (openBlock(), createBlock(unref(Icon_default), {
 						key: 0,
 						icon: bj.value ? "collapse_all" : "expand_all"
 					}, null, 8, ["icon"])), wj.value ? (openBlock(), createBlock(unref(Flag_default), {
 						key: 1,
 						country: wj.value
 					}, null, 8, ["country"])) : createCommentVNode("", !0)])]),
-					default: withCtx(() => [createElementVNode("div", _hoisted_4$9, [Lj.value ? (openBlock(), createBlock(unref(TextInput_default), {
+					default: withCtx(() => [createElementVNode("div", _hoisted_4$9, [Rj.value ? (openBlock(), createBlock(unref(TextInput_default), {
 						key: 0,
 						ref_key: "searchInput",
 						ref: yj,
@@ -24621,7 +24651,7 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 						class: "flex gap-075 pointer hover",
 						tabindex: "-1",
 						"aria-selected": wj.value === e.iso2,
-						onClick: (t) => Tj(e)
+						onClick: (t) => Ej(e)
 					}, [
 						createVNode(unref(Flag_default), { country: e.iso2 }, null, 8, ["country"]),
 						createElementVNode("p", _hoisted_7$6, toDisplayString(e.name), 1),
@@ -24634,17 +24664,17 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 					ref: xj,
 					"onUpdate:modelValue": j[2] ||= (e) => V.value = e,
 					required: e.required,
-					placeholder: e.placeholder || e.label || "Phone Number",
+					placeholder: Tj.value,
 					disabled: e.disabled,
 					type: "tel",
 					autocomplete: "tel",
 					name: e.id,
 					tabindex: "0",
 					class: "national-number-input",
-					onBlur: j[3] ||= (e) => Pj(e),
+					onBlur: j[3] ||= (e) => Ij(e),
 					onFocus: j[4] ||= (e) => N("focus", e),
 					onKeydown: j[5] ||= (e) => N("keydown", e),
-					onInput: j[6] ||= (e) => Nj(e),
+					onInput: j[6] ||= (e) => Pj(e),
 					onPaste: j[7] ||= (e) => N("paste", e)
 				}, null, 40, _hoisted_8$5), [[vModelText, V.value], [
 					M,
@@ -24655,7 +24685,7 @@ var _hoisted_1$35 = { key: 0 }, _hoisted_2$22 = ["aria-expanded"], _hoisted_3$18
 			])], 2);
 		};
 	}
-}), [["__scopeId", "data-v-5b5fd380"]]), _hoisted_1$34 = ["title"], _hoisted_2$21 = ["id", "required"], _hoisted_3$17 = ["for"], ToggleInput_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+}), [["__scopeId", "data-v-0a8c927c"]]), _hoisted_1$34 = ["title"], _hoisted_2$21 = ["id", "required"], _hoisted_3$17 = ["for"], ToggleInput_default = /* @__PURE__ */ __plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "ToggleInput",
 	props: /* @__PURE__ */ mergeModels({
 		label: {},