@web-utils/component 2.7.35 → 2.7.37

package/dist/components/fy-draggable/index.mjs

@@ -0,0 +1,382 @@
+import { s as l, w as a } from "../../chunks/util.eca708b6.mjs";
+import { n as v } from "../../chunks/vueComponentNormalizer.446f5dc4.mjs";
+var g = function() {
+  var e = this, t = e.$createElement, s = e._self._c || t;
+  return s("div", {
+    class: {
+      "avue-draggable__active": (e.active || e.overActive) && !e.readonly,
+      "avue-draggable__move": e.moveActive,
+      "avue-draggable__click": e.disabled
+    },
+    style: e.styleName,
+    on: {
+      mousedown: function(i) {
+        return i.stopPropagation(), e.handleMove.apply(null, arguments);
+      },
+      mouseover: function(i) {
+        return i.stopPropagation(), e.handleOver.apply(null, arguments);
+      },
+      mouseout: function(i) {
+        return i.stopPropagation(), e.handleOut.apply(null, arguments);
+      }
+    }
+  }, [s("ElInput", {
+    ref: "input",
+    staticClass: "avue-draggable__focus",
+    model: {
+      value: e.value,
+      callback: function(i) {
+        e.value = i;
+      },
+      expression: "value"
+    }
+  }), s("div", {
+    ref: "wrapper",
+    staticClass: "avue-draggable__wrapper"
+  }, [(e.active || e.overActive || e.moveActive) && !e.readonly ? [s("div", {
+    staticClass: "avue-draggable__line['left'])",
+    style: e.styleLineName
+  }), s("div", {
+    staticClass: "avue-draggable__line['top'])",
+    style: e.styleLineName
+  }), s("div", {
+    staticClass: "avue-draggable__line['label'])",
+    style: e.styleLabelName
+  }, [e._v(" " + e._s(e.baseLeft) + "," + e._s(e.baseTop) + " ")])] : e._e(), e.readonly ? e._e() : [e._l(e.rangeList, function(i, h) {
+    return [e.active ? s("div", {
+      key: h,
+      staticClass: "avue-draggable__range[item.classname])",
+      style: [e.styleRangeName, e.getRangeStyle(i.classname)],
+      on: {
+        mousedown: function(n) {
+          return n.stopPropagation(), e.rangeMove(n, i.classname);
+        }
+      }
+    }) : e._e()];
+  })], s("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: e.active || e.overActive,
+      expression: "active || overActive"
+    }],
+    staticClass: "avue-draggable__menu",
+    style: e.styleMenuName
+  }, [e._t("menu", null, {
+    zIndex: e.zIndex,
+    index: e.index
+  })], 2), s("div", {
+    ref: "item",
+    staticClass: "avue-draggable__item"
+  }, [e._t("default")], 2), !e.disabled && e.mask ? s("div", {
+    staticClass: "avue-draggable__mask"
+  }) : e._e()], 2)], 1);
+}, y = [];
+const _ = {
+  name: "FyDraggable",
+  props: {
+    index: {
+      type: [String, Number]
+    },
+    mask: {
+      type: Boolean,
+      default: !0
+    },
+    scale: {
+      type: Number,
+      default: 1
+    },
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    resize: {
+      type: Boolean,
+      default: !0
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    lock: {
+      type: Boolean,
+      default: !1
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 1
+    },
+    left: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      first: !0,
+      value: "",
+      baseWidth: 0,
+      baseHeight: 0,
+      baseLeft: 0,
+      baseTop: 0,
+      children: {},
+      moveActive: !1,
+      overActive: !1,
+      rangeActive: !1,
+      active: !1,
+      keyDown: null,
+      rangeList: [
+        {
+          classname: "left"
+        },
+        {
+          classname: "right"
+        },
+        {
+          classname: "top"
+        },
+        {
+          classname: "bottom"
+        },
+        {
+          classname: "top-left"
+        },
+        {
+          classname: "top-right"
+        },
+        {
+          classname: "bottom-left"
+        },
+        {
+          classname: "bottom-right"
+        }
+      ]
+    };
+  },
+  computed: {
+    scaleVal() {
+      return this.scale;
+    },
+    styleMenuName() {
+      return {
+        transformOrigin: "0 0",
+        transform: `scale(${this.scaleVal})`
+      };
+    },
+    styleLineName() {
+      return {
+        borderWidth: l(this.scaleVal)
+      };
+    },
+    styleRangeName() {
+      const e = 10 * this.scaleVal;
+      return {
+        width: l(e),
+        height: l(e)
+      };
+    },
+    styleLabelName() {
+      return {
+        fontSize: l(18 * this.scaleVal)
+      };
+    },
+    styleName() {
+      return Object.assign(
+        (() => this.active ? Object.assign(
+          {
+            zIndex: 9999
+          },
+          this.styleLineName
+        ) : { zIndex: this.zIndex })(),
+        {
+          top: l(this.baseTop),
+          left: l(this.baseLeft),
+          width: l(this.baseWidth),
+          height: l(this.baseHeight)
+        }
+      );
+    }
+  },
+  watch: {
+    active(e) {
+      e ? this.handleKeydown() : document.onkeydown = this.keyDown;
+    },
+    width(e) {
+      this.baseWidth = a(e) || this.children.offsetWidth;
+    },
+    height(e) {
+      this.baseHeight = a(e) || this.children.offsetHeight;
+    },
+    left(e) {
+      this.baseLeft = a(e);
+    },
+    top(e) {
+      this.baseTop = a(e);
+    },
+    baseWidth(e) {
+      this.$refs.wrapper.style.width = l(e), this.resize && this.children.style && (this.children.style.width = l(e));
+    },
+    baseHeight(e) {
+      this.$refs.wrapper.style.height = l(e), this.resize && this.children.style && (this.children.style.height = l(e));
+    },
+    baseLeft(e, t) {
+      this.first || this.setMove(e - t, 0);
+    },
+    baseTop(e, t) {
+      this.first || this.setMove(0, e - t);
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.children = this.$refs.item.firstChild, this.baseWidth = a(this.width) || this.children.offsetWidth, this.baseHeight = a(this.height) || this.children.offsetHeight, this.baseLeft = a(this.left), this.baseTop = a(this.top), this.keyDown = document.onkeydown, this.$nextTick(() => {
+        this.first = !1;
+      });
+    },
+    setMove(e, t) {
+      this.$emit("move", {
+        index: this.index,
+        left: e,
+        top: t
+      });
+    },
+    setLeft(e) {
+      this.baseLeft = e;
+    },
+    setTop(e) {
+      this.baseTop = e;
+    },
+    getRangeStyle(e) {
+      const t = 10 * this.scaleVal / 2, s = {};
+      return e.split("-").forEach((h) => {
+        s[h] = l(-t);
+      }), s;
+    },
+    setOverActive(e) {
+      this.overActive = e;
+    },
+    setActive(e) {
+      this.active = e;
+    },
+    rangeMove(e, t) {
+      if (this.disabled || this.lock)
+        return;
+      let s, i, h, n, o, u;
+      this.rangeActive = !0, this.handleMouseDown();
+      let c = e.clientX, f = e.clientY;
+      document.onmousemove = (d) => {
+        this.moveActive = !0, t === "right" ? (s = !0, i = !1) : t === "left" ? (s = !0, h = !0, o = !0, i = !1) : t === "top" ? (s = !1, i = !0, n = !0, u = !0) : t === "bottom" ? (s = !1, i = !0) : t === "bottom-right" ? (s = !0, i = !0) : t === "bottom-left" ? (s = !0, i = !0, h = !0, o = !0) : t === "top-right" ? (s = !0, i = !0, n = !0, u = !0) : t === "top-left" && (s = !0, i = !0, h = !0, o = !0, n = !0, u = !0);
+        const m = d.clientX - c, p = d.clientY - f;
+        if (c = d.clientX, f = d.clientY, s) {
+          let r = m * this.step;
+          o && (r = -r), h && (this.baseLeft = a(this.baseLeft - r)), this.baseWidth = a(this.baseWidth + r);
+        }
+        if (i) {
+          let r = p * this.step;
+          u && (r = -r), n && (this.baseTop = a(this.baseTop - r)), this.baseHeight = a(this.baseHeight + r);
+        }
+      }, this.handleClear();
+    },
+    handleOut() {
+      this.overActive = !1, this.$emit("out", {
+        index: this.index,
+        width: this.baseWidth,
+        height: this.baseHeight,
+        left: this.baseLeft,
+        top: this.baseTop
+      });
+    },
+    handleOver() {
+      this.disabled || (this.overActive = !0, 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 t = e.clientX, s = e.clientY;
+      document.onmousemove = (i) => {
+        const h = i.clientX - t, n = i.clientY - s;
+        t = i.clientX, s = i.clientY, this.baseLeft = a(this.baseLeft + h * this.step), this.baseTop = a(this.baseTop + n * this.step);
+      }, this.handleClear();
+    },
+    handleClear() {
+      document.onmouseup = () => {
+        document.onmousemove = null, document.onmouseup = null, this.handleMouseUp();
+      };
+    },
+    handleKeydown() {
+      document.onkeydown = (e) => {
+        const t = e || window.event || arguments.callee.caller.arguments[0], s = 1 * this.step;
+        this.$refs.input.focused && (t && t.keyCode == 38 ? this.baseTop = a(this.baseTop - s) : t && t.keyCode == 37 ? this.baseLeft = a(this.baseLeft - s) : t && t.keyCode == 40 ? this.baseTop = a(this.baseTop + s) : t && t.keyCode == 39 && (this.baseLeft = a(this.baseLeft + s)), e.stopPropagation(), e.preventDefault(), this.$emit("blur", {
+          index: this.index,
+          width: this.baseWidth,
+          height: this.baseHeight,
+          left: this.baseLeft,
+          top: this.baseTop
+        }), this.keyDown && this.keyDown(e));
+      };
+    },
+    handleMouseDown() {
+      this.moveActive = !0, this.$emit("focus", {
+        index: this.index,
+        width: this.baseWidth,
+        height: this.baseHeight,
+        left: this.baseLeft,
+        top: this.baseTop
+      });
+    },
+    handleMouseUp() {
+      this.moveActive = !1, this.rangeActive = !1, this.$emit("blur", {
+        index: this.index,
+        width: this.baseWidth,
+        height: this.baseHeight,
+        left: this.baseLeft,
+        top: this.baseTop
+      });
+    }
+  }
+}, b = {};
+var w = /* @__PURE__ */ v(
+  _,
+  g,
+  y,
+  !1,
+  x,
+  null,
+  null,
+  null
+);
+function x(e) {
+  for (let t in b)
+    this[t] = b[t];
+}
+const k = /* @__PURE__ */ function() {
+  return w.exports;
+}();
+export {
+  k as default
+};

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

@@ -1,136 +1 @@
-/* 全局公共颜色配置 */ /* 全局公共尺寸配置 */
-/* 应用头部高度 */
-/* 页面宽度 */
-/* 侧栏宽度 */
-/* 标签高度 */
-/* 页面头部工具条高度 */
-.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;
-}
+.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}