@milaboratories/milaboratories.ui-examples.ui 1.3.62 → 1.3.63
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 +8 -0
- package/dist/assets/{index-IEtQ3dux.css → index-IWWHnK1d.css} +1 -1
- package/dist/assets/index-iT1lRRrL.js +748 -0
- package/dist/assets/{index-dBGrUyBJ.js.map → index-iT1lRRrL.js.map} +1 -1
- package/dist/index.html +2 -2
- package/package.json +3 -3
- package/src/app.ts +2 -0
- package/src/pages/FormComponentsPage/Dropdowns.vue +23 -0
- package/src/pages/PlAutocompletePage.vue +55 -0
- package/dist/assets/index-dBGrUyBJ.js +0 -748
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-iT1lRRrL.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="./assets/index-IWWHnK1d.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="app"></div>
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/milaboratories.ui-examples.ui",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.63",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"vue": "^3.5.13",
|
|
7
|
-
"@milaboratories/milaboratories.ui-examples.model": "1.1.
|
|
7
|
+
"@milaboratories/milaboratories.ui-examples.model": "1.1.43",
|
|
8
8
|
"@platforma-sdk/model": "^1.29.2"
|
|
9
9
|
},
|
|
10
10
|
"devDependencies": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"ag-grid-enterprise": "^33.0.4",
|
|
18
18
|
"ag-grid-vue3": "^33.0.4",
|
|
19
19
|
"rollup-plugin-sourcemaps2": "^0.5.0",
|
|
20
|
-
"@platforma-sdk/ui-vue": "^1.29.
|
|
20
|
+
"@platforma-sdk/ui-vue": "^1.29.5",
|
|
21
21
|
"@milaboratories/helpers": "^1.6.11"
|
|
22
22
|
},
|
|
23
23
|
"scripts": {
|
package/src/app.ts
CHANGED
|
@@ -25,6 +25,7 @@ import { FormComponentsPage } from './pages/FormComponentsPage';
|
|
|
25
25
|
import { HistogramPage } from './pages/HistogramPage';
|
|
26
26
|
import { StackedBarPage } from './pages/StackedBarPage';
|
|
27
27
|
import PlSplashPage from './pages/PlSplashPage.vue';
|
|
28
|
+
import PlAutocompletePage from './pages/PlAutocompletePage.vue';
|
|
28
29
|
|
|
29
30
|
export const sdkPlugin = defineApp(platforma, (app) => {
|
|
30
31
|
// Additional data
|
|
@@ -93,6 +94,7 @@ export const sdkPlugin = defineApp(platforma, (app) => {
|
|
|
93
94
|
'/text-fields': () => PlTextFieldPage,
|
|
94
95
|
'/tabs': () => PlTabsPage,
|
|
95
96
|
'/drafts': () => DraftsPage,
|
|
97
|
+
'/pl-autocomplete': () => PlAutocompletePage,
|
|
96
98
|
'/buttons': () => ButtonsPage,
|
|
97
99
|
'/notifications': () => NotificationsPage,
|
|
98
100
|
'/stacked-bar': () => StackedBarPage,
|
|
@@ -9,6 +9,7 @@ import {
|
|
|
9
9
|
PlDropdownMultiRef,
|
|
10
10
|
PlDropdownRef,
|
|
11
11
|
PlRow,
|
|
12
|
+
PlMaskIcon16,
|
|
12
13
|
} from '@platforma-sdk/ui-vue';
|
|
13
14
|
import type { Ref } from 'vue';
|
|
14
15
|
import { reactive, ref } from 'vue';
|
|
@@ -123,6 +124,17 @@ const showOptionsLoading = () => {
|
|
|
123
124
|
label="PlDropdown"
|
|
124
125
|
:options="simpleOptions"
|
|
125
126
|
/>
|
|
127
|
+
<PlDropdown
|
|
128
|
+
v-model="data.model"
|
|
129
|
+
:disabled="data.disabled"
|
|
130
|
+
:clearable="data.clearable"
|
|
131
|
+
label="PlDropdown"
|
|
132
|
+
:options="simpleOptions"
|
|
133
|
+
>
|
|
134
|
+
<template #append>
|
|
135
|
+
<PlMaskIcon16 name="settings" />
|
|
136
|
+
</template>
|
|
137
|
+
</PlDropdown>
|
|
126
138
|
<PlDropdown
|
|
127
139
|
v-model="data.model"
|
|
128
140
|
:disabled="data.disabled"
|
|
@@ -145,6 +157,17 @@ const showOptionsLoading = () => {
|
|
|
145
157
|
label="PlDropdownMulti"
|
|
146
158
|
/>
|
|
147
159
|
|
|
160
|
+
<PlDropdownMulti
|
|
161
|
+
v-model="data.multi"
|
|
162
|
+
:disabled="data.disabled"
|
|
163
|
+
:options="simpleOptions ?? []"
|
|
164
|
+
label="PlDropdownMulti"
|
|
165
|
+
>
|
|
166
|
+
<template #append>
|
|
167
|
+
<PlMaskIcon16 name="settings" />
|
|
168
|
+
</template>
|
|
169
|
+
</PlDropdownMulti>
|
|
170
|
+
|
|
148
171
|
<PlDropdownMultiRef
|
|
149
172
|
v-model="data.multiRefSelected"
|
|
150
173
|
:disabled="data.disabled"
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import type { ListOption } from '@platforma-sdk/ui-vue';
|
|
3
|
+
import { PlBlockPage, PlAutocomplete } from '@platforma-sdk/ui-vue';
|
|
4
|
+
import { reactive } from 'vue';
|
|
5
|
+
import { delay } from '@milaboratories/helpers';
|
|
6
|
+
|
|
7
|
+
const data = reactive({
|
|
8
|
+
selected1: 'lorem ipsum',
|
|
9
|
+
selected2: 'lorem ipsum',
|
|
10
|
+
selected3: 'lorem ipsum',
|
|
11
|
+
selected4: 'lorem ipsum',
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
const VERY_LONG_OPTIONS_ARRAY = new Array(100000).fill(null).map((_v, idx) => ({ value: `item${idx}`, label: `Label for item ${idx}` }));
|
|
15
|
+
|
|
16
|
+
async function requestOptions(str: string): Promise<ListOption<string>[]> {
|
|
17
|
+
await delay(1000);
|
|
18
|
+
return Promise.resolve(VERY_LONG_OPTIONS_ARRAY.filter((el) => el.value.includes(str) || el.label.includes(str)).slice(0, 100));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
async function requestOptionsError(_str: string): Promise<ListOption<string>[]> {
|
|
22
|
+
throw new Error('test error');
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<PlBlockPage style="max-width: 100%">
|
|
29
|
+
<div class="d-flex flex-column gap-16" style="width: 400px">
|
|
30
|
+
<PlAutocomplete
|
|
31
|
+
v-model="data.selected1"
|
|
32
|
+
label="Autocomplete"
|
|
33
|
+
:optionsSearch="requestOptions"
|
|
34
|
+
/>
|
|
35
|
+
<PlAutocomplete
|
|
36
|
+
v-model="data.selected1"
|
|
37
|
+
label="Autocomplete clearable"
|
|
38
|
+
:optionsSearch="requestOptions"
|
|
39
|
+
:clearable="true"
|
|
40
|
+
/>
|
|
41
|
+
<PlAutocomplete
|
|
42
|
+
v-model="data.selected3"
|
|
43
|
+
label="Autocomplete with formatter"
|
|
44
|
+
:optionsSearch="requestOptions"
|
|
45
|
+
:clearable="true"
|
|
46
|
+
:formatValue="(v: string) => v + ' formatted'"
|
|
47
|
+
/>
|
|
48
|
+
<PlAutocomplete
|
|
49
|
+
v-model="data.selected4"
|
|
50
|
+
label="Autocomplete with broken request"
|
|
51
|
+
:optionsSearch="requestOptionsError"
|
|
52
|
+
/>
|
|
53
|
+
</div>
|
|
54
|
+
</PlBlockPage>
|
|
55
|
+
</template>
|