@kdcloudjs/kdesign 1.0.2

package/lib/filter/scheme.js

@@ -0,0 +1,352 @@
+"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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _dropdown = _interopRequireDefault(require("../dropdown"));
+
+var _select = _interopRequireDefault(require("../select"));
+
+var _option = _interopRequireDefault(require("../select/option"));
+
+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 SchemeFilter = function SchemeFilter(props) {
+  var _context, _context5;
+
+  var value = props.value,
+      prefixCls = props.prefixCls,
+      fields = props.fields,
+      FilterLangMsg = props.FilterLangMsg,
+      onSchemeSearch = props.onSchemeSearch,
+      onSchemeSave = props.onSchemeSave,
+      getSchemeSettingMenu = props.getSchemeSettingMenu;
+
+  var _React$useState = React.useState(props.schemes || []),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      schemes = _React$useState2[0],
+      setSchemes = _React$useState2[1];
+
+  React.useEffect(function () {
+    props.schemes !== undefined && setSchemes(props.schemes);
+  }, [props.schemes]);
+  var defaultItems = (0, _map.default)(_context = (0, _filter.default)(fields).call(fields, function (_ref) {
+    var required = _ref.required;
+    return required;
+  })).call(_context, function (_ref2) {
+    var name = _ref2.name,
+        operators = _ref2.operators,
+        assignOptions = _ref2.assignOptions;
+
+    var _a;
+
+    var operator = operators === null || operators === void 0 ? void 0 : operators.props.defaultValue;
+    var defaultValue = (_a = assignOptions[operator] || assignOptions.default) === null || _a === void 0 ? void 0 : _a.props.defaultValue;
+    return {
+      operator: operator,
+      fieldName: name,
+      required: true,
+      value: defaultValue
+    };
+  });
+  var defaultScheme = {
+    name: '',
+    items: defaultItems
+  };
+
+  var _React$useState3 = React.useState(value.scheme || defaultScheme),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      scheme = _React$useState4[0],
+      setScheme = _React$useState4[1];
+
+  React.useEffect(function () {
+    var _context2;
+
+    var nextScheme = (0, _cloneDeep.default)(value.scheme || defaultScheme);
+    nextScheme.items = (0, _map.default)(_context2 = nextScheme.items).call(_context2, function (item) {
+      var field = (0, _find.default)(fields).call(fields, function (_ref3) {
+        var name = _ref3.name;
+        return name === item.fieldName;
+      });
+      item.required = field === null || field === void 0 ? void 0 : field.required;
+      return item;
+    });
+    setScheme(nextScheme); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  React.useEffect(function () {
+    var nextScheme = (0, _find.default)(schemes).call(schemes, function (_ref4) {
+      var name = _ref4.name;
+      return name === scheme.name;
+    });
+
+    if (!nextScheme && value.scheme) {
+      setScheme(defaultScheme);
+      onSchemeSearch && onSchemeSearch(defaultScheme);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [schemes]);
+
+  var handleSwitchScheme = function handleSwitchScheme(name) {
+    var _context3;
+
+    var nextScheme = (0, _cloneDeep.default)((0, _find.default)(schemes).call(schemes, function (scheme) {
+      return name === scheme.name;
+    }));
+    nextScheme.items = (0, _map.default)(_context3 = nextScheme.items).call(_context3, function (item) {
+      var field = (0, _find.default)(fields).call(fields, function (_ref5) {
+        var name = _ref5.name;
+        return name === item.fieldName;
+      });
+      if (field === null || field === void 0 ? void 0 : field.required) item.required = field === null || field === void 0 ? void 0 : field.required;
+      return item;
+    });
+    setScheme(nextScheme);
+    onSchemeSearch && onSchemeSearch(nextScheme);
+  };
+
+  var handleAddCondition = function handleAddCondition() {
+    var _a;
+
+    if (fields.length) {
+      var nextScheme = (0, _cloneDeep.default)(scheme);
+      var _fields$filter$ = (0, _filter.default)(fields).call(fields, function (_ref6) {
+        var required = _ref6.required;
+        return !required;
+      })[0],
+          fieldName = _fields$filter$.name,
+          operators = _fields$filter$.operators,
+          assignOptions = _fields$filter$.assignOptions;
+      var operator = operators === null || operators === void 0 ? void 0 : operators.props.defaultValue;
+      var defaultValue = (_a = assignOptions[operator] || assignOptions.default) === null || _a === void 0 ? void 0 : _a.props.defaultValue;
+      nextScheme.items.push({
+        operator: operator,
+        fieldName: fieldName,
+        value: defaultValue
+      });
+      setScheme(nextScheme);
+    }
+  };
+
+  var handleDeleteCondition = function handleDeleteCondition(index) {
+    var _context4;
+
+    var nextScheme = (0, _cloneDeep.default)(scheme);
+    (0, _splice.default)(_context4 = nextScheme.items).call(_context4, index, 1);
+    setScheme(nextScheme);
+  };
+
+  var handleChangeField = function handleChangeField(index, fieldName) {
+    var _a;
+
+    var nextScheme = (0, _cloneDeep.default)(scheme);
+
+    var _fields$find = (0, _find.default)(fields).call(fields, function (_ref7) {
+      var name = _ref7.name;
+      return name === fieldName;
+    }),
+        operators = _fields$find.operators,
+        assignOptions = _fields$find.assignOptions;
+
+    var operator = operators === null || operators === void 0 ? void 0 : operators.props.defaultValue;
+    var defaultValue = (_a = assignOptions[operator] || assignOptions.default) === null || _a === void 0 ? void 0 : _a.props.defaultValue;
+    nextScheme.items[index] = {
+      operator: operator,
+      fieldName: fieldName,
+      value: defaultValue
+    }; // debugger
+
+    setScheme(nextScheme);
+  };
+
+  var handleChangeOperator = function handleChangeOperator(index, assignOptions, operator) {
+    var _a;
+
+    var nextScheme = (0, _cloneDeep.default)(scheme);
+    var defaultValue = (_a = assignOptions[operator] || assignOptions.default) === null || _a === void 0 ? void 0 : _a.props.defaultValue;
+    nextScheme.items[index] = (0, _extends2.default)((0, _extends2.default)({}, nextScheme.items[index]), {
+      operator: operator,
+      value: defaultValue
+    });
+    setScheme(nextScheme);
+  };
+
+  var handleChangeOption = function handleChangeOption(index, value) {
+    var nextScheme = (0, _cloneDeep.default)(scheme);
+    nextScheme.items[index] = (0, _extends2.default)((0, _extends2.default)({}, nextScheme.items[index]), {
+      value: value
+    });
+    setScheme(nextScheme);
+  };
+
+  var handleChangeSchemeName = function handleChangeSchemeName(e) {
+    var nextScheme = (0, _cloneDeep.default)(scheme);
+    nextScheme.name = e.target.value;
+    setScheme(nextScheme);
+  };
+
+  var handleSearch = function handleSearch() {
+    onSchemeSearch && onSchemeSearch(scheme);
+  };
+
+  var SettingMenu = getSchemeSettingMenu && getSchemeSettingMenu(scheme);
+  return /*#__PURE__*/React.createElement("ul", {
+    className: (0, _classnames.default)("".concat(prefixCls, "-body-scheme"), {
+      active: props.tab === 'scheme'
+    })
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-body-scheme-label")
+  }, FilterLangMsg.commonScheme, ":"), /*#__PURE__*/React.createElement("ol", {
+    className: "".concat(prefixCls, "-body-scheme-list")
+  }, (0, _map.default)(schemes).call(schemes, function (_ref8) {
+    var name = _ref8.name;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      React.createElement("li", {
+        key: name,
+        className: (0, _classnames.default)("".concat(prefixCls, "-body-scheme-item"), {
+          active: name === scheme.name
+        }),
+        onClick: handleSwitchScheme.bind(null, name)
+      }, name)
+    );
+  })), SettingMenu && scheme.name && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body-scheme-action")
+  }, /*#__PURE__*/React.createElement(_dropdown.default, {
+    menu: SettingMenu,
+    trigger: "click",
+    placement: "bottomRight"
+  }, /*#__PURE__*/React.createElement(_button.default, {
+    type: "ghost",
+    size: "small"
+  }, FilterLangMsg.settings)))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-body-scheme-label")
+  }, FilterLangMsg.advancedQuery, "\uFF1A"), /*#__PURE__*/React.createElement("ol", {
+    className: "".concat(prefixCls, "-body-scheme-detail")
+  }, (0, _map.default)(_context5 = scheme.items).call(_context5, function (_ref9, index) {
+    var fieldName = _ref9.fieldName,
+        operator = _ref9.operator,
+        value = _ref9.value,
+        required = _ref9.required;
+    var field = (0, _find.default)(fields).call(fields, function (_ref10) {
+      var name = _ref10.name;
+      return name === fieldName;
+    });
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-body-scheme-detail-field")
+    }, required ? field === null || field === void 0 ? void 0 : field.label : /*#__PURE__*/React.createElement(_select.default, {
+      borderType: "bordered",
+      style: {
+        width: '100%'
+      },
+      value: fieldName,
+      onChange: handleChangeField.bind(null, index)
+    }, (0, _map.default)(fields).call(fields, function (_ref11) {
+      var name = _ref11.name,
+          label = _ref11.label;
+      return /*#__PURE__*/React.createElement(_option.default, {
+        key: name,
+        value: name,
+        title: label
+      }, label);
+    }))), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-body-scheme-detail-operator")
+    }, (field === null || field === void 0 ? void 0 : field.operators) && /*#__PURE__*/React.cloneElement(field.operators, {
+      value: operator,
+      style: {
+        width: '100%'
+      },
+      onChange: handleChangeOperator.bind(null, index, field.assignOptions)
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-body-scheme-detail-value")
+    }, (field === null || field === void 0 ? void 0 : field.assignOptions) && /*#__PURE__*/React.cloneElement(field.assignOptions[operator] || field.assignOptions.default, {
+      value: value,
+      style: {
+        width: '100%'
+      },
+      onChange: handleChangeOption.bind(null, index)
+    })), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-body-scheme-detail-and")
+    }, FilterLangMsg.and), !required && /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-body-scheme-detail-delete"),
+      onClick: handleDeleteCondition.bind(null, index)
+    }, /*#__PURE__*/React.createElement(_icon.default, {
+      type: "close-solid"
+    })));
+  }), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(_button.default, {
+    type: "primary",
+    ghost: true,
+    size: "small",
+    onClick: handleAddCondition
+  }, /*#__PURE__*/React.createElement(_icon.default, {
+    type: "add",
+    style: {
+      verticalAlign: 'top',
+      marginRight: 5
+    }
+  }), FilterLangMsg.addCondition)))), onSchemeSave && /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-body-scheme-label")
+  }, FilterLangMsg.schemeName, "\uFF1A"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body-scheme-edit")
+  }, /*#__PURE__*/React.createElement(_input.default, {
+    borderType: "bordered",
+    placeholder: FilterLangMsg.schemeNamePlaceholder,
+    style: {
+      width: 200
+    },
+    value: scheme.name,
+    onChange: handleChangeSchemeName
+  }), /*#__PURE__*/React.createElement(_button.default, {
+    type: "ghost",
+    style: {
+      marginLeft: 12
+    },
+    onClick: onSchemeSave.bind(null, scheme)
+  }, FilterLangMsg.saveScheme)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(prefixCls, "-body-scheme-action")
+  }, /*#__PURE__*/React.createElement(_button.default, {
+    type: "primary",
+    onClick: handleSearch
+  }, FilterLangMsg.query))));
+};
+
+var _default = SchemeFilter;
+exports.default = _default;

