refactor(components): [breadcrumb] switch to script-setup syntax (#6073)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

build/type-safe.json

@@ -7,6 +7,8 @@
   "packages/components/backtop/",
   "packages/components/badge/",
   "packages/components/base/",
+  "packages/components/breadcrumb/",
+  "packages/components/breadcrumb-item/",
   "packages/components/button/",
   "packages/components/button-group/",
   "packages/components/card/",

packages/components/breadcrumb/__tests__/breadcrumb.spec.ts

@@ -1,65 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { Check } from '@element-plus/icons-vue'
-import Breadcrumb from '../src/breadcrumb.vue'
-import BreadcrumbItem from '../src/breadcrumb-item.vue'
-
-const _mount = (template: string) =>
-  mount(
-    {
-      components: {
-        'el-breadcrumb': Breadcrumb,
-        'el-breadcrumb-item': BreadcrumbItem,
-      },
-      data() {
-        return {
-          Check,
-        }
-      },
-      template,
-    },
-    {
-      global: {
-        provide: {
-          breadcrumb: {},
-        },
-      },
-    }
-  )
-
-describe('Breadcrumb.vue', () => {
-  test('separator', () => {
-    const wrapper = _mount(`
-      <el-breadcrumb separator="?">
-        <el-breadcrumb-item>A</el-breadcrumb-item>
-      </el-breadcrumb>
-    `)
-    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('?')
-  })
-
-  test('separatorIcon', () => {
-    const wrapper = _mount(
-      `
-      <el-breadcrumb :separatorIcon="Check">
-        <el-breadcrumb-item>A</el-breadcrumb-item>
-      </el-breadcrumb>
-    `
-    )
-    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
-    expect(wrapper.findComponent(Check).exists()).toBe(true)
-  })
-
-  test('to', () => {
-    const wrapper = _mount(`
-      <el-breadcrumb separator="?" :separatorIcon="Check">
-        <el-breadcrumb-item to="/index">A</el-breadcrumb-item>
-      </el-breadcrumb>
-    `)
-    expect(wrapper.find('.el-breadcrumb__inner').classes()).toContain('is-link')
-  })
-
-  test('single', () => {
-    const wrapper = _mount('<el-breadcrumb-item>A</el-breadcrumb-item>')
-    expect(wrapper.find('.el-breadcrumb__inner').text()).toBe('A')
-    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
-  })
-})

packages/components/breadcrumb/__tests__/breadcrumb.spec.tsx

@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils'
+import { Check } from '@element-plus/icons-vue'
+import Breadcrumb from '../src/breadcrumb.vue'
+import BreadcrumbItem from '../src/breadcrumb-item.vue'
+import type { VNode } from 'vue'
+
+const _mount = (render: () => VNode) =>
+  mount(render, {
+    global: {
+      provide: {
+        breadcrumb: {},
+      },
+    },
+  })
+
+describe('Breadcrumb.vue', () => {
+  test('separator', () => {
+    const wrapper = _mount(() => (
+      <Breadcrumb separator="?">
+        <BreadcrumbItem>A</BreadcrumbItem>
+      </Breadcrumb>
+    ))
+    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('?')
+  })
+
+  test('separatorIcon', () => {
+    const wrapper = _mount(() => (
+      <Breadcrumb separatorIcon={Check}>
+        <BreadcrumbItem>A</BreadcrumbItem>
+      </Breadcrumb>
+    ))
+    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
+    expect(wrapper.findComponent(Check).exists()).toBe(true)
+  })
+
+  test('to', () => {
+    const wrapper = _mount(() => (
+      <Breadcrumb separator="?" separatorIcon={Check}>
+        <BreadcrumbItem to="/index">A</BreadcrumbItem>
+      </Breadcrumb>
+    ))
+    expect(wrapper.find('.el-breadcrumb__inner').classes()).toContain('is-link')
+  })
+
+  test('single', () => {
+    const wrapper = _mount(() => <BreadcrumbItem>A</BreadcrumbItem>)
+    expect(wrapper.find('.el-breadcrumb__inner').text()).toBe('A')
+    expect(wrapper.find('.el-breadcrumb__separator').text()).toBe('')
+  })
+})

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -12,54 +12,35 @@
   </span>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  inject,
-  ref,
-  onMounted,
-  getCurrentInstance,
-} from 'vue'
+<script lang="ts" setup>
+import { inject, ref, onMounted, getCurrentInstance } from 'vue'
 import ElIcon from '@element-plus/components/icon'
-import { elBreadcrumbKey } from '@element-plus/tokens'
+import { breadcrumbKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import { breadcrumbItemProps } from './breadcrumb-item'
 
 import type { Router } from 'vue-router'
 
-const COMPONENT_NAME = 'ElBreadcrumbItem'
+defineOptions({
+  name: 'ElBreadcrumbItem',
+})
 
-export default defineComponent({
-  name: COMPONENT_NAME,
+const props = defineProps(breadcrumbItemProps)
 
-  components: {
-    ElIcon,
-  },
+const instance = getCurrentInstance()!
+const router = instance.appContext.config.globalProperties.$router as Router
+const parent = inject(breadcrumbKey, undefined)
+const ns = useNamespace('breadcrumb')
 
-  props: breadcrumbItemProps,
+const { separator, separatorIcon } = parent ?? {}
 
-  setup(props) {
-    const instance = getCurrentInstance()!
-    const router = instance.appContext.config.globalProperties.$router as Router
-    const parent = inject(elBreadcrumbKey, undefined)
-    const ns = useNamespace('breadcrumb')
+const link = ref<HTMLSpanElement>()
 
-    const link = ref<HTMLSpanElement>()
-
-    onMounted(() => {
-      link.value!.setAttribute('role', 'link')
-      link.value!.addEventListener('click', () => {
-        if (!props.to || !router) return
-        props.replace ? router.replace(props.to) : router.push(props.to)
-      })
-    })
-
-    return {
-      ns,
-      link,
-      separator: parent?.separator,
-      separatorIcon: parent?.separatorIcon,
-    }
-  },
+onMounted(() => {
+  link.value!.setAttribute('role', 'link')
+  link.value!.addEventListener('click', () => {
+    if (!props.to || !router) return
+    props.replace ? router.replace(props.to) : router.push(props.to)
+  })
 })
 </script>

packages/components/breadcrumb/src/breadcrumb.vue

@@ -9,34 +9,28 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, provide, ref, onMounted } from 'vue'
-import { elBreadcrumbKey } from '@element-plus/tokens'
+<script lang="ts" setup>
+import { provide, ref, onMounted } from 'vue'
+import { breadcrumbKey } from '@element-plus/tokens'
 
 import { useNamespace } from '@element-plus/hooks'
 import { breadcrumbProps } from './breadcrumb'
 
-export default defineComponent({
+defineOptions({
   name: 'ElBreadcrumb',
-  props: breadcrumbProps,
+})
 
-  setup(props) {
-    const ns = useNamespace('breadcrumb')
-    const breadcrumb = ref<HTMLDivElement>()
+const props = defineProps(breadcrumbProps)
 
-    provide(elBreadcrumbKey, props)
+const ns = useNamespace('breadcrumb')
+const breadcrumb = ref<HTMLDivElement>()
 
-    onMounted(() => {
-      const items = breadcrumb.value!.querySelectorAll(`.${ns.e('item')}`)
-      if (items.length) {
-        items[items.length - 1].setAttribute('aria-current', 'page')
-      }
-    })
+provide(breadcrumbKey, props)
 
-    return {
-      ns,
-      breadcrumb,
-    }
-  },
+onMounted(() => {
+  const items = breadcrumb.value!.querySelectorAll(`.${ns.e('item')}`)
+  if (items.length) {
+    items[items.length - 1].setAttribute('aria-current', 'page')
+  }
 })
 </script>

packages/tokens/breadcrumb.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey } from 'vue'
 import type { BreadcrumbProps } from '@element-plus/components/breadcrumb'
 
-export const elBreadcrumbKey: InjectionKey<BreadcrumbProps> =
-  Symbol('elBreadcrumbKey')
+export const breadcrumbKey: InjectionKey<BreadcrumbProps> =
+  Symbol('breadcrumbKey')