@kdcloudjs/kdesign 1.7.46 → 1.7.47

package/lib/breadcrumb/breadcrumb.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+var _utils = require("../_utils");
+var _breadcrumbItem = _interopRequireDefault(require("./breadcrumbItem"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _tooltip = _interopRequireDefault(require("../tooltip"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var Breadcrumb = function Breadcrumb(props) {
+  // prefixCls 是默认提供的类名前缀，默认值是'kd';
+  // compDefaultProps存放了所有组件全局化配置的默认值，用户可以通过ConfigProvider这个组件区去做修改；
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls,
+    userDefaultProps = _useContext.compDefaultProps;
+  // 这里将用户传入的 props 和 Breadcrumb 组件的全局化默认配置 userDefaultProps 做了合并处理，得到最终 Breadcrumb 组件渲染的prop
+  var breadcrumbProps = (0, _utils.getCompProps)('Breadcrumb', userDefaultProps, props);
+  // 解构获取需要的操作的属性值 customPrefixcls最终组件的默认类名前缀，如果用户不通过ConfigProvider全局化配置传入，则默认为‘kd’，否则为用户传入值
+  var className = breadcrumbProps.className,
+    customPrefixcls = breadcrumbProps.prefixCls,
+    items = breadcrumbProps.items,
+    separator = breadcrumbProps.separator,
+    colorModel = breadcrumbProps.colorModel,
+    onItemClick = breadcrumbProps.onItemClick,
+    others = __rest(breadcrumbProps, ["className", "prefixCls", "items", "separator", "colorModel", "onItemClick"]);
+  var breadcrumbRef = (0, _react.useRef)(null);
+  var breadcrumbHideIconRef = (0, _react.useRef)(null);
+  var _React$useState = _react.default.useState(items),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    itemsConfig = _React$useState2[0],
+    setItemsConfig = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    itemsArray = _React$useState4[0],
+    setItemsArray = _React$useState4[1];
+  var _React$useState5 = _react.default.useState(),
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    breadcrumbWidth = _React$useState6[0],
+    setBreadcrumbWidth = _React$useState6[1];
+  var _React$useState7 = _react.default.useState(false),
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    openEllipsis = _React$useState8[0],
+    setOpenEllipsis = _React$useState8[1];
+  // 获取组件的基类样式前缀，此时breadcrumbPrefixCls的值为 kd-breadcrumb ，后续的Breadcrumb组件的样式名都以此开头，使用中划线连接
+  var breadcrumbPrefixCls = getPrefixCls(prefixCls, 'breadcrumb', customPrefixcls);
+  // 混合用户传入的类名 与 组件内部定义的样式名
+  var breadcrumbClass = (0, _classnames.default)(breadcrumbPrefixCls, className);
+  var breadcrumbPopperClass = (0, _classnames.default)("".concat(breadcrumbPrefixCls, "-popper"));
+  var breadcrumbMorePanelClass = (0, _classnames.default)("".concat(breadcrumbPrefixCls, "-more-panel"));
+  var breadcrumbSeparatorClass = (0, _classnames.default)("".concat(breadcrumbPrefixCls, "-item-separator"));
+  var breadcrumbHideIconClass = (0, _classnames.default)("".concat(breadcrumbPrefixCls, "-hide-icon"));
+  var getBreadcrumbItemClass = function getBreadcrumbItemClass(item, isLast) {
+    var _context, _context2, _classNames;
+    return (0, _classnames.default)(item.className, "".concat(breadcrumbPrefixCls, "-item"), (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(breadcrumbPrefixCls, "-item-link"), (item === null || item === void 0 ? void 0 : item.path) || (item === null || item === void 0 ? void 0 : item.href)), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context = "".concat(breadcrumbPrefixCls, "-item-")).call(_context, colorModel || 'emphasize', "-model-current"), isLast), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(breadcrumbPrefixCls, "-item-")).call(_context2, colorModel || 'emphasize', "-model"), !isLast), _classNames));
+  };
+  var minItem = 3; // 加上more只显示3个元素的时候，末尾元素开启省略号
+  var isLastItem = function isLastItem(index, items) {
+    return index === (items === null || items === void 0 ? void 0 : items.length) - 1;
+  };
+  var getSeparator = function getSeparator(index, items) {
+    if (isLastItem(index, items)) {
+      return null;
+    } else {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        className: breadcrumbSeparatorClass
+      }, separator);
+    }
+  };
+  var getMoreIconContent = function getMoreIconContent(items) {
+    var MoreItems = function MoreItems() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: breadcrumbMorePanelClass
+      }, (0, _map.default)(items).call(items, function (item, index) {
+        return /*#__PURE__*/_react.default.createElement(_breadcrumbItem.default, {
+          key: index,
+          index: index,
+          item: (0, _extends2.default)((0, _extends2.default)({}, item), {
+            className: getBreadcrumbItemClass(item, false)
+          }),
+          separator: getSeparator(index, items)
+        });
+      }));
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      popperClassName: breadcrumbPopperClass,
+      arrow: false,
+      tip: /*#__PURE__*/_react.default.createElement(MoreItems, null),
+      trigger: "hover",
+      placement: "bottomLeft"
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      type: "more"
+    })));
+  };
+  var getElementWidth = function getElementWidth(ref) {
+    if (ref.current) {
+      return ref.current.offsetWidth;
+    } else {
+      return 0;
+    }
+  };
+  var getItemsConfig = function getItemsConfig(widthArr, breadcrumbWidth) {
+    var difference = getElementWidth(breadcrumbRef) - breadcrumbWidth;
+    if (difference < 0) {
+      var number = -difference;
+      var removeItem = widthArr === null || widthArr === void 0 ? void 0 : widthArr.reduce(function (acc, cur, ind) {
+        if (ind > 0 && ind < widthArr.length - 1) {
+          if (acc.width < number + getElementWidth(breadcrumbHideIconRef)) {
+            acc.width += cur.width;
+            acc.index = ind;
+            return acc;
+          } else {
+            return acc;
+          }
+        } else {
+          return acc;
+        }
+      }, {
+        width: 0,
+        index: 0
+      });
+      if (removeItem.index > 0 && removeItem.index < itemsConfig.length - 1) {
+        var _context3;
+        var newItemsConfig = JSON.parse((0, _stringify.default)(itemsConfig));
+        (0, _splice.default)(newItemsConfig).call(newItemsConfig, 1, removeItem.index, {
+          title: getMoreIconContent((0, _splice.default)(_context3 = JSON.parse((0, _stringify.default)(itemsConfig))).call(_context3, 1, removeItem.index))
+        });
+        setItemsConfig(newItemsConfig);
+      }
+    } else {
+      setItemsConfig(items);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var isMore = itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.some(function (item) {
+      var _a, _b;
+      return ((_b = (_a = item === null || item === void 0 ? void 0 : item.title) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.children.type.displayName) === 'Tooltip';
+    });
+    setOpenEllipsis(isMore && itemsConfig.length === minItem);
+  }, [itemsConfig]);
+  (0, _react.useEffect)(function () {
+    if (breadcrumbRef === null || breadcrumbRef === void 0 ? void 0 : breadcrumbRef.current) {
+      var _itemsArray = (0, _from.default)(breadcrumbRef.current.children, function (item, index) {
+        return {
+          width: item.offsetWidth,
+          index: index
+        };
+      });
+      var _breadcrumbWidth = _itemsArray.reduce(function (acc, cur) {
+        return acc + cur.width;
+      }, 0);
+      setItemsArray(_itemsArray);
+      setBreadcrumbWidth(_breadcrumbWidth);
+      getItemsConfig(_itemsArray, _breadcrumbWidth);
+    }
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (itemsArray && breadcrumbWidth) {
+      window.addEventListener('resize', function () {
+        getItemsConfig(itemsArray, breadcrumbWidth);
+      });
+    }
+  }, [itemsArray, breadcrumbWidth]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    className: breadcrumbClass
+  }, others, {
+    ref: breadcrumbRef
+  }), (itemsConfig === null || itemsConfig === void 0 ? void 0 : itemsConfig.length) > 0 && (0, _map.default)(itemsConfig).call(itemsConfig, function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_breadcrumbItem.default, {
+      key: index,
+      item: (0, _extends2.default)((0, _extends2.default)({}, item), {
+        className: getBreadcrumbItemClass(item, isLastItem(index, itemsConfig))
+      }),
+      onItemClick: onItemClick,
+      index: index,
+      separator: getSeparator(index, itemsConfig),
+      openEllipsis: isLastItem(index, itemsConfig) ? openEllipsis : false
+    });
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: breadcrumbHideIconClass,
+    ref: breadcrumbHideIconRef
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "more"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: breadcrumbSeparatorClass
+  }, separator)));
+};
+Breadcrumb.displayName = 'Breadcrumb';
+var _default = Breadcrumb;
+exports.default = _default;

