oops-ui 0.0.1 → 0.0.3

package/dist/styles/common.scss

@@ -0,0 +1,501 @@
+:root {
+  --box-shadow: 0 5px 13px 0 rgba(10, 15, 71, 0.2);
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
+    "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --mi-white: #ffffff;
+  --mi-mi-white: #f0f2e6;
+  --mi-dark-blue: #465e65;
+  --mi-mi-yellow: #c2c6ae;
+  --mi-orange: #fa0;
+  --mi-green: #0b8;
+  --mi-red: #f16;
+  /**  */
+  --mi-orange-yellow: #c99e8c;
+  /*（橘红）*/
+  --mi-orange-red: #900022;
+  --mi-light-red: #d80010;
+  --mi-dark-ash: #6c8650;
+  --mi-mi-pretty: #b2b6b6;
+  --mi-light-black: #777;
+  --mi-black: #000;
+  --mi-dust: #999;
+}
+
+*,
+a,
+body,
+abbr,
+address,
+area,
+div,
+img,
+input,
+p,
+mark,
+html,
+span {
+  position: relative;
+  left: auto;
+  top: auto;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  -webkit-user-drag: none;
+  // user-drag: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+body {
+  line-height: 1.4;
+}
+
+a {
+  text-decoration: none;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input:focus-visible {
+  outline: none;
+}
+
+input[type="button"],
+.cursor-pointer {
+  cursor: pointer;
+}
+
+/** 输入框 */
+input[type="text"] {
+  width: 200px;
+  border-radius: 10px;
+  background-color: #000;
+  color: #0f9;
+
+  &::placeholder {
+    color: #aff9;
+  }
+
+  &:focus::placeholder {
+    color: transparent;
+  }
+}
+
+input[type="radio"] {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+
+  + label {
+    padding-left: 15px;
+
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      border-radius: 50%;
+      top: 50%;
+      transform: translate(0, -50%);
+      overflow: hidden;
+    }
+
+    &::before {
+      left: 0px;
+      height: 8px;
+      width: 8px;
+
+      box-shadow: 1px 1px 3px #000;
+      z-index: 1;
+    }
+
+    &::after {
+      font-size: 8px;
+      line-height: 8px;
+      z-index: 2;
+      left: 0px;
+      height: 8px;
+      width: 8px;
+      color: #fff;
+      background-color: #000;
+      clip-path: circle(0%);
+      transition: all 0.3s;
+    }
+  }
+
+  &:checked {
+    color: #f00;
+
+    & + label {
+      color: #0a3;
+
+      &::before {
+        box-shadow:
+          1px 1px 3px #0f3,
+          -1px -1px 3px #0f3;
+      }
+
+      &::after {
+        background-color: #0a3;
+        clip-path: circle(100%);
+        transition: all 0.8s;
+      }
+    }
+  }
+}
+
+input[type="image"] {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/** 文本显示一行，超出点点点 */
+.textInOneLine {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.textInOneLineHide {
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+/** 文本显示两行，超出点点点 */
+.textInTwoLine {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/*  彩色字 */
+.colorText {
+  color: transparent;
+  background-image: linear-gradient(45deg, #ff0, #0f0, #f00, #0ff, #00f, #f0f, #ff0);
+  background-position: 0% 0%;
+  background-size: 400% 200%;
+  background-clip: text;
+  animation: 6s ease-in 0s infinite colorText alternate;
+}
+
+.redB {
+  background-color: #f12;
+}
+
+.floatLeft {
+  float: left;
+}
+
+.floatRight,
+.float {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+.loading {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  background-image: radial-gradient(#f00, #f00 50%, transparent 50%, transparent),
+    radial-gradient(#af1, #af1 50%, transparent 50%, transparent),
+    radial-gradient(#0ff, #0ff 50%, transparent 50%, transparent),
+    radial-gradient(#f0f, #f0f 50%, transparent 50%, transparent);
+  background-repeat: no-repeat;
+  animation: 2.4s ease-in-out 0s infinite loading;
+}
+
+@keyframes loading {
+  //  45 - 25 * Math.sin((Math.PI * 5) / 12)
+  //  位置公式 35 - 25 * Math.cos((Math.PI * 5) / 12)
+
+  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% {
+    background-size:
+      3.75% 3.75%,
+      2.5% 2.5%,
+      2.5% 2.5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 1
+      25.85% 38.53%,
+      25% 45%,
+      25% 45%,
+      25% 45%;
+  }
+
+  24% {
+    background-size:
+      5% 5%,
+      2.5% 2.5%,
+      2.5% 2.5%,
+      2.5% 2.5%;
+    background-position:
+    // 位置 2
+      28.35% 32.5%,
+      25% 45%,
+      25% 45%,
+      25% 45%;
+  }
+
+  26% {
+    background-size:
+      6.25% 6.25%,
+      2.5% 2.5%,
+      2.5% 2.5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 3
+      32.32% 27.32%,
+      25% 45%,
+      25% 45%,
+      25% 45%;
+  }
+
+  28% {
+    background-size:
+      7.5% 7.5%,
+      3.75% 3.75%,
+      2.5% 2.5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 4
+      37.5% 23.35%,
+      // 位置 1
+      25.85% 38.53%,
+      25% 45%,
+      25% 45%;
+  }
+
+  30% {
+    background-size:
+      8.75% 8.75%,
+      5% 5%,
+      2.5% 2.5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 5
+      43.53% 20.85%,
+      // 位置 2
+      28.35% 32.5%,
+      25% 45%,
+      25% 45%;
+  }
+
+  32% {
+    background-size:
+      10% 10%,
+      6.25% 6.25%,
+      3.75% 3.75%,
+      2.5% 2.5%;
+    background-position:
+        // 位置 6
+      50% 20%,
+      // 位置 3
+      32.32% 27.32%,
+      // 位置 1
+      25.85% 38.53%,
+      25% 45%;
+  }
+
+  34% {
+    background-size:
+      10% 10%,
+      7.5% 7.5%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 7
+      56.47% 20.85%,
+      // 位置 4
+      37.32% 23.35%,
+      // 位置 2
+      28.35% 32.5%,
+      // 位置 1
+      25.85% 38.53%;
+  }
+
+  $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%};
+    }
+  }
+
+  68% {
+    background-size:
+      10% 10%,
+      7.5% 7.5%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置  22
+      28.35% 57.45%,
+      // 位置 20
+      37.45% 66.65%,
+      // 位置 18
+      48% 70%;
+  }
+
+  70% {
+    background-size:
+      8.75% 8.75%,
+      7.5% 7.5%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置  23
+      25.85% 51.47%,
+      // 位置 21
+      32.32% 62.68%,
+      // 位置 19
+      43.53% 69.15%;
+  }
+
+  72% {
+    background-size:
+      7.5% 7.5%,
+      7.5% 7.5%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置  22
+      28.35% 57.45%,
+      // 位置 20
+      37.45% 66.65%;
+  }
+  74% {
+    background-size:
+      6.25% 6.25%,
+      6.25% 6.25%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置  23
+      25.85% 51.47%,
+      // 位置 21
+      32.32% 62.68%;
+  }
+
+  76% {
+    background-size:
+      5% 5%,
+      5% 5%,
+      5% 5%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置  22
+      28.35% 57.45%;
+  }
+
+  78% {
+    background-size:
+      3.75% 3.75%,
+      3.75% 3.75%,
+      3.75% 3.75%,
+      2.5% 2.5%;
+    background-position:
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置 0
+      25% 45%,
+      // 位置  23
+      25.85% 51.47%;
+  }
+}
+
+@keyframes colorText {
+  0% {
+    background-position: 400% 0%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}

package/dist/types/components/index.d.ts

@@ -0,0 +1 @@
+export { BackgroundRipple } from './ripples';

package/dist/types/components/ripples/RipplesEle.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { BackgroundRipplesProps } from 'customHooks/useRipples/interface';
+/**************************************
+ *
+ * ### 一个 ripple 背景组件
+ *
+ * - children 内嵌的 ReactNode
+ * - style    更改显示的样式
+ * - option   初始化 ripples 的原始数据
+ *
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { BackgroundRipple } from 'oops-ui/BackgroundRipple';
+ *  // 也可以全量导入
+ *  // import { BackgroundRipple } from 'oops-ui';
+ *  ...
+ *  const animationFrameId = useAnimationFrame();
+ *
+ *  return <BackgroundRipple>
+ *            ...
+ *         </BackgroundRipple>
+ * ```
+ *
+ **************************************/
+export declare function BackgroundRipple(props: BackgroundRipplesProps): React.JSX.Element;

package/dist/types/components/ripples/index.d.ts

@@ -0,0 +1 @@
+export { BackgroundRipple } from './RipplesEle';

package/dist/types/customHooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useTimeId } from './useTimeId';
+export { useAnimationFrameId } from './useAnimationFrame';
+export { useRipples } from './useRipples/index';

package/dist/types/customHooks/useAnimationFrame.d.ts

@@ -0,0 +1,37 @@
+/****************************************************************************
+ * @Author lmssee
+ * @Email lmssee@outlook.com
+ * @ProjectName oops-ui
+ * @FileName useAnimationFrame.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用 animationFrame
+ ****************************************************************************/
+/**************************************
+ *
+ * ### 导出一个使用 `useRef` 创建的 `number`
+ *
+ * 该数值在组件卸载时会自动调用 `window.cancelAnimationFrame` 清理
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { useAnimationFrame } from 'oops-ui/useAnimationFrame';
+ *  // 也可以全量导入
+ *  // import { useAnimationFrame } from 'oops-ui';
+ *  ...
+ *  const animationFrameId = useAnimationFrame();
+ *
+ *  function performAction(time?: number){
+ *    useAnimationFrame.current = window.requestAnimationFrame(performAction);
+ *    ...
+ *  }
+ *
+ *  useEffect(()=>{
+ *      animationFrameId.current = window.requestAnimationFrame(performAction);
+ *  });
+ *  ...
+ *
+ * ```
+ *
+ **************************************/
+export declare function useAnimationFrameId(): import("react").RefObject<number>;

package/dist/types/customHooks/useRipples/index.d.ts

@@ -0,0 +1,41 @@
+import { BackgroundRipplesProps } from './interface';
+import { Ripples } from './ripplesClass';
+/**************************************
+ *
+ * 使用绘制 ripples
+ *
+ * - canvas  `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
+ * - props   初始化的
+ *
+ * 下面是在 <BackgroundRipple> 中使用
+ *
+ * ```ts
+ * import { useRipples } from 'oops-ui/useRipples';
+ * // 也可以使用包全量导入
+ * // import { useRipples } from 'oops-ui';
+ *
+ *  export function BackgroundRipple(props: BackgroundRipplesProps) {
+ *
+ *   // canvas 元素
+ *  const canvas = useRef<HTMLCanvasElement>(null);
+ *
+ *  // 使用 ripples
+ *  const ripplesRef = useRipples(canvas, props);
+ *
+ *  if (props.children) {
+ *    return (
+ *          <div style={props.style} className="lmssee-ripples">
+ *          {props.children}
+ *          <canvas ref={canvas}></canvas>
+ *        </div>
+ *      );
+ *    } else {
+ *      return <canvas ref={canvas}></canvas>;
+ *    }
+ *  }
+ *
+ * ```
+ *
+ **************************************/
+export declare function useRipples(canvas: React.RefObject<HTMLCanvasElement>, props?: BackgroundRipplesProps): React.RefObject<Ripples>;
+export { Ripples };

package/dist/types/{ripples → customHooks/useRipples}/interface.d.ts

@@ -6,17 +6,31 @@
  * @CreateDate  周二  12/17/2024
  * @Description BackgroundRipples 的类型声明文件
  ****************************************************************************/
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 /**************************************
  *
  *  背景涟漪的 props 类型
  *
+ * - children  可选属性，定义子组件或子组件们
+ * - style     可选属性，定义自定义外壳的样式，在内含 `children` 时生效
+ * - option    可选属性，自定义涟漪的初始化属性
+ *    - resolution 分辨率,纹理的尺寸，该项目中该值为纹理的宽和高，缺省为 `360`
+ *    - dropRadius 扩撒半径，缺省值为 `20`
+ *    - perturbance 扰动系数，缺省为   `0.03`
+ *    - interactive 光标交互，缺省为 `true` ，关闭须显示传入 `false` 值
+ *    - accelerating  加速光标移动触发，缺省为 `3`
+ *    - crossOrigin 原始样式
+ *    - imageUrl    原始背景图片地址
+ *    - playingState 当前的播放状态，缺省为 `true` ，设定为 `false` 时并不关闭，而是暂停
+ *    - raindropsTimeInterval 雨滴滴落的间隔，缺省为 `660`，可设置区间为 `10 ~ 12000`
+ *    - idleFluctuations  闲置波动，在光标交互不触发时，将触发模拟雨滴，缺省为 `true`
+ *
  **************************************/
 export interface BackgroundRipplesProps {
     /**************************
      * 内嵌的子元素
      **************************/
-    children?: ReactNode;
+    children?: ReactElement | ReactElement[];
     /**************************
      * 用于设定外层的样式
      **************************/

package/dist/types/customHooks/useTimeId.d.ts

@@ -0,0 +1,42 @@
+/**************************************
+ *
+ * ### 导出一个使用 `useRef` 创建的 `NodeJS.Timeout`
+ *
+ * 该数值在组件卸载时会自动调用 `clearTimeout` 清理
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { useTimeId } from 'oops-ui/useTimeId';
+ *  // 也可以全量导入
+ *  // import { useTimeId } from 'oops-ui';
+ *  ...
+ *  const timeoutId = useTimeId();
+ *
+ *  useEffect(()=>{
+ *      timeoutId.current = setTimeout(()=>{
+ *          ...
+ *      } ,delay);
+ *  });
+ *  ...
+ *
+ * ```
+ *
+ * 其实，正确的用法是这样的：
+ *
+ * ```ts
+ *
+ *  useEffect(()=>{
+ *    const timeId = setTimeout(()=>{
+ *        ...
+ *    }, delay) ;
+ *
+ *     return ()=> timeId && clearTimeout(timeId);
+ *  });
+ *
+ * ```
+ *
+ * 根本就不用引入这个自定义 `hook` , 哈哈哈哈哈
+ *
+ **************************************/
+export declare function useTimeId(): import("react").RefObject<NodeJS.Timeout>;

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
-export { RipplesEle as BackgroundRipple } from './ripples';
-export {};
+export { BackgroundRipple } from './components/index';
+export { useTimeId, useAnimationFrameId, useRipples } from './customHooks/index';

package/dist/useAnimationFrame/index.cjs

@@ -0,0 +1 @@
+(()=>{"use strict";var e={953:e=>{e.exports=require("react")}},r={};function t(o){var n=r[o];if(void 0!==n)return n.exports;var u=r[o]={exports:{}};return e[o](u,u.exports,t),u.exports}t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};t.r(o),t.d(o,{useAnimationFrameId:()=>u});var n=t(953);function u(){var e=(0,n.useRef)(0);return(0,n.useEffect)((function(){return function(){e.current&&window.cancelAnimationFrame(e.current)}}),[]),e}module.exports["oops-ui"]=o})();

package/dist/useAnimationFrame/index.mjs

@@ -0,0 +1 @@
+import*as e from"react";var r={649:(r,t,n)=>{var o,a;r.exports=(o={useEffect:()=>e.useEffect,useRef:()=>e.useRef},a={},n.d(a,o),a)}},t={};function n(e){var o=t[e];if(void 0!==o)return o.exports;var a=t[e]={exports:{}};return r[e](a,a.exports,n),a.exports}n.d=(e,r)=>{for(var t in r)n.o(r,t)&&!n.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},n.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r);var o={};n.d(o,{M:()=>u});var a=n(649);function u(){var e=(0,a.useRef)(0);return(0,a.useEffect)((function(){return function(){e.current&&window.cancelAnimationFrame(e.current)}}),[]),e}var f=o.M;export{f as useAnimationFrameId};