@milaboratories/milaboratories.ui-examples.ui 1.5.51 → 1.6.0
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 +5 -5
- package/.turbo/turbo-type-check.log +1 -1
- package/CHANGELOG.md +20 -0
- package/dist/assets/index-BTerLv2q.css +1 -0
- package/dist/assets/{index-DNqrusHN.js → index-BqK2odjC.js} +109 -108
- package/dist/assets/{index-DNqrusHN.js.map → index-BqK2odjC.js.map} +1 -1
- package/dist/index.html +2 -2
- package/package.json +6 -6
- package/src/app.ts +2 -0
- package/src/pages/FormComponentsPage/Dropdowns.vue +11 -1
- package/src/pages/PlAnnotationPage.vue +125 -0
- package/src/pages/PlFileInputPage.vue +2 -0
- package/dist/assets/index-CiEHz9Ae.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: data: 'unsafe-eval';">
|
|
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-BqK2odjC.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-BTerLv2q.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
|
+
"version": "1.6.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@milaboratories/milaboratories.ui-examples.model": "1.
|
|
8
|
-
"@platforma-sdk/model": "1.
|
|
7
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.3.0",
|
|
8
|
+
"@platforma-sdk/model": "1.45.0"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"typescript": "~5.6.3",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"zod": "~3.23.8",
|
|
14
14
|
"ag-grid-enterprise": "^34.1.2",
|
|
15
15
|
"ag-grid-vue3": "^34.1.2",
|
|
16
|
-
"@milaboratories/ts-configs": "1.0.6",
|
|
17
|
-
"@milaboratories/uikit": "2.4.28",
|
|
18
|
-
"@platforma-sdk/ui-vue": "1.44.13",
|
|
19
16
|
"@milaboratories/build-configs": "1.0.8",
|
|
17
|
+
"@milaboratories/ts-configs": "1.0.6",
|
|
20
18
|
"@milaboratories/ts-builder": "1.0.5",
|
|
19
|
+
"@platforma-sdk/ui-vue": "1.45.0",
|
|
20
|
+
"@milaboratories/uikit": "2.5.0",
|
|
21
21
|
"@milaboratories/helpers": "1.12.0"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
package/src/app.ts
CHANGED
|
@@ -18,6 +18,7 @@ import LogViewPage from './pages/LogViewPage.vue';
|
|
|
18
18
|
import ModalsPage from './pages/ModalsPage.vue';
|
|
19
19
|
import NotificationsPage from './pages/NotificationsPage.vue';
|
|
20
20
|
import PlAgDataTableV2Page from './pages/PlAgDataTableV2Page.vue';
|
|
21
|
+
import PlAnnotationPage from './pages/PlAnnotationPage.vue';
|
|
21
22
|
import PlAutocompleteMultiPage from './pages/PlAutocompleteMultiPage/index.vue';
|
|
22
23
|
import PlAutocompletePage from './pages/PlAutocompletePage.vue';
|
|
23
24
|
import PlElementListPage from './pages/PlElementListPage.vue';
|
|
@@ -96,6 +97,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
|
|
|
96
97
|
'/typography': () => TypographyPage,
|
|
97
98
|
'/ag-grid-vue': () => AgGridVuePage,
|
|
98
99
|
'/ag-grid-vue-with-builder': () => AgGridVuePageWithBuilder,
|
|
100
|
+
'/pl-annotations': () => PlAnnotationPage,
|
|
99
101
|
'/pl-ag-data-table-v2': () => PlAgDataTableV2Page,
|
|
100
102
|
'/pl-splash-page': () => PlSplashPage,
|
|
101
103
|
'/pl-file-input-page': () => PlFileInputPage,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { undef } from '@milaboratories/helpers';
|
|
3
|
+
import type { ListOption } from '@platforma-sdk/ui-vue';
|
|
3
4
|
import {
|
|
4
5
|
PlBtnPrimary,
|
|
5
6
|
PlCheckbox,
|
|
@@ -12,9 +13,9 @@ import {
|
|
|
12
13
|
PlRow,
|
|
13
14
|
} from '@platforma-sdk/ui-vue';
|
|
14
15
|
import { computed, reactive, ref } from 'vue';
|
|
15
|
-
import type { ListOption } from '@platforma-sdk/ui-vue';
|
|
16
16
|
|
|
17
17
|
const data = reactive({
|
|
18
|
+
required: false,
|
|
18
19
|
disabled: false,
|
|
19
20
|
clearable: true,
|
|
20
21
|
withGroups: false,
|
|
@@ -148,6 +149,7 @@ const showOptionsLoading = () => {
|
|
|
148
149
|
<PlContainer>
|
|
149
150
|
<PlRow>
|
|
150
151
|
<PlCheckbox v-model="data.disabled">Disabled</PlCheckbox>
|
|
152
|
+
<PlCheckbox v-model="data.required">Required</PlCheckbox>
|
|
151
153
|
<PlCheckbox v-model="data.clearable">Clearable</PlCheckbox>
|
|
152
154
|
<PlCheckbox v-model="data.withGroups">With groups</PlCheckbox>
|
|
153
155
|
<PlBtnPrimary @click="showOptionsLoading">Show options loading</PlBtnPrimary>
|
|
@@ -158,6 +160,7 @@ const showOptionsLoading = () => {
|
|
|
158
160
|
v-model="data.model"
|
|
159
161
|
:disabled="data.disabled"
|
|
160
162
|
:clearable="data.clearable"
|
|
163
|
+
:required="data.required"
|
|
161
164
|
label="PlDropdown"
|
|
162
165
|
:options="simpleOptions"
|
|
163
166
|
/>
|
|
@@ -165,6 +168,7 @@ const showOptionsLoading = () => {
|
|
|
165
168
|
v-model="data.model"
|
|
166
169
|
:disabled="data.disabled"
|
|
167
170
|
:clearable="data.clearable"
|
|
171
|
+
:required="data.required"
|
|
168
172
|
label="PlDropdown"
|
|
169
173
|
:options="simpleOptions"
|
|
170
174
|
>
|
|
@@ -176,6 +180,7 @@ const showOptionsLoading = () => {
|
|
|
176
180
|
v-model="data.model"
|
|
177
181
|
:disabled="data.disabled"
|
|
178
182
|
:clearable="data.clearable"
|
|
183
|
+
:required="data.required"
|
|
179
184
|
label="PlDropdown"
|
|
180
185
|
:options="simpleOptions"
|
|
181
186
|
/>
|
|
@@ -183,6 +188,7 @@ const showOptionsLoading = () => {
|
|
|
183
188
|
v-model="data.model"
|
|
184
189
|
:disabled="data.disabled"
|
|
185
190
|
:clearable="data.clearable"
|
|
191
|
+
:required="data.required"
|
|
186
192
|
label="PlDropdownRef (with regular options)"
|
|
187
193
|
:options="simpleOptions"
|
|
188
194
|
/>
|
|
@@ -190,6 +196,7 @@ const showOptionsLoading = () => {
|
|
|
190
196
|
v-model="data.ref"
|
|
191
197
|
:disabled="data.disabled"
|
|
192
198
|
:clearable="data.clearable"
|
|
199
|
+
:required="data.required"
|
|
193
200
|
label="PlDropdownRef (with ref options)"
|
|
194
201
|
:options="refOptions"
|
|
195
202
|
/>
|
|
@@ -197,6 +204,7 @@ const showOptionsLoading = () => {
|
|
|
197
204
|
<PlDropdownMulti
|
|
198
205
|
v-model="data.multi"
|
|
199
206
|
:disabled="data.disabled"
|
|
207
|
+
:required="data.required"
|
|
200
208
|
:options="simpleOptions"
|
|
201
209
|
label="PlDropdownMulti"
|
|
202
210
|
/>
|
|
@@ -204,6 +212,7 @@ const showOptionsLoading = () => {
|
|
|
204
212
|
<PlDropdownMulti
|
|
205
213
|
v-model="data.multi"
|
|
206
214
|
:disabled="data.disabled"
|
|
215
|
+
:required="data.required"
|
|
207
216
|
:options="simpleOptions"
|
|
208
217
|
label="PlDropdownMulti"
|
|
209
218
|
>
|
|
@@ -215,6 +224,7 @@ const showOptionsLoading = () => {
|
|
|
215
224
|
<PlDropdownMultiRef
|
|
216
225
|
v-model="data.multiRefSelected"
|
|
217
226
|
:disabled="data.disabled"
|
|
227
|
+
:required="data.required"
|
|
218
228
|
:options="refOptionsMulti"
|
|
219
229
|
label="PlDropdownMultiRef"
|
|
220
230
|
/>
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { PObjectId, SimplifiedUniversalPColumnEntry, SUniversalPColumnId } from '@platforma-sdk/model';
|
|
3
|
+
import { PlAnnotationsModal } from '@platforma-sdk/ui-vue';
|
|
4
|
+
import { ref, watch } from 'vue';
|
|
5
|
+
|
|
6
|
+
const showModal = ref(true);
|
|
7
|
+
watch(showModal, (value) => {
|
|
8
|
+
if (!value) {
|
|
9
|
+
showModal.value = true;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
const mockAnnotations = ref({
|
|
14
|
+
title: 'Sample Pattern Filter',
|
|
15
|
+
steps: [
|
|
16
|
+
{
|
|
17
|
+
id: 1,
|
|
18
|
+
label: 'Text Pattern Filter',
|
|
19
|
+
filter: {
|
|
20
|
+
type: 'and' as const,
|
|
21
|
+
filters: [
|
|
22
|
+
{
|
|
23
|
+
type: 'patternEquals' as const,
|
|
24
|
+
column: 'sample_name' as SUniversalPColumnId,
|
|
25
|
+
value: 'Sample_001',
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
id: 2,
|
|
32
|
+
label: 'Numeric Comparison',
|
|
33
|
+
filter: {
|
|
34
|
+
type: 'or' as const,
|
|
35
|
+
filters: [
|
|
36
|
+
{
|
|
37
|
+
type: 'greaterThan' as const,
|
|
38
|
+
column: 'count' as SUniversalPColumnId,
|
|
39
|
+
x: 100,
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
],
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
const mockColumns = ref<SimplifiedUniversalPColumnEntry[]>([
|
|
48
|
+
{
|
|
49
|
+
id: 'sample_name' as SUniversalPColumnId,
|
|
50
|
+
label: 'Sample Name',
|
|
51
|
+
obj: {
|
|
52
|
+
valueType: 'String' as const,
|
|
53
|
+
annotations: {},
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'count' as SUniversalPColumnId,
|
|
58
|
+
label: 'Count',
|
|
59
|
+
obj: {
|
|
60
|
+
valueType: 'Int' as const,
|
|
61
|
+
annotations: {},
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
id: 'description' as SUniversalPColumnId,
|
|
66
|
+
label: 'Description',
|
|
67
|
+
obj: {
|
|
68
|
+
valueType: 'String' as const,
|
|
69
|
+
annotations: {},
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
id: 'score' as SUniversalPColumnId,
|
|
74
|
+
label: 'Score',
|
|
75
|
+
obj: {
|
|
76
|
+
valueType: 'Double' as const,
|
|
77
|
+
annotations: {},
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
id: 'frequency' as SUniversalPColumnId,
|
|
82
|
+
label: 'Frequency',
|
|
83
|
+
obj: {
|
|
84
|
+
valueType: 'Float' as const,
|
|
85
|
+
annotations: {},
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
]);
|
|
89
|
+
|
|
90
|
+
const getValuesForSelectedColumns = async () => {
|
|
91
|
+
// Mock implementation - in real app this would fetch actual column values
|
|
92
|
+
return {
|
|
93
|
+
columnId: 'sample_name' as PObjectId,
|
|
94
|
+
values: ['Sample_001', 'Sample_002', 'Sample_003', 'Control_001', 'Control_002'],
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
<template>
|
|
100
|
+
<div :class="$style.page">
|
|
101
|
+
<PlAnnotationsModal
|
|
102
|
+
v-model:opened="showModal"
|
|
103
|
+
v-model:annotation="mockAnnotations"
|
|
104
|
+
:columns="mockColumns"
|
|
105
|
+
:hasSelectedColumns="true"
|
|
106
|
+
:getValuesForSelectedColumns="getValuesForSelectedColumns"
|
|
107
|
+
/>
|
|
108
|
+
|
|
109
|
+
<pre :class="$style.jsonBlock">{{ JSON.stringify(mockAnnotations, null, 2) }}</pre>
|
|
110
|
+
</div>
|
|
111
|
+
</template>
|
|
112
|
+
|
|
113
|
+
<style module>
|
|
114
|
+
.page {
|
|
115
|
+
width: 100%;
|
|
116
|
+
padding: 20px;
|
|
117
|
+
margin: 0 auto;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.jsonBlock {
|
|
121
|
+
height: 100%;
|
|
122
|
+
padding: 10px;
|
|
123
|
+
border-radius: 4px;
|
|
124
|
+
}
|
|
125
|
+
</style>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._drag-and-drop_lj9h6_2{border:1px solid var(--txt-01);padding:24px;width:600px}._components_lj9h6_8 pre,._components_14cn3_10 pre,._components_obl5m_2 pre{border:1px solid var(--txt-01);padding:12px;font-weight:bolder;overflow:auto;max-width:50vw;background-color:#eee5}._inputs_lvlt7_2{display:flex;flex-direction:row;gap:10px}._input_lvlt7_2{flex-grow:1;min-width:100px}._content_2bvi2_10{display:flex;place-items:center;place-content:center;height:100%;background-color:#eee;color:#fff;font-size:34px;font-weight:700}.test-cell-container{width:300px;height:50px;border:1px solid gray;padding:0;border-radius:1px}.content-box[data-v-83f44a06]{background-color:#f7f8fa;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ic-02);border-radius:6px}._buttons_1bxae_2{position:sticky;display:flex;flex-direction:row;gap:10px}._button_1bxae_2{display:flex}._components_14cn3_10 pre,._components_obl5m_2 pre{border:1px solid var(--txt-01);padding:12px;font-weight:bolder;overflow:auto;max-width:50vw;background-color:#eee5}._container_1oob8_2{display:flex;flex-direction:column;gap:8px}._container_1oob8_2 h1{font-size:2rem;line-height:1.5;margin-block-end:16px}._container_1oob8_2 output{margin-block-start:12px}._chip_u5b92_2{width:120px;height:120px;color:#fff}._components_obl5m_2 pre{border:1px solid var(--txt-01);padding:12px;font-weight:bolder;overflow:auto;max-width:50vw;background-color:#eee5}._dataset_ed5qj_2{display:flex;align-items:center;gap:10px}
|