@webitel/ui-sdk 26.6.95 → 26.6.97

package/dist/{wt-timepicker-Bxdc4s3_.js → wt-timepicker-CYNrvbWf.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t, r as n } from "./enums-De8CDKZ1.js";
 import { t as r } from "./vue-i18n-Db_oYfO8.js";
-import { t as i } from "./useValidation-BedhHNX5.js";
+import { t as i } from "./useValidation-lRiKF7xV.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, defineComponent as d, guardReactiveProps as f, mergeProps as p, nextTick as m, normalizeClass as h, normalizeProps as g, openBlock as _, renderSlot as v, resolveComponent as y, toDisplayString as b, toRefs as x, unref as S, withCtx as C } from "vue";
 //#region src/components/wt-timepicker/wt-timepicker.vue?vue&type=script&setup=true&lang.ts
 var w = { class: "wt-timepicker__wrapper" }, T = 3600, E = 60, D = /*#__PURE__*/ e(/* @__PURE__ */ d({

package/dist/{wt-tree-table-2K7cdct7.js → wt-tree-table-umRsVKWt.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { n as t } from "./sortQueryAdapters-CyYXvnDN.js";
-import { n, t as r } from "./wt-icon-btn-BIU9YjS8.js";
+import { n, t as r } from "./wt-icon-btn-DYjjSl-C.js";
 import { t as i } from "./useWtTable-D_PxqVHO.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, normalizeClass as h, normalizeStyle as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveComponent as S, toDisplayString as C, toRef as w, unref as T, withCtx as E, withModifiers as D } from "vue";
 //#region src/components/wt-tree-table-row/wt-tree-table-row.vue?vue&type=script&setup=true&lang.ts

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

@@ -1,5 +1,5 @@
-import { t as e } from "./clients-Bj07uFky.js";
-import { a as t, o as n, r, s as i } from "./components-l3RJbNmv.js";
+import { t as e } from "./clients-Ban2DI-G.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-BaH2oaMr.js → wt-vidstack-player-CC6dwrnv.js}

@@ -1,11 +1,11 @@
-import { w as e } from "./components-l3RJbNmv.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";
-import { t as r } from "./wt-icon-btn-BIU9YjS8.js";
+import { t as r } from "./wt-icon-btn-DYjjSl-C.js";
 import { $ as i, C as a, D as o, F as s, G as c, H as l, I as u, J as d, K as f, L as p, M as m, N as h, O as ee, P as te, Q as g, R as ne, S as _, U as re, V as v, W as y, X as b, Y as ie, Z as x, _ as S, a as ae, b as oe, c as se, d as ce, et as le, f as ue, g as de, h as fe, i as C, it as pe, j as me, k as he, l as w, m as ge, n as T, nt as E, o as D, ot as _e, p as O, q as k, r as A, rt as ve, t as ye, tt as be, u as xe, v as j, w as Se, y as Ce, z as we } from "./vidstack-D9mvYVIz-DesuYgKV.js";
 import { _ as M, a as Te, c as Ee, d as De, f as Oe, g as ke, h as Ae, i as je, l as Me, m as Ne, n as Pe, o as Fe, p as Ie, r as Le, s as Re, t as N, u as ze } from "./vidstack-CgfrU1hS-CNTJkyzm.js";
-import { _ as Be, a as Ve, c as He, f as Ue, g as We, h as Ge, i as Ke, l as qe, n as Je, r as Ye, s as Xe, t as Ze, u as Qe, v as $e, x as et, y as tt } from "./useVidstackSrc-epUQZhkL.js";
+import { _ as Be, a as Ve, c as He, f as Ue, g as We, h as Ge, i as Ke, l as qe, n as Je, r as Ye, s as Xe, t as Ze, u as Qe, v as $e, x as et, y as tt } from "./useVidstackSrc-B4mUti_c.js";
 import { i as nt, n as rt } from "./vidstack-mvRkf9tF-CoFf7dS9.js";
 import { t as P } from "./vidstack-ijoHbXQB-DBClSWHE.js";
 import { n as it, r as F, t as at } from "./vidstack-CZQo98ic-D3uTuzB9.js";
@@ -1297,7 +1297,7 @@ var Sn = class extends pn {
 		return "audio";
 	}
 	async load(e) {
-		return new (await (import("./vidstack-audio-CH4wIf0F.js"))).AudioProvider(this.target, e);
+		return new (await (import("./vidstack-audio-BCPraiiR.js"))).AudioProvider(this.target, e);
 	}
 }, wn = class {
 	name = "video";
@@ -1309,7 +1309,7 @@ var Sn = class extends pn {
 		return "video";
 	}
 	async load(e) {
-		return new (await (import("./vidstack-video-iy3-Vo1A.js"))).VideoProvider(this.target, e);
+		return new (await (import("./vidstack-video-DwlbGwN7.js"))).VideoProvider(this.target, e);
 	}
 }, Tn = class e extends wn {
 	static supported = tt();
@@ -1318,7 +1318,7 @@ var Sn = class extends pn {
 		return e.supported && $e(t);
 	}
 	async load(e) {
-		return new (await (import("./vidstack-hls-D1sxUvBd.js"))).HLSProvider(this.target, e);
+		return new (await (import("./vidstack-hls-BbZsbfaO.js"))).HLSProvider(this.target, e);
 	}
 }, En = class e extends wn {
 	static supported = Be();
@@ -1327,7 +1327,7 @@ var Sn = class extends pn {
 		return e.supported && We(t);
 	}
 	async load(e) {
-		return new (await (import("./vidstack-dash-CmlmZIFT.js"))).DASHProvider(this.target, e);
+		return new (await (import("./vidstack-dash-MBx5aEEA.js"))).DASHProvider(this.target, e);
 	}
 }, Dn = class {
 	name = "vimeo";
@@ -1748,7 +1748,7 @@ var Sn = class extends pn {
 				throw e.code = "CAST_NOT_AVAILABLE", e;
 			}
 			if (nt("https://www.gstatic.com"), !this.#b) {
-				let e = await import("./vidstack-DUnfBERX2-Cl6yTfB3.js");
+				let e = await import("./vidstack-DUnfBERX2-BJtKHFxc.js");
 				this.#b = new e.GoogleCastLoader();
 			}
 			await this.#b.prompt(this.#n), e && this.#t.queue.enqueue("media-google-cast-request", e);
@@ -7366,7 +7366,7 @@ var Bo = { class: "controls-group__actions" }, Vo = /*#__PURE__*/ t(/* @__PURE__
 			})) : vt("", !0)
 		])], 2));
 	}
-}), [["__scopeId", "data-v-b860ca5f"]]), Jo = { class: "video-display-panel-wrapper" }, Yo = { class: "video-layout-content" }, Xo = { class: "video-layout-controls" }, Zo = /*#__PURE__*/ t(/* @__PURE__ */ xt({
+}), [["__scopeId", "data-v-b3831d88"]]), Jo = { class: "video-display-panel-wrapper" }, Yo = { class: "video-layout-content" }, Xo = { class: "video-layout-controls" }, Zo = /*#__PURE__*/ t(/* @__PURE__ */ xt({
 	__name: "video-layout",
 	props: {
 		title: {},
@@ -7456,7 +7456,7 @@ var Bo = { class: "controls-group__actions" }, Vo = /*#__PURE__*/ t(/* @__PURE__
 			_: 1
 		}));
 	}
-}), [["__scopeId", "data-v-9d70f28d"]]), rs = [
+}), [["__scopeId", "data-v-a6b8fc46"]]), rs = [
 	"autoplay",
 	"muted",
 	"src"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.6.95",
+	"version": "26.6.97",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -22,7 +22,8 @@
 		"utils:i": "npm install",
 		"prepare": "husky || true",
 		"test:unit:ci": "npm run test:coverage",
-		"typecheck:ci": "true"
+		"typecheck": "vue-tsc --noEmit -p ./tsconfig.json",
+		"typecheck:ci": "npm run typecheck"
 	},
 	"workspaces": [
 		"./packages/api-services",

package/src/api/clients/wtTypes/_shared/utils/sortDynamicFields.ts

@@ -1,15 +1,29 @@
 import deepCopy from 'deep-copy';
-import type { WebitelProtoDataStruct } from 'webitel-sdk';
+import type {
+	WebitelProtoDataField,
+	WebitelProtoDataStruct,
+} from 'webitel-sdk';
+
+/**
+ * TODO(types): `position` is returned by the API to order dynamic fields but is
+ * absent from the generated `WebitelProtoDataField` type. Extend locally until
+ * the generated SDK type includes it.
+ */
+type PositionedDataField = WebitelProtoDataField & {
+	position?: number;
+};
 
 export const sortDynamicFields = (
 	item: WebitelProtoDataStruct,
 ): WebitelProtoDataStruct => {
-	const unSortableFields = item.fields.filter((field) => !field.position);
+	const sourceFields = (item.fields ?? []) as PositionedDataField[];
+
+	const unSortableFields = sourceFields.filter((field) => !field.position);
 
-	const sortableFields = deepCopy(item.fields)
+	const sortableFields = deepCopy(sourceFields)
 		.filter((field) => field.position)
 		.sort((a, b) => {
-			return a.position - b.position;
+			return (a.position ?? 0) - (b.position ?? 0);
 		});
 
 	const fields = [

package/src/api/types/ApiModule.d.ts

@@ -10,15 +10,34 @@ export interface ApiModule<Entity> {
 		items?: Entity[];
 		next?: boolean;
 	}>;
-	get?: ({ itemId }: { itemId: Id }) => Promise<Entity>;
-	add?: ({ itemInstance }: { itemInstance?: Entity }) => Promise<Entity>;
-	update?: ({
-		itemId,
-		itemInstance,
-	}: {
-		itemId: Id;
+	get?: (params: {
+		itemId?: Id;
+		/** preferred over itemId */
+		id?: Id;
+		parentId?: Id | null;
+	}) => Promise<Entity>;
+	add?: (params: {
+		itemInstance?: Entity;
+		parentId?: Id | null;
+	}) => Promise<Entity>;
+	update?: (params: {
+		itemId?: Id | null;
+		id?: Id;
 		itemInstance?: Entity;
+		parentId?: Id | null;
+		etag?: string;
+	}) => Promise<Entity>;
+	patch?: (params: {
+		id?: Id;
+		itemId?: Id | null;
+		changes?: Partial<Entity>;
+		parentId?: Id | null;
+		etag?: string;
 	}) => Promise<Entity>;
-	patch?: ({ id, changes }: { id?: Id; changes?: Entity }) => Promise<Entity>;
-	delete?: ({ itemId }: { itemId: Id }) => Promise<void>;
+	delete?: (params: {
+		itemId?: Id;
+		id?: Id;
+		parentId?: Id | null;
+		etag?: string;
+	}) => Promise<void>;
 }

package/src/components/_internals/composables/useGalleriaFullscreen/useGalleriaFullscreen.ts

@@ -1,5 +1,18 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 
+/** Vendor-prefixed fullscreen APIs not present on the standard DOM lib types. */
+interface FullscreenElement extends Element {
+	mozRequestFullScreen?: () => Promise<void>;
+	webkitRequestFullscreen?: () => Promise<void>;
+	msRequestFullscreen?: () => Promise<void>;
+}
+
+interface FullscreenDocument extends Document {
+	mozCancelFullScreen?: () => Promise<void>;
+	webkitExitFullscreen?: () => Promise<void>;
+	msExitFullscreen?: () => Promise<void>;
+}
+
 export const useGalleriaFullscreen = () => {
 	const fullScreen = ref(false);
 	const toggleFullScreen = () => {
@@ -13,7 +26,9 @@ export const useGalleriaFullscreen = () => {
 		fullScreen.value = !fullScreen.value;
 	};
 	const openFullScreen = () => {
-		const element = document.querySelector('.p-galleria');
+		const element = document.querySelector<Element>(
+			'.p-galleria',
+		) as FullscreenElement;
 		if (element.requestFullscreen) {
 			element.requestFullscreen();
 		} else if (element.mozRequestFullScreen) {
@@ -28,14 +43,15 @@ export const useGalleriaFullscreen = () => {
 		}
 	};
 	const closeFullScreen = () => {
-		if (document.exitFullscreen) {
-			document.exitFullscreen();
-		} else if (document.mozCancelFullScreen) {
-			document.mozCancelFullScreen();
-		} else if (document.webkitExitFullscreen) {
-			document.webkitExitFullscreen();
-		} else if (document.msExitFullscreen) {
-			document.msExitFullscreen();
+		const doc = document as FullscreenDocument;
+		if (doc.exitFullscreen) {
+			doc.exitFullscreen();
+		} else if (doc.mozCancelFullScreen) {
+			doc.mozCancelFullScreen();
+		} else if (doc.webkitExitFullscreen) {
+			doc.webkitExitFullscreen();
+		} else if (doc.msExitFullscreen) {
+			doc.msExitFullscreen();
 		}
 	};
 	const bindDocumentListeners = () => {

package/src/components/_internals/composables/useSelect/useSelect.ts

@@ -11,14 +11,15 @@ export const useSelect = ({
 	optionValue,
 	dataKey,
 	allowCustomValues,
-	manualCustomValues = false,
+	// accepted for API compatibility; custom-value manual handling is currently disabled
+	manualCustomValues: _manualCustomValues = false,
 	filterInput,
 	selectRef,
 	searchMethod,
 	selectId,
 	isSingle,
 	strictApiOptions = undefined,
-	emit = () => {},
+	emit = (_event: string, ..._args: unknown[]) => {},
 }) => {
 	const {
 		filterText,
@@ -71,16 +72,13 @@ export const useSelect = ({
 		selected,
 		filteredOptions,
 		options,
-		optionValue,
 		dataKey,
 		filterText,
 		filterOptions: filterOptionsAndScrollToTop,
 		updateSelectedOptionsCache,
 		selectRef,
 		allowCustomValues,
-		manualCustomValues,
 		isSingle,
-		emit,
 	});
 
 	onMounted(async () => {

package/src/components/_internals/composables/useSelect/useSelectCustomValues.ts

@@ -5,16 +5,13 @@ export const useSelectCustomValues = ({
 	selected,
 	filteredOptions,
 	options,
-	optionValue,
 	dataKey,
 	filterText,
 	filterOptions,
 	updateSelectedOptionsCache,
 	selectRef,
 	allowCustomValues,
-	manualCustomValues,
 	isSingle,
-	emit,
 }) => {
 	const makeCustomOption = (text: string) => {
 		const sample = options.value.length

package/src/components/_internals/composables/useSelect/useSelectOptions.ts

@@ -75,7 +75,12 @@ export const useSelectOptions = ({
 		if (optionLabel.value && option[optionLabel.value])
 			return option[optionLabel.value];
 		if (option.locale) {
-			if (Array.isArray(option.locale)) return t(...option.locale);
+			if (Array.isArray(option.locale))
+				return t(
+					...(option.locale as [
+						string,
+					]),
+				);
 			return t(option.locale);
 		}
 		return option[defaultOptionLabel] || option;
@@ -213,7 +218,7 @@ export const useSelectOptions = ({
 
 	watch(
 		() => selected.value,
-		(newVal, oldVal) => {
+		(newVal) => {
 			updateSelectedOptionsCache();
 			addSelectedValueToList(newVal);
 		},

package/src/components/_internals/composables/useWtTable/useWtTable.ts

@@ -1,7 +1,7 @@
 import { computed, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { WtTableHeader } from '../../wt-table/types/WtTable';
+import type { WtTableHeader } from '../../../wt-table/types/WtTable';
 
 export const useWtTable = ({ headers }) => {
 	const { t } = useI18n();

package/src/components/wt-badge-new/types/WtBadge.d.ts

@@ -0,0 +1,12 @@
+export type BadgeSeverity =
+	| 'secondary'
+	| 'info'
+	| 'success'
+	| 'warn'
+	| 'error'
+	| 'online'
+	| 'dnd'
+	| 'busy'
+	| 'pause'
+	| 'onlineCc'
+	| 'offline';

package/src/components/wt-badge-new/wt-badge.vue

@@ -13,21 +13,11 @@
 
 <script setup lang="ts">
 import { ComponentSize } from '../../enums';
+import type { BadgeSeverity } from './types/WtBadge';
 
 interface Props {
 	value: string | number;
-	severity?:
-		| 'secondary'
-		| 'info'
-		| 'success'
-		| 'warn'
-		| 'error'
-		| 'online'
-		| 'dnd'
-		| 'busy'
-		| 'pause'
-		| 'onlineCc'
-		| 'offline';
+	severity?: BadgeSeverity;
 	size?: ComponentSize;
 }
 

package/src/components/wt-button/wt-button.vue

@@ -57,6 +57,7 @@ import type { ButtonProps } from 'primevue';
 import { computed, inject, ref, toRef, useAttrs, watch } from 'vue';
 
 import { ButtonColor, ButtonVariant, ComponentSize } from '../../enums';
+import type { BadgeSeverity } from '../wt-badge-new/types/WtBadge';
 import WtBadge from '../wt-badge-new/wt-badge.vue';
 import WtIcon from '../wt-icon/wt-icon.vue';
 
@@ -82,7 +83,7 @@ interface WtButtonProps extends /* @vue-ignore */ ButtonProps {
 	icon?: string;
 	iconPrefix?: string;
 	badge?: string;
-	badgeSeverity?: string;
+	badgeSeverity?: BadgeSeverity;
 	badgeAbsolutePosition?: boolean;
 	variant?: ButtonVariant;
 }

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,
+	};
+}

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

@@ -1,5 +1,3 @@
-import { onMounted, onUnmounted } from 'vue';
-
 /**
  * @author @HlukhovYe
  *
@@ -9,12 +7,13 @@ import { onMounted, onUnmounted } from 'vue';
  * is mid-typing. Without this, typing "2" into a cleared two-digit slot immediately
  * reformats to "02", forcing the user to delete the leading zero before the second digit.
  *
- * Works by registering two listeners on the same input event:
- * - capture phase (before PrimeVue): snapshots the partial single-digit value
- * - bubble phase (after PrimeVue): if PrimeVue zero-padded the value, restores the
- *   snapshot and cancels further propagation so the model is not updated yet
+ * Capture handler (before PrimeVue): snapshots the partial single-digit value.
+ * Bubble handler (after PrimeVue): if PrimeVue zero-padded the value, restores the
+ * snapshot and cancels further propagation so the model is not updated yet.
+ *
+ * Listener registration is handled by useDatepicker.
  */
-export function usePreventZeroPad(getInput: () => HTMLInputElement | null) {
+export function createPreventZeroPadHandlers() {
 	let pendingPartial: {
 		value: string;
 		cursor: number;
@@ -52,21 +51,8 @@ export function usePreventZeroPad(getInput: () => HTMLInputElement | null) {
 		}
 	}
 
-	onMounted(() => {
-		const input = getInput();
-		if (!input) return;
-		input.addEventListener('input', onInputCapture, {
-			capture: true,
-		});
-		input.addEventListener('input', onInputBubble);
-	});
-
-	onUnmounted(() => {
-		const input = getInput();
-		if (!input) return;
-		input.removeEventListener('input', onInputCapture, {
-			capture: true,
-		});
-		input.removeEventListener('input', onInputBubble);
-	});
+	return {
+		onInputCapture,
+		onInputBubble,
+	};
 }