npm - @milaboratories/milaboratories.ui-examples.ui - Versions diffs - 1.3.32 → 1.3.33 - Mend

@milaboratories/milaboratories.ui-examples.ui 1.3.32 → 1.3.33

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 (14) hide show

package/.turbo/turbo-build.log +5 -5
package/CHANGELOG.md +6 -0
package/dist/assets/{index-C4q4aF0W.js → index-Dx2p5uyS.js} +160 -160
package/dist/assets/{index-C4q4aF0W.js.map → index-Dx2p5uyS.js.map} +1 -1
package/dist/assets/{index-DUhLA4Sp.css → index-ObHJBe-Q.css} +1 -1
package/dist/index.html +2 -2
package/package.json +3 -3
package/src/app.ts +1 -1
package/src/pages/AgGridVuePage/AgGridVuePage.vue +295 -0
package/src/pages/AgGridVuePage/LinkComponent.ts +10 -0
package/src/pages/AgGridVuePage/histogramSettings.ts +13 -0
package/src/pages/AgGridVuePage/index.ts +1 -0
package/src/pages/AgGridVuePage/stackedSettings.ts +33 -0
package/src/pages/AgGridVuePage.vue +0 -259

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <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-C4q4aF0W.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DUhLA4Sp.css">
+    <script type="module" crossorigin src="./assets/index-Dx2p5uyS.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-ObHJBe-Q.css">
   </head>
   <body>
     <div id="app"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@milaboratories/milaboratories.ui-examples.ui",
-  "version": "1.3.32",
+  "version": "1.3.33",
   "type": "module",
   "dependencies": {
     "vue": "^3.5.13",
@@ -17,8 +17,8 @@
     "ag-grid-enterprise": "^33.0.4",
     "ag-grid-vue3": "^33.0.4",
     "rollup-plugin-sourcemaps2": "^0.4.3",
-    "@platforma-sdk/ui-vue": "^1.22.30",
-    "@milaboratories/helpers": "^1.6.11"
+    "@milaboratories/helpers": "^1.6.11",
+    "@platforma-sdk/ui-vue": "^1.22.39"
   },
   "scripts": {
     "dev": "vite",

package/src/app.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import ModalsPage from './pages/ModalsPage.vue';
 import InjectEnvPage from './pages/InjectEnvPage.vue';
 import UseWatchFetchPage from './pages/UseWatchFetchPage.vue';
 import TypographyPage from './pages/TypographyPage.vue';
-import AgGridVuePage from './pages/AgGridVuePage.vue';
+import { AgGridVuePage } from './pages/AgGridVuePage';
 import SelectFilesPage from './pages/SelectFilesPage.vue';
 import ErrorsPage from './pages/ErrorsPage.vue';
 import PlAgDataTablePage from './pages/PlAgDataTablePage.vue';

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

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { computed, h, ref } from 'vue';
+import {
+  PlBlockPage,
+  PlAgDataTableToolsPanel,
+  PlAgGridColumnManager,
+  makeRowNumberColDef,
+  PlAgCellFile,
+  PlAgTextAndButtonCell,
+  PlAgColumnHeader,
+  type PlAgHeaderComponentParams,
+  PlAgCsvExporter,
+  PlAgCellProgress,
+  defaultMainMenuItems,
+  PlAgChartStackedBarCell,
+  PlAgChartHistogramCell,
+  PlCheckbox,
+  PlRow,
+  useAgGridOptionsSimple,
+  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';
+import { histogramSettings } from './histogramSettings';
+import { LinkComponent } from './LinkComponent';
+type Row = {
+  id: number;
+  label: string;
+  progress: number | undefined;
+  stacked_bar: unknown;
+  date: Date;
+  file: string;
+  link: string;
+  time: string;
+};
+function generateData(): Row[] {
+  return times(10, (i) => {
+    return {
+      id: i,
+      label: faker.company.buzzNoun(),
+      progress: faker.number.int({ min: 24, max: 100 }),
+      stacked_bar: (i % 2 === 0) ? stackedSettings.value : undefined,
+      date: faker.date.birthdate(),
+      file: '',
+      link: faker.internet.url(),
+      time: `${faker.number.int()} h`,
+    };
+  });
+}
+const result = ref(generateData());
+function showProgress() {
+  animate({
+    duration: 10000,
+    timing: makeEaseOut((t) => t),
+    draw: (progress) => {
+      result.value.forEach((it) => {
+        it.progress = progress * 100;
+      });
+    },
+  });
+}
+const BlankComponent: Component = {
+  props: ['params'],
+  setup(props) {
+    return () =>
+      h('div', { style: `padding: 0 15px` }, props.params.value);
+  },
+};
+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,
+      },
+    },
+    createAgGridColDef(({
+      colId: 'progress',
+      field: 'progress',
+      headerName: 'Progress',
+      progress: (cellData) => {
+        const percent = cellData.data?.progress ?? 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',
+          };
+        }
+        return {
+          status: 'running',
+          percent,
+          text: `Progress`,
+          suffix: `${percent.toFixed(1)}%`,
+        };
+      },
+      cellRendererSelector: (cellData) => {
+        return {
+          component: BlankComponent,
+          params: { value: cellData.value },
+        };
+      },
+      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...',
+        };
+      },
+      cellRendererSelector: (cellData) => {
+        console.log('cellData.value', cellData.value);
+        return {
+          component: PlAgChartStackedBarCell,
+          params: { value: cellData.value },
+        };
+      },
+    })),
+    {
+      colId: 'histogram',
+      headerName: 'Histogram',
+      cellRendererSelector: (cellData) => {
+        const value = (cellData.data?.id ?? 0 % 2 === 0)
+          ? histogramSettings.value
+          : undefined;
+        return {
+          component: PlAgChartHistogramCell,
+          params: { value },
+        };
+      },
+    },
+    {
+      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,
+    rowSelection: {
+      mode: 'multiRow' as const,
+      checkboxes: false,
+      headerCheckbox: false,
+    },
+    loading: loading.value,
+    rowData: hasRows.value ? result.value : [],
+    onRowDoubleClicked: (e) => {
+      console.log('Example "Open" button was clicked', e);
+    },
+    loadingOverlayComponentParams: {
+      notReady: notReady.value,
+      overlayType: isOverlayTransparent.value ? 'transparent' : undefined,
+    },
+    components: {
+      PlAgCellProgress,
+      LinkComponent,
+      PlAgCellFile,
+      PlAgTextAndButtonCell,
+    },
+  };
+});
+</script>
+<template>
+  <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>
+      <PlAgDataTableToolsPanel>
+        <PlAgGridColumnManager v-if="gridApi" :api="gridApi" />
+        <PlAgCsvExporter v-if="gridApi" :api="gridApi" />
+      </PlAgDataTableToolsPanel>
+    </template>
+    <pre v-if="false">{{ result }}</pre>
+    <AgGridVue
+      :style="{ height: '100%' }"
+      v-bind="gridOptions"
+    />
+  </PlBlockPage>
+</template>

