@webitel/ui-sdk 25.10.26 → 25.10.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.26",
+  "version": "25.10.27",
   "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.44",
-    "@webitel/styleguide": "^24.12.66",
+    "@webitel/styleguide": "^24.12.72",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/assets/icons/sprite/case--filled.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V12H22Z"/>
+<path d="M9.67578 2C9.99811 2.00004 10.3182 2.05237 10.624 2.1543L13.0088 2.94824C13.1106 2.98213 13.217 2.99996 13.3242 3H19C20.6569 3 22 4.34315 22 6V10H19V9C19 7.89543 18.1046 7 17 7H7C5.89543 7 5 7.89543 5 9V10H2V5C2 3.34315 3.34315 2 5 2H9.67578Z"/>
+</svg>

package/src/assets/icons/sprite/case-done.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 8C20.6569 8 22 9.34315 22 11V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V11C2 9.34315 3.34315 8 5 8H19ZM15.6641 11.7529C15.2513 11.386 14.6199 11.4232 14.2529 11.8359L10.957 15.543L9.70703 14.293L9.63086 14.2246C9.23811 13.9043 8.65909 13.9269 8.29297 14.293C7.90244 14.6835 7.90244 15.3165 8.29297 15.707L9.54297 16.957C10.3566 17.7707 11.6876 17.732 12.4521 16.8721L15.7471 13.1641C16.1139 12.7513 16.0768 12.1198 15.6641 11.7529Z"/>
+<path d="M9.67578 2C9.99811 2.00004 10.3182 2.05237 10.624 2.1543L13.0088 2.94824C13.1106 2.98213 13.217 2.99996 13.3242 3H19C20.6569 3 22 4.34315 22 6V7C21.1643 6.37223 20.1257 6 19 6H5C3.87432 6 2.83569 6.37223 2 7V5C2 3.34315 3.34315 2 5 2H9.67578Z"/>
+</svg>

package/src/assets/icons/sprite/index.js

@@ -41,7 +41,9 @@ import callRinging from './call-ringing.svg';
 import callRingingFilled from './call-ringing--filled.svg';
 import callTransfer from './call-transfer.svg';
 import callTransferFilled from './call-transfer--filled.svg';
+import caseFilled from './case--filled.svg';
 import caseAuthor from './case-author.svg';
+import caseDone from './case-done.svg';
 import cases from './cases.svg';
 import chat from './chat.svg';
 import chatFilled from './chat--filled.svg';
