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
};
