@bbki.ng/components 1.5.30 → 1.5.33

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, EventHandler, ReactElement, CSSProperties, Ref, ReactNode } from 'react';
+import React, { FunctionComponent, EventHandler, ReactElement, ReactNode, CSSProperties, Ref } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -82,7 +82,7 @@ declare const Panel: (props: PanelProps) => JSX.Element;
 declare type PageProps = {
     nav: ReactElement;
     main: ReactElement;
-    footer: ReactElement;
+    footer: ReactNode;
 };
 declare const Page: (props: PageProps) => JSX.Element;
 declare const NotFound: (props: {
@@ -273,6 +273,7 @@ interface IOpt {
     color: number[];
     spiralConstA: number;
     spiralConstB: number;
+    offset?: number;
 }
 
 interface LoadingSpiralProps extends IOpt, ISettings {

package/dist/index.js

@@ -233,9 +233,11 @@ var Breadcrumb = (props) => {
     const offsetCls = (0, import_classnames3.default)({ "relative top-[2px]": isNonEnName });
     const link = path ? /* @__PURE__ */ import_react4.default.createElement(Link, {
       to: path,
-      className: offsetCls
+      className: offsetCls,
+      style: { padding: 4 }
     }, name) : /* @__PURE__ */ import_react4.default.createElement("span", {
-      className: (0, import_classnames3.default)("text-gray-400", offsetCls)
+      className: (0, import_classnames3.default)("text-gray-400", offsetCls),
+      style: { padding: 4 }
     }, name);
     return /* @__PURE__ */ import_react4.default.createElement("span", {
       key: path || name
@@ -1068,6 +1070,7 @@ var createSettings = (settings) => {
 var VERTEX_SHADER = `
   attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
+  attribute float ${"aOffsetY" /* OFFSET_Y */};
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
@@ -1081,6 +1084,14 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translateY(float _offset){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, 1.0, 0.0, -1.0 * _offset,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   mat4 translate(float _angle){
     return mat4(
       1.0, 0.0, 0.0, sin(_angle) * 0.02,
@@ -1090,7 +1101,7 @@ var VERTEX_SHADER = `
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1120,10 +1131,17 @@ var DEFAULT_OPT = {
   multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
-  spiralConstB: 0.16
+  spiralConstB: 0.16,
+  offset: -0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
-  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const {
+    multiplier,
+    spiralConstA,
+    spiralConstB,
+    color,
+    offset = -1 * 0.3
+  } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
@@ -1141,6 +1159,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aColor" /* COLOR */,
       data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1153,7 +1176,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 var import_react22 = require("react");
-var useResizedCanvasRef = (maxSize, offset) => {
+var useResizedCanvasRef = (maxSize) => {
   const canvasRef = (0, import_react22.useRef)(null);
   const containerRef = (0, import_react22.useRef)(null);
   (0, import_react22.useEffect)(() => {
@@ -1164,7 +1187,6 @@ var useResizedCanvasRef = (maxSize, offset) => {
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
     const size = Math.min(canvasSize, maxSize);
-    canvas.style.top = `${offset}px`;
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
   }, []);
@@ -1176,20 +1198,8 @@ var useResizedCanvasRef = (maxSize, offset) => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  const _a = props || {}, {
-    className,
-    canvas,
-    step,
-    maxWidth = 1e3,
-    offset = -100
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "canvas",
-    "step",
-    "maxWidth",
-    "offset"
-  ]);
-  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
+  const _a = props || {}, { className, canvas, step, maxWidth = 1e3 } = _a, rest = __objRest(_a, ["className", "canvas", "step", "maxWidth"]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth);
   (0, import_react23.useEffect)(() => {
     if (!canvasRef.current) {
       return;

package/dist/index.mjs

@@ -172,9 +172,11 @@ var Breadcrumb = (props) => {
     const offsetCls = classNames3({ "relative top-[2px]": isNonEnName });
     const link = path ? /* @__PURE__ */ React5.createElement(Link, {
       to: path,
-      className: offsetCls
+      className: offsetCls,
+      style: { padding: 4 }
     }, name) : /* @__PURE__ */ React5.createElement("span", {
-      className: classNames3("text-gray-400", offsetCls)
+      className: classNames3("text-gray-400", offsetCls),
+      style: { padding: 4 }
     }, name);
     return /* @__PURE__ */ React5.createElement("span", {
       key: path || name
@@ -1010,6 +1012,7 @@ var createSettings = (settings) => {
 var VERTEX_SHADER = `
   attribute vec3 ${"aPositionStart" /* POSITION_START */};
   attribute vec3 ${"aColor" /* COLOR */};
+  attribute float ${"aOffsetY" /* OFFSET_Y */};
   uniform mat4 uProjectionMatrix;
   uniform mat4 uModelMatrix;
   uniform mat4 uViewMatrix;
@@ -1023,6 +1026,14 @@ var VERTEX_SHADER = `
       0.0, 0.0, 0.0, 1.0
     );
   }
+  mat4 translateY(float _offset){
+    return mat4(
+      1.0, 0.0, 0.0, 0.0,
+      0.0, 1.0, 0.0, -1.0 * _offset,
+      0.0, 0.0, 1.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
   mat4 translate(float _angle){
     return mat4(
       1.0, 0.0, 0.0, sin(_angle) * 0.02,
@@ -1032,7 +1043,7 @@ var VERTEX_SHADER = `
     );
   }
   void main(){
-    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress);
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0) * translate(uProgress) * translateY(${"aOffsetY" /* OFFSET_Y */});
     gl_PointSize = 1.0;
     vColor = ${"aColor" /* COLOR */};
   }
@@ -1062,10 +1073,17 @@ var DEFAULT_OPT = {
   multiplier: 1e4,
   color: [209, 213, 219, 1],
   spiralConstA: 0.04,
-  spiralConstB: 0.16
+  spiralConstB: 0.16,
+  offset: -0.3
 };
 var createOptions = (opt = DEFAULT_OPT) => {
-  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const {
+    multiplier,
+    spiralConstA,
+    spiralConstB,
+    color,
+    offset = -1 * 0.3
+  } = opt;
   const attributes = [
     {
       name: "aPositionStart" /* POSITION_START */,
@@ -1083,6 +1101,11 @@ var createOptions = (opt = DEFAULT_OPT) => {
       name: "aColor" /* COLOR */,
       data: () => rgba(color),
       size: 3
+    },
+    {
+      name: "aOffsetY" /* OFFSET_Y */,
+      data: () => [offset],
+      size: 1
     }
   ];
   return {
@@ -1095,7 +1118,7 @@ var createOptions = (opt = DEFAULT_OPT) => {
 
 // src/loading-spiral/useCanvasRef.ts
 import { useEffect as useEffect3, useRef as useRef2 } from "react";
-var useResizedCanvasRef = (maxSize, offset) => {
+var useResizedCanvasRef = (maxSize) => {
   const canvasRef = useRef2(null);
   const containerRef = useRef2(null);
   useEffect3(() => {
@@ -1106,7 +1129,6 @@ var useResizedCanvasRef = (maxSize, offset) => {
     const { width, height } = container.getBoundingClientRect();
     const canvasSize = Math.max(width, height);
     const size = Math.min(canvasSize, maxSize);
-    canvas.style.top = `${offset}px`;
     canvas.setAttribute("width", `${size}`);
     canvas.setAttribute("height", `${size}`);
   }, []);
@@ -1118,20 +1140,8 @@ var useResizedCanvasRef = (maxSize, offset) => {
 
 // src/loading-spiral/LoadingSpiral.tsx
 var LoadingSpiral = (props) => {
-  const _a = props || {}, {
-    className,
-    canvas,
-    step,
-    maxWidth = 1e3,
-    offset = -100
-  } = _a, rest = __objRest(_a, [
-    "className",
-    "canvas",
-    "step",
-    "maxWidth",
-    "offset"
-  ]);
-  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth, offset);
+  const _a = props || {}, { className, canvas, step, maxWidth = 1e3 } = _a, rest = __objRest(_a, ["className", "canvas", "step", "maxWidth"]);
+  const { canvasRef, containerRef } = useResizedCanvasRef(maxWidth);
   useEffect4(() => {
     if (!canvasRef.current) {
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.30",
+  "version": "1.5.33",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",