@webitel/ui-sdk 26.8.125 → 26.8.127

package/dist/{wt-chat-emoji-BBo9lHMv.js → wt-chat-emoji-DScnZq3L.js}

@@ -1,4 +1,4 @@
-import "./components-BBqsnlPE.js";
+import "./components-ClBeAarp.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as t } from "./enums-Xag5PrU-.js";
 import { t as n } from "./wt-button-BfNbgYHy.js";

package/dist/{wt-display-chip-items-D_pECxhW.js → wt-display-chip-items-T7QK4gFh.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-BBqsnlPE.js";
+import { C as e, i as t } from "./components-ClBeAarp.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-B4S9Yz-y.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-f1bV8oUt.js → wt-send-message-popup-DXWOn8eg.js}

@@ -1,6 +1,6 @@
-import { n as e } from "./components-BBqsnlPE.js";
+import { n as e } from "./components-ClBeAarp.js";
 import "./convertDuration-B5bq1uxb.js";
-import { i as t, r as n } from "./clients-C8bQsU8l.js";
+import { i as t, r as n } from "./clients-BIYo95Lm.js";
 import { n as r } from "./vue-i18n-VBiROMZ4.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-type-extension-value-input-DpLKqfaa.js → wt-type-extension-value-input-BsIDJ-6K.js}

@@ -1,8 +1,8 @@
 import { a as e, c as t, i as n, n as r, r as i, s as a, t as o } from "./dist-EXdgfpvN.js";
 import { n as s } from "./genClient-CvWlQ0TZ.js";
 import { a as c } from "./caseConverters-DGri4uJo.js";
-import { a as l, o as u, r as d, s as f } from "./components-BBqsnlPE.js";
-import { a as p, n as m, t as h } from "./clients-C8bQsU8l.js";
+import { a as l, o as u, r as d, s as f } from "./components-ClBeAarp.js";
+import { a as p, n as m, t as h } from "./clients-BIYo95Lm.js";
 import { a as g, b as _, d as v, f as y, g as b, i as x, n as S, o as C, r as w, s as T, t as E, x as D } from "./enums-Xag5PrU-.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-BScwyGca.js";

package/dist/{wt-vidstack-player-CGkzRJBI.js → wt-vidstack-player-C_miJ8JF.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-BBqsnlPE.js";
+import { w as e } from "./components-ClBeAarp.js";
 import "./convertDuration-B5bq1uxb.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as n } from "./enums-Xag5PrU-.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.125",
+	"version": "26.8.127",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",
@@ -65,6 +65,7 @@
 		"@tinymce/tinymce-vue": "^6.3.0",
 		"@vuepic/vue-datepicker": "^4.5.1",
 		"@vueuse/components": "^14.0.0",
+		"@vueuse/core": "^14.0.0",
 		"autosize": "^6.0.1",
 		"csv-parse": "^7.0.2",
 		"csv-stringify": "^5.5.3",

package/src/components/index.js

@@ -14,6 +14,7 @@ import WtCallMediaMetric from './wt-call-media-metric/wt-call-media-metric.vue';
 import WtCard from './wt-card/wt-card.vue';
 import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
 import WtChip from './wt-chip/wt-chip.vue';
+import WtContentWrapper from './wt-content-wrapper/wt-content-wrapper.vue';
 import WtDatetimeText from './wt-datetime-text/wt-datetime-text.vue';
 import WtDivider from './wt-divider/wt-divider.vue';
 import WtEmpty from './wt-empty/wt-empty.vue';
@@ -30,12 +31,14 @@ import WtInputText from './wt-input-text/wt-input-text.vue';
 import WtIntersectionObserver from './wt-intersection-observer/wt-intersection-observer.vue';
 import WtItemLink from './wt-item-link/wt-item-link.vue';
 import WtLabel from './wt-label/wt-label.vue';
+import WtLayout from './wt-layout/wt-layout.vue';
 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 WtPage from './wt-page/wt-page.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
 import WtPassword from './wt-password/wt-password.vue';
 import WtPopup from './wt-popup/wt-popup.vue';
@@ -239,9 +242,11 @@ const Components = {
 	WtButton,
 	WtChip,
 	WtConfirmDialog,
+	WtContentWrapper,
 	WtDivider,
 	WtTooltip,
 	WtLabel,
+	WtLayout,
 	WtLoader,
 	WtRoundedAction,
 	WtReplaceTransition,
@@ -274,6 +279,7 @@ const Components = {
 	WtHeaderActions,
 	WtErrorPage,
 	WtNotificationsBar,
+	WtPage,
 	WtPageWrapper,
 	WtDualPanel,
 	WtPagination,
@@ -331,6 +337,7 @@ export {
 	WtCheckbox,
 	WtChip,
 	WtConfirmDialog,
+	WtContentWrapper,
 	WtContextMenu,
 	WtCopyAction,
 	WtDatepicker,
@@ -359,6 +366,7 @@ export {
 	WtIntersectionObserver,
 	WtItemLink,
 	WtLabel,
+	WtLayout,
 	WtLoadBar,
 	WtLoader,
 	WtLogo,
@@ -367,6 +375,7 @@ export {
 	WtNavigationBar,
 	WtNavigationMenu,
 	WtNotificationsBar,
+	WtPage,
 	WtPageHeader,
 	WtPageWrapper,
 	WtPagination,

package/src/components/wt-content-wrapper/__tests__/WtContentWrapper.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtContentWrapper from '../wt-content-wrapper.vue';
+
+describe('WtContentWrapper', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtContentWrapper);
+		expect(wrapper.classes('wt-content-wrapper')).toBe(true);
+	});
+
+	it('renders content via default slot', () => {
+		const content = 'Content';
+		const wrapper = shallowMount(WtContentWrapper, {
+			slots: {
+				default: content,
+			},
+		});
+		expect(wrapper.text()).toBe(content);
+	});
+
+	it('aligns content to the left by default', () => {
+		const wrapper = shallowMount(WtContentWrapper);
+		expect(wrapper.classes('wt-content-wrapper--align-left')).toBe(true);
+	});
+
+	it('applies align prop', () => {
+		const wrapper = shallowMount(WtContentWrapper, {
+			props: {
+				align: 'stretch',
+			},
+		});
+		expect(wrapper.classes('wt-content-wrapper--align-stretch')).toBe(true);
+	});
+});

package/src/components/wt-content-wrapper/_variables.css

@@ -0,0 +1,10 @@
+:root {
+	--wt-content-wrapper-background-color: var(--p-surface-0);
+	--wt-content-wrapper-border-radius: var(--p-border-radius-lg);
+	--wt-content-wrapper-padding: var(--spacing-sm);
+	--wt-content-wrapper-gap: var(--spacing-sm);
+}
+
+:root.theme--dark {
+	--wt-content-wrapper-background-color: var(--p-surface-800);
+}

package/src/components/wt-content-wrapper/wt-content-wrapper.vue

@@ -0,0 +1,46 @@
+<template>
+  <div :class="`wt-content-wrapper--align-${align}`" class="wt-content-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Structural container inside `wt-layout`: owns inner padding, gap and
+ * horizontal alignment of its content. No business logic, no own visuals
+ * beyond the surface.
+ */
+interface Props {
+	align?: 'left' | 'center' | 'stretch';
+}
+
+withDefaults(defineProps<Props>(), {
+	align: 'left',
+});
+</script>
+
+<style scoped>
+.wt-content-wrapper {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  gap: var(--wt-content-wrapper-gap);
+  box-sizing: border-box;
+  border-radius: var(--wt-content-wrapper-border-radius);
+  background: var(--wt-content-wrapper-background-color);
+  padding: var(--wt-content-wrapper-padding);
+  min-width: 0;
+}
+
+.wt-content-wrapper--align-left {
+  align-items: flex-start;
+}
+
+.wt-content-wrapper--align-center {
+  align-items: center;
+}
+
+.wt-content-wrapper--align-stretch {
+  align-items: stretch;
+}
+</style>

package/src/components/wt-layout/__tests__/WtLayout.spec.js

@@ -0,0 +1,192 @@
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
+
+import WtLayout from '../wt-layout.vue';
+
+const mockRect = (el, width) => {
+	el.getBoundingClientRect = () => ({
+		width,
+	});
+	el.style.minWidth = '320px';
+};
+
+const mountPair = (props) => {
+	const Host = {
+		components: {
+			WtLayout,
+		},
+		template: `
+      <div>
+        <wt-layout v-bind="layoutProps" @resize="onResize" />
+        <wt-layout class="neighbor" />
+      </div>
+    `,
+		data: () => ({
+			layoutProps: props,
+			resized: [],
+		}),
+		methods: {
+			onResize(width) {
+				this.resized.push(width);
+			},
+		},
+	};
+	const wrapper = mount(Host, {
+		attachTo: document.body,
+	});
+	const [layout, neighbor] = wrapper.findAll('.wt-layout');
+	mockRect(layout.element, 400);
+	mockRect(neighbor.element, 600);
+	return {
+		wrapper,
+		layout,
+	};
+};
+
+describe('WtLayout', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtLayout);
+		expect(wrapper.classes('wt-layout')).toBe(true);
+	});
+
+	it('renders content via default slot', () => {
+		const content = 'Layout content';
+		const wrapper = shallowMount(WtLayout, {
+			slots: {
+				default: content,
+			},
+		});
+		expect(wrapper.text()).toBe(content);
+	});
+
+	it('is fluid without defaultWidth', () => {
+		const wrapper = shallowMount(WtLayout);
+		expect(wrapper.classes('wt-layout--fixed')).toBe(false);
+		expect(wrapper.attributes('style')).toBeUndefined();
+	});
+
+	it('starts at defaultWidth', () => {
+		const wrapper = shallowMount(WtLayout, {
+			props: {
+				defaultWidth: 320,
+			},
+		});
+		expect(wrapper.classes('wt-layout--fixed')).toBe(true);
+		expect(wrapper.element.style.flexBasis).toBe('320px');
+	});
+
+	it('renders resizer only when resizable', async () => {
+		const wrapper = shallowMount(WtLayout);
+		expect(wrapper.find('.wt-layout__resizer').exists()).toBe(false);
+		await wrapper.setProps({
+			resizable: true,
+		});
+		expect(wrapper.find('.wt-layout__resizer').exists()).toBe(true);
+	});
+
+	it('resizes by dragging, bounded by the neighbor min width', async () => {
+		const { wrapper, layout } = mountPair({
+			resizable: true,
+		});
+		const resizer = layout.find('.wt-layout__resizer');
+
+		await resizer.trigger('pointerdown', {
+			button: 0,
+			clientX: 400,
+		});
+		window.dispatchEvent(
+			new PointerEvent('pointermove', {
+				clientX: 500,
+			}),
+		);
+		await wrapper.vm.$nextTick();
+		expect(layout.element.style.flexBasis).toBe('500px');
+
+		// neighbor is 600px wide with 320px min => max 400 + 280 = 680
+		window.dispatchEvent(
+			new PointerEvent('pointermove', {
+				clientX: 2000,
+			}),
+		);
+		window.dispatchEvent(new PointerEvent('pointerup'));
+		await wrapper.vm.$nextTick();
+		expect(layout.element.style.flexBasis).toBe('680px');
+		expect(wrapper.vm.resized).toEqual([
+			680,
+		]);
+		wrapper.unmount();
+	});
+
+	it('does not shrink below its min width', async () => {
+		const { wrapper, layout } = mountPair({
+			resizable: true,
+		});
+		const resizer = layout.find('.wt-layout__resizer');
+
+		await resizer.trigger('pointerdown', {
+			button: 0,
+			clientX: 400,
+		});
+		window.dispatchEvent(
+			new PointerEvent('pointermove', {
+				clientX: 0,
+			}),
+		);
+		window.dispatchEvent(new PointerEvent('pointerup'));
+		await wrapper.vm.$nextTick();
+		expect(layout.element.style.flexBasis).toBe('320px');
+		wrapper.unmount();
+	});
+
+	it('reports the rendered width, keeping the preferred one when shrunk', async () => {
+		let notify;
+		vi.stubGlobal(
+			'ResizeObserver',
+			class {
+				constructor(callback) {
+					notify = callback;
+				}
+				observe() {}
+				disconnect() {}
+			},
+		);
+		const wrapper = shallowMount(WtLayout, {
+			props: {
+				defaultWidth: 480,
+				resizable: true,
+			},
+		});
+		await flushPromises();
+		// container got narrower: flex shrinks the layout below its preferred width
+		notify([
+			{
+				borderBoxSize: [
+					{
+						inlineSize: 400.4,
+						blockSize: 600,
+					},
+				],
+			},
+		]);
+		await wrapper.vm.$nextTick();
+
+		expect(
+			wrapper.find('.wt-layout__resizer').attributes('aria-valuenow'),
+		).toBe('400');
+		expect(wrapper.element.style.flexBasis).toBe('480px');
+		vi.unstubAllGlobals();
+	});
+
+	it('resizes with arrow keys', async () => {
+		const { wrapper, layout } = mountPair({
+			resizable: true,
+		});
+		await layout.find('.wt-layout__resizer').trigger('keydown', {
+			key: 'ArrowRight',
+		});
+		expect(layout.element.style.flexBasis).toBe('416px');
+		expect(wrapper.vm.resized).toEqual([
+			416,
+		]);
+		wrapper.unmount();
+	});
+});

