@aplus-frontend/ui 0.4.10 → 0.4.12

package/es/src/full-screen/index.vue.mjs

@@ -0,0 +1,85 @@
+import { defineComponent as R, ref as i, watch as E, unref as a, computed as n, openBlock as m, createBlock as d, withCtx as v, resolveDynamicComponent as z, mergeProps as C, renderSlot as F, createElementVNode as N, normalizeClass as S } from "vue";
+import "../hooks/index.mjs";
+import "../portal/index.mjs";
+import "../config-provider/index.mjs";
+import { useScrollLock as h } from "@vueuse/core";
+import { useFullScreen as I } from "../hooks/useFullScreen.mjs";
+import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
+import B from "../portal/index.vue.mjs";
+const H = /* @__PURE__ */ R({
+  name: "FullScreen",
+  __name: "index",
+  props: {
+    wrapperElementName: { default: "div" },
+    zIndex: { default: 2147483647 }
+  },
+  setup(L, { expose: w }) {
+    const {
+      target: f,
+      full: b,
+      enter: y,
+      exit: _
+    } = I(), { b: x, bm: g, be: k } = $("full-screen"), t = i(!1), l = i(), p = h(document.body), u = i();
+    E(
+      () => a(b),
+      (e) => {
+        e || (t.value = !1, l.value = void 0);
+      }
+    );
+    async function o(e, r = !1) {
+      await s(), t.value = !0, l.value = e, e === "browser" ? y(r) : p.value = !0;
+    }
+    async function s(e = !1) {
+      t.value = !1, l.value === "browser" ? await _(e) : p.value = !1, l.value = void 0;
+    }
+    async function c(e, r = !1) {
+      t.value ? l.value !== e ? await o(e, r) : await s(r) : await o(e, r);
+    }
+    return w({
+      target: n(() => a(f)),
+      portalRoot: n(() => a(u)),
+      full: n(() => a(t)),
+      mode: n(() => a(l)),
+      enter: o,
+      exit: s,
+      toggle: c
+    }), (e, r) => (m(), d(a(B), {
+      to: "body",
+      disabled: l.value !== "window"
+    }, {
+      default: v(() => [
+        (m(), d(z(e.wrapperElementName), C({
+          ref_key: "target",
+          ref: f
+        }, e.$attrs, {
+          class: [
+            a(x)("wrapper"),
+            t.value && l.value === "window" ? a(g)("wrapper", "full") : null
+          ],
+          style: { zIndex: t.value && l.value === "window" ? e.zIndex : "unset" }
+        }), {
+          default: v(() => [
+            F(e.$slots, "default", {
+              full: t.value,
+              enter: o,
+              exit: s,
+              toggle: c,
+              mode: l.value,
+              portalRoot: u.value
+            }),
+            N("div", {
+              ref_key: "portalRootRef",
+              ref: u,
+              class: S(a(k)("wrapper", "portal-root"))
+            }, null, 2)
+          ]),
+          _: 3
+        }, 16, ["class", "style"]))
+      ]),
+      _: 3
+    }, 8, ["disabled"]));
+  }
+});
+export {
+  H as default
+};

package/es/src/full-screen/index.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./index.vue.mjs";
+export {
+  f as default
+};

package/es/src/full-screen/interface.d.ts

@@ -0,0 +1,50 @@
+import { ComputedRef } from 'vue';
+export type FullScreenMode = 'browser' | 'window';
+export type FullScreenProps = {
+    /**
+     * 容器元素标签名
+     */
+    wrapperElementName?: string;
+    /**
+     * 全屏状态下的css zIndex 默认为2^31 - 1
+     */
+    zIndex?: number;
+};
+export type FullScreenExpose = {
+    /**
+     * 全屏的目标元素
+     */
+    target: ComputedRef<HTMLElement>;
+    /**
+     * 目标元素内用于渲染全局组件的容器
+     */
+    portalRoot: ComputedRef<HTMLDivElement>;
+    /**
+     * 当前是否全屏
+     */
+    full: ComputedRef<boolean>;
+    /**
+     * 当前的全屏模式
+     */
+    mode: ComputedRef<FullScreenMode>;
+    /**
+     * 进入全屏
+     * @param mode 全屏模式 窗口全屏/浏览器全屏
+     * @param force
+     * @returns
+     */
+    enter: (mode: FullScreenMode, force?: boolean) => Promise<void>;
+    /**
+     * 退出全屏
+     * @param force
+     * @returns
+     */
+    exit: (force?: boolean) => Promise<void>;
+    /**
+     * 切换全屏状态
+     * @param mode 全屏模式
+     * @param force
+     * @returns
+     */
+    toggle: (mode: FullScreenMode, force?: boolean) => Promise<void>;
+};

