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

Vue 3 UI Framework

{"version":3,"file":"useInputMask.mjs","sources":["../../../../../src/composables/useInputMask/useInputMask.ts"],"sourcesContent":["import { ComponentPublicInstance, MaybeRef, Ref, computed, isRef, ref, unref, watch } from 'vue'\nimport { Mask, MaskToken } from './mask'\nimport { Cursor, CursorPosition } from './cursor'\nimport { unwrapEl } from '../../utils/unwrapEl'\n\nconst extractInput = (el: HTMLElement | null | undefined | ComponentPublicInstance) => {\n  const htmlEl = unwrapEl(el)\n\n  if (!htmlEl) {\n    return null\n  }\n\n  if (htmlEl.tagName === 'INPUT') {\n    return htmlEl as HTMLInputElement\n  }\n\n  return htmlEl.querySelector('input')\n}\n\nexport const useInputMask = <Token extends MaskToken>(mask: MaybeRef<Mask<Token>>, el: Ref<HTMLInputElement | undefined | null | ComponentPublicInstance>) => {\n  const inputText = ref('')\n\n  const formatted = ref({\n    text: '',\n    tokens: [],\n    data: undefined,\n  }) as Ref<{\n    text: string,\n    tokens: Token[],\n    data?: any\n  }>\n\n  const input = computed(() => extractInput(el.value))\n\n  const setInputValue = (value: string, options?: InputEventInit) => {\n    if (input.value!.value === value) {\n      return\n    }\n    input.value!.value = value\n    input.value!.dispatchEvent(new InputEvent('input', options))\n  }\n\n  const onBeforeInput = (e: InputEvent) => {\n    const { inputType } = e\n    const eventTarget = e.target as HTMLInputElement\n\n    const data = e.data === null ? '' : e.data\n\n    const currentValue = eventTarget.value\n\n    const selectionStart = eventTarget.selectionStart ?? 0\n    const selectionEnd = eventTarget.selectionEnd ?? 0\n\n    const cursorStart = new Cursor<Token>(selectionStart, formatted.value!.tokens)\n    const cursorEnd = new Cursor<Token>(selectionEnd, formatted.value!.tokens)\n\n    // All input types: https://w3c.github.io/input-events/#interface-InputEvent-Attributes\n\n    if (inputType === 'deleteContentBackward') {\n      e.preventDefault()\n      if (+cursorStart === +cursorEnd) {\n        // From 1[]2 to [1]2\n        cursorStart.moveBack(1, CursorPosition.AfterChar)\n      }\n    } else if (inputType === 'deleteContentForward' || inputType === 'deleteContent' || inputType === 'deleteByCut') {\n      e.preventDefault()\n      if (+cursorStart === +cursorEnd) {\n        // From 1[]23 to 1[2]3\n        cursorEnd.moveForward(1, CursorPosition.AfterChar)\n      }\n    } else if (inputType === 'insertText' || inputType === 'insertFromPaste') {\n      e.preventDefault()\n    }\n\n    const tokens = formatted.value.tokens\n    inputText.value = currentValue.slice(0, +cursorStart) + data + currentValue.slice(+cursorEnd)\n    formatted.value = unref(mask).format(inputText.value)\n\n    // If pasted, move cursor to the end of how much was pasted counting formatted value and static tokens\n    if (inputType === 'insertFromPaste') {\n      cursorStart.position += formatted.value.text.length - currentValue.length\n    }\n\n    unref(mask).handleCursor(cursorStart, cursorEnd, tokens, formatted.value.tokens, data, formatted.value.data)\n\n    setInputValue(formatted.value!.text, e)\n\n    eventTarget.setSelectionRange(+cursorStart, +cursorEnd)\n  }\n\n  const onKeydown = (e: KeyboardEvent) => {\n    const el = e.target as HTMLInputElement\n\n    if (e.key === 'ArrowLeft') {\n      if (el.selectionStart === el.selectionEnd) {\n        const cursor = new Cursor((el.selectionStart ?? 0), formatted.value!.tokens)\n        cursor.moveBack(1)\n        el.setSelectionRange(+cursor, +cursor)\n      } else {\n        el.setSelectionRange(el.selectionStart, el.selectionStart)\n      }\n\n      e.preventDefault()\n    }\n\n    if (e.key === 'ArrowRight') {\n      if (el.selectionStart === el.selectionEnd) {\n        const cursor = new Cursor((el.selectionEnd ?? 0), formatted.value!.tokens)\n        cursor.moveForward(1)\n        el.setSelectionRange(+cursor, +cursor)\n      } else {\n        el.setSelectionRange(el.selectionEnd, el.selectionEnd)\n      }\n      e.preventDefault()\n    }\n  }\n\n  watch(input, (newValue, oldValue) => {\n    if (newValue) {\n      formatted.value = unref(mask).format(newValue.value)\n      const cursor = new Cursor((newValue.selectionEnd ?? 0), formatted.value!.tokens)\n      cursor.moveForward(1)\n      setInputValue(formatted.value.text)\n      newValue.setSelectionRange(+cursor, +cursor)\n\n      newValue.addEventListener('beforeinput', onBeforeInput)\n      newValue.addEventListener('keydown', onKeydown)\n    }\n    if (oldValue) {\n      oldValue.removeEventListener('beforeinput', onBeforeInput)\n      oldValue.removeEventListener('keydown', onKeydown)\n    }\n  }, { immediate: true })\n\n  const unmasked = computed(() => {\n    return unref(mask).unformat(formatted.value.text, formatted.value.tokens)\n  })\n\n  return {\n    inputText: formatted,\n    masked: computed(() => formatted.value?.text ?? ''),\n    unmasked,\n  }\n}\n"],"names":["el"],"mappings":"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"}