@milaboratories/milaboratories.ui-examples.ui 1.4.14 → 1.4.16
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/CHANGELOG.md +14 -0
- package/dist/assets/{index-BmM28NC5.js → index-3D9sE0hD.js} +208 -203
- package/dist/assets/{index-BmM28NC5.js.map → index-3D9sE0hD.js.map} +1 -1
- package/dist/assets/index-Cxit5NJ-.css +1 -0
- package/dist/index.html +2 -2
- package/package.json +6 -6
- package/src/app.ts +2 -0
- package/src/pages/FormComponentsPage/Dropdowns.vue +4 -19
- package/src/pages/IconsPage.vue +4 -0
- package/src/pages/PlElementListPage.vue +273 -0
- package/dist/assets/index-DueoO-PJ.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-3D9sE0hD.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-Cxit5NJ-.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.4.
|
|
3
|
+
"version": "1.4.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@
|
|
8
|
-
"@
|
|
7
|
+
"@platforma-sdk/model": "^1.34.10",
|
|
8
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.1.74"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
11
11
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"ag-grid-enterprise": "^33.0.4",
|
|
18
18
|
"ag-grid-vue3": "^33.0.4",
|
|
19
19
|
"rollup-plugin-sourcemaps2": "^0.5.2",
|
|
20
|
-
"@
|
|
21
|
-
"@
|
|
22
|
-
"@milaboratories/uikit": "^2.2.
|
|
20
|
+
"@platforma-sdk/ui-vue": "^1.34.17",
|
|
21
|
+
"@milaboratories/helpers": "^1.6.13",
|
|
22
|
+
"@milaboratories/uikit": "^2.2.87"
|
|
23
23
|
},
|
|
24
24
|
"scripts": {
|
|
25
25
|
"dev": "vite",
|
package/src/app.ts
CHANGED
|
@@ -30,6 +30,7 @@ import PlAutocompletePage from './pages/PlAutocompletePage.vue';
|
|
|
30
30
|
import RadioPage from './pages/RadioPage.vue';
|
|
31
31
|
import PlFileInputPage from './pages/PlFileInputPage.vue';
|
|
32
32
|
import PlErrorBoundaryPage from './pages/PlErrorBoundaryPage.vue';
|
|
33
|
+
import PlElementListPage from './pages/PlElementListPage.vue';
|
|
33
34
|
|
|
34
35
|
export const sdkPlugin = defineApp(platforma, (app) => {
|
|
35
36
|
// Additional data
|
|
@@ -96,6 +97,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
|
|
|
96
97
|
'/pl-splash-page': () => PlSplashPage,
|
|
97
98
|
'/pl-file-input-page': () => PlFileInputPage,
|
|
98
99
|
'/pl-error-boundary-page': () => PlErrorBoundaryPage,
|
|
100
|
+
'/pl-element-list-page': () => PlElementListPage,
|
|
99
101
|
'/select-files': () => SelectFilesPage,
|
|
100
102
|
'/errors': () => ErrorsPage,
|
|
101
103
|
'/text-fields': () => PlTextFieldPage,
|
|
@@ -105,6 +105,7 @@ const toggleRefValue = (r: Ref<unknown>) => {
|
|
|
105
105
|
const showOptionsLoading = () => {
|
|
106
106
|
toggleRefValue(simpleOptions);
|
|
107
107
|
toggleRefValue(refOptions);
|
|
108
|
+
toggleRefValue(refOptionsMulti);
|
|
108
109
|
};
|
|
109
110
|
</script>
|
|
110
111
|
|
|
@@ -153,14 +154,14 @@ const showOptionsLoading = () => {
|
|
|
153
154
|
<PlDropdownMulti
|
|
154
155
|
v-model="data.multi"
|
|
155
156
|
:disabled="data.disabled"
|
|
156
|
-
:options="simpleOptions
|
|
157
|
+
:options="simpleOptions"
|
|
157
158
|
label="PlDropdownMulti"
|
|
158
159
|
/>
|
|
159
160
|
|
|
160
161
|
<PlDropdownMulti
|
|
161
162
|
v-model="data.multi"
|
|
162
163
|
:disabled="data.disabled"
|
|
163
|
-
:options="simpleOptions
|
|
164
|
+
:options="simpleOptions"
|
|
164
165
|
label="PlDropdownMulti"
|
|
165
166
|
>
|
|
166
167
|
<template #append>
|
|
@@ -171,25 +172,9 @@ const showOptionsLoading = () => {
|
|
|
171
172
|
<PlDropdownMultiRef
|
|
172
173
|
v-model="data.multiRefSelected"
|
|
173
174
|
:disabled="data.disabled"
|
|
174
|
-
:options="refOptionsMulti
|
|
175
|
+
:options="refOptionsMulti"
|
|
175
176
|
label="PlDropdownMultiRef"
|
|
176
177
|
/>
|
|
177
|
-
|
|
178
|
-
<PlDropdownMulti
|
|
179
|
-
v-model="data.multi"
|
|
180
|
-
:disabled="data.disabled"
|
|
181
|
-
:options="undefined"
|
|
182
|
-
label="PlDropdownMulti"
|
|
183
|
-
/>
|
|
184
|
-
|
|
185
|
-
<PlDropdownMultiRef
|
|
186
|
-
v-model="data.multi"
|
|
187
|
-
:disabled="data.disabled"
|
|
188
|
-
:options="undefined"
|
|
189
|
-
label="PlDropdownMultiRef"
|
|
190
|
-
/>
|
|
191
|
-
|
|
192
|
-
<div v-if="false" style="height: 1200px; background-color: green; width: 50px"/>
|
|
193
178
|
</PlContainer>
|
|
194
179
|
</PlRow>
|
|
195
180
|
<PlRow>
|
package/src/pages/IconsPage.vue
CHANGED
|
@@ -8,6 +8,7 @@ import {
|
|
|
8
8
|
PlRow,
|
|
9
9
|
PlSvg,
|
|
10
10
|
PlTooltip,
|
|
11
|
+
PlMaskIcon24,
|
|
11
12
|
} from '@platforma-sdk/ui-vue';
|
|
12
13
|
import { computed, ref } from 'vue';
|
|
13
14
|
|
|
@@ -29,6 +30,9 @@ const filteredIcons24 = computed(() => icons24.filter((v) => v.includes(iconFilt
|
|
|
29
30
|
<template #title>Icons/Masks page</template>
|
|
30
31
|
|
|
31
32
|
<h4>Icons</h4>
|
|
33
|
+
<div style="--icon-color: red;">
|
|
34
|
+
<PlMaskIcon24 name="clipboard" />
|
|
35
|
+
</div>
|
|
32
36
|
<input v-model="iconFilter" :class="$style.input" placeholder="icon filter" />
|
|
33
37
|
<div :class="$style.inputs">
|
|
34
38
|
<input
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { PlBlockPage, PlElementList } from '@platforma-sdk/ui-vue';
|
|
3
|
+
import { computed, ref, toRaw, watch } from 'vue';
|
|
4
|
+
import { randomRangeInt, range } from '@milaboratories/helpers';
|
|
5
|
+
|
|
6
|
+
type Item = { id: number; label: string; description?: string };
|
|
7
|
+
const description = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum';
|
|
8
|
+
|
|
9
|
+
function generateList(): Item[] {
|
|
10
|
+
return [...range(1, 10)].map((i) => ({
|
|
11
|
+
id: i,
|
|
12
|
+
label: `Item ${i};` + (Math.random() > 0.8 ? description : ''),
|
|
13
|
+
description: description.substring(0, randomRangeInt(100, description.length)),
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const list = ref(generateList());
|
|
18
|
+
|
|
19
|
+
watch(list, () => {
|
|
20
|
+
console.log('list changed', toRaw(list.value));
|
|
21
|
+
}, { deep: true });
|
|
22
|
+
|
|
23
|
+
const draggableItems = computed(() => new Set(list.value.slice(2, 5)));
|
|
24
|
+
const removableItems = computed(() => new Set(list.value.slice(4, 8)));
|
|
25
|
+
const getKey = (v: { id: number }) => v.id;
|
|
26
|
+
const pinnedSet = ref(new Set<Item>());
|
|
27
|
+
const pinnableSet = computed(() => new Set(list.value.slice(3, 7)));
|
|
28
|
+
const toggledSet = ref(new Set<Item>());
|
|
29
|
+
const toggableSet = computed(() => new Set(list.value.slice(1, 5)));
|
|
30
|
+
|
|
31
|
+
const enabledDebug = ref(false);
|
|
32
|
+
const enabledSorting = ref(true);
|
|
33
|
+
const enabledDragging = ref(true);
|
|
34
|
+
const enabledRemoving = ref(true);
|
|
35
|
+
const enabledPinning = ref(true);
|
|
36
|
+
const enabledToggling = ref(true);
|
|
37
|
+
|
|
38
|
+
const handleReset = () => {
|
|
39
|
+
list.value = generateList();
|
|
40
|
+
pinnedSet.value = new Set<Item>();
|
|
41
|
+
toggledSet.value = new Set<Item>();
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const handleShuffle = () => {
|
|
45
|
+
list.value = [...list.value].sort(() => Math.random() - 0.5);
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const handleSort = () => {
|
|
49
|
+
return enabledSorting.value;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const handleManualSort = (from: number, to: number) => {
|
|
53
|
+
const array = list.value;
|
|
54
|
+
const element = array.splice(from, 1)[0];
|
|
55
|
+
array.splice(to, 0, element);
|
|
56
|
+
return false;
|
|
57
|
+
};
|
|
58
|
+
const handleManualRemove = (item: Item, index: number) => {
|
|
59
|
+
list.value = list.value.filter((_, i) => i !== index) as Item[];
|
|
60
|
+
return false;
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
</script>
|
|
64
|
+
|
|
65
|
+
<template>
|
|
66
|
+
<PlBlockPage style="max-width: 100%">
|
|
67
|
+
<template #title>PlElementList</template>
|
|
68
|
+
<template #append>
|
|
69
|
+
<div :class="$style.buttons">
|
|
70
|
+
<button :class="$style.button" @click="enabledDebug = !enabledDebug">Debug</button>
|
|
71
|
+
<button :class="$style.button" @click="handleReset">Reset</button>
|
|
72
|
+
<button :class="$style.button" @click="handleShuffle">Shuffle</button>
|
|
73
|
+
<button :class="$style.button" @click="enabledSorting = !enabledSorting">
|
|
74
|
+
{{ enabledSorting ? 'Enabled' : 'Disabled' }} sorting
|
|
75
|
+
</button>
|
|
76
|
+
<button :class="$style.button" @click="enabledDragging = !enabledDragging">
|
|
77
|
+
{{ enabledDragging ? 'Enabled' : 'Disabled' }} dragging
|
|
78
|
+
</button>
|
|
79
|
+
<button :class="$style.button" @click="enabledRemoving = !enabledRemoving">
|
|
80
|
+
{{ enabledRemoving ? 'Enabled' : 'Disabled' }} removing
|
|
81
|
+
</button>
|
|
82
|
+
<button :class="$style.button" @click="enabledPinning = !enabledPinning">
|
|
83
|
+
{{ enabledPinning ? 'Enabled' : 'Disabled' }} pinning
|
|
84
|
+
</button>
|
|
85
|
+
<button :class="$style.button" @click="enabledToggling = !enabledToggling">
|
|
86
|
+
{{ enabledToggling ? 'Enabled' : 'Disabled' }} toggling
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</template>
|
|
90
|
+
<div v-if="enabledDebug">
|
|
91
|
+
<h4>Reference</h4>
|
|
92
|
+
<div>
|
|
93
|
+
<div v-for="(item) in list" :key="getKey(item)">
|
|
94
|
+
{{ item.id }} {{ item.label.substring(0, 30) }}
|
|
95
|
+
{{ pinnedSet.has(item) ? 'pinned' : '' }}
|
|
96
|
+
{{ toggledSet.has(item) ? 'toggled' : '' }}
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<h4>All at once</h4>
|
|
102
|
+
<PlElementList
|
|
103
|
+
v-model:items="list"
|
|
104
|
+
v-model:pinnedItems="pinnedSet"
|
|
105
|
+
v-model:toggledItems="toggledSet"
|
|
106
|
+
:enableDragging="enabledDragging"
|
|
107
|
+
:enableRemoving="enabledRemoving"
|
|
108
|
+
:enableToggling="enabledToggling"
|
|
109
|
+
:enablePinning="enabledPinning"
|
|
110
|
+
:getItemKey="getKey"
|
|
111
|
+
>
|
|
112
|
+
<template #item-title="{ item }">
|
|
113
|
+
<strong>{{ item.label }}</strong>
|
|
114
|
+
</template>
|
|
115
|
+
<template #item-content="{ item }">
|
|
116
|
+
<p>{{ item.description }}</p>
|
|
117
|
+
</template>
|
|
118
|
+
</PlElementList>
|
|
119
|
+
|
|
120
|
+
<div v-if="!enabledDebug">
|
|
121
|
+
<h4>Dragging</h4>
|
|
122
|
+
<PlElementList
|
|
123
|
+
v-model:items="list"
|
|
124
|
+
:enableDragging="enabledDragging"
|
|
125
|
+
:getItemKey="getKey"
|
|
126
|
+
:onSort="handleSort"
|
|
127
|
+
>
|
|
128
|
+
<template #item-title="{ item }">
|
|
129
|
+
<strong>{{ item.label }}</strong>
|
|
130
|
+
</template>
|
|
131
|
+
<template #item-content="{ item }">
|
|
132
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
133
|
+
</template>
|
|
134
|
+
</PlElementList>
|
|
135
|
+
|
|
136
|
+
<h4>Dragging + removing</h4>
|
|
137
|
+
<PlElementList
|
|
138
|
+
v-model:items="list"
|
|
139
|
+
:enableDragging="enabledDragging"
|
|
140
|
+
:enableRemoving="enabledRemoving"
|
|
141
|
+
:getItemKey="getKey"
|
|
142
|
+
:onSort="handleSort"
|
|
143
|
+
>
|
|
144
|
+
<template #item-title="{ item }">
|
|
145
|
+
<strong>{{ item.label }}</strong>
|
|
146
|
+
</template>
|
|
147
|
+
<template #item-content="{ item }">
|
|
148
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
149
|
+
</template>
|
|
150
|
+
</PlElementList>
|
|
151
|
+
|
|
152
|
+
<h4>Dragging + removing + partial disabling</h4>
|
|
153
|
+
<PlElementList
|
|
154
|
+
v-model:items="list"
|
|
155
|
+
v-model:draggableItems="draggableItems"
|
|
156
|
+
v-model:removableItems="removableItems"
|
|
157
|
+
:enableDragging="enabledDragging"
|
|
158
|
+
:enableRemoving="enabledRemoving"
|
|
159
|
+
:getItemKey="getKey"
|
|
160
|
+
>
|
|
161
|
+
<template #item-title="{ item }">
|
|
162
|
+
<strong>{{ item.label }}</strong>
|
|
163
|
+
</template>
|
|
164
|
+
<template #item-content="{ item }">
|
|
165
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
166
|
+
</template>
|
|
167
|
+
</PlElementList>
|
|
168
|
+
|
|
169
|
+
<h4>Pinning</h4>
|
|
170
|
+
<PlElementList
|
|
171
|
+
v-model:items="list"
|
|
172
|
+
v-model:pinnedItems="pinnedSet"
|
|
173
|
+
:enableDragging="enabledDragging"
|
|
174
|
+
:enableRemoving="enabledRemoving"
|
|
175
|
+
:enablePinning="enabledPinning"
|
|
176
|
+
:getItemKey="getKey"
|
|
177
|
+
>
|
|
178
|
+
<template #item-title="{ item }">
|
|
179
|
+
<strong>{{ item.label }}</strong>
|
|
180
|
+
</template>
|
|
181
|
+
<template #item-content="{ item }">
|
|
182
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
183
|
+
</template>
|
|
184
|
+
</PlElementList>
|
|
185
|
+
|
|
186
|
+
<h4>Partial pinning</h4>
|
|
187
|
+
<PlElementList
|
|
188
|
+
v-model:items="list"
|
|
189
|
+
v-model:pinnedItems="pinnedSet"
|
|
190
|
+
v-model:pinnableItems="pinnableSet"
|
|
191
|
+
:enableDragging="enabledDragging"
|
|
192
|
+
:enablePinning="enabledPinning"
|
|
193
|
+
:getItemKey="getKey"
|
|
194
|
+
>
|
|
195
|
+
<template #item-title="{ item }">
|
|
196
|
+
<strong>{{ item.label }}</strong>
|
|
197
|
+
</template>
|
|
198
|
+
<template #item-content="{ item }">
|
|
199
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
200
|
+
</template>
|
|
201
|
+
</PlElementList>
|
|
202
|
+
|
|
203
|
+
<h4>Toggable</h4>
|
|
204
|
+
<PlElementList
|
|
205
|
+
v-model:items="list"
|
|
206
|
+
v-model:toggledItems="toggledSet"
|
|
207
|
+
:enableDragging="enabledDragging"
|
|
208
|
+
:enableToggling="enabledToggling"
|
|
209
|
+
:getItemKey="getKey"
|
|
210
|
+
>
|
|
211
|
+
<template #item-title="{ item }">
|
|
212
|
+
<strong>{{ item.label }}</strong>
|
|
213
|
+
</template>
|
|
214
|
+
<template #item-content="{ item }">
|
|
215
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
216
|
+
</template>
|
|
217
|
+
</PlElementList>
|
|
218
|
+
|
|
219
|
+
<h4>Partial Toggable</h4>
|
|
220
|
+
<PlElementList
|
|
221
|
+
v-model:items="list"
|
|
222
|
+
v-model:toggledItems="toggledSet"
|
|
223
|
+
v-model:toggableItems="toggableSet"
|
|
224
|
+
:enableDragging="enabledDragging"
|
|
225
|
+
:enableToggling="enabledToggling"
|
|
226
|
+
:getItemKey="getKey"
|
|
227
|
+
>
|
|
228
|
+
<template #item-title="{ item }">
|
|
229
|
+
<strong>{{ item.label }}</strong>
|
|
230
|
+
</template>
|
|
231
|
+
<template #item-content="{ item }">
|
|
232
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
233
|
+
</template>
|
|
234
|
+
</PlElementList>
|
|
235
|
+
|
|
236
|
+
<h4>Manual controlled</h4>
|
|
237
|
+
<PlElementList
|
|
238
|
+
v-model:items="list"
|
|
239
|
+
v-model:toggledItems="toggledSet"
|
|
240
|
+
v-model:toggableItems="toggableSet"
|
|
241
|
+
v-model:pinnedItems="pinnedSet"
|
|
242
|
+
v-model:pinnableItems="pinnableSet"
|
|
243
|
+
:enableDragging="enabledDragging"
|
|
244
|
+
:enableRemoving="enabledRemoving"
|
|
245
|
+
:enableToggling="enabledToggling"
|
|
246
|
+
:enablePinning="enabledPinning"
|
|
247
|
+
:getItemKey="getKey"
|
|
248
|
+
:onRemove="handleManualRemove"
|
|
249
|
+
:onSort="handleManualSort"
|
|
250
|
+
>
|
|
251
|
+
<template #item-title="{ item }">
|
|
252
|
+
<strong>{{ item.label }}</strong>
|
|
253
|
+
</template>
|
|
254
|
+
<template #item-content="{ item }">
|
|
255
|
+
<p v-if="item.description !== undefined">{{ item.description }}</p>
|
|
256
|
+
</template>
|
|
257
|
+
</PlElementList>
|
|
258
|
+
</div>
|
|
259
|
+
</PlBlockPage>
|
|
260
|
+
</template>
|
|
261
|
+
|
|
262
|
+
<style module>
|
|
263
|
+
.buttons {
|
|
264
|
+
position: sticky;
|
|
265
|
+
display: flex;
|
|
266
|
+
flex-direction: row;
|
|
267
|
+
gap: 10px;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.button {
|
|
271
|
+
display: flex;
|
|
272
|
+
}
|
|
273
|
+
</style>
|