@webitel/ui-sdk 26.8.124 → 26.8.126

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

@@ -0,0 +1,153 @@
+import { 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('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,217 @@
+<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="width"
+      :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 { 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 root = useTemplateRef<HTMLElement>('root');
+const width = ref<number | undefined>(props.defaultWidth);
+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 = {
+		ArrowLeft: -1,
+		ArrowRight: 1,
+	}[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);
+	});
+});

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

@@ -0,0 +1,15 @@
+:root {
+	--wt-page-background-color: var(--p-surface-50);
+	--wt-page-padding-x: 0;
+	--wt-page-padding-y: 0;
+	--wt-page-gap: 0;
+
+	--wt-page-body-background-color: transparent;
+	--wt-page-body-padding-x: var(--spacing-sm);
+	--wt-page-body-padding-y: var(--spacing-sm);
+	--wt-page-body-gap: var(--spacing-sm);
+}
+
+:root.theme--dark {
+	--wt-page-background-color: var(--p-surface-850);
+}

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

@@ -0,0 +1,52 @@
+<template>
+  <div class="wt-page">
+    <div v-if="$slots.header" class="wt-page__header">
+      <slot name="header" />
+    </div>
+    <div class="wt-page__body">
+      <!-- @slot Layouts of the page -->
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * Top structural level of the interface: header + body, where the body
+ * distributes its width between one or more `wt-layout`s.
+ */
+defineSlots<{
+	header?: () => unknown;
+	default?: () => unknown;
+}>();
+</script>
+
+<style scoped>
+.wt-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-page-gap);
+  box-sizing: border-box;
+  background: var(--wt-page-background-color);
+  padding: var(--wt-page-padding-y) var(--wt-page-padding-x);
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.wt-page__header {
+  flex: 0 0 auto;
+}
+
+.wt-page__body {
+  display: flex;
+  position: relative;
+  flex: 1 1 auto;
+  gap: var(--wt-page-body-gap);
+  box-sizing: border-box;
+  background: var(--wt-page-body-background-color);
+  padding: var(--wt-page-body-padding-y) var(--wt-page-body-padding-x);
+  min-width: 0;
+  min-height: 0;
+}
+</style>

package/src/components/wt-textarea/__tests__/WtTextarea.spec.js

@@ -101,4 +101,23 @@ describe('WtTextarea', () => {
 		});
 		expect(wrapper.findComponent(WtLabel).exists()).toBe(false);
 	});
+
+	it('marks textarea invalid and shows the first error from regleValidation', () => {
+		const wrapper = mount(WtTextarea, {
+			stubs: {
+				WtLabel,
+			},
+			props: {
+				label: 'Result',
+				regleValidation: {
+					$error: true,
+					$errors: [
+						'Field is required',
+					],
+				},
+			},
+		});
+		expect(wrapper.find('.wt-label').classes()).toContain('wt-label--invalid');
+		expect(wrapper.text()).toContain('Field is required');
+	});
 });

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

@@ -51,6 +51,7 @@
 </template>
 
 <script setup lang="ts">
+import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import type { TextareaProps } from 'primevue/textarea';
 import { computed, onMounted, ref, toRef, useSlots, useTemplateRef } from 'vue';
 import { ComponentSize, MessageVariant } from '../../enums';
@@ -136,6 +137,7 @@ interface Props extends /* @vue-ignore */ TextareaProps {
 	 * Validation rules
 	 */
 	v?: VuelidateFieldLike;
+	regleValidation?: SuperCompatibleRegleFieldStatus;
 	/**
 	 * Custom validators array
 	 * @type {Array<{name: string, text: string}>}
@@ -186,6 +188,7 @@ const { isValidation, invalid, validationText, validationTextColor } =
 	useValidation({
 		v: toRef(props, 'v'),
 		customValidators: toRef(props, 'customValidators'),
+		regleValidation: toRef(props, 'regleValidation'),
 	});
 
 const handleKeypress = (event: KeyboardEvent) => {

package/src/css/components-variables.css

@@ -12,6 +12,7 @@
 @import "../components/wt-chip/_variables.css";
 @import "../components/wt-context-menu/_variables.css";
 @import "../components/wt-datepicker/_variables.css";
+@import "../components/wt-content-wrapper/_variables.css";
 @import "../components/wt-divider/_variables.css";
 @import "../components/wt-dual-panel/_variables.css";
 @import "../components/wt-dummy/_variables.css";
@@ -25,11 +26,13 @@
 @import "../components/wt-input/_variables.css";
 @import "../components/wt-item-link/_variables.css";
 @import "../components/wt-label/_variables.css";
+@import "../components/wt-layout/_variables.css";
 @import "../components/wt-load-bar/_variables.css";
 @import "../components/wt-loader/_variables.css";
 @import "../components/wt-logo/_variables.css";
 @import "../components/wt-navigation-bar/_variables.css";
 @import "../components/wt-notifications-bar/_variables.css";
+@import "../components/wt-page/_variables.css";
 @import "../components/wt-page-wrapper/_variables.css";
 @import "../components/wt-pagination/_variables.css";
 @import "../components/wt-player/_variables.css";