package/lib/breadcrumb/breadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IBreadcrumbItems } from './interface';
+declare const BreadcrumbItem: FC<IBreadcrumbItems>;
+export default BreadcrumbItem;

package/lib/breadcrumb/breadcrumbItem.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+var _icon = _interopRequireDefault(require("../icon"));
+var _devwarning = _interopRequireDefault(require("../_utils/devwarning"));
+var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var BreadcrumbItem = function BreadcrumbItem(props) {
+  var _useContext = (0, _react.useContext)(_ConfigContext.default),
+    getPrefixCls = _useContext.getPrefixCls,
+    prefixCls = _useContext.prefixCls;
+  var item = props.item,
+    index = props.index,
+    separator = props.separator,
+    openEllipsis = props.openEllipsis,
+    onItemClick = props.onItemClick;
+  var title = item.title,
+    className = item.className,
+    dropdownProps = item.dropdownProps,
+    href = item.href,
+    path = item.path,
+    icon = item.icon;
+  var breadcrumbPrefixCls = getPrefixCls(prefixCls, 'breadcrumb');
+  var itemTextCls = "".concat(breadcrumbPrefixCls, "-item-text");
+  var itemIconCls = "".concat(breadcrumbPrefixCls, "-item-icon");
+  var handleItemClick = function handleItemClick() {
+    if (href && !path) {
+      window.open(href, '_self');
+    } else if (!href && path) {
+      window.location.pathname = path + (title && "/".concat(title));
+    } else if (href && path) {
+      (0, _devwarning.default)(true, 'breadcrumb', '`href` and `path` not coexist  within the `item` object');
+    }
+    onItemClick && onItemClick(item, index);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: handleItemClick
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: itemIconCls
+  }, icon), /*#__PURE__*/_react.default.createElement("div", {
+    className: itemTextCls,
+    title: typeof title === 'string' ? title : '',
+    style: {
+      maxWidth: openEllipsis ? '170px' : 'unset',
+      overflow: openEllipsis ? 'hidden' : 'inherit'
+    }
+  }, title), dropdownProps && 'menu' in dropdownProps && /*#__PURE__*/_react.default.createElement(_dropdown.default, (0, _extends2.default)({
+    placement: "bottomRight"
+  }, dropdownProps), /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: "arrow-down"
+  })), separator));
+};
+var _default = BreadcrumbItem;
+exports.default = _default;

