@webitel/ui-sdk 25.10.9 → 25.10.11

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/css/pages/table-page.scss

@@ -31,12 +31,6 @@
       width: 100%;
       min-height: 0;
 
-      .wt-table__head {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
-
       .wt-pagination {
         margin-top: auto;
       }

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

@@ -4,7 +4,9 @@ import PBreadcrumb from 'primevue/breadcrumb';
 import PButton from 'primevue/button';
 import PCheckbox from 'primevue/checkbox';
 import PChip from 'primevue/chip';
+import PColumn from 'primevue/column';
 import PrimeVue from 'primevue/config';
+import PTable from 'primevue/datatable';
 import PDivider from 'primevue/divider';
 import PInputText from 'primevue/inputtext';
 import PMenubar from 'primevue/menubar';
@@ -41,6 +43,8 @@ const initPrimevue = (app) => {
   app.component('PToolbar', changeComponentCompatMode(PToolbar));
   app.component('PAvatar', changeComponentCompatMode(PAvatar));
   app.component('PCheckbox', changeComponentCompatMode(PCheckbox));
+  app.component('PTable', changeComponentCompatMode(PTable));
+  app.component('PColumn', changeComponentCompatMode(PColumn));
   app.component('PRadio', changeComponentCompatMode(PRadio));
   app.component('PChip', changeComponentCompatMode(PChip));
   app.component('PToggleSwitch', changeComponentCompatMode(PToggleSwitch));

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

@@ -10,6 +10,7 @@ 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 table from './table/table.js';
 import toolbar from './toolbar/toolbar.js';
 import tooltip from './tooltip/tooltip.js';
 
@@ -27,6 +28,8 @@ const components = {
   radiobutton: radio,
   slider,
   tooltip,
+  checkbox,
+  datatable: table,
   toolbar,
 };
 

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

@@ -0,0 +1,25 @@
+import { TableScheme } from '@webitel/styleguide/component-schemes';
+
+const table = {
+  ...TableScheme.sizes,
+  colorScheme: TableScheme.colorScheme,
+
+  // Rewrite the default table styles in the theme here:
+  // For customize the table styles you need write css styles for classes
+  css: () => `
+        .p-datatable-table-container {
+          width: 100%;
+        }
+
+        .p-datatable-tbody > tr > td {
+            word-break: break-all;
+            overflow-wrap: break-word;
+        }
+
+        .p-datatable-thead > tr > th {
+            overflow: hidden;
+        }
+        `,
+};
+
+export default table;

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-app-header/wt-app-header.vue.d.ts

@@ -5,6 +5,5 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 });
 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;
+    default?: (props: {}) => any;
 };

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/components/wt-table/wt-table.vue.d.ts

@@ -1,132 +1,148 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import type { DataTableProps } from 'primevue';
+import type { WtTableHeader } from './types/WtTable';
+interface Props extends DataTableProps {
     /**
-     * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets minmax(150px, 1fr). '
+     * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets 140px. '
      */
-    headers: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
+    headers?: WtTableHeader[];
     /**
      * 'List of data, represented by table. '
      */
-    data: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
+    data?: Array<unknown>;
     /**
      * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
      */
-    sortable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    sortable?: boolean;
     /**
      * 'If true, draws row selection checkboxes. Checkbox toggles data object _isSelected property. It's IMPORTANT to set this property before sending data to table. '
      */
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: ArrayConstructor;
-    };
+    selectable?: boolean;
+    selected?: Array<unknown>;
     /**
      * 'If true, reserves space for 3 icon actions in the last column. Accessible by "actions" slot. '
      */
-    gridActions: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    gridActions?: boolean;
     /**
      * 'If true, 3 icon actions in the last column have position:sticky and fixed on the right'
      */
-    fixedActions: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    fixedActions?: boolean;
     /**
      * 'If true, displays table without header.'
      */
