@fonixtree/magic-design 2.0.99 → 2.0.100

package/es/common/ProductFilterModal/components/FilterSearchModal/index.js

@@ -0,0 +1,244 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _locale = require("../../../../locale");
+
+var _Iconfont = _interopRequireDefault(require("../../../Iconfont"));
+
+var _Tag = _interopRequireDefault(require("../../../Tag"));
+
+var _Button = _interopRequireDefault(require("../../../Button"));
+
+var _PopUpModal = _interopRequireDefault(require("../../../PopUpModal"));
+
+require("./index.less");
+
+var _notFound = _interopRequireDefault(require("./imgs/notFound.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var AComponent =
+/** @class */
+function (_super) {
+  __extends(AComponent, _super);
+
+  function AComponent(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.inputRef = /*#__PURE__*/_react["default"].createRef(); // componentWillUnmount = () => {
+    //   this.setState({
+    //     searchValue: '',
+    //   });
+    // };
+
+    _this.onSearch = function () {
+      _this.setState({
+        searchValue: _this.inputRef.current.value
+      });
+    };
+
+    _this.onClear = function () {
+      _this.inputRef.current.value = '';
+
+      _this.setState({
+        searchValue: '',
+        showClear: false
+      });
+    };
+
+    _this.onTagClick = function (selected, key, multi) {
+      var value = _this.state.value;
+      var selList = value ? value.split(',') : [];
+
+      if (multi) {
+        // 多选
+        if (selected) {
+          selList.push(key);
+        } else {
+          selList = selList.filter(function (sel) {
+            return sel !== String(key);
+          });
+        }
+      } else if (selected) {
+        selList = [key];
+      } else {
+        selList = [];
+      }
+
+      var valString = selList.join(',');
+
+      _this.setState({
+        value: valString
+      });
+    };
+
+    _this.onOkClick = function () {
+      var onOk = _this.props.onOk;
+      var value = _this.state.value;
+      console.log(value);
+      onOk(value);
+    };
+
+    _this.state = {
+      searchValue: '',
+      // showClear: false,
+      value: ''
+    };
+    return _this;
+  }
+
+  AComponent.prototype.componentWillReceiveProps = function (nextProps) {
+    if (nextProps.value !== this.state.value) {
+      this.setState({
+        value: nextProps.value,
+        searchValue: ''
+      });
+    }
+  };
+
+  AComponent.prototype.render = function () {
+    var _this = this;
+
+    var _a = this.state,
+        searchValue = _a.searchValue,
+        showClear = _a.showClear,
+        value = _a.value;
+    var _b = this.props,
+        visible = _b.visible,
+        onClose = _b.onClose,
+        source = _b.source,
+        filterInfo = _b.filterInfo;
+
+    var _c = filterInfo || {},
+        title = _c.title,
+        idKey = _c.idKey,
+        showKey = _c.showKey,
+        multi = _c.multi;
+
+    var list = source || [];
+
+    var _list = searchValue ? list.filter(function (f) {
+      return f[showKey].indexOf(searchValue) > -1;
+    }) : list;
+
+    return /*#__PURE__*/_react["default"].createElement(_PopUpModal["default"], {
+      bodyStyle: {
+        height: '80vh'
+      },
+      destroyOnClose: true,
+      visible: visible
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "classificationDetailModal"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "headerWrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      className: "iconBack",
+      onClick: function onClick() {
+        onClose();
+
+        _this.onClear();
+      },
+      size: 20,
+      type: "icon-arrow-left"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "headerTitle"
+    }, title)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "searchWrap"
+    }, /*#__PURE__*/_react["default"].createElement("input", {
+      ref: this.inputRef,
+      onChange: function onChange(e) {
+        return _this.setState({
+          showClear: !!e.target.value
+        });
+      },
+      onKeyDown: function onKeyDown(e) {
+        if (e.nativeEvent.keyCode === 13) _this.onSearch();
+      },
+      placeholder: "Search",
+      type: "text"
+    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#696973",
+      onClick: this.onSearch,
+      size: 20,
+      type: "icon-search"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "contentWrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "listWrap"
+    }, _list.map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: value === null || value === void 0 ? void 0 : value.split(',').includes(String(item[idKey])),
+        name: item[showKey],
+        onChange: function onChange(selected) {
+          _this.onTagClick(selected, item[idKey], multi);
+        }
+      });
+    }), _list.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "notFoundWrap"
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: _notFound["default"]
+    }), /*#__PURE__*/_react["default"].createElement("p", null, "Sorry, we couldn't find \"", searchValue, "\"")))), _list.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "bottomWrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: this.onOkClick
+    }, (0, _locale.i18n)('OK')))));
+  };
+
+  return AComponent;
+}(_react.Component);
+
+AComponent.propTypes = {
+  visible: _propTypes["default"].bool,
+  onClose: _propTypes["default"].func,
+  onOk: _propTypes["default"].func,
+  value: _propTypes["default"].string
+};
+AComponent.defaultProps = {
+  visible: false,
+  onClose: function onClose() {},
+  onOk: function onOk() {},
+  value: ''
+};
+var _default = AComponent;
+exports["default"] = _default;

