vueless 0.0.767 → 0.0.768

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.767",
+  "version": "0.0.768",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.form-input-money/UInputMoney.vue

@@ -56,19 +56,21 @@ watch(
   () => props.modelValue,
   () => {
     if (String(localValue.value) !== String(rawValue.value)) {
-      setValue(localValue.value);
+      setValue(String(localValue.value));
     }
   },
 );
 
 onMounted(() => {
   if (localValue.value) {
-    setValue(localValue.value);
+    setValue(String(localValue.value));
   }
 });
 
 function onKeyup(event: KeyboardEvent) {
-  localValue.value = rawValue.value || "";
+  const numberValue = rawValue.value ? parseFloat(rawValue.value) : "";
+
+  localValue.value = props.valueType === "number" ? numberValue : rawValue.value || "";
 
   nextTick(() => emit("keyup", event));
 }

package/ui.form-input-money/config.ts

@@ -9,6 +9,7 @@ export default /*tw*/ {
     thousandsSeparator: " ",
     labelAlign: "topInside",
     prefix: "",
+    valueType: "number",
     positiveOnly: false,
     readonly: false,
     disabled: false,

package/ui.form-input-money/types.ts

@@ -17,7 +17,13 @@ export interface Props {
   /**
    * Input value.
    */
-  modelValue?: string;
+  modelValue?: string | number;
+
+  /**
+   * Set type of the modelValue.
+   */
+  valueType?: "string" | "number";
+
   /**
    * Input label.
    */

package/ui.form-input-money/useFormatCurrency.ts

@@ -7,7 +7,6 @@ import type { FormatOptions } from "./types.ts";
 const digitSet = ["1", "2", "3", "4", "5", "6", "7", "9", "0"];
 const rawDecimalMark = ".";
 const comma = ",";
-const arrowKeys = ["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"];
 const minus = "-";
 
 export default function useFormatCurrency(
@@ -62,8 +61,6 @@ export default function useFormatCurrency(
 
     const cursorStart = inputElement.selectionStart || 0;
     const cursorEnd = inputElement.selectionEnd || 0;
-    const isEndOfValue = cursorEnd === formattedValue.value.length;
-    const isKeyCombination = event.ctrlKey || event.shiftKey || event.metaKey || event.altKey;
     const isSelection = cursorEnd !== cursorStart;
 
     if (event.key === "Backspace" && !isSelection) {
@@ -85,25 +82,12 @@ export default function useFormatCurrency(
     }
 
     const endsWithDecimal = formattedValue.value.endsWith(options.value.decimalSeparator);
-    const includesDecimalMark =
-      formattedValue.value.includes(options.value.decimalSeparator) && !endsWithDecimal;
-    const isCharKey = !arrowKeys.includes(event.key) && !isKeyCombination;
 
     if ((event.key === comma || event.key === rawDecimalMark) && endsWithDecimal) {
       event.preventDefault();
 
       return;
     }
-
-    if (isEndOfValue && includesDecimalMark && isCharKey && !isSelection) {
-      const fraction = prevValue.value.split(options.value.decimalSeparator).at(-1) || "";
-
-      if (fraction.length >= options.value.maxFractionDigits) {
-        event.preventDefault();
-      }
-
-      return;
-    }
   }
 
   async function onInput(event: Event) {
@@ -146,13 +130,25 @@ export default function useFormatCurrency(
       value = value.split("").with(value.lastIndexOf(options.value.decimalSeparator), "").join("");
     }
 
-    if (value.endsWith(options.value.decimalSeparator)) {
+    const decimalSeparatorIndex = value.indexOf(options.value.decimalSeparator);
+    const newRawValue = getRawValue(value, options.value);
+
+    const isEventDataDecimal =
+      value.endsWith(options.value.decimalSeparator) ||
+      value.endsWith(`${options.value.decimalSeparator}0`);
+
+    if (
+      isEventDataDecimal &&
+      cursorStart > decimalSeparatorIndex &&
+      !options.value.minFractionDigits
+    ) {
       formattedValue.value = value;
 
+      rawValue.value = newRawValue;
+
       return;
     }
 
-    const newRawValue = getRawValue(value, options.value);
     const isNumericValue = eventData && digitSet.includes(eventData);
     const isMinus = cursorEnd === 1 && cursorStart === 1 && eventData === minus;
     const isDoubleMinus = isMinus && prevValue.value.startsWith(minus);