@hw-component/form 0.0.9-beta-v11 → 0.0.9-beta-v16

package/es/Form/FormItem/BasicItem.js

@@ -14,7 +14,7 @@ import { Col, Form, Space } from 'antd';
 import React from 'react';
 import Index$2 from './Helper.js';
 import { useClassName } from '../../hooks/index.js';
-import { useHide } from './hooks.js';
+import { usePositionClassName, useHide } from './hooks.js';
 import { useFormContext } from '../Context/index.js';
 import { useDefaultRender } from '../hooks/useDefaultRender.js';
 import { useDefaultComponents } from '../hooks/index.js';
@@ -64,15 +64,17 @@ var Index = function Index(props) {
       span: 24
     } : _props$itemSpan,
     _props$hideLabel = props.hideLabel,
-    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
-    labelAlign = props.labelAlign,
-    oProps = _objectWithoutProperties(props, _excluded);
-  props.labelAlign;
-    var inProps = _objectWithoutProperties(props, _excluded2);
+    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
+    props.labelAlign;
+    var oProps = _objectWithoutProperties(props, _excluded);
+  var _props$labelAlign = props.labelAlign,
+    align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    inProps = _objectWithoutProperties(props, _excluded2);
   var _useFormContext = useFormContext(),
     form = _useFormContext.form;
   var defaultComponent = useDefaultComponents();
   var defaultRender = useDefaultRender(inProps, defaultComponent);
