@webitel/ui-sdk 25.10.16 → 25.10.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.16",
+  "version": "25.10.18",
   "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.64",
+    "@webitel/styleguide": "^24.12.65",
     "autosize": "^6.0.1",
     "axios": "^1.8.3",
     "clipboard-copy": "^4.0.1",

package/src/api/websocket/WebSocketClientController.ts

@@ -3,13 +3,9 @@ import { Client } from 'webitel-sdk';
 
 import eventBus from '../../scripts/eventBus.js';
 import { endpoint, getConfig } from './config.js';
+import { WebSocketClientEvent } from './enums/WebSocketClientEvent';
 import websocketErrorEventHandler from './websocketErrorEventHandler.js';
 
-const WebSocketClientEvent = Object.freeze({
-  AFTER_AUTH: 'afterAuth',
-  ERROR: 'error',
-});
-
 class WebSocketClientController {
   cli = null;
   Event = WebSocketClientEvent;

package/src/api/websocket/enums/WebSocketClientEvent.ts

@@ -0,0 +1,7 @@
+export const WebSocketClientEvent = {
+  AFTER_AUTH: 'afterAuth',
+  ERROR: 'error',
+} as const;
+
+export type WebSocketClientEvent =
+  (typeof WebSocketClientEvent)[keyof typeof WebSocketClientEvent];

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

@@ -6,14 +6,14 @@
   <div ref="intersectionTarget" />
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useIntersectionObserver } from '@vueuse/core';
 import { onMounted, onUnmounted, ref } from 'vue';
 
 const props = defineProps({
-  next: {
-    type: Function,
-    required: true,
+  canLoadMore: {
+    type: Boolean,
+    default: true
   },
   loading: {
     type: Boolean,
@@ -36,7 +36,7 @@ onMounted(() => {
   const { stop } = useIntersectionObserver(
     intersectionTarget.value,
     ([{ isIntersecting }]) => {
-      if (isIntersecting && props.next) {
+      if (isIntersecting && props.canLoadMore) {
         emit('next');
       }
     },

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

@@ -3,10 +3,10 @@
   --page-wrapper-section-padding: var(--spacing-sm);
   --page-wrapper-section-gap: var(--spacing-sm);
 
-  --wt-page-wrapper-background-color: var(--grey-lighten-5);
+  --wt-page-wrapper-background-color: var(--p-surface-50);
   --wt-page-wrapper-content-wrapper-color: var(--content-wrapper-color);
 }
 
 :root.theme--dark {
-  --wt-page-wrapper-background-color: var(--grey-darken-4);
+  --wt-page-wrapper-background-color: var(--p-surface-850);
 }

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

@@ -8,6 +8,7 @@
     :row-style="rowStyle"
     lazy
     scrollable
+    :resizable-columns="resizableColumns"
     scroll-height="flex"
     @sort="sort"
     @row-reorder="({dragIndex, dropIndex}) => emit('reorder:row', { oldIndex: dragIndex, newIndex: dropIndex })"
@@ -190,6 +191,7 @@ interface Props extends DataTableProps{
   isRowReorderDisabled?: (row) => boolean;
   rowClass?: () => string;
   rowStyle?: () => { [key: string]: string };
+  resizableColumns?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -204,6 +206,7 @@ const props = withDefaults(defineProps<Props>(), {
   isRowReorderDisabled: () => false,
   rowClass: () => '',
   rowStyle: () => ({}),
+  resizableColumns: false
 });
 
 const { t } = useI18n();
@@ -343,6 +346,7 @@ const handleSelection = (row, select) => {
   @extend %typo-body-1;
   display: flex;
   align-items: center;
+  position: relative;
 }
 
 .wt-table__td__actions {

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

@@ -6,11 +6,23 @@ const table = {
 
   // Rewrite the default table styles in the theme here:
   // For customize the table styles you need write css styles for classes
-  css: () => `
+  css: ({ dt }) => `
         .p-datatable-table-container {
           width: 100%;
         }
 
+        .p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead {
+          background: transparent;
+        }
+        
+        .p-datatable-tbody > tr:hover {
+            background: ${dt('datatable.row.hoverBackground')};
+        }
+
+        .p-datatable-scrollable .p-datatable-frozen-column:not(.p-datatable-header-cell) {
+            background: ${dt('datatable.frozenColumn.background')};
+        }
+
         .p-datatable-tbody > tr > td {
             word-break: break-all;
             overflow-wrap: break-word;
@@ -20,6 +32,10 @@ const table = {
         .p-datatable-thead > tr > th {
             overflow: hidden;
         }
+
+        .p-datatable-column-resizer {
+            background: ${dt('datatable.columnResizer.background')};
+        }
         `,
 };
 

package/types/api/websocket/WebSocketClientController.d.ts

@@ -1,10 +1,10 @@
 import { Client } from 'webitel-sdk';
 declare class WebSocketClientController {
     cli: any;
-    Event: Readonly<{
-        AFTER_AUTH: "afterAuth";
-        ERROR: "error";
-    }>;
+    Event: {
+        readonly AFTER_AUTH: "afterAuth";
+        readonly ERROR: "error";
+    };
     _config: {};
     _on: {
         error: ((error: any) => any)[];

package/types/api/websocket/enums/WebSocketClientEvent.d.ts

@@ -0,0 +1,5 @@
+export declare const WebSocketClientEvent: {
+    readonly AFTER_AUTH: "afterAuth";
+    readonly ERROR: "error";
+};
+export type WebSocketClientEvent = (typeof WebSocketClientEvent)[keyof typeof WebSocketClientEvent];

package/types/components/wt-intersection-observer/wt-intersection-observer.vue.d.ts

@@ -1,10 +1,27 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    $emit: (event: "next", ...args: any[]) => void;
-    next: Function;
-    loading: boolean;
-    $props: {
-        readonly next?: Function;
-        readonly loading?: boolean;
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    canLoadMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    canLoadMore: {
+        type: BooleanConstructor;
+        default: boolean;
     };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onNext?: (...args: any[]) => any;
+}>, {
+    loading: boolean;
+    canLoadMore: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -42,6 +42,7 @@ interface Props extends DataTableProps {
     rowStyle?: () => {
         [key: string]: string;
     };
+    resizableColumns?: boolean;
 }
 declare const emit: (event: "sort" | "update:selected" | "reorder:row", ...args: any[]) => void;
 declare const _selected: import("vue").ComputedRef<unknown[]>;
@@ -115,6 +116,7 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
     rowStyle: () => {
         [key: string]: string;
     };
+    resizableColumns: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sort: (...args: any[]) => void;
@@ -138,6 +140,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     rowStyle: () => {
         [key: string]: string;
     };
+    resizableColumns: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -86,6 +86,12 @@ declare const table: {
                 color: string;
                 hoverColor: string;
             };
+            frozenColumn: {
+                background: string;
+            };
+            columnResizer: {
+                background: string;
+            };
         };
         dark: {
             root: {
@@ -172,9 +178,17 @@ declare const table: {
                 color: string;
                 hoverColor: string;
             };
+            frozenColumn: {
+                background: string;
+            };
+            columnResizer: {
+                background: string;
+            };
         };
     };
-    css: () => string;
+    css: ({ dt }: {
+        dt: any;
+    }) => string;
     root: {
         transitionDuration: string;
     };