@nutui/nutui-react 1.3.0 → 1.3.1-beta.0

package/dist/esm/Swipe.js

@@ -0,0 +1,265 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React__default, { forwardRef, useRef, useState, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useTouch } from './useTouch-a2ea68c6.js';
+import { g as getRect } from './useClientRect-839d18c5.js';
+import '@bem-react/classname';
+
+function preventDefault(event, isStopPropagation) {
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    event.preventDefault();
+  }
+
+  if (isStopPropagation) {
+    event.stopPropagation();
+  }
+}
+
+var defaultProps = {
+  name: '',
+  leftWidth: 0,
+  rightWidth: 0
+};
+var Swipe = forwardRef(function (props, instanceRef) {
+  var swipeBem = cn('swipe');
+  var touch = useTouch();
+
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
+      children = _defaultProps$props.children,
+      className = _defaultProps$props.className,
+      style = _defaultProps$props.style;
+
+  var root = useRef();
+  var opened = useRef(false);
+  var lockClick = useRef(false);
+  var startOffset = useRef(0);
+
+  var _useState = useState({
+    offset: 0,
+    dragging: false
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = useState({
+    left: 0,
+    right: 0
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      actionWidth = _useState4[0],
+      setActionWidth = _useState4[1];
+
+  var wrapperStyle = {
+    transform: "translate3d(".concat(state.offset, "px, 0, 0)"),
+    transitionDuration: state.dragging ? '0s' : '.6s'
+  };
+  var leftWidth = useMemo(function () {
+    return props.leftWidth ? props.leftWidth : actionWidth.left;
+  }, [props.leftWidth, actionWidth.left]);
+  var rightWidth = useMemo(function () {
+    return props.rightWidth ? props.rightWidth : actionWidth.right;
+  }, [props.rightWidth, actionWidth.right]);
+
+  var _onTouchStart = function onTouchStart(event) {
+    if (!props.disabled) {
+      startOffset.current = state.offset;
+      touch.start(event);
+    }
+  };
+
+  var _onTouchMove = function onTouchMove(event) {
+    if (props.disabled) {
+      return;
+    }
+
+    touch.move(event);
+
+    if (touch.isHorizontal()) {
+      lockClick.current = true;
+
+      var newState = _objectSpread(_objectSpread({}, state), {}, {
+        dragging: true
+      });
+
+      var isEdge = !opened || touch.deltaX * startOffset.current < 0;
+
+      if (isEdge) {
+        preventDefault(event, true);
+      }
+
+      newState.offset = rangeCalculation(touch.deltaX + startOffset.current, -rightWidth, leftWidth);
+      setState(newState);
+    }
+  };
+
+  var onTouchEnd = function onTouchEnd() {
+    if (state.dragging) {
+      setState(function (v) {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          dragging: false
+        });
+      });
+      toggle(state.offset > 0 ? 'left' : 'right');
+      setTimeout(function () {
+        lockClick.current = false;
+      }, 0);
+    }
+  };
+
+  var toggle = function toggle(side) {
+    var offset = Math.abs(state.offset);
+    var base = 0.3;
+    var baseNum = opened ? 1 - base : base;
+    var width = side === 'left' ? leftWidth : rightWidth;
+
+    if (width && offset > Number(width) * baseNum) {
+      open(side);
+    } else {
+      _close(side);
+    }
+  };
+
+  var open = function open(side) {
+    var _props$onOpen;
+
+    opened.current = true;
+    var offset = side === 'left' ? leftWidth : -rightWidth;
+    var name = props.name;
+    (_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 ? void 0 : _props$onOpen.call(props, {
+      name: name,
+      position: side
+    });
+    setState(function (v) {
+      return _objectSpread(_objectSpread({}, v), {}, {
+        offset: Number(offset) || 0
+      });
+    });
+  };
+
+  var _close = function close(position) {
+    if (opened.current) {
+      var _props$onClose;
+
+      opened.current = false;
+      (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props, {
+        name: props.name,
+        position: position || 'left'
+      });
+    }
+
+    setState(function (v) {
+      return _objectSpread(_objectSpread({}, v), {}, {
+        offset: 0
+      });
+    });
+  };
+
+  var rangeCalculation = function rangeCalculation(num, min, max) {
+    return Math.min(Math.max(Number(num), Number(min)), Number(max));
+  };
+
+  var getNodeWidth = function getNodeWidth(node) {
+    if (node) {
+      var ele = getRect(node);
+      return ele.width;
+    }
+
+    return 0;
+  };
+
+  var leftRef = useCallback(function (node) {
+    if (node !== null) {
+      setActionWidth(function (v) {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          left: getNodeWidth(node)
+        });
+      });
+    }
+  }, [props.leftAction]);
+  var rightRef = useCallback(function (node) {
+    if (node !== null) {
+      setActionWidth(function (v) {
+        return _objectSpread(_objectSpread({}, v), {}, {
+          right: getNodeWidth(node)
+        });
+      });
+    }
+  }, [props.rightAction]);
+
+  var renderActionContent = function renderActionContent(side, measuredRef) {
+    if (props["".concat(side, "Action")]) {
+      return React__default.createElement("div", {
+        ref: measuredRef,
+        className: "".concat(swipeBem(side)),
+        onClick: function onClick(e) {
+          return handleOperate(e, side);
+        }
+      }, props["".concat(side, "Action")]);
+    }
+
+    return null;
+  };
+
+  var handleOperate = function handleOperate(event, position) {
+    event.stopPropagation();
+
+    if (props.beforeClose) {
+      props.beforeClose(position);
+    } else {
+      props.onActionClick && props.onActionClick(event, position);
+    }
+  };
+
+  useImperativeHandle(instanceRef, function () {
+    return {
+      open: open,
+      close: function close() {
+        return _close();
+      }
+    };
+  });
+  useEffect(function () {
+    var handler = function handler(event) {
+      var targets = [root];
+
+      if (targets.some(function (targetItem) {
+        var targetElement = targetItem.current || targetItem;
+        return !targetElement || (targetElement === null || targetElement === void 0 ? void 0 : targetElement.contains(event.target));
+      })) {
+        return;
+      }
+
+      _close();
+    };
+
+    document.addEventListener('touchstart', handler);
+    return function () {
+      document.removeEventListener('touchstart', handler);
+    };
+  }, []);
+  return React__default.createElement("div", {
+    ref: root,
+    className: "".concat(swipeBem(), " ").concat(className),
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      return _onTouchMove(e);
+    },
+    onTouchEnd: onTouchEnd,
+    style: style
+  }, React__default.createElement("div", {
+    className: "".concat(swipeBem('wrapper')),
+    style: wrapperStyle
+  }, renderActionContent('left', leftRef), children, renderActionContent('right', rightRef)));
+});
+Swipe.defaultProps = defaultProps;
+Swipe.displayName = 'NutSwipe';
+export { Swipe as default };

