diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx index 7c7ee346e..3caf72ac5 100644 --- a/components/breadcrumb/Breadcrumb.tsx +++ b/components/breadcrumb/Breadcrumb.tsx @@ -1,11 +1,11 @@ -import { inject, cloneVNode, defineComponent, PropType } from 'vue'; +import { cloneVNode, defineComponent, PropType, ExtractPropTypes } from 'vue'; import PropTypes from '../_util/vue-types'; -import { filterEmpty, getComponent, getSlot } from '../_util/props-util'; +import { flattenChildren, getPropsSlot } from '../_util/props-util'; import warning from '../_util/warning'; -import { defaultConfigProvider } from '../config-provider'; import BreadcrumbItem from './BreadcrumbItem'; import Menu from '../menu'; import { Omit, VueNode } from '../_util/type'; +import useConfigInject from '../_util/hooks/useConfigInject'; export interface Route { path: string; @@ -13,11 +13,11 @@ export interface Route { children?: Omit[]; } -const BreadcrumbProps = { +const breadcrumbProps = { prefixCls: PropTypes.string, routes: { type: Array as PropType }, params: PropTypes.any, - separator: PropTypes.VNodeChild, + separator: PropTypes.any, itemRender: { type: Function as PropType< (opt: { route: Route; params: unknown; routes: Route[]; paths: string[] }) => VueNode @@ -25,6 +25,8 @@ const BreadcrumbProps = { }, }; +export type BreadcrumbProps = Partial>; + function getBreadcrumbName(route: Route, params: unknown) { if (!route.breadcrumbName) { return null; @@ -50,34 +52,37 @@ function defaultItemRender(opt: { export default defineComponent({ name: 'ABreadcrumb', - props: BreadcrumbProps, - setup() { - return { - configProvider: inject('configProvider', defaultConfigProvider), - }; - }, - methods: { - getPath(path: string, params: unknown) { + props: breadcrumbProps, + slots: ['separator', 'itemRender'], + setup(props, { slots }) { + const { prefixCls, direction } = useConfigInject('breadcrumb', props); + + const getPath = (path: string, params: unknown) => { path = (path || '').replace(/^\//, ''); Object.keys(params).forEach(key => { path = path.replace(`:${key}`, params[key]); }); return path; - }, + }; - addChildPath(paths: string[], childPath = '', params: unknown) { + const addChildPath = (paths: string[], childPath = '', params: unknown) => { const originalPaths = [...paths]; - const path = this.getPath(childPath, params); + const path = getPath(childPath, params); if (path) { originalPaths.push(path); } return originalPaths; - }, + }; - genForRoutes({ routes = [], params = {}, separator, itemRender = defaultItemRender }: any) { + const genForRoutes = ({ + routes = [], + params = {}, + separator, + itemRender = defaultItemRender, + }: any) => { const paths = []; return routes.map((route: Route) => { - const path = this.getPath(route.path, params); + const path = getPath(route.path, params); if (path) { paths.push(path); @@ -94,7 +99,7 @@ export default defineComponent({ route: child, params, routes, - paths: this.addChildPath(tempPaths, child.path, params), + paths: addChildPath(tempPaths, child.path, params), })} ))} @@ -112,36 +117,41 @@ export default defineComponent({ ); }); - }, - }, - render() { - let crumbs: VueNode[]; - const { prefixCls: customizePrefixCls, routes, params = {}, $slots } = this; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); + }; + return () => { + let crumbs: VueNode[]; - const children = filterEmpty(getSlot(this)); - const separator = getComponent(this, 'separator'); - const itemRender = this.itemRender || $slots.itemRender || defaultItemRender; - if (routes && routes.length > 0) { - // generated by route - crumbs = this.genForRoutes({ - routes, - params, - separator, - itemRender, - }); - } else if (children.length) { - crumbs = children.map((element, index) => { - warning( - typeof element.type === 'object' && - (element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR), - 'Breadcrumb', - "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children", - ); - return cloneVNode(element, { separator, key: index }); - }); - } - return
{crumbs}
; + const { routes, params = {} } = props; + + const children = flattenChildren(getPropsSlot(slots, props)); + const separator = getPropsSlot(slots, props, 'separator') ?? '/'; + + const itemRender = props.itemRender || slots.itemRender || defaultItemRender; + if (routes && routes.length > 0) { + // generated by route + crumbs = genForRoutes({ + routes, + params, + separator, + itemRender, + }); + } else if (children.length) { + crumbs = children.map((element, index) => { + warning( + typeof element.type === 'object' && + (element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR), + 'Breadcrumb', + "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children", + ); + return cloneVNode(element, { separator, key: index }); + }); + } + + const breadcrumbClassName = { + [prefixCls.value]: true, + [`${prefixCls.value}-rtl`]: direction.value === 'rtl', + }; + return
{crumbs}
; + }; }, }); diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx index 423dda1a5..a675e57db 100644 --- a/components/breadcrumb/BreadcrumbItem.tsx +++ b/components/breadcrumb/BreadcrumbItem.tsx @@ -1,31 +1,31 @@ -import { defineComponent, inject } from 'vue'; +import { defineComponent, ExtractPropTypes } from 'vue'; import PropTypes from '../_util/vue-types'; -import { hasProp, getComponent, getSlot } from '../_util/props-util'; -import { defaultConfigProvider } from '../config-provider'; +import { getPropsSlot } from '../_util/props-util'; import DropDown from '../dropdown/dropdown'; import DownOutlined from '@ant-design/icons-vue/DownOutlined'; +import useConfigInject from '../_util/hooks/useConfigInject'; +const breadcrumbItemProps = { + prefixCls: PropTypes.string, + href: PropTypes.string, + separator: PropTypes.any, + overlay: PropTypes.any, +}; + +export type BreadcrumbItemProps = Partial>; export default defineComponent({ name: 'ABreadcrumbItem', __ANT_BREADCRUMB_ITEM: true, - props: { - prefixCls: PropTypes.string, - href: PropTypes.string, - separator: PropTypes.VNodeChild.def('/'), - overlay: PropTypes.VNodeChild, - }, - setup() { - return { - configProvider: inject('configProvider', defaultConfigProvider), - }; - }, - methods: { + props: breadcrumbItemProps, + slots: ['separator', 'overlay'], + setup(props, { slots }) { + const { prefixCls } = useConfigInject('breadcrumb', props); /** * if overlay is have * Wrap a DropDown */ - renderBreadcrumbNode(breadcrumbItem: JSX.Element, prefixCls: string) { - const overlay = getComponent(this, 'overlay'); + const renderBreadcrumbNode = (breadcrumbItem: JSX.Element, prefixCls: string) => { + const overlay = getPropsSlot(slots, props, 'overlay'); if (overlay) { return ( @@ -37,32 +37,29 @@ export default defineComponent({ ); } return breadcrumbItem; - }, - }, - render() { - const { prefixCls: customizePrefixCls } = this; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); - const separator = getComponent(this, 'separator'); - const children = getSlot(this); - let link: JSX.Element; - if (hasProp(this, 'href')) { - link = {children}; - } else { - link = {children}; - } - // wrap to dropDown - link = this.renderBreadcrumbNode(link, prefixCls); - if (children) { - return ( - - {link} - {separator && separator !== '' && ( - {separator} - )} - - ); - } - return null; + }; + + return () => { + const separator = getPropsSlot(slots, props, 'separator') ?? '/'; + const children = getPropsSlot(slots, props); + let link: JSX.Element; + + if (props.href !== undefined) { + link = {children}; + } else { + link = {children}; + } + // wrap to dropDown + link = renderBreadcrumbNode(link, prefixCls.value); + if (children) { + return ( + + {link} + {separator && {separator}} + + ); + } + return null; + }; }, }); diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx index 80f99f8ce..119e2dbbc 100644 --- a/components/breadcrumb/BreadcrumbSeparator.tsx +++ b/components/breadcrumb/BreadcrumbSeparator.tsx @@ -1,31 +1,29 @@ -import { defineComponent, inject } from 'vue'; -import { defaultConfigProvider } from '../config-provider'; +import { defineComponent, ExtractPropTypes } from 'vue'; import PropTypes from '../_util/vue-types'; -import { getSlot } from '../_util/props-util'; +import { flattenChildren } from '../_util/props-util'; +import useConfigInject from '../_util/hooks/useConfigInject'; + +const breadcrumbSeparator = { + prefixCls: PropTypes.string, +}; +export type BreadcrumbSeparator = Partial>; export default defineComponent({ name: 'ABreadcrumbSeparator', __ANT_BREADCRUMB_SEPARATOR: true, inheritAttrs: false, - props: { - prefixCls: PropTypes.string, - }, - setup() { - return { - configProvider: inject('configProvider', defaultConfigProvider), + props: breadcrumbSeparator, + setup(props, { slots, attrs }) { + const { prefixCls } = useConfigInject('breadcrumb', props); + + return () => { + const { separator, class: className, ...restAttrs } = attrs; + const children = flattenChildren(slots.default?.()); + return ( + + {children.length > 0 ? children : '/'} + + ); }; }, - render() { - const { prefixCls: customizePrefixCls } = this; - const { separator, class: className, ...restAttrs } = this.$attrs; - const getPrefixCls = this.configProvider.getPrefixCls; - const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls); - - const children = getSlot(this); - return ( - - {children.length > 0 ? children : '/'} - - ); - }, }); diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.js b/components/breadcrumb/__tests__/Breadcrumb.test.js index f6168468e..4375e885d 100644 --- a/components/breadcrumb/__tests__/Breadcrumb.test.js +++ b/components/breadcrumb/__tests__/Breadcrumb.test.js @@ -107,4 +107,25 @@ describe('Breadcrumb', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + + // https://github.com/ant-design/ant-design/issues/25975 + it('should support Breadcrumb.Item default separator', () => { + const MockComponent = () => ( + + Mock Node + + ); + const wrapper = mount({ + render() { + return ( + + Location + + Application Center + + ); + }, + }); + expect(wrapper.html()).toMatchSnapshot(); + }); }); diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap index cfc921ec2..e0ffda91b 100644 --- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap +++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap @@ -2,8 +2,14 @@ exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
Home/
`; -exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = `
/xxx/yyy/
`; +exports[`Breadcrumb should not display Breadcrumb Item when its children is falsy 1`] = ` +
+ xxx/yyy/ +
+`; exports[`Breadcrumb should render a menu 1`] = `
home/first/second/
`; +exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
Location/Mock Node/Application Center/
`; + exports[`Breadcrumb should support custom attribute 1`] = `
xxx/yyy/
`; diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts index bb636d694..01f3c0f2a 100644 --- a/components/breadcrumb/index.ts +++ b/components/breadcrumb/index.ts @@ -3,6 +3,10 @@ import Breadcrumb from './Breadcrumb'; import BreadcrumbItem from './BreadcrumbItem'; import BreadcrumbSeparator from './BreadcrumbSeparator'; +export { BreadcrumbProps } from './Breadcrumb'; +export { BreadcrumbItemProps } from './BreadcrumbItem'; +export { BreadcrumbSeparator } from './BreadcrumbSeparator'; + Breadcrumb.Item = BreadcrumbItem; Breadcrumb.Separator = BreadcrumbSeparator; diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less index 1777e3de0..52bba1202 100644 --- a/components/breadcrumb/style/index.less +++ b/components/breadcrumb/style/index.less @@ -38,7 +38,8 @@ } &-link { - > .@{iconfont-css-prefix} + span { + > .@{iconfont-css-prefix} + span, + > .@{iconfont-css-prefix} + a { margin-left: 4px; } } @@ -49,3 +50,5 @@ } } } + +@import './rtl'; diff --git a/components/breadcrumb/style/rtl.less b/components/breadcrumb/style/rtl.less new file mode 100644 index 000000000..c1141c993 --- /dev/null +++ b/components/breadcrumb/style/rtl.less @@ -0,0 +1,29 @@ +.@{breadcrumb-prefix-cls} { + &-rtl { + .clearfix(); + direction: rtl; + + > span { + float: right; + } + } + + &-link { + > .@{iconfont-css-prefix} + span, + > .@{iconfont-css-prefix} + a { + .@{breadcrumb-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } + } + } + + &-overlay-link { + > .@{iconfont-css-prefix} { + .@{breadcrumb-prefix-cls}-rtl & { + margin-right: 4px; + margin-left: 0; + } + } + } +} diff --git a/components/vc-mentions/src/DropdownMenu.jsx b/components/vc-mentions/src/DropdownMenu.jsx index b525e48fa..d7934e202 100644 --- a/components/vc-mentions/src/DropdownMenu.jsx +++ b/components/vc-mentions/src/DropdownMenu.jsx @@ -1,10 +1,8 @@ -import Menu from '../../menu'; +import Menu, { Item as MenuItem } from '../../menu'; import PropTypes from '../../_util/vue-types'; import { OptionProps } from './Option'; import { inject } from 'vue'; -const MenuItem = Menu.Item; - function noop() {} export default { name: 'DropdownMenu', diff --git a/examples/index.js b/examples/index.js index 2eac35440..0273e0218 100644 --- a/examples/index.js +++ b/examples/index.js @@ -1,6 +1,7 @@ import '@babel/polyfill'; import 'ant-design-vue/style'; import { createApp, version } from 'vue'; +import { createRouter, createWebHistory } from 'vue-router'; import App from './App.vue'; import antd from 'ant-design-vue/index.ts'; @@ -9,9 +10,16 @@ console.log('Vue version: ', version); const basic = (_, { slots }) => { return slots && slots.default && slots.default(); }; + +const router = createRouter({ + history: createWebHistory(), + fallback: false, + routes: [], +}); const app = createApp(App); +app.use(router); app - .component('demo-sort', basic) + .component('DemoSort', basic) .component('md', basic) .component('api', basic) .component('CN', basic) diff --git a/v2-doc b/v2-doc index 6819090fb..0f6d531d0 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 6819090fbcc94b248bc761d5f26162f29c04b2ef +Subproject commit 0f6d531d088d5283250c8cec1c7e8be0e0d36a36