@milaboratories/milaboratories.ui-examples.model 1.1.10 → 1.1.12

package/eslint.config.mjs

@@ -0,0 +1,7 @@
+import { base } from '@milaboratories/eslint-config';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { ignores: ['*.d.ts', 'vite.config.mts', '**/dist'] },
+  ...base,
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/milaboratories.ui-examples.model",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "Block model",
   "type": "module",
   "main": "dist/index.cjs",
@@ -8,13 +8,13 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "zod": "~3.23.8",
-    "@platforma-sdk/model": "1.21.10"
+    "@platforma-sdk/model": "1.21.20"
   },
   "devDependencies": {
     "typescript": "~5.5.4",
     "vite": "^5.4.11",
     "tsup": "~8.3.5",
-    "@platforma-sdk/block-tools": "2.5.1"
+    "@platforma-sdk/block-tools": "2.5.3"
   },
   "tsup": {
     "entry": [
@@ -32,6 +32,7 @@
     "sourcemap": true
   },
   "scripts": {
-    "build": "tsup && vite build && block-tools build-model"
+    "build": "tsup && vite build && block-tools build-model",
+    "lint": "eslint ."
   }
 }

package/src/index.ts

@@ -1,18 +1,19 @@
-import {
-  BlockModel,
+import type {
   InferHrefType,
   InferOutputsType,
   PlDataTableState,
-  createPlDataTable,
   PlTableFiltersModel,
   PColumn,
   PColumnValues,
-  PObjectId,
+  PObjectId } from '@platforma-sdk/model';
+import {
+  BlockModel,
+  createPlDataTable,
 } from '@platforma-sdk/model';
 import { z } from 'zod';
 
 export const $BlockArgs = z.object({
-  numbers: z.array(z.coerce.number())
+  numbers: z.array(z.coerce.number()),
 });
 
 export type BlockArgs = z.infer<typeof $BlockArgs>;
@@ -24,13 +25,17 @@ export type TableState = {
 
 export type UiState = {
   dataTableState: TableState | undefined;
+  dynamicSections: {
+    id: string;
+    label: string;
+  }[];
 };
 
 export const platforma = BlockModel.create('Heavy')
 
-  .withArgs<BlockArgs>({ numbers: [1, 2, 3] })
+  .withArgs<BlockArgs>({ numbers: [1, 2, 3, 4] })
 
-  .withUiState<UiState>({ dataTableState: undefined })
+  .withUiState<UiState>({ dataTableState: undefined, dynamicSections: [] })
 
   .output('numbers', (ctx) => ctx.outputs?.resolve('numbers')?.getDataAsJson<number[]>())
 
@@ -38,7 +43,7 @@ export const platforma = BlockModel.create('Heavy')
     if (!ctx.uiState?.dataTableState?.tableState.pTableParams?.filters) return undefined;
     return createPlDataTable(ctx, [
       {
-        id: "example" as PObjectId,
+        id: 'example' as PObjectId,
         spec: {
           kind: 'PColumn',
           valueType: 'String',
@@ -53,21 +58,27 @@ export const platforma = BlockModel.create('Heavy')
               annotations: {
                 'pl7.app/label': 'Int axis',
               },
-            }
-          ]
+            },
+          ],
         },
         data: [
           { key: [1], val: '1' },
-          { key: [2], val: '2' }
-        ]
-      } satisfies PColumn<PColumnValues>
+          { key: [2], val: '2' },
+        ],
+      } satisfies PColumn<PColumnValues>,
     ], ctx.uiState.dataTableState.tableState, [
-      ...ctx.uiState.dataTableState.tableState.pTableParams?.filters,
-      ...(ctx.uiState.dataTableState.filterModel?.filters ?? [])
+      ...(ctx.uiState.dataTableState.tableState.pTableParams?.filters ?? []),
+      ...(ctx.uiState.dataTableState.filterModel?.filters ?? []),
     ]);
   })
 
   .sections((ctx) => {
+    const dynamicSections = (ctx.uiState.dynamicSections ?? []).map((it) => ({
+      type: 'link' as const,
+      href: `/section?id=${it.id}` as const,
+      label: it.label,
+    }));
+
     return [
       { type: 'link', href: '/loaders', label: 'Loaders' },
       { type: 'link', href: '/', label: 'Icons/Masks' },
@@ -85,10 +96,23 @@ export const platforma = BlockModel.create('Heavy')
       { type: 'link', href: '/errors', label: 'Errors' },
       { type: 'link', href: '/text-fields', label: 'PlTextField' },
       { type: 'link', href: '/tabs', label: 'PlTabs' },
-      { type: 'link', href: '/drafts', label: 'Drafts' },
       { type: 'link', href: '/stacked-bar', label: 'PlChartStackedBar' },
+      { type: 'link', href: '/histogram', label: 'PlChartHistogram' },
       { type: 'link', href: '/buttons', label: 'ButtonsPage' },
       { type: 'link', href: '/notifications', label: 'Notifications' },
+      { type: 'link', href: '/drafts', label: 'Drafts' },
+      ...(dynamicSections.length
+        ? [
+            { type: 'delimiter' },
+            ...dynamicSections,
+            { type: 'delimiter' }] as const
+        : []),
+      {
+        type: 'link',
+        href: '/add-section',
+        appearance: 'add-section',
+        label: 'New Dynamic section',
+      },
     ];
   })