@webitel/ui-sdk 26.6.12 → 26.6.14

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

@@ -0,0 +1,101 @@
+import { useSelectCustomValues } from './useSelectCustomValues';
+import { useSelectDropdown } from './useSelectDropdown';
+import { useSelectOptions } from './useSelectOptions';
+
+export const useSelect = ({
+	selected,
+	options,
+	optionLabel,
+	optionValue,
+	dataKey,
+	allowCustomValues,
+	manualCustomValues = false,
+	filterInput,
+	selectRef,
+	searchMethod,
+	selectId,
+	isSingle,
+	emit = () => {},
+}) => {
+	const {
+		filterText,
+		filteredOptions,
+		isLoading,
+		searchHasNext,
+		sortOptions,
+		getOptionLabel,
+		fetchOptions,
+		resetAndFetch,
+		filterOptions,
+		updateSelectedOptionsCache,
+	} = useSelectOptions({
+		selected,
+		options,
+		optionLabel,
+		optionValue,
+		dataKey,
+		allowCustomValues,
+		searchMethod,
+	});
+
+	const {
+		isDropdownOpen,
+		onDropdownBeforeShow,
+		onDropdownBeforeHide,
+		onDropdownShow,
+		onDropdownHide,
+	} = useSelectDropdown({
+		selectId,
+		selectRef,
+		filterInput,
+		searchMethod,
+		filteredOptions,
+		filterText,
+		filterOptions,
+		resetAndFetch,
+		sortOptions,
+		fetchOptions,
+		isLoading,
+		searchHasNext,
+	});
+
+	const { onInputKeydown } = useSelectCustomValues({
+		selected,
+		filteredOptions,
+		options,
+		dataKey,
+		filterText,
+		filterOptions,
+		updateSelectedOptionsCache,
+		selectRef,
+		allowCustomValues,
+		manualCustomValues,
+		isSingle,
+		emit,
+	});
+
+	const clearValue = () => {
+		let value: string | unknown[] | Record<string, unknown> = '';
+		if (Array.isArray(selected.value)) value = [];
+		else if (typeof selected.value === 'object' && selected.value !== null)
+			value = {};
+		selected.value = value;
+		emit('reset', value);
+	};
+
+	return {
+		isLoading,
+		isDropdownOpen,
+		filterText,
+		filteredOptions,
+		getOptionLabel,
+		fetchOptions,
+		filterOptions,
+		onDropdownBeforeShow,
+		onDropdownBeforeHide,
+		onDropdownShow,
+		onDropdownHide,
+		onInputKeydown,
+		clearValue,
+	};
+};

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

@@ -0,0 +1,89 @@
+import { nextTick } from 'vue';
+import { isOptionSelected, toArray } from './useSelectUtils';
+
+export const useSelectCustomValues = ({
+	selected,
+	filteredOptions,
+	options,
+	dataKey,
+	filterText,
+	filterOptions,
+	updateSelectedOptionsCache,
+	selectRef,
+	allowCustomValues,
+	manualCustomValues,
+	isSingle,
+	emit,
+}) => {
+	const makeCustomOption = (text: string) => {
+		const sample = options.value.length
+			? options.value[0]
+			: filteredOptions.value[0];
+		if (sample && typeof sample === 'object') {
+			return Object.fromEntries(
+				Object.keys(sample).map((key) => [
+					key,
+					text,
+				]),
+			);
+		}
+		return text;
+	};
+
+	const onInputKeydown = () => {
+		if (!allowCustomValues.value || !filterText.value) return;
+
+		// check if custom option is already selected
+		const selectedAsArray = toArray(selected.value);
+		const isAlreadySelected = selectedAsArray.some(
+			(s) => (dataKey.value ? s[dataKey.value] : s) === filterText.value,
+		);
+
+		if (isAlreadySelected) return;
+
+		// TODO: remove this functionality if there is no select that does manually handling
+		// if (manualCustomValues.value) {
+		// 	emit('add:custom-value', filterText.value);
+		// 	return;
+		// }
+
+		const customOption = makeCustomOption(filterText.value);
+
+		const isOptionAlreadyInList = filteredOptions.value.some((option) =>
+			isOptionSelected(
+				option,
+				[
+					customOption,
+				],
+				dataKey.value,
+			),
+		);
+
+		if (!isOptionAlreadyInList) {
+			filteredOptions.value.unshift(customOption);
+		}
+
+		if (isSingle) {
+			selectRef.value?.hide();
+			selected.value = customOption;
+		} else {
+			// redefine selected value instead of pushing element is for max-selected-labels prop correct work
+			selected.value = [
+				...selected.value,
+				customOption,
+			];
+		}
+
+		// Sync cache immediately so the custom value survives the upcoming API refetch
+		updateSelectedOptionsCache();
+
+		nextTick(() => {
+			filterText.value = '';
+			filterOptions('');
+		});
+	};
+
+	return {
+		onInputKeydown,
+	};
+};

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