package/dist/esm/Swiper.js

@@ -12,6 +12,7 @@ import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import { D as DataContext } from './UserContext-b4181162.js';
 import { c as cn } from './bem-893ad28d.js';
+import { g as getRect } from './useClientRect-839d18c5.js';
 import '@bem-react/classname';
 var defaultProps = {
   width: (typeof window === "undefined" ? "undefined" : _typeof(window)) === 'object' ? window.innerWidth : 375,
@@ -442,7 +443,7 @@ var Swiper = React__default.forwardRef(function (props, ref) {
 
   var init = function init() {
     var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : +propSwiper.initPage;
-    var rect = container.current.getBoundingClientRect();
+    var rect = getRect(container === null || container === void 0 ? void 0 : container.current);
 
     var _active = Math.max(Math.min(childCount - 1, active), 0);
 

package/dist/esm/TabPane.js

@@ -1,34 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default from 'react';
-import classNames from 'classnames';
-import { c as cn } from './bem-893ad28d.js';
+import { T as TabPane } from './tabpane-c957ab14.js';
+export { T as default } from './tabpane-c957ab14.js';
+import 'react';
+import 'classnames';
+import './bem-893ad28d.js';
 import '@bem-react/classname';
-var defaultProps = {
-  title: '',
-  paneKey: '',
-  activeKey: '',
-  disabled: false
-};
-
-var TabPane = function TabPane(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
-      paneKey = _defaultProps$props.paneKey,
-      activeKey = _defaultProps$props.activeKey,
-      autoHeightClassName = _defaultProps$props.autoHeightClassName;
-
-  var b = cn('tabpane');
-  var classes = classNames({
-    active: paneKey === activeKey
-  }, b(''), autoHeightClassName);
-  return React__default.createElement("div", {
-    className: classes
-  }, children);
-};
-
-export { TabPane as default };

package/dist/esm/Tabs.js

@@ -1,197 +1,7 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["value", "color", "background", "direction", "type", "titleScroll", "ellipsis", "animatedTime", "titleGutter", "size", "titleNode", "children", "onClick", "onChange", "className", "autoHeight"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import { c as cn } from './bem-893ad28d.js';
-import Icon from './Icon.js';
+import { T as Tabs } from './tabs-a48583e9.js';
+export { T as default } from './tabs-a48583e9.js';
+import 'react';
+import 'classnames';
+import './bem-893ad28d.js';
 import '@bem-react/classname';
-
-var Title = /*#__PURE__*/_createClass( // eslint-disable-next-line no-useless-constructor
-function Title() {
-  _classCallCheck(this, Title);
-
-  _defineProperty(this, "title", '');
-
-  _defineProperty(this, "paneKey", '');
-
-  _defineProperty(this, "disabled", false);
-
-  _defineProperty(this, "index", 0);
-});
-
-var defaultProps = {
-  value: 0,
-  color: '',
-  background: '',
-  direction: 'horizontal',
-  type: 'line',
-  titleScroll: false,
-  ellipsis: true,
-  animatedTime: 300,
-  titleGutter: 0,
-  size: 'normal',
-  autoHeight: false
-};
-
-var pxCheck = function pxCheck(value) {
-  return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
-};
-
-var Tabs = function Tabs(props) {
-  var _classNames;
-
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      value = _defaultProps$props.value,
-      color = _defaultProps$props.color,
-      background = _defaultProps$props.background,
-      direction = _defaultProps$props.direction,
-      type = _defaultProps$props.type,
-      titleScroll = _defaultProps$props.titleScroll,
-      ellipsis = _defaultProps$props.ellipsis,
-      animatedTime = _defaultProps$props.animatedTime,
-      titleGutter = _defaultProps$props.titleGutter,
-      size = _defaultProps$props.size,
-      titleNode = _defaultProps$props.titleNode,
-      children = _defaultProps$props.children,
-      onClick = _defaultProps$props.onClick,
-      onChange = _defaultProps$props.onChange,
-      className = _defaultProps$props.className,
-      autoHeight = _defaultProps$props.autoHeight,
-      rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var _useState = useState({
-    index: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentItem = _useState2[0],
-      setCurrentItem = _useState2[1];
-
-  var titles = useRef([]);
-  useEffect(function () {
-    var currentIndex = 0;
-    titles.current = []; // eslint-disable-next-line consistent-return
-
-    React__default.Children.forEach(children, function (child, idx) {
-      var _child$props, _child$props2;
-
-      if (!React__default.isValidElement(child)) {
-        return null;
-      }
-
-      var title = new Title();
-
-      if ((_child$props = child.props) !== null && _child$props !== void 0 && _child$props.title || (_child$props2 = child.props) !== null && _child$props2 !== void 0 && _child$props2.paneKey) {
-        var _child$props3, _child$props4, _child$props5;
-
-        title.title = (_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.title;
-        title.paneKey = ((_child$props4 = child.props) === null || _child$props4 === void 0 ? void 0 : _child$props4.paneKey) || idx;
-        title.disabled = (_child$props5 = child.props) === null || _child$props5 === void 0 ? void 0 : _child$props5.disabled;
-        title.index = idx;
-
-        if (title.paneKey === value) {
-          currentIndex = idx;
-        }
-      }
-
-      titles.current.push(title);
-    });
-    setCurrentItem(titles.current[currentIndex]);
-  }, [children]);
-  var b = cn('tabs');
-  var classes = classNames(direction, b(''), className);
-  var classesTitle = classNames((_classNames = {}, _defineProperty(_classNames, type, type), _defineProperty(_classNames, "scrollable", titleScroll), _defineProperty(_classNames, size, size), _classNames), "".concat(b(''), "__titles"));
-  var titleStyle = {
-    marginLeft: pxCheck(titleGutter),
-    marginRight: pxCheck(titleGutter)
-  };
-  var tabsActiveStyle = {
-    color: type === 'smile' ? color : '',
-    background: type === 'line' ? color : ''
-  };
-  var index = titles.current.findIndex(function (t) {
-    return t.paneKey === value;
-  });
-  var contentStyle = {
-    transform: direction === 'horizontal' ? "translate3d(-".concat(index * 100, "%, 0, 0)") : "translate3d( 0,-".concat(index * 100, "%, 0)"),
-    transitionDuration: "".concat(animatedTime, "ms")
-  };
-
-  var tabChange = function tabChange(item, index) {
-    onClick && onClick(item);
-
-    if (item.disabled) {
-      return;
-    }
-
-    setCurrentItem(item);
-    onChange && onChange(item);
-  };
-
-  return React__default.createElement("div", _objectSpread({
-    className: classes
-  }, rest), React__default.createElement("div", {
-    className: classesTitle,
-    style: {
-      background: background
-    }
-  }, !!titleNode && typeof titleNode === 'function' ? titleNode() : titles.current.map(function (item, index) {
-    return React__default.createElement("div", {
-      style: titleStyle,
-      onClick: function onClick(e) {
-        return tabChange(item);
-      },
-      className: classNames({
-        active: String(item.paneKey) === String(value),
-        disabled: item.disabled
-      }, "".concat(b(''), "__titles-item")),
-      key: item.paneKey
-    }, type === 'line' && React__default.createElement("div", {
-      className: "".concat(b(''), "__titles-item__line"),
-      style: tabsActiveStyle
-    }), type === 'smile' && React__default.createElement("div", {
-      className: "".concat(b(''), "__titles-item__smile"),
-      style: tabsActiveStyle
-    }, React__default.createElement(Icon, {
-      color: color,
-      name: "joy-smile"
-    })), React__default.createElement("div", {
-      className: classNames({
-        ellipsis: ellipsis && !titleScroll && direction === 'horizontal'
-      }, "".concat(b(''), "__titles-item__text"))
-    }, item.title));
-  })), React__default.createElement("div", {
-    className: "".concat(b(''), "__content"),
-    style: contentStyle
-  }, React__default.Children.map(children, function (child, idx) {
-    var _child$props6;
-
-    if (!React__default.isValidElement(child)) {
-      return null;
-    }
-
-    var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
-      activeKey: value
-    });
-
-    if (String(value) !== String(((_child$props6 = child.props) === null || _child$props6 === void 0 ? void 0 : _child$props6.paneKey) || idx) && autoHeight) {
-      childProps = _objectSpread(_objectSpread({}, childProps), {}, {
-        autoHeightClassName: 'inactive'
-      });
-    }
-
-    return React__default.cloneElement(child, childProps);
-  })));
-};
-
-Tabs.defaultProps = defaultProps;
-Tabs.displayName = 'NutTabs';
-export { Tabs as default };
+import './Icon.js';

package/dist/esm/TextArea.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
@@ -5,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { useConfig } from './ConfigProvider.js';
 import { c as cn } from './bem-893ad28d.js';
 import '@bem-react/classname';
@@ -48,6 +49,7 @@ var TextArea = function TextArea(props) {
       inputValue = _useState2[0],
       SetInputValue = _useState2[1];
 
+  var textareaRef = useRef(null);
   useEffect(function () {
     if (defaultValue) {
       var initValue = defaultValue;
@@ -58,7 +60,46 @@ var TextArea = function TextArea(props) {
 
       SetInputValue(initValue);
     }
-  }, [defaultValue]);
+
+    if (autosize) {
+      setTimeout(function () {
+        setContentHeight();
+      });
+    }
+  }, [defaultValue, autosize]);
+  useEffect(function () {
+    if (inputValue) {
+      if (autosize) {
+        setContentHeight();
+      }
+    }
+  }, [inputValue]);
+
+  var setContentHeight = function setContentHeight() {
+    var textarea = textareaRef.current;
+
+    if (textarea) {
+      textarea.style.height = 'auto';
+      var height = textarea === null || textarea === void 0 ? void 0 : textarea.scrollHeight;
+
+      if (_typeof(autosize) === 'object') {
+        var maxHeight = autosize.maxHeight,
+            minHeight = autosize.minHeight;
+
+        if (maxHeight !== undefined) {
+          height = Math.min(height, maxHeight);
+        }
+
+        if (minHeight !== undefined) {
+          height = Math.max(height, minHeight);
+        }
+      }
+
+      if (height) {
+        textarea.style.height = "".concat(height, "px");
+      }
+    }
+  };
 
   var textChange = function textChange(event) {
     var text = event.target;
@@ -88,10 +129,10 @@ var TextArea = function TextArea(props) {
   return React__default.createElement("div", {
     className: "".concat(textareaBem(), " ").concat(disabled ? textareaBem('disabled') : '', " ").concat(className || '')
   }, React__default.createElement("textarea", {
+    ref: textareaRef,
     className: textareaBem('textarea'),
     style: _objectSpread({
-      textAlign: textAlign,
-      resize: "".concat(autosize ? 'vertical' : 'none')
+      textAlign: textAlign
     }, style),
     disabled: disabled,
     readOnly: readonly,

package/dist/esm/Toast.js

@@ -19,6 +19,7 @@ import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import { c as cn } from './bem-893ad28d.js';
 import Icon from './Icon.js';
+import { r as render } from './render-4a3856cb.js';
 import '@bem-react/classname';
 
 var Notification = /*#__PURE__*/function (_React$PureComponent) {
@@ -178,7 +179,7 @@ Notification.newInstance = function (properties, callback) {
     });
   }
 
-  ReactDOM.render(React.createElement(Notification, _objectSpread(_objectSpread({}, properties), {}, {
+  render(React.createElement(Notification, _objectSpread(_objectSpread({}, properties), {}, {
     ref: ref
   })), element);
 };

package/dist/esm/nutui-react.es.js

@@ -9,6 +9,8 @@ export { default as Layout } from './Layout.js';
 export { default as Col } from './Col.js';
 export { default as Row } from './Row.js';
 export { default as Divider } from './Divider.js';
+export { default as Grid } from './Grid.js';
+export { default as GridItem } from './GridItem.js';
 export { default as NavBar } from './NavBar.js';
 export { default as FixedNav } from './FixedNav.js';
 export { default as Tabbar } from './Tabbar.js';
@@ -21,6 +23,8 @@ export { default as Indicator } from './Indicator.js';
 export { default as SideNavBar } from './SideNavBar.js';
 export { default as SubSideNavBar } from './SubSideNavBar.js';
 export { default as SideNavBarItem } from './SideNavBarItem.js';
+export { default as Menu } from './Menu.js';
+export { default as MenuItem } from './MenuItem.js';
 export { default as Range } from './Range.js';
 export { default as Calendar } from './Calendar.js';
 export { default as Checkbox } from './Checkbox.js';
@@ -36,6 +40,7 @@ export { default as Picker } from './Picker.js';
 export { default as ShortPassword } from './ShortPassword.js';
 export { default as TextArea } from './TextArea.js';
 export { default as Uploader } from './Uploader.js';
+export { default as Cascader } from './Cascader.js';
 export { default as SearchBar } from './SearchBar.js';
 export { default as NumberKeyboard } from './NumberKeyboard.js';
 export { default as ActionSheet } from './ActionSheet.js';
@@ -46,6 +51,7 @@ export { default as Infiniteloading } from './Infiniteloading.js';
 export { default as Notify } from './Notify.js';
 export { default as Switch } from './Switch.js';
 export { default as Toast } from './Toast.js';
+export { default as Swipe } from './Swipe.js';
 export { default as CircleProgress } from './CircleProgress.js';
 export { default as NoticeBar } from './NoticeBar.js';
 export { default as Steps } from './Steps.js';
@@ -68,6 +74,8 @@ export { default as VirtualList } from './VirtualList.js';
 export { default as Table } from './Table.js';
 export { default as Video } from './Video.js';
 export { default as Progress } from './Progress.js';
+export { default as Audio } from './Audio.js';
+export { default as ImagePreview } from './ImagePreview.js';
 export { default as Address } from './Address.js';
 export { default as Barrage } from './Barrage.js';
 export { default as Signature } from './Signature.js';