refactor: use list with filtering for preset menus

This commit is contained in:
arabcoders 2026-06-08 08:55:08 +03:00
parent 4319be36f6
commit 473e45c55b
5 changed files with 21 additions and 14 deletions

View file

@ -103,15 +103,17 @@
/>
<div class="min-w-0 flex-1">
<USelect
<USelectMenu
id="preset"
v-model="form.preset"
:items="presetItems"
value-key="value"
label-key="label"
color="neutral"
class="w-full"
size="lg"
:ui="{ base: 'w-full', content: 'min-w-[13rem]' }"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
:disabled="addInProgress || hasFormatInConfig"
placeholder="Select preset"
/>

View file

@ -30,15 +30,17 @@
</span>
</template>
<USelect
<USelectMenu
v-model="selectedPreset"
:items="importPresetItems"
placeholder="Select a preset"
value-key="value"
label-key="label"
color="neutral"
size="lg"
class="w-full"
:ui="{ base: 'w-full' }"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
@update:model-value="() => void importExistingPreset()"
/>
</UFormField>

View file

@ -122,15 +122,17 @@
</span>
</template>
<USelect
<USelectMenu
id="preset"
v-model="formPreset"
:items="presetItems"
value-key="value"
label-key="label"
color="neutral"
size="lg"
class="w-full"
:ui="selectUi"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
:disabled="isFormDisabled"
placeholder="Select preset"
/>
@ -773,10 +775,6 @@ const urlInputUi = {
base: 'bg-elevated/60 ring-default focus-visible:ring-primary',
};
const selectUi = {
base: 'w-full',
};
const historyPagination = computed(() => pagination.value);
const historyIsLoading = computed(() => isLoading.value);
const queueItems = computed<StoreItem[]>(() => Object.values(stateStore.queue));

View file

@ -247,17 +247,19 @@
: undefined
"
>
<USelect
<USelectMenu
id="preset"
v-model="form.preset"
:items="presetItems"
value-key="value"
label-key="label"
color="neutral"
:disabled="addInProgress || hasFormatInConfig"
placeholder="Select preset"
size="lg"
class="w-full"
:ui="{ base: 'w-full' }"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
/>
</UTooltip>
</UFormField>

View file

@ -29,15 +29,18 @@
:ui="fieldUi"
description="Select a preset to apply its settings during inspection. In real scenario, the preset will be based on what is selected when creating the task."
>
<USelect
<USelectMenu
id="preset"
v-model="preset"
:items="presetItems"
placeholder="Select a preset"
value-key="value"
label-key="label"
color="neutral"
class="w-full"
:ui="inputUi"
size="lg"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
:disabled="loading"
/>
</UFormField>