ronantakizawa/codereview-bench huggingface dataset:
Repository: element-plus/element-plus
File: packages/locale/lang/en.ts (TypeScript)

Code before:
      title: 'Message',
      confirm: 'OK',
      cancel: 'Cancel',
      error: 'Illegal input',
      close: 'Close this dialog',
    },
    upload: {
      deleteTip: 'press delete to remove',
      delete: 'Delete',
      preview: 'Preview',
      continue: 'Continue',
    },
    slider: {
      defaultLabel: 'slider between {min} and {max}',
      defaultRangeStartLabel: 'pick start value',
      defaultRangeEndLabel: 'pick end value',
    },
    table: {
      emptyText: 'No Data',
      confirmFilter: 'Confirm',
      resetFilter: 'Reset',
      clearFilter: 'All',
      sumText: 'Sum',
    },
    tag: {
      close: 'Close',
    },
    tour: {
      next: 'Next',
      previous: 'Previous',
      finish: 'Finish',
      close: 'Close this dialog',
    },
    tree: {
      emptyText: 'No Data',
    },
    transfer: {
      noMatch: 'No matching data',
      noData: 'No data',
      titles: ['List 1', 'List 2'],
      filterPlaceholder: 'Enter keyword',
      noCheckedFormat: '{total} items',
      hasCheckedFormat: '{checked}/{total} checked',
    },
    image: {
      error: 'FAILED',
    },
    pageHeader: {
      title: 'Back',
    },
    popconfirm: {

Review comment (suggestion):
```suggestion
      close: 'Close this tag',
```

I think the accessibility description should be as detailed as possible.

WDYT.

Code after:
    messagebox: {
      title: 'Message',
      confirm: 'OK',
      cancel: 'Cancel',
      error: 'Illegal input',
      close: 'Close this dialog',
    },
    upload: {
      deleteTip: 'press delete to remove',
      delete: 'Delete',
      preview: 'Preview',
      continue: 'Continue',
    },
    slider: {
      defaultLabel: 'slider between {min} and {max}',
      defaultRangeStartLabel: 'pick start value',
      defaultRangeEndLabel: 'pick end value',
    },
    table: {
      emptyText: 'No Data',
      confirmFilter: 'Confirm',
      resetFilter: 'Reset',
      clearFilter: 'All',
      sumText: 'Sum',
    },
    tag: {
      close: 'Close this tag',
    },
    tour: {
      next: 'Next',
      previous: 'Previous',
      finish: 'Finish',
      close: 'Close this dialog',
    },
    tree: {
      emptyText: 'No Data',
    },
    transfer: {
      noMatch: 'No matching data',
      noData: 'No data',
      titles: ['List 1', 'List 2'],
      filterPlaceholder: 'Enter keyword',
      noCheckedFormat: '{total} items',
      hasCheckedFormat: '{checked}/{total} checked',
    },
    image: {
      error: 'FAILED',
    },
    pageHeader: {
      title: 'Back',
    },
Repository: element-plus/element-plus
File: packages/components/date-picker-panel/src/composables/use-basic-date-table.ts (TypeScript)

Code before:
    focus,
    isCurrent,
    isWeekActive,
    isSelectedCell,

    handlePickDate,
    handleMouseUp,
    handleMouseDown,
    handleMouseMove,
    handleFocus,
  }
}