+  var className = usePositionClassName(align);
   var hideItem = useHide({
     hide: hide,
     form: form
@@ -82,12 +84,12 @@ var Index = function Index(props) {
   }
   return jsx(Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
     children: jsx(Form.Item, _objectSpread(_objectSpread({
+      className: className,
       label: !hideLabel && jsx(Index$1, {
         hover: hover,
         labelWidth: labelWidth,
         required: required,
         colon: colon,
-        align: labelAlign,
         children: label
       })
     }, oProps), {}, {

package/es/Form/FormItem/hooks.d.ts

@@ -1,8 +1,10 @@
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
 export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }
 export declare const useShouldUpdate: ({ hide, shouldUpdate, }: Omit<HItemProps, "name">) => import("rc-field-form/lib/Field").ShouldUpdate<any> | undefined;
 export declare const useHide: ({ hide, form }: UseHideUpItemModal) => boolean;
+export declare const usePositionClassName: (position: LabelAlignModal) => string;
 export {};

package/es/Form/FormItem/hooks.js

@@ -2,6 +2,7 @@
 import UpFormItem from './UpFormItem.js';
 import RegularFormItem from './RegularFormItem.js';
 import { useMemo } from 'react';
+import { useClassName } from '../../hooks/index.js';
 
 var useFormItemDomControl = function useFormItemDomControl(_ref) {
   var shouldUpdate = _ref.shouldUpdate,
@@ -33,6 +34,17 @@ var useHide = function useHide(_ref3) {
   }
   return !!hide;
 };
+var classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left"
+};
+var usePositionClassName = function usePositionClassName(position) {
+  var className = classNameData[position];
+  return useClassName(className);
+};
 
-export { useFormItemDomControl, useHide, useShouldUpdate };
+export { useFormItemDomControl, useHide, usePositionClassName, useShouldUpdate };
 // powered by hdj

package/es/Form/Label.d.ts

@@ -5,7 +5,6 @@ interface IProps {
     hover?: string | HoverModal;
     colon?: boolean;
     required?: boolean;
-    align?: "left" | "right";
 }
 declare const Index: React.FC<IProps>;
 export default Index;

package/es/Form/Label.js

@@ -19,9 +19,7 @@ var Index = function Index(_ref2) {
     children = _ref2.children,
     colon = _ref2.colon,
     required = _ref2.required,
-    hover = _ref2.hover,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "right" : _ref2$align;
+    hover = _ref2.hover;
   var _useHover = useHover({
       hover: hover
     }),
@@ -31,8 +29,7 @@ var Index = function Index(_ref2) {
   var className = useClassName(array);
   return jsxs("div", {
     style: {
-      width: labelWidth,
-      textAlign: align
+      width: labelWidth
     },
     className: className,
     children: [children, text && jsx("span", {

package/es/Form/hooks/useDefaultRender.js

@@ -12,7 +12,7 @@ import { jsx } from 'react/jsx-runtime';
 import componentConfig from '../config.js';
 import React from 'react';
 
-var _excluded = ["render", "labelWidth", "colon", "type", "itemProps", "itemSpan", "hideLabel"];
+var _excluded = ["render", "labelWidth", "colon", "type", "itemProps", "itemSpan", "hideLabel", "style"];
 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; }
 var useDefaultRender = function useDefaultRender(props, defaultComponents) {
@@ -25,6 +25,7 @@ var useDefaultRender = function useDefaultRender(props, defaultComponents) {
     itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
     props.itemSpan;
     props.hideLabel;
+    props.style;
     var componentProps = _objectWithoutProperties(props, _excluded);
   var mergeComponent = _objectSpread(_objectSpread({}, componentConfig), defaultComponents);
   var dom = mergeComponent[type];

package/es/Form/index.js

@@ -9,6 +9,7 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.function.name.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEffect, createElement } from 'react';
 import { Form, Row } from 'antd';
@@ -99,13 +100,14 @@ var HForm = (function (_ref) {
               _itemData$hideLabel = itemData.hideLabel,
               hideLabel = _itemData$hideLabel === void 0 ? formHideLabel : _itemData$hideLabel,
               _itemData$labelAlign = itemData.labelAlign,
-              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign;
+              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
+              name = itemData.name;
             return /*#__PURE__*/createElement(Item, _objectSpread(_objectSpread({}, itemData), {}, {
-              key: index,
+              labelAlign: labelAlign,
+              key: name || index,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
-              labelWidth: itemLabelWidth || labelWidth,
-              labelAlign: labelAlign
+              labelWidth: itemLabelWidth || labelWidth
             }));
           })
         }), jsx(InitSet, {})]

package/es/Form/modal.d.ts

@@ -32,7 +32,8 @@ export interface DispatchModal<T = string | string[]> {
     manual?: boolean;
     reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"> {
     type?: string;
     itemProps?: ItemPropsType;
     render?: RenderFun;
@@ -45,8 +46,9 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
     dispatch?: DispatchModal;
     itemSpan?: ColProps;
     hideLabel?: boolean;
+    labelAlign?: LabelAlignModal;
 }
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish"> {
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
     configData: HItemProps[];
     labelWidth?: number;
     request?: (values: T, params?: any) => Promise<R>;
@@ -59,7 +61,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     hideLabel?: boolean;
     gutter?: Gutter | [Gutter, Gutter];
     submitLoading?: boolean;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -68,7 +70,7 @@ export interface HFormItemProps extends HItemProps {
     itemSpan?: ColProps;
     initValueProvider?: AddValueFormat;
     subProvider?: AddValueFormat;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {

package/es/index.css

@@ -33,6 +33,27 @@
           align-items: center;
   min-height: 32px;
 }
+.ant-hw-form-base-item-top-left .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-left .ant-hw-form-item-colon {
+  text-align: left;
+}
+.ant-hw-form-base-item-top-right .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-top .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-left .ant-hw-form-item-colon {
+  text-align: left;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/lib/Form/FormItem/BasicItem.js

@@ -67,15 +67,17 @@ var Index = function Index(props) {
       span: 24
     } : _props$itemSpan,
     _props$hideLabel = props.hideLabel,
-    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
-    labelAlign = props.labelAlign,
-    oProps = _objectWithoutProperties(props, _excluded);
-  props.labelAlign;
-    var inProps = _objectWithoutProperties(props, _excluded2);
+    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
+    props.labelAlign;
+    var oProps = _objectWithoutProperties(props, _excluded);
+  var _props$labelAlign = props.labelAlign,
+    align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    inProps = _objectWithoutProperties(props, _excluded2);
   var _useFormContext = index.useFormContext(),
     form = _useFormContext.form;
   var defaultComponent = index$1.useDefaultComponents();
   var defaultRender = useDefaultRender.useDefaultRender(inProps, defaultComponent);
+  var className = hooks.usePositionClassName(align);
   var hideItem = hooks.useHide({
     hide: hide,
     form: form
@@ -85,12 +87,12 @@ var Index = function Index(props) {
   }
   return jsxRuntime.jsx(antd.Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
     children: jsxRuntime.jsx(antd.Form.Item, _objectSpread(_objectSpread({
+      className: className,
       label: !hideLabel && jsxRuntime.jsx(Label.default, {
         hover: hover,
         labelWidth: labelWidth,
         required: required,
         colon: colon,
-        align: labelAlign,
         children: label
       })
     }, oProps), {}, {

package/lib/Form/FormItem/hooks.d.ts

@@ -1,8 +1,10 @@
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
 export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }
 export declare const useShouldUpdate: ({ hide, shouldUpdate, }: Omit<HItemProps, "name">) => import("rc-field-form/lib/Field").ShouldUpdate<any> | undefined;
 export declare const useHide: ({ hide, form }: UseHideUpItemModal) => boolean;
+export declare const usePositionClassName: (position: LabelAlignModal) => string;
 export {};

package/lib/Form/FormItem/hooks.js

@@ -3,6 +3,7 @@
 var UpFormItem = require('./UpFormItem.js');
 var RegularFormItem = require('./RegularFormItem.js');
 var React = require('react');
+var index = require('../../hooks/index.js');
 
 var useFormItemDomControl = function useFormItemDomControl(_ref) {
   var shouldUpdate = _ref.shouldUpdate,
@@ -34,8 +35,20 @@ var useHide = function useHide(_ref3) {
   }
   return !!hide;
 };
+var classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left"
+};
+var usePositionClassName = function usePositionClassName(position) {
+  var className = classNameData[position];
+  return index.useClassName(className);
+};
 
 exports.useFormItemDomControl = useFormItemDomControl;
 exports.useHide = useHide;
+exports.usePositionClassName = usePositionClassName;
 exports.useShouldUpdate = useShouldUpdate;
 // powered by h

package/lib/Form/Label.d.ts

@@ -5,7 +5,6 @@ interface IProps {
     hover?: string | HoverModal;
     colon?: boolean;
     required?: boolean;
-    align?: "left" | "right";
 }
 declare const Index: React.FC<IProps>;
 export default Index;

package/lib/Form/Label.js

@@ -22,9 +22,7 @@ var Index = function Index(_ref2) {
     children = _ref2.children,
     colon = _ref2.colon,
     required = _ref2.required,
-    hover = _ref2.hover,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "right" : _ref2$align;
+    hover = _ref2.hover;
   var _useHover = useHover({
       hover: hover
     }),
@@ -34,8 +32,7 @@ var Index = function Index(_ref2) {
   var className = index.useClassName(array);
   return jsxRuntime.jsxs("div", {
     style: {
-      width: labelWidth,
-      textAlign: align
+      width: labelWidth
     },
     className: className,
     children: [children, text && jsxRuntime.jsx("span", {

package/lib/Form/hooks/useDefaultRender.js

@@ -13,7 +13,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var config = require('../config.js');
 var React = require('react');
 
-var _excluded = ["render", "labelWidth", "colon", "type", "itemProps", "itemSpan", "hideLabel"];
+var _excluded = ["render", "labelWidth", "colon", "type", "itemProps", "itemSpan", "hideLabel", "style"];
 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; }
 var useDefaultRender = function useDefaultRender(props, defaultComponents) {
@@ -26,6 +26,7 @@ var useDefaultRender = function useDefaultRender(props, defaultComponents) {
     itemProps = _props$itemProps === void 0 ? {} : _props$itemProps;
     props.itemSpan;
     props.hideLabel;
+    props.style;
     var componentProps = _objectWithoutProperties(props, _excluded);
   var mergeComponent = _objectSpread(_objectSpread({}, config.default), defaultComponents);
   var dom = mergeComponent[type];

package/lib/Form/index.js

@@ -12,6 +12,7 @@ require('core-js/modules/es.object.get-own-property-descriptors.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('core-js/modules/es.array.map.js');
+require('core-js/modules/es.function.name.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var antd = require('antd');
@@ -102,13 +103,14 @@ var HForm = (function (_ref) {
               _itemData$hideLabel = itemData.hideLabel,
               hideLabel = _itemData$hideLabel === void 0 ? formHideLabel : _itemData$hideLabel,
               _itemData$labelAlign = itemData.labelAlign,
-              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign;
+              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
+              name = itemData.name;
             return /*#__PURE__*/React.createElement(index$3.default, _objectSpread(_objectSpread({}, itemData), {}, {
-              key: index,
+              labelAlign: labelAlign,
+              key: name || index,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
-              labelWidth: itemLabelWidth || labelWidth,
-              labelAlign: labelAlign
+              labelWidth: itemLabelWidth || labelWidth
             }));
           })
         }), jsxRuntime.jsx(InitSet.default, {})]

package/lib/Form/modal.d.ts

@@ -32,7 +32,8 @@ export interface DispatchModal<T = string | string[]> {
     manual?: boolean;
     reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"> {
     type?: string;
     itemProps?: ItemPropsType;
     render?: RenderFun;
@@ -45,8 +46,9 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
     dispatch?: DispatchModal;
     itemSpan?: ColProps;
     hideLabel?: boolean;
+    labelAlign?: LabelAlignModal;
 }
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish"> {
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
     configData: HItemProps[];
     labelWidth?: number;
     request?: (values: T, params?: any) => Promise<R>;
@@ -59,7 +61,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     hideLabel?: boolean;
     gutter?: Gutter | [Gutter, Gutter];
     submitLoading?: boolean;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -68,7 +70,7 @@ export interface HFormItemProps extends HItemProps {
     itemSpan?: ColProps;
     initValueProvider?: AddValueFormat;
     subProvider?: AddValueFormat;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {

package/lib/index.css

@@ -33,6 +33,27 @@
           align-items: center;
   min-height: 32px;
 }
+.ant-hw-form-base-item-top-left .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-left .ant-hw-form-item-colon {
+  text-align: left;
+}
+.ant-hw-form-base-item-top-right .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-top .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-left .ant-hw-form-item-colon {
+  text-align: left;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.9-beta-v11",
+  "version": "0.0.9-beta-v16",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/FormItem/BasicItem.tsx

@@ -3,7 +3,7 @@ import { Form, Space, Col } from "antd";
 import React from "react";
 import Helper from "./Helper";
 import { useClassName } from "../../hooks";
-import { useHide } from "./hooks";
+import { useHide, usePositionClassName } from "./hooks";
 import { useFormContext } from "../Context";
 import type { HItemProps } from "../modal";
 import { useDefaultRender } from "../hooks/useDefaultRender";
@@ -30,7 +30,6 @@ const Content: React.FC<ContentProps> = ({
     </Space>
   );
 };
-
 const Index: React.FC<HFormItemProps> = (props) => {
   const {
     hover,
@@ -48,10 +47,11 @@ const Index: React.FC<HFormItemProps> = (props) => {
     labelAlign,
     ...oProps
   } = props;
-  const {labelAlign:align,...inProps}=props;
+  const { labelAlign: align = "right", ...inProps } = props;
   const { form } = useFormContext();
   const defaultComponent = useDefaultComponents();
   const defaultRender = useDefaultRender(inProps, defaultComponent);
+  const className = usePositionClassName(align);
   const hideItem = useHide({ hide, form });
   if (hideItem) {
     return null;
@@ -59,6 +59,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
   return (
     <Col {...itemSpan}>
       <Form.Item
+        className={className}
         label={
           !hideLabel && (
             <Label
@@ -66,7 +67,6 @@ const Index: React.FC<HFormItemProps> = (props) => {
               labelWidth={labelWidth}
               required={required}
               colon={colon}
-              align={labelAlign}
             >
               {label}
             </Label>

package/src/components/Form/FormItem/hooks.tsx

@@ -2,6 +2,8 @@ import UpFormItem from "./UpFormItem";
 import RegularFormItem from "./RegularFormItem";
 import { useMemo } from "react";
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
+import { useClassName } from "../../hooks";
 
 export const useFormItemDomControl = ({
   shouldUpdate,
@@ -38,3 +40,15 @@ export const useHide = ({ hide, form }: UseHideUpItemModal) => {
   }
   return !!hide;
 };
+
+const classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left",
+};
+export const usePositionClassName = (position: LabelAlignModal) => {
+  const className = classNameData[position];
+  return useClassName(className);
+};

package/src/components/Form/Label.tsx

@@ -9,7 +9,6 @@ interface IProps {
   hover?: string | HoverModal;
   colon?: boolean;
   required?: boolean;
-  align?: "left" | "right";
 }
 const useHover = ({ hover }: IProps) => {
   if (!hover || typeof hover === "string") {
@@ -26,7 +25,6 @@ const Index: React.FC<IProps> = ({
   colon,
   required,
   hover,
-  align = "right",
 }) => {
   const { text, icon } = useHover({ hover });
   const array = [
@@ -36,7 +34,7 @@ const Index: React.FC<IProps> = ({
 
   const className = useClassName(array);
   return (
-    <div style={{ width: labelWidth, textAlign: align }} className={className}>
+    <div style={{ width: labelWidth }} className={className}>
       {children}
       {text && (
         <span style={{ marginLeft: 4 }}>

package/src/components/Form/hooks/useDefaultRender.tsx

@@ -19,6 +19,7 @@ export const useDefaultRender = (
     itemProps = {},
     itemSpan,
     hideLabel,
+    style,
     ...componentProps
   } = props;
   const mergeComponent = { ...FormConfig, ...defaultComponents };

package/src/components/Form/index.less

@@ -20,3 +20,35 @@
   align-items: center;
   min-height: 32px;
 }
+.@{ant-prefix}-hw-form-base-item-top-left {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: left;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-top-right {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: right;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-top {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-right {
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: right;
+  }
+}
+
+.@{ant-prefix}-hw-form-base-item-left {
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: left;
+  }
+}

package/src/components/Form/index.tsx

@@ -80,15 +80,16 @@ export default ({
                 labelWidth: itemLabelWidth,
                 hideLabel = formHideLabel,
                 labelAlign = formLabelAlign,
+                name
               } = itemData;
               return (
                 <Item
                   {...itemData}
-                  key={index}
+                  labelAlign={labelAlign}
+                  key={name||index}
                   hideLabel={hideLabel}
                   itemSpan={itemSpan}
                   labelWidth={itemLabelWidth || labelWidth}
-                  labelAlign={labelAlign}
                 />
               );
             })}

package/src/components/Form/modal.ts

@@ -75,7 +75,9 @@ export interface DispatchModal<T = string | string[]> {
   manual?: boolean;
   reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+
+export interface HItemProps extends Omit<FormItemProps, "name"|"labelAlign"> {
   type?: string;
   itemProps?: ItemPropsType;
   render?: RenderFun;
@@ -90,10 +92,10 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
   dispatch?: DispatchModal;
   itemSpan?: ColProps;
   hideLabel?: boolean;
+  labelAlign?: LabelAlignModal;
 }
-
 export interface HFormProps<T = any, R = any>
-  extends Omit<FormProps, "form" | "onFinish"> {
+  extends Omit<FormProps, "form" | "onFinish"|"labelAlign"> {
   configData: HItemProps[];
   labelWidth?: number;
   request?: (values: T, params?: any) => Promise<R>;
@@ -106,7 +108,7 @@ export interface HFormProps<T = any, R = any>
   hideLabel?: boolean;
   gutter?: Gutter | [Gutter, Gutter];
   submitLoading?: boolean;
-  labelAlign?: "left" | "right";
+  labelAlign?: LabelAlignModal;
 }
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
@@ -115,7 +117,7 @@ export interface HFormItemProps extends HItemProps {
   itemSpan?: ColProps;
   initValueProvider?: AddValueFormat;
   subProvider?: AddValueFormat;
-  labelAlign?: "left" | "right";
+  labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {

package/src/components/Select/hooks/changeHooks.tsx

@@ -125,7 +125,7 @@ export const useValueChange = (params: PartialHSelectProps) => {
       setVal(changeVal);
       return;
     }
-    if (!changeVal){
+    if (!changeVal) {
       onChange(changeVal, itemOps);
       return;
     }

package/src/pages/Form/index.tsx

@@ -14,61 +14,6 @@ const formData = (options) => {
     },
   ];
   return [
-    {
-      label: "输入框",
-      name: "name",
-      rules: [
-        () => {
-          return {
-            required: true,
-          };
-        },
-      ],
-    },
-    {
-      label: "数字",
-      name: "sz",
-      type: "inputNumber",
-      rules: [{ required: true }],
-    },
-    {
-      label: "下拉框213",
-      name: "select",
-      type: "select",
-      dispatch: {
-        fnKey: "reload",
-        dependencies: ["selectInput", "sz"],
-      },
-      itemProps: {
-        options: op,
-        showSearch: true,
-        allowClear:true,
-        mode:"multiple"
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "下拉输入框",
-      name: "selectInput",
-      type: "selectInput",
-      rules: [{ required: true }],
-      itemProps: {
-        valueName: {
-          select: "op",
-          input: "opInput",
-        },
-        selectProps: {
-          options: [{ label: "测试", value: 1 }],
-        },
-      },
-    },
-    {
-      label: "按钮输入框",
-      name: "buttonInput",
-      type: "buttonInput",
-      children: "点击",
-      rules: [{ required: true }],
-    },
     {
       label: "选择",
       name: "checkboxGroup",
@@ -80,6 +25,7 @@ const formData = (options) => {
         { value: "选择2", key: "check2" },
       ],
       direction: "vertical",
+      labelAlign: "topLeft",
     },
     {
       label: "开关",
@@ -93,100 +39,6 @@ const formData = (options) => {
         },
       },
     },
-    {
-      label: "时间",
-      name: "datePicker",
-      type: "datePicker",
-      hover: "时间选择",
-      helper: "帮助我",
-      itemProps: {
-        subProvider: (item, val) => {
-          return {
-            datePicker: "fakfjkfjsklfjskljsak",
-          };
-        },
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "时间段",
-      name: "rangePicker",
-      type: "rangePicker",
-      helper: "帮助我",
-      rules: [{ required: true }],
-      itemProps: {
-        valueMap: {
-          start: "testStart",
-          end: "testEnd",
-        },
-      },
-    },
-    {
-      label: "时分秒",
-      name: "timePicker",
-      type: "timePicker",
-      rules: [{ required: true }],
-    },
-    {
-      label: "文件",
-      name: "upload",
-      type: "upload",
-      rules: [{ required: true }],
-    },
-    {
-      label: "地址文件",
-      name: "urlUpload",
-      type: "urlUpload",
-      itemProps: {
-        maxCount: 3,
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "颜色",
-      name: "colorInput",
-      type: "colorInput",
-    },
-    {
-      label: "测试",
-      type: "test",
-    },
-    {
-      label: "多级",
-      type: "cascader",
-      name: "cascader",
-      itemProps: {
-        options: [
-          {
-            value: "多选1",
-            key: 1,
-          },
-        ],
-      },
-    },
-    {
-      label: "验证码",
-      type: "verificationCodeInput",
-      name: "verificationCodeInput",
-      itemProps: {
-        request: () => {
-          return Promise.resolve({ code: 200 });
-        },
-      },
-    },
-    {
-      label: "去空input",
-      type: "trimInput",
-      name: "trimInput",
-    },
-    {
-      label: "去空textArea",
-      type: "trimTextArea",
-      name: "trimTextArea",
-    },
-    {
-      type: "submit",
-    },
     {
       type: "submit",
       itemProps: {
@@ -267,9 +119,8 @@ export default () => {
           configData={formData(options)}
           labelWidth={200}
           form={form}
-          labelAlign={"left"}
+          labelAlign={"right"}
           submitLoading={true}
-          itemSpan={{ span: 12, xs: 24, md: 12 }}
           onFinish={(value) => {
             console.log(value);
           }}