@webitel/ui-sdk 26.8.87 → 26.8.91

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

@@ -1,4 +1,4 @@
-import "./components-DhOeTGOI.js";
+import "./components-x657jfzV.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-Ch6lqLcB.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-x657jfzV.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-D_t_B6D0.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-CKEEu4i6.js";
+import { n } from "./components-x657jfzV.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-DWUsS2CS.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-CKEEu4i6.js";
+import { a as t, o as n, r, s as i } from "./components-x657jfzV.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-Bd-axRRU.js}

@@ -1,4 +1,4 @@
-import { D as e } from "./components-DhOeTGOI.js";
+import { D as e } from "./components-x657jfzV.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.91",
 	"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-logo/wt-logo.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 const href = computed(
 	() => props.logoHref || import.meta.env.VITE_START_PAGE_URL,
 );
-const logoSrc = props.darkMode ? LogoDark : LogoLight;
+const logoSrc = computed(() => (props.darkMode ? LogoDark : LogoLight));
 
 const linkComponent = props.disabled
 	? 'span'

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/Appearance/components/wt-dark-mode-switcher.vue

@@ -1,37 +1,15 @@
 <script setup>
-import { inject, ref } from 'vue';
+import { ref } from 'vue';
 
 import WtIcon from '../../../components/wt-icon/wt-icon.vue';
 import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
 
-const props = defineProps({
-	namespace: {
-		type: String,
-		default: 'appearance',
-	},
-});
-
 const emit = defineEmits([
 	'changedMode',
 ]);
 
-// vuex's useStore() is just inject('store') under the hood (its default
-// injection key) — reading it directly avoids a hard dependency on the
-// `vuex` package, which apps that migrated fully to Pinia don't install.
-const store = inject('store', null);
-
 const mode = ref('light');
 
-const setThemeToStore = (theme) => {
-	// @author @stanislav-kozak
-	// when vuex store is not initialize and we use pinia
-	if (!store) {
-		return;
-	}
-
-	store.dispatch(`${props.namespace}/SET_THEME`, theme);
-};
-
 const setMode = (value) => {
 	if (value === 'dark') {
 		mode.value = 'dark';
@@ -43,7 +21,6 @@ const setMode = (value) => {
 		localStorage.setItem('theme', 'light');
 	}
 	emit('changedMode', value);
-	setThemeToStore(mode.value);
 };
 
 const toggleDarkMode = () => {
@@ -52,7 +29,6 @@ const toggleDarkMode = () => {
 	} else {
 		setMode('light');
 	}
-	setThemeToStore(mode.value);
 };
 
 const cachedTheme = localStorage.getItem('theme');

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>