@sepveneto/dnde 0.2.2 → 0.3.1

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

@@ -3,18 +3,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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: () => {};
@@ -26,26 +18,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         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,6 +1,6 @@
 import * as Vue from 'vue';
 declare const editor: import("pinia").Store<"editor", Pick<{
-    rootNode: Vue.Reactive<Vue.Raw<import("@sepveneto/dnde-core/class").Node>>;
+    rootNode: Vue.Ref<Vue.Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -23,12 +23,18 @@ declare const editor: import("pinia").Store<"editor", Pick<{
             list: import("./store").PanelInfo[];
             addPanel(panel: import("./store").PanelInfo): void;
         };
+        config: {
+            list: import("./store").ConfigPanel[];
+            readonly defaultPane: string;
+            addPanel(panel: import("./store").ConfigPanel): void;
+            validate(data: any): Promise<boolean | undefined>;
+        };
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+    setData: (data: any) => 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>>;
+    rootNode: Vue.Ref<Vue.Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -51,12 +57,18 @@ declare const editor: import("pinia").Store<"editor", Pick<{
             list: import("./store").PanelInfo[];
             addPanel(panel: import("./store").PanelInfo): void;
         };
+        config: {
+            list: import("./store").ConfigPanel[];
+            readonly defaultPane: string;
+            addPanel(panel: import("./store").ConfigPanel): void;
+            validate(data: any): Promise<boolean | undefined>;
+        };
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+    setData: (data: any) => 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>>;
+    rootNode: Vue.Ref<Vue.Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -79,9 +91,15 @@ declare const editor: import("pinia").Store<"editor", Pick<{
             list: import("./store").PanelInfo[];
             addPanel(panel: import("./store").PanelInfo): void;
         };
+        config: {
+            list: import("./store").ConfigPanel[];
+            readonly defaultPane: string;
+            addPanel(panel: import("./store").ConfigPanel): void;
+            validate(data: any): Promise<boolean | undefined>;
+        };
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+    setData: (data: any) => void;
     setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
 }, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
 declare const _default: Vue.DefineComponent<Vue.ExtractPropTypes<{
@@ -89,18 +107,10 @@ declare const _default: Vue.DefineComponent<Vue.ExtractPropTypes<{
         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: () => {};
@@ -111,32 +121,25 @@ declare const _default: Vue.DefineComponent<Vue.ExtractPropTypes<{
     }): void;
     validate(): Promise<void>;
     getData(): Record<string, any>;
-    setData(data: any[]): void;
+    setData(data: {
+        _view: "page";
+        list: 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/components/ConfigForm.vue.d.ts

@@ -1,7 +1,7 @@
 import type { SchemaItem } from '@sepveneto/dnde-core/class';
 type __VLS_Props = {
     list: SchemaItem[];
-    modelValue: Record<string, any>;
+    modelValue: Record<string, any> | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {
     validate: () => import("element-plus").FormValidationResult | undefined;

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

@@ -1,7 +1,7 @@
 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>>;
+        rootNode: import("vue").Ref<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -24,12 +24,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                 list: import("@/store").PanelInfo[];
                 addPanel(panel: import("@/store").PanelInfo): void;
             };
+            config: {
+                list: import("@/store").ConfigPanel[];
+                readonly defaultPane: string;
+                addPanel(panel: import("@/store").ConfigPanel): void;
+                validate(data: any): Promise<boolean | undefined>;
+            };
         };
         getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+        setData: (data: any) => 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>>;
+        rootNode: import("vue").Ref<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -52,12 +58,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                 list: import("@/store").PanelInfo[];
                 addPanel(panel: import("@/store").PanelInfo): void;
             };
+            config: {
+                list: import("@/store").ConfigPanel[];
+                readonly defaultPane: string;
+                addPanel(panel: import("@/store").ConfigPanel): void;
+                validate(data: any): Promise<boolean | undefined>;
+            };
         };
         getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+        setData: (data: any) => 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>>;
+        rootNode: import("vue").Ref<import("vue").Raw<import("@sepveneto/dnde-core/class").Node>, 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>;
@@ -80,9 +92,15 @@ declare const _default: import("vue").DefineComponent<{}, {
                 list: import("@/store").PanelInfo[];
                 addPanel(panel: import("@/store").PanelInfo): void;
             };
+            config: {
+                list: import("@/store").ConfigPanel[];
+                readonly defaultPane: string;
+                addPanel(panel: import("@/store").ConfigPanel): void;
+                validate(data: any): Promise<boolean | undefined>;
+            };
         };
         getData: () => Record<string, any>;
