@bagelink/vue 1.15.486 → 1.15.492

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.486",
+  "version": "1.15.492",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/form/inputs/NumberInput.vue

@@ -77,6 +77,15 @@ const btnLayouts: NumberLayout[] = ['horizontal', 'vertical']
 
 const TRAILING_ZEROS_RE = /\.\d*0$/
 
+/** Mid-keystroke drafts that are not yet a finished number (e.g. "1.", "1.50", "-"). */
+function isIncompleteDraft(value: string) {
+	if (!value) return false
+	const numeric = value.replace(/[^\d.-]/g, '')
+	return ['-', '.', '-.'].includes(numeric)
+		|| numeric.endsWith('.')
+		|| TRAILING_ZEROS_RE.test(numeric)
+}
+
 function getPrecision() {
 	return step.toString().split('.')[1]?.length || 0
 }
@@ -98,12 +107,14 @@ const canDecrement = computed(() => min === undefined || subtract(numberValue.va
 function increment() {
 	if (!canIncrement.value) { return }
 	numberValue.value = add(numberValue.value ?? 0, step)
+	formattedValue.value = formatNumber(numberValue.value)
 	emit('update:modelValue', numberValue.value)
 }
 
 function decrement() {
 	if (!canDecrement.value) { return }
 	numberValue.value = subtract(numberValue.value ?? 0, step)
+	formattedValue.value = formatNumber(numberValue.value)
 	emit('update:modelValue', numberValue.value)
 }
 
@@ -128,10 +139,18 @@ function formatNumber(num: number) {
 const formattedValue = ref('')
 function inputHandler() {
 	const numeric = formattedValue.value.replace(/[^\d.-]/g, '')
-	const isIncomplete = ['', '-', '.', '-.'].includes(numeric) || numeric.endsWith('.') || TRAILING_ZEROS_RE.test(numeric)
+	const isIncomplete = numeric === ''
+		|| ['-', '.', '-.'].includes(numeric)
+		|| numeric.endsWith('.')
+		|| TRAILING_ZEROS_RE.test(numeric)
 
 	if (isIncomplete) {
-		emit('update:modelValue', numeric === '-' ? '-' : numeric)
+		if (numeric === '') {
+			numberValue.value = undefined
+			emit('update:modelValue', undefined)
+		}
+		// Keep the local draft ("1.", "0.10", …). Do not emit strings —
+		// number-only v-models coerce/clear them and wipe the decimal point.
 		return
 	}
 
@@ -142,18 +161,43 @@ function inputHandler() {
 
 watch(() => numberValue.value, () => {
 	nextTick(() => {
-		if (formattedValue.value.endsWith('.') || TRAILING_ZEROS_RE.test(formattedValue.value)) { return }
+		if (isIncompleteDraft(formattedValue.value)) { return }
 		formattedValue.value = numberValue.value !== undefined ? formatNumber(numberValue.value) : ''
 	})
 })
 
 watch(() => modelValue, (newVal) => {
+	// Parent re-rendered while the user is mid-decimal — keep the draft unless
+	// the parent intentionally replaced/cleared the value.
+	if (isIncompleteDraft(formattedValue.value)) {
+		if (typeof newVal === 'string' && isIncompleteDraft(newVal)) {
+			formattedValue.value = newVal
+			return
+		}
+		if (typeof newVal === 'number') {
+			const draftParsed = Number.parseFloat(formattedValue.value)
+			// Coerced echo of the same draft (e.g. "1." → 1) — keep typing.
+			if (!Number.isNaN(draftParsed) && draftParsed === newVal) return
+			numberValue.value = newVal
+			formattedValue.value = formatNumber(newVal)
+			return
+		}
+		if (newVal === undefined || newVal === null || newVal === '') {
+			// Empty parent while we never committed a number = normal mid-draft.
+			if (numberValue.value === undefined) return
+			// Parent cleared a previously committed value (e.g. external reset).
+			numberValue.value = undefined
+			formattedValue.value = ''
+			return
+		}
+		return
+	}
 	if (newVal === undefined || newVal === null || newVal === '') {
 		numberValue.value = undefined
 		formattedValue.value = ''
 		return
 	}
-	if (typeof newVal === 'string' && (newVal === '-' || newVal.endsWith('.'))) {
+	if (typeof newVal === 'string' && isIncompleteDraft(newVal)) {
 		formattedValue.value = newVal
 		return
 	}