oops-ui 1.0.1 → 1.0.3

package/styles/loading-keyframes.scss

@@ -4,25 +4,11 @@
 
   100%,
   0% {
-    background-size:
-      10% 10%,
-      10% 10%,
-      10% 10%,
-      10% 10%;
-    background-position:
-      25% 45%,
-      41.7% 45%,
-      58.3% 45%,
-      75% 45%;
-  }
-
-  20%,
-  80% {
     background-size: 2.5% 2.5%;
     background-position: 25% 45%;
   }
 
-  22% {
+  3.258% {
     background-size:
       3.75% 3.75%,
       2.5% 2.5%,
@@ -36,7 +22,7 @@
       25% 45%;
   }
 
-  24% {
+  6.516% {
     background-size:
       5% 5%,
       2.5% 2.5%,
@@ -50,7 +36,7 @@
       25% 45%;
   }
 
-  26% {
+  9.774% {
     background-size:
       6.25% 6.25%,
       2.5% 2.5%,
@@ -64,7 +50,7 @@
       25% 45%;
   }
 
-  28% {
+  13.032% {
     background-size:
       7.5% 7.5%,
       3.75% 3.75%,
@@ -79,7 +65,7 @@
       25% 45%;
   }
 
-  30% {
+  16.29% {
     background-size:
       8.75% 8.75%,
       5% 5%,
@@ -94,7 +80,7 @@
       25% 45%;
   }
 
-  32% {
+  19.548% {
     background-size:
       10% 10%,
       6.25% 6.25%,
@@ -110,7 +96,7 @@
       25% 45%;
   }
 
-  34% {
+  22.806% {
     background-size:
       10% 10%,
       7.5% 7.5%,
@@ -130,15 +116,28 @@
   $Pi: 3.1415926;
 
   @for $i from 18 through 33 {
-    #{calc($i / 50 * 100%)} {
-      background-position: #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) * 1%},
-      #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) * 1%},
-      #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) * 1%},
-      #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) * 1%} #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) * 1%};
+    #{calc((($i  - 10 )/ 31  ) * 100%)} {
+      background-position:
+        #{(50 - (25 * cos(($Pi * ($i - 10)) / 12))) *
+          1%}
+          #{(45 - 25 * sin(($Pi * ($i - 10)) / 12)) *
+          1%},
+        #{(50 - (25 * cos(($Pi * ($i - 13)) / 12))) *
+          1%}
+          #{(45 - 25 * sin(($Pi * ($i - 13)) / 12)) *
+          1%},
+        #{(50 - (25 * cos(($Pi * ($i - 15)) / 12))) *
+          1%}
+          #{(45 - 25 * sin(($Pi * ($i - 15)) / 12)) *
+          1%},
+        #{(50 - (25 * cos(($Pi * ($i - 17)) / 12))) *
+          1%}
+          #{(45 - 25 * sin(($Pi * ($i - 17)) / 12)) *
+          1%};
     }
   }
 
-  68% {
+  78.192% {
     background-size:
       10% 10%,
       7.5% 7.5%,
@@ -155,7 +154,7 @@
       48% 70%;
   }
 
-  70% {
+  81.45% {
     background-size:
       8.75% 8.75%,
       7.5% 7.5%,
@@ -172,7 +171,7 @@
       43.53% 69.15%;
   }
 
-  72% {
+  84.708% {
     background-size:
       7.5% 7.5%,
       7.5% 7.5%,
@@ -189,7 +188,7 @@
       37.45% 66.65%;
   }
 
-  74% {
+  87.966% {
     background-size:
       6.25% 6.25%,
       6.25% 6.25%,
@@ -206,7 +205,7 @@
       32.32% 62.68%;
   }
 
-  76% {
+  91.224% {
     background-size:
       5% 5%,
       5% 5%,
@@ -223,7 +222,7 @@
       28.35% 57.45%;
   }
 
-  78% {
+  97.482% {
     background-size:
       3.75% 3.75%,
       3.75% 3.75%,
@@ -239,4 +238,4 @@
       // 位置  23
       25.85% 51.47%;
   }
-}
+}

package/type/components/ThemeContext/index.d.ts

@@ -22,4 +22,4 @@ import { ThemeColorModeProviderProps, ThemeContextType } from './types';
  */
 export declare function useColorMode(): ThemeContextType;
 /**    */
-export declare function ThemeColorModeProvider({ children, initialTheme }: ThemeColorModeProviderProps): import("react").JSX.Element;
+export declare function ThemeColorModeProvider({ children, initialTheme }: ThemeColorModeProviderProps): import("react/jsx-runtime").JSX.Element;

package/type/components/button/button.d.ts

@@ -7,4 +7,4 @@
 /**
  * 按钮
  */
-export default function Button(): import("react").JSX.Element;
+export default function Button(): import("react/jsx-runtime").JSX.Element;

package/type/components/switch/index.d.ts

@@ -11,4 +11,4 @@ import { HTMLAttributes } from 'react';
 export declare function Switch({ value, change, children, ...props }: {
     value: boolean;
     change?: (e?: React.MouseEvent) => void;
-} & HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+} & HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/type/customHooks/useRipples/buildBackground/default-background/circleDataList.d.ts

@@ -7,7 +7,7 @@
 /**  圆数据  */
 export declare const circleDataList: {
     /**  计数器  */
-    #cum: number;
+    "__#private@#cum": number;
     /**  构建新的数据依据  */
     build(darkMode: boolean): void;
     /**  数据依据  */

package/type/customHooks/useRipples/callback/reload-background.d.ts

@@ -8,5 +8,9 @@ import { Ripples } from '../ripplesClass';
 /**
  * 重新加载背景图片
  *
+ *
+ * 为了避免在高频父元素尺寸变化时触发 canvas 的 width、height 属性变化。
+ * 使用防抖进行处理设置 canvas 的 width、height 值
+ *
  */
 export declare function reloadBackground(this: Ripples): void;

package/type/customHooks/useRipples/ripplesClass.d.ts

@@ -16,7 +16,6 @@ import { FadeData } from './rippersData/fadeData';
  * 魔改自大佬的[jQuey 代码](https://github.com/sirxemic/jquery.ripples)
  */
 export declare class Ripples extends RipplesData {
-    #private;
     /**  渲染数据  */
     renderData: RipplesRenderData | null;
     /**  使用参数  */
@@ -38,8 +37,6 @@ export declare class Ripples extends RipplesData {
      * 缓进缓出
      */
     fade(): void;
-    /** 元素的尺寸发生变化  */
-    reloadBackground(): void;
     /**  销毁  */
     destroy(): void;
     /**  展示元素 */