-    headless: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, {}, {}, {
-    _selected(): unknown[];
-    isAllSelected(): boolean;
-    dataHeaders(): any[];
-    columnsStyle(): string;
-    isTableFooter(): boolean;
-}, {
-    sort(col: any): void;
-    isColSortable({ sort }: {
-        sort: any;
-    }): boolean;
-    selectAll(): void;
-    handleSelection(row: any, select: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort" | "update:selected")[], "sort" | "update:selected", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets minmax(150px, 1fr). '
-     */
-    headers: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    /**
-     * 'List of data, represented by table. '
-     */
-    data: {
-        type: ArrayConstructor;
-        default: () => any[];
-    };
-    /**
-     * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
-     */
-    sortable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * 'If true, draws row selection checkboxes. Checkbox toggles data object _isSelected property. It's IMPORTANT to set this property before sending data to table. '
-     */
-    selectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    selected: {
-        type: ArrayConstructor;
-    };
+    headless?: boolean;
     /**
-     * 'If true, reserves space for 3 icon actions in the last column. Accessible by "actions" slot. '
+     * 'If true, allows to reorder rows.'
      */
-    gridActions: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    rowReorder?: boolean;
     /**
-     * 'If true, 3 icon actions in the last column have position:sticky and fixed on the right'
+     * 'If true, restrict sprecific row reorder.'
      */
-    fixedActions: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    /**
-     * 'If true, displays table without header.'
-     */
-    headless: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{
+    isRowReorderDisabled?: (row: any) => boolean;
+    rowClass?: () => string;
+    rowStyle?: () => {
+        [key: string]: string;
+    };
+}
+declare const emit: (event: "sort" | "update:selected" | "reorder:row", ...args: any[]) => void;
+declare const _selected: import("vue").ComputedRef<unknown[]>;
+declare const dataHeaders: import("vue").ComputedRef<WtTableHeader[]>;
+declare const isColumnHidden: (col: any) => boolean;
+declare const columnStyle: (col: any) => {
+    minWidth: any;
+};
+declare const isTableColumnFooters: import("vue").ComputedRef<boolean>;
+declare const isTableFooter: import("vue").ComputedRef<boolean>;
+declare const isAllSelected: import("vue").ComputedRef<boolean>;
+declare const sort: ({ sortField }: {
+    sortField: any;
+}) => void;
+declare const isColSortable: ({ sort }: {
+    sort: any;
+}) => boolean;
+declare const selectAll: () => void;
+declare const handleSelection: (row: any, select: any) => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_45: string, __VLS_46: {
+    index: any;
+    item: any;
+}, __VLS_57: `${string}-footer`, __VLS_58: {}, __VLS_64: {}, __VLS_66: {
+    index: any;
+    item: any;
+}, __VLS_68: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    [K in NonNullable<typeof __VLS_45>]?: (props: typeof __VLS_46) => any;
+} & {
+    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+} & {
+    'actions-header'?: (props: typeof __VLS_64) => any;
+} & {
+    actions?: (props: typeof __VLS_66) => any;
+} & {
+    footer?: (props: typeof __VLS_68) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<Props, {
+    emit: typeof emit;
+    _selected: typeof _selected;
+    dataHeaders: typeof dataHeaders;
+    isColumnHidden: typeof isColumnHidden;
+    columnStyle: typeof columnStyle;
+    isTableColumnFooters: typeof isTableColumnFooters;
+    isTableFooter: typeof isTableFooter;
+    isAllSelected: typeof isAllSelected;
+    sort: typeof sort;
+    isColSortable: typeof isColSortable;
+    selectAll: typeof selectAll;
+    handleSelection: typeof handleSelection;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (...args: any[]) => void;
+    "update:selected": (...args: any[]) => void;
+    "reorder:row": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSort?: (...args: any[]) => any;
     "onUpdate:selected"?: (...args: any[]) => any;
+    "onReorder:row"?: (...args: any[]) => any;
+}>, {
+    headers: WtTableHeader[];
+    data: Array<unknown>;
+    sortable: boolean;
+    selectable: boolean;
+    gridActions: boolean;
+    fixedActions: boolean;
+    headless: boolean;
+    rowReorder: boolean;
+    isRowReorderDisabled: (row: any) => boolean;
+    rowClass: () => string;
+    rowStyle: () => {
+        [key: string]: string;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    sort: (...args: any[]) => void;
+    "update:selected": (...args: any[]) => void;
+    "reorder:row": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSort?: (...args: any[]) => any;
+    "onUpdate:selected"?: (...args: any[]) => any;
+    "onReorder:row"?: (...args: any[]) => any;
 }>, {
-    headers: unknown[];
-    data: unknown[];
+    headers: WtTableHeader[];
+    data: Array<unknown>;
     sortable: boolean;
     selectable: boolean;
     gridActions: boolean;
     fixedActions: boolean;
     headless: boolean;
+    rowReorder: boolean;
+    isRowReorderDisabled: (row: any) => boolean;
+    rowClass: () => string;
+    rowStyle: () => {
+        [key: string]: string;
+    };
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -13,6 +13,7 @@ declare namespace components {
     export { radio as radiobutton };
     export { slider };
     export { tooltip };
+    export { table as datatable };
     export { toolbar };
 }
 import autocomplete from './autocomplete/autocomplete.js';
@@ -28,4 +29,5 @@ 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 table from './table/table.js';
 import toolbar from './toolbar/toolbar.js';

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

@@ -0,0 +1,186 @@
+export default table;
+declare const table: {
+    colorScheme: {
+        light: {
+            root: {
+                borderColor: string;
+            };
+            header: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            headerCell: {
+                background: string;
+                hoverBackground: string;
+                selectedBackground: string;
+                borderColor: string;
+                color: string;
+                hoverColor: string;
+                selectedColor: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            row: {
+                stripedBackground: string;
+                background: string;
+                hoverBackground: string;
+                selectedBackground: string;
+                color: string;
+                hoverColor: string;
+                selectedColor: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            bodyCell: {
+                borderColor: string;
+                selectedBorderColor: string;
+            };
+            footerCell: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            footer: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            sortIcon: {
+                color: string;
+                hoverColor: string;
+            };
+        };
+        dark: {
+            root: {
+                borderColor: string;
+            };
+            header: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            headerCell: {
+                background: string;
+                hoverBackground: string;
+                selectedBackground: string;
+                borderColor: string;
+                color: string;
+                hoverColor: string;
+                selectedColor: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            row: {
+                stripedBackground: string;
+                background: string;
+                hoverBackground: string;
+                selectedBackground: string;
+                color: string;
+                hoverColor: string;
+                selectedColor: string;
+                focusRing: {
+                    color: string;
+                    shadow: string;
+                };
+            };
+            bodyCell: {
+                borderColor: string;
+                selectedBorderColor: string;
+            };
+            footerCell: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            footer: {
+                background: string;
+                borderColor: string;
+                color: string;
+            };
+            sortIcon: {
+                color: string;
+                hoverColor: string;
+            };
+        };
+    };
+    css: () => string;
+    root: {
+        transitionDuration: string;
+    };
+    header: {
+        borderWidth: string;
+        padding: string;
+        sm: {
+            padding: string;
+        };
+        lg: {
+            padding: string;
+        };
+    };
+    headerCell: {
+        gap: string;
+        padding: string;
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+        sm: {
+            padding: string;
+        };
+        lg: {
+            padding: string;
+        };
+    };
+    columnWeight: {
+        fontWeight: string;
+    };
+    row: {
+        focusRing: {
+            width: string;
+            style: string;
+            offset: string;
+        };
+    };
+    bodyCell: {
+        padding: string;
+        sm: {
+            padding: string;
+        };
+        lg: {
+            padding: string;
+        };
+    };
+    footerCell: {
+        padding: string;
+        sm: {
+            padding: string;
+        };
+        lg: {
+            padding: string;
+        };
+    };
+    columnFooter: {
+        fontWeight: string;
+    };
+    footer: {
+        borderWidth: string;
+        padding: string;
+        sm: {
+            padding: string;
+        };
+        lg: {
+            padding: string;
+        };
+    };
+    sortIcon: {
+        size: string;
+    };
+};

package/types/scripts/index.d.ts

@@ -4,6 +4,7 @@ import { compareSize } from './compareSize.ts';
 import convertDuration from './convertDuration.js';
 import debounce from './debounce.js';
 import eventBus from './eventBus.js';
+import { getNextSortOrder } from './sortQueryAdapters.js';
 import isEmpty from './isEmpty.js';
 import { isRelativeDatetimeValue } from './normalizeDatetime';
 import { kebabToCamel } from './caseConverters.js';
@@ -26,4 +27,4 @@ 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 };
+export { camelToKebab, camelToSnake, compareSize, convertDuration, debounce, eventBus, getNextSortOrder, isEmpty, isRelativeDatetimeValue, kebabToCamel, kebabToSnake, normalizeToTimestamp, objCamelToKebab, objCamelToSnake, objSnakeToCamel, prettifyFileSize, prettifyTime, preventHiddenPageCallsDecorator, queryToSortAdapter, saveAsJSON, sizeGreaterOrEqual, sizeGreaterThen, sizeSmallerOrEqual, sizeSmallerThen, snakeToCamel, snakeToKebab, sortToQueryAdapter, updateObject, wtlog };