@nutui/nutui-react-taro 3.0.0 → 3.0.2

package/dist/cjs/packages/datepickerview/style/datepickerview.scss

@@ -0,0 +1,4 @@
+.nut-datepickerview {
+  display: flex;
+  width: 100%;
+}

package/dist/cjs/packages/datepickerview/style/index.js

@@ -0,0 +1,2 @@
+import '../../pickerview/style';
+import './datepickerview.scss';

package/dist/cjs/packages/datepickerview/style/style.css

@@ -0,0 +1,78 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-pickerview {
+  --nutui-picker-item-height: 36px;
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+}
+.nut-pickerview-mask, .nut-pickerview-indicator {
+  position: absolute;
+  left: 0;
+  right: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.nut-pickerview-mask {
+  top: 0;
+  bottom: 0;
+  background-image: var(--picker-mask-background, linear-gradient(180deg, var(--nutui-white-12), var(--nutui-white-7)), linear-gradient(0deg, var(--nutui-white-12), var(--nutui-white-7)));
+  background-position: top, bottom;
+  background-size: 100% calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  background-repeat: no-repeat;
+  transform: translateZ(0);
+}
+.nut-pickerview-indicator {
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  height: var(--nutui-picker-item-height, 36px);
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  border-left: 0;
+  border-right: 0;
+  box-sizing: border-box;
+}
+.nut-pickerview-list {
+  position: relative;
+  flex: 1;
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
+  overflow: hidden;
+  touch-action: none;
+}
+.nut-pickerview-roller {
+  position: absolute;
+  top: calc((var(--nutui-picker-item-height, 36px) * 7 - var(--nutui-picker-item-height, 36px)) / 2);
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  z-index: 1;
+  transform-style: preserve-3d;
+}
+.nut-pickerview-roller-item {
+  position: absolute;
+  top: 0;
+  backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.nut-pickerview-roller-item-hidden {
+  visibility: hidden;
+  opacity: 0;
+}
+.nut-pickerview-roller-item, .nut-pickerview-roller-item-tiled {
+  width: 100%;
+  height: var(--nutui-picker-item-height, 36px);
+  line-height: var(--nutui-picker-item-height, 36px);
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
+  font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nut-datepickerview {
+  display: flex;
+  width: 100%;
+}

package/dist/cjs/packages/datepickerview/style/style.harmony.css

@@ -0,0 +1,8 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-datepickerview {
+  display: flex;
+  width: 100%;
+}

package/dist/cjs/packages/datepickerview/types.d.ts

@@ -0,0 +1,15 @@
+import { BasicComponent } from "../../utils/typings";
+import { PickerOptions, PickerValue, PickerOption } from "../pickerview/types";
+export interface DatePickerViewProps extends BasicComponent {
+    value?: Date;
+    defaultValue?: Date;
+    type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime' | 'hour-minutes';
+    showChinese: boolean;
+    minuteStep: number;
+    startDate: Date;
+    endDate: Date;
+    threeDimensional: boolean;
+    formatter: (type: string, option: PickerOption) => PickerOption;
+    filter: (type: string, options: PickerOptions) => PickerOptions;
+    onChange: (selectedOptions: PickerOptions, selectedValue: PickerValue[], columnIndex: number) => void;
+}

package/dist/cjs/packages/datepickerview/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/dialog/dialog.js

@@ -40,6 +40,7 @@ var _usecustomevent = require("../../hooks/use-custom-event");
 var _uselockscolltaro = require("../../hooks/use-lock-scoll-taro");
 var _mergeprops = require("../../utils/merge-props");
 var _overlay = require("../overlay/overlay");
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps, _content.defaultContentProps), {
     title: '',
     content: '',
@@ -195,6 +196,8 @@ var BaseDialog = function BaseDialog(props) {
         }
     };
     var renderContent = function renderContent() {
+        var contentZIndex = (0, _platformtaro.harmony)() ? zIndex + 1 : zIndex // 解决harmony层级问题
+        ;
         return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
             in: visible,
             timeout: 300,
@@ -203,7 +206,9 @@ var BaseDialog = function BaseDialog(props) {
             appear: true
         }, /*#__PURE__*/ _react.default.createElement(_content.Content, {
             className: className,
-            style: style,
+            style: (0, _object_spread._)({
+                zIndex: contentZIndex
+            }, style),
             title: title,
             header: header,
             close: renderCloseIcon(),
@@ -218,7 +223,7 @@ var BaseDialog = function BaseDialog(props) {
         },
         ref: refObject,
         catchMove: lockScroll
-    }, overlay ? /*#__PURE__*/ _react.default.createElement(_index1.default, {
+    }, overlay && /*#__PURE__*/ _react.default.createElement(_index1.default, {
         zIndex: zIndex,
         visible: visible,
         style: overlayStyle,
@@ -226,7 +231,7 @@ var BaseDialog = function BaseDialog(props) {
         closeOnOverlayClick: closeOnOverlayClick,
         lockScroll: lockScroll,
         onClick: onHandleClickOverlay
-    }, renderContent()) : renderContent());
+    }), renderContent());
 };
 function open(selector, options) {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/dist/cjs/packages/dialog/style/dialog.scss

@@ -26,7 +26,6 @@
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: $dialog-border-radius;
-    z-index: $dialog-z-index;
     animation-duration: 0.3s;
   }
 

package/dist/cjs/packages/dialog/style/style.css

@@ -470,7 +470,6 @@
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   border-radius: var(--nutui-dialog-border-radius, var(--nutui-radius-xl, 12px));
-  z-index: var(--nutui-dialog-z-index, 1200);
   animation-duration: 0.3s;
 }
 .nut-dialog-close {

package/dist/cjs/packages/dialog/style/style.harmony.css

@@ -26,7 +26,6 @@
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
   border-radius: 12px;
-  z-index: 1200;
   animation-duration: 0.3s;
 }
 .nut-dialog-close {

package/dist/cjs/packages/drag/drag.js

@@ -12,14 +12,14 @@ var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcar
 var _async_to_generator = require("@swc/helpers/_/_async_to_generator");
 var _object_spread = require("@swc/helpers/_/_object_spread");
 var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _ts_generator = require("@swc/helpers/_/_ts_generator");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _taro = require("@tarojs/taro");
-var _getsysteminfo = require("../../utils/get-system-info");
+var _components = require("@tarojs/components");
 var _typings = require("../../utils/typings");
 var _getrectbytaro = require("../../utils/get-rect-by-taro");
+var _getsysteminfo = require("../../utils/get-system-info");
+var _platformtaro = require("../../utils/platform-taro");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     attract: false,
     direction: undefined,
@@ -32,17 +32,7 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
     className: 'myDrag'
 });
 var Drag = function Drag(props) {
-    var _ref = (0, _object_spread._)({}, defaultProps, props), attract = _ref.attract, direction = _ref.direction, boundary = _ref.boundary, onDrag = _ref.onDrag, onDragStart = _ref.onDragStart, onDragEnd = _ref.onDragEnd, children = _ref.children, className = _ref.className, style = _ref.style, reset = (0, _object_without_properties._)(_ref, [
-        "attract",
-        "direction",
-        "boundary",
-        "onDrag",
-        "onDragStart",
-        "onDragEnd",
-        "children",
-        "className",
-        "style"
-    ]);
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), attract = _$_object_spread.attract, direction = _$_object_spread.direction, boundary = _$_object_spread.boundary, onDrag = _$_object_spread.onDrag, onDragStart = _$_object_spread.onDragStart, onDragEnd = _$_object_spread.onDragEnd, children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style;
     var classPrefix = 'nut-drag';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(boundary), 2), boundaryState = _useState[0], setBoundaryState = _useState[1];
     var myDrag = (0, _react.useRef)(null);
