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