@platforma-sdk/ui-vue 1.22.51 → 1.22.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.22.51",
+  "version": "1.22.55",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -23,8 +23,8 @@
     "canonicalize": "^2.0.0",
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
-    "@milaboratories/uikit": "^2.2.58",
-    "@platforma-sdk/model": "^1.22.18"
+    "@platforma-sdk/model": "^1.22.18",
+    "@milaboratories/uikit": "^2.2.58"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.2.0",

package/src/AgGridVue/createAgGridColDef.ts

@@ -1,8 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ColDef, ICellRendererParams } from 'ag-grid-enterprise';
 import { PlAgCellProgress } from '../components/PlAgCellProgress';
-import type { PlProgressCellProps } from '@milaboratories/uikit';
+import type { MaskIconName16, PlProgressCellProps } from '@milaboratories/uikit';
 import { tapIf } from '@milaboratories/helpers';
+import type { PlAgHeaderComponentParams } from '../lib';
+import { PlAgColumnHeader } from '../components/PlAgColumnHeader';
+import { PlAgTextAndButtonCell } from '../components/PlAgTextAndButtonCell';
 
 /**
  * Represents the available progress statuses for a cell.
@@ -62,7 +65,10 @@ export type ColDefProgress = {
  * @returns A {@link ColDefProgress} object to configure the progress overlay,
  *          or `undefined` if no progress overlay should be rendered.
  */
-export type ColDefProgressCallback<TData, TValue = any> = (cellData: ICellRendererParams<TData, TValue>) => ColDefProgress;
+export type ColDefProgressCallback<TData = any, TValue = any> = (
+  value: TValue,
+  cellData: ICellRendererParams<TData, TValue>
+) => ColDefProgress;
 
 /**
  * Extended AG Grid column definition that supports additional properties for
@@ -74,9 +80,35 @@ export type ColDefProgressCallback<TData, TValue = any> = (cellData: ICellRender
  * @property progress - An optional callback to provide progress overlay configuration.
  * @property noGutters - If `true`, removes padding from the cell.
  */
