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

Code before:
      (validateState.value && validateIcon.value && needStatusIcon.value)
    )
  })

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

  const getGapWidth = () => {
    if (!innerRef.value) return 0
    const style = window.getComputedStyle(innerRef.value)
    return Number.parseFloat(style.gap || '6px')
  }

  const getInnerWidth = () => {
    if (!innerRef.value) return 0
    states.innerWidth = Number.parseFloat(
      window.getComputedStyle(innerRef.value).width
    )
  }

  const resetCollapseItemWidth = () => {
    if (!collapseItemRef.value) return 0
    states.collapseItemWidth =
      collapseItemRef.value.getBoundingClientRect().width
  }

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, getInnerWidth)
  useResizeObserver(collapseItemRef, resetCollapseItemWidth)

  return {
    ns,
    nsInput,

Review comment (suggestion):
```suggestion
    states.collapseItemWidth =
      collapseItemRef.value!.getBoundingClientRect().width
```

See https://github.com/vueuse/vueuse/blob/main/packages/core/useResizeObserver/index.ts#L80-L81

Code after:
    innerWidth: 0,
    collapseItemWidth: 0,
  })

  const getGapWidth = () => {
    if (!innerRef.value) return 0
    const style = window.getComputedStyle(innerRef.value)
    return Number.parseFloat(style.gap || '6px')
  }

  const resetInnerWidth = () => {
    states.innerWidth = Number.parseFloat(
      window.getComputedStyle(innerRef.value!).width
    )
  }

  const resetCollapseItemWidth = () => {
    states.collapseItemWidth =
      collapseItemRef.value!.getBoundingClientRect().width
  }

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, resetInnerWidth)
  useResizeObserver(collapseItemRef, resetCollapseItemWidth)

  return {
    ns,
    nsInput,
    containerKls,
    containerStyle,
    innerKls,
    showClear,
    showSuffix,
    tagStyle,
    collapseItemRef,
Repository: element-plus/element-plus
File: packages/components/input-tag/src/composables/use-input-tag-dom.ts (TypeScript)

Code before:
  })
  const showSuffix = computed(() => {
    return (
      slots.suffix ||
      showClear.value ||
      (validateState.value && validateIcon.value && needStatusIcon.value)
    )
  })

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

  const getGapWidth = () => {
    if (!innerRef.value) return 0
    const style = window.getComputedStyle(innerRef.value)
    return Number.parseFloat(style.gap || '6px')
  }

  const getInnerWidth = () => {
    if (!innerRef.value) return 0
    states.innerWidth = Number.parseFloat(
      window.getComputedStyle(innerRef.value).width
    )
  }

  const resetCollapseItemWidth = () => {
    if (!collapseItemRef.value) return 0
    states.collapseItemWidth =
      collapseItemRef.value.getBoundingClientRect().width
  }

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, getInnerWidth)

Review comment (suggestion):
```suggestion
  const resetInnerWidth = () => {
    states.innerWidth = Number.parseFloat(
      window.getComputedStyle(innerRef.value!).width
    )
  }
```

Code after:
      (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)
    return Number.parseFloat(style.gap || '6px')
  }

  const resetInnerWidth = () => {
    states.innerWidth = Number.parseFloat(
      window.getComputedStyle(innerRef.value!).width
    )
  }

  const resetCollapseItemWidth = () => {
    states.collapseItemWidth =
      collapseItemRef.value!.getBoundingClientRect().width
  }

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, resetInnerWidth)
  useResizeObserver(collapseItemRef, resetCollapseItemWidth)

  return {
    ns,
    nsInput,
    containerKls,
    containerStyle,
Repository: element-plus/element-plus
File: packages/components/input-tag/src/composables/use-input-tag-dom.ts (TypeScript)

Code before:
  }

  const resetCollapseItemWidth = () => {
    if (!collapseItemRef.value) return 0
    states.collapseItemWidth =
      collapseItemRef.value.getBoundingClientRect().width
  }

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, getInnerWidth)
  useResizeObserver(collapseItemRef, resetCollapseItemWidth)

  return {
    ns,
    nsInput,
    containerKls,
    containerStyle,
    innerKls,
    showClear,
    showSuffix,
    tagStyle,
    collapseItemRef,
    innerRef,
  }
}


Review comment (suggestion):
```suggestion
  useResizeObserver(innerRef, resetInnerWidth)
```

