@signal24/vue-foundation 4.25.7 → 4.25.8
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.
|
@@ -68,6 +68,24 @@
|
|
|
68
68
|
|
|
69
69
|
Selected value: {{ selectedCreateOption ?? '-' }}
|
|
70
70
|
</div>
|
|
71
|
+
|
|
72
|
+
<div>
|
|
73
|
+
<VfSmartSelect v-model="selectedLoadedOption" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
74
|
+
|
|
75
|
+
Selected value: {{ selectedLoadedOption ?? '-' }}
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<div>
|
|
79
|
+
<VfSmartSelect v-model="selectedLoadedOption2" :load-options="loadOptions" :formatter="o => o.label" :value-extractor="o => o.value" />
|
|
80
|
+
|
|
81
|
+
Selected value: {{ selectedLoadedOption2 ?? '-' }}
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div>
|
|
85
|
+
<VfSmartSelect v-model="selectedLoadedOption3" :load-options="loadOptions" :formatter="o => o.label" />
|
|
86
|
+
|
|
87
|
+
Selected value: {{ selectedLoadedOption3 ?? '-' }}
|
|
88
|
+
</div>
|
|
71
89
|
</div>
|
|
72
90
|
</template>
|
|
73
91
|
|
|
@@ -76,6 +94,7 @@ import { cloneDeep, compact } from 'lodash';
|
|
|
76
94
|
import { computed, onMounted, ref } from 'vue';
|
|
77
95
|
|
|
78
96
|
import VfSmartSelect from '@/components/vf-smart-select.vue';
|
|
97
|
+
import { sleepSecs } from '@/helpers';
|
|
79
98
|
|
|
80
99
|
interface IOption {
|
|
81
100
|
label: string;
|
|
@@ -104,6 +123,9 @@ const selectedDelayedOption1 = ref<IOption | null>(options[1]);
|
|
|
104
123
|
const selectedDelayedOption2 = ref<string | null>('2');
|
|
105
124
|
const selectedDelayedOption3 = ref<string | null>('19'); // intentionally invalid value
|
|
106
125
|
const selectedCreateOption = ref<string | null>(null);
|
|
126
|
+
const selectedLoadedOption = ref<string | null>(null);
|
|
127
|
+
const selectedLoadedOption2 = ref<string | null>('5');
|
|
128
|
+
const selectedLoadedOption3 = ref<IOption | null>({ value: '5', label: 'Option 5', group: 'Set 1' });
|
|
107
129
|
|
|
108
130
|
const createdOptionTitle = ref<string>();
|
|
109
131
|
const createOptions = computed(() =>
|
|
@@ -114,6 +136,11 @@ function setDelayedOptions() {
|
|
|
114
136
|
delayedOptions.value = cloneDeep(options);
|
|
115
137
|
}
|
|
116
138
|
|
|
139
|
+
async function loadOptions() {
|
|
140
|
+
await sleepSecs(0.25);
|
|
141
|
+
return [...options];
|
|
142
|
+
}
|
|
143
|
+
|
|
117
144
|
function createOption(name: string) {
|
|
118
145
|
createdOptionTitle.value = name;
|
|
119
146
|
selectedCreateOption.value = 'new';
|