@sepveneto/dnde 0.2.2 → 0.3.0

package/dist/editor.js

@@ -80501,6 +80501,17 @@ function watchImmediate(source, cb, options) {
   );
 }
 
+function watchOnce(source, cb, options) {
+  return watch(
+    source,
+    cb,
+    {
+      ...options,
+      once: true
+    }
+  );
+}
+
 const defaultWindow = isClient ? window : void 0;
 
 function unrefElement(elRef) {
@@ -103508,6 +103519,33 @@ class WidgetPlugin {
     this.list.push(panel);
   }
 }
+class ConfigPlugin {
+  list = [];
+  constructor(_ctx) {
+  }
+  get defaultPane() {
+    if (!this.list.length)
+      return "";
+    return this.list[0].name;
+  }
+  addPanel(panel) {
+    this.list.push(panel);
+  }
+  async validate(data) {
+    for (const pane of this.list) {
+      if (!data[pane.name])
+        continue;
+      const _rules = pane.attributes.reduce((all, curr) => {
+        all[curr.key] = curr.rules || [];
+        return all;
+      }, {}) || {};
+      const valid = await new Schema(_rules).validate(data[pane.name]).catch(() => {
+        return false;
+      });
+      return !!valid;
+    }
+  }
+}
 const useEditor = defineStore("editor", () => {
   const app = useApp();
   const shadowRoot = shallowRef();
@@ -103537,14 +103575,15 @@ const useEditor = defineStore("editor", () => {
     type: "page",
     defaultData: { list: [] }
   }));
-  const rootNode = reactive(new Node$1(defaultPage));
-  const selected = ref(rootNode.wid);
+  const rootNode = ref(new Node$1(defaultPage));
   const hovering = ref();
   const nodeMap = /* @__PURE__ */ new Map();
-  nodeMap.set(rootNode.wid, rootNode);
+  nodeMap.set(rootNode.value.wid, rootNode.value);
+  const selected = ref(rootNode.value.wid);
   const plugins = {
     helper: new HelperPlugin({ addNode, delNode }),
-    widget: new WidgetPlugin({ addPanel })
+    widget: new WidgetPlugin({ addPanel }),
+    config: new ConfigPlugin()
   };
   const selectedNode = computed(() => {
     const node = nodeMap.get(selected.value);
@@ -103571,7 +103610,7 @@ const useEditor = defineStore("editor", () => {
   });
   function addPanel() {
   }
-  function addNode(node, pNode = rootNode, manual = false) {
+  function addNode(node, pNode = rootNode.value, manual = false) {
     node.level = pNode.level + 1;
     nodeMap.set(node.wid, node);
     node.parent = pNode;
@@ -103585,15 +103624,15 @@ const useEditor = defineStore("editor", () => {
     }
     node?.parent?.list.splice(index, 1);
     nodeMap.delete(wid);
-    selected.value = rootNode.wid;
+    selected.value = rootNode.value.wid;
   }
   function selectNode(wid) {
-    selected.value = wid || rootNode.wid;
+    selected.value = wid || rootNode.value.wid;
   }
   function getData() {
-    return rootNode.parse();
+    return rootNode.value.parse();
   }
-  function setData(data, parent = rootNode) {
+  function createNodes(data, parent = rootNode.value) {
     data.forEach((item) => {
       const widget2 = app.widgetMap.get(item._view);
       if (!widget2)
@@ -103606,10 +103645,27 @@ const useEditor = defineStore("editor", () => {
       };
       const node = new Node$1(widget2, info);
       addNode(node, parent, true);
+      if (list && list.length > 0) {
+        createNodes(list, node);
+      }
     });
   }
+  function setData(data) {
+    const widget2 = app.widgetMap.get(data._view) || defaultPage;
+    const { _uuid, _name, _view, style, list, ...props } = data;
+    const info = {
+      props,
+      style,
+      list: []
+    };
+    rootNode.value = new Node$1(widget2, info);
+    nodeMap.delete(selected.value);
+    selected.value = rootNode.value.wid;
+    nodeMap.set(rootNode.value.wid, rootNode.value);
+    createNodes(list);
+  }
   function setSchema(schema) {
-    rootNode.widget._data.schema = schema;
+    rootNode.value.widget._data.schema = schema;
   }
   return {
     rootNode,
@@ -103959,7 +104015,7 @@ const NodeWrap = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["styles", [_style_0$
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "StyleNumber",
   props: {
-    modelValue: { type: [String, Number] }
+    modelValue: { type: null }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -103991,7 +104047,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       };
     });
     watch(() => props.modelValue, (val) => {
-      value.value = val;
+      value.value = val || "";
     }, { immediate: true });
     return (_ctx, _cache) => {
       const _component_ElInputNumber = resolveComponent("ElInputNumber");
@@ -104019,12 +104075,19 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const model = useModel(__props, "modelValue");
     const configRender = loadFromRemote("widgets", "configRender");
+    const editor = useEditor();
+    const appendTo = shallowRef();
+    onMounted(() => {
+      const parent = editor.shadowRoot.querySelector(".mpd-editor");
+      appendTo.value = parent;
+    });
     return (_ctx, _cache) => {
       const _component_ElInput = resolveComponent("ElInput");
       const _component_ElOption = resolveComponent("ElOption");
       const _component_ElSelect = resolveComponent("ElSelect");
       const _component_ElInputNumber = resolveComponent("ElInputNumber");
       const _component_ElSwitch = resolveComponent("ElSwitch");
+      const _component_ElDatePicker = resolveComponent("ElDatePicker");
       return _ctx.config.type === "input" ? (openBlock(), createBlock(_component_ElInput, mergeProps({
         key: 0,
         modelValue: model.value,
@@ -104032,7 +104095,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }, _ctx.config.attrs), null, 16, ["modelValue"])) : _ctx.config.type === "select" ? (openBlock(), createBlock(_component_ElSelect, mergeProps({
         key: 1,
         modelValue: model.value,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event)
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => model.value = $event),
+        "append-to": appendTo.value
       }, _ctx.config.attrs), {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.config.options, (item, index) => {
@@ -104040,7 +104104,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["modelValue"])) : _ctx.config.type === "number" ? (openBlock(), createBlock(_component_ElInputNumber, mergeProps({
+      }, 16, ["modelValue", "append-to"])) : _ctx.config.type === "number" ? (openBlock(), createBlock(_component_ElInputNumber, mergeProps({
         key: 2,
         modelValue: model.value,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => model.value = $event),
@@ -104053,10 +104117,15 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         key: 4,
         modelValue: model.value,
         "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => model.value = $event)
-      }, _ctx.config.attrs), null, 16, ["modelValue"])) : (openBlock(), createBlock(resolveDynamicComponent(unref(configRender)), mergeProps({
+      }, _ctx.config.attrs), null, 16, ["modelValue"])) : _ctx.config.type === "datetimePicker" ? (openBlock(), createBlock(_component_ElDatePicker, mergeProps({
         key: 5,
         modelValue: model.value,
         "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => model.value = $event),
+        "append-to": appendTo.value
+      }, _ctx.config.attrs), null, 16, ["modelValue", "append-to"])) : (openBlock(), createBlock(resolveDynamicComponent(unref(configRender)), mergeProps({
+        key: 6,
+        modelValue: model.value,
+        "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => model.value = $event),
         config: model.value,
         type: _ctx.config.type
       }, _ctx.config.attrs), null, 16, ["modelValue", "config", "type"]));
@@ -104068,7 +104137,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ConfigForm",
   props: {
     list: { type: Array },
-    modelValue: { type: Object }
+    modelValue: { type: null }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -104081,18 +104150,23 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     const form = ref({});
     watch(() => props.modelValue, () => {
-      form.value = props.modelValue;
+      form.value = props.modelValue || {};
     }, { immediate: true });
     function updateData(key, val) {
       const path = key.split(".");
       const _path = path.slice(0, -1);
-      const parent = path.length === 1 ? form.value : _path.reduce((obj, curr) => {
+      const parent = (path.length === 1 ? form.value : _path.reduce((obj, curr) => {
+        if (!obj) {
+          obj = {};
+        }
         return obj[curr];
-      }, form.value);
+      }, form.value)) || {};
       parent[path.slice(-1)[0]] = val;
       emit("update:modelValue", form.value);
     }
     function getData(data, key) {
+      if (!data)
+        return null;
       const path = key.split(".");
       if (path.length === 1) {
         return data[key];
@@ -104103,7 +104177,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         }
         return obj[curr] == null ? "" : obj[curr];
       }, data);
-      return res;
+      return res || null;
     }
     return (_ctx, _cache) => {
       const _component_ElFormItem = resolveComponent("ElFormItem");
@@ -104153,16 +104227,33 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const propSchema = computed(() => editor.selectedNode?.widget.props);
     const refProp = useTemplateRef("propRef");
     const refStyle = useTemplateRef("styleRef");
+    const refPageConfig = shallowRef([]);
+    const pageActive = ref();
     const active = ref("props");
+    watchOnce(() => editor.plugins.config.defaultPane, (name) => {
+      pageActive.value = name;
+    });
     watch(() => editor.selected, () => {
+      refPageConfig.value = [];
+      pageActive.value = editor.plugins.config.defaultPane;
       active.value = "props";
       nextTick().then(() => {
+        refPageConfig.value?.forEach((item) => {
+          item?.ref?.clearValidate();
+        });
         refProp.value?.clearValidate();
         refStyle.value?.clearValidate();
       });
     });
     __expose({
       async validate() {
+        if (refPageConfig.value) {
+          for (const pane of refPageConfig.value) {
+            await pane.ref.validate()?.catch(() => {
+              pageActive.value = pane.name;
+            });
+          }
+        }
         const propValid = await refProp.value?.validate()?.catch(() => {
           active.value = "props";
         });
@@ -104178,66 +104269,87 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       const _component_ElBreadcrumb = resolveComponent("ElBreadcrumb");
       const _component_ElTabPane = resolveComponent("ElTabPane");
       const _component_ElTabs = resolveComponent("ElTabs");
-      const _component_ElCard = resolveComponent("ElCard");
-      return openBlock(), createElementBlock("aside", null, [
-        createVNode(_component_ElCard, { shadow: "never" }, {
+      return openBlock(), createElementBlock("div", null, [
+        createVNode(_component_ElBreadcrumb, { "separator-icon": unref(arrow_right_default) }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
+              return openBlock(), createBlock(_component_ElBreadcrumbItem, {
+                key: item.wid,
+                onClick: ($event) => unref(editor).selected = item.wid
+              }, {
+                default: withCtx(() => [
+                  createBaseVNode("span", _hoisted_1$3, toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["onClick"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["separator-icon"]),
+        unref(editor).selected === unref(editor).rootNode.wid ? (openBlock(), createBlock(_component_ElTabs, {
+          key: 0,
+          modelValue: pageActive.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => pageActive.value = $event)
+        }, {
           default: withCtx(() => [
-            createVNode(_component_ElBreadcrumb, { "separator-icon": unref(arrow_right_default) }, {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(editor).plugins.config.list, (pane) => {
+              return openBlock(), createBlock(_component_ElTabPane, {
+                key: pane.name,
+                label: pane.label,
+                name: pane.name
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$7, {
+                    ref_for: true,
+                    ref: (ref2) => refPageConfig.value.push({ ref: ref2, name: pane.name }),
+                    modelValue: unref(editor).selectedNode.data[pane.name],
+                    "onUpdate:modelValue": ($event) => unref(editor).selectedNode.data[pane.name] = $event,
+                    list: pane.attributes
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "list"])
+                ]),
+                _: 2
+              }, 1032, ["label", "name"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["modelValue"])) : (openBlock(), createBlock(_component_ElTabs, {
+          key: 1,
+          modelValue: active.value,
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => active.value = $event)
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_ElTabPane, {
+              label: "属性",
+              name: "props"
+            }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (item) => {
-                  return openBlock(), createBlock(_component_ElBreadcrumbItem, {
-                    key: item.wid,
-                    onClick: ($event) => unref(editor).selected = item.wid
-                  }, {
-                    default: withCtx(() => [
-                      createBaseVNode("span", _hoisted_1$3, toDisplayString(item.name), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["onClick"]);
-                }), 128))
+                createVNode(_sfc_main$7, {
+                  ref: "propRef",
+                  modelValue: unref(editor).selectedNode.data,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(editor).selectedNode.data = $event),
+                  list: propSchema.value
+                }, null, 8, ["modelValue", "list"])
               ]),
               _: 1
-            }, 8, ["separator-icon"]),
-            createVNode(_component_ElTabs, {
-              modelValue: active.value,
-              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => active.value = $event)
+            }),
+            styleSchema.value.length > 0 ? (openBlock(), createBlock(_component_ElTabPane, {
+              key: 0,
+              label: "样式",
+              name: "style"
             }, {
               default: withCtx(() => [
-                createVNode(_component_ElTabPane, {
-                  label: "属性",
-                  name: "props"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$7, {
-                      ref: "propRef",
-                      modelValue: unref(editor).selectedNode.data,
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => unref(editor).selectedNode.data = $event),
-                      list: propSchema.value
-                    }, null, 8, ["modelValue", "list"])
-                  ]),
-                  _: 1
-                }),
-                styleSchema.value.length > 0 ? (openBlock(), createBlock(_component_ElTabPane, {
-                  key: 0,
-                  label: "样式",
-                  name: "style"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_sfc_main$7, {
-                      ref: "styleRef",
-                      modelValue: unref(editor).selectedNode.style,
-                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => unref(editor).selectedNode.style = $event),
-                      list: styleSchema.value
-                    }, null, 8, ["modelValue", "list"])
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true)
+                createVNode(_sfc_main$7, {
+                  ref: "styleRef",
+                  modelValue: unref(editor).selectedNode.style,
+                  "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => unref(editor).selectedNode.style = $event),
+                  list: styleSchema.value
+                }, null, 8, ["modelValue", "list"])
               ]),
               _: 1
-            }, 8, ["modelValue"])
+            })) : createCommentVNode("", true)
           ]),
           _: 1
-        })
+        }, 8, ["modelValue"]))
       ]);
     };
   }
@@ -104429,9 +104541,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _style_0$2 = "\n.tree-panel-container[data-v-70d62127] {\n  min-width: 375px;\n  min-height: calc(667px - 60px);\n  background-color: #ffffff;\n  border-radius: 4px;\n  padding: 20px;\n  border: 1px solid #ebeef5;\n  box-sizing: border-box;\n}\n.tree-panel-container[data-v-70d62127]:hover {\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n}\n\n/* 拖拽列表动画 */\n.flip-list-move[data-v-70d62127] {\n  transition: transform 0.3s ease;\n}\n.flip-list-enter-active[data-v-70d62127],\n.flip-list-leave-active[data-v-70d62127] {\n  transition: all 0.3s ease;\n}\n.flip-list-enter-from[data-v-70d62127],\n.flip-list-leave-to[data-v-70d62127] {\n  opacity: 0;\n  transform: translateX(30px);\n}\n\n/* 拖拽时的幽灵元素样式 */\n.dragging-ghost[data-v-70d62127] {\n  opacity: 0.7;\n  background-color: #f5f7fa;\n  border: 1px dashed #409eff;\n  border-radius: 4px;\n  transform: scale(0.98);\n}\n";
+const _style_0$2 = "\n.tree-panel-container[data-v-2dd120c0] {\n  min-height: 500px;\n  box-sizing: border-box;\n}\n.tree-panel-container[data-v-2dd120c0]:hover {\n  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);\n  transition: all 0.3s ease;\n}\n\n/* 拖拽列表动画 */\n.flip-list-move[data-v-2dd120c0] {\n  transition: transform 0.3s ease;\n}\n.flip-list-enter-active[data-v-2dd120c0],\n.flip-list-leave-active[data-v-2dd120c0] {\n  transition: all 0.3s ease;\n}\n.flip-list-enter-from[data-v-2dd120c0],\n.flip-list-leave-to[data-v-2dd120c0] {\n  opacity: 0;\n  transform: translateX(30px);\n}\n\n/* 拖拽时的幽灵元素样式 */\n.dragging-ghost[data-v-2dd120c0] {\n  opacity: 0.7;\n  background-color: #f5f7fa;\n  border: 1px dashed #409eff;\n  border-radius: 4px;\n  transform: scale(0.98);\n}\n";
 
-const TreePanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["styles", [_style_0$2]], ["__scopeId", "data-v-70d62127"]]);
+const TreePanel = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["styles", [_style_0$2]], ["__scopeId", "data-v-2dd120c0"]]);
 
 const _sfc_main$3 = {  };
 
@@ -104579,33 +104691,27 @@ const _sfc_main$2 = {
   render() {
     return h$1(
       "aside",
-      { style: "width: 300px" },
+      {
+        style: { padding: "1rem", border: "1px solid var(--mpd-border-color)" }
+      },
       this.tabRenderer()
     );
   }
 };
 
-const _style_0$1 = ".widgets-menu[data-v-57991b46] {\n  width: 300px;\n  height: 100%;\n  background-color: #ffffff;\n  border-right: 1px solid #ebeef5;\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] {\n  height: 100%;\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] .el-tabs__header {\n  margin-bottom: 0;\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] .el-tabs__header .el-tabs__nav-wrap::after {\n  background-color: #e4e7ed;\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] .el-tabs__header .el-tabs__item {\n  color: #606266;\n  transition: all 0.3s;\n  position: relative;\n  padding: 0 20px;\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] .el-tabs__header .el-tabs__item.is-active {\n  color: #409eff;\n}\n.widgets-menu .widgets-tabs[data-v-57991b46] .el-tabs__content {\n  flex: 1;\n  overflow: hidden;\n}\n.widgets-menu .widgets-card[data-v-57991b46] {\n  height: 100%;\n  border: none;\n  background: transparent;\n}\n.widgets-menu .widgets-card[data-v-57991b46] .el-card__header {\n  background: white;\n  border-bottom: 1px solid #ebeef5;\n  padding: 15px 20px;\n}\n.widgets-menu .widgets-card .card-header[data-v-57991b46] {\n  font-size: 16px;\n  font-weight: 500;\n  color: #303133;\n}\n.widgets-menu .widgets-scrollbar[data-v-57991b46] .el-scrollbar__bar {\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.widgets-menu .widgets-scrollbar[data-v-57991b46]:hover .el-scrollbar__bar {\n  opacity: 1;\n}\n.widgets-menu .widgets-grid[data-v-57991b46] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  padding: 12px;\n}\n.widgets-menu .widgets-list[data-v-57991b46] {\n  padding: 12px;\n}\n.widgets-menu .widget-item[data-v-57991b46] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: white;\n  border-radius: 4px;\n  padding: 12px 6px;\n  cursor: grab;\n  transition: all 0.3s;\n  border: 1px solid #ebeef5;\n}\n.widgets-menu .widget-item[data-v-57991b46]:hover {\n  border-color: #409eff;\n  box-shadow: 0 0 6px rgba(64, 158, 255, 0.2);\n}\n.widgets-menu .widget-item .widget-icon[data-v-57991b46] {\n  font-size: 20px;\n  margin-bottom: 6px;\n  color: #606266;\n}\n.widgets-menu .widget-item .widget-name[data-v-57991b46] {\n  font-size: 12px;\n  color: #606266;\n  text-align: center;\n  line-height: 1.4;\n}\n.widgets-menu .widget-item-simple[data-v-57991b46] {\n  padding: 10px 12px;\n  background: white;\n  border-radius: 4px;\n  margin-bottom: 6px;\n  cursor: grab;\n  transition: all 0.2s;\n  border: 1px solid #ebeef5;\n}\n.widgets-menu .widget-item-simple[data-v-57991b46]:hover {\n  border-color: #409eff;\n  background: #ecf5ff;\n}";
+const _style_0$1 = ".widgets-menu[data-v-5da571e4] {\n  width: 300px;\n  height: 100%;\n  background-color: #ffffff;\n  border-right: 1px solid #ebeef5;\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] {\n  height: 100%;\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] .el-tabs__header {\n  margin-bottom: 0;\n  background: white;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] .el-tabs__header .el-tabs__nav-wrap::after {\n  background-color: #e4e7ed;\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] .el-tabs__header .el-tabs__item {\n  color: #606266;\n  transition: all 0.3s;\n  position: relative;\n  padding: 0 20px;\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] .el-tabs__header .el-tabs__item.is-active {\n  color: #409eff;\n}\n.widgets-menu .widgets-tabs[data-v-5da571e4] .el-tabs__content {\n  flex: 1;\n  overflow: hidden;\n}\n.widgets-menu .widgets-card[data-v-5da571e4] {\n  height: 100%;\n  border: none;\n  background: transparent;\n}\n.widgets-menu .widgets-card[data-v-5da571e4] .el-card__header {\n  background: white;\n  border-bottom: 1px solid #ebeef5;\n  padding: 15px 20px;\n}\n.widgets-menu .widgets-card .card-header[data-v-5da571e4] {\n  font-size: 16px;\n  font-weight: 500;\n  color: #303133;\n}\n.widgets-menu .widgets-scrollbar[data-v-5da571e4] .el-scrollbar__bar {\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.widgets-menu .widgets-scrollbar[data-v-5da571e4]:hover .el-scrollbar__bar {\n  opacity: 1;\n}\n.widgets-menu .widgets-grid[data-v-5da571e4] {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 12px;\n  padding: 12px;\n}\n.widgets-menu .widgets-list[data-v-5da571e4] {\n  padding: 12px;\n}\n.widgets-menu .widget-item[data-v-5da571e4] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  background: white;\n  border-radius: 4px;\n  padding: 12px 6px;\n  cursor: grab;\n  transition: all 0.3s;\n  border: 1px solid #ebeef5;\n}\n.widgets-menu .widget-item[data-v-5da571e4]:hover {\n  border-color: #409eff;\n  box-shadow: 0 0 6px rgba(64, 158, 255, 0.2);\n}\n.widgets-menu .widget-item .widget-icon[data-v-5da571e4] {\n  font-size: 20px;\n  margin-bottom: 6px;\n  color: #606266;\n}\n.widgets-menu .widget-item .widget-name[data-v-5da571e4] {\n  font-size: 12px;\n  color: #606266;\n  text-align: center;\n  line-height: 1.4;\n}\n.widgets-menu .widget-item-simple[data-v-5da571e4] {\n  padding: 10px 12px;\n  background: white;\n  border-radius: 4px;\n  margin-bottom: 6px;\n  cursor: grab;\n  transition: all 0.2s;\n  border: 1px solid #ebeef5;\n}\n.widgets-menu .widget-item-simple[data-v-5da571e4]:hover {\n  border-color: #409eff;\n  background: #ecf5ff;\n}";
 
-const WidgetsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$1]], ["__scopeId", "data-v-57991b46"]]);
+const WidgetsMenu = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$1]], ["__scopeId", "data-v-5da571e4"]]);
 
 const editorProps = {
   remoteUrl: {
     type: String,
     required: true
   },
-  root: {
-    type: Object,
-    default: () => ({})
-  },
   widgets: {
     type: Array,
     default: () => []
   },
-  settings: {
-    type: Object,
-    default: () => ({})
-  },
   extra: {
     type: Object,
     default: () => ({})
@@ -104617,7 +104723,7 @@ const _hoisted_1 = {
   class: "mpd-editor mpd-flex mpd-gap-x-2 mpd-justify-between"
 };
 const _hoisted_2 = { class: "phone-wrap mpd-relative" };
-const _hoisted_3 = { style: { "width": "500px" } };
+const _hoisted_3 = { style: { "width": "500px", "border": "1px solid var(--mpd-border-color)", "padding": "1rem" } };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "App.ce",
   props: editorProps,
@@ -104636,7 +104742,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     provide(editorContextKey, {
       node: editor.selectedNode,
       plugins: editor.plugins,
-      bus
+      bus,
+      extra: props.extra || {}
     });
     function onEnd() {
       editor.dragging = null;
@@ -104691,7 +104798,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         namespace: "mpd"
       }, {
         default: withCtx(() => [
-          createBaseVNode("div", null, toDisplayString(unref(editor).selected), 1),
           createBaseVNode("div", _hoisted_1, [
             createVNode(WidgetsMenu, { class: "mpd-flex-shrink-0" }),
             createBaseVNode("div", _hoisted_2, [
@@ -104737,12 +104843,24 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               }, 8, ["style"])
             ]),
             createBaseVNode("aside", _hoisted_3, [
-              !unref(editor).dragging ? (openBlock(), createBlock(_sfc_main$6, {
-                key: 0,
-                ref: "configPanelRef",
-                onClick: _cache[1] || (_cache[1] = withModifiers(() => {
-                }, ["stop"]))
-              }, null, 512)) : (openBlock(), createBlock(TreePanel, { key: 1 }))
+              createVNode(_component_ElScrollbar, {
+                "wrap-style": "height: 700px;",
+                noresize: ""
+              }, {
+                default: withCtx(() => [
+                  withDirectives(createVNode(_sfc_main$6, {
+                    ref: "configPanelRef",
+                    onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+                    }, ["stop"]))
+                  }, null, 512), [
+                    [vShow, !unref(editor).dragging]
+                  ]),
+                  withDirectives(createVNode(TreePanel, null, null, 512), [
+                    [vShow, unref(editor).dragging]
+                  ])
+                ]),
+                _: 1
+              })
             ])
           ], 512)
         ]),
