{"version":3,"file":"textarea.vue.mjs","sources":["../../../../../packages/components/textarea/src/textarea.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      ns.b(),\n      ns.is('disabled', inputDisabled),\n      ns.is('exceed', inputExceed),\n\n      $attrs.class\n    ]\"\n    :style=\"containerStyle\"\n    @mouseenter=\"onMouseEnter\"\n    @mouseleave=\"onMouseLeave\"\n  >\n    <textarea\n      ref=\"textarea\"\n      :class=\"ns.e('inner')\"\n      v-bind=\"attrs\"\n      :tabindex=\"tabindex\"\n      :disabled=\"inputDisabled\"\n      :readonly=\"readonly\"\n      :autocomplete=\"autocomplete\"\n      :style=\"computedTextareaStyle\"\n      :aria-label=\"label\"\n      :placeholder=\"placeholder\"\n      @compositionstart=\"handleCompositionStart\"\n      @compositionupdate=\"handleCompositionUpdate\"\n      @compositionend=\"handleCompositionEnd\"\n      @input=\"handleInput\"\n      @focus=\"handleFocus\"\n      @blur=\"handleBlur\"\n      @change=\"handleChange\"\n      @keydown=\"handleKeydown\"\n    />\n    <span v-if=\"isWordLimitVisible\" :class=\"ns.e('count')\">\n      {{ textLength }} / {{ attrs.maxlength }}\n    </span>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  watch,\n  nextTick,\n  ref,\n  shallowRef,\n  onMounted\n} from 'vue'\nimport { isClient } from '@vueuse/core'\nimport { ElIcon } from '@element-ultra/components/icon'\nimport { CircleClose, View as IconView } from 'icon-ultra'\nimport { isObject } from '@element-ultra/utils'\nimport {\n  useAttrs,\n  useDisabled,\n  useFormItem,\n  useNamespace\n} from '@element-ultra/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-ultra/shared'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { textareaProps, textareaEmits } from './textarea'\n\nimport type { StyleValue } from 'vue'\n\ntype TargetElement = HTMLInputElement | HTMLTextAreaElement\n\nexport default defineComponent({\n  name: 'ElTextarea',\n\n  components: { ElIcon, CircleClose, IconView },\n\n  inheritAttrs: false,\n\n  props: textareaProps,\n  emits: textareaEmits,\n\n  setup(props, { slots, emit, attrs: rawAttrs }) {\n    const attrs = useAttrs()\n\n    const { formItem } = useFormItem()\n    const inputDisabled = useDisabled({ props })\n    const ns = useNamespace('textarea')\n\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const isComposing = ref(false)\n    const _textareaCalcStyle = shallowRef(props.innerStyle)\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.innerStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize }\n    ])\n    const nativeInputValue = computed(() =>\n      props.modelValue === null || props.modelValue === undefined\n        ? ''\n        : String(props.modelValue)\n    )\n\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        !inputDisabled.value &&\n        !props.readonly\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { autosize } = props\n\n      if (!isClient) return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows)\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = textarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const handleInput = (event: Event) => {\n      const { value } = event.target as TargetElement\n\n      // should not emit input during composition\n      // see: https://github.com/ElemeFE/element/issues/10516\n      if (isComposing.value) return\n\n      // hack for https://github.com/ElemeFE/element/issues/8548\n      // should remove the following line when we don't support IE\n      if (value === nativeInputValue.value) return\n\n      emit(UPDATE_MODEL_EVENT, value)\n      emit('input', value)\n\n      // ensure native input value is controlled\n      // see: https://github.com/ElemeFE/element/issues/12850\n      nextTick(setNativeInputValue)\n    }\n\n    const handleChange = (event: Event) => {\n      emit('change', (event.target as TargetElement).value)\n    }\n\n    const focus = () => {\n      // see: https://github.com/ElemeFE/element/issues/18573\n      nextTick(() => {\n        textarea.value?.focus()\n      })\n    }\n\n    const blur = () => {\n      textarea.value?.blur()\n    }\n\n    const handleFocus = (event: FocusEvent) => {\n      focused.value = true\n      emit('focus', event)\n    }\n\n    const handleBlur = (event: FocusEvent) => {\n      focused.value = false\n      emit('blur', event)\n      formItem?.validate()\n    }\n\n    const select = () => {\n      textarea.value?.select()\n    }\n\n    const handleCompositionStart = (event: CompositionEvent) => {\n      emit('compositionstart', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionUpdate = (event: CompositionEvent) => {\n      emit('compositionupdate', event)\n      isComposing.value = true\n    }\n\n    const handleCompositionEnd = (event: CompositionEvent) => {\n      emit('compositionend', event)\n      if (isComposing.value) {\n        isComposing.value = false\n        handleInput(event)\n      }\n    }\n\n    watch(\n      () => props.modelValue,\n      () => {\n        nextTick(resizeTextarea)\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    onMounted(() => {\n      setNativeInputValue()\n      nextTick(resizeTextarea)\n    })\n\n    const onMouseLeave = (evt: MouseEvent) => {\n      hovering.value = false\n      emit('mouseleave', evt)\n    }\n\n    const onMouseEnter = (evt: MouseEvent) => {\n      hovering.value = true\n      emit('mouseenter', evt)\n    }\n\n    const handleKeydown = (evt: KeyboardEvent) => {\n      emit('keydown', evt)\n    }\n\n    return {\n      textarea,\n      attrs,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      resizeTextarea,\n      handleInput,\n      handleChange,\n      handleFocus,\n      handleBlur,\n      handleCompositionStart,\n      handleCompositionUpdate,\n      handleCompositionEnd,\n      select,\n      focus,\n      blur,\n      onMouseLeave,\n      onMouseEnter,\n      handleKeydown,\n      ns\n    }\n  }\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_createElementVNode","_mergeProps"],"mappings":"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"}