@webitel/ui-sdk 25.10.28 → 25.10.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.10.28",
+  "version": "25.10.30",
   "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",

package/src/components/wt-label/_variables.scss

@@ -1,7 +1,7 @@
 :root {
   --wt-label-padding: var(--spacing-2xs) var(--spacing-xs);
 
-  --wt-label-color: var(--text-main-color);
-  --wt-label-error-color: var(--text-error-color);
-  --wt-label-disabled-color: var(--text-disabled-color);
+  --wt-label-color: var(--p-form-field-color);
+  --wt-label-error-color: var(--p-error-color);
+  --wt-label-disabled-color: var(--p-form-field-disabled-color);
 }

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

@@ -1,6 +1,7 @@
 <template>
   <p-table 
     ref="table"
+    :key="tableKey"
     class="wt-table"
     :value="data"
     :show-headers="!headless"
@@ -8,16 +9,28 @@
     :row-style="rowStyle"
     lazy
     scrollable
-    :resizable-columns="resizableColumns"
     scroll-height="flex"
+    :resizable-columns="resizableColumns"
+    :reorderable-columns="reorderableColumns"
+    column-resize-mode="expand"
     @sort="sort"
+    @column-resize-end="columnResize"
+    @column-reorder="columnReorder"
     @row-reorder="({dragIndex, dropIndex}) => emit('reorder:row', { oldIndex: dragIndex, newIndex: dropIndex })"
   >
     <p-column
       v-if="rowReorder"
       column-key="row-reorder"
       row-reorder
+      :reorderable-column="false"
       header-style="width: 1%;"
+      :pt="{
+        columnresizer: { 
+            class: { 
+                'hidden': true 
+            } 
+        }
+      }"
     >
       <template #body="{ data: row }">
         <wt-icon
@@ -30,7 +43,15 @@
     <p-column
       v-if="selectable"
       column-key="row-select"
+      :reorderable-column="false"
       header-style="width: 1%;"
+      :pt="{
+        columnresizer: { 
+            class: { 
+                'hidden': true 
+            } 
+        }
+      }"
     >
       <template #header>
         <wt-checkbox
@@ -55,7 +76,13 @@
       :field="col.field"
       :sortable="isColSortable(col)"
       :hidden="isColumnHidden(col)"
+      :pt="{
+        root: {
+          'data-column-field': col.field      // required for column-resizer to get column field
+        }
+      }"
     >
+
       <template #header>
         <div class="wt-table__th__content">
           {{ col.text }}
