Add Field component system and migrate UI

This commit is contained in:
Gregor Vostrak
2026-02-10 12:22:53 +01:00
parent 125f6f062f
commit 15e61e9789
71 changed files with 1023 additions and 741 deletions

View File

@@ -5,7 +5,7 @@ import DialogModal from '@/packages/ui/src/DialogModal.vue';
import { computed, nextTick, ref, watch } from 'vue';
import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
import TimeTrackerProjectTaskDropdown from '@/packages/ui/src/TimeTracker/TimeTrackerProjectTaskDropdown.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '../field';
import { TagIcon } from '@heroicons/vue/20/solid';
import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
import type {
@@ -24,7 +24,7 @@ import {
SelectTrigger,
SelectValue,
} from '@/Components/ui/select';
import { Button } from '@/Components/ui/button';
import { Button } from '@/packages/ui/src/Buttons';
import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
import DurationHumanInput from '@/packages/ui/src/Input/DurationHumanInput.vue';
@@ -199,7 +199,7 @@ const billableProxy = computed({
</template>
</TagDropdown>
<Select v-model="billableProxy">
<SelectTrigger size="small" :show-chevron="false">
<SelectTrigger size="sm" :show-chevron="false">
<SelectValue class="flex items-center gap-2">
<BillableIcon class="h-4 text-icon-default" />
<span>{{
@@ -215,9 +215,9 @@ const billableProxy = computed({
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<div class="flex-1">
<InputLabel>Duration</InputLabel>
<div class="space-y-2 mt-1 flex flex-col">
<Field class="flex-1">
<FieldLabel>Duration</FieldLabel>
<div class="space-y-2 flex flex-col">
<DurationHumanInput
v-model:start="localStart"
v-model:end="localEnd"
@@ -231,34 +231,32 @@ const billableProxy = computed({
</span>
</div>
</div>
</div>
</Field>
<div class="grid grid-cols-2 sm:flex gap-4">
<div>
<InputLabel>Start</InputLabel>
<div class="flex flex-col gap-2 mt-1 sm:w-28">
<Field>
<FieldLabel>Start</FieldLabel>
<div class="flex flex-col gap-2 sm:w-28">
<TimePickerSimple
v-model="localStart"
class="w-full"
size="large"></TimePickerSimple>
class="w-full"></TimePickerSimple>
<DatePicker
v-model="localStart"
class="w-full"
tabindex="1"></DatePicker>
</div>
</div>
<div>
<InputLabel>End</InputLabel>
<div class="flex flex-col gap-2 mt-1 sm:w-28">
</Field>
<Field>
<FieldLabel>End</FieldLabel>
<div class="flex flex-col gap-2 sm:w-28">
<TimePickerSimple
v-model="localEnd"
class="w-full"
size="large"></TimePickerSimple>
class="w-full"></TimePickerSimple>
<DatePicker
v-model="localEnd"
class="w-full"
tabindex="1"></DatePicker>
</div>
</div>
</Field>
</div>
</div>
</div>