@nutui/nutui-react-taro 3.0.10 → 3.0.11-patch.0

package/dist/es/packages/address/address.js

@@ -7,13 +7,15 @@ import { View } from "@tarojs/components";
 import { ArrowLeft } from "@nutui/icons-react-taro";
 import Popup from "../popup/index";
 import { ExistRender } from "./existRender";
-import { CustomRender } from "./customRender";
+import { ElevatorRender } from "./elevatorRender";
+import { CascaderRender } from "./cascaderRender";
 import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../hooks/use-props-value";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     defaultValue: [],
-    type: 'custom',
+    type: 'cascader',
     options: [],
     optionKey: {
         textKey: 'text',
@@ -23,6 +25,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     format: {},
     custom: false,
     existList: [],
+    hotList: [],
     height: '200px',
     defaultIcon: null,
     selectIcon: null,
@@ -31,7 +34,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 });
 var InternalAddress = function(props, ref) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), style = _ref.style, className = _ref.className, visible = _ref.visible, defaultVisible = _ref.defaultVisible, defaultValue = _ref.defaultValue, children = _ref.children, type = _ref.type, options = _ref.options, optionKey = _ref.optionKey, format = _ref.format, height = _ref.height, title = _ref.title, existList = _ref.existList, custom = _ref.custom, selectIcon = _ref.selectIcon, defaultIcon = _ref.defaultIcon, closeIcon = _ref.closeIcon, backIcon = _ref.backIcon, onChange = _ref.onChange, onExistSelect = _ref.onExistSelect, onClose = _ref.onClose, onSwitch = _ref.onSwitch, rest = _object_without_properties(_ref, [
+    var _mergeProps = mergeProps(defaultProps, props), style = _mergeProps.style, className = _mergeProps.className, visible = _mergeProps.visible, defaultVisible = _mergeProps.defaultVisible, defaultValue = _mergeProps.defaultValue, children = _mergeProps.children, type = _mergeProps.type, options = _mergeProps.options, optionKey = _mergeProps.optionKey, format = _mergeProps.format, height = _mergeProps.height, title = _mergeProps.title, existList = _mergeProps.existList, custom = _mergeProps.custom, selectIcon = _mergeProps.selectIcon, defaultIcon = _mergeProps.defaultIcon, closeIcon = _mergeProps.closeIcon, backIcon = _mergeProps.backIcon, hotList = _mergeProps.hotList, onChange = _mergeProps.onChange, onExistSelect = _mergeProps.onExistSelect, onClose = _mergeProps.onClose, onSwitch = _mergeProps.onSwitch, rest = _object_without_properties(_mergeProps, [
         "style",
         "className",
         "visible",
@@ -50,6 +53,7 @@ var InternalAddress = function(props, ref) {
         "defaultIcon",
         "closeIcon",
         "backIcon",
+        "hotList",
         "onChange",
         "onExistSelect",
         "onClose",
@@ -76,65 +80,89 @@ var InternalAddress = function(props, ref) {
         setInnerVisible(false);
         onClose && onClose();
     };
-    var renderLeftOnCustomSwitch = function() {
-        return /*#__PURE__*/ React.createElement(React.Fragment, null, custom && /*#__PURE__*/ React.createElement(View, {
+    var renderLeftOnCascaderSwitch = function() {
+        if (!custom) return null;
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-left-icon"),
             onClick: onSwitchModule
         }, /*#__PURE__*/ React.isValidElement(backIcon) ? backIcon : /*#__PURE__*/ React.createElement(ArrowLeft, {
             color: "#cccccc"
-        })));
+        }));
     };
     var selectedExistItem = function(data) {
         onExistSelect && onExistSelect(data);
         handleClose();
     };
     var onSwitchModule = function() {
-        if (currentType === 'exist') {
-            setCurrentType('custom');
-        } else {
-            setCurrentType('exist');
-        }
+        var nextType = currentType === 'exist' ? 'cascader' : 'exist';
+        setCurrentType(nextType);
         onSwitch && onSwitch({
-            type: currentType
+            type: nextType
         });
     };
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, currentType === 'custom' || currentType === 'custom2' ? /*#__PURE__*/ React.createElement(CustomRender, {
-        visible: innerVisible,
-        closeable: true,
-        title: title || locale.address.selectRegion,
-        left: renderLeftOnCustomSwitch(),
-        defaultValue: defaultValue,
-        closeIcon: closeIcon,
-        options: options,
-        format: format,
-        optionKey: optionKey,
-        type: currentType,
-        height: height,
-        onClose: handleClose,
-        onChange: function(val, params) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(val, params);
-        }
-    }) : /*#__PURE__*/ React.createElement(Popup, {
-        visible: innerVisible,
-        position: "bottom",
-        round: true,
-        closeable: true,
-        closeIcon: closeIcon,
-        title: title || locale.address.selectRegion,
-        onClose: handleClose
-    }, /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classPrefix, " ").concat(className || ''),
-        style: _object_spread({}, style)
-    }, // 不需要 close，选中切换即关闭弹框。可手动关闭弹框，只关闭弹框不处理逻辑。
-    /*#__PURE__*/ React.createElement(ExistRender, {
-        type: currentType,
-        existList: existList,
-        selectIcon: selectIcon,
-        defaultIcon: defaultIcon,
-        custom: custom,
-        onSelect: selectedExistItem,
-        onSwitch: onSwitchModule
-    }))));
+    var renderElevator = function() {
+        return /*#__PURE__*/ React.createElement(ElevatorRender, {
+            visible: innerVisible,
+            closeable: true,
+            title: title || locale.address.selectRegion,
+            left: backIcon,
+            defaultValue: defaultValue,
+            closeIcon: closeIcon,
+            options: options,
+            hotList: hotList,
+            format: format,
+            optionKey: optionKey,
+            type: currentType,
+            height: height,
+            onClose: handleClose,
+            onChange: function(val, params) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(val, params);
+            }
+        });
+    };
+    var renderCascator = function() {
+        return /*#__PURE__*/ React.createElement(CascaderRender, {
+            visible: innerVisible,
+            closeable: true,
+            title: title || locale.address.selectRegion,
+            left: renderLeftOnCascaderSwitch(),
+            defaultValue: defaultValue,
+            closeIcon: closeIcon,
+            options: options,
+            format: format,
+            optionKey: optionKey,
+            type: currentType,
+            height: height,
+            onClose: handleClose,
+            onChange: function(val, params) {
+                onChange && onChange(val, params);
+            }
+        });
+    };
+    var renderExist = function() {
+        return /*#__PURE__*/ React.createElement(Popup, {
+            visible: innerVisible,
+            position: "bottom",
+            round: true,
+            closeable: true,
+            closeIcon: closeIcon,
+            title: title || locale.address.selectRegion,
+            onClose: handleClose
+        }, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, " ").concat(className || ''),
+            style: _object_spread({}, style)
+        }, // 不需要 close，选中切换即关闭弹框。可手动关闭弹框，只关闭弹框不处理逻辑。
+        /*#__PURE__*/ React.createElement(ExistRender, {
+            type: currentType,
+            existList: existList,
+            selectIcon: selectIcon,
+            defaultIcon: defaultIcon,
+            custom: custom,
+            onSelect: selectedExistItem,
+            onSwitch: onSwitchModule
+        })));
+    };
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, currentType === 'elevator' ? renderElevator() : null, currentType === 'cascader' ? renderCascator() : null, currentType === 'exist' ? renderExist() : null);
 };
 export var Address = /*#__PURE__*/ forwardRef(InternalAddress);
 Address.displayName = 'NutAddress';

