@rainbow-oh/yee-c 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainbow-oh/yee-c",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "yee basic components",
   "keywords": [
     "react",

package/src/Field/demo/standalone.tsx

@@ -0,0 +1,30 @@
+import { Field, Input, TextArea } from '@rainbow-oh/yee-c';
+import React, { useState } from 'react';
+
+export default () => {
+  const [name, setName] = useState('');
+  const [remark, setRemark] = useState('');
+
+  return (
+    <div style={{ maxWidth: 400 }}>
+      <Field label="Name" required>
+        <Input
+          value={name}
+          onChange={(v: string) => setName(v)}
+          placeholder="Standalone controlled Input"
+        />
+      </Field>
+      <Field label="Remark">
+        <TextArea
+          value={remark}
+          onChange={(v: string) => setRemark(v)}
+          placeholder="Standalone controlled TextArea"
+          rows={3}
+        />
+      </Field>
+      <Field>
+        <Input placeholder="Field without label" />
+      </Field>
+    </div>
+  );
+};

package/src/Field/field.tsx

@@ -28,7 +28,7 @@ const Field: FC<FieldProps> = (props) => {
 
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
 
-  const { form } = useVirtualField(formName, name, {
+  const { form } = useVirtualField(formName ?? '', name ?? '', {
     props,
     onStoreChange: forceUpdate,
   });
@@ -49,20 +49,33 @@ const Field: FC<FieldProps> = (props) => {
   };
 
   const getControlled = (children: React.ReactElement) => {
-    const mergedDisabled =
-      disabled || (children as React.ReactElement<any>).props.disabled;
+    const childProps = (children as React.ReactElement<any>).props;
+
+    // Pure layout mode (no form): children keep their own value/onChange.
+    // Only a Field-level disabled is merged down.
+    // Pure layout mode (no form or no field name): children keep their own
+    // value/onChange. Only a Field-level disabled is merged down.
+    if (!form || name === undefined) {
+      if (disabled === undefined) return children;
+      return React.cloneElement(children as React.ReactElement<any>, {
+        disabled: disabled || childProps.disabled,
+      });
+    }
+
+    const mergedDisabled = disabled || childProps.disabled;
+    const fieldName = name;
 
     const attr = {
-      value: getFieldValue?.(name),
+      value: getFieldValue?.(fieldName),
       name: formName,
-      id: name,
+      id: fieldName,
       disabled: mergedDisabled,
       onChange: (value: unknown, ...rest: Array<unknown>) => {
         const callbacks = getCallbacks?.();
         let _value = value;
         const fieldsValue = getFieldsValue?.();
         const feedback = callbacks?.onValuesBeforeChange?.(
-          { [name]: _value },
+          { [fieldName]: _value },
           fieldsValue,
         );
 
@@ -70,20 +83,20 @@ const Field: FC<FieldProps> = (props) => {
           _value = feedback;
         }
 
-        setFieldsValue?.({ [name]: _value }, 'onChange');
+        setFieldsValue?.({ [fieldName]: _value }, 'onChange');
 
         // Call child component's onChange
         if ((children.props as any)?.onChange) {
           (children.props as any).onChange(_value, ...rest);
         }
 
-        callbacks?.['onValuesChange']?.({ [name]: _value }, fieldsValue);
+        callbacks?.['onValuesChange']?.({ [fieldName]: _value }, fieldsValue);
 
         forceUpdate();
       },
       onBlur: (event: unknown) => {
         // Fire-and-forget async validation; store notifies onStoreChange on completion.
-        void validateField?.(name, 'onBlur');
+        void validateField?.(fieldName, 'onBlur');
 
         // Call child component's onBlur
         if ((children.props as any).onBlur) {
@@ -95,7 +108,8 @@ const Field: FC<FieldProps> = (props) => {
     return React.cloneElement(children, attr);
   };
 
-  const validate = getFieldValidate?.(name);
+  const validate =
+    name !== undefined ? getFieldValidate?.(name) : undefined;
 
   return (
     <div
@@ -109,18 +123,20 @@ const Field: FC<FieldProps> = (props) => {
       )}
       style={style}
     >
-      <label
-        className={clsx(
-          `${prefixCls}-label`,
-          {
-            [`${prefixCls}-required`]: isRequired(),
-          },
-          classNames?.label,
-        )}
-        style={styles?.label}
-      >
-        {label}
-      </label>
+      {label ? (
+        <label
+          className={clsx(
+            `${prefixCls}-label`,
+            {
+              [`${prefixCls}-required`]: isRequired(),
+            },
+            classNames?.label,
+          )}
+          style={styles?.label}
+        >
+          {label}
+        </label>
+      ) : null}
       <div
         className={clsx(`${prefixCls}-content`, classNames?.content)}
         style={styles?.content}

package/src/Field/index.en-US.md

@@ -10,11 +10,15 @@ toc: 'content'
 
 # Field
 
-A standalone form field component that works without a `<Form>` wrapper. Uses `useVirtualForm` to create a virtual form for value management and validation.
+A standalone form field component that works without a `<Form>` wrapper. Two usage modes:
+
+- **Virtual form mode**: create a virtual form with `useVirtualForm`; Field manages value and validation (pass `formName` + `name`)
+- **Pure layout mode**: omit `formName` (or the form is not registered); Field only renders the label layout and required asterisk, while `value`/`onChange` pass straight through to the child — state is managed by the consumer
 
 ## Code Demo
 
 <code src="./demo/basic.tsx" title="Basic" description="Create a virtual form with useVirtualForm and bind Field to Input"></code>
+<code src="./demo/standalone.tsx" title="Pure Layout" description="Without formName, state is managed by the consumer and Field only handles label layout"></code>
 <code src="./demo/validation.tsx" title="Validation" description="required, minLength, regexp, validator rules and validateTrigger"></code>
 <code src="./demo/layout.tsx" title="Layout & Style" description="Vertical/horizontal layout and semantic style customization"></code>
 <code src="./demo/disabled.tsx" title="Disabled" description="Disable the entire field via the disabled prop"></code>
@@ -25,14 +29,14 @@ A standalone form field component that works without a `<Form>` wrapper. Uses `u
 
 | Property | Type | Description | Default |
 | --- | --- | --- | --- |
-| formName | `string` | Virtual form name (required) | - |
-| name | `string` | Field name (required) | - |
+| formName | `string` | Virtual form name; omit for pure layout mode | - |
+| name | `string` | Field name (required in virtual form mode) | - |
 | label | `React.ReactNode` | Field label | - |
 | children | `React.ReactElement` | Form control (must be a single React element) | - |
 | rules | `Rule[]` | Validation rules | - |
 | required | `boolean` | Whether the field is required (shows asterisk) | `false` |
 | layout | `'vertical' \| 'horizontal'` | Layout direction | `'vertical'` |
-| disabled | `boolean` | Whether the field is disabled | `false` |
+| disabled | `boolean` | Whether the field is disabled (merged onto the child, also works in pure layout mode) | `false` |
 | prefixCls | `string` | Class name prefix | `'yee-field'` |
 | className | `string` | Root element class name | - |
 | style | `React.CSSProperties` | Root element style | - |

package/src/Field/index.zh-CN.md

@@ -10,11 +10,15 @@ toc: 'content'
 
 # Field 字段
 
-脱离 `<Form>` 组件独立使用的表单字段组件，通过 `useVirtualForm` 创建虚拟表单来实现值管理和校验。
+脱离 `<Form>` 组件独立使用的表单字段组件。两种用法：
+
+- **虚拟表单模式**：通过 `useVirtualForm` 创建虚拟表单，Field 负责值管理和校验（传 `formName` + `name`）
+- **纯布局模式**：不传 `formName`（或该表单未注册），Field 只负责 label 布局与必填星号，`value`/`onChange` 由使用者自己控制并直接透传给子控件
 
 ## 代码演示
 
 <code src="./demo/basic.tsx" title="基础用法" description="使用 useVirtualForm 创建虚拟表单，配合 Field 绑定 Input"></code>
+<code src="./demo/standalone.tsx" title="纯布局模式" description="不传 formName，受控状态自己管理，Field 只负责标签布局"></code>
 <code src="./demo/validation.tsx" title="校验规则" description="required、minLength、regexp、validator 等校验规则，以及 validateTrigger 控制触发时机"></code>
 <code src="./demo/layout.tsx" title="布局与样式" description="垂直/水平布局、语义化样式定制"></code>
 <code src="./demo/disabled.tsx" title="禁用状态" description="通过 disabled 属性禁用整个字段"></code>
@@ -25,14 +29,14 @@ toc: 'content'
 
 | 属性名 | 类型 | 描述 | 默认值 |
 | --- | --- | --- | --- |
-| formName | `string` | 所属虚拟表单名称（必填） | - |
-| name | `string` | 字段名称（必填） | - |
+| formName | `string` | 所属虚拟表单名称；不传时 Field 为纯布局模式 | - |
+| name | `string` | 字段名称（虚拟表单模式下必填） | - |
 | label | `React.ReactNode` | 字段标签 | - |
 | children | `React.ReactElement` | 表单控件（必须是单个 React 元素） | - |
 | rules | `Rule[]` | 校验规则 | - |
 | required | `boolean` | 是否必填（显示星号标记） | `false` |
 | layout | `'vertical' \| 'horizontal'` | 布局方式 | `'vertical'` |
-| disabled | `boolean` | 是否禁用 | `false` |
+| disabled | `boolean` | 是否禁用（会合并到子控件上，纯布局模式下同样生效） | `false` |
 | prefixCls | `string` | 类名前缀 | `'yee-field'` |
 | className | `string` | 根元素类名 | - |
 | style | `React.CSSProperties` | 根元素样式 | - |

package/src/Field/interface.ts

@@ -28,13 +28,16 @@ export interface FieldProps {
    */
   label?: React.ReactNode;
   /**
-   * Field name
+   * Field name (required only when used with a registered virtual form)
    */
-  name: string;
+  name?: string;
   /**
-   * Name of the parent form
+   * Name of the parent form.
+   * When omitted (or no form is registered under this name), Field renders
+   * as a pure layout wrapper: the child keeps its own value/onChange and
+   * no validation runs.
    */
-  formName: string;
+  formName?: string;
   /**
    * Whether disabled
    */

package/src/Field/style/index.less

@@ -25,6 +25,7 @@
   &-content {
     position: relative;
     padding-bottom: var(--yee-field-content-padding-bottom);
+    width: stretch;
   }
 
   &-error {

package/src/version.ts

@@ -4,7 +4,7 @@ declare global {
   }
 }
 
-export const version = "0.13.0";
+export const version = "0.14.0";
 
 if (typeof window !== 'undefined') {
   window.__yee_c_version__ = version;