@platforma-sdk/ui-vue 1.10.18 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platforma-sdk/ui-vue",
-  "version": "1.10.18",
+  "version": "1.11.1",
   "type": "module",
   "main": "dist/lib.umd.cjs",
   "module": "dist/lib.js",
@@ -37,8 +37,8 @@
     "@ag-grid-community/theming": "^32.3.3",
     "@ag-grid-enterprise/side-bar": "^32.3.3",
     "@ag-grid-enterprise/column-tool-panel": "^32.3.3",
-    "@milaboratories/uikit": "^2.2.9",
-    "@platforma-sdk/model": "^1.10.12"
+    "@platforma-sdk/model": "^1.10.12",
+    "@milaboratories/uikit": "^2.2.9"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
@@ -61,7 +61,7 @@
     "vue-tsc": "^2.1.6",
     "zod": "^3.23.8",
     "yarpm": "^1.2.0",
-    "@milaboratories/helpers": "^1.6.6"
+    "@milaboratories/helpers": "^1.6.7"
   },
   "scripts": {
     "test": "vitest run --passWithNoTests",

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/ag-override.css

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

package/src/defineApp.ts

@@ -3,7 +3,7 @@ import { type BlockOutputsBase, type Platforma } from '@platforma-sdk/model';
 import type { Component, Reactive } from 'vue';
 import { inject, markRaw, reactive } from 'vue';
 import { createApp, type BaseApp } from './internal/createApp';
-import type { BaseSettings, Routes } from './types';
+import type { AppSettings, ExtendSettings, Routes } from './types';
 import { activateAgGrid } from './aggrid';
 
 const pluginKey = Symbol('sdk-vue');
@@ -18,12 +18,13 @@ export function defineApp<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends BaseSettings<Href> = BaseSettings<Href>,
+  Extend extends ExtendSettings<Href> = ExtendSettings<Href>,
 >(
   platforma: Platforma<Args, Outputs, UiState, Href>,
-  extendApp: (app: BaseApp<Args, Outputs, UiState, Href>) => Local,
-): SdkPlugin<Args, Outputs, UiState, Href, Local> {
-  let app: undefined | App<Args, Outputs, UiState, Href, Local> = undefined;
+  extendApp: (app: BaseApp<Args, Outputs, UiState, Href>) => Extend,
+  settings: AppSettings = {},
+): SdkPlugin<Args, Outputs, UiState, Href, Extend> {
+  let app: undefined | App<Args, Outputs, UiState, Href, Extend> = undefined;
 
   activateAgGrid();
 
@@ -32,7 +33,7 @@ export function defineApp<
       .loadBlockState()
       .then((state) => {
         plugin.loaded = true;
-        const baseApp = createApp<Args, Outputs, UiState, Href>(state, platforma);
+        const baseApp = createApp<Args, Outputs, UiState, Href>(state, platforma, settings);
 
         const localState = extendApp(baseApp);
 
@@ -48,7 +49,7 @@ export function defineApp<
           getRoute(href: Href): Component | undefined {
             return routes[href];
           },
-        } as unknown as App<Args, Outputs, UiState, Href, Local>);
+        } as unknown as App<Args, Outputs, UiState, Href, Extend>);
       })
       .catch((err) => {
         console.error('load initial state error', err);
@@ -61,7 +62,7 @@ export function defineApp<
     error: undefined as unknown,
     // Href to get typed query parameters for a specific route
     useApp<PageHref extends Href = Href>() {
-      return notEmpty(app, 'App is not loaded') as App<Args, Outputs, UiState, PageHref, Local>;
+      return notEmpty(app, 'App is not loaded') as App<Args, Outputs, UiState, PageHref, Extend>;
     },
     // @todo type portability issue with Vue
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -79,7 +80,7 @@ export type App<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends BaseSettings<Href> = BaseSettings<Href>,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
 > = BaseApp<Args, Outputs, UiState, Href> & Reactive<Omit<Local, 'routes'>> & { getRoute(href: Href): Component | undefined };
 
 export type SdkPlugin<
@@ -87,7 +88,7 @@ export type SdkPlugin<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
-  Local extends BaseSettings<Href> = BaseSettings<Href>,
+  Local extends ExtendSettings<Href> = ExtendSettings<Href>,
 > = {
   loaded: boolean;
   error: unknown;

package/src/internal/createApp.ts

@@ -2,7 +2,7 @@ import { deepClone, throttle } from '@milaboratories/helpers';
 import type { Mutable } from '@milaboratories/helpers';
 import type { NavigationState, BlockOutputsBase, BlockState, Platforma } from '@platforma-sdk/model';
 import { reactive, nextTick, computed, watch } from 'vue';
-import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors } from '../types';
+import type { UnwrapValueOrErrors, StateModelOptions, UnwrapOutputs, OptionalResult, OutputValues, OutputErrors, AppSettings } from '../types';
 import { createModel } from '../createModel';
 import { createAppModel } from './createAppModel';
 import { parseQuery } from '../urls';
@@ -13,12 +13,18 @@ export function createApp<
   Outputs extends BlockOutputsBase = BlockOutputsBase,
   UiState = unknown,
   Href extends `/${string}` = `/${string}`,
->(state: BlockState<Args, Outputs, UiState, Href>, platforma: Platforma<Args, Outputs, UiState, Href>) {
+>(state: BlockState<Args, Outputs, UiState, Href>, platforma: Platforma<Args, Outputs, UiState, Href>, settings: AppSettings) {
   type AppModel = {
     args: Args;
     ui: UiState;
   };
 
+  const log = (msg: string, ...rest: unknown[]) => {
+    if (settings.debug) {
+      console.log(`%c>>> %c${msg}`, 'color: orange; font-weight: bold', 'color: orange', ...rest);
+    }
+  };
+
   const throttleSpan = 100; // @todo settings and more flexible
 
   const setBlockArgs = throttle(platforma.setBlockArgs, throttleSpan);
@@ -43,18 +49,22 @@ export function createApp<
     updates.forEach((patch) => {
       if (patch.key === 'args') {
         snapshot.args = Object.freeze(patch.value);
+        log('args patch', snapshot.args);
       }
 
       if (patch.key === 'ui') {
         snapshot.ui = Object.freeze(patch.value);
+        log('ui patch', snapshot.ui);
       }
 
       if (patch.key === 'outputs') {
         snapshot.outputs = Object.freeze(patch.value);
+        log('outputs patch', snapshot.outputs);
       }
 
       if (patch.key === 'navigationState') {
         snapshot.navigationState = Object.freeze(patch.value);
+        log('navigationState patch', snapshot.navigationState);
       }
     });
 
@@ -101,23 +111,6 @@ export function createApp<
         },
       });
     },
