@tendaui/components 1.2.4 → 1.3.1

package/form/_example/label-align.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Form, Input } from "@tendaui/react";
+
+const { FormItem } = Form;
+
+const LabelAlignForm = () => (
+  <div style={{ display: "flex", flexDirection: "column", gap: "32px", width: 500 }}>
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>左对齐</h4>
+      <Form labelAlign="left" labelWidth={100}>
+        <FormItem label="用户名" name="username1">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password1">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>右对齐</h4>
+      <Form labelAlign="right" labelWidth={100}>
+        <FormItem label="用户名" name="username2">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password2">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+
+    <div>
+      <h4 style={{ marginBottom: "12px", color: "#666" }}>顶部对齐</h4>
+      <Form labelAlign="top">
+        <FormItem label="用户名" name="username3">
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="密码" name="password3">
+          <Input type="password" placeholder="请输入密码" />
+        </FormItem>
+      </Form>
+    </div>
+  </div>
+);
+
+export default LabelAlignForm;

package/form/_example/methods.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Form, Input, Button, FormItem } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const FormMethodsExample = () => {
+  const [form] = Form.useForm();
+  const { success } = useNotification();
+
+  const handleValidate = async () => {
+    const result = await form.validate();
+    console.log("验证结果:", result);
+    if (result === true) {
+      success({ title: "验证通过", message: "表单验证成功" });
+    }
+  };
+
+  const handleSetFields = () => {
+    form.setFieldsValue({
+      username: "testuser",
+      email: "test@example.com"
+    });
+    success({ title: "设置成功", message: "已填充表单数据" });
+  };
+
+  const handleGetFields = () => {
+    const values = form.getFieldsValue(true);
+    console.log("当前表单值:", values);
+    success({ title: "获取成功", message: JSON.stringify(values) });
+  };
+
+  const handleReset = () => {
+    form.reset();
+    success({ title: "重置成功", message: "表单已重置" });
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} labelWidth={100} colon>
+        <FormItem label="用户名" name="username" rules={[{ required: true, message: "请输入用户名" }]}>
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+        <FormItem label="邮箱" name="email" rules={[{ email: true, message: "请输入正确的邮箱" }]}>
+          <Input placeholder="请输入邮箱" />
+        </FormItem>
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+            <Button theme="primary" onClick={handleValidate}>
+              验证表单
+            </Button>
+            <Button onClick={handleSetFields}>填充数据</Button>
+            <Button onClick={handleGetFields}>获取数据</Button>
+            <Button onClick={handleReset}>重置表单</Button>
+          </div>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <FormMethodsExample />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/_example/validation.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Form, Input, Button } from "@tendaui/react";
+import { NotificationProvider, useNotification } from "@tendaui/react/notification";
+
+const { FormItem } = Form;
+
+const ValidationForm = () => {
+  const [form] = Form.useForm();
+  const { success, error } = useNotification();
+
+  const onSubmit = (e: any) => {
+    if (e.validateResult === true) {
+      success({ title: "验证通过", message: "表单提交成功" });
+    } else {
+      error({ title: "验证失败", message: "请检查表单输入" });
+    }
+  };
+
+  return (
+    <div style={{ width: 500 }}>
+      <Form form={form} onSubmit={onSubmit} colon labelWidth={100}>
+        <FormItem
+          label="用户名"
+          name="username"
+          requiredMark
+          rules={[
+            { required: true, message: "请输入用户名" },
+            { min: 3, message: "用户名至少3个字符" },
+            { max: 20, message: "用户名最多20个字符" }
+          ]}
+        >
+          <Input placeholder="请输入用户名" />
+        </FormItem>
+
+        <FormItem
+          label="邮箱"
+          name="email"
+          requiredMark
+          rules={[
+            { required: true, message: "请输入邮箱" },
+            { email: true, message: "请输入正确的邮箱格式" }
+          ]}
+        >
+          <Input placeholder="请输入邮箱" />
+        </FormItem>
+
+        <FormItem label="手机号" name="phone" rules={[{ telnumber: true, message: "请输入正确的手机号" }]}>
+          <Input placeholder="请输入手机号" />
+        </FormItem>
+
+        <FormItem label="网址" name="url" rules={[{ url: true, message: "请输入正确的网址" }]}>
+          <Input placeholder="请输入网址" />
+        </FormItem>
+
+        <FormItem style={{ marginInlineStart: 100 }}>
+          <Button type="submit" theme="primary">
+            提交
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  );
+};
+
+const FormExample = () => (
+  <NotificationProvider>
+    <ValidationForm />
+  </NotificationProvider>
+);
+
+export default FormExample;

package/form/hooks/useFormItemStyle.tsx

