@webitel/ui-sdk 25.4.37 → 25.4.39

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

@@ -146,6 +146,11 @@ export default {
 
     multiple: true,
   }),
+  created() {
+    if (!this.isApiMode) {
+      this.initializeOptions();
+    }
+  },
   methods: {
     getTagOptionLabel({ optionLabel, option }) {
       /*
@@ -169,11 +174,6 @@ export default {
       this.options.unshift(...newOptions);
     },
   },
-  created() {
-    if (!this.isApiMode) {
-      this.initializeOptions();
-    }
-  },
 };
 </script>
 
@@ -206,12 +206,12 @@ export default {
 
     .multiselect__custom-tag {
       display: flex;
-      align-items: center;
       flex-wrap: nowrap;
-      max-width: 100%;
+      align-items: center;
+      gap: var(--spacing-xs);
       margin: 0 var(--spacing-xs) calc(var(--spacing-xs) - 1px) 0; // border bottom
+      max-width: 100%;
       word-break: break-all;
-      gap: var(--spacing-xs);
     }
   }
 

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

@@ -184,9 +184,9 @@ export default {
 
   &--autoresize {
     .wt-textarea__textarea {
+      transition: none;
       min-height: auto;
       max-height: 100%;
-      transition: none;
     }
 
     .wt-textarea__wrapper {
@@ -205,17 +205,17 @@ export default {
   @include wt-placeholder;
 
   display: block;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: var(--textarea-min-height);
-  padding: var(--textarea-padding);
-  resize: none;
   transition: var(--transition);
-  color: var(--wt-text-field-text-color);
+  box-sizing: border-box;
   border: var(--input-border);
   border-color: var(--wt-text-field-input-border-color);
   border-radius: var(--border-radius);
   background: transparent;
+  padding: var(--textarea-padding);
+  width: 100%;
+  min-height: var(--textarea-min-height);
+  resize: none;
+  color: var(--wt-text-field-text-color);
 
   .wt-textarea--disabled & {
     @include wt-placeholder('disabled');
@@ -226,20 +226,20 @@ export default {
 
   .wt-textarea--invalid &,
   .wt-textarea--invalid:hover & {
-    color: var(--wt-text-field-error-text-color);
-    border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
+    border-color: var(--wt-text-field-input-border-error-color);
+    color: var(--wt-text-field-error-text-color);
     @include wt-placeholder('error');
   }
 }
 
 .wt-textarea__after-wrapper {
+  display: flex;
   position: absolute;
   top: var(--input-icon-margin);
   right: var(--input-icon-margin);
-  display: flex;
   align-items: center;
-  pointer-events: auto; // override --disabled p-events none
   gap: var(--input-after-wrapper-gap);
+  pointer-events: auto; // override --disabled p-events none
 }
 </style>

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

@@ -131,22 +131,22 @@ export default {
     @extend %typo-body-1;
 
     display: block;
-    box-sizing: border-box;
-    width: 100%;
-    padding: var(--input-padding);
     transition: var(--transition);
-    color: var(--wt-text-field-text-color);
+    box-sizing: border-box;
     border: var(--input-border);
     border-color: var(--wt-text-field-input-border-color);
     border-radius: var(--border-radius);
     background: transparent;
+    padding: var(--input-padding);
+    width: 100%;
+    color: var(--wt-text-field-text-color);
   }
 
   &.wt-time-input--invalid .wt-time-input__input,
   &.wt-time-input--invalid:hover .wt-time-input__input {
-    color: var(--wt-text-field-error-text-color);
-    border-color: var(--wt-text-field-input-border-error-color);
     outline: none; // prevent outline overlapping false color
+    border-color: var(--wt-text-field-input-border-error-color);
+    color: var(--wt-text-field-error-text-color);
     @include wt-placeholder('error');
   }
 

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

@@ -256,8 +256,8 @@ export default {
 }
 
 .wt-time-input {
-  width: var(--timepicker-input-width);
   margin-right: var(--timepicker-input-margin);
+  width: var(--timepicker-input-width);
 
   &:last-child {
     margin-right: 0;

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

@@ -178,15 +178,15 @@ onBeforeUnmount(() => {
 
   .wt-tooltip-floating {
     @extend %typo-body-2;
-    z-index: 1000;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xs);
-    padding: var(--spacing-2xs) var(--spacing-xs);
-    color: var(--wt-tooltip-text-color);
+    z-index: 1000;
+    box-shadow: var(--elevation-10);
     border-radius: var(--border-radius);
     background: var(--wt-tooltip-background-color);
-    box-shadow: var(--elevation-10);
+    padding: var(--spacing-2xs) var(--spacing-xs);
+    color: var(--wt-tooltip-text-color);
   }
 }
 </style>

package/src/components/wt-tree/types/WtTreeMode.js

@@ -1,4 +1,4 @@
 export const WtTreeMode = {
-    Tree: 'tree',
-    List: 'list',
+  Tree: 'tree',
+  List: 'list',
 };

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

@@ -126,9 +126,9 @@ const compareSelectElement = (item: any) => {
 @use '@webitel/styleguide/scroll' as *;
 
 .wt-tree {
-  padding: var(--spacing-sm);
-  background: var(--content-wrapper-color);
   border-radius: var(--border-radius);
+  background: var(--content-wrapper-color);
+  padding: var(--spacing-sm);
   overflow: auto;
 
   &__content {
@@ -136,9 +136,9 @@ const compareSelectElement = (item: any) => {
 
     display: flex;
     flex-direction: column;
-    overflow: auto;
-    height: 100%;
     padding-right: var(--spacing-2xs);
+    height: 100%;
+    overflow: auto;
   }
 
   &__list-content {
@@ -146,21 +146,21 @@ const compareSelectElement = (item: any) => {
 
     display: flex;
     flex-direction: column;
-    padding-right: var(--spacing-2xs);
-    gap: var(--spacing-xs);
-    overflow: auto;
     align-items: flex-start;
+    gap: var(--spacing-xs);
+    padding-right: var(--spacing-2xs);
     height: 100%;
+    overflow: auto;
   }
 
   &__label-wrapper {
     display: flex;
     align-items: center;
+    transition: var(--transition);
     cursor: pointer;
-    padding: 0 var(--spacing-2xs);
     border-radius: var(--border-radius);
+    padding: 0 var(--spacing-2xs);
     color: var(--wt-tree-item-on);
-    transition: var(--transition);
 
     &:hover {
       background: var(--wt-tree-item-hover);

package/src/components/wt-tree-line/_variables.scss

@@ -1,4 +1,3 @@
-
 :root {
   --wt-tree-item-active: var(--primary-light-color);
   --wt-tree-item-active-on: var(--grey-darken-4);

package/src/components/wt-tree-line/types/wt-tree-nested-icons.ts

@@ -1,4 +1,4 @@
 export interface WtTreeNestedIcons {
-    icon: string;
-    hidden: boolean;
-}
+  icon: string;
+  hidden: boolean;
+}

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -240,11 +240,11 @@ watch(
   &__label-wrapper {
     display: flex;
     align-items: center;
+    transition: var(--transition);
     cursor: pointer;
-    padding: 0 var(--spacing-2xs);
     border-radius: var(--border-radius);
+    padding: 0 var(--spacing-2xs);
     color: var(--wt-tree-item-on);
-    transition: var(--transition);
 
     &:hover {
       background: var(--wt-tree-item-hover);

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

@@ -281,8 +281,8 @@ const handleSelection = (row, select) => {
 }
 
 .wt-tree-table-wrapper {
-  width: 100%;
   border-collapse: collapse;
+  width: 100%;
 
   .wt-tree-table-tr-wrapper {
     background: var(--wt-tree-table-primary-color);
@@ -296,16 +296,16 @@ const handleSelection = (row, select) => {
 .wt-tree-table-th,
 .wt-tree-table-td {
   @extend %typo-body-1;
+  padding: var(--spacing-xs);
   height: fit-content;
   min-height: var(--wt-tree-table-min-height);
-  padding: var(--spacing-xs);
   word-break: break-all;
   overflow-wrap: break-word;
 
   &__actions {
     display: flex;
-    align-items: flex-start;
     justify-content: flex-end;
+    align-items: flex-start;
     gap: var(--spacing-xs);
   }
 

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

@@ -203,9 +203,9 @@ onMounted(() => {
 
 .wt-tree-table-td {
   @extend %typo-body-1;
+  padding: var(--spacing-xs);
   height: fit-content;
   min-height: var(--wt-tree-table-min-height);
-  padding: var(--spacing-xs);
   word-break: break-all;
   overflow-wrap: break-word;
 

package/src/composables/useAccessControl/v2/createUserAccessControl.ts

@@ -4,7 +4,8 @@ import { useRoute } from 'vue-router';
 import { _wtUiLog } from '../../../scripts/logger';
 import type {
   CreateUserAccessControlComposableParams,
-  UseAccessControlReturn, UseUserAccessControlComposableOptions,
+  UseAccessControlReturn,
+  UseUserAccessControlComposableOptions,
 } from './types/CreateUserAccessControl';
 
 export const createUserAccessControlComposable = (
@@ -13,8 +14,9 @@ export const createUserAccessControlComposable = (
   const useUserAccessControl = (
     options?: UseUserAccessControlComposableOptions,
   ): UseAccessControlReturn => {
-    const resource = typeof options === 'string' ? options: options?.resource;
-    const useUpdateAccessAsAllMutableChecksSource = options?.useUpdateAccessAsAllMutableChecksSource;
+    const resource = typeof options === 'string' ? options : options?.resource;
+    const useUpdateAccessAsAllMutableChecksSource =
+      options?.useUpdateAccessAsAllMutableChecksSource;
 
     const route = useRoute();
     const object = resource || route?.meta?.WtObject;
@@ -55,7 +57,8 @@ export const createUserAccessControlComposable = (
     });
 
     const disableUserInput = computed(() => {
-      if (useUpdateAccessAsAllMutableChecksSource) return !hasUpdateAccess.value;
+      if (useUpdateAccessAsAllMutableChecksSource)
+        return !hasUpdateAccess.value;
 
       if (route.params.id === 'new') return !hasCreateAccess.value;
       return !hasUpdateAccess.value;

package/src/composables/useAccessControl/v2/types/CreateUserAccessControl.d.ts

@@ -6,10 +6,12 @@ import type { createUserAccessStore } from '../../../../modules/Userinfo/v2/stor
 export type CreateUserAccessControlComposableParams =
   ReturnType<createUserAccessStore>;
 
-export type UseUserAccessControlComposableOptions = WtObject | {
-  resource?: WtObject;
-  useUpdateAccessAsAllMutableChecksSource?: boolean;
-};
+export type UseUserAccessControlComposableOptions =
+  | WtObject
+  | {
+      resource?: WtObject;
+      useUpdateAccessAsAllMutableChecksSource?: boolean;
+    };
 
 export interface UseAccessControlReturn {
   hasReadAccess: Ref<boolean>;

package/src/composables/useWtTable/useWtTable.js

@@ -1,23 +1,24 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 export const useWtTable = ({ headers }) => {
-    const { t } = useI18n();
-    const tableHeaders = computed(() => {
-        return headers
-            .filter((header) => header.show === undefined || header.show)
-            .map((header) => {
-            if (!header.text && header.locale) {
-                return {
-                    ...header,
-                    text: typeof header.locale === 'string'
-                        ? t(header.locale)
-                        : t(...header.locale),
-                };
-            }
-            return header;
-        });
-    });
-    return {
-        tableHeaders,
-    };
+  const { t } = useI18n();
+  const tableHeaders = computed(() => {
+    return headers
+      .filter((header) => header.show === undefined || header.show)
+      .map((header) => {
+        if (!header.text && header.locale) {
+          return {
+            ...header,
+            text:
+              typeof header.locale === 'string'
+                ? t(header.locale)
+                : t(...header.locale),
+          };
+        }
+        return header;
+      });
+  });
+  return {
+    tableHeaders,
+  };
 };

package/src/css/main.scss

@@ -21,10 +21,10 @@ html {
 
 body {
   @extend %typo-body-1;
+  margin: 0;
 
   height: 100%;
   min-height: 100%;
-  margin: 0;
 }
 
 * {
@@ -56,26 +56,26 @@ ul {
 }
 
 iframe {
-  border: none;
   outline: none;
+  border: none;
 }
 
 button {
-  padding: 0;
   cursor: pointer;
-  border: none;
   outline-color: #000;
+  border: none;
   background: transparent;
+  padding: 0;
 }
 
 a {
-  text-decoration: none;
   color: #000;
+  text-decoration: none;
 }
 
 .hidden {
-  pointer-events: none;
   opacity: 0;
+  pointer-events: none;
 }
 
 // https://github.com/Akryum/floating-vue/issues/488

package/src/css/pages/card-page.scss

@@ -10,25 +10,25 @@
 
   &-tabs {
     display: flex;
-    flex-direction: column;
     flex-grow: 1;
+    flex-direction: column;
     gap: var(--spacing-sm);
 
     &__tab {
       display: flex;
-      flex-direction: column;
       flex-grow: 1;
-      min-height: 0;
+      flex-direction: column;
       gap: var(--spacing-sm);
+      min-height: 0;
     }
   }
 
   &-header {
-    position: relative;
     display: flex;
-    align-items: center;
+    position: relative;
     flex-wrap: wrap;
     justify-content: space-between;
+    align-items: center;
     margin: var(--spacing-sm) 0;
 
     &__title {
@@ -48,9 +48,9 @@
 
   &-input-grid {
     display: grid;
-    align-items: flex-start;
     grid-template-columns: 1fr 1fr;
     grid-auto-rows: minmax(auto, auto);
+    align-items: flex-start;
     grid-column-gap: var(--spacing-sm);
     grid-row-gap: var(--spacing-sm);
 

package/src/css/pages/table-page.scss

@@ -27,14 +27,14 @@
       flex: 1 1 100%;
       flex-direction: column;
       justify-content: space-between;
+      gap: var(--spacing-sm);
       width: 100%;
       min-height: 0;
-      gap: var(--spacing-sm);
 
       .wt-table__head {
         position: sticky;
-        z-index: 1;
         top: 0;
+        z-index: 1;
       }
 
       .wt-pagination {
@@ -43,8 +43,8 @@
     }
 
     &__visible-scroll-wrapper {
-      overflow: visible;
       height: 100%;
+      overflow: visible;
 
       .wt-table {
         overflow: visible;
@@ -53,11 +53,11 @@
   }
 
   .table-title {
-    position: relative;
     display: flex;
-    align-items: center;
+    position: relative;
     flex-wrap: wrap;
     justify-content: space-between;
+    align-items: center;
     margin: var(--spacing-sm) 0;
 
     &__title {

package/src/enums/ComponentSize/ComponentSize.js

@@ -1,11 +1,11 @@
 export const ComponentSize = {
-    XXXS: '3xs',
-    XXS: '2xs',
-    XS: 'xs',
-    SM: 'sm',
-    MD: 'md',
-    LG: 'lg',
-    XL: 'xl',
-    XXL: '2xl',
-    XXXL: '3xl',
+  XXXS: '3xs',
+  XXS: '2xs',
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
+  XXL: '2xl',
+  XXXL: '3xl',
 };

package/src/enums/CrudAction/CrudAction.js

@@ -1,6 +1,6 @@
 export const CrudAction = {
-    Read: 'read',
-    Create: 'create',
-    Update: 'update',
-    Delete: 'delete',
+  Read: 'read',
+  Create: 'create',
+  Update: 'update',
+  Delete: 'delete',
 };

package/src/enums/WebitelApplications/AdminSections.js

@@ -4,41 +4,41 @@
  * without any relation to WtObjects (?)
  */
 export const AdminSections = {
-    Agents: 'agents',
-    Blacklist: 'blacklist',
-    Buckets: 'buckets',
-    Calendars: 'calendars',
-    Changelogs: 'changelogs',
-    ChatGateways: 'chat-gateways',
-    Chatplan: 'chatplan',
-    CognitiveProfiles: 'cognitive-profiles',
-    Communications: 'communications',
-    Configuration: 'configuration',
-    Dialplan: 'dialplan',
-    Devices: 'devices',
-    EmailProfiles: 'email-profiles',
-    Flow: 'flow',
-    Gateways: 'gateways',
-    GlobalVariables: 'global-variables',
-    ImportCsv: 'import-csv',
-    License: 'license',
-    Media: 'media',
-    Members: 'members',
-    Objects: 'objects',
-    PauseCause: 'pause-cause',
-    PauseTemplates: 'pause-templates',
-    Queues: 'queues',
-    Regions: 'regions',
-    ResourceGroups: 'resource-groups',
-    Resources: 'resources',
-    Roles: 'roles',
-    ShiftTemplates: 'shift-templates',
-    SingleSignOn: 'single-sign-on',
-    Skills: 'skills',
-    Storage: 'storage',
-    StoragePolicies: 'storage-policies',
-    Teams: 'teams',
-    Triggers: 'triggers',
-    Users: 'users',
-    WorkingConditions: 'working-conditions',
+  Agents: 'agents',
+  Blacklist: 'blacklist',
+  Buckets: 'buckets',
+  Calendars: 'calendars',
+  Changelogs: 'changelogs',
+  ChatGateways: 'chat-gateways',
+  Chatplan: 'chatplan',
+  CognitiveProfiles: 'cognitive-profiles',
+  Communications: 'communications',
+  Configuration: 'configuration',
+  Dialplan: 'dialplan',
+  Devices: 'devices',
+  EmailProfiles: 'email-profiles',
+  Flow: 'flow',
+  Gateways: 'gateways',
+  GlobalVariables: 'global-variables',
+  ImportCsv: 'import-csv',
+  License: 'license',
+  Media: 'media',
+  Members: 'members',
+  Objects: 'objects',
+  PauseCause: 'pause-cause',
+  PauseTemplates: 'pause-templates',
+  Queues: 'queues',
+  Regions: 'regions',
+  ResourceGroups: 'resource-groups',
+  Resources: 'resources',
+  Roles: 'roles',
+  ShiftTemplates: 'shift-templates',
+  SingleSignOn: 'single-sign-on',
+  Skills: 'skills',
+  Storage: 'storage',
+  StoragePolicies: 'storage-policies',
+  Teams: 'teams',
+  Triggers: 'triggers',
+  Users: 'users',
+  WorkingConditions: 'working-conditions',
 };

package/src/enums/WebitelApplications/AuditorSections.js

@@ -1,3 +1,3 @@
 export const AuditorSections = {
-    Scorecards: 'scorecards',
+  Scorecards: 'scorecards',
 };

package/src/enums/WebitelApplications/CrmSections.enum.js

@@ -10,5 +10,6 @@ import { CrmSections } from './CrmSections';
 export default Object.fromEntries(
   Object.entries(CrmSections).map(([key, value]) => [
     upperCase(key).replaceAll(' ', '_'),
-    value]),
+    value,
+  ]),
 );

package/src/enums/WebitelApplications/CrmSections.js

@@ -1,14 +1,14 @@
 export const CrmSections = {
-    Contacts: 'contacts',
-    Cases: 'cases',
-    // CONFIGURATION - LOOKUPS
-    Slas: 'slas',
-    ServiceCatalogs: 'service-catalogs',
-    Priorities: 'priorities',
-    Statuses: 'statuses',
-    Sources: 'sources',
-    CloseReasonGroups: 'close-reason-groups',
-    ContactGroups: 'contact-groups',
-    CaseSources: 'case-sources',
-    CustomLookups: 'custom-lookups',
+  Contacts: 'contacts',
+  Cases: 'cases',
+  // CONFIGURATION - LOOKUPS
+  Slas: 'slas',
+  ServiceCatalogs: 'service-catalogs',
+  Priorities: 'priorities',
+  Statuses: 'statuses',
+  Sources: 'sources',
+  CloseReasonGroups: 'close-reason-groups',
+  ContactGroups: 'contact-groups',
+  CaseSources: 'case-sources',
+  CustomLookups: 'custom-lookups',
 };