package/dist/es/packages/address/{customRender.d.ts → cascaderRender.d.ts}

@@ -10,4 +10,4 @@ export interface AddressProps extends TaroCascaderProps {
     format: Record<string, string | number | null>;
     height: string | number;
 }
-export declare const CustomRender: FunctionComponent<Partial<AddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue' | 'onChange'>>;
+export declare const CascaderRender: FunctionComponent<Partial<AddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue' | 'onChange'>>;

package/dist/es/packages/address/{customRender.js → cascaderRender.js}

@@ -6,7 +6,7 @@ import { ComponentDefaults } from "../../utils/typings";
 import Cascader from "../cascader/index";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     visible: false,
-    type: 'custom',
+    type: 'cascader',
     options: [],
     optionKey: {
         textKey: 'text',
@@ -16,7 +16,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     format: {},
     height: '200px'
 });
-export var CustomRender = function(props) {
+export var CascaderRender = function(props) {
     var _ref = _object_spread({}, defaultProps, props), children = _ref.children, visible = _ref.visible, type = _ref.type, height = _ref.height, options = _ref.options, title = _ref.title, left = _ref.left, value = _ref.value, defaultValue = _ref.defaultValue, optionKey = _ref.optionKey, format = _ref.format, onClose = _ref.onClose, onChange = _ref.onChange, onPathChange = _ref.onPathChange, rest = _object_without_properties(_ref, [
         "children",
         "visible",
@@ -33,7 +33,7 @@ export var CustomRender = function(props) {
         "onChange",
         "onPathChange"
     ]);
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'custom' && /*#__PURE__*/ React.createElement(Cascader, _object_spread({
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'cascader' && /*#__PURE__*/ React.createElement(Cascader, _object_spread({
         visible: visible,
         value: value,
         defaultValue: defaultValue,

package/dist/es/packages/address/elevatorRender.d.ts

@@ -0,0 +1,14 @@
+import React, { FunctionComponent } from 'react';
+import { CascaderOption, TaroCascaderProps, CascaderValue, CascaderOptionKey, RegionData } from "../../types";
+export interface AddressProps extends TaroCascaderProps {
+    visible: boolean;
+    type: string;
+    options: CascaderOption[];
+    hotList: RegionData[];
+    value: CascaderValue;
+    defaultValue: CascaderValue;
+    optionKey: CascaderOptionKey;
+    format: Record<string, string | number | null>;
+    height: string | number;
+}
+export declare const ElevatorRender: FunctionComponent<Partial<AddressProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'defaultValue' | 'onChange'>>;

package/dist/es/packages/address/elevatorRender.js

@@ -0,0 +1,252 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import React, { useEffect, useMemo, useState } from "react";
+import { View } from "@tarojs/components";
+import Popup from "../popup/index";
+import Elevator from "../elevator/index";
+import { normalizeListOptions, normalizeOptions } from "../cascader/utils";
+import { transformData, findDataByName } from "./utils";
+import { ComponentDefaults } from "../../utils/typings";
+import { mergeProps } from "../../utils/merge-props";
+import { usePropsValue } from "../../hooks/use-props-value";
+import { isEmpty } from "../../utils/is-empty";
+import { useConfig } from "../configprovider/index";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    visible: false,
+    type: 'elevator',
+    options: [],
+    optionKey: {
+        textKey: 'text',
+        valueKey: 'value',
+        childrenKey: 'children'
+    },
+    format: {},
+    height: '200px',
+    activeColor: '',
+    activeIcon: 'checklist',
+    popup: true,
+    closeable: false,
+    closeIconPosition: 'top-right',
+    closeIcon: 'close',
+    lazy: false,
+    hotList: [],
+    onClose: function() {},
+    onChange: function() {},
+    onPathChange: function() {}
+});
+export var ElevatorRender = function(props) {
+    var _mergeProps = mergeProps(defaultProps, props), hotList = _mergeProps.hotList, title = _mergeProps.title, left = _mergeProps.left, optionKey = _mergeProps.optionKey, format = _mergeProps.format, onClose = _mergeProps.onClose, onChange = _mergeProps.onChange, onPathChange = _mergeProps.onPathChange, popup = _mergeProps.popup, _mergeProps_popupProps = _mergeProps.popupProps, popupProps = _mergeProps_popupProps === void 0 ? {} : _mergeProps_popupProps, outerVisible = _mergeProps.visible, outerOptions = _mergeProps.options, outerValue = _mergeProps.value, outerDefaultValue = _mergeProps.defaultValue, closeable = _mergeProps.closeable, closeIconPosition = _mergeProps.closeIconPosition, closeIcon = _mergeProps.closeIcon;
+    var _useConfig = useConfig(), _useConfig_locale = _useConfig.locale, select = _useConfig_locale.select, _useConfig_locale_address = _useConfig_locale.address, hotCity = _useConfig_locale_address.hotCity, selectProvince = _useConfig_locale_address.selectProvince;
+    var classPrefix = 'nut-address';
+    var MAX_LENGTH = 10;
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: outerValue,
+        defaultValue: outerDefaultValue,
+        finalValue: [],
+        onChange: function(value) {
+            onChange(value, []);
+            onPathChange(value, []);
+        }
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var _useState = _sliced_to_array(useState(outerOptions), 2), innerOptions = _useState[0], setInnerOptions = _useState[1];
+    var _useState1 = _sliced_to_array(useState(value), 2), innerValue = _useState1[0], setInnerValue = _useState1[1];
+    var _useState2 = _sliced_to_array(useState([]), 2), elevatorOptions = _useState2[0], setElevatorOptions = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(selectProvince), 2), addressTip = _useState3[0], setAddressTip = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(0), 2), levelIndex = _useState4[0], setLevelIndex = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(0), 2), tabActiveIndex = _useState5[0], setTabActiveIndex = _useState5[1];
+    // 初始化数据，只格式化一次；动态数据todo
+    var options = useMemo(function() {
+        if (!isEmpty(format)) {
+            return transformData(normalizeListOptions(innerOptions, format));
+        }
+        if (!isEmpty(optionKey)) {
+            return transformData(normalizeOptions(innerOptions, optionKey) || []);
+        }
+        return transformData(innerOptions);
+    }, [
+        innerOptions,
+        optionKey,
+        format
+    ]);
+    useEffect(function() {
+        setElevatorOptions(options);
+    }, [
+        options
+    ]);
+    var levels = useMemo(function() {
+        var next = [];
+        var end = false;
+        var currentOptions = options;
+        innerValue.forEach(function(val, index) {
+            var opt = currentOptions === null || currentOptions === void 0 ? void 0 : currentOptions.flatMap(function(o) {
+                return o.list.find(function(item) {
+                    return item.name === val;
+                });
+            }).filter(function(item) {
+                return item !== undefined;
+            })[0];
+            next.push({
+                name: val,
+                children: currentOptions,
+                levelIndex: index,
+                current: index === tabActiveIndex
+            });
+            if (opt === null || opt === void 0 ? void 0 : opt.children) {
+                currentOptions = opt.children;
+            } else {
+                end = true;
+            }
+        });
+        if (!end) {
+            next.push({
+                name: null,
+                children: currentOptions,
+                levels: -1,
+                current: false
+            });
+        }
+        return next;
+    }, [
+        innerValue,
+        options,
+        tabActiveIndex
+    ]);
+    var _usePropsValue1 = _sliced_to_array(usePropsValue({
+        value: outerVisible,
+        defaultValue: undefined,
+        onChange: function(value) {
+            if (value === false) onClose();
+        }
+    }), 2), visible = _usePropsValue1[0], setVisible = _usePropsValue1[1];
+    useEffect(function() {
+        if (!visible) setInnerValue(value);
+    }, [
+        visible,
+        value
+    ]);
+    useEffect(function() {
+        setInnerOptions(outerOptions);
+    }, [
+        outerOptions
+    ]);
+    useEffect(function() {
+        setTabActiveIndex(levels.length - 1);
+        setAddressTip(innerValue.length ? select : selectProvince);
+    }, [
+        innerValue
+    ]);
+    var handleElevatorItemClick = function(elevatorItem, levelIndex) {
+        var _elevatorItem_children;
+        var nextValue = innerValue.slice(0, levelIndex);
+        if (elevatorItem.name) {
+            nextValue[levelIndex] = elevatorItem.name;
+        }
+        setInnerValue(nextValue);
+        if ((_elevatorItem_children = elevatorItem.children) === null || _elevatorItem_children === void 0 ? void 0 : _elevatorItem_children.length) {
+            setElevatorOptions(elevatorItem.children);
+            setLevelIndex(levelIndex + 1);
+        } else {
+            setVisible(false);
+            setValue(nextValue);
+        }
+    };
+    var handleHotItemClick = function(hotItem) {
+        // 通过修改 innerValue 构造 level 数据
+        var distData = findDataByName(options, hotItem.name);
+        // 热门城市主要是一级城市和二级城市，可以扩展。TODO
+        if (distData) {
+            var nextValue = [
+                distData.pName,
+                distData.name
+            ].filter(function(item) {
+                return item !== '';
+            });
+            setInnerValue(nextValue);
+            setElevatorOptions(distData.children);
+            setLevelIndex(nextValue.length);
+        }
+    };
+    var renderTabs = function() {
+        if (!levels.length || !levels[0].name) return null;
+        return /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-selected")
+        }, levels.map(function(item, index) {
+            var _levels_;
+            return /*#__PURE__*/ React.createElement(React.Fragment, {
+                key: "adtabs-".concat(index)
+            }, item.name && /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-selected-item ").concat(item.current ? 'active' : ''),
+                onClick: function() {
+                    var _props_onTabsChange;
+                    (_props_onTabsChange = props.onTabsChange) === null || _props_onTabsChange === void 0 ? void 0 : _props_onTabsChange.call(props, index);
+                    setTabActiveIndex(index);
+                    setLevelIndex(index);
+                    setElevatorOptions(item.children);
+                }
+            }, item.name), ((_levels_ = levels[index + 1]) === null || _levels_ === void 0 ? void 0 : _levels_.name) && /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-selected-border")
+            }, "-"));
+        }));
+    };
+    var renderHotCity = function() {
+        if (levels.length && tabActiveIndex !== 0) return null;
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-title")
+        }, hotCity), /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-hotlist ").concat(hotList.length > MAX_LENGTH ? 'hotlist-more' : '')
+        }, hotList.map(function(item, index) {
+            return /*#__PURE__*/ React.createElement(View, {
+                className: "".concat(classPrefix, "-hotlist-item"),
+                key: "hot-".concat(index),
+                onClick: function() {
+                    return handleHotItemClick(item);
+                }
+            }, item.name);
+        })));
+    };
+    var renderArea = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
+            className: "".concat(classPrefix, "-title")
+        }, addressTip), /*#__PURE__*/ React.createElement(Elevator, {
+            className: "".concat(classPrefix, "-elevator"),
+            list: elevatorOptions,
+            onItemClick: function(key, item) {
+                return handleElevatorItemClick(item, levelIndex);
+            },
+            // height="67%"
+            style: {
+                height: '100%'
+            },
+            height: "93%"
+        }));
+    };
+    var renderContent = function() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, renderTabs(), /*#__PURE__*/ React.createElement(View, {
+            style: {
+                height: innerValue.length ? '80%' : '93%',
+                overflowY: levels.length && tabActiveIndex !== 0 ? 'hidden' : 'auto'
+            }
+        }, renderHotCity(), renderArea()));
+    };
+    return popup ? /*#__PURE__*/ React.createElement(Popup, _object_spread_props(_object_spread({}, popupProps), {
+        visible: visible,
+        position: "bottom",
+        style: {
+            height: '89%'
+        },
+        round: true,
+        closeIcon: closeIcon,
+        closeable: closeable,
+        closeIconPosition: closeIconPosition,
+        title: title,
+        left: left,
+        onOverlayClick: function() {
+            return setVisible(false);
+        },
+        onCloseIconClick: function() {
+            return setVisible(false);
+        }
+    }), renderContent()) : renderContent();
+};
+ElevatorRender.displayName = 'NutElevatorRender';