-export interface ColDefExtended<TData, TValue = any> extends ColDef<TData> {
+export interface ColDefExtended<TData, TValue = any> extends ColDef<TData, TValue> {
   progress?: ColDefProgressCallback<TData, TValue>;
   noGutters?: boolean;
+  headerComponentParams?: PlAgHeaderComponentParams;
+  textWithButton?: true | {
+    /**
+     * Button icon MaskIconName16
+     */
+    icon?: MaskIconName16;
+    /**
+     * Button label
+     */
+    btnLabel?: string;
+    /**
+     * If invokeRowsOnDoubleClick = true, clicking a button inside the row
+     * triggers the doubleClick event for the entire row. In this case,
+     * the handler passed to the component is not called, even if it is defined.
+     *
+     * If invokeRowsOnDoubleClick = false, the doubleClick event for the row
+     * is not triggered, but the provided handler will be called, receiving
+     * the ICellRendererParams as an argument.
+     */
+    invokeRowsOnDoubleClick?: boolean;
+    /**
+     * plHandler parameter is a click handler that is invoked when
+     * the invokeRowsOnDoubleClick property is set to false.
+     */
+    onClick?: (params: ICellRendererParams) => void;
+  };
 }
 
 /**
@@ -127,7 +159,7 @@ function handleProgress<TData>(def: ColDefExtended<TData>) {
     def.cellStyle = Object.assign({}, def.cellStyle ?? {}, noGuttersStyle());
 
     def.cellRendererSelector = (cellData) => {
-      const pt = progress(cellData);
+      const pt = progress(cellData.value, cellData);
 
       if (!pt) {
         return cellRendererSelector?.(cellData);
@@ -164,6 +196,23 @@ export function createAgGridColDef<TData, TValue = any>(def: ColDefExtended<TDat
     def.cellStyle = Object.assign({}, def.cellStyle ?? {}, noGuttersStyle());
   }
 
+  if (def.headerComponentParams) {
+    def.headerComponent = PlAgColumnHeader;
+  }
+
+  if (def.textWithButton) {
+    def.cellRenderer = PlAgTextAndButtonCell;
+    if (typeof def.textWithButton !== 'boolean') {
+      def.cellRendererParams = def.textWithButton;
+    } else {
+      def.cellRendererParams = {
+        invokeRowsOnDoubleClick: true,
+      };
+    }
+  }
+
+  delete def.textWithButton;
+
   delete def.progress;
 
   delete def.noGutters;

package/src/AgGridVue/index.ts

@@ -1,2 +1,2 @@
-export * from './useAgGridOptionsSimple';
+export * from './useAgGridOptions';
 export * from './createAgGridColDef';

package/src/AgGridVue/useAgGridOptions.ts

@@ -0,0 +1,167 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ColGroupDef, GridApi, GridOptions, GridReadyEvent } from 'ag-grid-enterprise';
+import { computed, shallowRef, watch } from 'vue';
+import { AgGridTheme } from '../aggrid';
+import PlAgOverlayLoading from '../components/PlAgDataTable/PlAgOverlayLoading.vue';
+import PlAgOverlayNoRows from '../components/PlAgDataTable/PlAgOverlayNoRows.vue';
+import type { ColDefExtended } from './createAgGridColDef';
+import type { PlAgOverlayLoadingParams } from '../lib';
+import { autoSizeRowNumberColumn, createAgGridColDef, makeRowNumberColDef } from '../lib';
+import { whenever } from '@vueuse/core';
+import PlAgCellFile from '../components/PlAgCellFile/PlAgCellFile.vue';
+
+interface GridOptionsExtended<TData = any> extends Omit<GridOptions<TData>, 'columnDefs'> {
+  /**
+   * Array of Column / Column Group definitions.
+   */
+  columnDefs?: (ColDefExtended<TData> | ColGroupDef<TData>)[] | null;
+  /**
+   * Show row numbers column
+   */
+  rowNumbersColumn?: boolean;
+  /**
+   * Not ready overlay (No datasource). Takes priority over "loading"
+   */
+  notReady?: boolean;
+  /**
+   * "No datasource" by default
+   */
+  notReadyText?: string;
+  /**
+   * Use "transparent" to make table headers visible below the loading layer (experimental)
+   */
+  loadingOverlayType?: 'transparent';
+  /**
+   * Override standard 'Empty' text for the "no rows" overlay
+   */
+  noRowsText?: string;
+}
+
+// @TODO (super simple builder for now)
+class Builder<TData> {
+  #options: GridOptionsExtended<TData> = {};
+
+  public options(options: GridOptionsExtended<TData>) {
+    this.#options = Object.assign({}, this.#options, options);
+    return this;
+  }
+
+  get columnDefs() {
+    return this.#options.columnDefs ?? [];
+  }
+
+  public column<TValue = any>(def: ColDefExtended<TData, TValue>) {
+    this.#options.columnDefs = [...this.columnDefs, def];
+    return this;
+  }
+
+  public build() {
+    return this.#options;
+  }
+}
+
+// Simple helper to use like column<string> in grid options literal
+type ColumnFunc<TData> = <TValue>(def: ColDefExtended<TData, TValue>) => ColDefExtended<TData, TValue>;
+
+/**
+ * Returns a set of Ag Grid options along with a reference to the Ag Grid API.
+ * (This is a fast prototype)
+ *
+ * @example
+ * ```ts
+ * const { gridOptions, gridApi } = useAgGridOptions(() => ({
+ *   // custom grid options here
+ * }));
+ *
+ * // Usage in a template (v-bind is required!)
+ * <template>
+ *   <AgGridVue :style="{ height: '100%' }" v-bind="gridOptions" />
+ * </template>
+ * ```
+ */
+export function useAgGridOptions<TData>(
+  factory: (context: { builder: Builder<TData>; column: ColumnFunc<TData> }) => Builder<TData> | GridOptionsExtended<TData>,
+) {
+  const gridApi = shallowRef<GridApi>();
+
+  const gridOptions = computed<GridOptionsExtended>(() => {
+    const def: GridOptionsExtended<TData> = {
+      theme: AgGridTheme,
+      loadingOverlayComponent: PlAgOverlayLoading,
+      noRowsOverlayComponent: PlAgOverlayNoRows,
+      onGridReady: (e: GridReadyEvent) => {
+        gridApi.value = e.api;
+        autoSizeRowNumberColumn(e.api); // @TODO
+      },
+    };
+
+    const column = <TValue>(def: ColDefExtended<TData, TValue>) => {
+      return def;
+    };
+
+    const result = factory({ builder: new Builder(), column });
+
+    const options = Object.assign({}, def, result instanceof Builder ? result.build() : result);
+
+    if (options.rowNumbersColumn) {
+      options.columnDefs = [makeRowNumberColDef(), ...(options.columnDefs ?? [])];
+    }
+
+    if (options.noRowsText) {
+      options.noRowsOverlayComponentParams = {
+        text: options.noRowsText,
+      };
+    }
+
+    options.loading = options.notReady || options.loading;
+
+    // @TODO
+    if (options.loading) {
+      options.loadingOverlayComponentParams = {
+        notReady: options.notReady,
+        notReadyText: options.notReadyText,
+        overlayType: options.loadingOverlayType,
+      } satisfies PlAgOverlayLoadingParams;
+    }
+
+    options.columnDefs = options.columnDefs?.map((it) => createAgGridColDef(it));
+
+    // Register all special components
+    options.components = Object.assign({}, options.components ?? {}, {
+      PlAgCellFile,
+    });
+
+    return options;
+  });
+
+  whenever(() => gridOptions.value.rowNumbersColumn, () => {
+    if (gridApi.value) {
+      autoSizeRowNumberColumn(gridApi.value);
+    }
+  });
+
+  watch([
+    () => gridOptions.value.notReady,
+    () => gridOptions.value.loading,
+  ], ([notReady, loading]) => {
+    const loadingOverlayComponentParams = {
+      notReady,
+      // we probably don't need to update the parameters below
+      notReadyText: gridOptions.value.notReadyText,
+      overlayType: gridOptions.value.loadingOverlayType,
+    } satisfies PlAgOverlayLoadingParams;
+
+    // Hack to apply loadingOverlayComponentParams
+    gridApi.value?.updateGridOptions({
+      loading: !loading,
+      loadingOverlayComponentParams,
+    });
+
+    gridApi.value?.updateGridOptions({
+      loading,
+      loadingOverlayComponentParams,
+    });
+  }, { deep: true, immediate: true });
+
+  return { gridOptions, gridApi };
+};

