@webitel/ui-sdk 24.12.29 → 24.12.34

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

@@ -2,7 +2,9 @@
   /*General*/
   --dp-font-family: 'Montserrat';
   --dp-border-radius: var(--border-radius); /*Configurable border-radius*/
-  --dp-cell-border-radius: var(--border-radius); /*Specific border radius for the calendar cell*/
+  --dp-cell-border-radius: var(
+    --border-radius
+  ); /*Specific border radius for the calendar cell*/
 
   /*Sizing*/
   --dp-button-heigh: 32px; /*Size for buttons in overlays*/
@@ -12,11 +14,16 @@
   --dp-cell-size: 24px; /*Width and height of calendar cell*/
   --dp-cell-padding: var(--spacing-2xs); /*Padding in the cell*/
   --dp-common-padding: var(--spacing-xs); /*Common padding used*/
-  --dp-input-icon-padding: calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding on the left side of the input if icon is present*/
-  --dp-input-padding: calc(var(--spacing-xs) - 1px) calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding in the input*/
+  --dp-input-icon-padding: calc(
+    var(--icon-md-size) + 2 * var(--spacing-xs)
+  ); /*Padding on the left side of the input if icon is present*/
+  --dp-input-padding: calc(var(--spacing-xs) - 1px)
+    calc(var(--icon-md-size) + 2 * var(--spacing-xs)); /*Padding in the input*/
   //--dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
   --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
-  --dp-row-maring: var(--spacing-3xs); /*Adjust the spacing between rows in the calendar*/
+  --dp-row-maring: var(
+    --spacing-3xs
+  ); /*Adjust the spacing between rows in the calendar*/
   --dp-calendar-header-cell-padding: 0.5rem; /*Adjust padding in calendar header cells*/
   --dp-two-calendars-spacing: 10px; /*Space between multiple calendars*/
   --dp-overlay-col-padding: 3px; /*Padding in the overlay column*/
@@ -29,7 +36,12 @@
 
   /*Transitions*/
   --dp-animation-duration: var(--transition); /*Transition duration*/
-  --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
+  --dp-menu-appear-transition-timing: cubic-bezier(
+    0.4,
+    0,
+    1,
+    1
+  ); /*Timing on menu appear animation*/
   --dp-transition-timing: ease-out; /*Timing on slide animations*/
 }
 

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

@@ -46,14 +46,10 @@
         />
       </template>
       <template #arrow-left>
-        <wt-icon-btn
-          icon="arrow-left"
-        />
+        <wt-icon-btn icon="arrow-left" />
       </template>
       <template #arrow-right>
-        <wt-icon-btn
-          icon="arrow-right"
-        />
+        <wt-icon-btn icon="arrow-right" />
       </template>
       <template
         v-if="isDateTime"
@@ -83,7 +79,6 @@ import '@vuepic/vue-datepicker/dist/main.css';
 import { computed, ref } from 'vue';
 
 const props = defineProps({
-
   /**
    * [`'date'`, `'datetime'`]
    * */

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

@@ -1,4 +1,3 @@
-
 :root {
   --divider-border: 1px solid;
   --divider-border-color: var(--grey-lighten-4);

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

@@ -1,5 +1,8 @@
 <template>
-  <hr class="wt-divider" :class="`wt-divider-${variant}`">
+  <hr
+    class="wt-divider"
+    :class="`wt-divider-${variant}`"
+  />
 </template>
 
 <script>
@@ -10,7 +13,7 @@ export default {
       type: String,
       default: 'horizontal',
     },
-  }
+  },
 };
 </script>
 
