@milaboratories/milaboratories.ui-examples.ui 1.6.4 → 1.6.5
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 +9 -0
- package/dist/assets/{index-a6OrO4mT.js → index-5MKiPAM0.js} +119 -107
- package/dist/assets/{index-a6OrO4mT.js.map → index-5MKiPAM0.js.map} +1 -1
- package/dist/assets/index-CrE9XJ4f.css +1 -0
- package/dist/index.html +2 -2
- package/package.json +6 -6
- package/src/app.ts +2 -0
- package/src/pages/PlAdvancedFilterPage.vue +231 -0
- package/dist/assets/index-BTerLv2q.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._controls_1s9h2_2{display:flex;gap:16px}._block_1s9h2_6{display:flex;height:100%;overflow:hidden}._leftColumn_1s9h2_11{display:flex;flex-direction:column;gap:16px;width:280px;padding:10px;margin:10px;border:1px solid grey}._rightColumn_1s9h2_20{display:flex;flex-direction:column;width:280px;height:100%;overflow:auto}._columnChip_1s9h2_27{background:#fff;border:1px solid black;border-radius:6px;padding:6px}._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}._page_r4jp7_2{width:100%;padding:20px;margin:0 auto}._jsonBlock_r4jp7_8{height:100%;padding:10px;border-radius:4px}._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}
|
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-5MKiPAM0.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-CrE9XJ4f.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.6.
|
|
3
|
+
"version": "1.6.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@milaboratories/milaboratories.ui-examples.model": "1.3.
|
|
8
|
-
"@platforma-sdk/model": "1.45.
|
|
7
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.3.5",
|
|
8
|
+
"@platforma-sdk/model": "1.45.35"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"typescript": "~5.6.3",
|
|
@@ -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/uikit": "2.6.2",
|
|
17
|
+
"@platforma-sdk/ui-vue": "1.45.35",
|
|
16
18
|
"@milaboratories/ts-builder": "1.0.5",
|
|
17
19
|
"@milaboratories/build-configs": "1.0.8",
|
|
18
|
-
"@milaboratories/ts-configs": "1.0.6",
|
|
19
|
-
"@milaboratories/uikit": "2.5.7",
|
|
20
20
|
"@milaboratories/helpers": "1.12.0",
|
|
21
|
-
"@
|
|
21
|
+
"@milaboratories/ts-configs": "1.0.6"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
|
24
24
|
"dev": "ts-builder serve --target browser",
|
package/src/app.ts
CHANGED
|
@@ -3,6 +3,7 @@ import { platforma } from '@milaboratories/milaboratories.ui-examples.model';
|
|
|
3
3
|
import { animate, defineApp, makeEaseOut } from '@platforma-sdk/ui-vue';
|
|
4
4
|
import { computed, reactive, ref } from 'vue';
|
|
5
5
|
import AddSectionPage from './pages/AddSectionPage.vue';
|
|
6
|
+
import AdvancedFilterPage from './pages/PlAdvancedFilterPage.vue';
|
|
6
7
|
import { AgGridVuePage, AgGridVuePageWithBuilder } from './pages/AgGridVuePage';
|
|
7
8
|
import ButtonsPage from './pages/ButtonsPage.vue';
|
|
8
9
|
import DownloadsPage from './pages/DownloadsPage.vue';
|
|
@@ -120,6 +121,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
|
|
|
120
121
|
'/add-section': () => AddSectionPage,
|
|
121
122
|
'/section': () => SectionPage,
|
|
122
123
|
'/radio': () => RadioPage,
|
|
124
|
+
'/advanced-filter': () => AdvancedFilterPage,
|
|
123
125
|
},
|
|
124
126
|
};
|
|
125
127
|
}, {
|
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { AxisId, CanonicalizedJson } from '@platforma-sdk/model';
|
|
3
|
+
import { stringifyColumnId, type FilterSpec, type ListOptionBase, type SUniversalPColumnId } from '@platforma-sdk/model';
|
|
4
|
+
import { PlAdvancedFilter, PlBlockPage, PlCheckbox, PlDropdown } from '@platforma-sdk/ui-vue';
|
|
5
|
+
import { computed, ref, watch } from 'vue';
|
|
6
|
+
|
|
7
|
+
const column1Id = stringifyColumnId({ name: '1', axes: [] }) as SUniversalPColumnId;
|
|
8
|
+
const column2Id = stringifyColumnId({ name: '2', axes: [] }) as SUniversalPColumnId;
|
|
9
|
+
const column3Id = stringifyColumnId({ name: '3', axes: [] }) as SUniversalPColumnId;
|
|
10
|
+
|
|
11
|
+
const inconsistentColumnId = '{"name":"someColumn","axes":[]}' as SUniversalPColumnId;
|
|
12
|
+
|
|
13
|
+
const uniqueValuesByColumnOrAxisId: Record<string, ListOptionBase<string>[]> = {
|
|
14
|
+
[column1Id]: [{ value: '1', label: 'Value 1' }, { value: '2', label: 'Value 2' }],
|
|
15
|
+
[column2Id]: [{ value: '3', label: 'Value 3' }, { value: '4', label: 'Value 4' }],
|
|
16
|
+
[column3Id]: [{ value: '5', label: 'Value 5' }, { value: '6', label: 'Value 6' }],
|
|
17
|
+
};
|
|
18
|
+
const uniqueValuesByAxisIdx: Record<string, Record<number, ListOptionBase<string>[]>> = {
|
|
19
|
+
[column1Id]: { 0: [{ value: 'axisValue1', label: 'Axis Value 1' }, { value: 'axisValue2', label: 'Axis Value 2' }] },
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const options = [
|
|
23
|
+
{
|
|
24
|
+
id: column1Id,
|
|
25
|
+
label: 'Column 1',
|
|
26
|
+
error: false,
|
|
27
|
+
axesToBeFixed: [{
|
|
28
|
+
idx: 0,
|
|
29
|
+
label: 'Axis 1 label',
|
|
30
|
+
}],
|
|
31
|
+
spec: { kind: 'PColumn' as const, valueType: 'Int' as const, name: 'c1', axesSpec: [{ type: 'String' as const, name: 'nameAxis1' }] },
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
id: column2Id,
|
|
35
|
+
label: 'Column 2',
|
|
36
|
+
error: false,
|
|
37
|
+
spec: { kind: 'PColumn' as const, valueType: 'String' as const, name: 'c2', axesSpec: [] },
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
id: column3Id,
|
|
41
|
+
label: 'Column 3',
|
|
42
|
+
error: false,
|
|
43
|
+
spec: { kind: 'PColumn' as const, valueType: 'Double' as const, name: 'c3', axesSpec: [] },
|
|
44
|
+
},
|
|
45
|
+
];
|
|
46
|
+
const enableDnd = ref(false);
|
|
47
|
+
|
|
48
|
+
async function getSuggestOptions({ columnId, searchStr, axisIdx }: { columnId: SUniversalPColumnId | CanonicalizedJson<AxisId>; searchStr: string; axisIdx?: number }) {
|
|
49
|
+
if (axisIdx !== undefined) {
|
|
50
|
+
return (uniqueValuesByAxisIdx[columnId]?.[axisIdx] || []).filter((v) => v.label.includes(searchStr));
|
|
51
|
+
}
|
|
52
|
+
return (uniqueValuesByColumnOrAxisId[columnId] || []).filter((v) => v.label.includes(searchStr));
|
|
53
|
+
}
|
|
54
|
+
async function getSuggestModel({ columnId, searchStr, axisIdx }: { columnId: SUniversalPColumnId | CanonicalizedJson<AxisId>; searchStr: string; axisIdx?: number }) {
|
|
55
|
+
if (axisIdx !== undefined) {
|
|
56
|
+
const axisValues = uniqueValuesByAxisIdx[columnId]?.[axisIdx];
|
|
57
|
+
return axisValues.find((v) => v.value === searchStr) || { value: searchStr, label: `Label of ${searchStr}` };
|
|
58
|
+
}
|
|
59
|
+
const columnValues = uniqueValuesByColumnOrAxisId[columnId];
|
|
60
|
+
return columnValues.find((v) => v.value === searchStr) || { value: searchStr, label: `Label of ${searchStr}` };
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const errorState = {
|
|
64
|
+
type: 'and' as const,
|
|
65
|
+
filters: [
|
|
66
|
+
{
|
|
67
|
+
type: 'and' as const,
|
|
68
|
+
filters: [
|
|
69
|
+
{
|
|
70
|
+
type: 'patternEquals' as const,
|
|
71
|
+
column: inconsistentColumnId, // error - column id is not from available columns
|
|
72
|
+
value: 'A',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
type: 'or' as const,
|
|
76
|
+
filters: [
|
|
77
|
+
{
|
|
78
|
+
type: 'patternEquals' as const,
|
|
79
|
+
column: inconsistentColumnId, // error - column id is not from available columns
|
|
80
|
+
value: 'A',
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
}, {
|
|
86
|
+
type: 'and' as const,
|
|
87
|
+
filters: [
|
|
88
|
+
{
|
|
89
|
+
type: 'isNA' as const,
|
|
90
|
+
column: inconsistentColumnId, // error - column id is not from available columns
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
type: 'isNotNA' as const,
|
|
94
|
+
column: inconsistentColumnId, // error - column id is not from available columns
|
|
95
|
+
},
|
|
96
|
+
],
|
|
97
|
+
}, {
|
|
98
|
+
type: 'and' as const,
|
|
99
|
+
filters: [
|
|
100
|
+
{
|
|
101
|
+
type: 'patternContainSubsequence' as const,
|
|
102
|
+
column: inconsistentColumnId, // error - column id is not from available columns
|
|
103
|
+
value: 'someString',
|
|
104
|
+
},
|
|
105
|
+
],
|
|
106
|
+
}],
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const normalState: FilterSpec = {
|
|
110
|
+
type: 'and' as const,
|
|
111
|
+
filters: [
|
|
112
|
+
{
|
|
113
|
+
type: 'or' as const,
|
|
114
|
+
filters: [{
|
|
115
|
+
type: 'isNA' as const,
|
|
116
|
+
column: column1Id,
|
|
117
|
+
}, {
|
|
118
|
+
type: 'equal' as const,
|
|
119
|
+
column: column2Id,
|
|
120
|
+
x: 10,
|
|
121
|
+
}],
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
type: 'and' as const,
|
|
125
|
+
filters: [
|
|
126
|
+
{
|
|
127
|
+
type: 'isNotNA' as const,
|
|
128
|
+
column: column3Id,
|
|
129
|
+
}, {
|
|
130
|
+
type: 'patternFuzzyContainSubsequence' as const,
|
|
131
|
+
column: column3Id,
|
|
132
|
+
value: 'abc',
|
|
133
|
+
},
|
|
134
|
+
],
|
|
135
|
+
},
|
|
136
|
+
],
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
const filterStates: Record<string, FilterSpec> = {
|
|
140
|
+
normalState: normalState,
|
|
141
|
+
errorState: errorState,
|
|
142
|
+
emptyState: {
|
|
143
|
+
type: 'and',
|
|
144
|
+
filters: [],
|
|
145
|
+
},
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
const filtersModel = computed<FilterSpec>({
|
|
149
|
+
get: () => {
|
|
150
|
+
return filterStates[selectedSavedFilters.value];
|
|
151
|
+
},
|
|
152
|
+
set: (v) => {
|
|
153
|
+
console.log('updated filters state: ', v);
|
|
154
|
+
},
|
|
155
|
+
});
|
|
156
|
+
|
|
157
|
+
const selectedSavedFilters = ref<keyof typeof filterStates>('normalState');
|
|
158
|
+
const filterStatesOptions = [
|
|
159
|
+
{ value: 'normalState', label: 'Normal state' },
|
|
160
|
+
{ value: 'errorState', label: 'State with errors' },
|
|
161
|
+
{ value: 'emptyState', label: 'Empty state' },
|
|
162
|
+
];
|
|
163
|
+
|
|
164
|
+
watch(() => filtersModel.value, (m) => {
|
|
165
|
+
console.log('Model changed: ', m);
|
|
166
|
+
});
|
|
167
|
+
</script>
|
|
168
|
+
|
|
169
|
+
<template>
|
|
170
|
+
<PlBlockPage>
|
|
171
|
+
<div :class="$style.controls">
|
|
172
|
+
<PlCheckbox v-model="enableDnd" >Drag-n-Drop mode</PlCheckbox>
|
|
173
|
+
<PlDropdown v-model="selectedSavedFilters" :options="filterStatesOptions" label="Examples" :style="{width: '300px'}" />
|
|
174
|
+
</div>
|
|
175
|
+
<div :class="$style.block">
|
|
176
|
+
<div v-if="enableDnd" :class="$style.leftColumn">
|
|
177
|
+
<div
|
|
178
|
+
v-for="option in options"
|
|
179
|
+
:key="option.id"
|
|
180
|
+
:draggable="enableDnd ? 'true' : undefined"
|
|
181
|
+
:class="$style.columnChip"
|
|
182
|
+
@dragstart="(e) => e?.dataTransfer?.setData('text/plain', option.id)"
|
|
183
|
+
>
|
|
184
|
+
{{ option.label }}
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
<div :key="selectedSavedFilters" :class="$style.rightColumn" >
|
|
188
|
+
<PlAdvancedFilter
|
|
189
|
+
v-model="filtersModel"
|
|
190
|
+
:items="options"
|
|
191
|
+
:enable-dnd="enableDnd"
|
|
192
|
+
:get-suggest-options="getSuggestOptions"
|
|
193
|
+
:get-suggest-model="getSuggestModel"
|
|
194
|
+
/>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
</PlBlockPage>
|
|
198
|
+
</template>
|
|
199
|
+
<style module>
|
|
200
|
+
.controls {
|
|
201
|
+
display: flex;
|
|
202
|
+
gap: 16px;
|
|
203
|
+
}
|
|
204
|
+
.block {
|
|
205
|
+
display: flex;
|
|
206
|
+
height: 100%;
|
|
207
|
+
overflow: hidden;
|
|
208
|
+
}
|
|
209
|
+
.leftColumn {
|
|
210
|
+
display: flex;
|
|
211
|
+
flex-direction: column;
|
|
212
|
+
gap: 16px;
|
|
213
|
+
width: 280px;
|
|
214
|
+
padding: 10px;
|
|
215
|
+
margin: 10px;
|
|
216
|
+
border: 1px solid grey;
|
|
217
|
+
}
|
|
218
|
+
.rightColumn {
|
|
219
|
+
display: flex;
|
|
220
|
+
flex-direction: column;
|
|
221
|
+
width: 280px;
|
|
222
|
+
height: 100%;
|
|
223
|
+
overflow: auto;
|
|
224
|
+
}
|
|
225
|
+
.columnChip {
|
|
226
|
+
background: #fff;
|
|
227
|
+
border: 1px solid black;
|
|
228
|
+
border-radius: 6px;
|
|
229
|
+
padding: 6px;
|
|
230
|
+
}
|
|
231
|
+
</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}._page_r4jp7_2{width:100%;padding:20px;margin:0 auto}._jsonBlock_r4jp7_8{height:100%;padding:10px;border-radius:4px}._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}
|