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

49
src/views/Entries.vue
View File

@@ -6,35 +6,28 @@
<div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Start Date</label>
<input
<AppDatePicker
v-model="startDate"
type="date"
class="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="Start date"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">End Date</label>
<input
<AppDatePicker
v-model="endDate"
type="date"
class="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="End date"
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
<select
<AppSelect
v-model="filterProject"
class="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="null">All Projects</option>
<option
v-for="project in projectsStore.projects"
:key="project.id"
:value="project.id"
>
{{ project.name }}
</option>
</select>
:options="projectsStore.projects"
label-key="name"
value-key="id"
placeholder="All Projects"
:placeholder-value="null"
/>
</div>
<button
@click="applyFilters"
@@ -139,19 +132,13 @@
<!-- Project -->
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project *</label>
<select
<AppSelect
v-model="editForm.project_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
v-for="project in projectsStore.projects"
:key="project.id"
:value="project.id"
>
{{ project.name }}
</option>
</select>
:options="projectsStore.projects"
label-key="name"
value-key="id"
placeholder="Select project"
/>
</div>
<!-- Description -->
@@ -239,6 +226,8 @@
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { List as ListIcon } from 'lucide-vue-next'
import AppSelect from '../components/AppSelect.vue'
import AppDatePicker from '../components/AppDatePicker.vue'
import { useEntriesStore, type TimeEntry } from '../stores/entries'
import { useProjectsStore } from '../stores/projects'