@webitel/ui-sdk 24.4.39 → 24.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.4.39",
+  "version": "24.6.1",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -40,7 +40,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",
     "@vueuse/components": "^10.7.2",
-    "axios": "^1.6.8",
+    "axios": "^1.7.1",
     "clipboard-copy": "^4.0.1",
     "csv-stringify": "^5.5.3",
     "deep-copy": "^1.4.2",
@@ -51,6 +51,7 @@
     "jszip": "^3.5.0",
     "jszip-utils": "^0.1.0",
     "lodash": "^4.17.21",
+    "mitt": "^3.0.1",
     "plyr": "3.6.3",
     "query-string": "^8.1.0",
     "sortablejs": "^1.15.0",
@@ -70,7 +71,7 @@
     "eslint": "^8.53.0",
     "eslint-plugin-vue": "^9.18.1",
     "globby": "^14.0.0",
-    "happy-dom": "^12.9.1",
+    "happy-dom": "^14.11.0",
     "markdown-it": "^13.0.2",
     "markdown-table": "^3.0.3",
     "postcss": "^8.4.31",
@@ -86,8 +87,5 @@
     "vitest": "^1.4.0",
     "vue": "^3.4.15",
     "vuex": "^4.1.0"
-  },
-  "overrides": {
-    "axios": "^1.6.8"
   }
 }

package/src/components/transitions/wt-expand-transition.vue

@@ -1,13 +1,72 @@
 <template>
-  <transition-expand>
+  <transition
+    name="expand"
+    @after-enter="afterEnter"
+    @enter="enter"
+    @leave="leave"
+  >
     <slot />
-  </transition-expand>
+  </transition>
 </template>
 
-<script setup>
-import { TransitionExpand } from '@morev/vue-transitions';
+<script>
+/* eslint-disable no-param-reassign */
+// https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
+export default {
+  name: 'WtExpandTransition',
+  methods: {
+    afterEnter(element) {
+      element.style.height = 'auto';
+    },
+    enter(element) {
+      const { width } = getComputedStyle(element);
+      element.style.width = width;
+      element.style.position = 'absolute';
+      element.style.visibility = 'hidden';
+      element.style.height = 'auto';
+
+      const { height } = getComputedStyle(element);
+      element.style.width = null;
+      element.style.position = null;
+      element.style.visibility = null;
+      element.style.height = 0;
+
+      // Force repaint to make sure the
+      // animation is triggered correctly.
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
+
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = height);
+    },
+    leave(element) {
+      const { height } = getComputedStyle(element);
+      element.style.height = height;
+      // eslint-disable-next-line no-unused-expressions
+      getComputedStyle(element).height;
+
+      // eslint-disable-next-line no-return-assign
+      requestAnimationFrame(() => element.style.height = 0);
+    },
+  },
+};
 </script>
 
 <style lang="scss">
+.expand-enter-active,
+.expand-leave-active {
+  transition: height var(--transition);
+  overflow: hidden;
+}
 
+.expand-enter,
+.expand-leave-to {
+  height: 0;
+}
+/*
+  // expand animation optimization
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+ */
 </style>

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

@@ -8,21 +8,24 @@
         'wt-button--contains-icon': containsIcon,
         'wt-button--wide': wide,
         'wt-button--disabled': disabled,
-        'wt-button--loading': loading,
+        'wt-button--loading': showLoader,
       }
     ]"
     type="button"
     :disabled="disabled"
     @click="$emit('click', $event)"
   >
+    <!--  Show loader and button contents at the same time to prevent width shift if content > min-width of button -->
     <wt-loader
-      v-if="loading"
+      v-if="showLoader"
       size="sm"
       :color="loaderColor"
     />
-    <slot v-else>
-      no content provided
-    </slot>
+    <div class="wt-button__contents">
+      <slot>
+        no content provided
+      </slot>
+    </div>
   </button>
 </template>
 
@@ -72,17 +75,35 @@ export default {
     },
   },
   emits: ['click'],
+  data: () => ({
+    showLoader: false,
+  }),
   computed: {
     colorClass() {
       if (!this.disabled) return `${this.color}`;
       return '';
     },
     loaderColor() {
-      return 'main';
+      return 'on-dark';
       // if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'on-dark';
       // return 'on-light';
     },
   },
+  watch: {
+    loading: {
+      immediate: true,
+      handler(value) {
+        if (value) {
+          this.showLoader = true;
+        } else {
+          setTimeout(() => {
+            this.showLoader = value;
+          }, 1000); // why 1s? https://ux.stackexchange.com/a/104782
+        }
+      },
+    },
+
+  },
 };
 </script>
 
