@milaboratories/milaboratories.ui-examples.ui 1.3.30 → 1.3.31
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.
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +8 -0
- package/dist/assets/{index-Cn3qO9Le.js → index-B6p5jGRY.js} +172 -172
- package/dist/assets/{index-Cn3qO9Le.js.map → index-B6p5jGRY.js.map} +1 -1
- package/dist/assets/index-DUhLA4Sp.css +1 -0
- package/dist/index.html +2 -2
- package/package.json +4 -4
- package/src/app.ts +2 -2
- package/src/pages/AgGridVuePage.vue +44 -34
- package/src/pages/PlSplashPage.vue +68 -0
- package/dist/assets/index-DMuI660z.css +0 -1
- package/src/pages/PlAgOverlayLoadingPage.vue +0 -12
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-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="./assets/index-
|
|
7
|
+
<script type="module" crossorigin src="./assets/index-B6p5jGRY.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-DUhLA4Sp.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="app"></div>
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/milaboratories.ui-examples.ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.31",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@milaboratories/milaboratories.ui-examples.model": "1.1.
|
|
7
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.1.18",
|
|
8
8
|
"@platforma-sdk/model": "^1.22.18"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"ag-grid-enterprise": "^33.0.4",
|
|
18
18
|
"ag-grid-vue3": "^33.0.4",
|
|
19
19
|
"rollup-plugin-sourcemaps2": "^0.4.3",
|
|
20
|
-
"@
|
|
21
|
-
"@
|
|
20
|
+
"@milaboratories/helpers": "^1.6.11",
|
|
21
|
+
"@platforma-sdk/ui-vue": "^1.22.29"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"dev": "vite",
|
package/src/app.ts
CHANGED
|
@@ -10,7 +10,6 @@ import AgGridVuePage from './pages/AgGridVuePage.vue';
|
|
|
10
10
|
import SelectFilesPage from './pages/SelectFilesPage.vue';
|
|
11
11
|
import ErrorsPage from './pages/ErrorsPage.vue';
|
|
12
12
|
import PlAgDataTablePage from './pages/PlAgDataTablePage.vue';
|
|
13
|
-
import PlAgOverlayLoadingPage from './pages/PlAgOverlayLoadingPage.vue';
|
|
14
13
|
import IconsPage from './pages/IconsPage.vue';
|
|
15
14
|
import PlTextFieldPage from './pages/PlTextFieldPage.vue';
|
|
16
15
|
import PlTabsPage from './pages/PlTabsPage.vue';
|
|
@@ -25,6 +24,7 @@ import SectionPage from './pages/SectionPage.vue';
|
|
|
25
24
|
import { FormComponentsPage } from './pages/FormComponentsPage';
|
|
26
25
|
import { HistogramPage } from './pages/HistogramPage';
|
|
27
26
|
import { StackedBarPage } from './pages/StackedBarPage';
|
|
27
|
+
import PlSplashPage from './pages/PlSplashPage.vue';
|
|
28
28
|
|
|
29
29
|
export const sdkPlugin = defineApp(platforma, (app) => {
|
|
30
30
|
// Additional data
|
|
@@ -86,7 +86,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
|
|
|
86
86
|
'/typography': () => TypographyPage,
|
|
87
87
|
'/ag-grid-vue': () => AgGridVuePage,
|
|
88
88
|
'/pl-ag-data-table': () => PlAgDataTablePage,
|
|
89
|
-
'/pl-
|
|
89
|
+
'/pl-splash-page': () => PlSplashPage,
|
|
90
90
|
'/select-files': () => SelectFilesPage,
|
|
91
91
|
'/errors': () => ErrorsPage,
|
|
92
92
|
'/text-fields': () => PlTextFieldPage,
|
|
@@ -3,13 +3,9 @@ import type { Component } from 'vue';
|
|
|
3
3
|
import { computed, h, ref } from 'vue';
|
|
4
4
|
import {
|
|
5
5
|
PlBlockPage,
|
|
6
|
-
PlAgOverlayLoading,
|
|
7
|
-
PlAgOverlayNoRows,
|
|
8
|
-
AgGridTheme,
|
|
9
6
|
PlAgDataTableToolsPanel,
|
|
10
7
|
PlAgGridColumnManager,
|
|
11
8
|
makeRowNumberColDef,
|
|
12
|
-
autoSizeRowNumberColumn,
|
|
13
9
|
PlAgCellFile,
|
|
14
10
|
PlAgTextAndButtonCell,
|
|
15
11
|
PlAgColumnHeader,
|
|
@@ -20,9 +16,12 @@ import {
|
|
|
20
16
|
PlAgChartStackedBarCell,
|
|
21
17
|
PlAgChartHistogramCell,
|
|
22
18
|
Gradient,
|
|
19
|
+
PlCheckbox,
|
|
20
|
+
PlRow,
|
|
21
|
+
useAgDataTableOptionsSimple,
|
|
23
22
|
} from '@platforma-sdk/ui-vue';
|
|
24
23
|
import { AgGridVue } from 'ag-grid-vue3';
|
|
25
|
-
import type { ColDef
|
|
24
|
+
import type { ColDef } from 'ag-grid-enterprise';
|
|
26
25
|
import { times } from '@milaboratories/helpers';
|
|
27
26
|
import { faker } from '@faker-js/faker';
|
|
28
27
|
import bins from './HistogramPage/assets/bins';
|
|
@@ -201,28 +200,51 @@ function onClickHandler() {
|
|
|
201
200
|
console.log('onClickHandler');
|
|
202
201
|
}
|
|
203
202
|
|
|
204
|
-
const
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
}
|
|
203
|
+
const isOverlayTransparent = ref(false);
|
|
204
|
+
|
|
205
|
+
const loading = ref(false);
|
|
206
|
+
|
|
207
|
+
const notReady = ref(false);
|
|
208
|
+
|
|
209
|
+
const hasRows = ref(false);
|
|
210
|
+
|
|
211
|
+
const { gridOptions, gridApi } = useAgDataTableOptionsSimple(() => {
|
|
212
|
+
return {
|
|
213
|
+
columnDefs,
|
|
214
|
+
rowSelection: {
|
|
215
|
+
mode: 'multiRow' as const,
|
|
216
|
+
checkboxes: false,
|
|
217
|
+
headerCheckbox: false,
|
|
218
|
+
},
|
|
219
|
+
loading: loading.value,
|
|
220
|
+
rowData: hasRows.value ? result : [],
|
|
221
|
+
onRowDoubleClicked: (e) => {
|
|
222
|
+
console.log('Example "Open" button was clicked', e);
|
|
223
|
+
},
|
|
224
|
+
loadingOverlayComponentParams: {
|
|
225
|
+
notReady: notReady.value,
|
|
226
|
+
overlayType: isOverlayTransparent.value ? 'transparent' : undefined,
|
|
227
|
+
},
|
|
228
|
+
components: {
|
|
229
|
+
PlAgCellProgress,
|
|
230
|
+
LinkComponent,
|
|
231
|
+
PlAgCellFile,
|
|
232
|
+
PlAgTextAndButtonCell,
|
|
233
|
+
},
|
|
234
|
+
};
|
|
235
|
+
});
|
|
220
236
|
</script>
|
|
221
237
|
|
|
222
238
|
<template>
|
|
223
239
|
<PlBlockPage style="max-width: 100%">
|
|
224
240
|
<template #title>AgGridVue</template>
|
|
225
241
|
<template #append>
|
|
242
|
+
<PlRow>
|
|
243
|
+
<PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
|
|
244
|
+
<PlCheckbox v-model="loading">Loading</PlCheckbox>
|
|
245
|
+
<PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
|
|
246
|
+
<PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
|
|
247
|
+
</PlRow>
|
|
226
248
|
<PlAgDataTableToolsPanel>
|
|
227
249
|
<PlAgGridColumnManager v-if="gridApi" :api="gridApi" />
|
|
228
250
|
<PlAgCsvExporter v-if="gridApi" :api="gridApi" />
|
|
@@ -230,20 +252,8 @@ const onGridReady = (e: GridReadyEvent) => {
|
|
|
230
252
|
</template>
|
|
231
253
|
|
|
232
254
|
<AgGridVue
|
|
233
|
-
:rowSelection="{
|
|
234
|
-
mode: 'multiRow',
|
|
235
|
-
checkboxes: false,
|
|
236
|
-
headerCheckbox: false,
|
|
237
|
-
}"
|
|
238
|
-
:theme="AgGridTheme"
|
|
239
255
|
:style="{ height: '100%' }"
|
|
240
|
-
|
|
241
|
-
:column-defs="columnDefs"
|
|
242
|
-
:grid-options="gridOptions"
|
|
243
|
-
:loading-overlay-component-params="{ notReady: true }"
|
|
244
|
-
:loading-overlay-component="PlAgOverlayLoading"
|
|
245
|
-
:no-rows-overlay-component="PlAgOverlayNoRows"
|
|
246
|
-
@grid-ready="onGridReady"
|
|
256
|
+
v-bind="gridOptions"
|
|
247
257
|
/>
|
|
248
258
|
</PlBlockPage>
|
|
249
259
|
</template>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { faker } from '@faker-js/faker';
|
|
3
|
+
import { PlBlockPage, PlBtnPrimary, PlCheckbox, PlContainer, PlRow, PlSplash, PlTextField } from '@platforma-sdk/ui-vue';
|
|
4
|
+
import type { Ref } from 'vue';
|
|
5
|
+
import { reactive, ref } from 'vue';
|
|
6
|
+
|
|
7
|
+
const lorem1 = faker.lorem.paragraph(5);
|
|
8
|
+
const lorem2 = faker.lorem.paragraph(5);
|
|
9
|
+
const lorem3 = faker.lorem.paragraph(5);
|
|
10
|
+
|
|
11
|
+
const form = reactive({
|
|
12
|
+
name: '',
|
|
13
|
+
surname: '',
|
|
14
|
+
agreed: false,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const isBodyLoading = ref(false);
|
|
18
|
+
|
|
19
|
+
const isFormLoading = ref(false);
|
|
20
|
+
|
|
21
|
+
const isParagraphLoading = ref(false);
|
|
22
|
+
|
|
23
|
+
const useFakeLoading = (isLoading: Ref<boolean>) => {
|
|
24
|
+
return () => {
|
|
25
|
+
if (isLoading.value) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
isLoading.value = true;
|
|
30
|
+
setTimeout(() => {
|
|
31
|
+
isLoading.value = false;
|
|
32
|
+
}, 3000);
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const onReloadBody = useFakeLoading(isBodyLoading);
|
|
37
|
+
const onReloadForm = useFakeLoading(isFormLoading);
|
|
38
|
+
const onReloadParagraph = useFakeLoading(isParagraphLoading);
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<PlBlockPage :body-loading="isBodyLoading" body-loading-text="Page Loading">
|
|
43
|
+
<template #title>PlSplash Component</template>
|
|
44
|
+
<template #append>
|
|
45
|
+
<PlBtnPrimary @click="onReloadBody">Reload page body</PlBtnPrimary>
|
|
46
|
+
</template>
|
|
47
|
+
<PlRow>
|
|
48
|
+
<PlContainer width="50%">
|
|
49
|
+
<PlContainer :loading="isFormLoading" loading-text="Form is loading" width="400px">
|
|
50
|
+
<h3>Form</h3>
|
|
51
|
+
<PlTextField v-model="form.name" label="Name" />
|
|
52
|
+
<PlTextField v-model="form.surname" label="Surname" />
|
|
53
|
+
<PlCheckbox v-model="form.agreed">I agreed to...</PlCheckbox>
|
|
54
|
+
<PlBtnPrimary @click="onReloadForm">Submit form</PlBtnPrimary>
|
|
55
|
+
</PlContainer>
|
|
56
|
+
</PlContainer>
|
|
57
|
+
<PlContainer width="50%">
|
|
58
|
+
<h3>Title</h3>
|
|
59
|
+
<p>{{ lorem1 }}</p>
|
|
60
|
+
<PlSplash :loading="isParagraphLoading">
|
|
61
|
+
<p>{{ lorem2 }}</p>
|
|
62
|
+
</PlSplash>
|
|
63
|
+
<PlBtnPrimary @click="onReloadParagraph">Reload the second paragraph</PlBtnPrimary>
|
|
64
|
+
<p>{{ lorem3 }}</p>
|
|
65
|
+
</PlContainer>
|
|
66
|
+
</PlRow>
|
|
67
|
+
</PlBlockPage>
|
|
68
|
+
</template>
|