ronantakizawa/codereview-bench huggingface dataset:
Repository: element-plus/element-plus
File: packages/components/time-select/__tests__/time-select.test.tsx (TypeScript)

Code before:

      await nextTick()
      const formItem = wrapper.find('[data-test-ref="item"]')
      const formItemLabel = formItem.find('.el-form-item__label')
      const timeSelectInput = wrapper.find('input')
      expect(formItem.attributes().role).toBeFalsy()
      expect(timeSelectInput.attributes().id).toBe('foobar')
      expect(formItemLabel.attributes().for).toBe(
        timeSelectInput.attributes().id
      )
    })

    it('The disabled state of a component has higher priority than that of a form', async () => {
      const wrapper = mount(() => (
        <ElFormItem label="Foobar" data-test-ref="item">
          <TimeSelect />
          <TimeSelect />
        </ElFormItem>
      ))

      await nextTick()
      const formItem = wrapper.find('[data-test-ref="item"]')
      expect(formItem.attributes().role).toBe('group')
    })

    it('form disabled, but timeSelect is not', async () => {
      const wrapper = mount(() => (
        <ElForm disabled>
          <TimeSelect disabled={false} />
        </ElForm>
      ))

      await nextTick()
      const input = wrapper.find('input')
      expect(input.attributes('disabled')).toBeUndefined()
    })
  })
})


Review comment (suggestion):
```suggestion
    it('The disabled state of a component has higher priority than that of a form', async () => {
```

Code after:

      await nextTick()
      const formItem = wrapper.find('[data-test-ref="item"]')
      const formItemLabel = formItem.find('.el-form-item__label')
      const timeSelectInput = wrapper.find('input')
      expect(formItem.attributes().role).toBeFalsy()
      expect(timeSelectInput.attributes().id).toBe('foobar')
      expect(formItemLabel.attributes().for).toBe(
        timeSelectInput.attributes().id
      )
    })

    it('form item role is group when multiple inputs', async () => {
      const wrapper = mount(() => (
        <ElFormItem label="Foobar" data-test-ref="item">
          <TimeSelect />
          <TimeSelect />
        </ElFormItem>
      ))

      await nextTick()
      const formItem = wrapper.find('[data-test-ref="item"]')
      expect(formItem.attributes().role).toBe('group')
    })

    it('The disabled state of a component has higher priority than that of a form', async () => {
      const wrapper = mount(() => (
        <ElForm disabled>
          <TimeSelect disabled={false} />
        </ElForm>
      ))

      await nextTick()
      const input = wrapper.find('input')
      expect(input.attributes('disabled')).toBeUndefined()
    })
  })
})
Repository: element-plus/element-plus
File: packages/components/affix/src/affix.vue (Vue)

Code before:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <ElTeleport :disabled="teleportDisabled" :to="props.appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </ElTeleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'

Review comment (suggestion):
```suggestion
    <el-teleport :disabled="teleportDisabled" :to="props.appendTo">
```

Code after:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <el-teleport :disabled="teleportDisabled" :to="appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </el-teleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
Repository: element-plus/element-plus
File: packages/components/affix/src/affix.vue (Vue)

Code before:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <el-teleport :disabled="teleportDisabled" :to="props.appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </ElTeleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { CHANGE_EVENT } from '@element-plus/constants'
import { affixEmits, affixProps } from './affix'

import type { CSSProperties } from 'vue'

Review comment (suggestion):
```suggestion
    </el-teleport>
```

Sorry, I forgot to submit this part.

Code after:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <el-teleport :disabled="teleportDisabled" :to="appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </el-teleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
import { CHANGE_EVENT } from '@element-plus/constants'
import { affixEmits, affixProps } from './affix'

import type { CSSProperties } from 'vue'
Repository: element-plus/element-plus
File: packages/components/affix/src/affix.vue (Vue)

Code before:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <el-teleport :disabled="teleportDisabled" :to="props.appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </el-teleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'

Review comment (suggestion):
```suggestion
    <el-teleport :disabled="teleportDisabled" :to="appendTo">
```

Code after:
<template>
  <div ref="root" :class="ns.b()" :style="rootStyle">
    <el-teleport :disabled="teleportDisabled" :to="appendTo">
      <div :class="{ [ns.m('fixed')]: fixed }" :style="affixStyle">
        <slot />
      </div>
    </el-teleport>
  </div>
</template>

<script lang="ts" setup>
import {
  computed,
  nextTick,
  onMounted,
  ref,
  shallowRef,
  watch,
  watchEffect,
} from 'vue'
import {
  useElementBounding,
  useEventListener,
  useWindowSize,
} from '@vueuse/core'
import ElTeleport from '@element-plus/components/teleport'
import { addUnit, getScrollContainer, throwError } from '@element-plus/utils'
import { useNamespace } from '@element-plus/hooks'
Repository: element-plus/element-plus
File: packages/components/table/src/config.ts (TypeScript)

