ronantakizawa/codereview-bench huggingface dataset:
Repository: element-plus/element-plus
File: packages/components/button/src/button-group.vue (Vue)

Code before:
<template>
  <div :class="[ns.b('group'), ns.bm('group', props.direction)]">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { provide, reactive, toRef } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { buttonGroupContextKey } from './constants'

import type { ButtonGroupProps } from './button-group'

defineOptions({
  name: 'ElButtonGroup',
})
const props = withDefaults(defineProps<ButtonGroupProps>(), {
  direction: 'horizontal',
})
provide(
  buttonGroupContextKey,
  reactive({
    size: toRef(props, 'size'),
    type: toRef(props, 'type'),
  })
)
const ns = useNamespace('button')
</script>


Review comment (suggestion):
```suggestion
  direction: 'horizontal',
  type: '',
```

Code after:
<template>
  <div :class="[ns.b('group'), ns.bm('group', props.direction)]">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { provide, reactive, toRef } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { buttonGroupContextKey } from './constants'

import type { ButtonGroupProps } from './button-group'

defineOptions({
  name: 'ElButtonGroup',
})
const props = withDefaults(defineProps<ButtonGroupProps>(), {
  direction: 'horizontal',
  type: '',
})
provide(
  buttonGroupContextKey,
  reactive({
    size: toRef(props, 'size'),
    type: toRef(props, 'type'),
  })
)
const ns = useNamespace('button')
</script>
Repository: element-plus/element-plus
File: packages/components/badge/src/badge.vue (Vue)

Code before:
        v-show="!hidden && (content || isDot || $slots.content)"
        :class="[
          ns.e('content'),
          ns.em('content', type),
          ns.is('fixed', !!$slots.default),
          ns.is('dot', isDot),
          ns.is('hide-zero', !showZero && value === 0),
          badgeClass,
        ]"
        :style="style"
      >
        <slot name="content" :value="content">
          {{ content }}
        </slot>
      </sup>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { addUnit, isNumber } from '@element-plus/utils'

import type { BadgeProps } from './badge'
import type { StyleValue } from 'vue'

defineOptions({
  name: 'ElBadge',
})

const props = withDefaults(defineProps<BadgeProps>(), {
  value: '',
  max: 99,
  type: 'danger',
  showZero: true,
  offset: () => [0, 0],
  badgeStyle: () => ({}),
})

const ns = useNamespace('badge')

const content = computed<string>(() => {
  if (props.isDot) return ''
  if (isNumber(props.value) && isNumber(props.max)) {
    return props.max < props.value ? `${props.max}+` : `${props.value}`
  }
  return `${props.value}`
})

