@milaboratories/milaboratories.ui-examples.ui 1.7.1 → 1.7.2
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/.turbo/turbo-type-check.log +2 -2
- package/CHANGELOG.md +7 -0
- package/dist/assets/{index-BaCRzfnp.js → index-Bjxx2_vu.js} +108 -108
- package/dist/assets/{index-BaCRzfnp.js.map → index-Bjxx2_vu.js.map} +1 -1
- package/dist/index.html +1 -1
- package/package.json +7 -7
- package/src/pages/AgGridVuePage/AgGridVuePage.vue +0 -4
- package/src/pages/AgGridVuePage/AgGridVuePageWithBuilder.vue +0 -4
- package/src/pages/PlSplashPage.vue +50 -4
package/dist/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self' blob: data: 'unsafe-eval';">
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<script type="module" crossorigin src="./assets/index-
|
|
7
|
+
<script type="module" crossorigin src="./assets/index-Bjxx2_vu.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="./assets/index-CrE9XJ4f.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/milaboratories.ui-examples.ui",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.24",
|
|
@@ -13,12 +13,12 @@
|
|
|
13
13
|
"zod": "~3.23.8",
|
|
14
14
|
"ag-grid-enterprise": "~34.1.2",
|
|
15
15
|
"ag-grid-vue3": "~34.1.2",
|
|
16
|
-
"@milaboratories/
|
|
17
|
-
"@
|
|
18
|
-
"@
|
|
19
|
-
"@milaboratories/
|
|
20
|
-
"@milaboratories/
|
|
21
|
-
"@milaboratories/
|
|
16
|
+
"@milaboratories/build-configs": "1.1.1",
|
|
17
|
+
"@milaboratories/ts-configs": "1.1.0",
|
|
18
|
+
"@platforma-sdk/ui-vue": "1.48.0",
|
|
19
|
+
"@milaboratories/uikit": "2.8.0",
|
|
20
|
+
"@milaboratories/ts-builder": "1.1.1",
|
|
21
|
+
"@milaboratories/helpers": "1.12.0"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"dev": "ts-builder serve --target browser",
|
|
@@ -71,8 +71,6 @@ const BlankComponent: Component = {
|
|
|
71
71
|
},
|
|
72
72
|
};
|
|
73
73
|
|
|
74
|
-
const isOverlayTransparent = ref(false);
|
|
75
|
-
|
|
76
74
|
const rowNumbers = ref(true);
|
|
77
75
|
|
|
78
76
|
const loading = ref(false);
|
|
@@ -223,7 +221,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ column }) => {
|
|
|
223
221
|
: undefined,
|
|
224
222
|
loading: loading.value,
|
|
225
223
|
loadingText: loadingText.value,
|
|
226
|
-
loadingOverlayType: isOverlayTransparent.value ? 'transparent' : undefined,
|
|
227
224
|
notReady: notReady.value,
|
|
228
225
|
notReadyText: 'I am not ready(',
|
|
229
226
|
noRowsText: 'No rows text (custom, default is "Empty")',
|
|
@@ -249,7 +246,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ column }) => {
|
|
|
249
246
|
|
|
250
247
|
<PlRow wrap>
|
|
251
248
|
<PlCheckbox v-model="rowNumbers">Show row numbers</PlCheckbox>
|
|
252
|
-
<PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
|
|
253
249
|
<PlCheckbox v-model="loading">Loading</PlCheckbox>
|
|
254
250
|
<PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
|
|
255
251
|
<PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
|
|
@@ -85,8 +85,6 @@ const BlankComponent: Component = {
|
|
|
85
85
|
},
|
|
86
86
|
};
|
|
87
87
|
|
|
88
|
-
const isOverlayTransparent = ref(false);
|
|
89
|
-
|
|
90
88
|
const rowNumbers = ref(true);
|
|
91
89
|
|
|
92
90
|
const loading = ref(false);
|
|
@@ -122,7 +120,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ builder }) => {
|
|
|
122
120
|
.setNotReadyText('Not ready text (custom, default is "Not ready"')
|
|
123
121
|
.setRowData(hasRows.value ? result.value : [])
|
|
124
122
|
.setNoRowsText('No rows text (custom, default is "Empty")')
|
|
125
|
-
.setLoadingOverlayType(isOverlayTransparent.value ? 'transparent' : undefined)
|
|
126
123
|
.columnRowNumbers(rowNumbers.value)
|
|
127
124
|
.column({
|
|
128
125
|
field: 'id',
|
|
@@ -268,7 +265,6 @@ const { gridOptions, gridApi } = useAgGridOptions<Row>(({ builder }) => {
|
|
|
268
265
|
|
|
269
266
|
<PlRow wrap>
|
|
270
267
|
<PlCheckbox v-model="rowNumbers">Show row numbers</PlCheckbox>
|
|
271
|
-
<PlCheckbox v-model="isOverlayTransparent">Use transparent overlay</PlCheckbox>
|
|
272
268
|
<PlCheckbox v-model="loading">Loading</PlCheckbox>
|
|
273
269
|
<PlCheckbox v-model="notReady">Not Ready</PlCheckbox>
|
|
274
270
|
<PlCheckbox v-model="hasRows">Has rows</PlCheckbox>
|
|
@@ -1,8 +1,18 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { faker } from '@faker-js/faker';
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
PlBlockPage,
|
|
5
|
+
PlBtnGroup,
|
|
6
|
+
PlBtnPrimary,
|
|
7
|
+
PlCheckbox,
|
|
8
|
+
PlContainer,
|
|
9
|
+
PlNumberField,
|
|
10
|
+
PlRow,
|
|
11
|
+
PlSplash,
|
|
12
|
+
PlTextField,
|
|
13
|
+
} from '@platforma-sdk/ui-vue';
|
|
4
14
|
import type { Ref } from 'vue';
|
|
5
|
-
import { reactive, ref } from 'vue';
|
|
15
|
+
import { computed, reactive, ref } from 'vue';
|
|
6
16
|
|
|
7
17
|
const lorem1 = faker.lorem.paragraph(5);
|
|
8
18
|
const lorem2 = faker.lorem.paragraph(5);
|
|
@@ -15,11 +25,22 @@ const form = reactive({
|
|
|
15
25
|
});
|
|
16
26
|
|
|
17
27
|
const isBodyLoading = ref(false);
|
|
28
|
+
const isDefaultLoadingText = ref(true);
|
|
29
|
+
|
|
30
|
+
const loadingPlaceholderOptions = [
|
|
31
|
+
{ label: 'Table', value: 'table' },
|
|
32
|
+
{ label: 'Graph', value: 'graph' },
|
|
33
|
+
] as const;
|
|
34
|
+
const bodyLoadingPlaceholderVariant = ref<
|
|
35
|
+
typeof loadingPlaceholderOptions[number]['value']
|
|
36
|
+
>('table');
|
|
18
37
|
|
|
19
38
|
const isFormLoading = ref(false);
|
|
20
39
|
|
|
21
40
|
const isParagraphLoading = ref(false);
|
|
22
41
|
|
|
42
|
+
const loadingDuration = ref(3);
|
|
43
|
+
|
|
23
44
|
const useFakeLoading = (isLoading: Ref<boolean>) => {
|
|
24
45
|
return () => {
|
|
25
46
|
if (isLoading.value) {
|
|
@@ -29,20 +50,45 @@ const useFakeLoading = (isLoading: Ref<boolean>) => {
|
|
|
29
50
|
isLoading.value = true;
|
|
30
51
|
setTimeout(() => {
|
|
31
52
|
isLoading.value = false;
|
|
32
|
-
},
|
|
53
|
+
}, loadingDuration.value * 1000);
|
|
33
54
|
};
|
|
34
55
|
};
|
|
35
56
|
|
|
36
57
|
const onReloadBody = useFakeLoading(isBodyLoading);
|
|
37
58
|
const onReloadForm = useFakeLoading(isFormLoading);
|
|
38
59
|
const onReloadParagraph = useFakeLoading(isParagraphLoading);
|
|
60
|
+
|
|
61
|
+
const bodyLoading = computed(() => {
|
|
62
|
+
if (!isBodyLoading.value) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (isDefaultLoadingText.value) {
|
|
66
|
+
return bodyLoadingPlaceholderVariant.value;
|
|
67
|
+
}
|
|
68
|
+
return {
|
|
69
|
+
variant: bodyLoadingPlaceholderVariant.value,
|
|
70
|
+
title: 'Loading Title',
|
|
71
|
+
subtitle: Array.from(
|
|
72
|
+
{ length: 3 },
|
|
73
|
+
(_, i) => `Loading Subtitle ${i}`,
|
|
74
|
+
),
|
|
75
|
+
};
|
|
76
|
+
});
|
|
39
77
|
</script>
|
|
40
78
|
|
|
41
79
|
<template>
|
|
42
|
-
<PlBlockPage :body-loading
|
|
80
|
+
<PlBlockPage :body-loading>
|
|
43
81
|
<template #title>PlSplash Component</template>
|
|
44
82
|
<template #append>
|
|
83
|
+
<PlBtnGroup
|
|
84
|
+
v-model="bodyLoadingPlaceholderVariant"
|
|
85
|
+
:options="loadingPlaceholderOptions"
|
|
86
|
+
/>
|
|
87
|
+
<PlNumberField v-model="loadingDuration" label="Loading Duration" />
|
|
45
88
|
<PlBtnPrimary @click="onReloadBody">Reload page body</PlBtnPrimary>
|
|
89
|
+
<PlCheckbox v-model="isDefaultLoadingText">
|
|
90
|
+
Default loading text
|
|
91
|
+
</PlCheckbox>
|
|
46
92
|
</template>
|
|
47
93
|
<PlRow>
|
|
48
94
|
<PlContainer width="50%">
|