pdyform 2.0.2 → 2.2.0

package/README.md

@@ -15,49 +15,64 @@ A high-performance, schema-driven dynamic form system with **React** and **Vue**
 ### 🌟 Features
 
 - **Schema-Driven**: Define your forms using a simple and intuitive JSON/JS schema.
-- **Framework Agnostic Core**: Core logic is entirely framework-free, making it extremely lightweight.
-- **React & Vue Support**: Out-of-the-box UI components for React (built on Shadcn UI) and Vue (built on Shadcn-vue).
-- **High Performance**: Optimized rendering to prevent unnecessary re-renders on complex forms.
-- **100% Test Coverage**: Core logic and UI components are fully unit-tested with a 100% pass rate.
+- **Framework Agnostic Core**: Core logic is entirely framework-free, making it extremely lightweight and portable.
+- **Conditional Logic**: Supports dynamic `hidden` and `disabled` states based on form values (supports both boolean and functions).
+- **React & Vue Support**: Out-of-the-box UI components built on top of modern UI libraries (Radix UI / Shadcn).
+- **Type Safety**: Built with TypeScript for excellent developer experience and catch errors early.
+- **High Performance**: Optimized rendering using store-based state management (Zustand) to minimize re-renders.
 
 ### 📦 Packages
 
 The monorepo contains the following packages:
 
-- `pdyform-core`: Framework-agnostic logic, utilities, and schema parser.
-- `pdyform-react`: React components based on Shadcn UI.
-- `pdyform-vue`: Vue components based on Shadcn-vue.
+- `pdyform-core`: Framework-agnostic logic, validation utilities, and schema parser.
+- `pdyform-react`: React components and hooks (`useForm`).
+- `pdyform-vue`: Vue components and composables (`useForm`).
 
 ### 🚀 Installation
 
 ```bash
-npm install pdyform
+# Install core and framework-specific package
+pnpm add pdyform-core pdyform-react # For React
 # or
-pnpm add pdyform
-# or
-yarn add pdyform
+pnpm add pdyform-core pdyform-vue   # For Vue
 ```
 
 ### 💻 Usage
 
-This package provides a unified entry point. You can import framework-specific components directly from the main package:
-
 #### React
 
 ```tsx
 import React from 'react';
-import { DynamicForm } from 'pdyform/react';
-import type { FormSchema } from 'pdyform/core';
+import { DynamicForm } from 'pdyform-react';
+import type { FormSchema } from 'pdyform-core';
 
 const schema: FormSchema = {
+  title: "Login",
   fields: [
-    { name: 'username', label: 'Username', type: 'text', required: true },
-    { name: 'email', label: 'Email', type: 'text', required: true, rules: { pattern: '\\S+@\\S+\\.\\S+' } }
+    { 
+      name: 'username', 
+      label: 'Username', 
+      type: 'text', 
+      validations: [{ type: 'required', message: 'Username is required' }] 
+    },
+    { 
+      name: 'isAdmin', 
+      label: 'Is Admin?', 
+      type: 'switch' 
+    },
+    { 
+      name: 'adminToken', 
+      label: 'Admin Token', 
+      type: 'password',
+      // Conditional logic: only show if isAdmin is true
+      hidden: (values) => !values.isAdmin 
+    }
   ]
 };
 
 export default function App() {
-  return <DynamicForm schema={schema} onSubmit={console.log} />;
+  return <DynamicForm schema={schema} onSubmit={(values) => console.log(values)} />;
 }
 ```
 