export const useBasicDateTableDOM = (
  props: BasicDateTableProps,
  {
    isCurrent,
    isWeekActive,
  }: Pick<ReturnType<typeof useBasicDateTable>, 'isCurrent' | 'isWeekActive'>
) => {
  const ns = useNamespace('date-table')
  const { t } = useLocale()

  const tableKls = computed(() => [
    ns.b(),
    { [ns.is('week-mode')]: props.selectionMode === 'week' && !props.disabled },
  ])

  const tableLabel = computed(() => t('el.datepicker.dateTablePrompt'))

  const getCellClasses = (cell: DateCell) => {
    const classes: string[] = []
    if (isNormalDay(cell.type) && !cell.disabled) {
      classes.push('available')
      if (cell.type === 'today') {
        classes.push('today')
      }
    } else {
      classes.push(cell.type!)
    }

    if (isCurrent(cell)) {
      classes.push('current')
    }

    if (
      cell.inRange &&
      (isNormalDay(cell.type) || props.selectionMode === 'week')
    ) {
      classes.push('in-range')


Review comment (suggestion):
```suggestion
    ns.is('week-mode', props.selectionMode === 'week' && !props.disabled),
```

Code after:
    focus,
    isCurrent,
    isWeekActive,
    isSelectedCell,

    handlePickDate,
    handleMouseUp,
    handleMouseDown,
    handleMouseMove,
    handleFocus,
  }
}

export const useBasicDateTableDOM = (
  props: BasicDateTableProps,
  {
    isCurrent,
    isWeekActive,
  }: Pick<ReturnType<typeof useBasicDateTable>, 'isCurrent' | 'isWeekActive'>
) => {
  const ns = useNamespace('date-table')
  const { t } = useLocale()

  const tableKls = computed(() => [
    ns.b(),
    ns.is('week-mode', props.selectionMode === 'week' && !props.disabled),
  ])

  const tableLabel = computed(() => t('el.datepicker.dateTablePrompt'))

  const getCellClasses = (cell: DateCell) => {
    const classes: string[] = []
    if (isNormalDay(cell.type) && !cell.disabled) {
      classes.push('available')
      if (cell.type === 'today') {
        classes.push('today')
      }
    } else {
      classes.push(cell.type!)
    }

    if (isCurrent(cell)) {
      classes.push('current')
    }

    if (
      cell.inRange &&
      (isNormalDay(cell.type) || props.selectionMode === 'week')
    ) {
      classes.push('in-range')
Repository: element-plus/element-plus
File: packages/components/loading/src/loading.ts (TypeScript)

Code before:
          ]
        )

        const spinnerText = data.text
          ? h('p', { class: ns.b('text') }, [data.text])
          : undefined

        return h(
          Transition,
          {
            name: ns.b('fade'),
            onAfterLeave: handleAfterLeave,
          },
          {
            default: withCtx(() => [
              withDirectives(
                createVNode(
                  'div',
                  {
                    style: {
                      backgroundColor: data.background || '',
                    },
                    class: [
                      ns.b('mask'),
                      data.customClass,
                      { [ns.is('fullscreen')]: data.fullscreen },
                    ],
                  },
                  [
                    h(
                      'div',
                      {
                        class: ns.b('spinner'),
                      },
                      [spinner, spinnerText]
                    ),
                  ]
                ),
                [[vShow, data.visible]]
              ),
            ]),
          }
        )
      }
    },
  })

  const loadingInstance = createApp(elLoadingComponent)
  Object.assign(loadingInstance._context, appContext ?? {})
  const vm = loadingInstance.mount(document.createElement('div'))


Review comment (suggestion):
```suggestion
                      ns.is('fullscreen', data.fullscreen),
```

Code after:
          ]
        )

        const spinnerText = data.text
          ? h('p', { class: ns.b('text') }, [data.text])
          : undefined

        return h(
          Transition,
          {
            name: ns.b('fade'),
            onAfterLeave: handleAfterLeave,
          },
          {
            default: withCtx(() => [
              withDirectives(
                createVNode(
                  'div',
                  {
                    style: {
                      backgroundColor: data.background || '',
                    },
                    class: [
                      ns.b('mask'),
                      data.customClass,
                      ns.is('fullscreen', data.fullscreen),
                    ],
                  },
                  [
                    h(
                      'div',
                      {
                        class: ns.b('spinner'),
                      },
                      [spinner, spinnerText]
                    ),
                  ]
                ),
                [[vShow, data.visible]]
              ),
            ]),
          }
        )
      }
    },
  })

  const loadingInstance = createApp(elLoadingComponent)
  Object.assign(loadingInstance._context, appContext ?? {})
  const vm = loadingInstance.mount(document.createElement('div'))
Repository: element-plus/element-plus
File: packages/components/tour/src/step.vue (Vue)

Code before:
  </button>
  <header :class="[ns.e('header'), { 'show-close': showClose }]">
    <slot name="header">
      <span role="heading" :class="ns.e('title')">
        {{ title }}
      </span>
    </slot>
  </header>
  <div :class="ns.e('body')">
    <slot>
      <span>{{ description }}</span>
    </slot>
  </div>
  <footer :class="ns.e('footer')">
    <div :class="ns.b('indicators')">
      <component
        :is="tourSlots.indicators"
        v-if="tourSlots.indicators"
        :current="current"
        :total="total"
      />
      <template v-else>
        <span
          v-for="(item, index) in total"
          :key="item"
          :class="[ns.b('indicator'), { [ns.is('active')]: index === current }]"
        />
      </template>
    </div>
    <div :class="ns.b('buttons')">
      <el-button
        v-if="current > 0"
        size="small"
        :type="mergedType"
        v-bind="filterButtonProps(prevButtonProps)"
        @click="onPrev"
      >
        {{ prevButtonProps?.children ?? t('el.tour.previous') }}
      </el-button>
      <el-button
        v-if="current <= total - 1"
        size="small"
        :type="mergedType === 'primary' ? 'default' : 'primary'"
        v-bind="filterButtonProps(nextButtonProps)"
        @click="onNext"
      >
        {{
          nextButtonProps?.children ??
          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))
        }}
      </el-button>

