@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.
251 lines (250 loc) • 36.2 kB
JavaScript
import { unref as c, defineComponent as ze, useModel as Ge, inject as re, ref as k, watchEffect as Ie, watch as le, toRef as ue, computed as f, useSlots as Pe, onBeforeMount as xe, onMounted as He, onUnmounted as Ne, openBlock as P, createBlock as se, mergeProps as Te, withCtx as Ve, createElementBlock as R, normalizeStyle as de, normalizeClass as ve, renderSlot as O, createCommentVNode as U, createElementVNode as Re, mergeModels as ce, mergeDefaults as Oe, defineAsyncComponent as Ue } from "vue";
import { useTheme as _e, useDisplay as Ye } from "vuetify";
import { VNavigationDrawer as qe } from "vuetify/components";
import { VIcon as je } from "vuetify/components/VIcon";
const C = "v-resize-drawer", E = (l) => {
const { unit: o = "px", value: r } = l;
if (r != null && r !== "") return +r ? `${Number(r)}${o}` : String(r);
}, x = (l) => {
const o = window.innerWidth, r = (function(i) {
if (typeof i == "string") {
const m = /(\d+(\.\d+)?)(\s*([a-zA-Z]+))?/, h = i.match(m);
if (!h) return i;
const e = parseFloat(h[1]), v = h[4];
if (!isNaN(e)) {
const p = Math.round(e);
return v ? `${p} ${v}` : `${p}`;
}
return i;
}
return typeof i == "number" ? Math.round(i) : i;
})(l);
return typeof l == "string" && l.includes("%") ? Number(l.replace("%", "")) / 100 * o : typeof r == "string" ? Number(r.replace(/\D/g, "")) : r;
}, he = (l) => {
if (!l) return 0;
if (typeof l == "number") return l;
const o = document.createElement("div");
o.style.position = "absolute", o.style.visibility = "hidden", o.style.width = l;
const r = document.body;
r.appendChild(o);
const i = getComputedStyle(o).width;
return r.removeChild(o), parseFloat(i);
}, 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(l, o) {
return l === "local" ? localStorage.getItem(o) : l === "session" ? sessionStorage.getItem(o) : "";
}
const _ = (l) => {
const { action: o = "update", rail: r, resizedAmount: i, saveAmount: m, storageName: h, storageType: e } = l;
if (r && !m) return;
let v = i;
v = v ?? void 0, o === "set" && (v = j(e, h) ?? "", v = v || i), e === "local" && localStorage.setItem(h, String(v)), e === "session" && sessionStorage.setItem(h, String(v));
};
function me(l) {
let o = (function(F) {
const w = { 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 = F;
return Object.entries(w).forEach(([A, S]) => {
F.toLowerCase() != A.toLowerCase() || (z = S);
}), z;
})(l), r = 0, i = 0, m = 0, h = 0, e = 0, v = 0;
if (o.substring(0, 1) === "#") o = (function(F) {
let w = F.replace("#", "");
w.length === 3 && (w = w.split("").map((G) => G + G).join(""));
const z = parseInt(w.substring(0, 2), 16), A = parseInt(w.substring(2, 4), 16), S = parseInt(w.substring(4, 6), 16);
return [z, A, S];
})(o);
else if (o.includes("rgb")) o = [...o.matchAll(/\d+/g)].map(Number);
else if (o.includes("hsl")) return o = [...o.matchAll(/\d+/g)].map(Number), r = o[0], i = o[1], m = o[2], `${r} ${i}% ${m}%`;
[h, e, v] = o, h /= 255, e /= 255, v /= 255;
const p = Math.max(h, e, v), B = Math.min(h, e, v);
if (p === null || !B === null || isNaN(p) || isNaN(B)) {
const F = "0 0% 100% / 12%";
return console.warn(`[VResizeDrawer]: The "color" prop value using "${o}" doesn't exist. Using the value "hsl(${F})" in it's place.`), F;
}
if (r = (p + B) / 2, i = (p + B) / 2, m = (p + B) / 2, p == B) r = i = 0;
else {
const F = p - B;
switch (i = m > 0.5 ? F / (2 - p - B) : F / (p + B), p) {
case h:
r = (e - v) / F + (e < v ? 6 : 0);
break;
case e:
r = (v - h) / F + 2;
break;
case v:
r = (h - e) / F + 4;
}
r /= 6;
}
return r = Math.round(360 * r), i = Math.round(100 * i), m = Math.round(100 * m), `${r} ${i}% ${m}%`;
}
const Fe = (l, o) => {
if (/* @__PURE__ */ (function(i) {
return i === "transparent" || i === "none" || i === "inherit" || i === "currentColor" || i === "initial" || i === "unset";
})(l)) return l;
if ((function(i) {
return i.includes("--v-theme");
})(l)) return `rgb(var(${l}))`;
const r = (function(i, m) {
const h = m.global.current.value?.colors ?? {};
return Object.entries(h).find(([e]) => e === i);
})(l, o);
return r ? `hsl(${me(String(r[1]))})` : `hsl(${me(l)})`;
}, 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: ce(Oe({ 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: ce(["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(l, { emit: o }) {
const r = o, i = Ge(l, "modelValue"), m = l, h = re(ge, {}), e = k({ ...m, ...h });
Ie(() => {
e.value = { ...m, ...h };
}), le(() => m.width, (a) => {
w.value = a, d.value = E({ value: a }) || void 0, _({ rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType });
});
const v = ue(e.value, "handleIconSize"), p = ue(e.value, "handlePosition"), B = f(() => e.value), F = re(/* @__PURE__ */ Symbol.for("vuetify:icons")), w = k(256), z = k(256), A = { mouseDown: !1, mouseUp: !0 }, S = k(!1), G = k(!1), X = k(e.value.location), K = k(), d = k(256), Y = Pe(), Z = _e(), fe = Ye(), g = f(() => X.value === "top" || X.value === "bottom"), I = f(() => `${e.value.storageName}-${e.value.location}`);
xe(() => {
e.value.name === void 0 && (e.value.name = String(Math.floor(1e8 * Math.random())));
}), He(() => {
(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), t = E({ value: g.value ? e.value.height : e.value.width });
d.value = t, w.value = d.value, (e.value.saveHeight || e.value.saveWidth) && a && !e.value.rail && (d.value = j(e.value.storageType, I.value)), d.value = x(d.value), _({ 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", q, !1), document.removeEventListener("touchend", V, !1), document.removeEventListener("touchstart", ne, !1);
}), le(() => i, (a) => {
r("update:modelValue", a), a || r("close");
});
const we = f(() => ((a) => {
const { expandOnHover: t, floating: n, isMouseover: s, location: u, rail: D, railWidth: $, temporary: L } = a;
let b = u === "left" || u === "start" || u === void 0;
return u !== "top" && u !== "bottom" || (b = !1), { [`${C}`]: !0, [`${C}--${u}`]: u === "bottom" || u === "top", "v-navigation-drawer--custom-rail": Number($) !== 56, "v-navigation-drawer--expand-on-hover": t, "v-navigation-drawer--floating": n, "v-navigation-drawer--is-hovering": c(s), "v-navigation-drawer--left": b, "v-navigation-drawer--rail": D ?? !1, "v-navigation-drawer--right": u === "right" || u === "end", "v-navigation-drawer--temporary": L || !1 };
})({ expandOnHover: e.value.expandOnHover, floating: e.value.floating, isMouseover: S, location: e.value.location, rail: e.value.rail, railWidth: e.value.railWidth, temporary: e.value.temporary })), De = f(() => ((a) => {
const { isMouseDown: t, location: n, maxWidth: s, minWidth: u, rail: D, railWidth: $, resizedAmount: L, snapBack: b } = a;
if (D) return {};
let y = D ? $ : c(L);
b || (parseInt(y) >= parseInt(s) && (y = parseInt(s)), parseInt(y) <= parseInt(u) && (y = parseInt(u)));
let ie = {};
return ie = n === "top" || n === "bottom" ? { maxHeight: `${E({ value: y })} !important`, minHeight: `${E({ value: y })} !important`, transitionDuration: c(t) ? "0s" : ".2s", width: "100%" } : { transitionDuration: c(t) ? "0s" : ".2s", width: E({ value: y }) }, ie;
})({ isMouseDown: G, location: e.value.location, maxWidth: N.value, minWidth: H.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 x(a);
}), ye = f(() => ((a) => {
const { drawerLocation: t, handlePosition: n } = a;
return { "v-navigation-drawer__handle": !0, [`${C}--handle-container`]: !0, [`${C}--handle-container-position-${n}`]: !0, [`${C}--handle-container-parent-${t}`]: !0 };
})({ drawerLocation: e.value.location, handlePosition: e.value.handlePosition })), Ce = f(() => ((a) => {
const { borderWidth: t, handleColor: n, iconSizeUnit: s, location: u, position: D, theme: $ } = a, L = "translateX(-50%) " + (u === "top" ? "rotate(90deg)" : "rotate(-90deg)");
let b = `${s}px`, y = `${s}px`;
return D === "border" ? (u === "bottom" || u === "top" ? b = E({ value: t }) : (b = "100%", y = E({ value: t })), { backgroundColor: Fe(n, $), height: b, width: y }) : { backgroundColor: "transparent", height: b, transform: u === "top" || u === "bottom" ? L : void 0, width: y };
})({ 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: t, theme: n } = a;
return { color: Fe(t, n) };
})({ color: m.handleColor, theme: Z })), Se = f(() => ((a) => {
const { drawerLocation: t, handlePosition: n, iconOptions: s, isUserIcon: u } = a;
return { [`${C}--handle-container-icon`]: !0, [`${C}--handle-container-icon-${n}-${t}`]: !0, [`${C}--handle-container-icon-user-icon`]: u, [`${C}--handle-container-icon-fa`]: s?.defaultSet === "fa", [`${C}--handle-container-icon-fa-${n}`]: s?.defaultSet === "fa" };
})({ drawerLocation: e.value.location, handlePosition: e.value.handlePosition, iconOptions: F, isUserIcon: e.value.handleIcon != null && e.value.handleIcon !== "" })), be = f(() => ((t) => {
const { icon: n, iconOptions: s, name: u } = t;
if (u === "border") return;
if (n) return n;
let D = (s?.defaultSet ?? "").toLowerCase();
D = D === "fa" || D === "fasvg" ? "fa" : D;
const $ = Xe[D];
if (!$) throw new Error(`[VResizeDrawer]: No default ${s?.defaultSet} icon set found.`);
const L = $[u];
if (!L) throw new Error(`[VResizeDrawer]: No ${u} icon found.`);
return L;
})({ icon: e.value.handleIcon, iconOptions: F, name: e.value.handlePosition })), M = k(he(String(v.value)));
function ke() {
S.value = !0, r("drawer:mouseenter", S.value);
}
function We() {
S.value = !1, r("drawer:mouseleave", S.value);
}
function Q(a, t) {
let n = t;
e.value.location !== "right" && e.value.location !== "end" || (n = document.body.scrollWidth - n + M.value / 2), e.value.location !== "left" && e.value.location !== "start" || (n += M.value / 2), e.value.location === "top" && (n -= (function(s) {
const u = -29e-5 * s * s + -0.356 * s + 43.56;
return Math.ceil(u);
})(M.value)), e.value.location === "bottom" && (n = window.innerHeight - n + M.value / 2), d.value = E({ value: n }) || void 0, document.body.style.cursor = "grabbing", W("handle:touchmove", a), W("handle:drag", a);
}
function ee(a) {
Q(a, g.value ? a.touches[0]?.clientY : a.touches[0]?.clientX);
}
function q(a) {
Q(a, g.value ? a.clientY : a.clientX);
}
Object.keys(pe).some((a) => a.includes(String(v.value))) && (M.value = he(pe[String(v.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 t = parseInt(String(a).replace("%", ""));
return (g.value ? window.innerHeight : window.innerWidth) * t / 100;
}
return a;
}), H = 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 t = parseInt(String(a).replace("%", ""));
return (g.value ? window.innerHeight : window.innerWidth) * t / 100;
}
return a;
});
function ae(a) {
let t = a;
parseInt(t) >= parseInt(N.value) && (t = parseInt(N.value)), parseInt(t) <= parseInt(H.value) && (t = parseInt(H.value)), typeof t == "number" && (t = Math.round(t));
let n = x(t);
const s = x(N.value), u = x(H.value);
return n >= s && (n = s), u >= n && (n = u), n;
}
function $e(a) {
W("handle:click", a);
}
function Le(a) {
d.value = w.value, g.value && (d.value = z.value), _({ rail: e.value.rail, resizedAmount: d.value, saveAmount: e.value.saveHeight || e.value.saveWidth, storageName: I.value, storageType: e.value.storageType }), W("handle:dblclick", a);
}
function te(a, t) {
a.preventDefault(), a.stopPropagation();
const n = a.type;
let s = M.value;
G.value = !0, e.value.handlePosition === "border" && (s = e.value.handleBorderWidth || 1), A.mouseUp = !1, t < s && (n === "touchstart" ? document.addEventListener("touchmove", ee, !1) : document.addEventListener("mousemove", q, !1)), A.mouseDown || (A.mouseDown = !0, n === "touchstart" ? (document.addEventListener("touchend", V, !1), W("handle:touchstart", a)) : (document.addEventListener("mouseup", T, !1), W("handle:mousedown", a)));
}
function Me(a) {
te(a, g.value ? a.offsetY : a.offsetX);
}
function ne(a) {
let t = (g.value ? a.touches[0]?.radiusY : a.touches[0]?.radiusX) ?? 0;
t /= 2, te(a, t);
}
function oe(a) {
a.preventDefault(), a.stopPropagation();
const t = a.type, n = K.value;
G.value = !1, A.mouseDown = !1, g.value || (d.value = n?.width ?? w.value), document.body.style.cursor = "";
const s = d.value;
String(s).includes("-") && (d.value = H.value), d.value = ae(d.value), d.value = E({ value: d.value }) || void 0, d.value = x(d.value), _({ 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, t === "touchend" ? (document.removeEventListener("touchend", V, !1), document.removeEventListener("touchmove", ee, !1), W("handle:touchend", a)) : (document.removeEventListener("mouseup", T, !1), document.removeEventListener("mousemove", q, !1), W("handle:mouseup", a)));
}
function T(a) {
oe(a);
}
function V(a) {
oe(a);
}
function W(a, t) {
const n = parseInt(ae(d.value)) ?? 0, s = { e: t, eventName: a, offsetWidth: window.innerWidth - n + "px", resizedAmount: `${n}px`, resizedHeight: `${n}px`, resizedWidth: `${n}px`, width: `${n}px` };
r(a, s);
}
return (a, t) => (P(), se(c(qe), Te(c(B), { ref_key: "resizeDrawer", ref: K, modelValue: i.value, "onUpdate:modelValue": t[0] || (t[0] = (n) => i.value = n), class: c(we), location: c(e).location, name: c(e).name, style: c(De), tag: c(e).tag, width: c(Be), onMouseenter: ke, onMouseleave: We }), { default: Ve(() => [c(Ae) ? (P(), R("div", { key: 0, class: ve(c(ye)), style: de(c(Ce)), onClick: $e, onDblclick: Le, onMousedown: Me, onMouseup: T, onTouchend: V, onTouchstart: ne }, [c(Y).handle ? (P(), R("div", Ze, [O(a.$slots, "handle")])) : c(p) !== "border" ? (P(), se(je, { key: 1, class: ve(["v-resize-drawer--handle-icon", c(Se)]), icon: c(be), size: c(v), style: de(c(Ee)) }, null, 8, ["class", "icon", "size", "style"])) : U("", !0)], 38)) : U("", !0), c(Y).prepend ? (P(), R("div", Je, [O(a.$slots, "prepend")])) : U("", !0), Re("div", Qe, [O(a.$slots, "default")]), c(Y).append ? (P(), R("div", ea, [O(a.$slots, "append")])) : U("", !0)]), _: 3 }, 16, ["modelValue", "class", "location", "name", "style", "tag", "width"]));
} }), ge = /* @__PURE__ */ Symbol();
function ra(l = {}) {
return { install: (o) => {
o.provide(ge, l), o.component("VResizeDrawer", Ue(() => import("./VResizeDrawer-ClVYXgLY.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: 840px){.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: 1145px){.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: 1545px){.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: 2138px){.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: 839.98px){.hidden-sm{display:none!important}}@container v-resize-drawer (min-width: 600px) and (max-width: 839.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: 840px) and (max-width: 1144.98px){.hidden-md{display:none!important}}@container v-resize-drawer (min-width: 840px) and (max-width: 1144.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: 1145px) and (max-width: 1544.98px){.hidden-lg{display:none!important}}@container v-resize-drawer (min-width: 1145px) and (max-width: 1544.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: 1545px) and (max-width: 2137.98px){.hidden-xl{display:none!important}}@container v-resize-drawer (min-width: 1545px) and (max-width: 2137.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: 2138px){.hidden-xxl{display:none!important}}@container v-resize-drawer (min-width: 2138px){.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: 840px){.hidden-md-and-up{display:none!important}}@container v-resize-drawer (min-width: 840px){.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: 1145px){.hidden-lg-and-up{display:none!important}}@container v-resize-drawer (min-width: 1145px){.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: 1545px){.hidden-xl-and-up{display:none!important}}@container v-resize-drawer (min-width: 1545px){.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: 839.98px){.hidden-sm-and-down{display:none!important}}@container v-resize-drawer (max-width: 839.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: 1144.98px){.hidden-md-and-down{display:none!important}}@container v-resize-drawer (max-width: 1144.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: 1544.98px){.hidden-lg-and-down{display:none!important}}@container v-resize-drawer (max-width: 1544.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: 2137.98px){.hidden-xl-and-down{display:none!important}}@container v-resize-drawer (max-width: 2137.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)}})();