@yh-ui/components 1.0.26 → 1.0.36

package/dist/loading/src/service.mjs

@@ -5,14 +5,20 @@ import {
   h,
   isVNode,
   Transition,
-  computed
+  computed,
+  onBeforeUnmount
 } from "vue";
 import { useLocale } from "@yh-ui/hooks";
 import { useComponentTheme } from "@yh-ui/theme";
 import { YhSpin } from "../../spin/index.mjs";
+let defaultAppContext = null;
+export const setLoadingDefaultAppContext = (appContext) => {
+  defaultAppContext = appContext ?? null;
+};
 const createLoading = (options = {}, appContext) => {
+  const defaultTarget = document.querySelector(".yh-config-provider") ?? document.body;
   const resolvedOptions = {
-    target: document.body,
+    target: defaultTarget,
     body: false,
     fullscreen: true,
     lock: false,
@@ -22,6 +28,26 @@ const createLoading = (options = {}, appContext) => {
   const state = reactive({
     visible: true
   });
+  let target = typeof resolvedOptions.target === "string" ? document.querySelector(resolvedOptions.target) ?? document.body : resolvedOptions.target;
+  if (!target) target = document.body;
+  const parent = !resolvedOptions.fullscreen && resolvedOptions.body && target !== document.body ? document.body : target;
+  const bodyWrappedTarget = !resolvedOptions.fullscreen && parent === document.body && target !== document.body;
+  const maskStyle = reactive({});
+  let resizeObserver = null;
+  const syncMaskStyle = () => {
+    Object.keys(maskStyle).forEach((key) => delete maskStyle[key]);
+    if (!bodyWrappedTarget) return;
+    const rect = target.getBoundingClientRect();
+    maskStyle.top = `${window.scrollY + rect.top}px`;
+    maskStyle.left = `${window.scrollX + rect.left}px`;
+    maskStyle.right = "auto";
+    maskStyle.bottom = "auto";
+    maskStyle.width = `${rect.width}px`;
+    maskStyle.height = `${rect.height}px`;
+  };
+  const syncMaskPosition = () => {
+    syncMaskStyle();
+  };
   const component = {
     setup() {
       const { t } = useLocale();
@@ -29,6 +55,12 @@ const createLoading = (options = {}, appContext) => {
         "loading",
         computed(() => resolvedOptions.themeOverrides)
       );
+      onBeforeUnmount(() => {
+        window.removeEventListener("resize", syncMaskPosition);
+        window.removeEventListener("scroll", syncMaskPosition, true);
+        resizeObserver?.disconnect();
+        resizeObserver = null;
+      });
       return () => h(
         Transition,
         { name: "yh-loading-fade", appear: true },
@@ -44,7 +76,11 @@ const createLoading = (options = {}, appContext) => {
                   "is-glass": resolvedOptions.glass
                 }
               ],
-              style: [{ backgroundColor: resolvedOptions.background }, themeStyle.value]
+              style: [
+                { backgroundColor: resolvedOptions.background },
+                themeStyle.value,
+                maskStyle
+              ]
             },
             [
               h("div", { class: "yh-loading-spinner" }, [
@@ -67,22 +103,26 @@ const createLoading = (options = {}, appContext) => {
   const container = document.createElement("div");
   container.style.display = "contents";
   const vnode = createVNode(component);
-  if (appContext) {
-    vnode.appContext = appContext;
+  const resolvedAppContext = appContext ?? defaultAppContext;
+  if (resolvedAppContext) {
+    vnode.appContext = resolvedAppContext;
   }
   render(vnode, container);
-  let target = document.body;
-  if (resolvedOptions.fullscreen) {
-    target = document.body;
-  } else if (resolvedOptions.target) {
-    target = typeof resolvedOptions.target === "string" ? document.querySelector(resolvedOptions.target) : resolvedOptions.target;
-  }
-  if (!target) target = document.body;
-  const isRelative = target.style.position === "relative" || target.classList.contains("yh-loading-parent--relative");
-  if (!resolvedOptions.fullscreen && !isRelative) {
+  const computedPosition = window.getComputedStyle(target).position;
+  const needsRelativeParent = !resolvedOptions.fullscreen && !bodyWrappedTarget && computedPosition === "static";
+  if (needsRelativeParent) {
     target.classList.add("yh-loading-parent--relative");
   }
-  target.appendChild(container);
+  if (bodyWrappedTarget) {
+    syncMaskStyle();
+    window.addEventListener("resize", syncMaskPosition);
+    window.addEventListener("scroll", syncMaskPosition, true);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(syncMaskPosition);
+      resizeObserver.observe(target);
+    }
+  }
+  parent.appendChild(container);
   if (resolvedOptions.lock) {
     target.style.overflow = "hidden";
   }
@@ -92,12 +132,16 @@ const createLoading = (options = {}, appContext) => {
       setTimeout(() => {
         render(null, container);
         container.remove();
-        if (!resolvedOptions.fullscreen) {
+        if (needsRelativeParent) {
           target.classList.remove("yh-loading-parent--relative");
         }
         if (resolvedOptions.lock) {
           target.style.overflow = "";
         }
+        window.removeEventListener("resize", syncMaskPosition);
+        window.removeEventListener("scroll", syncMaskPosition, true);
+        resizeObserver?.disconnect();
+        resizeObserver = null;
       }, 400);
     },
     get visible() {

package/dist/lucky-draw/index.d.ts

@@ -1,207 +1,5 @@
 import LuckyDraw from './src/lucky-draw.vue';
-export declare const YhLuckyDraw: import("@yh-ui/utils").SFCWithInstall<{
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        type: {
-            type: import("vue").PropType<import("./index.js").LuckyDrawType>;
-            default: string;
-        };
-        prizes: {
-            type: import("vue").PropType<import("./index.js").LuckyPrize[]>;
-            default: () => never[];
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        targetId: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
-        size: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: number;
-        };
-        rounds: {
-            type: NumberConstructor;
-            default: number;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-        actionText: {
-            type: StringConstructor;
-            default: string;
-        };
-        hideBtn: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        themeOverrides: {
-            type: import("vue").PropType<Record<string, string>>;
-            default: () => {};
-        };
-    }>> & Readonly<{
-        onFinish?: ((prize: import("./index.js").LuckyPrize) => any) | undefined;
-        onStart?: (() => any) | undefined;
-        onClick?: ((e: MouseEvent) => any) | undefined;
-    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-        finish: (prize: import("./index.js").LuckyPrize) => void;
-        start: () => void;
-        click: (e: MouseEvent) => void;
-    }, import("vue").PublicProps, {
-        size: string | number;
-        loading: boolean;
-        type: import("./index.js").LuckyDrawType;
-        themeOverrides: Record<string, string>;
-        duration: number;
-        actionText: string;
-        prizes: import("./index.js").LuckyPrize[];
-        targetId: string | number;
-        rounds: number;
-        hideBtn: boolean;
-    }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<import("vue").ExtractPropTypes<{
-        type: {
-            type: import("vue").PropType<import("./index.js").LuckyDrawType>;
-            default: string;
-        };
-        prizes: {
-            type: import("vue").PropType<import("./index.js").LuckyPrize[]>;
-            default: () => never[];
-        };
-        loading: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        targetId: {
-            type: import("vue").PropType<string | number>;
-            default: string;
-        };
-        size: {
-            type: (StringConstructor | NumberConstructor)[];
-            default: number;
-        };
-        rounds: {
-            type: NumberConstructor;
-            default: number;
-        };
-        duration: {
-            type: NumberConstructor;
-            default: number;
-        };
-        actionText: {
-            type: StringConstructor;
-            default: string;
-        };
-        hideBtn: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        themeOverrides: {
-            type: import("vue").PropType<Record<string, string>>;
-            default: () => {};
-        };
-    }>> & Readonly<{
-        onFinish?: ((prize: import("./index.js").LuckyPrize) => any) | undefined;
-        onStart?: (() => any) | undefined;
-        onClick?: ((e: MouseEvent) => any) | undefined;
-    }>, {}, {}, {}, {}, {
-        size: string | number;
-        loading: boolean;
-        type: import("./index.js").LuckyDrawType;
-        themeOverrides: Record<string, string>;
-        duration: number;
-        actionText: string;
-        prizes: import("./index.js").LuckyPrize[];
-        targetId: string | number;
-        rounds: number;
-        hideBtn: boolean;
-    }>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    type: {
-        type: import("vue").PropType<import("./index.js").LuckyDrawType>;
-        default: string;
-    };
-    prizes: {
-        type: import("vue").PropType<import("./index.js").LuckyPrize[]>;
-        default: () => never[];
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    targetId: {
-        type: import("vue").PropType<string | number>;
-        default: string;
-    };
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: number;
-    };
-    rounds: {
-        type: NumberConstructor;
-        default: number;
-    };
-    duration: {
-        type: NumberConstructor;
-        default: number;
-    };
-    actionText: {
-        type: StringConstructor;
-        default: string;
-    };
-    hideBtn: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    themeOverrides: {
-        type: import("vue").PropType<Record<string, string>>;
-        default: () => {};
-    };
-}>> & Readonly<{
-    onFinish?: ((prize: import("./index.js").LuckyPrize) => any) | undefined;
-    onStart?: (() => any) | undefined;
-    onClick?: ((e: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    finish: (prize: import("./index.js").LuckyPrize) => void;
-    start: () => void;
-    click: (e: MouseEvent) => void;
-}, string, {
-    size: string | number;
-    loading: boolean;
-    type: import("./index.js").LuckyDrawType;
-    themeOverrides: Record<string, string>;
-    duration: number;
-    actionText: string;
-    prizes: import("./index.js").LuckyPrize[];
-    targetId: string | number;
-    rounds: number;
-    hideBtn: boolean;
-}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
-    $slots: {
-        prize?: (props: {
-            prize: import("./index.js").LuckyPrize;
-        }) => any;
-    } & {
-        action?: (props: {}) => any;
-    } & {
-        prize?: (props: {
-            prize: import("./index.js").LuckyPrize;
-        }) => any;
-    } & {
-        action?: (props: {}) => any;
-    };
-})> & Record<string, unknown>;
+export declare const YhLuckyDraw: any;
 export default YhLuckyDraw;
 export * from './src/lucky-draw';
 export type LuckyDrawInstance = InstanceType<typeof LuckyDraw>;