@web-utils/component 4.0.15 → 5.0.0-beta01

package/fy-draggable/index.mjs

@@ -1,319 +1,323 @@
-import p from "element-ui/lib/input";
-import { y as a, s as l } from "../chunks/util.DI42t5GU.mjs";
-import { n as v } from "../chunks/_plugin-vue2_normalizer.CeySl7Fu.mjs";
-const g = {
-  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 t = 10 * this.scaleVal;
-      return {
-        width: l(t),
-        height: l(t)
-      };
-    },
-    styleLabelName() {
-      return {
-        fontSize: l(18 * this.scaleVal)
-      };
-    },
-    styleName() {
-      return Object.assign(
-        this.active ? {
-          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(t) {
-      t ? this.handleKeydown() : document.onkeydown = this.keyDown;
-    },
-    width(t) {
-      this.baseWidth = a(t) || this.children.offsetWidth;
-    },
-    height(t) {
-      this.baseHeight = a(t) || this.children.offsetHeight;
-    },
-    left(t) {
-      this.baseLeft = a(t);
-    },
-    top(t) {
-      this.baseTop = a(t);
-    },
-    baseWidth(t) {
-      this.$refs.wrapper.style.width = l(t), this.resize && this.children.style && (this.children.style.width = l(t));
-    },
-    baseHeight(t) {
-      this.$refs.wrapper.style.height = l(t), this.resize && this.children.style && (this.children.style.height = l(t));
-    },
-    baseLeft(t, e) {
-      this.first || this.setMove(t - e, 0);
-    },
-    baseTop(t, e) {
-      this.first || this.setMove(0, t - e);
-    }
-  },
-  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(t, e) {
-      this.$emit("move", {
-        index: this.index,
-        left: t,
-        top: e
-      });
-    },
-    setLeft(t) {
-      this.baseLeft = t;
-    },
-    setTop(t) {
-      this.baseTop = t;
-    },
-    getRangeStyle(t) {
-      const e = 10 * this.scaleVal / 2, s = {};
-      return t.split("-").forEach((h) => {
-        s[h] = l(-e);
-      }), s;
-    },
-    setOverActive(t) {
-      this.overActive = t;
-    },
-    setActive(t) {
-      this.active = t;
-    },
-    rangeMove(t, e) {
-      if (this.disabled || this.lock) return;
-      let s, i, h, n, o, d;
-      this.rangeActive = !0, this.handleMouseDown();
-      let c = t.clientX, f = t.clientY;
-      document.onmousemove = (u) => {
-        this.moveActive = !0, e === "right" ? (s = !0, i = !1) : e === "left" ? (s = !0, h = !0, o = !0, i = !1) : e === "top" ? (s = !1, i = !0, n = !0, d = !0) : e === "bottom" ? (s = !1, i = !0) : e === "bottom-right" ? (s = !0, i = !0) : e === "bottom-left" ? (s = !0, i = !0, h = !0, o = !0) : e === "top-right" ? (s = !0, i = !0, n = !0, d = !0) : e === "top-left" && (s = !0, i = !0, h = !0, o = !0, n = !0, d = !0);
-        const b = u.clientX - c, m = u.clientY - f;
-        if (c = u.clientX, f = u.clientY, s) {
-          let r = b * this.step;
-          o && (r = -r), h && (this.baseLeft = a(this.baseLeft - r)), this.baseWidth = a(this.baseWidth + r);
-        }
-        if (i) {
-          let r = m * this.step;
-          d && (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(t) {
-      if (this.disabled || this.lock) return;
-      setTimeout(() => {
-        this.$refs.input.focus();
-      }), this.active = !0, this.handleMouseDown();
-      let e = t.clientX, s = t.clientY;
-      document.onmousemove = (i) => {
-        const h = i.clientX - e, n = i.clientY - s;
-        e = 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 = (t) => {
-        var i;
-        const e = t || window.event, s = this.step;
-        this.$refs.input.focused && (e && e.keyCode === 38 ? this.baseTop = a(this.baseTop - s) : e && e.keyCode === 37 ? this.baseLeft = a(this.baseLeft - s) : e && e.keyCode === 40 ? this.baseTop = a(this.baseTop + s) : e && e.keyCode === 39 && (this.baseLeft = a(this.baseLeft + s)), t.stopPropagation(), t.preventDefault(), this.$emit("blur", {
-          index: this.index,
-          width: this.baseWidth,
-          height: this.baseHeight,
-          left: this.baseLeft,
-          top: this.baseTop
-        }), (i = this.keyDown) == null || i.call(this, t));
-      };
-    },
-    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
-      });
-    }
-  }
-};
-var y = function() {
-  var e = this, s = e._self._c;
-  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(p, { 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);
-}, _ = [], w = /* @__PURE__ */ v(
-  g,
-  y,
-  _,
-  !1,
-  null,
-  null
-);
-const k = w.exports;
-export {
-  k as default
+import { t as e } from "../chunks/_plugin-vue_export-helper.7vrlOII_.mjs";
+import { p as t, x as n } from "../chunks/util.g-WQEec9.mjs";
+import { Fragment as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p, toDisplayString as m, vShow as h, withDirectives as g, withModifiers as _ } from "vue";
+//#region src/components/draggable/FyDraggable.vue
+var v = {
+	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: n(this.scaleVal) };
+		},
+		styleRangeName() {
+			let e = 10 * this.scaleVal;
+			return {
+				width: n(e),
+				height: n(e)
+			};
+		},
+		styleLabelName() {
+			return { fontSize: n(18 * this.scaleVal) };
+		},
+		styleName() {
+			return Object.assign(this.active ? {
+				zIndex: 9999,
+				...this.styleLineName
+			} : { zIndex: this.zIndex }, {
+				top: n(this.baseTop),
+				left: n(this.baseLeft),
+				width: n(this.baseWidth),
+				height: n(this.baseHeight)
+			});
+		}
+	},
+	watch: {
+		active(e) {
+			e ? this.handleKeydown() : document.onkeydown = this.keyDown;
+		},
+		width(e) {
+			this.baseWidth = t(e) || this.children.offsetWidth;
+		},
+		height(e) {
+			this.baseHeight = t(e) || this.children.offsetHeight;
+		},
+		left(e) {
+			this.baseLeft = t(e);
+		},
+		top(e) {
+			this.baseTop = t(e);
+		},
+		baseWidth(e) {
+			this.$refs.wrapper.style.width = n(e), this.resize && this.children.style && (this.children.style.width = n(e));
+		},
+		baseHeight(e) {
+			this.$refs.wrapper.style.height = n(e), this.resize && this.children.style && (this.children.style.height = n(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 = t(this.width) || this.children.offsetWidth, this.baseHeight = t(this.height) || this.children.offsetHeight, this.baseLeft = t(this.left), this.baseTop = t(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) {
+			let t = 10 * this.scaleVal / 2, r = {};
+			return e.split("-").forEach((e) => {
+				r[e] = n(-t);
+			}), r;
+		},
+		setOverActive(e) {
+			this.overActive = e;
+		},
+		setActive(e) {
+			this.active = e;
+		},
+		rangeMove(e, n) {
+			if (this.disabled || this.lock) return;
+			let r, i, a, o, s, c;
+			this.rangeActive = !0, this.handleMouseDown();
+			let l = e.clientX, u = e.clientY;
+			document.onmousemove = (e) => {
+				this.moveActive = !0, n === "right" ? (r = !0, i = !1) : n === "left" ? (r = !0, a = !0, s = !0, i = !1) : n === "top" ? (r = !1, i = !0, o = !0, c = !0) : n === "bottom" ? (r = !1, i = !0) : n === "bottom-right" ? (r = !0, i = !0) : n === "bottom-left" ? (r = !0, i = !0, a = !0, s = !0) : n === "top-right" ? (r = !0, i = !0, o = !0, c = !0) : n === "top-left" && (r = !0, i = !0, a = !0, s = !0, o = !0, c = !0);
+				let d = e.clientX - l, f = e.clientY - u;
+				if (l = e.clientX, u = e.clientY, r) {
+					let e = d * this.step;
+					s && (e = -e), a && (this.baseLeft = t(this.baseLeft - e)), this.baseWidth = t(this.baseWidth + e);
+				}
+				if (i) {
+					let e = f * this.step;
+					c && (e = -e), o && (this.baseTop = t(this.baseTop - e)), this.baseHeight = t(this.baseHeight + e);
+				}
+			}, 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 n = e.clientX, r = e.clientY;
+			document.onmousemove = (e) => {
+				let i = e.clientX - n, a = e.clientY - r;
+				n = e.clientX, r = e.clientY, this.baseLeft = t(this.baseLeft + i * this.step), this.baseTop = t(this.baseTop + a * this.step);
+			}, this.handleClear();
+		},
+		handleClear() {
+			document.onmouseup = () => {
+				document.onmousemove = null, document.onmouseup = null, this.handleMouseUp();
+			};
+		},
+		handleKeydown() {
+			document.onkeydown = (e) => {
+				let n = e || window.event, r = this.step;
+				if (this.$refs.input.focused) {
+					var i;
+					n && n.keyCode === 38 ? this.baseTop = t(this.baseTop - r) : n && n.keyCode === 37 ? this.baseLeft = t(this.baseLeft - r) : n && n.keyCode === 40 ? this.baseTop = t(this.baseTop + r) : n && n.keyCode === 39 && (this.baseLeft = t(this.baseLeft + r)), e.stopPropagation(), e.preventDefault(), this.$emit("blur", {
+						index: this.index,
+						width: this.baseWidth,
+						height: this.baseHeight,
+						left: this.baseLeft,
+						top: this.baseTop
+					}), (i = this.keyDown) == null || i.call(this, 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
+			});
+		}
+	}
+}, y = {
+	ref: "wrapper",
+	class: "avue-draggable__wrapper"
+}, b = ["onMousedown"], x = {
+	ref: "item",
+	class: "avue-draggable__item"
+}, S = {
+	key: 2,
+	class: "avue-draggable__mask"
 };
+function C(e, t, n, v, C, w) {
+	let T = p("ElInput");
+	return u(), a("div", {
+		class: c({
+			"avue-draggable__active": (C.active || C.overActive) && !n.readonly,
+			"avue-draggable__move": C.moveActive,
+			"avue-draggable__click": n.disabled
+		}),
+		style: l(w.styleName),
+		onMousedown: t[1] || (t[1] = _((...e) => w.handleMove && w.handleMove(...e), ["stop"])),
+		onMouseover: t[2] || (t[2] = _((...e) => w.handleOver && w.handleOver(...e), ["stop"])),
+		onMouseout: t[3] || (t[3] = _((...e) => w.handleOut && w.handleOut(...e), ["stop"]))
+	}, [s(T, {
+		ref: "input",
+		modelValue: C.value,
+		"onUpdate:modelValue": t[0] || (t[0] = (e) => C.value = e),
+		class: "avue-draggable__focus"
+	}, null, 8, ["modelValue"]), o("div", y, [
+		(C.active || C.overActive || C.moveActive) && !n.readonly ? (u(), a(r, { key: 0 }, [
+			o("div", {
+				style: l(w.styleLineName),
+				class: "avue-draggable__line['left'])"
+			}, null, 4),
+			o("div", {
+				style: l(w.styleLineName),
+				class: "avue-draggable__line['top'])"
+			}, null, 4),
+			o("div", {
+				class: "avue-draggable__line['label'])",
+				style: l(w.styleLabelName)
+			}, m(C.baseLeft) + "," + m(C.baseTop), 5)
+		], 64)) : i("v-if", !0),
+		n.readonly ? i("v-if", !0) : (u(!0), a(r, { key: 1 }, d(C.rangeList, (e, t) => (u(), a(r, null, [C.active ? (u(), a("div", {
+			key: t,
+			class: "avue-draggable__range[item.classname])",
+			style: l([w.styleRangeName, w.getRangeStyle(e.classname)]),
+			onMousedown: _((t) => w.rangeMove(t, e.classname), ["stop"])
+		}, null, 44, b)) : i("v-if", !0)], 64))), 256)),
+		g(o("div", {
+			class: "avue-draggable__menu",
+			style: l(w.styleMenuName)
+		}, [f(e.$slots, "menu", {
+			zIndex: n.zIndex,
+			index: n.index
+		})], 4), [[h, C.active || C.overActive]]),
+		o("div", x, [f(e.$slots, "default")], 512),
+		!n.disabled && n.mask ? (u(), a("div", S)) : i("v-if", !0)
+	], 512)], 38);
+}
+var w = /* @__PURE__ */ e(v, [["render", C]]);
+//#endregion
+export { w as default };