@@ -104810,6 +104928,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         pluginConstructor.init();
       },
       async validate() {
+        const validConfig = await editor.plugins.config.validate(editor.rootNode.data);
+        if (!validConfig) {
+          editor.selectNode();
+          await nextTick();
+          refApp.value?.validate();
+          return;
+        }
         const invalidNode = await editor.rootNode.validate();
         if (invalidNode) {
           editor.selectNode(invalidNode);

package/global.d.ts

@@ -1,6 +1,8 @@
+import type Editor from '@sepveneto/dnde/editor'
+
 declare module 'vue' {
   export interface GlobalComponents {
-    MpdEditor: typeof import('@sepveneto/dnde/editor')
+    MpdEditor: Editor
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sepveneto/dnde",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "",
   "author": "",
   "license": "GPL",
@@ -16,7 +16,8 @@
     "./core": {
       "types": "./dist/main.d.ts",
       "imports": "./dist/editor.js",
-      "require": "./dist/editor.js"
+      "require": "./dist/editor.js",
+      "default": "./dist/editor.js"
     },
     ".": {
       "types": "./dist/main.d.ts",
@@ -36,6 +37,7 @@
     "@sepveneto/basic-comp": "^0.9.6",
     "@sepveneto/free-dom": "^0.14.7",
     "@vueuse/core": "^13.3.0",
+    "async-validator": "^4.2.5",
     "element-plus": "^2.9.11",
     "lodash-es": "^4.17.21",
     "pinia": "^3.0.2",
@@ -60,7 +62,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && pnpm gen",
+    "build": "vite build",
     "gen": "vue-tsc -p tsconfig.build.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   }

package/dist/App.ce.vue.d.ts

@@ -1,51 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: import("vue").PropType<import("./store").LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: import("vue").PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-}>, {
-    validate(): Promise<void> | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: import("vue").PropType<import("./store").LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: import("vue").PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-}>> & Readonly<{}>, {
-    readonly widgets: import("./store").LikeWidget[];
-    readonly root: import("@sepveneto/dnde-core").EditorSchema;
-    readonly settings: import("@sepveneto/dnde-core").EditorSettings;
-    readonly extra: Record<string, any>;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/Editor.vue.d.ts

@@ -1,142 +0,0 @@
-import * as Vue from 'vue';
-declare const editor: import("pinia").Store<"editor", Pick<{
-    rootNode: Vue.Reactive<Vue.Raw<import("@sepveneto/dnde-core/class").Node>>;
-    nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-    shadowRoot: Vue.ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: Vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: Vue.Ref<string, string>;
-    hovering: Vue.Ref<string | undefined, string | undefined>;
-    selectedNode: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-    selectedNodes: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-    selectedNodeOperates: Vue.ComputedRef<import("./type.js").HelperAction[]>;
-    addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: Vue.Ref<boolean, boolean>;
-    dragging: Vue.Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-    plugins: {
-        helper: {
-            list: import("./type.js").HelperAction[];
-            addBuiltin(config: import("./type.js").HelperAction): void;
-        };
-        widget: {
-            list: import("./store").PanelInfo[];
-            addPanel(panel: import("./store").PanelInfo): void;
-        };
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-    setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-}, "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "isPreview" | "plugins">, Pick<{
-    rootNode: Vue.Reactive<Vue.Raw<import("@sepveneto/dnde-core/class").Node>>;
-    nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-    shadowRoot: Vue.ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: Vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: Vue.Ref<string, string>;
-    hovering: Vue.Ref<string | undefined, string | undefined>;
-    selectedNode: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-    selectedNodes: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-    selectedNodeOperates: Vue.ComputedRef<import("./type.js").HelperAction[]>;
-    addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: Vue.Ref<boolean, boolean>;
-    dragging: Vue.Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-    plugins: {
-        helper: {
-            list: import("./type.js").HelperAction[];
-            addBuiltin(config: import("./type.js").HelperAction): void;
-        };
-        widget: {
-            list: import("./store").PanelInfo[];
-            addPanel(panel: import("./store").PanelInfo): void;
-        };
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-    setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-}, "selectedNode" | "selectedNodes" | "selectedNodeOperates">, Pick<{
-    rootNode: Vue.Reactive<Vue.Raw<import("@sepveneto/dnde-core/class").Node>>;
-    nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-    shadowRoot: Vue.ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: Vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: Vue.Ref<string, string>;
-    hovering: Vue.Ref<string | undefined, string | undefined>;
-    selectedNode: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-    selectedNodes: Vue.ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-    selectedNodeOperates: Vue.ComputedRef<import("./type.js").HelperAction[]>;
-    addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: Vue.Ref<boolean, boolean>;
-    dragging: Vue.Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-    plugins: {
-        helper: {
-            list: import("./type.js").HelperAction[];
-            addBuiltin(config: import("./type.js").HelperAction): void;
-        };
-        widget: {
-            list: import("./store").PanelInfo[];
-            addPanel(panel: import("./store").PanelInfo): void;
-        };
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-    setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-}, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
-declare const _default: Vue.DefineComponent<Vue.ExtractPropTypes<{
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: Vue.PropType<import("@sepveneto/dnde-core").EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: Vue.PropType<import("./store").LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: Vue.PropType<import("@sepveneto/dnde-core").EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: Vue.PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-}>, {
-    register(fn: (ctx: typeof editor) => {
-        init: () => void;
-    }): void;
-    validate(): Promise<void>;
-    getData(): Record<string, any>;
-    setData(data: any[]): void;
-}, {}, {}, {}, Vue.ComponentOptionsMixin, Vue.ComponentOptionsMixin, {}, string, Vue.PublicProps, Readonly<Vue.ExtractPropTypes<{
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: Vue.PropType<import("@sepveneto/dnde-core").EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: Vue.PropType<import("./store").LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: Vue.PropType<import("@sepveneto/dnde-core").EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: Vue.PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-}>> & Readonly<{}>, {
-    readonly widgets: import("./store").LikeWidget[];
-    readonly root: import("@sepveneto/dnde-core").EditorSchema;
-    readonly settings: import("@sepveneto/dnde-core").EditorSettings;
-    readonly extra: Record<string, any>;
-}, {}, {}, {}, string, Vue.ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/assets/container.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/assets/puzzle.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/assets/widget.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/ConfigForm.vue.d.ts

@@ -1,14 +0,0 @@
-import type { SchemaItem } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    list: SchemaItem[];
-    modelValue: Record<string, any>;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    validate: () => import("element-plus").FormValidationResult | undefined;
-    clearValidate: () => void | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/ConfigRender.vue.d.ts

@@ -1,17 +0,0 @@
-import type { SchemaItem } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    config: SchemaItem & {
-        attrs?: any;
-        options?: any[];
-    };
-    stylesheet: boolean;
-};
-type __VLS_PublicProps = __VLS_Props & {
-    modelValue: any;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: any) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/NodeContainer.vue.d.ts

@@ -1,6 +0,0 @@
-import type { Node } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    node: Node;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/NodeOperate.vue.d.ts

@@ -1,6 +0,0 @@
-import type { Node } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    node: Node;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/NodePlugin.vue.d.ts

@@ -1,93 +0,0 @@
-import type { HelperAction } from '@/type';
-declare const _default: import("vue").DefineComponent<{}, {
-    editor: import("pinia").Store<"editor", Pick<{
-        rootNode: import("vue").Reactive<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>>;
-        nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-        shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-        elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-        selectNode: (wid?: string) => void;
-        selected: import("vue").Ref<string, string>;
-        hovering: import("vue").Ref<string | undefined, string | undefined>;
-        selectedNode: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-        selectedNodes: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-        selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-        addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-        delNode: (wid: string) => void;
-        isPreview: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-        plugins: {
-            helper: {
-                list: HelperAction[];
-                addBuiltin(config: HelperAction): void;
-            };
-            widget: {
-                list: import("@/store").PanelInfo[];
-                addPanel(panel: import("@/store").PanelInfo): void;
-            };
-        };
-        getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-        setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-    }, "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "isPreview" | "plugins">, Pick<{
-        rootNode: import("vue").Reactive<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>>;
-        nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-        shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-        elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-        selectNode: (wid?: string) => void;
-        selected: import("vue").Ref<string, string>;
-        hovering: import("vue").Ref<string | undefined, string | undefined>;
-        selectedNode: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-        selectedNodes: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-        selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-        addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-        delNode: (wid: string) => void;
-        isPreview: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-        plugins: {
-            helper: {
-                list: HelperAction[];
-                addBuiltin(config: HelperAction): void;
-            };
-            widget: {
-                list: import("@/store").PanelInfo[];
-                addPanel(panel: import("@/store").PanelInfo): void;
-            };
-        };
-        getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-        setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-    }, "selectedNode" | "selectedNodes" | "selectedNodeOperates">, Pick<{
-        rootNode: import("vue").Reactive<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>>;
-        nodeMap: Map<string, import("@sepveneto/dnde-core/class").Node>;
-        shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-        elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-        selectNode: (wid?: string) => void;
-        selected: import("vue").Ref<string, string>;
-        hovering: import("vue").Ref<string | undefined, string | undefined>;
-        selectedNode: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node>;
-        selectedNodes: import("vue").ComputedRef<import("@sepveneto/dnde-core/class").Node[]>;
-        selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-        addNode: (node: import("@sepveneto/dnde-core/class").Node, pNode?: import("@sepveneto/dnde-core/class").Node, manual?: boolean) => void;
-        delNode: (wid: string) => void;
-        isPreview: import("vue").Ref<boolean, boolean>;
-        dragging: import("vue").Ref<import("@sepveneto/dnde-core/class").Node | null, import("@sepveneto/dnde-core/class").Node | null>;
-        plugins: {
-            helper: {
-                list: HelperAction[];
-                addBuiltin(config: HelperAction): void;
-            };
-            widget: {
-                list: import("@/store").PanelInfo[];
-                addPanel(panel: import("@/store").PanelInfo): void;
-            };
-        };
-        getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
-        setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
-    }, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
-    ctx: import("@sepveneto/dnde-core").EditorContext;
-    actionWrap: (action: HelperAction) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/components/NodeWrap.vue.d.ts

@@ -1,16 +0,0 @@
-import type { Node } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    node: Node;
-};
-declare var __VLS_5: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_5) => any;
-};
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/StyleNumber.vue.d.ts

@@ -1,9 +0,0 @@
-type __VLS_Props = {
-    modelValue: string | number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/layout/configPanel.vue.d.ts

@@ -1,4 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {
-    validate(): Promise<void>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/layout/treePanel.item.vue.d.ts

@@ -1,6 +0,0 @@
-import type { Node } from '@sepveneto/dnde-core/class';
-type __VLS_Props = {
-    node: Node;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/layout/treePanel.vue.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/layout/widgetsMenu.vue.d.ts

@@ -1,24 +0,0 @@
-import type { WidgetGroup } from '@/store/app';
-import { Node, Widget } from '@sepveneto/dnde-core/class';
-declare const _default: import("vue").DefineComponent<{}, {
-    app: import("pinia").Store<"app", Pick<{
-        setWidgets: (data: import("@/store").LikeWidget[]) => void;
-        widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-        widgetMap: Map<string, Widget>;
-    }, "widgets" | "widgetMap">, Pick<{
-        setWidgets: (data: import("@/store").LikeWidget[]) => void;
-        widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-        widgetMap: Map<string, Widget>;
-    }, never>, Pick<{
-        setWidgets: (data: import("@/store").LikeWidget[]) => void;
-        widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-        widgetMap: Map<string, Widget>;
-    }, "setWidgets">>;
-    hasGroup: (list?: (Widget | WidgetGroup)[]) => list is WidgetGroup[];
-    handleClone: (original: Widget) => Node;
-    handleEnd: () => void;
-    tabRenderer: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/dist/main.d.ts

@@ -1,25 +0,0 @@
-import Main from './Editor.vue';
-export declare const Editor: import("vue").VueElementConstructor<import("vue").ExtractPropTypes<{
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: import("vue").PropType<import("./store/app.js").LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: import("vue").PropType<import("@sepveneto/dnde-core").EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: import("vue").PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-}>>;
-export type EditorInstance = InstanceType<typeof Main>;
-export declare function register(): void;

package/dist/props.d.ts

@@ -1,25 +0,0 @@
-import type { EditorSchema, EditorSettings } from '@sepveneto/dnde-core';
-import type { PropType } from 'vue';
-import type { LikeWidget } from './store';
-export declare const editorProps: {
-    readonly remoteUrl: {
-        readonly type: StringConstructor;
-        readonly required: true;
-    };
-    readonly root: {
-        readonly type: PropType<EditorSchema>;
-        readonly default: () => {};
-    };
-    readonly widgets: {
-        readonly type: PropType<LikeWidget[]>;
-        readonly default: () => never[];
-    };
-    readonly settings: {
-        readonly type: PropType<EditorSettings>;
-        readonly default: () => {};
-    };
-    readonly extra: {
-        readonly type: PropType<Record<string, any>>;
-        readonly default: () => {};
-    };
-};

package/dist/store/app.d.ts

@@ -1,25 +0,0 @@
-import type { IWidget } from '@sepveneto/dnde-core';
-import { widgetType } from '@sepveneto/dnde-core';
-import { Widget } from '@sepveneto/dnde-core/class';
-export interface WidgetGroup {
-    name: string;
-    list: Widget[];
-}
-export type LikeWidget = IWidget | {
-    name: string;
-    list: IWidget[];
-    type: widgetType;
-};
-export declare const useApp: import("pinia").StoreDefinition<"app", Pick<{
-    setWidgets: (data: LikeWidget[]) => void;
-    widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-    widgetMap: Map<string, Widget>;
-}, "widgets" | "widgetMap">, Pick<{
-    setWidgets: (data: LikeWidget[]) => void;
-    widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-    widgetMap: Map<string, Widget>;
-}, never>, Pick<{
-    setWidgets: (data: LikeWidget[]) => void;
-    widgets: import("vue").ShallowRef<(WidgetGroup | Widget)[] | undefined, (WidgetGroup | Widget)[] | undefined>;
-    widgetMap: Map<string, Widget>;
-}, "setWidgets">>;

package/dist/store/editor.d.ts

@@ -1,86 +0,0 @@
-import type { IWidget } from '@sepveneto/dnde-core';
-import type { Raw } from 'vue';
-import type { HelperAction } from '@/type';
-import { Node } from '@sepveneto/dnde-core/class';
-declare class HelperPlugin {
-    list: HelperAction[];
-    constructor(ctx: any);
-    addBuiltin(config: HelperAction): void;
-}
-export interface PanelInfo {
-    label: string;
-    name: string;
-}
-declare class WidgetPlugin {
-    list: PanelInfo[];
-    constructor(_ctx: any);
-    addPanel(panel: PanelInfo): void;
-}
-export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
-    nodeMap: Map<string, Node>;
-    shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: import("vue").Ref<string, string>;
-    hovering: import("vue").Ref<string | undefined, string | undefined>;
-    selectedNode: import("vue").ComputedRef<Node>;
-    selectedNodes: import("vue").ComputedRef<Node[]>;
-    selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-    addNode: (node: Node, pNode?: Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: import("vue").Ref<boolean, boolean>;
-    dragging: import("vue").Ref<Node | null, Node | null>;
-    plugins: {
-        helper: HelperPlugin;
-        widget: WidgetPlugin;
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
-    setSchema: (schema: IWidget["schema"]) => void;
-}, "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "isPreview" | "plugins">, Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
-    nodeMap: Map<string, Node>;
-    shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: import("vue").Ref<string, string>;
-    hovering: import("vue").Ref<string | undefined, string | undefined>;
-    selectedNode: import("vue").ComputedRef<Node>;
-    selectedNodes: import("vue").ComputedRef<Node[]>;
-    selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-    addNode: (node: Node, pNode?: Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: import("vue").Ref<boolean, boolean>;
-    dragging: import("vue").Ref<Node | null, Node | null>;
-    plugins: {
-        helper: HelperPlugin;
-        widget: WidgetPlugin;
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
-    setSchema: (schema: IWidget["schema"]) => void;
-}, "selectedNode" | "selectedNodes" | "selectedNodeOperates">, Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
-    nodeMap: Map<string, Node>;
-    shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
-    elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
-    selectNode: (wid?: string) => void;
-    selected: import("vue").Ref<string, string>;
-    hovering: import("vue").Ref<string | undefined, string | undefined>;
-    selectedNode: import("vue").ComputedRef<Node>;
-    selectedNodes: import("vue").ComputedRef<Node[]>;
-    selectedNodeOperates: import("vue").ComputedRef<HelperAction[]>;
-    addNode: (node: Node, pNode?: Node, manual?: boolean) => void;
-    delNode: (wid: string) => void;
-    isPreview: import("vue").Ref<boolean, boolean>;
-    dragging: import("vue").Ref<Node | null, Node | null>;
-    plugins: {
-        helper: HelperPlugin;
-        widget: WidgetPlugin;
-    };
-    getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
-    setSchema: (schema: IWidget["schema"]) => void;
-}, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
-export {};

package/dist/store/index.d.ts

@@ -1,2 +0,0 @@
-export * from './app';
-export * from './editor';

package/dist/utils.d.ts

@@ -1,14 +0,0 @@
-import type { AppContext, CSSProperties, VNode } from 'vue';
-import debug from 'debug';
-export declare function loadFromRemote(scope: string, module: string): new () => import("vue").ComponentPublicInstance;
-type RemovePopperFn = (() => void) & {
-    trigger?: HTMLElement;
-    vm?: VNode;
-};
-export declare let removePopper: RemovePopperFn | null;
-export declare function createPopper(ctx: AppContext, trigger: HTMLElement, content: string, parent?: HTMLElement): void;
-type Style = Partial<Record<keyof CSSProperties, string | number>>;
-export declare function format(style: Style, excludes?: string[]): Partial<CSSProperties>;
-export declare function normalizeStyle(customStyle: Record<string, any>, mode?: 'grid' | 'free'): Partial<CSSProperties>;
-export declare function createDebug(namespace: string): debug.Debugger;
-export {};