Breadcrumb.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.breadcrumbProps = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
  10. var _propsUtil = require("../_util/props-util");
  11. var _warning = _interopRequireDefault(require("../_util/warning"));
  12. var _BreadcrumbItem = _interopRequireDefault(require("./BreadcrumbItem"));
  13. var _menu = _interopRequireDefault(require("../menu"));
  14. var _useConfigInject = _interopRequireDefault(require("../config-provider/hooks/useConfigInject"));
  15. var _style = _interopRequireDefault(require("./style"));
  16. const breadcrumbProps = () => ({
  17. prefixCls: String,
  18. routes: {
  19. type: Array
  20. },
  21. params: _vueTypes.default.any,
  22. separator: _vueTypes.default.any,
  23. itemRender: {
  24. type: Function
  25. }
  26. });
  27. exports.breadcrumbProps = breadcrumbProps;
  28. function getBreadcrumbName(route, params) {
  29. if (!route.breadcrumbName) {
  30. return null;
  31. }
  32. const paramsKeys = Object.keys(params).join('|');
  33. const name = route.breadcrumbName.replace(new RegExp(`:(${paramsKeys})`, 'g'), (replacement, key) => params[key] || replacement);
  34. return name;
  35. }
  36. function defaultItemRender(opt) {
  37. const {
  38. route,
  39. params,
  40. routes,
  41. paths
  42. } = opt;
  43. const isLastItem = routes.indexOf(route) === routes.length - 1;
  44. const name = getBreadcrumbName(route, params);
  45. return isLastItem ? (0, _vue.createVNode)("span", null, [name]) : (0, _vue.createVNode)("a", {
  46. "href": `#/${paths.join('/')}`
  47. }, [name]);
  48. }
  49. var _default = exports.default = (0, _vue.defineComponent)({
  50. compatConfig: {
  51. MODE: 3
  52. },
  53. name: 'ABreadcrumb',
  54. inheritAttrs: false,
  55. props: breadcrumbProps(),
  56. slots: Object,
  57. setup(props, _ref) {
  58. let {
  59. slots,
  60. attrs
  61. } = _ref;
  62. const {
  63. prefixCls,
  64. direction
  65. } = (0, _useConfigInject.default)('breadcrumb', props);
  66. const [wrapSSR, hashId] = (0, _style.default)(prefixCls);
  67. const getPath = (path, params) => {
  68. path = (path || '').replace(/^\//, '');
  69. Object.keys(params).forEach(key => {
  70. path = path.replace(`:${key}`, params[key]);
  71. });
  72. return path;
  73. };
  74. const addChildPath = (paths, childPath, params) => {
  75. const originalPaths = [...paths];
  76. const path = getPath(childPath || '', params);
  77. if (path) {
  78. originalPaths.push(path);
  79. }
  80. return originalPaths;
  81. };
  82. const genForRoutes = _ref2 => {
  83. let {
  84. routes = [],
  85. params = {},
  86. separator,
  87. itemRender = defaultItemRender
  88. } = _ref2;
  89. const paths = [];
  90. return routes.map(route => {
  91. const path = getPath(route.path, params);
  92. if (path) {
  93. paths.push(path);
  94. }
  95. const tempPaths = [...paths];
  96. // generated overlay by route.children
  97. let overlay = null;
  98. if (route.children && route.children.length) {
  99. overlay = (0, _vue.createVNode)(_menu.default, {
  100. "items": route.children.map(child => ({
  101. key: child.path || child.breadcrumbName,
  102. label: itemRender({
  103. route: child,
  104. params,
  105. routes,
  106. paths: addChildPath(tempPaths, child.path, params)
  107. })
  108. }))
  109. }, null);
  110. }
  111. const itemProps = {
  112. separator
  113. };
  114. if (overlay) {
  115. itemProps.overlay = overlay;
  116. }
  117. return (0, _vue.createVNode)(_BreadcrumbItem.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, itemProps), {}, {
  118. "key": path || route.breadcrumbName
  119. }), {
  120. default: () => [itemRender({
  121. route,
  122. params,
  123. routes,
  124. paths: tempPaths
  125. })]
  126. });
  127. });
  128. };
  129. return () => {
  130. var _a;
  131. let crumbs;
  132. const {
  133. routes,
  134. params = {}
  135. } = props;
  136. const children = (0, _propsUtil.flattenChildren)((0, _propsUtil.getPropsSlot)(slots, props));
  137. const separator = (_a = (0, _propsUtil.getPropsSlot)(slots, props, 'separator')) !== null && _a !== void 0 ? _a : '/';
  138. const itemRender = props.itemRender || slots.itemRender || defaultItemRender;
  139. if (routes && routes.length > 0) {
  140. // generated by route
  141. crumbs = genForRoutes({
  142. routes,
  143. params,
  144. separator,
  145. itemRender
  146. });
  147. } else if (children.length) {
  148. crumbs = children.map((element, index) => {
  149. (0, _warning.default)(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");
  150. return (0, _vue.cloneVNode)(element, {
  151. separator,
  152. key: index
  153. });
  154. });
  155. }
  156. const breadcrumbClassName = {
  157. [prefixCls.value]: true,
  158. [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
  159. [`${attrs.class}`]: !!attrs.class,
  160. [hashId.value]: true
  161. };
  162. return wrapSSR((0, _vue.createVNode)("nav", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
  163. "class": breadcrumbClassName
  164. }), [(0, _vue.createVNode)("ol", null, [crumbs])]));
  165. };
  166. }
  167. });