asai-vue-host-form 0.2.15 → 0.2.16

package/README.md

@@ -1,214 +1,98 @@
-# asai-vue-host-form — 动态表单渲染插件
-
-## 概述
-
-`asai-vue-host-form` 是一个**动态表单渲染引擎**，支持根据 JSON 配置动态生成表单。它提供输入控件、标签、展示、JSON 编辑、图片上传裁剪等丰富功能，适用于低代码/动态数据编辑场景。
-
-## 功能
-
-- 📝 **动态表单渲染**：根据配置数据递归生成表单
-- 🏷️ **标签系统**：带语言/国际化支持的标签展示
-- 📋 **列表编辑**：支持数组/列表形式的数据编辑
-- 👁️ **只读展示**：仅展示模式（AsaiFormShow）
-- ✏️ **输入控件**：文本、数字、多行文本等
-- 🖼️ **图片上传裁剪**：支持图片裁剪后上传
-- 📄 **JSON 编辑器**：JSON 格式文本编辑
-- 🔒 **规则控制**：字段可见性/可编辑性规则
-- 🚫 **编辑/添加权限控制**：独立控制编辑和添加模式
-
-## 文件结构
-
-```
-asai-vue-host-form/
-├── src/
-│   └── components/
-│       ├── index.ts              # 插件安装入口
-│       └── asui/
-│           └── form/
-│               ├── AsaiFormLi.vue                  # 列表表单渲染
-│               ├── AsaiFormLabel.vue               # 表单标签组件
-│               ├── AsaiFormLabelArea.vue           # 标签区域组件
-│               ├── AsaiFormShow.vue                # 只读表单展示
-│               ├── AsaiTextarea.vue                # 多行文本输入
-│               ├── AsaiTextJson.vue                # JSON 文本编辑
-│               ├── AsaiUploadImgCut.vue            # 图片上传裁剪
-│               └── AsaiUploadImgCutPop.vue         # 图片裁剪弹窗
-└── README.md
-```
-
-## 使用说明
-
-```vue
-<AsaiFormLi
-  :ujt="ujt"
-  :asaidata="formConfig"
-  :formdata="formData"
-  :opt="{ isedit: true }"
-/>
-```
-
-## 核心组件
-
-### AsaiFormLi — 表单列表渲染器
-
-表单的核心递归组件，遍历 `formdata` 对象，根据 `asaidata.rule` 的配置决定每个字段的渲染方式。
-
-#### Props
-
-| 参数 | 类型 | 说明 |
-|------|------|------|
-| `ujt` | `Object` | 全局上下文 |
-| `asaidata` | `Object` | 表单配置 |
-| `formdata` | `Object` | 表单数据（双向绑定） |
-| `opt.isedit` | `boolean` | 是否为编辑模式 |
-
-#### 渲染逻辑
-
-1. 如果字段规则中 `noedit`/`noadd` == 2 → 显示为只读展示（AsaiFormShow）
-2. 如果字段规则为空 → 正常渲染
-   - 有自定义组件 → 使用自定义组件
-   - 值为对象 → 递归渲染（AsaiFormObject）
-   - 值为基本类型 → 使用 AsaiInput
-3. 如果字段 `noadd`/`noedit` == 1 → 隐藏该字段
-
-### AsaiFormLabel — 表单标签
-
-根据配置显示字段名称标签，支持：
-- 国际化键值（`asaidata.lang[formkey]`）
-- 必须字段标记（`rule[key].require`）
-- 类型指示图标（数组/数字）
-
-### AsaiFormShow — 只读展示
-
-以只读方式显示字段值，支持：
-- 字符串类型加引号显示（JSON 风格）
-- 数字类型直显
-- 自定义输入属性通过 `rule[key].opt` 传递
-
-### AsaiUploadImgCut — 图片上传裁剪
-
-提供完整的图片裁切功能：
-- 拖拽移动裁剪框
-- 四角拖拽调整大小
-- 适应/超出图片边界控制
-- 裁剪后自动缩放（如果设置了 `rule[key].data` 的尺寸限制）
-- 下载裁剪结果和确认上传
-
-### AsaiUploadImgCutPop — 图片裁剪弹窗
-
-将 `AsaiUploadImgCut` 封装在 `PopBox` 弹窗中，通过 `$global.pop['popupload' + formkey]` 控制显示。
-
-### AsaiTextarea — 多行文本输入
-
-多行文本输入组件，用于长文本编辑。
-
-### AsaiTextJson — JSON 文本编辑
-
-专门用于编辑 JSON 格式文本的组件。
-
-## 配置参数
-
-### asaidata 表单配置结构
-
-| 参数 | 类型 | 说明 |
-|------|------|------|
-| `rule` | `Object` | 字段规则配置 |
-| `rule[key].noedit` | `0\|1\|2` | 编辑模式控制（0=可编辑, 1=隐藏, 2=只读） |
-| `rule[key].noadd` | `0\|1\|2` | 添加模式控制（同上） |
-| `rule[key].require` | `boolean` | 是否必填 |
-| `rule[key].type` | `string` | 输入类型（text/number 等） |
-| `rule[key].max` | `number` | 最大值 |
-| `rule[key].min` | `number` | 最小值 |
-| `rule[key].opt` | `Object` | 额外选项（传递给输入组件） |
-| `rule[key].data` | `Object` | 裁剪图片最大尺寸限制 |
-| `lang` | `Object` | 字段标签文字（国际化） |
-| `lang[key]` | `string` | 各字段的显示标签 |
-| `eq` | `number` | 显示格式（>2 显示引号，>0 显示冒号） |
-| `ic` | `number` | 图标样式控制（>1 显示字段图标） |
-| `notit` | `boolean` | 是否隐藏标题 |
-| `cmComp(key)` | `function` | 返回自定义组件（按需） |
-
-### 规则值说明
-
-| 值 | 说明 |
-|----|------|
-| `0` 或 `undefined` | 正常显示和编辑 |
-| `1` | 隐藏该字段 |
-| `2` | 显示为只读（不可编辑） |
-
-## 技术细节
-
-- 递归渲染：对象类型字段自动递归渲染子表单
-- 自定义组件：通过 `cmComp(key)` 钩子支持自定义字段组件
-- 与 `asai-vue-host-popbox` 集成：图片裁剪使用弹窗展示
-- 响应式绑定：`formdata` 直接绑定，修改即时生效
-
-## 代码优化分析
-
-### 已做优化
-- ✅ 递归渲染：对象类型字段自动递归渲染子表单
-- ✅ 自定义组件钩子：`cmComp(key)` 支持按字段注入自定义组件
-- ✅ 只读/编辑/隐藏三种模式通过配置控制，灵活度高
-- ✅ 图片裁剪支持拖拽移动、四角缩放
-
-### 可优化点
-
-#### 1. 图片裁剪 Canvas 缩放计算
-```typescript
-const canvasWidth = Math.min(cropParams.value.width * scaleX, img.naturalWidth);
-```
-**问题**：裁剪后输出的图片质量仅使用 `0.9`，且格式固定为 PNG。对于大图裁剪，PNG 体积会非常大。
-
-**建议**：支持 JPEG 格式和可配置的质量参数：
-```typescript
-const format = props.params.format || 'image/jpeg';
-const quality = props.params.quality || 0.92;
-croppedImage.value = canvas.toDataURL(format, quality);
-```
-
-#### 2. 裁剪尺寸限制的二次缩放
-```typescript
-if (maxSize.width < canvasWidth || maxSize.height < canvasHeight) {
-    // 再次绘制到更小的 canvas
-    const ctx1: any = canvas1.getContext('2d');
-    ctx1.drawImage(cutmg, 0, 0, cutSize.width, cutSize.height);
-}
-```
-**问题**：先用原始尺寸裁剪，再缩放到目标尺寸，**做了两次 Canvas 绘制**。可以直接在第一次 `drawImage` 时就指定目标尺寸。
-
-#### 3. 表单规则中的 `noedit`/`noadd` 魔数
-```typescript
-if (props.asaidata.rule?.[key]?.[props.opt?.isedit ? 'noedit' : 'noadd'] == 2)
-```
-**问题**：数字 0/1/2 的含义没有文档说明，新人需要阅读源码才能理解。建议改为枚举：
-```typescript
-enum FieldMode {
-    Visible = 0,    // 正常显示编辑
-    Hidden = 1,     // 隐藏
-    Readonly = 2,   // 只读
-}
-```
-
-#### 4. AsaiFormLi 中的条件渲染链过长
-模板中有 `v-for` 嵌套多级 `v-if/v-else-if/v-else`，可读性差。建议提取为独立组件：
-- `AsaiFormFieldRenderer` — 单字段渲染
-- `AsaiFormObjectRenderer` — 对象类型递归渲染
-
-#### 5. 缺少表单校验能力
-当前表单系统支持 `require` 标记，但缺少：
-- 自定义校验规则（正则、函数）
-- 校验失败的错误消息显示
-- 整体表单校验通过/失败的状态
-
-建议注入校验框架，参考 VeeValidate 或自实现。
-
-#### 6. 上传裁剪缺少文件类型/大小限制
-当前 `AsaiUploadImgCut` 直接接收 base64Data，没有对上传文件的类型、大小进行校验。建议在组件内增加文件选择校验。
-
-#### 7. AsaiFormLabelArea 使用 `<label>` 包裹所有内容
-```vue
-<label v-else :class="...">
-    <slot></slot>
-</label>
-```
-**问题**：如果 slot 内容包含可交互元素（input/select），点击 label 会触发关联 input 的 focus，可能产生意外的表单行为。
+# asai-vue-host-form — 动态表单渲染插件
+
+## 包信息
+
+| 建议 npm 名 | 入口文件 | $fn / 注入键 | 类型 |
+|------------|---------|-------------|------|
+| `@estun/asai-vue-host-form` | `src/components/index.ts` | —（全局组件） | Host |
+
+## 概述
+
+`asai-vue-host-form` 是**动态表单渲染引擎**，根据 JSON 配置递归生成表单，支持输入、只读展示、JSON 编辑、图片上传裁剪与字段规则控制。
+
+## 集成方式
+
+```typescript
+// monorepo — webclient/src/utils/index.ts
+import AsaiVueHostForm from '../plugs/asai-vue-host-form/src/components/index';
+// import '/node_modules/asai-vue-host-form/dist/asai-vue-host-form.css';
+// npm
+// import AsaiVueHostForm from '@estun/asai-vue-host-form';
+
+app.use(AsaiVueHostForm, lib);
+```
+
+```vue
+<AsaiFormLi :ujt="ujt" :asaidata="formConfig" :formdata="formData" :opt="{ isedit: true }" />
+```
+
+## 独立性约束
+
+- **禁止** cross-import 其它 `plugs/*`。
+- 图片裁剪弹窗通过 `$global.pop` 与 PopBox **运行时**集成，不 import `asai-vue-host-popbox`。
+
+## 主要 API / 导出
+
+| 组件 | 说明 |
+|------|------|
+| `AsaiFormLi` | 表单列表递归渲染器 |
+| `AsaiFormLabel` / `AsaiFormLabelArea` | 标签与区域 |
+| `AsaiFormShow` | 只读展示 |
+| `AsaiTextarea` / `AsaiTextJson` | 多行 / JSON 编辑 |
+| `AsaiUploadImgCut` / `AsaiUploadImgCutPop` | 图片裁剪与弹窗 |
+
+## 性能说明
+
+- 全局组件 **lazy** 加载（`loadvue` eager: false），首次使用表单时才拉 chunk。
+- 递归渲染大对象时注意字段数量；自定义组件通过 `cmComp(key)` 按需注入。
+
+## peerDependencies 建议
+
+```json
+{
+  "peerDependencies": {
+    "vue": "^3.4.0",
+    "@estun/asai-vue-host": "^1.0.0",
+    "@estun/asai-vue-host-popbox": "^1.0.0"
+  }
+}
+```
+
+---
+
+## 核心组件
+
+### AsaiFormLi
+
+| Props | 说明 |
+|-------|------|
+| `ujt` | 全局上下文 |
+| `asaidata` | 表单配置（rule、lang） |
+| `formdata` | 表单数据（双向） |
+| `opt.isedit` | 编辑 / 添加模式 |
+
+**渲染逻辑：**
+
+1. `noedit`/`noadd` == 2 → 只读（AsaiFormShow）
+2. 值为对象 → 递归；基本类型 → AsaiInput
+3. `noadd`/`noedit` == 1 → 隐藏
+
+### asaidata 配置
+
+| 参数 | 说明 |
+|------|------|
+| `rule[key].noedit/noadd` | 0=正常, 1=隐藏, 2=只读 |
+| `rule[key].require` | 必填 |
+| `rule[key].type` | text/number 等 |
+| `lang[key]` | 字段标签 |
+| `cmComp(key)` | 自定义组件钩子 |
+
+## 文件结构
+
+```
+asai-vue-host-form/
+├── src/components/asui/form/
+│   ├── AsaiFormLi.vue / AsaiFormShow.vue
+│   └── AsaiUploadImgCut*.vue
+└── README.md
+```

