@webitel/ui-sdk 25.10.8 → 25.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.8",
+  "version": "25.10.10",
   "private": false,
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run lint:fix || true) && npm run publish-lib",
@@ -56,7 +56,7 @@
     "@vuepic/vue-datepicker": "^4.5.1",
     "@vueuse/components": "^13.0.0",
     "@webitel/api-services": "^0.0.42",
-    "@webitel/styleguide": "^24.12.61",
+    "@webitel/styleguide": "^24.12.62",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/components/wt-app-header/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --wt-app-header-min-height: 56px;
+  --wt-app-header-min-height: 40px;
   --wt-app-header-padding: var(--spacing-sm);
   --wt-app-header-background: var(--dp-9-surface-color);
 

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

@@ -20,7 +20,7 @@
   background: var(--wt-app-header-background);
   padding: var(--wt-app-header-padding);
   min-height: var(
-    --wt-app-header-min-height
+      --wt-app-header-min-height
   ); // fixed height because anything can be put inside slot, so padding won't work properly
 }
 </style>

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

@@ -1,27 +1,26 @@
 <template>
-  <div
-    :class="[`wt-avatar--size-${size}`]"
+  <PAvatar
+    :class="[ `p-avatar-${props.size}` ]"
+    :shape="props.shape"
+    :label="avatarLetters"
+    :style="{ background: `var(${avatarLettersBackground})` }"
     class="wt-avatar"
   >
-    <wt-badge
-      v-if="badge"
-      :color-variable="badgeColorVar"
-      :icon-badge="isBadge ? props.status : null"
-    />
-    <div
-      v-if="isLetterAvatar"
-      :style="{ background: `var(${avatarLettersBackground})` }"
-      class="wt-avatar__letters"
-    >
-      {{ avatarLetters }}
-    </div>
-    <img
-      v-else
-      :src="imgSrc"
-      alt="avatar"
-      class="wt-avatar__img"
-    />
-  </div>
+    <template #default>
+      <wt-badge
+        v-if="badge"
+        :color-variable="badgeColorVar"
+        :icon-badge="isBadge ? props.status : null"
+      />
+
+      <img
+        v-if="!isLetterAvatar"
+        :src="imgSrc"
+        alt="avatar"
+        class="wt-avatar__img"
+      />
+    </template>
+  </PAvatar>
 </template>
 
 <script setup>
@@ -52,6 +51,11 @@ const props = defineProps({
     options: AbstractUserStatus,
     default: AbstractUserStatus.OFFLINE,
   },
+  shape: {
+    type: String,
+    default: 'circle',
+    options: ['circle', 'square'],
+  }
 });
 
 const isLetterAvatar = computed(() => !props.src && props.username);