-        setData: (data: any[], parent?: import("@sepveneto/dnde-core/class").Node) => void;
+        setData: (data: any) => void;
         setSchema: (schema: import("@sepveneto/dnde-core").IWidget["schema"]) => void;
     }, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
     ctx: import("@sepveneto/dnde-core").EditorContext;

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    modelValue: string | number;
+    modelValue: string | number | undefined;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;

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/dist/main.d.ts

@@ -4,18 +4,10 @@ export declare const Editor: import("vue").VueElementConstructor<import("vue").E
         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: () => {};

package/dist/props.d.ts

@@ -1,4 +1,3 @@
-import type { EditorSchema, EditorSettings } from '@sepveneto/dnde-core';
 import type { PropType } from 'vue';
 import type { LikeWidget } from './store';
 export declare const editorProps: {
@@ -6,18 +5,10 @@ export declare const editorProps: {
         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/editor.d.ts

@@ -1,4 +1,5 @@
 import type { IWidget } from '@sepveneto/dnde-core';
+import type { SchemaItem } from '@sepveneto/dnde-core/class';
 import type { Raw } from 'vue';
 import type { HelperAction } from '@/type';
 import { Node } from '@sepveneto/dnde-core/class';
@@ -16,8 +17,20 @@ declare class WidgetPlugin {
     constructor(_ctx: any);
     addPanel(panel: PanelInfo): void;
 }
+export interface ConfigPanel {
+    label: string;
+    name: string;
+    attributes: SchemaItem[];
+}
+declare class ConfigPlugin {
+    list: ConfigPanel[];
+    constructor(_ctx?: any);
+    get defaultPane(): string;
+    addPanel(panel: ConfigPanel): void;
+    validate(data: any): Promise<boolean | undefined>;
+}
 export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
+    rootNode: import("vue").Ref<Raw<Node>, Raw<Node>>;
     nodeMap: Map<string, Node>;
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
@@ -34,12 +47,13 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     plugins: {
         helper: HelperPlugin;
         widget: WidgetPlugin;
+        config: ConfigPlugin;
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
+    setData: (data: any) => void;
     setSchema: (schema: IWidget["schema"]) => void;
 }, "hovering" | "dragging" | "rootNode" | "nodeMap" | "shadowRoot" | "elementRoot" | "selected" | "isPreview" | "plugins">, Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
+    rootNode: import("vue").Ref<Raw<Node>, Raw<Node>>;
     nodeMap: Map<string, Node>;
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
@@ -56,12 +70,13 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     plugins: {
         helper: HelperPlugin;
         widget: WidgetPlugin;
+        config: ConfigPlugin;
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
+    setData: (data: any) => void;
     setSchema: (schema: IWidget["schema"]) => void;
 }, "selectedNode" | "selectedNodes" | "selectedNodeOperates">, Pick<{
-    rootNode: import("vue").Reactive<Raw<Node>>;
+    rootNode: import("vue").Ref<Raw<Node>, Raw<Node>>;
     nodeMap: Map<string, Node>;
     shadowRoot: import("vue").ShallowRef<ShadowRoot | undefined, ShadowRoot | undefined>;
     elementRoot: import("vue").ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
@@ -78,9 +93,10 @@ export declare const useEditor: import("pinia").StoreDefinition<"editor", Pick<{
     plugins: {
         helper: HelperPlugin;
         widget: WidgetPlugin;
+        config: ConfigPlugin;
     };
     getData: () => Record<string, any>;
-    setData: (data: any[], parent?: Node) => void;
+    setData: (data: any) => void;
     setSchema: (schema: IWidget["schema"]) => void;
 }, "selectNode" | "addNode" | "delNode" | "getData" | "setData" | "setSchema">>;
 export {};

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.1",
   "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",
@@ -44,7 +46,7 @@
     "vue": "^3.5.15",
     "vue-router": "^4.5.1",
     "vuedraggable": "^4.1.0",
-    "@sepveneto/dnde-core": "0.2.0"
+    "@sepveneto/dnde-core": "0.3.0"
   },
   "devDependencies": {
     "@types/node": "^22.15.23",
@@ -60,7 +62,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && pnpm gen",
+    "build": "vite build && pnpm run gen",
     "gen": "vue-tsc -p tsconfig.build.json",
     "test": "echo \"Error: no test specified\" && exit 1"
   }