fix: dynamic currency symbols and integrated datetime picker
- Replace all hardcoded prefix="$" with :prefix="getCurrencySymbol()" in Settings, Projects, and Invoices views - Replace hardcoded ($) labels with dynamic currency symbol - Extend AppDatePicker with showTime prop + hour/minute v-models for integrated date+time selection - Simplify Entries.vue to use single AppDatePicker with showTime instead of separate hour/minute inputs
This commit is contained in:
@@ -6,14 +6,22 @@ import { getLocaleCode } from '../utils/locale'
|
||||
interface Props {
|
||||
modelValue: string
|
||||
placeholder?: string
|
||||
showTime?: boolean
|
||||
hour?: number
|
||||
minute?: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: 'Select date',
|
||||
showTime: false,
|
||||
hour: 0,
|
||||
minute: 0,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string]
|
||||
'update:hour': [value: number]
|
||||
'update:minute': [value: number]
|
||||
}>()
|
||||
|
||||
const isOpen = ref(false)
|
||||
@@ -30,13 +38,44 @@ const displayText = computed(() => {
|
||||
if (!props.modelValue) return null
|
||||
const [y, m, d] = props.modelValue.split('-').map(Number)
|
||||
const date = new Date(y, m - 1, d)
|
||||
return date.toLocaleDateString(getLocaleCode(), {
|
||||
const datePart = date.toLocaleDateString(getLocaleCode(), {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
})
|
||||
if (props.showTime) {
|
||||
const hh = String(props.hour).padStart(2, '0')
|
||||
const mm = String(props.minute).padStart(2, '0')
|
||||
return `${datePart} ${hh}:${mm}`
|
||||
}
|
||||
return datePart
|
||||
})
|
||||
|
||||
// ── Time helpers ──────────────────────────────────────────────────────
|
||||
const internalHour = ref(props.hour)
|
||||
const internalMinute = ref(props.minute)
|
||||
|
||||
watch(() => props.hour, (v) => { internalHour.value = v })
|
||||
watch(() => props.minute, (v) => { internalMinute.value = v })
|
||||
|
||||
function onHourInput(e: Event) {
|
||||
const val = parseInt((e.target as HTMLInputElement).value)
|
||||
if (!isNaN(val)) {
|
||||
const clamped = Math.min(23, Math.max(0, val))
|
||||
internalHour.value = clamped
|
||||
emit('update:hour', clamped)
|
||||
}
|
||||
}
|
||||
|
||||
function onMinuteInput(e: Event) {
|
||||
const val = parseInt((e.target as HTMLInputElement).value)
|
||||
if (!isNaN(val)) {
|
||||
const clamped = Math.min(59, Math.max(0, val))
|
||||
internalMinute.value = clamped
|
||||
emit('update:minute', clamped)
|
||||
}
|
||||
}
|
||||
|
||||
const viewMonthLabel = computed(() => {
|
||||
const date = new Date(viewYear.value, viewMonth.value, 1)
|
||||
return date.toLocaleDateString(getLocaleCode(), { month: 'long', year: 'numeric' })
|
||||
@@ -354,6 +393,28 @@ onBeforeUnmount(() => {
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Time inputs (when showTime is true) -->
|
||||
<div v-if="showTime" class="border-t border-border-subtle px-3 py-2.5 flex items-center justify-center gap-2">
|
||||
<span class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em]">Time</span>
|
||||
<input
|
||||
:value="String(internalHour).padStart(2, '0')"
|
||||
type="number"
|
||||
min="0"
|
||||
max="23"
|
||||
@input="onHourInput"
|
||||
class="w-11 px-1.5 py-1 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
<span class="text-text-tertiary text-sm font-mono">:</span>
|
||||
<input
|
||||
:value="String(internalMinute).padStart(2, '0')"
|
||||
type="number"
|
||||
min="0"
|
||||
max="59"
|
||||
@input="onMinuteInput"
|
||||
class="w-11 px-1.5 py-1 bg-bg-inset border border-border-subtle rounded-lg text-[0.8125rem] text-text-primary text-center font-mono focus:outline-none focus:border-border-visible [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Today shortcut -->
|
||||
<div class="border-t border-border-subtle px-3 py-2">
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user