Add Field component system and migrate UI

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

View File

@@ -12,7 +12,7 @@ import Badge from '@/packages/ui/src/Badge.vue';
import ProjectColorSelector from '@/packages/ui/src/Project/ProjectColorSelector.vue';
import { UserCircleIcon } from '@heroicons/vue/20/solid';
import EstimatedTimeSection from '@/packages/ui/src/EstimatedTimeSection.vue';
import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
import { Field, FieldLabel } from '../field';
import ProjectEditBillableSection from '@/packages/ui/src/Project/ProjectEditBillableSection.vue';
import type { Client } from '@/packages/api/src';
@@ -76,14 +76,12 @@ const currentClientName = computed(() => {
<template #content>
<div class="sm:flex items-center space-y-2 sm:space-y-0 sm:space-x-4">
<div class="flex-1 flex items-center">
<div class="text-center pr-5">
<InputLabel for="color" value="Color" />
<ProjectColorSelector
v-model="project.color"
class="mt-2.5"></ProjectColorSelector>
</div>
<div class="w-full">
<InputLabel for="projectName" value="Project name" />
<Field class="text-center pr-5">
<FieldLabel for="color">Color</FieldLabel>
<ProjectColorSelector v-model="project.color"></ProjectColorSelector>
</Field>
<Field class="w-full">
<FieldLabel for="projectName">Project name</FieldLabel>
<TextInput
id="projectName"
ref="projectNameInput"
@@ -91,19 +89,18 @@ const currentClientName = computed(() => {
name="projectName"
type="text"
placeholder="The next big thing"
class="mt-2 block w-full"
class="block w-full"
required
autocomplete="projectName"
@keydown.enter="submit()" />
</div>
</Field>
</div>
<div>
<InputLabel for="client" value="Client" />
<Field>
<FieldLabel for="client">Client</FieldLabel>
<ClientDropdown
v-model="project.client_id"
:create-client="createClient"
:clients="activeClients"
class="mt-2">
:clients="activeClients">
<template #trigger>
<Badge
tag="button"
@@ -118,7 +115,7 @@ const currentClientName = computed(() => {
</Badge>
</template>
</ClientDropdown>
</div>
</Field>
</div>
<div>
<div>