diygw-designer 1.1.9 → 1.2.0

package/dist/core/src/components/builder/hooks/useBuilder.d.ts

@@ -44,6 +44,8 @@ export declare function useBuilder(): {
                 field?: string | undefined;
                 id?: string | undefined;
                 input?: boolean | undefined;
+                isHideToolbar?: boolean | undefined;
+                isNotLayout?: boolean | undefined;
                 label?: string | undefined;
                 noFormItem?: boolean | undefined;
                 on?: {

package/dist/core/src/components/builder/src/builder.vue.d.ts

@@ -51,6 +51,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 field?: string | undefined;
                 id?: string | undefined;
                 input?: boolean | undefined;
+                isHideToolbar?: boolean | undefined;
+                isNotLayout?: boolean | undefined;
                 label?: string | undefined;
                 noFormItem?: boolean | undefined;
                 on?: {
@@ -140,6 +142,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 field?: string | undefined;
                 id?: string | undefined;
                 input?: boolean | undefined;
+                isHideToolbar?: boolean | undefined;
+                isNotLayout?: boolean | undefined;
                 label?: string | undefined;
                 noFormItem?: boolean | undefined;
                 on?: {
@@ -223,6 +227,8 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
                 field?: string | undefined;
                 id?: string | undefined;
                 input?: boolean | undefined;
+                isHideToolbar?: boolean | undefined;
+                isNotLayout?: boolean | undefined;
                 label?: string | undefined;
                 noFormItem?: boolean | undefined;
                 on?: {

package/dist/core/src/components/designer/hooks/useDesigner.d.ts

@@ -42,6 +42,8 @@ export declare function useDesigner(props: any, emit: any): {
                 field?: string | undefined;
                 id?: string | undefined;
                 input?: boolean | undefined;
+                isHideToolbar?: boolean | undefined;
+                isNotLayout?: boolean | undefined;
                 label?: string | undefined;
                 noFormItem?: boolean | undefined;
                 on?: {
@@ -93,6 +95,8 @@ export declare function useDesigner(props: any, emit: any): {
             field?: string | undefined;
             id?: string | undefined;
             input?: boolean | undefined;
+            isHideToolbar?: boolean | undefined;
+            isNotLayout?: boolean | undefined;
             label?: string | undefined;
             noFormItem?: boolean | undefined;
             on?: {
@@ -189,6 +193,8 @@ export declare function useDesigner(props: any, emit: any): {
             field?: string | undefined;
             id?: string | undefined;
             input?: boolean | undefined;
+            isHideToolbar?: boolean | undefined;
+            isNotLayout?: boolean | undefined;
             label?: string | undefined;
             noFormItem?: boolean | undefined;
             on?: {
@@ -225,6 +231,8 @@ export declare function useDesigner(props: any, emit: any): {
             field?: string | undefined;
             id?: string | undefined;
             input?: boolean | undefined;
+            isHideToolbar?: boolean | undefined;
+            isNotLayout?: boolean | undefined;
             label?: string | undefined;
             noFormItem?: boolean | undefined;
             on?: {
@@ -261,6 +269,8 @@ export declare function useDesigner(props: any, emit: any): {
             field?: string | undefined;
             id?: string | undefined;
             input?: boolean | undefined;
+            isHideToolbar?: boolean | undefined;
+            isNotLayout?: boolean | undefined;
             label?: string | undefined;
             noFormItem?: boolean | undefined;
             on?: {

package/dist/core/src/components/designer/src/designer.vue.d.ts

@@ -87,6 +87,8 @@ declare function __VLS_template(): {
                             field?: string | undefined;
                             id?: string | undefined;
                             input?: boolean | undefined;
+                            isHideToolbar?: boolean | undefined;
+                            isNotLayout?: boolean | undefined;
                             label?: string | undefined;
                             noFormItem?: boolean | undefined;
                             on?: {
@@ -168,6 +170,8 @@ declare function __VLS_template(): {
                             field?: string | undefined;
                             id?: string | undefined;
                             input?: boolean | undefined;
+                            isHideToolbar?: boolean | undefined;
+                            isNotLayout?: boolean | undefined;
                             label?: string | undefined;
                             noFormItem?: boolean | undefined;
                             on?: {
@@ -257,6 +261,8 @@ declare function __VLS_template(): {
                             field?: string | undefined;
                             id?: string | undefined;
                             input?: boolean | undefined;
+                            isHideToolbar?: boolean | undefined;
+                            isNotLayout?: boolean | undefined;
                             label?: string | undefined;
                             noFormItem?: boolean | undefined;
                             on?: {
@@ -352,6 +358,8 @@ declare function __VLS_template(): {
                             field?: string | undefined;
                             id?: string | undefined;
                             input?: boolean | undefined;
+                            isHideToolbar?: boolean | undefined;
+                            isNotLayout?: boolean | undefined;
                             label?: string | undefined;
                             noFormItem?: boolean | undefined;
                             on?: {
@@ -433,6 +441,8 @@ declare function __VLS_template(): {
                             field?: string | undefined;
                             id?: string | undefined;
                             input?: boolean | undefined;
+                            isHideToolbar?: boolean | undefined;
+                            isNotLayout?: boolean | undefined;
                             label?: string | undefined;
                             noFormItem?: boolean | undefined;
                             on?: {
@@ -579,9 +589,9 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
     onToggleDeviceMode?: ((...args: any[]) => any) | undefined;
 }>, {
     title: string;
-    disabledZoom: boolean;
     showHiddenItems: boolean;
     draggable: boolean;
+    disabledZoom: boolean;
     canvasMode: "desktop" | "mobile" | "tablet";
     formMode: boolean;
     hiddenHeader: boolean;
@@ -647,6 +657,8 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
                         field?: string | undefined;
                         id?: string | undefined;
                         input?: boolean | undefined;
+                        isHideToolbar?: boolean | undefined;
+                        isNotLayout?: boolean | undefined;
                         label?: string | undefined;
                         noFormItem?: boolean | undefined;
                         on?: {
@@ -728,6 +740,8 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
                         field?: string | undefined;
                         id?: string | undefined;
                         input?: boolean | undefined;
+                        isHideToolbar?: boolean | undefined;
+                        isNotLayout?: boolean | undefined;
                         label?: string | undefined;
                         noFormItem?: boolean | undefined;
                         on?: {
@@ -817,6 +831,8 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
                         field?: string | undefined;
                         id?: string | undefined;
                         input?: boolean | undefined;
+                        isHideToolbar?: boolean | undefined;
+                        isNotLayout?: boolean | undefined;
                         label?: string | undefined;
                         noFormItem?: boolean | undefined;
                         on?: {
@@ -912,6 +928,8 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
                         field?: string | undefined;
                         id?: string | undefined;
                         input?: boolean | undefined;
+                        isHideToolbar?: boolean | undefined;
+                        isNotLayout?: boolean | undefined;
                         label?: string | undefined;
                         noFormItem?: boolean | undefined;
                         on?: {
@@ -993,6 +1011,8 @@ declare const __VLS_component: import('vue').DefineComponent<DesignerProps, {
                         field?: string | undefined;
                         id?: string | undefined;
                         input?: boolean | undefined;
+                        isHideToolbar?: boolean | undefined;
+                        isNotLayout?: boolean | undefined;
                         label?: string | undefined;
                         noFormItem?: boolean | undefined;
                         on?: {

package/dist/core/src/components/designer/src/modules/editContainer/nodeItem.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue");;/* empty css                                                   */;/* empty css                                                               */;/* empty css                                                                    */const _=require("../../../../../../../ui-kit/base-ui/src/node/node.vue.cjs");;/* empty css                                                             */require("jsep");require("@vueuse/core");require("../../../../../../../hooks/src/store/index.cjs");const y=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),f=require("../../../../../../../hooks/src/designer/useNodeAttrs.cjs"),d=require("../../../../../../../manager/src/pluginManager.cjs");require("vue-draggable-plus");const q=require("./nodes.vue.cjs"),k=e.defineComponent({name:"EpicNodeItem",__name:"nodeItem",props:{draggable:{type:Boolean,default:!0},schema:{}},setup(m){const n=m,u=e.useAttrs(),{pageSchema:l,props:p}=y.useDesignerContext();e.provide(f.NODE_ATTRS_KEY,u);const h=e.computed(()=>!n.schema.children);function g(){var t,s,r;const a=n.schema;return!n.draggable||a.id===((t=l.schemas[0])==null?void 0:t.id)||(r=(s=d.pluginManager.component.getConfigByType(a.type))==null?void 0:s.editConstraints)!=null&&r.immovable?"node-drag-disabled":"node-drag-enabled"}return(a,t)=>{var r,c,i;const s=e.resolveComponent("EpicNodeItem");return e.openBlock(),e.createBlock(e.unref(_),{"component-schema":n.schema,"data-diygw-id":n.schema.id,class:e.normalizeClass(["edit-draggable-widget",[g(),h.value?"diygw-node-leaf":""]]),"show-hidden-items":(r=e.unref(p))==null?void 0:r.showHiddenItems},e.createSlots({_:2},[(i=(c=e.unref(d.pluginManager).component.getConfigByType(n.schema.type))==null?void 0:c.editConstraints)!=null&&i.childImmovable?{name:"edit-node",fn:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.schema.children,o=>(e.openBlock(),e.createBlock(s,{key:o.id,schema:o,draggable:!1},null,8,["schema"]))),128))]),key:"0"}:{name:"edit-node",fn:e.withCtx(()=>[n.schema.children?(e.openBlock(),e.createBlock(q,{schemas:n.schema.children,"onUpdate:schemas":t[0]||(t[0]=o=>n.schema.children=o),key:n.schema.children.length},null,8,["schemas"])):e.createCommentVNode("",!0)]),key:"1"}]),1032,["component-schema","data-diygw-id","show-hidden-items","class"])}}});module.exports=k;
+"use strict";const e=require("vue");;/* empty css                                                   */;/* empty css                                                               */;/* empty css                                                                    */const y=require("../../../../../../../ui-kit/base-ui/src/node/node.vue.cjs");;/* empty css                                                             */require("jsep");require("@vueuse/core");require("../../../../../../../hooks/src/store/index.cjs");const _=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),C=require("../../../../../../../hooks/src/designer/useNodeAttrs.cjs"),l=require("../../../../../../../manager/src/pluginManager.cjs");require("vue-draggable-plus");const q=require("./nodes.vue.cjs"),k=e.defineComponent({name:"EpicNodeItem",__name:"nodeItem",props:{draggable:{type:Boolean,default:!0},schema:{}},setup(d){const r=d,m=e.useAttrs(),{pageSchema:u,props:p}=_.useDesignerContext();e.provide(C.NODE_ATTRS_KEY,m);const g=e.computed(()=>!r.schema.children);function h(){var n,o,s;const t=r.schema;return!r.draggable||t.id===((n=u.schemas[0])==null?void 0:n.id)||(s=(o=l.pluginManager.component.getConfigByType(t.type))==null?void 0:o.editConstraints)!=null&&s.immovable?"node-drag-disabled":"node-drag-enabled"}const f=e.computed(()=>{const t=r.schema.props||{},n={};return t.direction&&(n.flexDirection=t.direction),t.wrap&&(n.flexWrap=t.wrap),t.justifyContent&&(n.justifyContent=t.justifyContent),t.alignItems&&(n.alignItems=t.alignItems),t.gap&&(n.gap=t.gap),Object.keys(n).length>0&&(n.display="flex"),n});return(t,n)=>{var s,a,c;const o=e.resolveComponent("EpicNodeItem");return e.openBlock(),e.createBlock(e.unref(y),{"component-schema":r.schema,"data-diygw-id":r.schema.id,class:e.normalizeClass(["edit-draggable-widget",[h(),g.value?"diygw-node-leaf":""]]),"show-hidden-items":(s=e.unref(p))==null?void 0:s.showHiddenItems},e.createSlots({_:2},[(c=(a=e.unref(l.pluginManager).component.getConfigByType(r.schema.type))==null?void 0:a.editConstraints)!=null&&c.childImmovable?{name:"edit-node",fn:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.schema.children,i=>(e.openBlock(),e.createBlock(o,{key:i.id,schema:i,draggable:!1},null,8,["schema"]))),128))]),key:"0"}:{name:"edit-node",fn:e.withCtx(()=>[r.schema.children?(e.openBlock(),e.createBlock(q,{schemas:r.schema.children,"onUpdate:schemas":n[0]||(n[0]=i=>r.schema.children=i),key:r.schema.children.length,style:e.normalizeStyle(f.value)},null,8,["schemas","style"])):e.createCommentVNode("",!0)]),key:"1"}]),1032,["component-schema","data-diygw-id","show-hidden-items","class"])}}});module.exports=k;

package/dist/core/src/components/designer/src/modules/editContainer/nodeItem.vue.js

@@ -1,18 +1,18 @@
-import { defineComponent as C, useAttrs as b, provide as w, computed as k, resolveComponent as B, createBlock as s, openBlock as a, unref as i, normalizeClass as E, createSlots as I, withCtx as p, createElementBlock as N, Fragment as v, renderList as x, createCommentVNode as T } from "vue";
+import { defineComponent as w, useAttrs as x, provide as I, computed as l, resolveComponent as k, createBlock as r, openBlock as a, unref as m, normalizeClass as v, createSlots as B, withCtx as p, createElementBlock as E, Fragment as N, renderList as S, createCommentVNode as j, normalizeStyle as D } from "vue";
 /* empty css                                                 */
 /* empty css                                                             */
 /* empty css                                                                  */
-import D from "../../../../../../../ui-kit/base-ui/src/node/node.vue.js";
+import T from "../../../../../../../ui-kit/base-ui/src/node/node.vue.js";
 /* empty css                                                           */
 import "jsep";
 import "@vueuse/core";
 import "../../../../../../../hooks/src/store/index.js";
-import { useDesignerContext as S } from "../../../../../../../hooks/src/designer/useDesignerContext.js";
+import { useDesignerContext as z } from "../../../../../../../hooks/src/designer/useDesignerContext.js";
 import { NODE_ATTRS_KEY as A } from "../../../../../../../hooks/src/designer/useNodeAttrs.js";
-import { pluginManager as l } from "../../../../../../../manager/src/pluginManager.js";
+import { pluginManager as f } from "../../../../../../../manager/src/pluginManager.js";
 import "vue-draggable-plus";
 import L from "./nodes.vue.js";
-const G = /* @__PURE__ */ C({
+const J = /* @__PURE__ */ w({
   name: "EpicNodeItem",
   __name: "nodeItem",
   props: {
@@ -20,29 +20,33 @@ const G = /* @__PURE__ */ C({
     schema: {}
   },
   setup(h) {
-    const e = h, g = b(), { pageSchema: f, props: u } = S();
-    w(A, g);
-    const y = k(() => !e.schema.children);
+    const n = h, g = x(), { pageSchema: u, props: y } = z();
+    I(A, g);
+    const C = l(() => !n.schema.children);
     function _() {
-      var t, n, o;
-      const r = e.schema;
-      return !e.draggable || r.id === ((t = f.schemas[0]) == null ? void 0 : t.id) || (o = (n = l.component.getConfigByType(r.type)) == null ? void 0 : n.editConstraints) != null && o.immovable ? "node-drag-disabled" : "node-drag-enabled";
+      var t, i, o;
+      const e = n.schema;
+      return !n.draggable || e.id === ((t = u.schemas[0]) == null ? void 0 : t.id) || (o = (i = f.component.getConfigByType(e.type)) == null ? void 0 : i.editConstraints) != null && o.immovable ? "node-drag-disabled" : "node-drag-enabled";
     }
-    return (r, t) => {
-      var o, d, c;
-      const n = B("EpicNodeItem");
-      return a(), s(i(D), {
-        "component-schema": e.schema,
-        "data-diygw-id": e.schema.id,
-        class: E(["edit-draggable-widget", [_(), y.value ? "diygw-node-leaf" : ""]]),
-        "show-hidden-items": (o = i(u)) == null ? void 0 : o.showHiddenItems
-      }, I({ _: 2 }, [
-        (c = (d = i(l).component.getConfigByType(e.schema.type)) == null ? void 0 : d.editConstraints) != null && c.childImmovable ? {
+    const b = l(() => {
+      const e = n.schema.props || {}, t = {};
+      return e.direction && (t.flexDirection = e.direction), e.wrap && (t.flexWrap = e.wrap), e.justifyContent && (t.justifyContent = e.justifyContent), e.alignItems && (t.alignItems = e.alignItems), e.gap && (t.gap = e.gap), Object.keys(t).length > 0 && (t.display = "flex"), t;
+    });
+    return (e, t) => {
+      var o, c, d;
+      const i = k("EpicNodeItem");
+      return a(), r(m(T), {
+        "component-schema": n.schema,
+        "data-diygw-id": n.schema.id,
+        class: v(["edit-draggable-widget", [_(), C.value ? "diygw-node-leaf" : ""]]),
+        "show-hidden-items": (o = m(y)) == null ? void 0 : o.showHiddenItems
+      }, B({ _: 2 }, [
+        (d = (c = m(f).component.getConfigByType(n.schema.type)) == null ? void 0 : c.editConstraints) != null && d.childImmovable ? {
           name: "edit-node",
           fn: p(() => [
-            (a(!0), N(v, null, x(e.schema.children, (m) => (a(), s(n, {
-              key: m.id,
-              schema: m,
+            (a(!0), E(N, null, S(n.schema.children, (s) => (a(), r(i, {
+              key: s.id,
+              schema: s,
               draggable: !1
             }, null, 8, ["schema"]))), 128))
           ]),
@@ -50,11 +54,12 @@ const G = /* @__PURE__ */ C({
         } : {
           name: "edit-node",
           fn: p(() => [
-            e.schema.children ? (a(), s(L, {
-              schemas: e.schema.children,
-              "onUpdate:schemas": t[0] || (t[0] = (m) => e.schema.children = m),
-              key: e.schema.children.length
-            }, null, 8, ["schemas"])) : T("", !0)
+            n.schema.children ? (a(), r(L, {
+              schemas: n.schema.children,
+              "onUpdate:schemas": t[0] || (t[0] = (s) => n.schema.children = s),
+              key: n.schema.children.length,
+              style: D(b.value)
+            }, null, 8, ["schemas", "style"])) : j("", !0)
           ]),
           key: "1"
         }
@@ -63,5 +68,5 @@ const G = /* @__PURE__ */ C({
   }
 });
 export {
-  G as default
+  J as default
 };

package/dist/core/src/components/designer/src/modules/editContainer/nodes.vue.cjs

@@ -1 +1 @@
-"use strict";const o=require("vue"),I=require("vue-draggable-plus");;/* empty css                                                   */;/* empty css                                                               */;/* empty css                                                                    */require("../../../../../../../manager/src/pluginManager.cjs");;/* empty css                                                             */require("jsep");require("@vueuse/core");require("../../../../../../../hooks/src/store/index.cjs");const D=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),C=require("../../../../../../../hooks/src/designer/usePageManager.cjs"),B=require("./nodeItem.vue.cjs"),N=o.defineComponent({name:"EditNodeItem",__name:"nodes",props:{schemas:{}},emits:["update:schemas"],setup(m,{emit:f}){const h=m,y=f,s=D.useDesignerContext(),d=s.revoke,q=C.usePageManager(),i=o.computed({get:()=>h.schemas,set:e=>y("update:schemas",e)}),a=o.ref(!1);function c(e){var n,g,p;if(!(e!=null&&e.closest))return null;if((n=e.dataset)!=null&&n.diygwId)return u(e.dataset.diygwId);if(!e.classList.contains("diygw-draggable-range")){const r=e.querySelector(":scope > [data-diygw-id]");if((g=r==null?void 0:r.dataset)!=null&&g.diygwId)return u(r.dataset.diygwId)}const t=e.closest("[data-diygw-id]");return(p=t==null?void 0:t.dataset)!=null&&p.diygwId?u(t.dataset.diygwId):null}function u(e){var n;const t=q.findInstance(e);return((n=t==null?void 0:t.exposed)==null?void 0:n.schema)||null}function l(e){const t=c(e.item??e.target);e.stopPropagation(),s.setSelectedNode(t)}function v(e){const t=c(e.target);e.stopPropagation(),s.setHoverNode(t)}function w(e){s.setSelectedNode(e.clonedData),d.push("插入组件",!0),a.value=!1}function _(){a.value=!0}function k(){a.value&&d.push("拖拽组件",!0),a.value=!1}return(e,t)=>(o.openBlock(),o.createBlock(o.unref(I.VueDraggable),{modelValue:i.value,"onUpdate:modelValue":t[0]||(t[0]=n=>i.value=n),"item-key":"id","component-data":{type:"transition-group"},class:"diygw-draggable-range",animation:200,group:"edit-draggable","ghost-class":"diygw-moveing",onMouseover:o.withModifiers(v,["stop"]),onChange:_,onAdd:w,onEnd:k,onClick:o.withModifiers(l,["stop"]),onChoose:l},{default:o.withCtx(()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.value,n=>(o.openBlock(),o.createBlock(B,{key:n.id,schema:n},null,8,["schema"]))),128))]),_:1},8,["modelValue"]))}});module.exports=N;
+"use strict";const t=require("vue"),I=require("vue-draggable-plus");;/* empty css                                                   */;/* empty css                                                               */;/* empty css                                                                    */require("../../../../../../../manager/src/pluginManager.cjs");;/* empty css                                                             */require("jsep");require("@vueuse/core");require("../../../../../../../hooks/src/store/index.cjs");const D=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),C=require("../../../../../../../hooks/src/designer/usePageManager.cjs"),S=require("./nodeItem.vue.cjs"),B=t.defineComponent({name:"EditNodeItem",__name:"nodes",props:{schemas:{},style:{}},emits:["update:schemas"],setup(f,{emit:h}){const d=f,y=h,n=D.useDesignerContext(),c=n.revoke,q=C.usePageManager(),i=t.computed({get:()=>d.schemas,set:e=>y("update:schemas",e)}),a=t.ref(!1);function l(e){var o,m,p;if(!(e!=null&&e.closest))return null;if((o=e.dataset)!=null&&o.diygwId)return u(e.dataset.diygwId);if(!e.classList.contains("diygw-draggable-range")){const r=e.querySelector(":scope > [data-diygw-id]");if((m=r==null?void 0:r.dataset)!=null&&m.diygwId)return u(r.dataset.diygwId)}const s=e.closest("[data-diygw-id]");return(p=s==null?void 0:s.dataset)!=null&&p.diygwId?u(s.dataset.diygwId):null}function u(e){var o;const s=q.findInstance(e);return((o=s==null?void 0:s.exposed)==null?void 0:o.schema)||null}function g(e){const s=l(e.item??e.target);e.stopPropagation(),n.setSelectedNode(s)}function v(e){const s=l(e.target);e.stopPropagation(),n.setHoverNode(s)}function w(e){n.setSelectedNode(e.clonedData),c.push("插入组件",!0),a.value=!1}function _(){a.value=!0}function k(){a.value&&c.push("拖拽组件",!0),a.value=!1}return(e,s)=>(t.openBlock(),t.createBlock(t.unref(I.VueDraggable),{modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=o=>i.value=o),"item-key":"id","component-data":{type:"transition-group"},class:"diygw-draggable-range",animation:200,style:t.normalizeStyle(d.style),group:"edit-draggable","ghost-class":"diygw-moveing",onMouseover:t.withModifiers(v,["stop"]),onChange:_,onAdd:w,onEnd:k,onClick:t.withModifiers(g,["stop"]),onChoose:g},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(i.value,o=>(t.openBlock(),t.createBlock(S,{key:o.id,schema:o},null,8,["schema"]))),128))]),_:1},8,["modelValue","style"]))}});module.exports=B;

package/dist/core/src/components/designer/src/modules/editContainer/nodes.vue.d.ts

@@ -1,6 +1,7 @@
 import { ComponentSchema } from '../../../../../../../types/src/index';
 type __VLS_Props = {
     schemas: ComponentSchema[];
+    style?: Record<string, string>;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:schemas": (...args: any[]) => void;

package/dist/core/src/components/designer/src/modules/editContainer/nodes.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as S, computed as _, ref as x, createBlock as g, openBlock as r, unref as b, withModifiers as f, withCtx as B, createElementBlock as E, Fragment as M, renderList as V } from "vue";
-import { VueDraggable as P } from "vue-draggable-plus";
+import { defineComponent as N, computed as _, ref as x, createBlock as f, openBlock as r, unref as b, withModifiers as h, normalizeStyle as B, withCtx as E, createElementBlock as M, Fragment as V, renderList as P } from "vue";
+import { VueDraggable as A } from "vue-draggable-plus";
 /* empty css                                                 */
 /* empty css                                                             */
 /* empty css                                                                  */
@@ -8,84 +8,86 @@ import "../../../../../../../manager/src/pluginManager.js";
 import "jsep";
 import "@vueuse/core";
 import "../../../../../../../hooks/src/store/index.js";
-import { useDesignerContext as A } from "../../../../../../../hooks/src/designer/useDesignerContext.js";
-import { usePageManager as H } from "../../../../../../../hooks/src/designer/usePageManager.js";
-import L from "./nodeItem.vue.js";
-const W = /* @__PURE__ */ S({
+import { useDesignerContext as H } from "../../../../../../../hooks/src/designer/useDesignerContext.js";
+import { usePageManager as L } from "../../../../../../../hooks/src/designer/usePageManager.js";
+import q from "./nodeItem.vue.js";
+const X = /* @__PURE__ */ N({
   name: "EditNodeItem",
   __name: "nodes",
   props: {
-    schemas: {}
+    schemas: {},
+    style: {}
   },
   emits: ["update:schemas"],
-  setup(h, { emit: y }) {
-    const w = h, v = y, a = A(), c = a.revoke, I = H(), d = _({
-      get: () => w.schemas,
+  setup(y, { emit: w }) {
+    const l = y, v = w, a = H(), c = a.revoke, I = L(), d = _({
+      get: () => l.schemas,
       set: (e) => v("update:schemas", e)
-    }), n = x(!1);
+    }), s = x(!1);
     function u(e) {
-      var t, l, p;
+      var o, p, g;
       if (!(e != null && e.closest)) return null;
-      if ((t = e.dataset) != null && t.diygwId)
+      if ((o = e.dataset) != null && o.diygwId)
         return i(e.dataset.diygwId);
       if (!e.classList.contains("diygw-draggable-range")) {
-        const s = e.querySelector(":scope > [data-diygw-id]");
-        if ((l = s == null ? void 0 : s.dataset) != null && l.diygwId)
-          return i(s.dataset.diygwId);
+        const n = e.querySelector(":scope > [data-diygw-id]");
+        if ((p = n == null ? void 0 : n.dataset) != null && p.diygwId)
+          return i(n.dataset.diygwId);
       }
-      const o = e.closest("[data-diygw-id]");
-      return (p = o == null ? void 0 : o.dataset) != null && p.diygwId ? i(o.dataset.diygwId) : null;
+      const t = e.closest("[data-diygw-id]");
+      return (g = t == null ? void 0 : t.dataset) != null && g.diygwId ? i(t.dataset.diygwId) : null;
     }
     function i(e) {
-      var t;
-      const o = I.findInstance(e);
-      return ((t = o == null ? void 0 : o.exposed) == null ? void 0 : t.schema) || null;
+      var o;
+      const t = I.findInstance(e);
+      return ((o = t == null ? void 0 : t.exposed) == null ? void 0 : o.schema) || null;
     }
     function m(e) {
-      const o = u(e.item ?? e.target);
-      e.stopPropagation(), a.setSelectedNode(o);
+      const t = u(e.item ?? e.target);
+      e.stopPropagation(), a.setSelectedNode(t);
     }
     function k(e) {
-      const o = u(e.target);
-      e.stopPropagation(), a.setHoverNode(o);
+      const t = u(e.target);
+      e.stopPropagation(), a.setHoverNode(t);
     }
-    function C(e) {
-      a.setSelectedNode(e.clonedData), c.push("插入组件", !0), n.value = !1;
+    function S(e) {
+      a.setSelectedNode(e.clonedData), c.push("插入组件", !0), s.value = !1;
     }
-    function D() {
-      n.value = !0;
+    function C() {
+      s.value = !0;
     }
-    function N() {
-      n.value && c.push("拖拽组件", !0), n.value = !1;
+    function D() {
+      s.value && c.push("拖拽组件", !0), s.value = !1;
     }
-    return (e, o) => (r(), g(b(P), {
+    return (e, t) => (r(), f(b(A), {
       modelValue: d.value,
-      "onUpdate:modelValue": o[0] || (o[0] = (t) => d.value = t),
+      "onUpdate:modelValue": t[0] || (t[0] = (o) => d.value = o),
       "item-key": "id",
       "component-data": {
         type: "transition-group"
       },
       class: "diygw-draggable-range",
       animation: 200,
+      style: B(l.style),
       group: "edit-draggable",
       "ghost-class": "diygw-moveing",
-      onMouseover: f(k, ["stop"]),
-      onChange: D,
-      onAdd: C,
-      onEnd: N,
-      onClick: f(m, ["stop"]),
+      onMouseover: h(k, ["stop"]),
+      onChange: C,
+      onAdd: S,
+      onEnd: D,
+      onClick: h(m, ["stop"]),
       onChoose: m
     }, {
-      default: B(() => [
-        (r(!0), E(M, null, V(d.value, (t) => (r(), g(L, {
-          key: t.id,
-          schema: t
+      default: E(() => [
+        (r(!0), M(V, null, P(d.value, (o) => (r(), f(q, {
+          key: o.id,
+          schema: o
         }, null, 8, ["schema"]))), 128))
       ]),
       _: 1
-    }, 8, ["modelValue"]));
+    }, 8, ["modelValue", "style"]));
   }
 });
 export {
-  W as default
+  X as default
 };

package/dist/core/src/components/designer/src/modules/editContainer/previewWidgets.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue");;/* empty css                                                   */const V=require("../../../../../../../ui-kit/base-ui/src/icon/icon.vue.cjs");;/* empty css                                                               */;/* empty css                                                                    */const ne=require("../../../../../../../utils/src/common/data.cjs");require("jsep");const oe=require("../../../../../../../hooks/src/common/element.cjs"),$=require("@vueuse/core"),re=require("../../../../../../../hooks/src/store/index.cjs"),le=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),se=require("../../../../../../../hooks/src/designer/usePageManager.cjs"),M=require("../../../../../../../manager/src/pluginManager.cjs");;/* empty css                                                             */require("vue-draggable-plus");const ie={class:"diygw-widget-action-item whitespace-nowrap"},ce={key:0,class:"flex items-center"},ae=e.defineComponent({__name:"previewWidgets",setup(ue,{expose:I}){const y=se.usePageManager(),l=le.useDesignerContext(),z=l.props,S=l.pageSchema,g=e.ref(null),m=e.ref(null),f=e.ref(null),C=e.ref(!1),B=e.ref(!0),w=e.ref("top"),{canvasScale:_,disabledZoom:R}=re.useStore();let o=null;const P=e.computed(()=>{const t=l.state.selectedNode;return!(!(t!=null&&t.id)||z.lockDefaultSchemaEdit&&y.defaultComponentIds.value.includes(t==null?void 0:t.id))}),L=t=>{var u,c;const n=t.id;if((u=t.props)!=null&&u.hidden)return null;const i=M.pluginManager.component.getConfigByType(t.type)??null;if(!n||!y.findInstance(n))return null;if(i!=null&&i.defaultSchema.input&&(t==null?void 0:t.noFormItem)!==!0)return(c=y.findInstance(`${n}_formItem`))==null?void 0:c.vnode.el;const r=y.findInstance(n),a=r==null?void 0:r.vnode.el;return!a||!a.getBoundingClientRect?null:a},x=e.computed(()=>l.state.selectedNode?L(l.state.selectedNode):null),T=e.computed(()=>!l.state.hoverNode||l.state.hoverNode.id===S.schemas[0].id?null:L(l.state.hoverNode)),{mutationObserver:H,observerConfig:Q}=D(b),{startTimedQuery:W,stopTimedQuery:F}=oe.useTimedQuery(b);e.watch(()=>x.value,t=>{if(t){C.value=!0,H.observe(t,Q);const n=t.parentNode;n&&(n.addEventListener("dragstart",()=>{B.value=!1,W()}),n.addEventListener("dragend",()=>{B.value=!0,F()})),b()}else C.value=!1});const{mutationObserver:X,observerConfig:Y}=D(q);e.watch(()=>T.value,t=>{t&&(X.observe(t,Y),q())});let O=0,k=0;function b(){var N;const t=x.value;if(!t||!o)return;const{left:n,top:i}=o.getBoundingClientRect();let r=(N=t.getBoundingClientRect)==null?void 0:N.call(t);!r&&t.nextElementSibling&&(r=t.nextElementSibling.getBoundingClientRect());const{height:a,left:u,top:c,width:d}=r,s=R.value?1:_.value,v=c-i+((o==null?void 0:o.scrollTop)??0)*s,h=u-n+((o==null?void 0:o.scrollLeft)??0)*s,p=a/s;g.value&&(g.value.style.width=`${d/s}px`,g.value.style.height=`${p}px`,g.value.style.top=`${v/s}px`,g.value.style.left=`${h/s}px`,A(v,h)),f.value&&(v<45&&p<800?(f.value.style.top="",f.value.style.bottom="-32px",f.value.style["border-radius"]="4px",w.value="bottom"):v<45?(f.value.style.top="0px",f.value.style["border-radius"]="0px 0px 4px 0",w.value="center"):(f.value.style.top="-32px",f.value.style["border-radius"]="4px",w.value="top"))}function A(t,n){var E;if(S.schemas[0].id===((E=l.state.selectedNode)==null?void 0:E.id))return;const i=x.value;if(!o||!i)return;const r=o.getBoundingClientRect(),{height:a,width:u}=i.getBoundingClientRect(),c=R.value?1:_.value,d=t/c-r.top;let s=n/c-r.left+u/c;s<r.width&&(s=0);const v=t+a,h=n+u;if(Math.abs(d-O)<10&&Math.abs(s-k)<10)return;O=d,k=s;const p=o.scrollTop,N=o.scrollTop+r.height,G=o.scrollLeft,J=o.scrollLeft+r.width,K=t/c,U=v/c,ee=n/c,te=h/c;U>p&&K<N&&te>G&&ee<J||(o.scrollTop=d,o.scrollLeft=s)}function q(){var p;const t=T.value;if(!t||!o)return;const{left:n,top:i}=o.getBoundingClientRect();let r=(p=t.getBoundingClientRect)==null?void 0:p.call(t);!r&&t.nextElementSibling&&(r=t.nextElementSibling.getBoundingClientRect());const{height:a,left:u,top:c,width:d}=r,s=R.value?1:_.value,v=c-i+(o.scrollTop??0)*s,h=u-n+(o.scrollLeft??0)*s;m.value&&(m.value.style.width=`${d/s}px`,m.value.style.height=`${a/s}px`,m.value.style.top=`${v/s}px`,m.value.style.left=`${h/s}px`)}function D(t){const n=window.MutationObserver,i={attributes:!0,childList:!0,subtree:!0};return{mutationObserver:new n(t),observerConfig:i}}function Z(){var i;const t=ne.findSchemaInfoById(S.schemas,((i=l.state.selectedNode)==null?void 0:i.id)??"root");if(!t)return!1;const{parentSchema:n}=t;l.setSelectedNode(n)}function j(t){o=t,o==null||o.addEventListener("scroll",()=>{b()}),$.useResizeObserver(x,()=>{setTimeout(b,150)}),$.useResizeObserver(T,q)}return I({handleInit:j}),(t,n)=>{var i,r,a,u,c;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.withDirectives(e.createElementVNode("div",{ref_key:"selectorRef",ref:g,class:e.normalizeClass(["diygw-selected-widget z-999 pointer-events-none absolute",`${w.value} ${B.value?"transition-all":""}`])},[e.createElementVNode("div",{ref_key:"actionBoxRef",ref:f,class:"diygw-widget-action-box"},[e.createElementVNode("div",ie,e.toDisplayString((r=e.unref(M.pluginManager).component.getConfigByType(((i=e.unref(l).state.selectedNode)==null?void 0:i.type)??""))==null?void 0:r.defaultSchema.label),1),P.value?(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{title:"选择父节点",class:"diygw-widget-action-item pointer-events-auto",onClick:Z},[e.createVNode(e.unref(V),{name:"icon--diygw--upward"})]),e.createElementVNode("div",{title:"复制",class:"diygw-widget-action-item pointer-events-auto",onClick:n[0]||(n[0]=(...d)=>e.unref(l).handleDuplicate&&e.unref(l).handleDuplicate(...d))},[e.createVNode(e.unref(V),{name:"icon--diygw--copy-all-outline-rounded"})]),e.createElementVNode("div",{title:"删除",class:"diygw-widget-action-item pointer-events-auto",onClick:n[1]||(n[1]=(...d)=>e.unref(l).handleDelete&&e.unref(l).handleDelete(...d))},[e.createVNode(e.unref(V),{name:"icon--diygw--delete-outline-rounded"})])])):e.createCommentVNode("",!0)],512)],2),[[e.vShow,C.value&&((a=e.unref(l).state.selectedNode)==null?void 0:a.id)!=="root"]]),e.withDirectives(e.createElementVNode("div",{ref_key:"hoverWidgetRef",ref:m,class:"diygw-hover-widget z-998 pointer-events-none absolute"},null,512),[[e.vShow,e.unref(l).state.hoverNode&&((u=e.unref(l).state.selectedNode)==null?void 0:u.id)!==((c=e.unref(l).state.hoverNode)==null?void 0:c.id)]])],64)}}});module.exports=ae;
+"use strict";const e=require("vue");;/* empty css                                                   */const V=require("../../../../../../../ui-kit/base-ui/src/icon/icon.vue.cjs");;/* empty css                                                               */;/* empty css                                                                    */const ne=require("../../../../../../../utils/src/common/data.cjs");require("jsep");const oe=require("../../../../../../../hooks/src/common/element.cjs"),$=require("@vueuse/core"),re=require("../../../../../../../hooks/src/store/index.cjs"),le=require("../../../../../../../hooks/src/designer/useDesignerContext.cjs"),se=require("../../../../../../../hooks/src/designer/usePageManager.cjs"),M=require("../../../../../../../manager/src/pluginManager.cjs");;/* empty css                                                             */require("vue-draggable-plus");const ie={class:"diygw-widget-action-item whitespace-nowrap"},ce={key:0,class:"flex items-center"},ae=e.defineComponent({__name:"previewWidgets",setup(ue,{expose:I}){const y=se.usePageManager(),l=le.useDesignerContext(),z=l.props,S=l.pageSchema,g=e.ref(null),m=e.ref(null),f=e.ref(null),C=e.ref(!1),B=e.ref(!0),w=e.ref("top"),{canvasScale:_,disabledZoom:R}=re.useStore();let o=null;const P=e.computed(()=>{const t=l.state.selectedNode;return!(!(t!=null&&t.id)||z.lockDefaultSchemaEdit&&y.defaultComponentIds.value.includes(t==null?void 0:t.id))}),L=t=>{var u,c;const n=t.id;if((u=t.props)!=null&&u.hidden)return null;const i=M.pluginManager.component.getConfigByType(t.type)??null;if(!n||!y.findInstance(n))return null;if(i!=null&&i.defaultSchema.input&&(t==null?void 0:t.noFormItem)!==!0)return(c=y.findInstance(`${n}_formItem`))==null?void 0:c.vnode.el;const s=y.findInstance(n),a=s==null?void 0:s.vnode.el;return!a||!a.getBoundingClientRect?null:a},x=e.computed(()=>l.state.selectedNode?L(l.state.selectedNode):null),T=e.computed(()=>!l.state.hoverNode||l.state.hoverNode.id===S.schemas[0].id?null:L(l.state.hoverNode)),{mutationObserver:H,observerConfig:Q}=D(b),{startTimedQuery:W,stopTimedQuery:F}=oe.useTimedQuery(b);e.watch(()=>x.value,t=>{if(t){C.value=!0,H.observe(t,Q);const n=t.parentNode;n&&(n.addEventListener("dragstart",()=>{B.value=!1,W()}),n.addEventListener("dragend",()=>{B.value=!0,F()})),b()}else C.value=!1});const{mutationObserver:X,observerConfig:Y}=D(q);e.watch(()=>T.value,t=>{t&&(X.observe(t,Y),q())});let O=0,k=0;function b(){var N;const t=x.value;if(!t||!o)return;const{left:n,top:i}=o.getBoundingClientRect();let s=(N=t.getBoundingClientRect)==null?void 0:N.call(t);!s&&t.nextElementSibling&&(s=t.nextElementSibling.getBoundingClientRect());const{height:a,left:u,top:c,width:d}=s,r=R.value?1:_.value,v=c-i+((o==null?void 0:o.scrollTop)??0)*r,h=u-n+((o==null?void 0:o.scrollLeft)??0)*r,p=a/r;g.value&&(g.value.style.width=`${d/r}px`,g.value.style.height=`${p}px`,g.value.style.top=`${v/r}px`,g.value.style.left=`${h/r}px`,A(v,h)),f.value&&(v<45&&p<800?(f.value.style.top="",f.value.style.bottom="-32px",f.value.style["border-radius"]="4px",w.value="bottom"):v<45?(f.value.style.top="0px",f.value.style["border-radius"]="0px 0px 4px 0",w.value="center"):(f.value.style.top="-32px",f.value.style["border-radius"]="4px",w.value="top"))}function A(t,n){var E;if(S.schemas[0].id===((E=l.state.selectedNode)==null?void 0:E.id))return;const i=x.value;if(!o||!i)return;const s=o.getBoundingClientRect(),{height:a,width:u}=i.getBoundingClientRect(),c=R.value?1:_.value,d=t/c-s.top;let r=n/c-s.left+u/c;r<s.width&&(r=0);const v=t+a,h=n+u;if(Math.abs(d-O)<10&&Math.abs(r-k)<10)return;O=d,k=r;const p=o.scrollTop,N=o.scrollTop+s.height,G=o.scrollLeft,J=o.scrollLeft+s.width,K=t/c,U=v/c,ee=n/c,te=h/c;U>p&&K<N&&te>G&&ee<J||(o.scrollTop=d,o.scrollLeft=r)}function q(){var p;const t=T.value;if(!t||!o)return;const{left:n,top:i}=o.getBoundingClientRect();let s=(p=t.getBoundingClientRect)==null?void 0:p.call(t);!s&&t.nextElementSibling&&(s=t.nextElementSibling.getBoundingClientRect());const{height:a,left:u,top:c,width:d}=s,r=R.value?1:_.value,v=c-i+(o.scrollTop??0)*r,h=u-n+(o.scrollLeft??0)*r;m.value&&(m.value.style.width=`${d/r}px`,m.value.style.height=`${a/r}px`,m.value.style.top=`${v/r}px`,m.value.style.left=`${h/r}px`)}function D(t){const n=window.MutationObserver,i={attributes:!0,childList:!0,subtree:!0};return{mutationObserver:new n(t),observerConfig:i}}function Z(){var i;const t=ne.findSchemaInfoById(S.schemas,((i=l.state.selectedNode)==null?void 0:i.id)??"root");if(!t)return!1;const{parentSchema:n}=t;l.setSelectedNode(n)}function j(t){o=t,o==null||o.addEventListener("scroll",()=>{b()}),$.useResizeObserver(x,()=>{setTimeout(b,150)}),$.useResizeObserver(T,q)}return I({handleInit:j}),(t,n)=>{var i,s,a,u,c,d;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.withDirectives(e.createElementVNode("div",{ref_key:"selectorRef",ref:g,class:e.normalizeClass(["diygw-selected-widget z-999 pointer-events-none absolute",`${w.value} ${B.value?"transition-all":""}`])},[e.createElementVNode("div",{ref_key:"actionBoxRef",ref:f,class:"diygw-widget-action-box"},[e.createElementVNode("div",ie,e.toDisplayString((s=e.unref(M.pluginManager).component.getConfigByType(((i=e.unref(l).state.selectedNode)==null?void 0:i.type)??""))==null?void 0:s.defaultSchema.label),1),P.value?(e.openBlock(),e.createElementBlock("div",ce,[e.createElementVNode("div",{title:"选择父节点",class:"diygw-widget-action-item pointer-events-auto",onClick:Z},[e.createVNode(e.unref(V),{name:"icon--diygw--upward"})]),e.createElementVNode("div",{title:"复制",class:"diygw-widget-action-item pointer-events-auto",onClick:n[0]||(n[0]=(...r)=>e.unref(l).handleDuplicate&&e.unref(l).handleDuplicate(...r))},[e.createVNode(e.unref(V),{name:"icon--diygw--copy-all-outline-rounded"})]),e.createElementVNode("div",{title:"删除",class:"diygw-widget-action-item pointer-events-auto",onClick:n[1]||(n[1]=(...r)=>e.unref(l).handleDelete&&e.unref(l).handleDelete(...r))},[e.createVNode(e.unref(V),{name:"icon--diygw--delete-outline-rounded"})])])):e.createCommentVNode("",!0)],512)],2),[[e.vShow,C.value&&!((a=e.unref(l).state.selectedNode)!=null&&a.isHideToolbar)&&((u=e.unref(l).state.selectedNode)==null?void 0:u.id)!=="root"]]),e.withDirectives(e.createElementVNode("div",{ref_key:"hoverWidgetRef",ref:m,class:"diygw-hover-widget z-998 pointer-events-none absolute"},null,512),[[e.vShow,e.unref(l).state.hoverNode&&((c=e.unref(l).state.selectedNode)==null?void 0:c.id)!==((d=e.unref(l).state.hoverNode)==null?void 0:d.id)]])],64)}}});module.exports=ae;