Code before:
    renderCell<T extends DefaultRow>({
      column,
      row,
      store,
      expanded,
      $index,
    }: {
      column: TableColumnCtx<T>
      row: T
      store: Store<T>
      expanded: boolean
      $index: number
    }) {
      const { ns } = store
      const classes = [ns.e('expand-icon')]

      if (!column.renderExpand && expanded) {
        classes.push(ns.em('expand-icon', 'expanded'))
      }
      const callback = function (e: Event) {
        e.stopPropagation()
        store.toggleRowExpansion(row)
      }
      const isRowExpandable = store.states.rowExpandable.value
        ? store.states.rowExpandable.value(row, $index)
        : true
      if (!isRowExpandable) {
        classes.push(ns.is('disabled', true))
      }
      return h(
        'button',
        {
          type: 'button',
          disabled: !isRowExpandable,
          'aria-label': store.t(
            expanded ? 'el.table.collapseRowLabel' : 'el.table.expandRowLabel'
          ),
          'aria-expanded': expanded,
          class: classes,
          onClick: callback,
        },
        {
          default: () => {
            if (column.renderExpand) {
              return [
                column.renderExpand({
                  expanded,
                  expandable: isRowExpandable,
                }),
              ]
            }

Review comment (suggestion):
```suggestion
      const isRowExpandable = store.states.rowExpandable.value ?? true
```

Code after:
    renderCell<T extends DefaultRow>({
      column,
      row,
      store,
      expanded,
      $index,
    }: {
      column: TableColumnCtx<T>
      row: T
      store: Store<T>
      expanded: boolean
      $index: number
    }) {
      const { ns } = store
      const classes = [ns.e('expand-icon')]

      if (!column.renderExpand && expanded) {
        classes.push(ns.em('expand-icon', 'expanded'))
      }
      const callback = function (e: Event) {
        e.stopPropagation()
        store.toggleRowExpansion(row)
      }
      const isRowExpandable =
        store.states.rowExpandable.value?.(row, $index) ?? true
      if (!isRowExpandable) {
        classes.push(ns.is('disabled'))
      }
      return h(
        'button',
        {
          type: 'button',
          disabled: !isRowExpandable,
          'aria-label': store.t(
            expanded ? 'el.table.collapseRowLabel' : 'el.table.expandRowLabel'
          ),
          'aria-expanded': expanded,
          class: classes,
          onClick: callback,
        },
        {
          default: () => {
            if (column.renderExpand) {
              return [
                column.renderExpand({
                  expanded,
                  expandable: isRowExpandable,
                }),
              ]
            }
Repository: element-plus/element-plus
File: packages/components/table/src/store/expand.ts (TypeScript)

Code before:
import { getCurrentInstance, ref } from 'vue'
import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'

import type { Ref } from 'vue'
import type { WatcherPropsData } from '.'
import type { DefaultRow, Table } from '../table/defaults'

function useExpand<T extends DefaultRow>(watcherData: WatcherPropsData<T>) {
  const instance = getCurrentInstance() as Table<T>
  const defaultExpandAll = ref(false)
  const expandRows: Ref<T[]> = ref([])

  const canRowExpand = (row: T, index: number) => {
    const expandableFn = instance.store.states.rowExpandable.value
    return !expandableFn || expandableFn(row, index)
  }

  const updateExpandRows = () => {
    const data = watcherData.data.value || []
    const rowKey = watcherData.rowKey.value
    if (defaultExpandAll.value) {
      expandRows.value = instance.store.states.rowExpandable.value
        ? data.filter(canRowExpand)
        : data.slice()
    } else if (rowKey) {
      // TODO：这里的代码可以优化
      const expandRowsMap = getKeysMap(expandRows.value, rowKey)
      expandRows.value = data.filter((row, index) => {
        const rowId = getRowIdentity(row, rowKey)
        return !!expandRowsMap[rowId] && canRowExpand(row, index)
      })
    } else {
      expandRows.value = []
    }
  }

  const toggleRowExpansion = (row: T, expanded?: boolean) => {
    const dataArr = watcherData.data.value || []
    const rowKey = watcherData.rowKey.value
    const rowIndex = rowKey

Review comment (suggestion):
```suggestion
    return !!expandableFn?.(row, index)
```

Code after:
import { getCurrentInstance, ref } from 'vue'
import { getKeysMap, getRowIdentity, toggleRowStatus } from '../util'

import type { Ref } from 'vue'
import type { WatcherPropsData } from '.'
import type { DefaultRow, Table } from '../table/defaults'

function useExpand<T extends DefaultRow>(watcherData: WatcherPropsData<T>) {
  const instance = getCurrentInstance() as Table<T>
  const defaultExpandAll = ref(false)
  const expandRows: Ref<T[]> = ref([])

  const canRowExpand = (row: T, index: number) => {
    const expandableFn = instance.store.states.rowExpandable.value
    return expandableFn?.(row, index) ?? true
  }

  const updateExpandRows = () => {
    const data = watcherData.data.value || []
    const rowKey = watcherData.rowKey.value
    if (defaultExpandAll.value) {
      expandRows.value = instance.store.states.rowExpandable.value
        ? data.filter(canRowExpand)
        : data.slice()
    } else if (rowKey) {
      // TODO：这里的代码可以优化
      const expandRowsMap = getKeysMap(expandRows.value, rowKey)
      expandRows.value = data.filter((row, index) => {
        const rowId = getRowIdentity(row, rowKey)
        return !!expandRowsMap[rowId] && canRowExpand(row, index)
      })
    } else {
      expandRows.value = []
    }
  }

  const toggleRowExpansion = (row: T, expanded?: boolean) => {
    const dataArr = watcherData.data.value || []
    const rowIndex = dataArr.indexOf(row)
    if (rowIndex > -1 && !canRowExpand(row, rowIndex)) return
Repository: element-plus/element-plus
File: packages/components/table/src/config.ts (TypeScript)

Code before:
      row,
      store,
      expanded,
      $index,
    }: {
      column: TableColumnCtx<T>
      row: T
      store: Store<T>
      expanded: boolean
      $index: number
    }) {
      const { ns } = store
      const classes = [ns.e('expand-icon')]

      if (!column.renderExpand && expanded) {
        classes.push(ns.em('expand-icon', 'expanded'))
      }
      const callback = function (e: Event) {
        e.stopPropagation()
        store.toggleRowExpansion(row)
      }
      const isRowExpandable = store.states.rowExpandable.value
        ? store.states.rowExpandable.value(row, $index)
        : true
      if (!isRowExpandable) {
        classes.push(ns.is('disabled', true))
      }
      return h(
        'button',
        {
          type: 'button',
          disabled: !isRowExpandable,
          'aria-label': store.t(
            expanded ? 'el.table.collapseRowLabel' : 'el.table.expandRowLabel'
          ),
          'aria-expanded': expanded,
          class: classes,
          onClick: callback,
        },
        {
          default: () => {
            if (column.renderExpand) {
              return [
                column.renderExpand({
                  expanded,
                  expandable: isRowExpandable,
                }),
              ]
            }

            return [

Review comment (suggestion):
It seems like the second argument is by default true.
```suggestion
        classes.push(ns.is('disabled'))
```

Code after:
      row,
      store,
      expanded,
      $index,
    }: {
      column: TableColumnCtx<T>
      row: T
      store: Store<T>
      expanded: boolean
      $index: number
    }) {
      const { ns } = store
      const classes = [ns.e('expand-icon')]

      if (!column.renderExpand && expanded) {
        classes.push(ns.em('expand-icon', 'expanded'))
      }
      const callback = function (e: Event) {
        e.stopPropagation()
        store.toggleRowExpansion(row)
      }
      const isRowExpandable =
        store.states.rowExpandable.value?.(row, $index) ?? true
      if (!isRowExpandable) {
        classes.push(ns.is('disabled'))
      }
      return h(
        'button',
        {
          type: 'button',
          disabled: !isRowExpandable,
          'aria-label': store.t(
            expanded ? 'el.table.collapseRowLabel' : 'el.table.expandRowLabel'
          ),
          'aria-expanded': expanded,
          class: classes,
          onClick: callback,
        },
        {
          default: () => {
            if (column.renderExpand) {
              return [
                column.renderExpand({
                  expanded,
                  expandable: isRowExpandable,
                }),
              ]
            }

            return [
              h(ElIcon, null, {
Repository: element-plus/element-plus
File: docs/.vitepress/vitepress/components/globals/parallax-home.vue (Vue)

Code before:
import { useLang } from '../../composables/lang'
import homeLocale from '../../../i18n/pages/home.json'
import HomeSponsors from '../home/home-sponsors.vue'
import HomeCards from '../home/home-cards.vue'
import HomeFooter from './vp-footer.vue'

import type { CSSProperties } from 'vue'

import { isDark } from '~/composables/dark'

const target = ref<HTMLElement | null>(null)
const parallax = reactive(useParallax(target))
const jumbotronRedOffset = ref(0)
const jumbotronRef = ref<HTMLElement | null>(null)
const lang = useLang()
const homeLang = computed(() => homeLocale[lang.value])

function jumpTo(path: string) {
  // vitepress has not router
  location.href = `/${lang.value}/${path}`
}

const containerStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  transition: '.3s ease-out all',

  position: 'relative',

  perspective: '300px',
}

const cardStyle = computed(() => ({
  height: '30rem',
  width: '100%',
  transition: '.3s ease-out all',
  transform: `rotateX(${parallax.roll}deg) rotateY(${parallax.tilt}deg)`,
}))

const layerBase: CSSProperties = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  transition: '.3s ease-out all',
}

const screenLayer = computed(() => ({
  ...layerBase,
  width: '80%',

Review comment (suggestion):
<img width="1498" height="1076" alt="Image" src="https://github.com/user-attachments/assets/ced3829a-dec6-406b-b0c1-8ac7a4bc10f2" />

Numerous error messages are generated during document creation.

Code after:
  isClient,
  useEventListener,
  useParallax,
  useThrottleFn,
} from '@vueuse/core'
import { useLang } from '../../composables/lang'
import homeLocale from '../../../i18n/pages/home.json'
import HomeSponsors from '../home/home-sponsors.vue'
import HomeCards from '../home/home-cards.vue'
import HomeFooter from './vp-footer.vue'

import type { CSSProperties } from 'vue'

import { isDark } from '~/composables/dark'

const target = ref<HTMLElement | null>(null)
const parallax = reactive(useParallax(target))
const jumbotronRedOffset = ref(0)
const jumbotronRef = ref<HTMLElement | null>(null)
const lang = useLang()
const homeLang = computed(() => homeLocale[lang.value])

function jumpTo(path: string) {
  if (!isClient) return
  // vitepress has not router
  window.location.href = `/${lang.value}/${path}`
}

const containerStyle: CSSProperties = {
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  alignItems: 'center',
  transition: '.3s ease-out all',

  position: 'relative',

  perspective: '300px',
}

const cardStyle = computed(() => ({
  height: '30rem',
  width: '100%',
  transition: '.3s ease-out all',
  transform: `rotateX(${parallax.roll}deg) rotateY(${parallax.tilt}deg)`,
}))

const layerBase: CSSProperties = {
  position: 'absolute',
  width: '100%',
  height: '100%',
Repository: element-plus/element-plus
File: packages/components/transfer/src/transfer-panel.vue (Vue)

Code before:
<template>
  <div :class="ns.b('panel')">
    <p :class="ns.be('panel', 'header')">
      <el-checkbox
        v-model="allChecked"
        :indeterminate="isIndeterminate"
        :validate-event="false"
        @change="handleAllCheckedChange"
      >
        <span :class="ns.be('panel', 'header-title')">{{ title }}</span>
        <span :class="ns.be('panel', 'header-count')">{{
          checkedSummary
        }}</span>
      </el-checkbox>
    </p>

    <div :class="[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]">
      <el-input
        v-if="filterable"
        v-model="query"
        :class="ns.be('panel', 'filter')"
        size="default"
        :placeholder="placeholder"
        :prefix-icon="Search"
        clearable
        :validate-event="false"
      />
      <el-checkbox-group
        v-show="!hasNoMatch && !isEmpty(data)"
        v-model="checked"
        :validate-event="false"
        :class="[ns.is('filterable', filterable), ns.be('panel', 'list')]"
      >
        <el-checkbox
          v-for="item in filteredData"
          :key="item[propsAlias.key]"
          :class="ns.be('panel', 'item')"
          :value="item[propsAlias.key]"

Review comment (suggestion):
```suggestion
        <span :class="ns.be('panel', 'header-count')">
          {{ checkedSummary }}
        </span>
```

Code after:
<template>
  <div :class="ns.b('panel')">
    <p :class="ns.be('panel', 'header')">
      <el-checkbox
        v-model="allChecked"
        :indeterminate="isIndeterminate"
        :validate-event="false"
        @change="handleAllCheckedChange"
      >
        <span :class="ns.be('panel', 'header-title')">{{ title }}</span>
        <span :class="ns.be('panel', 'header-count')">
          {{ checkedSummary }}
        </span>
      </el-checkbox>
    </p>

    <div :class="[ns.be('panel', 'body'), ns.is('with-footer', hasFooter)]">
      <el-input
        v-if="filterable"
        v-model="query"
        :class="ns.be('panel', 'filter')"
        size="default"
        :placeholder="placeholder"
        :prefix-icon="Search"
        clearable
        :validate-event="false"
      />
      <el-checkbox-group
        v-show="!hasNoMatch && !isEmpty(data)"
        v-model="checked"
        :validate-event="false"
        :class="[ns.is('filterable', filterable), ns.be('panel', 'list')]"
      >
        <el-checkbox
          v-for="item in filteredData"
          :key="item[propsAlias.key]"
          :class="ns.be('panel', 'item')"
          :value="item[propsAlias.key]"