@webitel/ui-sdk 24.12.61 → 24.12.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.61",
+  "version": "24.12.63",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/assets/icons/sprite/comment.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.80054 10C6.80054 9.44772 7.24825 9 7.80054 9H15.8005C16.3528 9 16.8005 9.44772 16.8005 10C16.8005 10.5523 16.3528 11 15.8005 11H7.80054C7.24825 11 6.80054 10.5523 6.80054 10Z"/>
+<path d="M7.80054 13C7.24825 13 6.80054 13.4477 6.80054 14C6.80054 14.5523 7.24825 15 7.80054 15H15.8005C16.3528 15 16.8005 14.5523 16.8005 14C16.8005 13.4477 16.3528 13 15.8005 13H7.80054Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.14676 21.3111C11.7353 22.7173 15.9725 21.9707 18.8721 19.0711C22.7773 15.1658 22.7773 8.83418 18.8721 4.92893C14.9669 1.02369 8.6352 1.02369 4.72996 4.92893C1.83037 7.82852 1.08368 12.0658 2.4899 15.6543C2.80314 16.4536 2.47133 18.8022 2.19383 20.3804C2.06808 21.0955 2.7055 21.7329 3.42064 21.6072C4.9988 21.3297 7.34742 20.9979 8.14676 21.3111ZM17.4579 6.34315C14.3337 3.21895 9.26837 3.21895 6.14417 6.34315C3.8267 8.66062 3.22539 12.0495 4.35203 14.9246C4.56348 15.4641 4.60441 16.0523 4.61423 16.4598C4.62533 16.9206 4.59833 17.4201 4.55556 17.9021C4.51101 18.4041 4.44555 18.9274 4.37293 19.4281C4.87365 19.3555 5.39689 19.29 5.89895 19.2455C6.38088 19.2027 6.88042 19.1757 7.34117 19.1868C7.74876 19.1966 8.33689 19.2375 8.87647 19.449C11.7515 20.5756 15.1404 19.9743 17.4579 17.6569C20.5821 14.5327 20.5821 9.46734 17.4579 6.34315Z"/>
+</svg>

package/src/assets/icons/sprite/index.js

@@ -63,6 +63,7 @@ import close from './close.svg';
 import closeFilled from './close--filled.svg';
 import collapse from './collapse.svg';
 import columnSelect from './column-select.svg';
+import comment from './comment.svg';
 import conference from './conference.svg';
 import contacts from './contacts.svg';
 import copy from './copy.svg';
@@ -179,6 +180,7 @@ import sttSearch from './stt-search.svg';
 import telegramBot from './telegram-bot.svg';
 import tick from './tick.svg';
 import treeCollapse from './tree-collapse.svg';
+import treeCorner from './tree-corner.svg';
 import treeCross from './tree-cross.svg';
 import treeExpand from './tree-expand.svg';
 import treeLine from './tree-line.svg';
