Breadcrumb.js 5.7 KB

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