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

Major new version #2

Merged
LeoVasanko merged 86 commits from vol002 into main 2025-08-26 05:58:24 +01:00
Conversation 0 Commits 86 Files Changed 28 +74 -123
1 changed files with 74 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 579d01dfd8 - Show all commits

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
}
remaining--
}
if (targetIndex >= 0 && targetIndex < allValidValues.value.length) {
const next = allValidValues.value[targetIndex]
if (next !== current.value) current.value = next
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>