@bagelink/vue 1.4.54 → 1.4.56

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.4.54",
+  "version": "1.4.56",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

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

@@ -113,8 +113,9 @@ function inputHandler() {
 	const numeric = formattedValue.replace(/[^\d.-]/g, '')
 	const emptyValue = ['', '-', '.', '-.'].includes(numeric)
 	const isTypingDecimal = formattedValue.endsWith('.')
+	const isTypingTrailingZeros = /\.\d*0$/.test(numeric) // Check if ending with decimal followed by digits ending in 0
 
-	if (emptyValue || isTypingDecimal) {
+	if (emptyValue || isTypingDecimal || isTypingTrailingZeros) {
 		emit('update:modelValue', numeric === '-' ? '-' : numeric)
 		return
 	}
@@ -126,8 +127,8 @@ function inputHandler() {
 
 watch(() => numberValue, () => {
 	nextTick(() => {
-		// Don't reformat if user is currently typing a decimal
-		if (formattedValue.endsWith('.')) return
+		// Don't reformat if user is currently typing a decimal or trailing zeros
+		if (formattedValue.endsWith('.') || /\.\d*0$/.test(formattedValue)) return
 		formattedValue = numberValue !== undefined ? formatNumber(numberValue) : ''
 	})
 })

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IconType, ValidateInputBaseT } from '@bagelink/vue'
-import { Icon, useDebounceFn, useValidateFieldValue } from '@bagelink/vue'
+import { Icon, sleep, useDebounceFn, useValidateFieldValue } from '@bagelink/vue'
+import { until } from '@vueuse/core'
 
 import { onMounted, watch } from 'vue'
 
@@ -79,74 +80,43 @@ const hasFocus = () => document.activeElement === input
 const focus = () => input?.focus()
 defineExpose({ focus, hasFocus })
 
-onMounted(() => {
-	if (props.autofocus) setTimeout(() => input?.focus(), 10)
+onMounted(async () => {
+	if (props.autofocus) {
+		await until(() => input).toBeTruthy()
+		await sleep(400)
+		input?.focus()
+	}
 	if (props.defaultValue && !props.modelValue) inputVal = props.defaultValue
 })
 </script>
 
 <template>
 	<div
-		class="bagel-input text-input"
-		:class="{
+		class="bagel-input text-input" :class="{
 			dense,
 			small,
 			shrink,
 			code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
-		}"
-		:title="title"
+		}" :title="title"
 	>
 		<label :for="id">
 			{{ label }} <span v-if="required && label">*</span>
 
 			<input
-				v-if="!multiline && !autoheight && !code && inputRows < 2"
-				:id
-				ref="input"
-				v-model.trim="inputVal"
-				:name
-				:title
-				:autocomplete
-				:type
-				:rows="1"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@focusout="onFocusout"
-				@focus="onFocus"
-				@input="updateInputVal"
+				v-if="!multiline && !autoheight && !code && inputRows < 2" :id ref="input" v-model.trim="inputVal"
+				:name :title :autocomplete :type :rows="1" :placeholder="placeholder || label" :disabled :required
+				:pattern v-bind="nativeInputAttrs" @focusout="onFocusout" @focus="onFocus" @input="updateInputVal"
 			>
 			<textarea
-				v-else
-				:id
-				ref="input"
-				v-model="inputVal"
-				:name
-				:title
-				:type
-				:rows="inputRows"
-				:placeholder="placeholder || label"
-				:disabled
-				:required
-				:pattern
-				v-bind="nativeInputAttrs"
-				@input="updateInputVal"
-				@focusout="onFocusout"
+				v-else :id ref="input" v-model="inputVal" :name :title :type :rows="inputRows"
+				:placeholder="placeholder || label" :disabled :required :pattern v-bind="nativeInputAttrs"
+				@input="updateInputVal" @focusout="onFocusout"
 			/>
 			<p v-if="helptext" class="opacity-7 light">{{ helptext }}</p>
-			<Icon
-				v-if="iconStart"
-				class="iconStart"
-				:icon="iconStart"
-			/>
-			<Icon
-				v-if="icon"
-				:icon
-			/>
+			<Icon v-if="iconStart" class="iconStart" :icon="iconStart" />
+			<Icon v-if="icon" :icon />
 		</label>
 	</div>
 </template>
@@ -178,6 +148,7 @@ onMounted(() => {
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
+
 .code textarea::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
@@ -206,22 +177,25 @@ onMounted(() => {
 .textInputIconWrap .bgl_icon-font {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
+	inset-inline-end: calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input{
+
+.textInputIconWrap input {
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
 	color: var(--input-color);
 	position: absolute;
-    inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 );
+	inset-inline-start: calc(var(--input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--input-height) / 2);
 	line-height: 0;
 }
-.txtInputIconStart input, .txtInputIconStart textarea{
+
+.txtInputIconStart input,
+.txtInputIconStart textarea {
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }