@webitel/ui-sdk 26.8.21 → 26.8.22

package/src/components/wt-vidstack-player/components/controls-group/controls-group.vue

@@ -13,11 +13,9 @@
   setup
   lang="ts"
 >
-import { inject } from 'vue';
+import { useVidstackPlayerSize } from '../../composables/useVidstackPlayerSize';
 
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
-
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 </script>
 
 <style scoped>

package/src/components/wt-vidstack-player/components/layouts/video-layout.vue

@@ -32,13 +32,11 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
-
-import type { WtVidstackPlayerSizeProvider } from '../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../composables/useVidstackPlayerSize';
 import { PlaybackControlsPanel } from '../index';
 import VideoDisplayPanel from '../panels/video-display-panel/video-display-panel.vue';
 
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 
 const props = defineProps<{
 	title?: string;

package/src/components/wt-vidstack-player/components/panels/playback-controls-panel/components/buttons/fullscreen-button.vue

@@ -18,8 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits } from 'vue';
-
 import WtIconBtn from '../../../../../../wt-icon-btn/wt-icon-btn.vue';
 
 const emit = defineEmits<{

package/src/components/wt-vidstack-player/components/panels/playback-controls-panel/components/buttons/play-button.vue

@@ -25,11 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue';
+import { useVidstackPlayerSize } from '../../../../../composables/useVidstackPlayerSize';
 
-import type { WtVidstackPlayerSizeProvider } from '../../../../../types/WtVidstackPlayerSizeProvider';
-
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 </script>
 
 <style scoped>.play-button {

package/src/components/wt-vidstack-player/components/panels/screen-sharing-controls-panel/screen-sharing-controls-panel.vue

@@ -36,14 +36,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { ControlsGroup } from '../../../../../components/wt-vidstack-player/components';
 import { ComponentSize } from '../../../../../enums';
 import type {
 	ScreenSharingSession,
 	ScreenshotStatus,
 } from '../../../../../modules/CallSession/types';
-import type { WtVidstackPlayerSizeProvider } from '../../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../../composables/useVidstackPlayerSize';
 
 interface Props {
 	session: ScreenSharingSession;
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 	'toggle-record': [];
 }>();
 
-const { size } = inject<WtVidstackPlayerSizeProvider>('size');
+const { size } = useVidstackPlayerSize();
 
 const recordIcon = computed(() =>
 	props.session.recordings ? 'record-stop' : 'record-start',
@@ -85,7 +85,7 @@ const makeScreenshot = () => {
 	emit('make-screenshot');
 };
 
-const buttonSizeMap = {
+const buttonSizeMap: Record<string, ComponentSize> = {
 	[ComponentSize.SM]: ComponentSize.SM,
 	[ComponentSize.MD]: ComponentSize.MD,
 	[ComponentSize.LG]: ComponentSize.MD,

package/src/components/wt-vidstack-player/components/panels/video-call-controls-panel/video-call-controls-panel.vue

@@ -28,7 +28,7 @@
 			:disabled="!props['mic:accessed']"
 			:size="buttonSizeMap[size]"
 			:icon="microphoneIcon"
-			:badge="micBadge"
+			:badge="micBadge ?? undefined"
 			badge-severity="error"
 			variant="outlined"
 			color="secondary"
@@ -43,7 +43,7 @@
 			:disabled="!props['video:accessed']"
 			:size="buttonSizeMap[size]"
 			:icon="videoCamIcon"
-			:badge="videoBadge"
+			:badge="videoBadge ?? undefined"
 			badge-severity="error"
 			variant="outlined"
 			color="secondary"
@@ -231,7 +231,7 @@ const onScreenshotClick = () => {
 	);
 };
 
-const buttonSizeMap = {
+const buttonSizeMap: Record<string, ComponentSize> = {
 	[ComponentSize.SM]: ComponentSize.SM,
 	[ComponentSize.MD]: ComponentSize.MD,
 	[ComponentSize.LG]: ComponentSize.MD,

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -44,16 +44,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, onMounted } from 'vue';
+import { computed, onBeforeUnmount, onMounted } from 'vue';
 import { ComponentSize } from '../../../../../enums';
 import WtAvatar from '../../../../wt-avatar/wt-avatar.vue';
 import WtIconBtn from '../../../../wt-icon-btn/wt-icon-btn.vue';
-import type { WtVidstackPlayerSizeProvider } from '../../../types/WtVidstackPlayerSizeProvider';
+import { useVidstackPlayerSize } from '../../../composables/useVidstackPlayerSize';
 import FullscreenButton from '../../buttons/fullscreen-button.vue';
 import ToggleButton from '../../toggle-button.vue';
 
 const { size, fullscreen, changeSize, enterFullscreen } =
-	inject<WtVidstackPlayerSizeProvider>('size');
+	useVidstackPlayerSize();
 
 const toggleIcon = computed(() =>
 	size.value === ComponentSize.SM ? 'expand' : 'collapse',
@@ -102,7 +102,7 @@ const exitFullscreen = () => {
 	}
 };
 
-const handleKeyUp = (event) => {
+const handleKeyUp = (event: KeyboardEvent) => {
 	if (event.key === 'Escape') {
 		handleFullscreen(false);
 	}

package/src/components/wt-vidstack-player/components/screenshot-box/screenshot-box.vue

@@ -13,7 +13,7 @@
         overlay-icon="zoom-in"
       />
       <button class="close-btn" @click.stop="onClose">
-        <wt-icon icon="close--filled" size="sm" color="light" />
+        <wt-icon icon="close--filled" size="sm" />
       </button>
     </div>
   </div>

package/src/components/wt-vidstack-player/composables/useVidstackPlayerSize.ts

@@ -0,0 +1,11 @@
+import { inject } from 'vue';
+
+import type { WtVidstackPlayerSizeProvider } from '../types/WtVidstackPlayerSizeProvider';
+
+export const useVidstackPlayerSize = (): WtVidstackPlayerSizeProvider => {
+	const provided = inject<WtVidstackPlayerSizeProvider>('size');
+	if (!provided) {
+		throw new Error('wt-vidstack-player: "size" context is not provided');
+	}
+	return provided;
+};

package/src/components/wt-vidstack-player/composables/useVidstackSrc.ts

@@ -1,34 +1,55 @@
 import type { PlayerSrc } from 'vidstack';
-import { computed, toRef } from 'vue';
+import { computed, type MaybeRef, toRef } from 'vue';
 
 import { normalizeVidstackMediaSrc } from '../utils/normalizeVidstackMediaSrc';
 
-export const useVidstackSrc = ({ src, type, stream }) => {
+interface VidstackSrcObject {
+	src?: unknown;
+	type?: string;
+}
+
+export type VidstackSrcInput = string | VidstackSrcObject | undefined;
+
+export const useVidstackSrc = ({
+	src,
+	type,
+	stream,
+}: {
+	src?: MaybeRef<VidstackSrcInput>;
+	type?: MaybeRef<string | undefined>;
+	stream?: MaybeRef<MediaStream | undefined>;
+}) => {
 	const srcRef = toRef(src);
 	const typeRef = toRef(type);
 	const streamRef = toRef(stream);
 
+	const srcObject = computed<VidstackSrcObject | undefined>(() =>
+		typeof srcRef.value === 'object' ? srcRef.value : undefined,
+	);
+
 	const normalizedType = computed(() => {
 		if (streamRef.value) return 'video/object';
 
-		return typeRef.value || srcRef.value?.type;
+		return typeRef.value || srcObject.value?.type;
 	});
 
 	const normalizedSrcValue = computed(() => {
 		if (streamRef.value) return streamRef.value;
 
 		const src =
-			typeof srcRef.value === 'string' ? srcRef.value : srcRef.value?.src;
+			typeof srcRef.value === 'string' ? srcRef.value : srcObject.value?.src;
 
 		if (src instanceof Blob) return src; // https://webitel.atlassian.net/browse/WTEL-9633
 
-		return src?.replace('/download', '/stream'); // fixme https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733348
+		return typeof src === 'string'
+			? src.replace('/download', '/stream') // fixme https://webitel.atlassian.net/browse/WTEL-8723?focusedCommentId=733348
+			: src;
 	});
 
 	const normalizedSrcObject = computed<PlayerSrc>(() => {
 		return normalizeVidstackMediaSrc({
 			src: normalizedSrcValue.value,
-			type: normalizedType.value,
+			type: normalizedType.value ?? '',
 		}) as PlayerSrc;
 	});
 

package/src/components/wt-vidstack-player/wt-vidstack-player.vue

@@ -52,15 +52,18 @@
 <script lang="ts" setup>
 import 'vidstack/player';
 import 'vidstack/player/ui';
-import type { MediaSrc } from 'vidstack';
 import { computed, provide, ref, toRefs, useTemplateRef } from 'vue';
 
 import { ComponentSize } from '../../enums';
 import { VideoLayout } from './components';
-import { useVidstackSrc } from './composables/useVidstackSrc';
+import {
+	useVidstackSrc,
+	type VidstackSrcInput,
+} from './composables/useVidstackSrc';
 
 interface Props {
-	src?: MediaSrc;
+	/** loose on purpose: `useVidstackSrc` normalizes it into a vidstack `MediaSrc` */
+	src?: VidstackSrcInput;
 	mime?: string;
 	autoplay?: boolean;
 	muted?: boolean;
@@ -116,7 +119,7 @@ defineExpose({
 const size = ref(props.size || ComponentSize.SM);
 const fullscreen = ref(false);
 
-const changeSize = (value) => {
+const changeSize = (value: ComponentSize) => {
 	size.value = value;
 	emit('change-size', value);
 };

package/src/enums/MessageColor/MessageColor.ts

@@ -7,4 +7,4 @@ export const MessageColor = {
 	CONTRAST: 'contrast',
 } as const;
 
-export type MessageColor = keyof typeof MessageColor;
+export type MessageColor = (typeof MessageColor)[keyof typeof MessageColor];

package/src/enums/MessageVariant/MessageVariant.ts

@@ -4,4 +4,5 @@ export const MessageVariant = {
 	SIMPLE: 'simple',
 } as const;
 
-export type MessageVariant = keyof typeof MessageVariant;
+export type MessageVariant =
+	(typeof MessageVariant)[keyof typeof MessageVariant];

package/src/install.ts

@@ -6,7 +6,7 @@ import './css/tailwind.css';
 
 import { generateInstance } from '@webitel/api-services/api/axios';
 import type { AxiosInstance } from 'axios';
-import type { App } from 'vue';
+import type { App, Component } from 'vue';
 import type { Router } from 'vue-router';
 import { fillIconsRepository } from './assets/icons';
 import Components from './components'; // init all components
@@ -35,7 +35,11 @@ const plugin: WebitelUiPlugin = {
 			app.directive(name, Directives[name as keyof typeof Directives]);
 		});
 		Object.keys(Components).forEach((name) => {
-			app.component(name, Components[name as keyof typeof Components]);
+			// the component union is too large to instantiate (TS2590)
+			app.component(
+				name,
+				Components[name as keyof typeof Components] as Component,
+			);
 		});
 		Object.keys(globals).forEach((globalKey) => {
 			app.provide(globalKey, globals[globalKey]);

package/src/locale/en/en.js

@@ -664,6 +664,7 @@ export default deepmerge(
 					[RelativeDatetimeValue.ThisMonth]: 'This month',
 					[RelativeDatetimeValue.Custom]: 'Custom date range',
 				},
+				andMore: 'and {count} more',
 				addFilter: ({ linked }) => {
 					return `${linked('reusable.add')} a ${linked(
 						'reusable.filter',

package/src/locale/es/es.js

@@ -652,6 +652,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Este mes',
 				[RelativeDatetimeValue.Custom]: 'Rango de fechas personalizado',
 			},
+			andMore: 'y {count} más',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} un ${linked(
 					'reusable.filter',

package/src/locale/kz/kz.js

@@ -653,6 +653,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Осы ай',
 				[RelativeDatetimeValue.Custom]: 'Жеке күн аралығы',
 			},
+			andMore: 'және тағы {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/pl/pl.js

@@ -653,6 +653,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Ten miesiąc',
 				[RelativeDatetimeValue.Custom]: 'Niestandardowy zakres dat',
 			},
+			andMore: 'i jeszcze {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/ro/ro.js

@@ -658,6 +658,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Această lună',
 				[RelativeDatetimeValue.Custom]: 'Interval personalizat',
 			},
+			andMore: 'și încă {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} un ${linked(
 					'reusable.filter',

package/src/locale/ru/ru.js

@@ -648,6 +648,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Этот месяц',
 				[RelativeDatetimeValue.Custom]: 'Выбранный диапазон дат',
 			},
+			andMore: 'и ещё {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/uk/uk.js

@@ -647,6 +647,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Цей місяць',
 				[RelativeDatetimeValue.Custom]: 'Власний діапазон дат',
 			},
+			andMore: 'та ще {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/uz/uz.js

@@ -657,6 +657,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Ushbu oy',
 				[RelativeDatetimeValue.Custom]: "Boshqa sana oralig'i",
 			},
+			andMore: 'va yana {count}',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} ${linked(
 					'reusable.filter',

package/src/locale/vi/vi.js

@@ -656,6 +656,7 @@ export default {
 				[RelativeDatetimeValue.ThisMonth]: 'Tháng này',
 				[RelativeDatetimeValue.Custom]: 'Phạm vi ngày tùy chỉnh',
 			},
+			andMore: 'và {count} nữa',
 			addFilter: ({ linked }) => {
 				return `${linked('reusable.add')} một ${linked(
 					'reusable.filter',

package/src/mixins/validationMixin/regle/useRegleValidation.ts

@@ -2,7 +2,7 @@ import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import { type ComputedRef, computed, type Ref } from 'vue';
 
 export type UseFieldValidationParams = {
-	field?: Ref<SuperCompatibleRegleFieldStatus>;
+	field?: Ref<SuperCompatibleRegleFieldStatus | undefined | null>;
 };
 
 export type UseFieldValidationReturn = {
@@ -14,7 +14,7 @@ export const useFieldValidation = ({
 	field: fieldRef,
 }: UseFieldValidationParams): UseFieldValidationReturn => {
 	const invalid = computed(() => {
-		return fieldRef?.value.$error ?? null;
+		return fieldRef?.value?.$error ?? null;
 	});
 
 	const validationText = computed(() => {

package/src/mixins/validationMixin/useValidation.ts

@@ -54,7 +54,7 @@ export const useValidation = ({
 
 	const validationText = computed(() => {
 		return isRegleValidation.value
-			? regleValidationText.value
+			? regleValidationText?.value
 			: vuelidateValidationText.value;
 	});
 

package/src/mixins/validationMixin/vuelidate/useVuelidateValidation.ts

@@ -9,14 +9,24 @@ import {
 } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-type CompatCustomValidator = {
+export type CompatCustomValidator = {
 	name: string;
 	text: string;
 };
 
+/**
+ * Structural on purpose: inlining `@vuelidate/core`'s `Validation` blows up
+ * prop-type inference in the components (TS2590). `false` is accepted because
+ * callers write `:v="!disableValidation && v$.field"` to opt out.
+ */
+// biome-ignore lint/suspicious/noExplicitAny: dynamic per-rule keys
+export type VuelidateFieldLike = Record<string, any> | null | false;
+
 export type UseFieldValidationParams = {
-	field?: Ref<Validation>;
-	customValidators?: CompatCustomValidator[];
+	field?: Ref<VuelidateFieldLike | undefined>;
+	customValidators?:
+		| CompatCustomValidator[]
+		| Ref<CompatCustomValidator[] | undefined>;
 };
 
 export const useFieldValidation = ({
@@ -26,27 +36,32 @@ export const useFieldValidation = ({
 	const { t } = useI18n();
 
 	// support vue options api, where v is a reactive, not ref
-	let v: Ref<Validation> | ComputedRef<Validation | undefined> | undefined =
-		inputV;
+	let v:
+		| Ref<VuelidateFieldLike | undefined>
+		| ComputedRef<VuelidateFieldLike | undefined>
+		| undefined = inputV;
 	let customValidators:
 		| CompatCustomValidator[]
+		| Ref<CompatCustomValidator[] | undefined>
 		| ComputedRef<CompatCustomValidator[] | undefined>
 		| undefined = inputCustomValidators;
 
 	if (isReactive(inputV)) {
 		v = computed(() => unref(inputV));
-		customValidators = computed(() => inputCustomValidators);
+		customValidators = computed(() => unref(inputCustomValidators));
 	}
 	// end
 
 	const isValidation = computed(
 		() => !!v && !!v.value && !!Object.keys(v.value).length,
 	);
-	const invalid = computed(() => isValidation.value && v?.value?.$error);
+	const invalid = computed(
+		() => isValidation.value && !!(v?.value as Validation | undefined)?.$error,
+	);
 
 	const validationText = computed(() => {
 		let validationText = '';
-		const validation = v?.value;
+		const validation = v?.value as Validation | undefined;
 		if (validation && isValidation.value && invalid.value) {
 			if (validation.required?.$invalid)
 				validationText = t('validation.required');

package/src/modules/CSVExport/CSVExport.js

@@ -24,7 +24,7 @@ export default class CSVExport {
 		count: 0,
 	};
 
-	constructor(fetchMethod, { filename, delimiter }) {
+	constructor(fetchMethod, { filename, delimiter } = {}) {
 		if (!fetchMethod) throw new Error('fetch method should be specified!');
 		this.fetchMethod = fetchMethod;
 		this.filename = filename;

package/src/modules/CallSession/modules/VideoCall/video-call.vue

@@ -7,7 +7,7 @@
     ]"
     :hide-video-display-panel="isPiP || props.hideVideoDisplayPanel"
     :size="isPiP ? ComponentSize.MD : props.size"
-    :stream="mainStream"
+    :stream="mainStream ?? undefined"
     :static="isPiP || props.static"
     :username="props.username"
     :hide-controls-panel="props.hideControlsPanel"
@@ -116,7 +116,7 @@
           <wt-vidstack-player
             :class="`video-call-sender--${innerSize}`"
             :style="pipContentSizeStyle"
-            :stream="props['sender:stream']"
+            :stream="props['sender:stream'] ?? undefined"
             autoplay
             class="video-call-sender"
             hide-controls-panel
@@ -148,16 +148,16 @@
         :mic:enabled="props['sender:mic:enabled']"
         :recordings="props.recordings"
         :screenshot:loading="props['screenshot:loading']"
-        :screenshot:status="props['screenshot:status']"
+        :screenshot:status="props['screenshot:status'] ?? null"
         :video:accessed="props['sender:video:accessed']"
         :video:enabled="props['sender:video:enabled']"
-        @[VideoCallAction.Recordings]="(payload, options) => emit(emitKeys[VideoCallAction.Recordings], payload, options)"
-        @[VideoCallAction.Screenshot]="(payload, options) => emit(emitKeys[VideoCallAction.Screenshot], payload, options)"
-        @[VideoCallAction.Mic]="(payload, options) => emit(emitKeys[VideoCallAction.Mic], payload, options)"
-        @[VideoCallAction.Video]="(payload, options) => emit(emitKeys[VideoCallAction.Video], payload, options)"
-        @[VideoCallAction.Settings]="(payload, options) => emit(emitKeys[VideoCallAction.Settings], payload, options)"
-        @[VideoCallAction.Chat]="(payload, options) => emit(emitKeys[VideoCallAction.Chat], payload, options)"
-        @[VideoCallAction.Hangup]="(payload, options) => emit(emitKeys[VideoCallAction.Hangup], payload, options)"
+        @[VideoCallAction.Recordings]="forwardAction(VideoCallAction.Recordings)"
+        @[VideoCallAction.Screenshot]="forwardAction(VideoCallAction.Screenshot)"
+        @[VideoCallAction.Mic]="forwardAction(VideoCallAction.Mic)"
+        @[VideoCallAction.Video]="forwardAction(VideoCallAction.Video)"
+        @[VideoCallAction.Settings]="forwardAction(VideoCallAction.Settings)"
+        @[VideoCallAction.Chat]="forwardAction(VideoCallAction.Chat)"
+        @[VideoCallAction.Hangup]="forwardAction(VideoCallAction.Hangup)"
 
       />
     </template>
@@ -284,6 +284,21 @@ const emitKeys = {
 	[VideoCallAction.Hangup]: `action:${VideoCallAction.Hangup}`,
 } as const;
 
+type VideoCallActionKey = keyof typeof emitKeys;
+
+/** dynamic `@[action]` handlers cannot be annotated inline */
+const forwardAction =
+	(action: VideoCallActionKey) =>
+	(payload?: unknown, options?: ResultCallbacks) =>
+		// the per-action emit overloads don't unify over a computed key
+		(
+			emit as (
+				e: (typeof emitKeys)[VideoCallActionKey],
+				payload?: unknown,
+				options?: ResultCallbacks,
+			) => void
+		)(emitKeys[action], payload, options);
+
 const { t } = useI18n();
 
 const playerRef = ref<InstanceType<typeof WtVidstackPlayer> | null>(null);
@@ -467,17 +482,20 @@ onBeforeUnmount(() => {
 	stopHoldTimer();
 });
 
-const receiverVideoMutedIconSizes = {
+const receiverVideoMutedIconSizes: Partial<
+	Record<ComponentSize, ComponentSize>
+> = {
 	[ComponentSize.SM]: ComponentSize.MD,
 	[ComponentSize.MD]: ComponentSize.LG,
 	[ComponentSize.LG]: ComponentSize.XXL,
 };
 
-const senderVideoMutedIconSizes = {
-	[ComponentSize.SM]: ComponentSize.MD,
-	[ComponentSize.MD]: ComponentSize['4XL'],
-	[ComponentSize.LG]: ComponentSize['8XL'],
-};
+const senderVideoMutedIconSizes: Partial<Record<ComponentSize, ComponentSize>> =
+	{
+		[ComponentSize.SM]: ComponentSize.MD,
+		[ComponentSize.MD]: ComponentSize['4XL'],
+		[ComponentSize.LG]: ComponentSize['8XL'],
+	};
 </script>
 
 <style scoped>

package/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup.js

@@ -6,7 +6,7 @@ export const useDeleteConfirmationPopup = () => {
 	const deleteCount = ref(0);
 	const deleteCallback = ref(() => {});
 
-	function askDeleteConfirmation({ deleted, callback }) {
+	function askDeleteConfirmation({ deleted = undefined, callback }) {
 		if (Array.isArray(deleted)) deleteCount.value = deleted.length;
 		else deleteCount.value = 1;
 		isVisible.value = true;

package/src/modules/FilesExport/composables/useFilesExport.ts

@@ -63,7 +63,7 @@ export const useFilesExport = ({
 	getFileURL,
 	getFileBlob,
 	fetch,
-	filename,
+	filename = 'export',
 	skipFilesWithError,
 }: UseFilesExportOptions): UseFilesExportReturn => {
 	const {

package/src/modules/UploadCsvPopup/components/wt-upload-csv-popup.vue

@@ -140,7 +140,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, toRefs, withDefaults } from 'vue';
+import { ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useUploadCsv from '../composable/useUploadCsv';
@@ -153,7 +153,7 @@ interface CharsetOption {
 
 interface Props {
 	file: File | null;
-	mappingFields: unknown[];
+	mappingFields: CsvMappingField[];
 	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
 	handlingMode?: string;
 	fileUploadHandler?: () => unknown | Promise<unknown>;