@@ -19,7 +22,6 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
 .wt-divider {
   display: block;
   box-sizing: border-box;

package/src/components/wt-dual-panel/__tests__/WtDualPanel.js

@@ -34,7 +34,7 @@ describe('WtDualPanel', () => {
   it('renders dual panel side panel via side panel slot', () => {
     const content = 'Dual Panel side panel';
     const wrapper = shallowMount(WtDualPanel, {
-      slots: { 'side': content },
+      slots: { side: content },
     });
     expect(wrapper.find('.wt-dual-panel__side-panel').text()).toBe(content);
   });
@@ -42,7 +42,7 @@ describe('WtDualPanel', () => {
   it('renders dual panel main panel via main panel slot', () => {
     const content = 'Dual Panel main panel';
     const wrapper = shallowMount(WtDualPanel, {
-      slots: { 'main': content },
+      slots: { main: content },
     });
     expect(wrapper.find('.wt-dual-panel__main-panel').text()).toBe(content);
   });

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

@@ -11,9 +11,7 @@
     </div>
     <div class="wt-dual-panel__content">
       <div
-        :class="[
-        `wt-dual-panel__side-panel--${sidePanelSize}`
-      ]"
+        :class="[`wt-dual-panel__side-panel--${sidePanelSize}`]"
         class="wt-dual-panel__side-panel"
       >
         <wt-icon-action
@@ -57,7 +55,9 @@ const toggleSidePanel = () => {
   emit('update:side-panel-size', sidePanelSize.value);
 };
 
-const sidePanelSize = computed(() => (sidePanelCollapsed.value ? ComponentSize.SM : ComponentSize.MD));
+const sidePanelSize = computed(() =>
+  sidePanelCollapsed.value ? ComponentSize.SM : ComponentSize.MD,
+);
 </script>
 
 <style lang="scss">
@@ -91,7 +91,8 @@ $side-panel-md-width: 320px;
     flex: 1 1 auto;
   }
 
-  &__header,  &__actions-panel {
+  &__header,
+  &__actions-panel {
     flex: 0 0 auto;
   }
 

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

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

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

@@ -6,7 +6,7 @@
         :src="src || dummy"
         :width="size"
         alt="dummy-picture"
-      >
+      />
     </div>
     <p
       v-if="!hiddenText"

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

@@ -10,7 +10,10 @@
       <!--         @slot for custom media, replaces image
                   @scope `{ size: mediaSize }`
        -->
-      <slot name="media" v-bind="{ size: mediaSize }">
+      <slot
+        name="media"
+        v-bind="{ size: mediaSize }"
+      >
         <wt-image
           :size="mediaSize"
           :src="image"
@@ -23,45 +26,50 @@
       v-if="showHeadline || showTitle || showText"
       class="wt-empty__info"
     >
-    <h2
-      v-if="showHeadline"
-      class="wt-empty__headline"
-    >
-
-
-      <!--         @slot for custom headline, replaces headline
+      <h2
+        v-if="showHeadline"
+        class="wt-empty__headline"
+      >
+        <!--         @slot for custom headline, replaces headline
                   @scope `{ headline }`
        -->
-      <slot name="headline" v-bind="{ headline }">
-        {{ headline }}
-      </slot>
-    </h2>
-
-    <h3
-      v-if="showTitle"
-      class="wt-empty__title"
-    >
+        <slot
+          name="headline"
+          v-bind="{ headline }"
+        >
+          {{ headline }}
+        </slot>
+      </h2>
 
-      <!--         @slot for custom title, replaces title
+      <h3
+        v-if="showTitle"
+        class="wt-empty__title"
+      >
+        <!--         @slot for custom title, replaces title
                   @scope `{ title }`
        -->
-      <slot name="title" v-bind="{ title }">
-        {{ title }}
-      </slot>
-    </h3>
-
-    <p
-      v-if="showText"
-      class="wt-empty__text"
-    >
+        <slot
+          name="title"
+          v-bind="{ title }"
+        >
+          {{ title }}
+        </slot>
+      </h3>
 
-      <!--         @slot for custom text, replaces text
+      <p
+        v-if="showText"
+        class="wt-empty__text"
+      >
+        <!--         @slot for custom text, replaces text
                   @scope `{ text }`
        -->
-      <slot name="text" v-bind="{ text }">
-        {{ text }}
-      </slot>
-    </p>
+        <slot
+          name="text"
+          v-bind="{ text }"
+        >
+          {{ text }}
+        </slot>
+      </p>
     </div>
 
     <!--         @slot custom content, between text and actions
@@ -80,7 +88,6 @@
         name="actions"
         v-bind="{ onPrimaryClick, onSecondaryClick }"
       >
-
         <!--         @slot for custom primary action, replaces primaryAction
                     @scope `{ onPrimaryClick }`
          -->
@@ -137,7 +144,8 @@ const props = defineProps({
   size: {
     type: String,
     default: ComponentSize.MD,
-    validator: (v) => [ComponentSize.SM, ComponentSize.MD, ComponentSize.LG].includes(v),
+    validator: (v) =>
+      [ComponentSize.SM, ComponentSize.MD, ComponentSize.LG].includes(v),
   },
   /**
    * shown only if prop or slot is provided

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

@@ -1,4 +1,3 @@
-
 :root {
   --wt-error-page-background-color: var(--content-wrapper-color);
   --wt-error-page-text-color: var(--text-main-color);

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

@@ -5,10 +5,8 @@
         :alt="errorPic.alt"
         :src="errorPic.src"
         class="wt-error-page__img"
-      >
-      <h2
-        class="wt-error-page__title"
-      >
+      />
+      <h2 class="wt-error-page__title">
         {{ errorTitle }}
       </h2>
       <p class="wt-error-page__text">

package/src/components/wt-expansion-panel/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
   --wt-expansion-panel-header-title-color: var(--text-main-color);

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

@@ -10,7 +10,7 @@
       @keypress.enter="toggle"
     >
       <slot name="title" />
-      <div class="wt-expansion-panel-actions">
+      <div  class="wt-expansion-panel-actions">
         <slot
           name="actions"
           v-bind="{ open, opened }"
@@ -22,12 +22,8 @@
         />
       </div>
     </div>
-    <wt-expand-transition
-      v-show="opened"
-    >
-      <div
-        class="wt-expansion-panel-body"
-      >
+    <wt-expand-transition v-show="opened">
+      <div class="wt-expansion-panel-body">
         <slot />
       </div>
     </wt-expand-transition>
@@ -121,7 +117,6 @@ watch(
 
     &--opened {
       transform: rotate(90deg);
-
     }
   }
 

package/src/components/wt-filters-panel-wrapper/__tests__/WtFiltersPanelWrapper.spec.js

@@ -8,15 +8,23 @@ describe('Filters Panel Wrapper', () => {
   });
   it('emits "reset" event at wt-table-actions "filterReset" event', () => {
     const wrapper = shallowMount(FiltersPanelWrapper);
-    wrapper.findComponent({ name: 'wt-table-actions' }).vm.$emit('input', 'filterReset');
+    wrapper
+      .findComponent({ name: 'wt-table-actions' })
+      .vm.$emit('input', 'filterReset');
     expect(wrapper.emitted().reset).toBeTruthy();
   });
   it(`toggles "filters-panel-wrapper--opened" class at
    wt-table-actions "settings" event`, async () => {
     const wrapper = shallowMount(FiltersPanelWrapper);
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(false);
-    wrapper.findComponent({ name: 'wt-table-actions' }).vm.$emit('input', 'settings');
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(
+      false,
+    );
+    wrapper
+      .findComponent({ name: 'wt-table-actions' })
+      .vm.$emit('input', 'settings');
     await wrapper.vm.$nextTick();
-    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(true);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(
+      true,
+    );
   });
 });

package/src/components/wt-filters-panel-wrapper/wt-filters-panel-wrapper.vue

@@ -79,7 +79,8 @@ $filter-width: 230px;
 $filter-gap: 10px; // var(--spacing-xs)
 @function filters-width($num) {
   // 1px corrects max width
-  @return ($filter-width * $num) + $filter-gap * $num + $width-except-filters - 1px;
+  @return ($filter-width * $num) + $filter-gap * $num + $width-except-filters -
+    1px;
 }
 
 .filters-wrap {
@@ -93,7 +94,7 @@ $filter-gap: 10px; // var(--spacing-xs)
   & {
     grid-template-columns: repeat(6, 1fr);
 
-    > *:nth-child(n+7) {
+    > *:nth-child(n + 7) {
       display: none;
     }
   }
@@ -102,7 +103,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(5, 1fr);
 
-      :deep(> *:nth-child(n+6)) {
+      :deep(> *:nth-child(n + 6)) {
         display: none;
       }
     }
@@ -112,7 +113,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(4, 1fr);
 
-      :deep(> *:nth-child(n+5)) {
+      :deep(> *:nth-child(n + 5)) {
         display: none;
       }
     }
@@ -122,7 +123,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(3, 1fr);
 
-      :deep(> *:nth-child(n+4)) {
+      :deep(> *:nth-child(n + 4)) {
         display: none;
       }
     }
@@ -132,7 +133,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(2, 1fr);
 
-      :deep(> *:nth-child(n+3)) {
+      :deep(> *:nth-child(n + 3)) {
         display: none;
       }
     }
@@ -142,7 +143,7 @@ $filter-gap: 10px; // var(--spacing-xs)
     & {
       grid-template-columns: repeat(1, 1fr);
 
-      :deep(> *:nth-child(n+2)) {
+      :deep(> *:nth-child(n + 2)) {
         display: none;
       }
     }

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

@@ -1,4 +1,3 @@
-
 :root {
   --headline-min-height: 40px; // button/search-bar height
   --headline-title-margin: var(--spacing-sm);

package/src/components/wt-headline-nav/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --headline-nav-indicator-size: 4px;
   --headline-nav-gap: var(--spacing-sm);

package/src/components/wt-headline-nav/wt-headline-nav.vue

@@ -20,7 +20,8 @@
         <span
           v-else
           class="wt-headline-nav__text"
-        >{{ singlePath.name }}</span>
+          >{{ singlePath.name }}</span
+        >
       </h1>
     </div>
   </nav>

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

@@ -23,6 +23,4 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

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

@@ -1,4 +1,3 @@
-
 :root {
   --icon-3xl-size: 56px;
   --icon-2xl-size: 48px;

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

@@ -24,14 +24,15 @@ const props = defineProps({
   action: {
     type: String,
     required: true,
-    validator: (v) => Object.values([
-      IconAction.DELETE,
-      IconAction.EDIT,
-      IconAction.ADD,
-      IconAction.HISTORY,
-      IconAction.DOWNLOAD,
-      IconAction.REFRESH,
-    ]).includes(v),
+    validator: (v) =>
+      Object.values([
+        IconAction.DELETE,
+        IconAction.EDIT,
+        IconAction.ADD,
+        IconAction.HISTORY,
+        IconAction.DOWNLOAD,
+        IconAction.REFRESH,
+      ]).includes(v),
   },
   disabled: {
     type: Boolean,
@@ -47,7 +48,9 @@ const iconAction = computed(() => {
   const data = IActionData[props.action];
 
   if (!data) {
-    console.error(`Unknown action for wt-icon-action component: ${props.action}`);
+    console.error(
+      `Unknown action for wt-icon-action component: ${props.action}`,
+    );
     return { icon: 'edit', hint: props.action };
   }
 
@@ -55,6 +58,4 @@ const iconAction = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>

package/src/components/wt-icon-btn/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --icon-btn-hover-color: var(--grey-darken-5);
 }
@@ -6,4 +5,3 @@
 :root.theme--dark {
   --icon-btn-hover-color: var(--grey-lighten-5);
 }
-

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

@@ -17,15 +17,13 @@
 <script setup lang="ts">
 import WtIcon from '../wt-icon/wt-icon.vue';
 
-const {
-  disabled = false,
-} = defineProps<{
-  disabled?: boolean
+const { disabled = false } = defineProps<{
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits<{
-  click: MouseEvent[]
-  mousedown: MouseEvent[]
+  click: MouseEvent[];
+  mousedown: MouseEvent[];
 }>();
 </script>
 

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

@@ -1,12 +1,12 @@
 <template>
   <div
     :style="{
-    width,
-    height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
     }"
     class="wt-image"
   >
@@ -18,7 +18,7 @@
         :alt="alt"
         :src="src"
         class="wt-image__img"
-      >
+      />
     </slot>
   </div>
 </template>
@@ -29,11 +29,11 @@ import { computed } from 'vue';
 const sizeToUnits = {
   '3xs': '32px',
   '2xs': '64px',
-  'xs': '92px',
-  'sm': '128px',
-  'md': '192px',
-  'lg': '256px',
-  'xl': '380px',
+  xs: '92px',
+  sm: '128px',
+  md: '192px',
+  lg: '256px',
+  xl: '380px',
   '2xl': '512px',
   '3xl': '600px',
 };
@@ -51,7 +51,8 @@ const props = defineProps({
     type: String,
     // default: 'md',
     // required: true,
-    validator: (v) => ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(v),
+    validator: (v) =>
+      ['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].includes(v),
   },
   alt: {
     type: String,

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

@@ -1,14 +1,10 @@
 <template>
   <div
-    :class="[
-      `wt-indicator--size-${size}`
-    ]"
+    :class="[`wt-indicator--size-${size}`]"
     class="wt-indicator"
   >
     <span
-      :class="[
-        `wt-indicator__indicator--${color}`,
-      ]"
+      :class="[`wt-indicator__indicator--${color}`]"
       class="wt-indicator__indicator"
     />
     <div
@@ -67,7 +63,6 @@ export default {
     },
   },
 
-
   computed: {
     isText() {
       return this.text !== undefined && this.text !== null && this.text !== '';

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

@@ -1,8 +1,7 @@
-
 :root {
   --input-padding: calc(var(--spacing-xs) - 1px); // - border
   --input-border: 1px solid;
   --input-icon-margin: var(--spacing-xs);
 
   --input-after-wrapper-gap: var(--spacing-2xs);
-}
+}