@wdns/vuetify-resize-drawer
Version:
The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user.
262 lines (261 loc) • 37 kB
JavaScript
import { unref as v, defineComponent as ze, mergeModels as re, useModel as Ge, inject as le, ref as S, watchEffect as Ie, watch as ue, computed as f, toRef as se, useSlots as Pe, onBeforeMount as He, onMounted as xe, onUnmounted as Ne, createBlock as de, openBlock as P, mergeProps as Te, withCtx as Ve, createElementBlock as O, createCommentVNode as R, createElementVNode as Oe, normalizeStyle as ve, normalizeClass as ce, renderSlot as _, mergeDefaults as Re, defineAsyncComponent as _e } from "vue";
import { useTheme as qe, useDisplay as Ue } from "vuetify";
import { VNavigationDrawer as Ye } from "vuetify/components";
import { VIcon as je } from "vuetify/components/VIcon";
/**
* @name @wdns/vuetify-resize-drawer
* @version 3.3.1
* @description The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user.
* @author WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)
* @copyright Copyright 2025, WebDevNerdStuff
* @homepage https://webdevnerdstuff.github.io/vuetify-resize-drawer/
* @repository https://github.com/webdevnerdstuff/vuetify-resize-drawer
* @license MIT License
*/
const C = "v-resize-drawer", E = (u) => {
const { unit: i = "px", value: l } = u;
if (l != null && l !== "") return +l ? `${Number(l)}${i}` : String(l);
}, H = (u) => {
const i = window.innerWidth, l = function(r) {
if (typeof r == "string") {
const F = /(\d+(\.\d+)?)(\s*([a-zA-Z]+))?/, m = r.match(F);
if (!m) return r;
const e = parseFloat(m[1]), s = m[4];
if (!isNaN(e)) {
const p = Math.round(e);
return s ? `${p} ${s}` : `${p}`;
}
return r;
}
return typeof r == "number" ? Math.round(r) : r;
}(u);
return typeof u == "string" && u.includes("%") ? Number(u.replace("%", "")) / 100 * i : typeof l == "string" ? Number(l.replace(/\D/g, "")) : l;
}, he = (u) => {
if (!u) return 0;
if (typeof u == "number") return u;
const i = document.createElement("div");
i.style.position = "absolute", i.style.visibility = "hidden", i.style.width = u;
const l = document.body;
l.appendChild(i);
const r = getComputedStyle(i).width;
return l.removeChild(i), parseFloat(r);
}, Xe = { fa: { bottom: "fas fa-grip", center: "fas fa-angles-right", top: "fas fa-grip" }, mdi: { bottom: "mdi:mdi-dots-grid", center: "mdi:mdi-chevron-double-right", top: "mdi:mdi-dots-grid" } };
function j(u, i) {
return u === "local" ? localStorage.getItem(i) : u === "session" ? sessionStorage.getItem(i) : "";
}
const q = (u) => {
const { action: i = "update", rail: l, resizedAmount: r, saveAmount: F, storageName: m, storageType: e } = u;
if (l && !F) return;
let s = r;
s = s ?? void 0, i === "set" && (s = j(e, m) ?? "", s = s || r), e === "local" && localStorage.setItem(m, String(s)), e === "session" && sessionStorage.setItem(m, String(s));
};
function me(u) {
let i = function(D) {
const B = { AliceBlue: "#F0F8FF", AntiqueWhite: "#FAEBD7", Aqua: "#00FFFF", Aquamarine: "#7FFFD4", Azure: "#F0FFFF", Beige: "#F5F5DC", Bisque: "#FFE4C4", Black: "#000000", BlanchedAlmond: "#FFEBCD", Blue: "#0000FF", BlueViolet: "#8A2BE2", Brown: "#A52A2A", BurlyWood: "#DEB887", CadetBlue: "#5F9EA0", Chartreuse: "#7FFF00", Chocolate: "#D2691E", Coral: "#FF7F50", CornflowerBlue: "#6495ED", Cornsilk: "#FFF8DC", Crimson: "#DC143C", Cyan: "#00FFFF", DarkBlue: "#00008B", DarkCyan: "#008B8B", DarkGoldenRod: "#B8860B", DarkGray: "#A9A9A9", DarkGreen: "#006400", DarkGrey: "#A9A9A9", DarkKhaki: "#BDB76B", DarkMagenta: "#8B008B", DarkOliveGreen: "#556B2F", DarkOrange: "#FF8C00", DarkOrchid: "#9932CC", DarkRed: "#8B0000", DarkSalmon: "#E9967A", DarkSeaGreen: "#8FBC8F", DarkSlateBlue: "#483D8B", DarkSlateGray: "#2F4F4F", DarkSlateGrey: "#2F4F4F", DarkTurquoise: "#00CED1", DarkViolet: "#9400D3", DeepPink: "#FF1493", DeepSkyBlue: "#00BFFF", DimGray: "#696969", DimGrey: "#696969", DodgerBlue: "#1E90FF", FireBrick: "#B22222", FloralWhite: "#FFFAF0", ForestGreen: "#228B22", Fuchsia: "#FF00FF", Gainsboro: "#DCDCDC", GhostWhite: "#F8F8FF", Gold: "#FFD700", GoldenRod: "#DAA520", Gray: "#808080", Green: "#008000", GreenYellow: "#ADFF2F", Grey: "#808080", HoneyDew: "#F0FFF0", HotPink: "#FF69B4", IndianRed: "#CD5C5C", Indigo: "#4B0082", Ivory: "#FFFFF0", Khaki: "#F0E68C", Lavender: "#E6E6FA", LavenderBlush: "#FFF0F5", LawnGreen: "#7CFC00", LemonChiffon: "#FFFACD", LightBlue: "#ADD8E6", LightCoral: "#F08080", LightCyan: "#E0FFFF", LightGoldenRodYellow: "#FAFAD2", LightGray: "#D3D3D3", LightGreen: "#90EE90", LightGrey: "#D3D3D3", LightPink: "#FFB6C1", LightSalmon: "#FFA07A", LightSeaGreen: "#20B2AA", LightSkyBlue: "#87CEFA", LightSlateGray: "#778899", LightSlateGrey: "#778899", LightSteelBlue: "#B0C4DE", LightYellow: "#FFFFE0", Lime: "#00FF00", LimeGreen: "#32CD32", Linen: "#FAF0E6", Magenta: "#FF00FF", Maroon: "#800000", MediumAquaMarine: "#66CDAA", MediumBlue: "#0000CD", MediumOrchid: "#BA55D3", MediumPurple: "#9370DB", MediumSeaGreen: "#3CB371", MediumSlateBlue: "#7B68EE", MediumSpringGreen: "#00FA9A", MediumTurquoise: "#48D1CC", MediumVioletRed: "#C71585", MidnightBlue: "#191970", MintCream: "#F5FFFA", MistyRose: "#FFE4E1", Moccasin: "#FFE4B5", NavajoWhite: "#FFDEAD", Navy: "#000080", OldLace: "#FDF5E6", Olive: "#808000", OliveDrab: "#6B8E23", Orange: "#FFA500", OrangeRed: "#FF4500", Orchid: "#DA70D6", PaleGoldenRod: "#EEE8AA", PaleGreen: "#98FB98", PaleTurquoise: "#AFEEEE", PaleVioletRed: "#DB7093", PapayaWhip: "#FFEFD5", PeachPuff: "#FFDAB9", Peru: "#CD853F", Pink: "#FFC0CB", Plum: "#DDA0DD", PowderBlue: "#B0E0E6", Purple: "#800080", RebeccaPurple: "#663399", Red: "#FF0000", RosyBrown: "#BC8F8F", RoyalBlue: "#4169E1", SaddleBrown: "#8B4513", Salmon: "#FA8072", SandyBrown: "#F4A460", SeaGreen: "#2E8B57", SeaShell: "#FFF5EE", Sienna: "#A0522D", Silver: "#C0C0C0", SkyBlue: "#87CEEB", SlateBlue: "#6A5ACD", SlateGray: "#708090", SlateGrey: "#708090", Snow: "#FFFAFA", SpringGreen: "#00FF7F", SteelBlue: "#4682B4", Tan: "#D2B48C", Teal: "#008080", Thistle: "#D8BFD8", Tomato: "#FF6347", Turquoise: "#40E0D0", Violet: "#EE82EE", Wheat: "#F5DEB3", White: "#FFFFFF", WhiteSmoke: "#F5F5F5", Yellow: "#FFFF00", YellowGreen: "#9ACD32" };
let z = D;
return Object.entries(B).forEach(([A, b]) => {
D.toLowerCase() != A.toLowerCase() || (z = b);
}), z;
}(u), l = 0, r = 0, F = 0, m = 0, e = 0, s = 0;
if (i.substring(0, 1) === "#") i = function(D) {
let B = D.replace("#", "");
B.length === 3 && (B = B.split("").map((G) => G + G).join(""));
const z = parseInt(B.substring(0, 2), 16), A = parseInt(B.substring(2, 4), 16), b = parseInt(B.substring(4, 6), 16);
return [z, A, b];
}(i);
else if (i.includes("rgb")) i = [...i.matchAll(/\d+/g)].map(Number);
else if (i.includes("hsl")) return i = [...i.matchAll(/\d+/g)].map(Number), l = i[0], r = i[1], F = i[2], `${l} ${r}% ${F}%`;
[m, e, s] = i, m /= 255, e /= 255, s /= 255;
const p = Math.max(m, e, s), y = Math.min(m, e, s);
if (p === null || !y === null || isNaN(p) || isNaN(y))
return "0 0% 100% / 12%";
if (l = (p + y) / 2, r = (p + y) / 2, F = (p + y) / 2, p == y) l = r = 0;
else {
const D = p - y;
switch (r = F > 0.5 ? D / (2 - p - y) : D / (p + y), p) {
case m:
l = (e - s) / D + (e < s ? 6 : 0);
break;
case e:
l = (s - m) / D + 2;
break;
case s:
l = (m - e) / D + 4;
}
l /= 6;
}
return l = Math.round(360 * l), r = Math.round(100 * r), F = Math.round(100 * F), `${l} ${r}% ${F}%`;
}
const Fe = (u, i) => {
if (/* @__PURE__ */ function(r) {
return r === "transparent" || r === "none" || r === "inherit" || r === "currentColor" || r === "initial" || r === "unset";
}(u)) return u;
if (function(r) {
return r.includes("--v-theme");
}(u)) return `rgb(var(${u}))`;
const l = function(r, F) {
var e;
const m = ((e = F.global.current.value) == null ? void 0 : e.colors) ?? {};
return Object.entries(m).find(([s]) => s === r);
}(u, i);
return l ? `hsl(${me(l[1])})` : `hsl(${me(u)})`;
}, pe = { default: "1.5em", large: "1.75em", small: "1.25em", "x-large": "2em", "x-small": "1em" }, Ke = { handleBorderWidth: 8, handleColor: "primary", handleIcon: void 0, handleIconSize: "x-small", handlePosition: "center", height: 256, location: "start", maxHeight: window.innerHeight, maxWidth: window.innerWidth, minHeight: 56, minWidth: 56, name: void 0, rail: !1, railWidth: 8, resizable: !0, saveWidth: !0, snapBack: !0, storageName: `${C}-width`, storageType: "local", tag: "nav", theme: void 0, touchless: !1, width: 256 }, Ze = { key: 0, class: "v-resize-drawer--handle-slot" }, Je = { key: 1, class: "v-navigation-drawer__prepend" }, Qe = { class: "v-navigation-drawer__content" }, ea = { key: 2, class: "v-navigation-drawer__append" }, ia = ze({ __name: "VResizeDrawer", props: re(Re({ absolute: {}, expandOnHover: {}, floating: {}, handleBorderWidth: {}, handleColor: {}, handleIcon: {}, handleIconSize: {}, handlePosition: {}, height: {}, image: {}, location: {}, maxHeight: {}, maxWidth: {}, minHeight: {}, minWidth: {}, name: {}, rail: {}, railWidth: {}, resizable: { type: Boolean }, saveHeight: { type: Boolean }, saveWidth: { type: Boolean }, snapBack: { type: Boolean }, storageName: {}, storageType: {}, tag: {}, temporary: {}, theme: {}, touchless: { type: Boolean }, width: {}, widthSnapBack: { type: Boolean } }, { ...Ke }), { modelValue: { type: Boolean, default: !1 }, modelModifiers: {} }), emits: re(["close", "drawer:mouseenter", "drawer:mouseleave", "handle:click", "handle:dblclick", "handle:drag", "handle:mousedown", "handle:mouseup", "handle:touchend", "handle:touchmove", "handle:touchstart", "update:modelValue"], ["update:modelValue"]), setup(u, { emit: i }) {
const l = i, r = Ge(u, "modelValue"), F = u, m = le(ge, {}), e = S({ ...F, ...m });
Ie(() => {
e.value = { ...F, ...m };
}), ue(() => F.width, (a) => {
B.value = a, d.value = E({ value: a }) || void 0, q({ rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType });
});
const s = se(e.value, "handleIconSize"), p = se(e.value, "handlePosition"), y = f(() => e.value), D = le(Symbol.for("vuetify:icons")), B = S(256), z = S(256), A = { mouseDown: !1, mouseUp: !0 }, b = S(!1), G = S(!1), X = S(e.value.location), K = S(), d = S(256), U = Pe(), Z = qe(), fe = Ue(), g = f(() => X.value === "top" || X.value === "bottom"), I = f(() => `${e.value.storageName}-${e.value.location}`);
He(() => {
e.value.name === void 0 && (e.value.name = String(Math.floor(1e8 * Math.random())));
}), xe(() => {
(function() {
if (!J.value) throw new Error("[VResizeDrawer]: 'bottom' location does not support 'bottom' or 'top' handle positions.");
if (e.value.rail && !g.value) return void (d.value = e.value.railWidth || void 0);
const a = j(e.value.storageType, I.value), n = E({ value: g.value ? e.value.height : e.value.width });
d.value = n, B.value = d.value, (e.value.saveHeight || e.value.saveWidth) && a && !e.value.rail && (d.value = j(e.value.storageType, I.value)), d.value = H(d.value), q({ action: "update", rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType });
})();
}), Ne(() => {
document.removeEventListener("mouseup", T, !1), document.removeEventListener("mousemove", Y, !1), document.removeEventListener("touchend", V, !1), document.removeEventListener("touchstart", ne, !1);
}), ue(() => r, (a) => {
l("update:modelValue", a), a || l("close");
});
const we = f(() => ((a) => {
const { absolute: n = !1, expandOnHover: t, floating: o, isMouseover: c, location: h, rail: W, railWidth: $, temporary: L } = a;
let w = h === "left" || h === "start" || h === void 0;
return h !== "top" && h !== "bottom" || (w = !1), { [`${C}`]: !0, [`${C}--${h}`]: h === "bottom" || h === "top", "v-navigation-drawer--absolute": n ?? !1, "v-navigation-drawer--custom-rail": Number($) !== 56, "v-navigation-drawer--fixed": !n, "v-navigation-drawer--floating": o, "v-navigation-drawer--is-mouseover": v(c), "v-navigation-drawer--left": w, "v-navigation-drawer--open-on-hover": t, "v-navigation-drawer--rail": W ?? !1, "v-navigation-drawer--right": h === "right" || h === "end", "v-navigation-drawer--temporary": L || !1 };
})({ absolute: e.value.absolute, expandOnHover: e.value.expandOnHover, floating: e.value.floating, isMouseover: b, location: e.value.location, rail: e.value.rail, railWidth: e.value.railWidth, temporary: e.value.temporary })), De = f(() => ((a) => {
const { isMouseDown: n, location: t, maxWidth: o, minWidth: c, rail: h, railWidth: W, resizedAmount: $, snapBack: L } = a;
if (h) return {};
let w = h ? W : v($);
L || (parseInt(w) >= parseInt(o) && (w = parseInt(o)), parseInt(w) <= parseInt(c) && (w = parseInt(c)));
let ie = {};
return ie = t === "top" || t === "bottom" ? { maxHeight: `${E({ value: w })} !important`, minHeight: `${E({ value: w })} !important`, transitionDuration: v(n) ? "0s" : ".2s", width: "100%" } : { transitionDuration: v(n) ? "0s" : ".2s", width: E({ value: w }) }, ie;
})({ isMouseDown: G, location: e.value.location, maxWidth: N.value, minWidth: x.value, rail: e.value.rail, railWidth: e.value.railWidth, resizedAmount: d.value, snapBack: e.value.snapBack || e.value.widthSnapBack })), Be = f(() => {
if (g.value || e.value.rail) return;
const a = E({ value: d.value });
return H(a);
}), ye = f(() => ((a) => {
const { drawerLocation: n, handlePosition: t } = a;
return { "v-navigation-drawer__handle": !0, [`${C}--handle-container`]: !0, [`${C}--handle-container-position-${t}`]: !0, [`${C}--handle-container-parent-${n}`]: !0 };
})({ drawerLocation: e.value.location, handlePosition: e.value.handlePosition })), Ce = f(() => ((a) => {
const { borderWidth: n, handleColor: t, iconSizeUnit: o, location: c, position: h, theme: W } = a, $ = "translateX(-50%) " + (c === "top" ? "rotate(90deg)" : "rotate(-90deg)");
let L = `${o}px`, w = `${o}px`;
return h === "border" ? (c === "bottom" || c === "top" ? L = E({ value: n }) : (L = "100%", w = E({ value: n })), { backgroundColor: Fe(t, W), height: L, width: w }) : { backgroundColor: "transparent", height: L, transform: c === "top" || c === "bottom" ? $ : void 0, width: w };
})({ borderWidth: e.value.handleBorderWidth || 1, handleColor: e.value.handleColor, iconSize: e.value.handleIconSize, iconSizeUnit: M.value, location: e.value.location, position: e.value.handlePosition, theme: Z })), Ae = f(() => (!e.value.touchless || !fe.mobile.value) && !(!e.value.resizable || e.value.rail) && !!J.value), J = f(() => e.value.location !== "bottom" && e.value.location !== "top" || e.value.handlePosition !== "bottom" && e.value.handlePosition !== "top"), Ee = f(() => ((a) => {
const { color: n, theme: t } = a;
return { color: Fe(n, t) };
})({ color: F.handleColor, theme: Z })), be = f(() => ((a) => {
const { drawerLocation: n, handlePosition: t, iconOptions: o, isUserIcon: c } = a;
return { [`${C}--handle-container-icon`]: !0, [`${C}--handle-container-icon-${t}-${n}`]: !0, [`${C}--handle-container-icon-user-icon`]: c, [`${C}--handle-container-icon-fa`]: (o == null ? void 0 : o.defaultSet) === "fa", [`${C}--handle-container-icon-fa-${t}`]: (o == null ? void 0 : o.defaultSet) === "fa" };
})({ drawerLocation: e.value.location, handlePosition: e.value.handlePosition, iconOptions: D, isUserIcon: e.value.handleIcon != null && e.value.handleIcon !== "" })), Se = f(() => ((n) => {
const { icon: t, iconOptions: o, name: c } = n;
if (c === "border") return;
if (t) return t;
let h = ((o == null ? void 0 : o.defaultSet) ?? "").toLowerCase();
h = h === "fa" || h === "fasvg" ? "fa" : h;
const W = Xe[h];
if (!W) throw new Error(`[VResizeDrawer]: No default ${o == null ? void 0 : o.defaultSet} icon set found.`);
const $ = W[c];
if (!$) throw new Error(`[VResizeDrawer]: No ${c} icon found.`);
return $;
})({ icon: e.value.handleIcon, iconOptions: D, name: e.value.handlePosition })), M = S(he(String(s.value)));
function ke() {
b.value = !0, l("drawer:mouseenter", b.value);
}
function We() {
b.value = !1, l("drawer:mouseleave", b.value);
}
function Q(a, n) {
let t = n;
e.value.location !== "right" && e.value.location !== "end" || (t = document.body.scrollWidth - t + M.value / 2), e.value.location !== "left" && e.value.location !== "start" || (t += M.value / 2), e.value.location === "top" && (t -= function(o) {
const c = -29e-5 * o * o + -0.356 * o + 43.56;
return Math.ceil(c);
}(M.value)), e.value.location === "bottom" && (t = window.innerHeight - t + M.value / 2), d.value = E({ value: t }) || void 0, document.body.style.cursor = "grabbing", k("handle:touchmove", a), k("handle:drag", a);
}
function ee(a) {
var n, t;
Q(a, g.value ? (n = a.touches[0]) == null ? void 0 : n.clientY : (t = a.touches[0]) == null ? void 0 : t.clientX);
}
function Y(a) {
Q(a, g.value ? a.clientY : a.clientX);
}
Object.keys(pe).some((a) => a.includes(String(s.value))) && (M.value = he(pe[String(s.value)]));
const N = f(() => {
const a = g.value ? e.value.maxHeight : e.value.maxWidth;
if (g.value && e.value.maxHeight === "100%") return window.innerHeight;
if (e.value.maxHeight === "100%") return window.innerWidth;
if (String(a).includes("%")) {
const n = parseInt(String(a).replace("%", ""));
return (g.value ? window.innerHeight : window.innerWidth) * n / 100;
}
return a;
}), x = f(() => {
const a = g.value ? e.value.minHeight : e.value.minWidth;
if (g.value && e.value.minHeight === "100%") return window.innerHeight;
if (e.value.minWidth === "100%") return window.innerWidth;
if (String(a).includes("%")) {
const n = parseInt(String(a).replace("%", ""));
return (g.value ? window.innerHeight : window.innerWidth) * n / 100;
}
return a;
});
function ae(a) {
let n = a;
parseInt(n) >= parseInt(N.value) && (n = parseInt(N.value)), parseInt(n) <= parseInt(x.value) && (n = parseInt(x.value)), typeof n == "number" && (n = Math.round(n));
let t = H(n);
const o = H(N.value), c = H(x.value);
return t >= o && (t = o), c >= t && (t = c), t;
}
function $e(a) {
k("handle:click", a);
}
function Le(a) {
d.value = B.value, g.value && (d.value = z.value), q({ rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType }), k("handle:dblclick", a);
}
function te(a, n) {
a.preventDefault(), a.stopPropagation();
const t = a.type;
let o = M.value;
G.value = !0, e.value.handlePosition === "border" && (o = e.value.handleBorderWidth || 1), A.mouseUp = !1, n < o && (t === "touchstart" ? document.addEventListener("touchmove", ee, !1) : document.addEventListener("mousemove", Y, !1)), A.mouseDown || (A.mouseDown = !0, t === "touchstart" ? (document.addEventListener("touchend", V, !1), k("handle:touchstart", a)) : (document.addEventListener("mouseup", T, !1), k("handle:mousedown", a)));
}
function Me(a) {
te(a, g.value ? a.offsetY : a.offsetX);
}
function ne(a) {
var t, o;
let n = (g.value ? (t = a.touches[0]) == null ? void 0 : t.radiusY : (o = a.touches[0]) == null ? void 0 : o.radiusX) ?? 0;
n /= 2, te(a, n);
}
function oe(a) {
a.preventDefault(), a.stopPropagation();
const n = a.type, t = K.value;
G.value = !1, A.mouseDown = !1, g.value || (d.value = (t == null ? void 0 : t.width) ?? B.value), document.body.style.cursor = "";
const o = d.value;
String(o).includes("-") && (d.value = x.value), d.value = ae(d.value), d.value = E({ value: d.value }) || void 0, d.value = H(d.value), q({ rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType }), A.mouseUp || (A.mouseUp = !0, n === "touchend" ? (document.removeEventListener("touchend", V, !1), document.removeEventListener("touchmove", ee, !1), k("handle:touchend", a)) : (document.removeEventListener("mouseup", T, !1), document.removeEventListener("mousemove", Y, !1), k("handle:mouseup", a)));
}
function T(a) {
oe(a);
}
function V(a) {
oe(a);
}
function k(a, n) {
const t = parseInt(ae(d.value)) ?? 0, o = { e: n, eventName: a, offsetWidth: window.innerWidth - t + "px", resizedAmount: `${t}px`, resizedHeight: `${t}px`, resizedWidth: `${t}px`, width: `${t}px` };
l(a, o);
}
return (a, n) => (P(), de(v(Ye), Te(v(y), { ref_key: "resizeDrawer", ref: K, modelValue: r.value, "onUpdate:modelValue": n[0] || (n[0] = (t) => r.value = t), class: v(we), location: v(e).location, name: v(e).name, style: v(De), tag: v(e).tag, width: v(Be), onMouseenter: ke, onMouseleave: We }), { default: Ve(() => [v(Ae) ? (P(), O("div", { key: 0, class: ce(v(ye)), style: ve(v(Ce)), onClick: $e, onDblclick: Le, onMousedown: Me, onMouseup: T, onTouchend: V, onTouchstart: ne }, [v(U).handle ? (P(), O("div", Ze, [_(a.$slots, "handle")])) : v(p) !== "border" ? (P(), de(je, { key: 1, class: ce(["v-resize-drawer--handle-icon", v(be)]), icon: v(Se), size: v(s), style: ve(v(Ee)) }, null, 8, ["class", "icon", "size", "style"])) : R("", !0)], 38)) : R("", !0), v(U).prepend ? (P(), O("div", Je, [_(a.$slots, "prepend")])) : R("", !0), Oe("div", Qe, [_(a.$slots, "default")]), v(U).append ? (P(), O("div", ea, [_(a.$slots, "append")])) : R("", !0)]), _: 3 }, 16, ["modelValue", "class", "location", "name", "style", "tag", "width"]));
} }), ge = Symbol();
function ra(u = {}) {
return { install: (i) => {
i.provide(ge, u), i.component("VResizeDrawer", _e(() => import("./VResizeDrawer-DTPO1hA-.mjs")));
} };
}
export {
ia as VResizeDrawer,
ra as createVResizeDrawer,
ia as default,
ge as globalOptions
};
(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");n.appendChild(document.createTextNode(".v-resize-drawer{container-name:v-resize-drawer;container-type:inline-size}.v-resize-drawer--handle-container{align-items:center;cursor:grab;display:flex;justify-content:center;position:absolute;z-index:1}.v-resize-drawer--handle-container-icon-parent-end,.v-resize-drawer--handle-container-icon-parent-right{left:initial;right:0}.v-resize-drawer--handle-container-icon-center-end,.v-resize-drawer--handle-container-icon-center-right{transform:rotate(180deg)}.v-resize-drawer--handle-container-icon-user-icon{transform:none}.v-resize-drawer--handle-container-icon-fa{font-size:.7rem!important}.v-resize-drawer--handle-container-parent-left,.v-resize-drawer--handle-container-parent-start,.v-resize-drawer--handle-container-parent-undefined{right:0}.v-resize-drawer--handle-container-parent-end,.v-resize-drawer--handle-container-parent-right{left:0}.v-resize-drawer--handle-container-position-top{top:0}.v-resize-drawer--handle-container-position-center{top:50%;transform:translateY(-50%)}.v-resize-drawer--handle-container-position-bottom{bottom:0}.v-resize-drawer--handle-container-position-border{cursor:col-resize;height:100%;top:0;width:8px}.v-resize-drawer--bottom{transition:min-height .3s}.v-resize-drawer--bottom .v-resize-drawer--handle-container-position-center{left:50%;top:0;transform:translate(-50%)}.v-resize-drawer--bottom .v-resize-drawer--handle-container-position-border{cursor:row-resize;left:0%;top:0!important;width:100%!important}.v-resize-drawer--top{top:0!important;transition:min-height .3s}.v-resize-drawer--top .v-resize-drawer--handle-container-position-center{bottom:1px;left:50%;top:unset;transform:translate(-50%)}.v-resize-drawer--top .v-resize-drawer--handle-container-position-border{bottom:0!important;cursor:row-resize;left:0%;top:unset;width:100%!important}.v-resize-drawer--bottom .v-navigation-drawer__content,.v-resize-drawer--top .v-navigation-drawer__content{flex:1 1 auto;position:relative}.v-resize-drawer>.v-navigation-drawer__content{display:flex;flex-direction:column}@container v-resize-drawer (width > 0) and (max-width: 599.98px){.v-col-xs-12{flex:0 0 100%!important;flex-basis:0;flex-grow:1;max-width:100%!important}}@container v-resize-drawer (min-width: 600px){.v-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.v-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.v-col-sm-3{flex:0 0 25%;max-width:25%}.v-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.v-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.v-col-sm-6{flex:0 0 50%;max-width:50%}.v-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.v-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.v-col-sm-9{flex:0 0 75%;max-width:75%}.v-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.v-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.v-col-sm-12{flex:0 0 100%;max-width:100%}}@container v-resize-drawer (min-width: 960px){.v-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.v-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.v-col-md-3{flex:0 0 25%;max-width:25%}.v-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.v-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.v-col-md-6{flex:0 0 50%;max-width:50%}.v-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.v-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.v-col-md-9{flex:0 0 75%;max-width:75%}.v-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.v-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.v-col-md-12{flex:0 0 100%;max-width:100%}}@container v-resize-drawer (min-width: 1280px){.v-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.v-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.v-col-lg-3{flex:0 0 25%;max-width:25%}.v-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.v-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.v-col-lg-6{flex:0 0 50%;max-width:50%}.v-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.v-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.v-col-lg-9{flex:0 0 75%;max-width:75%}.v-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.v-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.v-col-lg-12{flex:0 0 100%;max-width:100%}}@container v-resize-drawer (min-width: 1920px){.v-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.v-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.v-col-xl-3{flex:0 0 25%;max-width:25%}.v-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.v-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.v-col-xl-6{flex:0 0 50%;max-width:50%}.v-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.v-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.v-col-xl-9{flex:0 0 75%;max-width:75%}.v-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.v-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.v-col-xl-12{flex:0 0 100%;max-width:100%}}@container v-resize-drawer (min-width: 2560px){.v-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}.v-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}.v-col-xxl-3{flex:0 0 25%;max-width:25%}.v-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}.v-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}.v-col-xxl-6{flex:0 0 50%;max-width:50%}.v-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}.v-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}.v-col-xxl-9{flex:0 0 75%;max-width:75%}.v-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}.v-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}.v-col-xxl-12{flex:0 0 100%;max-width:100%}}@container v-resize-drawer only print{.hidden-print-only{display:none!important}}@container v-resize-drawer only print{.d-print-only-none{display:none!important}.d-print-only-inline{display:inline!important}.d-print-only-inline-block{display:inline-block!important}.d-print-only-block{display:block!important}.d-print-only-table{display:table!important}.d-print-only-table-row{display:table-row!important}.d-print-only-table-cell{display:table-cell!important}.d-print-only-flex{display:flex!important}.d-print-only-inline-flex{display:inline-flex!important}}@container v-resize-drawer only screen{.hidden-screen-only{display:none!important}}@container v-resize-drawer only screen{.d-screen-only-none{display:none!important}.d-screen-only-inline{display:inline!important}.d-screen-only-inline-block{display:inline-block!important}.d-screen-only-block{display:block!important}.d-screen-only-table{display:table!important}.d-screen-only-table-row{display:table-row!important}.d-screen-only-table-cell{display:table-cell!important}.d-screen-only-flex{display:flex!important}.d-screen-only-inline-flex{display:inline-flex!important}}@container v-resize-drawer (max-width: 599.98px){.hidden-xs{display:none!important}}@container v-resize-drawer (max-width: 599.98px){.d-xs-none{display:none!important}.d-xs-inline{display:inline!important}.d-xs-inline-block{display:inline-block!important}.d-xs-block{display:block!important}.d-xs-table{display:table!important}.d-xs-table-row{display:table-row!important}.d-xs-table-cell{display:table-cell!important}.d-xs-flex{display:flex!important}.d-xs-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 600px) and (max-width: 959.98px){.hidden-sm{display:none!important}}@container v-resize-drawer (min-width: 600px) and (max-width: 959.98px){.d-sm-none{display:none!important}.d-sm-inline{display:inline!important}.d-sm-inline-block{display:inline-block!important}.d-sm-block{display:block!important}.d-sm-table{display:table!important}.d-sm-table-row{display:table-row!important}.d-sm-table-cell{display:table-cell!important}.d-sm-flex{display:flex!important}.d-sm-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 960px) and (max-width: 1279.98px){.hidden-md{display:none!important}}@container v-resize-drawer (min-width: 960px) and (max-width: 1279.98px){.d-md-none{display:none!important}.d-md-inline{display:inline!important}.d-md-inline-block{display:inline-block!important}.d-md-block{display:block!important}.d-md-table{display:table!important}.d-md-table-row{display:table-row!important}.d-md-table-cell{display:table-cell!important}.d-md-flex{display:flex!important}.d-md-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 1280px) and (max-width: 1919.98px){.hidden-lg{display:none!important}}@container v-resize-drawer (min-width: 1280px) and (max-width: 1919.98px){.d-lg-none{display:none!important}.d-lg-inline{display:inline!important}.d-lg-inline-block{display:inline-block!important}.d-lg-block{display:block!important}.d-lg-table{display:table!important}.d-lg-table-row{display:table-row!important}.d-lg-table-cell{display:table-cell!important}.d-lg-flex{display:flex!important}.d-lg-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 1920px) and (max-width: 2559.98px){.hidden-xl{display:none!important}}@container v-resize-drawer (min-width: 1920px) and (max-width: 2559.98px){.d-xl-none{display:none!important}.d-xl-inline{display:inline!important}.d-xl-inline-block{display:inline-block!important}.d-xl-block{display:block!important}.d-xl-table{display:table!important}.d-xl-table-row{display:table-row!important}.d-xl-table-cell{display:table-cell!important}.d-xl-flex{display:flex!important}.d-xl-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 2560px){.hidden-xxl{display:none!important}}@container v-resize-drawer (min-width: 2560px){.d-xxl-none{display:none!important}.d-xxl-inline{display:inline!important}.d-xxl-inline-block{display:inline-block!important}.d-xxl-block{display:block!important}.d-xxl-table{display:table!important}.d-xxl-table-row{display:table-row!important}.d-xxl-table-cell{display:table-cell!important}.d-xxl-flex{display:flex!important}.d-xxl-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 600px){.hidden-sm-and-up{display:none!important}}@container v-resize-drawer (min-width: 600px){.d-sm-and-up-none{display:none!important}.d-sm-and-up-inline{display:inline!important}.d-sm-and-up-inline-block{display:inline-block!important}.d-sm-and-up-block{display:block!important}.d-sm-and-up-table{display:table!important}.d-sm-and-up-table-row{display:table-row!important}.d-sm-and-up-table-cell{display:table-cell!important}.d-sm-and-up-flex{display:flex!important}.d-sm-and-up-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 960px){.hidden-md-and-up{display:none!important}}@container v-resize-drawer (min-width: 960px){.d-md-and-up-none{display:none!important}.d-md-and-up-inline{display:inline!important}.d-md-and-up-inline-block{display:inline-block!important}.d-md-and-up-block{display:block!important}.d-md-and-up-table{display:table!important}.d-md-and-up-table-row{display:table-row!important}.d-md-and-up-table-cell{display:table-cell!important}.d-md-and-up-flex{display:flex!important}.d-md-and-up-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 1280px){.hidden-lg-and-up{display:none!important}}@container v-resize-drawer (min-width: 1280px){.d-lg-and-up-none{display:none!important}.d-lg-and-up-inline{display:inline!important}.d-lg-and-up-inline-block{display:inline-block!important}.d-lg-and-up-block{display:block!important}.d-lg-and-up-table{display:table!important}.d-lg-and-up-table-row{display:table-row!important}.d-lg-and-up-table-cell{display:table-cell!important}.d-lg-and-up-flex{display:flex!important}.d-lg-and-up-inline-flex{display:inline-flex!important}}@container v-resize-drawer (min-width: 1920px){.hidden-xl-and-up{display:none!important}}@container v-resize-drawer (min-width: 1920px){.d-xl-and-up-none{display:none!important}.d-xl-and-up-inline{display:inline!important}.d-xl-and-up-inline-block{display:inline-block!important}.d-xl-and-up-block{display:block!important}.d-xl-and-up-table{display:table!important}.d-xl-and-up-table-row{display:table-row!important}.d-xl-and-up-table-cell{display:table-cell!important}.d-xl-and-up-flex{display:flex!important}.d-xl-and-up-inline-flex{display:inline-flex!important}}@container v-resize-drawer (max-width: 959.98px){.hidden-sm-and-down{display:none!important}}@container v-resize-drawer (max-width: 959.98px){.d-sm-and-down-none{display:none!important}.d-sm-and-down-inline{display:inline!important}.d-sm-and-down-inline-block{display:inline-block!important}.d-sm-and-down-block{display:block!important}.d-sm-and-down-table{display:table!important}.d-sm-and-down-table-row{display:table-row!important}.d-sm-and-down-table-cell{display:table-cell!important}.d-sm-and-down-flex{display:flex!important}.d-sm-and-down-inline-flex{display:inline-flex!important}}@container v-resize-drawer (max-width: 1279.98px){.hidden-md-and-down{display:none!important}}@container v-resize-drawer (max-width: 1279.98px){.d-md-and-down-none{display:none!important}.d-md-and-down-inline{display:inline!important}.d-md-and-down-inline-block{display:inline-block!important}.d-md-and-down-block{display:block!important}.d-md-and-down-table{display:table!important}.d-md-and-down-table-row{display:table-row!important}.d-md-and-down-table-cell{display:table-cell!important}.d-md-and-down-flex{display:flex!important}.d-md-and-down-inline-flex{display:inline-flex!important}}@container v-resize-drawer (max-width: 1919.98px){.hidden-lg-and-down{display:none!important}}@container v-resize-drawer (max-width: 1919.98px){.d-lg-and-down-none{display:none!important}.d-lg-and-down-inline{display:inline!important}.d-lg-and-down-inline-block{display:inline-block!important}.d-lg-and-down-block{display:block!important}.d-lg-and-down-table{display:table!important}.d-lg-and-down-table-row{display:table-row!important}.d-lg-and-down-table-cell{display:table-cell!important}.d-lg-and-down-flex{display:flex!important}.d-lg-and-down-inline-flex{display:inline-flex!important}}@container v-resize-drawer (max-width: 2559.98px){.hidden-xl-and-down{display:none!important}}@container v-resize-drawer (max-width: 2559.98px){.d-xl-and-down-none{display:none!important}.d-xl-and-down-inline{display:inline!important}.d-xl-and-down-inline-block{display:inline-block!important}.d-xl-and-down-block{display:block!important}.d-xl-and-down-table{display:table!important}.d-xl-and-down-table-row{display:table-row!important}.d-xl-and-down-table-cell{display:table-cell!important}.d-xl-and-down-flex{display:flex!important}.d-xl-and-down-inline-flex{display:inline-flex!important}}")),document.head.appendChild(n)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();