@extclp/vexip-ui/es/components/full-screen/full-screen.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as F, ref as f, computed as p, watch as w, createBlock as _, openBlock as b, unref as a, withCtx as g, resolveDynamicComponent as I, mergeProps as N, renderSlot as P, createElementVNode as T, normalizeClass as $ } from "vue";
import "../portal/index.mjs";
import { useProps as z, useNameHelper as B, useId as D, emitEvent as H } from "@vexip-ui/config";
import { useFullScreen as V } from "@vexip-ui/hooks";
import { fullScreenProps as j } from "./props.mjs";
import q from "../portal/portal.vue2.mjs";
const A = ["id"], R = /* @__PURE__ */ F({
  name: "FullScreen",
  __name: "full-screen",
  props: j,
  setup(x, { expose: y }) {
    const d = z("fullScreen", x, {
      tag: "div"
    }), t = B("full-screen"), i = D(), l = f(!1), c = f(), o = f(), s = p(() => l.value && o.value), h = p(() => [t.b(), t.bs("vars"), { [t.bm("full")]: s.value }]), E = p(() => o.value === "window" ? "body" : ""), {
      enter: S,
      exit: C,
      target: v,
      full: k
    } = V();
    w(k, (e) => {
      e || (l.value = !1, o.value = void 0);
    }), w(s, (e) => {
      H(d.onToggle, e);
    });
    async function n(e = "window", r) {
      l.value && await u(), e !== "window" && await S(), l.value = !0, c.value = r, o.value = e !== "window" ? "browser" : "window";
    }
    async function u() {
      await C(), c.value = void 0, l.value = !1, o.value = void 0;
    }
    async function m(e = "window", r) {
      l.value ? o.value !== e ? await n(e, r) : await u() : await n(e, r);
    }
    return y({
      full: s,
      placeId: i,
      wrapper: v,
      enter: n,
      exit: u,
      toggle: m
    }), (e, r) => (b(), _(a(q), { to: E.value }, {
      default: g(() => [
        (b(), _(I(a(d).tag || "div"), N(e.$attrs, {
          ref_key: "wrapper",
          ref: v,
          class: h.value,
          style: { [a(t).cv("z-index")]: c.value }
        }), {
          default: g(() => [
            P(e.$slots, "default", {
              full: s.value,
              placeId: a(i),
              enter: n,
              exit: u,
              toggle: m
            }),
            T("div", {
              id: a(i),
              class: $(a(t).be("place")),
              role: "none"
            }, null, 10, A)
          ]),
          _: 3
        }, 16, ["class", "style"]))
      ]),
      _: 3
    }, 8, ["to"]));
  }
});
export {
  R as default
};
//# sourceMappingURL=full-screen.vue2.mjs.map