@webitel/ui-sdk 26.8.129 → 26.8.130

package/dist/{wt-display-chip-items-DTKD_p2I.js → wt-display-chip-items-AZ9DiSV4.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-DTlPLRKR.js";
+import { C as e, i as t } from "./components-BF21ppoM.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./utils-g-eGs-rV.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-C-cjOJ-w.js → wt-send-message-popup-BjI9PKzi.js}

@@ -1,6 +1,6 @@
-import { n as e } from "./components-DTlPLRKR.js";
+import { n as e } from "./components-BF21ppoM.js";
 import "./convertDuration-B7EyPh1B.js";
-import { i as t, r as n } from "./clients-CiEI5u9_.js";
+import { i as t, r as n } from "./clients-CK-bThbs.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-tabs-DuOgj-lZ.js → wt-tabs-BJ-sFhv7.js}

@@ -55,6 +55,6 @@ function g(e, f, g, _, v, y) {
 		class: "wt-tab__underline--highlight"
 	}, null, 4)])], 2);
 }
-var _ = /*#__PURE__*/ e(f, [["render", g], ["__scopeId", "data-v-a6f6f0f3"]]);
+var _ = /*#__PURE__*/ e(f, [["render", g], ["__scopeId", "data-v-29699967"]]);
 //#endregion
 export { _ as default };

package/dist/{wt-type-extension-value-input-LfsqysQq.js → wt-type-extension-value-input-C6Mq2QeU.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-DTlPLRKR.js";
-import { a as p, n as m, t as h } from "./clients-CiEI5u9_.js";
+import { a as l, o as u, r as d, s as f } from "./components-BF21ppoM.js";
+import { a as p, n as m, t as h } from "./clients-CK-bThbs.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-Qt_FgVQw.js";
 import { n as ee, t as te } from "./vue-i18n-VBiROMZ4.js";
 import "./wt-toast-DGtljpcq.js";

package/dist/{wt-vidstack-player-BAgVx1gi.js → wt-vidstack-player-D_N5CdUm.js}

@@ -1,4 +1,4 @@
-import { w as e } from "./components-DTlPLRKR.js";
+import { w as e } from "./components-BF21ppoM.js";
 import "./convertDuration-B7EyPh1B.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { m as n } from "./enums-Qt_FgVQw.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.129",
+	"version": "26.8.130",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

package/src/components/on-demand/wt-chat-emoji/__tests__/WtChatEmoji.spec.js

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+
+import WtChatEmoji from '../wt-chat-emoji.vue';
+
+const mountEmoji = (props = {}) =>
+	shallowMount(WtChatEmoji, {
+		props,
+	});
+
+describe('WtChatEmoji', () => {
+	it('draws an outlined button by default', () => {
+		const wrapper = mountEmoji();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'WtButton',
+				})
+				.props('variant'),
+		).toBe('outlined');
+	});
+
+	it('draws the requested variant', () => {
+		const wrapper = mountEmoji({
+			variant: 'text',
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'WtButton',
+				})
+				.props('variant'),
+		).toBe('text');
+	});
+
+	it('draws a filled button as active whatever the variant', () => {
+		const wrapper = mountEmoji({
+			variant: 'text',
+			filled: true,
+		});
+		expect(
+			wrapper
+				.findComponent({
+					name: 'WtButton',
+				})
+				.props('variant'),
+		).toBe('active');
+	});
+});

package/src/components/on-demand/wt-chat-emoji/wt-chat-emoji.vue

@@ -28,7 +28,7 @@
 
 <script setup>
 import { WtButton } from '@webitel/ui-sdk/components';
-import { ComponentSize } from '@webitel/ui-sdk/enums';
+import { ButtonVariant, ComponentSize } from '@webitel/ui-sdk/enums';
 import * as EmojiPicker from 'emoji-picker-element/picker'; ///!not delete
 import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
 import { eventBus } from '../../../scripts';
@@ -51,6 +51,15 @@ const props = defineProps({
 		type: Boolean,
 		default: false,
 	},
+	/**
+	 * Button variant while the picker is closed and the button is not `filled`.
+	 * @type {ButtonVariant}
+	 * @options ['outlined', 'text']
+	 */
+	variant: {
+		type: String,
+		default: ButtonVariant.OUTLINED,
+	},
 	rounded: {
 		type: Boolean,
 		default: true,
@@ -68,7 +77,7 @@ const picker = ref(null);
 // Teleport's to prop is required even if it's disabled
 const teleportValue = computed(() => props.popupTeleportTo || 'body');
 const buttonVariant = computed(() =>
-	props.filled || isOpened.value ? 'active' : 'outlined',
+	props.filled || isOpened.value ? ButtonVariant.ACTIVE : props.variant,
 );
 
 const initPicker = async () => {

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

@@ -7,7 +7,8 @@
 	--wt-tabs-text-color: var(--text-main-color);
 	--wt-tabs-text-hover-color: var(--wt-tabs-text-color);
 	--wt-tabs-text-active-color: var(--wt-tabs-text-color);
-	--tab-border: 4px solid;
+	--tab-underline-height: 4px;
+	--tab-underline-border-radius: 0;
 	--wt-tabs-underline-active-color: var(--primary-color);
 	--tab-z-index: 1;
 }

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

@@ -104,24 +104,40 @@ export default {
   cursor: pointer;
   outline: none;
   border: none;
-  border-bottom: var(--tab-border);
-  border-bottom-color: transparent;
   background: transparent;
-  padding-bottom: var(--tab-padding);
+  padding-bottom: calc(var(--tab-padding) + var(--tab-underline-height));
   color: var(--wt-tabs-text-color);
 }
 
+.wt-tab::before {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: var(--tab-underline-border-radius);
+  background: transparent;
+  height: var(--tab-underline-height);
+  content: '';
+}
+
 .wt-tab:focus,
 .wt-tab:hover {
-  border-bottom-color: var(--wt-tabs-underline-active-color);
   color: var(--wt-tabs-text-hover-color);
 }
 
+.wt-tab:focus::before,
+.wt-tab:hover::before {
+  background: var(--wt-tabs-underline-active-color);
+}
+
 .wt-tab--highlight {
-  border-bottom-color: var(--wt-tabs-underline-active-color);
   color: var(--wt-tabs-text-active-color);
 }
 
+.wt-tab--highlight::before {
+  background: var(--wt-tabs-underline-active-color);
+}
+
 .wt-tab::after {
   display: block;
   visibility: hidden;