package/lib/filter/style/css.js

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

package/lib/filter/style/index.css

@@ -0,0 +1,345 @@
+/* -----------  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 */
+/* -----------  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 */
+/* 多行显示省略号 */
+/* 单行显示省略号 */
+/** 浮层箭头样式 **/
+.kd-filter .kd-filter-header {
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  padding: 9px 124px 9px 0;
+}
+.kd-filter .kd-filter-header-title {
+  white-space: nowrap;
+  color: #212121;
+  font-size: 16px;
+}
+.kd-filter .kd-filter-header-condition {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  margin: 0 8px 0 40px;
+}
+.kd-filter .kd-filter-header-condition-label {
+  padding-right: 8px;
+  font-size: 14px;
+  white-space: nowrap;
+  color: #999;
+}
+.kd-filter .kd-filter-header-condition-item-text {
+  max-width: 224px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.kd-filter .kd-filter-header-search {
+  min-width: 200px;
+}
+.kd-filter .kd-filter-header-handle {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-variant: tabular-nums;
+  list-style: none;
+  -webkit-font-feature-settings: 'tnum';
+          font-feature-settings: 'tnum';
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  width: 100px;
+  height: 44px;
+  line-height: 44px;
+  text-align: center;
+  color: #276ff5;
+  font-size: 14px;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  border: 1px solid transparent;
+  border-bottom: none;
+}
+.kd-filter .kd-filter-header-handle > i {
+  -webkit-transition: -webkit-transform 0.2s linear;
+  transition: -webkit-transform 0.2s linear;
+  transition: transform 0.2s linear;
+  transition: transform 0.2s linear, -webkit-transform 0.2s linear;
+}
+.kd-filter .kd-filter-header-handle.spread {
+  border-radius: 4px 4px 0 0;
+  background-color: #fafafa;
+  border-color: #d9d9d9;
+}
+.kd-filter .kd-filter-header-handle.spread > i {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.kd-filter .kd-filter-body {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+}
+.kd-filter .kd-filter-body.spread {
+  height: auto;
+  overflow: visible;
+  padding: 8px 20px;
+  border-radius: 4px 0 4px 4px;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+}
+.kd-filter .kd-filter-body-tabs {
+  border-bottom: 1px solid #e5e5e5;
+}
+.kd-filter .kd-filter-body-tabs-item {
+  padding: 10px 0;
+  font-size: 14px;
+  color: #999;
+  cursor: pointer;
+}
+.kd-filter .kd-filter-body-tabs-item:hover,
+.kd-filter .kd-filter-body-tabs-item.active {
+  color: #276ff5;
+}
+.kd-filter .kd-filter-body-tabs-split {
+  width: 1px;
+  height: 16px;
+  background-color: #d9d9d9;
+}
+.kd-filter .kd-filter-body-conditions {
+  display: none;
+}
+.kd-filter .kd-filter-body-conditions.active {
+  display: block;
+}
+.kd-filter .kd-filter-body-condition {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 12px;
+}
+.kd-filter .kd-filter-body-condition:not(:last-child) {
+  border-bottom: 1px solid #e5e5e5;
+}
+.kd-filter .kd-filter-body-condition-label {
+  padding: 11px 0 10px;
+  color: #999;
+  line-height: 18px;
+}
+.kd-filter .kd-filter-body-condition-options {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  max-height: 64px;
+  margin-left: 24px;
+  padding: 8px 0 4px;
+  overflow: auto;
+}
+.kd-filter .kd-filter-body-condition-option {
+  margin-bottom: 4px;
+  padding: 0 12px;
+  color: #666;
+  vertical-align: middle;
+  line-height: 22px;
+  font-size: 12px;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.kd-filter .kd-filter-body-condition-option:not(:last-child) {
+  margin-right: 24px;
+}
+.kd-filter .kd-filter-body-condition-option.active {
+  color: #276ff5;
+  border-color: #276ff5;
+  background-color: #fff;
+}
+.kd-filter .kd-filter-body-condition-option-customer {
+  margin-left: -20px;
+}
+.kd-filter .kd-filter-body-condition-addition {
+  margin-left: 24px;
+  line-height: 40px;
+}
+.kd-filter .kd-filter-body-scheme {
+  display: none;
+}
+.kd-filter .kd-filter-body-scheme.active {
+  display: block;
+}
+.kd-filter .kd-filter-body-scheme > li {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  line-height: 40px;
+}
+.kd-filter .kd-filter-body-scheme-label {
+  width: 96px;
+  color: #999;
+  font-size: 12px;
+}
+.kd-filter .kd-filter-body-scheme-list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.kd-filter .kd-filter-body-scheme-item {
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+}
+.kd-filter .kd-filter-body-scheme-item:not(:last-child) {
+  margin-right: 48px;
+}
+.kd-filter .kd-filter-body-scheme-item.active {
+  color: #276ff5;
+}
+.kd-filter .kd-filter-body-scheme-action {
+  position: absolute;
+  right: 0;
+}
+.kd-filter .kd-filter-body-scheme-detail > li {
+  line-height: 40px;
+  color: #212121;
+  font-size: 12px;
+}
+.kd-filter .kd-filter-body-scheme-detail > li > span {
+  display: inline-block;
+}
+.kd-filter .kd-filter-body-scheme-detail > li > span:not(:last-child) {
+  margin-right: 12px;
+}
+.kd-filter .kd-filter-body-scheme-detail-field {
+  width: 100px;
+}
+.kd-filter .kd-filter-body-scheme-detail-operator {
+  width: 140px;
+}
+.kd-filter .kd-filter-body-scheme-detail-value {
+  width: 220px;
+}
+.kd-filter .kd-filter-body-scheme-detail-and {
+  font-size: 14px;
+}
+.kd-filter .kd-filter-body-scheme-detail-delete {
+  color: #b2b2b2;
+  font-size: 20px;
+  cursor: pointer;
+}
+.kd-filter .kd-filter-body-scheme-detail-delete:hover {
+  color: #fb2323;
+}