lashman/zeroclock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: replace all native selects and date inputs with custom components

Browse Source
This commit is contained in:
Your Name
2026-02-17 22:27:51 +02:00
parent b9aace912b
commit 40f87c9e04
5 changed files with 60 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/Invoices.vue
View File

@@ -126,39 +126,30 @@
<!-- Client -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Client *</label>
<select
<AppSelect
v-model="createForm.client_id"
required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
>
<option :value="0">Select a client</option>
<option
v-for="client in clientsStore.clients"
:key="client.id"
:value="client.id"
>
{{ client.name }}
</option>
</select>
:options="clientsStore.clients"
label-key="name"
value-key="id"
placeholder="Select a client"
:placeholder-value="0"
/>
</div>
<!-- Date -->
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Invoice Date *</label>
<input
<AppDatePicker
v-model="createForm.date"
type="date"
required
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Invoice date"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Due Date</label>
<input
<AppDatePicker
v-model="createForm.due_date"
type="date"
class="w-full px-3 py-2 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary focus:outline-none focus:border-border-visible"
placeholder="Due date"
/>
</div>
</div>
@@ -341,6 +332,8 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { FileText } from 'lucide-vue-next'
import AppSelect from '../components/AppSelect.vue'
import AppDatePicker from '../components/AppDatePicker.vue'
import { useInvoicesStore, type Invoice } from '../stores/invoices'
import { useClientsStore } from '../stores/clients'
import { useToastStore } from '../stores/toast'