package/src/pages/AgGridVuePage/LinkComponent.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import type { Component } from 'vue';
+import { h } from 'vue';
+export const LinkComponent: Component = {
+  props: ['params'],
+  setup(props) {
+    return () =>
+      h('a', { href: props.params.value, style: 'text-decoration: underline' }, props.params.value);
+  },
+};

package/src/pages/AgGridVuePage/histogramSettings.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { computed } from 'vue';
+import bins from '../HistogramPage/assets/bins';
+export const histogramSettings = computed(() => {
+  return {
+    type: 'log-bins' as const,
+    title: 'Predefined bins (log x scale)',
+    bins,
+    threshold: 19.0,
+    yAxisLabel: 'Number of UMIs',
+    xAxisLabel: 'Number of reads per UMI',
+  };
+});

package/src/pages/AgGridVuePage/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as AgGridVuePage } from './AgGridVuePage.vue';

package/src/pages/AgGridVuePage/stackedSettings.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { Gradient } from '@platforma-sdk/ui-vue';
+import { computed } from 'vue';
+const data = [{
+  label: 'The best',
+  value: 100,
+}, {
+  label: 'Good but not great',
+  value: 60,
+}, {
+  label: 'A little worse',
+  value: 40,
+}, {
+  label: 'Not good',
+  value: 33,
+}, {
+  label: 'Awful',
+  value: 330,
+}, {
+  label: 'Nightmare',
+  value: 30,
+}, {
+  label: 'Hell',
+  value: 30,
+}];
+export const stackedSettings = computed(() => {
+  const colors = Gradient('viridis').split(data.length);
+  return {
+    data: data.map((it, i) => ({ ...it, color: colors[i] })),
+  };
+});

package/src/pages/AgGridVuePage.vue DELETED Viewed

