@sepveneto/free-dom 0.7.0-alpha.2 → 0.7.2

package/dist/index.js

@@ -27,11 +27,42 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/freeDomWrap.ts
-var import_vue_demi13 = require("vue-demi");
+var import_vue_demi14 = require("vue-demi");
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
 
+// src/util/render.ts
+var import_lodash = require("lodash");
+var import_vue_demi = require("vue-demi");
+function createRender(comp, attrs = {}, props = {}, listeners = {}) {
+  if (!comp)
+    return () => null;
+  const options = import_vue_demi.isVue2 ? {
+    ...attrs,
+    props,
+    on: listeners
+  } : {
+    ...attrs,
+    ...props
+  };
+  if (import_vue_demi.isVue2 && typeof comp === "object" && !("render" in comp)) {
+    (0, import_lodash.merge)(comp.data, options);
+    return comp;
+  }
+  return (slots) => {
+    if (import_vue_demi.isVue2) {
+      if (Object.prototype.toString.call(slots) === "[object Object]") {
+        return (0, import_vue_demi.h)(comp, { ...options, scopedSlots: slots });
+      } else {
+        return (0, import_vue_demi.h)(comp, options, Array.isArray(slots) ? slots : [slots]);
+      }
+    } else {
+      return (0, import_vue_demi.h)(comp, options, slots);
+    }
+  };
+}
+
 // src/util/index.ts
 var isProduction = process.env.NODE_ENV === "production";
 function clamp(value, min, max = Infinity) {
@@ -44,18 +75,18 @@ function log(...args) {
 }
 
 // src/components/markLine.ts
-var import_vue_demi = require("vue-demi");
+var import_vue_demi2 = require("vue-demi");
 var lineType = ["xt", "xc", "xb", "yl", "yc", "yr"];
-var markLine_default = (0, import_vue_demi.defineComponent)({
+var markLine_default = (0, import_vue_demi2.defineComponent)({
   props: {
     showLine: Boolean
   },
   setup() {
-    const SceneContext = (0, import_vue_demi.inject)(SceneToken);
-    const lines = (0, import_vue_demi.shallowRef)(lineType);
-    const diff = (0, import_vue_demi.ref)(SceneContext.diff);
+    const SceneContext = (0, import_vue_demi2.inject)(SceneToken);
+    const lines = (0, import_vue_demi2.shallowRef)(lineType);
+    const diff = (0, import_vue_demi2.ref)(SceneContext.diff);
     const nodes = SceneContext.nodes;
-    const lineStatus = (0, import_vue_demi.reactive)({
+    const lineStatus = (0, import_vue_demi2.reactive)({
       xt: {
         show: false,
         pos: 0
@@ -163,7 +194,7 @@ var markLine_default = (0, import_vue_demi.defineComponent)({
     };
     SceneContext?.on("move", runConstraints);
     SceneContext?.on("moveup", clearStatus);
-    (0, import_vue_demi.onBeforeUnmount)(() => {
+    (0, import_vue_demi2.onBeforeUnmount)(() => {
       SceneContext?.off("move");
       SceneContext?.off("moveup");
     });
@@ -199,28 +230,28 @@ var markLine_default = (0, import_vue_demi.defineComponent)({
     };
   },
   render() {
-    const _line = (line, info) => (0, import_vue_demi.h)("div", {
+    const _line = (line, info) => (0, import_vue_demi2.h)("div", {
       style: { [line.includes("x") ? "top" : "left"]: info.pos + "px" },
       class: [line.includes("x") ? "vv-free-dom--xline" : "vv-free-dom--yline", "vv-free-dom--line"]
     });
     const _lines = this.showLine ? this.lines.filter((line) => this.lineStatus[line].show).map((line) => _line(line, this.lineStatus[line])) : [];
-    return (0, import_vue_demi.h)("div", {
+    return (0, import_vue_demi2.h)("div", {
       class: "vv-free-dom--markline"
     }, _lines);
   }
 });
 
 // src/hooks/use-normalize-style.ts
-var import_vue_demi2 = require("vue-demi");
+var import_vue_demi3 = require("vue-demi");
 
 // src/hooks/use-default-slot.ts
-var import_vue_demi3 = require("vue-demi");
+var import_vue_demi4 = require("vue-demi");
 function useDefaultSlot() {
-  const slots = (0, import_vue_demi3.useSlots)();
-  const slotList = (0, import_vue_demi3.computed)(() => {
+  const slots = (0, import_vue_demi4.useSlots)();
+  const slotList = (0, import_vue_demi4.computed)(() => {
     return typeof slots.default === "function" ? slots.default() : slots.default;
   });
-  const only = (0, import_vue_demi3.computed)(() => slotList.value?.filter((slot) => slot.type !== import_vue_demi3.Comment)[0] || null);
+  const only = (0, import_vue_demi4.computed)(() => slotList.value?.[0]);
   return {
     slots: slotList,
     only
@@ -228,13 +259,13 @@ function useDefaultSlot() {
 }
 
 // src/hooks/use-core-date.ts
-var import_vue_demi4 = require("vue-demi");
+var import_vue_demi5 = require("vue-demi");
 function useCoreData(node) {
-  const lastX = (0, import_vue_demi4.ref)(NaN);
-  const lastY = (0, import_vue_demi4.ref)(NaN);
+  const lastX = (0, import_vue_demi5.ref)(NaN);
+  const lastY = (0, import_vue_demi5.ref)(NaN);
   function create(x, y) {
     const isStart = isNaN(lastX.value);
-    const _node = (0, import_vue_demi4.unref)(node);
+    const _node = (0, import_vue_demi5.unref)(node);
     if (!_node) {
       throw new Error("drag node does not exist");
     }
@@ -268,17 +299,17 @@ function useCoreData(node) {
 }
 
 // src/hooks/use-draggable-data.ts
-var import_vue_demi5 = require("vue-demi");
+var import_vue_demi6 = require("vue-demi");
 function useDraggableData(props) {
-  const x = (0, import_vue_demi5.ref)(props.x || props.modelValue.x || 0);
-  const y = (0, import_vue_demi5.ref)(props.y || props.modelValue.y || 0);
-  const deltaX = (0, import_vue_demi5.ref)(0);
-  const deltaY = (0, import_vue_demi5.ref)(0);
-  const dragData = (0, import_vue_demi5.ref)();
-  (0, import_vue_demi5.watchEffect)(() => {
+  const x = (0, import_vue_demi6.ref)(props.x || props.modelValue.x || 0);
+  const y = (0, import_vue_demi6.ref)(props.y || props.modelValue.y || 0);
+  const deltaX = (0, import_vue_demi6.ref)(0);
+  const deltaY = (0, import_vue_demi6.ref)(0);
+  const dragData = (0, import_vue_demi6.ref)();
+  (0, import_vue_demi6.watchEffect)(() => {
     x.value = props.x || props.modelValue.x || 0;
   });
-  (0, import_vue_demi5.watchEffect)(() => {
+  (0, import_vue_demi6.watchEffect)(() => {
     y.value = props.y || props.modelValue.y || 0;
   });
   const handleDrag = (evt, data) => {
@@ -315,21 +346,21 @@ function useDraggableData(props) {
 }
 
 // src/hooks/use-scene-context.ts
-var import_vue_demi6 = require("vue-demi");
+var import_vue_demi7 = require("vue-demi");
 var id = 0;
 function useSceneContext(context, props) {
-  const SceneContext = (0, import_vue_demi6.inject)(SceneToken, void 0);
+  const SceneContext = (0, import_vue_demi7.inject)(SceneToken, void 0);
   const uuid = id++;
-  const lockAspectRatio = (0, import_vue_demi6.computed)(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
-  const minWidth = (0, import_vue_demi6.computed)(() => SceneContext?.minWidth || props.minWidth);
-  const minHeight = (0, import_vue_demi6.computed)(() => SceneContext?.minHeight || props.minHeight);
-  const disabledDrag = (0, import_vue_demi6.computed)(() => SceneContext?.disabledDrag || props.disabledDrag);
-  const disabledResize = (0, import_vue_demi6.computed)(() => SceneContext?.disabledResize || props.disabledResize);
-  const scale = (0, import_vue_demi6.computed)(() => SceneContext?.scale || props.scale);
-  const fixNonMonospaced = (0, import_vue_demi6.computed)(() => {
+  const lockAspectRatio = (0, import_vue_demi7.computed)(() => SceneContext?.lockAspectRatio || props.lockAspectRatio);
+  const minWidth = (0, import_vue_demi7.computed)(() => SceneContext?.minWidth || props.minWidth);
+  const minHeight = (0, import_vue_demi7.computed)(() => SceneContext?.minHeight || props.minHeight);
+  const disabledDrag = (0, import_vue_demi7.computed)(() => SceneContext?.disabledDrag || props.disabledDrag);
+  const disabledResize = (0, import_vue_demi7.computed)(() => SceneContext?.disabledResize || props.disabledResize);
+  const scale = (0, import_vue_demi7.computed)(() => SceneContext?.scale || props.scale);
+  const fixNonMonospaced = (0, import_vue_demi7.computed)(() => {
     return SceneContext?.fixNonMonospaced || props.fixNonMonospaced;
   });
-  (0, import_vue_demi6.onMounted)(() => {
+  (0, import_vue_demi7.onMounted)(() => {
     SceneContext?.register(uuid, context);
   });
   function check(pos) {
@@ -353,9 +384,9 @@ function useSceneContext(context, props) {
 }
 
 // src/hooks/use-event-bus.ts
-var import_vue_demi7 = require("vue-demi");
+var import_vue_demi8 = require("vue-demi");
 function useEventBus() {
-  const callbacks = (0, import_vue_demi7.ref)({});
+  const callbacks = (0, import_vue_demi8.ref)({});
   const on = (name, cb) => {
     if (!callbacks.value[name]) {
       callbacks.value[name] = [cb];
@@ -378,14 +409,14 @@ function useEventBus() {
 }
 
 // src/hooks/use-resizable-data.ts
-var import_vue_demi8 = require("vue-demi");
+var import_vue_demi9 = require("vue-demi");
 function useResizableData(props, domRef) {
-  const width = (0, import_vue_demi8.ref)(getWidth());
-  const height = (0, import_vue_demi8.ref)(getHeight());
-  (0, import_vue_demi8.watchEffect)(() => {
+  const width = (0, import_vue_demi9.ref)(getWidth());
+  const height = (0, import_vue_demi9.ref)(getHeight());
+  (0, import_vue_demi9.watchEffect)(() => {
     width.value = getWidth();
   });
-  (0, import_vue_demi8.watchEffect)(() => {
+  (0, import_vue_demi9.watchEffect)(() => {
     height.value = getHeight();
   });
   function getWidth() {
@@ -402,9 +433,9 @@ function useResizableData(props, domRef) {
     if (fixNonMonospaced) {
       await document.fonts.ready;
     }
-    const { width: w, height: h8 } = window.getComputedStyle(domRef.value.$el);
+    const { width: w, height: h5 } = window.getComputedStyle(domRef.value.$el);
     width.value = Math.max(Math.ceil(parseFloat(w)), minWidth);
-    height.value = Math.max(Math.ceil(parseFloat(h8)), minHeight);
+    height.value = Math.max(Math.ceil(parseFloat(h5)), minHeight);
   }
   return {
     width,
@@ -414,22 +445,22 @@ function useResizableData(props, domRef) {
 }
 
 // src/hooks/use-layout.ts
-var import_vue_demi9 = require("vue-demi");
+var import_vue_demi10 = require("vue-demi");
 function useLayout(props) {
-  const layout = (0, import_vue_demi9.shallowRef)(props.modelValue);
-  (0, import_vue_demi9.watchEffect)(() => {
+  const layout = (0, import_vue_demi10.shallowRef)(props.modelValue);
+  (0, import_vue_demi10.watchEffect)(() => {
     layout.value = props.modelValue;
   });
-  const cellWidth = (0, import_vue_demi9.computed)(
+  const cellWidth = (0, import_vue_demi10.computed)(
     () => (props.width - margin.value[0] * (cols.value - 1) - (containerPadding.value?.[0] || margin.value[0]) * 2) / props.cols
   );
-  const cols = (0, import_vue_demi9.computed)(() => props.cols);
-  const rowHeight = (0, import_vue_demi9.computed)(() => props.rowHeight);
-  const margin = (0, import_vue_demi9.computed)(() => props.margin);
-  const maxRows = (0, import_vue_demi9.computed)(() => props.maxRows);
-  const containerPadding = (0, import_vue_demi9.computed)(() => props.containerPadding);
-  const minW = (0, import_vue_demi9.computed)(() => props.minW);
-  const minH = (0, import_vue_demi9.computed)(() => props.minH);
+  const cols = (0, import_vue_demi10.computed)(() => props.cols);
+  const rowHeight = (0, import_vue_demi10.computed)(() => props.rowHeight);
+  const margin = (0, import_vue_demi10.computed)(() => props.margin);
+  const maxRows = (0, import_vue_demi10.computed)(() => props.maxRows);
+  const containerPadding = (0, import_vue_demi10.computed)(() => props.containerPadding);
+  const minW = (0, import_vue_demi10.computed)(() => props.minW);
+  const minH = (0, import_vue_demi10.computed)(() => props.minH);
   function getItem(key) {
     return layout.value.find((item) => item.i === key);
   }
@@ -526,10 +557,10 @@ function useLayout(props) {
     layout.value = _normalize(_layout);
     return layout.value;
   }
-  function resizeTo(item, w, h8) {
+  function resizeTo(item, w, h5) {
     let hasCollisions = false;
     if (!props.collision) {
-      const collisions = layout.value.filter((l) => _collides(l, { ...item, w, h: h8 }));
+      const collisions = layout.value.filter((l) => _collides(l, { ...item, w, h: h5 }));
       hasCollisions = collisions.length > 0;
       if (hasCollisions) {
         let leastX = Infinity;
@@ -548,7 +579,7 @@ function useLayout(props) {
     }
     if (!hasCollisions) {
       item.w = w;
-      item.h = h8;
+      item.h = h5;
     }
     layout.value = _normalize([...layout.value]);
   }
@@ -664,46 +695,46 @@ function useLayout(props) {
 }
 function useLayoutItem(props, layout) {
   const { cellWidth, margin, rowHeight, cols, maxRows, containerPadding: cPadding } = layout;
-  const dragging = (0, import_vue_demi9.ref)();
-  const resizing = (0, import_vue_demi9.ref)();
-  const containerPadding = (0, import_vue_demi9.computed)(() => cPadding.value || margin.value);
-  const x = (0, import_vue_demi9.computed)(() => {
+  const dragging = (0, import_vue_demi10.ref)();
+  const resizing = (0, import_vue_demi10.ref)();
+  const containerPadding = (0, import_vue_demi10.computed)(() => cPadding.value || margin.value);
+  const x = (0, import_vue_demi10.computed)(() => {
     if (!dragging.value) {
       return Math.round(props.x * (cellWidth.value + margin.value[0]) + containerPadding.value[0]);
     } else {
       return Math.round(dragging.value.x);
     }
   });
-  const y = (0, import_vue_demi9.computed)(() => {
+  const y = (0, import_vue_demi10.computed)(() => {
     if (!dragging.value) {
       return Math.round(props.y * (rowHeight.value + margin.value[1]) + containerPadding.value[1]);
     } else {
       return Math.round(dragging.value.y);
     }
   });
-  const width = (0, import_vue_demi9.computed)(() => {
+  const width = (0, import_vue_demi10.computed)(() => {
     if (!resizing.value) {
       return Math.round(cellWidth.value * props.width + Math.max(0, props.width - 1) * margin.value[0]);
     } else {
       return Math.round(resizing.value.width);
     }
   });
-  const height = (0, import_vue_demi9.computed)(() => {
+  const height = (0, import_vue_demi10.computed)(() => {
     if (!resizing.value) {
       return Math.round(rowHeight.value * props.height + Math.max(0, props.height - 1) * margin.value[1]);
     } else {
       return Math.round(resizing.value.height);
     }
   });
-  const minWidth = (0, import_vue_demi9.computed)(() => {
+  const minWidth = (0, import_vue_demi10.computed)(() => {
     const minW = layout.minW.value;
     return Math.round(cellWidth.value * minW + Math.max(0, minW - 1) * margin.value[0]);
   });
-  const minHeight = (0, import_vue_demi9.computed)(() => {
+  const minHeight = (0, import_vue_demi10.computed)(() => {
     const minH = layout.minH.value;
     return Math.round(rowHeight.value * minH + Math.max(0, minH - 1) * margin.value[1]);
   });
-  const style = (0, import_vue_demi9.computed)(() => {
+  const style = (0, import_vue_demi10.computed)(() => {
     return {
       position: "absolute",
       width: `${width.value}px`,
@@ -744,15 +775,15 @@ function useLayoutItem(props, layout) {
   };
   const onResize = (evt, coreData) => {
     const { width: width2, height: height2 } = coreData;
-    const { w, h: h8 } = _calcWH(width2, height2);
+    const { w, h: h5 } = _calcWH(width2, height2);
     resizing.value = { width: width2, height: height2 };
-    props.resizeFn(evt, { w, h: h8 });
+    props.resizeFn(evt, { w, h: h5 });
   };
   const onResizeStop = (evt, coreData) => {
     resizing.value = void 0;
     const { width: width2, height: height2 } = coreData;
-    const { w, h: h8 } = _calcWH(width2, height2);
-    props.resizeStopFn(evt, { w, h: h8 });
+    const { w, h: h5 } = _calcWH(width2, height2);
+    props.resizeStopFn(evt, { w, h: h5 });
   };
   function _calcXY(left, top) {
     let x2 = Math.round((left - margin.value[0]) / (cellWidth.value + margin.value[0]));
@@ -763,10 +794,10 @@ function useLayoutItem(props, layout) {
   }
   function _calcWH(width2, height2) {
     let w = Math.round((width2 + margin.value[0]) / (cellWidth.value + margin.value[0]));
-    let h8 = Math.round((height2 + margin.value[1]) / (rowHeight.value + margin.value[1]));
+    let h5 = Math.round((height2 + margin.value[1]) / (rowHeight.value + margin.value[1]));
     w = clamp(w, 0, cols.value - props.x);
-    h8 = clamp(h8, 0, maxRows.value - props.y);
-    return { w, h: h8 };
+    h5 = clamp(h5, 0, maxRows.value - props.y);
+    return { w, h: h5 };
   }
   return {
     x,
@@ -788,10 +819,10 @@ function useLayoutItem(props, layout) {
 }
 
 // src/components/freeDom.ts
-var import_vue_demi12 = require("vue-demi");
+var import_vue_demi13 = require("vue-demi");
 
 // src/components/freeDomCore.ts
-var import_vue_demi10 = require("vue-demi");
+var import_vue_demi11 = require("vue-demi");
 function noop() {
 }
 var freeDomCoreProps = {
@@ -813,19 +844,19 @@ var freeDomCoreProps = {
   },
   disabled: Boolean
 };
-var freeDomCore = (0, import_vue_demi10.defineComponent)({
+var freeDomCore = (0, import_vue_demi11.defineComponent)({
   name: "FreeDomCore",
   props: freeDomCoreProps,
   setup(props) {
     const { only } = useDefaultSlot();
-    const dragging = (0, import_vue_demi10.ref)(false);
-    const domRef = (0, import_vue_demi10.ref)();
-    const node = (0, import_vue_demi10.computed)(() => domRef.value?.$el || domRef.value);
-    const ownerDoc = (0, import_vue_demi10.computed)(() => node.value?.ownerDocument);
+    const dragging = (0, import_vue_demi11.ref)(false);
+    const coreRef = (0, import_vue_demi11.ref)();
+    const node = (0, import_vue_demi11.computed)(() => coreRef.value?.$el || coreRef.value);
+    const ownerDoc = (0, import_vue_demi11.computed)(() => node.value?.ownerDocument);
     const { lastX, lastY, create } = useCoreData(node);
     let parentNode;
     let parentRect;
-    (0, import_vue_demi10.onUnmounted)(() => {
+    (0, import_vue_demi11.onUnmounted)(() => {
       if (!ownerDoc.value)
         return;
       if (props.userSelectHack)
@@ -910,23 +941,48 @@ var freeDomCore = (0, import_vue_demi10.defineComponent)({
     }
     return {
       only,
-      domRef,
+      coreRef,
       mousedownFn,
       mouseupFn
     };
   },
   render() {
-    return this.only ? (0, import_vue_demi10.h)(this.only, {
-      ref: "domRef",
-      onMousedown: (0, import_vue_demi10.withModifiers)(this.mousedownFn, ["stop"]),
+    const vue2Props = {
+      on: {
+        mousedown: (evt) => {
+          evt.stopPropagation();
+          this.mousedownFn(evt);
+        },
+        mouseup: this.mouseupFn
+      }
+    };
+    const vue3Props = {
+      onMousedown: (evt) => {
+        evt.stopPropagation();
+        this.mousedownFn(evt);
+      },
       onMouseup: this.mouseupFn
-    }) : null;
+    };
+    const res = createRender(
+      // @ts-expect-error: maybe vue2
+      this.only,
+      { ref: (el) => {
+        this.coreRef = el;
+      } },
+      import_vue_demi11.isVue2 ? {} : vue3Props,
+      import_vue_demi11.isVue2 ? vue2Props.on : {}
+    );
+    if (typeof res === "function") {
+      return res();
+    } else {
+      return res;
+    }
   }
 });
 var freeDomCore_default = freeDomCore;
 
 // src/components/resizeDomCore.ts
-var import_vue_demi11 = require("vue-demi");
+var import_vue_demi12 = require("vue-demi");
 var Dots = ["t", "r", "l", "b", "lt", "lb", "rt", "rb"];
 function noop2() {
 }
@@ -969,16 +1025,16 @@ var resizeDomCoreProps = {
   },
   lockAspectRatio: Boolean
 };
-var resizeDomCore = (0, import_vue_demi11.defineComponent)({
+var resizeDomCore = (0, import_vue_demi12.defineComponent)({
   name: "ResizeDomCore",
   props: resizeDomCoreProps,
   setup(props, { slots }) {
     const { slots: _slots } = useDefaultSlot();
-    const dots = (0, import_vue_demi11.computed)(() => {
+    const dots = (0, import_vue_demi12.computed)(() => {
       const _dots = props.scale;
       return Array.isArray(_dots) ? _dots : Dots;
     });
-    const lastRect = (0, import_vue_demi11.shallowRef)();
+    const lastRect = (0, import_vue_demi12.shallowRef)();
     function runConstraints(width, height) {
       const { lockAspectRatio } = props;
       if (!props.minHeight && !props.minWidth && !lockAspectRatio)
@@ -1027,7 +1083,7 @@ var resizeDomCore = (0, import_vue_demi11.defineComponent)({
     }
     function renderResizehandler(axis) {
       if (!slots.handler) {
-        return () => (0, import_vue_demi11.h)("i", {
+        return () => (0, import_vue_demi12.h)("i", {
           class: [
             "vv-resize-dom--handler",
             `vv-resize-dom--handler__${axis}`
@@ -1044,20 +1100,25 @@ var resizeDomCore = (0, import_vue_demi11.defineComponent)({
     };
   },
   render() {
-    return (0, import_vue_demi11.h)("div", {
-      class: "vv-resize-dom--box"
-    }, [
-      this.children?.map((node) => (0, import_vue_demi11.h)(node)),
-      this.dots.map((dot) => (0, import_vue_demi11.h)(freeDomCore_default, {
-        class: [
-          this.dragOpts.disabled && "vv-resize-dom--disabled"
-        ],
-        ...this.dragOpts,
-        stopFn: this.handleResize("stop", dot),
-        startFn: this.handleResize("start", dot),
-        dragFn: this.handleResize("resize", dot)
-      }, this.renderResizehandler(dot)))
-    ]);
+    const slots = [
+      ...this.children || [],
+      this.dots.map((dot) => {
+        return createRender(
+          freeDomCore_default,
+          { class: [this.dragOpts.disabled && "vv-resize-dom--disabled"] },
+          {
+            ...this.dragOpts,
+            stopFn: this.handleResize("stop", dot),
+            startFn: this.handleResize("start", dot),
+            dragFn: this.handleResize("resize", dot)
+          }
+        )(this.renderResizehandler(dot));
+      })
+    ];
+    return createRender(
+      "div",
+      { class: "vv-resize-dom--box" }
+    )(slots);
   }
 });
 var resizeDomCore_default = resizeDomCore;
@@ -1122,7 +1183,7 @@ var freeDomProps = {
   scale: resizeDomCoreProps.scale,
   fixNonMonospaced: Boolean
 };
-var freeDom = (0, import_vue_demi12.defineComponent)({
+var freeDom = (0, import_vue_demi13.defineComponent)({
   name: "FreeDom",
   props: freeDomProps,
   emits: [
@@ -1133,8 +1194,7 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
     "update:modelValue"
   ],
   setup(props, { emit, expose, slots }) {
-    const domRef = (0, import_vue_demi12.ref)();
-    const { slots: children } = useDefaultSlot();
+    const domRef = (0, import_vue_demi13.ref)();
     const {
       x,
       y,
@@ -1146,7 +1206,7 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
     } = useDraggableData(props);
     const { width, height, syncSize: _syncSize } = useResizableData(props, domRef);
     const context = {
-      _rect: (0, import_vue_demi12.reactive)({
+      _rect: (0, import_vue_demi13.reactive)({
         x,
         y,
         width,
@@ -1165,10 +1225,10 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
         sceneContext.minHeight.value
       );
     };
-    (0, import_vue_demi12.onMounted)(() => {
+    (0, import_vue_demi13.onMounted)(() => {
       props.autoSize && syncSize();
     });
-    const style = (0, import_vue_demi12.computed)(() => ({
+    const style = (0, import_vue_demi13.computed)(() => ({
       position: "absolute",
       width: `${width.value}px`,
       height: `${height.value}px`,
@@ -1206,9 +1266,9 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
       emit("update:y", y.value);
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
     };
-    const onResize = (evt, { node, width: w, height: h8, handle: axis }) => {
+    const onResize = (evt, { node, width: w, height: h5, handle: axis }) => {
       const offsetW = -(w - width.value);
-      const offsetH = -(h8 - height.value);
+      const offsetH = -(h5 - height.value);
       const axisH = axis[0];
       const axisV = axis[axis.length - 1];
       let _x = x.value;
@@ -1219,14 +1279,14 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
       if (axisV === "t") {
         _y += offsetH;
       }
-      const isValid = sceneContext.check?.({ x: _x, y: _y, width: w, height: h8 });
+      const isValid = sceneContext.check?.({ x: _x, y: _y, width: w, height: h5 });
       if (!isValid)
         return;
       width.value = w;
-      height.value = h8;
+      height.value = h5;
       x.value = _x;
       y.value = _y;
-      props.resizeFn(evt, { node, width: w, height: h8, handle: axis });
+      props.resizeFn(evt, { node, width: w, height: h5, handle: axis });
       sceneContext?.emit("move");
     };
     const onResizeStop = () => {
@@ -1240,21 +1300,21 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
       sceneContext.emit("moveup");
     };
-    const resizeNode = () => (0, import_vue_demi12.h)(resizeDomCore_default, {
-      width: width.value,
-      height: height.value,
-      lockAspectRatio: sceneContext.lockAspectRatio.value,
-      dragOpts: { disabled: sceneContext.disabledResize.value },
-      resizeFn: onResize,
-      stopFn: onResizeStop,
-      minHeight: sceneContext.minHeight.value,
-      minWidth: sceneContext.minWidth.value,
-      scale: sceneContext.scale.value
-    }, {
-      default: () => children.value,
-      handler: slots.handler
-    });
-    expose({
+    const resizeNode = () => {
+      const props2 = {
+        width: width.value,
+        height: height.value,
+        lockAspectRatio: sceneContext.lockAspectRatio.value,
+        dragOpts: { disabled: sceneContext.disabledResize.value },
+        resizeFn: onResize,
+        stopFn: onResizeStop,
+        minHeight: sceneContext.minHeight.value,
+        minWidth: sceneContext.minWidth.value,
+        scale: sceneContext.scale.value
+      };
+      return createRender(resizeDomCore_default, {}, props2)(slots);
+    };
+    expose?.({
       syncSize
     });
     return {
@@ -1267,14 +1327,21 @@ var freeDom = (0, import_vue_demi12.defineComponent)({
     };
   },
   render() {
-    return (0, import_vue_demi12.h)(freeDomCore_default, {
-      ref: "domRef",
-      class: "vv-free-dom--draggable",
-      style: this.style,
+    const props = {
       stopFn: this.onDragStop,
       dragFn: this.onDrag,
       disabled: this.disabled
-    }, () => this.resizeNode());
+    };
+    const slots = () => this.resizeNode();
+    return createRender(
+      freeDomCore_default,
+      {
+        ref: "domRef",
+        class: "vv-free-dom--draggable",
+        style: this.style
+      },
+      props
+    )?.(slots);
   }
 });
 var freeDom_default = freeDom;
@@ -1305,43 +1372,46 @@ var freeDomWrapProps = {
   scale: freeDomProps.scale,
   fixNonMonospaced: freeDomProps.fixNonMonospaced
 };
-var FreeDomWrap = (0, import_vue_demi13.defineComponent)({
+var FreeDomWrap = (0, import_vue_demi14.defineComponent)({
   name: "FreeDomWrap",
   props: freeDomWrapProps,
   setup(props) {
+    const { slots } = useDefaultSlot();
     const eventBus = useEventBus();
-    const rectRef = (0, import_vue_demi13.shallowRef)();
-    const nodes = (0, import_vue_demi13.ref)([]);
-    const width = (0, import_vue_demi13.ref)(props.width);
-    const height = (0, import_vue_demi13.ref)(props.height);
-    (0, import_vue_demi13.watchEffect)(() => {
+    const rectRef = (0, import_vue_demi14.shallowRef)();
+    const nodes = (0, import_vue_demi14.ref)([]);
+    const width = (0, import_vue_demi14.ref)(props.width);
+    const height = (0, import_vue_demi14.ref)(props.height);
+    (0, import_vue_demi14.watchEffect)(() => {
       width.value = props.width;
     });
-    (0, import_vue_demi13.watchEffect)(() => {
+    (0, import_vue_demi14.watchEffect)(() => {
       height.value = props.height;
     });
-    (0, import_vue_demi13.onMounted)(() => {
+    (0, import_vue_demi14.onMounted)(() => {
       if (!props.width || !props.height) {
         if (!rectRef.value)
           console.warn("[free-dom] cannot find element, width or height may be set to 0");
-        const { width: w, height: h8 } = rectRef.value?.getBoundingClientRect() || {};
+        const { width: w, height: h5 } = rectRef.value?.getBoundingClientRect() || {};
         if (!props.width)
           width.value = w || 0;
         if (!props.height)
-          height.value = h8 || 0;
+          height.value = h5 || 0;
       }
     });
     function register(uuid, node) {
       nodes.value.push({ uuid, node });
     }
     function checkValid(pos) {
-      const { x, y, width: w, height: h8 } = pos;
-      return x >= 0 && x + w <= width.value && y >= 0 && y + h8 <= height.value;
+      const { x, y, width: w, height: h5 } = pos;
+      return x >= 0 && // @ts-expect-error: trigger after mounted
+      x + w <= width.value && y >= 0 && // @ts-expect-error: trigger after mounted
+      y + h5 <= height.value;
     }
-    (0, import_vue_demi13.provide)(
+    (0, import_vue_demi14.provide)(
       SceneToken,
-      (0, import_vue_demi13.reactive)({
-        ...(0, import_vue_demi13.toRefs)(props),
+      (0, import_vue_demi14.reactive)({
+        ...(0, import_vue_demi14.toRefs)(props),
         nodes,
         width,
         height,
@@ -1352,30 +1422,35 @@ var FreeDomWrap = (0, import_vue_demi13.defineComponent)({
         emit: eventBus.emit
       })
     );
-    const style = (0, import_vue_demi13.computed)(() => ({
+    const style = (0, import_vue_demi14.computed)(() => ({
       width: `${props.width}px`,
       height: `${props.height}px`
     }));
     return {
       rectRef,
-      style
+      style,
+      slots
     };
   },
   render() {
-    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    return (0, import_vue_demi13.h)("section", {
-      ref: "rectRef",
-      class: "vv-free-dom--scene",
-      style: this.style
-    }, [defaultSlot, (0, import_vue_demi13.h)(markLine_default, { showLine: this.showLine })]);
+    const marklineComp = createRender(markLine_default, {}, { showLine: this.showLine })();
+    const slots = [this.slots, marklineComp];
+    return createRender(
+      "section",
+      {
+        ref: "rectRef",
+        class: "vv-free-dom--scene",
+        style: this.style
+      }
+    )(slots);
   }
 });
 
 // src/components/gridLayout.ts
-var import_vue_demi15 = require("vue-demi");
+var import_vue_demi16 = require("vue-demi");
 
 // src/components/gridItem.ts
-var import_vue_demi14 = require("vue-demi");
+var import_vue_demi15 = require("vue-demi");
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
@@ -1432,12 +1507,12 @@ var gridItemProps = {
   }
 };
 var gridItemEmits = ["dragMove"];
-var GridItem = (0, import_vue_demi14.defineComponent)({
+var GridItem = (0, import_vue_demi15.defineComponent)({
   name: "GridItem",
   props: gridItemProps,
   emits: gridItemEmits,
   setup(props) {
-    const layout = (0, import_vue_demi14.inject)(gridLayoutContextKey);
+    const layout = (0, import_vue_demi15.inject)(gridLayoutContextKey);
     if (!layout) {
       throw new Error("TODO");
     }
@@ -1459,7 +1534,7 @@ var GridItem = (0, import_vue_demi14.defineComponent)({
     } = useLayoutItem(props, layout);
     const { only, slots } = useDefaultSlot();
     const resizeNode = (child) => {
-      return (0, import_vue_demi14.h)(resizeDomCore_default, {
+      const _props = {
         width: width.value,
         height: height.value,
         scale: props.scale,
@@ -1471,20 +1546,26 @@ var GridItem = (0, import_vue_demi14.defineComponent)({
         startFn: onResizeStart,
         resizeFn: onResize,
         stopFn: onResizeStop
-      }, () => child);
+      };
+      return createRender(resizeDomCore_default, {}, _props)(() => child);
+    };
+    const dragNode = (child) => {
+      const _attrs = {
+        class: [
+          dragging.value && "vv-grid-layout--item__draggable",
+          "vv-grid-layout--item",
+          !props.isDraggable && "vv-grid-layout--item__disabled"
+        ],
+        style: style.value
+      };
+      const _props = {
+        disabled: !props.isDraggable,
+        startFn: onDragStart,
+        stopFn: onDragStop,
+        dragFn: onDrag
+      };
+      return createRender(freeDomCore_default, _attrs, _props)(() => resizeNode(child));
     };
-    const dragNode = (child) => (0, import_vue_demi14.h)(freeDomCore_default, {
-      class: [
-        dragging.value && "vv-grid-layout--item__draggable",
-        "vv-grid-layout--item",
-        !props.isDraggable && "vv-grid-layout--item__disabled"
-      ],
-      style: style.value,
-      disabled: !props.isDraggable,
-      startFn: onDragStart,
-      stopFn: onDragStop,
-      dragFn: onDrag
-    }, () => resizeNode(child));
     return {
       x,
       y,
@@ -1511,10 +1592,6 @@ var GridItem = (0, import_vue_demi14.defineComponent)({
 
 // src/components/gridLayout.ts
 var gridLayoutProps = {
-  style: {
-    type: Object,
-    default: () => ({})
-  },
   modelValue: {
     type: Array,
     required: true,
@@ -1560,14 +1637,15 @@ var gridLayoutProps = {
   disabledResize: Boolean,
   collision: Boolean
 };
-var GridLayout = (0, import_vue_demi15.defineComponent)({
+var GridLayout = (0, import_vue_demi16.defineComponent)({
   name: "GridLayout",
+  inheritAttrs: false,
   props: gridLayoutProps,
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const layout = useLayout(props);
-    (0, import_vue_demi15.provide)(gridLayoutContextKey, layout);
-    const activeDrag = (0, import_vue_demi15.ref)(null);
+    (0, import_vue_demi16.provide)(gridLayoutContextKey, layout);
+    const activeDrag = (0, import_vue_demi16.ref)(null);
     function processItem(node) {
       const key = node.key;
       if (!key)
@@ -1577,7 +1655,7 @@ var GridLayout = (0, import_vue_demi15.defineComponent)({
         return;
       const isDraggable = !config.static && !props.disabledDrag;
       const isResizable = !config.static && !props.disabledResize;
-      return (0, import_vue_demi15.h)(GridItem, {
+      const _props = {
         x: config.x,
         y: config.y,
         width: config.w,
@@ -1614,28 +1692,31 @@ var GridLayout = (0, import_vue_demi15.defineComponent)({
             height: config.h
           };
           activeDrag.value = placeholder2;
-          const { w, h: h8 } = data;
-          layout.resizeTo(config, w, h8);
+          const { w, h: h5 } = data;
+          layout.resizeTo(config, w, h5);
         },
         resizeStopFn: (evt, data) => {
-          const { w, h: h8 } = data;
-          layout.resizeTo(config, w, h8);
+          const { w, h: h5 } = data;
+          layout.resizeTo(config, w, h5);
           activeDrag.value = null;
         }
-      }, () => node);
+      };
+      return createRender(GridItem, {}, _props)({ default: () => node });
     }
     function placeholder() {
       if (!activeDrag.value)
         return null;
       const { x, y, width, height } = activeDrag.value;
-      return (0, import_vue_demi15.h)(GridItem, {
-        class: "vv-grid-layout--placeholder",
+      const _props = {
         x,
         y,
         width,
         height,
         move: false
-      });
+      };
+      return createRender(GridItem, {
+        class: "vv-grid-layout--placeholder"
+      }, _props)();
     }
     return {
       processItem,
@@ -1645,11 +1726,11 @@ var GridLayout = (0, import_vue_demi15.defineComponent)({
   },
   render() {
     const mergedStyle = {
-      ...this.style || {},
+      ...this.$attrs.style || {},
       height: this.layout.calContainerHeight()
     };
     const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default || [];
-    return (0, import_vue_demi15.h)("div", {
+    return (0, import_vue_demi16.h)("div", {
       class: "vv-grid-layout",
       style: mergedStyle
     }, [