@redseed/redseed-ui-vue3 8.18.0 → 8.19.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/package.json
CHANGED
|
@@ -34,10 +34,14 @@ const props = defineProps({
|
|
|
34
34
|
minSearchLength: {
|
|
35
35
|
type: Number,
|
|
36
36
|
default: 2
|
|
37
|
+
},
|
|
38
|
+
navigable: {
|
|
39
|
+
type: Boolean,
|
|
40
|
+
default: false
|
|
37
41
|
}
|
|
38
42
|
})
|
|
39
43
|
|
|
40
|
-
const emit = defineEmits(['input', 'change', 'keyup-enter'])
|
|
44
|
+
const emit = defineEmits(['input', 'change', 'keyup-enter', 'navigate'])
|
|
41
45
|
|
|
42
46
|
const isOpen = ref(false)
|
|
43
47
|
const searchText = ref('')
|
|
@@ -72,6 +76,26 @@ const filteredOptions = computed(() => {
|
|
|
72
76
|
)
|
|
73
77
|
})
|
|
74
78
|
|
|
79
|
+
// Group filtered options by their group field
|
|
80
|
+
const groupedOptions = computed(() => {
|
|
81
|
+
const options = filteredOptions.value
|
|
82
|
+
if (!options.some(o => o.group)) return null
|
|
83
|
+
|
|
84
|
+
const groups = []
|
|
85
|
+
let currentGroup = null
|
|
86
|
+
|
|
87
|
+
for (const option of options) {
|
|
88
|
+
const groupName = option.group || ''
|
|
89
|
+
if (!currentGroup || currentGroup.name !== groupName) {
|
|
90
|
+
currentGroup = { name: groupName, options: [] }
|
|
91
|
+
groups.push(currentGroup)
|
|
92
|
+
}
|
|
93
|
+
currentGroup.options.push(option)
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
return groups
|
|
97
|
+
})
|
|
98
|
+
|
|
75
99
|
// Computed property to determine what to show in dropdown
|
|
76
100
|
const dropdownContent = computed(() => {
|
|
77
101
|
if (props.searchFunction) {
|
|
@@ -144,6 +168,12 @@ function close() {
|
|
|
144
168
|
}
|
|
145
169
|
|
|
146
170
|
function choose(option) {
|
|
171
|
+
if (props.navigable) {
|
|
172
|
+
emit('navigate', option.value, option)
|
|
173
|
+
close()
|
|
174
|
+
return
|
|
175
|
+
}
|
|
176
|
+
|
|
147
177
|
// If clicking on the currently selected option, deselect it
|
|
148
178
|
if (option.value === model.value) {
|
|
149
179
|
model.value = ''
|
|
@@ -409,15 +439,40 @@ defineExpose({
|
|
|
409
439
|
</div>
|
|
410
440
|
</div>
|
|
411
441
|
|
|
412
|
-
<!--
|
|
442
|
+
<!-- Grouped options -->
|
|
443
|
+
<template v-else-if="dropdownContent === 'options' && groupedOptions">
|
|
444
|
+
<template v-for="group in groupedOptions" :key="group.name">
|
|
445
|
+
<div v-if="group.name" class="rsui-form-field-combobox__group-header">
|
|
446
|
+
{{ group.name }}
|
|
447
|
+
</div>
|
|
448
|
+
<div
|
|
449
|
+
v-for="option in group.options"
|
|
450
|
+
:key="option.value"
|
|
451
|
+
class="rsui-form-field-combobox__option"
|
|
452
|
+
@click="choose(option)"
|
|
453
|
+
>
|
|
454
|
+
<div
|
|
455
|
+
class="rsui-form-field-combobox__option-label"
|
|
456
|
+
:title="option.label"
|
|
457
|
+
>
|
|
458
|
+
{{ option.label }}
|
|
459
|
+
</div>
|
|
460
|
+
<div class="rsui-form-field-combobox__option-icon">
|
|
461
|
+
<CheckIcon v-if="!navigable && option.value === model"></CheckIcon>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</template>
|
|
465
|
+
</template>
|
|
466
|
+
|
|
467
|
+
<!-- Flat options -->
|
|
413
468
|
<template v-else-if="dropdownContent === 'options'">
|
|
414
|
-
<div
|
|
469
|
+
<div
|
|
415
470
|
v-for="option in filteredOptions"
|
|
416
471
|
:key="option.value"
|
|
417
472
|
class="rsui-form-field-combobox__option"
|
|
418
473
|
@click="choose(option)"
|
|
419
474
|
>
|
|
420
|
-
<div
|
|
475
|
+
<div
|
|
421
476
|
class="rsui-form-field-combobox__option-label"
|
|
422
477
|
:title="option.label"
|
|
423
478
|
>
|