@nutui/nutui-react-taro 3.0.0-beta.9 → 3.0.1

package/dist/es/packages/notify/notify.js

@@ -6,9 +6,8 @@ import React, { useState, useEffect, useRef } from "react";
 import classNames from "classnames";
 import { CSSTransition } from "react-transition-group";
 import { View } from "@tarojs/components";
-import Taro from "@tarojs/taro";
 import { ComponentDefaults } from "../../utils/typings";
-import { customEvents, useCustomEvent, useCustomEventsPath } from "../../utils/use-custom-event";
+import { customEvents, useCustomEvent, useCustomEventsPath } from "../../hooks/use-custom-event";
 import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     id: '',
@@ -61,7 +60,7 @@ export var Notify = function(props) {
     };
     var _obj;
     var classes = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-popup-top"), position === 'top'), _define_property(_obj, "".concat(classPrefix, "-popup-bottom"), position === 'bottom'), _define_property(_obj, "".concat(classPrefix), true), _define_property(_obj, "".concat(classPrefix, "-").concat(type), true), _obj));
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, Taro.getEnv() !== Taro.ENV_TYPE.RN ? /*#__PURE__*/ React.createElement(CSSTransition, {
+    return /*#__PURE__*/ React.createElement(CSSTransition, {
         nodeRef: cssRef,
         in: showNotify,
         timeout: 300,
@@ -74,13 +73,7 @@ export var Notify = function(props) {
         className: "".concat(classes, " ").concat(className),
         style: style,
         onClick: clickHandle
-    }, children)) : /*#__PURE__*/ React.createElement(React.Fragment, null, showNotify ? /*#__PURE__*/ React.createElement(View, {
-        className: "".concat(classes, " ").concat(className),
-        style: _object_spread_props(_object_spread({}, style), {
-            position: 'absolute'
-        }),
-        onClick: clickHandle
-    }, children) : null));
+    }, children));
 };
 export function open(selector) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/es/packages/notify/style/style.css

