@webitel/ui-sdk 26.8.20 → 26.8.22

package/src/components/on-demand/wt-screen-recordings-action/wt-screen-recordings-action.vue

@@ -29,10 +29,18 @@
 import { EngineCallFileType } from '@webitel/api-services/gen/models';
 import { computed } from 'vue';
 
-import { EMPTY_SYMBOL } from '../../../utils/index.ts';
+import { EMPTY_SYMBOL } from '../../../utils/index';
+
+interface CallFile {
+	name?: string;
+	id?: string;
+	mimeType?: string;
+	type?: string;
+}
 
 interface Props {
-	files: unknown[];
+	/** call files grouped by `EngineCallFileType` */
+	files: Partial<Record<EngineCallFileType, CallFile[]>>;
 }
 
 const props = defineProps<Props>();
@@ -41,7 +49,7 @@ const emit = defineEmits<(e: 'set-video', val: unknown) => void>();
 
 const contextOptions = computed(() =>
 	props?.files?.[EngineCallFileType.FileTypeScreensharing]?.map(
-		({ name, id, mimeType, type }) => ({
+		({ name, id, mimeType, type }: CallFile) => ({
 			text: name,
 			id,
 			mimeType,
@@ -50,7 +58,7 @@ const contextOptions = computed(() =>
 	),
 );
 
-const handleOptionSelect = ({ option }) => {
+const handleOptionSelect = ({ option }: { option: CallFile }) => {
 	if (option.id && option.type === EngineCallFileType.FileTypeScreensharing) {
 		emit('set-video', option);
 	}

package/src/components/on-demand/wt-send-message-popup/wt-send-message-popup.vue

@@ -37,8 +37,9 @@
 
 <script setup lang="ts">
 import { AgentsAPI, MessagesServiceAPI } from '@webitel/api-services/api';
-import { inject, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useEventBus } from '../../../composables';
 import { WtChatEmoji } from '../..';
 
 interface ChatItem {
@@ -65,10 +66,19 @@ const props = defineProps<{
 const emit = defineEmits([
 	'close',
 ]);
-const eventBus = inject('$eventBus');
+const eventBus = useEventBus();
 const { t } = useI18n();
 
-const generateNewDraft = () => {
+interface MessageDraft {
+	gateway: {
+		id?: string;
+	};
+	provider: string;
+	message: string;
+	agentId: string | null;
+}
+
+const generateNewDraft = (): MessageDraft => {
 	return {
 		gateway: props.chatItem?.app || {},
 		provider: props.chatItem?.protocol || '',
@@ -79,7 +89,7 @@ const generateNewDraft = () => {
 
 const draft = ref(generateNewDraft());
 
-async function getAgentId(params) {
+async function getAgentId(params: Record<string, unknown> = {}) {
 	const { items } = await AgentsAPI.getList({
 		...params,
 		userId: props.userId,
@@ -104,7 +114,7 @@ const sendMessage = async () => {
 		},
 	});
 	if (response.failure) {
-		eventBus.$emit('notification', {
+		eventBus?.$emit('notification', {
 			type: 'error',
 			text: response.failure[0].error.message,
 		});
@@ -112,9 +122,9 @@ const sendMessage = async () => {
 	emit('close');
 };
 
-const insertEmoji = (emoji) => {
+const insertEmoji = (emoji: string) => {
 	draft.value.message += emoji;
-	document.querySelector('textarea').focus();
+	document.querySelector('textarea')?.focus();
 };
 
 onMounted(async () => await getAgentId());

package/src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue

@@ -81,9 +81,13 @@ import {
 } from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { WebitelProtoDataField } from 'webitel-sdk';
+import type {
+	WebitelProtoDataField,
+	WebitelProtoDataTypeLookup,
+} from 'webitel-sdk';
 
 import { WtTypeExtensionFieldKind as FieldType } from '../../../enums';
+import type { VuelidateFieldLike } from '../../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 
 const model = defineModel<unknown>();
 
@@ -94,10 +98,16 @@ const props = defineProps<{
 	/**
 	 * TODO: implement validation
 	 */
-	v?: object;
+	v?: VuelidateFieldLike;
 }>();
 
-props.v?.$touch();
+(
+	props.v as
+		| {
+				$touch?: () => void;
+		  }
+		| undefined
+)?.$touch?.();
 
 const { t } = useI18n();
 
@@ -109,7 +119,8 @@ const isRequired = computed(() => {
 	return props.required ?? props.field.required;
 });
 
-const value = computed(() => {
+// biome-ignore lint/suspicious/noExplicitAny: the value type follows `field.kind` at runtime
+const value = computed<any>(() => {
 	return model.value;
 });
 
@@ -128,20 +139,29 @@ const sharedChildrenProps = computed(() => ({
 const selectProps = computed(() => ({
 	clearable: true,
 	dataKey: 'id',
-	searchMethod: () => loadLookupList(props.field.lookup),
+	searchMethod: loadLookupList(props.field.lookup),
 }));
 
 const multiselectProps = computed(() => ({
 	...selectProps.value,
 }));
 
-const setValue = (value) => {
+interface LookupOption {
+	id?: string;
+	name?: string;
+}
+
+const setValue = (value: unknown) => {
 	model.value = value;
 };
 
-const loadLookupList = ({ path, display, primary }) => {
-	return (params) => {
-		return SysTypesAPI.getSysTypeRecordsLookup({
+const loadLookupList = ({
+	path = '',
+	display = '',
+	primary = '',
+}: WebitelProtoDataTypeLookup = {}) => {
+	return (params: Record<string, unknown>) => {
+		return SysTypesAPI.getLookup({
 			...params,
 			path,
 			display,
@@ -150,20 +170,21 @@ const loadLookupList = ({ path, display, primary }) => {
 	};
 };
 
-const selectElement = (value) => {
-	if (Object.values(value).length === 0) {
+const selectElement = (value: unknown) => {
+	const option = (value ?? {}) as LookupOption;
+	if (Object.values(option).length === 0) {
 		return setValue(null);
 	}
 
 	setValue({
-		id: value.id,
-		name: value.name,
+		id: option.id,
+		name: option.name,
 	});
 };
 
-const selectElements = (value) => {
+const selectElements = (value: unknown) => {
 	setValue(
-		value.map((item) => ({
+		(value as LookupOption[]).map((item) => ({
 			id: item.id,
 			name: item.name,
 		})),

package/src/components/on-demand/wt-upload-file-icon-btn/wt-upload-file-icon-btn.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 defineOptions({

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

@@ -17,7 +17,7 @@ import type { BadgeSeverity } from './types/WtBadge';
 
 interface Props {
 	value: string | number;
-	severity?: BadgeSeverity;
+	severity?: BadgeSeverity | null;
 	size?: ComponentSize;
 }
 

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

@@ -61,16 +61,16 @@ 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';
 
-const primevueSizeMap = {
+const primevueSizeMap: Record<string, string> = {
 	[ComponentSize.XS]: 'extra-small',
 	[ComponentSize.SM]: 'small',
 	[ComponentSize.MD]: 'medium',
 };
 
-const iconButtonSizeMap = {
-	[ComponentSize.XS]: 'sm',
-	[ComponentSize.SM]: 'sm',
-	[ComponentSize.MD]: 'md',
+const iconButtonSizeMap: Record<string, ComponentSize> = {
+	[ComponentSize.XS]: ComponentSize.SM,
+	[ComponentSize.SM]: ComponentSize.SM,
+	[ComponentSize.MD]: ComponentSize.MD,
 };
 
 interface WtButtonProps extends /* @vue-ignore */ ButtonProps {

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

@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import type { CheckboxProps } from 'primevue/checkbox';
-import { computed, defineModel, defineProps, useSlots } from 'vue';
+import { computed, useSlots } from 'vue';
 
 /**
  * @emits {boolean | string[]} change - Fires when checkbox value changes. Emits selected value (Boolean or Array)
@@ -74,7 +74,9 @@ const isChecked = computed(() => {
 	if (isSingle.value) {
 		return model.value;
 	}
-	return model.value.includes(props.value);
+	return Array.isArray(model.value)
+		? model.value.includes(String(props.value))
+		: false;
 });
 
 const checkboxIcon = computed(() => {

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

@@ -11,7 +11,7 @@
 				icon="close--filled" 
 				:size="ComponentSize.SM"
 				:color="ChipColor.ON_PRIMARY"
-				@click="emit('remove', $event)"
+				@click="emit('remove')"
 			/>
     </template>
   </p-chip>

package/src/components/wt-context-menu/_variables.css

@@ -1,15 +1,15 @@
 :root {
 	--wt-context-menu-option-padding: var(--spacing-xs);
 
-	--wt-context-menu-background-color: var(--content-wrapper-color);
-	--wt-context-menu-option-text-color: var(--text-main-color);
-	--wt-context-menu-option-background-hover-color: var(--dp-24-surface-color);
+	--wt-context-menu-background-color: var(--context-menu-background-color);
+	--wt-context-menu-option-text-color: var(--context-menu-option-text-color);
+	--wt-context-menu-option-background-hover-color: var(
+		--context-menu-option-hover-color
+	);
 	--wt-context-menu-option-background-disabled-color: var(
-		--dp-14-surface-color
+		--context-menu-option-disabled-color
+	);
+	--wt-context-menu-option-text-disabled-color: var(
+		--context-menu-option-text-disabled-color
 	);
-	--wt-context-menu-option-text-disabled-color: var(--grey-lighten-3);
-}
-
-:root.theme--dark {
-	--wt-context-menu-option-text-disabled-color: var(--grey-darken-2);
 }

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

@@ -16,12 +16,12 @@
 			input-class="typo-body-1"
 			:required="required"
 			:disabled="disabled"
-			:invalid="invalid"
+			:invalid="invalid ?? undefined"
 			:show-time="showTime"
 			:min-date="minDate"
 			:max-date="maxDate"
 			:placeholder="getPlaceholder"
-			:show-clear="clearable && modelValue"
+			:show-clear="!!(clearable && modelValue)"
 			show-button-bar
       fluid
 			:pt="{
@@ -98,25 +98,25 @@
 			</template>
 
 			<template #hourincrementbutton="{ callbacks }">
-				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+				<span @mousedown="spinnerCallbacks(callbacks).mousedown" @mouseup="spinnerCallbacks(callbacks).mouseup" @mouseleave="spinnerCallbacks(callbacks).mouseleave">
 					<wt-icon-btn icon="arrow-up" />
 				</span>
 			</template>
 
 			<template #hourdecrementbutton="{ callbacks }">
-				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+				<span @mousedown="spinnerCallbacks(callbacks).mousedown" @mouseup="spinnerCallbacks(callbacks).mouseup" @mouseleave="spinnerCallbacks(callbacks).mouseleave">
 					<wt-icon-btn icon="arrow-down" />
 				</span>
 			</template>
 
 			<template #minuteincrementbutton="{ callbacks }">
-				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+				<span @mousedown="spinnerCallbacks(callbacks).mousedown" @mouseup="spinnerCallbacks(callbacks).mouseup" @mouseleave="spinnerCallbacks(callbacks).mouseleave">
 					<wt-icon-btn icon="arrow-up" />
 				</span>
 			</template>
 
 			<template #minutedecrementbutton="{ callbacks }">
-				<span @mousedown="callbacks.mousedown" @mouseup="callbacks.mouseup" @mouseleave="callbacks.mouseleave">
+				<span @mousedown="spinnerCallbacks(callbacks).mousedown" @mouseup="spinnerCallbacks(callbacks).mouseup" @mouseleave="spinnerCallbacks(callbacks).mouseleave">
 					<wt-icon-btn icon="arrow-down" />
 				</span>
 			</template>
@@ -138,14 +138,7 @@ import PDatepicker, {
 	DatePickerEmitsOptions,
 	DatePickerProps,
 } from 'primevue/datepicker';
-import {
-	computed,
-	defineModel,
-	defineProps,
-	nextTick,
-	toRefs,
-	useTemplateRef,
-} from 'vue';
+import { computed, nextTick, toRefs, useTemplateRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import {
 	ButtonColor,
@@ -154,6 +147,11 @@ import {
 	MessageVariant,
 } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
+import type { PrimevueOverlayInstance } from '../_internals/types/PrimevueInstance';
 import { useDatepicker } from './_internals/composables/useDatepicker';
 
 interface Props extends DatePickerProps {
@@ -167,8 +165,8 @@ interface Props extends DatePickerProps {
 	required?: boolean;
 	clearable?: boolean;
 	timezone?: string;
-	v?: Record<string, unknown>;
-	customValidators?: unknown[];
+	v?: VuelidateFieldLike;
+	customValidators?: CompatCustomValidator[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -203,13 +201,25 @@ const modelValue = computed({
 	},
 });
 
-const datepicker = useTemplateRef<HTMLDivElement>('datepicker');
+interface DatePickerRef extends PrimevueOverlayInstance {
+	rawValue: Date | null;
+	updateModel: (v: Date) => void;
+}
+
+const datepicker = useTemplateRef<DatePickerRef>('datepicker');
+
+/** PrimeVue types the spinner slot's `callbacks` as a bare `object`. */
+const spinnerCallbacks = (callbacks: object) =>
+	callbacks as Record<
+		'mousedown' | 'mouseup' | 'mouseleave',
+		(e: Event) => void
+	>;
 
 const datepickerId = `datepicker-${Math.random().toString(36).slice(2, 11)}`;
 
 const { onBlur, lockOverlay, unlockOverlay } = useDatepicker(
-	() => datepicker.value?.$el?.querySelector('input'),
-	() => datepicker.value,
+	() => datepicker.value?.$el?.querySelector('input') ?? null,
+	() => datepicker.value ?? null,
 	() => !!props.showTime,
 	() => !!props.clearable,
 );
@@ -230,7 +240,7 @@ const onPanelShow = () => {
 
 	// align overlay, because on first render it is not aligned correctly
 	setTimeout(() => {
-		datepicker.value?.alignOverlay();
+		datepicker.value?.alignOverlay?.();
 		const panel = datepicker.value?.overlay;
 		if (!panel) return;
 		panel.style.minWidth = '';

package/src/components/wt-dual-panel/wt-dual-panel.vue

@@ -21,7 +21,7 @@ v-if="!disableResize" :action="sidePanelCollapsed ? IconAction.EXPAND : IconActi
 </template>
 
 <script setup>
-import { computed, defineEmits, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { ComponentSize, IconAction } from '../../enums';
 

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

@@ -104,16 +104,7 @@
 <script setup lang="ts">
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
 import type { GalleriaProps } from 'primevue';
-import {
-	computed,
-	defineModel,
-	defineProps,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	ref,
-	watch,
-} from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import DeleteConfirmationPopup from '../../modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import {
 	useGalleriaFullscreen,
@@ -186,7 +177,6 @@ const onImageLoad = () => {
 const handleDelete = () => {
 	if (fullScreen.value) toggleFullScreen();
 	askDeleteConfirmation({
-		deleteCount: 1,
 		callback: () => emit('delete', activeIndex),
 	});
 };

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

@@ -22,7 +22,7 @@ class="wt-image" :style="{
 </template>
 
 <script setup lang="ts">
-import { computed, defineEmits, defineProps } from 'vue';
+import { computed } from 'vue';
 
 import { IconColor } from '../../enums';
 
@@ -60,7 +60,7 @@ const width = computed(() => {
 	const width = props.size ? sizeToUnits[props.size] : props.width;
 
 	// if converted to Number without an error, it has no units in it
-	if (+width) {
+	if (width && +width) {
 		return `${width}px`;
 	}
 
@@ -73,7 +73,7 @@ const height = computed(() => {
 	const height = props.size ? sizeToUnits[props.size] : props.height;
 
 	// if converted to Number without an error, it has no units in it
-	if (+height) {
+	if (height && +height) {
 		return `${height}px`;
 	}
 

package/src/components/wt-input-number/wt-input-number.vue

@@ -77,17 +77,13 @@
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { InputNumberProps } from 'primevue';
-import {
-	computed,
-	defineEmits,
-	defineModel,
-	onMounted,
-	toRefs,
-	useSlots,
-	useTemplateRef,
-} from 'vue';
-import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
+import { computed, onMounted, toRefs, useSlots, useTemplateRef } from 'vue';
+import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 import { useInputControl } from '../_internals/composables';
 
 interface WtInputNumberProps extends /* @vue-ignore */ InputNumberProps {
@@ -103,9 +99,9 @@ interface WtInputNumberProps extends /* @vue-ignore */ InputNumberProps {
 	minFractionDigits?: number;
 	maxFractionDigits?: number;
 	showButtons?: boolean;
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	regleValidation?: SuperCompatibleRegleFieldStatus;
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 	hideInputInfo?: boolean;
 }
 
@@ -123,7 +119,6 @@ const props = withDefaults(defineProps<WtInputNumberProps>(), {
 	maxFractionDigits: undefined,
 	showButtons: true,
 	v: null,
-	regleValidation: null,
 	customValidators: () => [],
 	hideInputInfo: false,
 });

package/src/components/wt-input-text/wt-input-text.vue

@@ -32,9 +32,8 @@
         class="wt-input-text__input typo-body-1"
         :class="{ 'wt-input-text__input--masked': isInputMasked }"
         :inputmode="type"
-        :size="primevueSizeMap[size]"
+        :size="size ? primevueSizeMap[size] : undefined"
         v-bind="$attrs"
-        v-on="$listeners"
         @update:model-value="inputHandler"
         @keyup="handleKeyup"
       />
@@ -65,19 +64,19 @@
 <script setup lang="ts">
 import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { InputTextProps } from 'primevue';
-import {
-	computed,
-	defineModel,
-	ref,
-	toRefs,
-	useSlots,
-	useTemplateRef,
-} from 'vue';
-import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
+import type { InputHTMLAttributes } from 'vue';
+import { computed, ref, toRefs, useSlots, useTemplateRef } from 'vue';
+import { ComponentSize, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import type {
+	CompatCustomValidator,
+	VuelidateFieldLike,
+} from '../../mixins/validationMixin/vuelidate/useVuelidateValidation';
 import { useInputControl } from '../_internals/composables';
 
-interface WtInputTextProps extends /* @vue-ignore */ InputTextProps {
+/** native attrs are omitted: keeping them overflows prop inference (TS2590) */
+interface WtInputTextProps
+	extends /* @vue-ignore */ Omit<InputTextProps, keyof InputHTMLAttributes> {
 	label?: string;
 	labelProps?: Record<string, unknown>;
 	type?: string;
@@ -86,9 +85,9 @@ interface WtInputTextProps extends /* @vue-ignore */ InputTextProps {
 	disabled?: boolean;
 	required?: boolean;
 	preventTrim?: boolean;
-	v?: Record<string, unknown>;
+	v?: VuelidateFieldLike;
 	regleValidation?: SuperCompatibleRegleFieldStatus;
-	customValidators?: unknown[];
+	customValidators?: CompatCustomValidator[];
 	hideInputInfo?: boolean;
 	hideInputValue?: boolean;
 }
@@ -103,13 +102,12 @@ const props = withDefaults(defineProps<WtInputTextProps>(), {
 	required: false,
 	preventTrim: false,
 	v: null,
-	regleValidation: null,
 	customValidators: () => [],
 	hideInputInfo: false,
 	hideInputValue: false,
 });
 
-const primevueSizeMap = {
+const primevueSizeMap: Record<string, string> = {
 	[ComponentSize.SM]: 'small',
 	[ComponentSize.LG]: 'large',
 };
@@ -148,7 +146,7 @@ const requiredLabel = computed(() => {
 	return isRequired ? `${props.label}*` : props.label;
 });
 
-const inputHandler = (value) => {
+const inputHandler = (value: string) => {
 	const handledValue = props.preventTrim ? value : value.trim();
 	emit('update:modelValue', handledValue);
 };

package/src/components/wt-intersection-observer/wt-intersection-observer.vue

@@ -46,7 +46,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	stopObs();
+	stopObs?.();
 });
 </script>
 

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

@@ -32,7 +32,7 @@ withDefaults(defineProps<WtMessageProps>(), {
 	size: ComponentSize.MD,
 });
 
-const primevueSizeMap = {
+const primevueSizeMap: Record<string, string> = {
 	[ComponentSize.SM]: 'small',
 	[ComponentSize.MD]: 'normal',
 	[ComponentSize.LG]: 'large',