@@ -0,0 +1,93 @@
+import { ref } from 'vue';
+
+export const useSelectDropdown = ({
+	selectId,
+	selectRef,
+	filterInput,
+	searchMethod,
+	filteredOptions,
+	filterText,
+	filterOptions,
+	resetAndFetch,
+	sortOptions,
+	fetchOptions,
+	isLoading,
+	searchHasNext,
+}) => {
+	const isDropdownOpen = ref(false);
+	let overlayResizeObserver: ResizeObserver | null = null;
+
+	const getListContainer = (): HTMLElement | null => {
+		return document.querySelector(`#${selectId.value}_list`)
+			?.parentElement as HTMLElement | null;
+	};
+
+	const handleScroll = (e: Event) => {
+		const el = e.target as HTMLElement;
+		const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 40;
+		if (nearBottom && !isLoading.value && searchHasNext.value) {
+			fetchOptions();
+		}
+	};
+
+	const onDropdownBeforeShow = () => {
+		isDropdownOpen.value = true;
+		// @author @HlukhovYe
+		// when user previously selected items, they should be on top only after reopening dropdown
+		filteredOptions.value = sortOptions(filteredOptions.value);
+	};
+
+	const onDropdownShow = () => {
+		filterInput.value?.focus();
+		if (searchMethod.value) {
+			getListContainer()?.addEventListener('scroll', handleScroll);
+		}
+		/*
+		  @author @HlukhovYe
+		  primevue doesnt align overlay position if use custom options filtering,
+		  so its necessary to trigger primevue's method alignOverlay manually
+		*/
+		const overlay = selectRef?.value?.overlay;
+		if (overlay) {
+			overlayResizeObserver = new ResizeObserver(() => {
+				selectRef.value?.alignOverlay();
+			});
+			overlayResizeObserver.observe(overlay);
+		}
+	};
+
+	const onDropdownBeforeHide = () => {
+		/**
+		 * @author @HlukhovYe
+		 * neccessary fix for this problem: https://github.com/primefaces/primevue/issues/8508
+		 */
+		const overlay = selectRef?.value?.overlay;
+		if (overlay) overlay.style.pointerEvents = 'none';
+		getListContainer()?.scrollTo(0, 0); // scroll dropdown list to top
+	};
+
+	const onDropdownHide = () => {
+		isDropdownOpen.value = false;
+		overlayResizeObserver?.disconnect();
+		overlayResizeObserver = null;
+		if (searchMethod.value) {
+			/*
+			  @author @HlukhovYe
+			  remove scroll listener on dropdown close, no need to remove it on unmount
+			*/
+			getListContainer()?.removeEventListener('scroll', handleScroll);
+			if (filterText.value) resetAndFetch();
+		} else {
+			filterOptions('');
+		}
+		filterText.value = '';
+	};
+
+	return {
+		isDropdownOpen,
+		onDropdownBeforeShow,
+		onDropdownBeforeHide,
+		onDropdownShow,
+		onDropdownHide,
+	};
+};

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