-    // @TODO currently disabled but will be used
-    // createAppModel<T extends AppModel = AppModel>(options: StateModelOptions<AppModel, T> = {}) {
-    //   return createAppModel<T, AppModel>({
-    //     get() {
-    //       if (options.transform) {
-    //         return options.transform(snapshot);
-    //       }
-
-    //       return { args: snapshot.args, ui: snapshot.ui } as T;
-    //     },
-    //     validate: options.validate,
-    //     autoSave: true,
-    //     onSave(newData) {
-    //       setBlockArgsAndUiState(newData.args, newData.ui);
-    //     },
-    //   });
-    // },
     /**
      * Note: Don't forget to list the output names, like: useOutputs('output1', 'output2', ...etc)
      * @param keys - List of output names
@@ -277,6 +270,7 @@ export function createApp<
       outputs,
       outputErrors,
     },
+    settings,
   );
 
   return reactive(Object.assign(appModel, methods, getters));

package/src/internal/createAppModel.ts

@@ -1,13 +1,13 @@
 import { reactive, computed, ref, watch, unref, type ComputedRef, type UnwrapNestedRefs } from 'vue';
-import type { ModelOptions, Model } from '../types';
-import { deepClone } from '@milaboratories/helpers';
+import type { ModelOptions, Model, AppSettings } from '../types';
+import { deepClone, deepPatch } from '@milaboratories/helpers';
 import { isJsonEqual, identity, ensureError, isZodError, formatZodError } from '../utils';
 
 export function createAppModel<
   M extends { args: unknown; ui: unknown },
   V = unknown,
   E extends Record<string, ComputedRef<unknown>> = Record<string, ComputedRef<unknown>>,
->(options: ModelOptions<M, V>, extended?: E): Model<M & UnwrapNestedRefs<E>> {
+>(options: ModelOptions<M, V>, extended: E, settings: AppSettings): Model<M & UnwrapNestedRefs<E>> {
   type R = M & UnwrapNestedRefs<E>;
 
   const validate = options.validate ?? identity;
@@ -19,10 +19,21 @@ export function createAppModel<
   const local = ref<{ model: R; readonly stage: symbol }>();
 
   const setSource = (v: M) => {
-    local.value = {
-      model: Object.assign(deepClone(v), extended ?? {}) as R,
-      stage: Symbol(),
-    };
+    if (settings.deepPatchModel) {
+      // deep patch
+      const model = local.value?.model;
+      const updated = Object.assign(deepClone(v), extended ?? {}) as R;
+      local.value = {
+        model: model ? deepPatch(model, updated) : updated,
+        stage: Symbol(),
+      };
+    } else {
+      // shallow replace
+      local.value = {
+        model: Object.assign(deepClone(v), extended ?? {}) as R,
+        stage: Symbol(),
+      };
+    }
   };
 
   watch(

package/src/types.ts

@@ -51,7 +51,18 @@ export type RouteParams<Href extends `/${string}` = `/${string}`> = {
   [P in Href as ParsePathnamePart<P>]: ParseQuery<P>;
 };
 
-export type BaseSettings<Href extends `/${string}` = `/${string}`> = {
+export type AppSettings = {
+  /**
+   * Deep patch `model.` This parameter affects how you listen to model changes; a deep watcher is required if you use the `source` function.
+   */
+  deepPatchModel?: boolean;
+  /**
+   * Enables some debug logs
+   */
+  debug?: boolean;
+};
+
+export type ExtendSettings<Href extends `/${string}` = `/${string}`> = {
   showErrorsNotification?: boolean;
   routes: Routes<Href>;
 };