281 lines
7.7 KiB
Vue
281 lines
7.7 KiB
Vue
<template>
|
|
<div
|
|
:class="mergedGroupClass"
|
|
>
|
|
<input
|
|
:id="inputId"
|
|
:name="name"
|
|
:autocomplete="autocomplete"
|
|
:class="mergedInputClass"
|
|
:required="required"
|
|
:maxlength="maxLength"
|
|
:minlength="minLength"
|
|
:disabled="disabled"
|
|
:value="currentValue"
|
|
:readonly="readonly"
|
|
:aria-invalid="!!error"
|
|
:aria-describedby="describedBy"
|
|
v-bind="attrs"
|
|
type="text"
|
|
inputmode="decimal"
|
|
placeholder="_"
|
|
@input="onInput"
|
|
@focus="isFocused = true"
|
|
@blur="onBlur"
|
|
>
|
|
|
|
<label
|
|
v-if="label"
|
|
:for="inputId"
|
|
:class="mergedLabelClass"
|
|
>
|
|
{{ label }}
|
|
</label>
|
|
|
|
<IconifyIcon
|
|
v-if="iconName"
|
|
:icon="iconName"
|
|
:width="iconSize"
|
|
:height="iconSize"
|
|
data-test="icon"
|
|
:class="[
|
|
hasError
|
|
? 'text-m-error'
|
|
: hasSuccess
|
|
? 'text-m-success' : iconColor,
|
|
iconPositionClass,
|
|
]"
|
|
/>
|
|
|
|
</div>
|
|
<p
|
|
v-if="hint || hasError || hasSuccess"
|
|
:id="`${inputId}-describedby`"
|
|
:class="[
|
|
hasError
|
|
? 'text-m-error'
|
|
: hasSuccess
|
|
? 'text-m-success'
|
|
: 'text-m-muted',
|
|
'mt-1 text-xs ml-[2px] ',
|
|
]"
|
|
>
|
|
{{ hint || error || success }}
|
|
</p>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {computed, ref, useAttrs, useId} from 'vue'
|
|
import { Icon as IconifyIcon } from '@iconify/vue'
|
|
import {twMerge} from 'tailwind-merge'
|
|
|
|
defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
id?: string
|
|
label?: string
|
|
name?: string
|
|
autocomplete?: string
|
|
modelValue?: string | null | undefined
|
|
inputClass?: string
|
|
labelClass?: string
|
|
groupClass?: string
|
|
required?: boolean
|
|
maxLength?: number | string
|
|
minLength?: number | string
|
|
disabled?: boolean
|
|
readonly?: boolean
|
|
hint?: string
|
|
error?: string
|
|
success?: string
|
|
iconName?: string
|
|
iconPosition?: 'left' | 'right'
|
|
iconSize?: string | number
|
|
iconColor?: string
|
|
}>(),
|
|
{
|
|
id: '',
|
|
name: '',
|
|
autocomplete: 'off',
|
|
modelValue: undefined,
|
|
iconName: 'mdi:currency-eur',
|
|
iconPosition: 'right',
|
|
label: '',
|
|
inputClass: '',
|
|
labelClass: '',
|
|
groupClass: '',
|
|
required: false,
|
|
maxLength: undefined,
|
|
minLength: undefined,
|
|
readonly: false,
|
|
disabled: false,
|
|
hint: '',
|
|
error: '',
|
|
success: '',
|
|
iconSize: 24,
|
|
iconColor: 'text-m-muted',
|
|
},
|
|
)
|
|
|
|
const attrs = useAttrs()
|
|
const generatedId = useId()
|
|
const localValue = ref('')
|
|
const isFocused = ref(false)
|
|
|
|
const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
|
|
const isControlled = computed(() => props.modelValue !== undefined)
|
|
const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
|
|
const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
|
|
const hasError = computed(() => !!props.error)
|
|
const hasSuccess = computed(() => !!props.success)
|
|
const isFilled = computed(() => currentValue.value.trim().length > 0)
|
|
|
|
const mergedGroupClass = computed(() =>
|
|
twMerge(
|
|
'relative mt-4 flex h-12 w-full items-center',
|
|
props.groupClass,
|
|
),
|
|
)
|
|
const mergedInputClass = computed(() =>
|
|
twMerge(
|
|
'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
|
|
isFilled.value ? 'border-black' : 'border-m-muted',
|
|
disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
|
|
hasError.value
|
|
? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
|
|
: hasSuccess.value
|
|
? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
|
|
: 'focus:border-m-primary',
|
|
props.inputClass,
|
|
iconInputPaddingClass.value,
|
|
focusPaddingClass.value,
|
|
),
|
|
)
|
|
const mergedLabelClass = computed(() =>
|
|
twMerge(
|
|
'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
|
|
labelPositionClass.value,
|
|
shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
|
|
disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
|
|
hasError.value
|
|
? 'text-m-error'
|
|
: hasSuccess.value
|
|
? 'text-m-success'
|
|
: 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
|
|
props.labelClass,
|
|
),
|
|
)
|
|
|
|
const describedBy = computed(() => {
|
|
if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
|
|
return `${inputId.value}-describedby`
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'update:modelValue', value: string): void
|
|
}>()
|
|
|
|
// Normalize user input into a decimal amount string using "." as separator.
|
|
const normalizeAmount = (value: string) => {
|
|
const sanitizedValue = value
|
|
.replace(/\s+/g, '')
|
|
.replace(/,/g, '.')
|
|
.replace(/[^\d.]/g, '')
|
|
|
|
// Keep the first decimal separator and collapse the remaining parts into
|
|
// the decimal portion, limited to two digits.
|
|
const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
|
|
const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
|
|
const decimalPart = decimalParts.join('').slice(0, 2)
|
|
|
|
if (sanitizedValue.includes('.')) {
|
|
return `${integerPart || '0'}.${decimalPart}`
|
|
}
|
|
|
|
return integerPart
|
|
}
|
|
|
|
// Apply the final display format when the field loses focus.
|
|
// Examples:
|
|
// "12" -> "12.00"
|
|
// "12.5" -> "12.50"
|
|
const formatAmountForBlur = (value: string) => {
|
|
const normalizedValue = normalizeAmount(value)
|
|
|
|
if (!normalizedValue) return ''
|
|
|
|
const [integerPart = '0', decimalPart = ''] = normalizedValue.split('.')
|
|
|
|
return `${integerPart}.${decimalPart.padEnd(2, '0').slice(0, 2)}`
|
|
}
|
|
|
|
// Keep the DOM input value, local state, and v-model emission in sync.
|
|
const updateValue = (target: HTMLInputElement, value: string) => {
|
|
target.value = value
|
|
if (!isControlled.value) {
|
|
localValue.value = value
|
|
}
|
|
emit('update:modelValue', value)
|
|
}
|
|
|
|
// Normalize while typing so the field never keeps invalid amount characters.
|
|
const onInput = (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
updateValue(target, normalizeAmount(target.value))
|
|
}
|
|
|
|
// Finalize the amount format with exactly two decimals on blur.
|
|
const onBlur = (event: Event) => {
|
|
isFocused.value = false
|
|
|
|
const target = event.target as HTMLInputElement
|
|
const formattedValue = formatAmountForBlur(target.value)
|
|
|
|
if (formattedValue !== target.value) {
|
|
updateValue(target, formattedValue)
|
|
}
|
|
}
|
|
|
|
const iconInputPaddingClass = computed(() => {
|
|
if (!props.iconName) return ''
|
|
return props.iconPosition === 'left' ? '!pl-11 !pr-3' : ''
|
|
})
|
|
|
|
const disabled = computed(() => props.disabled)
|
|
|
|
const labelPositionClass = computed(() => {
|
|
if (props.iconName && props.iconPosition === 'left') return 'left-8'
|
|
return 'left-3'
|
|
})
|
|
|
|
const focusPaddingClass = computed(() => {
|
|
if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
|
|
return 'focus:pl-[11px]'
|
|
})
|
|
|
|
const iconPositionClass = computed(() => {
|
|
const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
|
|
return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.floating-label {
|
|
background: white;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
.grow-height {
|
|
transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
|
|
}
|
|
|
|
.grow-height:focus {
|
|
padding-top: 0.625rem;
|
|
padding-bottom: 0.625rem;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.grow-height { transition: none; }
|
|
}
|
|
</style>
|