Repository: element-plus/element-plus
File: packages/components/input/src/input.vue (Vue)

Code before:
  useNamespace,
} from '@element-plus/hooks'
import {
  CHANGE_EVENT,
  INPUT_EVENT,
  UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { calcTextareaHeight, looseToNumber } from './utils'

import type { CSSProperties, StyleValue } from 'vue'
import type { InputEmits, InputModelModifiers, InputProps } from './input'

type TargetElement = HTMLInputElement | HTMLTextAreaElement

const COMPONENT_NAME = 'ElInput'
defineOptions({
  name: COMPONENT_NAME,
  inheritAttrs: false,
})
const props = withDefaults(defineProps<InputProps<M>>(), {
  disabled: undefined,
  modelValue: '',
  modelModifiers: () => ({}) as M,
  type: 'text',
  autocomplete: 'off',
  clearIcon: IconCircleClose,
  wordLimitPosition: 'inside',
  tabindex: 0,
  validateEvent: true,
  inputStyle: () => ({}),
  rows: 2,
})
const emit = defineEmits<InputEmits<M>>()

const rawAttrs = useRawAttrs()
const attrs = useAttrs()
const slots = useSlots()

const containerKls = computed(() => [
  props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
  nsInput.m(inputSize.value),
  nsInput.is('disabled', inputDisabled.value),
  nsInput.is('exceed', inputExceed.value),
  {
    [nsInput.b('group')]: slots.prepend || slots.append,
    [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,
    [nsInput.m('suffix')]:
      slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
    [nsInput.bm('suffix', 'password-clear')]:
      showClear.value && showPwdVisible.value,
    [nsInput.b('hidden')]: props.type === 'hidden',

Review comment (suggestion):
imported components should not be converted as a proxy.
```suggestion
  clearIcon: markRaw(IconCircleClose),
```

Code after:
  CHANGE_EVENT,
  INPUT_EVENT,
  UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { calcTextareaHeight, looseToNumber } from './utils'
import { inputEmits } from './input'

import type { StyleValue } from 'vue'
import type { InputProps } from './input'

type TargetElement = HTMLInputElement | HTMLTextAreaElement

const COMPONENT_NAME = 'ElInput'
defineOptions({
  name: COMPONENT_NAME,
  inheritAttrs: false,
})
const props = withDefaults(defineProps<InputProps>(), {
  disabled: undefined,
  modelValue: '',
  modelModifiers: () => ({}),
  type: 'text',
  autocomplete: 'off',
  clearIcon: markRaw(IconCircleClose),
  wordLimitPosition: 'inside',
  tabindex: 0,
  validateEvent: true,
  inputStyle: () => ({}),
  rows: 2,
})
const emit = defineEmits(inputEmits)

const rawAttrs = useRawAttrs()
const attrs = useAttrs()
const slots = useSlots()

const containerKls = computed(() => [
  props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
  nsInput.m(inputSize.value),
  nsInput.is('disabled', inputDisabled.value),
  nsInput.is('exceed', inputExceed.value),
  {
    [nsInput.b('group')]: slots.prepend || slots.append,
    [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,
    [nsInput.m('suffix')]:
      slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
    [nsInput.bm('suffix', 'password-clear')]:
      showClear.value && showPwdVisible.value,
    [nsInput.b('hidden')]: props.type === 'hidden',
  },
  rawAttrs.class,