@milaboratories/milaboratories.ui-examples.ui 1.3.18 → 1.3.19
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 +6 -6
- package/CHANGELOG.md +9 -0
- package/dist/assets/{index-F5idKMmR.js → index-BUzfRle6.js} +164 -164
- package/dist/assets/{index-F5idKMmR.js.map → index-BUzfRle6.js.map} +1 -1
- package/dist/assets/{index-B2WCS88S.css → index-DFdnYYCs.css} +1 -1
- package/dist/index.html +2 -2
- package/package.json +4 -4
- package/src/app.ts +17 -2
- package/src/pages/AddSectionPage.vue +37 -0
- package/src/pages/PlAgDataTablePage.vue +4 -6
- package/src/pages/SectionPage.vue +50 -0
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-BUzfRle6.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-DFdnYYCs.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.
|
|
3
|
+
"version": "1.3.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@milaboratories/milaboratories.ui-examples.model": "1.1.
|
|
8
|
-
"@platforma-sdk/model": "^1.21.
|
|
7
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.1.11",
|
|
8
|
+
"@platforma-sdk/model": "^1.21.20"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"@vitejs/plugin-vue": "^5.2.1",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"zod": "~3.23.8",
|
|
17
17
|
"ag-grid-enterprise": "^33.0.3",
|
|
18
18
|
"ag-grid-vue3": "^33.0.3",
|
|
19
|
-
"@platforma-sdk/ui-vue": "^1.21.
|
|
19
|
+
"@platforma-sdk/ui-vue": "^1.21.20",
|
|
20
20
|
"@milaboratories/helpers": "^1.6.11"
|
|
21
21
|
},
|
|
22
22
|
"scripts": {
|
package/src/app.ts
CHANGED
|
@@ -21,8 +21,11 @@ import ButtonsPage from './pages/ButtonsPage.vue';
|
|
|
21
21
|
import NotificationsPage from './pages/NotificationsPage.vue';
|
|
22
22
|
import StackedBarPage from './pages/StackedBarPage/StackedBarPage.vue';
|
|
23
23
|
import LoadersPage from './pages/LoadersPage.vue';
|
|
24
|
+
import AddSectionPage from './pages/AddSectionPage.vue';
|
|
25
|
+
import { uniqueId } from '@milaboratories/helpers';
|
|
26
|
+
import SectionPage from './pages/SectionPage.vue';
|
|
24
27
|
|
|
25
|
-
export const sdkPlugin = defineApp(platforma, (
|
|
28
|
+
export const sdkPlugin = defineApp(platforma, (app) => {
|
|
26
29
|
// Additional data
|
|
27
30
|
const data = reactive({
|
|
28
31
|
counter: 0,
|
|
@@ -32,7 +35,7 @@ export const sdkPlugin = defineApp(platforma, (base) => {
|
|
|
32
35
|
data.counter++;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
|
-
const argsAsJson = computed(() => JSON.stringify(
|
|
38
|
+
const argsAsJson = computed(() => JSON.stringify(app.snapshot.args));
|
|
36
39
|
|
|
37
40
|
const progressRef = ref<boolean | number>();
|
|
38
41
|
|
|
@@ -52,12 +55,22 @@ export const sdkPlugin = defineApp(platforma, (base) => {
|
|
|
52
55
|
});
|
|
53
56
|
}
|
|
54
57
|
|
|
58
|
+
function createSection(label: string) {
|
|
59
|
+
const id = uniqueId();
|
|
60
|
+
app.model.ui.dynamicSections.push({
|
|
61
|
+
id,
|
|
62
|
+
label,
|
|
63
|
+
});
|
|
64
|
+
return id;
|
|
65
|
+
}
|
|
66
|
+
|
|
55
67
|
return {
|
|
56
68
|
data,
|
|
57
69
|
incrementCounter,
|
|
58
70
|
argsAsJson,
|
|
59
71
|
showInfiniteProgress: showLoader,
|
|
60
72
|
showProgress,
|
|
73
|
+
createSection,
|
|
61
74
|
progress: () => {
|
|
62
75
|
return progressRef.value;
|
|
63
76
|
},
|
|
@@ -82,6 +95,8 @@ export const sdkPlugin = defineApp(platforma, (base) => {
|
|
|
82
95
|
'/notifications': () => NotificationsPage,
|
|
83
96
|
'/stacked-bar': () => StackedBarPage,
|
|
84
97
|
'/loaders': () => LoadersPage,
|
|
98
|
+
'/add-section': () => AddSectionPage,
|
|
99
|
+
'/section': () => SectionPage,
|
|
85
100
|
},
|
|
86
101
|
};
|
|
87
102
|
}, {
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
PlBlockPage,
|
|
4
|
+
PlBtnPrimary,
|
|
5
|
+
PlContainer,
|
|
6
|
+
PlRow,
|
|
7
|
+
PlTextField,
|
|
8
|
+
} from '@platforma-sdk/ui-vue';
|
|
9
|
+
import { reactive } from 'vue';
|
|
10
|
+
import { useApp } from '../app';
|
|
11
|
+
|
|
12
|
+
const data = reactive({
|
|
13
|
+
label: '',
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
const create = async () => {
|
|
17
|
+
const id = useApp().createSection(data.label);
|
|
18
|
+
// @TODO await app.awaitSync or something like that
|
|
19
|
+
await useApp().navigateTo(`/section?id=${id}`);
|
|
20
|
+
};
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<template>
|
|
24
|
+
<PlBlockPage>
|
|
25
|
+
<template #title>
|
|
26
|
+
Add dynamic section
|
|
27
|
+
</template>
|
|
28
|
+
<PlRow>
|
|
29
|
+
<PlContainer width="400px">
|
|
30
|
+
<PlTextField v-model="data.label" label="Enter section label" />
|
|
31
|
+
</PlContainer>
|
|
32
|
+
</PlRow>
|
|
33
|
+
<PlRow>
|
|
34
|
+
<PlBtnPrimary :disabled="!data.label.trim()" @click="create">Create</PlBtnPrimary>
|
|
35
|
+
</PlRow>
|
|
36
|
+
</PlBlockPage>
|
|
37
|
+
</template>
|
|
@@ -13,13 +13,11 @@ import type { PTableColumnSpec } from '@platforma-sdk/model';
|
|
|
13
13
|
const app = useApp();
|
|
14
14
|
|
|
15
15
|
if (!app.model.ui?.dataTableState) {
|
|
16
|
-
app.model.ui = {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
gridState: {},
|
|
20
|
-
},
|
|
21
|
-
filterModel: {},
|
|
16
|
+
app.model.ui.dataTableState = {
|
|
17
|
+
tableState: {
|
|
18
|
+
gridState: {},
|
|
22
19
|
},
|
|
20
|
+
filterModel: {},
|
|
23
21
|
};
|
|
24
22
|
}
|
|
25
23
|
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
PlBlockPage,
|
|
4
|
+
PlBtnPrimary,
|
|
5
|
+
PlEditableTitle,
|
|
6
|
+
PlRow,
|
|
7
|
+
} from '@platforma-sdk/ui-vue';
|
|
8
|
+
import { computed } from 'vue';
|
|
9
|
+
import { useApp } from '../app';
|
|
10
|
+
|
|
11
|
+
const app = useApp();
|
|
12
|
+
|
|
13
|
+
const section = computed(() => app.model.ui.dynamicSections.find((it) => it.id === app.queryParams.id));
|
|
14
|
+
|
|
15
|
+
const label = computed({
|
|
16
|
+
get() {
|
|
17
|
+
return section.value?.label ?? '';
|
|
18
|
+
},
|
|
19
|
+
set(v) {
|
|
20
|
+
if (section.value) {
|
|
21
|
+
section.value.label = v ?? '';
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
const deleteSection = () => {
|
|
27
|
+
app.model.ui.dynamicSections = app.model.ui.dynamicSections.filter((it) => it.id !== app.queryParams.id);
|
|
28
|
+
app.navigateTo('/add-section');
|
|
29
|
+
};
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<template>
|
|
33
|
+
<PlBlockPage>
|
|
34
|
+
<template #title>
|
|
35
|
+
<PlEditableTitle
|
|
36
|
+
v-model="label"
|
|
37
|
+
placeholder="Title"
|
|
38
|
+
max-width="400px"
|
|
39
|
+
:max-length="150"
|
|
40
|
+
:min-length="4"
|
|
41
|
+
/>
|
|
42
|
+
</template>
|
|
43
|
+
<PlRow>
|
|
44
|
+
{{ section }}
|
|
45
|
+
</PlRow>
|
|
46
|
+
<PlRow>
|
|
47
|
+
<PlBtnPrimary @click="deleteSection">Delete section</PlBtnPrimary>
|
|
48
|
+
</PlRow>
|
|
49
|
+
</PlBlockPage>
|
|
50
|
+
</template>
|