@platforma-sdk/ui-vue 1.14.20 → 1.14.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.14.20",
+  "version": "1.14.22",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",

package/src/components/PlAgColumnHeader/PlAgColumnHeader.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { IHeaderParams, SortDirection } from '@ag-grid-community/core';
+import type { MaskIconName16 } from '@milaboratories/uikit';
+import { PlMaskIcon16 } from '@milaboratories/uikit';
+import { computed, onMounted, ref } from 'vue';
+import './pl-ag-column-header.scss';
+import type { PlAgHeaderComponentParams } from './types';
+
+const props = defineProps<{ params: IHeaderParams & PlAgHeaderComponentParams }>();
+
+const icon = computed<MaskIconName16>(() => {
+  const type = (props.params.column.getUserProvidedColDef()?.headerComponentParams as PlAgHeaderComponentParams)?.type;
+  switch (type) {
+    case undefined:
+    case 'Text':
+      return 'cell-type-txt';
+    case 'Number':
+      return 'cell-type-num';
+    case 'File':
+      return 'paper-clip';
+    case 'Date':
+      return 'calendar';
+    case 'Duration':
+      return 'time';
+    default:
+      throw Error(`unsupported data type: ${type satisfies never} for PlAgColumnHeader component. Column ${props.params.column.getColId()}`);
+  }
+});
+
+const sortDirection = ref<SortDirection>(null);
+const refreshSortDirection = () => (sortDirection.value = props.params.column.getSort() ?? null);
+onMounted(() => refreshSortDirection());
+function onSortRequested() {
+  if (props.params.column.isSortable()) {
+    props.params.progressSort();
+    refreshSortDirection();
+  }
+}
+const sortIcon = computed<MaskIconName16 | null>(() => {
+  const direction = sortDirection.value;
+  switch (direction) {
+    case 'asc':
+      return 'arrow-up';
+    case 'desc':
+      return 'arrow-down';
+    case null:
+      return null;
+    default:
+      throw Error(`unsupported sort direction: ${direction satisfies never}. Column ${props.params.column.getColId()}`);
+  }
+});
+
+const menuActivatorBtn = ref<HTMLElement>();
+function showMenu() {
+  const menuActivatorBtnValue = menuActivatorBtn.value;
+  if (menuActivatorBtnValue) props.params.showColumnMenu(menuActivatorBtnValue);
+}
+</script>
+
+<template>
+  <div class="pl-ag-column-header d-flex align-center gap-6" @click="onSortRequested">
+    <div class="pl-ag-column-header__title d-flex align-center gap-6 flex-grow-1">
+      <PlMaskIcon16 :name="icon" class="pl-ag-column-header__type-icon" />
+      <span>{{ params.displayName }}</span>
+      <PlMaskIcon16 v-if="sortIcon" :name="sortIcon" />
+    </div>
+    <div v-if="params.enableMenu" ref="menuActivatorBtn" class="pl-ag-column-header__menu-icon" @click.stop="showMenu">
+      <PlMaskIcon16 name="more" />
+    </div>
+  </div>
+</template>

package/src/components/PlAgColumnHeader/index.ts

@@ -0,0 +1,3 @@
+export { default as PlAgColumnHeader } from './PlAgColumnHeader.vue';
+
+export * from './types';

package/src/components/PlAgColumnHeader/pl-ag-column-header.scss

