vueless 0.0.765 → 0.0.767

package/package.json

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

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

@@ -112,7 +112,7 @@ const { getDataTest, moneyInputAttrs } = useUI<Config>(defaultConfig);
   <UInput
     :id="elementId"
     ref="moneyInputRef"
-    v-model="formattedValue"
+    :model-value="formattedValue"
     :size="size"
     :label="localLabel"
     :label-align="labelAlign"

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

@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Input value.
    */
-  modelValue?: number | string;
+  modelValue?: string;
   /**
    * Input label.
    */

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

@@ -1,22 +1,29 @@
-import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch } from "vue";
+import { onMounted, nextTick, ref, onBeforeUnmount, toValue, watch, computed, readonly } from "vue";
 
 import { getRawValue, getFormattedValue } from "./utilFormat.ts";
 
 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(
   elementId: string = "",
-  options: (() => FormatOptions) | FormatOptions,
+  formatOptions: (() => FormatOptions) | FormatOptions,
 ) {
-  let prevValue = "";
   let inputElement: HTMLInputElement | null = null;
 
   const formattedValue = ref("");
   const rawValue = ref("");
+  const prevValue = ref("");
+
+  const options = computed(() => toValue(formatOptions));
 
-  // update value according to updated options
   watch(
-    () => toValue(options),
+    () => options,
     () => setValue(formattedValue.value),
     { deep: true },
   );
@@ -26,7 +33,7 @@ export default function useFormatCurrency(
 
     if (inputElement) {
       inputElement.addEventListener("input", onInput);
-      onInput(formattedValue.value as unknown as InputEvent);
+      inputElement.addEventListener("keydown", onKeydown);
     }
   });
 
@@ -36,61 +43,196 @@ export default function useFormatCurrency(
     }
   });
 
