@signal24/vue-foundation 4.26.0 → 4.27.1
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.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div id="demo-vf-smart-select">
|
|
3
3
|
<div>
|
|
4
|
+
<b>Local options + label field</b>
|
|
4
5
|
<VfSmartSelect v-model="selectedInstantOption1" :options="instantOptions" label-field="label" />
|
|
5
|
-
|
|
6
6
|
Selected value label: {{ selectedInstantOption1?.label ?? '-' }}
|
|
7
7
|
</div>
|
|
8
8
|
|
|
9
9
|
<div>
|
|
10
|
+
<b>Local options + label field + group + null title</b>
|
|
10
11
|
<VfSmartSelect
|
|
11
12
|
v-model="selectedInstantOption2"
|
|
12
13
|
:options="instantOptions"
|
|
@@ -14,11 +15,23 @@
|
|
|
14
15
|
group-field="group"
|
|
15
16
|
null-title="No selection"
|
|
16
17
|
/>
|
|
18
|
+
Selected value label: {{ selectedInstantOption2?.label ?? '-' }}
|
|
19
|
+
</div>
|
|
17
20
|
|
|
21
|
+
<div>
|
|
22
|
+
<b>Local delayed options + label field + group + null title</b>
|
|
23
|
+
<VfSmartSelect
|
|
24
|
+
v-model="selectedInstantOption2"
|
|
25
|
+
:options="delayedOptions"
|
|
26
|
+
label-field="label"
|
|
27
|
+
group-field="group"
|
|
28
|
+
null-title="No selection"
|
|
29
|
+
/>
|
|
18
30
|
Selected value label: {{ selectedInstantOption2?.label ?? '-' }}
|
|
19
31
|
</div>
|
|
20
32
|
|
|
21
33
|
<div>
|
|
34
|
+
<b>Local delayed options + label field + group + null title + preselected</b>
|
|
22
35
|
<VfSmartSelect
|
|
23
36
|
v-model="selectedDelayedOption1"
|
|
24
37
|
:options="delayedOptions"
|
|
@@ -26,11 +39,11 @@
|
|
|
26
39
|
group-field="group"
|
|
27
40
|
null-title="No selection"
|
|
28
41
|
/>
|
|
29
|
-
|
|
30
42
|
Selected value label: {{ selectedDelayedOption1?.label ?? '-' }}
|
|
31
43
|
</div>
|
|
32
44
|
|
|
33
45
|
<div>
|
|
46
|
+
<b>Local delayed options + value field + label field + group + null title + preselected</b>
|
|
34
47
|
<VfSmartSelect
|
|
35
48
|
v-model="selectedDelayedOption2"
|
|
36
49
|
:options="delayedOptions"
|
|
@@ -39,11 +52,11 @@
|
|
|
39
52
|
group-field="group"
|
|
40
53
|
null-title="No selection"
|
|
41
54
|
/>
|
|
42
|
-
|
|
43
55
|
Selected value: {{ selectedDelayedOption2 ?? '-' }}
|
|
44
56
|
</div>
|
|
45
57
|
|
|
46
58
|
<div>
|
|
59
|
+
<b>Local delayed options + value field + label field + group + null title</b>
|
|
47
60
|
<VfSmartSelect
|
|
48
61
|
v-model="selectedDelayedOption3"
|
|
49
62
|
:options="delayedOptions"
|
|
@@ -52,11 +65,11 @@
|
|
|
52
65
|
group-field="group"
|
|
53
66
|
null-title="No selection"
|
|
54
67
|
/>
|
|
55
|
-
|
|
56
68
|
Selected value: {{ selectedDelayedOption3 ?? '-' }}
|
|
57
69
|
</div>
|
|
58
70
|
|
|
59
71
|
<div>
|
|
72
|
+
<b>Local delayed options + formatter + create item</b>
|
|
60
73
|
<VfSmartSelect
|
|
61
74
|
v-model="selectedCreateOption"
|
|
62
75
|
:options="createOptions"
|
|
@@ -65,25 +78,79 @@
|
|
|
65
78
|
:on-create-item="createOption"
|
|
66
79
|
:show-create-text-on-new-item="true"
|
|
67
80
|
/>
|
|
68
|
-
|
|
69
81
|
Selected value: {{ selectedCreateOption ?? '-' }}
|
|
70
82
|
</div>
|
|
71
83
|
|
|
72
84
|
<div>
|
|
85
|
+
<b>Load options + formatter + value extractor</b>
|
|
73
86
|
<VfSmartSelect v-model="selectedLoadedOption" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
87
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
88
|
+
</div>
|
|
74
89
|
|
|
90
|
+
<div>
|
|
91
|
+
<b>Load options + formatter + value extractor + placeholder</b>
|
|
92
|
+
<VfSmartSelect
|
|
93
|
+
v-model="selectedLoadedOption"
|
|
94
|
+
:load-options="loadOptions"
|
|
95
|
+
:formatter="o => o.label"
|
|
96
|
+
:value-extractor="o => o.value"
|
|
97
|
+
placeholder="Select an option"
|
|
98
|
+
/>
|
|
75
99
|
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
76
100
|
</div>
|
|
77
101
|
|
|
78
102
|
<div>
|
|
103
|
+
<b>Load options (w/ preload) + formatter + value extractor</b>
|
|
104
|
+
<VfSmartSelect
|
|
105
|
+
v-model="selectedLoadedOption"
|
|
106
|
+
:load-options="loadOptions"
|
|
107
|
+
:formatter="o => o.label"
|
|
108
|
+
:value-extractor="o => o.value"
|
|
109
|
+
preload
|
|
110
|
+
/>
|
|
111
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
112
|
+
</div>
|
|
113
|
+
|
|
114
|
+
<div>
|
|
115
|
+
<b>Load options (w/ preload)</b>
|
|
116
|
+
<VfSmartSelect
|
|
117
|
+
v-model="selectedLoadedOption"
|
|
118
|
+
:load-options="loadOptions"
|
|
119
|
+
:formatter="o => o.label"
|
|
120
|
+
:value-extractor="o => o.value"
|
|
121
|
+
preload
|
|
122
|
+
placeholder="Select an option"
|
|
123
|
+
/>
|
|
124
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div>
|
|
128
|
+
<b>Load options (no preload) with predefined value + value field</b>
|
|
79
129
|
<VfSmartSelect v-model="selectedLoadedOption2" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
130
|
+
Selected value: {{ selectedLoadedOption2 ?? '-' }}
|
|
131
|
+
</div>
|
|
80
132
|
|
|
133
|
+
<div>
|
|
134
|
+
<b>Load options (w/ preload) with predefined value + value field</b>
|
|
135
|
+
<VfSmartSelect
|
|
136
|
+
v-model="selectedLoadedOption2"
|
|
137
|
+
:load-options="loadOptions"
|
|
138
|
+
:formatter="o => o.label"
|
|
139
|
+
:value-extractor="o => o.value"
|
|
140
|
+
preload
|
|
141
|
+
/>
|
|
81
142
|
Selected value: {{ selectedLoadedOption2 ?? '-' }}
|
|
82
143
|
</div>
|
|
83
144
|
|
|
84
145
|
<div>
|
|
146
|
+
<b>Load options (no preload) with predefined value</b>
|
|
85
147
|
<VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" />
|
|
148
|
+
Selected value: {{ selectedLoadedOption3 ?? '-' }}
|
|
149
|
+
</div>
|
|
86
150
|
|
|
151
|
+
<div>
|
|
152
|
+
<b>Load options (w/ preload) with predefined value</b>
|
|
153
|
+
<VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" preload />
|
|
87
154
|
Selected value: {{ selectedLoadedOption3 ?? '-' }}
|
|
88
155
|
</div>
|
|
89
156
|
</div>
|
|
@@ -137,7 +204,7 @@ function setDelayedOptions() {
|
|
|
137
204
|
}
|
|
138
205
|
|
|
139
206
|
async function loadOptions() {
|
|
140
|
-
await sleepSecs(
|
|
207
|
+
await sleepSecs(2);
|
|
141
208
|
return [...options];
|
|
142
209
|
}
|
|
143
210
|
|
|
@@ -146,15 +213,21 @@ function createOption(name: string) {
|
|
|
146
213
|
selectedCreateOption.value = 'new';
|
|
147
214
|
}
|
|
148
215
|
|
|
149
|
-
onMounted(() => setTimeout(setDelayedOptions,
|
|
216
|
+
onMounted(() => setTimeout(setDelayedOptions, 2000));
|
|
150
217
|
</script>
|
|
151
218
|
|
|
152
219
|
<style lang="scss" scoped>
|
|
153
220
|
#demo-vf-smart-select {
|
|
154
|
-
max-width: 450px;
|
|
155
|
-
|
|
156
221
|
> div {
|
|
157
222
|
margin-top: 12px;
|
|
158
223
|
}
|
|
224
|
+
|
|
225
|
+
.vf-smart-select {
|
|
226
|
+
max-width: 400px;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
b {
|
|
230
|
+
display: block;
|
|
231
|
+
}
|
|
159
232
|
}
|
|
160
233
|
</style>
|