sprintify-ui 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseNumber.vue

@@ -9,7 +9,7 @@
       leave-to-class="transform scale-90 opacity-0"
     >
       <div
-        v-if="showInvalidInput"
+        v-if="showInvalidInput && invalidInput"
         class="absolute left-0 top-full z-[1]"
       >
         <div
@@ -171,34 +171,50 @@ function convertToNumber(
   value: string | number | null | undefined
 ): number | null {
   if (value === null) return null;
-  let number = parseFloat(value + '');
+  const number = parseFloat(value + '');
   if (Number.isNaN(number)) {
     return null;
   }
+  return number;
+}
+
+function convertToValidNumber(
+  value: string | number | null | undefined
+): number | null {
+  let number = convertToNumber(value);
+
+  if (number === null) return null;
+
   if (hasMax.value) {
     number = Math.min(number, props.max as number);
   }
+
   if (hasMin.value) {
     number = Math.max(number, props.min as number);
   }
+
   return round(number, precision.value);
 }
 
 const valueInternal = ref<null | string | number>(null);
 
-const realValueInternal = computed<number | null>(() => {
+const valueInternalNumber = computed<number | null>(() => {
   return convertToNumber(valueInternal.value);
 });
 
+const valueInternalValidNumber = computed<number | null>(() => {
+  return convertToValidNumber(valueInternal.value);
+});
+
 const realValueInternalAsString = computed<string>(() => {
-  if (realValueInternal.value === null) return '';
-  return realValueInternal.value.toLocaleString('fullwide', {
+  if (valueInternalValidNumber.value === null) return '';
+  return valueInternalValidNumber.value.toLocaleString('fullwide', {
     useGrouping: false,
   });
 });
 
 const invalidInput = computed(() => {
-  if (realValueInternal.value == null && valueInternal.value == '') {
+  if (valueInternalValidNumber.value == null && valueInternal.value == '') {
     return false;
   }
 
@@ -206,13 +222,13 @@ const invalidInput = computed(() => {
 });
 
 const tooBig = computed(() => {
-  if (realValueInternal.value === null) return false;
-  return hasMax.value && realValueInternal.value > (props.max as number);
+  if (valueInternalNumber.value === null) return false;
+  return hasMax.value && valueInternalNumber.value > (props.max as number);
 });
 
 const tooSmall = computed(() => {
-  if (realValueInternal.value === null) return false;
-  return hasMin.value && realValueInternal.value < (props.min as number);
+  if (valueInternalNumber.value === null) return false;
+  return hasMin.value && valueInternalNumber.value < (props.min as number);
 });
 
 const tooPrecise = computed(() => {
@@ -224,10 +240,8 @@ const tooPrecise = computed(() => {
   return parts[1].length > precision.value;
 });
 
-valueInternal.value = convertToNumber(props.modelValue);
-
-if (valueInternal.value != props.modelValue) {
-  emitUpdate(realValueInternal.value);
+if (convertToValidNumber(props.modelValue) != props.modelValue) {
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 let timeoutId = undefined as undefined | number;
@@ -247,7 +261,7 @@ function onInput(event: any) {
 
   valueInternal.value = value;
 
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 
   nextTick(() => {
     showHideInvalidOnInput();
@@ -306,46 +320,46 @@ function updateInternalValueToRealValue() {
   if (!props.autoFix) {
     return;
   }
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = '';
     return;
   }
   valueInternal.value = round(
-    realValueInternal.value ?? defaultValue.value,
+    valueInternalValidNumber.value ?? defaultValue.value,
     precision.value
   );
 }
 
 function increment() {
   if (props.disabled) return;
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = defaultValue.value;
   } else {
     const newValue = round(
-      realValueInternal.value + stepNormalized.value,
+      valueInternalValidNumber.value + stepNormalized.value,
       precision.value
     );
     if (!hasMax.value || newValue <= (props.max as number)) {
       valueInternal.value = newValue;
     }
   }
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 function decrement() {
   if (props.disabled) return;
-  if (realValueInternal.value === null) {
+  if (valueInternalValidNumber.value === null) {
     valueInternal.value = defaultValue.value;
   } else {
     const newValue = round(
-      realValueInternal.value - stepNormalized.value,
+      valueInternalValidNumber.value - stepNormalized.value,
       precision.value
     );
     if (!hasMin.value || newValue >= (props.min as number)) {
       valueInternal.value = newValue;
     }
   }
-  emitUpdate(realValueInternal.value);
+  emitUpdate(valueInternalValidNumber.value);
 }
 
 const borderColor = computed(() => {