LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow Numeric to change off from an invalid value (and not get stuck on it). Cleanup of the component.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-25 22:23:16 -06:00
parent 29246af591
commit 579d01dfd8
1 changed files with 74 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

197
src/components/Numeric.vue
View File

@ -2,27 +2,25 @@
<div
ref="rootEl"
class="mini-stepper drag-mode"
:class="[extraClass, { dragging, 'pointer-locked': pointerLocked }]"
:class="[extraClass, { dragging }]"
:aria-label="ariaLabel"
role="spinbutton"
:aria-valuemin="minValue"
:aria-valuemax="maxValue"
:aria-valuenow="isPrefix(current) ? undefined : current"
:aria-valuenow="isPrefix(model) ? undefined : model"
:aria-valuetext="display"
tabindex="0"
@pointerdown="onPointerDown"
@keydown="onKey"
@wheel.prevent="onWheel"
>
<span class="value" :title="String(current)">{{ display }}</span>
<span class="value" :title="String(model)">{{ display }}</span>
</div>
</template>
<script setup>
import { computed, ref, onBeforeUnmount } from 'vue'
const model = defineModel({ type: Number, default: 0 })
import { computed, ref } from 'vue'
const model = defineModel({ default: 0 })
const props = defineProps({
min: { type: Number, default: 0 },
max: { type: Number, default: 999 },
@ -37,85 +35,41 @@ const props = defineProps({
numberPostfix: { type: String, default: '' },
clamp: { type: Boolean, default: true },
pixelsPerStep: { type: Number, default: 16 },
// Movement now restricted to horizontal (x). Prop retained for compatibility but ignored.
axis: { type: String, default: 'x' },
ariaLabel: { type: String, default: '' },
extraClass: { type: String, default: '' },
})
const minValue = computed(() => props.min)
const maxValue = computed(() => props.max)
// Helper to check if a value is in the prefix values
const isPrefix = (value) => {
return props.prefixValues.some((prefix) => prefix.value === value)
}
// Helper to get the display for a prefix value
const getPrefixDisplay = (value) => {
const prefix = props.prefixValues.find((p) => p.value === value)
return prefix ? prefix.display : null
}
// Get all valid values in order: prefixValues, then min to max
const isPrefix = (value) => props.prefixValues.some((p) => p.value === value)
const getPrefixDisplay = (value) =>
props.prefixValues.find((p) => p.value === value)?.display ?? null
const allValidValues = computed(() => {
const prefixVals = props.prefixValues.map((p) => p.value)
const numericVals = []
for (let i = props.min; i <= props.max; i += props.step) {
numericVals.push(i)
}
for (let i = props.min; i <= props.max; i += props.step) numericVals.push(i)
return [...prefixVals, ...numericVals]
})
const current = computed({
get() {
return model.value
},
set(v) {
if (props.clamp) {
// If it's a prefix value, allow it
if (isPrefix(v)) {
model.value = v
return
}
// Otherwise clamp to numeric range
if (v < props.min) v = props.min
if (v > props.max) v = props.max
}
model.value = v
},
})
const display = computed(() => {
const prefixDisplay = getPrefixDisplay(current.value)
if (prefixDisplay !== null) {
// For prefix values, show only the display text without number prefix/postfix
return prefixDisplay
}
// For numeric values, include prefix and postfix
const numericValue = String(current.value)
return `${props.numberPrefix}${numericValue}${props.numberPostfix}`
const prefixDisplay = getPrefixDisplay(model.value)
if (prefixDisplay !== null) return prefixDisplay
return `${props.numberPrefix}${String(model.value)}${props.numberPostfix}`
})
// Drag handling
const dragging = ref(false)
const rootEl = ref(null)
let startX = 0
let startY = 0
let accumX = 0 // accumulated horizontal movement since last applied step (works for both locked & unlocked)
let lastClientX = 0 // previous clientX when not pointer locked
let accumX = 0
let lastClientX = 0
const pointerLocked = ref(false)
function updatePointerLocked() {
pointerLocked.value =
typeof document !== 'undefined' && document.pointerLockElement === rootEl.value
// Reset baseline if lock just engaged
if (pointerLocked.value) {
accumX = 0
startX = 0 // not used while locked
startX = 0
}
}
function addPointerLockListeners() {
if (typeof document === 'undefined') return
document.addEventListener('pointerlockchange', updatePointerLocked)
@ -126,7 +80,6 @@ function removePointerLockListeners() {
document.removeEventListener('pointerlockchange', updatePointerLocked)
document.removeEventListener('pointerlockerror', updatePointerLocked)
}
function onPointerDown(e) {
e.preventDefault()
startX = e.clientX
@ -150,33 +103,44 @@ function onPointerDown(e) {
function onPointerMove(e) {
if (!dragging.value) return
if (e.pointerType === 'touch') e.preventDefault()
let dx
if (pointerLocked.value) {
dx = e.movementX || 0
} else {
dx = e.clientX - lastClientX
lastClientX = e.clientX
}
let dx = pointerLocked.value ? e.movementX || 0 : e.clientX - lastClientX
if (!pointerLocked.value) lastClientX = e.clientX
if (!dx) return
accumX += dx
const stepSize = props.pixelsPerStep || 1
let steps = Math.trunc(accumX / stepSize)
if (steps === 0) return
// Apply steps relative to current value index each time (dynamic baseline) and keep leftover pixels
const applySteps = (count) => {
const currentIndex = allValidValues.value.indexOf(current.value)
if (currentIndex === -1) return
let targetIndex = currentIndex + count
if (props.clamp) {
targetIndex = Math.max(0, Math.min(targetIndex, allValidValues.value.length - 1))
if (!count) return
let direction = count > 0 ? 1 : -1
let remaining = Math.abs(count)
let curVal = model.value
const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
let idx = allValidValues.value.indexOf(curVal)
if (idx === -1) {
if (!isNumeric) {
curVal = props.prefixValues.length ? props.prefixValues[0].value : props.min
} else {
if (direction > 0) curVal = props.min
else
curVal = props.prefixValues.length
? props.prefixValues[props.prefixValues.length - 1].value
: props.min
}
if (targetIndex >= 0 && targetIndex < allValidValues.value.length) {
const next = allValidValues.value[targetIndex]
if (next !== current.value) current.value = next
remaining--
}
while (remaining > 0) {
idx = allValidValues.value.indexOf(curVal)
if (idx === -1) break
let targetIdx = idx + direction
if (props.clamp) targetIdx = Math.max(0, Math.min(targetIdx, allValidValues.value.length - 1))
if (targetIdx < 0 || targetIdx >= allValidValues.value.length || targetIdx === idx) break
curVal = allValidValues.value[targetIdx]
remaining--
}
model.value = curVal
}
applySteps(steps)
// Remove consumed distance (works even if clamped; leftover ensures responsiveness keeps consistent feel)
accumX -= steps * stepSize
}
function endDragListeners() {
@ -196,52 +160,43 @@ function onPointerCancel() {
dragging.value = false
endDragListeners()
}
function onKey(e) {
const key = e.key
let handled = false
let newValue = null
// Find current value index in all valid values
const currentIndex = allValidValues.value.indexOf(current.value)
const currentIndex = allValidValues.value.indexOf(model.value)
switch (key) {
case 'ArrowRight':
case 'ArrowUp':
if (currentIndex !== -1 && currentIndex < allValidValues.value.length - 1) {
if (currentIndex !== -1 && currentIndex < allValidValues.value.length - 1)
newValue = allValidValues.value[currentIndex + 1]
} else if (currentIndex === -1) {
// Current value not in list, try to increment normally
newValue = current.value + props.step
else if (currentIndex === -1) {
const curVal = model.value
const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
if (!isNumeric && props.prefixValues.length) newValue = props.prefixValues[0].value
else newValue = props.min
}
handled = true
break
case 'ArrowLeft':
case 'ArrowDown':
if (currentIndex !== -1 && currentIndex > 0) {
newValue = allValidValues.value[currentIndex - 1]
} else if (currentIndex === -1) {
// Current value not in list, try to decrement normally
newValue = current.value - props.step
}
if (currentIndex !== -1 && currentIndex > 0) newValue = allValidValues.value[currentIndex - 1]
else if (currentIndex === -1)
newValue = props.prefixValues.length
? props.prefixValues[props.prefixValues.length - 1].value
: props.min
handled = true
break
case 'PageUp':
if (currentIndex !== -1) {
const newIndex = Math.min(currentIndex + 10, allValidValues.value.length - 1)
newValue = allValidValues.value[newIndex]
} else {
newValue = current.value + props.step * 10
}
if (currentIndex !== -1)
newValue =
allValidValues.value[Math.min(currentIndex + 10, allValidValues.value.length - 1)]
else newValue = model.value + props.step * 10
handled = true
break
case 'PageDown':
if (currentIndex !== -1) {
const newIndex = Math.max(currentIndex - 10, 0)
newValue = allValidValues.value[newIndex]
} else {
newValue = current.value - props.step * 10
}
if (currentIndex !== -1) newValue = allValidValues.value[Math.max(currentIndex - 10, 0)]
else newValue = model.value - props.step * 10
handled = true
break
case 'Home':
@ -253,31 +208,30 @@ function onKey(e) {
handled = true
break
}
if (newValue !== null) {
current.value = newValue
}
if (newValue !== null) model.value = newValue
if (handled) {
e.preventDefault()
e.stopPropagation()
}
}
function onWheel(e) {
// Inverted: deltaY < 0 => decrement, > 0 => increment
const direction = e.deltaY < 0 ? -1 : e.deltaY > 0 ? 1 : 0
if (direction === 0) return
// Use current index in allValidValues list (prefix values included)
const idx = allValidValues.value.indexOf(current.value)
const idx = allValidValues.value.indexOf(model.value)
if (idx !== -1) {
const nextIdx = idx + direction
if (nextIdx >= 0 && nextIdx < allValidValues.value.length) {
current.value = allValidValues.value[nextIdx]
}
if (nextIdx >= 0 && nextIdx < allValidValues.value.length)
model.value = allValidValues.value[nextIdx]
} else {
// Fallback numeric adjustment if not found
current.value = current.value + direction * props.step
const curVal = model.value
const isNumeric = typeof curVal === 'number' && !Number.isNaN(curVal)
if (!isNumeric)
model.value = props.prefixValues.length ? props.prefixValues[0].value : props.min
else if (direction > 0) model.value = props.min
else
model.value = props.prefixValues.length
? props.prefixValues[props.prefixValues.length - 1].value
: props.min
}
}
</script>
@ -307,7 +261,4 @@ function onWheel(e) {
.mini-stepper.drag-mode.dragging {
cursor: grabbing;
}
.mini-stepper.drag-mode.pointer-locked.dragging {
cursor: none; /* hide cursor for infinite drag */
}
</style>