Review comment (suggestion):
```suggestion
          :class="[ns.b('indicator'), ns.is('active', index === current)]"
```

Code after:
  </button>
  <header :class="[ns.e('header'), { 'show-close': showClose }]">
    <slot name="header">
      <span role="heading" :class="ns.e('title')">
        {{ title }}
      </span>
    </slot>
  </header>
  <div :class="ns.e('body')">
    <slot>
      <span>{{ description }}</span>
    </slot>
  </div>
  <footer :class="ns.e('footer')">
    <div :class="ns.b('indicators')">
      <component
        :is="tourSlots.indicators"
        v-if="tourSlots.indicators"
        :current="current"
        :total="total"
      />
      <template v-else>
        <span
          v-for="(item, index) in total"
          :key="item"
          :class="[ns.b('indicator'), ns.is('active', index === current)]"
        />
      </template>
    </div>
    <div :class="ns.b('buttons')">
      <el-button
        v-if="current > 0"
        size="small"
        :type="mergedType"
        v-bind="filterButtonProps(prevButtonProps)"
        @click="onPrev"
      >
        {{ prevButtonProps?.children ?? t('el.tour.previous') }}
      </el-button>
      <el-button
        v-if="current <= total - 1"
        size="small"
        :type="mergedType === 'primary' ? 'default' : 'primary'"
        v-bind="filterButtonProps(nextButtonProps)"
        @click="onNext"
      >
        {{
          nextButtonProps?.children ??
          (current === total - 1 ? t('el.tour.finish') : t('el.tour.next'))
        }}
      </el-button>
Repository: element-plus/element-plus
File: packages/components/watermark/src/useClips.ts (TypeScript)

Code before:
      top = Math.min(top, targetY)
      bottom = Math.max(bottom, targetY)
    })

    const cutLeft = left + realMaxSize / 2
    const cutTop = top + realMaxSize / 2
    const cutWidth = right - left
    const cutHeight = bottom - top

    // ================ Fill Alternate ================
    const realGapX = gapX * ratio
    const realGapY = gapY * ratio
    const filledWidth = (cutWidth + realGapX) * 2
    const filledHeight = cutHeight + realGapY

    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)

    function drawImg(targetX = 0, targetY = 0) {
      fCtx.drawImage(
        rCanvas,
        cutLeft,
        cutTop,
        cutWidth,
        cutHeight,
        targetX,
        targetY - baselineOffset,
        cutWidth,
        cutHeight
      )
    }
    drawImg()
    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)
    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)

    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]
  }

  return getClips
}


Review comment (suggestion):
```suggestion
        targetY + baselineOffset,
```

It should be offset downward here.

Before

https://github.com/user-attachments/assets/84fee378-f096-476b-9e48-1287f205b3de

After

https://github.com/user-attachments/assets/3447b029-5e71-44ee-b9e9-d5691bc6ba47

Code after:
      top = Math.min(top, targetY)
      bottom = Math.max(bottom, targetY)
    })

    const cutLeft = left + realMaxSize / 2
    const cutTop = top + realMaxSize / 2
    const cutWidth = right - left
    const cutHeight = bottom - top

    // ================ Fill Alternate ================
    const realGapX = gapX * ratio
    const realGapY = gapY * ratio
    const filledWidth = (cutWidth + realGapX) * 2
    const filledHeight = cutHeight + realGapY

    const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight)

    function drawImg(targetX = 0, targetY = 0) {
      fCtx.drawImage(
        rCanvas,
        cutLeft,
        cutTop,
        cutWidth,
        cutHeight,
        targetX,
        targetY + baselineOffset,
        cutWidth,
        cutHeight
      )
    }
    drawImg()
    drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2)
    drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2)

    return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]
  }

  return getClips
}
Repository: element-plus/element-plus
File: packages/components/table/__tests__/table.test.ts (TypeScript)