@@ -65,17 +80,25 @@ export default function App() {
 
 ```vue
 <script setup lang="ts">
-import { DynamicForm } from 'pdyform/vue';
-import type { FormSchema } from 'pdyform/core';
+import { DynamicForm } from 'pdyform-vue';
+import type { FormSchema } from 'pdyform-core';
 
 const schema: FormSchema = {
+  title: "Profile",
   fields: [
-    { name: 'username', label: 'Username', type: 'text', required: true },
-    { name: 'email', label: 'Email', type: 'text', required: true, rules: { pattern: '\\S+@\\S+\\.\\S+' } }
+    { 
+      name: 'email', 
+      label: 'Email', 
+      type: 'email', 
+      validations: [
+        { type: 'required', message: 'Email is required' },
+        { type: 'email', message: 'Invalid email format' }
+      ] 
+    }
   ]
 };
 
-const handleSubmit = (data: any) => console.log(data);
+const handleSubmit = (values: any) => console.log(values);
 </script>
 
 <template>
@@ -87,54 +110,70 @@ const handleSubmit = (data: any) => console.log(data);
 
 ## 中文说明
 
-一个高性能、基于 Schema 驱动的动态表单系统，同时支持 **React** 和 **Vue**。它提供了一个与框架无关的核心逻辑层用于 Schema 解析和表单校验，允许在不同的前端框架中无缝集成并保持一致的配置体验。
+一个高性能、基于 Schema 驱动的动态表单系统，同时支持 **React** 和 **Vue**。它提供了一个与框架无关的核心逻辑层用于 Schema 解析和表单校验，允许在不同的框架中无缝集成并保持一致的配置体验。
 
 ### 🌟 特性
 
 - **Schema 驱动**: 使用简单直观的 JSON/JS 对象定义你的表单。
-- **框架无关核心**: 核心逻辑完全独立于任何 UI 框架，极其轻量化。
-- **支持 React & Vue**: 开箱即用的 UI 组件，React 版本基于 Shadcn UI，Vue 版本基于 Shadcn-vue。
-- **高性能**: 渲染优化机制，避免复杂表单场景下的无效重渲染。
-- **可靠的测试覆盖率**: 核心逻辑与 UI 层均经过严格的单元测试，用例通过率 100%。
+- **框架无关核心**: 核心逻辑完全独立于 UI 框架，极其轻量且易于移植。
+- **联动逻辑**: 支持基于表单实时数值动态控制字段的 `hidden`（隐藏）和 `disabled`（禁用）状态（支持布尔值或函数）。
+- **支持 React & Vue**: 提供基于现代 UI 库（Radix UI / Shadcn）的开箱即用组件。
+- **类型安全**: 全量 TypeScript 编写，提供极佳的开发体验。
+- **高性能**: 基于 Zustand 状态管理库优化渲染逻辑，最小化不必要的组件重绘。
 
 ### 📦 包结构
 
-此 Monorepo 包含以下几个核心子包：
-
 - `pdyform-core`: 与框架无关的核心表单逻辑、校验工具和 Schema 解析器。
-- `pdyform-react`: 基于 Shadcn UI 的 React 动态表单组件。
-- `pdyform-vue`: 基于 Shadcn-vue 的 Vue 动态表单组件。
+- `pdyform-react`: 基于 React 的动态表单组件与 `useForm` Hook。
+- `pdyform-vue`: 基于 Vue 的动态表单组件与 `useForm` 组合式 API。
 
 ### 🚀 安装
 
 ```bash
-npm install pdyform
-# 或
-pnpm add pdyform
+# 安装核心包和对应的框架包
+pnpm add pdyform-core pdyform-react # React 项目
 # 或
-yarn add pdyform
+pnpm add pdyform-core pdyform-vue   # Vue 项目
 ```
 
 ### 💻 基本使用
 
-`pdyform` 提供了统一的导出入口。你可以直接从主包中按需引入对应框架的组件和核心类型：
-
 #### React 示例
 
 ```tsx
 import React from 'react';
-import { DynamicForm } from 'pdyform/react';
-import type { FormSchema } from 'pdyform/core';
+import { DynamicForm } from 'pdyform-react';
+import type { FormSchema } from 'pdyform-core';
 
 const schema: FormSchema = {
   fields: [
-    { name: 'username', label: '用户名', type: 'text', required: true },
-    { name: 'email', label: '邮箱', type: 'text', required: true, rules: { pattern: '\\S+@\\S+\\.\\S+' } }
+    { 
+      name: 'username', 
+      label: '用户名', 
+      type: 'text', 
+      validations: [{ type: 'required', message: '请输入用户名' }] 
+    },
+    {
+      name: 'type',
+      label: '用户类型',
+      type: 'select',
+      options: [
+        { label: '个人', value: 'personal' },
+        { label: '企业', value: 'enterprise' }
+      ]
+    },
+    {
+      name: 'companyName',
+      label: '公司名称',
+      type: 'text',
+      // 联动逻辑：仅当用户类型为 'enterprise' 时显示
+      hidden: (values) => values.type !== 'enterprise'
+    }
   ]
 };
 
 export default function App() {
-  return <DynamicForm schema={schema} onSubmit={console.log} />;
+  return <DynamicForm schema={schema} onSubmit={(values) => console.log(values)} />;
 }
 ```
 
@@ -142,17 +181,21 @@ export default function App() {
 
 ```vue
 <script setup lang="ts">
-import { DynamicForm } from 'pdyform/vue';
-import type { FormSchema } from 'pdyform/core';
+import { DynamicForm } from 'pdyform-vue';
+import type { FormSchema } from 'pdyform-core';
 
 const schema: FormSchema = {
   fields: [
-    { name: 'username', label: '用户名', type: 'text', required: true },
-    { name: 'email', label: '邮箱', type: 'text', required: true, rules: { pattern: '\\S+@\\S+\\.\\S+' } }
+    { 
+      name: 'nickname', 
+      label: '昵称', 
+      type: 'text', 
+      validations: [{ type: 'required', message: '昵称不能为空' }] 
+    }
   ]
 };
 
-const handleSubmit = (data: any) => console.log(data);
+const handleSubmit = (values: any) => console.log(values);
 </script>
 
 <template>
@@ -165,39 +208,20 @@ const handleSubmit = (data: any) => console.log(data);
 ## 🛠️ Development / 本地开发
 
 ```bash
-# Install dependencies / 安装依赖
+# 安装依赖
 pnpm install
 
-# Build all packages / 编译所有包
+# 编译所有包
 pnpm run build:all
 
-# Run all tests / 运行所有单元测试
+# 运行所有单元测试
 pnpm run test:all
 ```
 
 ## Examples / 示例工程
 
-新增 `example/` 目录用于本地开发调试（实时编辑 schema，验证 React/Vue 渲染与提交结果）：
-
-- `example/react-demo`：React 渲染与 schema 调试
-- `example/vue-demo`：Vue 渲染与 schema 调试
-- `example/shared/defaultSchema.ts`：共享默认 schema
-
-在根目录运行：
-
-```bash
-# React + Vue 同时启动（推荐）
-pnpm run dev:example
-
-# 单独启动 React demo
-pnpm run dev:example:react
-
-# 单独启动 Vue demo
-pnpm run dev:example:vue
-
-# 构建示例工程
-pnpm run build:example:react
-pnpm run build:example:vue
-```
+项目内置了 `example/` 目录用于开发调试，支持实时编辑 Schema 并查看渲染效果：
 
-更多说明见 `example/README.md`。
+- `pnpm run dev:example`：同时启动 React 和 Vue 的 Demo 预览。
+- `pnpm run dev:example:react`：仅启动 React Demo。
+- `pnpm run dev:example:vue`：仅启动 Vue Demo。

package/package.json

@@ -9,11 +9,17 @@
     "json-schema",
     "form-builder"
   ],