package/src/components/PlAgDataTable/PlAgDataTable.vue

@@ -36,7 +36,7 @@ import PlOverlayLoading from './PlAgOverlayLoading.vue';
 import PlOverlayNoRows from './PlAgOverlayNoRows.vue';
 import { updateXsvGridOptions } from './sources/file-source';
 import { makeRowId, parseColId, updatePFrameGridOptions } from './sources/table-source';
-import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow, PTableRowKey } from './types';
+import type { PlAgDataTableController, PlDataTableSettings, PlAgDataTableRow, PTableRowKey, PlDataTableSettingsPTable } from './types';
 import { PlAgGridColumnManager } from '../PlAgGridColumnManager';
 import { autoSizeRowNumberColumn, PlAgDataTableRowNumberColId } from './sources/row-number';
 import { focusRow, makeOnceTracker, trackFirstDataRendered } from './sources/focus-row';
@@ -180,6 +180,14 @@ const sheetsState = computed({
   },
 });
 
+const hasSheets = (
+  settings?: Readonly<PlDataTableSettings>,
+): settings is PlDataTableSettingsPTable => {
+  return settings?.sourceType === 'ptable'
+    && !!settings.sheets
+    && settings.sheets.length > 0;
+};
+
 watch(
   () => settings.value,
   (settings, oldSettings) => {
@@ -460,15 +468,23 @@ watch(
     <PlAgGridColumnManager v-if="gridApi && showColumnsPanel" :api="gridApi" :width="columnsPanelWidth" />
     <PlAgCsvExporter v-if="gridApi && showExportButton" :api="gridApi" />
     <div
-      v-if="settings?.sourceType === 'ptable' && !!settings.sheets && settings.sheets.length > 0"
+      v-if="hasSheets(settings) || $slots['before-sheets'] || $slots['after-sheets']"
       class="ap-ag-data-table-sheets"
     >
-      <PlDropdownLine
-        v-for="(sheet, i) in settings.sheets" :key="i" :model-value="sheetsState[makeSheetId(sheet.axis)]"
-        :options="sheet.options"
-        :prefix="(sheet.axis.annotations?.['pl7.app/label']?.trim() ?? `Unlabeled axis ${i}`) + ':'"
-        @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
-      />
+      <slot name="before-sheets" />
+      <template
+        v-if="hasSheets(settings)"
+      >
+        <PlDropdownLine
+          v-for="(sheet, i) in settings.sheets"
+          :key="i"
+          :model-value="sheetsState[makeSheetId(sheet.axis)]"
+          :options="sheet.options"
+          :prefix="(sheet.axis.annotations?.['pl7.app/label']?.trim() ?? `Unlabeled axis ${i}`) + ':'"
+          @update:model-value="(newValue) => onSheetChanged(makeSheetId(sheet.axis), newValue)"
+        />
+      </template>
+      <slot name="after-sheets" />
     </div>
     <AgGridVue
       :key="reloadKey" :theme="AgGridTheme" class="ap-ag-data-table-grid" :grid-options="gridOptions"

package/src/components/PlAgDataTable/PlAgOverlayLoading.vue

@@ -1,34 +1,15 @@
 <script setup lang="ts">
 import style from './pl-ag-overlay-loading.module.scss';
 import { PlSplash } from '@milaboratories/uikit';
+import type { PlAgOverlayLoadingParams } from './types';
+
+// @TODO move this component from this folder
 
 defineProps<{
   /**
    * Required object that contains props from loadingOverlayComponentParams.
    */
-  params: {
-    /**
-     * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.
-     */
-    notReady: boolean;
-    /**
-     * Prop to override default "Loading" text
-     */
-    loadingText?: string;
-    /**
-     * Prop to override default "No datasource" text (So why props name is notReady? Good question)
-     */
-    notReadyText?: string;
-    /**
-     * @deprecated
-     * Use notReadyText
-     */
-    message?: string;
-    /**
-     * Use "transparent" to make table headers visible below the loading layer
-     */
-    overlayType?: 'transparent';
-  };
+  params: PlAgOverlayLoadingParams;
 }>();
 </script>
 
@@ -41,7 +22,7 @@ defineProps<{
   >
     <div v-if="params.notReady" :class="style.notReadyWrapper">
       <div :class="style.iconCatInBag" />
-      <h3 :class="style.text">{{ params.notReadyText || params.message || 'No datasource' }}</h3>
+      <h3 :class="style.text">{{ params.notReadyText || 'No datasource' }}</h3>
     </div>
   </PlSplash>
 </template>

package/src/components/PlAgDataTable/PlAgOverlayNoRows.vue

@@ -1,7 +1,15 @@
+<script lang="ts" setup>
+defineProps<{
+  params: {
+    text?: string;
+  };
+}>();
+</script>
+
 <template>
   <div class="grid-overlay-container">
     <div class="grid-icon-sad-cat" />
-    <span class="text-subtitle-m">Empty</span>
+    <span class="text-subtitle-m">{{ params.text || 'Empty' }}</span>
   </div>
 </template>
 

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

@@ -6,7 +6,8 @@ export const PlAgDataTableRowNumberColId = '"##RowNumberColumnId##"';
 
 const HeaderSize = 45;
 
-export function makeRowNumberColDef(): ColDef {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function makeRowNumberColDef<TData = any>(): ColDef<TData> {
   return {
     colId: PlAgDataTableRowNumberColId,
     headerName: '#',
@@ -62,6 +63,7 @@ function adjustRowNumberColumnWidth(gridApi: GridApi, cellFake: HTMLDivElement,
     rowNode: gridApi.getDisplayedRowAtIndex(gridApi.getLastDisplayedRowIndex())!,
     colKey: PlAgDataTableRowNumberColId,
   });
+
   if (typeof lastDisplayedRowNumber !== 'number') return;
 
   const lastDisplayedRowNumberDigitCount = lastDisplayedRowNumber.toString().length;

package/src/components/PlAgDataTable/types.ts

@@ -9,21 +9,25 @@ import type {
   RemoteBlobHandleAndSize,
 } from '@platforma-sdk/model';
 
+export type PlDataTableSettingsPTable = {
+  /** The type of the source to feed the data into the table */
+  sourceType: 'ptable';
+  /** PTable handle output */
+  pTable?: PTableHandle;
+  /** Sheets that we want to show in our table */
+  sheets?: PlDataTableSheet[];
+};
+
+export type PlDataTableSettingsXsv = {
+  /** The type of the source to feed the data into the table */
+  sourceType: 'xsv';
+  xsvFile?: LocalBlobHandleAndSize | RemoteBlobHandleAndSize;
+};
+
 /** Data table settings */
 export type PlDataTableSettings =
-  | {
-    /** The type of the source to feed the data into the table */
-    sourceType: 'ptable';
-    /** PTable handle output */
-    pTable?: PTableHandle;
-    /** Sheets that we want to show in our table */
-    sheets?: PlDataTableSheet[];
-  }
-  | {
-    /** The type of the source to feed the data into the table */
-    sourceType: 'xsv';
-    xsvFile?: LocalBlobHandleAndSize | RemoteBlobHandleAndSize;
-  };
+  | PlDataTableSettingsPTable
+  | PlDataTableSettingsXsv;
 
 /** PlTableFilters restriction entry */
 export type PlTableFiltersRestriction = {
@@ -62,3 +66,22 @@ export type PlAgDataTableRow = {
   /** Row values by column; sheet axes and labeled axes are excluded */
   [field: `${number}` | `hC${number}`]: PTableValue;
 };
+
+export type PlAgOverlayLoadingParams = {
+  /**
+   * Required flag, that shows catInBag icon with message if `true`, shows PlSplash component if `false`.
+   */
+  notReady?: boolean;
+  /**
+   * Prop to override default "Loading" text
+   */
+  loadingText?: string;
+  /**
+   * Prop to override default "No datasource" text (So why props name is notReady? Good question)
+   */
+  notReadyText?: string;
+  /**
+   * Use "transparent" to make table headers visible below the loading layer
+   */
+  overlayType?: 'transparent';
+};

package/dist/src/AgGridVue/useAgGridOptionsSimple.d.ts

@@ -1,22 +0,0 @@
-import type { GridApi, GridOptions } from 'ag-grid-enterprise';
-/**
- * Returns a set of Ag Grid options along with a reference to the Ag Grid API.
- * (This is a fast prototype)
- *
- * @example
- * ```ts
- * const { gridOptions, gridApi } = useAgDataTableOptionsSimple(() => ({
- *   // custom grid options here
- * }));
- *
- * // Usage in a template (v-bind is required!)
- * <template>
- *   <AgGridVue :style="{ height: '100%' }" v-bind="gridOptions" />
- * </template>
- * ```
- */
-export declare function useAgGridOptionsSimple<TData>(factory: () => GridOptions<TData>): {
-    gridOptions: import("vue").ComputedRef<GridOptions<any>>;
-    gridApi: import("vue").ShallowRef<GridApi<any> | undefined, GridApi<any> | undefined>;
-};
-//# sourceMappingURL=useAgGridOptionsSimple.d.ts.map

package/dist/src/AgGridVue/useAgGridOptionsSimple.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useAgGridOptionsSimple.d.ts","sourceRoot":"","sources":["../../../src/AgGridVue/useAgGridOptionsSimple.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,WAAW,EAAkB,MAAM,oBAAoB,CAAC;AAO/E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAC1C,OAAO,EAAE,MAAM,WAAW,CAAC,KAAK,CAAC;;;EA+BlC"}

package/src/AgGridVue/useAgGridOptionsSimple.ts

@@ -1,56 +0,0 @@
-import type { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-enterprise';
-import { computed, shallowRef, watch } from 'vue';
-import { AgGridTheme } from '../aggrid';
-import PlAgOverlayLoading from '../components/PlAgDataTable/PlAgOverlayLoading.vue';
-import PlAgOverlayNoRows from '../components/PlAgDataTable/PlAgOverlayNoRows.vue';
-import { autoSizeRowNumberColumn } from '../lib';
-
-/**
- * Returns a set of Ag Grid options along with a reference to the Ag Grid API.
- * (This is a fast prototype)
- *
- * @example
- * ```ts
- * const { gridOptions, gridApi } = useAgDataTableOptionsSimple(() => ({
- *   // custom grid options here
- * }));
- *
- * // Usage in a template (v-bind is required!)
- * <template>
- *   <AgGridVue :style="{ height: '100%' }" v-bind="gridOptions" />
- * </template>
- * ```
- */
-export function useAgGridOptionsSimple<TData>(
-  factory: () => GridOptions<TData>,
-) {
-  const gridApi = shallowRef<GridApi>();
-
-  const gridOptions = computed<GridOptions>(() => {
-    const def: GridOptions<TData> = {
-      theme: AgGridTheme,
-      loadingOverlayComponent: PlAgOverlayLoading,
-      noRowsOverlayComponent: PlAgOverlayNoRows,
-      onGridReady: (e: GridReadyEvent) => {
-        gridApi.value = e.api;
-        autoSizeRowNumberColumn(e.api);
-      },
-    };
-
-    return Object.assign({}, def, factory());
-  });
-
-  watch(() => gridOptions.value.loadingOverlayComponentParams, (newParams) => {
-    // Hack to apply loadingOverlayComponentParams
-    gridApi.value?.updateGridOptions({
-      loading: !gridOptions.value.loading,
-    });
-
-    gridApi.value?.updateGridOptions({
-      loading: gridOptions.value.loading,
-      loadingOverlayComponentParams: newParams,
-    });
-  }, { deep: true });
-
-  return { gridOptions, gridApi };
-};