@webitel/ui-sdk 26.8.87 → 26.8.88

package/dist/{wt-chat-emoji-D6mlvxYh.js → wt-chat-emoji-zW3fKPW8.js}

@@ -1,4 +1,4 @@
-import "./components-DhOeTGOI.js";
+import "./components-BSM66otL.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-B_9ZBu01.js";
 import { t as n } from "./wt-button-BwPz__rU.js";

package/dist/{wt-display-chip-items-CjoOIGEn.js → wt-display-chip-items-D-lzTp0d.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-DhOeTGOI.js";
+import { C as e, i as t } from "./components-BSM66otL.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { s as r } from "./utils-DReAiJBV.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-send-message-popup-ClhnL3uM.js → wt-send-message-popup-CiswBW69.js}

@@ -1,5 +1,5 @@
-import { n as e, r as t } from "./clients-BOVhef1Q.js";
-import { n } from "./components-DhOeTGOI.js";
+import { n as e, r as t } from "./clients-cfVUVngv.js";
+import { n } from "./components-BSM66otL.js";
 import { t as r } from "./vue-i18n-B88GcHzn.js";
 import { n as i } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, onMounted as u, openBlock as d, ref as f, resolveComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-table-column-select-CHzqRfXf.js → wt-table-column-select-BtFhZKPT.js}

@@ -20,30 +20,30 @@ var T = /* @__PURE__ */ e(r(), 1), E = "data:image/svg+xml,%3csvg%20viewBox='0%2
 		function P({ text: e, locale: t }) {
 			return !e && t ? typeof t == "string" ? k(t) : k(String(t[0]), ...t.slice(1)) : e;
 		}
-		let F = a(() => j.value.filter((e) => !r.staticHeaders.includes(e.value) && P(e)?.toLowerCase().includes(M.value?.toLowerCase())).sort((e, t) => P(e)?.localeCompare(P(t) ?? "") ?? 0));
-		function I() {
-			j.value = (0, T.default)(r.headers);
-		}
+		let F = a(() => j.value.filter((e) => !r.staticHeaders.includes(e.value) && P(e)?.toLowerCase().includes(M.value?.toLowerCase())).sort((e, t) => P(e)?.localeCompare(P(t) ?? "") ?? 0)), I = a(() => j.value.some((e) => e.show));
 		function L() {
-			N.value = !0;
+			j.value = (0, T.default)(r.headers);
 		}
 		function R() {
-			N.value = !1;
+			N.value = !0;
 		}
 		function z() {
-			f("change", j.value), R();
+			N.value = !1, M.value = "";
+		}
+		function B() {
+			f("change", j.value), z();
 		}
 		return S(N, () => {
-			I();
+			L();
 		}), (t, n) => {
 			let r = v("wt-icon-btn"), a = v("wt-icon"), f = v("wt-input-text"), p = v("wt-checkbox"), g = v("wt-empty"), S = v("wt-button"), T = v("wt-popup"), k = y("tooltip");
 			return h(), c("div", O, [w(d(r, {
 				icon: "column-select",
-				onClick: L
+				onClick: R
 			}, null, 512), [[k, t.$t("webitelUI.tableColumnSelect.title")]]), d(T, {
 				shown: N.value,
 				class: "wt-table-column-select__popup",
-				onClose: R
+				onClose: z
 			}, {
 				title: C(() => [u(b(t.$t("webitelUI.tableColumnSelect.title")), 1)]),
 				main: C(() => [e.enableSearch ? (h(), o(f, {
@@ -59,7 +59,10 @@ var T = /* @__PURE__ */ e(r(), 1), E = "data:image/svg+xml,%3csvg%20viewBox='0%2
 						onClick: n[0] ||= (e) => M.value = ""
 					})) : s("", !0)]),
 					_: 1
-				}, 8, ["model-value"])) : s("", !0), l("div", { class: m(["wt-table-column-select__popup-list-wrap", { "wt-table-column-select__popup-list-wrap__height-fixed": e.enableSearch }]) }, [F.value.length ? (h(), c("ul", {
+				}, 8, ["model-value"])) : s("", !0), l("div", { class: m(["wt-table-column-select__popup-list-wrap", {
+					"wt-table-column-select__popup-list-wrap__height-fixed": e.enableSearch,
+					"wt-table-column-select__popup-list-wrap--empty": !F.value.length
+				}]) }, [F.value.length ? (h(), c("ul", {
 					key: 0,
 					class: m([{
 						"wt-table-column-select__popup-list--md": F.value.length > 10 && F.value.length <= 20,
@@ -79,14 +82,18 @@ var T = /* @__PURE__ */ e(r(), 1), E = "data:image/svg+xml,%3csvg%20viewBox='0%2
 				])]))), 128))], 2)) : (h(), o(g, {
 					key: 1,
 					image: x(A) ? x(E) : x(D),
-					text: t.$t("webitelUI.empty.text.filters")
+					text: t.$t("webitelUI.empty.text.filters"),
+					size: "sm"
 				}, null, 8, ["image", "text"]))], 2)]),
-				actions: C(() => [d(S, { onClick: z }, {
+				actions: C(() => [d(S, {
+					disabled: !I.value,
+					onClick: B
+				}, {
 					default: C(() => [u(b(t.$t("reusable.add")), 1)], void 0, !0),
 					_: 1
-				}), d(S, {
+				}, 8, ["disabled"]), d(S, {
 					color: "secondary",
-					onClick: R
+					onClick: z
 				}, {
 					default: C(() => [u(b(t.$t("reusable.cancel")), 1)], void 0, !0),
 					_: 1
@@ -95,6 +102,6 @@ var T = /* @__PURE__ */ e(r(), 1), E = "data:image/svg+xml,%3csvg%20viewBox='0%2
 			}, 8, ["shown"])]);
 		};
 	}
-}), [["__scopeId", "data-v-0692a111"]]);
+}), [["__scopeId", "data-v-3cc9bbe8"]]);
 //#endregion
 export { k as default };

package/dist/{wt-type-extension-value-input-69hTFde6.js → wt-type-extension-value-input-DTjVuaQe.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clients-BOVhef1Q.js";
-import { a as t, o as n, r, s as i } from "./components-DhOeTGOI.js";
+import { t as e } from "./clients-cfVUVngv.js";
+import { a as t, o as n, r, s as i } from "./components-BSM66otL.js";
 import { t as a } from "./enums-B_9ZBu01.js";
 import { t as o } from "./vue-i18n-B88GcHzn.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-BjO98yMg.js → wt-vidstack-player-BUFABzVR.js}

@@ -1,4 +1,4 @@
-import { D as e } from "./components-DhOeTGOI.js";
+import { D as e } from "./components-BSM66otL.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-B_9ZBu01.js";
 import "./wt-button-BwPz__rU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.87",
+	"version": "26.8.88",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -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/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/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>