fix: update butterfly component for b-autocomplete, per oruga 0.11.4
actually i think these changes are from oruga 0.9.0, but i tested 0.11.4
This commit is contained in:
parent
905dee7e33
commit
7693b062ab
1 changed files with 25 additions and 16 deletions
|
@ -25,16 +25,10 @@
|
||||||
|
|
||||||
<%def name="make_b_autocomplete_component()">
|
<%def name="make_b_autocomplete_component()">
|
||||||
<script type="text/x-template" id="b-autocomplete-template">
|
<script type="text/x-template" id="b-autocomplete-template">
|
||||||
<o-autocomplete v-model="orugaValue"
|
<o-autocomplete v-model:input="orugaValue"
|
||||||
:data="data"
|
:options="options"
|
||||||
:field="field"
|
clear-icon="circle-xmark"
|
||||||
:open-on-focus="openOnFocus"
|
@update:input="orugaValueUpdated"
|
||||||
:keep-first="keepFirst"
|
|
||||||
:clearable="clearable"
|
|
||||||
:clear-on-select="clearOnSelect"
|
|
||||||
:formatter="customFormatter"
|
|
||||||
:placeholder="placeholder"
|
|
||||||
@update:model-value="orugaValueUpdated"
|
|
||||||
ref="autocomplete">
|
ref="autocomplete">
|
||||||
</o-autocomplete>
|
</o-autocomplete>
|
||||||
</script>
|
</script>
|
||||||
|
@ -45,12 +39,7 @@
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
data: Array,
|
data: Array,
|
||||||
field: String,
|
field: String,
|
||||||
openOnFocus: Boolean,
|
|
||||||
keepFirst: Boolean,
|
|
||||||
clearable: Boolean,
|
|
||||||
clearOnSelect: Boolean,
|
|
||||||
customFormatter: null,
|
customFormatter: null,
|
||||||
placeholder: String,
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -64,13 +53,33 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
options() {
|
||||||
|
const options = []
|
||||||
|
const field = this.field || 'label'
|
||||||
|
for (let opt of this.data) {
|
||||||
|
const newOpt = {
|
||||||
|
label: opt[field],
|
||||||
|
value: opt,
|
||||||
|
}
|
||||||
|
if (this.customFormatter) {
|
||||||
|
newOpt.label = this.customFormatter(opt)
|
||||||
|
}
|
||||||
|
options.push(newOpt)
|
||||||
|
}
|
||||||
|
return options
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
focus() {
|
focus() {
|
||||||
const input = this.$refs.autocomplete.$el.querySelector('input')
|
const input = this.$refs.autocomplete.$el.querySelector('input')
|
||||||
input.focus()
|
input.focus()
|
||||||
},
|
},
|
||||||
orugaValueUpdated(value) {
|
orugaValueUpdated(value) {
|
||||||
this.$emit('update:modelValue', value)
|
if (this.field) {
|
||||||
|
value = value[this.field]
|
||||||
|
}
|
||||||
|
this.$emit('update:modelValue', value || '')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue