@nutui/nutui-react-taro 3.0.1 → 3.0.3-beta.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# v3.0.2
+
+`2025-03-07`
+
+- feat(form): 同步 2.x 的功能 (#2976)
+- feat(swipe): harmony (#3039)
+- fix: sync v15 sign (#3067)
+- fix: 解决按需引入picker和datepicker没有样式问题 (#3064)
+- fix(signature): 解决taro h5不能绘制问题 (#3060)
+- fix(input): style 属性设置为 CSSProperties 类型的值 (#3059)
+- fix: taro default import error (#3057)
+- fix(docs): 快速上手文件 (#3058)
+- docs(site): 删除无用的代码，更新视觉版本号 (#3063)
+- docs: update common docs
+- docs: fix some mistakes in the documentation (#3056)
+- chore: add jdtaro. True means that will repeat (#3065)
+- chore: update site style (#3055)
+- refactor: migrate site to nutui-react (#2955)
+
 # v3.0.1
 
 `2025-03-05`

package/dist/cjs/hooks/use-client-rect.js

@@ -38,6 +38,7 @@ var getRect = function getRect(elementRef) {
         };
     }
     if (element && element.getBoundingClientRect) {
+        console.log(element, element.getBoundingClientRect());
         return element.getBoundingClientRect();
     }
     return {

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

@@ -383,6 +383,76 @@
   right: 0;
 }
 
+.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-picker {
   background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;

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

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

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

@@ -2,6 +2,76 @@
 /* #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/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/index.js

@@ -1,2 +1,3 @@
 import '../../overlay/style';
+import '../../badge/style';
 import './fixednav.scss';

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

@@ -57,6 +57,103 @@
   right: 0;
 }
 
+.nut-badge {
+  position: relative;
+  display: inline-flex;
+  width: auto;
+}
+.nut-badge-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  padding: var(--nutui-badge-icon-padding, 2px);
+  text-align: center;
+  z-index: var(--nutui-badge-z-index, 1);
+}
+.nut-badge-icon .nut-icon {
+  width: var(--nutui-badge-icon-size, 10px);
+  height: var(--nutui-badge-icon-size, 10px);
+  font-size: var(--nutui-badge-icon-size, 10px);
+}
+.nut-badge-sup, .nut-badge-icon {
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup::after, .nut-badge-icon::after {
+  content: "";
+  position: absolute;
+  top: -50%;
+  bottom: -50%;
+  left: -50%;
+  right: -50%;
+  transform: scale(0.5);
+  border: var(--nutui-badge-border, 1px solid #ffffff);
+  border-radius: var(--nutui-badge-border-radius, var(--nutui-badge-height, 14px));
+}
+.nut-badge-sup {
+  display: inline-flex;
+  justify-content: center;
+  height: var(--nutui-badge-height, 14px);
+  min-width: var(--nutui-badge-min-width, 6px);
+  padding: var(--nutui-badge-padding, 1px 4px);
+  box-sizing: border-box;
+  color: var(--nutui-badge-color, #ffffff);
+  font-size: var(--nutui-badge-font-size, var(--nutui-font-size-xxs, 10px));
+  line-height: 12px;
+  white-space: nowrap;
+  font-weight: normal;
+  vertical-align: middle;
+  background: var(--nutui-badge-background-color, var(--nutui-color-primary, #ff0f23));
+  z-index: 1;
+}
+.nut-badge-number {
+  font-family: "JD";
+  /* #ifdef harmony */
+  line-height: 12px;
+  /* #endif */
+  /* #ifndef harmony */
+  line-height: 13px;
+  /* #endif */
+}
+.nut-badge-one {
+  height: var(--nutui-badge-height, 14px);
+  width: var(--nutui-badge-height, 14px);
+}
+.nut-badge-content {
+  position: absolute;
+  transform: var(--nutui-badge-content-transform, translate(50%, -50%));
+}
+.nut-badge-dot {
+  padding: 0;
+  border-radius: 50%;
+}
+.nut-badge-dot::after {
+  border: var(--nutui-badge-dot-border, 1px solid #ffffff);
+  border-radius: 50%;
+}
+.nut-badge-dot-normal {
+  min-width: var(--nutui-badge-dot-width, 6px);
+  width: var(--nutui-badge-dot-width, 6px);
+  height: var(--nutui-badge-dot-width, 6px);
+}
+.nut-badge-dot-small {
+  min-width: var(--nutui-badge-dot-width, 4px);
+  width: var(--nutui-badge-dot-width, 4px);
+  height: var(--nutui-badge-dot-width, 4px);
+}
+.nut-badge-dot-large {
+  min-width: var(--nutui-badge-dot-width, 8px);
+  width: var(--nutui-badge-dot-width, 8px);
+  height: var(--nutui-badge-dot-width, 8px);
+}
+.nut-badge-outline {
+  background: #ffffff;
+  color: var(--nutui-badge-outline-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-badge-outline::after {
+  border: var(--nutui-badge-outline-border, 1px solid var(--nutui-color-primary, #ff0f23));
+}
+
 .nut-fixednav {
   position: fixed;
   z-index: var(--nutui-fixednav-index, 900);
@@ -136,20 +233,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;
-}

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

@@ -142,32 +142,38 @@
 
 .nut-form-item {
   display: flex;
-  align-items: center;
-  padding: 4px 12px;
+  line-height: unset;
 }
-.nut-form-item.error.line::before {
-  border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));
-  transform: scaleX(1);
-  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+.nut-form-item-disabled {
+  opacity: 0.4;
+  pointer-events: none;
 }
 .nut-form-item-label {
+  display: flex;
+  flex-direction: row;
   font-size: var(--nutui-form-item-label-font-size, var(--nutui-font-size-base, 14px));
   font-weight: normal;
   width: var(--nutui-form-item-label-width, 90px);
   margin-right: var(--nutui-form-item-label-margin-right, 10px);
-  flex: none !important;
-  display: inline-block !important;
+  flex: 0 0 auto;
   word-wrap: break-word;
   text-align: var(--nutui-form-item-label-text-align, left);
+  line-height: unset;
 }
-.nut-form-item-label .required::before {
-  content: "*";
+.nut-form-item-label-required {
   color: var(--nutui-form-item-required-color, var(--nutui-color-primary, #ff0f23));
   margin-right: var(--nutui-form-item-required-margin-right, 4px);
+  display: block;
+  position: absolute;
+  left: -10px;
+}
+.nut-form-item .nut-form-item-labeltxt {
+  position: relative;
+  font-size: 12px;
 }
 .nut-form-item-body {
   flex: 1;
-  display: flex !important;
+  display: flex;
   flex-direction: column;
 }
 .nut-form-item-body-slots {
@@ -177,6 +183,9 @@
   padding: 0;
   border: 0;
 }
+.nut-form-item-body-slots .nut-input-container {
+  height: auto;
+}
 .nut-form-item-body-slots .nut-input-text {
   font-size: var(--nutui-form-item-body-font-size, var(--nutui-font-size-base, 14px));
   text-align: var(--nutui-form-item-body-input-text-align, left);
@@ -191,7 +200,7 @@
   min-height: 24px;
 }
 .nut-form-item-body-slots .nut-textarea {
-  padding: 0 !important;
+  padding: 0;
 }
 .nut-form-item-body-slots .nut-textarea .nut-textarea-textarea {
   font: inherit;
@@ -237,38 +246,39 @@
   text-align: right;
 }
 
-.form-layout-right .nut-form-item-label {
-  text-align: right;
+/* position */
+.nut-form-item-label-right {
+  justify-content: flex-end;
   padding-right: 24px;
   white-space: nowrap;
 }
 
-.form-layout-left .nut-form-item-label {
+.nut-form-item-label-left {
   position: relative;
-  text-align: left;
   padding-left: 12px;
   white-space: nowrap;
 }
-.form-layout-left .nut-form-item-label .required {
+
+.nut-form-item-label-left-required {
   display: block;
   line-height: 1.5;
   position: absolute;
   left: 0.1em;
 }
 
-.form-layout-top .nut-form-item {
+.nut-form-item-top {
   flex-direction: column;
   align-items: flex-start;
   white-space: nowrap;
 }
 
-.form-layout-top .nut-form-item-label {
-  padding-bottom: 4px;
+.nut-form-item-label-top {
   display: block;
+  padding-bottom: 4px;
   padding-right: 24px;
 }
 
-.form-layout-top .nut-form-item-body {
+.nut-form-item-body-top {
   margin-left: 0;
   width: 100%;
 }