@webitel/ui-sdk 26.4.33 → 26.4.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.4.33",
+	"version": "26.4.35",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",

package/src/components/index.js

@@ -162,6 +162,10 @@ const WtScreenRecordingsAction = defineAsyncComponent(
 		),
 );
 
+const WtInlineAddPanel = defineAsyncComponent(
+	() => import('./wt-inline-add-panel/wt-inline-add-panel.vue'),
+);
+
 const Components = {
 	WtActionBar,
 	WtImage,
@@ -243,6 +247,7 @@ const Components = {
 	WtExpansionCard,
 	WtDatetimeText,
 	WtScreenRecordingsAction,
+	WtInlineAddPanel,
 };
 
 export {
@@ -281,6 +286,7 @@ export {
 	WtIconBtn,
 	WtImage,
 	WtIndicator,
+	WtInlineAddPanel,
 	WtInputNumber,
 	WtInputText,
 	WtIntersectionObserver,

package/src/components/wt-inline-add-panel/__tests__/WtInlineAddPanel.spec.js

@@ -0,0 +1,70 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtInlineAddPanel from '../wt-inline-add-panel.vue';
+
+describe('WtInlineAddPanel', () => {
+	it('renders a component', () => {
+		const wrapper = shallowMount(WtInlineAddPanel);
+		expect(wrapper.classes('wt-inline-add-panel')).toBe(true);
+	});
+
+	it('renders default direction class "row"', () => {
+		const wrapper = shallowMount(WtInlineAddPanel);
+		expect(wrapper.classes('wt-inline-add-panel--row')).toBe(true);
+	});
+
+	it('renders "column" direction class when direction prop is "column"', () => {
+		const wrapper = shallowMount(WtInlineAddPanel, {
+			props: {
+				direction: 'column',
+			},
+		});
+		expect(wrapper.classes('wt-inline-add-panel--column')).toBe(true);
+	});
+
+	it('renders content via default slot', () => {
+		const content = 'slot content';
+		const wrapper = shallowMount(WtInlineAddPanel, {
+			slots: {
+				default: content,
+			},
+		});
+		expect(wrapper.text()).toContain(content);
+	});
+
+	it('emits "submit" on submit button click', async () => {
+		const wrapper = shallowMount(WtInlineAddPanel);
+		const buttons = wrapper.findAllComponents({
+			name: 'WtButton',
+		});
+		await buttons[0].trigger('click');
+		expect(wrapper.emitted('submit')).toBeTruthy();
+	});
+
+	it('emits "reset" on close button click', async () => {
+		const wrapper = shallowMount(WtInlineAddPanel);
+		const buttons = wrapper.findAllComponents({
+			name: 'WtButton',
+		});
+		await buttons[1].trigger('click');
+		expect(wrapper.emitted('reset')).toBeTruthy();
+	});
+
+	it('disables submit button when disabledAddAction is true', () => {
+		const wrapper = shallowMount(WtInlineAddPanel, {
+			props: {
+				disabledAddAction: true,
+			},
+		});
+		const submitButton = wrapper.findAllComponents({
+			name: 'WtButton',
+		})[0];
+		expect(submitButton.props('disabled')).toBe(true);
+	});
+
+	it('emits "submit" on form submit', async () => {
+		const wrapper = shallowMount(WtInlineAddPanel);
+		await wrapper.find('form').trigger('submit');
+		expect(wrapper.emitted('submit')).toBeTruthy();
+	});
+});

package/src/components/wt-inline-add-panel/wt-inline-add-panel.vue

@@ -0,0 +1,69 @@
+<template>
+  <form
+    class="wt-inline-add-panel"
+    :class="[`wt-inline-add-panel--${props.direction}`]"
+    @submit.prevent="submit"
+  >
+    <slot />
+    <div class="wt-inline-add-panel__actions">
+      <wt-button
+        :disabled="props.disabledAddAction"
+        icon="tick"
+        color="secondary"
+        outlined
+        @click="submit"
+      />
+      <wt-button
+        icon="close"
+        outlined
+        color="secondary"
+        @click="reset"
+      />
+    </div>
+
+  </form>
+</template>
+
+<script lang="ts" setup>
+interface WtInlineAddPanel {
+	disabledAddAction?: boolean;
+	direction?: 'row' | 'column';
+}
+
+const props = withDefaults(defineProps<WtInlineAddPanel>(), {
+	direction: 'row',
+	disabledAddAction: false,
+});
+
+const emit = defineEmits([
+	'submit',
+	'reset',
+]);
+
+function submit() {
+	emit('submit');
+}
+
+function reset() {
+	emit('reset');
+}
+</script>
+
+<style scoped>
+.wt-inline-add-panel {
+  display: flex;
+  width: 100%;
+  gap: var(--spacing-xs);
+}
+
+.wt-inline-add-panel__actions {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: var(--spacing-xs);
+}
+
+.wt-inline-add-panel--column {
+  flex-direction: column;
+}
+</style>

package/src/components/wt-vidstack-player/components/panels/video-display-panel/video-display-panel.vue

@@ -24,8 +24,7 @@
       />
       <toggle-button
         v-if="!props.hideExpand"
-        primary-icon="expand"
-        secondary-icon="collapse"
+        :icon="toggleIcon"
         color="on-dark"
         @toggle="handlePlayerSize"
       />
@@ -41,6 +40,7 @@
 
 <script setup lang="ts">
 import {
+	computed,
 	defineEmits,
 	defineProps,
 	inject,
@@ -58,6 +58,10 @@ import ToggleButton from '../../toggle-button.vue';
 const { size, fullscreen, changeSize } =
 	inject<WtVidstackPlayerSizeProvider>('size');
 
+const toggleIcon = computed(() =>
+	size.value === ComponentSize.SM ? 'expand' : 'collapse',
+);
+
 const props = defineProps<{
 	title?: string;
 	username?: string;

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

@@ -1,52 +1,31 @@
 <template>
-  <media-toggle-button
-    ref="toggleButton"
+  <div
     class="toggle-button"
-    :disabled="props.disabled"
     @click="setToggleState"
   >
     <wt-icon-btn
-      :icon="props.primaryIcon"
+      :icon="props.icon"
       :color="props.color"
       :disabled="props.disabled"
-      class="toggle-button__primary"
     />
-    <wt-icon-btn
-      :icon="props.secondaryIcon"
-      :color="props.color"
-      :disabled="props.disabled"
-      class="toggle-button__secondary"
-    />
-  </media-toggle-button>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, type Ref, useTemplateRef } from 'vue';
-
 import WtIconBtn from '../../wt-icon-btn/wt-icon-btn.vue';
 
 const props = defineProps<{
-	primaryIcon: string;
-	secondaryIcon: string;
+	icon: string;
 	color?: string;
 	disabled?: boolean;
 }>();
 
-const toggleButton = useTemplateRef('toggleButton') as Ref<HTMLElement>;
-
 const emit = defineEmits<{
-	toggle: [
-		value: boolean,
-	];
+	toggle: [];
 }>();
 
 const setToggleState = () => {
 	if (props.disabled) return;
-	emit('toggle', toggleButton.value.pressed);
+	emit('toggle');
 };
 </script>
-
-<style  scoped>.toggle-button[data-pressed] .toggle-button__primary,
-.toggle-button:not([data-pressed]) .toggle-button__secondary {
-display: none;
-}</style>

package/types/components/wt-inline-add-panel/__tests__/WtInlineAddPanel.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/types/components/wt-inline-add-panel/wt-inline-add-panel.vue.d.ts

@@ -0,0 +1,26 @@
+interface WtInlineAddPanel {
+    disabledAddAction?: boolean;
+    direction?: 'row' | 'column';
+}
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WtInlineAddPanel, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    submit: (...args: any[]) => void;
+    reset: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<WtInlineAddPanel> & Readonly<{
+    onSubmit?: (...args: any[]) => any;
+    onReset?: (...args: any[]) => any;
+}>, {
+    disabledAddAction: boolean;
+    direction: "row" | "column";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/components/wt-vidstack-player/components/toggle-button.vue.d.ts

@@ -1,13 +1,12 @@
 type __VLS_Props = {
-    primaryIcon: string;
-    secondaryIcon: string;
+    icon: string;
     color?: string;
     disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (value: boolean) => any;
+    toggle: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (value: boolean) => any;
+    onToggle?: () => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;