@webitel/ui-sdk 25.8.31 → 25.8.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.8.31",
+  "version": "25.8.33",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -37,6 +37,7 @@
     "src/enums/*",
     "src/mixins/*",
     "src/scripts/*",
+    "src/utils/*",
     "src/validations/*",
     "src/modules/*",
     "src/plugins/*",
@@ -196,6 +197,14 @@
       "types": "./types/scripts*",
       "import": "./src/scripts*"
     },
+    "./utils*": {
+      "types": "./types/utils*",
+      "import": "./src/utils*"
+    },
+    "./utils": {
+      "types": "./types/utils/index.d.ts",
+      "import": "./src/utils/index.ts"
+    },
     "./api*": {
       "types": "./types/api*",
       "import": "./src/api*"

package/src/components/index.js

@@ -1,3 +1,4 @@
+import WtDisplayChipItems from './on-demand/wt-display-chip-items/wt-display-chip-items.vue';
 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';
@@ -141,6 +142,7 @@ const Components = {
   WtNavigationMenu,
   WtStartPage,
   WtSelectionPopup,
+  WtDisplayChipItems,
 };
 
 export {
@@ -157,6 +159,7 @@ export {
   WtContextMenu,
   WtCopyAction,
   WtDatepicker,
+  WtDisplayChipItems,
   WtDivider,
   WtDualPanel,
   WtDummy,

package/src/components/on-demand/wt-display-chip-items/wt-display-chip-items.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="wt-display-chip-items">
+    <p v-if="props.title">{{ title }}:</p>
+
+    <slot v-if="!props.hideFirstItem" name="first-item">
+      {{ displayText(firstItemName) }}
+    </slot>
+
+      <wt-popover>
+        <template #activator="{ toggle }">
+          <slot name="activator" :toggle="toggle">
+            <div v-if="displayList.length" @click="toggle">
+              <wt-chip>
+                +{{ displayList.length }}
+              </wt-chip>
+            </div>
+          </slot>
+        </template>
+
+        <template #default>
+          <slot name="items" :items="displayList">
+            <div
+              v-for="({ name, id }) of displayList"
+              :key="id"
+            >
+              {{ name }}
+            </div>
+          </slot>
+        </template>
+      </wt-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtChip,WtPopover } from '@webitel/ui-sdk/components';
+import { computed } from 'vue';
+
+import { displayText, EMPTY_SYMBOL } from '../../../utils';
+
+interface Props {
+  hideFirstItem?: boolean
+  useEmptySymbol?: boolean
+  title?: string
+  items: unknown[]
+}
+const props = defineProps<Props>()
+
+const firstItemName = computed(() => {
+  if(!props.items?.length) return props.useEmptySymbol ? EMPTY_SYMBOL : '';
+
+  return props.items[0]?.name
+});
+
+const displayList = computed(() => {
+  if(!props.items?.length) return [];
+
+  return !props.hideFirstItem ? props.items.slice(1) : props.items
+})
+</script>
+
+<style lang="scss" scoped>
+.wt-display-chip-items {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -36,16 +36,13 @@
             >
               {{ option.description }}
             </p>
-            <wt-tooltip>
-              <template #activator>
-                <wt-icon-btn
-                  v-if="option.description"
-                  color="info"
-                  icon="rounded-info"
-                />
-              </template>
-              {{ option.description }}
-            </wt-tooltip>
+
+            <wt-icon-btn
+              v-if="option.description"
+              v-tooltip="option.description"
+              color="info"
+              icon="rounded-info"
+            />
           </slot>
         </li>
       </ul>

package/src/components/wt-app-header/wt-app-navigator.vue

@@ -3,17 +3,13 @@
     v-clickaway="close"
     class="wt-app-navigator"
   >
-    <wt-tooltip>
-      <template #activator>
-        <wt-icon-btn
-          :class="{ active: isOpened }"
-          class="wt-app-navigator__btn"
-          icon="app-navigator"
-          @click="isOpened = !isOpened"
-        />
-      </template>
-      {{ $t('webitelUI.appNavigator.title') }}
-    </wt-tooltip>
+    <wt-icon-btn
+      v-tooltip="$t('webitelUI.appNavigator.title')"
+      :class="{ active: isOpened }"
+      class="wt-app-navigator__btn"
+      icon="app-navigator"
+      @click="isOpened = !isOpened"
+    />
 
     <transition name="fade">
       <nav

package/src/components/wt-app-header/wt-header-actions.vue

@@ -1,17 +1,13 @@
 <template>
   <div class="wt-header-actions">
-    <wt-tooltip>
-      <template #activator>
-        <wt-icon-btn
-          v-clickaway="close"
-          :class="{ active: isOpened }"
-          class="wt-header-actions__btn"
-          icon="account"
-          @click="isOpened = !isOpened"
-        />
-      </template>
-      {{ $t('webitelUI.headerActions.account') }}
-    </wt-tooltip>
+    <wt-icon-btn
+      v-clickaway="close"
+      v-tooltip="$t('webitelUI.headerActions.account')"
+      :class="{ active: isOpened }"
+      class="wt-header-actions__btn"
+      icon="account"
+      @click="isOpened = !isOpened"
+    />
 
     <transition name="fade">
       <section

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -1,43 +1,47 @@
 <template>
-  <wt-tooltip
-    :triggers="tooltipTriggers"
-    :visible="visible"
-    :disabled="disabled"
-    class="wt-context-menu"
-    placement="bottom-end"
-    popper-class="wt-context-menu__floating-wrapper"
-    @update:visible="visible = $event"
-  >
-    <template #activator>
-      <slot name="activator" />
-    </template>
-    <template #default="{ hide }">
-      <ul
-        :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
-        class="wt-context-menu__menu"
-      >
-        <li
-          v-for="(option, index) of options"
-          :key="index"
-          class="wt-context-menu__option-wrapper"
+  <div class="wt-context-menu">
+    <wt-popover
+      :visible="visible"
+      :disabled="disabled"
+      unstyled
+      placement="bottom-end"
+      class="wt-context-menu__floating-wrapper"
+    >
+      <template #activator="{ toggle, show }">
+        <slot
+          name="activator"
+          v-bind="{ toggle, show }"
+        />
+      </template>
+
+      <template #default="{ hide }">
+        <ul
+          :style="`width: ${width}; min-width: ${minWidth}; max-width: ${maxWidth};`"
+          class="wt-context-menu__menu"
         >
-          <a
-            :class="[{ 'wt-context-menu__option--disabled': option.disabled }]"
-            class="wt-context-menu__option"
-            href="#"
-            @click.prevent="handleOptionClick({ option, index, hide })"
+          <li
+            v-for="(option, index) of options"
+            :key="index"
+            class="wt-context-menu__option-wrapper"
           >
-            <slot
-              name="option"
-              v-bind="option"
+            <a
+              :class="[{ 'wt-context-menu__option--disabled': option.disabled }]"
+              class="wt-context-menu__option"
+              href="#"
+              @click.prevent="handleOptionClick({ option, index, hide })"
             >
-              {{ option.text || option }}
-            </slot>
-          </a>
-        </li>
-      </ul>
-    </template>
-  </wt-tooltip>
+              <slot
+                name="option"
+                v-bind="option"
+              >
+                {{ option.text || option }}
+              </slot>
+            </a>
+          </li>
+        </ul>
+      </template>
+    </wt-popover>
+  </div>
 </template>
 
 <script setup>

package/src/components/wt-copy-action/wt-copy-action.vue

@@ -1,15 +1,11 @@
 <template>
-  <wt-tooltip class="wt-copy-action">
-    <template #activator>
-      <wt-icon-btn
-        :icon="copied ? 'done' : 'copy'"
-        class="copy-action"
-        v-bind="$attrs"
-        @click="copy"
-      />
-    </template>
-    {{ copied ? copiedTooltip : copyTooltip }}
-  </wt-tooltip>
+  <wt-icon-btn
+    v-tooltip="copied ? copiedTooltip : copyTooltip"
+    :icon="copied ? 'done' : 'copy'"
+    class="copy-action"
+    v-bind="$attrs"
+    @click="copy"
+  />
 </template>
 
 <script>

package/src/components/wt-icon-action/wt-icon-action.vue

@@ -1,16 +1,12 @@
 <template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        :icon="iconAction.icon"
-        :size="size"
-        @click="emit('click', $event)"
-        @mousedown="emit('mousedown', $event)"
-      />
-    </template>
-    {{ t(iconAction.hint) }}
-  </wt-tooltip>
+  <wt-icon-btn
+    v-tooltip="t(iconAction.hint)"
+    :disabled="disabled"
+    :icon="iconAction.icon"
+    :size="size"
+    @click="emit('click', $event)"
+    @mousedown="emit('mousedown', $event)"
+  />
 </template>
 
 <script setup>

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

@@ -8,7 +8,8 @@
     class="wt-label"
   >
     <slot />
-    <wt-hint v-if="hint">{{ hint }} </wt-hint>
+
+    <div v-if="hint" v-tooltip="hint" />
   </label>
 </template>
 

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

@@ -14,28 +14,21 @@
       />
     </div>
     <div class="wt-pagination__page-controls">
-      <wt-tooltip>
-        <template #activator>
-          <wt-icon-btn
-            :disabled="!prev"
-            class="wt-pagination__page-control"
-            icon="arrow-left"
-            @click="goPrev"
-          />
-        </template>
-        {{ $t('webitelUI.pagination.prev') }}
-      </wt-tooltip>
-      <wt-tooltip>
-        <template #activator>
-          <wt-icon-btn
-            :disabled="!next"
-            class="wt-pagination__page-control"
-            icon="arrow-right"
-            @click="goNext"
-          />
-        </template>
-        {{ $t('webitelUI.pagination.next') }}
-      </wt-tooltip>
+      <wt-icon-btn
+        v-tooltip="$t('webitelUI.pagination.prev')"
+        :disabled="!prev"
+        class="wt-pagination__page-control"
+        icon="arrow-left"
+        @click="goPrev"
+      />
+
+      <wt-icon-btn
+        v-tooltip="$t('webitelUI.pagination.next')"
+        :disabled="!next"
+        class="wt-pagination__page-control"
+        icon="arrow-right"
+        @click="goNext"
+      />
     </div>
   </footer>
 </template>

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

@@ -1,19 +1,24 @@
 <template>
-  <p-popover
-    ref="innerPopover"
-    v-bind="attrs"
-    :append-to="appendTo"
-    :base-z-index="baseZIndex"
-    :auto-z-index="autoZIndex"
-    :breakpoints="breakpoints"
-    :dt="dt"
-    :pt="pt"
-    :pt-options="ptOptions"
-    :close-on-escape="closeOnEscape"
-    v-on="attrs"
-  >
-    <slot />
-  </p-popover>
+  <div>
+    <slot name="activator" v-bind="{ show, toggle, hide }" />
+
+    <p-popover
+      ref="innerPopover"
+      v-bind="attrs"
+      :append-to="appendTo"
+      :base-z-index="baseZIndex"
+      :auto-z-index="autoZIndex"
+      :breakpoints="breakpoints"
+      :dt="dt"
+      :pt="pt"
+      :pt-options="ptOptions"
+      :close-on-escape="closeOnEscape"
+      :unstyled="unstyled"
+      v-on="attrs"
+    >
+      <slot name="default" v-bind="{ hide, toggle }" />
+    </p-popover>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -32,13 +37,26 @@ withDefaults(defineProps<PopoverProps>(), {
   pt: null,
   ptOptions: null,
   closeOnEscape: true,
+  unstyled: false
 });
 defineEmits<PopoverEmitsOptions>();
 
+const toggle = (event?: Event) => {
+  innerPopover.value?.toggle(event);
+};
+
+const show = (event?: Event) => {
+  innerPopover.value?.show(event);
+};
+
+const hide = (event?: Event) => {
+  innerPopover.value?.hide(event);
+};
+
 // Expose useful Popover methods
 defineExpose({
-  toggle: (...args) => innerPopover.value?.toggle?.(...args),
-  show: (...args) => innerPopover.value?.show?.(...args),
-  hide: (...args) => innerPopover.value?.hide?.(...args),
+  toggle,
+  show,
+  hide,
 });
 </script>

package/src/components/wt-search-bar/wt-search-bar.vue

@@ -46,15 +46,11 @@
           @click="updateSearchMode"
         >
           <template #activator>
-            <wt-tooltip>
-              <template #activator>
-                <wt-icon-btn
-                  :color="invalid ? 'error' : 'default'"
-                  icon="filter"
-                />
-              </template>
-              {{ $t('webitelUI.searchBar.settingsHint') }}
-            </wt-tooltip>
+            <wt-icon-btn
+              v-tooltip="$t('webitelUI.searchBar.settingsHint')"
+              :color="invalid ? 'error' : 'default'"
+              icon="filter"
+            />
           </template>
           <template #option="{ value, text }">
             <wt-radio

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

@@ -52,23 +52,24 @@
         v-if="!isOpened"
         #limit
       >
-        <wt-tooltip
-          :triggers="['click']"
-          class="multiselect__limit"
-        >
-          <template #activator>
-            <wt-chip> +{{ value.length - 1 }}</wt-chip>
+        <wt-popover class="multiselect__limit">
+          <template #activator="{ toggle }">
+            <div @click.stop.prevent="toggle">
+              <wt-chip> +{{ value.length - 1 }}</wt-chip>
+            </div>
           </template>
 
-          <div>
-            <p
-              v-for="(option, idx) of value.slice(1)"
-              :key="idx"
-            >
-              {{ getOptionLabel({ option, optionLabel }) }}
-            </p>
-          </div>
-        </wt-tooltip>
+          <template #default>
+            <div>
+              <p
+                v-for="(option, idx) of value.slice(1)"
+                :key="idx"
+              >
+                {{ getOptionLabel({ option, optionLabel }) }}
+              </p>
+            </div>
+          </template>
+        </wt-popover>
       </template>
 
       <!--      Slot that is used for all selected options (tags)-->

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

@@ -1,61 +1,49 @@
 <template>
   <aside class="wt-table-actions">
     <slot />
-    <wt-tooltip v-if="isImport">
-      <template #activator>
-        <wt-icon-btn
-          icon="download"
-          @click="$emit('input', 'import')"
-        />
-      </template>
-      {{ $t('reusable.import') }}
-    </wt-tooltip>
-    <wt-tooltip v-if="isExport">
-      <template #activator>
-        <wt-icon-btn
-          icon="upload"
-          @click="$emit('input', 'export')"
-        />
-      </template>
-      {{ $t('reusable.export') }}
-    </wt-tooltip>
-    <wt-tooltip v-if="isFilterReset">
-      <template #activator>
-        <wt-icon-btn
-          icon="clear"
-          @click="$emit('input', 'filterReset')"
-        />
-      </template>
-      {{ $t('webitelUI.tableActions.filterReset') }}
-    </wt-tooltip>
-    <wt-tooltip v-if="isColumnSelect">
-      <template #activator>
-        <wt-icon-btn
-          icon="column-select"
-          @click="$emit('input', 'columnSelect')"
-        />
-      </template>
-      {{ $t('webitelUI.tableActions.columnSelect') }}
-    </wt-tooltip>
-    <wt-tooltip v-if="isRefresh">
-      <template #activator>
-        <wt-icon-btn
-          icon="refresh"
-          @click="$emit('input', 'refresh')"
-        />
-      </template>
-      {{ $t('webitelUI.tableActions.refreshTable') }}
-    </wt-tooltip>
-    <wt-tooltip v-if="isSettings">
-      <template #activator>
-        <wt-icon-btn
-          :class="{ active: isSettingsActive }"
-          icon="filter"
-          @click="$emit('input', 'settings')"
-        />
-      </template>
-      {{ $t('webitelUI.tableActions.expandFilters') }}
-    </wt-tooltip>
+
+    <wt-icon-btn
+      v-if="isImport"
+      v-tooltip="$t('reusable.import')"
+      icon="download"
+      @click="$emit('input', 'import')"
+    />
+
+    <wt-icon-btn
+      v-if="isExport"
+      v-tooltip="$t('reusable.export')"
+      icon="upload"
+      @click="$emit('input', 'export')"
+    />
+
+    <wt-icon-btn
+      v-if="isFilterReset"
+      v-tooltip="$t('webitelUI.tableActions.filterReset')"
+      icon="clear"
+      @click="$emit('input', 'filterReset')"
+    />
+
+    <wt-icon-btn
+      v-if="isColumnSelect"
+      v-tooltip="$t('webitelUI.tableActions.columnSelect')"
+      icon="column-select"
+      @click="$emit('input', 'columnSelect')"
+    />
+
+    <wt-icon-btn
+      v-if="isRefresh"
+      v-tooltip="$t('webitelUI.tableActions.refreshTable')"
+      icon="refresh"
+      @click="$emit('input', 'refresh')"
+    />
+
+    <wt-icon-btn
+      v-if="isSettings"
+      v-tooltip="$t('webitelUI.tableActions.expandFilters')"
+      :class="{ active: isSettingsActive }"
+      icon="filter"
+      @click="$emit('input', 'settings')"
+    />
   </aside>
 </template>
 

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

@@ -1,14 +1,11 @@
 <template>
   <div class="wt-table-column-select">
-    <wt-tooltip>
-      <template #activator>
-        <wt-icon-btn
-          icon="column-select"
-          @click="openPopup"
-        />
-      </template>
-      {{ $t('webitelUI.tableColumnSelect.title') }}
-    </wt-tooltip>
+    <wt-icon-btn
+      v-tooltip="$t('webitelUI.tableColumnSelect.title')"
+      icon="column-select"
+      @click="openPopup"
+    />
+
     <wt-popup
       :shown="isColumnSelectPopup"
       class="wt-table-column-select__popup"