vexip-ui/lib/components/textarea/textarea.vue2.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"textarea.vue2.cjs","sources":["../../../components/textarea/textarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { useFieldStore } from '@/components/form'\n\nimport { computed, ref, toRef, watch } from 'vue'\n\nimport {\n  createIconProp,\n  createStateProp,\n  emitEvent,\n  useIcons,\n  useLocale,\n  useNameHelper,\n  useProps,\n} from '@vexip-ui/config'\nimport { debounce, isNull, throttle, toNumber } from '@vexip-ui/utils'\nimport { textareaProps } from './props'\n\ndefineOptions({ name: 'Textarea' })\n\nconst { idFor, state, labelId, disabled, loading, validateField, getFieldValue, setFieldValue } =\n  useFieldStore<string>(() => textarea.value?.focus())\n\nconst _props = defineProps(textareaProps)\nconst props = useProps('textarea', _props, {\n  state: createStateProp(state),\n  locale: null,\n  value: {\n    default: () => getFieldValue(),\n    static: true,\n  },\n  placeholder: null,\n  rows: 2,\n  noResize: false,\n  autofocus: false,\n  spellcheck: false,\n  autocomplete: false,\n  readonly: false,\n  disabled: () => disabled.value,\n  debounce: false,\n  delay: null,\n  maxLength: 0,\n  loading: () => loading.value,\n  loadingIcon: createIconProp(),\n  loadingLock: false,\n  loadingEffect: null,\n  sync: false,\n  controlClass: null,\n  controlAttrs: null,\n  name: {\n    default: '',\n    static: true,\n  },\n})\n\nconst emit = defineEmits(['update:value'])\n\nconst nh = useNameHelper('textarea')\nconst locale = useLocale('input', toRef(props, 'locale'))\nconst icons = useIcons()\n\nconst focused = ref(false)\nconst currentValue = ref(props.value)\nconst currentLength = ref(props.value ? props.value.length : 0)\nconst composing = ref(false)\n\nconst textarea = ref<HTMLTextAreaElement>()\n\nlet lastValue = props.value\n\nconst isReadonly = computed(() => {\n  return (props.loading && props.loadingLock) || props.readonly\n})\nconst className = computed(() => {\n  return {\n    [nh.b()]: true,\n    [nh.ns('input-vars')]: true,\n    [nh.bs('vars')]: true,\n    [nh.bm('inherit')]: props.inherit,\n    [nh.bm('focused')]: focused.value,\n    [nh.bm('disabled')]: props.disabled,\n    [nh.bm('readonly')]: isReadonly.value,\n    [nh.bm('loading')]: props.loading,\n    [nh.bm('no-resize')]: props.noResize,\n    [nh.bm(props.state)]: props.state !== 'default',\n  }\n})\nconst autoComplete = computed(() => {\n  return typeof props.autocomplete === 'boolean'\n    ? props.autocomplete\n      ? 'on'\n      : 'off'\n    : props.autocomplete\n})\n\nwatch(\n  () => props.value,\n  value => {\n    currentValue.value = value\n    lastValue = value\n    limitValueLength()\n  },\n)\n\ndefineExpose({\n  idFor,\n  currentValue,\n  currentLength,\n  composing,\n  isReadonly,\n  textarea,\n  copyValue,\n  focus: (options?: FocusOptions) => textarea.value?.focus(options),\n  blur: () => textarea.value?.blur(),\n})\n\nfunction handleFocus(event: FocusEvent) {\n  focused.value = true\n  emitEvent(props.onFocus, event)\n}\n\nfunction handleBlur(event: FocusEvent) {\n  focused.value = false\n  emitEvent(props.onBlur, event)\n}\n\nfunction handleChange(event: Event) {\n  const type = event.type as 'change' | 'input'\n\n  if (composing.value) {\n    if (type === 'input') return\n\n    composing.value = false\n  }\n\n  currentValue.value = (event.target as HTMLTextAreaElement).value\n  limitValueLength()\n\n  if (type === 'change') {\n    if (lastValue === currentValue.value) return\n\n    lastValue = currentValue.value\n\n    if (!props.sync) {\n      emit('update:value', currentValue.value)\n      setFieldValue(currentValue.value)\n    }\n\n    emitEvent(props.onChange, currentValue.value)\n\n    if (!props.sync) {\n      validateField()\n    }\n  } else {\n    if (props.sync) {\n      emit('update:value', currentValue.value)\n      setFieldValue(currentValue.value)\n    }\n\n    emitEvent(props.onInput, currentValue.value)\n\n    if (props.sync) {\n      validateField()\n    }\n  }\n}\n\nfunction handleEnter() {\n  emitEvent(props.onEnter)\n}\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  emitEvent(props.onKeyDown, event)\n}\n\nfunction handleKeyPress(event: KeyboardEvent) {\n  emitEvent(props.onKeyPress, event)\n}\n\nfunction handleKeyUp(event: KeyboardEvent) {\n  emitEvent(props.onKeyUp, event)\n}\n\nfunction limitValueLength() {\n  let value = currentValue.value\n\n  if (isNull(value)) {\n    currentLength.value = 0\n\n    return\n  }\n\n  const maxLength = props.maxLength\n\n  if (maxLength && value.length > maxLength) {\n    value = value.slice(0, maxLength)\n  }\n\n  currentLength.value = value.length\n  currentValue.value = value\n}\n\nfunction copyValue() {\n  const textarea = document.createElement('textarea')\n\n  textarea.style.height = '0'\n  textarea.setAttribute('readonly', 'readonly')\n  textarea.value = currentValue.value\n  document.body.appendChild(textarea)\n  textarea.select()\n\n  const isSuccess = document.execCommand('copy')\n\n  document.body.removeChild(textarea)\n\n  return isSuccess\n}\n\nconst delay = toNumber(props.delay)\nconst handleInput = props.debounce\n  ? debounce(handleChange, delay || 100)\n  : throttle(handleChange, delay || 16)\n\nfunction handleCompositionStart(event: CompositionEvent) {\n  composing.value = true\n  emitEvent(props.onCompositionStart, event)\n}\n\nfunction handleCompositionEnd(event: CompositionEvent) {\n  if (composing.value) {\n    composing.value = false\n\n    if (textarea.value) {\n      textarea.value.dispatchEvent(new Event('input'))\n    }\n  }\n\n  emitEvent(props.onCompositionStart, event)\n}\n</script>\n\n<template>\n  <div :id=\"idFor\" :class=\"className\" @click=\"textarea?.focus()\">\n    <textarea\n      v-bind=\"props.controlAttrs\"\n      ref=\"textarea\"\n      :class=\"[nh.be('control'), props.controlAttrs?.class, props.controlClass]\"\n      :value=\"currentValue\"\n      :rows=\"props.rows\"\n      :autofocus=\"props.autofocus\"\n      :autocomplete=\"autoComplete\"\n      :spellcheck=\"props.spellcheck\"\n      :disabled=\"props.disabled\"\n      :readonly=\"isReadonly\"\n      :placeholder=\"props.placeholder ?? locale.placeholder\"\n      :maxlength=\"props.maxLength > 0 ? props.maxLength : undefined\"\n      :name=\"props.name || props.controlAttrs?.name\"\n      :aria-labelledby=\"labelId\"\n      @blur=\"handleBlur\"\n      @focus=\"handleFocus\"\n      @keyup.enter=\"handleEnter\"\n      @keyup=\"handleKeyUp\"\n      @keypress=\"handleKeyPress\"\n      @keydown=\"handleKeyDown\"\n      @input=\"handleInput\"\n      @change=\"handleChange\"\n      @compositionstart=\"handleCompositionStart\"\n      @compositionend=\"handleCompositionEnd\"\n    ></textarea>\n    <div :class=\"nh.be('extra')\">\n      <Transition :name=\"nh.ns('fade')\" appear>\n        <div v-if=\"props.loading\" :class=\"nh.be('loading')\">\n          <Icon\n            v-bind=\"icons.loading\"\n            :effect=\"props.loadingEffect || icons.loading.effect\"\n            :icon=\"props.loadingIcon || icons.loading.icon\"\n            label=\"loading\"\n          ></Icon>\n        </div>\n      </Transition>\n      <div v-if=\"props.maxLength > 0\" :class=\"nh.be('count')\">\n        <slot name=\"count\" :value=\"currentValue\">\n          {{ props.maxLength === Infinity ? currentLength : `${currentLength}/${props.maxLength}` }}\n        </slot>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["idFor","state","labelId","disabled","loading","validateField","getFieldValue","setFieldValue","useFieldStore","_a","textarea","_props","__props","props","useProps","createStateProp","createIconProp","emit","__emit","nh","useNameHelper","locale","useLocale","toRef","icons","useIcons","focused","ref","currentValue","currentLength","composing","lastValue","isReadonly","computed","className","autoComplete","watch","value","limitValueLength","__expose","copyValue","options","handleFocus","event","emitEvent","handleBlur","handleChange","type","handleEnter","handleKeyDown","handleKeyPress","handleKeyUp","isNull","maxLength","isSuccess","delay","toNumber","handleInput","debounce","throttle","handleCompositionStart","handleCompositionEnd","_createElementBlock","_unref","_cache","$event","_createElementVNode","_mergeProps","args","_normalizeClass","_createVNode","_Transition","Icon","_renderSlot","_ctx"],"mappings":"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"}