const style = computed<StyleValue>(() => {

Review comment (suggestion):
```suggestion
import type { StyleValue } from 'vue'
import type { BadgeProps } from './badge'
```

Code after:
        v-show="!hidden && (content || isDot || $slots.content)"
        :class="[
          ns.e('content'),
          ns.em('content', type),
          ns.is('fixed', !!$slots.default),
          ns.is('dot', isDot),
          ns.is('hide-zero', !showZero && value === 0),
          badgeClass,
        ]"
        :style="style"
      >
        <slot name="content" :value="content">
          {{ content }}
        </slot>
      </sup>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'
import { addUnit, isNumber } from '@element-plus/utils'

import type { StyleValue } from 'vue'
import type { BadgeProps } from './badge'

defineOptions({
  name: 'ElBadge',
})

const props = withDefaults(defineProps<BadgeProps>(), {
  value: '',
  max: 99,
  type: 'danger',
  showZero: true,
  offset: () => [0, 0],
})

const ns = useNamespace('badge')

const content = computed<string>(() => {
  if (props.isDot) return ''
  if (isNumber(props.value) && isNumber(props.max)) {
    return props.max < props.value ? `${props.max}+` : `${props.value}`
  }
  return `${props.value}`
})

const style = computed<StyleValue>(() => {
  return [
Repository: element-plus/element-plus
File: packages/components/breadcrumb/src/breadcrumb-item.vue (Vue)

Code before:
<template>
  <span :class="ns.e('item')">
    <span
      :class="[ns.e('inner'), ns.is('link', !!to)]"
      role="link"
      @click="onClick"
    >
      <slot />
    </span>
    <el-icon v-if="breadcrumbContext?.separatorIcon" :class="ns.e('separator')">
      <component :is="breadcrumbContext.separatorIcon" />
    </el-icon>
    <span v-else :class="ns.e('separator')" role="presentation">
      {{ breadcrumbContext?.separator }}
    </span>
  </span>
</template>

<script lang="ts" setup>
import { getCurrentInstance, inject } from 'vue'
import ElIcon from '@element-plus/components/icon'
import { useNamespace } from '@element-plus/hooks'
import { breadcrumbKey } from './constants'

import type { BreadcrumbItemProps } from './breadcrumb-item'
import type { Router } from 'vue-router'

defineOptions({
  name: 'ElBreadcrumbItem',
})

const props = withDefaults(defineProps<BreadcrumbItemProps>(), {
  to: '',
})

const instance = getCurrentInstance()!
const breadcrumbContext = inject(breadcrumbKey, undefined)
const ns = useNamespace('breadcrumb')

const router = instance.appContext.config.globalProperties.$router as Router

const onClick = () => {
  if (!props.to || !router) return
  props.replace ? router.replace(props.to) : router.push(props.to)
}
</script>


Review comment (suggestion):
```suggestion
import type { Router } from 'vue-router'
import type { BreadcrumbItemProps } from './breadcrumb-item'
```

Code after:
<template>
  <span :class="ns.e('item')">
    <span
      :class="[ns.e('inner'), ns.is('link', !!to)]"
      role="link"
      @click="onClick"
    >
      <slot />
    </span>
    <el-icon v-if="breadcrumbContext?.separatorIcon" :class="ns.e('separator')">
      <component :is="breadcrumbContext.separatorIcon" />
    </el-icon>
    <span v-else :class="ns.e('separator')" role="presentation">
      {{ breadcrumbContext?.separator }}
    </span>
  </span>
</template>

<script lang="ts" setup>
import { getCurrentInstance, inject } from 'vue'
import ElIcon from '@element-plus/components/icon'
import { useNamespace } from '@element-plus/hooks'
import { breadcrumbKey } from './constants'

import type { Router } from 'vue-router'
import type { BreadcrumbItemProps } from './breadcrumb-item'

defineOptions({
  name: 'ElBreadcrumbItem',
})

const props = withDefaults(defineProps<BreadcrumbItemProps>(), {
  to: '',
})

const instance = getCurrentInstance()!
const breadcrumbContext = inject(breadcrumbKey, undefined)
const ns = useNamespace('breadcrumb')

const router = instance.appContext.config.globalProperties.$router as Router

const onClick = () => {
  if (!props.to || !router) return
  props.replace ? router.replace(props.to) : router.push(props.to)
}
</script>
Repository: element-plus/element-plus
File: packages/components/calendar/src/date-table.ts (TypeScript)

Code before:
  const lastDay = date.subtract(1, 'month').endOf('month').date()
  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))
}

export const getMonthDays = (date: Dayjs) => {
  const days = date.daysInMonth()
  return rangeArr(days).map((_, index) => index + 1)
}

export const toNestedArr = (days: CalendarDateCell[]) =>
  rangeArr(days.length / 7).map((index) => {
    const start = index * 7
    return days.slice(start, start + 7)
  })
export interface DateTableProps {
  selectedDay?: Dayjs
  range?: [Dayjs, Dayjs]
  date: Dayjs
  hideHeader?: boolean
}
export const dateTableProps = buildProps({
  selectedDay: {
    type: definePropType<Dayjs>(Object),
  },
  range: {
    type: definePropType<[Dayjs, Dayjs]>(Array),
  },
  date: {
    type: definePropType<Dayjs>(Object),
    required: true,
  },
  hideHeader: {
    type: Boolean,
  },
} as const)
export type DateTablePropsPublic = ExtractPublicPropTypes<typeof dateTableProps>

export const dateTableEmits = {
  pick: (value: Dayjs) => isObject(value),
}
export type DateTableEmits = typeof dateTableEmits


Review comment (suggestion):
Both `select-controler` here and below need to be added with the comment that it will be deprecated in 3.0.

Code after:
  const lastDay = date.subtract(1, 'month').endOf('month').date()
  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))
}

export const getMonthDays = (date: Dayjs) => {
  const days = date.daysInMonth()
  return rangeArr(days).map((_, index) => index + 1)
}

export const toNestedArr = (days: CalendarDateCell[]) =>
  rangeArr(days.length / 7).map((index) => {
    const start = index * 7
    return days.slice(start, start + 7)
  })

