fix(contribution): sanitize amount input and a11y polish
This commit is contained in:
parent
81783866d1
commit
f28558a433
1 changed files with 8 additions and 4 deletions
|
|
@ -58,6 +58,7 @@
|
||||||
type="button"
|
type="button"
|
||||||
class="contribution-preset-chip"
|
class="contribution-preset-chip"
|
||||||
:class="{ active: numericAmount === preset.amount }"
|
:class="{ active: numericAmount === preset.amount }"
|
||||||
|
:aria-pressed="numericAmount === preset.amount"
|
||||||
@click="selectPreset(preset.amount)"
|
@click="selectPreset(preset.amount)"
|
||||||
>
|
>
|
||||||
${{ preset.amount }}
|
${{ preset.amount }}
|
||||||
|
|
@ -97,7 +98,11 @@ import {
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: { type: Number, required: true },
|
modelValue: { type: Number, required: true },
|
||||||
cadence: { type: String, required: true },
|
cadence: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
validator: (v) => v === 'monthly' || v === 'annual',
|
||||||
|
},
|
||||||
allowCadenceChange: { type: Boolean, default: true },
|
allowCadenceChange: { type: Boolean, default: true },
|
||||||
showSummary: { type: Boolean, default: true },
|
showSummary: { type: Boolean, default: true },
|
||||||
summaryNote: { type: String, default: '' },
|
summaryNote: { type: String, default: '' },
|
||||||
|
|
@ -134,15 +139,14 @@ const onAmountInput = (event) => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const n = Number(raw)
|
const n = Number(raw)
|
||||||
emit('update:modelValue', Number.isFinite(n) ? n : 0)
|
const sanitized = Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : 0
|
||||||
|
emit('update:modelValue', sanitized)
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectPreset = (amount) => {
|
const selectPreset = (amount) => {
|
||||||
emit('update:modelValue', amount)
|
emit('update:modelValue', amount)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Annual→monthly snap: floor(annual/12)*12 keeps the amount cleanly divisible
|
|
||||||
// before we divide, so toggling cadences never leaves fractional dollars.
|
|
||||||
const onCadenceChange = (newCadence) => {
|
const onCadenceChange = (newCadence) => {
|
||||||
if (newCadence === props.cadence) return
|
if (newCadence === props.cadence) return
|
||||||
const current = numericAmount.value
|
const current = numericAmount.value
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue