@webitel/ui-sdk 26.8.104 → 26.8.106

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

@@ -0,0 +1,106 @@
+import { onBeforeUnmount, type Ref } from 'vue';
+
+import type { SelectComponentRef } from './types';
+
+/** ~500ms at 60fps — opens anyway if something animates without end. */
+const MAX_SETTLE_FRAMES = 30;
+
+/** `getAnimations()` marks the real end; polling geometry reads a lull mid-animation as one. */
+const waitForAncestorAnimations = async (el: HTMLElement) => {
+	const animations: Animation[] = [];
+	let node: HTMLElement | null = el;
+
+	while (node) {
+		if (typeof node.getAnimations === 'function') {
+			animations.push(...node.getAnimations());
+		}
+		node = node.parentElement;
+	}
+
+	if (!animations.length) return;
+
+	await Promise.all(
+		animations.map((animation) => animation.finished.catch(() => undefined)),
+	);
+};
+
+/**
+ * Opens the dropdown (`autoOpen`) only once the select has stopped moving.
+ *
+ * In a popover the trigger keeps shifting through the 300ms enter animation,
+ * and primevue aligns the overlay to the trigger's rect — open too early and
+ * the dropdown sits in the wrong place until it snaps. The options half is the
+ * caller's: `useSelect` calls this after the first fetch resolves.
+ *
+ * [WTEL-10353](https://webitel.atlassian.net/browse/WTEL-10353)
+ */
+export const useSelectAutoOpen = (
+	autoOpen: (() => boolean | undefined) | undefined,
+	selectRef: Ref<SelectComponentRef | undefined>,
+) => {
+	let rafId: number | null = null;
+	let isCancelled = false;
+
+	const cancel = () => {
+		isCancelled = true;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+	};
+
+	const waitForSettledRect = () =>
+		new Promise<void>((resolve) => {
+			let previousRect: DOMRect | undefined;
+			let frames = 0;
+
+			const step = () => {
+				rafId = null;
+				if (isCancelled) return;
+
+				const el = selectRef.value?.$el;
+				if (!el) return;
+
+				const rect = el.getBoundingClientRect();
+				const isSettled =
+					!!previousRect &&
+					rect.top === previousRect.top &&
+					rect.left === previousRect.left &&
+					rect.width === previousRect.width &&
+					rect.height === previousRect.height;
+
+				if (isSettled || ++frames >= MAX_SETTLE_FRAMES) {
+					resolve();
+					return;
+				}
+
+				previousRect = rect;
+				rafId = requestAnimationFrame(step);
+			};
+
+			rafId = requestAnimationFrame(step);
+		});
+
+	const openWhenSettled = async () => {
+		if (!autoOpen?.()) return;
+
+		const el = selectRef.value?.$el;
+		if (!el) return;
+
+		isCancelled = false;
+
+		await waitForAncestorAnimations(el);
+		if (isCancelled) return;
+
+		await waitForSettledRect();
+		if (isCancelled) return;
+
+		selectRef.value?.show?.();
+	};
+
+	onBeforeUnmount(cancel);
+
+	return {
+		openWhenSettled,
+	};
+};

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