Code after:

  const tagStyle = computed(() => {
    if (!props.collapseTags) return {}
    const gapWidth = getGapWidth()

    const inputSlotWidth = gapWidth + MINIMUM_INPUT_WIDTH

    const maxWidth =
      collapseItemRef.value && props.maxCollapseTags === 1
        ? states.innerWidth -
          states.collapseItemWidth -
          gapWidth -
          inputSlotWidth
        : states.innerWidth - inputSlotWidth

    return { maxWidth: `${Math.max(maxWidth, 0)}px` }
  })

  useResizeObserver(innerRef, resetInnerWidth)
  useResizeObserver(collapseItemRef, resetCollapseItemWidth)

  return {
    ns,
    nsInput,
    containerKls,
    containerStyle,
    innerKls,
    showClear,
    showSuffix,
    tagStyle,
    collapseItemRef,
    innerRef,
  }
}
Repository: element-plus/element-plus
File: packages/components/input-tag/src/composables/use-input-tag-dom.ts (TypeScript)

Code before:
import { computed, reactive, ref, useAttrs, useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { MINIMUM_INPUT_WIDTH } from '@element-plus/constants'
import { useResizeObserver } from '@vueuse/core'

import type { ComputedRef, Ref, StyleValue } from 'vue'
import type { ComponentSize } from '@element-plus/constants'
import type { InputTagProps } from '../input-tag'

interface UseInputTagDomOptions {
  props: InputTagProps
  isFocused: Ref<boolean>
  hovering: Ref<boolean>
  disabled: ComputedRef<boolean>
  inputValue: Ref<string | undefined>
  size: ComputedRef<ComponentSize>
  validateState: ComputedRef<string>
  validateIcon: ComputedRef<boolean>
  needStatusIcon: ComputedRef<boolean>
}

export interface InputTagStates {
  innerWidth: number
  collapseItemWidth: number
}

export function useInputTagDom({
  props,
  isFocused,
  hovering,
  disabled,
  inputValue,
  size,
  validateState,
  validateIcon,
  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),

Review comment (suggestion):
I don't think it's a relevant used type.

```suggestion
```

Code after:
import { computed, reactive, ref, useAttrs, useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { MINIMUM_INPUT_WIDTH } from '@element-plus/constants'
import { useResizeObserver } from '@vueuse/core'

import type { ComputedRef, Ref, StyleValue } from 'vue'
import type { ComponentSize } from '@element-plus/constants'
import type { InputTagProps } from '../input-tag'

interface UseInputTagDomOptions {
  props: InputTagProps
  isFocused: Ref<boolean>
  hovering: Ref<boolean>
  disabled: ComputedRef<boolean>
  inputValue: Ref<string | undefined>
  size: ComputedRef<ComponentSize>
  validateState: ComputedRef<string>
  validateIcon: ComputedRef<boolean>
  needStatusIcon: ComputedRef<boolean>
}

export function useInputTagDom({
  props,
  isFocused,
  hovering,
  disabled,
  inputValue,
  size,
  validateState,
  validateIcon,
  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])
Repository: element-plus/element-plus
File: packages/components/button/__tests__/button.test.tsx (TypeScript)

Code before:

  it('plain', () => {
    const wrapper = mount(() => <Button plain />)

    expect(wrapper.classes()).toContain('is-plain')
  })

  it('round', () => {
    const wrapper = mount(() => <Button round />)
    expect(wrapper.classes()).toContain('is-round')
  })

  it('circle', () => {
    const wrapper = mount(() => <Button circle />)

    expect(wrapper.classes()).toContain('is-circle')
  })

  it('dashed', () => {
    const wrapper = mount(() => <Button dashed />)

    expect(wrapper.classes()).toContain('is-dashed')
  })

  it('text', async () => {
    const bg = ref(false)

    const wrapper = mount(() => <Button text bg={bg.value} />)

    expect(wrapper.classes()).toContain('is-text')

    bg.value = true

    await nextTick()

    expect(wrapper.classes()).toContain('is-has-bg')
  })

  it('link', async () => {
    const wrapper = mount(() => <Button link />)

    expect(wrapper.classes()).toContain('is-link')
  })

  test('render text', () => {
    const wrapper = mount(() => (
      <Button
        v-slots={{
          default: () => AXIOM,
        }}
      />

Review comment (suggestion):
Perhaps we could add a test case to demonstrate that the `dashed` setting in the button configuration has a higher priority than the `config-provider` setting.

Code after:

    expect(wrapper.classes()).toContain('el-button--large')
  })

  it('plain', () => {
    const wrapper = mount(() => <Button plain />)

    expect(wrapper.classes()).toContain('is-plain')
  })

  it('round', () => {
    const wrapper = mount(() => <Button round />)
    expect(wrapper.classes()).toContain('is-round')
  })

  it('circle', () => {
    const wrapper = mount(() => <Button circle />)

    expect(wrapper.classes()).toContain('is-circle')
  })

  it('dashed', () => {
    const wrapper = mount(() => <Button dashed />)

    expect(wrapper.classes()).toContain('is-dashed')
  })

  it('should give component dashed higher priority than global', async () => {
    const globalDashed = ref(false)
    const dashed = ref<boolean>()
    const wrapper = mount(() => (
      <ConfigProvider button={{ dashed: globalDashed.value }}>
        <Button dashed={dashed.value}>Test</Button>
      </ConfigProvider>
    ))

    await nextTick()
    const btn = wrapper.find('button')
    expect(btn.classes()).not.toContain('is-dashed')
    globalDashed.value = true
    await nextTick()
    expect(btn.classes()).toContain('is-dashed')
    dashed.value = false
    await nextTick()
    expect(btn.classes()).not.toContain('is-dashed')
    globalDashed.value = false
    dashed.value = true
    await nextTick()
    expect(btn.classes()).toContain('is-dashed')
  })
Repository: element-plus/element-plus
File: docs/examples/watermark/custom.vue (Vue)

Code before:

const config = reactive({
  content: 'Element Plus',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
  },
  zIndex: -1,
  rotate: -22,
  gap: [100, 100] as [number, number],
  offset: [] as unknown as [number, number],
})
</script>

<template>
  <div class="wrapper">
    <el-watermark
      class="watermark"
      :content="config.content"
      :font="config.font"
      :z-index="config.zIndex"
      :rotate="config.rotate"
      :gap="config.gap"
      :offset="config.offset"
    >
      <div class="watermarkContainer">
        <h1>Element Plus</h1>
        <h2>A Vue 3 based component library for designers and developers</h2>
        <img src="/images/hamburger.png" alt="示例图片" />
      </div>
    </el-watermark>
    <el-form
      class="form"
      :model="config"
      label-position="top"
      label-width="50px"
    >
      <el-form-item label="Content">
        <el-input v-model="config.content" />
      </el-form-item>
      <el-form-item label="Color">
        <el-color-picker v-model="config.font.color" show-alpha />
      </el-form-item>
      <el-form-item label="FontSize">
        <el-slider v-model="config.font.fontSize" />
      </el-form-item>
      <el-form-item label="zIndex">
        <el-slider v-model="config.zIndex" />
      </el-form-item>
      <el-form-item label="Rotate">
        <el-slider v-model="config.rotate" :min="-180" :max="180" />

Review comment (suggestion):
```suggestion
      <div class="watermark-container">
```

Code after:

const config = reactive({
  content: 'Element Plus',
  font: {
    fontSize: 16,
    color: 'rgba(0, 0, 0, 0.15)',
  },
  zIndex: -1,
  rotate: -22,
  gap: [100, 100] as [number, number],
  offset: [] as unknown as [number, number],
})
</script>

<template>
  <div class="wrapper">
    <el-watermark
      class="watermark"
      :content="config.content"
      :font="config.font"
      :z-index="config.zIndex"
      :rotate="config.rotate"
      :gap="config.gap"
      :offset="config.offset"
    >
      <div class="watermark-container">
        <h1>Element Plus</h1>
        <h2>A Vue 3 based component library for designers and developers</h2>
        <img src="/images/hamburger.png" alt="示例图片" />
      </div>
    </el-watermark>
    <el-form
      class="form"
      :model="config"
      label-position="top"
      label-width="50px"
    >
      <el-form-item label="Content">
        <el-input v-model="config.content" />
      </el-form-item>
      <el-form-item label="Color">
        <el-color-picker v-model="config.font.color" show-alpha />
      </el-form-item>
      <el-form-item label="FontSize">
        <el-slider v-model="config.font.fontSize" />
      </el-form-item>
      <el-form-item label="zIndex">
        <el-slider v-model="config.zIndex" />
      </el-form-item>
      <el-form-item label="Rotate">
        <el-slider v-model="config.rotate" :min="-180" :max="180" />
Repository: element-plus/element-plus
File: docs/examples/autocomplete/custom-header-footer.vue (Vue)

Code before:

const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

onMounted(() => {
  links.value = loadAll()
})

const footerAutocompleteRef = ref()
const handleClear = () => {
  footerSlotstate.value = ''
  footerAutocompleteRef.value.getData()
}
</script>

<style scoped>
.autocomplete-custom-header-footer {
  display: flex;
}

.autocomplete-custom-header-footer > div {
  flex: 1;
  text-align: center;
}
.autocomplete-custom-header-footer > div > .el-autocomplete {
  width: 50%;
}

.autocomplete-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>


Review comment (suggestion):
```suggestion
.autocomplete-custom-header-footer > div > :deep(.el-autocomplete) {
```

Before:
<img width="1054" height="182" alt="Image" src="https://github.com/user-attachments/assets/e6bc766e-d736-4f14-9678-e9e61c240a2f" />

Code after:

const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

onMounted(() => {
  links.value = loadAll()
})

const footerAutocompleteRef = ref()
const handleClear = () => {
  footerSlotstate.value = ''
  footerAutocompleteRef.value.getData()
}
</script>

<style scoped>
.autocomplete-custom-header-footer {
  display: flex;
}

.autocomplete-custom-header-footer > div {
  flex: 1;
  text-align: center;
}
.autocomplete-custom-header-footer > div > :deep(.el-autocomplete) {
  width: 50%;
}

.autocomplete-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}
</style>
Repository: element-plus/element-plus
File: docs/examples/cascader/custom-header-footer.vue (Vue)

Code before:
}

const handleClear = () => {
  value.value = []
}
</script>

<style scoped>
.cascader-custom-header-footer {
  display: flex;
}

.cascader-custom-header-footer > div {
  flex: 1;
  text-align: center;
}

.cascader-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.cascader-custom-header {
  :deep(.el-checkbox) {
    display: flex;
    height: unset;
  }
}
</style>


Review comment (suggestion):
```suggestion
.cascader-custom-header .el-checkbox {
  display: flex;
  height: unset;
}
```

Code after:
}

const handleClear = () => {
  value.value = []
}
</script>

<style scoped>
.cascader-custom-header-footer {
  display: flex;
}

.cascader-custom-header-footer > div {
  flex: 1;
  text-align: center;
}

.cascader-custom-header-footer > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.cascader-custom-header .el-checkbox {
  display: flex;
  height: unset;
}
</style>
Repository: element-plus/element-plus
File: packages/components/popper/src/trigger.vue (Vue)

Code before:
  'onKeydown',
  'onFocus',
  'onBlur',
  'onContextmenu',
] as const