@@ -5,7 +5,7 @@ import parseTNode from "../../utils/parseTNode";
 import { ValidateStatus } from "../const";
 
 export default function useFormItemStyle(props) {
-  const { classPrefix } = useConfig();
+  const { classPrefix, direction } = useConfig();
 
   const {
     className,
@@ -70,13 +70,22 @@ export default function useFormItemStyle(props) {
     [`${classPrefix}-form__item-with-help`]: helpNode,
     [`${classPrefix}-form__item-with-extra`]: extraNode
   });
+  // todo form item label 也需要 RTL 处理
+  const isRtl = direction === "rtl";
+  const resolvedLabelAlign = isRtl
+    ? labelAlign === "left"
+      ? "right"
+      : labelAlign === "right"
+        ? "left"
+        : labelAlign
+    : labelAlign;
 
   const formItemLabelClass = classNames(`${classPrefix}-form__label`, {
     [`${classPrefix}-form__label--required`]: needRequiredMark,
     [`${classPrefix}-form__label--required-right`]: needRequiredMark && requiredMarkPosition === "right",
-    [`${classPrefix}-form__label--top`]: labelAlign === "top" || !labelWidth,
-    [`${classPrefix}-form__label--left`]: labelAlign === "left" && labelWidth,
-    [`${classPrefix}-form__label--right`]: labelAlign === "right" && labelWidth
+    [`${classPrefix}-form__label--top`]: resolvedLabelAlign === "top" || !labelWidth,
+    [`${classPrefix}-form__label--left`]: resolvedLabelAlign === "left" && labelWidth,
+    [`${classPrefix}-form__label--right`]: resolvedLabelAlign === "right" && labelWidth
   });
 
   const contentClass = () => {
@@ -100,15 +109,18 @@ export default function useFormItemStyle(props) {
 
   let labelStyle = {};
   let contentStyle = {};
-  if (label && labelWidth && labelAlign !== "top") {
+  if (label && labelWidth && resolvedLabelAlign !== "top") {
     if (typeof labelWidth === "number") {
       labelStyle = { width: `${labelWidth}px` };
-      contentStyle = { marginLeft: layout !== "inline" ? `${labelWidth}px` : "" };
+      contentStyle = { marginInlineStart: layout !== "inline" ? `${labelWidth}px` : "" };
     } else {
       labelStyle = { width: labelWidth };
-      contentStyle = { marginLeft: layout !== "inline" ? labelWidth : "" };
+      contentStyle = { marginInlineStart: layout !== "inline" ? labelWidth : "" };
     }
   }
+  if (isRtl && label && labelWidth && resolvedLabelAlign !== "top") {
+    labelStyle = { ...labelStyle, float: "right" };
+  }
 
   return {
     formItemClass,

package/form/index.ts

@@ -1,11 +1,29 @@
 import _Form from "./Form";
-
+import FormList from "./FormList";
+import useForm from "./hooks/useForm";
+import useWatch from "./hooks/useWatch";
+import FormItem from "./FormItem";
 import "./style/index.js";
 
 export type { FormProps } from "./Form";
 export type { FormItemProps } from "./FormItem";
 export * from "./type";
 export * from "./hooks/interface";
+export { FormItem, FormList, useForm, useWatch };
+
+// 扩展 Form 组件类型，添加静态方法
+interface FormStatic {
+  useForm: typeof useForm;
+  useWatch: typeof useWatch;
+  FormItem: typeof FormItem;
+  FormList: typeof FormList;
+}
+
+// 确保 Form 组件包含所有必要的静态属性
+export const Form = _Form as typeof _Form & FormStatic;
+Form.useForm = useForm;
+Form.useWatch = useWatch;
+Form.FormItem = FormItem;
+Form.FormList = FormList;
 
-export const Form = _Form;
 export default Form;

package/global-config/default-config.ts

@@ -1,39 +1,39 @@
-export type AnimationType = 'ripple' | 'expand' | 'fade';
+export type AnimationType = "ripple" | "expand" | "fade";
 
 export default {
-  classPrefix: 't',
+  classPrefix: "t",
   animation: {
-    include: ['ripple', 'expand', 'fade'],
-    exclude: [],
-  } as Record<'include' | 'exclude', Array<AnimationType>>,
+    include: ["ripple", "expand", "fade"],
+    exclude: []
+  } as Record<"include" | "exclude", Array<AnimationType>>,
   attach: null,
   calendar: {
     firstDayOfWeek: 1,
     fillWithZero: true,
-    controllerConfig: undefined,
+    controllerConfig: undefined
   },
   icon: {},
   input: {
-    autocomplete: '',
+    autocomplete: ""
   },
   dialog: {
     closeOnEscKeydown: true,
     closeOnOverlayClick: true,
     confirmBtnTheme: {
-      default: 'primary',
-      info: 'primary',
-      warning: 'primary',
-      danger: 'primary',
-      success: 'primary',
-    },
+      default: "primary",
+      info: "primary",
+      warning: "primary",
+      danger: "primary",
+      success: "primary"
+    }
   },
   message: {},
   popconfirm: {
     confirmBtnTheme: {
-      default: 'primary',
-      warning: 'primary',
-      danger: 'primary',
-    },
+      default: "primary",
+      warning: "primary",
+      danger: "primary"
+    }
   },
   table: {
     // 展开和收起图标（使用收起图标）
@@ -47,34 +47,34 @@ export default {
     // 是否隐藏排序图标的文本提示
     hideSortTips: false,
     // 全局表格尺寸配置
-    size: 'medium',
+    size: "medium"
   },
   select: {
     // 清除按钮
     clearIcon: undefined,
-    filterable: false,
+    filterable: false
   },
   drawer: {
     closeOnEscKeydown: true,
     closeOnOverlayClick: true,
-    size: 'small',
+    size: "small"
   },
   tree: {
     // 目录层级图标
-    folderIcon: undefined,
+    folderIcon: undefined
   },
   datePicker: {
-    firstDayOfWeek: 1,
+    firstDayOfWeek: 1
   },
   steps: {
     checkIcon: undefined,
-    errorIcon: undefined,
+    errorIcon: undefined
   },
   tag: {
-    closeIcon: undefined,
+    closeIcon: undefined
   },
   form: {
-    requiredMark: undefined,
+    requiredMark: undefined
   },
   empty: {
     titleText: {
@@ -82,14 +82,14 @@ export default {
       success: undefined,
       fail: undefined,
       empty: undefined,
-      networkError: undefined,
+      networkError: undefined
     },
     image: {
       maintenance: undefined,
       success: undefined,
       fail: undefined,
       empty: undefined,
-      networkError: undefined,
+      networkError: undefined
     }
-  },
+  }
 } as const;