package/lib/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import Breadcrumb from './breadcrumb';
+export * from './breadcrumb';
+export default Breadcrumb;

package/lib/breadcrumb/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _breadcrumb = _interopRequireWildcard(require("./breadcrumb"));
+_Object$keys(_breadcrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _breadcrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _breadcrumb[key];
+    }
+  });
+});
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _default = _breadcrumb.default;
+exports.default = _default;

package/lib/breadcrumb/interface.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { DropDownProps } from '../dropdown';
+export declare const ColorModelTypes: ["emphasize", "weaken"];
+export declare type ColorModelType = typeof ColorModelTypes[number];
+export interface IBreadcrumbProps {
+    style?: Record<string, unknown>;
+    className?: string;
+    colorModel?: ColorModelType;
+    prefixCls?: string;
+    items: Array<IBreadcrumbItem>;
+    separator?: ReactNode;
+    children?: ReactNode;
+    onItemClick?: (item: IBreadcrumbItem, index: number) => void;
+}
+export interface IBreadcrumbItems {
+    item: IBreadcrumbItem;
+    index: number;
+    separator?: ReactNode;
+    openEllipsis?: boolean;
+    onItemClick?: (item: IBreadcrumbItem, index: number) => void;
+}
+export interface IBreadcrumbItem {
+    className?: string;
+    title?: ReactNode;
+    dropdownProps?: DropDownProps;
+    href?: string;
+    path?: string;
+    icon?: ReactNode;
+}
+export interface IItemsWidth {
+    width: number;
+    index: number;
+}

package/lib/breadcrumb/interface.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorModelTypes = void 0;
+var _type = require("../_utils/type");
+var ColorModelTypes = (0, _type.tuple)('emphasize', 'weaken');
+exports.ColorModelTypes = ColorModelTypes;

package/lib/breadcrumb/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.css");
+require("./index.css");

package/lib/breadcrumb/style/index.css

