@webitel/ui-sdk 24.12.29 → 24.12.34

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

@@ -38,14 +38,12 @@
         v-bind="$attrs"
         @input="inputHandler"
         @keyup="$emit('keyup', $event)"
-      >
+      />
       <div
         ref="AfterWrapper"
         class="wt-input__after-wrapper"
       >
-        <slot
-          name="after-input"
-        />
+        <slot name="after-input" />
         <slot
           v-if="isPassword"
           name="show-password"
@@ -182,7 +180,10 @@ const slots = useSlots();
 // https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
 const { v, customValidators } = toRefs(props);
 
-const { isValidation, invalid, validationText } = useValidation({ v, customValidators });
+const { isValidation, invalid, validationText } = useValidation({
+  v,
+  customValidators,
+});
 
 // toggles password <-> text at showPassword
 const inputType = ref('');
@@ -238,7 +239,9 @@ const showPasswordIcon = computed(() => {
 });
 
 function inputHandler(event) {
-  const value = props.preventTrim ? event.target.value : event.target.value.trim();
+  const value = props.preventTrim
+    ? event.target.value
+    : event.target.value.trim();
   emit('update:modelValue', value);
   emit('input', value);
 }
@@ -252,14 +255,14 @@ function updateInputPaddings() {
   // cant test this thing cause vue test utils doesnt render elements width :/
   const afterWrapperWidth = AfterWrapper.value.offsetWidth;
   const inputEl = WtInput.value;
-  const defaultInputPadding = getComputedStyle(document.documentElement).getPropertyValue(
-    '--input-padding',
-  );
+  const defaultInputPadding = getComputedStyle(
+    document.documentElement,
+  ).getPropertyValue('--input-padding');
   if (afterWrapperWidth >= inputEl.offsetWidth) return; // fixes https://my.webitel.com/browse/WTEL-2635
   inputEl.style.paddingRight = `calc(${defaultInputPadding} * 2 + ${afterWrapperWidth}px)`;
 }
 
-function focus () {
+function focus() {
   WtInput.value.focus();
 }
 

package/src/components/wt-input-info/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --input-info-min-height: var(--spacing-sm);
   --input-info-margin: 5px;

package/src/components/wt-intersection-observer/__tests__/WtIntersectionObserver.spec.js

@@ -5,7 +5,7 @@ describe('WtIntersectionObserver', () => {
   const next = () => true;
   it('renders a component', () => {
     const wrapper = shallowMount(WtIntersectionObserver, {
-      props: { next }
+      props: { next },
     });
     expect(wrapper.exists()).toBe(true);
   });

package/src/components/wt-intersection-observer/wt-intersection-observer.vue

@@ -21,9 +21,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'next',
-]);
+const emit = defineEmits(['next']);
 
 const intersectionTarget = ref(null);
 
@@ -35,11 +33,14 @@ onMounted(() => {
    * Note, observer triggers at init, so it should be used also as init function
    * however, current filters module version is initializing list by itself, so we need to refactor filters ASAP
    */
-  const { stop } = useIntersectionObserver(intersectionTarget.value, ([{ isIntersecting }]) => {
-    if (isIntersecting && props.next) {
-      emit('next');
-    }
-  });
+  const { stop } = useIntersectionObserver(
+    intersectionTarget.value,
+    ([{ isIntersecting }]) => {
+      if (isIntersecting && props.next) {
+        emit('next');
+      }
+    },
+  );
 
   stopObs = stop;
 });

package/src/components/wt-item-link/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --wt-item-link-text-color: var(--text-main-color);
 }

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

