@webitel/ui-sdk 24.12.60 → 24.12.62

package/package.json

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

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

@@ -179,10 +179,11 @@ import sttSearch from './stt-search.svg';
 import telegramBot from './telegram-bot.svg';
 import tick from './tick.svg';
 import treeCollapse from './tree-collapse.svg';
-import treeCross from './tree-cross.svg';
 import treeExpand from './tree-expand.svg';
-import treeLine from './tree-line.svg';
 import ttsDownload from './tts-download.svg';
+import treeLine from './tree-line.svg';
+import treeCorner from './tree-corner.svg';
+import treeCross from './tree-cross.svg';
 import undo from './undo.svg';
 import unpin from './unpin.svg';
 import upload from './upload.svg';
@@ -354,6 +355,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-select/mixins/multiselectMixin.js

@@ -1,5 +1,6 @@
 import VueMultiselect from 'vue-multiselect';
 import { ObserveVisibility } from 'vue-observe-visibility';
+
 import validationMixin from '../../../mixins/validationMixin/validationMixin.js';
 import debounce from '../../../scripts/debounce.js';
 import isEmpty from '../../../scripts/isEmpty.js';
@@ -82,16 +83,34 @@ export default {
     showIntersectionObserver() {
       return this.isApiMode && !this.isLoading && this.apiOptions.length;
     },
-    // vue-multiselect doesn't show placeholder if value is empty object
     selectValue() {
+      /* vue-multiselect doesn't show placeholder if value is empty object */
       if (!this.isValue) return '';
 
+      let returnedValue = this.value;
+
+      /*
+      coerce single value to array, if it was passed with `multiple` prop
+      by dev mistake or internal error
+       */
+      if (this.multiple && !Array.isArray(returnedValue)) {
+        console.warn(
+          'wt-select: value prop should be an array when using multiple mode',
+        );
+        returnedValue = [returnedValue];
+      }
+
       if (this.useValueFromOptionsByProp) {
-        const valueFromOptions = this.cachedOptionsMap[this.value];
-        if (valueFromOptions) return valueFromOptions;
+        if (this.multiple) {
+          returnedValue = returnedValue.map(
+            (item) => this.cachedOptionsMap[item] || item,
+          );
+        } else {
+          returnedValue = this.cachedOptionsMap[returnedValue] || returnedValue;
+        }
       }
 
-      return this.value;
+      return returnedValue;
     },
 
     selectOptions() {
@@ -155,9 +174,16 @@ export default {
     },
 
     input(value) {
-      const emittedValue = this.useValueFromOptionsByProp
-        ? value[this.useValueFromOptionsByProp]
-        : value;
+      let emittedValue = value;
+      if (this.useValueFromOptionsByProp) {
+        if (this.multiple) {
+          emittedValue = value.map(
+            (item) => item[this.useValueFromOptionsByProp],
+          );
+        } else {
+          emittedValue = value[this.useValueFromOptionsByProp];
+        }
+      }
       this.$emit('input', emittedValue); // vue 2
       this.$emit('update:model-value', emittedValue); // vue 3
     },
@@ -174,12 +200,46 @@ export default {
       // load options if becomes enabled
       if (!this.disabled) this.fetchOptions();
     },
-    options: {
+    selectOptions: {
       handler() {
         if (this.trackBy === null) return; // then, options are primitives
 
-        for (const opt of this.options) {
-          this.cachedOptionsMap[opt[this.useValueFromOptionsByProp || this.trackBy]] = opt;
+        for (const opt of this.selectOptions) {
+          this.cachedOptionsMap[
+            opt[this.useValueFromOptionsByProp || this.trackBy]
+          ] = opt;
+        }
+      },
+      immediate: true,
+    },
+    value: {
+      async handler() {
+        /*
+        use case: select api option while using `useValueFromOptionsByProp` prop,
+        then, refresh page and restore selected id. but it may not be in options list,
+
+        when using api-fetched options, selected value, tracked by id,
+         may be not in returned options list,
+        so its necessary to fetch those values separately
+         */
+        if (this.useValueFromOptionsByProp && this.isApiMode) {
+          const valuesArr = Array.isArray(this.value)
+            ? this.value
+            : [this.value];
+          const uncachedValues = valuesArr.filter(() => {
+            return !this.cachedOptionsMap[this.value];
+          });
+
+          if (uncachedValues.length) {
+            const { items } = await this.searchMethod({
+              id: uncachedValues,
+              size: uncachedValues.length,
+            });
+            items.forEach((item) => {
+              this.cachedOptionsMap[item[this.useValueFromOptionsByProp]] =
+                item;
+            });
+          }
         }
       },
       immediate: true,

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

@@ -27,6 +27,10 @@
     <vue-multiselect
       ref="vue-multiselect"
       :allow-empty="allowEmpty"
+      :close-on-select="
+        $attrs.closeOnSelect ||
+        !multiple /* override default vue-multiselect value */
+      "
       :disabled="disabled"
       :internal-search="!searchMethod"
       :label="selectOptionLabel"

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>