@milaboratories/milaboratories.ui-examples.ui 1.3.10 → 1.3.12

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 (11) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +16 -0
  3. package/dist/assets/{index-DnblQjzU.js → index-CA9bsHQe.js} +181 -181
  4. package/dist/assets/{index-DnblQjzU.js.map → index-CA9bsHQe.js.map} +1 -1
  5. package/dist/assets/index-CZUIvC04.css +1 -0
  6. package/dist/index.html +2 -2
  7. package/package.json +6 -6
  8. package/src/app.ts +2 -0
  9. package/src/pages/AgGridVuePage.vue +27 -1
  10. package/src/pages/LoadersPage.vue +80 -0
  11. package/dist/assets/index-2SxOLg8n.css +0 -1
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' blob:">
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
- <script type="module" crossorigin src="./assets/index-DnblQjzU.js"></script>
8
- <link rel="stylesheet" crossorigin href="./assets/index-2SxOLg8n.css">
7
+ <script type="module" crossorigin src="./assets/index-CA9bsHQe.js"></script>
8
+ <link rel="stylesheet" crossorigin href="./assets/index-CZUIvC04.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="app"></div>
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@milaboratories/milaboratories.ui-examples.ui",
3
- "version": "1.3.10",
3
+ "version": "1.3.12",
4
4
  "type": "module",
5
5
  "dependencies": {
6
6
  "vue": "^3.5.13",
7
- "@milaboratories/milaboratories.ui-examples.model": "1.1.6",
8
- "@platforma-sdk/model": "^1.20.24"
7
+ "@milaboratories/milaboratories.ui-examples.model": "1.1.8",
8
+ "@platforma-sdk/model": "^1.20.27"
9
9
  },
10
10
  "devDependencies": {
11
11
  "@vitejs/plugin-vue": "^5.2.1",
@@ -14,9 +14,9 @@
14
14
  "vue-tsc": "^2.1.10",
15
15
  "@faker-js/faker": "^9.2.0",
16
16
  "zod": "~3.23.8",
17
- "ag-grid-enterprise": "^33.0.2",
18
- "ag-grid-vue3": "^33.0.2",
19
- "@platforma-sdk/ui-vue": "^1.20.24",
17
+ "ag-grid-enterprise": "^33.0.3",
18
+ "ag-grid-vue3": "^33.0.3",
19
+ "@platforma-sdk/ui-vue": "^1.20.30",
20
20
  "@milaboratories/helpers": "^1.6.11"
21
21
  },