+  "files": [
+    "README.md",
+    "packages/core/dist/**",
+    "packages/react/dist/**",
+    "packages/vue/dist/**"
+  ],
   "exports": {
     "./core": {
       "types": "./packages/core/dist/index.d.ts",
-      "import": "./packages/core/dist/index.mjs",
-      "require": "./packages/core/dist/index.js"
+      "import": "./packages/core/dist/index.js",
+      "require": "./packages/core/dist/index.cjs"
     },
     "./react": {
       "types": "./packages/react/dist/index.d.ts",
@@ -51,7 +57,7 @@
     "vitest": "^1.0.0",
     "vue": "^3.5.0"
   },
-  "version": "2.0.2",
+  "version": "2.2.0",
   "scripts": {
     "build:all": "turbo run build",
     "dev:all": "turbo run dev",

package/packages/core/dist/chunk-KA6QUMVR.js

@@ -0,0 +1,158 @@
+// src/utils.ts
+function parseNumberish(value) {
+  if (typeof value === "number") return Number.isNaN(value) ? null : value;
+  if (typeof value !== "string" || value.trim() === "") return null;
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+var defaultErrorMessages = {
+  required: "{label} is required",
+  min: "{label} must be at least {value}",
+  max: "{label} must be at most {value}",
+  email: "Invalid email address",
+  pattern: "Invalid format",
+  custom: "Invalid value"
+};
+function formatMessage(template, field, rule) {
+  return template.replace("{label}", field.label).replace("{value}", String(rule.value || ""));
+}
+function get(obj, path, defaultValue) {
+  if (!path) return defaultValue;
+  const keys = path.split(/[.[\]]/).filter(Boolean);
+  let result = obj;
+  for (const key of keys) {
+    if (result === null || result === void 0) return defaultValue;
+    result = result[key];
+  }
+  return result === void 0 ? defaultValue : result;
+}
+function set(obj, path, value) {
+  if (Object(obj) !== obj) return obj;
+  const keys = path.split(/[.[\]]/).filter(Boolean);
+  const newObj = { ...obj };
+  let current = newObj;
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i];
+    const nextKey = keys[i + 1];
+    const isNextKeyIndex = /^\d+$/.test(nextKey);
+    if (!(key in current) || current[key] === null || typeof current[key] !== "object") {
+      current[key] = isNextKeyIndex ? [] : {};
+    } else {
+      current[key] = Array.isArray(current[key]) ? [...current[key]] : { ...current[key] };
+    }
+    current = current[key];
+  }
+  current[keys[keys.length - 1]] = value;
+  return newObj;
+}
+function normalizeFieldValue(field, value) {
+  if (field.type !== "number") return value;
+  if (value === "" || value === void 0 || value === null) return "";
+  const numericValue = parseNumberish(value);
+  return numericValue === null ? value : numericValue;
+}
+async function validateField(value, field, customMessages) {
+  if (!field.validations) return null;
+  const messages = { ...defaultErrorMessages, ...customMessages };
+  for (const rule of field.validations) {
+    switch (rule.type) {
+      case "required":
+        if (value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0) {
+          return rule.message || formatMessage(messages.required, field, rule);
+        }
+        break;
+      case "min":
+        if (field.type === "number") {
+          const numericValue = parseNumberish(value);
+          if (numericValue !== null && numericValue < rule.value) {
+            const template = field.type === "number" ? messages.min : typeof value === "string" ? "{label} must be at least {value} characters" : messages.min;
+            return rule.message || formatMessage(template, field, rule);
+          }
+          break;
+        }
+        if (typeof value === "number" && value < rule.value) {
+          return rule.message || formatMessage(messages.min, field, rule);
+        }
+        if (typeof value === "string" && value.length < rule.value) {
+          const template = "{label} must be at least {value} characters";
+          return rule.message || formatMessage(template, field, rule);
+        }
+        break;
+      case "max":
+        if (field.type === "number") {
+          const numericValue = parseNumberish(value);
+          if (numericValue !== null && numericValue > rule.value) {
+            return rule.message || formatMessage(messages.max, field, rule);
+          }
+          break;
+        }
+        if (typeof value === "number" && value > rule.value) {
+          return rule.message || formatMessage(messages.max, field, rule);
+        }
+        if (typeof value === "string" && value.length > rule.value) {
+          const template = "{label} must be at most {value} characters";
+          return rule.message || formatMessage(template, field, rule);
+        }
+        break;
+      case "email": {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        if (value && !emailRegex.test(value)) {
+          return rule.message || formatMessage(messages.email, field, rule);
+        }
+        break;
+      }
+      case "pattern":
+        if (value && rule.value && !new RegExp(rule.value).test(value)) {
+          return rule.message || formatMessage(messages.pattern, field, rule);
+        }
+        break;
+      case "custom":
+        if (rule.validator) {
+          const result = await rule.validator(value);
+          if (typeof result === "string") return result;
+          if (result === false) return rule.message || formatMessage(messages.custom, field, rule);
+        }
+        break;
+    }
+  }
+  return null;
+}
+async function validateFieldByName(fields, name, value, resolver, allValues, customMessages) {
+  if (resolver && allValues) {
+    const resolverErrors = await resolver(allValues);
+    if (resolverErrors[name]) return resolverErrors[name];
+  }
+  const field = fields.find((f) => f.name === name);
+  if (!field) return null;
+  return await validateField(value, field, customMessages);
+}
+async function validateForm(fields, values, resolver, customMessages) {
+  let errors = {};
+  if (resolver) {
+    errors = await resolver(values);
+  }
+  const validationPromises = fields.map(async (field) => {
+    if (errors[field.name]) return;
+    const error = await validateField(get(values, field.name), field, customMessages);
+    if (error) errors[field.name] = error;
+  });
+  await Promise.all(validationPromises);
+  return errors;
+}
+function getDefaultValues(fields) {
+  return fields.reduce((acc, field) => {
+    acc[field.name] = field.defaultValue !== void 0 ? field.defaultValue : field.type === "checkbox" ? [] : "";
+    return acc;
+  }, {});
+}
+
+export {
+  defaultErrorMessages,
+  get,
+  set,
+  normalizeFieldValue,
+  validateField,
+  validateFieldByName,
+  validateForm,
+  getDefaultValues
+};

package/packages/core/dist/chunk-REHKL5VH.js

@@ -0,0 +1,76 @@
+import {
+  get,
+  getDefaultValues,
+  normalizeFieldValue,
+  set,
+  validateFieldByName,
+  validateForm
+} from "./chunk-KA6QUMVR.js";
+
+// src/formState.ts
+import { createStore } from "zustand/vanilla";
+function createFormStore(fields, resolver, errorMessages) {
+  return createStore()((set2, getStore) => ({
+    values: getDefaultValues(fields),
+    errors: {},
+    validatingFields: [],
+    isSubmitting: false,
+    setFieldValue: async (name, rawValue) => {
+      const field = fields.find((f) => f.name === name);
+      const normalizedValue = field ? normalizeFieldValue(field, rawValue) : rawValue;
+      set2((state) => ({
+        values: set(state.values, name, normalizedValue),
+        validatingFields: [...state.validatingFields, name]
+      }));
+      try {
+        const currentValues = getStore().values;
+        const error = await validateFieldByName(fields, name, normalizedValue, resolver, currentValues, errorMessages);
+        set2((state) => ({
+          errors: { ...state.errors, [name]: error || "" },
+          validatingFields: state.validatingFields.filter((f) => f !== name)
+        }));
+      } catch (err) {
+        set2((state) => ({
+          validatingFields: state.validatingFields.filter((f) => f !== name)
+        }));
+      }
+    },
+    setFieldBlur: async (name) => {
+      set2((state) => ({
+        validatingFields: [...state.validatingFields, name]
+      }));
+      try {
+        const currentValues = getStore().values;
+        const value = get(currentValues, name);
+        const error = await validateFieldByName(fields, name, value, resolver, currentValues, errorMessages);
+        set2((state) => ({
+          errors: { ...state.errors, [name]: error || "" },
+          validatingFields: state.validatingFields.filter((f) => f !== name)
+        }));
+      } catch (err) {
+        set2((state) => ({
+          validatingFields: state.validatingFields.filter((f) => f !== name)
+        }));
+      }
+    },
+    setSubmitting: (isSubmitting) => set2({ isSubmitting }),
+    runSubmitValidation: async () => {
+      set2({ isSubmitting: true });
+      const state = getStore();
+      const errors = await validateForm(fields, state.values, resolver, errorMessages);
+      const hasError = Object.keys(errors).length > 0;
+      set2({
+        errors,
+        isSubmitting: false
+      });
+      return {
+        state: getStore(),
+        hasError
+      };
+    }
+  }));
+}
+
+export {
+  createFormStore
+};