@@ -68,26 +72,29 @@ const avatarLetters = computed(() => {
 });
 
 const avatarLettersBackground = computed(() => {
+  if (!avatarLetters.value) {
+    return ''
+  }
   // en.concat(uk)
   const letterList = [
-    { letters: 'AB'.concat('АБВ'), color: '--wt-avatar-letters-p1-color' },
-    { letters: 'CD'.concat('ГҐД'), color: '--wt-avatar-letters-p2-color' },
-    { letters: 'EF'.concat('ЕЄЖ'), color: '--wt-avatar-letters-p3-color' },
-    { letters: 'GH'.concat('ЗИІ'), color: '--wt-avatar-letters-p4-color' },
-    { letters: 'IJ'.concat('ЇЙК'), color: '--wt-avatar-letters-p5-color' },
-    { letters: 'KL'.concat('ЛМН'), color: '--wt-avatar-letters-p6-color' },
-    { letters: 'MN'.concat('ОПР'), color: '--wt-avatar-letters-p7-color' },
-    { letters: 'OP'.concat('СТУ'), color: '--wt-avatar-letters-p8-color' },
-    { letters: 'QR'.concat('ФХЦ'), color: '--wt-avatar-letters-p9-color' },
-    { letters: 'ST'.concat('ЧШЩ'), color: '--wt-avatar-letters-p10-color' },
-    { letters: 'UV'.concat('ЬЮЯ'), color: '--wt-avatar-letters-p11-color' },
-    { letters: 'WX'.concat(''), color: '--wt-avatar-letters-p12-color' },
-    { letters: 'YZ'.concat(''), color: '--wt-avatar-letters-p13-color' },
+    { letters: 'AB'.concat('АБВ'), color: '--p-avatar-letters-p1-color' },
+    { letters: 'CD'.concat('ГҐД'), color: '--p-avatar-letters-p2-color' },
+    { letters: 'EF'.concat('ЕЄЖ'), color: '--p-avatar-letters-p3-color' },
+    { letters: 'GH'.concat('ЗИІ'), color: '--p-avatar-letters-p4-color' },
+    { letters: 'IJ'.concat('ЇЙК'), color: '--p-avatar-letters-p5-color' },
+    { letters: 'KL'.concat('ЛМН'), color: '--p-avatar-letters-p6-color' },
+    { letters: 'MN'.concat('ОПР'), color: '--p-avatar-letters-p7-color' },
+    { letters: 'OP'.concat('СТУ'), color: '--p-avatar-letters-p8-color' },
+    { letters: 'QR'.concat('ФХЦ'), color: '--p-avatar-letters-p9-color' },
+    { letters: 'ST'.concat('ЧШЩ'), color: '--p-avatar-letters-p10-color' },
+    { letters: 'UV'.concat('ЬЮЯ'), color: '--p-avatar-letters-p11-color' },
+    { letters: 'WX'.concat(''), color: '--p-avatar-letters-p12-color' },
+    { letters: 'YZ'.concat(''), color: '--p-avatar-letters-p13-color' },
   ];
   const searchedLetter = letterList.find(({ letters }) =>
     letters.includes(avatarLetters.value.at(0).toUpperCase()),
   );
-  return searchedLetter?.color || '--wt-avatar-letters-p1-color';
+  return searchedLetter?.color || '--p-avatar-letters-p1-color';
 });
 
 const imgSrc = computed(() => props.src || defaultAvatar);