@@ -105,6 +126,17 @@ export default {
   transition: var(--transition);
   cursor: pointer;
 
+  &__contents {
+    display: contents;
+  }
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   &--wide {
     width: 100%;
   }
@@ -116,6 +148,10 @@ export default {
 
   &--loading {
     pointer-events: none;
+
+    .wt-button__contents {
+      visibility: hidden;
+    }
   }
 
   &--size {

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -36,7 +36,6 @@
 
 <script setup>
 import { ref, watch } from 'vue';
-import WtExpandTransition from '../transitions/wt-expand-transition.vue';
 
 const props = defineProps({
   size: {

package/src/components/wt-item-link/wt-item-link.vue

@@ -1,8 +1,11 @@
 <template>
   <router-link
+    :class="{
+      'wt-item-link--disabled': disabled,
+      'wt-item-link--invisible': invisible,
+    }"
     :target="target"
     :to="to"
-    :class="{ 'wt-item-link--disabled': disabled }"
     class="wt-item-link"
   >
     <slot />
@@ -17,16 +20,40 @@ const props = defineProps({
     type: [String, Object],
     default: '',
   },
+
   target: {
     type: String,
     default: '_self',
   },
+
+  /**
+   * DEPRECAPTED, use :link, or make a wrapper component
+   *
+   * @deprecated
+   */
   routeName: {
     type: String,
+    default: '',
   },
+
+  /**
+   * DEPRECAPTED, use :link, or make a wrapper component
+   *
+   * @deprecated
+   */
   id: {
     type: [String, Number],
+    default: '',
+  },
+
+  /**
+   * Hide styles
+   */
+  invisible: {
+    type: Boolean,
+    default: false,
   },
+
   disabled: {
     type: Boolean,
     default: false,
@@ -34,9 +61,9 @@ const props = defineProps({
 });
 
 const to = computed(() => props.link || {
-    name: `${props.routeName}-edit`,
-    params: { id: props.id },
-  });
+  name: `${props.routeName}-edit`,
+  params: { id: props.id },
+});
 </script>
 
 <style lang="scss">
@@ -47,12 +74,15 @@ const to = computed(() => props.link || {
 .wt-item-link {
   display: flex;
   align-items: center;
-  cursor: pointer;
-  color: var(--wt-item-link-text-color);
-  transition: var(--transition);
 
-  &:hover {
-    text-decoration: underline;
+  :not(&--invisible) {
+    cursor: pointer;
+    transition: var(--transition);
+    color: var(--wt-item-link-text-color);
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   &--disabled {

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

@@ -41,10 +41,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    hideDuration: {
-      type: Boolean,
-      default: false,
-    },
     download: {
       type: [String, Function, Boolean],
       default: () => (url) => url.replace('/stream', '/download'),
@@ -111,17 +107,11 @@ export default {
       const baseURL = this.$baseURL || process.env.BASE_URL || import.meta.env.BASE_URL;
       const iconUrl = createPlyrURL(baseURL);
       if (this.player) this.player.destroy();
-
-      const defaultControls = [
+      const controls = [
         'play-large', 'play', 'progress', 'current-time',
-        'duration', 'mute', 'volume', 'captions', 'settings',
-        'pip', 'airplay', 'fullscreen'
+        'mute', 'volume', 'captions', 'settings', 'pip',
+        'airplay', 'fullscreen',
       ];
-
-      const controls = this.hideDuration
-        ? defaultControls.filter(control => control !== 'duration')
-        : defaultControls;
-
       if (this.download) controls.push('download');
       this.player = new Plyr(this.$refs.player, {
         // this.player = new Plyr('.wt-player__player', {
@@ -196,15 +186,13 @@ export default {
       box-shadow: var(--elevation-10);
     }
 
-    .plyr__controls > .plyr__control,
-    .plyr__controls > .plyr__controls__item > .plyr__control {
+    .plyr__controls .plyr__control {
       padding: var(--plyr-controls-icon-padding);
-    }
 
-    .plyr__controls > .plyr__control > svg,
-    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
-      height: var(--plyr-controls-icon-size);
-      width: var(--plyr-controls-icon-size);
+      svg {
+        height: var(--plyr-controls-icon-size);
+        width: var(--plyr-controls-icon-size);
+      }
     }
 
     .plyr__control--overlaid svg {

package/src/components/wt-popup/__tests__/WtPopup.spec.js

@@ -1,4 +1,4 @@
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, mount } from '@vue/test-utils';
 import WtPopup from '../wt-popup.vue';
 
 describe('WtPopup', () => {
@@ -11,8 +11,7 @@ describe('WtPopup', () => {
 
   it('renders popup header via header slot', () => {
     const content = 'Popup header';
-    const wrapper = shallowMount(WtPopup, {
-      stubs: { WtIconBtn: true },
+    const wrapper = mount(WtPopup, {
       slots: { header: content },
     });
     expect(wrapper.find('.wt-popup__header').text()).toBe(content);
@@ -20,8 +19,7 @@ describe('WtPopup', () => {
 
   it('renders popup header via title slot', () => {
     const content = 'Popup title';
-    const wrapper = shallowMount(WtPopup, {
-      stubs: { WtIconBtn: true },
+    const wrapper = mount(WtPopup, {
       slots: { title: content },
     });
     expect(wrapper.find('.wt-popup__title').text()).toBe(content);
@@ -29,8 +27,7 @@ describe('WtPopup', () => {
 
   it('renders popup main via main slot', () => {
     const content = 'Popup main content';
-    const wrapper = shallowMount(WtPopup, {
-      stubs: { WtIconBtn: true },
+    const wrapper = mount(WtPopup, {
       slots: { main: content },
     });
     expect(wrapper.find('.wt-popup__main').text()).toBe(content);
@@ -38,8 +35,7 @@ describe('WtPopup', () => {
 
   it('renders popup actions via actions slot', () => {
     const content = 'Popup actions';
-    const wrapper = shallowMount(WtPopup, {
-      stubs: { WtIconBtn: true },
+    const wrapper = mount(WtPopup, {
       slots: { actions: content },
     });
     expect(wrapper.find('.wt-popup__actions').text()).toBe(content);

package/src/components/wt-popup/_variables.scss

@@ -5,6 +5,11 @@
   --popup-shadow-opacity: 0.8;
   --wt-popup-shadow-color: hsla(0, 0%, 0%, var(--popup-shadow-opacity));
 
+  --wt-popup-size-xs: 300px;
+  --wt-popup-size-sm: 500px;
+  --wt-popup-size-md: 800px;
+  --wt-popup-size-lg: 1140px;
+
   --popup-max-height: 90%;
 
   --wt-popup-background-color: var(--dp-24-surface-color);

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

@@ -1,49 +1,65 @@
 <template>
   <div
-    :class="{ 'wt-popup--overflow': overflow }"
+    v-show="wrapperShown"
+    :class="[
+      `wt-popup--size-${size}`,
+      { 'wt-popup--overflow': overflow }
+    ]"
     class="wt-popup"
   >
-    <aside
-      :style="popupStyle"
-      class="wt-popup__popup"
+    <transition-slide
+      :offset="[0, -1440/2]"
     >
-      <header class="wt-popup__header">
-        <slot name="header">
-          <h3 class="wt-popup__title">
-            <slot name="title" />
-          </h3>
-        </slot>
-        <wt-icon-btn
-          class="wt-popup__close-btn"
-          icon="close"
-          @click="$emit('close')"
-        />
-      </header>
-      <section
-        v-if="$slots.main"
-        class="wt-popup__main"
+      <aside
+        v-if="shown"
+        class="wt-popup__popup"
       >
-        <slot name="main" />
-      </section>
-      <footer
-        v-if="$slots.actions"
-        class="wt-popup__actions"
-      >
-        <slot name="actions" />
-      </footer>
-    </aside>
+        <header class="wt-popup__header">
+          <slot name="header">
+            <h3 class="wt-popup__title">
+              <slot name="title" />
+            </h3>
+          </slot>
+          <wt-icon-btn
+            class="wt-popup__close-btn"
+            icon="close"
+            @click="$emit('close')"
+          />
+        </header>
+        <section
+          v-if="$slots.main"
+          class="wt-popup__main"
+        >
+          <slot name="main" />
+        </section>
+        <footer
+          v-if="$slots.actions"
+          class="wt-popup__actions"
+        >
+          <slot name="actions" />
+        </footer>
+      </aside>
+    </transition-slide>
   </div>
 </template>
 
 <script>
+import { TransitionSlide } from '@morev/vue-transitions';
+
 export default {
   name: 'WtPopup',
+  components: {
+    TransitionSlide,
+  },
   props: {
-    minWidth: {
-      type: [Number, String],
+    shown: {
+      type: Boolean,
+      default: true, // TODO: change me to false after refactor
     },
-    width: {
-      type: [Number, String],
+    size: {
+      type: String,
+      default: 'md',
+      validator: (v) => ['xs', 'sm', 'md', 'lg'].includes(v),
     },
     overflow: {
       type: Boolean,
@@ -51,12 +67,21 @@ export default {
     },
   },
   emits: ['close'],
-  computed: {
-    popupStyle() {
-      let style = '';
-      style += this.minWidth ? `min-width: ${this.minWidth}px;` : '';
-      style += this.width ? `width: ${this.width}px;` : '';
-      return style;
+  data: () => ({
+    wrapperShown: false,
+  }),
+  watch: {
+    // overlay should be shown before popup to show animation properly
+    shown: {
+      handler(value) {
+        if (value) {
+          this.wrapperShown = true;
+        } else {
+          setTimeout(() => {
+            this.wrapperShown = value;
+          }, 200); // 200 -> 0.2s css var(--transition); duration
+        }
+      }, immediate: true,
     },
   },
 };
@@ -79,6 +104,30 @@ export default {
   align-items: center;
   justify-content: center;
   background: var(--wt-popup-shadow-color);
+
+  &--size {
+    &-xs {
+      .wt-popup__popup {
+        width: var(--wt-popup-size-xs);
+      }
+    }
+    &-sm {
+      .wt-popup__popup {
+        width: var(--wt-popup-size-sm);
+      }
+    }
+    &-md {
+      .wt-popup__popup {
+        width: var(--wt-popup-size-md);
+      }
+    }
+    &-lg {
+      .wt-popup__popup {
+        width: var(--wt-popup-size-lg);
+      }
+    }
+
+  }
 }
 
 .wt-popup__popup {
@@ -100,8 +149,8 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: var(--wt-popup-header-text-color);
   padding: var(--popup-header-padding);
+  color: var(--wt-popup-header-text-color);
   border-radius: var(--border-radius);
   background: var(--wt-popup-header-background-color);
   gap: var(--popup-header-padding);

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

@@ -63,8 +63,8 @@
             class="wt-table__td wt-table__td--checkbox"
           >
             <wt-checkbox
-              :selected="row._isSelected"
-              @change="row._isSelected = !row._isSelected"
+              :selected="_selected.includes(row)"
+              @change="handleSelection(row, $event)"
             />
           </td>
 
@@ -147,17 +147,30 @@ export default {
       type: Boolean,
       default: true,
     },
+    selected: {
+      type: Array,
+      // no default! because we need to know if it's passed or not
+    },
     gridActions: {
       type: Boolean,
       default: true,
     },
   },
+  emits: [
+    'sort',
+    'update:selected',
+  ],
 
   data: () => ({}),
 
   computed: {
+    _selected() {
+      // _isSelected for backwards compatibility
+      return this.selected || this.data.filter((item) => item._isSelected);
+    },
+
     isAllSelected() {
-      return this.data.every((item) => item._isSelected);
+      return this._selected.length === this.data.length && this.data.length > 0;
     },
 
     dataHeaders() {
@@ -206,11 +219,33 @@ export default {
       return this.sortable && sort !== undefined;
     },
     selectAll() {
-      const { isAllSelected } = this;
-      // eslint-disable-next-line no-param-reassign,no-return-assign
-      this.data.forEach((item) => item._isSelected = !isAllSelected);
+      if (this.selected) {
+        if (this.isAllSelected) {
+          this.$emit('update:selected', []);
+        } else {
+          this.$emit('update:selected', [...this.data]);
+        }
+      } else {
+        // for backwards compatibility
+        this.data.forEach((item) => {
+          item._isSelected = !this.isAllSelected;
+        });
+      }
     },
+    handleSelection(row, remove) {
+      if (this.selected) {
+        if (remove) {
+          this.$emit('update:selected', this._selected.filter((item) => item !== row));
+        } else {
+          this.$emit('update:selected', [...this._selected, row]);
+        }
+      } else {
+        // for backwards compatibility
+        row._isSelected = !row._isSelected;
+      }
+    }
   },
+
 };
 </script>
 

package/src/locale/en/en.js

@@ -344,7 +344,6 @@ export default {
         score: 'Score',
       },
       clearSelection: 'Clear selection',
-      scoreInputTooltip: 'Value should be more than {min} and less than {max}',
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',

package/src/locale/ru/ru.js

@@ -342,7 +342,6 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистить выбор',
-      scoreInputTooltip: 'Значение должно быть не меньше {min} и не больше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',

package/src/locale/ua/ua.js

@@ -342,7 +342,6 @@ export default {
         score: 'Бал',
       },
       clearSelection: 'Очистити вибір',
-      scoreInputTooltip: 'Значення повинно бути не менше {min} та не більше {max}',
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',