asai-vue-host-form 0.2.13 → 0.2.15

package/README.md

@@ -0,0 +1,214 @@
+# 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，可能产生意外的表单行为。

package/dist/{AsaiForm-DZVbpIN-.mjs → AsaiForm-BAbhq1KW.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-DahcJZqh.mjs"), "./AsaiRichEditor.vue": () => import("./AsaiRichEditor-DDOCr12f.mjs"), "./AsaiSelect.vue": () => import("./AsaiSelect-B4KZbNRO.mjs"), "./AsaiSelectCl.vue": () => import("./AsaiSelectCl-DY_5Y--8.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-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") }),
       // 扫描当前目录下所有.vue文件
       eager: !1,
       // 异步加载（按需加载）

package/dist/{AsaiInput-DahcJZqh.mjs → AsaiInput-D4BZoHDc.mjs}

@@ -8,9 +8,7 @@ const V = /* @__PURE__ */ s({
     formkey: {}
   },
   setup(a) {
-    const t = a, { $fn: e } = t.ujt, l = c(() => e.As.toArr(t.asaidata?.lang?.[t.formkey + "data"]) || e.As.toArr(
-      t.asaidata?.rule?.[t.formkey]?.[t.formkey + "data"]
-    ) || e.As.toArr(e.lg(t.asaidata?.rule?.[t.formkey]?.data)) || []);
+    const t = a, { $fn: e } = t.ujt, l = c(() => e.As.toArr(t.asaidata?.lang?.[t.formkey + "data"]) || e.As.toArr(t.asaidata?.rule?.[t.formkey]?.[t.formkey + "data"]) || e.As.toArr(e.lg(t.asaidata?.rule?.[t.formkey]?.data)) || []);
     return (j, o) => {
       const y = f("AsfCheck"), i = f("AsfInput"), k = f("AsaiFormLabel");
       return d(), r(k, {

package/dist/AsaiSelectCl-Cl6N0v40.mjs

@@ -0,0 +1,41 @@
+import { defineComponent as n, computed as i, resolveComponent as m, createBlock as u, openBlock as c, withCtx as k, createVNode as y } from "vue";
+const j = /* @__PURE__ */ n({
+  __name: "AsaiSelectCl",
+  props: {
+    ujt: {},
+    asaidata: {},
+    formdata: {},
+    formkey: {}
+  },
+  setup(e) {
+    const a = e, { $fn: r } = a.ujt, f = i(() => {
+      let o;
+      return a.asaidata?.rule?.[a.formkey]?.[a.formkey + "data"]?.nodeMap?.size > 0 ? o = [...a.asaidata.rule[a.formkey][a.formkey + "data"].nodeMap].map((t) => [t[1].id, t[1].nm, a.asaidata.rule[a.formkey][a.formkey + "data"].depthMap.get(t[0])]).filter((t) => t && t[0] !== "asai") : o = (r.As.toArr(a.asaidata?.lang?.[a.formkey + "data"]) || r.As.toArr(r.lg(a.asaidata?.rule?.[a.formkey]?.data)) || []).filter((t) => t && t[0] !== "asai"), (!a.formdata[a.formkey] || a.formdata[a.formkey] === "asai") && (a.formdata[a.formkey] = o?.[0]?.[0] || "asai"), o;
+    });
+    return (o, t) => {
+      const d = m("AsfSelect"), l = m("AsaiFormLabel");
+      return c(), u(l, {
+        ujt: e.ujt,
+        asaidata: e.asaidata,
+        formdata: e.formdata,
+        formkey: e.formkey
+      }, {
+        default: k(() => [
+          y(d, {
+            ujt: e.ujt,
+            opt: {
+              ...a.asaidata.rule?.[e.formkey]?.opt || {},
+              selectdata: f.value
+            },
+            modelValue: a.formdata[e.formkey],
+            "onUpdate:modelValue": t[0] || (t[0] = (s) => a.formdata[e.formkey] = s)
+          }, null, 8, ["ujt", "opt", "modelValue"])
+        ]),
+        _: 1
+      }, 8, ["ujt", "asaidata", "formdata", "formkey"]);
+    };
+  }
+});
+export {
+  j as default
+};

package/dist/AsfInput-By00xBFI.mjs

@@ -0,0 +1,101 @@
+import { defineComponent as g, useCssVars as b, computed as h, ref as A, onMounted as C, createElementBlock as d, openBlock as u, withDirectives as m, createCommentVNode as F, normalizeStyle as y, isRef as i, vModelDynamic as s, unref as c, toDisplayString as I } from "vue";
+import { _ as U } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const j = { class: "asf-input asf-form" }, D = ["type", "placeholder", "value"], w = ["type", "max", "min", "readonly", "placeholder"], B = ["type", "maxlength", "readonly", "placeholder"], M = ["step", "type", "readonly", "placeholder"], N = ["type", "readonly", "placeholder"], S = {
+  key: 5,
+  class: "unit"
+}, z = /* @__PURE__ */ g({
+  __name: "AsfInput",
+  props: {
+    ujt: {},
+    opt: {},
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: v }) {
+    b((a) => ({
+      v40a0921e: x.value
+    }));
+    const l = e, k = v;
+    let t = h({
+      get() {
+        return l.modelValue;
+      },
+      set(a) {
+        l.opt?.onChange && typeof l.opt.onChange == "function" && l.opt.onChange(a, l.modelValue), k("update:modelValue", a);
+      }
+    });
+    const x = h(() => l?.opt?.height || "var(--sa3)"), p = h(() => l?.opt?.type || (l?.opt?.max ? "number" : "text")), r = A(null);
+    function V(a, n) {
+      if (a && n && typeof n == "object")
+        for (const [o, f] of Object.entries(n))
+          typeof f == "boolean" ? f ? a.setAttribute(o, "") : a.removeAttribute(o) : a.setAttribute(o, f);
+    }
+    return C(() => {
+      V(r.value, l.opt?.attr);
+    }), (a, n) => (u(), d("div", j, [
+      e.opt?.noedit ? (u(), d("input", {
+        key: 0,
+        ref_key: "domForm",
+        ref: r,
+        class: "input",
+        style: y(l.opt?.style || {}),
+        type: p.value,
+        readonly: !0,
+        placeholder: e.opt?.placeholder || "",
+        value: e.modelValue
+      }, null, 12, D)) : e.opt?.max ? m((u(), d("input", {
+        key: 1,
+        ref_key: "domForm",
+        ref: r,
+        style: y(l.opt?.style || {}),
+        type: p.value,
+        max: e.opt?.max,
+        min: e.opt?.min,
+        readonly: !!e.opt?.readonly,
+        placeholder: e.opt?.placeholder || "",
+        "onUpdate:modelValue": n[0] || (n[0] = (o) => i(t) ? t.value = o : t = o)
+      }, null, 12, w)), [
+        [s, c(t)]
+      ]) : e.opt?.maxlength ? m((u(), d("input", {
+        key: 2,
+        ref_key: "domForm",
+        ref: r,
+        style: y(l.opt?.style || {}),
+        type: p.value,
+        maxlength: e.opt?.maxlength,
+        readonly: !!e.opt?.readonly,
+        placeholder: e.opt?.placeholder || "",
+        "onUpdate:modelValue": n[1] || (n[1] = (o) => i(t) ? t.value = o : t = o)
+      }, null, 12, B)), [
+        [s, c(t)]
+      ]) : e.opt?.step ? m((u(), d("input", {
+        key: 3,
+        ref_key: "domForm",
+        ref: r,
+        style: y(l.opt?.style || {}),
+        step: e.opt?.step,
+        type: p.value,
+        readonly: !!e.opt?.readonly,
+        placeholder: e.opt?.placeholder || "",
+        "onUpdate:modelValue": n[2] || (n[2] = (o) => i(t) ? t.value = o : t = o)
+      }, null, 12, M)), [
+        [s, c(t)]
+      ]) : m((u(), d("input", {
+        key: 4,
+        ref_key: "domForm",
+        ref: r,
+        style: y(l.opt?.style || {}),
+        type: p.value,
+        readonly: !!e.opt?.readonly,
+        placeholder: e.opt?.placeholder || "",
+        "onUpdate:modelValue": n[3] || (n[3] = (o) => i(t) ? t.value = o : t = o)
+      }, null, 12, N)), [
+        [s, c(t)]
+      ]),
+      e.opt?.unit ? (u(), d("div", S, I(e.opt?.unit), 1)) : F("", !0)
+    ]));
+  }
+}), O = /* @__PURE__ */ U(z, [["__scopeId", "data-v-45c548dd"]]);
+export {
+  O as default
+};

package/dist/{AsfSelect-D80NFcz5.mjs → AsfSelect-E9c8eZQ4.mjs}

@@ -1,12 +1,12 @@
-import { defineComponent as I, useCssVars as $, computed as m, reactive as z, createElementBlock as u, openBlock as o, createElementVNode as f, createCommentVNode as D, normalizeStyle as v, toDisplayString as r, unref as y, normalizeClass as _, Fragment as b, renderList as E, createTextVNode as F } from "vue";
-import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class: "asf-select-cur-val" }, R = { class: "asf-select-list-area" }, H = {
+import { defineComponent as I, useCssVars as M, computed as m, reactive as $, createElementBlock as o, openBlock as u, createElementVNode as f, createCommentVNode as z, normalizeStyle as v, toDisplayString as r, unref as h, withModifiers as D, normalizeClass as _, Fragment as b, renderList as E, createTextVNode as F } from "vue";
+import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const L = { class: "asf-select" }, O = { class: "asf-select-main" }, R = { class: "asf-select-cur-val" }, H = { class: "asf-select-list-area" }, T = {
   key: 0,
   class: "asf-select-list"
-}, T = { class: "asf-select-empty" }, Y = ["data-val"], q = {
+}, Y = { class: "asf-select-empty" }, q = ["data-val"], G = ["data-val"], J = {
   key: 0,
   class: "unit"
-}, G = /* @__PURE__ */ I({
+}, K = /* @__PURE__ */ I({
   __name: "AsfSelect",
   props: {
     ujt: {},
@@ -14,11 +14,11 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(g, { emit: V }) {
-    $((t) => ({
-      v00d3fb44: C.value
+  setup(y, { emit: V }) {
+    M((t) => ({
+      v34a6911f: C.value
     }));
-    const s = g, { $global: d } = s.ujt, k = V;
+    const s = y, { $global: d } = s.ujt, k = V;
     let n = m({
       get() {
         return s.modelValue || s.opt?.valuedefault;
@@ -27,7 +27,7 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
         s.opt?.onChange && typeof s.opt.onChange == "function" && s.opt.onChange(t, s.modelValue), k("update:modelValue", t);
       }
     });
-    const a = z({
+    const a = $({
       inputinit: "",
       input: "",
       up: !1,
@@ -35,7 +35,7 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
     }), C = m(() => s?.opt?.height || "var(--sa3)"), l = m(() => {
       const t = s.opt?.selectdata;
       return t ? t.nodeMap?.size > 0 ? [...t.nodeMap].map((e) => [e[1].id, e[1].nm, t.depthMap.get(e[0])]) : Array.isArray(t) ? t.map((e, i) => Array.isArray(e) && e.length >= 2 ? [e[0], e[1], e[2]] : typeof e == "object" && e !== null ? "value" in e && "label" in e ? [e.value, e.label, e.depth] : Object.values(e) : [i, String(e)]) : typeof t == "object" ? Object.entries(t) : [] : [];
-    }), h = m(() => {
+    }), g = m(() => {
       const t = [];
       if (s.opt?.input && a.input) {
         let e;
@@ -55,13 +55,13 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
       else {
         const e = t.target, i = t.target.closest(".asfselectarea");
         if (i) {
-          const { y: A } = e?.getBoundingClientRect() || {
+          const { y: w } = e?.getBoundingClientRect() || {
             y: 0
-          }, { y: w, height: B } = i?.getBoundingClientRect() || {
+          }, { y: A, height: B } = i?.getBoundingClientRect() || {
             y: 0,
             height: 0
           };
-          let c = A - w, p = B - c;
+          let c = w - A, p = B - c;
           c > p ? (a.up = !0, c = (c / Number(d?.scale || 1)).toFixed(3), c < parseInt(a.stylelist["max-height"]) && (a.stylelist["max-height"] = c + "px")) : (a.up = !1, p = (p / Number(d?.scale || 1)).toFixed(3), p < parseInt(a.stylelist["max-height"]) && (a.stylelist["max-height"] = p + "px"));
         } else t.clientY > 299 ? a.up = !0 : a.up = !1;
       }
@@ -75,9 +75,9 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
     function j(t) {
       s.opt?.input && t.target && (t.target.textContent !== a.input || a.inputinit !== a.input) && (t.target.textContent = l.value?.find((e) => e[0] == n.value)?.[1]);
     }
-    return (t, e) => (o(), u("div", P, [
-      f("div", L, [
-        s.opt?.input ? (o(), u("div", {
+    return (t, e) => (u(), o("div", L, [
+      f("div", O, [
+        s.opt?.input ? (u(), o("div", {
           key: 0,
           class: "asf-select-cur asf-select-cur-input",
           contenteditable: "true",
@@ -86,47 +86,48 @@ const P = { class: "asf-select" }, L = { class: "asf-select-main" }, O = { class
           tabindex: "0",
           style: v(s.opt?.style || {}),
           onPointerdown: x
-        }, r(a.inputinit), 37)) : (o(), u("div", {
+        }, r(a.inputinit), 37)) : (u(), o("div", {
           key: 1,
           class: "asf-select-cur asf-form",
           tabindex: "0",
           style: v(s.opt?.style || {}),
           onPointerdown: x
         }, [
-          f("div", O, r(l.value?.find((i) => i[0] == y(n))?.[1] || y(d).lang.asai.select || ""), 1),
+          f("div", R, r(l.value?.find((i) => i[0] == h(n))?.[1] || h(d).lang.asai.select || ""), 1),
           e[0] || (e[0] = f("div", { class: "asf-select-cur-ic" }, null, -1))
         ], 36)),
-        f("div", R, [
-          h.value?.length ? (o(), u("div", {
+        f("div", H, [
+          g.value?.length ? (u(), o("div", {
             key: 1,
             class: _(`asf-select-list${a.up ? " asf-select-up" : ""}`),
             style: v({
               ...a.stylelist,
               ...s.opt?.stylelist || {}
             }),
-            onPointerdown: S
+            onPointerdown: D(S, ["stop"])
           }, [
-            (o(!0), u(b, null, E(h.value, (i) => (o(), u("div", {
-              class: _(`asf-select-li${y(n) == i[0] ? "-active" : ""}`),
+            (u(!0), o(b, null, E(g.value, (i) => (u(), o("div", {
+              class: _(`asf-select-li${h(n) == i[0] ? "-active" : ""}`),
               "data-val": i[0],
               key: "sel" + i[0]
             }, [
-              i[2] ? (o(), u("div", {
+              i[2] > 1 ? (u(), o("div", {
                 key: 0,
-                style: v(`padding-left: ${i[2] * 10}px`)
-              }, r(i[1]), 5)) : (o(), u(b, { key: 1 }, [
+                "data-val": i[0],
+                style: v(`padding-left: ${(i[2] - 1) * 10}px`)
+              }, r(i[1]), 13, G)) : (u(), o(b, { key: 1 }, [
                 F(r(i[1]), 1)
               ], 64))
-            ], 10, Y))), 128))
-          ], 38)) : (o(), u("div", H, [
-            f("div", T, r(y(d).lang.asai.empty), 1)
+            ], 10, q))), 128))
+          ], 38)) : (u(), o("div", T, [
+            f("div", Y, r(h(d).lang.asai.empty), 1)
           ]))
         ])
       ]),
-      g.opt?.unit ? (o(), u("div", q, r(g.opt?.unit), 1)) : D("", !0)
+      y.opt?.unit ? (u(), o("div", J, r(y.opt?.unit), 1)) : z("", !0)
     ]));
   }
-}), Q = /* @__PURE__ */ M(G, [["__scopeId", "data-v-a2407c37"]]);
+}), W = /* @__PURE__ */ P(K, [["__scopeId", "data-v-a4701728"]]);
 export {
-  Q as default
+  W as default
 };

package/dist/asai-vue-host-form.css

@@ -1 +1 @@
-@charset "UTF-8";.as-form-area{display:flex;flex-wrap:wrap;width:100%}.as-form-area .label,.as-form-area label{display:flex;width:100%;padding:5px 0}.as-form-area .w1{width:10%}.as-form-area .w2{width:20%}.as-form-area .w3{width:30%}.as-form-area .w4{width:40%}.as-form-area .w5{width:50%}.as-form-area .w6{width:60%}.as-form-area .w7{width:70%}.as-form-area .w8{width:80%}.as-form-area .w9{width:90%}@media (max-width: 800px){.as-form-area .w1,.as-form-area .w2,.as-form-area .w3,.as-form-area .w4,.as-form-area .w5,.as-form-area .w6,.as-form-area .w7,.as-form-area .w8,.as-form-area .w9{width:100%}}.as-li{display:block;padding-left:12px}.as-label-ico-close,.as-label-ico-open,.as-label-ico-arr,.as-label-ico-num,.as-label-ico{display:inline-flex;justify-content:space-around;padding-right:3px}.as-label-ico:before{content:"🔸 ";color:var(--cu4)}.as-label-ico-num:before{content:"🔹 ";color:var(--cu4)}.as-label-ico-arr:before{content:"▸ ";color:var(--cz8)}.as-label-ico-arr-num:before{content:"▸ ";color:var(--cv8)}.as-label-ico-close:before{content:"📂 ";color:var(--cu4);cursor:pointer}.as-label-ico-open:before{content:"🗂️ ";color:var(--cv4);cursor:pointer}.as-label-require:after{content:"*";color:var(--cz8)}.as-form-row{display:block;width:100%}.as-form-row>span:first-child{background-color:var(--cr2);display:block;cursor:pointer}.as-form-obj .as-form-obj,.as-form-obj label{padding-left:12px;width:calc(100% - 12px)}.as-richtext-area[data-v-01c836b2]{display:flex;flex-direction:column;overflow:hidden}.as-richtext-toolbar[data-v-01c836b2]{height:auto;display:flex;flex-wrap:wrap;align-items:center}:is(.as-richtext-toolbar>select,.as-richtext-toolbar>button,.as-richtext-toolbar>input)[data-v-01c836b2]{outline:0;border:0;width:38px;height:38px;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;font-size:var(--sa1);background-color:var(--cu2);cursor:pointer}:is(.as-richtext-toolbar>select,.as-richtext-toolbar>button,.as-richtext-toolbar>input)[data-v-01c836b2]:hover{background-color:var(--cu4)}.as-richtext-toolbar>select[data-v-01c836b2]{width:68px}.as-richtext-content[data-v-01c836b2]{flex-grow:1;overflow:hidden;display:flex}.as-richtext-content>div[data-v-01c836b2],.as-richtext-content>textarea[data-v-01c836b2]{margin:0;padding:0;outline:0;border:0;resize:none;height:100%;overflow:auto}.as-upload-image[data-v-535f25e7]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-535f25e7],.as-upload-image div[data-v-535f25e7]{display:inline-flex;justify-content:center;align-items:center;max-width:100%;max-height:100%}.as-upload-image .as-upload-tit[data-v-535f25e7]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-upload-image[data-v-a305b28a]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-a305b28a],.as-upload-image div[data-v-a305b28a]{display:inline-flex;justify-content:center;align-items:center;max-width:80px;max-height:80px}.as-upload-image .as-upload-tit[data-v-a305b28a]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-upload-image[data-v-0bfdd149]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-0bfdd149],.as-upload-image div[data-v-0bfdd149]{display:inline-flex;justify-content:center;align-items:center;max-width:80px;max-height:80px}.as-upload-image .as-upload-tit[data-v-0bfdd149]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-img-area[data-v-24cc1149]{height:100%;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,10px 10px}.as-img-preview[data-v-24cc1149]{flex-grow:1;display:flex;justify-content:center;align-items:center}.as-img-preview img[data-v-24cc1149]{max-width:100%;max-height:100%}.as-img-cut-area[data-v-24cc1149]{flex-grow:1;display:flex;justify-content:center;align-items:center;overflow:hidden}.as-img-cut[data-v-24cc1149]{flex-grow:1;position:relative;margin:16px}.as-img-cut img[data-v-24cc1149]{display:block;max-width:100%;max-height:100%;object-fit:contain}.as-img-crop-box[data-v-24cc1149]{position:absolute;top:0;left:0;border:2px solid #fff;cursor:move}.as-img-crop-handle[data-v-24cc1149]{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #409eff;border-radius:50%}.top-left[data-v-24cc1149]{left:-6px;top:-6px;cursor:nwse-resize}.top-right[data-v-24cc1149]{right:-6px;top:-6px;cursor:nesw-resize}.bottom-left[data-v-24cc1149]{left:-6px;bottom:-6px;cursor:nesw-resize}.bottom-right[data-v-24cc1149]{right:-6px;bottom:-6px;cursor:nwse-resize}.as-img-btns[data-v-24cc1149]{height:auto;padding:5px 12px;display:flex;justify-content:center}.as-img-btns button[data-v-24cc1149]{height:38px;padding:0 20px;margin:0 8px;background-color:var(--cv6);color:var(--cv0);border-radius:4px;cursor:pointer}.asf-check[data-v-819ba6db],.asf-check-ck[data-v-819ba6db]{-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;border:1px solid var(--cs5);background-color:var(--cr5);color:var(--cu8);width:auto;height:var(--v46073f5c);font-size:var(--sa1);margin:0;padding:3px;border-radius:var(--v46073f5c)}.asf-check[data-v-819ba6db]:hover,.asf-check-ck[data-v-819ba6db]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-check-ico[data-v-819ba6db],.asf-check-ico-ck[data-v-819ba6db]{width:var(--v46073f5c);height:var(--v46073f5c);border-radius:100%;background-color:var(--cu6)}.asf-check-txt[data-v-819ba6db],.asf-check-txt-ck[data-v-819ba6db]{flex-grow:1;text-align:center;padding-right:20px;padding-left:10px}.asf-check-ck[data-v-819ba6db]{background-color:var(--ct2);color:var(--ct1);flex-direction:row-reverse}.asf-check-ico-ck[data-v-819ba6db]{background-color:var(--ct1)}.asf-check-txt-ck[data-v-819ba6db]{padding-left:20px;padding-right:10px}.asf-input[data-v-bfabd0c8]{border:1px solid var(--cs5);border-radius:var(--v7f3f3e8d);display:flex;justify-content:center;align-items:center;width:calc(100% - 12px);margin:0 5px}.asf-input[data-v-bfabd0c8]:hover,.asf-input[data-v-bfabd0c8]:has(input:focus){border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-input input[data-v-bfabd0c8],.asf-input .input[data-v-bfabd0c8]{display:inline-flex;justify-content:flex-start;align-items:center;color:var(--cu8);flex:1;width:calc(100% - 20px);height:var(--v7f3f3e8d);border:0;outline:0;margin:0;font-size:var(--sa1);padding:3px 10px}.asf-input .input[data-v-bfabd0c8]{opacity:.6;cursor:not-allowed}.asf-input .unit[data-v-bfabd0c8]{font-size:var(--sa1);width:auto;padding:0 10px 0 0}.asf-inputsn[data-v-67ddc34d]{display:flex;gap:10px;justify-content:center}.asf-inputsn input[data-v-67ddc34d]{width:40px;height:50px;text-align:center;font-size:20px;border:2px solid var(--cs5);border-radius:8px;outline:none;transition:border-color .3s}.asf-inputsn input[data-v-67ddc34d]:hover,.asf-inputsn input[data-v-67ddc34d]:focus{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-select[data-v-a2407c37]{display:flex;width:100%;color:var(--cu8)}.asf-select-main[data-v-a2407c37]{display:flex;flex-direction:column;flex:1;width:calc(100% - 20px)}.asf-select-cur[data-v-a2407c37]{cursor:pointer;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--cs5);padding:3px 0 3px 10px;margin:0 5px;width:calc(100% - 22px);height:var(--v00d3fb44);border-radius:var(--v00d3fb44)}.asf-select-cur-input[data-v-a2407c37],.asf-select-cur-val[data-v-a2407c37]{word-break:keep-all;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.asf-select-list-area[data-v-a2407c37],.asf-select-cur-val[data-v-a2407c37],.asf-select-cur-ic[data-v-a2407c37]{-webkit-user-select:none;user-select:none}.asf-select-cur-ic[data-v-a2407c37]{display:flex;justify-content:center;align-items:center;padding:0 10px}.asf-select-cur-ic[data-v-a2407c37]:before{font-size:smaller;color:var(--cs5);content:"∨";transition:all .5s ease-in-out}.asf-select-list-area[data-v-a2407c37]{display:none;position:relative;width:100%;height:0}.asf-select-list[data-v-a2407c37]{position:absolute;top:2px;left:0;z-index:90;width:calc(100% - 2px);overflow:auto;border:1px solid var(--cs5);background-color:var(--cr0);border-radius:var(--v00d3fb44);cursor:pointer;box-shadow:var(--shadow)}.asf-select-up[data-v-a2407c37]{top:auto;bottom:calc(var(--v00d3fb44) + 10px)!important}.asf-select-empty[data-v-a2407c37]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.asf-select-li[data-v-a2407c37],.asf-select-li-active[data-v-a2407c37]{padding:3px 15px;border-bottom:1px solid var(--cs5)}.asf-select-li[data-v-a2407c37]:hover{background-color:var(--cr5)}.asf-select-li-active[data-v-a2407c37]{background-color:var(--ct2);color:var(--ct1)}.asf-select-cur[data-v-a2407c37]:focus,.asf-select-cur[data-v-a2407c37]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-select-cur:focus+.asf-select-list-area[data-v-a2407c37]{display:block}.asf-select-cur:focus .asf-select-cur-ic[data-v-a2407c37]:before{transform:rotate(180deg)}.unit[data-v-a2407c37]{font-size:var(--sa1);width:auto;padding:0 8px}.asf-textarea[data-v-d23aed07]{display:flex;width:100%}.asf-textarea>textarea[data-v-d23aed07]{cursor:pointer;display:block;border:1px solid var(--cs5);width:calc(100% - 22px);min-height:var(--f697bf2e);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:var(--f697bf2e)}.asf-textarea>textarea[data-v-d23aed07]:focus,.asf-textarea>textarea[data-v-d23aed07]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-tick[data-v-a981dd49],.asf-tick-disabled[data-v-a981dd49],.asf-tick-ck[data-v-a981dd49]{-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--cs5);height:var(--v1081b8c6);width:var(--v1081b8c6);margin:0;padding:3px;border-radius:var(--v1081b8c6)}.asf-tick[data-v-a981dd49]{background-color:var(--cr0)}.asf-tick[data-v-a981dd49]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-tick-disabled[data-v-a981dd49]{background-color:var(--cs1)}.asf-tick-ck[data-v-a981dd49]{background-color:var(--ct2);color:var(--ct1)}.asf-tick-ck[data-v-a981dd49]:after{content:"✓";font-weight:700}.asf-upload-area[data-v-1784793e]{display:flex;width:100%}.asf-upload[data-v-1784793e]{display:flex;justify-content:center;align-items:center;border:1px solid var(--cs5);color:var(--cu8);width:calc(100% - 22px);min-height:var(--v21e55886);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:var(--v21e55886)}.asf-upload-area[data-v-d8731f1e]{display:flex;width:100%}.asf-upload[data-v-d8731f1e]{display:flex;justify-content:center;align-items:center;border:1px solid var(--cs5);color:var(--cu8);width:calc(100% - 22px);min-height:var(--v7e0dcac0);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:10px}
+@charset "UTF-8";.as-form-area{display:flex;flex-wrap:wrap;width:100%}.as-form-area .label,.as-form-area label{display:flex;width:100%;padding:5px 0}.as-form-area .w1{width:10%}.as-form-area .w2{width:20%}.as-form-area .w3{width:30%}.as-form-area .w4{width:40%}.as-form-area .w5{width:50%}.as-form-area .w6{width:60%}.as-form-area .w7{width:70%}.as-form-area .w8{width:80%}.as-form-area .w9{width:90%}@media (max-width: 800px){.as-form-area .w1,.as-form-area .w2,.as-form-area .w3,.as-form-area .w4,.as-form-area .w5,.as-form-area .w6,.as-form-area .w7,.as-form-area .w8,.as-form-area .w9{width:100%}}.as-li{display:block;padding-left:12px}.as-label-ico-close,.as-label-ico-open,.as-label-ico-arr,.as-label-ico-num,.as-label-ico{display:inline-flex;justify-content:space-around;padding-right:3px}.as-label-ico:before{content:"🔸 ";color:var(--cu4)}.as-label-ico-num:before{content:"🔹 ";color:var(--cu4)}.as-label-ico-arr:before{content:"▸ ";color:var(--cz8)}.as-label-ico-arr-num:before{content:"▸ ";color:var(--cv8)}.as-label-ico-close:before{content:"📂 ";color:var(--cu4);cursor:pointer}.as-label-ico-open:before{content:"🗂️ ";color:var(--cv4);cursor:pointer}.as-label-require:after{content:"*";color:var(--cz8)}.as-form-row{display:block;width:100%}.as-form-row>span:first-child{background-color:var(--cr2);display:block;cursor:pointer}.as-form-obj .as-form-obj,.as-form-obj label{padding-left:12px;width:calc(100% - 12px)}.as-richtext-area[data-v-01c836b2]{display:flex;flex-direction:column;overflow:hidden}.as-richtext-toolbar[data-v-01c836b2]{height:auto;display:flex;flex-wrap:wrap;align-items:center}:is(.as-richtext-toolbar>select,.as-richtext-toolbar>button,.as-richtext-toolbar>input)[data-v-01c836b2]{outline:0;border:0;width:38px;height:38px;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;font-size:var(--sa1);background-color:var(--cu2);cursor:pointer}:is(.as-richtext-toolbar>select,.as-richtext-toolbar>button,.as-richtext-toolbar>input)[data-v-01c836b2]:hover{background-color:var(--cu4)}.as-richtext-toolbar>select[data-v-01c836b2]{width:68px}.as-richtext-content[data-v-01c836b2]{flex-grow:1;overflow:hidden;display:flex}.as-richtext-content>div[data-v-01c836b2],.as-richtext-content>textarea[data-v-01c836b2]{margin:0;padding:0;outline:0;border:0;resize:none;height:100%;overflow:auto}.as-upload-image[data-v-535f25e7]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-535f25e7],.as-upload-image div[data-v-535f25e7]{display:inline-flex;justify-content:center;align-items:center;max-width:100%;max-height:100%}.as-upload-image .as-upload-tit[data-v-535f25e7]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-upload-image[data-v-a305b28a]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-a305b28a],.as-upload-image div[data-v-a305b28a]{display:inline-flex;justify-content:center;align-items:center;max-width:80px;max-height:80px}.as-upload-image .as-upload-tit[data-v-a305b28a]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-upload-image[data-v-0bfdd149]{width:88px;height:88px;border:1px solid #ccc;display:inline-flex;justify-content:center;align-items:center;font-size:58px;color:#ccc;cursor:pointer;border-radius:4px}.as-upload-image img[data-v-0bfdd149],.as-upload-image div[data-v-0bfdd149]{display:inline-flex;justify-content:center;align-items:center;max-width:80px;max-height:80px}.as-upload-image .as-upload-tit[data-v-0bfdd149]{font-size:var(--sa1);color:#666;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.as-img-area[data-v-24cc1149]{height:100%;display:flex;flex-direction:column;align-items:center;-webkit-user-select:none;user-select:none;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%),linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%);background-size:20px 20px;background-position:0 0,10px 10px}.as-img-preview[data-v-24cc1149]{flex-grow:1;display:flex;justify-content:center;align-items:center}.as-img-preview img[data-v-24cc1149]{max-width:100%;max-height:100%}.as-img-cut-area[data-v-24cc1149]{flex-grow:1;display:flex;justify-content:center;align-items:center;overflow:hidden}.as-img-cut[data-v-24cc1149]{flex-grow:1;position:relative;margin:16px}.as-img-cut img[data-v-24cc1149]{display:block;max-width:100%;max-height:100%;object-fit:contain}.as-img-crop-box[data-v-24cc1149]{position:absolute;top:0;left:0;border:2px solid #fff;cursor:move}.as-img-crop-handle[data-v-24cc1149]{position:absolute;width:12px;height:12px;background:#fff;border:2px solid #409eff;border-radius:50%}.top-left[data-v-24cc1149]{left:-6px;top:-6px;cursor:nwse-resize}.top-right[data-v-24cc1149]{right:-6px;top:-6px;cursor:nesw-resize}.bottom-left[data-v-24cc1149]{left:-6px;bottom:-6px;cursor:nesw-resize}.bottom-right[data-v-24cc1149]{right:-6px;bottom:-6px;cursor:nwse-resize}.as-img-btns[data-v-24cc1149]{height:auto;padding:5px 12px;display:flex;justify-content:center}.as-img-btns button[data-v-24cc1149]{height:38px;padding:0 20px;margin:0 8px;background-color:var(--cv6);color:var(--cv0);border-radius:4px;cursor:pointer}.asf-check[data-v-819ba6db],.asf-check-ck[data-v-819ba6db]{-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;justify-content:flex-start;align-items:center;border:1px solid var(--cs5);background-color:var(--cr5);color:var(--cu8);width:auto;height:var(--v46073f5c);font-size:var(--sa1);margin:0;padding:3px;border-radius:var(--v46073f5c)}.asf-check[data-v-819ba6db]:hover,.asf-check-ck[data-v-819ba6db]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-check-ico[data-v-819ba6db],.asf-check-ico-ck[data-v-819ba6db]{width:var(--v46073f5c);height:var(--v46073f5c);border-radius:100%;background-color:var(--cu6)}.asf-check-txt[data-v-819ba6db],.asf-check-txt-ck[data-v-819ba6db]{flex-grow:1;text-align:center;padding-right:20px;padding-left:10px}.asf-check-ck[data-v-819ba6db]{background-color:var(--ct2);color:var(--ct1);flex-direction:row-reverse}.asf-check-ico-ck[data-v-819ba6db]{background-color:var(--ct1)}.asf-check-txt-ck[data-v-819ba6db]{padding-left:20px;padding-right:10px}.asf-input[data-v-45c548dd]{border:1px solid var(--cs5);border-radius:var(--v40a0921e);display:flex;justify-content:center;align-items:center;width:calc(100% - 12px);margin:0 5px}.asf-input[data-v-45c548dd]:hover,.asf-input[data-v-45c548dd]:has(input:focus){border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-input input[data-v-45c548dd],.asf-input .input[data-v-45c548dd]{display:inline-flex;justify-content:flex-start;align-items:center;color:var(--cu8);flex:1;width:calc(100% - 20px);height:var(--v40a0921e);border:0;outline:0;margin:0;font-size:var(--sa1);padding:3px 10px}.asf-input .input[data-v-45c548dd]{opacity:.6;cursor:not-allowed}.asf-input .unit[data-v-45c548dd]{font-size:var(--sa1);width:auto;padding:0 10px 0 0}.asf-inputsn[data-v-67ddc34d]{display:flex;gap:10px;justify-content:center}.asf-inputsn input[data-v-67ddc34d]{width:40px;height:50px;text-align:center;font-size:20px;border:2px solid var(--cs5);border-radius:8px;outline:none;transition:border-color .3s}.asf-inputsn input[data-v-67ddc34d]:hover,.asf-inputsn input[data-v-67ddc34d]:focus{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-select[data-v-a4701728]{display:flex;width:100%;color:var(--cu8)}.asf-select-main[data-v-a4701728]{display:flex;flex-direction:column;flex:1;width:calc(100% - 20px)}.asf-select-cur[data-v-a4701728]{cursor:pointer;display:flex;justify-content:space-between;align-items:center;border:1px solid var(--cs5);padding:3px 0 3px 10px;margin:0 5px;width:calc(100% - 22px);height:var(--v34a6911f);border-radius:var(--v34a6911f)}.asf-select-cur-input[data-v-a4701728],.asf-select-cur-val[data-v-a4701728]{word-break:keep-all;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis}.asf-select-list-area[data-v-a4701728],.asf-select-cur-val[data-v-a4701728],.asf-select-cur-ic[data-v-a4701728]{-webkit-user-select:none;user-select:none}.asf-select-cur-ic[data-v-a4701728]{display:flex;justify-content:center;align-items:center;padding:0 10px}.asf-select-cur-ic[data-v-a4701728]:before{font-size:smaller;color:var(--cs5);content:"∨";transition:all .5s ease-in-out}.asf-select-list-area[data-v-a4701728]{display:none;position:relative;width:100%;height:0}.asf-select-list[data-v-a4701728]{position:absolute;top:2px;left:0;z-index:90;width:calc(100% - 2px);overflow:auto;border:1px solid var(--cs5);background-color:var(--cr0);border-radius:var(--v34a6911f);cursor:pointer;box-shadow:var(--shadow)}.asf-select-up[data-v-a4701728]{top:auto;bottom:calc(var(--v34a6911f) + 10px)!important}.asf-select-empty[data-v-a4701728]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.asf-select-li[data-v-a4701728],.asf-select-li-active[data-v-a4701728]{padding:3px 15px;border-bottom:1px solid var(--cs5)}.asf-select-li[data-v-a4701728]:hover{background-color:var(--cr5)}.asf-select-li-active[data-v-a4701728]{background-color:var(--ct2);color:var(--ct1)}.asf-select-cur[data-v-a4701728]:focus,.asf-select-cur[data-v-a4701728]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-select-cur:focus+.asf-select-list-area[data-v-a4701728]{display:block}.asf-select-cur:focus .asf-select-cur-ic[data-v-a4701728]:before{transform:rotate(180deg)}.unit[data-v-a4701728]{font-size:var(--sa1);width:auto;padding:0 8px}.asf-textarea[data-v-d23aed07]{display:flex;width:100%}.asf-textarea>textarea[data-v-d23aed07]{cursor:pointer;display:block;border:1px solid var(--cs5);width:calc(100% - 22px);min-height:var(--f697bf2e);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:var(--f697bf2e)}.asf-textarea>textarea[data-v-d23aed07]:focus,.asf-textarea>textarea[data-v-d23aed07]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-tick[data-v-a981dd49],.asf-tick-disabled[data-v-a981dd49],.asf-tick-ck[data-v-a981dd49]{-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;border:1px solid var(--cs5);height:var(--v1081b8c6);width:var(--v1081b8c6);margin:0;padding:3px;border-radius:var(--v1081b8c6)}.asf-tick[data-v-a981dd49]{background-color:var(--cr0)}.asf-tick[data-v-a981dd49]:hover{border-color:var(--ct3);box-shadow:0 0 5px var(--ct3)}.asf-tick-disabled[data-v-a981dd49]{background-color:var(--cs1)}.asf-tick-ck[data-v-a981dd49]{background-color:var(--ct2);color:var(--ct1)}.asf-tick-ck[data-v-a981dd49]:after{content:"✓";font-weight:700}.asf-upload-area[data-v-1784793e]{display:flex;width:100%}.asf-upload[data-v-1784793e]{display:flex;justify-content:center;align-items:center;border:1px solid var(--cs5);color:var(--cu8);width:calc(100% - 22px);min-height:var(--v21e55886);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:var(--v21e55886)}.asf-upload-area[data-v-d8731f1e]{display:flex;width:100%}.asf-upload[data-v-d8731f1e]{display:flex;justify-content:center;align-items:center;border:1px solid var(--cs5);color:var(--cu8);width:calc(100% - 22px);min-height:var(--v7e0dcac0);margin:0;font-size:var(--sa1);padding:3px 10px;border-radius:10px}

package/dist/asai-vue-host-form.es.js

@@ -4,7 +4,7 @@ const o = {
       loadfn: i.loadfn,
       app: a,
       eager: !1,
-      files: /* @__PURE__ */ Object.assign({ "./asui/form/AsaiForm.vue": () => import("./AsaiForm-DZVbpIN-.mjs"), "./asui/form/AsaiFormLabel.vue": () => import("./AsaiFormLabel-BAXvUybW.mjs"), "./asui/form/AsaiFormLabelArea.vue": () => import("./AsaiFormLabelArea-CmjCZFfF.mjs"), "./asui/form/AsaiFormLi.vue": () => import("./AsaiFormLi-B-Po6qaB.mjs"), "./asui/form/AsaiFormObject.vue": () => import("./AsaiFormObject-B8WHlNwq.mjs"), "./asui/form/AsaiFormShow.vue": () => import("./AsaiFormShow-Da4NJXK7.mjs"), "./asui/form/AsaiInput.vue": () => import("./AsaiInput-DahcJZqh.mjs"), "./asui/form/AsaiRichEditor.vue": () => import("./AsaiRichEditor-DDOCr12f.mjs"), "./asui/form/AsaiSelect.vue": () => import("./AsaiSelect-B4KZbNRO.mjs"), "./asui/form/AsaiSelectCl.vue": () => import("./AsaiSelectCl-DY_5Y--8.mjs"), "./asui/form/AsaiSelectLv.vue": () => import("./AsaiSelectLv-DNjfTp67.mjs"), "./asui/form/AsaiTextJson.vue": () => import("./AsaiTextJson-Dr7yX0_I.mjs"), "./asui/form/AsaiTextarea.vue": () => import("./AsaiTextarea-O38xA-tq.mjs"), "./asui/form/AsaiUpBinary.vue": () => import("./AsaiUpBinary-DFmYr2_2.mjs"), "./asui/form/AsaiUpload.vue": () => import("./AsaiUpload-D4kzZ5_G.mjs"), "./asui/form/AsaiUploadImg.vue": () => import("./AsaiUploadImg-D8mMVNdc.mjs"), "./asui/form/AsaiUploadImgCut.vue": () => import("./AsaiUploadImgCut-B3Y2hppn.mjs"), "./asui/form/AsaiUploadImgCutPop.vue": () => import("./AsaiUploadImgCutPop-0gVLGw9m.mjs"), "./asui/formbase/AsfCheck.vue": () => import("./AsfCheck-BcCEmH1r.mjs"), "./asui/formbase/AsfInput.vue": () => import("./AsfInput-DGz-Z4Wy.mjs"), "./asui/formbase/AsfInputSn.vue": () => import("./AsfInputSn-BszCoVn-.mjs"), "./asui/formbase/AsfSelect.vue": () => import("./AsfSelect-D80NFcz5.mjs"), "./asui/formbase/AsfTextarea.vue": () => import("./AsfTextarea-BAGk31uV.mjs"), "./asui/formbase/AsfTick.vue": () => import("./AsfTick-29dNfK_T.mjs"), "./asui/formbase/AsfUploadFile.vue": () => import("./AsfUploadFile-DNpyDdOv.mjs"), "./asui/formbase/AsfUploadText.vue": () => import("./AsfUploadText-BLOaIAVI.mjs") })
+      files: /* @__PURE__ */ Object.assign({ "./asui/form/AsaiForm.vue": () => import("./AsaiForm-BAbhq1KW.mjs"), "./asui/form/AsaiFormLabel.vue": () => import("./AsaiFormLabel-BAXvUybW.mjs"), "./asui/form/AsaiFormLabelArea.vue": () => import("./AsaiFormLabelArea-CmjCZFfF.mjs"), "./asui/form/AsaiFormLi.vue": () => import("./AsaiFormLi-B-Po6qaB.mjs"), "./asui/form/AsaiFormObject.vue": () => import("./AsaiFormObject-B8WHlNwq.mjs"), "./asui/form/AsaiFormShow.vue": () => import("./AsaiFormShow-Da4NJXK7.mjs"), "./asui/form/AsaiInput.vue": () => import("./AsaiInput-D4BZoHDc.mjs"), "./asui/form/AsaiRichEditor.vue": () => import("./AsaiRichEditor-DDOCr12f.mjs"), "./asui/form/AsaiSelect.vue": () => import("./AsaiSelect-B4KZbNRO.mjs"), "./asui/form/AsaiSelectCl.vue": () => import("./AsaiSelectCl-Cl6N0v40.mjs"), "./asui/form/AsaiSelectLv.vue": () => import("./AsaiSelectLv-DNjfTp67.mjs"), "./asui/form/AsaiTextJson.vue": () => import("./AsaiTextJson-Dr7yX0_I.mjs"), "./asui/form/AsaiTextarea.vue": () => import("./AsaiTextarea-O38xA-tq.mjs"), "./asui/form/AsaiUpBinary.vue": () => import("./AsaiUpBinary-DFmYr2_2.mjs"), "./asui/form/AsaiUpload.vue": () => import("./AsaiUpload-D4kzZ5_G.mjs"), "./asui/form/AsaiUploadImg.vue": () => import("./AsaiUploadImg-D8mMVNdc.mjs"), "./asui/form/AsaiUploadImgCut.vue": () => import("./AsaiUploadImgCut-B3Y2hppn.mjs"), "./asui/form/AsaiUploadImgCutPop.vue": () => import("./AsaiUploadImgCutPop-0gVLGw9m.mjs"), "./asui/formbase/AsfCheck.vue": () => import("./AsfCheck-BcCEmH1r.mjs"), "./asui/formbase/AsfInput.vue": () => import("./AsfInput-By00xBFI.mjs"), "./asui/formbase/AsfInputSn.vue": () => import("./AsfInputSn-BszCoVn-.mjs"), "./asui/formbase/AsfSelect.vue": () => import("./AsfSelect-E9c8eZQ4.mjs"), "./asui/formbase/AsfTextarea.vue": () => import("./AsfTextarea-BAGk31uV.mjs"), "./asui/formbase/AsfTick.vue": () => import("./AsfTick-29dNfK_T.mjs"), "./asui/formbase/AsfUploadFile.vue": () => import("./AsfUploadFile-DNpyDdOv.mjs"), "./asui/formbase/AsfUploadText.vue": () => import("./AsfUploadText-BLOaIAVI.mjs") })
     });
   }
 };