|
@@ -16,28 +16,35 @@
|
|
:disabled="item.disabled"
|
|
:disabled="item.disabled"
|
|
:multiple="item.multiple"
|
|
:multiple="item.multiple"
|
|
:clearable="item.clearable"
|
|
:clearable="item.clearable"
|
|
- :search="item.searchInput"
|
|
|
|
color="primary"
|
|
color="primary"
|
|
:hide-no-data="item.hideNoData"
|
|
:hide-no-data="item.hideNoData"
|
|
:no-data-text="item.noDataText || 'No data available'"
|
|
:no-data-text="item.noDataText || 'No data available'"
|
|
:hide-selected="item.hideSelected"
|
|
:hide-selected="item.hideSelected"
|
|
|
|
+ @update:search="v => item.search ? debouncedCallbackSearch(v) : null"
|
|
@update:modelValue="modelValueUpDate"
|
|
@update:modelValue="modelValueUpDate"
|
|
></v-autocomplete>
|
|
></v-autocomplete>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
|
|
+import { debounce } from 'lodash'
|
|
import { ref, defineEmits } from 'vue';
|
|
import { ref, defineEmits } from 'vue';
|
|
defineOptions({ name:'FormUI-v-autocomplete'})
|
|
defineOptions({ name:'FormUI-v-autocomplete'})
|
|
|
|
|
|
const props = defineProps({item: Object, modelValue: [String, Number]})
|
|
const props = defineProps({item: Object, modelValue: [String, Number]})
|
|
-const emit = defineEmits(['update:modelValue', 'change'])
|
|
|
|
|
|
+const emit = defineEmits(['update:modelValue', 'change', 'search'])
|
|
const item = props.item
|
|
const item = props.item
|
|
|
|
+const searchDebouncedTime = item.searchDebouncedTime === 0 ? 0 : 500
|
|
|
|
+
|
|
const value = ref(props.modelValue)
|
|
const value = ref(props.modelValue)
|
|
const modelValueUpDate = (val) => {
|
|
const modelValueUpDate = (val) => {
|
|
value.value = val
|
|
value.value = val
|
|
emit('update:modelValue', value.value)
|
|
emit('update:modelValue', value.value)
|
|
emit('change', value.value)
|
|
emit('change', value.value)
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+const debouncedCallbackSearch = debounce(newValue => {
|
|
|
|
+ emit('search', newValue)
|
|
|
|
+}, searchDebouncedTime)
|
|
</script>
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
</style>
|
|
</style>
|