vueless 0.0.786 → 0.0.787

package/package.json

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

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

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

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

@@ -24,11 +24,15 @@ export default function useFormatCurrency(
 
   watch(
     () => options,
-    () => setValue(formattedValue.value),
+    () => {
+      validateOptions();
+      setValue(formattedValue.value);
+    },
     { deep: true },
   );
 
   onMounted(() => {
+    validateOptions();
     inputElement = document.getElementById(elementId) as HTMLInputElement;
 
     if (inputElement) {
@@ -43,6 +47,25 @@ export default function useFormatCurrency(
     }
   });
 
+  function validateOptions() {
+    const warnMessages = [];
+
+    if (options.value.decimalSeparator.length > 1) {
+      warnMessages.push(
+        "[VUELESS/UInputMoney]: DecimalSeparator should not contain more than one symbol.",
+      );
+    }
+
+    if (options.value.thousandsSeparator.length > 1) {
+      warnMessages.push(
+        "[VUELESS/UInputMoney]: ThousandsSeparator should not contain more than one symbol.",
+      );
+    }
+
+    // eslint-disable-next-line no-console
+    warnMessages.forEach((message) => console.warn(message));
+  }
+
   /**
    * Set input value manually.
    * @param {Intl.StringNumericLiteral} value
@@ -193,7 +216,7 @@ export default function useFormatCurrency(
 
     inputElement.value = formattedValue.value;
 
-    await setInputCursor(newFormattedValue, inputElement, cursorStart, cursorEnd);
+    await setInputCursor(newFormattedValue, inputElement, cursorStart, cursorEnd, eventData);
 
     prevValue.value = formattedValue.value;
   }
@@ -201,8 +224,9 @@ export default function useFormatCurrency(
   async function setInputCursor(
     newValue: string,
     inputElement: HTMLInputElement,
-    prevCursorStart: number | null,
-    prevCursorEnd: number | null,
+    prevCursorStart: number,
+    prevCursorEnd: number,
+    eventData: string,
   ) {
     const hasValueInputValue = prevCursorStart === 1 && prevCursorEnd === 1;
 
@@ -219,16 +243,33 @@ export default function useFormatCurrency(
 
     await nextTick();
 
-    if (offset < 0 && inputElement) {
+    if (newValue.length <= 1) return;
+
+    // Move cursor after decimal mark
+    if (newValue.length < prevValue.value.length && eventData) {
+      const newChar = newValue[prevCursorEnd - 1];
+
+      prevCursorEnd -= newChar === options.value.decimalSeparator ? 0 : 1;
+      prevCursorStart -= newChar === options.value.decimalSeparator ? 0 : 1;
+    }
+
+    if (offset < 0 && inputElement && eventData) {
       inputElement.setSelectionRange(prevCursorStart, prevCursorEnd);
 
       return;
     }
 
+    // Move cursor step back on backspace.
+    if (offset < 0 && inputElement && !eventData) {
+      inputElement.setSelectionRange(prevCursorStart - 1, prevCursorEnd - 1);
+
+      return;
+    }
+
     if (newValue.length === prevCursorEnd || !prevCursorStart || !prevCursorEnd) return;
 
-    let newCursorStart = prevCursorStart;
-    let newCursorEnd = prevCursorEnd;
+    let newCursorStart = prevCursorStart + offset;
+    let newCursorEnd = prevCursorEnd + offset;
 
     if (hasValueInputValue && prefixLength) {
       newCursorStart += prefixLength;
@@ -236,7 +277,7 @@ export default function useFormatCurrency(
     }
 
     if (inputElement) {
-      inputElement.setSelectionRange(newCursorStart + offset, newCursorEnd + offset);
+      inputElement.setSelectionRange(newCursorStart, newCursorEnd);
     }
   }