@webitel/ui-sdk 26.4.18 → 26.4.19

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

@@ -1,29 +1,62 @@
 <template>
-  <div class="wt-tree">
-    <div v-if="mode === WtTreeMode.Tree" class="wt-tree__content">
-      <wt-tree-line
-v-for="(item, index) in data" :key="index" :model-value="modelValue" :item-label="itemLabel"
-        :item-data="itemData" :data="item" :children-prop="childrenProp" :multiple="multiple"
-        :allow-parent="allowParent" @update:model-value="emit('update:modelValue', $event)">
-        <template v-if="$slots['item-prefix']" #item-prefix="slotProps">
-          <slot name="item-prefix" v-bind="slotProps" />
-        </template>
-      </wt-tree-line>
-    </div>
-    <div v-if="mode === WtTreeMode.List" class="wt-tree__list-content">
-      <span
-v-for="(item, index) in allData" :key="index" class="wt-tree__label-wrapper"
-        :class="{ active: compareSelectElement(item) }">
-        <p class="wt-tree__label" @click="selectElement(item)">
-          {{ itemLabel ? item[itemLabel] : item }}
-        </p>
-        <wt-icon v-if="compareSelectElement(item)" icon="chat-message-status-sent" class="wt-tree__label-icon" />
-      </span>
-    </div>
-  </div>
+	<div class="wt-tree">
+		<div
+			v-if="mode === WtTreeMode.Tree"
+			class="wt-tree__content"
+		>
+			<wt-tree-line
+				v-for="(item, index) in data"
+				:key="index"
+				:model-value="modelValue"
+				:item-label="itemLabel"
+				:item-data="itemData"
+				:data="item"
+				:children-prop="childrenProp"
+				:multiple="multiple"
+				:allow-parent="allowParent"
+				@update:model-value="emit('update:modelValue', $event)"
+			>
+				<template
+					v-if="$slots['item-prefix']"
+					#item-prefix="slotProps"
+				>
+					<slot
+						name="item-prefix"
+						v-bind="slotProps"
+					/>
+				</template>
+			</wt-tree-line>
+		</div>
+		<div
+			v-if="mode === WtTreeMode.List"
+			class="wt-tree__list-content"
+		>
+			<span
+				v-for="(item, index) in allData"
+				:key="index"
+				class="wt-tree__label-wrapper"
+				:class="{ active: compareSelectElement(item) }"
+			>
+				<p
+					class="wt-tree__label"
+					@click="selectElement(item)"
+				>
+					{{ itemLabel ? item[itemLabel] : item }}
+				</p>
+				<wt-icon
+					v-if="compareSelectElement(item)"
+					icon="chat-message-status-sent"
+					class="wt-tree__label-icon"
+				/>
+			</span>
+		</div>
+	</div>
 </template>
 
-<script setup lang="ts">
+<script
+	setup
+	lang="ts"
+>
 import deepEqual from 'deep-equal';
 import { computed } from 'vue';
 