@@ -62,7 +52,7 @@ var Drag = function Drag(props) {
     var middleLine = (0, _react.useRef)(0);
     var getInfo = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function() {
-            var el, _dragRef_current, top, left, bottom, right, _getWindowInfo, screenWidth, windowHeight, _ref, width, height;
+            var el, top, left, bottom, right, _getWindowInfo, screenWidth, windowHeight, _ref, width, height, dragTop, dragLeft;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
@@ -78,17 +68,14 @@ var Drag = function Drag(props) {
                             (0, _getrectbytaro.getRectByTaro)(dragRef.current)
                         ];
                     case 1:
-                        _ref = _state.sent(), width = _ref.width, height = _ref.height;
-                        (_dragRef_current = dragRef.current) === null || _dragRef_current === void 0 ? void 0 : _dragRef_current.getBoundingClientRect();
-                        (0, _taro.createSelectorQuery)().select(".".concat(className)).boundingClientRect(function(rec) {
-                            setBoundaryState({
-                                top: -rec.top + top,
-                                left: -rec.left + left,
-                                bottom: windowHeight - rec.top - bottom - Math.ceil(height),
-                                right: screenWidth - rec.left - right - Math.ceil(width)
-                            });
-                            middleLine.current = screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2;
-                        }).exec();
+                        _ref = _state.sent(), width = _ref.width, height = _ref.height, dragTop = _ref.top, dragLeft = _ref.left;
+                        setBoundaryState({
+                            top: -dragTop + top,
+                            left: -dragLeft + left,
+                            bottom: windowHeight - dragTop - bottom - Math.ceil(height),
+                            right: screenWidth - dragLeft - right - Math.ceil(width)
+                        });
+                        middleLine.current = screenWidth - width - dragLeft - (screenWidth - width) / 2;
                         _state.label = 2;
                     case 2:
                         return [
@@ -143,7 +130,7 @@ var Drag = function Drag(props) {
             });
         }
     };
-    var touchEnd = function touchEnd(e) {
+    var touchEnd = function touchEnd() {
         onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd({
             offset: [
                 translateX.current,
@@ -163,27 +150,34 @@ var Drag = function Drag(props) {
         }
     };
     (0, _react.useEffect)(function() {
-        timer.current = window.setTimeout(function() {
-            getInfo();
-        }, 300);
+        if (dragRef.current) {
+            if ((0, _platformtaro.web)()) {
+                timer.current = window.setTimeout(function() {
+                    getInfo();
+                }, 300);
+            } else {
+                getInfo();
+            }
+        }
         return function() {
             clearTimeout(timer.current);
         };
-    }, []);
-    return /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
+    }, [
+        dragRef.current
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_components.View, {
         style: style,
-        className: "".concat(classPrefix, " ").concat(className)
-    }, reset), {
+        className: "".concat(classPrefix, " ").concat(className),
         ref: myDrag
-    }), /*#__PURE__*/ _react.default.createElement("div", {
+    }, /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-inner"),
-        onTouchStart: function onTouchStart(event) {
-            return touchStart(event);
-        },
         ref: dragRef,
+        catchMove: true,
+        // @ts-ignore
+        onTouchStart: touchStart,
+        // @ts-ignore
         onTouchMove: touchMove,
         onTouchEnd: touchEnd,
-        // eslint-disable-next-line react/no-unknown-property
         style: currstyle
     }, children));
 };

package/dist/cjs/packages/drag/style/drag.scss

@@ -10,5 +10,6 @@
     display: inline-flex;
     width: fit-content;
     height: fit-content;
+    touch-action: none;
   }
 }

package/dist/cjs/packages/drag/style/style.css

@@ -15,4 +15,5 @@
   display: inline-flex;
   width: fit-content;
   height: fit-content;
+  touch-action: none;
 }

package/dist/cjs/packages/drag/style/style.harmony.css

@@ -15,4 +15,5 @@
   display: inline-flex;
   width: fit-content;
   height: fit-content;
+  touch-action: none;
 }

package/dist/cjs/packages/fixednav/fixednav.js

@@ -18,6 +18,7 @@ var _components = require("@tarojs/components");
 var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
 var _index1 = require("../configprovider/index");
 var _overlay = require("../overlay/overlay");