@@ -1,259 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
-import { computed, h, ref } from 'vue';
-import {
-  PlBlockPage,
-  PlAgDataTableToolsPanel,
-  PlAgGridColumnManager,
-  makeRowNumberColDef,
-  PlAgCellFile,
-  PlAgTextAndButtonCell,
-  PlAgColumnHeader,
-  type PlAgHeaderComponentParams,
-  PlAgCsvExporter,
-  PlAgCellProgress,
-  defaultMainMenuItems,
-  PlAgChartStackedBarCell,
-  PlAgChartHistogramCell,
-  Gradient,
-  PlCheckbox,
-  PlRow,
-  useAgGridOptionsSimple,
-} 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 bins from './HistogramPage/assets/bins';
-const LinkComponent: Component = {
-  props: ['params'],
-  setup(props) {
-    return () =>
-      h('a', { href: props.params.value, style: 'text-decoration: underline' }, props.params.value);
-  },
-};
-const data = [{
-  label: 'The best',
-  value: 100,
-}, {
-  label: 'Good but not great',
-  value: 60,
-}, {
-  label: 'A little worse',
-  value: 40,
-}, {
-  label: 'Not good',
-  value: 33,
-}, {
-  label: 'Awful',
-  value: 330,
-}, {
-  label: 'Nightmare',
-  value: 30,
-}, {
-  label: 'Hell',
-  value: 30,
-}];
-const stackedSettings = computed(() => {
-  const colors = Gradient('viridis').split(data.length);
-  return {
-    data: data.map((it, i) => ({ ...it, color: colors[i] })),
-  };
-});
-const histogramSettings = computed(() => {
-  return {
-    type: 'log-bins' as const,
-    title: 'Predefined bins (log x scale)',
-    bins,
-    threshold: 19.0,
-    yAxisLabel: 'Number of UMIs',
-    xAxisLabel: 'Number of reads per UMI',
-  };
-});
-const columnDefs: ColDef[] = [
-  makeRowNumberColDef(),
-  {
-    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,
-    },
-  },
-  {
-    colId: 'progress',
-    field: 'progress',
-    headerName: 'Progress',
-    cellRendererSelector: (cellData) => {
-      return {
-        component: PlAgCellProgress,
-        params: {
-          progress: cellData.value,
-          progressString: cellData.value,
-          step: cellData.value === undefined ? 'Queued' : 'Loading',
-          stage: cellData.value === undefined ? 'not_started' : 'running',
-        },
-      };
-    },
-    cellStyle: {
-      '--ag-cell-horizontal-padding': '0px',
-      '--ag-cell-vertical-padding': '0px',
-    },
-    headerComponent: PlAgColumnHeader,
-    headerComponentParams: { type: 'Text' } satisfies PlAgHeaderComponentParams,
-  },
-  {
-    colId: 'stacked_bar',
-    headerName: 'StackedBar',
-    cellRendererSelector: (_cellData) => {
-      const value = Math.random() > 0.5
-        ? stackedSettings.value
-        : undefined;
-      return {
-        component: PlAgChartStackedBarCell,
-        params: { value },
-      };
-    },
-  },
-  {
-    colId: 'histogram',
-    headerName: 'Histogram',
-    cellRendererSelector: (_cellData) => {
-      const value = Math.random() > 0.5
-        ? histogramSettings.value
-        : undefined;
-      return {
-        component: PlAgChartHistogramCell,
-        params: { value },
-      };
-    },
-  },
-  {
-    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,
-  },
-];
-const result = times(100, (i) => {
-  return {
-    id: faker.number.int(),
-    label: faker.company.buzzNoun(),
-    progress: i % 2 === 0 ? undefined : faker.number.int({ min: 24, max: 100 }),
-    date: faker.date.birthdate(),
-    file: '',
-    link: faker.internet.url(),
-    time: `${faker.number.int()} h`,
-  };
-});
-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(false);
-const { gridOptions, gridApi } = useAgGridOptionsSimple(() => {
-  return {
-    columnDefs,
-    rowSelection: {
-      mode: 'multiRow' as const,
-      checkboxes: false,
-      headerCheckbox: false,
-    },
-    loading: loading.value,
-    rowData: hasRows.value ? result : [],
-    onRowDoubleClicked: (e) => {
-      console.log('Example "Open" button was clicked', e);
-    },
-    loadingOverlayComponentParams: {
-      notReady: notReady.value,
-      overlayType: isOverlayTransparent.value ? 'transparent' : undefined,
-    },
-    components: {
-      PlAgCellProgress,
-      LinkComponent,
-      PlAgCellFile,
-      PlAgTextAndButtonCell,
-    },
-  };
-});
-</script>
-<template>
-  <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>
-      </PlRow>
-      <PlAgDataTableToolsPanel>
-        <PlAgGridColumnManager v-if="gridApi" :api="gridApi" />
-        <PlAgCsvExporter v-if="gridApi" :api="gridApi" />
-      </PlAgDataTableToolsPanel>
-    </template>
-    <AgGridVue
-      :style="{ height: '100%' }"
-      v-bind="gridOptions"
-    />
-  </PlBlockPage>
-</template>