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

package/dist/index.mjs

@@ -1,9 +1,40 @@
 // src/components/freeDomWrap.ts
-import { computed as computed7, defineComponent as defineComponent5, h as h5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref10, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
+import { computed as computed7, defineComponent as defineComponent5, onMounted as onMounted3, provide, reactive as reactive3, ref as ref10, shallowRef as shallowRef4, toRefs, watchEffect as watchEffect4 } from "vue-demi";
 
 // src/util/tokens.ts
 var SceneToken = Symbol("Scene");
 
+// src/util/render.ts
+import { merge } from "lodash";
+import { h, isVue2 } from "vue-demi";
+function createRender(comp, attrs = {}, props = {}, listeners = {}) {
+  if (!comp)
+    return () => null;
+  const options = isVue2 ? {
+    ...attrs,
+    props,
+    on: listeners
+  } : {
+    ...attrs,
+    ...props
+  };
+  if (isVue2 && typeof comp === "object" && !("render" in comp)) {
+    merge(comp.data, options);
+    return comp;
+  }
+  return (slots) => {
+    if (isVue2) {
+      if (Object.prototype.toString.call(slots) === "[object Object]") {
+        return h(comp, { ...options, scopedSlots: slots });
+      } else {
+        return h(comp, options, Array.isArray(slots) ? slots : [slots]);
+      }
+    } else {
+      return h(comp, options, slots);
+    }
+  };
+}
+
 // src/util/index.ts
 var isProduction = process.env.NODE_ENV === "production";
 function clamp(value, min, max = Infinity) {
@@ -16,7 +47,7 @@ function log(...args) {
 }
 
 // src/components/markLine.ts
-import { defineComponent, h, inject, onBeforeUnmount, reactive, ref, shallowRef } from "vue-demi";
+import { defineComponent, h as h2, inject, onBeforeUnmount, reactive, ref, shallowRef } from "vue-demi";
 var lineType = ["xt", "xc", "xb", "yl", "yc", "yr"];
 var markLine_default = defineComponent({
   props: {
@@ -171,12 +202,12 @@ var markLine_default = defineComponent({
     };
   },
   render() {
-    const _line = (line, info) => h("div", {
+    const _line = (line, info) => h2("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 h("div", {
+    return h2("div", {
       class: "vv-free-dom--markline"
     }, _lines);
   }
@@ -186,13 +217,13 @@ var markLine_default = defineComponent({
 import { ref as ref2, unref, watch } from "vue-demi";
 
 // src/hooks/use-default-slot.ts
-import { Comment, computed, useSlots } from "vue-demi";
+import { computed, useSlots } from "vue-demi";
 function useDefaultSlot() {
   const slots = useSlots();
   const slotList = computed(() => {
     return typeof slots.default === "function" ? slots.default() : slots.default;
   });
-  const only = computed(() => slotList.value?.filter((slot) => slot.type !== Comment)[0] || null);
+  const only = computed(() => slotList.value?.[0]);
   return {
     slots: slotList,
     only
@@ -374,9 +405,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,
@@ -498,10 +529,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;
@@ -520,7 +551,7 @@ function useLayout(props) {
     }
     if (!hasCollisions) {
       item.w = w;
-      item.h = h8;
+      item.h = h5;
     }
     layout.value = _normalize([...layout.value]);
   }
@@ -716,15 +747,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]));
@@ -735,10 +766,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,
@@ -760,10 +791,10 @@ function useLayoutItem(props, layout) {
 }
 
 // src/components/freeDom.ts
-import { computed as computed6, defineComponent as defineComponent4, h as h4, onMounted as onMounted2, reactive as reactive2, ref as ref9 } from "vue-demi";
+import { computed as computed6, defineComponent as defineComponent4, onMounted as onMounted2, reactive as reactive2, ref as ref9 } from "vue-demi";
 
 // src/components/freeDomCore.ts
-import { computed as computed4, defineComponent as defineComponent2, h as h2, onUnmounted, ref as ref8, withModifiers } from "vue-demi";
+import { computed as computed4, defineComponent as defineComponent2, isVue2 as isVue22, onUnmounted, ref as ref8 } from "vue-demi";
 function noop() {
 }
 var freeDomCoreProps = {
@@ -791,8 +822,8 @@ var freeDomCore = defineComponent2({
   setup(props) {
     const { only } = useDefaultSlot();
     const dragging = ref8(false);
-    const domRef = ref8();
-    const node = computed4(() => domRef.value?.$el || domRef.value);
+    const coreRef = ref8();
+    const node = computed4(() => coreRef.value?.$el || coreRef.value);
     const ownerDoc = computed4(() => node.value?.ownerDocument);
     const { lastX, lastY, create } = useCoreData(node);
     let parentNode;
@@ -882,17 +913,42 @@ var freeDomCore = defineComponent2({
     }
     return {
       only,
-      domRef,
+      coreRef,
       mousedownFn,
       mouseupFn
     };
   },
   render() {
-    return this.only ? h2(this.only, {
-      ref: "domRef",
-      onMousedown: 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;
+      } },
+      isVue22 ? {} : vue3Props,
+      isVue22 ? vue2Props.on : {}
+    );
+    if (typeof res === "function") {
+      return res();
+    } else {
+      return res;
+    }
   }
 });
 var freeDomCore_default = freeDomCore;
@@ -1016,20 +1072,25 @@ var resizeDomCore = defineComponent3({
     };
   },
   render() {
-    return h3("div", {
-      class: "vv-resize-dom--box"
-    }, [
-      this.children?.map((node) => h3(node)),
-      this.dots.map((dot) => h3(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;
@@ -1106,7 +1167,6 @@ var freeDom = defineComponent4({
   ],
   setup(props, { emit, expose, slots }) {
     const domRef = ref9();
-    const { slots: children } = useDefaultSlot();
     const {
       x,
       y,
@@ -1178,9 +1238,9 @@ var freeDom = defineComponent4({
       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;
@@ -1191,14 +1251,14 @@ var freeDom = defineComponent4({
       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 = () => {
@@ -1212,21 +1272,21 @@ var freeDom = defineComponent4({
       emit("update:modelValue", { x: x.value, y: y.value, w: width.value, h: height.value });
       sceneContext.emit("moveup");
     };
-    const resizeNode = () => h4(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 {
@@ -1239,14 +1299,21 @@ var freeDom = defineComponent4({
     };
   },
   render() {
-    return h4(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;
@@ -1281,6 +1348,7 @@ var FreeDomWrap = defineComponent5({
   name: "FreeDomWrap",
   props: freeDomWrapProps,
   setup(props) {
+    const { slots } = useDefaultSlot();
     const eventBus = useEventBus();
     const rectRef = shallowRef4();
     const nodes = ref10([]);
@@ -1296,19 +1364,21 @@ var FreeDomWrap = defineComponent5({
       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;
     }
     provide(
       SceneToken,
@@ -1330,24 +1400,29 @@ var FreeDomWrap = defineComponent5({
     }));
     return {
       rectRef,
-      style
+      style,
+      slots
     };
   },
   render() {
-    const defaultSlot = typeof this.$slots.default === "function" ? this.$slots.default() : this.$slots.default;
-    return h5("section", {
-      ref: "rectRef",
-      class: "vv-free-dom--scene",
-      style: this.style
-    }, [defaultSlot, h5(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
-import { defineComponent as defineComponent7, h as h7, provide as provide2, ref as ref11 } from "vue-demi";
+import { defineComponent as defineComponent7, h as h4, provide as provide2, ref as ref11 } from "vue-demi";
 
 // src/components/gridItem.ts
-import { defineComponent as defineComponent6, h as h6, inject as inject3 } from "vue-demi";
+import { defineComponent as defineComponent6, inject as inject3 } from "vue-demi";
 
 // src/components/tokens.ts
 var gridLayoutContextKey = Symbol("gridLayoutContext");
@@ -1431,7 +1506,7 @@ var GridItem = defineComponent6({
     } = useLayoutItem(props, layout);
     const { only, slots } = useDefaultSlot();
     const resizeNode = (child) => {
-      return h6(resizeDomCore_default, {
+      const _props = {
         width: width.value,
         height: height.value,
         scale: props.scale,
@@ -1443,20 +1518,26 @@ var GridItem = defineComponent6({
         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) => h6(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,
@@ -1483,10 +1564,6 @@ var GridItem = defineComponent6({
 
 // src/components/gridLayout.ts
 var gridLayoutProps = {
-  style: {
-    type: Object,
-    default: () => ({})
-  },
   modelValue: {
     type: Array,
     required: true,
@@ -1534,6 +1611,7 @@ var gridLayoutProps = {
 };
 var GridLayout = defineComponent7({
   name: "GridLayout",
+  inheritAttrs: false,
   props: gridLayoutProps,
   emits: ["update:modelValue"],
   setup(props, { emit }) {
@@ -1549,7 +1627,7 @@ var GridLayout = defineComponent7({
         return;
       const isDraggable = !config.static && !props.disabledDrag;
       const isResizable = !config.static && !props.disabledResize;
-      return h7(GridItem, {
+      const _props = {
         x: config.x,
         y: config.y,
         width: config.w,
@@ -1586,28 +1664,31 @@ var GridLayout = defineComponent7({
             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 h7(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,
@@ -1617,11 +1698,11 @@ var GridLayout = defineComponent7({
   },
   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 h7("div", {
+    return h4("div", {
       class: "vv-grid-layout",
       style: mergedStyle
     }, [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sepveneto/free-dom",
-  "version": "0.7.0-alpha.2",
+  "version": "0.7.2",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -15,6 +15,13 @@
     },
     "./css": "./dist/index.css"
   },
+  "typesVersions": {
+    "*": {
+      ".": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "build": "tsup",
     "dev": "vue-demi-switch 3 && vitepress dev docs",
@@ -25,16 +32,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@vueuse/core": "^9.2.0",
+    "lodash": "^4.17.21",
     "uuid": "^9.0.0",
     "vue-demi": "latest"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.195",
     "@types/uuid": "^8.3.4",
     "bumpp": "^8.2.1",
     "esbuild-plugin-sass": "^1.0.1",
-    "tsup": "^6.5.0",
-    "vue": "^3.2.39"
+    "tsup": "^6.5.0"
   },
   "changelog": "https://github.com/SepVeneto/free-dom/blob/master/packages/core/CHANGELOG.md",
   "homepage": "https://github.com/SepVeneto/free-dom/blob/master/readme.md",