@webitel/ui-sdk 24.4.32 → 24.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.4.32",
+  "version": "24.6.0",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -35,6 +35,7 @@
   ],
   "dependencies": {
     "@floating-ui/vue": "^1.0.1",
+    "@morev/vue-transitions": "^3.0.2",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vuepic/vue-datepicker": "^4.4.0",

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-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-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);