package/es/src/full-screen/interface.mjs

@@ -0,0 +1 @@
+

package/es/src/full-screen/style/css.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/full-screen/index.css';

package/es/src/full-screen/style/index.js

@@ -0,0 +1 @@
+import '@aplus-frontend/ui/theme/full-screen/index.less';

package/es/src/hooks/index.d.ts

@@ -2,3 +2,4 @@ export { useMessage } from './useMessage';
 export { useControllableValue } from './useControllableValue';
 export { useManualRef } from './useManualRef';
 export { useThrottleRef } from './useThrottleRef';
+export { useFullScreen } from './useFullScreen';

package/es/src/hooks/index.mjs

@@ -1,10 +1,12 @@
 import { useMessage as r } from "./useMessage.mjs";
-import { useControllableValue as f } from "./useControllableValue.mjs";
-import { useManualRef as s } from "./useManualRef.mjs";
+import { useControllableValue as t } from "./useControllableValue.mjs";
+import { useManualRef as f } from "./useManualRef.mjs";
 import { useThrottleRef as a } from "./useThrottleRef.mjs";
+import { useFullScreen as p } from "./useFullScreen.mjs";
 export {
-  f as useControllableValue,
-  s as useManualRef,
+  t as useControllableValue,
+  p as useFullScreen,
+  f as useManualRef,
   r as useMessage,
   a as useThrottleRef
 };

package/es/src/hooks/useFullScreen.d.ts

@@ -0,0 +1,8 @@
+import { Ref, WritableComputedRef, ComputedRef } from 'vue';
+export declare const useFullScreen: (target?: Ref<HTMLElement | null | undefined>) => {
+    target: WritableComputedRef<HTMLElement | null | undefined, HTMLElement | null | undefined>;
+    full: ComputedRef<boolean>;
+    enter: (force?: boolean) => Promise<boolean>;
+    exit: (force?: boolean) => Promise<boolean>;
+    toggle: (force?: boolean) => Promise<boolean>;
+};

package/es/src/hooks/useFullScreen.mjs

@@ -0,0 +1,51 @@
+import { isClient as d } from "@vueuse/core";
+import { computed as c, unref as u, isRef as v, ref as f, watch as p } from "vue";
+const a = /* @__PURE__ */ new WeakMap(), o = /* @__PURE__ */ new Set();
+d && document.addEventListener("fullscreenchange", () => {
+  if (o.forEach((e) => e.value = !1), document.fullscreenElement) {
+    const e = a.get(
+      document.fullscreenElement
+    );
+    e && (e.value = !0);
+  }
+});
+const E = (e = f(null)) => {
+  const i = c({
+    get: () => u(e),
+    set: (t) => {
+      v(e) && (e.value = t);
+    }
+  }), l = f(!1);
+  o.add(l), p(
+    () => e.value,
+    (t, n) => {
+      t && a.set(t, l), n && a.delete(n);
+    },
+    {
+      immediate: !0,
+      flush: "post"
+    }
+  );
+  async function r(t = !1) {
+    await s();
+    const n = u(e);
+    return n && (t || !document.fullscreenElement) ? (await n.requestFullscreen(), l.value = !0, !0) : !1;
+  }
+  async function s(t = !1) {
+    const n = u(e);
+    return t || n && document.fullscreenElement === n ? (await document.exitFullscreen(), l.value = !1, !0) : !1;
+  }
+  async function m(t = !1) {
+    return await (u(l) ? s(t) : r(t));
+  }
+  return {
+    target: i,
+    full: c(() => u(l)),
+    enter: r,
+    exit: s,
+    toggle: m
+  };
+};
+export {
+  E as useFullScreen
+};

package/es/src/index.d.ts

@@ -19,3 +19,5 @@ export * from './editable-table';
 export * from './ap-descriptions';
 export * from './scroll-bar';
 export * from './scroll-view';
+export * from './portal';
+export * from './full-screen';