-  // Use to set input value manually
-  function setValue(value: string | number) {
-    const localFormattedValue = getFormattedValue(value, toValue(options));
+  /**
+   * Set input value manually.
+   * @param {Intl.StringNumericLiteral} value
+   * @returns {void}
+   */
+  function setValue(value: string) {
+    const newFormattedValue = getFormattedValue(value, options.value);
 
-    formattedValue.value = localFormattedValue;
-    rawValue.value = getRawValue(localFormattedValue, toValue(options));
+    formattedValue.value = newFormattedValue;
+    rawValue.value = getRawValue(newFormattedValue, options.value);
 
-    prevValue = formattedValue.value;
+    prevValue.value = formattedValue.value;
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (!event.target || !inputElement) return;
+
+    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) {
+      const charToRemove = inputElement.value[cursorStart - 1];
+      const isFormatChar = [
+        options.value.thousandsSeparator,
+        options.value.prefix,
+        options.value.decimalSeparator,
+      ].includes(charToRemove);
+
+      // Skip unremovable character and put cursor one step back.
+      if (isFormatChar && !inputElement.value.endsWith(options.value.decimalSeparator)) {
+        event.preventDefault();
+
+        inputElement.setSelectionRange(cursorStart - 1, cursorEnd - 1);
+      }
+
+      return;
+    }
+
+    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) {
-    if (!event.target) return;
+    if (!event.target || !inputElement) return;
+
+    await nextTick();
+
+    const cursorStart = inputElement.selectionStart || 0;
+    const cursorEnd = inputElement.selectionEnd || 0;
+
+    const input = event.target as HTMLInputElement;
+
+    let value = input.value || "";
+
+    const prevCursorPosition = cursorEnd - 1;
+    const eventData = (event as InputEvent).data || "";
+
+    if (value === minus) {
+      formattedValue.value = minus;
+      rawValue.value = minus;
+    }
+
+    if (!value || value.startsWith(`${options.value.decimalSeparator}0`)) {
+      formattedValue.value = options.value.prefix;
+      rawValue.value = "";
+
+      return;
+    }
+
+    // Replace dot with decimal separator
+    if (eventData === rawDecimalMark || eventData === comma) {
+      value = [
+        ...prevValue.value.slice(0, prevCursorPosition),
+        options.value.decimalSeparator,
+        ...prevValue.value.slice(prevCursorPosition),
+      ].join("");
+    }
+
+    if (value.split(options.value.decimalSeparator).length > 2) {
+      value = value.split("").with(value.lastIndexOf(options.value.decimalSeparator), "").join("");
+    }
+
+    if (value.endsWith(options.value.decimalSeparator)) {
+      formattedValue.value = value;
+
+      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);
+    const isMinusWithin = newRawValue.includes(minus) && !newRawValue.startsWith(minus);
 
-    await nextTick(async () => {
-      if (!inputElement) return;
+    const isReservedSymbol = eventData !== rawDecimalMark && eventData !== comma;
 
-      let cursorStart = inputElement.selectionStart;
-      let cursorEnd = inputElement.selectionEnd;
+    if (
+      (!isNumericValue && isReservedSymbol && !isMinus && eventData.length === 1) ||
+      isDoubleMinus ||
+      isMinusWithin
+    ) {
+      inputElement.value = formattedValue.value;
 
-      const hasValueInputValue = cursorEnd === 1 && cursorStart === 1;
-      const input = event.target as HTMLInputElement;
-      const value = input.value || "";
+      await nextTick();
 
-      const localFormattedValue = getFormattedValue(value, toValue(options));
+      inputElement.setSelectionRange(cursorStart, cursorEnd);
 
-      const currentValueOffsetLength = localFormattedValue
-        .split("")
-        .filter((value: string) => value === toValue(options).thousandsSeparator).length;
+      return;
+    }
 
-      const prevValueOffsetLength = prevValue
-        .split("")
-        .filter((value) => value === toValue(options).thousandsSeparator).length;
+    const newFormattedValue = getFormattedValue(newRawValue, options.value);
 
-      const prefixLength = toValue(options).prefix.length;
-      const offset = currentValueOffsetLength - prevValueOffsetLength;
+    if (Number.isNaN(newFormattedValue) || newFormattedValue.includes("NaN")) {
+      inputElement.value = prevValue.value;
 
-      formattedValue.value = localFormattedValue || toValue(options).prefix;
-      rawValue.value = getRawValue(localFormattedValue, toValue(options));
+      return;
+    }
 
-      await nextTick(() => {
-        if (localFormattedValue.length === cursorEnd || !cursorStart || !cursorEnd) return;
+    formattedValue.value = newFormattedValue;
+    rawValue.value = getRawValue(newFormattedValue, options.value);
 
-        if (hasValueInputValue && prefixLength) {
-          cursorStart += prefixLength;
-          cursorEnd += prefixLength;
-        }
+    inputElement.value = formattedValue.value;
+
+    await setInputCursor(newFormattedValue, inputElement, cursorStart, cursorEnd);
+
+    prevValue.value = formattedValue.value;
+  }
 
-        if (inputElement) {
-          inputElement.setSelectionRange(cursorStart + offset, cursorEnd + offset);
-        }
-      });
+  async function setInputCursor(
+    newValue: string,
+    inputElement: HTMLInputElement,
+    prevCursorStart: number | null,
+    prevCursorEnd: number | null,
+  ) {
+    const hasValueInputValue = prevCursorStart === 1 && prevCursorEnd === 1;
 
-      prevValue = formattedValue.value;
-    });
+    const currentValueOffsetLength = newValue
+      .split("")
+      .filter((value: string) => value === options.value.thousandsSeparator).length;
+
+    const prevValueOffsetLength = prevValue.value
+      .split("")
+      .filter((value) => value === options.value.thousandsSeparator).length;
+
+    const prefixLength = options.value.prefix.length;
+    const offset = currentValueOffsetLength - prevValueOffsetLength;
+
+    await nextTick();
+
+    if (offset < 0 && inputElement) {
+      inputElement.setSelectionRange(prevCursorStart, prevCursorEnd);
+
+      return;
+    }
+
+    if (newValue.length === prevCursorEnd || !prevCursorStart || !prevCursorEnd) return;
+
+    let newCursorStart = prevCursorStart;
+    let newCursorEnd = prevCursorEnd;
+
+    if (hasValueInputValue && prefixLength) {
+      newCursorStart += prefixLength;
+      newCursorEnd += prefixLength;
+    }
+
+    if (inputElement) {
+      inputElement.setSelectionRange(newCursorStart + offset, newCursorEnd + offset);
+    }
   }
 
-  return { rawValue, formattedValue, setValue };
+  return { rawValue: readonly(rawValue), formattedValue: readonly(formattedValue), setValue };
 }

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

@@ -1,81 +1,30 @@
 import type { FormatOptions } from "./types.ts";
 
-const isNumberValueRegExp = /^[\d,.\s-]+$/;
 const rawDecimalMark = ".";
-const minus = "-";
 
