@fangzhongya/page 0.0.31 → 0.0.33

package/dist/components/design/design-resizable2.cjs

@@ -2,13 +2,15 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const Draggable = require("vuedraggable");
-require("./resizable.cjs");
+require("./resizable/resizable.cjs");
 require("./design-operate.cjs");
-const util = require("../../config/util.cjs");
+const util$1 = require("../../config/util.cjs");
 const index = require("../../utils/index.cjs");
-const resizable_vue_vue_type_script_setup_true_lang = require("./resizable2.cjs");
+const aligned = require("./resizable/aligned.cjs");
+const util = require("./resizable/util.cjs");
+const resizable_vue_vue_type_script_setup_true_lang = require("./resizable/resizable2.cjs");
 const designOperate_vue_vue_type_script_setup_true_lang = require("./design-operate2.cjs");
-const defaultSize = 10;
+const defaultSize = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "design-resizable",
   props: {
@@ -35,10 +37,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const mouseenter = util.uesDistance();
     const co = index.getClass("design-com");
     const cs = index.getClass("design-resizable");
     const props = __props;
     const emit = __emit;
+    const setObj = vue.inject("setObj");
+    const scale = vue.computed(() => {
+      return (setObj.value.scale || 100) / 100;
+    });
     const zls = vue.ref([]);
     const value = vue.computed({
       get() {
@@ -63,8 +70,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         const y = originalEvent.clientY - rects.value.top;
         if (add.value) {
           add.value.positions = add.value.positions || {};
-          add.value.positions.x = x;
-          add.value.positions.y = y;
+          add.value.positions.x = x / scale.value;
+          add.value.positions.y = y / scale.value;
           add.value.positions.w = "auto";
           add.value.positions.h = "auto";
           add.value = void 0;
@@ -80,6 +87,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       element.positions = element.positions || {};
       element.positions.x = arr[0];
       element.positions.y = arr[1];
+      aligned.clearAlignmentLines();
     };
     const onResizeStop = (arr, element) => {
       element.positions = element.positions || {};
@@ -87,6 +95,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       element.positions.y = arr[1];
       element.positions.w = arr[2];
       element.positions.h = arr[3];
+      aligned.clearAlignmentLines();
+    };
+    const onDragging = (event) => {
+      const dom = event.target;
+      aligned.showAlignmentLines(dom, 1);
     };
     vue.onMounted(() => {
       if (refResizable.value) {
@@ -133,16 +146,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(value), (element, index2) => {
                     return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-                      !element.design?.hide ? (vue.openBlock(), vue.createBlock(resizable_vue_vue_type_script_setup_true_lang.default, {
+                      !element.hide ? (vue.openBlock(), vue.createBlock(resizable_vue_vue_type_script_setup_true_lang.default, {
                         key: 0,
+                        id: element.id,
                         class: vue.normalizeClass([
                           vue.unref(cs)("resizable-item"),
-                          vue.unref(util.getComponObj)(element).status?.inline ? "is-inline" : "",
+                          vue.unref(util$1.getComponObj)(element).status?.inline ? "is-inline" : "",
                           element === vue.unref(right) ? "on" : ""
                         ]),
+                        scale: vue.unref(scale),
                         draggable: !element.design?.islock,
                         resizable: !element.design?.islock,
-                        parent: true,
+                        parent: false,
                         "min-width": defaultSize,
                         "min-height": defaultSize,
                         grid: element.positions?.grid || [
@@ -155,20 +170,20 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         h: element.positions?.h || "auto",
                         z: element.positions?.z,
                         onClick: vue.withModifiers(($event) => onClick(element), ["stop"]),
-                        onDragStop: (...arr) => onDragStop(arr, element),
-                        onResizeStop: (...arr) => onResizeStop(arr, element),
-                        active: element === vue.unref(right)
+                        onDragStop: (_e, ...arr) => onDragStop(arr, element),
+                        onDragging,
+                        onResizing: onDragging,
+                        onMouseenter: vue.unref(mouseenter),
+                        onResizeStop: (_e, ...arr) => onResizeStop(arr, element)
                       }, {
                         default: vue.withCtx(() => [
-                          element === vue.unref(right) && !element.design?.islock ? (vue.openBlock(), vue.createElementBlock("div", {
-                            key: 0,
+                          vue.createElementVNode("div", {
                             class: vue.normalizeClass([vue.unref(cs)("allow")])
-                          }, null, 2)) : vue.createCommentVNode("", true),
+                          }, null, 2),
                           vue.createVNode(designOperate_vue_vue_type_script_setup_true_lang.default, {
                             "model-value": vue.unref(value),
                             assembly: element,
-                            index: index2,
-                            height: "100%"
+                            index: index2
                           }, {
                             add: vue.withCtx(() => [
                               vue.renderSlot(_ctx.$slots, "operate", { value: element })
@@ -183,7 +198,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           }, 1032, ["model-value", "assembly", "index"])
                         ]),
                         _: 2
-                      }, 1032, ["class", "draggable", "resizable", "grid", "x", "y", "w", "h", "z", "onClick", "onDragStop", "onResizeStop", "active"])) : vue.createCommentVNode("", true)
+                      }, 1032, ["id", "class", "scale", "draggable", "resizable", "grid", "x", "y", "w", "h", "z", "onClick", "onDragStop", "onMouseenter", "onResizeStop"])) : vue.createCommentVNode("", true)
                     ], 64);
                   }), 256))
                 ], 2)

package/dist/components/design/design-resizable2.js

@@ -1,12 +1,14 @@
-import { defineComponent, ref, computed, inject, onMounted, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createElementVNode, Fragment, renderList, createBlock, withModifiers, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, inject, computed, ref, onMounted, openBlock, createElementBlock, normalizeClass, unref, createVNode, isRef, withCtx, createElementVNode, Fragment, renderList, createBlock, withModifiers, renderSlot, createCommentVNode, createTextVNode, toDisplayString } from "vue";
 import Draggable from "vuedraggable";
-import "./resizable.js";
+import "./resizable/resizable.js";
 import "./design-operate.js";
 import { getComponObj } from "../../config/util.js";
 import { getClass } from "../../utils/index.js";
-import _sfc_main$1 from "./resizable2.js";
+import { clearAlignmentLines, showAlignmentLines } from "./resizable/aligned.js";
+import { uesDistance } from "./resizable/util.js";
+import _sfc_main$1 from "./resizable/resizable2.js";
 import _sfc_main$2 from "./design-operate2.js";
-const defaultSize = 10;
+const defaultSize = 1;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "design-resizable",
   props: {
@@ -33,10 +35,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const mouseenter = uesDistance();
     const co = getClass("design-com");
     const cs = getClass("design-resizable");
     const props = __props;
     const emit = __emit;
+    const setObj = inject("setObj");
+    const scale = computed(() => {
+      return (setObj.value.scale || 100) / 100;
+    });
     const zls = ref([]);
     const value = computed({
       get() {
@@ -61,8 +68,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const y = originalEvent.clientY - rects.value.top;
         if (add.value) {
           add.value.positions = add.value.positions || {};
-          add.value.positions.x = x;
-          add.value.positions.y = y;
+          add.value.positions.x = x / scale.value;
+          add.value.positions.y = y / scale.value;
           add.value.positions.w = "auto";
           add.value.positions.h = "auto";
           add.value = void 0;
@@ -78,6 +85,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       element.positions = element.positions || {};
       element.positions.x = arr[0];
       element.positions.y = arr[1];
+      clearAlignmentLines();
     };
     const onResizeStop = (arr, element) => {
       element.positions = element.positions || {};
@@ -85,6 +93,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       element.positions.y = arr[1];
       element.positions.w = arr[2];
       element.positions.h = arr[3];
+      clearAlignmentLines();
+    };
+    const onDragging = (event) => {
+      const dom = event.target;
+      showAlignmentLines(dom, 1);
     };
     onMounted(() => {
       if (refResizable.value) {
@@ -131,16 +144,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 }, [
                   (openBlock(true), createElementBlock(Fragment, null, renderList(unref(value), (element, index) => {
                     return openBlock(), createElementBlock(Fragment, null, [
-                      !element.design?.hide ? (openBlock(), createBlock(_sfc_main$1, {
+                      !element.hide ? (openBlock(), createBlock(_sfc_main$1, {
                         key: 0,
+                        id: element.id,
                         class: normalizeClass([
                           unref(cs)("resizable-item"),
                           unref(getComponObj)(element).status?.inline ? "is-inline" : "",
                           element === unref(right) ? "on" : ""
                         ]),
+                        scale: unref(scale),
                         draggable: !element.design?.islock,
                         resizable: !element.design?.islock,
-                        parent: true,
+                        parent: false,
                         "min-width": defaultSize,
                         "min-height": defaultSize,
                         grid: element.positions?.grid || [
@@ -153,20 +168,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         h: element.positions?.h || "auto",
                         z: element.positions?.z,
                         onClick: withModifiers(($event) => onClick(element), ["stop"]),
-                        onDragStop: (...arr) => onDragStop(arr, element),
-                        onResizeStop: (...arr) => onResizeStop(arr, element),
-                        active: element === unref(right)
+                        onDragStop: (_e, ...arr) => onDragStop(arr, element),
+                        onDragging,
+                        onResizing: onDragging,
+                        onMouseenter: unref(mouseenter),
+                        onResizeStop: (_e, ...arr) => onResizeStop(arr, element)
                       }, {
                         default: withCtx(() => [
-                          element === unref(right) && !element.design?.islock ? (openBlock(), createElementBlock("div", {
-                            key: 0,
+                          createElementVNode("div", {
                             class: normalizeClass([unref(cs)("allow")])
-                          }, null, 2)) : createCommentVNode("", true),
+                          }, null, 2),
                           createVNode(_sfc_main$2, {
                             "model-value": unref(value),
                             assembly: element,
-                            index,
-                            height: "100%"
+                            index
                           }, {
                             add: withCtx(() => [
                               renderSlot(_ctx.$slots, "operate", { value: element })
@@ -181,7 +196,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           }, 1032, ["model-value", "assembly", "index"])
                         ]),
                         _: 2
-                      }, 1032, ["class", "draggable", "resizable", "grid", "x", "y", "w", "h", "z", "onClick", "onDragStop", "onResizeStop", "active"])) : createCommentVNode("", true)
+                      }, 1032, ["id", "class", "scale", "draggable", "resizable", "grid", "x", "y", "w", "h", "z", "onClick", "onDragStop", "onMouseenter", "onResizeStop"])) : createCommentVNode("", true)
                     ], 64);
                   }), 256))
                 ], 2)

package/dist/components/design/grids/components/GridItem.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const GridItem_vue_vue_type_script_setup_true_lang = require("./GridItem2.cjs");
+;/* empty css            */
+exports.default = GridItem_vue_vue_type_script_setup_true_lang.default;

package/dist/components/design/grids/components/GridItem.css

@@ -0,0 +1,60 @@
+.vue-grid-item {
+  box-sizing: border-box;
+  touch-action: none;
+  transition: all 0.2s ease;
+  transition-property: left, top, right;
+}
+.vue-grid-item.no-touch {
+  touch-action: none;
+}
+.vue-grid-item.css-transforms {
+  right: auto;
+  left: 0;
+  transition-property: transform;
+}
+.vue-grid-item.resizing {
+  z-index: 3;
+  opacity: 0.6;
+}
+.vue-grid-item.vue-draggable-dragging {
+  z-index: 3;
+  transition: none;
+}
+.vue-grid-item.vue-grid-placeholder {
+  z-index: 2;
+  user-select: none;
+  background: red;
+  opacity: 0.2;
+  transition-duration: 0.1s;
+}
+.vue-grid-item > .vue-resizable-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 20;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  cursor: se-resize;
+}
+.vue-grid-item > .vue-resizable-handle:hover .corner-handle {
+  opacity: 1;
+}
+.vue-grid-item > .vue-resizable-handle:active .corner-handle {
+  transform: scale(120%);
+}
+.vue-grid-item > .vue-resizable-handle .corner-handle {
+  width: 4px;
+  height: 4px;
+  background-color: gray;
+  border-radius: 999px;
+  opacity: 0.5;
+  transition: 0.2s;
+  transition-property: opacity, transform;
+}
+.vue-grid-item.disable-user-select {
+  user-select: none;
+}

package/dist/components/design/grids/components/GridItem.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./GridItem2.js";
+/* empty css          */
+export {
+  _sfc_main as default
+};