@@ -35,11 +68,11 @@ const props = withDefaults(
 		/**
 		 * Selected element, it can be an object or a string, related to itemData props
 		 */
-		modelValue?: null | any;
+		modelValue?: null | unknown;
 		/**
 		 * You need to pass an array of objects that will be displayed in the tree
 		 */
-		data: any[];
+		data: unknown[];
 		/**
 		 * You can pass the name of the property that will be used as the label of the selected item
 		 */
@@ -68,18 +101,18 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	(e: 'select', data: any): void;
-	(e: 'update:modelValue', value: any): void;
+	(e: 'select', data: unknown): void;
+	(e: 'update:modelValue', value: unknown): void;
 }>();
 
 const allData = computed(() => {
 	const result = [];
 
-	const getNestedItems = (item: any) => {
+	const getNestedItems = (item: unknown) => {
 		result.push(item);
 
 		if (item[props.childrenProp]) {
-			item[props.childrenProp].forEach((child: any) => {
+			item[props.childrenProp].forEach((child: unknown) => {
 				getNestedItems(child);
 			});
 		}
@@ -92,11 +125,11 @@ const allData = computed(() => {
 	return result;
 });
 
-const selectElement = (item: any) => {
+const selectElement = (item: unknown) => {
 	emit('update:modelValue', props.itemData ? item[props.itemData] : item);
 };
 
-const compareSelectElement = (item: any) => {
+const compareSelectElement = (item: unknown) => {
 	if (props.itemData) {
 		return item[props.itemData] === props.modelValue;
 	}
@@ -107,52 +140,51 @@ const compareSelectElement = (item: any) => {
 
 <style scoped>
 .wt-tree {
-  border-radius: var(--border-radius);
-  background: var(--content-wrapper-color);
-  padding: var(--spacing-sm);
-  overflow: auto;
+	border-radius: var(--border-radius);
+	background: var(--content-wrapper-color);
+	padding: var(--spacing-sm);
+	overflow: auto;
 }
 
 .wt-tree__content {
-  display: flex;
-  flex-direction: column;
-  padding-right: var(--spacing-2xs);
-  height: 100%;
-  overflow: auto;
+	display: flex;
+	flex-direction: column;
+	padding-right: var(--spacing-2xs);
+	height: 100%;
+	overflow: auto;
 }
 
 .wt-tree__list-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--spacing-xs);
-  padding-right: var(--spacing-2xs);
-  height: 100%;
-  overflow: auto;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--spacing-xs);
+	padding-right: var(--spacing-2xs);
+	height: 100%;
+	overflow: auto;
 }
 
 .wt-tree__label-wrapper {
-  display: flex;
-  align-items: center;
-  transition: var(--transition);
-  cursor: pointer;
-  border-radius: var(--border-radius);
-  padding: 0 var(--spacing-2xs);
-  color: var(--wt-tree-item-on);
+	display: flex;
+	align-items: center;
+	transition: var(--transition);
+	cursor: pointer;
+	border-radius: var(--border-radius);
+	padding: 0 var(--spacing-2xs);
+	color: var(--wt-tree-item-on);
 }
 
 .wt-tree__label-wrapper:hover {
-  background: var(--wt-tree-item-hover);
-  color: var(--wt-tree-item-hover-on);
+	background: var(--wt-tree-item-hover);
+	color: var(--wt-tree-item-hover-on);
 }
 
 .wt-tree__label-wrapper.active {
-  background: var(--wt-tree-item-active);
-  color: var(--wt-tree-item-active-on);
+	background: var(--wt-tree-item-active);
+	color: var(--wt-tree-item-active-on);
 }
 
 .wt-tree__label-icon {
-  flex-shrink: 0;
+	flex-shrink: 0;
 }
-
 </style>

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -121,7 +121,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	(e: 'openParent'): void;
-	(e: 'update:modelValue', value: any): void;
+	(e: 'update:modelValue', value: unknown): void;
 }>();
 
 const label = computed(() =>
@@ -260,7 +260,7 @@ const setMultipleModelValueWithTree = () => {
 
 const setMultipleModelValue = () => {
 	const value = props.itemData ? props.data[props.itemData] : props.data;
-	let existingIndex;
+	let existingIndex: number;
 
 	if (props.itemData) {
 		existingIndex = props.modelValue.indexOf(props.data[props.itemData]);

package/src/components/wt-tree-table/wt-tree-table.vue

@@ -1,101 +1,104 @@
 <template>
   <div class="wt-tree-table wt-scrollbar">
-    <table
-      class="wt-tree-table-wrapper"
-    >
+    <table class="wt-tree-table-wrapper">
       <thead class="wt-tree-table-head">
-      <tr class="wt-tree-table-tr wt-tree-table-tr-head">
-        <th
-          v-for="(col, key) of dataHeaders"
-          :key="String(key) + col?.sort"
-          :class="[
+        <tr class="wt-tree-table-tr wt-tree-table-tr-head">
+          <th
+            v-for="(col, key) of dataHeaders"
+            :key="String(key) + col?.sort"
+            :class="[
               {
                 'wt-tree-table-th--sortable': isColSortable(col),
               },
               `wt-tree-table-th--sort-${col.sort}`,
             ]"
-          :style="col.width ? `min-width:${col.width}` : ''"
-          class="wt-tree-table-th typo-body-1"
-          @click="sort(col, key)"
-        >
-          <div class="wt-tree-table-th__content"
-               :class="{'wt-tree-table-th__content--selectable': key === 0 && selectable}">
+            :style="col.width ? `min-width:${col.width}` : ''"
+            class="wt-tree-table-th typo-body-1"
+            @click="sort(col, key)"
+          >
             <div
-              v-if="key === 0 && selectable"
-              @click.stop
+              class="wt-tree-table-th__content"
+              :class="{ 'wt-tree-table-th__content--selectable': key === 0 && selectable }"
             >
-              <wt-checkbox
-                :selected="isAllSelected"
-                @update:selected="selectAll"
+              <div
+                v-if="key === 0 && selectable"
+                @click.stop
+              >
+                <wt-checkbox
+                  :selected="isAllSelected"
+                  @update:selected="selectAll"
+                />
+              </div>
+              <div class="wt-tree-table-th__text">
+                {{ col.text }}
+              </div>
+              <wt-icon
+                v-if="sortable"
+                class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--asc"
+                icon="sort-arrow-up"
+                size="sm"
+              />
+              <wt-icon
+                v-if="sortable"
+                class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--desc"
+                icon="sort-arrow-down"
+                size="sm"
               />
             </div>
-            <div class="wt-tree-table-th__text">
-              {{ col.text }}
+          </th>
+          <th
+            v-if="gridActions"
+            class="wt-tree-table-th__actions"
+          >
+            <div class="wt-tree-table-th__content">
+              <slot name="actions-header" />
             </div>
-            <wt-icon
-              v-if="sortable"
-              class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--asc"
-              icon="sort-arrow-up"
-              size="sm"
-            />
-            <wt-icon
-              v-if="sortable"
-              class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--desc"
-              icon="sort-arrow-down"
-              size="sm"
-            />
-          </div>
-        </th>
-        <th
-          v-if="gridActions"
-          class="wt-tree-table-th__actions"
-        >
-          <div class="wt-tree-table-th__content">
-            <slot name="actions-header" />
-          </div>
-        </th>
-      </tr>
+          </th>
+        </tr>
       </thead>
 
       <tbody class="wt-tree-table-body">
-      <wt-tree-table-row
-        v-for="(row, dataKey) of data"
-        :key="dataKey"
-        :row-position="dataKey"
-        :data-headers="dataHeaders"
-        :data="row"
-        :selectable="selectable"
-        :children-prop="childrenProp"
-        :selected-elements="selectedElements"
-        :searched-prop="searchedProp"
-        @update:selected="handleSelection($event.data, $event.select)"
-      >
-        <template #actions="{ item }">
-          <slot
-            name="actions"
-            :item="item"
-          />
-        </template>
-        <template
-          v-for="(col, headerKey) of dataHeaders"
-          :key="headerKey"
-          #[col.value]="{ item }"
+        <wt-tree-table-row
+          v-for="(row, dataKey) of data"
+          :key="dataKey"
+          :row-position="dataKey"
+          :data-headers="dataHeaders"
+          :data="row"
+          :selectable="selectable"
+          :children-prop="childrenProp"
+          :selected-elements="selectedElements"
+          :searched-prop="searchedProp"
+          @update:selected="handleSelection($event.data, $event.select)"
         >
-          <slot
-            :index="dataKey"
-            :item="item"
-            :name="col.value"
+          <template #actions="{ item }">
+            <slot
+              name="actions"
+              :item="item"
+            />
+          </template>
+          <template
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            #[col.value]="{ item }"
           >
-            {{ item[col.value] }}
-          </slot>
-        </template>
-      </wt-tree-table-row>
+            <slot
+              :index="dataKey"
+              :item="item"
+              :name="col.value"
+            >
+              {{ item[col.value] }}
+            </slot>
+          </template>
+        </wt-tree-table-row>
       </tbody>
     </table>
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+>
 import { computed, toRef } from 'vue';
 
 import { useWtTable } from '../../composables/useWtTable/useWtTable';
@@ -113,7 +116,7 @@ const props = withDefaults(
 		/**
 		 * 'List of data, represented by table. '
 		 */
-		data: Record<string, any>[];
+		data: Record<string, unknown>[];
 		/**
 		 * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
 		 */
@@ -122,7 +125,7 @@ const props = withDefaults(
 		 * 'If true, draws row selection checkboxes. Checkbox toggles data object _isSelected property. It's IMPORTANT to set this property before sending data to table. '
 		 */
 		selectable?: boolean;
-		selected: any[];
+		selected: unknown[];
 		/**
 		 * 'If true, reserves space for 3 icon actions in the last column. Accessible by "actions" slot. '
 		 */
@@ -149,14 +152,14 @@ const emit = defineEmits([
 	'update:selected',
 ]);
 
-const checkHasChildItems = (item: Record<string, any>) => {
+const checkHasChildItems = (item: Record<string, unknown>) => {
 	return item[props.childrenProp] && Array.isArray(item[props.childrenProp]);
 };
 
-const getSelectedValue = (items: Record<string, any>[]) => {
+const getSelectedValue = (items: Record<string, unknown>[]) => {
 	const selected = [];
 
-	const pushSelectedElement = (item: Record<string, any>) => {
+	const pushSelectedElement = (item: Record<string, unknown>) => {
 		if (item._isSelected) {
 			return [
 				item,
@@ -173,10 +176,10 @@ const getSelectedValue = (items: Record<string, any>[]) => {
 	return selected;
 };
 
-const getAllNestedElements = (item: Record<string, any>) => {
+const getAllNestedElements = (item: Record<string, unknown>) => {
 	const nested = [];
 
-	const pushElement = (item: Record<string, any>) => {
+	const pushElement = (item: Record<string, unknown>) => {
 		nested.push(item);
 
 		if (checkHasChildItems(item)) {
@@ -189,7 +192,7 @@ const getAllNestedElements = (item: Record<string, any>) => {
 	return nested;
 };
 
-const selectedElements = computed<Record<string, any>[]>(() => {
+const selectedElements = computed<Record<string, unknown>[]>(() => {
 	// _isSelected for backwards compatibility
 	return props.selected || getSelectedValue(props.data);
 });
@@ -220,7 +223,10 @@ const sort = (col: WtTableHeader) => {
 	emit('sort', col, nextSort);
 };
 
-const changeSelectItem = (items: Record<string, any>[], selected: boolean) => {
+const changeSelectItem = (
+	items: Record<string, unknown>[],
+	selected: boolean,
+) => {
 	items.forEach((item) => {
 		item._isSelected = selected;
 

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -124,7 +124,7 @@ const props = withDefaults(
 		 */
 		childrenProp: string;
 		selectable?: boolean;
-		selectedElements: Record<string, any>[];
+		selectedElements: Record<string, unknown>[];
 		dataHeaders: WtTableHeader[];
 		gridActions?: boolean;
 		/**
@@ -166,7 +166,7 @@ const openCollapse = () => {
 	emit('expanded-collapse');
 };
 
-const hasSearchedElement = (data: Record<string, any>, nestedLevel = 0) => {
+const hasSearchedElement = (data: Record<string, unknown>, nestedLevel = 0) => {
 	// Check if the object itself has searched
 	if (data[props.searchedProp] && nestedLevel) return true;
 

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

@@ -22,8 +22,8 @@
       />
       <toggle-button
         v-if="!props.hideExpand"
-        primary-icon="expand"
-        secondary-icon="collapse"
+        primary-icon="collapse"
+        secondary-icon="expand"
         color="on-dark"
         @toggle="handlePlayerSize"
       />

package/src/components/wt-vidstack-player/composables/useVidstackSrc.ts

@@ -109,6 +109,6 @@ export function normalizeVidstackMediaSrc({
 /**
  * "video/object" or "audio/object" types represent JS objects like MediaStream or file Blob
  */
-function isObjectSrcType({ src, type }: { src: unknown; type: string }) {
+function isObjectSrcType({ type }: { src: unknown; type: string }) {
 	return type?.includes('/object');
 }

package/src/composables/useCachedInterval/__tests__/useCachedInterval.spec.js

@@ -8,7 +8,7 @@ describe('useCachedInterval', () => {
 		});
 		subscribe(callback);
 		expect(callback).toHaveBeenCalledTimes(1);
-		return await new Promise((resolve, reject) =>
+		return await new Promise((resolve) =>
 			setTimeout(() => {
 				expect(callback).toHaveBeenCalledTimes(2);
 				resolve();

package/src/composables/useCard/useCardComponent.js

@@ -1,4 +1,4 @@
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 

package/src/composables/useInputControl/useInputControl.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted } from 'vue';
+import { computed } from 'vue';
 
 export const useInputControl = (input) => {
 	// inputnumber has span wrapper while inputtext hasnt

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -12,7 +12,7 @@ const isDurationOverflow = ({ durationMin, limitMin }) => {
 	return durationMin > limitMin && limitMin !== 0;
 };
 
-const duration = ({ durationMin, limitMin }) => {
+const duration = ({ durationMin /* limitMin */ }) => {
 	return prettifyPauseCauseDuration(durationMin);
 };
 

package/src/composables/useTableColumnDrag/useTableColumnDrag.ts

@@ -52,7 +52,7 @@ export const useTableColumnDrag = (table, reorderableColumns) => {
 		copyEl.style.position = 'absolute';
 		copyEl.style.top = '-9999px';
 		copyEl.style.background = 'var(--p-datatable-header-cell-drag-background)';
-		copyEl.style.width = event.target.offsetWidth + 'px';
+		copyEl.style.width = `${event.target.offsetWidth}px`;
 		document.body.appendChild(copyEl);
 		event.dataTransfer.setDragImage(copyEl, event.offsetX, event.offsetY);
 		// Clean up after drag starts

package/src/enums/index.ts

@@ -1,7 +1,6 @@
 import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
 import { ButtonColor } from './ButtonColor/ButtonColor';
-import { ButtonSize } from './ButtonSize/ButtonSize';
 import { ButtonVariant } from './ButtonVariant/ButtonVariant';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import ProviderIconType from './ChatGatewayProvider/ProviderIconType.enum';

package/src/install.ts

@@ -13,7 +13,7 @@ import initPrimevue from './plugins/primevue/primevue.plugin';
 export { fillIconsRepository };
 
 export default {
-	install(app, { eventBus, router, globals = {} }) {
+	install(app, { eventBus, globals = {} }) {
 		Object.keys(Directives).forEach((name) => {
 			app.directive(name, Directives[name]);
 		});

package/src/locale/kz/kz.js

@@ -321,11 +321,9 @@ export default {
 						': ' +
 						linked('objects.case'),
 					[CrmSectionsNew.ContactsExtensions]: ({ linked }) =>
-						linked('objects.customization.customization') +
-						': ' +
-						linked('objects.contact'),
+						`${linked('objects.customization.customization')}: ${linked('objects.contact')}`,
 					[CrmSectionsNew.CustomLookups]: ({ linked }) =>
-						linked('objects.customization.customization') + ': Жекелендірулер', // dont use linked: objects.customLookup.customLookup, coz "linked" doesnt support pluralization
+						`${linked('objects.customization.customization')}: Жекелендірулер`, // dont use linked: objects.customLookup.customLookup, coz "linked" doesnt support pluralization
 				},
 			},
 		},

package/src/locale/pl/pl.js

@@ -321,11 +321,9 @@ export default {
 						': ' +
 						linked('objects.case'),
 					[CrmSectionsNew.ContactsExtensions]: ({ linked }) =>
-						linked('objects.customization.customization') +
-						': ' +
-						linked('objects.contact'),
+						`${linked('objects.customization.customization')}: ${linked('objects.contact')}`,
 					[CrmSectionsNew.CustomLookups]: ({ linked }) =>
-						linked('objects.customization.customization') + ': Dostosowania', // dont use linked: objects.customLookup.customLookup, coz "linked" doesnt support pluralization
+						`${linked('objects.customization.customization')}: Dostosowania`, // dont use linked: objects.customLookup.customLookup, coz "linked" doesnt support pluralization
 				},
 			},
 		},

package/src/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -69,7 +69,7 @@ describe('Sort filter mixin', () => {
 				sort: '+queue',
 			},
 		});
-		const wrapper = shallowMount(Component, {
+		shallowMount(Component, {
 			global: {
 				plugins: [
 					router,