@newnpmjs/form-controls

13 种表单控件集合 — ControlMain 独立包，支持 shadcn/ui 主题。

从 @newnpmjs/dynamic-form-plugin 独立拆分的核心控件层。

安装

pnpm add @newnpmjs/form-controls

需要 peer 依赖 react@^18、react-dom@^18。

用法

import { ControlMain } from '@newnpmjs/form-controls'
import type { ControlMainProps } from '@newnpmjs/form-controls'

function Demo() {
  const [val, setVal] = useState('')

  return (
    <ControlMain
      type={1}
      name="uknom"
      value={val}
      onChange={setVal}
    />
  )
}

控件类型

| type | 控件 | 说明 | |------|------|------| | 0 | 只读文本 | 纯展示 value | | 1 | 文本/数字输入框 | 支持 isnum / maxlen / disabled | | 2 | 下拉选择 | options[] 定义选项 | | 3 | 复选框 | 搭配 extendcontrol | | 4 | 单选组 | 互斥选项 | | 5 | 日期选择 | 原生 date picker | | 6 | 日期时间 | date + time | | 7 | 开关 | 值归一化为 0 / 1 | | 8 | 菜单 + 跳转按钮 | menus[] 定义菜单项 | | 9 | 颜色选择器 | 色块 + 编号 | | 10 | 线型选择器 | SVG 预览 | | 11 | 线宽选择器 | SVG 预览 | | 12 | 垂直数字输入 | ▲▼ 按钮 + 数字 | | 13 | 日期区间 | start / end | | 999 | 自定义渲染 | custom ReactNode |

Props

继承 FieldConfig，主要属性：

| 属性 | 类型 | 说明 | |------|------|------| | type | number | 控件类型 (0-13, 999) | | value | any | 当前值 | | onChange | (val: any) => void | 值变化回调 | | onBlur | (e: any) => void | 失焦回调 | | onClick | (e: any) => void | 点击回调 | | disabled | number | 禁用状态 | | isnum | number | 是否数值模式 | | maxlen / minlen | number | 最大/最小长度/值 | | label | string | 标签文本 | | placeholder | string | 占位符 | | options | {value, name, disabled?, className?}[] | 选项列表 | | menus | {name, action}[] | 菜单项 | | custom | ReactNode | 自定义渲染 (type=999) | | extendcontrol | ReactNode | 额外内容 | | controlclass | string | 控件自定义 class | | colors | Record<string, string> | 颜色表覆盖 (type=9) |

样式

控件依赖 Tailwind CSS class 原子类，需在项目中配置 Tailwind 并引入 shadcn/ui 主题变量。不提供独立 CSS 文件。

License

MIT