Code before:
      `,
      data() {
        return {
          testData,
        }
      },
    })
    await doubleWait()
    const existingPopper = document.querySelector('.el-popper')
    if (existingPopper) {
      existingPopper.remove()
    }
    const emptyCells = wrapper.findAll('.el-table__body-wrapper .empty_cell')
    expect(emptyCells.length).toBeGreaterThan(0)
    for (const cell of emptyCells) {
      const cellElement = cell.find('.cell')
      expect(cellElement.exists()).toBe(true)
      const mockCellRect = vi
        .spyOn(cellElement.element, 'getBoundingClientRect')
        .mockReturnValue({
          width: 100,
          height: 30,
        } as DOMRect)
      await cell.trigger('mouseenter')
      await rAF()
      expect(document.querySelector('.el-popper')).toBeNull()
      mockCellRect.mockRestore()
    }
    mockRangeRect.mockRestore()
    wrapper.unmount()
  })

  it('should cleanup tooltip dynamically', async () => {
    const mockRangeRect = vi
      .spyOn(Range.prototype, 'getBoundingClientRect')
      .mockReturnValue({
        width: 150,
        height: 30,
      } as DOMRect)

    const wrapper = mount({
      components: {
        ElTable,
        ElTableColumn,
      },
      template: `
        <el-table :data="testData">
          <el-table-column :show-overflow-tooltip="showOverflowTooltip" class-name="overflow_tooltip" prop="name" label="name"/>
        </el-table>
      `,


Review comment (suggestion):
```suggestion
      expect(wrapper.find('.el-popper').exists()).toBeFalsy()