@@ -11,5 +11,6 @@ export interface PrimevueInstance {
 export interface PrimevueOverlayInstance extends PrimevueInstance {
 	overlay?: HTMLElement;
 	alignOverlay?: () => void;
+	show?: (event?: Event) => void;
 	hide?: () => void;
 }

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

@@ -31,10 +31,12 @@ import { ChipColor, ComponentSize } from '../../enums';
 
 interface WtProps extends ChipProps {
 	/**
-	 * Chip color. "main" and "outline" are chip-specific colors
+	 * Chip color. "main" and "transfer" are chip-specific colors; the rest follow
+	 * the semantic scheme. "info" renders as a light tint with dark text, like
+	 * "main", rather than a solid fill.
 	 * @type {ChipColor}
 	 * @default ChipColor.MAIN
-	 * @options ['main', 'outline', 'accent', 'secondary', 'secondary-50', 'success', 'danger', 'transfer']
+	 * @options ['main', 'primary', 'on-primary', 'secondary', 'success', 'warning', 'error', 'info', 'transfer']
 	 */
 	color?: ChipColor;
 	/**

package/src/components/wt-multi-select/wt-multi-select.vue

@@ -167,6 +167,7 @@ interface Props extends Omit<SelectProps, 'options'> {
 	 * false disables options search
 	 */
 	filterable?: boolean;
+	autoOpen?: boolean;
 	/**
 	 * true shows the clear button
 	 */
@@ -260,6 +261,7 @@ const {
 	searchMethod: computed(() => props.searchMethod),
 	selectId: computed(() => selectId),
 	isSingle: false,
+	autoOpen: () => props.autoOpen,
 	strictApiOptions: computed(() => props.strictApiOptions),
 	emit,
 });

package/src/components/wt-single-select/wt-single-select.vue

@@ -140,6 +140,7 @@ interface Props extends Omit<SelectProps, 'size' | 'options'> {
 	 * false disables options search
 	 */
 	filterable?: boolean;
+	autoOpen?: boolean;
 	/**
 	 * true shows the clear button
 	 */
@@ -227,6 +228,7 @@ const {
 	searchMethod: computed(() => props.searchMethod),
 	selectId: computed(() => selectId),
 	isSingle: true,
+	autoOpen: () => props.autoOpen,
 	strictApiOptions: computed(() => props.strictApiOptions),
 	emit,
 });

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

@@ -673,7 +673,13 @@ onUnmounted(() => {
 .wt-table__empty {
   position: absolute;
   inset: 0;
+  z-index: 1;
   display: flex;
+  pointer-events: none;
+}
+
+.wt-table__empty > * {
+  pointer-events: auto;
 }
 
 .wt-table :deep(.wt-table__wrapper--overlay tr.p-datatable-empty-message) {

package/src/enums/ChipColor/ChipColor.ts

@@ -6,6 +6,7 @@ export const ChipColor = {
 	SUCCESS: 'success',
 	WARNING: 'warning',
 	ERROR: 'error',
+	INFO: 'info',
 	TRANSFER: 'transfer',
 } as const;
 

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

@@ -139,63 +139,63 @@ import { ref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import useUploadCsv, {
-  type UseUploadCsvProps,
+	type UseUploadCsvProps,
 } from '../composable/useUploadCsv';
 import type { CsvMappingField } from '../scripts/normalizeCSVData';
 import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
 
 interface CharsetOption {
-  name: string;
-  value: string;
+	name: string;
+	value: string;
 }
 
 interface Props extends UseUploadCsvProps {
-  file: File | null;
-  mappingFields: CsvMappingField[];
+	file: File | null;
+	mappingFields: CsvMappingField[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  file: null,
-  mappingFields: () => [],
-  handlingMode: HandlingCSVMode.PROCESS,
+	file: null,
+	mappingFields: () => [],
+	handlingMode: HandlingCSVMode.PROCESS,
 });
 
 const emit = defineEmits<{
-  (e: 'changeMappingFields', value: unknown[]): void;
-  (e: 'save'): void;
-  (e: 'close'): void;
+	(e: 'changeMappingFields', value: unknown[]): void;
+	(e: 'save'): void;
+	(e: 'close'): void;
 }>();
 
 const { t } = useI18n();
 
 const getFieldLabel = (field: CsvMappingField) =>
-  field.locale ? t(field.locale) : field.name;
+	field.locale ? t(field.locale) : field.name;
 
 const skipHeaders = ref(true);
 const separator = ref(',');
 const charsetOptions = ref<CharsetOption[]>([]);
 const charset = ref<CharsetOption>({
-  name: 'UTF-8',
-  value: 'utf-8',
+	name: 'UTF-8',
+	value: 'utf-8',
 });
 
 const { file, mappingFields } = toRefs(props);
 
 const {
-  isReadingFile,
-  isParsingCSV,
-  isParsingPreview,
-  csvPreviewTableData,
-  csvPreviewTableHeaders,
-  csvColumns,
-  allowSaveAction,
-  processCSV,
-  close,
+	isReadingFile,
+	isParsingCSV,
+	isParsingPreview,
+	csvPreviewTableData,
+	csvPreviewTableHeaders,
+	csvColumns,
+	allowSaveAction,
+	processCSV,
+	close,
 } = useUploadCsv({
-  props,
-  emit,
-  skipHeaders,
-  separator,
+	props,
+	emit,
+	skipHeaders,
+	separator,
 });
 </script>
 

package/src/modules/UploadCsvPopup/composable/__tests__/useUploadCsv.spec.js

@@ -91,7 +91,7 @@ describe('useUploadCsv', () => {
 	it('mounts a component with the composable', () => {
 		const wrapper = shallowMount(Component, {
 			props: {
-				file: {},
+				file: null,
 			},
 		});
 

package/src/modules/UploadCsvPopup/composable/useUploadCsv.ts

@@ -226,7 +226,9 @@ const useUploadCsv = ({
 		(file) => {
 			if (file) initUploadPopup();
 		},
-		{ immediate: true }, // if popup has v-if=file
+		{
+			immediate: true,
+		}, // if popup has v-if=file
 	);
 
 	return {

package/src/plugins/primevue/theme/components/chip/chip.js

@@ -46,6 +46,10 @@ const chip = {
 					colorName: 'error',
 					dt,
 				})}
+        ${generateCustomColorCss({
+					colorName: 'info',
+					dt,
+				})}
         ${generateCustomColorCss({
 					colorName: 'transfer',
 					dt,

package/src/scripts/__tests__/convertDuration.spec.js

@@ -18,4 +18,36 @@ describe('Case converters', () => {
 		const duration = '00:00:00';
 		expect(convertDuration(time)).toBe(duration);
 	});
+
+	describe('alwaysShowHours: false', () => {
+		it('drops the hours segment below an hour', () => {
+			expect(
+				convertDuration(111, {
+					alwaysShowHours: false,
+				}),
+			).toBe('01:51');
+		});
+
+		it('keeps the hours segment once there are hours to show', () => {
+			expect(
+				convertDuration(3725, {
+					alwaysShowHours: false,
+				}),
+			).toBe('01:02:05');
+		});
+
+		it('drops the hours segment for a false value too', () => {
+			expect(
+				convertDuration(null, {
+					alwaysShowHours: false,
+				}),
+			).toBe('00:00');
+		});
+	});
+
+	// live timers rely on the width staying fixed as they tick past an hour
+	it('keeps the hours segment by default', () => {
+		expect(convertDuration(111)).toBe('00:01:51');
+		expect(convertDuration(111, {})).toBe('00:01:51');
+	});
 });