oops-ui 0.0.2 → 0.0.4

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,33 @@
+import React from 'react';
+import { BackgroundRipplesProps } from 'customHooks/useRipples/interface';
+/**************************************
+ *
+ * ### 一个 ripple 背景组件
+ *
+ *
+ * *需要为该组件或父组件设置背景，否则即便的渲染了，效果不明显*
+ *
+ *  参数 props 属性：
+ * - children 内嵌的 ReactNode
+ * - style    更改显示的样式
+ * - option   初始化 ripples 的原始数据
+ * @param props  使用参数
+ * @version 0.0.1
+ * @see https://lmssee.com/oops-ui/background-ripple
+ * @example
+ * 使用：
+ *
+ * ```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,4 @@
+export { useInputIsComposing } from './useInputIsComposing';
+export { useTimeId } from './useTimeId';
+export { useAnimationFrameId } from './useAnimationFrame';
+export { useRipples } from './useRipples/index';

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

@@ -0,0 +1,41 @@
+/****************************************************************************
+ * @Author lmssee
+ * @Email lmssee@outlook.com
+ * @ProjectName oops-ui
+ * @FileName useAnimationFrame.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用 animationFrame
+ ****************************************************************************/
+/**************************************
+ *
+ * ### 导出一个使用 `useRef` 创建的 `number`
+ *
+ * 该数值在组件卸载时会自动调用 `window.cancelAnimationFrame` 清理
+ *
+ * @returns  <React.RefObject: number>
+ * @version 0.0.3
+ * @see   https://lmssee.com/oops-ui/use-animation-frame
+ * @example
+ * 使用：
+ *
+ * ```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(): React.RefObject<number>;

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

@@ -0,0 +1,43 @@
+/****************************************************************************
+ * @Author lmssee
+ * @Email lmssee@outlook.com
+ * @ProjectName oops-ui
+ * @FileName useInputIsComposing.ts
+ * @CreateDate  周二  01/07/2025
+ * @Description 使用输入框是否完成输入状态
+ ****************************************************************************/
+/**************************************
+ *
+ * ### 导出一个使用 `useRef` 创建的 `boolean`
+ *
+ * @param inputRef [React.RefObject<HTMLInputElement | HTMLTextAreaElement>] 输入框的 ref
+ * @returns  React.RefObject<boolean>
+ * @version 0.0.4
+ * @see   https://lmssee.com/oops-ui/use-input-is-composing
+ * @example
+ *
+ * 使用：
+ *
+ * ```ts
+ *  import { useInputIsComposing } from 'oops-ui/useInputIsComposing';
+ *  // 也可以全量导入
+ *  // import { useInputIsComposing } from 'oops-ui';
+ *  ...
+ *  const inputRef = useRef<HTMLInputElement>(null);
+ *
+ *  const inputIsComposing = useInputIsComposing(inputRef);
+ *  ...
+ *  function enterDown()(e: React.KeyboardEvent<HTMLInputElement>) {
+ *     if (e.key === 'Enter') {
+ *        if (isComposing.current) {
+ *            console.log("此时此景，按回车键说明为了从候选词中挑选");
+ *        } else
+ *           console.log("输入完毕，敲回车是为了看一些开发者是否绑定了其他事件");
+ *     }
+ *  }
+ *  ...
+ *  <input type="text" onKeyDown="enterDown" />
+ *  ...
+ * ```
+ **************************************/
+export declare function useInputIsComposing(inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement>): React.RefObject<boolean>;

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

@@ -0,0 +1,46 @@
+import { BackgroundRipplesProps } from './interface';
+import { Ripples } from './ripplesClass';
+/**************************************
+ *
+ * ## 使用绘制 ripples 上一层
+ *
+ *
+ * @param canvas `usrRef` 包裹的 `HTMLCanvasElement`，用于绘制图像
+ * @param props  初始化的
+ * @version 0.0.3
+ * @see  https://lmssee.com/oops-ui/use-ripples
+ * @see  JQuery https://github.com/sirxemic/jquery.ripples
+ * @example
+ *
+ * 下面是在 <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[];
     /**************************
      * 用于设定外层的样式
      **************************/