22
22
  "scripts": {
package/src/app.ts CHANGED
@@ -20,6 +20,7 @@ import LayoutPage from './pages/LayoutPage.vue';
20
20
  import ButtonsPage from './pages/ButtonsPage.vue';
21
21
  import NotificationsPage from './pages/NotificationsPage.vue';
22
22
  import StackedBarPage from './pages/StackedBarPage/StackedBarPage.vue';
23
+ import LoadersPage from './pages/LoadersPage.vue';
23
24
 
24
25
  export const sdkPlugin = defineApp(platforma, (base) => {
25
26
  // Additional data
@@ -80,6 +81,7 @@ export const sdkPlugin = defineApp(platforma, (base) => {
80
81
  '/buttons': () => ButtonsPage,
81
82
  '/notifications': () => NotificationsPage,
82
83
  '/stacked-bar': () => StackedBarPage,
84
+ '/loaders': () => LoadersPage,
83
85
  },
84
86
  };
85
87
  }, {
package/src/pages/AgGridVuePage.vue CHANGED
@@ -15,6 +15,7 @@ import {
15
15
  PlAgColumnHeader,
16
16
  type PlAgHeaderComponentParams,
17
17
  PlAgCsvExporter,
18
+ PlAgCellProgress,
18
19
  } from '@platforma-sdk/ui-vue';
19
20
  import { AgGridVue } from 'ag-grid-vue3';
20
21
  import type { ColDef, GridApi, GridOptions, GridReadyEvent } from 'ag-grid-enterprise';
@@ -50,6 +51,29 @@ const columnDefs: ColDef[] = [
50
51
  invokeRowsOnDoubleClick: true,
51
52
  },
52
53
  },
54
+ {
55
+ colId: 'progress',
56
+ field: 'progress',
57
+ headerName: 'Progress',
58
+ cellRendererSelector: (cellData) => {
59
+ console.log(cellData);
60
+ return {
61
+ component: PlAgCellProgress,
62
+ params: {
63
+ progress: cellData.value,
64
+ progressString: cellData.value,
65
+ step: cellData.value === undefined ? 'Calculations' : 'Loading',
66
+ stage: 'running',
67
+ },
68
+ };
69
+ },
70
+ cellStyle: {
71
+ '--ag-cell-horizontal-padding': '0px',
72
+ '--ag-cell-vertical-padding': '0px',
73
+ },
74
+ headerComponent: PlAgColumnHeader,
75
+ headerComponentParams: { type: 'Text' } satisfies PlAgHeaderComponentParams,
76
+ },
53
77
  {
54
78
  colId: 'date',
55
79
  field: 'date',
@@ -84,10 +108,11 @@ const columnDefs: ColDef[] = [
84
108
  },
85
109
  ];
86
110
 
87
- const result = times(100, () => {
111
+ const result = times(100, (i) => {
88
112
  return {
89
113
  id: faker.number.int(),
90
114
  label: faker.company.buzzNoun(),
115
+ progress: i % 2 === 0 ? undefined : faker.number.int({ min: 24, max: 100 }),
91
116
  date: faker.date.birthdate(),
92
117
  file: '',
93
118
  link: faker.internet.url(),
@@ -105,6 +130,7 @@ const gridOptions: GridOptions = {
105
130
  console.log('Example "Open" button was clicked', e);
106
131
  },
107
132
  components: {
133
+ PlAgCellProgress,
108
134
  LinkComponent,
109
135
  PlAgCellFile,
110
136
  PlAgTextAndButtonCell,
package/src/pages/LoadersPage.vue ADDED
@@ -0,0 +1,80 @@
1
+ <script lang="ts" setup>
2
+ import { PlProgressCell } from '@platforma-sdk/ui-vue';
3
+ import { ref } from 'vue';
4
+
5
+ const progress = ref(0);
6
+
7
+ setInterval(() => {
8
+ if (progress.value >= 100) {
9
+ progress.value = 0;
10
+ }
11
+ progress.value += 1;
12
+ }, 150);
13
+ </script>
14
+ <template>
15
+ <div class="d-flex p-20 gap-14">
16
+ <div class="d-flex flex-column p-20 gap-14 flex-grow-1">
17
+ <div class="text-m">Stage "not_started" no progress</div>
18
+ <div class="test-cell-container" >
19
+ <PlProgressCell stage="not_started" step="Step 1" progressString="not_started"/>
20
+ </div>
21
+
22
+ <div class="text-m">Stage "running" progress undefined</div>
23
+ <div class="test-cell-container" >
24
+ <PlProgressCell stage="running" step="Step 1" progressString="running"/>
25
+ </div>
26
+
27
+ <div class="text-m">Stage "done" no progress</div>
28
+ <div class="test-cell-container" >
29
+ <PlProgressCell stage="done" step="Step 1" progressString="done"/>
30
+ </div>
31
+
32
+ <div class="text-m">Stage "not_started" progress set 25%</div>
33
+ <div class="test-cell-container" >
34
+ <PlProgressCell :progress="25" stage="not_started" :step="`Step 1`" :progressString="`25/100`"/>
35
+ </div>
36
+
37
+ <div class="text-m">Stage "running" progress set 25%</div>
38
+ <div class="test-cell-container" >
39
+ <PlProgressCell :progress="25" stage="running" :step="`Step 1`" :progressString="`25/100`"/>
40
+ </div>
41
+
42
+ <div class="text-m">Stage "done" progress set 25%</div>
43
+ <div class="test-cell-container" >
44
+ <PlProgressCell :progress="25" stage="done" :step="`Step 1`" :progressString="`25/100`"/>
45
+ </div>
46
+ </div>
47
+
48
+ <div class="d-flex flex-column p-20 gap-14 flex-grow-1">
49
+ <div class="text-m">In progress 25%</div>
50
+ <div class="test-cell-container" >
51
+ <PlProgressCell :progress="25" stage="running" step="Step 1" progressString="0:12:34"/>
52
+ </div>
53
+
54
+ <div class="text-m">Long description</div>
55
+ <div class="test-cell-container" >
56
+ <PlProgressCell :progress="100" stage="running" step="Long description text overflow lorem ipsum color Long description text overflow lorem ipsum color" progressString="0:12:34"/>
57
+ </div>
58
+
59
+ <div class="text-m">Completed with :progress="100"</div>
60
+ <div class="test-cell-container" >
61
+ <PlProgressCell :progress="100" stage="done" step="Step 1" progressString="2/4"/>
62
+ </div>
63
+
64
+ <div class="text-m">Error</div>
65
+ <div class="test-cell-container" >
66
+ <PlProgressCell error="Some error description" :progress="100" stage="done" step="Step 1" progressString="2/4"/>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </template>
71
+
72
+ <style>
73
+ .test-cell-container{
74
+ width: 300px;
75
+ height: 50px;
76
+ border: 1px solid gray;
77
+ padding: 0;
78
+ border-radius: 1px;
79
+ }
80
+ </style>