@@ -126,35 +133,8 @@ const badgeColorVar = computed(() => {
 </style>
 
 <style lang="scss" scoped>
-%wt-avatar-typo-xs {
-  font-size: 10px;
-}
-
-%wt-avatar-typo-sm {
-  font-size: 12px;
-}
-
-%wt-avatar-typo-md {
-  font-size: 14px;
-}
-
-%wt-avatar-typo-lg {
-  font-size: 20px;
-}
-
-%wt-avatar-typo-2xl {
-  font-size: 36px;
-}
-
-%wt-avatar-typo-3xl {
-  font-size: 48px;
-}
-
 .wt-avatar {
   position: relative;
-  border-radius: 50%;
-  width: var(--wt-avatar-size);
-  height: var(--wt-avatar-size);
   user-select: none;
 
   &__letters {
@@ -163,6 +143,7 @@ const badgeColorVar = computed(() => {
     align-items: center;
     border-radius: 50%;
     height: 100%;
+    width: 100%;
     color: var(--wt-avatar-text-color);
   }
 
@@ -171,46 +152,5 @@ const badgeColorVar = computed(() => {
     width: 100%;
     height: 100%;
   }
-
-  &--size-xs {
-    @extend %wt-avatar-typo-xs;
-    width: var(--wt-avatar-size--size-xs);
-    height: var(--wt-avatar-size--size-xs);
-  }
-
-  &--size-sm {
-    @extend %wt-avatar-typo-sm;
-    width: var(--wt-avatar-size--size-sm);
-    height: var(--wt-avatar-size--size-sm);
-  }
-
-  &--size-md {
-    @extend %wt-avatar-typo-md;
-    width: var(--wt-avatar-size--size-md);
-    height: var(--wt-avatar-size--size-md);
-  }
-
-  &--size-lg {
-    @extend %wt-avatar-typo-lg;
-    width: var(--wt-avatar-size--size-lg);
-    height: var(--wt-avatar-size--size-lg);
-  }
-
-  &--size-xl {
-    width: var(--wt-avatar-size--size-xl);
-    height: var(--wt-avatar-size--size-xl);
-  }
-
-  &--size-2xl {
-    @extend %wt-avatar-typo-2xl;
-    width: var(--wt-avatar-size--size-2xl);
-    height: var(--wt-avatar-size--size-2xl);
-  }
-
-  &--size-3xl {
-    @extend %wt-avatar-typo-3xl;
-    width: var(--wt-avatar-size--size-3xl);
-    height: var(--wt-avatar-size--size-3xl);
-  }
 }
 </style>

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

@@ -0,0 +1,28 @@
+<template>
+  <PMenubar class="wt-menubar">
+    <template
+      v-for="(_, name) in slots"
+      :key="name"
+      #[name]
+    >
+      <slot v-if="name !== 'default'" :name="name" />
+    </template>
+  </PMenubar>
+</template>
+
+<script setup>
+/**
+ * @author Oleksandr Palonnyi
+ *
+ * @description https://webitel.atlassian.net/browse/WTEL-7529?focusedCommentId=692643
+ * */
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
+<style lang="scss">
+</style>
+
+<style lang="scss" scoped>
+</style>

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

@@ -88,7 +88,7 @@ export default {
       return this.draft
         .filter((header) => !this.staticHeaders.includes(header.value))
         .sort((a, b) => {
-          return this.shownColLabel(a).localeCompare(this.shownColLabel(b));
+          return this.shownColLabel(a)?.localeCompare(this.shownColLabel(b));
           // sorting headers for alphabet just in popup
         });
     },

package/src/plugins/primevue/primevue.plugin.js

@@ -1,4 +1,5 @@
 import PAutoComplete from 'primevue/autocomplete';
+import PAvatar from 'primevue/avatar';
 import PBreadcrumb from 'primevue/breadcrumb';
 import PButton from 'primevue/button';
 import PCheckbox from 'primevue/checkbox';
@@ -6,10 +7,12 @@ import PChip from 'primevue/chip';
 import PrimeVue from 'primevue/config';
 import PDivider from 'primevue/divider';
 import PInputText from 'primevue/inputtext';
+import PMenubar from 'primevue/menubar';
 import PPopover from 'primevue/popover';
 import PRadio from 'primevue/radiobutton';
 import PSlider from 'primevue/slider'
 import PToggleSwitch from 'primevue/toggleswitch';
+import PToolbar from 'primevue/toolbar';
 import Tooltip from 'primevue/tooltip';
 
 import WebitelTheme from './theme/webitel-theme.js';
@@ -34,6 +37,9 @@ const initPrimevue = (app) => {
   app.component('PAutoComplete', changeComponentCompatMode(PAutoComplete));
   app.component('PInputText', changeComponentCompatMode(PInputText));
   app.component('PPopover', changeComponentCompatMode(PPopover));
+  app.component('PMenubar', changeComponentCompatMode(PMenubar));
+  app.component('PToolbar', changeComponentCompatMode(PToolbar));
+  app.component('PAvatar', changeComponentCompatMode(PAvatar));
   app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
   app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));

package/src/plugins/primevue/theme/components/avatar/avatar.js

@@ -0,0 +1,39 @@
+import { AvatarScheme } from '@webitel/styleguide/component-schemes';
+
+const generateCustomSizeCss = ({ size, dt }) => `
+        .p-avatar-${size} {
+            width: ${dt(`avatar-${size}-width`)};
+            height: ${dt(`avatar-${size}-width`)};
+            font-size: ${dt(`avatar-${size}-font-size`)};
+        }
+`;
+
+const avatar = {
+  ...AvatarScheme.sizes,
+  colorScheme: AvatarScheme.colorScheme,
+
+  css: ({ dt }) => `
+        ${generateCustomSizeCss({ size: '2xs', dt })}
+        ${generateCustomSizeCss({ size: 'xs', dt })}
+        ${generateCustomSizeCss({ size: 'sm', dt })}
+        ${generateCustomSizeCss({ size: 'md', dt })}
+        ${generateCustomSizeCss({ size: '2xl', dt })}
+        ${generateCustomSizeCss({ size: '3xl', dt })}
+        
+        .p-avatar {
+          display: block;
+          background: transparent;
+        }
+        
+        .p-avatar-label {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+          height: 100%;
+          width: 100%;
+        }
+  `,
+};
+
+export default avatar;

package/src/plugins/primevue/theme/components/components.js

@@ -1,27 +1,33 @@
 import autocomplete from './autocomplete/autocomplete.js';
+import avatar from './avatar/avatar.js';
 import breadcrumb from './breadcrumb/breadcrumb.js';
 import button from './button/button.js';
 import checkbox from './checkbox/checkbox.js';
 import chip from './chip/chip.js';
 import divider from './divider/divider.js';
+import menubar from './menubar/menubar.js';
 import popover from './popover/popover.js';
 import radio from './radio/radio.js';
 import slider from './slider/slider.js'
 import switcher from './switcher/switcher.js';
+import toolbar from './toolbar/toolbar.js';
 import tooltip from './tooltip/tooltip.js';
 
 const components = {
-  button,
   autocomplete,
-  popover,
-  tooltip,
+  avatar,
+  breadcrumb,
+  button,
   chip,
   checkbox,
   toggleswitch: switcher,
-  breadcrumb,
-  slider,
   divider,
+  menubar,
+  popover,
   radiobutton: radio,
+  slider,
+  tooltip,
+  toolbar,
 };
 
 export default components;

package/src/plugins/primevue/theme/components/menubar/menubar.js

@@ -0,0 +1,22 @@
+import { MenubarScheme } from '@webitel/styleguide/component-schemes';
+
+const generateCustomSlotCss = ({ slot, dt }) => `
+        .p-menubar-${slot} {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          gap: ${dt('menubar.gap')};
+        }
+`;
+
+const menubar = {
+  ...MenubarScheme.sizes,
+  colorScheme: MenubarScheme.colorScheme,
+
+  css: ({ dt }) => `
+        ${generateCustomSlotCss({ slot: 'start', dt })}
+        ${generateCustomSlotCss({ slot: 'end', dt })}
+  `,
+};
+
+export default menubar;

package/src/plugins/primevue/theme/components/toolbar/toolbar.js

@@ -0,0 +1,8 @@
+import { ToolbarScheme } from '@webitel/styleguide/component-schemes';
+
+const toolbar = {
+  ...ToolbarScheme.sizes,
+  colorScheme: ToolbarScheme.colorScheme,
+};
+
+export default toolbar;

package/src/scripts/index.js

@@ -29,7 +29,7 @@ import prettifyFileSize from './prettifyFileSize.js';
 import prettifyTime from './prettifyTime.js';
 import preventHiddenPageCallsDecorator from './preventHiddenPageCallsDecorator.js';
 import saveAsJSON from './saveAsJSON.js';
-import { queryToSortAdapter, sortToQueryAdapter } from './sortQueryAdapters.js';
+import { getNextSortOrder,queryToSortAdapter, sortToQueryAdapter } from './sortQueryAdapters.js';
 import updateObject from './updateObject.js';
 
 export {
@@ -39,6 +39,7 @@ export {
   convertDuration,
   debounce,
   eventBus,
+  getNextSortOrder,
   isEmpty,
   isRelativeDatetimeValue,
   kebabToCamel,

package/types/components/wt-avatar/wt-avatar.vue.d.ts

@@ -2,12 +2,14 @@ declare const _default: import("vue").DefineComponent<{}, {
     size: string;
     status: string;
     badge: boolean;
+    shape: string;
     src?: string;
     username?: string;
     $props: {
         readonly size?: string;
         readonly status?: string;
         readonly badge?: boolean;
+        readonly shape?: string;
         readonly src?: string;
         readonly username?: string;
     };

package/types/components/wt-menubar/wt-menubar.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    [x: string]: (props: {}) => any;
+    [x: number]: (props: {}) => any;
+};

package/types/plugins/primevue/theme/components/avatar/avatar.d.ts

@@ -0,0 +1,96 @@
+export default avatar;
+declare const avatar: {
+    colorScheme: {
+        light: {
+            root: {
+                background: string;
+                color: string;
+            };
+            letters: {
+                'p1-color': string;
+                'p2-color': string;
+                'p3-color': string;
+                'p4-color': string;
+                'p5-color': string;
+                'p6-color': string;
+                'p7-color': string;
+                'p8-color': string;
+                'p9-color': string;
+                'p10-color': string;
+                'p11-color': string;
+                'p12-color': string;
+                'p13-color': string;
+                'p14-color': string;
+            };
+        };
+        dark: {
+            root: {
+                background: string;
+                color: string;
+            };
+            letters: {
+                'p1-color': string;
+                'p2-color': string;
+                'p3-color': string;
+                'p4-color': string;
+                'p5-color': string;
+                'p6-color': string;
+                'p7-color': string;
+                'p8-color': string;
+                'p9-color': string;
+                'p10-color': string;
+                'p11-color': string;
+                'p12-color': string;
+                'p13-color': string;
+                'p14-color': string;
+            };
+        };
+    };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
+    width: string;
+    height: string;
+    fontSize: string;
+    borderRadius: string;
+    '2xs': {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    xs: {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    sm: {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    md: {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    lg: {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    xl: {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    '2xl': {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+    '3xl': {
+        width: string;
+        height: string;
+        fontSize: string;
+    };
+};

package/types/plugins/primevue/theme/components/components.d.ts

@@ -1,25 +1,31 @@
 export default components;
 declare namespace components {
-    export { button };
     export { autocomplete };
-    export { popover };
-    export { tooltip };
+    export { avatar };
+    export { breadcrumb };
+    export { button };
     export { chip };
     export { checkbox };
     export { switcher as toggleswitch };
-    export { breadcrumb };
-    export { slider };
     export { divider };
+    export { menubar };
+    export { popover };
     export { radio as radiobutton };
+    export { slider };
+    export { tooltip };
+    export { toolbar };
 }
-import button from './button/button.js';
 import autocomplete from './autocomplete/autocomplete.js';
-import popover from './popover/popover.js';
-import tooltip from './tooltip/tooltip.js';
+import avatar from './avatar/avatar.js';
+import breadcrumb from './breadcrumb/breadcrumb.js';
+import button from './button/button.js';
 import chip from './chip/chip.js';
 import checkbox from './checkbox/checkbox.js';
 import switcher from './switcher/switcher.js';
-import breadcrumb from './breadcrumb/breadcrumb.js';
-import slider from './slider/slider.js';
 import divider from './divider/divider.js';
+import menubar from './menubar/menubar.js';
+import popover from './popover/popover.js';
 import radio from './radio/radio.js';
+import slider from './slider/slider.js';
+import tooltip from './tooltip/tooltip.js';
+import toolbar from './toolbar/toolbar.js';

package/types/plugins/primevue/theme/components/menubar/menubar.d.ts

@@ -0,0 +1,23 @@
+export default menubar;
+declare const menubar: {
+    colorScheme: {
+        light: {
+            background: string;
+            borderColor: string;
+            color: string;
+            transitionDuration: string;
+        };
+        dark: {
+            background: string;
+            borderColor: string;
+            color: string;
+            transitionDuration: string;
+        };
+    };
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

package/types/plugins/primevue/theme/components/toolbar/toolbar.d.ts

@@ -0,0 +1,20 @@
+export default toolbar;
+declare const toolbar: {
+    colorScheme: {
+        light: {
+            background: string;
+            borderColor: string;
+            color: string;
+            transitionDuration: string;
+        };
+        dark: {
+            background: string;
+            borderColor: string;
+            color: string;
+            transitionDuration: string;
+        };
+    };
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

package/types/scripts/index.d.ts

@@ -26,4 +26,5 @@ import { snakeToKebab } from './caseConverters.js';
 import { sortToQueryAdapter } from './sortQueryAdapters.js';
 import updateObject from './updateObject.js';
 import { wtlog } from './logger.js';
-export { camelToKebab, camelToSnake, compareSize, convertDuration, debounce, eventBus, isEmpty, isRelativeDatetimeValue, kebabToCamel, kebabToSnake, normalizeToTimestamp, objCamelToKebab, objCamelToSnake, objSnakeToCamel, prettifyFileSize, prettifyTime, preventHiddenPageCallsDecorator, queryToSortAdapter, saveAsJSON, sizeGreaterOrEqual, sizeGreaterThen, sizeSmallerOrEqual, sizeSmallerThen, snakeToCamel, snakeToKebab, sortToQueryAdapter, updateObject, wtlog };
+import { getNextSortOrder } from './sortQueryAdapters.js';
+export { camelToKebab, camelToSnake, compareSize, convertDuration, debounce, eventBus, isEmpty, isRelativeDatetimeValue, kebabToCamel, kebabToSnake, normalizeToTimestamp, objCamelToKebab, objCamelToSnake, objSnakeToCamel, prettifyFileSize, prettifyTime, preventHiddenPageCallsDecorator, queryToSortAdapter, saveAsJSON, sizeGreaterOrEqual, sizeGreaterThen, sizeSmallerOrEqual, sizeSmallerThen, snakeToCamel, snakeToKebab, sortToQueryAdapter, updateObject, wtlog, getNextSortOrder };