@@ -268,6 +270,7 @@ export default objCamelToKebab({
   minus,
   collapse,
   columnSelect,
+  comment,
   variableSelect,
   contacts,
   copy,
@@ -354,6 +357,7 @@ export default objCamelToKebab({
   zoomOut,
   ttsDownload,
   treeLine,
+  treeCorner,
   treeCross,
   stt,
   sttDownload,

package/src/assets/icons/sprite/tree-corner.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0V13H24V12L13 12L13 0H12Z"/>
+</svg>

package/src/components/index.js

@@ -1,11 +1,14 @@
+import WtNavigationMenu from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
+import WtSelectionPopup from './on-demand/wt-selection-popup/wt-selection-popup.vue';
+import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
 import WtActionBar from './wt-action-bar/wt-action-bar.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
 import WtAppNavigator from './wt-app-header/wt-app-navigator.vue';
 import WtHeaderActions from './wt-app-header/wt-header-actions.vue';
 import WtAvatar from './wt-avatar/wt-avatar.vue';
 import WtBadge from './wt-badge/wt-badge.vue';
-import WtButtonSelect from './wt-button-select/wt-button-select.vue';
 import WtButton from './wt-button/wt-button.vue';
+import WtButtonSelect from './wt-button-select/wt-button-select.vue';
 import WtCheckbox from './wt-checkbox/wt-checkbox.vue';
 import WtChip from './wt-chip/wt-chip.vue';
 import WtConfirmDialog from './wt-confirm-dialog/wt-confirm-dialog.vue';
@@ -13,21 +16,22 @@ import WtContextMenu from './wt-context-menu/wt-context-menu.vue';
 import WtCopyAction from './wt-copy-action/wt-copy-action.vue';
 import WtDatepicker from './wt-datepicker/wt-datepicker.vue';
 import WtDivider from './wt-divider/wt-divider.vue';
+import WtDualPanel from './wt-dual-panel/wt-dual-panel.vue';
 import WtDummy from './wt-dummy/wt-dummy.vue';
 import WtEmpty from './wt-empty/wt-empty.vue';
 import WtErrorPage from './wt-error-page/wt-error-page.vue';
 import WtExpansionPanel from './wt-expansion-panel/wt-expansion-panel.vue';
 import WtFiltersPanelWrapper from './wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue';
-import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
 import WtHeadline from './wt-headline/wt-headline.vue';
+import WtHeadlineNav from './wt-headline-nav/wt-headline-nav.vue';
 import WtHint from './wt-hint/wt-hint.vue';
+import WtIcon from './wt-icon/wt-icon.vue';
 import WtIconAction from './wt-icon-action/wt-icon-action.vue';
 import WtIconBtn from './wt-icon-btn/wt-icon-btn.vue';
-import WtIcon from './wt-icon/wt-icon.vue';
 import WtImage from './wt-image/wt-image.vue';
 import WtIndicator from './wt-indicator/wt-indicator.vue';
-import WtInputInfo from './wt-input-info/wt-input-info.vue';
 import WtInput from './wt-input/wt-input.vue';
+import WtInputInfo from './wt-input-info/wt-input-info.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';
@@ -39,7 +43,6 @@ import WtNotification from './wt-notification/wt-notification.vue';
 import WtNotificationsBar from './wt-notifications-bar/wt-notifications-bar.vue';
 import WtPageHeader from './wt-page-header/wt-page-header.vue';
 import WtPageWrapper from './wt-page-wrapper/wt-page-wrapper.vue';
-import WtDualPanel from './wt-dual-panel/wt-dual-panel.vue';
 import WtPagination from './wt-pagination/wt-pagination.vue';
 import WtPlayer from './wt-player/wt-player.vue';
 import WtPopup from './wt-popup/wt-popup.vue';
@@ -52,19 +55,17 @@ import WtSlider from './wt-slider/wt-slider.vue';
 import WtStatusSelect from './wt-status-select/wt-status-select.vue';
 import WtStepper from './wt-stepper/wt-stepper.vue';
 import WtSwitcher from './wt-switcher/wt-switcher.vue';
+import WtTable from './wt-table/wt-table.vue';
 import WtTableActions from './wt-table-actions/wt-table-actions.vue';
 import WtTableColumnSelect from './wt-table-column-select/wt-table-column-select.vue';
-import WtTable from './wt-table/wt-table.vue';
-import WtTreeTable from './wt-tree-table/wt-tree-table.vue';
 import WtTabs from './wt-tabs/wt-tabs.vue';
 import WtTagsInput from './wt-tags-input/wt-tags-input.vue';
 import WtTextarea from './wt-textarea/wt-textarea.vue';
 import WtTimeInput from './wt-time-input/wt-time-input.vue';
 import WtTimepicker from './wt-timepicker/wt-timepicker.vue';
 import WtTooltip from './wt-tooltip/wt-tooltip.vue';
-import WtNavigationMenu from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
-import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
-import WtSelectionPopup from './on-demand/wt-selection-popup/wt-selection-popup.vue';
+import WtTree from './wt-tree/wt-tree.vue';
+import WtTreeTable from './wt-tree-table/wt-tree-table.vue';
 
 const Components = {
   WtActionBar,
@@ -118,6 +119,7 @@ const Components = {
   WtPlayer,
   WtStatusSelect,
   WtTable,
+  WtTree,
   WtTreeTable,
   WtTableActions,
   WtTableColumnSelect,

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

@@ -1,7 +1,9 @@
 <template>
   <div class="wt-table">
     <table class="wt-table__table">
-      <thead class="wt-table__head">
+      <thead
+        v-if="!headless"
+        class="wt-table__head">
         <tr
           :style="columnsStyle"
           class="wt-table__tr wt-table__tr__head"
@@ -183,6 +185,13 @@ export default {
       type: Boolean,
       default: true,
     },
+    /**
+     * 'If true, displays table without header.'
+     */
+    headless: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['sort', 'update:selected'],
 

package/src/components/wt-tree/__tests__/WtTree.spec.js

@@ -0,0 +1,13 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import WtTree from '../wt-tree.vue';
+
+describe('WtTree', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTree, {
+      stubs: {
+        WtTree: true,
+      },
+    });
+    expect(wrapper.classes('wt-tree')).toBe(true);
+  });
+});

package/src/components/wt-tree/types/wt-tree-mode.ts

@@ -0,0 +1,4 @@
+export enum WtTreeMode {
+  TREE = 'tree',
+  LIST = 'list',
+}

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

@@ -0,0 +1,178 @@
+<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"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </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">
+import deepEqual from 'deep-equal';
+import { computed } from 'vue';
+
+import WtTreeLine from '../wt-tree-line/wt-tree-line.vue';
+import { WtTreeMode } from './types/wt-tree-mode.ts';
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Selected element, it can be an object or a string, related to itemData props
+     */
+    modelValue?: null | any;
+    /**
+     * You need to pass an array of objects that will be displayed in the tree
+     */
+    data: any[];
+    /**
+     * You can pass the name of the property that will be used as the label of the selected item
+     */
+    itemLabel?: string;
+    /**
+     * You can pass the name of the property that will be used as the value of the selected item
+     */
+    itemData?: string;
+    /**
+     * Select mode for display tree data
+     * @example 'tree', 'list'
+     */
+    mode?: string;
+    /**
+     * You can pass the name of the property that will be used for getting children elements
+     */
+    childrenProp?: string;
+  }>(),
+  {
+    childrenProp: 'children',
+    mode: WtTreeMode.TREE,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'select', data: any): void;
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const allData = computed(() => {
+  const result = [];
+
+  const getNestedItems = (item: any) => {
+    result.push(item);
+
+    if (item[props.childrenProp]) {
+      item[props.childrenProp].forEach((child: any) => {
+        getNestedItems(child);
+      });
+    }
+  };
+
+  props.data.forEach((item) => {
+    getNestedItems(item);
+  });
+
+  return result;
+});
+
+const selectElement = (item: any) => {
+  emit('update:modelValue', props.itemData ? item[props.itemData] : item);
+};
+
+const compareSelectElement = (item: any) => {
+  if (props.itemData) {
+    return item[props.itemData] === props.modelValue;
+  }
+
+  return deepEqual(props.modelValue, item);
+};
+</script>
+
+<style lang="scss">
+@use '../../css/main.scss' as *;
+
+.wt-tree {
+  padding: var(--spacing-sm);
+  background: var(--content-wrapper-color);
+  border-radius: var(--border-radius);
+  overflow: auto;
+
+  &__content {
+    @extend %wt-scrollbar;
+
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    height: 100%;
+    padding-right: var(--spacing-2xs);
+  }
+
+  &__list-content {
+    @extend %wt-scrollbar;
+
+    display: flex;
+    flex-direction: column;
+    padding-right: var(--spacing-2xs);
+    gap: var(--spacing-xs);
+    overflow: auto;
+    align-items: flex-start;
+    height: 100%;
+  }
+
+  &__label-wrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--border-radius);
+    color: var(--wt-tree-item-on);
+    transition: var(--transition);
+
+    &:hover {
+      background: var(--wt-tree-item-hover);
+      color: var(--wt-tree-item-hover-on);
+    }
+
+    &.active {
+      background: var(--wt-tree-item-active);
+      color: var(--wt-tree-item-active-on);
+    }
+  }
+
+  &__label-icon {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/components/wt-tree-line/_variables.scss

@@ -0,0 +1,21 @@
+
+:root {
+  --wt-tree-item-active: var(--primary-light-color);
+  --wt-tree-item-active-on: var(--grey-darken-4);
+
+  --wt-tree-item: var(--primary-light-color);
+  --wt-tree-item-on: var(--grey-darken-1);
+
+  --wt-tree-item-hover: var(--dp-24-surface-color);
+  --wt-tree-item-hover-on: var(--grey-darken-1);
+}
+
+:root.theme--dark {
+  --wt-tree-item-active: var(--primary-light-color);
+  --wt-tree-item-active-on: var(--grey-lighten-4);
+
+  --wt-tree-item: var(--primary-light-color);
+  --wt-tree-item-on: var(--grey-lighten-3);
+
+  --wt-tree-item-hover-on: var(--grey-lighten-3);
+}

package/src/components/wt-tree-line/types/wt-tree-nested-icons.ts

@@ -0,0 +1,4 @@
+export interface WtTreeNestedIcons {
+    icon: string;
+    hidden: boolean;
+}

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

@@ -0,0 +1,222 @@
+<template>
+  <div class="wt-tree-line">
+    <div class="wt-tree-line__icon-wrapper">
+      <wt-icon
+        v-for="(icon, index) in nestedIcons"
+        :key="index"
+        :icon="icon.icon"
+        :class="{ hidden: icon.hidden }"
+      />
+      <wt-icon
+        v-if="nestedLevel >= 1"
+        :icon="lastChild ? 'tree-corner' : 'tree-cross'"
+      />
+      <wt-icon-btn
+        v-if="data[childrenProp] && data[childrenProp].length"
+        :icon="collapsed ? 'plus' : 'minus'"
+        @click="collapsed = !collapsed"
+      />
+    </div>
+    <div
+      :class="{ active: isSelected }"
+      class="wt-tree-line__label-wrapper"
+    >
+      <p
+        class="wt-tree-line__label"
+        @click="selectElement"
+      >
+        {{ label }}
+      </p>
+      <wt-icon
+        v-if="isSelected"
+        icon="chat-message-status-sent"
+      />
+    </div>
+  </div>
+  <wt-expand-transition v-show="!collapsed">
+    <div>
+      <wt-tree-line
+        v-for="(child, index) in data[childrenProp]"
+        :key="index"
+        :model-value="modelValue"
+        :data="child"
+        :children-prop="childrenProp"
+        :item-label="itemLabel"
+        :item-data="itemData"
+        :nested-level="nestedLevel + 1"
+        :next-element="!!data[childrenProp][index + 1]"
+        :nested-icons="displayIcons"
+        :last-child="index === data[childrenProp].length - 1"
+        @open-parent="onOpenParent"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </div>
+  </wt-expand-transition>
+</template>
+
+<script setup lang="ts">
+import deepEqual from 'deep-equal';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import WtExpandTransition from '../transitions/wt-expand-transition.vue';
+import type { WtTreeNestedIcons } from './types/wt-tree-nested-icons.ts';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: null | any;
+    data: any;
+    itemLabel?: string | undefined;
+    itemData?: string | undefined;
+    childrenProp?: string;
+    nestedLevel?: number;
+    lastChild?: boolean;
+    nestedIcons?: WtTreeNestedIcons[];
+    nextElement?: boolean;
+    /**
+     * 'It's a key in data object, which contains field what display searched elements. By this field, table will be opened to elements with this field value. '
+     */
+    searchedProp?: string;
+  }>(),
+  {
+    nestedLevel: 0,
+    childrenProp: 'children',
+    lastChild: false,
+    nextElement: false,
+    searchedProp: 'searched',
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'openParent'): void;
+  (e: 'update:modelValue', value: any): void;
+}>();
+
+const label = computed(() =>
+  props.itemLabel ? props.data[props.itemLabel] : props.data,
+);
+
+const displayIcons = computed(() => {
+  const icons = props.nestedIcons ? [...props.nestedIcons] : [];
+
+  if (props.nestedLevel === 0) {
+    return icons;
+  }
+
+  icons.push({
+    icon: 'tree-line',
+    hidden: !props.nextElement,
+  });
+
+  return icons;
+});
+
+const isSelected = computed(() => {
+  if (props.itemData) {
+    return props.data[props.itemData] === props.modelValue;
+  }
+
+  return deepEqual(props.modelValue, props.data);
+});
+
+const selectElement = () => {
+  if (props.data[props.childrenProp]?.length) {
+    return;
+  }
+
+  emit(
+    'update:modelValue',
+    props.itemData ? props.data[props.itemData] : props.data,
+  );
+};
+
+const collapsed = ref(true);
+const openParent = () => {
+  if (props.nestedLevel > 0) {
+    emit('openParent');
+  }
+};
+
+const onOpenParent = () => {
+  collapsed.value = false;
+  openParent();
+};
+
+const hasSearchedElement = (data: Record<string, any>, nestedLevel = 0) => {
+  // Check if the object itself has searched
+  if (data[props.searchedProp] && nestedLevel) {
+    return true;
+  }
+
+  // Check if the object has children
+  if (Array.isArray(data[props.childrenProp])) {
+    // Iterate through the array
+    for (const child of data[props.childrenProp]) {
+      // Recursively check nested objects
+      if (hasSearchedElement(child, nestedLevel + 1)) {
+        return true;
+      }
+    }
+  }
+
+  // If no match is found, return false
+  return false;
+};
+
+onMounted(() => {
+  if (isSelected.value) {
+    openParent();
+  }
+
+  if (props.data[props.searchedProp]) {
+    openParent();
+  }
+});
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (isSelected.value) {
+      openParent();
+    }
+  },
+);
+</script>
+
+<style lang="scss">
+@use '../../css/main.scss' as *;
+@use './variables.scss' as *;
+
+.wt-tree-line {
+  display: flex;
+  align-items: flex-start;
+
+  &__icon-wrapper {
+    display: flex;
+  }
+
+  &__label-wrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 0 var(--spacing-2xs);
+    border-radius: var(--border-radius);
+    color: var(--wt-tree-item-on);
+    transition: var(--transition);
+
+    &:hover {
+      background: var(--wt-tree-item-hover);
+      color: var(--wt-tree-item-hover-on);
+    }
+
+    &.active {
+      background: var(--wt-tree-item-active);
+      color: var(--wt-tree-item-active-on);
+    }
+  }
+
+  &__label {
+    @extend %typo-body-1;
+    text-wrap: nowrap;
+  }
+}
+</style>