migrate select/multiselect components to Radix Vue primitives

This commit is contained in:
Gregor Vostrak
2026-02-02 00:56:06 +01:00
parent 3707f2469c
commit 756b423295
24 changed files with 615 additions and 930 deletions

View File

@@ -15,7 +15,13 @@ import {
type UpdateMultipleTimeEntriesChangeset,
} from '@/packages/api/src';
import { Badge, Checkbox } from '@/packages/ui/src';
import SelectDropdown from '../Input/SelectDropdown.vue';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/Components/ui/select';
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
import type { Tag, Task } from '@/packages/api/src';
@@ -126,7 +132,6 @@ watch(removeAllTags, () => {
selectedTags.value = [];
}
});
type SelectOption = { label: string; value: string };
</script>
<template>
@@ -189,32 +194,22 @@ type SelectOption = { label: string; value: string };
<div class="space-y-2">
<InputLabel for="project" value="Billable" />
<div class="flex">
<SelectDropdown
v-model="timeEntryBillable"
:get-key-from-item="(item: SelectOption) => item.value"
:get-name-for-item="(item: SelectOption) => item.label"
:items="[
{
label: 'Keep current billable status',
value: 'do-not-update',
},
{
label: 'Billable',
value: 'billable',
},
{
label: 'Non Billable',
value: 'non-billable',
},
]">
<template #trigger>
<Badge tag="button" size="xlarge">
<span v-if="billable === undefined"> Set billable status </span>
<span v-else-if="billable === true"> Billable </span>
<span v-else> Non Billable </span></Badge
>
</template>
</SelectDropdown>
<Select v-model="timeEntryBillable">
<SelectTrigger size="small" :show-chevron="false">
<SelectValue>
<span v-if="billable === undefined">Set billable status</span>
<span v-else-if="billable === true">Billable</span>
<span v-else>Non Billable</span>
</SelectValue>
</SelectTrigger>
<SelectContent>
<SelectItem value="do-not-update">
Keep current billable status
</SelectItem>
<SelectItem value="billable">Billable</SelectItem>
<SelectItem value="non-billable">Non Billable</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>