+var _index2 = /*#__PURE__*/ _interop_require_default._(require("../badge/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.defaultOverlayProps), {
     activeText: '',
     inactiveText: '',
@@ -39,6 +40,20 @@ var FixedNav = function FixedNav(props) {
     var classes = (0, _classnames.default)(classPrefix, {
         active: visible
     }, type, className);
+    var renderListItem = function renderListItem(item, index) {
+        return /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-list-item"),
+            onClick: function onClick(event) {
+                return onSelect(item, event);
+            },
+            key: item.id || index
+        }, /*#__PURE__*/ _react.default.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ _react.default.createElement("img", {
+            src: item.icon,
+            alt: ""
+        }), /*#__PURE__*/ _react.default.createElement(_components.View, {
+            className: "".concat(classPrefix, "-list-text")
+        }, item.text));
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: classes,
         style: (0, _object_spread._)({}, position, style)
@@ -53,20 +68,11 @@ var FixedNav = function FixedNav(props) {
     }, children || /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-list")
     }, list.map(function(item, index) {
-        return /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-list-item"),
-            onClick: function onClick(event) {
-                return onSelect(item, event);
-            },
-            key: item.id || index
-        }, /*#__PURE__*/ _react.default.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ _react.default.createElement("img", {
-            src: item.icon,
-            alt: ""
-        }), /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "".concat(classPrefix, "-list-text")
-        }, item.text), item.num && /*#__PURE__*/ _react.default.createElement(_components.View, {
-            className: "b"
-        }, item.num));
+        return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.num ? /*#__PURE__*/ _react.default.createElement(_index2.default, {
+            value: item.num,
+            top: 8,
+            right: 6
+        }, renderListItem(item, index)) : /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, renderListItem(item, index)));
     }))), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "".concat(classPrefix, "-btn"),
         onClick: function onClick() {

package/dist/cjs/packages/fixednav/style/fixednav.scss

@@ -95,21 +95,6 @@
       .nut-fixednav-list-text {
         font-size: 10px;
       }
-
-      .b {
-        position: absolute;
-        right: 0;
-        top: 1px;
-        height: 14px;
-        line-height: 14px;
-        font-size: 10px;
-        padding: 0 3px;
-        color: white;
-        background: $color-primary;
-        border-radius: 7px;
-        text-align: center;
-        min-width: 12px;
-      }
     }
   }
 

package/dist/cjs/packages/fixednav/style/style.css

@@ -136,20 +136,6 @@
 .nut-fixednav-list-item .nut-fixednav-list-text {
   font-size: 10px;
 }
