refactor: use list with filtering for preset menus
This commit is contained in:
parent
4319be36f6
commit
473e45c55b
5 changed files with 21 additions and 14 deletions
|
|
@ -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"
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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));
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue