feat: update breadcrumb (#2389)

* feat: update breadcrumb

* fix: slots

components/breadcrumb/Breadcrumb.jsx

@@ -1,6 +1,6 @@
+import { inject, cloneVNode } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { cloneElement } from '../_util/vnode';
+import { filterEmpty, getComponent, getSlotOptions, getSlot } from '../_util/props-util';
-import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/props-util';
 import warning from '../_util/warning';
 import { ConfigConsumerProps } from '../config-provider';
 import BreadcrumbItem from './BreadcrumbItem';
@@ -35,8 +35,10 @@ function getBreadcrumbName(route, params) {
 export default {
   name: 'ABreadcrumb',
   props: BreadcrumbProps,
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
     defaultItemRender({ route, params, routes, paths }) {
@@ -103,13 +105,13 @@ export default {
   },
   render() {
     let crumbs;
-    const { prefixCls: customizePrefixCls, routes, params = {}, $slots, $scopedSlots } = this;
+    const { prefixCls: customizePrefixCls, routes, params = {}, $slots } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
 
-    const children = filterEmpty($slots.default);
+    const children = filterEmpty(getSlot(this));
-    const separator = getComponentFromProp(this, 'separator');
+    const separator = getComponent(this, 'separator');
-    const itemRender = this.itemRender || $scopedSlots.itemRender || this.defaultItemRender;
+    const itemRender = this.itemRender || $slots.itemRender || this.defaultItemRender;
     if (routes && routes.length > 0) {
       // generated by route
       crumbs = this.genForRoutes({
@@ -126,10 +128,7 @@ export default {
           'Breadcrumb',
           "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
         );
-        return cloneElement(element, {
+        return cloneVNode(element, { separator, key: index });
-          props: { separator },
-          key: index,
-        });
       });
     }
     return <div class={prefixCls}>{crumbs}</div>;

components/breadcrumb/BreadcrumbItem.jsx

@@ -1,5 +1,6 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { hasProp, getComponentFromProp } from '../_util/props-util';
+import { hasProp, getComponent } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import DropDown from '../dropdown/dropdown';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
@@ -13,8 +14,10 @@ export default {
     separator: PropTypes.any.def('/'),
     overlay: PropTypes.any,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
     /**
@@ -22,7 +25,7 @@ export default {
      * Wrap a DropDown
      */
     renderBreadcrumbNode(breadcrumbItem, prefixCls) {
-      const overlay = getComponentFromProp(this, 'overlay');
+      const overlay = getComponent(this, 'overlay');
       if (overlay) {
         return (
           <DropDown overlay={overlay} placement="bottomCenter">
@@ -40,8 +43,8 @@ export default {
     const { prefixCls: customizePrefixCls, $slots } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-    const separator = getComponentFromProp(this, 'separator');
+    const separator = getComponent(this, 'separator');
-    const children = $slots.default;
+    const children = $slots.default && $slots.default();
     let link;
     if (hasProp(this, 'href')) {
       link = <a class={`${prefixCls}-link`}>{children}</a>;

components/breadcrumb/BreadcrumbSeparator.jsx

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import { ConfigConsumerProps } from '../config-provider';
 import PropTypes from '../_util/vue-types';
 
@@ -7,15 +8,17 @@ export default {
   props: {
     prefixCls: PropTypes.string,
   },
-  inject: {
+  setup() {
-    configProvider: { default: () => ConfigConsumerProps },
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   render() {
     const { prefixCls: customizePrefixCls, $slots } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
 
-    const children = $slots.default;
+    const children = $slots.default && $slots.default();
     return <span class={`${prefixCls}-separator`}>{children || '/'}</span>;
   },
 };

components/breadcrumb/index.js

@@ -1,17 +1,15 @@
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
-import Base from '../base';
 
 Breadcrumb.Item = BreadcrumbItem;
 Breadcrumb.Separator = BreadcrumbSeparator;
 
 /* istanbul ignore next */
-Breadcrumb.install = function(Vue) {
+Breadcrumb.install = function(app) {
-  Vue.use(Base);
+  app.component(Breadcrumb.name, Breadcrumb);
-  Vue.component(Breadcrumb.name, Breadcrumb);
+  app.component(BreadcrumbItem.name, BreadcrumbItem);
-  Vue.component(BreadcrumbItem.name, BreadcrumbItem);
+  app.component(BreadcrumbSeparator.name, BreadcrumbSeparator);
-  Vue.component(BreadcrumbSeparator.name, BreadcrumbSeparator);
 };
 
 export default Breadcrumb;

examples/index.js

@@ -2,6 +2,7 @@ import '@babel/polyfill';
 import { createApp } from 'vue';
 import App from './App.vue';
 import Avatar from 'ant-design-vue/avatar';
+import Breadcrumb from 'ant-design-vue/breadcrumb';
 import Button from 'ant-design-vue/button';
 import Comment from 'ant-design-vue/comment';
 import Drawer from 'ant-design-vue/drawer';
@@ -20,6 +21,7 @@ import 'ant-design-vue/style.js';
 
 createApp(App)
   .use(Avatar)
+  .use(Breadcrumb)
   .use(Button)
   .use(Comment)
   .use(ConfigProvider)