export interface DateTableProps {
  selectedDay?: Dayjs
  range?: [Dayjs, Dayjs]
  date: Dayjs
  hideHeader?: boolean
}

/**
 *  @deprecated Removed after 3.0.0, Use `DateTableProps` instead.
 */
export const dateTableProps = buildProps({
  selectedDay: {
    type: definePropType<Dayjs>(Object),
  },
  range: {
    type: definePropType<[Dayjs, Dayjs]>(Array),
  },
  date: {
    type: definePropType<Dayjs>(Object),
    required: true,
  },
  hideHeader: {
    type: Boolean,
  },
} as const)
/**
 *  @deprecated Removed after 3.0.0, Use `DateTableProps` instead.
 */
export type DateTablePropsPublic = ExtractPublicPropTypes<typeof dateTableProps>

export const dateTableEmits = {
  pick: (value: Dayjs) => isObject(value),
}
export type DateTableEmits = typeof dateTableEmits
Repository: element-plus/element-plus
File: packages/components/switch/src/switch.vue (Vue)

Code before:
  useFormDisabled,
  useFormItem,
  useFormItemInputId,
  useFormSize,
} from '@element-plus/components/form'
import { Loading } from '@element-plus/icons-vue'
import {
  CHANGE_EVENT,
  INPUT_EVENT,
  UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { useNamespace } from '@element-plus/hooks'
import { switchEmits } from './switch'

import type { CSSProperties } from 'vue'
import type { SwitchProps } from './switch'

const COMPONENT_NAME = 'ElSwitch'
defineOptions({
  name: COMPONENT_NAME,
})

const props = withDefaults(defineProps<SwitchProps>(), {
  modelValue: false,
  activeText: '',
  inactiveText: '',
  activeValue: true,
  inactiveValue: false,
  name: '',
  validateEvent: true,
  width: '',
})
const emit = defineEmits(switchEmits)

const { formItem } = useFormItem()
const switchSize = useFormSize()
const ns = useNamespace('switch')

const { inputId } = useFormItemInputId(props, {
  formItemContext: formItem,
})

const switchDisabled = useFormDisabled(
  computed(() => {
    if (props.loading) {
      return true
    }
    return undefined
  })
)
const isControlled = ref(props.modelValue !== false)

Review comment (suggestion):
```suggestion
  disabled: undefined,
  activeText: '',
```

Code after:
  useFormDisabled,
  useFormItem,
  useFormItemInputId,
  useFormSize,
} from '@element-plus/components/form'
import { Loading } from '@element-plus/icons-vue'
import {
  CHANGE_EVENT,
  INPUT_EVENT,
  UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { useNamespace } from '@element-plus/hooks'
import { switchEmits } from './switch'

import type { CSSProperties } from 'vue'
import type { SwitchProps } from './switch'

const COMPONENT_NAME = 'ElSwitch'
defineOptions({
  name: COMPONENT_NAME,
})

const props = withDefaults(defineProps<SwitchProps>(), {
  modelValue: false,
  disabled: undefined,
  activeText: '',
  inactiveText: '',
  activeValue: true,
  inactiveValue: false,
  name: '',
  validateEvent: true,
  width: '',
})
const emit = defineEmits(switchEmits)

const { formItem } = useFormItem()
const switchSize = useFormSize()
const ns = useNamespace('switch')

const { inputId } = useFormItemInputId(props, {
  formItemContext: formItem,
})

const switchDisabled = useFormDisabled(
  computed(() => {
    if (props.loading) {
      return true
    }
    return undefined
  })
)
Repository: element-plus/element-plus
File: packages/components/container/src/aside.vue (Vue)

Code before:
<template>
  <aside :class="ns.b()" :style="style">
    <slot />
  </aside>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

export interface AsideProps {
  /**
   * @description width of the side section
   */
  width?: string
}

defineOptions({
  name: 'ElAside',
})
const props = withDefaults(defineProps<AsideProps>(), {})

const ns = useNamespace('aside')
const style = computed(
  () =>
    (props.width ? ns.cssVarBlock({ width: props.width }) : {}) as CSSProperties
)
</script>


Review comment (suggestion):
```suggestion
const props = defineProps<AsideProps>()
```

Code after:
<template>
  <aside :class="ns.b()" :style="style">
    <slot />
  </aside>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

interface AsideProps {
  /**
   * @description width of the side section
   */
  width?: string | null
}

defineOptions({
  name: 'ElAside',
})
const props = withDefaults(defineProps<AsideProps>(), {
  width: null,
})

const ns = useNamespace('aside')
const style = computed(
  () =>
    (props.width ? ns.cssVarBlock({ width: props.width }) : {}) as CSSProperties
)
</script>
Repository: element-plus/element-plus
File: packages/components/container/src/container.vue (Vue)

Code before:
<template>
  <section :class="[ns.b(), ns.is('vertical', isVertical)]">
    <slot />
  </section>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { Component, VNode } from 'vue'

export interface ContainerProps {
  /**
   * @description layout direction for child elements
   */
  direction?: 'horizontal' | 'vertical'
}

defineOptions({
  name: 'ElContainer',
})

const props = withDefaults(defineProps<ContainerProps>(), {})
const slots = useSlots()

const ns = useNamespace('container')

const isVertical = computed(() => {
  if (props.direction === 'vertical') {
    return true
  } else if (props.direction === 'horizontal') {
    return false
  }
  if (slots && slots.default) {
    const vNodes: VNode[] = slots.default()
    return vNodes.some((vNode) => {
      const tag = (vNode.type as Component).name
      return tag === 'ElHeader' || tag === 'ElFooter'
    })
  } else {
    return false
  }
})
</script>


Review comment (suggestion):
```suggestion
const props = defineProps<ContainerProps>()
```

Code after:
<template>
  <section :class="[ns.b(), ns.is('vertical', isVertical)]">
    <slot />
  </section>
</template>

<script lang="ts" setup>
import { computed, useSlots } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { Component, VNode } from 'vue'

interface ContainerProps {
  /**
   * @description layout direction for child elements
   */
  direction?: 'horizontal' | 'vertical'
}

defineOptions({
  name: 'ElContainer',
})

const props = defineProps<ContainerProps>()
const slots = useSlots()

const ns = useNamespace('container')

const isVertical = computed(() => {
  if (props.direction === 'vertical') {
    return true
  } else if (props.direction === 'horizontal') {
    return false
  }
  if (slots && slots.default) {
    const vNodes: VNode[] = slots.default()
    return vNodes.some((vNode) => {
      const tag = (vNode.type as Component).name
      return tag === 'ElHeader' || tag === 'ElFooter'
    })
  } else {
    return false
  }
})
</script>
Repository: element-plus/element-plus
File: packages/components/container/src/footer.vue (Vue)

Code before:
<template>
  <footer :class="ns.b()" :style="style">
    <slot />
  </footer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

export interface FooterProps {
  /**
   * @description height of the footer
   */
  height?: string
}

defineOptions({
  name: 'ElFooter',
})
const props = withDefaults(defineProps<FooterProps>(), {})

const ns = useNamespace('footer')

const style = computed(
  () =>
    (props.height
      ? ns.cssVarBlock({ height: props.height })
      : {}) as CSSProperties
)
</script>


Review comment (suggestion):
```suggestion
const props = defineProps<FooterProps>()
```

Code after:
<template>
  <footer :class="ns.b()" :style="style">
    <slot />
  </footer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

interface FooterProps {
  /**
   * @description height of the footer
   */
  height?: string | null
}

defineOptions({
  name: 'ElFooter',
})
const props = withDefaults(defineProps<FooterProps>(), {
  height: null,
})

const ns = useNamespace('footer')

const style = computed(
  () =>
    (props.height
      ? ns.cssVarBlock({ height: props.height })
      : {}) as CSSProperties
)
</script>
Repository: element-plus/element-plus
File: packages/components/container/src/header.vue (Vue)

Code before:
<template>
  <header :class="ns.b()" :style="style">
    <slot />
  </header>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

export interface HeaderProps {
  /**
   * @description height of the header
   */
  height?: string
}

defineOptions({
  name: 'ElHeader',
})

const props = withDefaults(defineProps<HeaderProps>(), {})

const ns = useNamespace('header')
const style = computed(() => {
  return props.height
    ? (ns.cssVarBlock({
        height: props.height,
      }) as CSSProperties)
    : {}
})
</script>


Review comment (suggestion):
```suggestion
const props = defineProps<HeaderProps>()
```

Code after:
<template>
  <header :class="ns.b()" :style="style">
    <slot />
  </header>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useNamespace } from '@element-plus/hooks'