onMounted(() => {
  watch(
    () => props.virtualRef,
    (virtualEl) => {
      if (virtualEl) {
        triggerRef.value = unrefElement(virtualEl as HTMLElement)
      }
    },
    {
      immediate: true,
    }
  )

  watch(
    triggerRef,
    (el, prevEl) => {
      virtualTriggerAriaStopWatch?.()
      virtualTriggerAriaStopWatch = undefined

      if (isElement(prevEl) && prevEl !== el) {
        TRIGGER_ELE_EVENTS.forEach((eventName) => {
          const handler = props[eventName]
          if (handler) {
            ;(prevEl as HTMLElement).removeEventListener(
              eventName.slice(2).toLowerCase(),
              handler,
              ['onFocus', 'onBlur'].includes(eventName)
            )
          }
        })
      }
      if (isElement(el)) {
        TRIGGER_ELE_EVENTS.forEach((eventName) => {
          const handler = props[eventName]
          if (handler) {
            ;(el as HTMLElement).addEventListener(
              eventName.slice(2).toLowerCase(),
              handler,
              ['onFocus', 'onBlur'].includes(eventName)
            )
          }
        })
        if (isFocusable(el as HTMLElement)) {
          virtualTriggerAriaStopWatch = watch(
            [ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded],

Review comment (suggestion):
```suggestion
      if (isElement(prevEl)) {
```
If `prevEl` and `el` are equal, the watch function should not be triggered.

Code after:
  'onKeydown',
  'onFocus',
  'onBlur',
  'onContextmenu',
] as const

onMounted(() => {
  watch(
    () => props.virtualRef,
    (virtualEl) => {
      if (virtualEl) {
        triggerRef.value = unrefElement(virtualEl as HTMLElement)
      }
    },
    {
      immediate: true,
    }
  )

  watch(
    triggerRef,
    (el, prevEl) => {
      virtualTriggerAriaStopWatch?.()
      virtualTriggerAriaStopWatch = undefined

      if (isElement(prevEl)) {
        TRIGGER_ELE_EVENTS.forEach((eventName) => {
          const handler = props[eventName]
          if (handler) {
            ;(prevEl as HTMLElement).removeEventListener(
              eventName.slice(2).toLowerCase(),
              handler,
              ['onFocus', 'onBlur'].includes(eventName)
            )
          }
        })
      }
      if (isElement(el)) {
        TRIGGER_ELE_EVENTS.forEach((eventName) => {
          const handler = props[eventName]
          if (handler) {
            ;(el as HTMLElement).addEventListener(
              eventName.slice(2).toLowerCase(),
              handler,
              ['onFocus', 'onBlur'].includes(eventName)
            )
          }
        })
        if (isFocusable(el as HTMLElement)) {
          virtualTriggerAriaStopWatch = watch(
            [ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded],