refactor(components): refactor breadcrumb (#3487)

* refactor(components): refactor breadcrumb

* fix

* Revert "fix"

This reverts commit 5e096c5106.

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

@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils'
-import Breadcrumb from '../src/index.vue'
-import BreadcrumbItem from '../src/item.vue'
+import Breadcrumb from '../src/breadcrumb.vue'
+import BreadcrumbItem from '../src/breadcrumb-item.vue'
 
 const _mount = (template: string) =>
   mount(

packages/components/breadcrumb/index.ts

@@ -1,20 +1,13 @@
-import Breadcrumb from './src/index.vue'
-import BreadcrumbItem from './src/item.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Breadcrumb from './src/breadcrumb.vue'
+import BreadcrumbItem from './src/breadcrumb-item.vue'
 
-Breadcrumb.install = (app: App): void => {
-  app.component(Breadcrumb.name, Breadcrumb)
-  app.component(BreadcrumbItem.name, BreadcrumbItem)
-}
-
-Breadcrumb.BreadcrumbItem = BreadcrumbItem
-
-const _Breadcrumb = Breadcrumb as any as SFCWithInstall<typeof Breadcrumb> & {
-  BreadcrumbItem: typeof BreadcrumbItem
-}
-
-export default _Breadcrumb
-export const ElBreadcrumb = _Breadcrumb
+export const ElBreadcrumb = withInstall(Breadcrumb, {
+  BreadcrumbItem,
+})
 export const ElBreadcrumbItem = BreadcrumbItem
+export default ElBreadcrumb
+
+export * from './src/breadcrumb'
+export * from './src/breadcrumb-item'

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

@@ -0,0 +1,16 @@
+import { buildProp } from '@element-plus/utils/props'
+
+import type { ExtractPropTypes } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export const breadcrumbItemProps = {
+  to: buildProp<RouteLocationRaw>({
+    type: [String, Object],
+    default: '',
+  }),
+  replace: {
+    type: Boolean,
+    default: false,
+  },
+} as const
+export type BreadcrumbItemProps = ExtractPropTypes<typeof breadcrumbItemProps>

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

@@ -11,10 +11,10 @@
       v-if="separatorClass"
       class="el-breadcrumb__separator"
       :class="separatorClass"
-    ></i>
-    <span v-else class="el-breadcrumb__separator" role="presentation">{{
-      separator
-    }}</span>
+    />
+    <span v-else class="el-breadcrumb__separator" role="presentation">
+      {{ separator }}
+    </span>
   </span>
 </template>
 
@@ -26,30 +26,28 @@ import {
   onMounted,
   getCurrentInstance,
 } from 'vue'
-import type { PropType } from 'vue'
-import type { IBreadcrumbProps } from './breadcrumb'
+import { elBreadcrumbKey } from '@element-plus/tokens'
+import { breadcrumbItemProps } from './breadcrumb-item'
+
+import type { Router } from 'vue-router'
+
+const COMPONENT_NAME = 'ElBreadcrumbItem'
 
 export default defineComponent({
-  name: 'ElBreadcrumbItem',
-  props: {
-    to: {
-      type: [String, Object] as PropType<string | Record<string, unknown>>,
-      default: '',
-    },
-    replace: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  name: COMPONENT_NAME,
+
+  props: breadcrumbItemProps,
+
   setup(props) {
-    const link = ref(null)
-    const parent = inject<IBreadcrumbProps>('breadcrumb')
-    const instance = getCurrentInstance()
-    const router = instance.appContext.config.globalProperties.$router
+    const instance = getCurrentInstance()!
+    const router = instance.appContext.config.globalProperties.$router as Router
+    const parent = inject(elBreadcrumbKey, undefined)
+
+    const link = ref<HTMLSpanElement>()
 
     onMounted(() => {
-      link.value.setAttribute('role', 'link')
-      link.value.addEventListener('click', () => {
+      link.value!.setAttribute('role', 'link')
+      link.value!.addEventListener('click', () => {
         if (!props.to || !router) return
         props.replace ? router.replace(props.to) : router.push(props.to)
       })

packages/components/breadcrumb/src/breadcrumb.ts

@@ -1,4 +1,13 @@
-export interface IBreadcrumbProps {
-  separator: string
-  separatorClass: string
-}
+import type { ExtractPropTypes } from 'vue'
+
+export const breadcurmbProps = {
+  separator: {
+    type: String,
+    default: '/',
+  },
+  separatorClass: {
+    type: String,
+    default: '',
+  },
+} as const
+export type BreadcrumbProps = ExtractPropTypes<typeof breadcurmbProps>

packages/components/breadcrumb/src/breadcrumb.vue

@@ -11,27 +11,21 @@
 
 <script lang="ts">
 import { defineComponent, provide, ref, onMounted } from 'vue'
-import type { IBreadcrumbProps } from './breadcrumb'
+import { elBreadcrumbKey } from '@element-plus/tokens'
+
+import { breadcurmbProps } from './breadcrumb'
 
 export default defineComponent({
   name: 'ElBreadcrumb',
-  props: {
-    separator: {
-      type: String,
-      default: '/',
-    },
-    separatorClass: {
-      type: String,
-      default: '',
-    },
-  },
-  setup(props) {
-    const breadcrumb = ref(null)
+  props: breadcurmbProps,
 
-    provide<IBreadcrumbProps>('breadcrumb', props)
+  setup(props) {
+    const breadcrumb = ref<HTMLDivElement>()
+
+    provide(elBreadcrumbKey, props)
 
     onMounted(() => {
-      const items = breadcrumb.value.querySelectorAll('.el-breadcrumb__item')
+      const items = breadcrumb.value!.querySelectorAll('.el-breadcrumb__item')
       if (items.length) {
         items[items.length - 1].setAttribute('aria-current', 'page')
       }

packages/tokens/breadcrumb.ts

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

packages/tokens/index.ts

@@ -1,2 +1,3 @@
 export * from './form'
 export * from './button'
+export * from './breadcrumb'