@webitel/ui-sdk 26.8.86 → 26.8.88

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.86",
+	"version": "26.8.88",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -131,7 +131,7 @@
 		"@tsconfig/node22": "^22.0.0",
 		"@types/deep-equal": "^1.0.4",
 		"@types/file-saver-es": "^2.0.3",
-		"@types/lodash": "^4.17.24",
+		"@types/lodash-es": "^4.17.12",
 		"@types/node": "^22.13.10",
 		"@vitejs/plugin-vue": "^6.0.3",
 		"@vitest/coverage-v8": "^4.1.3",
@@ -373,6 +373,10 @@
 			"types": "./types/modules/SaveCopyPopup/index.d.ts",
 			"import": "./src/modules/SaveCopyPopup/index.ts"
 		},
+		"./modules/TableVariableColumnSelect": {
+			"types": "./types/modules/TableVariableColumnSelect/index.d.ts",
+			"import": "./src/modules/TableVariableColumnSelect/index.ts"
+		},
 		"./plugins*": {
 			"types": "./types/plugins*",
 			"import": "./src/plugins*"

package/src/api/transformers/starToSearch/starToSearch.transformer.js

@@ -1,5 +1,5 @@
 import deepcopy from 'deep-copy';
-import get from 'lodash/get.js';
+import { get } from 'lodash-es';
 
 import updateObject from '../../../scripts/updateObject.js';
 

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

@@ -35,7 +35,10 @@
 				</wt-input-text>
         <div
 					class="wt-table-column-select__popup-list-wrap"
-					:class="{'wt-table-column-select__popup-list-wrap__height-fixed': enableSearch}"
+					:class="{
+						'wt-table-column-select__popup-list-wrap__height-fixed': enableSearch,
+						'wt-table-column-select__popup-list-wrap--empty': !changeableDraft.length,
+					}"
 				>
           <ul
 						v-if="changeableDraft.length"
@@ -63,11 +66,15 @@
 						v-else
 						:image="darkMode ? EmptyImageDark : EmptyImageLight"
 						:text="$t('webitelUI.empty.text.filters')"
+						size="sm"
 					/>
         </div>
       </template>
       <template #actions>
-        <wt-button @click="setShownColumns">
+        <wt-button
+					:disabled="!hasShownColumns"
+					@click="setShownColumns"
+				>
           {{ $t('reusable.add') }}
         </wt-button>
         <wt-button
@@ -147,6 +154,10 @@ const changeableDraft = computed(() =>
 		),
 );
 
+const hasShownColumns = computed(() =>
+	draft.value.some((header) => header.show),
+);
+
 function fillHeadersDraft() {
 	draft.value = deepCopy(props.headers);
 }
