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

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 dc03b9459b
commit dd281a48bc
5 changed files with 60 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/Timer.vue
View File

@@ -26,37 +26,27 @@
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Project</label>
<select
<AppSelect
v-model="selectedProject"
:options="activeProjects"
label-key="name"
value-key="id"
placeholder="Select project"
:placeholder-value="null"
:disabled="timerStore.isRunning"
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 disabled:opacity-40 disabled:cursor-not-allowed"
>
<option :value="null">Select project</option>
<option
v-for="project in activeProjects"
:key="project.id"
:value="project.id"
>
{{ project.name }}
</option>
</select>
/>
</div>
<div>
<label class="block text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1.5">Task</label>
<select
<AppSelect
v-model="selectedTask"
:options="projectTasks"
label-key="name"
value-key="id"
placeholder="Select task"
:placeholder-value="null"
:disabled="timerStore.isRunning || !selectedProject"
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 disabled:opacity-40 disabled:cursor-not-allowed"
>
<option :value="null">Select task</option>
<option
v-for="task in projectTasks"
:key="task.id"
:value="task.id"
>
{{ task.name }}
</option>
</select>
/>
</div>
</div>
<div>
@@ -119,6 +109,7 @@ import { useProjectsStore, type Task } from '../stores/projects'
import { useEntriesStore } from '../stores/entries'
import { useToastStore } from '../stores/toast'
import { Timer as TimerIcon } from 'lucide-vue-next'
import AppSelect from '../components/AppSelect.vue'
const timerStore = useTimerStore()
const projectsStore = useProjectsStore()