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

Code before:
   */
  autofocus?: boolean
  /**
   * @description same as `id` in native input
   */
  id?: string
  /**
   * @description same as `tabindex` in native input
   */
  tabindex?: string | number
  /**
   * @description same as `maxlength` in native input
   */
  maxlength?: string | number
  /**
   * @description same as `minlength` in native input
   */
  minlength?: string | number
  /**
   * @description placeholder of input
   */
  placeholder?: string
  /**
   * @description native input autocomplete
   */
  autocomplete?: string
  /**
   * @description whether to save the input value when the input loses focus
   */
  saveOnBlur?: boolean
  /**
   * @description whether to collapse tags to a text
   */
  collapseTags?: boolean
  /**
   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
   */
  collapseTagsTooltip?: boolean
  /**
   * @description the max tags number to be shown. To use this, `collapse-tags` must be true
   */
  maxCollapseTags?: number
  /**
   * @description native `aria-label` attribute
   */
  ariaLabel?: string
}

/**
 * @deprecated Removed after 3.0.0, Use `InputTagProps` instead.
 */

Review comment (suggestion):
```suggestion
  autocomplete?: HTMLInputElement['autocomplete']
```

Code after:
   */
  autofocus?: boolean
  /**
   * @description same as `id` in native input
   */
  id?: string
  /**
   * @description same as `tabindex` in native input
   */
  tabindex?: string | number
  /**
   * @description same as `maxlength` in native input
   */
  maxlength?: string | number
  /**
   * @description same as `minlength` in native input
   */
  minlength?: string | number
  /**
   * @description placeholder of input
   */
  placeholder?: string
  /**
   * @description native input autocomplete
   * - When the number of literal types in a union exceeds 315, the TS2590 error occurs. see: https://github.com/vuejs/core/issues/10514
   */
  autocomplete?: string // HTMLInputElement['autocomplete']
  /**
   * @description whether to save the input value when the input loses focus
   */
  saveOnBlur?: boolean
  /**
   * @description whether to collapse tags to a text
   */
  collapseTags?: boolean
  /**
   * @description whether show all selected tags when mouse hover text of collapse-tags. To use this, `collapse-tags` must be true
   */
  collapseTagsTooltip?: boolean
  /**
   * @description the max tags number to be shown. To use this, `collapse-tags` must be true
   */
  maxCollapseTags?: number
  /**
   * @description native `aria-label` attribute
   */
  ariaLabel?: string
}

/**
 * @deprecated Removed after 3.0.0, Use `InputTagProps` instead.
Repository: element-plus/element-plus
File: packages/components/row/src/row.ts (TypeScript)

Code before:

export const RowAlign = ['top', 'middle', 'bottom'] as const

export interface RowProps {
  /**
   * @description custom element tag
   */
  tag?: string
  /**
   * @description grid spacing
   */
  gutter?: number
  /**
   * @description horizontal alignment of flex layout
   */
  justify?: (typeof RowJustify)[number]
  /**
   * @description vertical alignment of flex layout
   */
  align?: (typeof RowAlign)[number]
}