package/dist/{AsaiForm-BAbhq1KW.mjs → AsaiForm-DE5DGkqW.mjs}

@@ -8,7 +8,7 @@ const A = { class: "as-form-area" }, f = /* @__PURE__ */ p({
   },
   setup(e) {
     const a = e, { $fn: s } = a.ujt, { get: r, clear: m } = s.createComponentLoader({
-      files: /* @__PURE__ */ Object.assign({ "./AsaiFormLabel.vue": () => import("./AsaiFormLabel-BAXvUybW.mjs"), "./AsaiFormLabelArea.vue": () => import("./AsaiFormLabelArea-CmjCZFfF.mjs"), "./AsaiFormLi.vue": () => import("./AsaiFormLi-B-Po6qaB.mjs"), "./AsaiFormObject.vue": () => import("./AsaiFormObject-B8WHlNwq.mjs"), "./AsaiFormShow.vue": () => import("./AsaiFormShow-Da4NJXK7.mjs"), "./AsaiInput.vue": () => import("./AsaiInput-D4BZoHDc.mjs"), "./AsaiRichEditor.vue": () => import("./AsaiRichEditor-DDOCr12f.mjs"), "./AsaiSelect.vue": () => import("./AsaiSelect-B4KZbNRO.mjs"), "./AsaiSelectCl.vue": () => import("./AsaiSelectCl-Cl6N0v40.mjs"), "./AsaiSelectLv.vue": () => import("./AsaiSelectLv-DNjfTp67.mjs"), "./AsaiTextJson.vue": () => import("./AsaiTextJson-Dr7yX0_I.mjs"), "./AsaiTextarea.vue": () => import("./AsaiTextarea-O38xA-tq.mjs"), "./AsaiUpBinary.vue": () => import("./AsaiUpBinary-DFmYr2_2.mjs"), "./AsaiUpload.vue": () => import("./AsaiUpload-D4kzZ5_G.mjs"), "./AsaiUploadImg.vue": () => import("./AsaiUploadImg-D8mMVNdc.mjs"), "./AsaiUploadImgCut.vue": () => import("./AsaiUploadImgCut-B3Y2hppn.mjs"), "./AsaiUploadImgCutPop.vue": () => import("./AsaiUploadImgCutPop-0gVLGw9m.mjs") }),
+      files: /* @__PURE__ */ Object.assign({ "./AsaiFormLabel.vue": () => import("./AsaiFormLabel-BAXvUybW.mjs"), "./AsaiFormLabelArea.vue": () => import("./AsaiFormLabelArea-CmjCZFfF.mjs"), "./AsaiFormLi.vue": () => import("./AsaiFormLi-B-Po6qaB.mjs"), "./AsaiFormObject.vue": () => import("./AsaiFormObject-B8WHlNwq.mjs"), "./AsaiFormShow.vue": () => import("./AsaiFormShow-Da4NJXK7.mjs"), "./AsaiInput.vue": () => import("./AsaiInput-D4BZoHDc.mjs"), "./AsaiRichEditor.vue": () => import("./AsaiRichEditor-H9WK-q7h.mjs"), "./AsaiRichEditorToolbar.vue": () => import("./AsaiRichEditorToolbar-BleVnkxV.mjs"), "./AsaiSelect.vue": () => import("./AsaiSelect-B4KZbNRO.mjs"), "./AsaiSelectCl.vue": () => import("./AsaiSelectCl-Cl6N0v40.mjs"), "./AsaiSelectLv.vue": () => import("./AsaiSelectLv-DNjfTp67.mjs"), "./AsaiTextJson.vue": () => import("./AsaiTextJson-Dr7yX0_I.mjs"), "./AsaiTextarea.vue": () => import("./AsaiTextarea-O38xA-tq.mjs"), "./AsaiUpBinary.vue": () => import("./AsaiUpBinary-CBV4sACD.mjs"), "./AsaiUpload.vue": () => import("./AsaiUpload-BQTw42KS.mjs"), "./AsaiUploadImg.vue": () => import("./AsaiUploadImg-CSQXvm8H.mjs"), "./AsaiUploadImgCut.vue": () => import("./AsaiUploadImgCut-DTWuaOl8.mjs"), "./AsaiUploadImgCutPop.vue": () => import("./AsaiUploadImgCutPop-0gVLGw9m.mjs") }),
       // 扫描当前目录下所有.vue文件
       eager: !1,
       // 异步加载（按需加载）

package/dist/AsaiRichEditor-H9WK-q7h.mjs

@@ -0,0 +1,125 @@
+import { defineComponent as H, defineAsyncComponent as U, ref as m, onMounted as j, onBeforeUnmount as z, createElementBlock as y, openBlock as v, normalizeStyle as g, createVNode as B, createElementVNode as x, unref as w, createCommentVNode as _, withDirectives as N, vModelText as F, nextTick as T } from "vue";
+import { _ as S } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const W = { class: "as-richtext-content" }, O = ["placeholder"], P = /* @__PURE__ */ H({
+  __name: "AsaiRichEditor",
+  props: {
+    ujt: {},
+    asaidata: {},
+    formdata: {},
+    formkey: {}
+  },
+  setup(E) {
+    const C = U({
+      loader: () => import("./AsaiRichEditorToolbar-BleVnkxV.mjs"),
+      delay: 120
+    }), t = E, { $global: L } = t.ujt, u = {
+      img: { maxWidth: 288, quality: 0.8 },
+      imgurls: {}
+    }, p = m(null), o = m(null), M = m(null), r = m(t.asaidata?.rule?.[t.formkey]?.editorty || 0);
+    let d = null, h = null, c = null;
+    async function s() {
+      return d || (h || (h = import("./useRichEditorMedia-BOIU0Dbf.mjs").then((a) => (d = a.createRichEditorMedia(u), d))), h);
+    }
+    j(() => {
+      k(), s();
+    }), z(() => {
+      c && clearTimeout(c);
+    });
+    function k() {
+      o.value && (o.value.innerHTML = t.formdata[t.formkey]);
+    }
+    function R() {
+      const a = window.prompt("请输入链接地址");
+      a && f("createLink", { target: { value: a } });
+    }
+    function b(a) {
+      p.value.accept = `${a}/*`, T(() => p.value?.click());
+    }
+    async function D(a) {
+      const e = a.target.files?.[0];
+      if (!e) return;
+      const n = await s();
+      let i, l = "";
+      e.type.startsWith("image") ? (i = await n.compressFile(e), l = `<img src="${i}" style="max-width:100%">`) : (e.size > 1024 * 1024 ? i = URL.createObjectURL(e) : i = await n.compressFile(e), l = e.type.startsWith("video") ? `<video controls src="${i}" style="max-width:100%"></video>` : `<a href="${i}" download="${e.name}">${e.name}</a>`), f("insertHTML", { target: { value: l } });
+    }
+    async function V() {
+      const a = await s(), e = Object.keys(u.imgurls);
+      for (let n = 0; n < e.length; n++) {
+        const i = e[n];
+        u.imgurls[i] === "1" && a.compressImage(i).then((l) => {
+          u.imgurls[i] = l, t.formdata[t.formkey] = t.formdata[t.formkey].replaceAll(i, l);
+        });
+      }
+    }
+    async function $(a) {
+      a.preventDefault();
+      const e = await s(), n = a.clipboardData?.getData("text/html") || "", i = e.sanitize(n, 1) || a.clipboardData?.getData("text/plain") || "";
+      f("insertHTML", { target: { value: i } });
+    }
+    function A() {
+      if (!o.value) return;
+      const a = o.value.innerHTML;
+      t.formdata[t.formkey] = a, c && clearTimeout(c), c = setTimeout(() => {
+        s().then((e) => {
+          o.value && (t.formdata[t.formkey] = e.sanitize(o.value.innerHTML));
+        });
+      }, 300);
+    }
+    function f(a, e = null) {
+      if (o.value) {
+        if (e?.target?.tagName === "SELECT" && e?.target?.value) {
+          document.execCommand(a, !1, e.target.value);
+          return;
+        }
+        document.execCommand(a, !1, e?.target?.value);
+      }
+    }
+    function I() {
+      r.value++, r.value > 2 && (r.value = 0), T(k);
+    }
+    return (a, e) => (v(), y("div", {
+      class: "as-richtext-area",
+      style: g(t.asaidata.rule?.[t.formkey]?.style || {})
+    }, [
+      B(w(C), {
+        lang: w(L).lang.richtexteditor,
+        onExec: f,
+        onMedia: b,
+        onLink: R,
+        onUploadImg: V,
+        onChangeView: I
+      }, null, 8, ["lang"]),
+      x("div", W, [
+        r.value != 1 ? (v(), y("div", {
+          key: 0,
+          style: g({ width: r.value > 1 ? "50%" : "100%" }),
+          ref_key: "rfRichEditor",
+          ref: o,
+          contenteditable: "true",
+          onPaste: $,
+          onInput: A
+        }, null, 36)) : _("", !0),
+        r.value > 0 ? N((v(), y("textarea", {
+          key: 1,
+          placeholder: t?.opt?.placeholder || "",
+          ref_key: "rfRichCode",
+          ref: M,
+          "onUpdate:modelValue": e[0] || (e[0] = (n) => t.formdata[t.formkey] = n),
+          style: g({ width: r.value > 1 ? "50%" : "100%" })
+        }, null, 12, O)), [
+          [F, t.formdata[t.formkey]]
+        ]) : _("", !0)
+      ]),
+      x("input", {
+        ref_key: "fileInput",
+        ref: p,
+        type: "file",
+        hidden: "",
+        onChange: D
+      }, null, 544)
+    ], 4));
+  }
+}), J = /* @__PURE__ */ S(P, [["__scopeId", "data-v-5c6cb195"]]);
+export {
+  J as default
+};

package/dist/AsaiRichEditorToolbar-BleVnkxV.mjs

@@ -0,0 +1,135 @@
+import { defineComponent as k, createElementBlock as u, openBlock as s, createElementVNode as n, toDisplayString as l, Fragment as r, renderList as b } from "vue";
+import { _ as v } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const y = { class: "as-richtext-toolbar" }, C = { value: "" }, g = ["value"], p = { value: "p" }, x = ["value"], m = ["title"], f = ["title"], $ = ["title"], a = ["title"], L = ["title"], I = ["title"], j = ["title"], B = ["title"], E = /* @__PURE__ */ k({
+  __name: "AsaiRichEditorToolbar",
+  props: {
+    lang: {}
+  },
+  emits: ["exec", "media", "link", "uploadImg", "changeView"],
+  setup(i, { emit: d }) {
+    const o = d;
+    return (z, t) => (s(), u("div", y, [
+      n("select", {
+        onChange: t[0] || (t[0] = (e) => o("exec", "fontSize", e))
+      }, [
+        n("option", C, l(i.lang.fontsize), 1),
+        (s(), u(r, null, b(7, (e) => n("option", {
+          key: "size" + e,
+          value: e + 1
+        }, l((e + 1) * 2 + 6) + "px", 9, g)), 64))
+      ], 32),
+      n("select", {
+        onChange: t[1] || (t[1] = (e) => o("exec", "formatBlock", e))
+      }, [
+        n("option", p, l(i.lang.paragraph), 1),
+        (s(), u(r, null, b(6, (e) => n("option", {
+          key: "h" + e,
+          value: "h" + e
+        }, l(i.lang.title) + l(e), 9, x)), 64))
+      ], 32),
+      n("button", {
+        type: "button",
+        onClick: t[2] || (t[2] = (e) => o("exec", "bold")),
+        title: i.lang.bold
+      }, "B", 8, m),
+      n("button", {
+        type: "button",
+        onClick: t[3] || (t[3] = (e) => o("exec", "underline")),
+        title: i.lang.underline
+      }, "U", 8, f),
+      n("button", {
+        type: "button",
+        onClick: t[4] || (t[4] = (e) => o("exec", "italic")),
+        title: i.lang.italic
+      }, "I", 8, $),
+      n("button", {
+        type: "button",
+        onClick: t[5] || (t[5] = (e) => o("exec", "strikethrough")),
+        title: i.lang.strikethrough
+      }, "S", 8, a),
+      n("input", {
+        type: "color",
+        onInput: t[6] || (t[6] = (e) => o("exec", "foreColor", e)),
+        title: i.lang.foreColor
+      }, null, 40, L),
+      n("input", {
+        type: "color",
+        onInput: t[7] || (t[7] = (e) => o("exec", "backColor", e)),
+        title: i.lang.backColor
+      }, null, 40, I),
+      n("button", {
+        type: "button",
+        onClick: t[8] || (t[8] = (e) => o("exec", "insertOrderedList")),
+        title: i.lang.insertOrderedList
+      }, "有", 8, j),
+      n("button", {
+        type: "button",
+        onClick: t[9] || (t[9] = (e) => o("exec", "insertUnorderedList")),
+        title: i.lang.insertUnorderedList
+      }, "无", 8, B),
+      n("button", {
+        type: "button",
+        onClick: t[10] || (t[10] = (e) => o("exec", "justifyCenter")),
+        title: "居中"
+      }, "中"),
+      n("button", {
+        type: "button",
+        onClick: t[11] || (t[11] = (e) => o("exec", "justifyFull")),
+        title: "两端对齐"
+      }, "两"),
+      n("button", {
+        type: "button",
+        onClick: t[12] || (t[12] = (e) => o("exec", "justifyRight")),
+        title: "右对齐"
+      }, "右"),
+      n("button", {
+        type: "button",
+        onClick: t[13] || (t[13] = (e) => o("exec", "justifyLeft")),
+        title: "左对齐"
+      }, "左"),
+      n("button", {
+        type: "button",
+        onClick: t[14] || (t[14] = (e) => o("exec", "delete")),
+        title: "删除"
+      }, "删"),
+      n("button", {
+        type: "button",
+        onClick: t[15] || (t[15] = (e) => o("link")),
+        title: "链接"
+      }, "链"),
+      n("button", {
+        type: "button",
+        onClick: t[16] || (t[16] = (e) => o("exec", "unlink")),
+        title: "删除链接"
+      }, "除"),
+      n("button", {
+        type: "button",
+        onClick: t[17] || (t[17] = (e) => o("media", "image")),
+        title: "图片"
+      }, "🖼️"),
+      n("button", {
+        type: "button",
+        onClick: t[18] || (t[18] = (e) => o("media", "video")),
+        title: "视频"
+      }, "🎬"),
+      n("button", {
+        type: "button",
+        onClick: t[19] || (t[19] = (e) => o("media", "file")),
+        title: "文件"
+      }, "📎"),
+      n("button", {
+        type: "button",
+        onClick: t[20] || (t[20] = (e) => o("uploadImg")),
+        title: "上传"
+      }, "上"),
+      n("button", {
+        type: "button",
+        onClick: t[21] || (t[21] = (e) => o("changeView")),
+        title: "切换"
+      }, "HTML")
+    ]));
+  }
+}), T = /* @__PURE__ */ v(E, [["__scopeId", "data-v-bf97b430"]]);
+export {
+  T as default
+};

package/dist/{AsaiUpBinary-DFmYr2_2.mjs → AsaiUpBinary-CBV4sACD.mjs}

@@ -81,7 +81,7 @@ const b = ["accept"], j = { key: 0 }, x = ["src", "alt", "title"], I = ["title"]
       }, 8, ["ujt", "asaidata", "formdata", "formkey"]);
     };
   }
