asai-vue-host-form 0.2.16 → 0.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "asai-vue-host-form",
-    "version": "0.2.16",
+    "version": "0.2.18",
     "description": "asai for you",
     "author": "Asai",
     "license": "ISC",

package/readme

@@ -1,527 +0,0 @@
-# asai-vue-host-form — 动态表单渲染引擎
-
-## 概述
-
-`asai-vue-host-form` 是 AsaiWeb CMS 系统中的动态表单渲染插件。核心思路：通过 `asaidata` 配置对象（包含数据、规则、国际化映射等）驱动，根据字段值的类型自动匹配对应的表单组件，支持递归渲染嵌套对象和数组。
-
-## 安装
-
-```ts
-// 作为 Vue 插件安装
-import AsaiVueHostForm from 'asai-vue-host-form';
-
-app.use(AsaiVueHostForm, {
-  loadfn: loadfn,
-  loadvue: loadvue,
-});
-```
-
-插件通过 `import.meta.glob` 自动扫描 `./asui/form/` 和 `./asui/formbase/` 下的所有 `.vue` 文件，按需加载并注册。
-
-## 核心用法
-
-```vue
-<template>
-  <AsaiForm :ujt="ujt" :asaidata="asaidata" :opt="{ isedit: 1 }" />
-</template>
-```
-
-### 参数说明
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | **工具对象** — 解构出 `$fn`、`$global`、`$model` 等全局工具/状态，是整个系统的胶水层 |
-| `asaidata` | `any` | **表单配置对象** — 包含 `data`（表单值）、`rule`（字段规则）、`lang`（国际化标签映射）、`comp`（自定义组件映射）等 |
-| `opt` | `any` | **选项** — `opt.isedit = 1` 进入编辑模式；`opt.isedit` 不传则进入新增模式 |
-
-### asaidata 结构
-
-```ts
-{
-  data: {
-    // 表单数据，直接 v-model 绑定
-    username: '张三',
-    age: 28,
-    enabled: true,
-    tags: ['a', 'b'],
-    address: { city: '北京', street: '长安街' }
-  },
-  rule: {
-    // 字段规则配置
-    username: { type: 'text', maxlength: 20, require: true },
-    age: { type: 'number', min: 0, max: 150 },
-    enabled: { type: 'checkbox' },
-    tags: { type: 'select', data: [['a', '标签A'], ['b', '标签B']] },
-    address: {} // 对象类型自动递归渲染
-  },
-  lang: {
-    // 国际化标签（字段名显示文字）
-    username: '用户名',
-    age: '年龄'
-  },
-  comp: {
-    // 自定义组件映射（可选）
-    select: 'AsaiSelect'
-  }
-}
-```
-
-## 组件层级
-
-```
-AsaiForm (容器入口)
- └── AsaiFormLi (列表迭代器)
-      ├── AsaiFormShow (只读展示)
-      ├── AsaiFormObject (嵌套对象/数组，可折叠)
-      │   └── AsaiFormLi (递归)
-      ├── AsaiInput (智能输入 — 自动选择 AsfCheck / AsfInput)
-      ├── AsaiSelect (下拉选择)
-      ├── AsaiSelectLv (权限等级选择 — 按用户级别过滤)
-      ├── AsaiSelectCl (分类选择 — 支持树形 nodeMap)
-      ├── AsaiTextarea (多行文本)
-      ├── AsaiTextJson (JSON 文本)
-      ├── AsaiRichEditor (富文本编辑器)
-      ├── AsaiUpload (二进制文件上传)
-      ├── AsaiUploadImg (图片上传 → 裁剪弹窗)
-      │   └── AsaiUploadImgCutPop (裁剪弹窗包装器)
-      │       └── AsaiUploadImgCut (图片裁剪面板)
-      └── AsaiUpBinary (二进制直传上传)
-```
-
-## 组件详解
-
-### 一、容器层
-
-#### AsaiForm
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 工具对象 |
-| `asaidata` | `any` | 表单配置 — 写入 `asaidata.comp`（组件映射）和 `asaidata.cmComp`（动态获取函数） |
-| `opt` | `any` | 选项 — `opt.isedit = 1` 进入编辑模式 |
-
-容器创建组件加载器缓存，自动扫描同级目录下（除自身外）的所有 `.vue` 文件供动态渲染调用。
-
-#### AsaiFormLi
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 工具对象 |
-| `asaidata` | `any` | 表单配置 |
-| `formdata` | `any` | 当前层级数据 |
-| `opt` | `any` | 选项（可选），传递 `opt.isedit` |
-
-**渲染逻辑：**
-- 字段规则中 `noedit`（编辑模式）或 `noadd`（新增模式）为 `2` → 渲染 `AsaiFormShow` 只读
-- 字段规则中 `noedit` / `noadd` 为 `1` → 跳过隐藏
-- 字段值为对象 → 优先用 `cmComp('object')`，否则用 `AsaiFormObject`
-- 否则 → 用 `cmComp(key)` 查找对应组件，找不到则 fallback 到 `AsaiInput`
-
-### 二、布局/标签组件
-
-#### AsaiFormLabel
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | 使用 `asaidata.ic`（缩进层级）、`asaidata.eq`（格式模式）、`asaidata.lang`（国际化标签） |
-| `formdata` | `any` | — |
-| `formkey` | `any` | 字段键名，用于从 `lang` 中取显示文本 |
-
-- `asaidata.ic > 1` → 显示图标前缀（🔸 普通, 🔹 数字）
-- `asaidata.eq > 2` → 键名带双引号
-- `asaidata.eq` 为真 → 键名后带冒号
-- `asaidata.eq > 2` → 值后带逗号
-- `rule?.[formkey]?.require` → 标签后显示红色 `*`
-
-#### AsaiFormLabelArea
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | 从 `rule?.[formkey]?.nolabel` 和 `typeof formdata[formkey]` 决定用 `label` 还是 `div` |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-- `nolabel` 为 true 或字段值是对象 → 渲染 `<div>`（无原生 label 语义）
-- 否则 → 渲染 `<label>`
-- 支持 `rule?.[formkey]?.class` 和 `rule?.[formkey]?.style`
-
-#### AsaiFormShow
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | — |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-内部使用 `AsfInput` 并设置 `opt.noedit = true`，渲染为只读输入框。用于 `noedit=2` / `noadd=2` 的场景。
-
-#### AsaiFormObject
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | `asaidata.ic` 控制图标显示 |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-- 点击标题可折叠/展开
-- `asaidata.eq > 1` → 显示 `{` / `}` 或 `[` / `]` 包裹
-- 递归调用 `AsaiFormLi` 渲染子字段
-
-### 三、字段输入组件
-
-#### AsaiInput
-
-**智能输入组件** — 根据字段类型自动切换为复选框或文本输入。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 需要 `$fn`、`$fn.As.toArr`、`$fn.lg` |
-| `asaidata` | `any` | `rule?.[formkey]` 配置规则 |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-**选择逻辑：**
-- `type === 'checkbox'` 或值是 boolean → 渲染 `AsfCheck`
-- 否则 → 渲染 `AsfInput`，类型从规则或值类型推断（`number` / `text`）
-
-**规则参数：**
-- `rule?.[formkey]?.type` — 输入类型（`text`, `number`, `checkbox`）
-- `rule?.[formkey]?.max` / `min` — 数字范围
-- `rule?.[formkey]?.data` — 选项列表
-- `rule?.[formkey]?.opt` — 透传到基础组件的附加参数
-
-#### AsaiSelect
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | — |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-内部使用 `AsfSelect`，数据源获取方式与 `AsaiInput` 相同（`lang` → `rule` → `$fn.lg` 三源回退）。
-
-#### AsaiSelectLv
-
-**权限等级选择** — 与 `AsaiSelect` 类似，但多了用户等级过滤：`data.filter(item => Number(item[0]) < userLv)`，只显示低于当前用户等级的选项。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 额外需要 `$global.user.info.lv` |
-| `asaidata` | `any` | — |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-#### AsaiSelectCl
-
-**分类选择** — 支持树形 `nodeMap` 和深度信息，自动设置默认值（过滤掉 `asai` 前缀的项）。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | `rule?.[formkey]?.data` 可以是 `{ nodeMap, depthMap }` 树形结构 |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-#### AsaiTextarea
-
-**多行文本输入** — 包装 `AsfTextarea`。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | `rule?.[formkey]?.opt` 透传到 textarea |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-#### AsaiTextJson
-
-**JSON 文本输入** — 与 `AsaiTextarea` 结构相同，用于编辑 JSON 字符串。
-
-#### AsaiRichEditor
-
-**富文本编辑器** — 基于 `contenteditable` 实现。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 需要 `$global` 提供国际化文本 |
-| `asaidata` | `any` | `rule?.[formkey]?.editorty`（初始视图模式: 0=编辑,1=源码,2=分屏）, `rule?.[formkey]?.style` |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-工具栏功能：字号、标题(H1-H6)、加粗、下划线、斜体、删除线、字体颜色、背景色、有序/无序列表、对齐、删除、链接、图片/视频/文件插入、HTML 源码切换。支持图片压缩（最大宽度288px, quality 0.8），粘贴自动清理不安全的 HTML。
-
-### 四、上传组件
-
-#### AsaiUpload
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 需要 `$fn.apisys.apiUpload`、`$global.sys.syspath.updir`、`$fn.As.getName` |
-| `asaidata` | `any` | `rule?.[formkey]?.accept`（文件类型过滤）、`rule?.[formkey]?.filename`（自定义文件名） |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-上传 URL: `/api/asaifile/manage/upbinary/`，支持图片预览和文件名展示。
-
-#### AsaiUploadImg
-
-**图片上传（带裁剪弹窗）** — 通过 `FileReader` 读取为 base64，弹出裁剪弹窗。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 需要 `$fn.apisys.apiPost`、`$global.sys.syspath.updir`、`$fn.As.getName` |
-| `asaidata` | `any` | `rule?.[formkey]?.accept` |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-上传 URL: `/api/asaifile/manage/upbase64/`，图片通过 `AsaiUploadImgCutPop` 弹窗进行裁剪。
-
-#### AsaiUploadImgCutPop
-
-**裁剪弹窗包装器** — 监听 `$global.pop['popupload' + formkey].stat` 控制弹窗显示。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `formkey` | `any` | 与 `AsaiUploadImg` 相同的 formkey |
-
-内部渲染 `PopBox` + `AsaiUploadImgCut`。
-
-#### AsaiUploadImgCut
-
-**图片裁剪组件** — 支持拖拽移动裁剪框、四角调整大小。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `params` | `any` | `{ base64Data, asaidata, formdata, formkey, fn, min }` |
-
-- `params.base64Data` — 图片 base64
-- `params.fn` — 裁剪完成后的回调函数
-- `params.min` — 裁剪框最小尺寸（默认1）
-- `params.asaidata.rule[formkey].data` — 可选，最终输出图片的最大尺寸限制 `{ width, height }`
-
-#### AsaiUpBinary
-
-**二进制直传上传** — 与 `AsaiUpload` 类似，上传后直接设置值。
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | — |
-| `asaidata` | `any` | `rule?.[formkey]?.accept` |
-| `formdata` | `any` | — |
-| `formkey` | `any` | — |
-
-### 五、基础组件（formbase）
-
-基础组件是底层原子组件，统一 Props 约定：
-
-| Prop | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `any` | 工具对象 |
-| `opt` | `any` | 配置选项（详见各组件说明） |
-| `modelValue` | `any` | v-model 绑定值 |
-
-#### AsfInput — 基础输入框
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `type` | `string` | `'text'` / `'number'` |
-| `max` / `min` | `number` | 数字范围 |
-| `maxlength` | `number` | 文本最大长度 |
-| `step` | `number` | 步进 |
-| `height` | `string` | 高度（CSS） |
-| `placeholder` | `string` | 占位提示 |
-| `readonly` | `boolean` | 只读 |
-| `noedit` | `boolean` | 只读模式（光标禁用） |
-| `unit` | `string` | 单位后缀 |
-| `style` | `object` | 样式 |
-| `attr` | `object` | 原生 HTML 属性 |
-| `onChange` | `function` | 值变化回调 `(newVal, oldVal) => void` |
-
-#### AsfInputSn — 验证码/序列号分段输入
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `snlen` | `number` | 总长度（默认 8） |
-| `snge` | `number` | 分组间隔（每隔几个插入分隔符） |
-| `snger` | `number` | 分组例外规则 |
-
-每个字符一个输入框，自动聚焦下一个，支持粘贴。
-
-#### AsfSelect — 下拉选择器
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `selectdata` | `array/object/Map` | 选项数据，支持多种格式（见下方） |
-| `input` | `boolean` | 可搜索 |
-| `type` | `string` | `'number'` / `'text'` |
-| `height` | `string` | 高度 |
-| `up` | `number` | 展开方向（0=下, 1=上） |
-| `checkin` | `boolean` | 自动选择第一个 |
-| `style` | `object` | 样式 |
-| `stylelist` | `object` | 列表样式 |
-| `unit` | `string` | 单位后缀 |
-| `onChange` | `function` | 值变化回调 |
-
-**selectdata 支持格式：**
-
-```ts
-// 1. 二维数组 [[value, label, depth?], ...]
-[['a', '选项A'], ['b', '选项B']]
-
-// 2. 对象 { value: label, ... }
-{ a: '选项A', b: '选项B' }
-
-// 3. 树形 Map（带层级）
-{ nodeMap: Map, depthMap: Map }
-
-// 4. 对象数组 [{ value, label, depth }, ...]
-[{ value: 'a', label: '选项A' }]
-```
-
-#### AsfCheck — 开关切换
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `selectdata` | `array` | 自定义开关文本，默认 `[[false, 'off'], [true, 'on']]` |
-| `height` | `string` | 高度 |
-| `style` | `object` | 样式 |
-| `onChange` | `function` | 值变化回调 |
-
-点击在 `selectdata[0][0]` 和 `selectdata[1][0]` 之间切换。
-
-#### AsfTick — 勾选框（多选）
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `value` | `any` | 该勾选框代表的值 |
-| `height` | `string` | 高度 |
-| `style` | `object` | 样式 |
-| `onChange` | `function` | 值变化回调 |
-
-存入数组，选中/取消切换。
-
-#### AsfTextarea — 多行文本框
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `height` | `string` | 高度 |
-| `placeholder` | `string` | 占位提示 |
-| `readonly` | `boolean` | 只读 |
-| `style` | `object` | 样式 |
-| `attr` | `object` | 原生 HTML 属性 |
-| `onChange` | `function` | 值变化回调 |
-
-#### AsfUploadFile — 文件上传
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `accept` | `string` | 文件类型过滤，如 `'image/*'` |
-| `path` | `string` | 上传路径（默认 `'uploadtmp'`） |
-| `height` | `string` | 高度 |
-| `css` | `string` | 自定义容器类名 |
-| `attr` | `object` | 原生 HTML 属性 |
-| `onChange` | `function` | 值变化回调 |
-
-支持 slot `#default="{ option }"` 暴露 `clickUpload` 方法自定义触发按钮。
-
-#### AsfUploadText — 文本文件上传
-
-与 `AsfUploadFile` 类似，但将文件内容读取为文本。额外支持：
-
-| opt 参数 | 类型 | 说明 |
-|----------|------|------|
-| `type` | `string` | `'json'` — 自动做 JSON 序列化/反序列化 |
-
-## rule 字段规则配置参考
-
-| 键 | 类型 | 说明 | 适用组件 |
-|---|------|------|----------|
-| `type` | `string` | 输入类型：`text`, `number`, `checkbox` | All |
-| `max` / `min` | `number` | 数字输入范围 | AsaiInput, AsfInput |
-| `maxlength` | `number` | 文本最大长度 | AsaiInput, AsfInput |
-| `require` | `boolean` | 标签后显示红色 `*` | AsaiFormLabel |
-| `noedit` | `number` | 编辑模式：`2`=只读, `1`=隐藏 | AsaiFormLi |
-| `noadd` | `number` | 新增模式：`2`=只读, `1`=隐藏 | AsaiFormLi |
-| `placeholder` | `string` | 占位提示 | All 输入组件 |
-| `data` | `array/object/Map` | 下拉选项数据 | AsaiSelect, AsaiSelectLv, AsaiSelectCl, AsfSelect |
-| `accept` | `string` | 上传文件类型过滤 | AsaiUpload, AsaiUploadImg, AsaiUpBinary, AsfUploadFile |
-| `editorty` | `number` | 富文本初始视图（0=编辑,1=源码,2=分屏） | AsaiRichEditor |
-| `filename` | `string` | 上传文件自定义保存名 | AsaiUpload |
-| `class` / `style` | `string/object` | 标签样式 | AsaiFormLabel, AsaiFormLabelArea |
-| `nolabel` | `boolean` | 隐藏标签/使用 div | AsaiFormLabelArea |
-| `opt` | `object` | 透传到基础组件的额外配置 | All |
-| `comp` | `string` | 指定自定义组件名 | AsaiFormLi |
-| `onChange` | `function` | 值变化回调 | 基础组件 |
-
-## 动态组件映射
-
-`AsaiForm` 会自动扫描目录下的 `.vue` 文件注册到 `asaidata.comp`。你可以通过 `asaidata.comp` 手动注册或覆盖：
-
-```ts
-asaidata.comp = {
-  myCustomField: MyCustomComponent, // 自定义组件，通过 rule[formkey].comp 引用
-  select: AsaiSelect,               // 覆盖默认 select 处理
-};
-```
-
-组件查找优先级：`rule[formkey].comp` → `comp[key]` → `comp['object']`（对象类型时）→ `AsaiInput`（兜底）。
-
-## 完整示例
-
-```vue
-<template>
-  <AsaiForm :ujt="ujt" :asaidata="cfg" :opt="{ isedit: 1 }" />
-</template>
-
-<script setup lang="ts">
-const ujt = { $fn, $global, $model }; // 系统注入
-
-const cfg = {
-  eq: 0,           // 格式模式: 0=无格式, 1=带冒号, 2=JSON紧凑, 3=JSON带引号
-  ic: 1,           // 缩进层级
-
-  data: {
-    project: '工业控制系统',
-    version: 2.0,
-    enabled: true,
-    tags: ['PLC', 'SCADA'],
-    config: { timeout: 5000, retry: 3 },
-    description: '',
-  },
-
-  rule: {
-    project: { type: 'text', maxlength: 50, require: true },
-    version: { type: 'number', min: 0, step: 0.1 },
-    enabled: { type: 'checkbox' },
-    tags: {
-      type: 'select',
-      data: [['PLC', 'PLC控制'], ['SCADA', '监控系统'], ['HMI', '人机界面']],
-      opt: { input: true }, // 可搜索
-    },
-    description: {
-      type: 'textarea',
-      placeholder: '请输入项目描述',
-    },
-    // config 是对象类型，自动递归渲染
-  },
-
-  lang: {
-    project: '项目名称',
-    version: '版本号',
-    enabled: '启用',
-    tags: '标签',
-    config: '配置',
-    timeout: '超时(ms)',
-    retry: '重试次数',
-    description: '描述',
-  },
-};
-</script>
-```