@carefrees/form-utils-react-taro 0.0.15 → 0.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/assets/index.css +1 -0
  2. package/esm/layout/index.d.ts +2 -0
  3. package/esm/layout/index.js +6 -4
  4. package/lib/layout/index.d.ts +2 -0
  5. package/lib/layout/index.js +6 -4
  6. package/package.json +4 -4
  7. package/src/layout/index.tsx +6 -0
package/assets/index.css CHANGED
@@ -92,6 +92,7 @@ html.dark .carefrees-form {
92
92
  padding: 0.4rem;
93
93
  box-sizing: border-box;
94
94
  color: rgba(0, 0, 0, 0.88);
95
+ word-break: break-all;
95
96
  }
96
97
 
97
98
  .carefrees-form-item-container {
package/esm/layout/index.d.ts CHANGED
@@ -28,6 +28,8 @@ export interface FormLayoutProps extends AttrsOptions {
28
28
  * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
29
29
  */
30
30
  gap?: string | number;
31
+ /**是否添加输入框边框*/
32
+ inputBordered?: boolean;
31
33
  }
32
34
  /**布局组件*/
33
35
  export declare const FormLayout: React.MemoExoticComponent<(props: FormLayoutProps) => import("react/jsx-runtime").JSX.Element>;
package/esm/layout/index.js CHANGED
@@ -5,8 +5,8 @@ import classnames from "classnames";
5
5
  import { AttrsContext, useAttrs } from "@carefrees/form-utils-react-hooks";
6
6
  const preCls = 'carefrees-form-layout';
7
7
  const FormLayout = /*#__PURE__*/ memo((props)=>{
8
- const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemClassName: p_formItemClassName, formItemStyle: p_formItemStyle, formItemLabelClassName: p_formItemLabelClassName, formItemLabelStyle: p_formItemLabelStyle } = useAttrs();
9
- const { colCount = p_colCount, title, extra, children, isAllColSpan, className, headerClassName, bodyClassName, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemClassName = p_formItemClassName, formItemStyle = p_formItemStyle, formItemLabelClassName = p_formItemLabelClassName, formItemLabelStyle = p_formItemLabelStyle, bordered = false, gap } = props;
8
+ const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemClassName: p_formItemClassName, formItemStyle: p_formItemStyle, formItemLabelClassName: p_formItemLabelClassName, formItemLabelStyle: p_formItemLabelStyle, inputBordered: p_inputBordered } = useAttrs();
9
+ const { colCount = p_colCount, title, extra, children, isAllColSpan, className, headerClassName, bodyClassName, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemClassName = p_formItemClassName, formItemStyle = p_formItemStyle, formItemLabelClassName = p_formItemLabelClassName, formItemLabelStyle = p_formItemLabelStyle, bordered = false, inputBordered = p_inputBordered, gap } = props;
10
10
  const propsRef = useRef(props);
11
11
  propsRef.current = props;
12
12
  const cls = useMemo(()=>classnames(preCls, className, {
@@ -31,7 +31,8 @@ const FormLayout = /*#__PURE__*/ memo((props)=>{
31
31
  formItemClassName,
32
32
  formItemStyle,
33
33
  formItemLabelClassName,
34
- formItemLabelStyle
34
+ formItemLabelStyle,
35
+ inputBordered
35
36
  }), [
36
37
  colCount,
37
38
  errorLayout,
@@ -40,7 +41,8 @@ const FormLayout = /*#__PURE__*/ memo((props)=>{
40
41
  formItemClassName,
41
42
  formItemStyle,
42
43
  formItemLabelClassName,
43
- formItemLabelStyle
44
+ formItemLabelStyle,
45
+ inputBordered
44
46
  ]);
45
47
  const styleBase = useMemo(()=>{
46
48
  const css = {};
package/lib/layout/index.d.ts CHANGED
@@ -28,6 +28,8 @@ export interface FormLayoutProps extends AttrsOptions {
28
28
  * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
29
29
  */
30
30
  gap?: string | number;
31
+ /**是否添加输入框边框*/
32
+ inputBordered?: boolean;
31
33
  }
32
34
  /**布局组件*/
33
35
  export declare const FormLayout: React.MemoExoticComponent<(props: FormLayoutProps) => import("react/jsx-runtime").JSX.Element>;
package/lib/layout/index.js CHANGED
@@ -44,8 +44,8 @@ var external_classnames_default = /*#__PURE__*/ __webpack_require__.n(external_c
44
44
  const form_utils_react_hooks_namespaceObject = require("@carefrees/form-utils-react-hooks");
45
45
  const preCls = 'carefrees-form-layout';
46
46
  const FormLayout = /*#__PURE__*/ (0, external_react_namespaceObject.memo)((props)=>{
47
- const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemClassName: p_formItemClassName, formItemStyle: p_formItemStyle, formItemLabelClassName: p_formItemLabelClassName, formItemLabelStyle: p_formItemLabelStyle } = (0, form_utils_react_hooks_namespaceObject.useAttrs)();
48
- const { colCount = p_colCount, title, extra, children, isAllColSpan, className, headerClassName, bodyClassName, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemClassName = p_formItemClassName, formItemStyle = p_formItemStyle, formItemLabelClassName = p_formItemLabelClassName, formItemLabelStyle = p_formItemLabelStyle, bordered = false, gap } = props;
47
+ const { colCount: p_colCount = 4, errorLayout: p_errorLayout = 'left-bottom', labelMode: p_labelMode = 'left', showColon: p_showColon = true, formItemClassName: p_formItemClassName, formItemStyle: p_formItemStyle, formItemLabelClassName: p_formItemLabelClassName, formItemLabelStyle: p_formItemLabelStyle, inputBordered: p_inputBordered } = (0, form_utils_react_hooks_namespaceObject.useAttrs)();
48
+ const { colCount = p_colCount, title, extra, children, isAllColSpan, className, headerClassName, bodyClassName, style, headerStyle, bodyStyle, errorLayout = p_errorLayout, labelMode = p_labelMode, showColon = p_showColon, formItemClassName = p_formItemClassName, formItemStyle = p_formItemStyle, formItemLabelClassName = p_formItemLabelClassName, formItemLabelStyle = p_formItemLabelStyle, bordered = false, inputBordered = p_inputBordered, gap } = props;
49
49
  const propsRef = (0, external_react_namespaceObject.useRef)(props);
50
50
  propsRef.current = props;
51
51
  const cls = (0, external_react_namespaceObject.useMemo)(()=>external_classnames_default()(preCls, className, {
@@ -70,7 +70,8 @@ const FormLayout = /*#__PURE__*/ (0, external_react_namespaceObject.memo)((props
70
70
  formItemClassName,
71
71
  formItemStyle,
72
72
  formItemLabelClassName,
73
- formItemLabelStyle
73
+ formItemLabelStyle,
74
+ inputBordered
74
75
  }), [
75
76
  colCount,
76
77
  errorLayout,
@@ -79,7 +80,8 @@ const FormLayout = /*#__PURE__*/ (0, external_react_namespaceObject.memo)((props
79
80
  formItemClassName,
80
81
  formItemStyle,
81
82
  formItemLabelClassName,
82
- formItemLabelStyle
83
+ formItemLabelStyle,
84
+ inputBordered
83
85
  ]);
84
86
  const styleBase = (0, external_react_namespaceObject.useMemo)(()=>{
85
87
  const css = {};
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "author": "SunLxy <1011771396@qq.com>",
4
4
  "description": "taro react 表单组件",
5
5
  "homepage": "https://github.com/SunLxy/carefrees-form-utils",
6
- "version": "0.0.15",
6
+ "version": "0.0.17",
7
7
  "main": "lib/index.js",
8
8
  "types": "lib/index.d.ts",
9
9
  "module": "esm/index.js",
@@ -26,8 +26,8 @@
26
26
  "assets"
27
27
  ],
28
28
  "dependencies": {
29
- "@carefrees/form-utils": "^0.0.15",
30
- "@carefrees/form-utils-react-hooks": "^0.0.15",
29
+ "@carefrees/form-utils": "^0.0.17",
30
+ "@carefrees/form-utils-react-hooks": "^0.0.17",
31
31
  "classnames": "2.5.1"
32
32
  },
33
33
  "devDependencies": {
@@ -35,4 +35,4 @@
35
35
  "@types/react": "18.2.21",
36
36
  "react": "^18.2.0"
37
37
  }
38
- }
38
+ }
package/src/layout/index.tsx CHANGED
@@ -30,6 +30,8 @@ export interface FormLayoutProps extends AttrsOptions {
30
30
  * @description gap 属性是用来设置网格行与列之间的间隙，该属性是row-gap and column-gap的简写形式。
31
31
  */
32
32
  gap?: string | number;
33
+ /**是否添加输入框边框*/
34
+ inputBordered?: boolean;
33
35
  }
34
36
 
35
37
  const preCls = 'carefrees-form-layout';
@@ -45,6 +47,7 @@ export const FormLayout = memo((props: FormLayoutProps) => {
45
47
  formItemStyle: p_formItemStyle,
46
48
  formItemLabelClassName: p_formItemLabelClassName,
47
49
  formItemLabelStyle: p_formItemLabelStyle,
50
+ inputBordered: p_inputBordered,
48
51
  } = useAttrs();
49
52
  const {
50
53
  colCount = p_colCount,
@@ -66,6 +69,7 @@ export const FormLayout = memo((props: FormLayoutProps) => {
66
69
  formItemLabelClassName = p_formItemLabelClassName,
67
70
  formItemLabelStyle = p_formItemLabelStyle,
68
71
  bordered = false,
72
+ inputBordered = p_inputBordered,
69
73
  gap,
70
74
  } = props;
71
75
  const propsRef = useRef(props);
@@ -95,6 +99,7 @@ export const FormLayout = memo((props: FormLayoutProps) => {
95
99
  formItemStyle,
96
100
  formItemLabelClassName,
97
101
  formItemLabelStyle,
102
+ inputBordered,
98
103
  };
99
104
  }, [
100
105
  colCount,
@@ -105,6 +110,7 @@ export const FormLayout = memo((props: FormLayoutProps) => {
105
110
  formItemStyle,
106
111
  formItemLabelClassName,
107
112
  formItemLabelStyle,
113
+ inputBordered,
108
114
  ]);
109
115
  const styleBase = useMemo(() => {
110
116
  const css: React.CSSProperties = {};