@web-utils/component 2.7.30 → 2.7.32

package/dist/components/fy-draggable/{index.js → index.mjs}

@@ -1,7 +1,9 @@
-import { s as setPx, w as getFixed } from "../../chunks/util.89913643.js";
-import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.77ec6792.js";
+import { s as setPx, w as getFixed } from "../../chunks/util.b0d0b0ad.mjs";
+import { n as normalizeComponent } from "../../chunks/vueComponentNormalizer.9c6b8b3d.mjs";
 var render = function() {
-  var _vm = this, _h = _vm.$createElement, _c = _vm._self._c || _h;
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
   return _c("div", {
     class: {
       "avue-draggable__active": (_vm.active || _vm.overActive) && !_vm.readonly,
@@ -10,14 +12,17 @@ var render = function() {
     },
     style: _vm.styleName,
     on: {
-      mousedown: function($event) {
-        return $event.stopPropagation(), _vm.handleMove.apply(null, arguments);
+      "mousedown": function($event) {
+        $event.stopPropagation();
+        return _vm.handleMove.apply(null, arguments);
       },
-      mouseover: function($event) {
-        return $event.stopPropagation(), _vm.handleOver.apply(null, arguments);
+      "mouseover": function($event) {
+        $event.stopPropagation();
+        return _vm.handleOver.apply(null, arguments);
       },
-      mouseout: function($event) {
-        return $event.stopPropagation(), _vm.handleOut.apply(null, arguments);
+      "mouseout": function($event) {
+        $event.stopPropagation();
+        return _vm.handleOut.apply(null, arguments);
       }
     }
   }, [_c("ElInput", {
@@ -42,18 +47,19 @@ var render = function() {
   }), _c("div", {
     staticClass: "avue-draggable__line['label'])",
     style: _vm.styleLabelName
-  }, [_vm._v(" " + _vm._s(_vm.baseLeft) + "," + _vm._s(_vm.baseTop) + " ")])] : _vm._e(), _vm.readonly ? _vm._e() : [_vm._l(_vm.rangeList, function(item, s) {
+  }, [_vm._v(" " + _vm._s(_vm.baseLeft) + "," + _vm._s(_vm.baseTop) + " ")])] : _vm._e(), !_vm.readonly ? [_vm._l(_vm.rangeList, function(item, s) {
     return [_vm.active ? _c("div", {
       key: s,
       staticClass: "avue-draggable__range[item.classname])",
       style: [_vm.styleRangeName, _vm.getRangeStyle(item.classname)],
       on: {
-        mousedown: function($event) {
-          return $event.stopPropagation(), _vm.rangeMove($event, item.classname);
+        "mousedown": function($event) {
+          $event.stopPropagation();
+          return _vm.rangeMove($event, item.classname);
         }
       }
     }) : _vm._e()];
-  })], _c("div", {
+  })] : _vm._e(), _c("div", {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -63,15 +69,17 @@ var render = function() {
     staticClass: "avue-draggable__menu",
     style: _vm.styleMenuName
   }, [_vm._t("menu", null, {
-    zIndex: _vm.zIndex,
-    index: _vm.index
+    "zIndex": _vm.zIndex,
+    "index": _vm.index
   })], 2), _c("div", {
     ref: "item",
     staticClass: "avue-draggable__item"
   }, [_vm._t("default")], 2), !_vm.disabled && _vm.mask ? _c("div", {
     staticClass: "avue-draggable__mask"
   }) : _vm._e()], 2)], 1);
-}, staticRenderFns = [];
+};
+var staticRenderFns = [];
+const FyDraggable_vue_vue_type_style_index_0_lang = "";
 const __vue2_script = {
   name: "FyDraggable",
   props: {
@@ -80,7 +88,7 @@ const __vue2_script = {
     },
     mask: {
       type: Boolean,
-      default: !0
+      default: true
     },
     scale: {
       type: Number,
@@ -88,19 +96,19 @@ const __vue2_script = {
     },
     readonly: {
       type: Boolean,
-      default: !1
+      default: false
     },
     resize: {
       type: Boolean,
-      default: !0
+      default: true
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     lock: {
       type: Boolean,
-      default: !1
+      default: false
     },
     step: {
       type: Number,
@@ -127,17 +135,17 @@ const __vue2_script = {
   },
   data() {
     return {
-      first: !0,
+      first: true,
       value: "",
       baseWidth: 0,
       baseHeight: 0,
       baseLeft: 0,
       baseTop: 0,
       children: {},
-      moveActive: !1,
-      overActive: !1,
-      rangeActive: !1,
-      active: !1,
+      moveActive: false,
+      overActive: false,
+      rangeActive: false,
+      active: false,
       keyDown: null,
       rangeList: [
         {
@@ -196,12 +204,17 @@ const __vue2_script = {
     },
     styleName() {
       return Object.assign(
-        (() => this.active ? Object.assign(
-          {
-            zIndex: 9999
-          },
-          this.styleLineName
-        ) : { zIndex: this.zIndex })(),
+        (() => {
+          if (this.active) {
+            return Object.assign(
+              {
+                zIndex: 9999
+              },
+              this.styleLineName
+            );
+          }
+          return { zIndex: this.zIndex };
+        })(),
         {
           top: setPx(this.baseTop),
           left: setPx(this.baseLeft),
@@ -213,7 +226,11 @@ const __vue2_script = {
   },
   watch: {
     active(val) {
-      val ? this.handleKeydown() : document.onkeydown = this.keyDown;
+      if (val) {
+        this.handleKeydown();
+      } else {
+        document.onkeydown = this.keyDown;
+      }
     },
     width(val) {
       this.baseWidth = getFixed(val) || this.children.offsetWidth;
@@ -228,16 +245,26 @@ const __vue2_script = {
       this.baseTop = getFixed(val);
     },
     baseWidth(val) {
-      this.$refs.wrapper.style.width = setPx(val), this.resize && this.children.style && (this.children.style.width = setPx(val));
+      this.$refs.wrapper.style.width = setPx(val);
+      if (this.resize && this.children.style) {
+        this.children.style.width = setPx(val);
+      }
     },
     baseHeight(val) {
-      this.$refs.wrapper.style.height = setPx(val), this.resize && this.children.style && (this.children.style.height = setPx(val));
+      this.$refs.wrapper.style.height = setPx(val);
+      if (this.resize && this.children.style) {
+        this.children.style.height = setPx(val);
+      }
     },
     baseLeft(n, o) {
-      this.first || this.setMove(n - o, 0);
+      if (this.first)
+        return;
+      this.setMove(n - o, 0);
     },
     baseTop(n, o) {
-      this.first || this.setMove(0, n - o);
+      if (this.first)
+        return;
+      this.setMove(0, n - o);
     }
   },
   mounted() {
@@ -245,8 +272,14 @@ const __vue2_script = {
   },
   methods: {
     init() {
-      this.children = this.$refs.item.firstChild, this.baseWidth = getFixed(this.width) || this.children.offsetWidth, this.baseHeight = getFixed(this.height) || this.children.offsetHeight, this.baseLeft = getFixed(this.left), this.baseTop = getFixed(this.top), this.keyDown = document.onkeydown, this.$nextTick(() => {
-        this.first = !1;
+      this.children = this.$refs.item.firstChild;
+      this.baseWidth = getFixed(this.width) || this.children.offsetWidth;
+      this.baseHeight = getFixed(this.height) || this.children.offsetHeight;
+      this.baseLeft = getFixed(this.left);
+      this.baseTop = getFixed(this.top);
+      this.keyDown = document.onkeydown;
+      this.$nextTick(() => {
+        this.first = false;
       });
     },
     setMove(left, top) {
@@ -263,10 +296,13 @@ const __vue2_script = {
       this.baseTop = top;
     },
     getRangeStyle(postion) {
-      const calc = 10 * this.scaleVal / 2, result = {};
-      return postion.split("-").forEach((ele) => {
+      const calc = 10 * this.scaleVal / 2;
+      const result = {};
+      const list = postion.split("-");
+      list.forEach((ele) => {
         result[ele] = setPx(-calc);
-      }), result;
+      });
+      return result;
     },
     setOverActive(val) {
       this.overActive = val;
@@ -277,24 +313,78 @@ const __vue2_script = {
     rangeMove(e, position) {
       if (this.disabled || this.lock)
         return;
-      let x, y, xp, yp, xc, yc;
-      this.rangeActive = !0, this.handleMouseDown();
-      let disX = e.clientX, disY = e.clientY;
+      let x, y;
+      let xp, yp;
+      let xc, yc;
+      this.rangeActive = true;
+      this.handleMouseDown();
+      let disX = e.clientX;
+      let disY = e.clientY;
       document.onmousemove = (e2) => {
-        this.moveActive = !0, position === "right" ? (x = !0, y = !1) : position === "left" ? (x = !0, xp = !0, xc = !0, y = !1) : position === "top" ? (x = !1, y = !0, yp = !0, yc = !0) : position === "bottom" ? (x = !1, y = !0) : position === "bottom-right" ? (x = !0, y = !0) : position === "bottom-left" ? (x = !0, y = !0, xp = !0, xc = !0) : position === "top-right" ? (x = !0, y = !0, yp = !0, yc = !0) : position === "top-left" && (x = !0, y = !0, xp = !0, xc = !0, yp = !0, yc = !0);
-        const left = e2.clientX - disX, top = e2.clientY - disY;
-        if (disX = e2.clientX, disY = e2.clientY, x) {
+        this.moveActive = true;
+        if (position === "right") {
+          x = true;
+          y = false;
+        } else if (position === "left") {
+          x = true;
+          xp = true;
+          xc = true;
+          y = false;
+        } else if (position === "top") {
+          x = false;
+          y = true;
+          yp = true;
+          yc = true;
+        } else if (position === "bottom") {
+          x = false;
+          y = true;
+        } else if (position === "bottom-right") {
+          x = true;
+          y = true;
+        } else if (position === "bottom-left") {
+          x = true;
+          y = true;
+          xp = true;
+          xc = true;
+        } else if (position === "top-right") {
+          x = true;
+          y = true;
+          yp = true;
+          yc = true;
+        } else if (position === "top-left") {
+          x = true;
+          y = true;
+          xp = true;
+          xc = true;
+          yp = true;
+          yc = true;
+        }
+        const left = e2.clientX - disX;
+        const top = e2.clientY - disY;
+        disX = e2.clientX;
+        disY = e2.clientY;
+        if (x) {
           let calc = left * this.step;
-          xc && (calc = -calc), xp && (this.baseLeft = getFixed(this.baseLeft - calc)), this.baseWidth = getFixed(this.baseWidth + calc);
+          if (xc)
+            calc = -calc;
+          if (xp)
+            this.baseLeft = getFixed(this.baseLeft - calc);
+          this.baseWidth = getFixed(this.baseWidth + calc);
         }
         if (y) {
           let calc = top * this.step;
-          yc && (calc = -calc), yp && (this.baseTop = getFixed(this.baseTop - calc)), this.baseHeight = getFixed(this.baseHeight + calc);
+          if (yc)
+            calc = -calc;
+          if (yp)
+            this.baseTop = getFixed(this.baseTop - calc);
+          this.baseHeight = getFixed(this.baseHeight + calc);
         }
-      }, this.handleClear();
+      };
+      this.handleClear();
     },
     handleOut() {
-      this.overActive = !1, this.$emit("out", {
+      this.overActive = false;
+      this.$emit("out", {
         index: this.index,
         width: this.baseWidth,
         height: this.baseHeight,
@@ -303,45 +393,74 @@ const __vue2_script = {
       });
     },
     handleOver() {
-      this.disabled || (this.overActive = !0, this.$emit("over", {
+      if (this.disabled)
+        return;
+      this.overActive = true;
+      this.$emit("over", {
         index: this.index,
         width: this.baseWidth,
         height: this.baseHeight,
         left: this.baseLeft,
         top: this.baseTop
-      }));
+      });
     },
     handleMove(e) {
       if (this.disabled || this.lock)
         return;
       setTimeout(() => {
         this.$refs.input.focus();
-      }), this.active = !0, this.handleMouseDown();
-      let disX = e.clientX, disY = e.clientY;
+      });
+      this.active = true;
+      this.handleMouseDown();
+      let disX = e.clientX;
+      let disY = e.clientY;
       document.onmousemove = (e2) => {
-        const left = e2.clientX - disX, top = e2.clientY - disY;
-        disX = e2.clientX, disY = e2.clientY, this.baseLeft = getFixed(this.baseLeft + left * this.step), this.baseTop = getFixed(this.baseTop + top * this.step);
-      }, this.handleClear();
+        const left = e2.clientX - disX;
+        const top = e2.clientY - disY;
+        disX = e2.clientX;
+        disY = e2.clientY;
+        this.baseLeft = getFixed(this.baseLeft + left * this.step);
+        this.baseTop = getFixed(this.baseTop + top * this.step);
+      };
+      this.handleClear();
     },
     handleClear() {
       document.onmouseup = () => {
-        document.onmousemove = null, document.onmouseup = null, this.handleMouseUp();
+        document.onmousemove = null;
+        document.onmouseup = null;
+        this.handleMouseUp();
       };
     },
     handleKeydown() {
       document.onkeydown = (event) => {
-        const e = event || window.event || arguments.callee.caller.arguments[0], step = 1 * this.step;
-        this.$refs.input.focused && (e && e.keyCode == 38 ? this.baseTop = getFixed(this.baseTop - step) : e && e.keyCode == 37 ? this.baseLeft = getFixed(this.baseLeft - step) : e && e.keyCode == 40 ? this.baseTop = getFixed(this.baseTop + step) : e && e.keyCode == 39 && (this.baseLeft = getFixed(this.baseLeft + step)), event.stopPropagation(), event.preventDefault(), this.$emit("blur", {
-          index: this.index,
-          width: this.baseWidth,
-          height: this.baseHeight,
-          left: this.baseLeft,
-          top: this.baseTop
-        }), this.keyDown && this.keyDown(event));
+        const e = event || window.event || arguments.callee.caller.arguments[0];
+        const step = 1 * this.step;
+        if (this.$refs.input.focused) {
+          if (e && e.keyCode == 38) {
+            this.baseTop = getFixed(this.baseTop - step);
+          } else if (e && e.keyCode == 37) {
+            this.baseLeft = getFixed(this.baseLeft - step);
+          } else if (e && e.keyCode == 40) {
+            this.baseTop = getFixed(this.baseTop + step);
+          } else if (e && e.keyCode == 39) {
+            this.baseLeft = getFixed(this.baseLeft + step);
+          }
+          event.stopPropagation();
+          event.preventDefault();
+          this.$emit("blur", {
+            index: this.index,
+            width: this.baseWidth,
+            height: this.baseHeight,
+            left: this.baseLeft,
+            top: this.baseTop
+          });
+          this.keyDown && this.keyDown(event);
+        }
       };
     },
     handleMouseDown() {
-      this.moveActive = !0, this.$emit("focus", {
+      this.moveActive = true;
+      this.$emit("focus", {
         index: this.index,
         width: this.baseWidth,
         height: this.baseHeight,
@@ -350,7 +469,9 @@ const __vue2_script = {
       });
     },
     handleMouseUp() {
-      this.moveActive = !1, this.rangeActive = !1, this.$emit("blur", {
+      this.moveActive = false;
+      this.rangeActive = false;
+      this.$emit("blur", {
         index: this.index,
         width: this.baseWidth,
         height: this.baseHeight,
@@ -359,20 +480,22 @@ const __vue2_script = {
       });
     }
   }
-}, __cssModules = {};
+};
+const __cssModules = {};
 var __component__ = /* @__PURE__ */ normalizeComponent(
   __vue2_script,
   render,
   staticRenderFns,
-  !1,
+  false,
   __vue2_injectStyles,
   null,
   null,
   null
 );
 function __vue2_injectStyles(context) {
-  for (let o in __cssModules)
+  for (let o in __cssModules) {
     this[o] = __cssModules[o];
+  }
 }
 const FyDraggable = /* @__PURE__ */ function() {
   return __component__.exports;

package/dist/components/fy-draggable/style.css

@@ -1 +1,136 @@
-.avue-draggable{padding:10px;position:absolute;cursor:move;-webkit-tap-highlight-color:transparent;user-select:none}.avue-draggable__focus{opacity:0;position:absolute!important;top:0;left:0;z-index:-1024}.avue-draggable__mask{width:100%;height:100%;border:0;position:absolute;inset:0;z-index:1}.avue-draggable--active{cursor:move;border:1px dashed #09f;background-color:#73aae580}.avue-draggable--move{opacity:.6;background-color:#73aae580}.avue-draggable--click{cursor:pointer}.avue-draggable__line--left{position:absolute;border-top:1px dashed #09f;width:10000px;height:0;top:0;transform:translate(-100%)}.avue-draggable__line--top{position:absolute;border-left:1px dashed #09f;width:0;height:10000px;left:0;transform:translateY(-100%)}.avue-draggable__line--label{top:-5px;left:-8px;position:absolute;padding:5px;transform:translate(-100%,-100%);color:#09f;font-size:18px;white-space:nowrap;cursor:move}.avue-draggable__menu{position:absolute;top:0;left:0;background-color:#409eff;font-size:25px;color:#fff;z-index:9999;cursor:pointer}.avue-draggable__range{position:absolute;width:10px;height:10px;border-radius:100%;z-index:9999;background-color:#09f}.avue-draggable__range--left,.avue-draggable__range--right{top:50%;transform:translateY(-50%)}.avue-draggable__range--left:hover,.avue-draggable__range--right:hover{cursor:ew-resize}.avue-draggable__range--left{left:-6px}.avue-draggable__range--right{right:-6px}.avue-draggable__range--top,.avue-draggable__range--bottom{left:50%;transform:translate(-50%)}.avue-draggable__range--top:hover,.avue-draggable__range--bottom:hover{cursor:ns-resize}.avue-draggable__range--top{top:-6px}.avue-draggable__range--bottom{bottom:-6px}.avue-draggable__range--bottom-right:hover,.avue-draggable__range--top-left:hover{cursor:nwse-resize}.avue-draggable__range--bottom-left:hover,.avue-draggable__range--top-right:hover{cursor:nesw-resize}.avue-draggable__range--top-right{top:-6px;right:-6px}.avue-draggable__range--top-left{top:-6px;left:-6px}.avue-draggable__range--bottom-right{bottom:-6px;right:-6px}.avue-draggable__range--bottom-left{bottom:-6px;left:-6px}
+/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
+/* 应用头部高度 */
+/* 页面宽度 */
+/* 侧栏宽度 */
+/* 标签高度 */
+/* 页面头部工具条高度 */
+.avue-draggable {
+  padding: 10px;
+  position: absolute;
+  cursor: move;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+.avue-draggable__focus {
+  opacity: 0;
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  z-index: -1024;
+}
+.avue-draggable__mask {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+}
+.avue-draggable--active {
+  cursor: move;
+  border: 1px dashed #09f;
+  background-color: rgba(115, 170, 229, 0.5);
+}
+.avue-draggable--move {
+  opacity: 0.6;
+  background-color: rgba(115, 170, 229, 0.5);
+}
+.avue-draggable--click {
+  cursor: pointer;
+}
+.avue-draggable__line--left {
+  position: absolute;
+  border-top: 1px dashed #09f;
+  width: 10000px;
+  height: 0;
+  top: 0;
+  transform: translateX(-100%);
+}
+.avue-draggable__line--top {
+  position: absolute;
+  border-left: 1px dashed #09f;
+  width: 0;
+  height: 10000px;
+  left: 0;
+  transform: translateY(-100%);
+}
+.avue-draggable__line--label {
+  top: -5px;
+  left: -8px;
+  position: absolute;
+  padding: 5px;
+  transform: translate(-100%, -100%);
+  color: #09f;
+  font-size: 18px;
+  white-space: nowrap;
+  cursor: move;
+}
+.avue-draggable__menu {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: #409EFF;
+  font-size: 25px;
+  color: #fff;
+  z-index: 9999;
+  cursor: pointer;
+}
+.avue-draggable__range {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  z-index: 9999;
+  background-color: #09f;
+}
+.avue-draggable__range--left, .avue-draggable__range--right {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.avue-draggable__range--left:hover, .avue-draggable__range--right:hover {
+  cursor: ew-resize;
+}
+.avue-draggable__range--left {
+  left: -6px;
+}
+.avue-draggable__range--right {
+  right: -6px;
+}
+.avue-draggable__range--top, .avue-draggable__range--bottom {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.avue-draggable__range--top:hover, .avue-draggable__range--bottom:hover {
+  cursor: ns-resize;
+}
+.avue-draggable__range--top {
+  top: -6px;
+}
+.avue-draggable__range--bottom {
+  bottom: -6px;
+}
+.avue-draggable__range--bottom-right:hover, .avue-draggable__range--top-left:hover {
+  cursor: nwse-resize;
+}
+.avue-draggable__range--bottom-left:hover, .avue-draggable__range--top-right:hover {
+  cursor: nesw-resize;
+}
+.avue-draggable__range--top-right {
+  top: -6px;
+  right: -6px;
+}
+.avue-draggable__range--top-left {
+  top: -6px;
+  left: -6px;
+}
+.avue-draggable__range--bottom-right {
+  bottom: -6px;
+  right: -6px;
+}
+.avue-draggable__range--bottom-left {
+  bottom: -6px;
+  left: -6px;
+}