@@ -157,6 +168,7 @@ function openPopup() {
 
 function close() {
 	isColumnSelectPopup.value = false;
+	search.value = '';
 }
 
 function setShownColumns() {
@@ -190,6 +202,13 @@ watch(isColumnSelectPopup, () => {
 	height: 400px;
 }
 
+.wt-table-column-select__popup-list-wrap--empty {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}
+
 .wt-table-column-select__popup-list {
   max-width: 100%;
   display: flex;

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

@@ -122,6 +122,16 @@ interface Props extends /* @vue-ignore */ TextareaProps {
 	 * @default false
 	 */
 	autoresize?: boolean;
+	/**
+	 * @author PolinaSukhorukova-webitel
+	 *
+	 * [WTEL-10388](https://webitel.atlassian.net/browse/WTEL-10388)
+	 * Decouples submit-on-Enter from `autoresize` so a consumer can keep
+	 * auto-height while Enter inserts a newline (e.g. mobile chat).
+	 * @type {boolean}
+	 * @default true
+	 */
+	submitOnEnter?: boolean;
 	/**
 	 * Validation rules
 	 */
@@ -144,6 +154,7 @@ const props = withDefaults(defineProps<Props>(), {
 	rows: 1,
 	labelProps: undefined,
 	autoresize: false,
+	submitOnEnter: true,
 	v: undefined,
 	customValidators: () => [],
 });
@@ -181,7 +192,7 @@ const handleKeypress = (event: KeyboardEvent) => {
 	emit('keydown', event);
 	if (!props.autoresize) return;
 
-	if (event.key === 'Enter' && !event.shiftKey) {
+	if (props.submitOnEnter && event.key === 'Enter' && !event.shiftKey) {
 		emit('enter');
 		event.preventDefault();
 	}

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

@@ -14,6 +14,7 @@
       playsinline
       @close="emit('close')"
       @can-play="onCanPlay"
+      @provider-change="onProviderChange"
     >
       <media-provider class="wt-vidstack-player__provider"></media-provider>
 
@@ -52,6 +53,7 @@
 <script lang="ts" setup>
 import 'vidstack/player';
 import 'vidstack/player/ui';
+import { isVideoProvider, type MediaProviderChangeEvent } from 'vidstack';
 import { computed, provide, ref, toRefs, useTemplateRef } from 'vue';
 
 import { ComponentSize } from '../../enums';
@@ -202,6 +204,20 @@ const onCanPlay = (ev: Event) => {
 		playPromise.catch(() => {});
 	}
 };
+
+/**
+ * @author PolinaSukhorukova-webitel
+ *
+ * [WTEL-10386](https://webitel.atlassian.net/browse/WTEL-10386)
+ * iOS 18 opens the native <video> in system fullscreen when `playsinline` is
+ * applied late (only by the time playback starts). Setting it on `provider-change`
+ * guarantees the attribute is present before iOS decides inline vs fullscreen.
+ */
+const onProviderChange = (event: MediaProviderChangeEvent) => {
+	if (isVideoProvider(event.detail)) {
+		event.detail.video.playsInline = true;
+	}
+};
 </script>
 
 <style scoped>

package/src/composables/useCachedItemInstanceName/useCachedItemInstanceName.js

@@ -1,4 +1,4 @@
-import get from 'lodash/get.js';
+import { get } from 'lodash-es';
 import { onMounted, ref, watch } from 'vue';
 
 export const useCachedItemInstanceName = (

package/src/modules/AuditForm/components/audit-form.vue

@@ -44,7 +44,7 @@ import type {
 	EngineQuestion,
 	EngineQuestionAnswer,
 } from '@webitel/api-services/gen/models';
-import cloneDeep from 'lodash/cloneDeep.js';
+import { cloneDeep } from 'lodash-es';
 import {
 	computed,
 	nextTick,

package/src/modules/CardStoreModule/store/CardStoreModule.js

@@ -1,5 +1,5 @@
 import deepCopy from 'deep-copy';
-import set from 'lodash/set.js';
+import { set } from 'lodash-es';
 
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
 

package/src/modules/TableVariableColumnSelect/components/__tests__/wt-table-variable-column-select.spec.ts

@@ -0,0 +1,101 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+
+import WtTableVariableColumnSelect from '../wt-table-variable-column-select.vue';
+
+const storageKey = 'test/variable-headers';
+
+const mountSelect = (
+	props: Partial<{
+		storageKey: string;
+		title: string;
+	}> = {},
+) =>
+	mount(WtTableVariableColumnSelect, {
+		props: {
+			storageKey,
+			title: 'Select variables',
+			...props,
+		},
+		global: {
+			stubs: {
+				WtBadge: {
+					template: '<div><slot /></div>',
+				},
+				WtIconBtn: true,
+				WtPopup: {
+					props: [
+						'shown',
+						'size',
+					],
+					template:
+						'<div v-if="shown" class="wt-popup__popup"><slot name="title" /><slot name="main" /><slot name="actions" /></div>',
+				},
+				WtInputText: true,
+				WtButton: {
+					props: [
+						'disabled',
+						'loading',
+						'color',
+					],
+					template:
+						'<button :disabled="disabled" @click="$attrs.onClick?.() || $emit(\'click\')"><slot /></button>',
+				},
+			},
+		},
+	});
+
+describe('WtTableVariableColumnSelect', () => {
+	beforeEach(() => {
+		localStorage.clear();
+	});
+
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtTableVariableColumnSelect, {
+			props: {
+				storageKey,
+				title: 'Select variables',
+			},
+		});
+		expect(wrapper.classes('wt-table-variable-column-select')).toBe(true);
+	});
+
+	it('opens popup on icon click', async () => {
+		const wrapper = mountSelect();
+		expect(wrapper.find('.wt-popup__popup').exists()).toBe(false);
+
+		wrapper
+			.findComponent({
+				name: 'WtIconBtn',
+			})
+			.vm.$emit('click');
+		await nextTick();
+
+		expect(wrapper.find('.wt-popup__popup').exists()).toBe(true);
+	});
+
+	it('restores keys from localStorage and emits update:variable-headers', async () => {
+		localStorage.setItem(storageKey, 'foo;bar');
+
+		const wrapper = mountSelect();
+		await nextTick();
+
+		const emitted = wrapper.emitted('update:variable-headers');
+		expect(emitted).toBeTruthy();
+		expect(emitted?.[0]?.[0]).toEqual(
+			expect.arrayContaining([
+				expect.objectContaining({
+					field: 'variables.foo',
+					text: 'foo',
+					show: false,
+				}),
+				expect.objectContaining({
+					field: 'variables.bar',
+					text: 'bar',
+					show: false,
+				}),
+			]),
+		);
+	});
+});

package/src/modules/TableVariableColumnSelect/components/wt-table-variable-column-select.vue

@@ -0,0 +1,278 @@
+<template>
+  <div class="wt-table-variable-column-select">
+    <wt-badge
+      v-tooltip="title"
+      :hidden="!draft.length"
+    >
+      <wt-icon-btn
+        icon="variable-select"
+        @click="open"
+      />
+    </wt-badge>
+
+    <wt-popup
+      :shown="shownPopup"
+      :size="size"
+      class="wt-table-variable-column-select__popup"
+      @close="close"
+    >
+      <template #title>
+        {{ title }}
+      </template>
+      <template #main>
+        <div class="wt-table-variable-column-select__form">
+          <wt-input-text
+            v-model:model-value="newVariableKey"
+            :label="t('vocabulary.keys', 1)"
+            class="wt-table-variable-column-select__input"
+          />
+          <wt-button
+            :disabled="r$.$error"
+            @click="addVariableHeader(newVariableKey)"
+          >
+            {{ t('reusable.add') }}
+          </wt-button>
+        </div>
+
+        <ul class="wt-table-variable-column-select__list">
+          <li
+            v-for="key in draft"
+            :key="key.field"
+            class="wt-table-variable-column-select__item"
+          >
+            <span class="wt-table-variable-column-select__label">{{ key.text }}</span>
+            <wt-icon-btn
+              icon="bucket"
+              @click="deleteKey(key)"
+            />
+          </li>
+        </ul>
+      </template>
+      <template #actions>
+        <wt-button
+          :disabled="!hasChanges"
+          :loading="isLoading"
+          @click="save"
+        >
+          {{ t('reusable.save') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >
+          {{ t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { Maybe } from '@regle/core';
+import { createRule, useRegle } from '@regle/core';
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ComponentSize } from '../../../enums/ComponentSize/ComponentSize';
+import isEmpty from '../../../scripts/isEmpty';
+import {
+	type TableVariableHeader,
+	VARIABLE_FIELD_PREFIX,
+} from '../composable/useTableVariableHeaders';
+
+const props = withDefaults(
+	defineProps<{
+		storageKey: string;
+		title: string;
+		fieldPrefix?: string;
+		size?: ComponentSize;
+	}>(),
+	{
+		fieldPrefix: VARIABLE_FIELD_PREFIX,
+		size: ComponentSize.SM,
+	},
+);
+
+const emit = defineEmits<{
+	'update:variable-headers': [
+		value: TableVariableHeader[],
+	];
+}>();
+
+const { t } = useI18n();
+
+const shownPopup = ref(false);
+
+const newVariableKey = ref('');
+
+const draft = reactive<TableVariableHeader[]>([]);
+
+let savedHeaders: TableVariableHeader[] = [];
+
+const isLoading = ref(false);
+
+const hasChanges = ref(false);
+
+const variablesFromDraft = computed(() => {
+	return draft.map(({ value }) => value.replace(props.fieldPrefix, ''));
+});
+
+const requiredRule = createRule({
+	validator: (value: Maybe<string>) => Boolean(value),
+	message: 'required',
+});
+
+const alreadyExistsRule = createRule({
+	validator: (value: Maybe<string>) =>
+		!value || !variablesFromDraft.value.includes(value),
+	message: 'alreadyExists',
+});
+
+const { r$ } = useRegle(
+	{
+		newVariableKey,
+	},
+	() => ({
+		newVariableKey: {
+			required: requiredRule,
+			alreadyExists: alreadyExistsRule,
+		},
+	}),
+	{
+		autoDirty: true,
+	},
+);
+r$.$touch();
+
+const cloneHeaders = (headers: TableVariableHeader[]) =>
+	headers.map((header) => ({
+		...header,
+	}));
+
+const replaceDraft = (headers: TableVariableHeader[]) => {
+	draft.splice(0, draft.length, ...cloneHeaders(headers));
+};
+
+const open = () => {
+	replaceDraft(savedHeaders);
+	newVariableKey.value = '';
+	hasChanges.value = false;
+	shownPopup.value = true;
+};
+
+const close = () => {
+	replaceDraft(savedHeaders);
+	newVariableKey.value = '';
+	hasChanges.value = false;
+	shownPopup.value = false;
+};
+
+const deleteKey = (keyToDelete: TableVariableHeader) => {
+	draft.splice(draft.indexOf(keyToDelete), 1);
+	hasChanges.value = true;
+};
+
+const localStorageSeparator = ';';
+
+const setToLocalStorage = (variableHeaders: string[]) => {
+	const storedValue = variableHeaders.join(localStorageSeparator);
+	if (storedValue) {
+		localStorage.setItem(props.storageKey, storedValue);
+	} else {
+		localStorage.removeItem(props.storageKey);
+	}
+};
+
+const getFromLocalStorage = () => {
+	return localStorage.getItem(props.storageKey)?.split(localStorageSeparator);
+};
+
+const addVariableHeader = (
+	variableKey: string,
+	{
+		trackChanges = true,
+	}: {
+		trackChanges?: boolean;
+	} = {},
+) => {
+	const variableHeader: TableVariableHeader = {
+		value: `${props.fieldPrefix}${variableKey}`,
+		show: true,
+		field: `${props.fieldPrefix}${variableKey}`,
+		text: variableKey,
+	};
+
+	draft.unshift(variableHeader);
+	if (trackChanges) {
+		hasChanges.value = true;
+	}
+
+	if (newVariableKey.value) {
+		newVariableKey.value = '';
+	}
+};
+
+const save = () => {
+	isLoading.value = true;
+	try {
+		setToLocalStorage(variablesFromDraft.value);
+		savedHeaders = cloneHeaders(draft);
+		emit('update:variable-headers', draft);
+	} finally {
+		isLoading.value = false;
+	}
+	close();
+};
+
+const restore = () => {
+	const storedValue = getFromLocalStorage();
+	if (!isEmpty(storedValue)) {
+		storedValue.forEach((variableKey) => {
+			addVariableHeader(variableKey, {
+				trackChanges: false,
+			});
+		});
+		draft.forEach((variable) => {
+			variable.show = false;
+		});
+		savedHeaders = cloneHeaders(draft);
+		emit('update:variable-headers', draft);
+	}
+};
+
+restore();
+</script>
+
+<style lang="scss" scoped>
+.wt-table-variable-column-select {
+  line-height: 0;
+}
+
+.wt-table-variable-column-select__form {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+  gap: var(--spacing-xs);
+}
+
+.wt-table-variable-column-select__input {
+  flex: 1;
+}
+
+.wt-table-variable-column-select__list {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--spacing-sm);
+  gap: var(--spacing-sm);
+}
+
+.wt-table-variable-column-select__item {
+  display: flex;
+  justify-content: space-between;
+}
+
+.wt-table-variable-column-select__label {
+  display: flex;
+  align-items: center;
+}
+</style>

package/src/modules/TableVariableColumnSelect/composable/__tests__/useTableVariableHeaders.spec.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+
+import {
+	isVariableHeader,
+	useTableVariableHeaders,
+	VARIABLE_FIELD_PREFIX,
+} from '../useTableVariableHeaders';
+
+describe('isVariableHeader', () => {
+	it('detects variable headers by field or value prefix', () => {
+		expect(
+			isVariableHeader({
+				field: `${VARIABLE_FIELD_PREFIX}city`,
+			}),
+		).toBe(true);
+		expect(
+			isVariableHeader({
+				value: `${VARIABLE_FIELD_PREFIX}city`,
+			}),
+		).toBe(true);
+		expect(
+			isVariableHeader({
+				field: 'name',
+				value: 'name',
+			}),
+		).toBe(false);
+	});
+});
+
+describe('useTableVariableHeaders', () => {
+	it('replaces existing variable headers and appends new ones', () => {
+		const headers = ref([
+			{
+				field: 'name',
+				value: 'name',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+		]);
+		const updateShownHeaders = vi.fn();
+
+		const { updateVariableHeaders } = useTableVariableHeaders({
+			headers,
+			updateShownHeaders,
+		});
+
+		updateVariableHeaders([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}new`,
+				value: `${VARIABLE_FIELD_PREFIX}new`,
+				text: 'new',
+				show: true,
+			},
+		]);
+
+		expect(updateShownHeaders).toHaveBeenCalledWith([
+			{
+				field: 'name',
+				value: 'name',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}old`,
+				value: `${VARIABLE_FIELD_PREFIX}old`,
+				text: 'old',
+				show: true,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}new`,
+				value: `${VARIABLE_FIELD_PREFIX}new`,
+				text: 'new',
+				show: true,
+			},
+		]);
+	});
+
+	it('removes variable headers missing from the incoming list', () => {
+		const headers = ref([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: false,
+			},
+			{
+				field: `${VARIABLE_FIELD_PREFIX}drop`,
+				value: `${VARIABLE_FIELD_PREFIX}drop`,
+				text: 'drop',
+				show: true,
+			},
+		]);
+		const updateShownHeaders = vi.fn();
+
+		const { updateVariableHeaders } = useTableVariableHeaders({
+			headers,
+			updateShownHeaders,
+		});
+
+		updateVariableHeaders([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: true,
+			},
+		]);
+
+		expect(updateShownHeaders).toHaveBeenCalledWith([
+			{
+				field: `${VARIABLE_FIELD_PREFIX}keep`,
+				value: `${VARIABLE_FIELD_PREFIX}keep`,
+				text: 'keep',
+				show: false,
+			},
+		]);
+	});
+});