```

Code after:
      `,
      data() {
        return {
          testData,
        }
      },
    })
    await doubleWait()
    const emptyCells = wrapper.findAll('.el-table__body-wrapper .empty_cell')
    expect(emptyCells.length).toBeGreaterThan(0)
    for (const cell of emptyCells) {
      const cellElement = cell.find('.cell')
      expect(cellElement.exists()).toBe(true)
      const mockCellRect = vi
        .spyOn(cellElement.element, 'getBoundingClientRect')
        .mockReturnValue({
          width: 100,
          height: 30,
        } as DOMRect)
      await cell.trigger('mouseenter')
      await rAF()
      expect(wrapper.find('.el-popper').exists()).toBeFalsy()
      mockCellRect.mockRestore()
    }
    mockRangeRect.mockRestore()
    wrapper.unmount()
  })

  it('should cleanup tooltip dynamically', async () => {
    const mockRangeRect = vi
      .spyOn(Range.prototype, 'getBoundingClientRect')
      .mockReturnValue({
        width: 150,
        height: 30,
      } as DOMRect)

    const wrapper = mount({
      components: {
        ElTable,
        ElTableColumn,
      },
      template: `
        <el-table :data="testData">
          <el-table-column :show-overflow-tooltip="showOverflowTooltip" class-name="overflow_tooltip" prop="name" label="name"/>
        </el-table>
      `,

      data() {
        return {
          testData: getTestData(),
          showOverflowTooltip: true,
Repository: element-plus/element-plus
File: packages/components/tooltip/src/content.vue (Vue)

Code before:
const {
  controlled,
  id,
  open,
  trigger,
  onClose,
  onOpen,
  onShow,
  onHide,
  onBeforeShow,
  onBeforeHide,
} = inject(TOOLTIP_INJECTION_KEY, undefined)!
const transitionClass = computed(() => {
  return props.transition || `${ns.namespace.value}-fade-in-linear`
})
const persistentRef = computed(() => {
  // For testing, we would always want the content to be rendered
  // to the DOM, so we need to return true here.
  if (typeof process === 'undefined') {
    return true
  }
  if (
    process.env.NODE_ENV === 'test' &&
    !process?.env.RUN_TEST_WITH_PERSISTENT
  ) {
    return true
  }
  return props.persistent
})

onBeforeUnmount(() => {
  stopHandle?.()
})

const shouldRender = computed(() => {
  return unref(persistentRef) ? true : unref(open)
})

const shouldShow = computed(() => {
  return props.disabled ? false : unref(open)
})

const appendTo = computed(() => {
  return props.appendTo || selector.value
})

const contentStyle = computed(() => props.style ?? {})

const ariaHidden = ref(true)

const onTransitionLeave = () => {

Review comment (suggestion):
I believe that if the `process` does not exist, the original logic should be followed instead of directly returning `true`.
```ts
if (
  typeof process !== 'undefined'
  && ...
  && ...
)
```

Code after:
const {
  controlled,
  id,
  open,
  trigger,
  onClose,
  onOpen,
  onShow,
  onHide,
  onBeforeShow,
  onBeforeHide,
} = inject(TOOLTIP_INJECTION_KEY, undefined)!
const transitionClass = computed(() => {
  return props.transition || `${ns.namespace.value}-fade-in-linear`
})
const persistentRef = computed(() => {
  // For testing, we would always want the content to be rendered
  // to the DOM, so we need to return true here.
  if (typeof process !== 'undefined') {
    if (
      process.env.NODE_ENV === 'test' &&
      !process.env.RUN_TEST_WITH_PERSISTENT
    ) {
      return true
    }
  }
  return props.persistent
})

onBeforeUnmount(() => {
  stopHandle?.()
})

const shouldRender = computed(() => {
  return unref(persistentRef) ? true : unref(open)
})

const shouldShow = computed(() => {
  return props.disabled ? false : unref(open)
})

const appendTo = computed(() => {
  return props.appendTo || selector.value
})

const contentStyle = computed(() => props.style ?? {})

const ariaHidden = ref(true)

const onTransitionLeave = () => {
  onHide()
Repository: element-plus/element-plus
File: packages/utils/error.ts (TypeScript)

Code before:
import { isString } from './types'

class ElementPlusError extends Error {
  constructor(m: string) {
    super(m)
    this.name = 'ElementPlusError'
  }
}

export function throwError(scope: string, m: string): never {
  throw new ElementPlusError(`[${scope}] ${m}`)
}

export function debugWarn(err: Error): void
export function debugWarn(scope: string, message: string): void
export function debugWarn(scope: string | Error, message?: string): void {
  if (process.env.NODE_ENV !== 'production') {
    const error: Error = isString(scope)
      ? new ElementPlusError(`[${scope}] ${message}`)
      : scope
    // eslint-disable-next-line no-console
    console.warn(error)
  }
}


Review comment (suggestion):
```suggestion
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
```
This should also be added; otherwise, the error message "process does not exist" might still occur.

Code after:
import { isString } from './types'

class ElementPlusError extends Error {
  constructor(m: string) {
    super(m)
    this.name = 'ElementPlusError'
  }
}

export function throwError(scope: string, m: string): never {
  throw new ElementPlusError(`[${scope}] ${m}`)
}

export function debugWarn(err: Error): void
export function debugWarn(scope: string, message: string): void
export function debugWarn(scope: string | Error, message?: string): void {
  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {
    const error: Error = isString(scope)
      ? new ElementPlusError(`[${scope}] ${message}`)
      : scope
    // eslint-disable-next-line no-console
    console.warn(error)
  }
}
Repository: element-plus/element-plus
File: packages/components/input-tag/src/input-tag.vue (Vue)

Code before:
  dropIndicatorRef,
  showDropIndicator,
  handleDragStart,
  handleDragOver,
  handleDragEnd,
} = useDragTag({ wrapperRef, handleDragged, afterDragged: focus })
const {
  ns,
  nsInput,
  containerKls,
  containerStyle,
  innerKls,
  showClear,
  showSuffix,
  tagStyle,
} = useInputTagDom({
  props,
  hovering,
  isFocused,
  inputValue,
  disabled,
  size,
  validateState,
  validateIcon,
  needStatusIcon,
  wrapperRef,
  collapseItemRef,
})

defineExpose({
  focus,
  blur,
})
</script>


Review comment (suggestion):
wrapperRef is already declared in `useInputTagDom`.
```suggestion
```

Code after:
  showDropIndicator,
  handleDragStart,
  handleDragOver,
  handleDragEnd,
} = useDragTag({ wrapperRef, handleDragged, afterDragged: focus })
const {
  ns,
  nsInput,
  containerKls,
  containerStyle,
  innerKls,
  showClear,
  showSuffix,
  tagStyle,
  collapseItemRef,
  innerRef,
} = useInputTagDom({
  props,
  hovering,
  isFocused,
  inputValue,
  disabled,
  size,
  validateState,
  validateIcon,
  needStatusIcon,
})

defineExpose({
  focus,
  blur,
})
</script>