package/src/components/wt-layout/_variables.css

@@ -0,0 +1,15 @@
+:root {
+	--wt-layout-background-color: var(--p-surface-0);
+	--wt-layout-border-radius: var(--p-border-radius-lg);
+	--wt-layout-padding: 0;
+	--wt-layout-gap: 0;
+	--wt-layout-min-width: 320px;
+
+	--wt-layout-resizer-width: var(--spacing-xs);
+	--wt-layout-resizer-line-width: 2px;
+	--wt-layout-resizer-active-color: var(--p-primary-color);
+}
+
+:root.theme--dark {
+	--wt-layout-background-color: var(--p-surface-800);
+}

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

@@ -0,0 +1,228 @@
+<template>
+  <section
+    ref="root"
+    :class="{
+      'wt-layout--fixed': width !== undefined,
+      'wt-layout--resizing': resizing,
+    }"
+    :style="width !== undefined ? { flexBasis: `${width}px` } : undefined"
+    class="wt-layout"
+  >
+    <slot />
+    <div
+      v-if="resizable"
+      :aria-valuenow="Math.round(renderedWidth)"
+      :class="`wt-layout__resizer--${resizeEdge}`"
+      aria-orientation="vertical"
+      class="wt-layout__resizer"
+      role="separator"
+      tabindex="0"
+      @keydown="handleResizerKeydown"
+      @pointerdown="startResize"
+    />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { useElementSize } from '@vueuse/core';
+import { onBeforeUnmount, ref, useTemplateRef, watch } from 'vue';
+
+/**
+ * Structural container inside `wt-page` body. Fills available width
+ * (min 320px) unless `defaultWidth` is set; can be resized by dragging
+ * its edge, the adjacent layout compensates. To hide a layout, the parent
+ * (i.e. its sibling's owner) removes it with `v-if` / `v-show` — the rest
+ * redistribute the space automatically.
+ */
+interface Props {
+	/** Initial width in px. Without it, the layout is fluid. */
+	defaultWidth?: number;
+	/** Allows the user to change the width by dragging the edge. */
+	resizable?: boolean;
+	/** Which edge carries the resize handle. The neighbor on that side compensates. */
+	resizeEdge?: 'start' | 'end';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	defaultWidth: undefined,
+	resizable: false,
+	resizeEdge: 'end',
+});
+
+const emit = defineEmits<{
+	/** Emitted once a resize is finished, with the new width in px. */
+	resize: [
+		width: number,
+	];
+}>();
+
+const KEYBOARD_STEP = 16;
+const KEY_DIRECTION: Partial<Record<string, 1 | -1>> = {
+	ArrowLeft: -1,
+	ArrowRight: 1,
+};
+
+const root = useTemplateRef<HTMLElement>('root');
+/**
+ * Preferred width: what the user dragged to. A fixed layout may still render
+ * narrower (it shrinks with its container) and returns to this width once
+ * there is room again.
+ */
+const width = ref<number | undefined>(props.defaultWidth);
+/** Width actually on screen, kept in sync with container resizes. */
+const { width: renderedWidth } = useElementSize(root, undefined, {
+	box: 'border-box',
+});
+const resizing = ref(false);
+
+watch(
+	() => props.defaultWidth,
+	(value) => {
+		width.value = value;
+	},
+);
+
+const getWidthBounds = () => {
+	const el = root.value as HTMLElement;
+	const current = el.getBoundingClientRect().width;
+	const min = Number.parseFloat(getComputedStyle(el).minWidth) || 0;
+	const neighbor =
+		props.resizeEdge === 'end'
+			? el.nextElementSibling
+			: el.previousElementSibling;
+	if (!(neighbor instanceof HTMLElement)) {
+		return {
+			current,
+			min,
+			max: Number.POSITIVE_INFINITY,
+		};
+	}
+	const neighborMin =
+		Number.parseFloat(getComputedStyle(neighbor).minWidth) || 0;
+	const max = current + neighbor.getBoundingClientRect().width - neighborMin;
+	return {
+		current,
+		min,
+		max: Math.max(min, max),
+	};
+};
+
+const clamp = (value: number, min: number, max: number) =>
+	Math.min(Math.max(value, min), max);
+
+let stopResize: (() => void) | null = null;
+
+const startResize = (event: PointerEvent) => {
+	if (!root.value || event.button !== 0) return;
+	event.preventDefault();
+
+	const { current, min, max } = getWidthBounds();
+	const startX = event.clientX;
+	const direction = props.resizeEdge === 'end' ? 1 : -1;
+	width.value = current;
+	resizing.value = true;
+
+	const onMove = (moveEvent: PointerEvent) => {
+		const delta = (moveEvent.clientX - startX) * direction;
+		width.value = clamp(current + delta, min, max);
+	};
+
+	const onUp = () => {
+		stopResize?.();
+		emit('resize', width.value as number);
+	};
+
+	stopResize = () => {
+		window.removeEventListener('pointermove', onMove);
+		window.removeEventListener('pointerup', onUp);
+		window.removeEventListener('pointercancel', onUp);
+		resizing.value = false;
+		stopResize = null;
+	};
+
+	window.addEventListener('pointermove', onMove);
+	window.addEventListener('pointerup', onUp);
+	window.addEventListener('pointercancel', onUp);
+};
+
+const handleResizerKeydown = (event: KeyboardEvent) => {
+	if (!root.value) return;
+	const keyDirection = KEY_DIRECTION[event.key];
+	if (!keyDirection) return;
+	event.preventDefault();
+
+	const { current, min, max } = getWidthBounds();
+	const direction = props.resizeEdge === 'end' ? 1 : -1;
+	width.value = clamp(
+		current + keyDirection * direction * KEYBOARD_STEP,
+		min,
+		max,
+	);
+	emit('resize', width.value);
+};
+
+onBeforeUnmount(() => stopResize?.());
+</script>
+
+<style scoped>
+.wt-layout {
+  display: flex;
+  position: relative;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: var(--wt-layout-gap);
+  box-sizing: border-box;
+  border-radius: var(--wt-layout-border-radius);
+  background: var(--wt-layout-background-color);
+  padding: var(--wt-layout-padding);
+  min-width: var(--wt-layout-min-width);
+  min-height: 0;
+}
+
+.wt-layout--fixed {
+  flex-grow: 0;
+}
+
+.wt-layout--resizing {
+  user-select: none;
+}
+
+.wt-layout__resizer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  cursor: col-resize;
+  width: var(--wt-layout-resizer-width);
+  touch-action: none;
+}
+
+.wt-layout__resizer--end {
+  right: calc(var(--wt-layout-resizer-width) * -1);
+}
+
+.wt-layout__resizer--start {
+  left: calc(var(--wt-layout-resizer-width) * -1);
+}
+
+.wt-layout__resizer::after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(50% - var(--wt-layout-resizer-line-width) / 2);
+  transition: var(--transition);
+  background: transparent;
+  width: var(--wt-layout-resizer-line-width);
+  content: '';
+}
+
+.wt-layout__resizer:hover::after,
+.wt-layout__resizer:focus-visible::after,
+.wt-layout--resizing .wt-layout__resizer::after {
+  background: var(--wt-layout-resizer-active-color);
+}
+
+.wt-layout__resizer:focus-visible {
+  outline: none;
+}
+</style>

package/src/components/wt-page/__tests__/WtPage.spec.js

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtPage from '../wt-page.vue';
+
+describe('WtPage', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtPage);
+		expect(wrapper.classes('wt-page')).toBe(true);
+	});
+
+	it('renders layouts into the body via default slot', () => {
+		const content = 'Page layouts';
+		const wrapper = shallowMount(WtPage, {
+			slots: {
+				default: content,
+			},
+		});
+		expect(wrapper.find('.wt-page__body').text()).toBe(content);
+	});
+
+	it('renders header via header slot', () => {
+		const content = 'Page header';
+		const wrapper = shallowMount(WtPage, {
+			slots: {
+				header: content,
+			},
+		});
+		expect(wrapper.find('.wt-page__header').text()).toBe(content);
+	});
+
+	it('omits header section without header slot', () => {
+		const wrapper = shallowMount(WtPage);
+		expect(wrapper.find('.wt-page__header').exists()).toBe(false);
+	});
+});