@@ -0,0 +1,198 @@
+import { reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import debounce from '../../../../scripts/debounce';
+import { dedupeByKey, isOptionSelected, toArray } from './useSelectUtils';
+
+export const useSelectOptions = ({
+	selected,
+	options,
+	optionLabel,
+	optionValue,
+	dataKey,
+	allowCustomValues,
+	searchMethod,
+}) => {
+	const { t } = useI18n();
+	const defaultOptionLabel = 'name';
+	const filterText = ref('');
+	const filteredOptions = ref(options.value);
+	const isLoading = ref(false);
+	const searchHasNext = ref(true);
+	const searchParams = reactive({
+		page: 1,
+		search: '',
+	});
+
+	/*
+	  @author @HlukhovYe
+	  selected options first, then other options
+	  selected values that are not in the list are prepended as-is
+	*/
+	const sortOptions = (opts) => {
+		const deduped = dedupeByKey(opts, dataKey.value);
+		if (!selected.value) return deduped;
+
+		const selectedAsArray = toArray(selected.value);
+
+		const selectedOptions = [];
+		const otherOptions = [];
+
+		for (const option of deduped) {
+			const isSelected = isOptionSelected(
+				option,
+				selectedAsArray,
+				dataKey.value,
+			);
+			(isSelected ? selectedOptions : otherOptions).push(option);
+		}
+
+		const topOptions =
+			dataKey.value || selectedOptions.length
+				? selectedOptions
+				: selectedAsArray;
+		return topOptions.concat(otherOptions);
+	};
+
+	const getOptionLabel = (option) => {
+		if (!option) 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 foundOption = (
+				filteredOptions.value as Record<string, unknown>[]
+			).find((o) => o[optionValue.value] === option);
+			return foundOption ? getOptionLabel(foundOption) : String(option);
+		}
+
+		if (optionLabel.value && option[optionLabel.value])
+			return option[optionLabel.value];
+		if (option.locale) {
+			if (Array.isArray(option.locale)) return t(...option.locale);
+			return t(option.locale);
+		}
+		return option[defaultOptionLabel] || option;
+	};
+
+	// Cache of full option objects for currently selected values,
+	// so they can be preserved in filteredOptions after filtering
+	const selectedOptionsCache = ref([]);
+
+	const updateSelectedOptionsCache = () => {
+		if (!selected.value) {
+			selectedOptionsCache.value = [];
+			return;
+		}
+		const selectedAsArray = toArray(selected.value);
+		const isSelected = (option) =>
+			isOptionSelected(option, selectedAsArray, dataKey.value);
+
+		// Find full option objects from filteredOptions that match selected values
+		const foundOptions = filteredOptions.value.filter(isSelected);
+		// Merge with previous cache, then remove entries no longer selected
+		const mergedOptions = dedupeByKey(
+			[
+				...selectedOptionsCache.value,
+				...foundOptions,
+			],
+			dataKey.value,
+		);
+		selectedOptionsCache.value = mergedOptions.filter(isSelected);
+	};
+
+	const fetchOptions = async () => {
+		if (!searchMethod.value) return;
+		const { search, page } = searchParams;
+		isLoading.value = true;
+		const { items, next } = await searchMethod.value({
+			search,
+			page,
+		});
+		const baseOptions =
+			searchParams.page === 1
+				? dedupeByKey(
+						[
+							...toArray(selected.value).filter(Boolean),
+							...selectedOptionsCache.value,
+							...items,
+						],
+						dataKey.value,
+					)
+				: filteredOptions.value.concat(items);
+		filteredOptions.value = sortOptions(baseOptions);
+		searchHasNext.value = next;
+		searchParams.page += 1;
+		isLoading.value = false;
+	};
+
+	const resetAndFetch = (search = '') => {
+		searchParams.search = search;
+		searchParams.page = 1;
+		fetchOptions();
+	};
+
+	const debouncedFetch = debounce((value) => resetAndFetch(value));
+
+	const filterOptions = (value) => {
+		filterText.value = value;
+		if (!searchMethod.value) {
+			const matchingOptions = options.value.filter((option) =>
+				getOptionLabel(option).toLowerCase().includes(value.toLowerCase()),
+			);
+			filteredOptions.value = sortOptions(
+				dedupeByKey(
+					[
+						...selectedOptionsCache.value,
+						...matchingOptions,
+					],
+					dataKey.value,
+				),
+			);
+		} else {
+			debouncedFetch(value);
+		}
+	};
+
+	const addSelectedValueToList = (newVal) => {
+		// If the selected value is not in the list, add it
+		if (!newVal || !searchMethod.value) return;
+		const selectedAsArray = toArray(newVal);
+		const missingSelected = selectedAsArray.filter(
+			(s) => !isOptionSelected(s, filteredOptions.value, dataKey.value),
+		);
+		if (missingSelected.length) {
+			filteredOptions.value = sortOptions(
+				dedupeByKey(
+					[
+						...missingSelected,
+						...filteredOptions.value,
+					],
+					dataKey.value,
+				),
+			);
+		}
+	};
+
+	watch(
+		() => selected.value,
+		(newVal) => {
+			updateSelectedOptionsCache();
+			addSelectedValueToList(newVal);
+		},
+	);
+
+	return {
+		filterText,
+		filteredOptions,
+		isLoading,
+		searchHasNext,
+		sortOptions,
+		getOptionLabel,
+		fetchOptions,
+		resetAndFetch,
+		filterOptions,
+		updateSelectedOptionsCache,
+	};
+};

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

