vuestic-ui/dist/esm-node/src/composables/useInputMask/useInputMask.mjs

Vue 3 UI Framework

import { ref, computed, watch, unref } from "vue";
import { a as Cursor, C as CursorPosition } from "./cursor.mjs";
import { u as unwrapEl } from "../../utils/unwrapEl.mjs";
const extractInput = (el) => {
  const htmlEl = unwrapEl(el);
  if (!htmlEl) {
    return null;
  }
  if (htmlEl.tagName === "INPUT") {
    return htmlEl;
  }
  return htmlEl.querySelector("input");
};
const useInputMask = (mask, el) => {
  const inputText = ref("");
  const formatted = ref({
    text: "",
    tokens: [],
    data: void 0
  });
  const input = computed(() => extractInput(el.value));
  const setInputValue = (value, options) => {
    if (input.value.value === value) {
      return;
    }
    input.value.value = value;
    input.value.dispatchEvent(new InputEvent("input", options));
  };
  const onBeforeInput = (e) => {
    const { inputType } = e;
    const eventTarget = e.target;
    const data = e.data === null ? "" : e.data;
    const currentValue = eventTarget.value;
    const selectionStart = eventTarget.selectionStart ?? 0;
    const selectionEnd = eventTarget.selectionEnd ?? 0;
    const cursorStart = new Cursor(selectionStart, formatted.value.tokens);
    const cursorEnd = new Cursor(selectionEnd, formatted.value.tokens);
    if (inputType === "deleteContentBackward") {
      e.preventDefault();
      if (+cursorStart === +cursorEnd) {
        cursorStart.moveBack(1, CursorPosition.AfterChar);
      }
    } else if (inputType === "deleteContentForward" || inputType === "deleteContent" || inputType === "deleteByCut") {
      e.preventDefault();
      if (+cursorStart === +cursorEnd) {
        cursorEnd.moveForward(1, CursorPosition.AfterChar);
      }
    } else if (inputType === "insertText" || inputType === "insertFromPaste") {
      e.preventDefault();
    }
    const tokens = formatted.value.tokens;
    inputText.value = currentValue.slice(0, +cursorStart) + data + currentValue.slice(+cursorEnd);
    formatted.value = unref(mask).format(inputText.value);
    if (inputType === "insertFromPaste") {
      cursorStart.position += formatted.value.text.length - currentValue.length;
    }
    unref(mask).handleCursor(cursorStart, cursorEnd, tokens, formatted.value.tokens, data, formatted.value.data);
    setInputValue(formatted.value.text, e);
    eventTarget.setSelectionRange(+cursorStart, +cursorEnd);
  };
  const onKeydown = (e) => {
    const el2 = e.target;
    if (e.key === "ArrowLeft") {
      if (el2.selectionStart === el2.selectionEnd) {
        const cursor = new Cursor(el2.selectionStart ?? 0, formatted.value.tokens);
        cursor.moveBack(1);
        el2.setSelectionRange(+cursor, +cursor);
      } else {
        el2.setSelectionRange(el2.selectionStart, el2.selectionStart);
      }
      e.preventDefault();
    }
    if (e.key === "ArrowRight") {
      if (el2.selectionStart === el2.selectionEnd) {
        const cursor = new Cursor(el2.selectionEnd ?? 0, formatted.value.tokens);
        cursor.moveForward(1);
        el2.setSelectionRange(+cursor, +cursor);
      } else {
        el2.setSelectionRange(el2.selectionEnd, el2.selectionEnd);
      }
      e.preventDefault();
    }
  };
  watch(input, (newValue, oldValue) => {
    if (newValue) {
      formatted.value = unref(mask).format(newValue.value);
      const cursor = new Cursor(newValue.selectionEnd ?? 0, formatted.value.tokens);
      cursor.moveForward(1);
      setInputValue(formatted.value.text);
      newValue.setSelectionRange(+cursor, +cursor);
      newValue.addEventListener("beforeinput", onBeforeInput);
      newValue.addEventListener("keydown", onKeydown);
    }
    if (oldValue) {
      oldValue.removeEventListener("beforeinput", onBeforeInput);
      oldValue.removeEventListener("keydown", onKeydown);
    }
  }, { immediate: true });
  const unmasked = computed(() => {
    return unref(mask).unformat(formatted.value.text, formatted.value.tokens);
  });
  return {
    inputText: formatted,
    masked: computed(() => {
      var _a;
      return ((_a = formatted.value) == null ? void 0 : _a.text) ?? "";
    }),
    unmasked
  };
};
export {
  useInputMask as u
};
//# sourceMappingURL=useInputMask.mjs.map