package/es/common/ProductFilterModal/index.js

@@ -0,0 +1,366 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _locale = require("../../locale");
+
+require("./index.less");
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _PopUpModal = _interopRequireDefault(require("../PopUpModal"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FilterSearchModal = _interopRequireDefault(require("./components/FilterSearchModal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+function ProductFilterModal(props) {
+  var _a;
+
+  var visible = props.visible,
+      filterObj = props.filterObj,
+      onClose = props.onClose,
+      onChange = props.onChange,
+      _b = props.value,
+      value = _b === void 0 ? {} : _b;
+
+  var _c = (0, _react.useState)({}),
+      condValue = _c[0],
+      setCondValue = _c[1];
+
+  var _d = (0, _react.useState)(''),
+      detailKey = _d[0],
+      setDetailKey = _d[1];
+
+  var _e = (0, _react.useState)(false),
+      searchVisible = _e[0],
+      setSearchVisible = _e[1];
+
+  var serviceIds = condValue.serviceIds,
+      brandIds = condValue.brandIds,
+      catgIds = condValue.catgIds,
+      startPrice = condValue.startPrice,
+      endPrice = condValue.endPrice,
+      evaluationAvgs = condValue.evaluationAvgs,
+      offerAttrValues = condValue.offerAttrValues;
+  (0, _react.useEffect)(function () {
+    setCondValue(value);
+  }, [value]);
+  var keyInfo = {
+    serviceIds: {
+      title: (0, _locale.i18n)('SERVICE'),
+      callbackKey: 'serviceList',
+      idKey: 'serviceId',
+      showKey: 'serviceName',
+      selectedList: (serviceIds === null || serviceIds === void 0 ? void 0 : serviceIds.split(',')) || [],
+      multi: true
+    },
+    catgIds: {
+      title: (0, _locale.i18n)('CATEGORY'),
+      callbackKey: 'catgList',
+      idKey: 'catgId',
+      showKey: 'catgName',
+      selectedList: (catgIds === null || catgIds === void 0 ? void 0 : catgIds.split(',')) || [],
+      multi: false
+    },
+    brandIds: {
+      title: (0, _locale.i18n)('BRANDS'),
+      callbackKey: 'brandList',
+      idKey: 'brandId',
+      showKey: 'brandName',
+      selectedList: (brandIds === null || brandIds === void 0 ? void 0 : brandIds.split(',')) || [],
+      multi: true
+    }
+  };
+
+  var tagSelect = function tagSelect(key, tagValue, selected, multi) {
+    var _a;
+
+    if (!multi) {
+      // 单选
+      if (selected) {
+        condValue[key] = String(tagValue);
+      } else {
+        condValue[key] = '';
+      }
+
+      setCondValue(__assign({}, condValue));
+    } else {
+      // 多选
+      var temp = ((_a = condValue[key]) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+
+      if (selected) {
+        temp.push(tagValue);
+      } else {
+        temp = temp.filter(function (val) {
+          return val !== String(tagValue);
+        });
+      }
+
+      condValue[key] = temp.join(',');
+    }
+
+    setCondValue(__assign({}, condValue));
+  };
+
+  var isAttrValueActive = function isAttrValueActive(attrId, attrValue) {
+    var _a;
+
+    var find = offerAttrValues === null || offerAttrValues === void 0 ? void 0 : offerAttrValues.find(function (attr) {
+      return attr.attrId === attrId;
+    });
+
+    if (find && ((_a = find.attrValue) === null || _a === void 0 ? void 0 : _a.includes(attrValue))) {
+      return true;
+    }
+
+    return false;
+  };
+
+  var onAttrChange = function onAttrChange(attrId, item, selected) {
+    var newOfferAttrValues = offerAttrValues ? __spreadArrays(offerAttrValues) : [];
+
+    if (selected) {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+
+      if (find) {
+        var split = find.attrValue.split(',');
+        split.push(item);
+        find.attrValue = split.join(',');
+      } else {
+        newOfferAttrValues.push({
+          attrId: attrId,
+          attrValue: item
+        });
+      }
+    } else {
+      var find = newOfferAttrValues === null || newOfferAttrValues === void 0 ? void 0 : newOfferAttrValues.find(function (attr) {
+        return attr.attrId === attrId;
+      });
+      find.attrValue = find.attrValue.split(',').filter(function (val) {
+        return val !== item;
+      }).join(',');
+    }
+
+    setCondValue(__assign(__assign({}, condValue), {
+      offerAttrValues: newOfferAttrValues
+    }));
+  };
+
+  var onApply = function onApply() {
+    var _a;
+
+    var params = __assign({}, condValue);
+
+    var filterAttr = (_a = condValue.offerAttrValues) === null || _a === void 0 ? void 0 : _a.filter(function (attr) {
+      return !!attr.attrValue;
+    });
+    params.offerAttrValues = (filterAttr === null || filterAttr === void 0 ? void 0 : filterAttr.length) ? filterAttr : null;
+    Object.keys(params).forEach(function (key) {
+      if (!params[key]) {
+        Reflect.deleteProperty(params, key);
+      }
+    });
+    onChange(params);
+  };
+
+  var onReset = function onReset() {
+    onChange({});
+  };
+
+  var onShowMore = function onShowMore(key) {
+    setDetailKey(key);
+    setSearchVisible(true);
+  };
+
+  var onFilterSearchOk = function onFilterSearchOk(val) {
+    var _a;
+
+    var newParams = __assign(__assign({}, condValue), (_a = {}, _a[detailKey] = val, _a));
+
+    setCondValue(newParams);
+    setSearchVisible(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_PopUpModal["default"], {
+    bodyStyle: {
+      height: '80vh'
+    },
+    hideCloseBtn: true,
+    onClose: onClose,
+    visible: visible
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "productFilterWrap"
+  }, ['serviceIds', 'catgIds', 'brandIds'].map(function (key) {
+    var _a;
+
+    var _b = keyInfo[key],
+        title = _b.title,
+        idKey = _b.idKey,
+        showKey = _b.showKey,
+        selectedList = _b.selectedList,
+        multi = _b.multi;
+    return filterObj[key] && ((_a = filterObj[key]) === null || _a === void 0 ? void 0 : _a.length) > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, filterObj[key].slice(0, 10).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: selectedList.indexOf(String(item[idKey])) > -1,
+        name: item[showKey],
+        onChange: function onChange(selected) {
+          tagSelect(key, item[idKey], selected, multi);
+        }
+      });
+    }), filterObj[key].length > 10 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btnMore",
+      onClick: function onClick() {
+        onShowMore(key);
+      }
+    }, "Show More")));
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('PRICE')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "inputWrap"
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        startPrice: e.target.value
+      }));
+    },
+    placeholder: "Min",
+    type: "number",
+    value: startPrice || ''
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "divider"
+  }), /*#__PURE__*/_react["default"].createElement("input", {
+    onChange: function onChange(e) {
+      return setCondValue(__assign(__assign({}, condValue), {
+        endPrice: e.target.value
+      }));
+    },
+    placeholder: "Max",
+    type: "number",
+    value: endPrice || ''
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "item"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, (0, _locale.i18n)('RATINGS')), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "accordionContentWrap"
+  }, ['1', '2', '3', '4', '5'].map(function (item) {
+    return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: evaluationAvgs === item,
+      name: item + " " + (0, _locale.i18n)('STAR'),
+      onChange: function onChange(selected) {
+        setCondValue(__assign(__assign({}, condValue), {
+          evaluationAvgs: selected ? item : ''
+        }));
+      }
+    });
+  }))), filterObj.offerAttrValues && ((_a = filterObj.offerAttrValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && filterObj.offerAttrValues.map(function (attr) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "item",
+      header: attr.attrName
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, attr.attrName), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "accordionContentWrap"
+    }, attr.attrValues && attr.attrValues.split(',').map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+        active: isAttrValueActive(attr.attrId, item),
+        name: item,
+        onChange: function onChange(selected) {
+          onAttrChange(attr.attrId, item, selected);
+        }
+      }, item);
+    })));
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "bottomWrap"
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onReset,
+    plain: true
+  }, (0, _locale.i18n)('RESET')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: onApply,
+    style: {
+      marginLeft: '20px'
+    }
+  }, (0, _locale.i18n)('APPLY'))), /*#__PURE__*/_react["default"].createElement(_FilterSearchModal["default"], {
+    filterInfo: keyInfo[detailKey],
+    onClose: function onClose() {
+      return setSearchVisible(false);
+    },
+    onOk: onFilterSearchOk,
+    source: filterObj[detailKey],
+    value: condValue[detailKey],
+    visible: searchVisible
+  }));
+}
+
+ProductFilterModal.propTypes = {
+  visible: _propTypes["default"].bool,
+  filterObj: _propTypes["default"].object,
+  onClose: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].object
+};
+ProductFilterModal.defaultProps = {
+  visible: false,
+  filterObj: {},
+  onClose: function onClose() {},
+  onChange: function onChange() {},
+  value: {}
+};
+var _default = ProductFilterModal;
+exports["default"] = _default;

package/es/common/Tag/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Tag(props) {
+  var name = props.name,
+      onChange = props.onChange,
+      active = props.active;
+
+  var onClick = function onClick() {
+    onChange(!active);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: (0, _classnames["default"])('m-tagWrap', {
+      active: active
+    }),
+    onClick: onClick
+  }, name);
+}
+
+Tag.propTypes = {
+  name: _propTypes["default"].string,
+  active: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func
+};
+Tag.defaultProps = {
+  name: 'tag',
+  active: false,
+  onChange: function onChange() {}
+};
+var _default = Tag;
+exports["default"] = _default;

package/es/common/Tag/index.less

@@ -1,4 +1,4 @@
-.tagWrap {
+.m-tagWrap {
   padding: 6px 12px;
   border: 1px solid #E4E4E4;
   color: #545454;
@@ -8,9 +8,9 @@
   line-height: 24px;
   margin-right: 15px;
   margin-top: 8px;
-}
 
-.active {
-  color: var(--theme-color);
-  border-color: var(--theme-color);
+  &.active {
+    color: var(--theme-color);
+    border-color: var(--theme-color);
+  }
 }