vueless 0.0.766 → 0.0.768

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.766",
+  "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));
 }
@@ -112,7 +114,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/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?: number | string;
+  modelValue?: string | number;
+
+  /**
+   * Set type of the modelValue.
+   */
+  valueType?: "string" | "number";
+
   /**
    * Input label.
    */

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

@@ -1,22 +1,28 @@
-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 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 +32,7 @@ export default function useFormatCurrency(
 
     if (inputElement) {
       inputElement.addEventListener("input", onInput);
-      onInput(formattedValue.value as unknown as InputEvent);
+      inputElement.addEventListener("keydown", onKeydown);
     }
   });
 
@@ -36,61 +42,193 @@ 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 = newFormattedValue;
+    rawValue.value = getRawValue(newFormattedValue, options.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 isSelection = cursorEnd !== cursorStart;
 
-    formattedValue.value = localFormattedValue;
-    rawValue.value = getRawValue(localFormattedValue, toValue(options));
+    if (event.key === "Backspace" && !isSelection) {
+      const charToRemove = inputElement.value[cursorStart - 1];
+      const isFormatChar = [
+        options.value.thousandsSeparator,
+        options.value.prefix,
+        options.value.decimalSeparator,
+      ].includes(charToRemove);
 
-    prevValue = formattedValue.value;
+      // 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);
+
+    if ((event.key === comma || event.key === rawDecimalMark) && endsWithDecimal) {
+      event.preventDefault();
+
+      return;
+    }
   }
 
   async function onInput(event: Event) {
-    if (!event.target) return;
+    if (!event.target || !inputElement) return;
 
-    await nextTick(async () => {
-      if (!inputElement) return;
+    await nextTick();
 
-      let cursorStart = inputElement.selectionStart;
-      let cursorEnd = inputElement.selectionEnd;
+    const cursorStart = inputElement.selectionStart || 0;
+    const cursorEnd = inputElement.selectionEnd || 0;
 
-      const hasValueInputValue = cursorEnd === 1 && cursorStart === 1;
-      const input = event.target as HTMLInputElement;
-      const value = input.value || "";
+    const input = event.target as HTMLInputElement;
 
-      const localFormattedValue = getFormattedValue(value, toValue(options));
+    let value = input.value || "";
 
-      const currentValueOffsetLength = localFormattedValue
-        .split("")
-        .filter((value: string) => value === toValue(options).thousandsSeparator).length;
+    const prevCursorPosition = cursorEnd - 1;
+    const eventData = (event as InputEvent).data || "";
 
-      const prevValueOffsetLength = prevValue
-        .split("")
-        .filter((value) => value === toValue(options).thousandsSeparator).length;
+    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;
+    }
 
-      const prefixLength = toValue(options).prefix.length;
-      const offset = currentValueOffsetLength - prevValueOffsetLength;
+    // 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("");
+    }
+
+    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;
+    }
 
-      formattedValue.value = localFormattedValue || toValue(options).prefix;
-      rawValue.value = getRawValue(localFormattedValue, toValue(options));
+    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(() => {
-        if (localFormattedValue.length === cursorEnd || !cursorStart || !cursorEnd) return;
+    const isReservedSymbol = eventData !== rawDecimalMark && eventData !== comma;
 
-        if (hasValueInputValue && prefixLength) {
-          cursorStart += prefixLength;
-          cursorEnd += prefixLength;
-        }
+    if (
+      (!isNumericValue && isReservedSymbol && !isMinus && eventData.length === 1) ||
+      isDoubleMinus ||
+      isMinusWithin
+    ) {
+      inputElement.value = formattedValue.value;
 
-        if (inputElement) {
-          inputElement.setSelectionRange(cursorStart + offset, cursorEnd + offset);
-        }
-      });
+      await nextTick();
 
-      prevValue = formattedValue.value;
-    });
+      inputElement.setSelectionRange(cursorStart, cursorEnd);
+
+      return;
+    }
+
+    const newFormattedValue = getFormattedValue(newRawValue, options.value);
+
+    if (Number.isNaN(newFormattedValue) || newFormattedValue.includes("NaN")) {
+      inputElement.value = prevValue.value;
+
+      return;
+    }
+
+    formattedValue.value = newFormattedValue;
+    rawValue.value = getRawValue(newFormattedValue, options.value);
+
+    inputElement.value = formattedValue.value;
+
+    await setInputCursor(newFormattedValue, inputElement, cursorStart, cursorEnd);
+
+    prevValue.value = formattedValue.value;
+  }
+
+  async function setInputCursor(
+    newValue: string,
+    inputElement: HTMLInputElement,
+    prevCursorStart: number | null,
+    prevCursorEnd: number | null,
+  ) {
+    const hasValueInputValue = prevCursorStart === 1 && prevCursorEnd === 1;
+
+    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,25 +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") {
-        part.value = part.value.padEnd(maxFractionDigits, "0");
-      }
-
       return part;
     });