npm - @milaboratories/milaboratories.ui-examples.ui - Versions diffs - 1.3.35 → 1.3.36 - Mend

@milaboratories/milaboratories.ui-examples.ui 1.3.35 → 1.3.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/.turbo/turbo-build.log +4 -4
package/CHANGELOG.md +6 -0
package/dist/assets/{index-D8b88Naq.js → index-D4XHswrN.js} +164 -164
package/dist/assets/{index-D8b88Naq.js.map → index-D4XHswrN.js.map} +1 -1
package/dist/index.html +1 -1
package/package.json +2 -2
package/src/pages/AgGridVuePage/AgGridVuePage.vue +139 -176

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script type="module" crossorigin src="./assets/index-D8b88Naq.js"></script>
+    <script type="module" crossorigin src="./assets/index-D4XHswrN.js"></script>
     <link rel="stylesheet" crossorigin href="./assets/index-DBOmIoaJ.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/milaboratories.ui-examples.ui",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "type": "module",
   "dependencies": {
     "vue": "^3.5.13",
@@ -17,7 +17,7 @@
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
     "rollup-plugin-sourcemaps2": "^0.4.3",
-    "@platforma-sdk/ui-vue": "^1.22.52",
+    "@platforma-sdk/ui-vue": "^1.22.55",
     "@milaboratories/helpers": "^1.6.11"
   },
   "scripts": {

package/src/pages/AgGridVuePage/AgGridVuePage.vue CHANGED Viewed

@@ -1,30 +1,22 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
-import { computed, h, ref } from 'vue';
+import { h, ref } from 'vue';
 import {
   PlBlockPage,
   PlAgDataTableToolsPanel,
   PlAgGridColumnManager,
-  makeRowNumberColDef,
-  PlAgCellFile,
-  PlAgTextAndButtonCell,
-  PlAgColumnHeader,
-  type PlAgHeaderComponentParams,
   PlAgCsvExporter,
-  PlAgCellProgress,
   defaultMainMenuItems,
   PlAgChartStackedBarCell,
   PlAgChartHistogramCell,
   PlCheckbox,
   PlRow,
-  useAgGridOptionsSimple,
+  useAgGridOptions,
   makeEaseOut,
   animate,
   PlBtnPrimary,
-  createAgGridColDef,
 } from '@platforma-sdk/ui-vue';
 import { AgGridVue } from 'ag-grid-vue3';
-import type { ColDef } from 'ag-grid-enterprise';
 import { times } from '@milaboratories/helpers';
 import { faker } from '@faker-js/faker';
 import { stackedSettings } from './stackedSettings';
@@ -79,190 +71,161 @@ const BlankComponent: Component = {
   },
 };
