/
githubmirror
/
halo
Обзор
Документация
Войти
/
githubmirror
/
halo
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
ui/src/formkit/inputs/select/SelectSelector.vue
54 строки
1 KB
Ryan Wang
Support icons and descriptions in FormKit select options (#10076)
11 июн 2026, 17:19
Не верифицирован
11 июн 2026, 17:19
b0ac6ee
Код
Авторство
О чём код?
<script setup lang="ts"> import { computed, ref } from "vue"; import SelectSearchInput from "./SelectSearchInput.vue"; import type { SelectOption } from "./types"; const props = defineProps<{ placeholder?: string; selectedOptions: SelectOption[]; isDropdownVisible: boolean; searchable: boolean; }>(); const emit = defineEmits<{ (event: "search", value: string, e?: Event): void; }>(); const selectLabel = computed(() => { if (props.selectedOptions && props.selectedOptions.length > 0) { return props.selectedOptions[0].label.toString(); } return undefined; }); const inputValue = ref(""); const isCombinationInput = ref(false); const handleSearch = (value: string, event?: Event) => { inputValue.value = value; if (event && event instanceof InputEvent) { isCombinationInput.value = event.isComposing; } else { isCombinationInput.value = false; } emit("search", value, event); }; const showPlaceholder = computed(() => { return !inputValue.value && !isCombinationInput.value; }); </script> <template> <SelectSearchInput :searchable="searchable" @search="handleSearch"> <template #placeholder> <span v-if="showPlaceholder" :class="{ 'text-gray-400': isDropdownVisible || !selectLabel, }" > {{ selectLabel || placeholder }} </span> </template> </SelectSearchInput> </template>