export const rowProps = buildProps({
  /**
   * @description custom element tag
   */
  tag: {
    type: String,
    default: 'div',
  },
  /**
   * @description grid spacing
   */
  gutter: {
    type: Number,
    default: 0,
  },
  /**
   * @description horizontal alignment of flex layout
   */
  justify: {
    type: String,
    values: RowJustify,
    default: 'start',
  },
  /**
   * @description vertical alignment of flex layout
   */
  align: {
    type: String,
    values: RowAlign,

Review comment (suggestion):
```suggestion
/**
 * @deprecated Removed after 3.0.0, Use `RowProps` instead.
 */
export const rowProps = buildProps({
```

Code after:

export const RowAlign = ['top', 'middle', 'bottom'] as const

export interface RowProps {
  /**
   * @description custom element tag
   */
  tag?: string
  /**
   * @description grid spacing
   */
  gutter?: number
  /**
   * @description horizontal alignment of flex layout
   */
  justify?: (typeof RowJustify)[number]
  /**
   * @description vertical alignment of flex layout
   */
  align?: (typeof RowAlign)[number]
}

/**
 * @deprecated Removed after 3.0.0, Use `RowProps` instead.
 */
export const rowProps = buildProps({
  /**
   * @description custom element tag
   */
  tag: {
    type: String,
    default: 'div',
  },
  /**
   * @description grid spacing
   */
  gutter: {
    type: Number,
    default: 0,
  },
  /**
   * @description horizontal alignment of flex layout
   */
  justify: {
    type: String,
    values: RowJustify,
    default: 'start',
  },
  /**
   * @description vertical alignment of flex layout
   */
Repository: element-plus/element-plus
File: packages/components/collapse/src/collapse-item.vue (Vue)

Code before:
        :aria-labelledby="scopedHeadId"
      >
        <div :class="itemContentKls">
          <slot />
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import ElCollapseTransition from '@element-plus/components/collapse-transition'
import ElIcon from '@element-plus/components/icon'
import { collapseItemProps } from './collapse-item'
import { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'

defineOptions({
  name: 'ElCollapseItem',
})

const props = defineProps(collapseItemProps)
const {
  focusing,
  id,
  isActive,
  handleFocus,
  handleHeaderClick,
  handleEnterClick,
} = useCollapseItem(props)

const {
  arrowKls,
  headKls,
  rootKls,
  itemTitleKls,
  itemWrapperKls,
  itemContentKls,
  scopedContentId,
  scopedHeadId,
} = useCollapseItemDOM(props, { focusing, isActive, id })

defineExpose({
  /** @description current collapse-item whether active */
  isActive,
})
</script>


Review comment (suggestion):
```suggestion
  icon: markRaw(ArrowRight),
  name: undefined,
```

Code after:
        :aria-labelledby="scopedHeadId"
      >
        <div :class="itemContentKls">
          <slot />
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script lang="ts" setup>
import { markRaw } from 'vue'
import ElCollapseTransition from '@element-plus/components/collapse-transition'
import ElIcon from '@element-plus/components/icon'
import { ArrowRight } from '@element-plus/icons-vue'
import { useCollapseItem, useCollapseItemDOM } from './use-collapse-item'

import type { CollapseItemProps } from './collapse-item'

defineOptions({
  name: 'ElCollapseItem',
})

const props = withDefaults(defineProps<CollapseItemProps>(), {
  title: '',
  icon: markRaw(ArrowRight),
})
const {
  focusing,
  id,
  isActive,
  handleFocus,
  handleHeaderClick,
  handleEnterClick,
} = useCollapseItem(props)

const {
  arrowKls,
  headKls,
  rootKls,
  itemTitleKls,
  itemWrapperKls,
  itemContentKls,
  scopedContentId,
  scopedHeadId,
} = useCollapseItemDOM(props, { focusing, isActive, id })

defineExpose({
  /** @description current collapse-item whether active */
  isActive,
})
Repository: element-plus/element-plus
File: packages/components/menu/src/menu-item.ts (TypeScript)

Code before:
import {
  buildProps,
  definePropType,
  isArray,
  isString,
} from '@element-plus/utils'

import type { ExtractPublicPropTypes } from 'vue'
import type { RouteLocationRaw } from 'vue-router'
import type { MenuItemRegistered } from './types'

export interface MenuItemProps {
  /**
   * @description unique identification
   */
  index?: string | null
  /**
   * @description Vue Router object
   */
  route?: RouteLocationRaw
  /**
   * @description whether disabled
   */
  disabled?: boolean
}

/**
 * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
 */
export const menuItemProps = buildProps({
  /**
   * @description unique identification
   */
  index: {
    type: definePropType<string | null>([String, null]),
    // will be required in the next major version
    // required: true,
    default: null,
  },
  /**
   * @description Vue Router object
   */

Review comment (suggestion):
```suggestion
   * - will be required in the next major version
   * - required: true
   */
```

Code after:
import {
  buildProps,
  definePropType,
  isArray,
  isString,
} from '@element-plus/utils'

import type { ExtractPublicPropTypes } from 'vue'
import type { RouteLocationRaw } from 'vue-router'
import type { MenuItemRegistered } from './types'

export interface MenuItemProps {
  /**
   * @description unique identification
   * - will be required in the next major version
   * - required: true
   */
  index?: string | null
  /**
   * @description Vue Router object
   */
  route?: RouteLocationRaw
  /**
   * @description whether disabled
   */
  disabled?: boolean
}

/**
 * @deprecated Removed after 3.0.0, Use `MenuItemProps` instead.
 */
export const menuItemProps = buildProps({
  /**
   * @description unique identification
   */
  index: {
    type: definePropType<string | null>([String, null]),
    // will be required in the next major version
    // required: true,
    default: null,
  },
  /**
Repository: element-plus/element-plus
File: packages/components/countdown/src/countdown.ts (TypeScript)

Code before:
  /**
   * @description Sets the suffix of a countdown
   */
  suffix: String,
  /**
   * @description countdown titles
   */
  title: String,
  /**
   * @description target time
   */
  value: {
    type: definePropType<number | Dayjs>([Number, Object]),
    default: 0,
  },
  /**
   * @description Styles countdown values
   */
  valueStyle: {
    type: definePropType<StyleValue>([String, Object, Array]),
  },
} as const)
export type CountdownPropsPublic = ExtractPublicPropTypes<typeof countdownProps>

export const countdownEmits = {
  finish: () => true,
  [CHANGE_EVENT]: (value: number) => isNumber(value),
}
export type CountdownEmits = typeof countdownEmits

export type CountdownInstance = InstanceType<typeof Countdown> & unknown


Review comment (refactor):
```suggestion
/**
 * @deprecated Removed after 3.0.0, Use `CountdownProps` instead.
 */
export type CountdownPropsPublic = ExtractPublicPropTypes<typeof countdownProps>
```

Code after:
  /**
   * @description Sets the suffix of a countdown
   */
  suffix: String,
  /**
   * @description countdown titles
   */
  title: String,
  /**
   * @description target time
   */
  value: {
    type: definePropType<number | Dayjs>([Number, Object]),
    default: 0,
  },
  /**
   * @description Styles countdown values
   */
  valueStyle: {
    type: definePropType<StyleValue>([String, Object, Array]),
  },
} as const)
/**
 * @deprecated Removed after 3.0.0, Use `CountdownProps` instead.
 */
export type CountdownPropsPublic = ExtractPublicPropTypes<typeof countdownProps>

export const countdownEmits = {
  finish: () => true,
  [CHANGE_EVENT]: (value: number) => isNumber(value),
}
export type CountdownEmits = typeof countdownEmits

export type CountdownInstance = InstanceType<typeof Countdown> & unknown
Repository: element-plus/element-plus
File: packages/components/progress/src/progress.vue (Vue)

Code before:
import { ElIcon } from '@element-plus/components/icon'
import {
  Check,
  CircleCheck,
  CircleClose,
  Close,
  WarningFilled,
} from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks'
import { isFunction, isString } from '@element-plus/utils'
import { progressProps } from './progress'

import type { CSSProperties } from 'vue'
import type { ProgressColor } from './progress'

defineOptions({
  name: 'ElProgress',
})

const STATUS_COLOR_MAP: Record<string, string> = {
  success: '#13ce66',
  exception: '#ff4949',
  warning: '#e6a23c',
  default: '#20a0ff',
}

const props = defineProps(progressProps)

const ns = useNamespace('progress')

const barStyle = computed<CSSProperties>(() => {
  const barStyle: CSSProperties = {
    width: `${props.percentage}%`,
    animationDuration: `${props.duration}s`,
  }
  const color = getCurrentColor(props.percentage)
  if (color.includes('gradient')) {
    barStyle.background = color
  } else {
    barStyle.backgroundColor = color
  }
  return barStyle
})

const relativeStrokeWidth = computed(() =>
  ((props.strokeWidth / props.width) * 100).toFixed(1)
)

const radius = computed(() => {
  if (['circle', 'dashboard'].includes(props.type)) {
    return Number.parseInt(

Review comment (suggestion):
i'm not sure whether we should add a custom validation in the code for `pourcentage` or it's useless. 🤔 

Code after:
import { ElIcon } from '@element-plus/components/icon'
import {
  Check,
  CircleCheck,
  CircleClose,
  Close,
  WarningFilled,
} from '@element-plus/icons-vue'
import { useNamespace } from '@element-plus/hooks'
import { isFunction, isString } from '@element-plus/utils'

import type { CSSProperties } from 'vue'
import type { ProgressColor, ProgressProps } from './progress'

defineOptions({
  name: 'ElProgress',
})

const STATUS_COLOR_MAP: Record<string, string> = {
  success: '#13ce66',
  exception: '#ff4949',
  warning: '#e6a23c',
  default: '#20a0ff',
}

const props = withDefaults(defineProps<ProgressProps>(), {
  type: 'line',
  percentage: 0,
  status: '',
  duration: 3,
  strokeWidth: 6,
  strokeLinecap: 'round',
  width: 126,
  showText: true,
  color: '',
  format: (percentage: number): string => `${percentage}%`,
})

const ns = useNamespace('progress')

const barStyle = computed<CSSProperties>(() => {
  const barStyle: CSSProperties = {
    width: `${props.percentage}%`,
    animationDuration: `${props.duration}s`,
  }
  const color = getCurrentColor(props.percentage)
  if (color.includes('gradient')) {
    barStyle.background = color
  } else {
    barStyle.backgroundColor = color
  }
Repository: element-plus/element-plus
File: packages/components/statistic/src/statistic.ts (TypeScript)

Code before:

import type { ExtractPublicPropTypes, StyleValue } from 'vue'
import type { Dayjs } from 'dayjs'
import type Statistic from './statistic.vue'

export type StatisticFormatter = {
  formatter(value: number | Dayjs): string
}['formatter']

export interface StatisticProps {
  /**
   * @description Setting the decimal point
   */
  decimalSeparator?: string
  /**
   * @description Sets the thousandth identifier
   */
  groupSeparator?: string
  /**
   * @description numerical precision
   */
  precision?: number
  /**
   * @description Custom numerical presentation
   */
  formatter?: StatisticFormatter
  /**
   * @description Numerical content
   */
  value?: number | Dayjs
  /**
   * @description Sets the prefix of a number
   */
  prefix?: string
  /**
   * @description  Sets the suffix of a number
   */
  suffix?: string
  /**
   * @description Numeric titles
   */
  title?: string
  /**
   * @description Styles numeric values
   */
  valueStyle?: StyleValue
}

/**
 * @deprecated Removed after 3.0.0, Use `StatisticProps` instead.
 */

Review comment (suggestion):
```suggestion
  formatter?: Function
```
This should not need to be changed.

Code after:

import type { ExtractPublicPropTypes, StyleValue } from 'vue'
import type { Dayjs } from 'dayjs'
import type Statistic from './statistic.vue'

export interface StatisticProps {
  /**
   * @description Setting the decimal point
   */
  decimalSeparator?: string
  /**
   * @description Sets the thousandth identifier
   */
  groupSeparator?: string
  /**
   * @description numerical precision
   */
  precision?: number
  /**
   * @description Custom numerical presentation
   */
  formatter?: (...args: any[]) => string | number
  /**
   * @description Numerical content
   */
  value?: number | Dayjs
  /**
   * @description Sets the prefix of a number
   */
  prefix?: string
  /**
   * @description  Sets the suffix of a number
   */
  suffix?: string
  /**
   * @description Numeric titles
   */
  title?: string
  /**
   * @description Styles numeric values
   */
  valueStyle?: StyleValue
}

/**
 * @deprecated Removed after 3.0.0, Use `StatisticProps` instead.
 */
export const statisticProps = buildProps({
  /**
   * @description Setting the decimal point
   */
Repository: element-plus/element-plus
File: packages/components/transfer/src/transfer.vue (Vue)

Code before:
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { transferEmits } from './transfer'
import {
  useCheckedChange,
  useComputedData,
  useMove,
  usePropsAlias,
} from './composables'
import TransferPanel from './transfer-panel.vue'

import type {
  TransferCheckedState,
  TransferDataItem,
  TransferDirection,
  TransferProps,
} from './transfer'
import type { TransferPanelInstance } from './transfer-panel'

defineOptions({
  name: 'ElTransfer',
})

const props = withDefaults(defineProps<TransferProps>(), {
  data: () => [],
  titles: () => ['', ''],
  buttonTexts: () => ['', ''],
  leftDefaultChecked: () => [],
  rightDefaultChecked: () => [],
  modelValue: () => [],
  format: () => ({}),
  props: () =>
    mutable({
      label: 'label',
      key: 'key',
      disabled: 'disabled',
    }),
  targetOrder: 'original',
  validateEvent: true,
})
const emit = defineEmits(transferEmits)
const slots = useSlots()

const { t } = useLocale()
const ns = useNamespace('transfer')
const { formItem } = useFormItem()

const checkedState = reactive<TransferCheckedState>({
  leftChecked: [],
  rightChecked: [],
})


Review comment (suggestion):
The default value here is problematic and will cause logical changes.
https://github.com/element-plus/element-plus/blob/3dcb61f7173f8d3f14a165476d4f72657d891d4f/packages/components/transfer/src/transfer.vue#L128

Code after:
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { transferEmits } from './transfer'
import {
  useCheckedChange,
  useComputedData,
  useMove,
  usePropsAlias,
} from './composables'
import TransferPanel from './transfer-panel.vue'

import type {
  TransferCheckedState,
  TransferDataItem,
  TransferDirection,
  TransferProps,
} from './transfer'
import type { TransferPanelInstance } from './transfer-panel'

defineOptions({
  name: 'ElTransfer',
})

const props = withDefaults(defineProps<TransferProps>(), {
  data: () => [],
  titles: () => [] as unknown as [string, string],
  buttonTexts: () => [] as unknown as [string, string],
  leftDefaultChecked: () => [],
  rightDefaultChecked: () => [],
  modelValue: () => [],
  format: () => ({}),
  props: () => ({
    label: 'label',
    key: 'key',
    disabled: 'disabled',
  }),
  targetOrder: 'original',
  validateEvent: true,
})
const emit = defineEmits(transferEmits)
const slots = useSlots()

const { t } = useLocale()
const ns = useNamespace('transfer')
const { formItem } = useFormItem()

const checkedState = reactive<TransferCheckedState>({
  leftChecked: [],
  rightChecked: [],
})

const propsAlias = usePropsAlias(props)
Repository: element-plus/element-plus
File: packages/components/transfer/src/transfer.vue (Vue)

Code before:
const { onSourceCheckedChange, onTargetCheckedChange } = useCheckedChange(
  checkedState,
  emit
)

const { addToLeft, addToRight } = useMove(props, checkedState, emit)

const leftPanel = ref<TransferPanelInstance>()
const rightPanel = ref<TransferPanelInstance>()

const clearQuery = (which: TransferDirection) => {
  switch (which) {
    case 'left':
      leftPanel.value!.query = ''
      break
    case 'right':
      rightPanel.value!.query = ''
      break
  }
}

const hasButtonTexts = computed(
  () =>
    props.buttonTexts.length === 2 &&
    props.buttonTexts.every((text) => text !== '')
)

const leftPanelTitle = computed(
  () => props.titles[0] || t('el.transfer.titles.0')
)

const rightPanelTitle = computed(
  () => props.titles[1] || t('el.transfer.titles.1')
)

const panelFilterPlaceholder = computed(
  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')
)

watch(
  () => props.modelValue,
  () => {
    if (props.validateEvent) {
      formItem?.validate?.('change').catch((err) => debugWarn(err))
    }
  }
)

const optionRender = computed(() => (option: TransferDataItem) => {
  if (props.renderContent) return props.renderContent(h, option)


Review comment (suggestion):
I think it would be better not to change the logic, but to address this by adjusting the types instead.

Code after:
  checkedState,
  emit
)

const { addToLeft, addToRight } = useMove(props, checkedState, emit)

const leftPanel = ref<TransferPanelInstance>()
const rightPanel = ref<TransferPanelInstance>()

const clearQuery = (which: TransferDirection) => {
  switch (which) {
    case 'left':
      leftPanel.value!.query = ''
      break
    case 'right':
      rightPanel.value!.query = ''
      break
  }
}

const hasButtonTexts = computed(() => props.buttonTexts.length === 2)

const leftPanelTitle = computed(
  () => props.titles[0] || t('el.transfer.titles.0')
)

const rightPanelTitle = computed(
  () => props.titles[1] || t('el.transfer.titles.1')
)

const panelFilterPlaceholder = computed(
  () => props.filterPlaceholder || t('el.transfer.filterPlaceholder')
)

watch(
  () => props.modelValue,
  () => {
    if (props.validateEvent) {
      formItem?.validate?.('change').catch((err) => debugWarn(err))
    }
  }
)

const optionRender = computed(() => (option: TransferDataItem) => {
  if (props.renderContent) return props.renderContent(h, option)

  const defaultSlotVNodes = (slots.default?.({ option }) || []).filter(
    (node) => node.type !== Comment
  )
  if (defaultSlotVNodes.length) {
    return defaultSlotVNodes
Repository: element-plus/element-plus
File: packages/components/skeleton/src/skeleton-item.ts (TypeScript)

Code before:
import { buildProps } from '@element-plus/utils'

import type SkeletonItem from './skeleton-item.vue'
import type { ExtractPublicPropTypes } from 'vue'

export const SkeletonItemValues = [
  'circle',
  'rect',
  'h1',
  'h3',
  'text',
  'caption',
  'p',
  'image',
  'button',
] as const

export type SkeletonItemValue = (typeof SkeletonItemValues)[number]

export interface SkeletonItemProps {
  /**
   * @description the current rendering skeleton type
   */
  variant?: SkeletonItemValue
}

/**
 * @deprecated Removed after 3.0.0, Use `SkeletonItemProps` instead.
 */
export const skeletonItemProps = buildProps({
  /**

Review comment (suggestion):
If there's no place where the variable is reused, there's no need to declare it separately; you can simply declare the type below.

Code after:
import { buildProps } from '@element-plus/utils'

import type SkeletonItem from './skeleton-item.vue'
import type { ExtractPublicPropTypes } from 'vue'

export interface SkeletonItemProps {
  /**
   * @description the current rendering skeleton type
   */
  variant?:
    | 'circle'
    | 'rect'
    | 'h1'
    | 'h3'
    | 'text'
    | 'caption'
    | 'p'
    | 'image'
    | 'button'
}

/**
 * @deprecated Removed after 3.0.0, Use `SkeletonItemProps` instead.
 */
export const skeletonItemProps = buildProps({
  /**
   * @description the current rendering skeleton type
   */
  variant: {
    type: String,
    values: [