@signal24/vue-foundation 4.27.0 → 4.28.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/.yarnrc.yml +1 -1
- package/demo/components/demo-vf-smart-select.vue +89 -9
- package/dist/src/components/vf-ajax-select.vue.d.ts +1 -1
- package/dist/src/components/vf-ez-smart-select.vue.d.ts +1 -1
- package/dist/src/components/vf-smart-select.vue.d.ts +1 -1
- package/dist/tsconfig.app.tsbuildinfo +1 -1
- package/dist/vue-foundation.es.js +603 -605
- package/package.json +9 -9
- package/src/components/vf-smart-select.vue +21 -10
package/.yarnrc.yml
CHANGED
|
@@ -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,23 +15,36 @@
|
|
|
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"
|
|
25
38
|
label-field="label"
|
|
26
39
|
group-field="group"
|
|
27
40
|
null-title="No selection"
|
|
41
|
+
@update:model-value="logModelValueChange"
|
|
28
42
|
/>
|
|
29
|
-
|
|
30
43
|
Selected value label: {{ selectedDelayedOption1?.label ?? '-' }}
|
|
31
44
|
</div>
|
|
32
45
|
|
|
33
46
|
<div>
|
|
47
|
+
<b>Local delayed options + value field + label field + group + null title + preselected</b>
|
|
34
48
|
<VfSmartSelect
|
|
35
49
|
v-model="selectedDelayedOption2"
|
|
36
50
|
:options="delayedOptions"
|
|
@@ -38,12 +52,13 @@
|
|
|
38
52
|
value-field="value"
|
|
39
53
|
group-field="group"
|
|
40
54
|
null-title="No selection"
|
|
55
|
+
@update:model-value="logModelValueChange"
|
|
41
56
|
/>
|
|
42
|
-
|
|
43
57
|
Selected value: {{ selectedDelayedOption2 ?? '-' }}
|
|
44
58
|
</div>
|
|
45
59
|
|
|
46
60
|
<div>
|
|
61
|
+
<b>Local delayed options + value field + label field + group + null title</b>
|
|
47
62
|
<VfSmartSelect
|
|
48
63
|
v-model="selectedDelayedOption3"
|
|
49
64
|
:options="delayedOptions"
|
|
@@ -52,11 +67,11 @@
|
|
|
52
67
|
group-field="group"
|
|
53
68
|
null-title="No selection"
|
|
54
69
|
/>
|
|
55
|
-
|
|
56
70
|
Selected value: {{ selectedDelayedOption3 ?? '-' }}
|
|
57
71
|
</div>
|
|
58
72
|
|
|
59
73
|
<div>
|
|
74
|
+
<b>Local delayed options + formatter + create item</b>
|
|
60
75
|
<VfSmartSelect
|
|
61
76
|
v-model="selectedCreateOption"
|
|
62
77
|
:options="createOptions"
|
|
@@ -65,25 +80,79 @@
|
|
|
65
80
|
:on-create-item="createOption"
|
|
66
81
|
:show-create-text-on-new-item="true"
|
|
67
82
|
/>
|
|
68
|
-
|
|
69
83
|
Selected value: {{ selectedCreateOption ?? '-' }}
|
|
70
84
|
</div>
|
|
71
85
|
|
|
72
86
|
<div>
|
|
87
|
+
<b>Load options + formatter + value extractor</b>
|
|
73
88
|
<VfSmartSelect v-model="selectedLoadedOption" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
89
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
90
|
+
</div>
|
|
74
91
|
|
|
92
|
+
<div>
|
|
93
|
+
<b>Load options + formatter + value extractor + placeholder</b>
|
|
94
|
+
<VfSmartSelect
|
|
95
|
+
v-model="selectedLoadedOption"
|
|
96
|
+
:load-options="loadOptions"
|
|
97
|
+
:formatter="o => o.label"
|
|
98
|
+
:value-extractor="o => o.value"
|
|
99
|
+
placeholder="Select an option"
|
|
100
|
+
/>
|
|
75
101
|
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
76
102
|
</div>
|
|
77
103
|
|
|
78
104
|
<div>
|
|
105
|
+
<b>Load options (w/ preload) + formatter + value extractor</b>
|
|
106
|
+
<VfSmartSelect
|
|
107
|
+
v-model="selectedLoadedOption"
|
|
108
|
+
:load-options="loadOptions"
|
|
109
|
+
:formatter="o => o.label"
|
|
110
|
+
:value-extractor="o => o.value"
|
|
111
|
+
preload
|
|
112
|
+
/>
|
|
113
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div>
|
|
117
|
+
<b>Load options (w/ preload)</b>
|
|
118
|
+
<VfSmartSelect
|
|
119
|
+
v-model="selectedLoadedOption"
|
|
120
|
+
:load-options="loadOptions"
|
|
121
|
+
:formatter="o => o.label"
|
|
122
|
+
:value-extractor="o => o.value"
|
|
123
|
+
preload
|
|
124
|
+
placeholder="Select an option"
|
|
125
|
+
/>
|
|
126
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div>
|
|
130
|
+
<b>Load options (no preload) with predefined value + value field</b>
|
|
79
131
|
<VfSmartSelect v-model="selectedLoadedOption2" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
132
|
+
Selected value: {{ selectedLoadedOption2 ?? '-' }}
|
|
133
|
+
</div>
|
|
80
134
|
|
|
135
|
+
<div>
|
|
136
|
+
<b>Load options (w/ preload) with predefined value + value field</b>
|
|
137
|
+
<VfSmartSelect
|
|
138
|
+
v-model="selectedLoadedOption2"
|
|
139
|
+
:load-options="loadOptions"
|
|
140
|
+
:formatter="o => o.label"
|
|
141
|
+
:value-extractor="o => o.value"
|
|
142
|
+
preload
|
|
143
|
+
/>
|
|
81
144
|
Selected value: {{ selectedLoadedOption2 ?? '-' }}
|
|
82
145
|
</div>
|
|
83
146
|
|
|
84
147
|
<div>
|
|
148
|
+
<b>Load options (no preload) with predefined value</b>
|
|
85
149
|
<VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" />
|
|
150
|
+
Selected value: {{ selectedLoadedOption3 ?? '-' }}
|
|
151
|
+
</div>
|
|
86
152
|
|
|
153
|
+
<div>
|
|
154
|
+
<b>Load options (w/ preload) with predefined value</b>
|
|
155
|
+
<VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" preload />
|
|
87
156
|
Selected value: {{ selectedLoadedOption3 ?? '-' }}
|
|
88
157
|
</div>
|
|
89
158
|
</div>
|
|
@@ -137,7 +206,7 @@ function setDelayedOptions() {
|
|
|
137
206
|
}
|
|
138
207
|
|
|
139
208
|
async function loadOptions() {
|
|
140
|
-
await sleepSecs(
|
|
209
|
+
await sleepSecs(2);
|
|
141
210
|
return [...options];
|
|
142
211
|
}
|
|
143
212
|
|
|
@@ -146,15 +215,26 @@ function createOption(name: string) {
|
|
|
146
215
|
selectedCreateOption.value = 'new';
|
|
147
216
|
}
|
|
148
217
|
|
|
149
|
-
|
|
218
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
219
|
+
function logModelValueChange(newValue: any) {
|
|
220
|
+
console.log('Model value changed:', newValue);
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
onMounted(() => setTimeout(setDelayedOptions, 2000));
|
|
150
224
|
</script>
|
|
151
225
|
|
|
152
226
|
<style lang="scss" scoped>
|
|
153
227
|
#demo-vf-smart-select {
|
|
154
|
-
max-width: 450px;
|
|
155
|
-
|
|
156
228
|
> div {
|
|
157
229
|
margin-top: 12px;
|
|
158
230
|
}
|
|
231
|
+
|
|
232
|
+
.vf-smart-select {
|
|
233
|
+
max-width: 400px;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
b {
|
|
237
|
+
display: block;
|
|
238
|
+
}
|
|
159
239
|
}
|
|
160
240
|
</style>
|