@webitel/ui-sdk 1.0.44 → 2.0.0

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

@@ -1,43 +1,67 @@
 <template>
   <aside class="wt-table-actions">
     <slot></slot>
-    <wt-icon-btn
-      v-if="isImport"
-      icon="download"
-      :tooltip="$t('reusable.import')"
-      @click="$emit('input', 'import')"
-    ></wt-icon-btn>
-    <wt-icon-btn
-      v-if="isExport"
-      icon="upload"
-      :tooltip="$t('reusable.export')"
-      @click="$emit('input', 'export')"
-    ></wt-icon-btn>
-    <wt-icon-btn
-      v-if="isFilterReset"
-      icon="clear"
-      :tooltip="$t('webitelUI.tableActions.filterReset')"
-      @click="$emit('input', 'filterReset')"
-    ></wt-icon-btn>
-    <wt-icon-btn
-      v-if="isColumnSelect"
-      icon="column-select"
-      :tooltip="$t('webitelUI.tableActions.columnSelect')"
-      @click="$emit('input', 'columnSelect')"
-    ></wt-icon-btn>
-    <wt-icon-btn
-      v-if="isRefresh"
-      icon="refresh"
-      :tooltip="$t('webitelUI.tableActions.refreshTable')"
-      @click="$emit('input', 'refresh')"
-    ></wt-icon-btn>
-    <wt-icon-btn
-      v-if="isSettings"
-      :class="{'active': isSettingsActive}"
-      icon="filter"
-      :tooltip="$t('webitelUI.tableActions.expandFilters')"
-      @click="$emit('input', 'settings')"
-    ></wt-icon-btn>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isImport"
+          icon="download"
+          @click="$emit('input', 'import')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('reusable.import') }}
+    </wt-tooltip>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isExport"
+          icon="upload"
+          @click="$emit('input', 'export')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('reusable.export') }}
+    </wt-tooltip>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isFilterReset"
+          icon="clear"
+          @click="$emit('input', 'filterReset')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.filterReset') }}
+    </wt-tooltip>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isColumnSelect"
+          icon="column-select"
+          @click="$emit('input', 'columnSelect')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.columnSelect') }}
+    </wt-tooltip>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isRefresh"
+          icon="refresh"
+          @click="$emit('input', 'refresh')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.refreshTable') }}
+    </wt-tooltip>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-if="isSettings"
+          :class="{'active': isSettingsActive}"
+          icon="filter"
+          @click="$emit('input', 'settings')"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableActions.expandFilters') }}
+    </wt-tooltip>
   </aside>
 </template>
 
@@ -81,7 +105,7 @@ export default {
 .wt-table-actions {
   display: flex;
   align-items: center;
-  gap: var(--table-actions-icon-gap);
   padding: var(--table-actions-padding);
+  gap: var(--table-actions-icon-gap);
 }
 </style>

package/src/components/organisms/wt-table-column-select/__tests__/WtTableColumnSelect.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtTableColumnSelect from '../wt-table-column-select.vue';
 
 describe('WtTableColumnSelect', () => {
@@ -19,7 +19,7 @@ describe('WtTableColumnSelect', () => {
     expect(wrapper.find('wt-table-column-select__popup').exists()).toBe(false);
   });
   it('column select popup is opening by icon-btn click', async () => {
-    const wrapper = shallowMount(WtTableColumnSelect, {
+    const wrapper = mount(WtTableColumnSelect, {
       propsData: {
         headers: [],
       },

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

@@ -1,10 +1,14 @@
 <template>
   <div class="wt-table-column-select">
-    <wt-icon-btn
-      icon="column-select"
-      :tooltip="$t('webitelUI.tableColumnSelect.title')"
-      @click="openPopup"
-    ></wt-icon-btn>
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          icon="column-select"
+          @click="openPopup"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.tableColumnSelect.title') }}
+    </wt-tooltip>
     <wt-popup
       v-if="isColumnSelectPopup"
       class="wt-table-column-select__popup"
@@ -16,12 +20,12 @@
       <template slot="main">
         <ul class="wt-table-column-select__popup__list">
           <li
-            class="wt-table-column-select__popup__item"
             v-for="(col, key) of changeableDraft"
             :key="key"
+            class="wt-table-column-select__popup__item"
             @click.capture.prevent="col.show = !col.show"
           >
-            <wt-checkbox v-model="col.show" :label="col.text"/>
+            <wt-checkbox v-model="col.show" :label="col.text" />
           </li>
         </ul>
       </template>
@@ -105,9 +109,9 @@ export default {
 
 .wt-table-column-select__popup__list {
   @extend %wt-scrollbar;
-  max-height: 35vh; // fixme popup fixed sizes
-  width: 550px; // fixme popup fixed sizes
   overflow: auto;
+  width: 550px; // fixme popup fixed sizes
+  max-height: 35vh; // fixme popup fixed sizes
 }
 
 .wt-table-column-select__popup__item {

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,7 +1,6 @@
 
 :root {
   --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
-  --tooltip-z-index: 100;
 
   --tooltip-light-text-color: var(--text-primary-color);
   --tooltip-light-bg-color: var(--main-color);
@@ -9,4 +8,20 @@
   --tooltip-dark-bg-color: var(--contrast-color);
 
   --tooltip-elevation: var(--elevation-10);
-}
+}
+
+// cause we need to set styles to element somewhere in the HTML, not inside .wt-tooltip scope
+.wt-tooltip__popper .v-popper__inner {
+  @extend %typo-body-1;
+  padding: var(--tooltip-padding);
+  color: var(--tooltip-light-text-color);
+  background: var(--tooltip-light-bg-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--tooltip-elevation);
+  transition: var(--transition);
+}
+
+.wt-tooltip--contrast__popper .v-popper__inner {
+  color: var(--tooltip-dark-text-color);
+  background: var(--tooltip-dark-bg-color);
+}