@platforma-sdk/ui-vue 1.11.0 → 1.11.2

package/package.json

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

package/src/aggrid.ts

@@ -13,7 +13,8 @@ import { MenuModule } from '@ag-grid-enterprise/menu';
 import { ExcelExportModule } from '@ag-grid-enterprise/excel-export';
 import { SideBarModule } from '@ag-grid-enterprise/side-bar';
 import { ColumnsToolPanelModule } from '@ag-grid-enterprise/column-tool-panel';
-import { type Theme, themeQuartz } from '@ag-grid-community/theming';
+import { type Theme, themeQuartz, createPart } from '@ag-grid-community/theming';
+import OverrideCss from './components/PlAgDataTable/ag-override.css?raw';
 
 export function activateAgGrid() {
   ModuleRegistry.registerModules([
@@ -38,33 +39,37 @@ export function activateAgGrid() {
   }
 }
 
-export const AgGridTheme: Theme = themeQuartz.withParams({
-  headerColumnResizeHandleColor: 'transparent',
-  accentColor: '#110529',
-  borderColor: '#E1E3EB',
-  cellHorizontalPaddingScale: 1,
-  checkboxBorderRadius: '3px',
-  checkboxUncheckedBorderColor: '#CFD1DB',
-  columnBorder: true,
-  columnHoverColor: '#9BABCC16',
-  fontFamily: 'inherit',
-  foregroundColor: '#110529',
-  headerBackgroundColor: '#F7F8FA',
-  headerColumnBorder: true,
-  headerFontWeight: 600,
-  headerRowBorder: true,
-  headerVerticalPaddingScale: 0.8,
-  iconButtonHoverColor: '#9BABCC32',
-  iconSize: '16px',
-  menuBackgroundColor: '#FFFFFF',
-  menuBorder: true,
-  menuTextColor: '#110529',
-  rowHoverColor: '#9BABCC16',
-  rowVerticalPaddingScale: 1,
-  selectedRowBackgroundColor: '#63E02424',
-  sidePanelBorder: false,
-  spacing: '8px',
-  tooltipBackgroundColor: '#110529',
-  tooltipTextColor: '#FFFFFF',
-  wrapperBorderRadius: '6px',
-});
+const agGridOverrideStyles = createPart('headerBottomBorder').withCSS(OverrideCss);
+
+export const AgGridTheme: Theme = themeQuartz
+  .withParams({
+    headerColumnResizeHandleColor: 'transparent',
+    accentColor: '#110529',
+    borderColor: '#E1E3EB',
+    cellHorizontalPaddingScale: 1,
+    checkboxBorderRadius: '3px',
+    checkboxUncheckedBorderColor: '#CFD1DB',
+    columnBorder: true,
+    columnHoverColor: '#9BABCC16',
+    fontFamily: 'inherit',
+    foregroundColor: '#110529',
+    headerBackgroundColor: '#F7F8FA',
+    headerColumnBorder: true,
+    headerFontWeight: 600,
+    headerRowBorder: true,
+    headerVerticalPaddingScale: 0.8,
+    iconButtonHoverColor: '#9BABCC32',
+    iconSize: '16px',
+    menuBackgroundColor: '#FFFFFF',
+    menuBorder: true,
+    menuTextColor: '#110529',
+    rowHoverColor: '#9BABCC16',
+    rowVerticalPaddingScale: 1,
+    selectedRowBackgroundColor: '#63E02424',
+    sidePanelBorder: false,
+    spacing: '8px',
+    tooltipBackgroundColor: '#110529',
+    tooltipTextColor: '#FFFFFF',
+    wrapperBorderRadius: '6px',
+  })
+  .withPart(agGridOverrideStyles);

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -384,23 +384,27 @@ const onSheetChanged = (sheetId: string, newValue: string | number) => {
   });
 };
 
+const platforma = window.platforma;
+if (!platforma) throw Error('platforma not set');
+const pfDriver = platforma.pFrameDriver;
+if (!pfDriver) throw Error('platforma.pFrameDriver not set');
+const blobDriver = platforma.blobDriver;
+if (!blobDriver) throw Error('platforma.blobDriver not set');
+
+let oldSettings: PlDataTableSettings | undefined = undefined;
 watch(
   () => [gridApi.value, settings.value, sheets.value] as const,
-  async (state, oldState) => {
-    if (lodash.isEqual(state, oldState)) return;
-
+  async (state) => {
     const [gridApi, settings, sheets] = state;
     if (!gridApi) return;
 
-    const platforma = window.platforma;
-    if (!platforma) throw Error('platforma not set');
+    if (lodash.isEqual(settings, oldSettings)) return;
+    oldSettings = settings;
 
     const sourceType = settings.sourceType;
     switch (sourceType) {
       case 'pframe':
       case 'ptable': {
-        const pfDriver = platforma.pFrameDriver;
-        if (!pfDriver) throw Error('platforma.pFrameDriver not set');
         const pTable = settings.pTable;
         if (!pTable || !sheets) {
           return gridApi.updateGridOptions({
@@ -409,8 +413,10 @@ watch(
             columnDefs: [],
           });
         }
+
         const hiddenColIds = gridState.value?.columnVisibility?.hiddenColIds;
         const options = await updatePFrameGridOptions(pfDriver, pTable, sheets, hiddenColIds);
+
         return gridApi.updateGridOptions({
           loading: options.rowModelType !== 'clientSide',
           loadingOverlayComponentParams: { notReady: false },
@@ -419,9 +425,6 @@ watch(
       }
 
       case 'xsv': {
-        const blobDriver = platforma.blobDriver;
-        if (!blobDriver) throw Error('platforma.blobDriver not set');
-
         const xsvFile = settings.xsvFile;
         if (!xsvFile?.ok || !xsvFile.value) {
           return gridApi.updateGridOptions({

package/src/components/PlAgDataTable/ag-override.css

@@ -0,0 +1,3 @@
+.ag-header {
+    border-bottom: 1px solid var(--border-color-default);
+}