package/dist/es/packages/address/existRender.js

@@ -5,7 +5,7 @@ import { Check, Location } from "@nutui/icons-react-taro";
 import { ScrollView, View } from "@tarojs/components";
 import { useConfig } from "../configprovider/index";
 var defaultProps = {
-    type: 'custom',
+    type: 'exist',
     existList: [],
     defaultIcon: null,
     selectIcon: null,
@@ -35,7 +35,7 @@ export var ExistRender = function(props) {
     var onClick = function(e) {
         e.stopPropagation();
         onSwitch && onSwitch({
-            type: type === 'exist' ? 'custom' : 'exist'
+            type: type === 'exist' ? 'cascader' : 'exist'
         });
     };
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ScrollView, {

package/dist/es/packages/address/style/address.scss

@@ -1,9 +1,4 @@
 .nut-address {
-  &-elevator {
-    display: flex;
-    margin-top: 20px;
-  }
-
   &-exist {
     display: block;
     padding: 15px 20px 0;
@@ -49,6 +44,120 @@
   }
 }
 
+.nut-address {
+  &-title {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 16px 16px 12px 16px;
+  }
+  &-hotlist {
+    padding: 0 16px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    &-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 63px;
+      height: 28px;
+      font-size: 12px;
+      border-radius: 4px;
+      margin-bottom: 7px;
+      /* #ifdef harmony*/
+      margin-right: 6px;
+      /* #endif */
+      /* #ifndef harmony*/
+      margin-right: 7px;
+      /* #endif */
+      background-color: $color-background-sunken;
+      color: $color-title;
+      &:nth-child(5n) {
+        margin-right: 0;
+      }
+    }
+
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
+      }
+    }
+  }
+
+  &-selected {
+    width: 100%;
+    height: 60px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $color-border;
+    &-item {
+      font-size: 12px;
+      display: inline-block;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 12px;
+      border-radius: 4px;
+      background-color: $color-background-sunken;
+
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
+
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
+      &-item {
+        position: relative;
+        padding-left: 20px;
+      }
+      &-item-code {
+        display: inline;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 30px;
+        line-height: 30px;
+        border-bottom: 0;
+        color: $color-text-help;
+        font-weight: 500;
+      }
+    }
+    .nut-elevator-bars {
+      top: 40%;
+      padding: 0;
+      background: none;
+
+      &-inner-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        border-radius: 16px;
+        margin-bottom: 2px;
+        color: $color-text-help;
+        &-active {
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-address,
 .nut-rtl .nut-address {
   &-exist {