-const columnDefs = computed<ColDef<Row>[]>(() => {
-  return [
-    makeRowNumberColDef(),
-    createAgGridColDef<Row>({
-      colId: 'id',
-      field: 'id',
-      headerName: 'ID',
-      mainMenuItems: defaultMainMenuItems,
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Number' } satisfies PlAgHeaderComponentParams,
-    }),
-    {
-      colId: 'label',
-      field: 'label',
-      pinned: 'left',
-      lockPinned: true,
-      lockPosition: true,
-      headerName: 'Sample label long text for overflow label long text for overflow',
-      cellRenderer: 'PlAgTextAndButtonCell',
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Text' } satisfies PlAgHeaderComponentParams,
-      cellRendererParams: {
-        onClick: onClickHandler,
-        invokeRowsOnDoubleClick: true,
+const isOverlayTransparent = ref(false);
+const rowNumbers = ref(true);
+const loading = ref(false);
+const notReady = ref(true);
+const hasRows = ref(true);
+const { gridOptions, gridApi } = useAgGridOptions<Row>(({ column }) => {
+  return {
+    columnDefs: [
+      {
+        field: 'id',
+        headerName: 'ID',
+        mainMenuItems: defaultMainMenuItems,
+        headerComponentParams: { type: 'Number' },
       },
-    },
-    createAgGridColDef(({
-      colId: 'progress',
-      field: 'progress',
-      headerName: 'Progress',
-      progress: (cellData) => {
-        const percent = cellData.data?.progress ?? 0;
+      {
+        field: 'label',
+        pinned: 'left',
+        lockPinned: true,
+        lockPosition: true,
+        headerName: 'Sample label long text for overflow label long text for overflow',
+        headerComponentParams: { type: 'Text' },
+        textWithButton: true,
+      },
+      column<number | undefined>({
+        field: 'progress',
+        headerName: 'Progress',
+        progress(value, cellData) {
+          const percent = value as number ?? 0;
+          if (cellData.data?.id === 2) {
+            return {
+              status: 'not_started',
+              error: 'Test Error',
+            };
+          }
+          if (cellData.data?.id === 3) {
+            return {
+              status: 'running',
+              text: 'Infinite progress',
+            };
+          }
+          if (percent < 10) {
+            return {
+              status: 'not_started',
+            };
+          }
+          if (percent >= 100) {
+            return undefined;
+          }
+          if (percent > 90) {
+            return {
+              status: 'done',
+            };
+          }
-        if (cellData.data?.id === 2) {
           return {
-            status: 'not_started',
-            error: 'Test Error',
+            status: 'running',
+            percent,
+            text: `Progress`,
+            suffix: `${percent.toFixed(1)}%`,
           };
-        }
+        },
+        cellRendererSelector: (cellData) => {
+          return {
+            component: BlankComponent,
+            params: { value: cellData.value },
+          };
+        },
+        headerComponentParams: { type: 'Text' },
+      }), // But you could use builder
+      {
+        field: 'stacked_bar',
+        headerName: 'StackedBar',
+        progress: (value) => {
+          if (value) {
+            return undefined; // If no progress show main component
+          }
-        if (cellData.data?.id === 3) {
           return {
             status: 'running',
-            text: 'Infinite progress',
+            text: 'Loading data...',
           };
-        }
-        if (percent < 10) {
+        },
+        cellRendererSelector: (cellData) => {
           return {
-            status: 'not_started',
+            component: PlAgChartStackedBarCell,
+            params: { value: cellData.value },
           };
-        }
-        if (percent >= 100) {
-          return undefined;
-        }
-        if (percent > 90) {
+        },
+      },
+      {
+        colId: 'histogram',
+        headerName: 'Histogram',
+        cellRendererSelector: (cellData) => {
+          const value = (cellData.data?.id ?? 0 % 2 === 0)
+            ? histogramSettings.value
+            : undefined;
           return {
-            status: 'done',
+            component: PlAgChartHistogramCell,
+            params: { value },
           };
-        }
-        return {
-          status: 'running',
-          percent,
-          text: `Progress`,
-          suffix: `${percent.toFixed(1)}%`,
-        };
+        },
       },
-      cellRendererSelector: (cellData) => {
-        return {
-          component: BlankComponent,
-          params: { value: cellData.value },
-        };
+      {
+        field: 'date',
+        headerName: 'Date',
+        headerComponentParams: { type: 'Date' },
       },
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Text' } satisfies PlAgHeaderComponentParams,
-    })),
-    createAgGridColDef<Row>(({
-      colId: 'stacked_bar',
-      field: 'stacked_bar',
-      headerName: 'StackedBar',
-      progress: (cellData) => {
-        if (cellData.value) {
-          return undefined;
-        }
-        return {
-          status: 'running',
-          text: 'Loading data...',
-        };
+      {
+        field: 'file',
+        headerName: 'File input',
+        cellRenderer: 'PlAgCellFile',
+        headerComponentParams: { type: 'File' },
+        cellStyle: { padding: 0 },
       },
-      cellRendererSelector: (cellData) => {
-        console.log('cellData.value', cellData.value);
-        return {
-          component: PlAgChartStackedBarCell,
-          params: { value: cellData.value },
-        };
+      {
+        field: 'link',
+        headerName: 'Link',
+        headerComponentParams: { type: 'Text' },
+        cellRenderer: 'LinkComponent',
       },
-    })),
-    {
-      colId: 'histogram',
-      headerName: 'Histogram',
-      cellRendererSelector: (cellData) => {
-        const value = (cellData.data?.id ?? 0 % 2 === 0)
-          ? histogramSettings.value
-          : undefined;
-        return {
-          component: PlAgChartHistogramCell,
-          params: { value },
-        };
+      {
+        colId: 'time',
+        field: 'time',
+        headerName: 'Duration',
+        headerComponentParams: { type: 'Duration' },
       },
-    },
-    {
-      colId: 'date',
-      field: 'date',
-      headerName: 'Date',
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Date' } satisfies PlAgHeaderComponentParams,
-    },
-    {
-      colId: 'file',
-      field: 'file',
-      headerName: 'File input',
-      cellRenderer: 'PlAgCellFile',
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'File' } satisfies PlAgHeaderComponentParams,
-      cellStyle: { padding: 0 },
-    },
-    {
-      colId: 'link',
-      field: 'link',
-      headerName: 'Link',
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Text' } satisfies PlAgHeaderComponentParams,
-      cellRenderer: 'LinkComponent',
-    },
-    {
-      colId: 'time',
-      field: 'time',
-      headerName: 'Duration',
-      headerComponent: PlAgColumnHeader,
-      headerComponentParams: { type: 'Duration' } satisfies PlAgHeaderComponentParams,
-    },
-  ];
-});
-function onClickHandler() {
-  // will be invoked when invokeRowsOnDoubleClick: false
-  console.log('onClickHandler');
-}
-const isOverlayTransparent = ref(false);
-const loading = ref(false);
-const notReady = ref(false);
-const hasRows = ref(true);
-const { gridOptions, gridApi } = useAgGridOptionsSimple<Row>(() => {
-  return {
-    columnDefs: columnDefs.value,
+    ],
+    rowNumbersColumn: rowNumbers.value,
+    // @TODO (Now rowNumbersColumn && rowSelection enables rows selection with checkboxes)
     rowSelection: {
-      mode: 'multiRow' as const,
+      mode: 'multiRow',
       checkboxes: false,
       headerCheckbox: false,
     },
     loading: loading.value,
+    loadingOverlayType: isOverlayTransparent.value ? 'transparent' : undefined,
+    notReady: notReady.value,
+    notReadyText: 'I am not ready(',
+    // noRowsText: 'No rows(',
     rowData: hasRows.value ? result.value : [],
-    onRowDoubleClicked: (e) => {
-      console.log('Example "Open" button was clicked', e);
-    },
-    loadingOverlayComponentParams: {
-      notReady: notReady.value,
-      overlayType: isOverlayTransparent.value ? 'transparent' : undefined,
+    onRowDoubleClicked: (_e) => {
+      alert('Example "Open" button was clicked');
     },
     components: {
-      PlAgCellProgress,
       LinkComponent,
-      PlAgCellFile,
-      PlAgTextAndButtonCell,
     },
   };
 });
@@ -272,20 +235,20 @@ const { gridOptions, gridApi } = useAgGridOptionsSimple<Row>(() => {
   <PlBlockPage style="max-width: 100%">
     <template #title>AgGridVue</template>
     <template #append>
-      <PlRow>
-        <PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
-        <PlCheckbox v-model="loading">Loading</PlCheckbox>
-        <PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
-        <PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
-        <PlBtnPrimary @click="showProgress">Show progress</PlBtnPrimary>
-      </PlRow>
+      <PlBtnPrimary @click="showProgress">Show progress</PlBtnPrimary>
       <PlAgDataTableToolsPanel>
         <PlAgGridColumnManager v-if="gridApi" :api="gridApi" />
         <PlAgCsvExporter v-if="gridApi" :api="gridApi" />
       </PlAgDataTableToolsPanel>
     </template>
-    <pre v-if="false">{{ result }}</pre>
+    <PlRow wrap>
+      <PlCheckbox v-model="rowNumbers">Show row numbers</PlCheckbox>
+      <PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
+      <PlCheckbox v-model="loading">Loading</PlCheckbox>
+      <PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
+      <PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
+    </PlRow>
     <AgGridVue
       :style="{ height: '100%' }"