@kdcloudjs/kdesign 1.6.22 → 1.6.24

package/es/_utils/usePopper.js

@@ -556,7 +556,11 @@ function usePopper(locatorElement, popperElement, props) {
         focus: 'mousedown',
         contextMenu: 'mousedown'
       };
-      popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('mouseleave', debounceHidePopper);
+
+      if (matchTrigger('hover')) {
+        popperNode === null || popperNode === void 0 ? void 0 : popperNode.addEventListener('mouseleave', debounceHidePopper);
+      }
+
       Array.isArray(trigger) ? trigger.forEach(function (action) {
         return document.addEventListener(mapEvent[action], debounceHidePopper);
       }) : document.addEventListener(mapEvent[trigger], debounceHidePopper);

package/es/cascader/cascader.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React from 'react';
 import { PopperProps } from '../_utils/usePopper';
 export interface CascaderOptionType {
-    value?: string | number;
+    value?: string;
     label?: React.ReactNode;
     disabled?: boolean;
     isLeaf?: boolean;
@@ -14,9 +14,12 @@ declare type FieldNames = {
     value: string;
     children: string;
 };
+export declare type KeysDataType = {
+    [key: string]: CascaderOptionType;
+};
 export declare const CascaderPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 export declare type CascaderPlacementType = typeof CascaderPlacement[number];
-export declare type CascaderValueType = Array<string | number>;
+export declare type CascaderValueType = (string | string[])[];
 export declare type CascaderExpandTrigger = 'click' | 'hover';
 export interface CascaderProps extends PopperProps {
     id?: string;
@@ -37,6 +40,7 @@ export interface CascaderProps extends PopperProps {
     notFoundContent?: string;
     value?: CascaderValueType;
     children?: React.ReactNode;
+    mode?: 'single' | 'multiple';
     style?: React.CSSProperties;
     suffixIcon?: React.ReactNode;
     expandIcon?: React.ReactNode;

package/es/cascader/cascader.js

@@ -1,11 +1,13 @@
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import * as React from 'react';
+import React, { useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { tuple } from '../_utils/type';
 import { getCompProps } from '../_utils';
@@ -14,6 +16,9 @@ import usePopper from '../_utils/usePopper';
 import Input from '../input';
 import Icon from '../icon';
 import Empty from '../empty';
+import Checkbox from '../checkbox';
+import Tag from '../tag';
+import { flattenAll, useChecked, getHalfChecked, getChecked, getMultipleCheckValue, getAllCheckedKeys } from './util';
 export var CascaderPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
 var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useContext = React.useContext(ConfigContext),
@@ -23,14 +28,19 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
   var allProps = getCompProps('Cascader', userDefaultProps, props);
-  var style = allProps.style,
+  var mode = allProps.mode,
+      style = allProps.style,
       options = allProps.options,
+      bordered = allProps.bordered,
+      disabled = allProps.disabled,
       children = allProps.children,
       loadData = allProps.loadData,
+      clearIcon = allProps.clearIcon,
       className = allProps.className,
       fieldNames = allProps.fieldNames,
       placeholder = allProps.placeholder,
       defaultValue = allProps.defaultValue,
+      maxTagPlaceholder = allProps.maxTagPlaceholder,
       displayRender = allProps.displayRender,
       expandTrigger = allProps.expandTrigger,
       changeOnSelect = allProps.changeOnSelect,
@@ -45,6 +55,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'cascader', customPrefixcls);
   var pickerRef = React.useRef();
   var triggerRef = React.useRef();
+  var wrapperRef = React.useRef();
   var mergeRef = ref || pickerRef;
 
   var _React$useState = React.useState(!!props.popperVisible || !!props.popupVisible || defaultPopupVisible),
@@ -79,8 +90,23 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     props.value && setValue(props.value);
   }, [props.value]);
+  var isMultiple = useMemo(function () {
+    return mode === 'multiple';
+  }, [mode]);
+
+  var _useMemo = useMemo(function () {
+    return flattenAll(options, []);
+  }, [options]),
+      flattenData = _useMemo.flattenData,
+      keysData = _useMemo.keysData;
+
+  var _useChecked = useChecked(value, flattenData, keysData, isMultiple),
+      _useChecked2 = _slicedToArray(_useChecked, 2),
+      checkedKeys = _useChecked2[0],
+      halfCheckedKeys = _useChecked2[1];
+
   React.useEffect(function () {
-    if (value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
+    if (!isMultiple && value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
       var _currentOptions = [];
       var _menus = [options];
 
@@ -104,7 +130,39 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setMenus(_menus);
       setCurrentOptions(_currentOptions);
     }
-  }, [options, value, selectedOptions, fieldNames]);
+  }, [options, value, selectedOptions, fieldNames, isMultiple]);
+  React.useEffect(function () {
+    if (isMultiple && value && (options === null || options === void 0 ? void 0 : options.length) > 0) {
+      var _currentOptions2 = [];
+      var lastselectedOptions = value[(value === null || value === void 0 ? void 0 : value.length) - 1] || [];
+      var _menus2 = [options];
+
+      var scanOptions = function scanOptions(options) {
+        options.forEach(function (option) {
+          var _a;
+
+          if (_includesInstanceProperty(lastselectedOptions).call(lastselectedOptions, String(option[fieldNames.value]))) {
+            _currentOptions2.push(option);
+
+            if ((_a = option[fieldNames.children]) === null || _a === void 0 ? void 0 : _a.length) {
+              _menus2.push(option[fieldNames.children]);
+
+              scanOptions(option[fieldNames.children]);
+            }
+          }
+        });
+      };
+
+      scanOptions(options);
+      var newMultipleOptions = value === null || value === void 0 ? void 0 : _mapInstanceProperty(value).call(value, function (item) {
+        return Array.isArray(item) ? _mapInstanceProperty(item).call(item, function (key) {
+          return keysData[key];
+        }) : [];
+      });
+      setMenus(_menus2);
+      setCurrentOptions(newMultipleOptions);
+    }
+  }, [options, value, fieldNames, isMultiple]);
   React.useEffect(function () {
     var _a;
 
@@ -112,12 +170,30 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       (_a = mergeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, [allProps.autoFocus, mergeRef]);
+  React.useEffect(function () {
+    var _a;
 
-  var labels = _mapInstanceProperty(currentOptions).call(currentOptions, function (_ref) {
-    var label = _ref[fieldNames.label];
-    return label;
-  });
+    (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseup', function (e) {
+      var _a;
+
+      var isCloseBtn = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.className.indexOf('kd-tag-close-icon')) > -1;
 
+      if (isCloseBtn) {
+        e.stopPropagation();
+      }
+    });
+  }, []);
+  var labels = useMemo(function () {
+    return !isMultiple ? _mapInstanceProperty(currentOptions).call(currentOptions, function (_ref) {
+      var label = _ref[fieldNames.label];
+      return label;
+    }) : _mapInstanceProperty(currentOptions).call(currentOptions, function (option) {
+      return _mapInstanceProperty(option).call(option, function (_ref2) {
+        var label = _ref2[fieldNames.label];
+        return label;
+      });
+    });
+  }, [currentOptions, fieldNames.label, isMultiple]);
   var allowClear = allProps.allowClear && value.length > 0;
   var locatorProps = {
     style: style,
@@ -125,7 +201,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classNames("".concat(prefixCls, "-picker"), className, {
       expand: visible,
       allowClear: allowClear,
-      disabled: props.disabled
+      disabled: disabled
     })
   };
 