@@ -191,7 +218,8 @@ interface Props extends DataTableProps{
   isRowReorderDisabled?: (row) => boolean;
   rowClass?: () => string;
   rowStyle?: () => { [key: string]: string };
-  resizableColumns?: boolean;
+  resizableColumns?: boolean
+  reorderableColumns?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -206,16 +234,21 @@ const props = withDefaults(defineProps<Props>(), {
   isRowReorderDisabled: () => false,
   rowClass: () => '',
   rowStyle: () => ({}),
-  resizableColumns: false
+  resizableColumns: false,
+  reorderableColumns: false,
 });
 
 const { t } = useI18n();
 
 const slots = useSlots();
 
-const emit = defineEmits(['sort', 'update:selected', 'reorder:row']);
+const emit = defineEmits(['sort', 'update:selected', 'reorder:row', 'column-resize', 'column-reorder']);
 
 const table = useTemplateRef('table');
+const tableKey = ref(0);
+
+// table's columns that should be excluded from reorder
+const excludeColumnsFromReorder = ['row-select', 'row-reorder', 'row-actions']
 
 const _selected = computed(() => {
   // _isSelected for backwards compatibility
@@ -317,6 +350,32 @@ const handleSelection = (row, select) => {
     row._isSelected = !row._isSelected;
   }
 }
+
+const columnResize = ({element}) => {
+  // getting column name by custom attribute due Primevue does not provide it
+  const field = element.getAttribute('data-column-field')
+
+  const computedStyle = getComputedStyle(element);
+  const paddingLeft = parseFloat(computedStyle.paddingLeft);
+  const paddingRight = parseFloat(computedStyle.paddingRight);
+
+  const columnWidth = element.offsetWidth - paddingLeft - paddingRight
+
+  emit('column-resize', { columnName: field, columnWidth: `${columnWidth}px` })
+}
+
+const columnReorder = async ({dropIndex, originalEvent}) => {
+  const newOrder = table.value.d_columnOrder.filter(col => !excludeColumnsFromReorder.includes(col))
+
+  //save scroll position after table rerender
+  const tableScrollTopPosition = table.value.$el.querySelector('.p-datatable-table').scrollTop
+  const tableScrollLeftPosition = table.value.$el.querySelector('.p-datatable-table').scrollLeft
+  tableKey.value += 1       // rerender table preventing unexpected behavior
+  table.value.$el.querySelector('.p-datatable-table').scrollTop = tableScrollTopPosition
+  table.value.$el.querySelector('.p-datatable-table').scrollLeft = tableScrollLeftPosition
+
+  emit('column-reorder', newOrder)
+}
 </script>
 
 <style lang="scss">
@@ -326,6 +385,7 @@ const handleSelection = (row, select) => {
 <style lang="scss" scoped>
 @use '@webitel/styleguide/scroll' as *;
 @use '@webitel/styleguide/typography' as *;
+@use '@webitel/styleguide/typography' as *;
 
 .wt-table {
   @extend %wt-scrollbar;

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

@@ -54,6 +54,15 @@ const table = {
 
         .p-datatable-column-resizer {
             background: ${dt('datatable.columnResizer.background')};
+
+        }
+            
+        .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+          white-space: normal;
+        }
+
+        .p-datatable-column-resize-indicator {
+          
         }
         `,
 };

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

@@ -43,8 +43,10 @@ interface Props extends DataTableProps {
         [key: string]: string;
     };
     resizableColumns?: boolean;
+    reorderableColumns?: boolean;
 }
-declare const emit: (event: "sort" | "update:selected" | "reorder:row", ...args: any[]) => void;
+declare const emit: (event: "sort" | "update:selected" | "reorder:row" | "column-resize" | "column-reorder", ...args: any[]) => void;
+declare const tableKey: import("vue").Ref<number, number>;
 declare const _selected: import("vue").ComputedRef<unknown[]>;
 declare const dataHeaders: import("vue").ComputedRef<WtTableHeader[]>;
 declare const isColumnHidden: (col: any) => boolean;
@@ -62,27 +64,35 @@ declare const isColSortable: ({ sort }: {
 }) => boolean;
 declare const selectAll: () => void;
 declare const handleSelection: (row: any, select: any) => void;
+declare const columnResize: ({ element }: {
+    element: any;
+}) => void;
+declare const columnReorder: ({ dropIndex, originalEvent }: {
+    dropIndex: any;
+    originalEvent: any;
+}) => Promise<void>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
-declare var __VLS_53: string, __VLS_54: {
+declare var __VLS_55: string, __VLS_56: {
     index: any;
     item: any;
-}, __VLS_57: `${string}-footer`, __VLS_58: {}, __VLS_64: {}, __VLS_66: {
+}, __VLS_59: `${string}-footer`, __VLS_60: {}, __VLS_66: {}, __VLS_68: {
     index: any;
     item: any;
-}, __VLS_68: {};
+}, __VLS_70: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
-    [K in NonNullable<typeof __VLS_53>]?: (props: typeof __VLS_54) => any;
+    [K in NonNullable<typeof __VLS_55>]?: (props: typeof __VLS_56) => any;
 } & {
-    [K in NonNullable<typeof __VLS_57>]?: (props: typeof __VLS_58) => any;
+    [K in NonNullable<typeof __VLS_59>]?: (props: typeof __VLS_60) => any;
 } & {
-    'actions-header'?: (props: typeof __VLS_64) => any;
+    'actions-header'?: (props: typeof __VLS_66) => any;
 } & {
-    actions?: (props: typeof __VLS_66) => any;
+    actions?: (props: typeof __VLS_68) => any;
 } & {
-    footer?: (props: typeof __VLS_68) => any;
+    footer?: (props: typeof __VLS_70) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<Props, {
     emit: typeof emit;
+    tableKey: typeof tableKey;
     _selected: typeof _selected;
     dataHeaders: typeof dataHeaders;
     isColumnHidden: typeof isColumnHidden;
@@ -94,14 +104,20 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
     isColSortable: typeof isColSortable;
     selectAll: typeof selectAll;
     handleSelection: typeof handleSelection;
+    columnResize: typeof columnResize;
+    columnReorder: typeof columnReorder;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     sort: (...args: any[]) => void;
     "update:selected": (...args: any[]) => void;
     "reorder:row": (...args: any[]) => void;
+    "column-resize": (...args: any[]) => void;
+    "column-reorder": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSort?: (...args: any[]) => any;
     "onUpdate:selected"?: (...args: any[]) => any;
     "onReorder:row"?: (...args: any[]) => any;
+    "onColumn-resize"?: (...args: any[]) => any;
+    "onColumn-reorder"?: (...args: any[]) => any;
 }>, {
     headers: WtTableHeader[];
     data: Array<unknown>;
@@ -117,15 +133,20 @@ declare const __VLS_self: import("vue").DefineComponent<Props, {
         [key: string]: string;
     };
     resizableColumns: boolean;
+    reorderableColumns: 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;
     "update:selected": (...args: any[]) => void;
     "reorder:row": (...args: any[]) => void;
+    "column-resize": (...args: any[]) => void;
+    "column-reorder": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSort?: (...args: any[]) => any;
     "onUpdate:selected"?: (...args: any[]) => any;
     "onReorder:row"?: (...args: any[]) => any;
+    "onColumn-resize"?: (...args: any[]) => any;
+    "onColumn-reorder"?: (...args: any[]) => any;
 }>, {
     headers: WtTableHeader[];
     data: Array<unknown>;
@@ -141,6 +162,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
         [key: string]: string;
     };
     resizableColumns: boolean;
+    reorderableColumns: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;