adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 20:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

add manual time entry feature

Browse Source
This commit is contained in:
Gregor Vostrak
2024-04-24 22:13:22 +02:00
parent 8136f630c9
commit f52a629bac
15 changed files with 261 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
resources/js/Components/Common/TimePicker.vue
View File

@@ -1,11 +1,21 @@
<script setup lang="ts">
import { computed } from 'vue';
import { getLocalizedDayJs } from '@/utils/time';
import { twMerge } from 'tailwind-merge';
const model = defineModel<string | null>({
default: null,
});
const props = withDefaults(
defineProps<{
size: 'base' | 'large';
}>(),
{
size: 'base',
}
);
const hours = computed(() => {
return model.value ? getLocalizedDayJs(model.value).hour() : null;
});
@@ -38,20 +48,38 @@ function updateHours(event: Event) {
</script>
<template>
<div class="flex items-center justify-center text-muted">
<input
:value="hours"
@input="updateHours"
data-testid="time_picker_hour"
type="text"
class="bg-card-background border-none text-sm px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active" />
<span>:</span>
<input
:value="minutes"
@input="updateMinutes"
data-testid="time_picker_minute"
type="text"
class="bg-card-background border-none text-sm px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active" />
<div class="flex items-center justify-center text-white">
<div
:class="
twMerge(
'border bg-input-background rounded-md border-input-border overflow-hidden',
props.size === 'large' ? 'py-1.5 px-2' : ''
)
">
<input
:value="hours"
@input="updateHours"
data-testid="time_picker_hour"
type="text"
:class="
twMerge(
'border-none bg-transparent px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
props.size === 'large' ? 'text-base' : 'text-sm'
)
" />
<span>:</span>
<input
:value="minutes"
@input="updateMinutes"
data-testid="time_picker_minute"
type="text"
:class="
twMerge(
'border-none bg-transparent px-1 py-0.5 w-[30px] text-center focus:ring-0 focus:bg-card-background-active',
props.size === 'large' ? 'text-base' : 'text-sm'
)
" />
</div>
</div>
</template>