@vipl520/dk-ui 1.0.76 → 1.0.78

package/dist/index.mjs

@@ -1,15 +1,15 @@
 import axios from 'axios';
 import { ElLoading, ElMessage, ElButton, ElMessageBox, ElNotification } from 'element-plus';
-import { ref, reactive, nextTick, defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createTextVNode, createElementVNode, toDisplayString, markRaw, watch, onMounted, normalizeClass, createBlock, createCommentVNode, unref, computed, normalizeStyle, renderSlot, resolveDynamicComponent, withModifiers, renderList, useSlots, useAttrs, mergeProps, createSlots, resolveDirective, withDirectives, vShow, vModelText, inject, provide, onUnmounted, onUpdated, toRefs, getCurrentInstance, toRef, h, withKeys, normalizeProps, guardReactiveProps, warn } from 'vue';
+import { ref, reactive, nextTick, defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createTextVNode, createElementVNode, toDisplayString, markRaw, watch, onMounted, normalizeClass, createBlock, createCommentVNode, unref, resolveDynamicComponent, computed, normalizeStyle, renderSlot, withModifiers, renderList, useSlots, useAttrs, mergeProps, createSlots, resolveDirective, withDirectives, vShow, vModelText, inject, provide, onUnmounted, onUpdated, toRefs, getCurrentInstance, toRef, h, withKeys, normalizeProps, guardReactiveProps, warn } from 'vue';
 import { useEventListener, useElementSize, useWindowSize, useResizeObserver } from '@vueuse/core';
 import draggable from 'vuedraggable';
 import Vue3DraggableResizable from 'vue3-draggable-resizable';
+import formCreate from '@form-create/element-ui';
 import Editor from '@tinymce/tinymce-vue';
 import { Icon as Icon$1, disableCache, listIcons } from '@iconify/vue';
 import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import { Search, CircleClose } from '@element-plus/icons-vue';
 import icons from '@vant/icons';
-import formCreate from '@form-create/element-ui';
 
 const isObject$3 = (val) => val !== null && typeof val === "object";
 const isDef$1 = (val) => val !== void 0 && val !== null;
@@ -1670,11 +1670,11 @@ const testProps = {
 };
 
 const _hoisted_1$12 = { class: "mr-10px bg-black" };
