Repository: element-plus/element-plus
File: packages/components/input-tag/src/composables/use-input-tag-dom.ts (TypeScript)

Code before:
  validateIcon,
  needStatusIcon,
  wrapperRef,
  collapseItemRef,
}: UseInputTagDomOptions) {
  const attrs = useAttrs()
  const slots = useSlots()
  const ns = useNamespace('input-tag')
  const nsInput = useNamespace('input')

  const containerKls = computed(() => [
    ns.b(),
    ns.is('focused', isFocused.value),
    ns.is('hovering', hovering.value),
    ns.is('disabled', disabled.value),
    ns.m(size.value),
    ns.e('wrapper'),
    attrs.class,
  ])
  const containerStyle = computed<StyleValue>(() => [attrs.style as StyleValue])
  const innerKls = computed(() => [
    ns.e('inner'),
    ns.is('draggable', props.draggable),
    ns.is('left-space', !props.modelValue?.length && !slots.prefix),
    ns.is('right-space', !props.modelValue?.length && !showSuffix.value),
    ns.is('collapse-tags', props.collapseTags),
  ])
  const showClear = computed(() => {
    return (
      props.clearable &&
      !disabled.value &&
      !props.readonly &&
      (props.modelValue?.length || inputValue.value) &&
      (isFocused.value || hovering.value)
    )
  })
  const showSuffix = computed(() => {
    return (
      slots.suffix ||
      showClear.value ||
      (validateState.value && validateIcon.value && needStatusIcon.value)
    )
  })

  const getGapWidth = () => {
    if (!wrapperRef.value) return 0
    const innerElement = wrapperRef.value.querySelector(`.${ns.e('inner')}`)
    if (!innerElement) return 0
    const style = window.getComputedStyle(innerElement)
    return Number.parseFloat(style.gap || '6px')
  }

Review comment (suggestion):
This was included in the previous code right ? We can delete it now.
```suggestion
```

Code after:
  needStatusIcon,
}: UseInputTagDomOptions) {
  const attrs = useAttrs()
  const slots = useSlots()
  const ns = useNamespace('input-tag')
  const nsInput = useNamespace('input')

  const collapseItemRef = ref<HTMLElement>()
  const innerRef = ref<HTMLElement>()

  const containerKls = computed(() => [
    ns.b(),
    ns.is('focused', isFocused.value),
    ns.is('hovering', hovering.value),
    ns.is('disabled', disabled.value),
    ns.m(size.value),
    ns.e('wrapper'),
    attrs.class,
  ])
  const containerStyle = computed<StyleValue>(() => [attrs.style as StyleValue])
  const innerKls = computed(() => [
    ns.e('inner'),
    ns.is('draggable', props.draggable),
    ns.is('left-space', !props.modelValue?.length && !slots.prefix),
    ns.is('right-space', !props.modelValue?.length && !showSuffix.value),
  ])
  const showClear = computed(() => {
    return (
      props.clearable &&
      !disabled.value &&
      !props.readonly &&
      (props.modelValue?.length || inputValue.value) &&
      (isFocused.value || hovering.value)
    )
  })
  const showSuffix = computed(() => {
    return (
      slots.suffix ||
      showClear.value ||
      (validateState.value && validateIcon.value && needStatusIcon.value)
    )
  })

  const states = reactive({
    innerWidth: 0,
    collapseItemWidth: 0,
  })

  const getGapWidth = () => {
    if (!innerRef.value) return 0
    const style = window.getComputedStyle(innerRef.value)