@@ -0,0 +1,32 @@
+export const toArray = (value) =>
+	Array.isArray(value)
+		? value
+		: [
+				value,
+			];
+
+export const isOptionSelected = (option, selectedArray, dataKey) => {
+	return dataKey
+		? selectedArray.some((s) => s != null && s[dataKey] === option[dataKey])
+		: selectedArray.some((s) => s === option);
+};
+
+export const dedupeByKey = (items: unknown[], key: string): unknown[] => {
+	if (!key) {
+		// no dataKey — fall back to reference dedup via Set
+		return [
+			...new Set(items),
+		];
+	}
+	const seen = new Map();
+	for (const item of items) {
+		const k =
+			item != null && typeof item === 'object'
+				? (item as Record<string, unknown>)[key]
+				: item;
+		if (!seen.has(k)) seen.set(k, item);
+	}
+	return [
+		...seen.values(),
+	];
+};

package/src/{composables → components/_internals/composables}/useWtTable/useWtTable.ts

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

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

@@ -60,8 +60,10 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { WtButton, WtIcon, WtSlider } from '../../../../../components';
 import { ComponentSize } from '../../../../../enums';
+import WtButton from '../../../../wt-button/wt-button.vue';
+import WtIcon from '../../../../wt-icon/wt-icon.vue';
+import WtSlider from '../../../../wt-slider/wt-slider.vue';
 
 interface Props {
 	modelValue?: number;

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

@@ -17,8 +17,8 @@
 </template>
 
 <script setup lang="ts">
-import { WtPopover } from '../../../components';
 import { ComponentSize } from '../../../enums';
+import WtPopover from '../../wt-popover/wt-popover.vue';
 import SpeedSettings from './components/speed-settings/speed-settings.vue';
 
 export interface MediaSettings {
@@ -51,7 +51,7 @@ function handlePlaybackRateUpdate(playbackRate: number) {
 
 <style scoped>
 .settings-panel {
-	display: flex;
+  display: flex;
 }
 
 .settings-panel__button {

package/src/components/index.js

@@ -31,6 +31,7 @@ import WtLoadBar from './wt-load-bar/wt-load-bar.vue';
 import WtLoader from './wt-loader/wt-loader.vue';
 import WtLogo from './wt-logo/wt-logo.vue';
 import WtMessage from './wt-message/wt-message.vue';
+import WtMultiSelect from './wt-multi-select/wt-multi-select.vue';
 import WtNavigationBar from './wt-navigation-bar/wt-navigation-bar.vue';
 import WtNotification from './wt-notification/wt-notification.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
@@ -40,6 +41,7 @@ import WtProgressBar from './wt-progress-bar/wt-progress-bar.vue';
 import WtRadio from './wt-radio/wt-radio.vue';
 import WtRoundedAction from './wt-rounded-action/wt-rounded-action.vue';
 import WtSelect from './wt-select/wt-select.vue';
+import WtSingleSelect from './wt-single-select/wt-single-select.vue';
 import WtSwitcher from './wt-switcher/wt-switcher.vue';
 import WtTextarea from './wt-textarea/wt-textarea.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
@@ -252,6 +254,8 @@ const Components = {
 	WtChatEmoji,
 	WtExpansionCard,
 	WtDatetimeText,
+	WtSingleSelect,
+	WtMultiSelect,
 	WtScreenRecordingsAction,
 	WtInlineAddPanel,
 	WtCallMediaAction,
@@ -305,6 +309,7 @@ export {
 	WtLoader,
 	WtLogo,
 	WtMessage,
+	WtMultiSelect,
 	WtNavigationBar,
 	WtNavigationMenu,
 	WtNotification,
@@ -325,6 +330,7 @@ export {
 	WtSelect,
 	WtSelectionPopup,
 	WtSendMessagePopup,
+	WtSingleSelect,
 	WtSlider,
 	WtStartPage,
 	WtStatusSelect,

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

@@ -6,7 +6,12 @@
   >
     <slot />
     <template #removeicon>
-      <wt-icon class="wt-chip__close-icon" icon="close--filled" />
+      <wt-icon-btn
+				class="wt-chip__close-icon" 
+				icon="close--filled" 
+				:size="ComponentSize.SM"
+				@click="emit('remove', $event)"
+			/>
     </template>
   </p-chip>
 </template>
@@ -14,7 +19,7 @@
 <script setup lang="ts">
 import type { ChipProps } from 'primevue/chip';
 
-import { ChipColor } from '../../enums';
+import { ChipColor, ComponentSize } from '../../enums';
 
 interface WtProps extends ChipProps {
 	/**
@@ -36,6 +41,10 @@ withDefaults(defineProps<WtProps>(), {
 	color: ChipColor.MAIN,
 	removable: false,
 });
+
+const emit = defineEmits<{
+	remove: [];
+}>();
 </script>
 
 <style scoped>

package/src/components/wt-expansion-card/wt-expansion-card.vue

@@ -34,8 +34,8 @@
 
 <script setup lang="ts">
 import { toRef } from 'vue';
-import { useExpansion } from '../../composables';
 import { ComponentSize } from '../../enums';
+import { useExpansion } from '../_internals/composables';
 import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 const props = withDefaults(

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

@@ -31,8 +31,8 @@
 
 <script setup lang="ts">
 import { toRef } from 'vue';
-import { useExpansion } from '../../composables/useExpansion/useExpansion';
 import { ComponentSize } from '../../enums';
+import { useExpansion } from '../_internals/composables/useExpansion/useExpansion';
 import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 /**

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

@@ -114,9 +114,11 @@ import {
 	ref,
 	watch,
 } from 'vue';
-
-import { useGalleriaFullscreen, useGalleriaMaskClick } from '../../composables';
 import DeleteConfirmationPopup from '../../modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
+import {
+	useGalleriaFullscreen,
+	useGalleriaMaskClick,
+} from '../_internals/composables';
 import type { WtGalleriaItem } from './types/WtGalleria.d.ts';
 
 /**

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

@@ -86,10 +86,9 @@ import {
 	useSlots,
 	useTemplateRef,
 } from 'vue';
-
-import { useInputControl } from '../../composables';
 import { ComponentSize, MessageColor, MessageVariant } from '../../enums';
 import { useValidation } from '../../mixins/validationMixin/useValidation';
+import { useInputControl } from '../_internals/composables';
 
 interface WtInputNumberProps extends /* @vue-ignore */ InputNumberProps {
 	label?: string;