@@ -262,6 +264,8 @@ export default objCamelToKebab({
 
   caseAuthor,
   cases,
+  'case--filled': caseFilled,
+  caseDone,
   chat,
   'chat--filled': chatFilled,
   chatEmoji,

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

@@ -1,10 +1,12 @@
 :root {
-  --page-wrapper-padding: var(--spacing-sm);
-  --page-wrapper-section-padding: var(--spacing-sm);
-  --page-wrapper-section-gap: var(--spacing-sm);
+  --page-wrapper-padding: var(--spacing-xs);
+  --page-wrapper-section-padding: var(--spacing-xs);
+  --page-wrapper-section-gap: var(--spacing-xs);
 
   --wt-page-wrapper-background-color: var(--p-surface-50);
   --wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
+
+  --content-wrapper-border-radius: var(--p-border-radius-lg);
 }
 
 :root.theme--dark {

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

@@ -39,20 +39,28 @@ export default {
 .wt-page-wrapper {
   display: flex;
   flex-direction: column;
-  gap: var(--page-wrapper-section-gap);
   box-sizing: border-box;
-  background: var(--wt-page-wrapper-background-color);
-  padding: var(--page-wrapper-padding);
   max-width: 100%;
   min-height: 100%;
+  padding: var(--page-wrapper-padding);
+  background: var(--wt-page-wrapper-background-color);
+  gap: var(--page-wrapper-section-gap);
 }
 
 .wt-page-wrapper__header,
 .wt-page-wrapper__actions-panel,
 .wt-page-wrapper__main {
   box-sizing: border-box;
-  border-radius: var(--border-radius);
+  border-radius: var(--content-wrapper-border-radius);
   background: var(--wt-page-wrapper-content-wrapper-color);
+}
+
+.wt-page-wrapper__header,
+.wt-page-wrapper__actions-panel {
+  padding: var(--page-wrapper-section-padding) var(--spacing-sm);
+}
+
+.wt-page-wrapper__main {
   padding: var(--page-wrapper-section-padding);
 }
 

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

@@ -1,5 +1,10 @@
 @use '@webitel/styleguide/typography' as *;
 
+:root {
+  --content-wrapper-padding: var(--spacing-xs);
+  --content-wrapper-gap: var(--spacing-xs);
+}
+
 .table-page {
   &.wt-page-wrapper {
     width: 100%;
@@ -21,15 +26,16 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+    gap: var(--content-wrapper-gap);
 
     &__table-wrapper {
       display: flex;
       flex: 1 1 100%;
       flex-direction: column;
       justify-content: space-between;
-      gap: var(--spacing-sm);
       width: 100%;
       min-height: 0;
+      gap: var(--content-wrapper-gap);
 
       .wt-pagination {
         margin-top: auto;
@@ -37,8 +43,8 @@
     }
 
     &__visible-scroll-wrapper {
-      height: 100%;
       overflow: visible;
+      height: 100%;
 
       .wt-table {
         overflow: visible;
@@ -47,12 +53,12 @@
   }
 
   .table-title {
-    display: flex;
     position: relative;
+    display: flex;
+    align-items: center;
     flex-wrap: wrap;
     justify-content: space-between;
-    align-items: center;
-    margin: var(--spacing-sm) 0;
+    padding: 0 var(--content-wrapper-padding);
 
     &__title {
       @extend %typo-heading-3;

package/src/enums/EmptyCause/EmptyCause.ts

@@ -0,0 +1,7 @@
+export const EmptyCause = Object.freeze({
+  ERROR: 'error',
+  FILTERS: 'filters',
+  EMPTY: 'empty',
+});
+
+export type EmptyCause = (typeof EmptyCause)[keyof typeof EmptyCause];

package/src/enums/index.ts

@@ -5,6 +5,7 @@ import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.
 import { ChipColor } from './ChipColor/ChipColor';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
+import { EmptyCause } from './EmptyCause/EmptyCause';
 import IconAction from './IconAction/IconAction.enum.js';
 import { IconColor } from './IconColor/IconColor';
 import { ProcessingTableColumnType } from './ProcessingTableColumnType/ProcessingTableColumnType';
@@ -31,6 +32,7 @@ export {
   ComponentSize,
   CrmSections,
   CrudAction,
+  EmptyCause,
   IconAction,
   IconColor,
   ProcessingTableColumnType,

package/src/modules/TableComponentModule/composables/useTableEmpty.js

@@ -3,6 +3,7 @@ import { computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 
+import { EmptyCause } from '../../../enums/index.js';
 import { isEmpty } from '../../../scripts/index.js';
 import EmptyFiltersDark from '../_internals/assets/empty-filters-dark.svg';
 import EmptyFiltersLight from '../_internals/assets/empty-filters-light.svg';
@@ -73,12 +74,6 @@ export const useTableEmpty = (
     }
   }
 
-  const EmptyCause = Object.freeze({
-    ERROR: 'error',
-    FILTERS: 'filters',
-    EMPTY: 'empty',
-  });
-
   const emptyState = computed(() => {
     return !isLoading?.value && !error?.value && !dataList?.value?.length;
   });
@@ -184,6 +179,7 @@ export const useTableEmpty = (
 
   return {
     showEmpty: emptyState,
+    emptyCause,
 
     image,
     headline,

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

@@ -1,14 +1,18 @@
 import { TableScheme } from '@webitel/styleguide/component-schemes';
 
 const rowStateStyles = (state, dt) => `
-            .p-datatable-tbody > tr.row-${state} {
-                background: ${dt(`datatable.row.${state}Background`)};
-            }
-
-            .p-datatable-tbody > tr.row-${state}:hover {
-                background: ${dt(`datatable.row.${state}HoverBackground`)};
-            }
-        `;
+  .p-datatable-tbody > tr.row-${state},
+  .p-datatable-tbody > tr.row-${state} > td,
+  .p-datatable-tbody > tr.row-${state} > td.p-datatable-frozen-column {
+    background: ${dt(`datatable.row.${state}Background`)};
+  }
+
+  .p-datatable-tbody > tr.row-${state}:hover,
+  .p-datatable-tbody > tr.row-${state}:hover > td,
+  .p-datatable-tbody > tr.row-${state}:hover > td.p-datatable-frozen-column {
+    background: ${dt(`datatable.row.${state}HoverBackground`)};
+  }
+`;
 
 const table = {
   ...TableScheme.sizes,
@@ -25,9 +29,10 @@ const table = {
           background: transparent;
         }
         
-        .p-datatable-tbody > tr:hover {
-            background: ${dt('datatable.row.hoverBackground')};
-        }
+        .p-datatable-tbody > tr:hover > td,
+        .p-datatable-tbody > tr:hover > td.p-datatable-frozen-column {
+          background: ${dt('datatable.row.hoverBackground')};
+         }
 
         ${rowStateStyles('error', dt)}
         ${rowStateStyles('warning', dt)}
@@ -53,4 +58,4 @@ const table = {
         `,
 };
 
-export default table;
+export default table;

package/src/plugins/primevue/theme/webitel-theme.js

@@ -1,5 +1,6 @@
 import { definePreset } from '@primeuix/themes';
 import Aura from '@primeuix/themes/aura';
+import primitive from '@webitel/styleguide/primitive';
 import semantic from '@webitel/styleguide/semantic';
 
 import components from './components/components';
@@ -11,6 +12,8 @@ const WebitelTheme = definePreset(Aura, {
   components,
 
   extend,
+
+  primitive,
 });
 
 export default WebitelTheme;

package/types/enums/EmptyCause/EmptyCause.d.ts

@@ -0,0 +1,6 @@
+export declare const EmptyCause: Readonly<{
+    ERROR: "error";
+    FILTERS: "filters";
+    EMPTY: "empty";
+}>;
+export type EmptyCause = (typeof EmptyCause)[keyof typeof EmptyCause];

package/types/enums/index.d.ts

@@ -3,6 +3,7 @@ import AgentStatus from './AgentStatus/AgentStatus.enum.js';
 import { ButtonColor } from './ButtonColor/ButtonColor';
 import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import { ChipColor } from './ChipColor/ChipColor';
+import { EmptyCause } from './EmptyCause/EmptyCause';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
 import IconAction from './IconAction/IconAction.enum.js';
@@ -19,4 +20,4 @@ import WebitelApplications from './WebitelApplications/WebitelApplications.enum.
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
-export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };
+export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ButtonColor, EmptyCause, ChatGatewayProvider, ChipColor, ComponentSize, CrmSections, CrudAction, IconAction, IconColor, ProcessingTableColumnType, QueueType, RelativeDatetimeValue, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, WtTypeExtensionFieldKind, };

package/types/modules/TableComponentModule/composables/useTableEmpty.d.ts

@@ -5,6 +5,7 @@ export function useTableEmpty({ dataList, filters, error, isLoading }: {
     isLoading: any;
 }, overrides?: {}): {
     showEmpty: import("vue").ComputedRef<boolean>;
+    emptyCause: import("vue").ComputedRef<"filters" | "error" | "empty">;
     image: import("vue").ComputedRef<any>;
     headline: import("vue").ComputedRef<any>;
     title: import("vue").ComputedRef<any>;

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

@@ -27,6 +27,12 @@ declare const table: {
                 stripedBackground: string;
                 background: string;
                 hoverBackground: string;
+                successBackground: string;
+                successHoverBackground: string;
+                warningBackground: string;
+                warningHoverBackground: string;
+                errorBackground: string;
+                errorHoverBackground: string;
                 selectedBackground: string;
                 color: string;
                 hoverColor: string;
@@ -119,6 +125,12 @@ declare const table: {
                 stripedBackground: string;
                 background: string;
                 hoverBackground: string;
+                successBackground: string;
+                successHoverBackground: string;
+                warningBackground: string;
+                warningHoverBackground: string;
+                errorBackground: string;
+                errorHoverBackground: string;
                 selectedBackground: string;
                 color: string;
                 hoverColor: string;