-.nut-fixednav-list-item .b {
-  position: absolute;
-  right: 0;
-  top: 1px;
-  height: 14px;
-  line-height: 14px;
-  font-size: 10px;
-  padding: 0 3px;
-  color: white;
-  background: var(--nutui-color-primary, #ff0f23);
-  border-radius: 7px;
-  text-align: center;
-  min-width: 12px;
-}
 .nut-fixednav.left {
   right: auto;
   left: 0;

package/dist/cjs/packages/fixednav/style/style.harmony.css

@@ -81,20 +81,6 @@
 .nut-fixednav-list-item .nut-fixednav-list-text {
   font-size: 10px;
 }
-.nut-fixednav-list-item .b {
-  position: absolute;
-  right: 0;
-  top: 1px;
-  height: 14px;
-  line-height: 14px;
-  font-size: 10px;
-  padding: 0 3px;
-  color: white;
-  background: #ff0f23;
-  border-radius: 7px;
-  text-align: center;
-  min-width: 12px;
-}
 .nut-fixednav.left {
   right: auto;
   left: 0;

package/dist/cjs/packages/form/form.d.ts

@@ -6,7 +6,9 @@ export interface FormProps extends TFormProps {
     initialValues: any;
     name: string;
     form: any;
+    disabled: boolean;
     divider: boolean;
+    validateTrigger: string | string[] | false;
     labelPosition: 'top' | 'left' | 'right';
     starPosition: 'left' | 'right';
     onFinish: (values: any) => void;

package/dist/cjs/packages/form/form.js

@@ -23,7 +23,9 @@ var _index = /*#__PURE__*/ _interop_require_default._(require("../cell/index"));
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     labelPosition: 'right',
     starPosition: 'left',
+    disabled: false,
     divider: false,
+    validateTrigger: 'onChange',
     onFinish: function onFinish(values) {},
     onFinishFailed: function onFinishFailed(values, errorFields) {}
 });
@@ -34,15 +36,17 @@ var PositionInfo = {
 };
 var Form = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     var classPrefix = 'nut-form';
-    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, footer = _ref.footer, children = _ref.children, initialValues = _ref.initialValues, divider = _ref.divider, onFinish = _ref.onFinish, onFinishFailed = _ref.onFinishFailed, labelPosition = _ref.labelPosition, starPosition = _ref.starPosition, form = _ref.form, rest = (0, _object_without_properties._)(_ref, [
+    var _ref = (0, _object_spread._)({}, defaultProps, props), className = _ref.className, style = _ref.style, footer = _ref.footer, children = _ref.children, initialValues = _ref.initialValues, divider = _ref.divider, disabled = _ref.disabled, onFinish = _ref.onFinish, onFinishFailed = _ref.onFinishFailed, validateTrigger = _ref.validateTrigger, labelPosition = _ref.labelPosition, starPosition = _ref.starPosition, form = _ref.form, rest = (0, _object_without_properties._)(_ref, [
         "className",
         "style",
         "footer",
         "children",
         "initialValues",
         "divider",
+        "disabled",
         "onFinish",
         "onFinishFailed",
+        "validateTrigger",
         "labelPosition",
         "starPosition",
         "form"
@@ -89,7 +93,12 @@ var Form = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     }), /*#__PURE__*/ _react.default.createElement(_index.default.Group, {
         divider: divider
     }, /*#__PURE__*/ _react.default.createElement(_context.Context.Provider, {
-        value: formInstance
+        value: {
+            formInstance: formInstance,
+            labelPosition: labelPosition,
+            disabled: disabled,
+            validateTrigger: validateTrigger
+        }
     }, children), footer ? /*#__PURE__*/ _react.default.createElement(_index.default, {
         className: "".concat(classPrefix, "-footer")
     }, footer) : null));

package/dist/cjs/packages/form/index.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import { FormProps } from "./form";
 import { FormItem } from "../formitem/formitem";
 import { FormInstance } from './types';
-import { useForm } from "./useform";
+import { useForm, useWatch } from "./useform";
 export type { FormItemRuleWithoutValidator, FormInstance, FormFieldEntity, } from './types';
 type CompoundedComponent = React.ForwardRefExoticComponent<Partial<FormProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & React.RefAttributes<FormInstance>> & {
     Item: typeof FormItem;
     useForm: typeof useForm;
+    useWatch: typeof useWatch;
 };
 declare const InnerForm: CompoundedComponent;
 export default InnerForm;

package/dist/cjs/packages/form/index.js

@@ -16,4 +16,5 @@ var _useform = require("./useform");
 var InnerForm = _form.Form;
 InnerForm.Item = _formitem.FormItem;
 InnerForm.useForm = _useform.useForm;
+InnerForm.useWatch = _useform.useWatch;
 var _default = InnerForm;

package/dist/cjs/packages/form/style/form.scss

@@ -1,67 +1 @@
-.form-layout-right .nut-form-item-label {
-  text-align: right;
-  padding-right: 24px;
-  white-space: nowrap;
-}
 
-.form-layout-left .nut-form-item-label {
-  position: relative;
-  text-align: left;
-  padding-left: 12px;
-  white-space: nowrap;
-
-  .required {
-    display: block;
-    line-height: 1.5;
-    position: absolute;
-    left: 0.1em;
-  }
-}
-
-.form-layout-top .nut-form-item {
-  flex-direction: column;
-  align-items: flex-start;
-  white-space: nowrap;
-}
-
-.form-layout-top .nut-form-item-label {
-  padding-bottom: 4px;
-  display: block;
-  padding-right: 24px;
-}
-
-.form-layout-top .nut-form-item-body {
-  margin-left: 0;
-  width: 100%;
-}
-
-[dir='rtl'] .form-layout-right .nut-form-item-label,
-.nut-rtl .form-layout-right .nut-form-item-label {
-  text-align: left;
-  padding-right: 0;
-  padding-left: 24px;
-}
-
-[dir='rtl'] .form-layout-left .nut-form-item-label,
-.nut-rtl .form-layout-left .nut-form-item-label {
-  text-align: right;
-  padding-left: 0;
-  padding-right: 12px;
-
-  .required {
-    left: auto;
-    right: 0.1em;
-  }
-}
-
-[dir='rtl'] .form-layout-top .nut-form-item-label,
-.nut-rtl .form-layout-top .nut-form-item-label {
-  padding-right: 0;
-  padding-left: 24px;
-}
-
-[dir='rtl'] .form-layout-top .nut-form-item-body,
-.nut-rtl .form-layout-top .nut-form-item-body {
-  margin-left: 0;
-  margin-right: 0;
-}