{"version":3,"file":"multiline_input-DIJGxkxk.js","sources":["../../../app/javascript/vuecomponents/multiline_input.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useResizeObserver } from '@@/vuecomposables/resize_observer'\nimport type { Ref } from 'vue'\nimport { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport type { CSSProperties } from 'vue/types/jsx'\n\n/** USAGE GUIDE FOR MULTILINE INPUT\n * *Note: Do NOT put CSS transition for height on this element, if you do the autosizing will NOT work.\n * Method 1: v-model\n * <multiline-input v-model=\"value\"/>\n * - Initial value will be that of `value`\n * - When `value` changes, the input field will be updated with the new `value`\n * (therefore can do things like `this.value = \"\"` to clear the field)\n * (also be careful if `value` is remotely updated, it will overwrite the current changes)\n * - On input, `value` data field will changes accordingly\n *\n * Method 2: v-model and v-once\n * <multiline-input v-once v-model=\"value\"/>\n * - Initial value will be that of `value`\n * - When `value` changes, the input field will NOT be updated with the new `value`\n * - On input, `value` will changes accordingly\n *\n * Method 3: value prop\n * <multiline-input :value=\"value\" @input=\"onInput\" @enter=\"onEnter\" ref=\"input\"/>\n * - Initial value will be that of `value`\n * - When `value` changes, the input field will be updated with the new `value`\n * - On input, `value` will NOT changes accordingly\n *  - You can use DOM refs to get the value (i.e. `this.$refs.input.$el.value`)\n *  - You can listen to input or enter event to get the value\n *\n * Method 4: value prop and v-once\n * <multiline-input v-once :value=\"value\"/>\n * - Initial value will be that of `value`\n * - When `value` changes, the input field will NOT be updated with the new `value`\n * - On input, `value` will NOT changes accordingly (same as above, use DOM ref or events)\n */\n\n// Emitted events: input [newValue], enter, escape, focus, keyup [$event]\n\nconst props = withDefaults(\n  defineProps<{\n    value?: string\n    placeholder?: string\n    dir?: string\n    allowNewlines?: boolean\n    readonly?: boolean\n    maxLength?: number\n    darkMode?: boolean | 'auto'\n  }>(),\n  {\n    value: '',\n    placeholder: '',\n    dir: 'auto',\n    allowNewlines: false,\n    readonly: false,\n    maxLength: undefined,\n    darkMode: 'auto',\n  },\n)\n\nconst emit = defineEmits<{\n  (name: 'click', e: MouseEvent): void\n  (name: 'input', currentValue: string): void\n  (name: 'enter', currentValue: string): void\n  (name: 'blur', e: FocusEvent): void\n  (name: 'keyup', e: KeyboardEvent): void\n  (name: 'paste', e: ClipboardEvent): void\n  (name: 'arrow-down-on-last-line'): void\n  (name: 'arrow-up-on-first-line'): void\n  (name: 'escape'): void\n  (name: 'focus'): void\n}>()\n\nconst inputElement = ref<HTMLTextAreaElement>()\nconst currentValue = ref<string>(props.value)\nconst height = ref<number | null>(null)\n\nconst style = computed<CSSProperties>(() => {\n  if (!height.value) return {}\n  return { height: `${height.value}px` }\n})\n\nfunction autoResize() {\n  height.value = null // Otherwise scrollHeight will just be the previous height\n  nextTick(() => {\n    if (inputElement.value === undefined) return\n    height.value = inputElement.value.scrollHeight\n    if (inputElement.value.scrollHeight === 0) {\n      setTimeout(() => {\n        if (inputElement.value === undefined) return\n        height.value = inputElement.value.scrollHeight\n      }, 0)\n    }\n  })\n}\n\nwatch(currentValue, autoResize)\n\n// v-model receive changes\nwatch(\n  () => props.value,\n  () => {\n    currentValue.value = props.value\n    removeNewlinesIfDisallowed()\n  },\n)\n\n// v-model emit changes\nfunction onInput(): void {\n  removeNewlinesIfDisallowed()\n  emit('input', currentValue.value)\n}\n\nfunction onEnter(event: KeyboardEvent): void {\n  // In languages like Chinese, Japanese, & Korean, users input characters using an IME.\n  // If they are in composing mode (usually indicated by an underline under the word),\n  // and they press Enter, we could receive 2 keydown events. Most sources say this is\n  // a bug. We can ignore one of the 2 events by checking isComposing or keyCode === 229\n  // for legacy browsers.\n  // https://github.com/vuejs/vue/issues/10277#issuecomment-873337252\n  if (event.isComposing || event.keyCode === 229) return\n  if (props.allowNewlines) return\n  emit('enter', currentValue.value)\n  event.preventDefault()\n}\n\nfunction onArrowDown(): void {\n  const textInput = inputElement.value\n  if (textInput === undefined) return\n  // emit an event when arrow down key is pressed and the cursor is on the last line of the textarea\n  // the default behaviour for arrow down on the last line is move to the end of the line\n  // we only emit a special event to be handled if the cursor is already at the end of the last line => check selectionStart === value.length\n  if (textInput.selectionStart === textInput.value.length) {\n    emit('arrow-down-on-last-line')\n  }\n}\n\nfunction onArrowUp(): void {\n  const textInput = inputElement.value\n  if (textInput === undefined) return\n  // emit an event when arrow up key is pressed and the cursor is on the first line of the textarea\n  // the default behaviour for arrow up on the first line is move to the start of the line\n  // we only emit a special event to be handled if the cursor is already at the start of the first line => check selectionStart === 0\n  if (textInput.selectionStart === 0) {\n    emit('arrow-up-on-first-line')\n  }\n}\n\nfunction removeNewlinesIfDisallowed(): void {\n  if (props.allowNewlines) return\n  const sanitizedValue = currentValue.value.replace(/\\n|\\r/g, '')\n  if (currentValue.value !== sanitizedValue) {\n    currentValue.value = sanitizedValue\n  }\n}\n\nuseResizeObserver(inputElement as Ref<HTMLTextAreaElement>, autoResize)\n\nonMounted(() => {\n  autoResize()\n})\n\ndefineExpose({\n  focus: () => {\n    nextTick(() => inputElement.value?.focus())\n  },\n  select: () => {\n    nextTick(() => inputElement.value?.select())\n  },\n  blur: () => {\n    inputElement.value?.blur()\n  },\n})\n</script>\n\n<template>\n  <!--\n    Without row=\"1\", scrollHeight will be the height of two lines,\n    even if there's only one line of text.\n  -->\n  <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->\n  <textarea\n    ref=\"inputElement\"\n    v-model=\"currentValue\"\n    :class=\"[\n      'w-full border-none bg-transparent resize-none p-0 shadow-none focus:shadow-none no-underline overflow-hidden box-border',\n      {\n        'text-dark-text-100 placeholder:text-dark-text-200': darkMode === false,\n        'text-light-text-100 placeholder:text-light-text-200': darkMode === true,\n        'text-dark-text-100 placeholder:text-dark-text-200 dark:text-light-text-100 dark:placeholder:text-light-text-200':\n          darkMode === 'auto',\n      },\n    ]\"\n    :rows=\"1\"\n    :placeholder=\"placeholder\"\n    :maxlength=\"maxLength\"\n    :style=\"style\"\n    :dir=\"dir\"\n    :readonly=\"readonly\"\n    @click=\"$emit('click', $event)\"\n    @input=\"onInput\"\n    @keydown.enter=\"onEnter\"\n    @keydown.escape=\"$emit('escape')\"\n    @keydown.down.exact=\"onArrowDown\"\n    @keydown.up.exact=\"onArrowUp\"\n    @focus=\"$emit('focus')\"\n    @blur=\"$emit('blur', $event)\"\n    @keyup=\"$emit('keyup', $event)\"\n    @paste.stop=\"$emit('paste', $event)\"\n  ></textarea>\n</template>\n"],"names":["inputElement","ref","currentValue","props","value","height","style","computed","autoResize","nextTick","scrollHeight","setTimeout","watch","removeNewlinesIfDisallowed","onInput","emit","onEnter","event","isComposing","keyCode","allowNewlines","preventDefault","onArrowDown","textInput","selectionStart","length","onArrowUp","sanitizedValue","replace","useResizeObserver","onMounted","expose","focus","select","blur"],"mappings":"k3BAyEMA,EAAeC,IACfC,EAAeD,EAAYE,EAAMC,KAAK,EACtCC,EAASJ,EAAmB,IAAI,EAEhCK,EAAQC,EAAwB,IAC/BF,EAAOD,MACL,CAAEC,OAAQ,GAAGA,EAAOD,KAAK,MADN,EAE3B,EAED,SAASI,GAAa,CACpBH,EAAOD,MAAQ,KACfK,EAAS,IAAM,CACTT,EAAaI,QAAU,SACpBC,EAAAD,MAAQJ,EAAaI,MAAMM,aAC9BV,EAAaI,MAAMM,eAAiB,GACtCC,WAAW,IAAM,CACXX,EAAaI,QAAU,SACpBC,EAAAD,MAAQJ,EAAaI,MAAMM,eACjC,CAAC,EAER,CAAC,CACH,CAEAE,EAAMV,EAAcM,CAAU,EAG9BI,EACE,IAAMT,EAAMC,MACZ,IAAM,CACJF,EAAaE,MAAQD,EAAMC,MACAS,GAC7B,CACF,EAGA,SAASC,GAAgB,CACID,IACtBE,EAAA,QAASb,EAAaE,KAAK,CAClC,CAEA,SAASY,EAAQC,EAA4B,CAOvCA,EAAMC,aAAeD,EAAME,UAAY,KACvChB,EAAMiB,gBACLL,EAAA,QAASb,EAAaE,KAAK,EAChCa,EAAMI,eAAe,EACvB,CAEA,SAASC,GAAoB,CAC3B,MAAMC,EAAYvB,EAAaI,MAC3BmB,IAAc,QAIdA,EAAUC,iBAAmBD,EAAUnB,MAAMqB,QAC/CV,EAAK,yBAAyB,CAElC,CAEA,SAASW,GAAkB,CACzB,MAAMH,EAAYvB,EAAaI,MAC3BmB,IAAc,QAIdA,EAAUC,iBAAmB,GAC/BT,EAAK,wBAAwB,CAEjC,CAEA,SAASF,GAAmC,CAC1C,GAAIV,EAAMiB,cAAe,OACzB,MAAMO,EAAiBzB,EAAaE,MAAMwB,QAAQ,SAAU,EAAE,EAC1D1B,EAAaE,QAAUuB,IACzBzB,EAAaE,MAAQuB,EAEzB,CAEAE,OAAAA,EAAkB7B,EAA0CQ,CAAU,EAEtEsB,EAAU,IAAM,CACHtB,GACb,CAAC,EAEYuB,EAAA,CACXC,MAAOA,IAAM,CACXvB,EAAS,IAAA,OAAMT,OAAAA,EAAAA,EAAaI,QAAbJ,YAAAA,EAAoBgC,QAAO,CAC5C,EACAC,OAAQA,IAAM,CACZxB,EAAS,IAAA,OAAMT,OAAAA,EAAAA,EAAaI,QAAbJ,YAAAA,EAAoBiC,SAAQ,CAC7C,EACAC,KAAMA,IAAM,QACVlC,EAAAA,EAAaI,QAAbJ,MAAAA,EAAoBkC,MACtB,CACF,CAAC"}