@@ -0,0 +1,29 @@
+.pl-ag-column-header {
+    cursor: pointer;
+    width: 100%;
+    overflow: hidden;
+
+    .mask-16 {
+        min-width: 16px;
+    }
+
+    span {
+        word-break: break-word;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &__title {
+        overflow: hidden;
+    }
+
+    &__type-icon {
+        background-color: var(--ic-02);
+    }
+
+    &__menu-icon {
+        transform: rotate(90deg);
+        position: relative;
+        line-height: 0;
+    }
+}

package/src/components/PlAgColumnHeader/types.ts

@@ -0,0 +1,3 @@
+export type PlAgHeaderComponentType = 'Text' | 'Number' | 'File' | 'Date' | 'Duration';
+
+export type PlAgHeaderComponentParams = { type?: PlAgHeaderComponentType };

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -28,10 +28,10 @@ import { AgGridTheme, useWatchFetch } from '../../lib';
 import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import { updateXsvGridOptions } from './sources/file-source';
-import type { PlAgDataTableRow } from './sources/table-source';
 import { enrichJoinWithLabelColumns, makeSheets, parseColId, updatePFrameGridOptions } from './sources/table-source';
-import type { PlAgDataTableController, PlDataTableSettings } from './types';
+import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow } from './types';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
+import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
 
 ModuleRegistry.registerModules([
   ClientSideRowModelModule,
@@ -260,11 +260,14 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableRow>>({
   cellSelection: true,
   initialState: gridState.value,
   autoSizeStrategy: { type: 'fitCellContents' },
-  onRowDataUpdated: (event) => {
-    event.api.autoSizeAllColumns();
+  onRowDoubleClicked: (event) => {
+    if (event.data) emit('onRowDoubleClicked', event.data.key);
   },
-  onRowDoubleClicked: (value) => {
-    if (value.data) emit('onRowDoubleClicked', value.data.key);
+  onSortChanged: (event) => {
+    event.api.refreshCells();
+  },
+  onFilterChanged: (event) => {
+    event.api.refreshCells();
   },
   defaultColDef: {
     suppressHeaderMenuButton: true,
@@ -313,6 +316,7 @@ const gridOptions = shallowRef<GridOptions<PlAgDataTableRow>>({
 });
 const onGridReady = (event: GridReadyEvent) => {
   const api = event.api;
+  autoSizeRowNumberColumn(api);
   gridApi.value = new Proxy(api, {
     get(target, prop, receiver) {
       switch (prop) {
@@ -346,7 +350,7 @@ const makePartialState = (state: GridState) => {
 };
 const onStateUpdated = (event: StateUpdatedEvent) => {
   gridOptions.value.initialState = gridState.value = makePartialState(event.state);
-  event.api.autoSizeAllColumns();
+  event.api.autoSizeColumns(event.api.getAllDisplayedColumns().filter((column) => column.getColId() !== PlAgDataTableRowNumberColId));
 };
 const onGridPreDestroyed = () => {
   gridOptions.value.initialState = gridState.value = makePartialState(gridApi.value!.getState());
@@ -428,6 +432,7 @@ watch(
       const columns = colDefs
         ?.map((def) => def.colId)
         .filter((colId) => colId !== undefined)
+        .filter((colId) => colId !== PlAgDataTableRowNumberColId)
         .map((colId) => parseColId(colId));
       emit('columnsChanged', columns ?? []);
     }

package/src/components/PlAgDataTable/index.ts

@@ -3,3 +3,5 @@ export { default as PlAgOverlayLoading } from './PlAgOverlayLoading.vue';
 export { default as PlAgOverlayNoRows } from './PlAgOverlayNoRows.vue';
 
 export * from './types';
+
+export * from './sources/row-number';

package/src/components/PlAgDataTable/sources/row-number.ts

@@ -0,0 +1,91 @@
+import type { ColDef, GridApi, ValueGetterParams } from '@ag-grid-community/core';
+import { nextTick } from 'vue';
+
+export const PlAgDataTableRowNumberColId = '"##RowNumberColumnId##"';
+
+export function makeRowNumberColDef(): ColDef {
+  return {
+    colId: PlAgDataTableRowNumberColId,
+    headerName: '#',
+    valueGetter: (params: ValueGetterParams) => {
+      if (params.node === null) return null;
+      if (params.node.rowIndex === null) return null;
+      return params.node.rowIndex + 1;
+    },
+    suppressNavigable: true,
+    lockPosition: 'left',
+    suppressMovable: true,
+    mainMenuItems: [],
+    contextMenuItems: [],
+    pinned: 'left',
+    lockPinned: true,
+    minWidth: 45, // header size
+    suppressSizeToFit: true,
+    suppressAutoSize: true,
+    cellStyle: {
+      color: 'var(--txt-03)',
+      'background-color': 'var(--bg-base-light)',
+      overflow: 'visible !important',
+      'text-align': 'center',
+    },
+    sortable: false,
+    resizable: false,
+  };
+}
+
+function createCellFake(): HTMLDivElement {
+  const div = document.createElement('div');
+
+  div.style.visibility = 'hidden';
+  div.style.position = 'absolute';
+  div.style.boxSizing = 'border-box';
+
+  div.style.padding = '15.5px';
+  div.style.border = '1px solid';
+  div.style.width = 'auto';
+
+  document.body.appendChild(div);
+  return div;
+}
+
+function adjustRowNumberColumnWidth(gridApi: GridApi, cellFake: HTMLDivElement) {
+  const lastDisplayedRowNumber = gridApi.getCellValue({
+    rowNode: gridApi.getDisplayedRowAtIndex(gridApi.getLastDisplayedRowIndex())!,
+    colKey: PlAgDataTableRowNumberColId,
+  });
+  if (typeof lastDisplayedRowNumber !== 'number') return;
+
+  const lastDisplayedRowNumberDigitCount = lastDisplayedRowNumber.toString().length;
+  if (cellFake.innerHTML.length === lastDisplayedRowNumberDigitCount) return;
+
+  const WidestDigit = '5';
+  cellFake.innerHTML = WidestDigit.repeat(lastDisplayedRowNumberDigitCount);
+
+  nextTick(() => {
+    gridApi.setColumnWidths([
+      {
+        key: PlAgDataTableRowNumberColId,
+        newWidth: cellFake.offsetWidth,
+      },
+    ]);
+  });
+}
+
+function destroyCellFake(cellFake: HTMLElement) {
+  document.body.removeChild(cellFake);
+}
+
+export function autoSizeRowNumberColumn(gridApi: GridApi) {
+  const cellFake = createCellFake();
+  gridApi.addEventListener('viewportChanged', () => {
+    adjustRowNumberColumnWidth(gridApi, cellFake);
+  });
+  gridApi.addEventListener('columnVisible', (event) => {
+    if (event.columns && event.columns.some((column) => column.isVisible() && column.getColId() === PlAgDataTableRowNumberColId)) {
+      adjustRowNumberColumnWidth(gridApi, cellFake);
+    }
+  });
+  gridApi.addEventListener('gridPreDestroyed', () => {
+    destroyCellFake(cellFake);
+  });
+}

package/src/components/PlAgDataTable/sources/table-source.ts

@@ -1,5 +1,6 @@
 import type { ColDef, IServerSideDatasource, IServerSideGetRowsParams, RowModelType } from '@ag-grid-community/core';
 import type { AxisId, JoinEntry, PColumnIdAndSpec, PFrameHandle, PlDataTableSheet, PObjectId } from '@platforma-sdk/model';
+
 import {
   type PColumnSpec,
   type PFrameDriver,
@@ -17,6 +18,9 @@ import {
 import canonicalize from 'canonicalize';
 import * as lodash from 'lodash';
 import { getHeterogeneousColumns, updatePFrameGridOptionsHeterogeneousAxes } from './table-source-heterogeneous';
+import type { PlAgDataTableRow } from '../types';
+import { makeRowNumberColDef } from './row-number';
+import { PlAgColumnHeader, type PlAgHeaderComponentType, type PlAgHeaderComponentParams } from '../../PlAgColumnHeader';
 
 /**
  * Generate unique colId based on the column spec.
@@ -45,11 +49,13 @@ export const defaultValueFormatter = (value: any) => {
     return value.value.toString();
   }
 };
+
 /**
  * Calculates column definition for a given p-table column
  */
 function getColDef(iCol: number, spec: PTableColumnSpec, hiddenColIds?: string[]): ColDef {
   const colId = makeColId(spec);
+  const valueType = spec.type === 'axis' ? spec.spec.type : spec.spec.valueType;
   return {
     colId,
     field: iCol.toString(),
@@ -57,7 +63,24 @@ function getColDef(iCol: number, spec: PTableColumnSpec, hiddenColIds?: string[]
     lockPosition: spec.type === 'axis',
     hide: hiddenColIds?.includes(colId) ?? spec.spec.annotations?.['pl7.app/table/visibility'] === 'optional',
     valueFormatter: defaultValueFormatter,
-    cellDataType: ((valueType: ValueType) => {
+    headerComponent: PlAgColumnHeader,
+    headerComponentParams: {
+      type: ((): PlAgHeaderComponentType => {
+        switch (valueType) {
+          case 'Int':
+          case 'Long':
+          case 'Float':
+          case 'Double':
+            return 'Number';
+          case 'String':
+          case 'Bytes':
+            return 'Text';
+          default:
+            throw Error(`unsupported data type: ${valueType satisfies never}`);
+        }
+      })(),
+    } satisfies PlAgHeaderComponentParams,
+    cellDataType: (() => {
       switch (valueType) {
         case 'Int':
         case 'Long':
@@ -70,7 +93,7 @@ function getColDef(iCol: number, spec: PTableColumnSpec, hiddenColIds?: string[]
         default:
           throw Error(`unsupported data type: ${valueType satisfies never}`);
       }
-    })(spec.type === 'axis' ? spec.spec.type : spec.spec.valueType),
+    })(),
   };
 }
 
@@ -227,12 +250,6 @@ export async function makeSheets(
   });
 }
 
-export type PlAgDataTableRow = {
-  id: string;
-  key: unknown[];
-  [field: `${number}`]: undefined | null | number | string;
-};
-
 /**
  * Convert columnar data from the driver to rows, used by ag-grid
  * @param specs column specs
@@ -338,7 +355,7 @@ export async function updatePFrameGridOptions(
 
   const ptShape = await pfDriver.getShape(pt);
   const rowCount = ptShape.rows;
-  const columnDefs = fields.map((i) => getColDef(i, specs[i], hiddenColIds));
+  const columnDefs: ColDef<PlAgDataTableRow>[] = [makeRowNumberColDef(), ...fields.map((i) => getColDef(i, specs[i], hiddenColIds))];
 
   if (hColumns.length > 1) {
     console.warn('Currently, only one heterogeneous axis is supported in the table, got', hColumns.length, ' transposition will not be applied.');
@@ -413,7 +430,6 @@ export async function updatePFrameGridOptions(
         }
 
         params.success({ rowData, rowCount });
-        params.api.autoSizeAllColumns();
         params.api.setGridOption('loading', false);
       } catch (error: unknown) {
         params.api.setGridOption('loading', true);

package/src/components/PlAgDataTable/types.ts

@@ -62,3 +62,10 @@ export type PlAgDataTableController = {
   /** Export table data as Csv file */
   exportCsv: () => void;
 };
+
+/** PlAgDataTable row */
+export type PlAgDataTableRow = {
+  id: string;
+  key: unknown[];
+  [field: `${number}`]: undefined | null | number | string;
+};

package/src/components/PlAgGridColumnManager/PlAgGridColumnManager.vue

@@ -4,6 +4,7 @@ import { PlBtnGhost, PlMaskIcon16, PlMaskIcon24, PlSlideModal, PlTooltip, useSor
 import { onMounted, ref, toRefs } from 'vue';
 import './pl-ag-grid-column-manager.scss';
 import { PlAgDataTableToolsPanelId } from '../PlAgDataTableToolsPanel/PlAgDataTableToolsPanelId';
+import { PlAgDataTableRowNumberColId } from '../PlAgDataTable';
 
 const props = defineProps<{
   /**
@@ -24,10 +25,7 @@ const listKey = ref(0);
 useSortable(listRef, {
   handle: '.handle',
   onChange(indices) {
-    gridApi.value.moveColumns(
-      indices.map((i) => columns.value[i]),
-      0,
-    );
+    gridApi.value.moveColumns(getReorderedColumns(indices.map((i) => columns.value[i])), 0);
   },
 });
 
@@ -35,7 +33,20 @@ function toggleColumnVisibility(col: Column) {
   gridApi.value.setColumnsVisible([col], !col.isVisible());
 }
 
+function getReorderedColumns(columns: Column[]) {
+  const numRowsIndex = columns.findIndex((v) => v.getId() === PlAgDataTableRowNumberColId);
+  if (numRowsIndex !== 0) {
+    const [numRowsCol] = columns.splice(numRowsIndex, 1);
+    return columns.splice(0, 0, numRowsCol);
+  }
+  return columns;
+}
+
 onMounted(() => {
+  if (gridApi.value.getAllGridColumns().length > 0) {
+    gridApi.value.moveColumns(getReorderedColumns(gridApi.value.getAllGridColumns()), 0);
+  }
+
   gridApi.value.addEventListener('displayedColumnsChanged', () => {
     columns.value = [...(gridApi.value.getAllGridColumns() ?? [])];
     listKey.value++;
@@ -64,7 +75,7 @@ onMounted(() => {
           <div :class="{ handle: !col.getColDef().lockPosition }" class="pl-ag-columns__drag">
             <PlMaskIcon16 name="drag-dots" />
           </div>
-          <div :class="{ visible: col.isVisible() }" class="pl-ag-columns__title">{{ col.getColDef().headerName }}</div>
+          <div :class="{ visible: col.isVisible() }" class="pl-ag-columns__title text-s-btn">{{ col.getColDef().headerName }}</div>
           <div class="pl-ag-columns__visibility" @click="toggleColumnVisibility(col)">
             <PlTooltip :close-delay="500" position="top">
               <PlMaskIcon24 :name="col.isVisible() ? 'view-show' : 'view-hide'" />

package/src/components/PlAgGridColumnManager/pl-ag-grid-column-manager.scss

@@ -6,10 +6,15 @@
     .sortable__item {
         border-radius: 6px;
         box-shadow: 0px 0px 0px 4px rgba(73, 204, 73, 0.24);
+        border-width: 2px;
     }
 
-    &__drag {
+    &__drag.handle {
         cursor: grab;
+    }
+
+    &__drag {
+
         line-height: 0;
 
         .mask-16 {
@@ -17,8 +22,13 @@
         }
     }
 
+    &__item:hover &__visibility {
+        display: block;
+    }
+
     &__visibility {
         cursor: pointer;
+        display: none;
 
         .mask-24 {
             background-color: var(--ic-02);
@@ -29,6 +39,7 @@
         }
     }
 
+
     &__item {
         padding: 10px 12px;
         display: flex;

package/src/lib.ts

@@ -7,6 +7,8 @@ import ValueOrErrorsComponent from './components/ValueOrErrorsComponent.vue';
 
 export { BlockLayout, PlAgDataTable, PlAgOverlayLoading, PlAgOverlayNoRows, ValueOrErrorsComponent };
 
+export * from './components/PlAgColumnHeader';
+
 export * from './components/PlAgCellFile';
 
 export * from './components/PlAgDataTable/types';