-}), z = /* @__PURE__ */ U($, [["__scopeId", "data-v-535f25e7"]]);
+}), z = /* @__PURE__ */ U($, [["__scopeId", "data-v-e9910494"]]);
 export {
   z as default
 };

package/dist/{AsaiUpload-D4kzZ5_G.mjs → AsaiUpload-BQTw42KS.mjs}

@@ -90,7 +90,7 @@ const w = { key: 0 }, x = ["src", "alt", "title"], B = ["title"], I = ["title"],
       }, 8, ["ujt", "asaidata", "formdata", "formkey"]);
     };
   }
-}), P = /* @__PURE__ */ U(L, [["__scopeId", "data-v-a305b28a"]]);
+}), P = /* @__PURE__ */ U(L, [["__scopeId", "data-v-50ddd40b"]]);
 export {
   P as default
 };

package/dist/{AsaiUploadImg-D8mMVNdc.mjs → AsaiUploadImg-CSQXvm8H.mjs}

@@ -1,4 +1,4 @@
-import { defineComponent as j, ref as u, onMounted as F, resolveComponent as y, createElementBlock as m, openBlock as p, Fragment as A, createVNode as k, withCtx as C, createElementVNode as c, withModifiers as I, normalizeClass as U, toDisplayString as _ } from "vue";
+import { defineComponent as j, ref as f, onMounted as F, resolveComponent as y, createElementBlock as m, openBlock as p, Fragment as A, createVNode as k, withCtx as C, createElementVNode as c, withModifiers as I, normalizeClass as U, toDisplayString as _ } from "vue";
 import { _ as b } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
 const w = { key: 0 }, x = ["src"], L = ["title"], D = /* @__PURE__ */ j({
   __name: "AsaiUploadImg",
@@ -9,14 +9,14 @@ const w = { key: 0 }, x = ["src"], L = ["title"], D = /* @__PURE__ */ j({
     formkey: {}
   },
   setup(e) {
-    const a = e, { $fn: d, $global: o } = a.ujt, r = u(null), f = u(null), n = u("+");
+    const a = e, { $fn: d, $global: o } = a.ujt, r = f(null), u = f(null), n = f("+");
     F(() => {
       const l = "popupload" + a.formkey;
       o.pop[l] || (o.pop[l] = { stat: 0, full: 0, tit: "", params: {} });
     });
     const v = async (l) => {
       if (r.value.value) {
-        if (f.value = l.target.files[0], r.value.value = "", !f.value) {
+        if (u.value = l.target.files[0], r.value.value = "", !u.value) {
           n.value = d.lg("asai.fail");
           return;
         }
@@ -37,7 +37,7 @@ const w = { key: 0 }, x = ["src"], L = ["title"], D = /* @__PURE__ */ j({
           } catch (s) {
             n.value = d.lg("asai.fail") + " " + s.message;
           }
-        }, t.readAsDataURL(f.value);
+        }, t.readAsDataURL(u.value);
       }
     };
     function g() {
@@ -89,7 +89,7 @@ const w = { key: 0 }, x = ["src"], L = ["title"], D = /* @__PURE__ */ j({
       ], 64);
     };
   }
-}), B = /* @__PURE__ */ b(D, [["__scopeId", "data-v-0bfdd149"]]);
+}), B = /* @__PURE__ */ b(D, [["__scopeId", "data-v-36b7ec3b"]]);
 export {
   B as default
 };