-const __default__$S = defineComponent({
+const __default__$T = defineComponent({
   name: "DkTest"
 });
-var _sfc_main$1m = /* @__PURE__ */ defineComponent({
-  ...__default__$S,
+var _sfc_main$1n = /* @__PURE__ */ defineComponent({
+  ...__default__$T,
   props: testProps,
   emits: ["onChooseUrl"],
   setup(__props, { emit }) {
@@ -1733,7 +1733,7 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
-var _Test = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\test\\src\\test.vue"]]);
+var _Test = /* @__PURE__ */ _export_sfc(_sfc_main$1n, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\test\\src\\test.vue"]]);
 
 const Test = withInstall(_Test);
 
@@ -1890,11 +1890,11 @@ const groupProps = {
 const _hoisted_1$11 = { key: 1 };
 const _hoisted_2$N = { class: "collapse-title" };
 const _hoisted_3$B = { class: "_dk-group-handle" };
-const __default__$R = defineComponent({
+const __default__$S = defineComponent({
   name: "DkGroup"
 });
-var _sfc_main$1l = /* @__PURE__ */ defineComponent({
-  ...__default__$R,
+var _sfc_main$1m = /* @__PURE__ */ defineComponent({
+  ...__default__$S,
   props: groupProps,
   emits: ["update:modelValue", "change", "itemMounted", "remove", "add"],
   setup(__props, { emit }) {
@@ -2248,10 +2248,280 @@ var _sfc_main$1l = /* @__PURE__ */ defineComponent({
   }
 });
 
-var _Group = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\group\\src\\group.vue"]]);
+var _Group = /* @__PURE__ */ _export_sfc(_sfc_main$1m, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\group\\src\\group.vue"]]);
 
 const Group = withInstall(_Group);
 
+const tableFormProps = {
+  formCreateInject: Object,
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  columns: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  options: {
+    type: Object,
+    default: () => reactive({
+      submitBtn: false,
+      resetBtn: false
+    })
+  },
+  max: Number,
+  disabled: Boolean
+};
+
+const __default__$R = defineComponent({
+  name: "DkTableForm"
+});
+var _sfc_main$1l = /* @__PURE__ */ defineComponent({
+  ...__default__$R,
+  props: tableFormProps,
+  emits: ["change", "add", "delete", "update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const rule = ref([]);
+    const trs = ref([]);
+    const fapi = ref({});
+    const Form = markRaw(props.formCreateInject?.form?.$form() || {});
+    const copyTrs = ref("");
+    const oldValue = ref("");
+    const formChange = (field, _, rule2, api, flag) => {
+      if (!flag) {
+        updateValue();
+      }
+    };
+    const updateValue = () => {
+      const value = trs.value.map((tr, idx) => ({
+        // Vue: Spread types may only be created from object types.
+        ...props.modelValue[idx] || {},
+        ...fapi.value.getChildrenFormData(tr)
+      })).filter((v) => {
+        if (v === void 0 || v === null) {
+          return false;
+        }
+        let flag = false;
+        Object.keys(v).forEach((k) => {
+          flag = flag || v[k] !== void 0 && v[k] !== "" && v[k] !== null;
+        });
+        return flag;
+      });
+      const str = JSON.stringify(value);
+      if (str !== oldValue.value) {
+        oldValue.value = str;
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    const setRawData = (idx, formData) => {
+      const raw = trs.value[idx];
+      fapi.value.setChildrenFormData(raw, formData, true);
+    };
+    const updateTable = () => {
+      const str = JSON.stringify(props.modelValue);
+      if (oldValue.value === str) {
+        return;
+      }
+      oldValue.value = str;
+      trs.value.splice(0, trs.value.length, ...props.modelValue.map(() => null));
+      if (!props.modelValue.length) {
+        addRaw();
+      }
+      props.modelValue.forEach((data, idx) => {
+        if (!trs.value[idx]) {
+          addRaw();
+        }
+        setRawData(idx, data);
+      });
+      rule.value[0].children[1].children = trs.value;
+    };
+    const delRaw = (idx) => {
+      if (props.disabled) {
+        return;
+      }
+      trs.value.splice(idx, 1);
+      updateValue();
+      if (trs.value.length) {
+        trs.value.forEach(updateRaw);
+      } else {
+        addRaw();
+      }
+      emit("delete", idx);
+    };
+    const addRaw = (flag = false) => {
+      if (flag && props.disabled) {
+        return;
+      }
+      const tr = formCreate.parseJson(copyTrs.value)[0];
+      trs.value.push(tr);
+      updateRaw(tr);
+      if (flag)
+        emit("add", trs.value.length);
+    };
+    const updateRaw = (tr) => {
+      const idx = trs.value.indexOf(tr);
+      tr.children[0].props.innerText = idx + 1;
+      tr.children[tr.children.length - 1].children[0].props.onClick = () => {
+        delRaw(idx);
+      };
+    };
+    const loadRule = () => {
+      const header = [
+        {
+          type: "th",
+          native: true,
+          class: "dk-tf-head-idx",
+          props: {
+            innerText: "#"
+          }
+        }
+      ];
+      const body = [
+        {
+          type: "td",
+          class: "dk-tf-idx",
+          native: true,
+          props: {
+            innerText: "0"
+          }
+        }
+      ];
+      props.columns.forEach((column) => {
+        header.push({
+          type: "th",
+          native: true,
+          style: column.style,
+          props: {
+            innerText: column.label || ""
+          }
+        });
+        body.push({
+          type: "td",
+          native: true,
+          children: [...column.rule || []]
+        });
+      });
+      header.push({
+        type: "th",
+        native: true,
+        class: "dk-tf-edit fc-clock",
+        props: {
+          innerText: "\u64CD\u4F5C"
+        }
+      });
+      body.push({
+        type: "td",
+        native: true,
+        class: "dk-tf-btn fc-clock",
+        children: [
+          {
+            type: "dk-icon",
+            native: true,
+            class: "fc-icon icon-delete",
+            props: {
+              icon: "DeleteFilled"
+            }
+          }
+        ]
+      });
+      copyTrs.value = formCreate.toJson([
+        {
+          type: "tr",
+          native: true,
+          subRule: true,
+          children: body
+        }
+      ]);
+      rule.value = [
+        {
+          type: "table",
+          native: true,
+          class: "dk-tf-table",
+          props: {
+            border: "1",
+            cellspacing: "0",
+            cellpadding: "0"
+          },
+          children: [
+            {
+              type: "thead",
+              native: true,
+              children: [
+                {
+                  type: "tr",
+                  native: true,
+                  children: header
+                }
+              ]
+            },
+            {
+              type: "tbody",
+              native: true,
+              children: trs.value
+            }
+          ]
+        }
+      ];
+      addRaw();
+    };
+    watch(() => props.modelValue, updateTable, { deep: true });
+    onMounted(() => {
+      loadRule();
+      updateTable();
+    });
+    return (_ctx, _cache) => {
+      const _component_dk_icon = resolveComponent("dk-icon");
+      const _component_el_button = resolveComponent("el-button");
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          class: normalizeClass(["dk-table-form", { "dk-disabled": _ctx.disabled }])
+        },
+        [
+          (openBlock(), createBlock(resolveDynamicComponent(unref(Form)), {
+            api: fapi.value,
+            "onUpdate:api": _cache[0] || (_cache[0] = ($event) => fapi.value = $event),
+            option: _ctx.options,
+            rule: rule.value,
+            "extend-option": true,
+            disabled: _ctx.disabled,
+            onChange: formChange,
+            onEmitEvent: _ctx.$emit
+          }, null, 40, ["api", "option", "rule", "disabled", "onEmitEvent"])),
+          !_ctx.max || _ctx.max > trs.value.length ? (openBlock(), createBlock(_component_el_button, {
+            key: 0,
+            link: "",
+            type: "primary",
+            class: "fc-clock",
+            onClick: _cache[1] || (_cache[1] = ($event) => addRaw(true))
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", null, [
+                createVNode(_component_dk_icon, {
+                  icon: "CirclePlusFilled",
+                  size: 14
+                }),
+                createTextVNode(" \u6DFB\u52A0")
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          })) : createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
+
+var _TableForm = /* @__PURE__ */ _export_sfc(_sfc_main$1l, [["__file", "E:\\project\\monster-admin\\system\\dkgs-ui-back\\packages\\dk-ui\\src\\table-form\\src\\table-form.vue"]]);
+
+const TableForm = withInstall(_TableForm);
+
 const init = {
   language: "zh-Hans",
   branding: false,
@@ -16866,7 +17136,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dk_dialog = resolveComponent("dk-dialog");
   const _directive_loading = resolveDirective("loading");
 
-  return (openBlock(), createBlock(_component_el_container, { class: "_fc-designer dk-page-diy" }, {
+  return (openBlock(), createBlock(_component_el_container, { class: "dk-page-diy" }, {
     default: withCtx(() => [
       createCommentVNode("        左边"),
       createVNode(_component_el_aside, {
@@ -16980,8 +17250,8 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 32 /* HYDRATE_EVENTS */))
             : createCommentVNode("v-if", true),
           createElementVNode("div", {
-            class: "aside-toggle left-99%",
-            style: normalizeStyle(_ctx.leftAside.hide ? 'display:block' : ''),
+            class: "aside-toggle",
+            style: normalizeStyle([{"left":"99%"}, _ctx.leftAside.hide ? 'display:block' : '']),
             onClick: _cache[4] || (_cache[4] = $event => (_ctx.hideAside('left')))
           }, [
             createVNode(_component_dk_icon, {
@@ -29732,6 +30002,7 @@ const UrlInput = withInstall(_UrlInput);
 const components = [
   Test,
   Group,
+  TableForm,
   // 富文本编辑器
   TinyEditor,
   // 图标
@@ -29832,4 +30103,4 @@ var index = {
   install
 };
 
-export { AnimateSelect, Attachment, AttachmentDialog, AudioInput, AudioListInput, BoxSizeInput, ColorInput, FileInput, FileListInput, Form, Group, HotAreaInput, Icon, IconContent, IconDialog, IconInput, ImageInput, ImageListInput, PageDiy, Poster, PosterInput, Select, StyleAnimationInput, StyleBackgroundInput, StyleBorderInput, StyleBoxInput, StyleCustomInput, StyleFontInput, StyleInput, StyleNumberInput, StylePositionInput, StyleShadowContent, StyleShadowInput, Table, Test, TinyEditor, UniIcon, UniIconInput, UrlInput, VideoInput, VideoListInput, animateSelectProps, attachmentDialogProps, attachmentProps, audioInputProps, audioListInputProps, boxSizeInputProps, colorInputProps, index as default, fileInputProps, fileListInputProps, formProps, groupProps, hotAreaInputProps, iconContentProps, iconDialogProps, iconInputProps, iconProps, imageInputProps, imageListInputProps, install, pageDiyProps, posterInputProps, selectProps, shadowInputProps, styleAnimationInputProps, styleBackgroundInputProps, styleBorderInputProps, styleBoxInputProps, styleCustomInputProps, styleFontInputProps, styleInputProps, styleNumberInputProps, stylePositionInputProps, tableProps, testProps, tinyEditorProps, uniIconInputProps, uniIconProps, urlInputProps, videoInputProps, videoListInputProps };
+export { AnimateSelect, Attachment, AttachmentDialog, AudioInput, AudioListInput, BoxSizeInput, ColorInput, FileInput, FileListInput, Form, Group, HotAreaInput, Icon, IconContent, IconDialog, IconInput, ImageInput, ImageListInput, PageDiy, Poster, PosterInput, Select, StyleAnimationInput, StyleBackgroundInput, StyleBorderInput, StyleBoxInput, StyleCustomInput, StyleFontInput, StyleInput, StyleNumberInput, StylePositionInput, StyleShadowContent, StyleShadowInput, Table, TableForm, Test, TinyEditor, UniIcon, UniIconInput, UrlInput, VideoInput, VideoListInput, animateSelectProps, attachmentDialogProps, attachmentProps, audioInputProps, audioListInputProps, boxSizeInputProps, colorInputProps, index as default, fileInputProps, fileListInputProps, formProps, groupProps, hotAreaInputProps, iconContentProps, iconDialogProps, iconInputProps, iconProps, imageInputProps, imageListInputProps, install, pageDiyProps, posterInputProps, selectProps, shadowInputProps, styleAnimationInputProps, styleBackgroundInputProps, styleBorderInputProps, styleBoxInputProps, styleCustomInputProps, styleFontInputProps, styleInputProps, styleNumberInputProps, stylePositionInputProps, tableFormProps, tableProps, testProps, tinyEditorProps, uniIconInputProps, uniIconProps, urlInputProps, videoInputProps, videoListInputProps };

package/dist/tags.json

@@ -268,6 +268,13 @@
     ],
     "description": "内置数据表格组件，需要和怪兽框架配合使用。\n\n[Docs](https://github.com/vipl520/dk-starter/components/project/#table)"
   },
+  "dk-table-form": {
+    "attributes": [
+      "type",
+      "click"
+    ],
+    "description": "组件描述组件描述组件描述组件描述组件描述组件描述。\n\n[Docs](https://github.com/vipl520/dk-starter/components/project/#tableform)"
+  },
   "dk-test": {
     "attributes": [
       "type",

package/dist/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "dk",
-  "version": "1.0.76",
+  "version": "1.0.77",
   "js-types-syntax": "typescript",
   "description-markup": "markdown",
   "contributions": {
@@ -1598,6 +1598,40 @@
             ]
           }
         },
+        {
+          "name": "dk-table-form",
+          "source": {
+            "symbol": "DkUITableForm"
+          },
+          "description": "组件描述组件描述组件描述组件描述组件描述组件描述。",
+          "doc-url": "https://github.com/vipl520/dk-starter/components/project/#tableform",
+          "props": [
+            {
+              "name": "type",
+              "description": "参数类型",
+              "doc-url": "https://github.com/vipl520/dk-starter/components/project/#tableform-props",
+              "type": [
+                "string"
+              ]
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "自定义默认内容",
+              "doc-url": "https://github.com/vipl520/dk-starter/components/project/#tableform-slots"
+            }
+          ],
+          "js": {
+            "events": [
+              {
+                "name": "click",
+                "description": "点击触发的事件",
+                "doc-url": "https://github.com/vipl520/dk-starter/components/project/#tableform-events"
+              }
+            ]
+          }
+        },
         {
           "name": "dk-test",
           "source": {

package/es/index.d.ts

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 export * from './tiny-editor';
 export * from './icon';
 export * from './group';
+export * from './table-form';
 export * from './color-input';
 export * from './hot-area-input';
 export * from './form';

package/es/index.mjs

@@ -2,6 +2,7 @@ import { Test } from './test/index.mjs';
 import draggable from 'vuedraggable';
 import Vue3DraggableResizable from 'vue3-draggable-resizable';
 import { Group } from './group/index.mjs';
+import { TableForm } from './table-form/index.mjs';
 import { TinyEditor } from './tiny-editor/index.mjs';
 import { Icon } from './icon/index.mjs';
 import { ColorInput } from './color-input/index.mjs';
@@ -42,6 +43,7 @@ import { directives, setGlobalConfig } from '@vipl520/utils';
 export { tinyEditorProps } from './tiny-editor/src/props.mjs';
 export { iconProps } from './icon/src/props.mjs';
 export { groupProps } from './group/src/props.mjs';
+export { tableFormProps } from './table-form/src/props.mjs';
 export { colorInputProps } from './color-input/src/props.mjs';
 export { hotAreaInputProps } from './hot-area-input/src/props.mjs';
 export { formProps } from './form/src/props.mjs';
@@ -80,6 +82,7 @@ export { urlInputProps } from './url-input/src/props.mjs';
 const components = [
   Test,
   Group,
+  TableForm,
   // 富文本编辑器
   TinyEditor,
   // 图标
@@ -180,5 +183,5 @@ var index = {
   install
 };
 
-export { AnimateSelect, Attachment, AttachmentDialog, AudioInput, AudioListInput, BoxSizeInput, ColorInput, FileInput, FileListInput, Form, Group, HotAreaInput, Icon, IconContent, IconDialog, IconInput, ImageInput, ImageListInput, PageDiy, Poster, PosterInput, Select, StyleAnimationInput, StyleBackgroundInput, StyleBorderInput, StyleBoxInput, StyleCustomInput, StyleFontInput, StyleInput, StyleNumberInput, StylePositionInput, StyleShadowContent, StyleShadowInput, Table, Test, TinyEditor, UniIcon, UniIconInput, UrlInput, VideoInput, VideoListInput, index as default, install };
+export { AnimateSelect, Attachment, AttachmentDialog, AudioInput, AudioListInput, BoxSizeInput, ColorInput, FileInput, FileListInput, Form, Group, HotAreaInput, Icon, IconContent, IconDialog, IconInput, ImageInput, ImageListInput, PageDiy, Poster, PosterInput, Select, StyleAnimationInput, StyleBackgroundInput, StyleBorderInput, StyleBoxInput, StyleCustomInput, StyleFontInput, StyleInput, StyleNumberInput, StylePositionInput, StyleShadowContent, StyleShadowInput, Table, TableForm, Test, TinyEditor, UniIcon, UniIconInput, UrlInput, VideoInput, VideoListInput, index as default, install };
 //# sourceMappingURL=index.mjs.map

package/es/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import type { App } from 'vue'\nimport { Test } from './test'\nimport draggable from 'vuedraggable'\nimport Vue3DraggableResizable from 'vue3-draggable-resizable'\n\nimport { Group } from './group'\nimport { TinyEditor } from './tiny-editor'\nimport { Icon } from './icon'\nimport { ColorInput } from './color-input'\nimport { HotAreaInput } from './hot-area-input'\nimport { Dialog } from './dialog'\nimport { Form } from './form'\nimport { Attachment } from './attachment'\nimport { AttachmentDialog } from './attachment-dialog'\nimport { FileInput } from './file-input'\nimport { ImageInput } from './image-input'\nimport { AudioInput } from './audio-input'\nimport { VideoInput } from './video-input'\nimport { FileListInput } from './file-list-input'\nimport { ImageListInput } from './image-list-input'\nimport { AudioListInput } from './audio-list-input'\nimport { VideoListInput } from './video-list-input'\nimport { IconInput, IconContent, IconDialog } from './icon-input'\nimport { StyleInput } from './style-input'\nimport { BoxSizeInput } from './box-size-input'\nimport { StyleBoxInput } from './style-box-input'\nimport { StyleFontInput } from './style-font-input'\nimport { StyleBorderInput } from './style-border-input'\nimport { StyleBackgroundInput } from './style-background-input'\nimport { StyleShadowContent, StyleShadowInput } from './style-shadow-input'\nimport { StylePositionInput } from './style-position-input'\nimport { StyleNumberInput } from './style-number-input'\nimport { StyleCustomInput } from './style-custom-input'\nimport { PageDiy } from './page-diy'\nimport { Table } from './table'\nimport { Select } from './select'\nimport { Poster, PosterInput } from './poster-input'\nimport { StyleAnimationInput } from './style-animation-input'\nimport { AnimateSelect } from './animate-select'\nimport { UniIconInput } from './uni-icon-input'\nimport { UniIcon } from './uni-icon'\nimport { UrlInput } from './url-input'\n\nimport { setGlobalConfig, directives } from '@vipl520/utils'\nexport * from './tiny-editor'\nexport * from './icon'\nexport * from './group'\nexport * from './color-input'\nexport * from './hot-area-input'\nexport * from './form'\nexport * from './attachment'\nexport * from './attachment-dialog'\nexport * from './file-input'\nexport * from './image-input'\nexport * from './audio-input'\nexport * from './video-input'\nexport * from './file-list-input'\nexport * from './image-list-input'\nexport * from './audio-list-input'\nexport * from './video-list-input'\nexport * from './icon-input'\nexport * from './page-diy'\nexport * from './box-size-input'\nexport * from './test'\nexport * from './style-input'\nexport * from './style-box-input'\nexport * from './style-font-input'\nexport * from './style-border-input'\nexport * from './style-shadow-input'\nexport * from './style-background-input'\nexport * from './style-position-input'\nexport * from './style-number-input'\nexport * from './style-custom-input'\nexport * from './table'\nexport * from './select'\nexport * from './poster-input'\nexport * from './style-animation-input'\nexport * from './animate-select'\nexport * from './uni-icon'\nexport * from './uni-icon-input'\nexport * from './url-input'\n\nconst components = [\n  Test,\n  Group,\n  // 富文本编辑器\n  TinyEditor,\n  // 图标\n  Icon,\n  // 颜色选择器\n  ColorInput,\n  // 热区选择器\n  HotAreaInput,\n  // 对话框\n  Dialog,\n  // json表单\n  Form,\n  // 附件\n  Attachment,\n  // 附件弹窗\n  AttachmentDialog,\n  // 文件选择器\n  FileInput,\n  // 图片选择器\n  ImageInput,\n  // 音频选择器\n  AudioInput,\n  // 视频选择器\n  VideoInput,\n  // 多文件选择器\n  FileListInput,\n  // 多图片选择器\n  ImageListInput,\n  // 多音频选择器\n  AudioListInput,\n  // 多视频选择器\n  VideoListInput,\n  // 图标选择器\n  IconInput,\n  // 图标展示框\n  IconContent,\n  // 图片弹出框\n  IconDialog,\n  // DIY编辑器\n  PageDiy,\n  // 尺寸输入框（带px/%/rem/等单位）\n  BoxSizeInput,\n  // DIV盒子编辑器（padding/margin/width/height）\n  StyleBoxInput,\n  // 文字样式编辑器\n  StyleFontInput,\n  // 边框样式编辑器\n  StyleBorderInput,\n  // 阴影编辑器\n  StyleShadowInput,\n  // 阴影编辑框\n  StyleShadowContent,\n  // 背景编辑器\n  StyleBackgroundInput,\n  // 合并样式编辑\n  StyleInput,\n  // 定位编辑器\n  StylePositionInput,\n  // 样式文字\n  StyleNumberInput,\n  // 动画配置\n  StyleAnimationInput,\n  // 自定义样式\n  StyleCustomInput,\n  // 动画class选择\n  AnimateSelect,\n  // 数据表格\n  Table,\n  // 选择\n  Select,\n  // 表单组/对象表单\n  // 海报选择器\n  PosterInput,\n  // 海报\n  Poster,\n  Vue3DraggableResizable,\n  draggable,\n  UniIconInput,\n  UniIcon,\n  UrlInput,\n  // TODO 普通上传 upload\n  // TODO tag选择器  tag-input\n  // TODO 链接选择器 link-input\n  // TODO 应用框架\n]\n\nexport const install = (app: App, option: any = {}) => {\n  components.forEach((item) => {\n    if (item.install!) {\n      app.use(item)\n    } else if (item.name) {\n      app.component(item.name, item)\n    }\n  })\n  directives(app)\n  setGlobalConfig(option)\n}\n\nexport default {\n  install,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFA,MAAM,UAAa,GAAA;AAAA,EACjB,IAAA;AAAA,EACA,KAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,IAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,YAAA;AAAA;AAAA,EAEA,MAAA;AAAA;AAAA,EAEA,IAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,SAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,SAAA;AAAA;AAAA,EAEA,WAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,OAAA;AAAA;AAAA,EAEA,YAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,kBAAA;AAAA;AAAA,EAEA,oBAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,kBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,mBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,KAAA;AAAA;AAAA,EAEA,MAAA;AAAA;AAAA;AAAA,EAGA,WAAA;AAAA;AAAA,EAEA,MAAA;AAAA,EACA,sBAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA;AAAA;AAAA;AAAA;AAKF,CAAA,CAAA;AAEO,MAAM,OAAU,GAAA,CAAC,GAAU,EAAA,MAAA,GAAc,EAAO,KAAA;AACrD,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AAC3B,IAAA,IAAI,KAAK,OAAU,EAAA;AACjB,MAAA,GAAA,CAAI,IAAI,IAAI,CAAA,CAAA;AAAA,KACd,MAAA,IAAW,KAAK,IAAM,EAAA;AACpB,MAAI,GAAA,CAAA,SAAA,CAAU,IAAK,CAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAAA,KAC/B;AAAA,GACD,CAAA,CAAA;AACD,EAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AACd,EAAA,eAAA,CAAgB,MAAM,CAAA,CAAA;AACxB,EAAA;AAEA,YAAe;AAAA,EACb,OAAA;AACF,CAAA;;;;"}
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import type { App } from 'vue'\nimport { Test } from './test'\nimport draggable from 'vuedraggable'\nimport Vue3DraggableResizable from 'vue3-draggable-resizable'\n\nimport { Group } from './group'\nimport { TableForm } from './table-form'\nimport { TinyEditor } from './tiny-editor'\nimport { Icon } from './icon'\nimport { ColorInput } from './color-input'\nimport { HotAreaInput } from './hot-area-input'\nimport { Dialog } from './dialog'\nimport { Form } from './form'\nimport { Attachment } from './attachment'\nimport { AttachmentDialog } from './attachment-dialog'\nimport { FileInput } from './file-input'\nimport { ImageInput } from './image-input'\nimport { AudioInput } from './audio-input'\nimport { VideoInput } from './video-input'\nimport { FileListInput } from './file-list-input'\nimport { ImageListInput } from './image-list-input'\nimport { AudioListInput } from './audio-list-input'\nimport { VideoListInput } from './video-list-input'\nimport { IconInput, IconContent, IconDialog } from './icon-input'\nimport { StyleInput } from './style-input'\nimport { BoxSizeInput } from './box-size-input'\nimport { StyleBoxInput } from './style-box-input'\nimport { StyleFontInput } from './style-font-input'\nimport { StyleBorderInput } from './style-border-input'\nimport { StyleBackgroundInput } from './style-background-input'\nimport { StyleShadowContent, StyleShadowInput } from './style-shadow-input'\nimport { StylePositionInput } from './style-position-input'\nimport { StyleNumberInput } from './style-number-input'\nimport { StyleCustomInput } from './style-custom-input'\nimport { PageDiy } from './page-diy'\nimport { Table } from './table'\nimport { Select } from './select'\nimport { Poster, PosterInput } from './poster-input'\nimport { StyleAnimationInput } from './style-animation-input'\nimport { AnimateSelect } from './animate-select'\nimport { UniIconInput } from './uni-icon-input'\nimport { UniIcon } from './uni-icon'\nimport { UrlInput } from './url-input'\n\nimport { setGlobalConfig, directives } from '@vipl520/utils'\nexport * from './tiny-editor'\nexport * from './icon'\nexport * from './group'\nexport * from './table-form'\nexport * from './color-input'\nexport * from './hot-area-input'\nexport * from './form'\nexport * from './attachment'\nexport * from './attachment-dialog'\nexport * from './file-input'\nexport * from './image-input'\nexport * from './audio-input'\nexport * from './video-input'\nexport * from './file-list-input'\nexport * from './image-list-input'\nexport * from './audio-list-input'\nexport * from './video-list-input'\nexport * from './icon-input'\nexport * from './page-diy'\nexport * from './box-size-input'\nexport * from './test'\nexport * from './style-input'\nexport * from './style-box-input'\nexport * from './style-font-input'\nexport * from './style-border-input'\nexport * from './style-shadow-input'\nexport * from './style-background-input'\nexport * from './style-position-input'\nexport * from './style-number-input'\nexport * from './style-custom-input'\nexport * from './table'\nexport * from './select'\nexport * from './poster-input'\nexport * from './style-animation-input'\nexport * from './animate-select'\nexport * from './uni-icon'\nexport * from './uni-icon-input'\nexport * from './url-input'\n\nconst components = [\n  Test,\n  Group,\n  TableForm,\n  // 富文本编辑器\n  TinyEditor,\n  // 图标\n  Icon,\n  // 颜色选择器\n  ColorInput,\n  // 热区选择器\n  HotAreaInput,\n  // 对话框\n  Dialog,\n  // json表单\n  Form,\n  // 附件\n  Attachment,\n  // 附件弹窗\n  AttachmentDialog,\n  // 文件选择器\n  FileInput,\n  // 图片选择器\n  ImageInput,\n  // 音频选择器\n  AudioInput,\n  // 视频选择器\n  VideoInput,\n  // 多文件选择器\n  FileListInput,\n  // 多图片选择器\n  ImageListInput,\n  // 多音频选择器\n  AudioListInput,\n  // 多视频选择器\n  VideoListInput,\n  // 图标选择器\n  IconInput,\n  // 图标展示框\n  IconContent,\n  // 图片弹出框\n  IconDialog,\n  // DIY编辑器\n  PageDiy,\n  // 尺寸输入框（带px/%/rem/等单位）\n  BoxSizeInput,\n  // DIV盒子编辑器（padding/margin/width/height）\n  StyleBoxInput,\n  // 文字样式编辑器\n  StyleFontInput,\n  // 边框样式编辑器\n  StyleBorderInput,\n  // 阴影编辑器\n  StyleShadowInput,\n  // 阴影编辑框\n  StyleShadowContent,\n  // 背景编辑器\n  StyleBackgroundInput,\n  // 合并样式编辑\n  StyleInput,\n  // 定位编辑器\n  StylePositionInput,\n  // 样式文字\n  StyleNumberInput,\n  // 动画配置\n  StyleAnimationInput,\n  // 自定义样式\n  StyleCustomInput,\n  // 动画class选择\n  AnimateSelect,\n  // 数据表格\n  Table,\n  // 选择\n  Select,\n  // 表单组/对象表单\n  // 海报选择器\n  PosterInput,\n  // 海报\n  Poster,\n  Vue3DraggableResizable,\n  draggable,\n  UniIconInput,\n  UniIcon,\n  UrlInput,\n  // TODO 普通上传 upload\n  // TODO tag选择器  tag-input\n  // TODO 链接选择器 link-input\n  // TODO 应用框架\n]\n\nexport const install = (app: App, option: any = {}) => {\n  components.forEach((item) => {\n    if (item.install!) {\n      app.use(item)\n    } else if (item.name) {\n      app.component(item.name, item)\n    }\n  })\n  directives(app)\n  setGlobalConfig(option)\n}\n\nexport default {\n  install,\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFA,MAAM,UAAa,GAAA;AAAA,EACjB,IAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,IAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,YAAA;AAAA;AAAA,EAEA,MAAA;AAAA;AAAA,EAEA,IAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,SAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,SAAA;AAAA;AAAA,EAEA,WAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,OAAA;AAAA;AAAA,EAEA,YAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,cAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,kBAAA;AAAA;AAAA,EAEA,oBAAA;AAAA;AAAA,EAEA,UAAA;AAAA;AAAA,EAEA,kBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,mBAAA;AAAA;AAAA,EAEA,gBAAA;AAAA;AAAA,EAEA,aAAA;AAAA;AAAA,EAEA,KAAA;AAAA;AAAA,EAEA,MAAA;AAAA;AAAA;AAAA,EAGA,WAAA;AAAA;AAAA,EAEA,MAAA;AAAA,EACA,sBAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA;AAAA;AAAA;AAAA;AAKF,CAAA,CAAA;AAEO,MAAM,OAAU,GAAA,CAAC,GAAU,EAAA,MAAA,GAAc,EAAO,KAAA;AACrD,EAAW,UAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AAC3B,IAAA,IAAI,KAAK,OAAU,EAAA;AACjB,MAAA,GAAA,CAAI,IAAI,IAAI,CAAA,CAAA;AAAA,KACd,MAAA,IAAW,KAAK,IAAM,EAAA;AACpB,MAAI,GAAA,CAAA,SAAA,CAAU,IAAK,CAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAAA,KAC/B;AAAA,GACD,CAAA,CAAA;AACD,EAAA,UAAA,CAAW,GAAG,CAAA,CAAA;AACd,EAAA,eAAA,CAAgB,MAAM,CAAA,CAAA;AACxB,EAAA;AAEA,YAAe;AAAA,EACb,OAAA;AACF,CAAA;;;;"}

package/es/index.scss

@@ -1,6 +1,7 @@
 /* stylelint-disable */
 @import './icon/style/index.scss';
 @import './group/style/index.scss';
+@import './table-form/style/index.scss';
 @import './dialog/style/index.scss';
 @import './attachment/style/index.scss';
 @import './file-input/style/index.scss';
@@ -63,4 +64,82 @@
 .cl {
   zoom: 1;
 }
+
+//unocss
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgba(0,0,0,0);--un-ring-shadow:0 0 rgba(0,0,0,0);--un-shadow-inset: ;--un-shadow:0 0 rgba(0,0,0,0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+/* layer: default */
+.visible{visibility:visible;}
+.absolute{position:absolute;}
+.fixed{position:fixed;}
+.relative{position:relative;}
+.left-0{left:0;}
+.left-5\%{left:5%;}
+.left-99\%{left:99%;}
+.right-0{right:0;}
+.right-5\%{right:5%;}
+.right-99\%{right:99%;}
+.top-\[50\%\]{top:50%;}
+.top-10px{top:10px;}
+.grid{display:grid;}
+.m-1px{margin:1px;}
+.m2{margin:0.5rem;}
+.m-b-10px{margin-bottom:10px;}
+.m-b-5px{margin-bottom:5px;}
+.m-l-20px{margin-left:20px;}
+.m-l-5px{margin-left:5px;}
+.m-l-6px{margin-left:6px;}
+.m-r-4px{margin-right:4px;}
+.m-r-5px{margin-right:5px;}
+.m-t-10px{margin-top:10px;}
+.m-t-5px{margin-top:5px;}
+.me{margin-inline-end:1rem;}
+.ml-10px{margin-left:10px;}
+.ml-4{margin-left:1rem;}
+.mr{margin-right:1rem;}
+.mr-1{margin-right:0.25rem;}
+.mr-10px{margin-right:10px;}
+.block{display:block;}
+.hidden{display:none;}
+.min-h-30px{min-height:30px;}
+.w-100\%{width:100%;}
+.w-40px{width:40px;}
+.w-50\%{width:50%;}
+.w100{width:25rem;}
+.flex{display:flex;}
+.table{display:table;}
+.translate-y-\[-50\%\]{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.cursor-pointer{cursor:pointer;}
+.resize{resize:both;}
+.content-center{align-content:center;}
+.items-center{align-items:center;}
+.justify-center{justify-content:center;}
+.justify-between{justify-content:space-between;}
+.border,
+.border-1px{border-width:1px;}
+.border-white{--un-border-opacity:1;border-color:rgba(255,255,255,var(--un-border-opacity));}
+.hover\:border-blue:hover{--un-border-opacity:1;border-color:rgba(96,165,250,var(--un-border-opacity));}
+.rd-4px{border-radius:4px;}
+.border-solid{border-style:solid;}
+.bg-black{--un-bg-opacity:1;background-color:rgba(0,0,0,var(--un-bg-opacity));}
+.p-10px,
+.p10px{padding:10px;}
+.p-5px{padding:5px;}
+.p2{padding:0.5rem;}
+.px{padding-left:1rem;padding-right:1rem;}
+.pb-5px{padding-bottom:5px;}
+.pl-20{padding-left:5rem;}
+.pt-5px{padding-top:5px;}
+.text-center{text-align:center;}
+.vertical-text-top{vertical-align:text-top;}
+.italic{font-style:italic;}
+.color-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
+.hover\:color-blue:hover{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));}
+.line-through{text-decoration-line:line-through;}
+.underline{text-decoration-line:underline;}
+//.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
+//.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
+//.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+//@keyframes __un_qm{0%{box-shadow:inset 4px 4px #ff1e90, inset -4px -4px #ff1e90}100%{box-shadow:inset 8px 8px #3399ff, inset -8px -8px #3399ff}}
+//.\?{animation:__un_qm 0.5s ease-in-out alternate infinite;}
+
 /* stylelint-enable */

package/es/page-diy/src/page-diy.vue.mjs

@@ -1106,7 +1106,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dk_dialog = resolveComponent("dk-dialog");
   const _directive_loading = resolveDirective("loading");
 
-  return (openBlock(), createBlock(_component_el_container, { class: "_fc-designer dk-page-diy" }, {
+  return (openBlock(), createBlock(_component_el_container, { class: "dk-page-diy" }, {
     default: withCtx(() => [
       createCommentVNode("        左边"),
       createVNode(_component_el_aside, {
@@ -1220,8 +1220,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }, null, 32 /* HYDRATE_EVENTS */))
             : createCommentVNode("v-if", true),
           createElementVNode("div", {
-            class: "aside-toggle left-99%",
-            style: normalizeStyle(_ctx.leftAside.hide ? 'display:block' : ''),
+            class: "aside-toggle",
+            style: normalizeStyle([{"left":"99%"}, _ctx.leftAside.hide ? 'display:block' : '']),
             onClick: _cache[4] || (_cache[4] = $event => (_ctx.hideAside('left')))
           }, [
             createVNode(_component_dk_icon, {