-export function getRawValue(value: string | number, options: FormatOptions): string {
+export function getRawValue(
+  value: string,
+  options: Pick<FormatOptions, "prefix" | "decimalSeparator" | "thousandsSeparator">,
+): Intl.StringNumericLiteral {
   const { thousandsSeparator, decimalSeparator, prefix } = options;
 
-  value = String(value).endsWith(decimalSeparator)
-    ? String(value).replace(decimalSeparator, "")
-    : String(value);
+  value = value.endsWith(decimalSeparator) ? value.replace(decimalSeparator, "") : value;
 
   const rawValueWithPrefix = value
     .replaceAll(thousandsSeparator, "")
-    .replaceAll(" ", "")
     .replace(decimalSeparator, rawDecimalMark);
 
-  return rawValueWithPrefix.replace(prefix, "");
+  return rawValueWithPrefix.replace(prefix, "") as Intl.StringNumericLiteral;
 }
 
-export function getFormattedValue(value: string | number, options: FormatOptions): string {
-  const {
-    thousandsSeparator,
-    decimalSeparator,
-    minFractionDigits,
-    maxFractionDigits,
-    prefix,
-    positiveOnly,
-  } = options;
+export function getFormattedValue(value: string, options: FormatOptions): string {
+  const { thousandsSeparator, decimalSeparator, prefix, positiveOnly } = options;
 
-  const invalidValuesRegExp = new RegExp("[^\\d,\\d.\\s-" + decimalSeparator + "]", "g");
-  const doubleValueRegExp = new RegExp("([,\\.\\s\\-" + decimalSeparator + "])+", "g");
+  const minFractionDigits = Math.abs(options.minFractionDigits);
+  const maxFractionDigits = Math.abs(options.maxFractionDigits);
 
-  const actualMinFractionDigit =
-    minFractionDigits <= maxFractionDigits ? minFractionDigits : maxFractionDigits;
-
-  // slice to first decimal mark
-  value = String(value)
-    .replaceAll(rawDecimalMark, decimalSeparator)
-    .split(decimalSeparator)
-    .slice(0, 2)
-    .map((value: string, index: number) =>
-      index ? value.replaceAll(thousandsSeparator, "") : value,
-    )
-    .join(decimalSeparator);
-
-  value = String(value)
-    .replace(invalidValuesRegExp, "")
-    .replace(doubleValueRegExp, "$1")
-    .replaceAll(decimalSeparator, rawDecimalMark)
-    .trim();
-
-  const isNumber = isNumberValueRegExp.test(value);
-  const isFloat = value.endsWith(rawDecimalMark) || value.endsWith(".0");
-  const isMinus = value === minus;
-
-  if (isMinus && positiveOnly) {
-    value = "";
-  }
-
-  if (value.includes(minus)) {
-    let isFirstMinus = value.startsWith(minus);
-
-    value = value.replaceAll(minus, (match) => {
-      if (isFirstMinus) {
-        isFirstMinus = false;
-
-        return match;
-      }
-
-      return "";
-    });
-  }
-
-  if (!value || !isNumber || isFloat || isMinus) {
-    return `${prefix}${value.replaceAll(rawDecimalMark, decimalSeparator)}`;
-  }
+  const isValidMinFractionDigits = minFractionDigits <= maxFractionDigits;
+  const actualMinFractionDigit = isValidMinFractionDigits ? minFractionDigits : maxFractionDigits;
 
   const intlNumberOptions: Intl.NumberFormatOptions = {
     minimumFractionDigits: actualMinFractionDigit,
@@ -89,31 +38,12 @@ export function getFormattedValue(value: string | number, options: FormatOptions
 
   const intlNumber = new Intl.NumberFormat("en-US", intlNumberOptions);
 
-  const rawValue = getRawValue(value, {
-    decimalSeparator,
-    thousandsSeparator,
-    prefix,
-    minFractionDigits: 0,
-    maxFractionDigits: 2,
-    positiveOnly: false,
-  });
-
   const formattedValue = intlNumber
-    .formatToParts((rawValue || 0) as unknown as number)
+    .formatToParts(value as Intl.StringNumericLiteral)
     .map((part) => {
       if (part.type === "group") part.value = thousandsSeparator;
       if (part.type === "decimal") part.value = decimalSeparator;
 
-      if (part.type === "fraction") {
-        const fraction = rawValue.split(rawDecimalMark).at(-1) || "";
-        const formattedFraction = fraction
-          .split("")
-          .slice(actualMinFractionDigit, maxFractionDigits)
-          .join("");
-
-        part.value = formattedFraction;
-      }
-
       return part;
     });