@@ -73,17 +73,17 @@
   bottom: 0;
 }
 .nut-notify-base {
-  background: var(--nutui-notify-base-background-color, var(--nutui-brand-6));
+  background: var(--nutui-notify-base-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-primary {
   background: var(--nutui-notify-primary-background-color, var(--nutui-color-info, #0073ff));
 }
 .nut-notify-success {
-  background: var(--nutui-notify-success-background-color, var(--nutui-green-2));
+  background: var(--nutui-notify-success-background-color, var(--nutui-color-success, #00d900));
 }
 .nut-notify-danger {
-  background: var(--nutui-notify-danger-background-color, var(--nutui-brand-6));
+  background: var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-notify-warning {
-  background: var(--nutui-notify-warning-background-color, var(--nutui-yellow-2));
+  background: var(--nutui-notify-warning-background-color, var(--nutui-color-warning, #ffbf00));
 }

package/dist/es/packages/notify/style/style.harmony.css

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+/*入场动画开始*/
+.fade-enter {
+  opacity: 0;
+}
+
+/*入场动画过程*/
+.fade-enter-active {
+  opacity: 1;
+  transition: opacity 1s;
+}
+
+/*入场动画结束*/
+.fade-enter-done {
+  opacity: 1;
+}
+
+/*离场动画开始*/
+.fade-exit {
+  opacity: 1;
+}
+
+/*离场动画过程*/
+.fade-exit-active {
+  opacity: 0;
+  transition: opacity 1s;
+}
+
+/*离场动画结束*/
+.fade-exit-done {
+  opacity: 0;
+}
+
+/*页面第一次加载时的开始状态*/
+.fade-appear {
+  opacity: 0;
+}
+
+/*页面第一次加载时的动画过程*/
+.fade-appear-active {
+  opacity: 1;
+  transition: opacity 1s;
+}
+
+.nut-notify {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0px 10px;
+  color: #ffffff;
+  font-size: 14px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  height: 40px;
+}
+.nut-notify-popup-top, .nut-notify-popup-bottom {
+  position: fixed;
+  left: 0;
+  right: 0;
+  overflow-y: auto;
+  transition: transform 0.3s;
+  z-index: 9999;
+}
+.nut-notify-popup-top {
+  top: 0;
+}
+.nut-notify-popup-bottom {
+  bottom: 0;
+}
+.nut-notify-base {
+  background: #ff0f23;
+}
+.nut-notify-primary {
+  background: #0073ff;
+}
+.nut-notify-success {
+  background: #00d900;
+}
+.nut-notify-danger {
+  background: #ff0f23;
+}
+.nut-notify-warning {
+  background: #ffbf00;
+}

package/dist/es/packages/numberkeyboard/numberkeyboard.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { PopupProps } from "../popup/popup";
+import { PopupProps } from "../popup/index";
 export interface NumberKeyboardProps extends PopupProps {
     visible: boolean;
     rightActions: ReactNode;

package/dist/es/packages/numberkeyboard/numberkeyboard.js

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import { ArrowDown } from "@nutui/icons-react-taro";
 import { View } from "@tarojs/components";
 import Popup from "../popup/index";
-import { useConfig } from "../configprovider/configprovider";
+import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
 import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
@@ -167,6 +167,9 @@ export var NumberKeyboard = function(props) {
         onOverlayClick: onClose,
         onCloseIconClick: onClose,
         zIndex: 9999,
+        style: {
+            minHeight: 0
+        },
         overlayStyle: {
             backgroundColor: 'rgba(0, 0, 0, 0)'
         }

package/dist/es/packages/numberkeyboard/style/style.css

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -243,6 +238,9 @@
   from {
     transform: translate3d(0, -100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes popup-slide-top-exit {
   to {
@@ -264,6 +262,9 @@
   from {
     transform: translate3d(100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-right-exit {
   to {
@@ -285,6 +286,9 @@
   from {
     transform: translate3d(0, 100%, 0);
   }
+  to {
+    transform: translate3d(0, 0%, 0);
+  }
 }
 @keyframes slide-bottom-exit {
   to {
@@ -306,6 +310,9 @@
   from {
     transform: translate3d(-100%, 0, 0);
   }
+  to {
+    transform: translate3d(0%, 0, 0);
+  }
 }
 @keyframes popup-slide-left-exit {
   to {
@@ -380,7 +387,7 @@
   width: 100%;
   padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
   user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-gray-3));
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
 }
 .nut-numberkeyboard-header {
   position: relative;
@@ -389,11 +396,11 @@
   justify-content: center;
   box-sizing: content-box;
   padding: var(--nutui-popup-title-padding, 16px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-numberkeyboard-header-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   display: inline-block;
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
@@ -404,7 +411,7 @@
   top: 50%;
   transform: translateY(-50%);
   padding: var(--nutui-numberkeyboard-header-close-padding, 0 16px);
-  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-6));
+  color: var(--nutui-numberkeyboard-header-close-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-numberkeyboard-header-close-font-size, 14px);
   background-color: var(--nutui-numberkeyboard-header-close-background-color, transparent);
   border: none;
@@ -430,7 +437,7 @@
   /* #endif */
   box-sizing: border-box;
   padding: 0 6px 6px 0;
-  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, var(--nutui-gray-2)));
+  background-color: var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-color-background-sunken, #f7f8fc));
 }
 .nut-numberkeyboard-body-wrapper .key {
   display: flex;
@@ -439,8 +446,8 @@
   height: var(--nutui-numberkeyboard-key-height, 48px);
   font-size: var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-xl, 18px));
   line-height: var(--nutui-numberkeyboard-key-line-height, 1.5);
-  background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-gray-1));
-  color: var(--nutui-numberkeyboard-key-color, var(--nutui-gray-6));
+  background-color: var(--nutui-numberkeyboard-key-background-color, var(--nutui-color-background-overlay, #ffffff));
+  color: var(--nutui-numberkeyboard-key-color, var(--nutui-color-text, #505259));
   border-radius: var(--nutui-numberkeyboard-key-border-radius, 8px);
   border: var(--nutui-numberkeyboard-key-border, none);
   font-weight: var(--nutui-font-weight-bold, 600);
@@ -469,7 +476,7 @@
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm {
   font-size: var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-l, 16px));
   color: var(--nutui-numberkeyboard-key-confirm-color, #fff);
-  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-brand-6));
+  background-color: var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #ff0f23));
 }
 .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active {
   background-color: rgba(255, 0, 0, 0.7);

package/dist/es/packages/numberkeyboard/style/style.harmony.css

@@ -0,0 +1,129 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-numberkeyboard {
+  width: 100%;
+  padding: 0 0 22px 0;
+  user-select: none;
+  background-color: #f2f3f5;
+}
+.nut-numberkeyboard-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  padding: 16px;
+  color: #1a1a1a;
+  font-size: 16px;
+}
+.nut-numberkeyboard-header-title {
+  color: #1a1a1a;
+  display: inline-block;
+  font-size: 16px;
+}
+.nut-numberkeyboard-header-close {
+  position: absolute;
+  display: block;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0 16px;
+  color: #505259;
+  font-size: 14px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+.nut-numberkeyboard-body {
+  display: flex;
+  padding: 6px 0 0 6px;
+}
+.nut-numberkeyboard-body-keys {
+  display: flex;
+  flex: 3;
+  flex-wrap: wrap;
+}
+.nut-numberkeyboard-body-wrapper {
+  position: relative;
+  flex: 1;
+  /* #ifdef harmony */
+  width: 33%;
+  /* #endif */
+  /* #ifndef harmony */
+  flex-basis: 33%;
+  /* #endif */
+  box-sizing: border-box;
+  padding: 0 6px 6px 0;
+  background-color: #f7f8fc;
+}
+.nut-numberkeyboard-body-wrapper .key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  font-size: 18px;
+  line-height: 1.5;
+  background-color: #ffffff;
+  color: #505259;
+  border-radius: 8px;
+  border: none;
+  font-weight: 600;
+  cursor: pointer;
+}
+.nut-numberkeyboard-body-wrapper .key.active {
+  background-color: #ebedf0;
+}
+.nut-numberkeyboard-sidebar {
+  display: flex;
+  flex: 1;
+  flex-basis: 33%;
+  flex-direction: column;
+}
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper {
+  width: 100%;
+}
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
+  position: absolute;
+  top: 0;
+  right: 6px;
+  bottom: 6px;
+  left: 0;
+  height: auto;
+}
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm {
+  font-size: 16px;
+  color: #fff;
+  background-color: #ff0f23;
+}
+.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active {
+  background-color: rgba(255, 0, 0, 0.7);
+}
+
+[dir=rtl] .nut-popup .nut-numberkeyboard-header-close,
+.nut-rtl .nut-popup .nut-numberkeyboard-header-close {
+  right: auto;
+  left: 0;
+}
+[dir=rtl] .nut-popup .nut-numberkeyboard-body,
+.nut-rtl .nut-popup .nut-numberkeyboard-body {
+  padding: 6px 6px 0 0;
+}
+[dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper,
+.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper {
+  padding: 0 0 6px 6px;
+}
+[dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper .delete,
+.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete {
+  transform: rotate(-180deg);
+}
+[dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key,
+.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key {
+  left: 6px;
+  right: 0;
+}
+[dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete,
+.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete {
+  transform: rotate(-180deg);
+}

package/dist/es/packages/nutui.react.build.d.ts

@@ -10,8 +10,6 @@ import Image from "./image/index";
 export * from "./image/index";
 import Overlay from "./overlay/index";
 export * from "./overlay/index";
-import Col from "./col/index";
-export * from "./col/index";
 import Divider from "./divider/index";
 export * from "./divider/index";
 import Grid from "./grid/index";
@@ -20,14 +18,16 @@ import GridItem from "./griditem/index";
 export * from "./griditem/index";
 import Layout from "./layout/index";
 export * from "./layout/index";
+import Col from "./col/index";
+export * from "./col/index";
 import Row from "./row/index";
 export * from "./row/index";
+import SafeArea from "./safearea/index";
+export * from "./safearea/index";
 import Space from "./space/index";
 export * from "./space/index";
 import Sticky from "./sticky/index";
 export * from "./sticky/index";
-import SafeArea from "./safearea/index";
-export * from "./safearea/index";
 import BackTop from "./backtop/index";
 export * from "./backtop/index";
 import Elevator from "./elevator/index";
@@ -40,12 +40,10 @@ import HoverButtonItem from "./hoverbuttonitem/index";
 export * from "./hoverbuttonitem/index";
 import NavBar from "./navbar/index";
 export * from "./navbar/index";
-import SideNavBar from "./sidenavbar/index";
-export * from "./sidenavbar/index";
-import SideNavBarItem from "./sidenavbaritem/index";
-export * from "./sidenavbaritem/index";
-import SubSideNavBar from "./subsidenavbar/index";
-export * from "./subsidenavbar/index";
+import SideBar from "./sidebar/index";
+export * from "./sidebar/index";
+import SideBarItem from "./sidebaritem/index";
+export * from "./sidebaritem/index";
 import Tabbar from "./tabbar/index";
 export * from "./tabbar/index";
 import TabbarItem from "./tabbaritem/index";
@@ -70,6 +68,8 @@ import CheckboxGroup from "./checkboxgroup/index";
 export * from "./checkboxgroup/index";
 import DatePicker from "./datepicker/index";
 export * from "./datepicker/index";
+import DatePickerView from "./datepickerview/index";
+export * from "./datepickerview/index";
 import Form from "./form/index";
 export * from "./form/index";
 import FormItem from "./formitem/index";
@@ -86,6 +86,8 @@ import NumberKeyboard from "./numberkeyboard/index";
 export * from "./numberkeyboard/index";
 import Picker from "./picker/index";
 export * from "./picker/index";
+import PickerView from "./pickerview/index";
+export * from "./pickerview/index";
 import Radio from "./radio/index";
 export * from "./radio/index";
 import RadioGroup from "./radiogroup/index";
@@ -116,8 +118,6 @@ import Drag from "./drag/index";
 export * from "./drag/index";
 import Empty from "./empty/index";
 export * from "./empty/index";
-import ResultPage from "./resultpage/index";
-export * from "./resultpage/index";
 import InfiniteLoading from "./infiniteloading/index";
 export * from "./infiniteloading/index";
 import Loading from "./loading/index";
@@ -132,6 +132,8 @@ import Popup from "./popup/index";
 export * from "./popup/index";
 import PullToRefresh from "./pulltorefresh/index";
 export * from "./pulltorefresh/index";
+import ResultPage from "./resultpage/index";
+export * from "./resultpage/index";
 import Skeleton from "./skeleton/index";
 export * from "./skeleton/index";
 import Swipe from "./swipe/index";
@@ -166,12 +168,12 @@ import Lottie from "./lottie/index";
 export * from "./lottie/index";
 import Pagination from "./pagination/index";
 export * from "./pagination/index";
-import Segmented from "./segmented/index";
-export * from "./segmented/index";
 import Price from "./price/index";
 export * from "./price/index";
 import Progress from "./progress/index";
 export * from "./progress/index";
+import Segmented from "./segmented/index";
+export * from "./segmented/index";
 import Step from "./step/index";
 export * from "./step/index";
 import Steps from "./steps/index";
@@ -190,6 +192,8 @@ import Video from "./video/index";
 export * from "./video/index";
 import VirtualList from "./virtuallist/index";
 export * from "./virtuallist/index";
+import AvatarCropper from "./avatarcropper/index";
+export * from "./avatarcropper/index";
 import Barrage from "./barrage/index";
 export * from "./barrage/index";
 import Card from "./card/index";
@@ -202,6 +206,4 @@ import TrendArrow from "./trendarrow/index";
 export * from "./trendarrow/index";
 import WaterMark from "./watermark/index";
 export * from "./watermark/index";
-import AvatarCropper from "./avatarcropper/index";
-export * from "./avatarcropper/index";
-export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Col, Divider, Grid, GridItem, Layout, Row, Space, Sticky, SafeArea, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideNavBar, SideNavBarItem, SubSideNavBar, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, ResultPage, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Segmented, Price, Progress, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark, AvatarCropper };
+export { Button, Cell, CellGroup, ConfigProvider, Image, Overlay, Divider, Grid, GridItem, Layout, Col, Row, SafeArea, Space, Sticky, BackTop, Elevator, FixedNav, HoverButton, HoverButtonItem, NavBar, SideBar, SideBarItem, Tabbar, TabbarItem, TabPane, Tabs, Address, Calendar, CalendarItem, CalendarCard, Cascader, Checkbox, CheckboxGroup, DatePicker, DatePickerView, Form, FormItem, Input, InputNumber, Menu, MenuItem, NumberKeyboard, Picker, PickerView, Radio, RadioGroup, Range, Rate, SearchBar, ShortPassword, Signature, Switch, TextArea, Uploader, ActionSheet, Badge, Dialog, Drag, Empty, InfiniteLoading, Loading, NoticeBar, Notify, Popover, Popup, PullToRefresh, ResultPage, Skeleton, Swipe, Toast, Animate, AnimatingNumbers, Audio, Avatar, AvatarGroup, CircleProgress, Collapse, CollapseItem, CountDown, Ellipsis, ImagePreview, Indicator, Lottie, Pagination, Price, Progress, Segmented, Step, Steps, Swiper, SwiperItem, Table, Tag, Tour, Video, VirtualList, AvatarCropper, Barrage, Card, TimeDetail, TimeSelect, TrendArrow, WaterMark };