import type { CSSProperties } from 'vue'

interface HeaderProps {
  /**
   * @description height of the header
   */
  height?: string | null
}

defineOptions({
  name: 'ElHeader',
})

const props = withDefaults(defineProps<HeaderProps>(), {
  height: null,
})

const ns = useNamespace('header')
const style = computed(() => {
  return props.height
    ? (ns.cssVarBlock({
        height: props.height,
      }) as CSSProperties)
    : {}
})
</script>
Repository: element-plus/element-plus
File: packages/components/steps/src/steps.ts (TypeScript)

Code before:
   * @description display direction
   * @default 'horizontal'
   */
  direction?: 'horizontal' | 'vertical'
  /**
   * @description center title and description
   */
  alignCenter?: boolean
  /**
   * @description whether to apply simple theme
   */
  simple?: boolean
  /**
   * @description status of end step
   * @default 'finish'
   */
  finishStatus?: StepsStatus
  /**
   * @description status of current step
   * @default 'process'
   */
  processStatus?: StepsStatus
}

/**
 * @deprecated Removed after 3.0.0, Use `stepsProps` instead.
 */
export const stepsProps = buildProps({
  /**
   * @description the spacing of each step, will be responsive if omitted. Supports percentage.
   */
  space: {
    type: [Number, String],
    default: '',
  },
  /**
   * @description current activation step
   */
  active: {
    type: Number,
    default: 0,
  },
  /**
   * @description display direction
   */
  direction: {
    type: String,
    default: 'horizontal',
    values: ['horizontal', 'vertical'],
  },
  /**

Review comment (suggestion):
```suggestion
 * @deprecated Removed after 3.0.0, Use `StepsProps` instead.
```

Code after:
   * @description display direction
   * @default 'horizontal'
   */
  direction?: 'horizontal' | 'vertical'
  /**
   * @description center title and description
   */
  alignCenter?: boolean
  /**
   * @description whether to apply simple theme
   */
  simple?: boolean
  /**
   * @description status of end step
   * @default 'finish'
   */
  finishStatus?: StepsStatus
  /**
   * @description status of current step
   * @default 'process'
   */
  processStatus?: StepsStatus
}

/**
 * @deprecated Removed after 3.0.0, Use `StepsProps` instead.
 */
export const stepsProps = buildProps({
  /**
   * @description the spacing of each step, will be responsive if omitted. Supports percentage.
   */
  space: {
    type: [Number, String],
    default: '',
  },
  /**
   * @description current activation step
   */
  active: {
    type: Number,
    default: 0,
  },
  /**
   * @description display direction
   */
  direction: {
    type: String,
    default: 'horizontal',
    values: ['horizontal', 'vertical'],
  },
  /**
Repository: element-plus/element-plus
File: packages/components/steps/src/steps.ts (TypeScript)

Code before:
   */
  simple: {
    type: Boolean,
  },
  /**
   * @description status of end step
   */
  finishStatus: {
    type: String,
    values: ['wait', 'process', 'finish', 'error', 'success'],
    default: 'finish',
  },
  /**
   * @description status of current step
   */
  processStatus: {
    type: String,
    values: ['wait', 'process', 'finish', 'error', 'success'],
    default: 'process',
  },
} as const)
export type StepsPropsPublic = ExtractPublicPropTypes<typeof stepsProps>

export const stepsEmits = {
  [CHANGE_EVENT]: (newVal: number, oldVal: number) =>
    [newVal, oldVal].every(isNumber),
}
export type StepsEmits = typeof stepsEmits

export type StepsInstance = InstanceType<typeof Steps> & unknown


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

Code after:
   */
  simple: {
    type: Boolean,
  },
  /**
   * @description status of end step
   */
  finishStatus: {
    type: String,
    values: ['wait', 'process', 'finish', 'error', 'success'],
    default: 'finish',
  },
  /**
   * @description status of current step
   */
  processStatus: {
    type: String,
    values: ['wait', 'process', 'finish', 'error', 'success'],
    default: 'process',
  },
} as const)

/**
 * @deprecated Removed after 3.0.0, Use `StepsProps` instead.
 */
export type StepsPropsPublic = ExtractPublicPropTypes<typeof stepsProps>

export const stepsEmits = {
  [CHANGE_EVENT]: (newVal: number, oldVal: number) =>
    [newVal, oldVal].every(isNumber),
}
export type StepsEmits = typeof stepsEmits

export type StepsInstance = InstanceType<typeof Steps> & unknown