@indielayer/ui
Version:
Indielayer UI Components with Tailwind CSS build for Vue 3
161 lines (160 loc) • 5.85 kB
JavaScript
import { defineComponent as j, ref as r, watchEffect as K, watch as M, computed as y, onMounted as O, openBlock as w, createBlock as q, Teleport as F, createVNode as g, Transition as G, withCtx as k, withDirectives as H, createElementVNode as $, normalizeClass as x, unref as n, createElementBlock as I, createCommentVNode as S, normalizeStyle as J, renderSlot as u, vShow as Q } from "vue";
import { useBreakpoints as U, breakpointsTailwind as W, useEventListener as E, useSwipe as Y } from "../../node_modules/.pnpm/@vueuse_core@11.1.0_vue@3.5.10_typescript@5.2.2_/node_modules/@vueuse/core/index.js";
import { useTheme as Z } from "../../composables/useTheme.js";
import ee from "../scroll/Scroll.vue.js";
const te = {
key: 0,
ref: "swipeRef",
class: "flex flex-col max-h-full"
}, oe = ["left", "right", "top", "bottom"], ie = {
modelValue: Boolean,
position: {
type: String,
default: "left"
},
teleportTo: {
type: [String, Object],
default: "body"
},
width: {
type: [String, Number],
default: 220
},
height: {
type: [String, Number],
default: 320
},
breakpoint: [String, Number],
backdrop: {
type: Boolean,
default: !0
}
}, se = {
name: "XDrawer",
inheritAttrs: !1,
validators: {
position: oe
}
}, fe = /* @__PURE__ */ j({
...se,
props: ie,
emits: ["update:modelValue"],
setup(L, { expose: B, emit: T }) {
const t = L, d = T, i = r(!0), s = r(t.modelValue), p = r(null), c = r(null), h = r(!1), m = typeof t.breakpoint == "string", f = U(m ? W : { md: t.breakpoint || 768 }).smaller(m ? t.breakpoint : "md");
K(() => {
t.breakpoint && (f.value ? (i.value = !0, l()) : (i.value = !1, v()));
}), E(p, "pointerdown", l), M(() => t.modelValue, (e) => {
s.value = e;
}), typeof window < "u" && E(document, "keydown", V);
function V(e) {
e.key === "Escape" && s.value && l();
}
Y(c, {
onSwipeEnd(e, o) {
i.value && (t.position === "left" && o === "left" || t.position === "right" && o === "right" || t.position === "top" && o === "up" || t.position === "bottom" && o === "down") && l();
}
});
const N = y(() => {
const e = {};
return t.position === "left" || t.position === "right" ? e.width = `${t.width}px` : (t.position === "top" || t.position === "bottom") && (e.height = `${t.height}px`), e;
}), _ = y(() => {
const e = [];
return i.value && (e.push("absolute shadow-lg"), t.position === "top" ? e.push("top-0 inset-x-0") : t.position === "bottom" ? e.push("bottom-0 inset-x-0") : t.position === "left" ? e.push("left-0 inset-y-0") : t.position === "right" && e.push("right-0 inset-y-0")), e;
});
function C(e) {
e.classList.add("inset-0"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
}
function R(e, o) {
if (!i.value) {
o();
return;
}
const a = () => {
e.removeEventListener("transitionend", a), o();
};
e.addEventListener("transitionend", a), setTimeout(() => {
t.backdrop && e.classList.add("bg-slate-500/30"), t.position === "top" ? e.style.top = "0" : t.position === "bottom" ? e.style.bottom = "0" : t.position === "left" ? e.style.left = "0" : t.position === "right" && (e.style.right = "0");
}, 1);
}
function D(e) {
}
function z(e, o) {
const a = () => {
e.removeEventListener("transitionend", a), o();
};
e.addEventListener("transitionend", a), setTimeout(() => {
t.backdrop && e.classList.remove("bg-slate-500/30"), t.position === "top" ? e.style.top = `-${t.height}px` : t.position === "bottom" ? e.style.bottom = `-${t.height}px` : t.position === "left" ? e.style.left = `-${t.width}px` : t.position === "right" && (e.style.right = `-${t.width}px`);
}, 1);
}
function A(e) {
e.classList.remove("inset-0");
}
function l(e) {
e && e.target !== p.value || (s.value = !1, d("update:modelValue", !1));
}
function v() {
s.value = !0, d("update:modelValue", !0);
}
O(() => {
h.value = !0;
});
const { styles: P, classes: b, className: X } = Z("Drawer", {}, t);
return B({ open: v, close: l }), (e, o) => h.value ? (w(), q(F, {
key: 0,
to: e.teleportTo,
disabled: !i.value
}, [
g(G, {
css: !1,
onBeforeEnter: C,
onEnter: R,
onBeforeLeave: D,
onLeave: z,
onAfterLeave: A
}, {
default: k(() => [
H($("div", {
ref_key: "backdropRef",
ref: p,
class: x([
e.$attrs.class,
n(b).backdrop,
i.value || !e.breakpoint ? "absolute z-40" : ""
])
}, [
i.value && s.value ? (w(), I("div", te, null, 512)) : S("", !0),
$("div", {
ref_key: "drawerRef",
ref: c,
class: x([
n(X),
_.value,
n(b).wrapper
]),
style: J([N.value, n(P)])
}, [
u(e.$slots, "header"),
g(ee, {
scrollbar: !1,
vertical: "",
class: "flex-1"
}, {
default: k(() => [
u(e.$slots, "default")
]),
_: 3
}),
u(e.$slots, "footer")
], 6)
], 2), [
[Q, e.breakpoint ? s.value && n(f) || !n(f) : s.value]
])
]),
_: 3
})
], 8, ["to", "disabled"])) : S("", !0);
}
});
export {
fe as default
};