@@ -1,4 +1,3 @@
-
 :root {
   --wt-label-color: var(--text-main-color);
   --wt-label-error-color: var(--text-error-color);

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

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

package/src/components/wt-load-bar/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --load-bar-height: 6px;
   --load-bar-padding: 1px;

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

@@ -36,7 +36,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-load-bar {
   position: relative;
   box-sizing: border-box;

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

@@ -1,4 +1,3 @@
-
 :root {
   --loader-size: 44px;
   --loader-dot-size: 6px;
@@ -17,5 +16,4 @@
   --wt-loader-md-path-color: var(--grey-lighten-2);
 
   --wt-loader-sm-path-main-color: var(--grey-lighten-2);
-
 }

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

@@ -39,6 +39,4 @@ export default {
 @import './variables.scss';
 </style>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

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

@@ -15,7 +15,7 @@ const props = defineProps({
     :src="darkMode ? LogoDark : LogoLight"
     alt="Webitel"
     class="wt-logo"
-  >
+  />
 </template>
 
 <style lang="scss">

package/src/components/wt-navigation-bar/__tests__/WtNavigationBar.spec.js

@@ -30,7 +30,9 @@ describe('WtNavigationBar', () => {
       props: { nav },
     });
     const navLinksLen = nav.filter((nav) => !nav.subNav).length;
-    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(navLinksLen);
+    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link').length).toBe(
+      navLinksLen,
+    );
   });
 
   it('renders navigation expansions with subNav inside it', async () => {
@@ -43,7 +45,9 @@ describe('WtNavigationBar', () => {
     wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
     const navExpansion = nav.find((nav) => nav.subNav).subNav.length;
-    expect(wrapper.findAll('.wt-navigation-bar__nav-item-link--subnav').length).toBe(navExpansion);
+    expect(
+      wrapper.findAll('.wt-navigation-bar__nav-item-link--subnav').length,
+    ).toBe(navExpansion);
   });
 
   it('correctly computes subNav nested routes', async () => {
@@ -56,7 +60,9 @@ describe('WtNavigationBar', () => {
     await wrapper.find('.wt-navigation-bar__nav-expansion').trigger('click');
     await wrapper.vm.$nextTick();
     expect(
-      wrapper.findComponent('.wt-navigation-bar__nav-item-link--subnav').attributes('href'),
+      wrapper
+        .findComponent('.wt-navigation-bar__nav-item-link--subnav')
+        .attributes('href'),
     ).toBe('/2/3');
   });
 });

package/src/components/wt-navigation-bar/_variables.scss

@@ -10,13 +10,19 @@
   --wt-navigation-bar-link-padding: var(--wt-navigation-bar-padding);
   --wt-navigation-bar-subnav-padding-left: var(--spacing-lg);
   --wt-navigation-bar-active-expansion-flag-width: 5px;
-  --wt-navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+  --wt-navigation-bar-active-expansion-name-max-width: calc(
+    100% - var(--icon-md-size) - var(--spacing-xs)
+  );
 
   --wt-navigation-bar-background-color: var(--dp-18-surface-color);
   --wt-navigation-bar-option-text-color: var(--text-main-color);
   --wt-navigation-bar-option-text-active-color: var(--primary-on-color);
-  --wt-navigation-bar-option-background-color: var(--wt-navigation-bar-background-color);
+  --wt-navigation-bar-option-background-color: var(
+    --wt-navigation-bar-background-color
+  );
   --wt-navigation-bar-option-background-hover-color: var(--dp-20-surface-color);
-  --wt-navigation-bar-option-background-active-color: var(--primary-light-color);
+  --wt-navigation-bar-option-background-active-color: var(
+    --primary-light-color
+  );
   --wt-navigation-bar-expansion-ribbon-color: var(--primary-color);
 }

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

@@ -4,7 +4,7 @@
     class="wt-navigation-bar"
   >
     <wt-icon-btn
-      :class="{'active': isOpened}"
+      :class="{ active: isOpened }"
       class="wt-navigation-bar__menu-btn"
       icon="menu"
       @click="isOpened = !isOpened"
@@ -18,9 +18,11 @@
           <!--        vue cli build target lib cant handle dynamic require :( -->
           <img
             :alt="currentApp"
-            :src="darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light"
+            :src="
+              darkMode ? appLogo[currentApp].dark : appLogo[currentApp].light
+            "
             class="wt-navigation-bar__app-pic"
-          >
+          />
           <wt-icon-btn
             class="wt-navigation-bar__nav-close"
             icon="close"
@@ -37,7 +39,10 @@
             <div v-if="!navItem.subNav">
               <div class="wt-navigation-bar__nav-item-wrapper">
                 <router-link
-                  :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === navItem.value}"
+                  :class="{
+                    'wt-navigation-bar__nav-item-link--active':
+                      currentNav.nav === navItem.value,
+                  }"
                   :to="navItem.route"
                   class="wt-navigation-bar__nav-item-link"
                   @click="close"
@@ -49,14 +54,18 @@
             <div v-else>
               <button
                 :class="{
-                  'wt-navigation-bar__nav-expansion--expanded': isExpanded(navItem),
-                  'wt-navigation-bar__nav-expansion--active': currentNav.expansion === navItem.value,
+                  'wt-navigation-bar__nav-expansion--expanded':
+                    isExpanded(navItem),
+                  'wt-navigation-bar__nav-expansion--active':
+                    currentNav.expansion === navItem.value,
                 }"
                 class="wt-navigation-bar__nav-expansion"
                 type="button"
                 @click="expand(navItem)"
               >
-                <span class="wt-navigation-bar__nav-expansion-name">{{ navItem.name || navItem.value }}</span>
+                <span class="wt-navigation-bar__nav-expansion-name">{{
+                  navItem.name || navItem.value
+                }}</span>
                 <wt-icon
                   class="wt-navigation-bar__expansion-arrow"
                   color="active"
@@ -72,7 +81,10 @@
                   >
                     <div class="wt-navigation-bar__nav-item-wrapper">
                       <router-link
-                        :class="{'wt-navigation-bar__nav-item-link--active': currentNav.nav === subNavItem.value}"
+                        :class="{
+                          'wt-navigation-bar__nav-item-link--active':
+                            currentNav.nav === subNavItem.value,
+                        }"
                         :to="nestedRoute(subNavItem, navItem)"
                         class="wt-navigation-bar__nav-item-link wt-navigation-bar__nav-item-link--subnav"
                         @click="close"
