@webitel/ui-sdk 26.6.96 → 26.6.97

package/dist/{wt-chat-emoji-CX65m8Dd.js → wt-chat-emoji-Zfe96hoz.js}

@@ -1,4 +1,4 @@
-import "./components-Bim818Xf.js";
+import "./components-CSWXogKF.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-De8CDKZ1.js";
 import { t as n } from "./wt-button-dC4nOW56.js";

package/dist/{wt-datepicker-BP9bBbGY.js → wt-datepicker-BtjegGDk.js}

@@ -3,7 +3,7 @@ import { d as t, f as n, l as r, r as i } from "./enums-De8CDKZ1.js";
 import { a, i as o, n as s, r as c, t as l } from "./toZonedTime-B8L5kbse.js";
 import { t as u } from "./vue-i18n-Db_oYfO8.js";
 import { t as d } from "./useValidation-lRiKF7xV.js";
-import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as ee, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, guardReactiveProps as y, mergeModels as b, mergeProps as x, nextTick as S, normalizeProps as C, onMounted as w, onUnmounted as T, openBlock as E, renderSlot as D, resolveComponent as O, toDisplayString as k, toRefs as A, unref as j, useModel as M, useTemplateRef as N, vShow as P, withCtx as F, withDirectives as I } from "vue";
+import { computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, guardReactiveProps as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeProps as w, onMounted as T, onUnmounted as E, openBlock as D, renderSlot as O, resolveComponent as k, toDisplayString as A, toRefs as j, unref as M, useModel as N, useTemplateRef as ee, vShow as P, withCtx as F, withDirectives as I } from "vue";
 import L from "primevue/datepicker";
 //#region node_modules/date-fns-tz/dist/esm/fromZonedTime/index.js
 function R(e, t, n) {
@@ -16,8 +16,47 @@ function R(e, t, n) {
 	return new Date(r + i);
 }
 //#endregion
+//#region src/components/wt-datepicker/_internals/composables/useAutoSeparator.ts
+function z(e) {
+	let t = [{
+		afterPos: 2,
+		sep: "/"
+	}, {
+		afterPos: 5,
+		sep: "/"
+	}], n = [{
+		afterPos: 10,
+		sep: " "
+	}, {
+		afterPos: 13,
+		sep: ":"
+	}], r = 0, i = !1;
+	function a(a) {
+		if (i) return;
+		let o = a.target, s = o.value, c = o.selectionStart ?? s.length, l = s.length, u = l < r;
+		if (r = l, u) return;
+		let d = e() ? [...t, ...n] : t;
+		for (let { afterPos: e, sep: t } of d) {
+			if (c < e) break;
+			if (s[e] === t) continue;
+			let n = s.slice(0, e) + t + s.slice(e);
+			o.value = n, r = n.length;
+			let a = c + t.length;
+			o.setSelectionRange(a, a), i = !0, o.dispatchEvent(new Event("input", { bubbles: !0 })), i = !1;
+			break;
+		}
+	}
+	function o(e) {
+		r = e.value.length;
+	}
+	return {
+		onInputBubble: a,
+		resetLength: o
+	};
+}
+//#endregion
 //#region src/components/wt-datepicker/_internals/composables/useOverlayAnchor.ts
-function z() {
+function B() {
 	let e = null;
 	function t(e, t) {
 		e.style.width !== t && (e.style.width = t, e.style.minWidth = "");
@@ -38,21 +77,21 @@ function z() {
 	function i() {
 		e?.disconnect(), e = null;
 	}
-	return T(i), {
+	return E(i), {
 		lock: r,
 		unlock: i
 	};
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/usePreventZeroPad.ts
-function B(e) {
-	let t = null;
-	function n(e) {
-		let n = e.target, r = n.value, i = n.selectionStart ?? 0, a = r.split("/"), o = 0;
-		for (let e = 0; e < Math.min(a.length, 2); e++) {
-			let n = a[e], s = o + n.length;
+function V() {
+	let e = null;
+	function t(t) {
+		let n = t.target, r = n.value, i = n.selectionStart ?? 0, a = r.split("/"), o = 0;
+		for (let t = 0; t < Math.min(a.length, 2); t++) {
+			let n = a[t], s = o + n.length;
 			if (i <= s && n.length === 1 && /^\d$/.test(n)) {
-				t = {
+				e = {
 					value: r,
 					cursor: i
 				};
@@ -61,52 +100,98 @@ function B(e) {
 			o = s + 1;
 		}
 	}
-	function r(e) {
-		if (!t) return;
-		let n = e.target, { value: r, cursor: i } = t;
-		t = null, n.value !== r && (n.value = r, n.setSelectionRange(i, i), e.stopImmediatePropagation());
+	function n(t) {
+		if (!e) return;
+		let n = t.target, { value: r, cursor: i } = e;
+		e = null, n.value !== r && (n.value = r, n.setSelectionRange(i, i), t.stopImmediatePropagation());
 	}
-	w(() => {
-		let t = e();
-		t && (t.addEventListener("input", n, { capture: !0 }), t.addEventListener("input", r));
-	}), T(() => {
-		let t = e();
-		t && (t.removeEventListener("input", n, { capture: !0 }), t.removeEventListener("input", r));
-	});
+	return {
+		onInputCapture: t,
+		onInputBubble: n
+	};
 }
 //#endregion
 //#region src/components/wt-datepicker/_internals/composables/useRestoreOnBlur.ts
-function V(e, t) {
+function H(e, t) {
 	function n() {
 		if (t()) return;
 		let n = e();
-		n && n.rawValue === null && S(() => {
+		n && n.rawValue === null && C(() => {
 			n.updateModel(/* @__PURE__ */ new Date());
 		});
 	}
 	return { onBlur: n };
 }
 //#endregion
+//#region src/components/wt-datepicker/_internals/composables/useStrictInput.ts
+function U(e) {
+	let t = /^[0-9]$/, n = /* @__PURE__ */ new Set([
+		"Backspace",
+		"Delete",
+		"Tab",
+		"Enter",
+		"Escape",
+		"ArrowLeft",
+		"ArrowRight",
+		"ArrowUp",
+		"ArrowDown",
+		"Home",
+		"End"
+	]);
+	function r(r) {
+		if (n.has(r.key) || r.ctrlKey || r.metaKey) return;
+		if (!t.test(r.key)) {
+			r.preventDefault();
+			return;
+		}
+		let i = r.target, a = e() ? 16 : 10;
+		(i.selectionEnd ?? 0) - (i.selectionStart ?? 0) > 0 || i.value.length >= a && r.preventDefault();
+	}
+	return { onKeydown: r };
+}
+//#endregion
+//#region src/components/wt-datepicker/_internals/composables/useDatepicker.ts
+function W(e, t, n, r) {
+	let { onInputCapture: i, onInputBubble: a } = V(), { onInputBubble: o, resetLength: s } = z(n), { onKeydown: c } = U(n), { lock: l, unlock: u } = B(), { onBlur: d } = H(t, r);
+	function f(e) {
+		i(e);
+	}
+	function p(e) {
+		a(e), o(e);
+	}
+	return T(() => {
+		let t = e();
+		t && (s(t), t.addEventListener("input", f, { capture: !0 }), t.addEventListener("input", p), t.addEventListener("keydown", c));
+	}), E(() => {
+		let t = e();
+		t && (t.removeEventListener("input", f, { capture: !0 }), t.removeEventListener("input", p), t.removeEventListener("keydown", c));
+	}), {
+		onBlur: d,
+		lockOverlay: l,
+		unlockOverlay: u
+	};
+}
+//#endregion
 //#region src/components/wt-datepicker/wt-datepicker.vue?vue&type=script&setup=true&lang.ts
-var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" }, W = [
+var G = { class: "wt-datepicker" }, K = { class: "wt-datepicker__button-bar" }, q = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], G = [
+], J = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], K = [
+], Y = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], q = [
+], X = [
 	"onMousedown",
 	"onMouseup",
 	"onMouseleave"
-], J = /*#__PURE__*/ e(/* @__PURE__ */ v({
+], Z = /*#__PURE__*/ e(/* @__PURE__ */ y({
 	__name: "wt-datepicker",
-	props: /*@__PURE__*/ b({
+	props: /*@__PURE__*/ x({
 		showTime: { type: Boolean },
 		minDate: {},
 		maxDate: {},
@@ -186,7 +271,7 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ b([
+	emits: /*@__PURE__*/ x([
 		"update:modelValue",
 		"value-change",
 		"input",
@@ -202,7 +287,7 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 		"keydown"
 	], ["update:modelValue"]),
 	setup(e, { emit: a }) {
-		let o = e, s = M(e, "modelValue"), { t: c } = u(), v = f({
+		let o = e, s = N(e, "modelValue"), { t: c } = u(), y = f({
 			get() {
 				if (!s.value) return null;
 				let e = /* @__PURE__ */ new Date(+s.value);
@@ -217,42 +302,40 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 				let t = o.timezone ? R(e, o.timezone) : e;
 				s.value = t.getTime();
 			}
-		}), b = N("datepicker"), w = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
-		B(() => b.value?.$el?.querySelector("input"));
-		let { onBlur: T } = V(() => b.value, () => !!o.clearable), J = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), { lock: Y, unlock: X } = z(), Z = () => {
-			if (o.showTime && v.value) {
-				let e = v.value;
-				S(() => {
-					v.value = new Date(e.getTime());
+		}), x = ee("datepicker"), T = `datepicker-${Math.random().toString(36).slice(2, 11)}`, { onBlur: E, lockOverlay: z, unlockOverlay: B } = W(() => x.value?.$el?.querySelector("input"), () => x.value, () => !!o.showTime, () => !!o.clearable), V = f(() => o.placholder || `dd/mm/yyyy ${o.showTime ? "hh:mm" : ""}`), H = () => {
+			if (o.showTime && y.value) {
+				let e = y.value;
+				C(() => {
+					y.value = new Date(e.getTime());
 				});
 			}
 			setTimeout(() => {
-				b.value?.alignOverlay();
-				let e = b.value?.overlay;
-				e && (e.style.minWidth = "", Y(e));
+				x.value?.alignOverlay();
+				let e = x.value?.overlay;
+				e && (e.style.minWidth = "", z(e));
 			}, 0);
-		}, Q = () => {
-			X();
-		}, te = f(() => o.required ? `${o.label}*` : o.label), { v: ne, customValidators: re } = A(o), { isValidation: ie, invalid: ae, validationText: $, validationTextColor: oe } = d({
-			v: ne,
-			customValidators: re
+		}, U = () => {
+			B();
+		}, Z = f(() => o.required ? `${o.label}*` : o.label), { v: Q, customValidators: te } = j(o), { isValidation: ne, invalid: re, validationText: $, validationTextColor: ie } = d({
+			v: Q,
+			customValidators: te
 		});
 		return (a, o) => {
-			let s = O("wt-label"), l = O("wt-button"), u = O("wt-icon-btn"), d = O("wt-message");
-			return E(), ee("div", H, [
-				_(s, x(e.labelProps, { disabled: e.disabled }, {
-					for: w,
-					invalid: j(ae)
+			let s = k("wt-label"), l = k("wt-button"), u = k("wt-icon-btn"), d = k("wt-message");
+			return D(), h("div", G, [
+				v(s, S(e.labelProps, { disabled: e.disabled }, {
+					for: T,
+					invalid: M(re)
 				}), {
-					default: F(() => [D(a.$slots, "label", C(y({ label: e.label })), () => [g(k(te.value), 1)], !0)], void 0, !0),
+					default: F(() => [O(a.$slots, "label", w(b({ label: e.label })), () => [_(A(Z.value), 1)], !0)], void 0, !0),
 					_: 3
 				}, 16, ["disabled", "invalid"]),
-				_(j(L), {
+				v(M(L), {
 					ref_key: "datepicker",
-					ref: b,
-					id: w,
-					modelValue: v.value,
-					"onUpdate:modelValue": o[0] ||= (e) => v.value = e,
+					ref: x,
+					id: T,
+					modelValue: y.value,
+					"onUpdate:modelValue": o[0] ||= (e) => y.value = e,
 					"date-format": "dd/mm/yy",
 					"input-class": "typo-body-1",
 					required: e.required,
@@ -260,8 +343,8 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 					"show-time": e.showTime,
 					"min-date": e.minDate,
 					"max-date": e.maxDate,
-					placeholder: J.value,
-					"show-clear": e.clearable && v.value,
+					placeholder: V.value,
+					"show-clear": e.clearable && y.value,
 					"show-button-bar": "",
 					fluid: "",
 					pt: {
@@ -273,70 +356,70 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 						minute: { class: "typo-body-2" },
 						panel: { style: { maxWidth: "380px" } }
 					},
-					onShow: Z,
-					onHide: Q,
-					onBlur: j(T)
+					onShow: H,
+					onHide: U,
+					onBlur: M(E)
 				}, {
-					buttonbar: F(({ todayCallback: i, clearCallback: a }) => [h("div", U, [_(l, {
-						color: j(n).SECONDARY,
-						variant: j(t).OUTLINED,
-						size: j(r).SM,
+					buttonbar: F(({ todayCallback: i, clearCallback: a }) => [g("div", K, [v(l, {
+						color: M(n).SECONDARY,
+						variant: M(t).OUTLINED,
+						size: M(r).SM,
 						onClick: i
 					}, {
-						default: F(() => [g(k(j(c)("reusable.today")), 1)], void 0, !0),
+						default: F(() => [_(A(M(c)("reusable.today")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), I(_(l, {
-						color: j(n).SECONDARY,
-						variant: j(t).OUTLINED,
-						size: j(r).SM,
+					]), I(v(l, {
+						color: M(n).SECONDARY,
+						variant: M(t).OUTLINED,
+						size: M(r).SM,
 						onClick: a
 					}, {
-						default: F(() => [g(k(j(c)("reusable.clear")), 1)], void 0, !0),
+						default: F(() => [_(A(M(c)("reusable.clear")), 1)], void 0, !0),
 						_: 1
 					}, 8, [
 						"color",
 						"variant",
 						"size",
 						"onClick"
-					]), [[P, e.clearable && v.value]])])]),
-					prevbutton: F(({ actionCallback: e }) => [_(u, {
+					]), [[P, e.clearable && y.value]])])]),
+					prevbutton: F(({ actionCallback: e }) => [v(u, {
 						icon: "arrow-left",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					nextbutton: F(({ actionCallback: e }) => [_(u, {
+					nextbutton: F(({ actionCallback: e }) => [v(u, {
 						icon: "arrow-right",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					clearicon: F(({ clearCallback: e }) => [_(u, {
+					clearicon: F(({ clearCallback: e }) => [v(u, {
 						icon: "close",
 						class: "wt-datepicker__clear-icon",
 						onClick: e
 					}, null, 8, ["onClick"])]),
-					hourincrementbutton: F(({ callbacks: e }) => [h("span", {
+					hourincrementbutton: F(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [_(u, { icon: "arrow-up" })], 40, W)]),
-					hourdecrementbutton: F(({ callbacks: e }) => [h("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, q)]),
+					hourdecrementbutton: F(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [_(u, { icon: "arrow-down" })], 40, G)]),
-					minuteincrementbutton: F(({ callbacks: e }) => [h("span", {
+					}, [v(u, { icon: "arrow-down" })], 40, J)]),
+					minuteincrementbutton: F(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [_(u, { icon: "arrow-up" })], 40, K)]),
-					minutedecrementbutton: F(({ callbacks: e }) => [h("span", {
+					}, [v(u, { icon: "arrow-up" })], 40, Y)]),
+					minutedecrementbutton: F(({ callbacks: e }) => [g("span", {
 						onMousedown: e.mousedown,
 						onMouseup: e.mouseup,
 						onMouseleave: e.mouseleave
-					}, [_(u, { icon: "arrow-down" })], 40, q)]),
+					}, [v(u, { icon: "arrow-down" })], 40, X)]),
 					_: 1
 				}, 8, [
 					"modelValue",
@@ -349,13 +432,13 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 					"show-clear",
 					"onBlur"
 				]),
-				j(ie) && j($) ? (E(), p(d, {
+				M(ne) && M($) ? (D(), p(d, {
 					key: 0,
-					color: j(oe),
-					variant: j(i).SIMPLE,
-					size: j(r).SM
+					color: M(ie),
+					variant: M(i).SIMPLE,
+					size: M(r).SM
 				}, {
-					default: F(() => [g(k(j($)), 1)], void 0, !0),
+					default: F(() => [_(A(M($)), 1)], void 0, !0),
 					_: 1
 				}, 8, [
 					"color",
@@ -365,6 +448,6 @@ var H = { class: "wt-datepicker" }, U = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-d1bf89b4"]]);
+}), [["__scopeId", "data-v-bdb1c01b"]]);
 //#endregion
-export { J as default };
+export { Z as default };

package/dist/{wt-display-chip-items-tL17x2-U.js → wt-display-chip-items-YauywYzZ.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-Bim818Xf.js";
+import { C as e, i as t } from "./components-CSWXogKF.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./displayText-CtaxzaBz.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-send-message-popup-8TZWTO40.js → wt-send-message-popup-DV1i1Q52.js}

@@ -1,5 +1,5 @@
 import { n as e, r as t } from "./clients-Ban2DI-G.js";
-import { n } from "./components-Bim818Xf.js";
+import { n } from "./components-CSWXogKF.js";
 import { t as r } from "./vue-i18n-Db_oYfO8.js";
 import { createBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, mergeProps as l, onMounted as u, openBlock as d, ref as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#endregion

package/dist/{wt-type-extension-value-input-D1wNUHkh.js → wt-type-extension-value-input-CpYbzjDU.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./clients-Ban2DI-G.js";
-import { a as t, o as n, r, s as i } from "./components-Bim818Xf.js";
+import { a as t, o as n, r, s as i } from "./components-CSWXogKF.js";
 import { t as a } from "./enums-De8CDKZ1.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-Z3cdtFBu.js → wt-vidstack-player-CC6dwrnv.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-Bim818Xf.js";
+import { w as e } from "./components-CSWXogKF.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-De8CDKZ1.js";
 import "./wt-button-dC4nOW56.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.96",
+	"version": "26.6.97",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/components/wt-datepicker/_internals/composables/useAutoSeparator.ts

@@ -0,0 +1,96 @@
+/**
+ * @author @HlukhovYe
+ *
+ * Automatically inserts date/time separators while the user types into the
+ * PrimeVue DatePicker input so they don't have to type '/' or ':' manually.
+ *
+ * Format without time: dd/mm/yyyy       → inserts '/' after positions 2 and 5
+ * Format with time:    dd/mm/yyyy hh:mm → also inserts ' ' after position 10
+ *                                          and ':' after position 13
+ *
+ * The handler runs in the bubble phase (after PrimeVue's own input handler).
+ * Listener registration is handled by useDatepicker.
+ */
+export function createAutoSeparatorHandler(showTime: () => boolean) {
+	const DATE_SEPARATORS: Array<{
+		afterPos: number;
+		sep: string;
+	}> = [
+		{
+			afterPos: 2,
+			sep: '/',
+		}, // dd → dd/
+		{
+			afterPos: 5,
+			sep: '/',
+		}, // mm → mm/
+	];
+
+	const TIME_SEPARATORS: Array<{
+		afterPos: number;
+		sep: string;
+	}> = [
+		{
+			afterPos: 10,
+			sep: ' ',
+		}, // yyyy → yyyy<space>
+		{
+			afterPos: 13,
+			sep: ':',
+		}, // hh → hh:
+	];
+
+	let lastLength = 0;
+	let injecting = false;
+
+	function onInputBubble(event: Event) {
+		if (injecting) return;
+		const input = event.target as HTMLInputElement;
+		const value = input.value;
+		const cursor = input.selectionStart ?? value.length;
+		const currentLength = value.length;
+
+		const isDeleting = currentLength < lastLength;
+		lastLength = currentLength;
+		if (isDeleting) return;
+
+		const separators = showTime()
+			? [
+					...DATE_SEPARATORS,
+					...TIME_SEPARATORS,
+				]
+			: DATE_SEPARATORS;
+
+		// Find the first separator position the cursor has reached or passed
+		// where the separator character is missing. Covers two cases:
+		//   1. Normal typing: cursor === afterPos (just finished a segment).
+		//   2. Separator was deleted then user typed next digit: cursor > afterPos
+		//      but value[afterPos] is a digit instead of the separator.
+		for (const { afterPos, sep } of separators) {
+			if (cursor < afterPos) break;
+			if (value[afterPos] === sep) continue;
+			const newValue = value.slice(0, afterPos) + sep + value.slice(afterPos);
+			input.value = newValue;
+			lastLength = newValue.length;
+			const newCursor = cursor + sep.length;
+			input.setSelectionRange(newCursor, newCursor);
+			injecting = true;
+			input.dispatchEvent(
+				new Event('input', {
+					bubbles: true,
+				}),
+			);
+			injecting = false;
+			break;
+		}
+	}
+
+	function resetLength(input: HTMLInputElement) {
+		lastLength = input.value.length;
+	}
+
+	return {
+		onInputBubble,
+		resetLength,
+	};
+}

package/src/components/wt-datepicker/_internals/composables/useDatepicker.ts

@@ -0,0 +1,78 @@
+import { onMounted, onUnmounted } from 'vue';
+import { createAutoSeparatorHandler } from './useAutoSeparator';
+import { useOverlayAnchor } from './useOverlayAnchor';
+import { createPreventZeroPadHandlers } from './usePreventZeroPad';
+import { useRestoreOnBlur } from './useRestoreOnBlur';
+import { createStrictInputHandler } from './useStrictInput';
+
+/**
+ * @author @HlukhovYe
+ *
+ * Single composable entry point for wt-datepicker. Composes all input-handling
+ * and overlay logic into a minimal set of DOM listeners — one capture input,
+ * one bubble input, one keydown — so the browser dispatches each event once.
+ *
+ * Returns:
+ *   onBlur      — forward to p-datepicker's @blur
+ *   lockOverlay / unlockOverlay — forward to onPanelShow / onPanelHide
+ */
+export function useDatepicker(
+	getInput: () => HTMLInputElement | null,
+	getDatepicker: () => {
+		rawValue: Date | null;
+		updateModel: (v: Date) => void;
+	} | null,
+	showTime: () => boolean,
+	isClearable: () => boolean,
+) {
+	const { onInputCapture: zeroPadCapture, onInputBubble: zeroPadBubble } =
+		createPreventZeroPadHandlers();
+
+	const { onInputBubble: separatorBubble, resetLength } =
+		createAutoSeparatorHandler(showTime);
+
+	const { onKeydown } = createStrictInputHandler(showTime);
+
+	const { lock: lockOverlay, unlock: unlockOverlay } = useOverlayAnchor();
+
+	const { onBlur } = useRestoreOnBlur(getDatepicker, isClearable);
+
+	function onInputCaptureHandler(event: Event) {
+		zeroPadCapture(event);
+	}
+
+	function onInputBubbleHandler(event: Event) {
+		// Zero-pad handler runs first: it may stop propagation if it restores a
+		// partial value, which also prevents the separator handler from seeing a
+		// half-formed string and injecting a separator too early.
+		zeroPadBubble(event);
+		separatorBubble(event);
+	}
+
+	onMounted(() => {
+		const input = getInput();
+		if (!input) return;
+		resetLength(input);
+		input.addEventListener('input', onInputCaptureHandler, {
+			capture: true,
+		});
+		input.addEventListener('input', onInputBubbleHandler);
+		input.addEventListener('keydown', onKeydown);
+	});
+
+	onUnmounted(() => {
+		const input = getInput();
+		if (!input) return;
+		input.removeEventListener('input', onInputCaptureHandler, {
+			capture: true,
+		});
+		input.removeEventListener('input', onInputBubbleHandler);
+		input.removeEventListener('keydown', onKeydown);
+	});
+
+	return {
+		onBlur,
+		lockOverlay,
+		unlockOverlay,
+	};
+}