@@ -137,7 +213,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value: value,
     placeholder: placeholder,
     readOnly: true,
-    disabled: props.disabled,
+    disabled: disabled,
     className: classNames("".concat(prefixCls, "-picker-input"), {
       expand: visible
     }),
@@ -149,47 +225,167 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })
   };
 
-  if (props.bordered) {
+  if (bordered) {
     inputProps.borderType = 'bordered';
   }
 
-  var cascaderLocator = /*#__PURE__*/React.createElement("span", _extends({}, locatorProps, {
-    ref: mergeRef
-  }), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
-    ref: triggerRef
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    ref: triggerRef
-  }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-picker-label")
-  }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
-    type: "close-solid",
-    className: "".concat(prefixCls, "-picker-close"),
-    onClick: handleClear
-  })));
+  var renderSuffix = function renderSuffix() {
+    var _classNames;
+
+    var suffixIcon = allProps.suffixIcon; // 选择器下拉icon样式
+
+    var arrowIconCls = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-icon-arrow"), true), _defineProperty(_classNames, "".concat(prefixCls, "-icon-arrow-up"), visible), _defineProperty(_classNames, "".concat(prefixCls, "-icon-arrow-down"), !visible), _defineProperty(_classNames, "".concat(prefixCls, "-icon-arrow-focus"), visible), _classNames));
+    var iconShow = allowClear && !disabled && currentOptions.length > 0;
+    var clearIconCls = classNames(_defineProperty({}, "".concat(prefixCls, "-icon-clear"), true));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+      onClick: handleClear,
+      className: clearIconCls
+    }, /*#__PURE__*/React.createElement(Icon, {
+      type: "close-solid"
+    }) || clearIcon), /*#__PURE__*/React.createElement("span", {
+      className: arrowIconCls
+    }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
+      type: "arrow-down"
+    })));
+  };
+
+  var handleMaxTagHolder = useCallback(function () {
+    if (typeof maxTagPlaceholder === 'function') {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        disabled: disabled
+      }, maxTagPlaceholder(currentOptions));
+    } else {
+      return /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        disabled: disabled
+      }, maxTagPlaceholder);
+    }
+  }, [disabled, maxTagPlaceholder, currentOptions]);
+
+  var handleRemove = function handleRemove(e, opt) {
+    e.stopPropagation();
+    onMultipleChecked(_toConsumableArray(opt).pop(), false);
+  };
+
+  var renderMultiple = function renderMultiple() {
+    var _classNames3, _classNames4;
+
+    var maxTagCount = allProps.maxTagCount,
+        maxTagPlaceholder = allProps.maxTagPlaceholder;
+    var multipleCls = classNames((_classNames3 = {
+      disabled: disabled
+    }, _defineProperty(_classNames3, "".concat(prefixCls, "-multiple"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-bordered"), bordered), _classNames3));
+    var itemCls = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(prefixCls, "-selection-item"), true), _defineProperty(_classNames4, "".concat(prefixCls, "-tag-describe"), true), _classNames4));
+    var TagStyle = {
+      margin: '2px 8px 2px 0',
+      maxWidth: '100%'
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: multipleCls,
+      ref: triggerRef,
+      style: style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-multiple-wrapper"),
+      ref: wrapperRef
+    }, Array.isArray(currentOptions) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(currentOptions).call(currentOptions, function (option, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: _JSON$stringify(labels[index]),
+        className: classNames("".concat(prefixCls, "-selection-tag"))
+      }, (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement(Tag, {
+        type: "edit",
+        style: TagStyle,
+        closable: true,
+        onClose: function onClose(e) {
+          return handleRemove(e, option);
+        }
+      }, displayRender(labels[index], option)));
+    }), maxTagCount && currentOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
+      className: itemCls
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-tag-describe-content")
+    }, "\u5171", currentOptions.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-placeholder")
+    }, !currentOptions.length && placeholder), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-suffix")
+    }, renderSuffix())));
+  };
+
+  var renderSingle = function renderSingle() {
+    return /*#__PURE__*/React.createElement("span", _extends({}, locatorProps, {
+      ref: mergeRef
+    }), React.Children.count(children) === 1 && children.type ? /*#__PURE__*/React.cloneElement(children, {
+      ref: triggerRef
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      ref: triggerRef
+    }, /*#__PURE__*/React.createElement(Input, _extends({}, inputProps)), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-picker-label")
+    }, (labels === null || labels === void 0 ? void 0 : labels.length) ? displayRender(labels, currentOptions) : '')), allowClear && /*#__PURE__*/React.createElement(Icon, {
+      type: "close-solid",
+      className: "".concat(prefixCls, "-picker-close"),
+      onClick: handleClear
+    })));
+  };
+
+  var cascaderLocator = isMultiple ? renderMultiple() : renderSingle();
 
   var onExpend = function onExpend(index, opt, opts) {
     _spliceInstanceProperty(selectedOptions).call(selectedOptions, index, selectedOptions.length - index, opt);
 
     setSelectedOptions(selectedOptions);
 
+    if (!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false || changeOnSelect) {
+      onChange(selectedOptions);
+    }
+
+    !(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false && setVisible(false);
+
     var newMenus = _toConsumableArray(menus);
 
     if ((opts === null || opts === void 0 ? void 0 : opts.length) || opt.isLeaf === false) {
       _spliceInstanceProperty(newMenus).call(newMenus, index + 1, newMenus.length - index + 1, opts);
     }
 
-    if (!(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false || changeOnSelect) {
-      onChange(selectedOptions);
+    setMenus(newMenus);
+    loadData && opt.isLeaf === false && !(opts === null || opts === void 0 ? void 0 : opts.length) && loadData(selectedOptions);
+  };
+
+  var onMultipleExpend = function onMultipleExpend(index, opt, opts) {
+    _spliceInstanceProperty(selectedOptions).call(selectedOptions, index, selectedOptions.length - index, opt);
+
+    setSelectedOptions(selectedOptions);
+
+    var newMenus = _toConsumableArray(menus);
+
+    if ((opts === null || opts === void 0 ? void 0 : opts.length) || opt.isLeaf === false) {
+      _spliceInstanceProperty(newMenus).call(newMenus, index + 1, newMenus.length - index + 1, opts);
     }
 
-    !(opts === null || opts === void 0 ? void 0 : opts.length) && opt.isLeaf !== false && setVisible(false);
     setMenus(newMenus);
     loadData && opt.isLeaf === false && !(opts === null || opts === void 0 ? void 0 : opts.length) && loadData(selectedOptions);
   };
 
+  var onMultipleChecked = function onMultipleChecked(opt, checked) {
+    var _a;
+
+    var checkState = getAllCheckedKeys(opt.value, checked, checkedKeys, keysData, halfCheckedKeys);
+    var newValue = getMultipleCheckValue(value, opt, checked, flattenData, checkState.checkedKeys);
+    var newMultipleOptions = newValue === null || newValue === void 0 ? void 0 : _mapInstanceProperty(newValue).call(newValue, function (item) {
+      return Array.isArray(item) ? _mapInstanceProperty(item).call(item, function (key) {
+        return keysData[key];
+      }) : [];
+    });
+
+    if (!('value' in props)) {
+      setValue(newValue);
+    }
+
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue, newMultipleOptions);
+  };
+
   var onChange = function onChange(selectedOptions) {
-    var selectedValue = _mapInstanceProperty(selectedOptions).call(selectedOptions, function (_ref2) {
-      var value = _ref2[fieldNames.value];
+    var selectedValue = _mapInstanceProperty(selectedOptions).call(selectedOptions, function (_ref3) {
+      var value = _ref3[fieldNames.value];
       return value;
     });
 
@@ -216,24 +412,21 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           label = opt[fieldNames.label],
           children = opt[fieldNames.children];
       var expendEvent = expandTrigger === 'click' || !(children && children.length) ? 'onClick' : 'onMouseEnter';
+      var selected = selectedOptions[index] && selectedOptions[index][fieldNames.value] === value;
       var optionProps = {
         role: 'menuitem',
         className: classNames("".concat(prefixCls, "-menu-item"), {
           disabled: opt.disabled,
           last: !(children === null || children === void 0 ? void 0 : children.length) && isLeaf !== false,
-          selected: selectedOptions[index] && selectedOptions[index][fieldNames.value] === value
+          selected: selected
         })
       };
 
       if (!opt.disabled) {
-        optionProps[expendEvent] = onExpend.bind(null, index, opt, children);
+        optionProps[expendEvent] = isMultiple ? onMultipleExpend.bind(null, index, opt, children) : onExpend.bind(null, index, opt, children);
       }
 
-      return /*#__PURE__*/React.createElement("li", _extends({
-        key: value
-      }, optionProps, {
-        title: label
-      }), /*#__PURE__*/React.createElement("span", {
+      var node = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
         className: "".concat(prefixCls, "-menu-item-label")
       }, label), loading ? /*#__PURE__*/React.createElement(Icon, {
         type: "loadding-circle",
@@ -241,6 +434,19 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }) : ((children === null || children === void 0 ? void 0 : children.length) || isLeaf === false) && (props.expandIcon || /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right"
       })));
+      return /*#__PURE__*/React.createElement("li", _extends({
+        key: value
+      }, optionProps, {
+        title: label
+      }), isMultiple ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+        checked: getChecked(checkedKeys, value),
+        indeterminate: getHalfChecked(halfCheckedKeys, value),
+        disabled: opt.disabled,
+        onChange: function onChange(e) {
+          return onMultipleChecked(opt, e.target.checked);
+        },
+        className: "".concat(prefixCls, "-checkbox")
+      }), node) : node);
     }));
   }) : /*#__PURE__*/React.createElement(Empty, {
     description: notFoundContent

package/es/cascader/style/index.css

@@ -114,11 +114,11 @@
   border-color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:focus > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker:focus > .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker:hover > .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker:hover > .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input {
@@ -126,7 +126,7 @@
   border-color: var(--kd-g-color-border-strong, #d9d9d9);
 }
 .kd-cascader-picker.disabled .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker.disabled .kd-cascader-picker-input i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-text-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
 .kd-cascader-picker-label {
@@ -157,13 +157,13 @@
 .kd-cascader-picker-input.expand {
   border-color: var(--kd-c-cascader-color-active, #999);
 }
-.kd-cascader-picker-input.expand i[class*="kdicon"] {
+.kd-cascader-picker-input.expand i[class*='kdicon'] {
   color: var(--kd-c-cascader-color-active, #999);
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
 .kd-cascader-picker-input .kd-input-suffix,
-.kd-cascader-picker-input i[class*="kdicon"] {
+.kd-cascader-picker-input i[class*='kdicon'] {
   -webkit-transition: all 0.2s;
   transition: all 0.2s;
 }
@@ -188,7 +188,7 @@
   opacity: 0;
   cursor: pointer;
   visibility: hidden;
-  color: var(--kd-c-cascader-clear-color-text, #d9d9d9);
+  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
   -webkit-transition: all 0.1s;
   transition: all 0.1s;
   -webkit-transform-origin: 50% 50%;
@@ -241,6 +241,9 @@
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   padding: 0 var(--kd-c-cascader-menu-item-spacing-padding-horizontal, 12px);
   line-height: var(--kd-c-cascader-menu-item-sizing-height, 32px);
   cursor: pointer;
@@ -267,6 +270,141 @@
 .kd-cascader-menus .kd-cascader-menu-item.last .kd-cascader-menu-item-label {
   width: 92px;
 }
+.kd-cascader-menus .kd-cascader-menu-item .kd-cascader-checkbox {
+  margin-right: 5px;
+}
 .kd-cascader-menus .kd-empty {
   padding: 10px 0 20px;
 }
+.kd-cascader-bordered {
+  border: 1px solid #d9d9d9;
+  padding-left: 8px !important;
+  border-radius: 2px;
+}
+.kd-cascader-multiple {
+  padding: 1px 28px 1px 0;
+  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
+  min-height: 30px;
+  max-height: 100px;
+  color: #212121;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  border-bottom: 1px solid #d9d9d9;
+}
+.kd-cascader-multiple-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  width: 100%;
+}
+.kd-cascader-placeholder {
+  position: absolute;
+  color: #999;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.kd-cascader-suffix {
+  right: 0;
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 0;
+      -ms-flex: 0;
+          flex: 0;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-left: 8px;
+}
+.kd-cascader-selection-tag {
+  max-width: 100%;
+}
+.kd-cascader-multiple:hover .kd-cascader-icon-clear {
+  opacity: 1;
+}
+.kd-cascader-icon-arrow {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+}
+.kd-cascader-icon-arrow-up {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-cascader-icon-arrow-down {
+  -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+  -webkit-transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+  transition: transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(0.3s - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-cascader-icon-arrow-focus {
+  color: var(--kd-c-cascader-color-border-foucs, var(--kd-g-color-theme, #5582f3));
+}
+.kd-cascader-icon-clear {
+  opacity: 0;
+  z-index: 1;
+  position: absolute;
+  background: #fff;
+  -webkit-transition: opacity 0.15s ease;
+  transition: opacity 0.15s ease;
+  color: var(--kd-c-cascader-icon-clear-color-text, #d9d9d9);
+}
+.kd-cascader-icon-clear:hover {
+  color: var(--kd-c-cascader-icon-clear-color-text-hover, #999);
+}
+.kd-cascader-tag-describe {
+  font-size: 12px;
+  height: 20px;
+  line-height: 18px;
+  margin: 2px 8px 2px 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.kd-cascader-tag-describe-content {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  vertical-align: middle;
+  padding: 0 7px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border: 1px solid #ccc;
+  color: #212121;
+}