@@ -162,7 +174,8 @@ export default {
       const path = this.$route.fullPath;
       const currentNav = this.nav
         .reduce((flatNav, currentNavItem) => {
-          if (currentNavItem.subNav) return flatNav.concat(currentNavItem.subNav);
+          if (currentNavItem.subNav)
+            return flatNav.concat(currentNavItem.subNav);
           return [...flatNav, currentNavItem];
         }, [])
         .find((navItem) => path.includes(navItem.route));
@@ -177,10 +190,13 @@ export default {
   },
   methods: {
     nestedRoute(subNavItem, navItem) {
-      return navItem.route ? `${navItem.route}/${subNavItem.route}` : subNavItem.route;
+      return navItem.route
+        ? `${navItem.route}/${subNavItem.route}`
+        : subNavItem.route;
     },
     expand(navItem) {
-      this.expandedName = this.expandedName !== navItem.value ? navItem.value : '';
+      this.expandedName =
+        this.expandedName !== navItem.value ? navItem.value : '';
     },
     isExpanded(navItem) {
       return this.expandedName === navItem.value;

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

@@ -1,4 +1,3 @@
-
 :root {
   --wt-notification-min-width: 30vw;
   --wt-notification-max-width: 40vw;

package/src/components/wt-notifications-bar/__tests__/WtNotificationsBar.spec.js

@@ -15,7 +15,7 @@ describe('WtNotificationsBar', () => {
     const wrapper = shallowMount(WtNotificationsBar, {
       global: { provide: { $eventBus: eventBus } },
     });
-     eventBus.$emit('notification', {
+    eventBus.$emit('notification', {
       type: 'error',
       text: 'error',
     });

package/src/components/wt-notifications-bar/_variables.scss

@@ -1,7 +1,6 @@
-
 :root {
   --notifications-bar-max-height: 60%;
   --notifications-bar-corner-margin: var(--spacing-sm);
   --notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
   --notifications-bar-z-index: 101;
-}
+}

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

@@ -6,7 +6,7 @@
     >
       <wt-notification
         v-for="(notification, key) of notifications"
-        :key="key+notification.text"
+        :key="key + notification.text"
         :type="notification.type"
         @close="closeNotification(notification)"
       >
@@ -33,7 +33,9 @@ export default {
     if (this.$eventBus) {
       this.eventBus = this.$eventBus;
     } else {
-      loggr.warn({ entity: 'component', module: 'wt-notification-bar' })('no globally provided $eventBus found, using default webitel-ui eventBus');
+      loggr.warn({ entity: 'component', module: 'wt-notification-bar' })(
+        'no globally provided $eventBus found, using default webitel-ui eventBus',
+      );
     }
 
     this.eventBus.$on('notification', this.showNotification);

package/src/components/wt-page-header/wt-page-header.vue

@@ -65,11 +65,12 @@ const props = defineProps({
   },
 });
 
-const emptySecondary = computed(() => !(props.secondaryAction || props.secondaryText));
+const emptySecondary = computed(
+  () => !(props.secondaryAction || props.secondaryText),
+);
 </script>
 
 <style lang="scss" scoped>
-
 .wt-headline {
   .wt-button {
     margin-left: var(--spacing-sm);

package/src/components/wt-page-wrapper/__tests__/WtPageWrapper.spec.js

@@ -20,7 +20,9 @@ describe('WtPageWrapper', () => {
     const wrapper = shallowMount(WtPageWrapper, {
       slots: { 'actions-panel': content },
     });
-    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(content);
+    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(
+      content,
+    );
   });
 
   it('renders page wrapper main content via main slot', () => {

package/src/components/wt-page-wrapper/_variables.scss

@@ -5,7 +5,6 @@
 
   --wt-page-wrapper-background-color: var(--grey-lighten-5);
   --wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
-
 }
 
 :root.theme--dark {

package/src/components/wt-page-wrapper/wt-page-wrapper.vue

@@ -32,7 +32,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;
@@ -58,5 +57,4 @@ export default {
   flex: 1;
   width: 100%;
 }
-
 </style>

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

@@ -1,5 +1,4 @@
-
 :root {
   --pagination-gap: var(--spacing-xs);
   --pagination-size-input-width: 70px;
-}
+}

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

@@ -83,7 +83,8 @@ export default {
   },
 
   created() {
-    if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
+    if (this.debounce)
+      this.changeSize = debounce(this.changeSize, this.debounceDelay);
   },
 
   methods: {

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

@@ -6,8 +6,12 @@
   --plyr-controls-icon-size: var(--icon-sm-size);
   --plyr-controls-icon-padding: var(--spacing-2xs);
   --plyr-audio-control-background-hover: transparent;
-  --plyr-audio-progress-buffered-background: var(--dp-14-surface-color); // loaded color
-  --wt-player-audio-progress-background: var(--wt-slider-background-color); // not played color
+  --plyr-audio-progress-buffered-background: var(
+    --dp-14-surface-color
+  ); // loaded color
+  --wt-player-audio-progress-background: var(
+    --wt-slider-background-color
+  ); // not played color
   --plyr-tooltip-background: var(--wt-tooltip-background-color);
   --plyr-tooltip-color: var(--wt-tooltip-text-color);
 

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

@@ -200,70 +200,69 @@ export default {
     }
   }
 
-    :deep(.plyr) {
-      max-width: 100%; // prevents <video> container overflow
-      border-radius: var(--border-radius);
-      box-shadow: var(--elevation-10);
-
-      .plyr__controls > .plyr__control,
-      .plyr__controls > .plyr__controls__item > .plyr__control {
-        padding: var(--plyr-controls-icon-padding);
-      }
+  :deep(.plyr) {
+    max-width: 100%; // prevents <video> container overflow
+    border-radius: var(--border-radius);
+    box-shadow: var(--elevation-10);
+
+    .plyr__controls > .plyr__control,
+    .plyr__controls > .plyr__controls__item > .plyr__control {
+      padding: var(--plyr-controls-icon-padding);
+    }
 
-      .plyr__controls > .plyr__control > svg,
-      .plyr__controls > .plyr__controls__item > .plyr__control > svg {
-        width: var(--plyr-controls-icon-size);
-        height: var(--plyr-controls-icon-size);
-      }
+    .plyr__controls > .plyr__control > svg,
+    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+      width: var(--plyr-controls-icon-size);
+      height: var(--plyr-controls-icon-size);
+    }
 
-      .plyr__control--overlaid svg {
-        left: 0; // reset plyr style for video "play" button icon
-      }
+    .plyr__control--overlaid svg {
+      left: 0; // reset plyr style for video "play" button icon
+    }
 
-      .plyr__progress__buffer {
-        background: var(--wt-player-audio-progress-background);
-      }
+    .plyr__progress__buffer {
+      background: var(--wt-player-audio-progress-background);
+    }
 
-      .plyr__progress input,
-      .plyr__volume input {
-        cursor: pointer;
+    .plyr__progress input,
+    .plyr__volume input {
+      cursor: pointer;
 
-        &::-webkit-slider-thumb {
-          transition: var(--transition);
-          border: var(--wt-slider-border);
-          border-radius: var(--wt-slider-pointer-radius);
-          background: var(--wt-slider-pointer-background-color);
-          -webkit-appearance: none;
-        }
+      &::-webkit-slider-thumb {
+        transition: var(--transition);
+        border: var(--wt-slider-border);
+        border-radius: var(--wt-slider-pointer-radius);
+        background: var(--wt-slider-pointer-background-color);
+        -webkit-appearance: none;
+      }
 
-        &::-webkit-slider-runnable-track {
-          -webkit-appearance: none;
-        }
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+      }
 
-        &::-moz-range-thumb {
-          width: var(--wt-slider-pointer-size);
-          height: var(--wt-slider-pointer-size);
-          transition: var(--transition);
-          border: var(--wt-slider-border);
-          border-color: var(--wt-slider-pointer-border-color);
-          border-radius: var(--wt-slider-pointer-radius);
-          background: var(--wt-slider-pointer-background-color);
-          -moz-appearance: none;
-        }
+      &::-moz-range-thumb {
+        width: var(--wt-slider-pointer-size);
+        height: var(--wt-slider-pointer-size);
+        transition: var(--transition);
+        border: var(--wt-slider-border);
+        border-color: var(--wt-slider-pointer-border-color);
+        border-radius: var(--wt-slider-pointer-radius);
+        background: var(--wt-slider-pointer-background-color);
+        -moz-appearance: none;
+      }
 
-        &::-moz-range-track {
-          -moz-appearance: none;
-        }
+      &::-moz-range-track {
+        -moz-appearance: none;
+      }
 
-        &::-ms-thumb {
-          appearance: none;
-        }
+      &::-ms-thumb {
+        appearance: none;
+      }
 
-        &::-ms-track {
-          appearance: none;
-        }
+      &::-ms-track {
+        appearance: none;
       }
     }
   }
-
+}
 </style>

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

@@ -1,4 +1,3 @@
-
 :root {
   --popup-wrapper-z-index: 11;
 

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

@@ -1,15 +1,10 @@
 <template>
   <div
     v-show="wrapperShown"
-    :class="[
-      `wt-popup--size-${size}`,
-      { 'wt-popup--overflow': overflow }
-    ]"
+    :class="[`wt-popup--size-${size}`, { 'wt-popup--overflow': overflow }]"
     class="wt-popup"
   >
-    <transition-slide
-      :offset="[0, -1440/2]"
-    >
+    <transition-slide :offset="[0, -1440 / 2]">
       <aside
         v-if="shown"
         class="wt-popup__popup"
@@ -131,7 +126,6 @@ export default {
         width: var(--wt-popup-size-lg);
       }
     }
-
   }
 }
 

package/src/components/wt-progress-bar/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --wt-progress-bar-height: 12px;
   --wt-progress-bar-padding: var(--spacing-3xs);

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

@@ -1,9 +1,10 @@
 <template>
   <div
-    :class="[{
-               'wt-progress-bar--overflow': isOverflow,
-             },
-             `wt-progress-bar--${color}`
+    :class="[
+      {
+        'wt-progress-bar--overflow': isOverflow,
+      },
+      `wt-progress-bar--${color}`,
     ]"
     class="wt-progress-bar"
   >
@@ -51,7 +52,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-progress-bar {
   position: relative;
   box-sizing: border-box;
@@ -67,7 +67,8 @@ export default {
   display: inline-block;
   height: var(--wt-progress-bar-height);
   transition: var(--transition);
-  border-radius: var(--wt-progress-bar-border-radius) 0 0 var(--wt-progress-bar-border-radius);
+  border-radius: var(--wt-progress-bar-border-radius) 0 0
+    var(--wt-progress-bar-border-radius);
   background: var(--wt-progress-bar-background-primary-color);
   will-change: width;
 }