@webitel/ui-sdk 26.8.21 → 26.8.22

package/src/api/clients/wtTypes/typeExtensions/typeExtensions.ts

@@ -1,5 +1,4 @@
 import { ExtensionsApiFactory, type WebitelProtoDataStruct } from 'webitel-sdk';
-
 import { getDefaultInstance, getDefaultOpenAPIConfig } from '../../../defaults';
 import applyTransform, {
 	camelToSnake,
@@ -7,6 +6,7 @@ import applyTransform, {
 	sanitize,
 	snakeToCamel,
 } from '../../../transformers';
+import type { ApiParams } from '../../_shared/types';
 import { sortDynamicFields } from '../_shared/utils/sortDynamicFields';
 
 const instance = getDefaultInstance();
@@ -25,16 +25,16 @@ const generateIdsFromRepos = (item: WebitelProtoDataStruct) => ({
 	id: item.repo,
 });
 
-const getTypeExtension = async ({ itemId: typeRepo }) => {
+const getTypeExtension = async ({ itemId: typeRepo }: { itemId: string }) => {
 	const createPositionGenerator = () => {
 		let position = 1;
-		return (item) => (item.readonly ? null : position++);
+		return (item: ApiParams) => (item.readonly ? null : position++);
 	};
 	const getPosition = createPositionGenerator();
 
-	const itemResponseHandler = (item) => ({
+	const itemResponseHandler = (item: ApiParams) => ({
 		...item,
-		fields: item.fields.map((field) => ({
+		fields: item.fields.map((field: ApiParams) => ({
 			...field,
 			position: getPosition(field),
 		})),
@@ -57,7 +57,13 @@ const getTypeExtension = async ({ itemId: typeRepo }) => {
 	}
 };
 
-const addTypeExtension = async ({ itemInstance, itemId: typeRepo }) => {
+const addTypeExtension = async ({
+	itemInstance,
+	itemId: typeRepo,
+}: {
+	itemInstance: ApiParams;
+	itemId: string;
+}) => {
 	const item = applyTransform(itemInstance, [
 		sortDynamicFields,
 		camelToSnake(),
@@ -76,9 +82,15 @@ const addTypeExtension = async ({ itemInstance, itemId: typeRepo }) => {
 	}
 };
 
-const deleteTypeExtension = async ({ itemId: typeRepo }) => {
+const deleteTypeExtension = async ({
+	itemId: typeRepo,
+}: {
+	itemId: string;
+}) => {
 	try {
-		await typeExtensionsService.deleteType(typeRepo);
+		await typeExtensionsService.deleteType([
+			typeRepo,
+		]);
 	} catch (err) {
 		throw applyTransform(err, [
 			notify,
@@ -86,7 +98,13 @@ const deleteTypeExtension = async ({ itemId: typeRepo }) => {
 	}
 };
 
-const updateTypeExtension = async ({ itemInstance, itemId: typeRepo }) => {
+const updateTypeExtension = async ({
+	itemInstance,
+	itemId: typeRepo,
+}: {
+	itemInstance: ApiParams;
+	itemId: string;
+}) => {
 	if (!itemInstance.fields.length && itemInstance.isNew) {
 		return itemInstance;
 	}

package/src/api/websocket/WebSocketClientController.ts

@@ -1,4 +1,4 @@
-import { shallowReactive } from 'vue';
+import { type ShallowReactive, shallowReactive } from 'vue';
 import { Client } from 'webitel-sdk';
 
 import eventBus from '../../scripts/eventBus';
@@ -6,12 +6,17 @@ import { endpoint, getConfig } from './config';
 import { WebSocketClientEvent } from './enums/WebSocketClientEvent';
 import websocketErrorEventHandler from './websocketErrorEventHandler';
 
+type CliInstance = ShallowReactive<Client>;
+
+// biome-ignore lint/suspicious/noExplicitAny: listener payloads differ per event
+type WebSocketEventCallback = (...payload: any[]) => unknown;
+
 class WebSocketClientController {
-	cli = null;
+	cli: Promise<CliInstance> | null = null;
 	Event = WebSocketClientEvent;
 
 	_config = getConfig();
-	_on = {
+	_on: Record<WebSocketClientEvent, WebSocketEventCallback[]> = {
 		[WebSocketClientEvent.ERROR]: [
 			websocketErrorEventHandler,
 		],
@@ -31,7 +36,10 @@ class WebSocketClientController {
 		window.cli = null;
 	}
 
-	addEventListener(event, callback) {
+	addEventListener(
+		event: WebSocketClientEvent,
+		callback: WebSocketEventCallback | WebSocketEventCallback[],
+	) {
 		if (Array.isArray(callback))
 			this._on[event] = this._on[event].concat(callback);
 		else this._on[event].push(callback);
@@ -43,7 +51,7 @@ class WebSocketClientController {
 
 		const config = {
 			endpoint,
-			token,
+			token: token ?? undefined,
 			registerWebDevice: configCli.registerWebDevice,
 			debug: configCli.debug,
 		};

package/src/api/websocket/{config.js → config.ts}

@@ -1,7 +1,9 @@
-export const getConfig = () => {
-	let cliConfig = {};
+import type { Config } from 'webitel-sdk';
+
+export const getConfig = (): Partial<Config> => {
+	let cliConfig: Partial<Config> = {};
 	try {
-		const CONFIG = JSON.parse(localStorage.getItem('CONFIG'));
+		const CONFIG = JSON.parse(localStorage.getItem('CONFIG') as string);
 		cliConfig = CONFIG.CLI || {};
 	} catch {}
 	return cliConfig;

package/src/api/websocket/websocketErrorEventHandler.ts

@@ -1,7 +1,7 @@
 import i18n from '../../locale/i18n.js';
 import eventBus from '../../scripts/eventBus.js';
 
-const websocketErrorEventHandler = (error) => {
+const websocketErrorEventHandler = (error: { id?: string }) => {
 	const errLocale = `error.websocket.${error.id?.replaceAll('.', '_')}`;
 	const message = {
 		type: 'error',

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

@@ -1,6 +1,11 @@
 import { type Ref, ref, watch } from 'vue';
 
-export function useExpansion(collapsed: Ref<boolean>, emit?) {
+interface ExpansionEmit {
+	(event: 'opened'): void;
+	(event: 'closed'): void;
+}
+
+export function useExpansion(collapsed: Ref<boolean>, emit?: ExpansionEmit) {
 	const opened = ref<boolean>(!collapsed.value);
 
 	function open(): void {

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

@@ -1,7 +1,9 @@
+import type { Ref } from 'vue';
+
 // primevue's galleria doesn't support hiding on mask click so there is a custom solution
-export const useGalleriaMaskClick = (visible) => {
-	const onMaskClick = ({ target }) => {
-		if (target.classList.contains('p-galleria-mask')) {
+export const useGalleriaMaskClick = (visible: Ref<boolean>) => {
+	const onMaskClick = ({ target }: Event) => {
+		if ((target as HTMLElement)?.classList.contains('p-galleria-mask')) {
 			visible.value = false;
 		}
 	};

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

@@ -1,6 +1,8 @@
-import { computed } from 'vue';
+import { computed, type Ref } from 'vue';
 
-export const useInputControl = (input) => {
+import type { PrimevueInstance } from '../../types/PrimevueInstance';
+
+export const useInputControl = (input: Ref<PrimevueInstance | undefined>) => {
 	// inputnumber has span wrapper while inputtext hasnt
 	const inputEl = computed(() => {
 		if (input.value?.$el instanceof HTMLInputElement) {
@@ -19,7 +21,7 @@ export const useInputControl = (input) => {
 	};
 
 	// prevent double triggering
-	const handleKeyup = (e) => e.stopPropagation();
+	const handleKeyup = (e: Event) => e.stopPropagation();
 
 	return {
 		focus,

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

@@ -0,0 +1,69 @@
+import type { Ref } from 'vue';
+
+import type { PrimevueOverlayInstance } from '../../types/PrimevueInstance';
+
+/** TODO(types): options are indexed by the runtime `dataKey`/`optionLabel`/`optionValue` keys. */
+// biome-ignore lint/suspicious/noExplicitAny: see TODO above
+export type SelectOption = any;
+
+export type SelectValue = SelectOption | SelectOption[] | null | undefined;
+
+export interface SelectSearchResponse {
+	items: SelectOption[];
+	next?: boolean;
+}
+
+export type SelectSearchMethod = (
+	// biome-ignore lint/suspicious/noExplicitAny: consumers declare their own param shapes
+	...params: any[]
+) => Promise<SelectSearchResponse>;
+
+export type SelectComponentRef = PrimevueOverlayInstance;
+
+export interface UseSelectOptionsParams {
+	selected: Ref<SelectValue>;
+	options: Ref<SelectOption[]>;
+	optionLabel: Ref<string | undefined>;
+	optionValue?: Ref<string | undefined>;
+	dataKey: Ref<string>;
+	allowCustomValues: Ref<boolean>;
+	searchMethod: Ref<SelectSearchMethod | undefined>;
+	strictApiOptions?: Ref<boolean | undefined>;
+}
+
+export interface UseSelectDropdownParams {
+	selectId: Ref<string>;
+	selectRef: Ref<SelectComponentRef | undefined>;
+	filterInput: Ref<HTMLInputElement | undefined>;
+	searchMethod: Ref<SelectSearchMethod | undefined>;
+	filteredOptions: Ref<SelectOption[]>;
+	filterText: Ref<string>;
+	filterOptions: (value: string) => void;
+	resetAndFetch: (search?: string) => void;
+	sortOptions: (opts: SelectOption[]) => SelectOption[];
+	fetchOptions: () => void;
+	isLoading: Ref<boolean>;
+	searchHasNext: Ref<boolean>;
+}
+
+export interface UseSelectCustomValuesParams {
+	selected: Ref<SelectValue>;
+	filteredOptions: Ref<SelectOption[]>;
+	options: Ref<SelectOption[]>;
+	dataKey: Ref<string>;
+	filterText: Ref<string>;
+	filterOptions: (value: string) => void;
+	updateSelectedOptionsCache: () => void;
+	selectRef: Ref<SelectComponentRef | undefined>;
+	allowCustomValues: Ref<boolean>;
+	isSingle: boolean;
+}
+
+export interface UseSelectParams
+	extends UseSelectOptionsParams,
+		Pick<UseSelectDropdownParams, 'selectId' | 'selectRef' | 'filterInput'> {
+	manualCustomValues?: boolean;
+	isSingle: boolean;
+	// biome-ignore lint/suspicious/noExplicitAny: receives the component's typed emit
+	emit?: (event: any, ...args: any[]) => void;
+}

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

@@ -1,4 +1,5 @@
 import { onMounted } from 'vue';
+import type { UseSelectParams } from './types';
 import { useSelectCustomValues } from './useSelectCustomValues';
 import { useSelectDropdown } from './useSelectDropdown';
 import { useSelectLoader } from './useSelectLoader';
@@ -19,8 +20,9 @@ export const useSelect = ({
 	selectId,
 	isSingle,
 	strictApiOptions = undefined,
-	emit = (_event: string, ..._args: unknown[]) => {},
-}) => {
+	// biome-ignore lint/suspicious/noExplicitAny: receives the component's typed emit
+	emit = (_event: any, ..._args: any[]) => {},
+}: UseSelectParams) => {
 	const {
 		filterText,
 		filteredOptions,

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

@@ -1,4 +1,5 @@
 import { nextTick } from 'vue';
+import type { UseSelectCustomValuesParams } from './types';
 import { isOptionSelected, toArray } from './useSelectUtils';
 
 export const useSelectCustomValues = ({
@@ -12,7 +13,7 @@ export const useSelectCustomValues = ({
 	selectRef,
 	allowCustomValues,
 	isSingle,
-}) => {
+}: UseSelectCustomValuesParams) => {
 	const makeCustomOption = (text: string) => {
 		const sample = options.value.length
 			? options.value[0]
@@ -67,7 +68,7 @@ export const useSelectCustomValues = ({
 		}
 
 		if (isSingle) {
-			selectRef.value?.hide();
+			selectRef.value?.hide?.();
 			selected.value = customOption;
 		} else {
 			// redefine selected value instead of pushing element is for max-selected-labels prop correct work

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

@@ -1,4 +1,5 @@
 import { nextTick, ref, watch } from 'vue';
+import type { UseSelectDropdownParams } from './types';
 
 export const useSelectDropdown = ({
 	selectId,
@@ -13,7 +14,7 @@ export const useSelectDropdown = ({
 	fetchOptions,
 	isLoading,
 	searchHasNext,
-}) => {
+}: UseSelectDropdownParams) => {
 	const isDropdownOpen = ref(false);
 	let overlayResizeObserver: ResizeObserver | null = null;
 	let positionRafId: number | null = null;
@@ -74,7 +75,7 @@ export const useSelectDropdown = ({
 		const overlay = selectRef?.value?.overlay;
 		if (overlay) {
 			overlayResizeObserver = new ResizeObserver(() => {
-				selectRef.value?.alignOverlay();
+				selectRef.value?.alignOverlay?.();
 			});
 			overlayResizeObserver.observe(overlay);
 		}
@@ -97,7 +98,7 @@ export const useSelectDropdown = ({
 				if (rect.top !== lastTop || rect.left !== lastLeft) {
 					lastTop = rect.top;
 					lastLeft = rect.left;
-					selectRef.value?.alignOverlay();
+					selectRef.value?.alignOverlay?.();
 				}
 				positionRafId = requestAnimationFrame(poll);
 			};

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

@@ -1,6 +1,11 @@
 import { reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import debounce from '../../../../scripts/debounce';
+import type {
+	SelectOption,
+	SelectValue,
+	UseSelectOptionsParams,
+} from './types';
 import {
 	dedupeByKey,
 	filterOptionsBySearchValue,
@@ -17,7 +22,7 @@ export const useSelectOptions = ({
 	allowCustomValues,
 	searchMethod,
 	strictApiOptions,
-}) => {
+}: UseSelectOptionsParams) => {
 	const { t } = useI18n();
 	const defaultOptionLabel = 'name';
 	const filterText = ref('');
@@ -34,14 +39,14 @@ export const useSelectOptions = ({
 	  selected options first, then other options
 	  selected values that are not in the list are prepended as-is
 	*/
-	const sortOptions = (opts) => {
+	const sortOptions = (opts: SelectOption[]): SelectOption[] => {
 		const deduped = dedupeByKey(opts, dataKey.value);
 		if (!selected.value) return deduped;
 
 		const selectedAsArray = toArray(selected.value);
 
-		const selectedOptions = [];
-		const otherOptions = [];
+		const selectedOptions: SelectOption[] = [];
+		const otherOptions: SelectOption[] = [];
 
 		for (const option of deduped) {
 			const isSelected = isOptionSelected(
@@ -55,20 +60,21 @@ export const useSelectOptions = ({
 		return selectedOptions.concat(otherOptions);
 	};
 
-	const getOptionLabel = (option) => {
+	const getOptionLabel = (option: SelectOption): string => {
 		if (option === null || option === undefined) return '';
 		// https://webitel.atlassian.net/browse/WTEL-3181
 		// if allowCustomValue select mode, return label as is
 		if (allowCustomValues.value && option.isTag) return option.label;
 
 		// when optionValue is used PrimeVue passes the extracted primitive instead of the full object
-		if (optionValue?.value && typeof option !== 'object') {
+		const optionValueKey = optionValue?.value;
+		if (optionValueKey && typeof option !== 'object') {
 			const foundOption = (
 				[
 					...filteredOptions.value,
 					...selectedOptionsCache.value,
 				] as Record<string, unknown>[]
-			).find((o) => o[optionValue.value] === option);
+			).find((o) => o[optionValueKey] === option);
 			return foundOption ? getOptionLabel(foundOption) : String(option);
 		}
 
@@ -86,12 +92,12 @@ export const useSelectOptions = ({
 		return option[defaultOptionLabel] || option;
 	};
 
-	const filterBySearch = (opts, value) =>
+	const filterBySearch = (opts: SelectOption[], value: string) =>
 		filterOptionsBySearchValue(opts, value, getOptionLabel);
 
 	// Cache of full option objects for currently selected values,
 	// so they can be preserved in filteredOptions after filtering
-	const selectedOptionsCache = ref([]);
+	const selectedOptionsCache = ref<SelectOption[]>([]);
 
 	const updateSelectedOptionsCache = () => {
 		if (!selected.value) {
@@ -99,7 +105,7 @@ export const useSelectOptions = ({
 			return;
 		}
 		const selectedAsArray = toArray(selected.value);
-		const isSelected = (option) =>
+		const isSelected = (option: SelectOption) =>
 			isOptionSelected(option, selectedAsArray, dataKey.value);
 
 		// Find full option objects from filteredOptions that match selected values
@@ -157,7 +163,7 @@ export const useSelectOptions = ({
 				: filteredOptions.value.concat(items);
 		filteredOptions.value = sortOptions(baseOptions);
 		addSelectedValueToList(selected.value);
-		searchHasNext.value = next;
+		searchHasNext.value = next ?? false;
 		searchParams.page += 1;
 		isLoading.value = false;
 	};
@@ -168,9 +174,9 @@ export const useSelectOptions = ({
 		fetchOptions();
 	};
 
-	const debouncedFetch = debounce((value) => resetAndFetch(value));
+	const debouncedFetch = debounce((value: string) => resetAndFetch(value));
 
-	const filterOptionsBase = (value) => {
+	const filterOptionsBase = (value: string) => {
 		filterText.value = value;
 		if (!searchMethod.value) {
 			const matchingCached = filterBySearch(selectedOptionsCache.value, value);
@@ -189,7 +195,7 @@ export const useSelectOptions = ({
 		}
 	};
 
-	const addSelectedValueToList = (newVal) => {
+	const addSelectedValueToList = (newVal: SelectValue) => {
 		// If the selected value is not in the list, add it
 		if (!newVal || !searchMethod.value || strictApiOptions?.value) return;
 		const selectedAsArray = toArray(newVal);

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

@@ -1,4 +1,6 @@
-export const toArray = (value) =>
+import type { SelectOption, SelectValue } from './types';
+
+export const toArray = (value: SelectValue): SelectOption[] =>
 	Array.isArray(value)
 		? value
 		: value
@@ -10,9 +12,13 @@ export const toArray = (value) =>
 // Handles mixed comparisons: when optionValue is used, selected array contains
 // primitives while filteredOptions contains full objects, so we compare by dataKey
 // against the primitive directly instead of trying to read dataKey from both sides.
-export const isOptionSelected = (option, selectedArray, dataKey) => {
-	const isObj = (v) => v != null && typeof v === 'object';
-	return selectedArray.some((s) => {
+export const isOptionSelected = (
+	option: SelectOption,
+	selectedArray: SelectOption[],
+	dataKey: string,
+) => {
+	const isObj = (v: unknown): boolean => v != null && typeof v === 'object';
+	return selectedArray.some((s: SelectOption) => {
 		if (!dataKey) return s === option;
 		if (isObj(s) && isObj(option)) return s[dataKey] === option[dataKey]; // both objects
 		if (!isObj(s) && isObj(option)) return s === option[dataKey]; // s is primitive (optionValue)
@@ -21,7 +27,10 @@ export const isOptionSelected = (option, selectedArray, dataKey) => {
 	});
 };
 
-export const dedupeByKey = (items: unknown[], key: string): unknown[] => {
+export const dedupeByKey = (
+	items: SelectOption[],
+	key: string,
+): SelectOption[] => {
 	if (!key) {
 		// no dataKey — fall back to reference dedup via Set
 		return [
@@ -41,8 +50,12 @@ export const dedupeByKey = (items: unknown[], key: string): unknown[] => {
 	];
 };
 
-export const filterOptionsBySearchValue = (options, value, getOptionLabel) => {
-	return options.filter((option) =>
+export const filterOptionsBySearchValue = (
+	options: SelectOption[],
+	value: string,
+	getOptionLabel: (option: SelectOption) => string,
+) => {
+	return options.filter((option: SelectOption) =>
 		getOptionLabel(option).toLowerCase().includes(value.toLowerCase()),
 	);
 };

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

@@ -1,7 +1,14 @@
-export const useTableColumnDrag = (table, reorderableColumns) => {
-	let animationFrameId = null;
-	let containerEl = null;
-	let currentMouseX = null;
+import type { Ref } from 'vue';
+
+import type { PrimevueInstance } from '../../types/PrimevueInstance';
+
+export const useTableColumnDrag = (
+	table: Ref<PrimevueInstance | undefined>,
+	reorderableColumns: boolean,
+) => {
+	let animationFrameId: number | null = null;
+	let containerEl: HTMLElement | null = null;
+	let currentMouseX: number | null = null;
 	let isDragging = false;
 
 	const autoScroll = () => {
@@ -16,7 +23,7 @@ export const useTableColumnDrag = (table, reorderableColumns) => {
 		const distanceFromRight = rect.right - currentMouseX;
 
 		// Easing function for smooth acceleration (ease-in-out cubic)
-		const easeInOutCubic = (t) => {
+		const easeInOutCubic = (t: number) => {
 			return t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
 		};
 
@@ -46,13 +53,15 @@ export const useTableColumnDrag = (table, reorderableColumns) => {
 		}
 	};
 
-	const tableDragHandler = (event) => {
+	const tableDragHandler = (event: DragEvent) => {
+		if (!event.dataTransfer) return;
 		event.dataTransfer.effectAllowed = 'move';
-		const copyEl = event.target.cloneNode(true);
+		const target = event.target as HTMLElement;
+		const copyEl = target.cloneNode(true) as HTMLElement;
 		copyEl.style.position = 'absolute';
 		copyEl.style.top = '-9999px';
 		copyEl.style.background = 'var(--p-datatable-header-cell-drag-background)';
-		copyEl.style.width = `${event.target.offsetWidth}px`;
+		copyEl.style.width = `${target.offsetWidth}px`;
 		document.body.appendChild(copyEl);
 		event.dataTransfer.setDragImage(copyEl, event.offsetX, event.offsetY);
 		// Clean up after drag starts
@@ -63,13 +72,14 @@ export const useTableColumnDrag = (table, reorderableColumns) => {
 		// Initialize dragging state
 		isDragging = true;
 		if (!containerEl) {
-			containerEl = table.value?.$el?.querySelector(
-				'.p-datatable-table-container',
-			);
+			containerEl =
+				table.value?.$el?.querySelector<HTMLElement>(
+					'.p-datatable-table-container',
+				) ?? null;
 		}
 	};
 
-	const tableDragOverHandler = (event) => {
+	const tableDragOverHandler = (event: DragEvent) => {
 		// Update mouse position
 		currentMouseX = event.clientX;
 

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

@@ -1,9 +1,13 @@
-import { computed, unref } from 'vue';
+import { computed, type MaybeRef, unref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { WtTableHeader } from '../../../wt-table/types/WtTable';
 
-export const useWtTable = ({ headers }) => {
+export const useWtTable = ({
+	headers,
+}: {
+	headers: MaybeRef<WtTableHeader[] | undefined>;
+}) => {
 	const { t } = useI18n();
 
 	const tableHeaders = computed<WtTableHeader[]>(() => {

package/src/components/_internals/types/PrimevueInstance.ts

@@ -0,0 +1,15 @@
+/**
+ * The parts of a PrimeVue component instance the wt-* wrappers reach into.
+ * PrimeVue does not publish instance types, so the wrappers describe only what
+ * they actually drive.
+ */
+export interface PrimevueInstance {
+	$el?: HTMLElement;
+}
+
+/** A PrimeVue component that renders an overlay panel. */
+export interface PrimevueOverlayInstance extends PrimevueInstance {
+	overlay?: HTMLElement;
+	alignOverlay?: () => void;
+	hide?: () => void;
+}

package/src/components/_shared/settings-panel/components/speed-settings/speed-settings.vue

@@ -36,7 +36,7 @@
       :min="minSpeed"
       :max="maxSpeed"
       :step="speedStep"
-      @update:model-value="$emit('update:modelValue', $event)"
+      @update:model-value="onSliderInput"
     />
 
     <div class="speed-settings__presets">
@@ -79,6 +79,11 @@ const emit = defineEmits<{
 	];
 }>();
 
+/** wt-slider can emit `undefined` when its model is cleared */
+const onSliderInput = (value?: number) => {
+	if (value !== undefined) emit('update:modelValue', value);
+};
+
 const minSpeed = 0.25;
 const maxSpeed = 3;
 const speedStep = 0.25;

package/src/components/on-demand/wt-display-chip-items/wt-display-chip-items.vue

@@ -37,11 +37,16 @@ import { computed } from 'vue';
 
 import { displayText, EMPTY_SYMBOL } from '../../../utils';
 
+interface ChipItem {
+	id?: string;
+	name?: string;
+}
+
 interface Props {
 	hideFirstItem?: boolean;
 	useEmptySymbol?: boolean;
 	title?: string;
-	items: unknown[];
+	items: ChipItem[];
 }
 const props = defineProps<Props>();
 

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-1.vue

@@ -26,8 +26,6 @@
 </template>
 
 <script setup>
-import { defineEmits, defineProps } from 'vue';
-
 const props = defineProps({
 	categories: {
 		type: Array,

package/src/components/on-demand/wt-navigation-menu/components/_internals/nav-menu-lvl-2.vue

@@ -10,8 +10,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
-
 const props = defineProps({
 	categories: {
 		type: Array,