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"> <div class="min-w-0 flex-1">
<USelect <USelectMenu
id="preset" id="preset"
v-model="form.preset" v-model="form.preset"
:items="presetItems" :items="presetItems"
value-key="value" value-key="value"
label-key="label" label-key="label"
color="neutral"
class="w-full" class="w-full"
size="lg" 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" :disabled="addInProgress || hasFormatInConfig"
placeholder="Select preset" placeholder="Select preset"
/> />

View file

@ -30,15 +30,17 @@
</span> </span>
</template> </template>
<USelect <USelectMenu
v-model="selectedPreset" v-model="selectedPreset"
:items="importPresetItems" :items="importPresetItems"
placeholder="Select a preset" placeholder="Select a preset"
value-key="value" value-key="value"
label-key="label" label-key="label"
color="neutral"
size="lg" size="lg"
class="w-full" 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()" @update:model-value="() => void importExistingPreset()"
/> />
</UFormField> </UFormField>

View file

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

View file

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

View file

@ -29,15 +29,18 @@
:ui="fieldUi" :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." 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" id="preset"
v-model="preset" v-model="preset"
:items="presetItems" :items="presetItems"
placeholder="Select a preset" placeholder="Select a preset"
value-key="value" value-key="value"
label-key="label" label-key="label"
color="neutral"
class="w-full" class="w-full"
:ui="inputUi" size="lg"
:ui="{ content: 'min-w-[13rem]', item: 'pl-6' }"
:search-input="{ placeholder: 'Search presets' }"
:disabled="loading" :disabled="loading"
/> />
</UFormField> </UFormField>