vue3-dragable-bar
Version:
106 lines (105 loc) • 3.91 kB
JavaScript
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".bar[data-v-30c0d86e]{position:absolute;margin:0;padding:0}.bar-x[data-v-30c0d86e]{top:0;bottom:0}.bar-x[data-v-30c0d86e]:hover{cursor:col-resize}.bar-y[data-v-30c0d86e]{left:0;right:0;line-height:100%}.bar-y[data-v-30c0d86e]:hover{cursor:row-resize}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
import { defineComponent as R, ref as d, onMounted as M, watch as S, createElementBlock as b, openBlock as g, Fragment as T, createCommentVNode as x, normalizeStyle as O, normalizeClass as N, renderSlot as B } from "vue";
const A = /* @__PURE__ */ R({
__name: "main",
props: {
mode: {
type: String,
default: ""
},
top: {
type: Number,
default: 0
},
left: {
type: Number,
default: 0
},
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
}
},
emits: ["resize", "resizeOver"],
setup(n, { emit: v }) {
let r = window;
r._vue3_dragable_bar_moving_ === void 0 && (r._vue3_dragable_bar_moving_ = !1);
const t = n, l = d(!1), y = v, i = d();
let s = !0;
const m = d(0), _ = d(0);
let c = 0, p = 0, u = 0, f = 0, h = 0, z = 0;
const C = () => {
c = 0, p = 0, u = 0, f = 0;
let e = i.value;
if (!e || (e = e.parentElement, !e))
return;
let o = e.getBoundingClientRect();
c = o.top, p = o.left, u = o.width, f = o.height;
};
function w(e, o) {
let a = 0;
s ? (a = o.clientX - p - z, a > u && (a = u)) : (a = o.clientY - c - h, a > f && (a = f)), a < 0 && (a = 0), e == "resizeOver" && (Object.keys(y).includes("resizeOver") || (e = "resize")), y(e, a);
}
function k(e) {
r._vue3_dragable_bar_moving_ && (l.value = !0, e.preventDefault(), e.stopPropagation(), w("resize", e));
}
function L(e) {
l.value = !1, r._vue3_dragable_bar_moving_ && (r._vue3_dragable_bar_moving_ = !1, e.preventDefault(), e.stopPropagation(), w("resizeOver", e), E());
}
function E() {
document.body.setAttribute("vue3-dragable-bar", "");
try {
document.removeEventListener("mousemove", k, !1);
} catch {
}
try {
document.removeEventListener("mouseup", L, !1);
} catch {
}
}
const D = (e) => {
E(), document.body.setAttribute("vue3-dragable-bar", "moving"), r._vue3_dragable_bar_moving_ = !0, C(), h = e.offsetY, z = e.offsetX, document.addEventListener("mousemove", k, !1), document.addEventListener("mouseup", L, !1), l.value = !0;
};
return M(() => {
s = t.mode == "vertical", s ? _.value = t.left : m.value = t.top;
try {
i.value.addEventListener("mousedown", D);
} catch {
}
S([() => t.top, () => t.left], () => {
s ? _.value = t.left : m.value = t.top;
});
}), (e, o) => (g(), b(T, null, [
t.mode === "vertical" ? (g(), b("div", {
key: 0,
ref_key: "selfRef",
ref: i,
class: N(["bar bar-x", l.value ? "vue3-dragable-bar-moving" : ""]),
style: O({ left: _.value - 1 + "px", width: t.width + "px" })
}, [
B(e.$slots, "default", {}, void 0, !0)
], 6)) : x("", !0),
t.mode === "horizontal" ? (g(), b("div", {
key: 1,
ref_key: "selfRef",
ref: i,
class: N(["bar bar-y", l.value ? "vue3-dragable-bar-moving" : ""]),
style: O({ top: m.value - 1 + "px", height: t.height + "px" })
}, [
B(e.$slots, "default", {}, void 0, !0)
], 6)) : x("", !0)
], 64));
}
}), P = (n, v) => {
const r = n.__vccOpts || n;
for (const [t, l] of v)
r[t] = l;
return r;
}, X = /* @__PURE__ */ P(A, [["__scopeId", "data-v-30c0d86e"]]);
export {
X as default
};