@@ -0,0 +1,174 @@
+/* -----------  color  ——————---- start */
+/* -----------  color  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  font  ——————---- start */
+/* -----------  font  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+/* -----------  Button  ——————---- start */
+/* -----------  Button  ——————---- end */
+/* -----------  Collapse  ——————---- start */
+/* -----------  Collapse  ——————---- end */
+/* -----------  Card  ——————---- start */
+/* -----------  Card  ——————---- end */
+/* -----------  Carousel  ——————---- start */
+/* -----------  Carousel  ——————---- end */
+/* -----------  Cascader  ——————---- start */
+/* -----------  Cascader  ——————---- end */
+/* -----------  Switch  ——————---- start */
+/* -----------  Switch  ——————---- end */
+/* -----------  Input  ——————---- start */
+/* -----------  Input  ——————---- end */
+/* -----------  InputNumber  ——————---- start */
+/* -----------  InputNumber  ——————---- end */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- start */
+/* -----------  checkbox  ——————---- end */
+/* -----------  Radio  ——————---- start */
+/* -----------  Radio  ——————---- end */
+/* -----------  icon  ——————---- start */
+/* -----------  icon  ——————---- end */
+/* -----------  Popconfirm  ——————---- start */
+/* -----------  Popconfirm  ——————---- end */
+/* -----------  Progress  ——————---- start */
+/* -----------  Progress  ——————---- end */
+/* -----------  Pagination  ——————---- start */
+/* -----------  Pagination  ——————---- end */
+/* -----------  Timeline  ——————---- start */
+/* -----------  Timeline  ——————---- end */
+/* -----------  Tabs  ——————---- start */
+/* -----------  Tabs  ——————---- end */
+/* -----------  Select  ——————---- start */
+/* -----------  Select  ——————---- end */
+/* -----------  Rate  ——————---- start */
+/* -----------  Rate  ——————---- end */
+/* -----------  Dropdown  ——————---- start */
+/* -----------  Dropdown  ——————---- end */
+/* -----------  Tooltip  ——————---- start */
+/* -----------  Tooltip  ——————---- end */
+/* -----------  Transfer  ——————---- start */
+/* -----------  Transfer  ——————---- end */
+/* -----------  DatePicker  ——————---- start */
+/* -----------  DatePicker  ——————---- end */
+/* -----------  ColorPicker  ——————---- start */
+/* -----------  ColorPicker  ——————---- end */
+/* -----------  Tree  ——————---- start */
+/* -----------  Tree  ——————---- end */
+/* -----------  Alert  ——————---- start */
+/* -----------  Alert  ——————---- end */
+/* -----------  Split-Panel ——————---- start */
+/* -----------  Split-Panel ——————---- end */
+/* -----------  Modal  ——————---- start */
+/* -----------  Modal  ——————---- end */
+/* -----------  Steps  ——————---- start */
+/* -----------  Steps  ——————---- end */
+/* -----------  Form  ——————---- start */
+/* -----------  Form  ——————---- end */
+/* -----------  Tag ——————---- start */
+/* -----------  Tag ——————---- end */
+/* -----------  Menu  ——————---- start */
+/* -----------  Menu  ——————---- end */
+/* -----------  notice  ——————---- start */
+/* -----------  message  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Spin  ——————---- start */
+/* -----------  Spin  ——————---- end */
+/* -----------  Layout  ——————---- start */
+/* -----------  Layout  ——————---- end */
+/* -----------  Typography  ——————---- start */
+/* -----------  Typography  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Search  ——————---- start */
+/* -----------  Badge  ——————---- start */
+/* -----------  Badge  ——————---- end */
+/* -----------  Anchor  ——————---- start */
+/* -----------  Anchor  ——————---- end */
+/* -----------  Avatar  ——————---- start */
+/* -----------  Avatar  ——————---- end */
+/* -----------  AdvancedSelector  ——————---- start */
+/* -----------  AdvancedSelector  ——————---- end */
+/* -----------  motion  ——————---- start */
+/* -----------  motion  ——————---- end */
+/* -----------  transition  ——————---- start */
+/* -----------  transition  ——————---- end */
+/* -----------  zIndex  ——————---- start */
+/*
+    普通组件内部自身层级应设置在0-100间
+*/
+/* -----------  zIndex  ——————---- end */
+.kd-breadcrumb,
+.kd-breadcrumb-more-panel {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+  font-size: var(--kd-c-breadcrumb-font-size, var(--kd-g-font-size-middle, 14px));
+  font-weight: var(--kd-c-breadcrumb-font-weight, var(--kd-g-font-weight, 400));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 22px;
+}
+.kd-breadcrumb-hide-icon,
+.kd-breadcrumb-more-panel-hide-icon {
+  position: absolute;
+  z-index: -999999;
+  top: -999999px;
+  visibility: hidden;
+}
+.kd-breadcrumb-item,
+.kd-breadcrumb-more-panel-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: text;
+}
+.kd-breadcrumb-item-separator,
+.kd-breadcrumb-more-panel-item-separator {
+  padding: 0 var(--kd-c-breadcrumb-separator-spacing-padding-horizontal, 8px);
+  color: var(--kd-c-breadcrumb-separator-color-text, #b2b2b2);
+}
+.kd-breadcrumb-item-link:hover,
+.kd-breadcrumb-more-panel-item-link:hover {
+  color: #3987ed;
+  cursor: pointer;
+}
+.kd-breadcrumb-item-emphasize-model,
+.kd-breadcrumb-more-panel-item-emphasize-model {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-emphasize-model-current,
+.kd-breadcrumb-more-panel-item-emphasize-model-current {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model,
+.kd-breadcrumb-more-panel-item-weaken-model {
+  color: var(--kd-c-breadcrumb-active-color-text, #111111);
+}
+.kd-breadcrumb-item-weaken-model-current,
+.kd-breadcrumb-more-panel-item-weaken-model-current {
+  color: var(--kd-c-breadcrumb-color-text, #737373);
+}
+.kd-breadcrumb-item-text,
+.kd-breadcrumb-more-panel-item-text {
+  white-space: nowrap;
+}
+.kd-breadcrumb-item-text:last-child,
+.kd-breadcrumb-more-panel-item-text:last-child {
+  text-overflow: ellipsis;
+}
+.kd-breadcrumb-item-icon,
+.kd-breadcrumb-more-panel-item-icon {
+  margin-right: 4px;
+}
+.kd-breadcrumb .kd-dropdown-trigger,
+.kd-breadcrumb-more-panel .kd-dropdown-trigger {
+  margin-left: 4px;
+}
+.kd-breadcrumb-popper {
+  max-width: none !important;
+}

package/lib/breadcrumb/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/breadcrumb/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/breadcrumb/style/index.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import './mixin.less';
+@breadcrumb-prefix-cls: ~'@{kd-prefix}-breadcrumb';
+
+.@{breadcrumb-prefix-cls},
+.@{breadcrumb-prefix-cls}-more-panel {
+  .breadcrumb;
+
+  display: flex;
+  height: 22px;
+
+  &-hide-icon {
+    position: absolute;
+    z-index: -999999;
+    top: -999999px;
+    visibility: hidden;
+  }
+
+  &-item {
+    display: flex;
+    cursor: text;
+
+    &-separator {
+      padding: 0 @breadcrumb-separator-spacing-padding-horizontal;
+      color: @breadcrumb-separator-color-text;
+    }
+
+    &-link {
+      &:hover {
+        color: #3987ed;
+        cursor: pointer;
+      }
+    }
+
+    &-emphasize-model {
+      color: @breadcrumb-color-text;
+    }
+
+    &-emphasize-model-current {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model {
+      color: @breadcrumb-active-color-text;
+    }
+
+    &-weaken-model-current {
+      color: @breadcrumb-color-text;
+    }
+
+    &-text {
+      white-space: nowrap;
+
+      &:last-child {
+        text-overflow: ellipsis;
+      }
+    }
+
+    &-icon {
+      margin-right: 4px;
+    }
+  }
+
+  .kd-dropdown-trigger {
+    margin-left: 4px;
+  }
+}
+
+.@{breadcrumb-prefix-cls}-popper {
+  max-width: none !important;
+}

package/lib/breadcrumb/style/mixin.less

@@ -0,0 +1,7 @@
+@import './token.less';
+
+.breadcrumb() {
+  color: @breadcrumb-color-text;
+  font-size: @breadcrumb-font-size;
+  font-weight: @breadcrumb-font-weight;
+}

package/lib/breadcrumb/style/token.less

@@ -0,0 +1,27 @@
+@import '../../style/themes/token.less';
+
+@breadcrumb-custom-prefix: ~'--@{kd-prefix}-c-breadcrumb';
+
+// color
+@breadcrumb-color-text: var(~'@{breadcrumb-custom-prefix}-color-text', #737373);
+@breadcrumb-active-color-text: var(~'@{breadcrumb-custom-prefix}-active-color-text', #111111);
+@breadcrumb-separator-color-text: var(~'@{breadcrumb-custom-prefix}-separator-color-text', #b2b2b2);
+
+// font
+@breadcrumb-font-size: var(~'@{breadcrumb-custom-prefix}-font-size', @font-size-middle);
+@breadcrumb-font-weight: var(~'@{breadcrumb-custom-prefix}-font-weight', @font-weight-light);
+
+// line-height
+
+// motion
+
+// radius
+
+// shadow
+
+// sizing
+
+// spacing
+@breadcrumb-separator-spacing-padding-horizontal: var(~'@{breadcrumb-custom-prefix}-separator-spacing-padding-horizontal', 8px);
+
+// z-index