@ burnbuzz/ form- core (中文(简体) )

框架-可知性为BuzzForm所形成的原始. 零 DOM 或 UI 依赖性 .

安装

pnpm add @buildnbuzz/form-core

快速启动

import { defineSchema, type InferType } from "@buildnbuzz/form-core";

const schema = defineSchema({
  title: "Contact Form",
  fields: [
    { type: "text", name: "name", label: "Name", required: true },
    { type: "email", name: "email", label: "Email", required: true },
  ],
});

type FormData = InferType<typeof schema.fields>;
// { name: string; email: string }

核心特征

Schema 定义

使用 defineSchema 用于具有自动受精型号的型号安全计划:

import { defineSchema, type InferType } from "@buildnbuzz/form-core";

const schema = defineSchema({
  id: "user-profile",
  title: "User Profile",
  description: "Update your profile",
  fields: [
    { type: "text", name: "firstName", label: "First Name", required: true },
    { type: "number", name: "age", label: "Age", min: 18, max: 120 },
    {
      type: "select",
      name: "role",
      label: "Role",
      options: [
        { label: "Admin", value: "admin" },
        { label: "User", value: "user" },
      ],
    },
  ],
});

动态值

参考窗体数据( E)$data)或外部环境($context对于动态标签、默认和条件:

const schema = defineSchema({
  fields: [
    { type: "text", name: "firstName", label: "First Name" },
    {
      type: "text",
      name: "greeting",
      label: { $data: "/firstName" }, // Dynamic label
      defaultValue: { $context: "/defaultGreeting" }, // Dynamic default
    },
  ],
});

可见条件

基于窗体数据或上下文显示/隐藏字段 :

const schema = defineSchema({
  fields: [
    { type: "text", name: "email", label: "Email" },
    {
      type: "text",
      name: "confirmEmail",
      label: "Confirm Email",
      condition: { $data: "/email", contains: "@" }, // Only show if email contains @
    },
  ],
});

支助 $and, (中文(简体) ), $or,比较运算符(eq, (中文(简体) ), neq, (中文(简体) ), gt, (中文(简体) ), lt, (中文(简体) ), contains(见a/c.5/49/70,附件).

验证

从字段属性加自定义规则中自动生成的验证符:

const schema = defineSchema({
  fields: [
    {
      type: "text",
      name: "username",
      label: "Username",
      required: true,
      minLength: 3,
      validate: {
        onBlur: {
          checks: [
            {
              type: "usernameAvailable",
              message: "Username is taken.",
            },
          ],
        },
      },
    },
    {
      type: "password",
      name: "confirmPassword",
      label: "Confirm Password",
      required: true,
      validate: {
        onSubmit: {
          checks: [
            {
              type: "matches",
              args: { other: { $data: "/password" } },
              message: "Passwords do not match.",
            },
          ],
        },
      },
    },
  ],
});

使用 defineValidators数字 :

import { defineValidators } from "@buildnbuzz/form-core";

const customValidators = defineValidators({
  usernameAvailable: async (value: unknown) => {
    if (typeof value !== "string") return false;
    
    const available = await checkUsername(value);
    return available ? true : "Username is taken";
  },
});

输出变换

平整嵌入式提交数据为路径键格式 :

import { transformFormOutput } from "@buildnbuzz/form-core";

const payload = transformFormOutput(
  { profile: { name: "Ada" } },
  { type: "path" },
);
// { "profile.name": "Ada" }

字段类型

基础 : text, (中文(简体) ), email, (中文(简体) ), password, (中文(简体) ), textarea, (中文(简体) ), number
选择 : select, (中文(简体) ), radio, (中文(简体) ), checkbox, (中文(简体) ), switch, (中文(简体) ), tags
复杂 : date, (中文(简体) ), group, (中文(简体) ), array
布局 : row, (中文(简体) ), tabs, (中文(简体) ), collapsible

类型推论

资源

• @ burnbuzz/ form- react ——反应适配器