deepsea-components 5.13.1 → 5.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/ScrollMask.cjs +2 -2
  2. package/dist/components/ScrollMask.js +2 -2
  3. package/dist/components/ScrollMask_module.css +5 -5
  4. package/package.json +3 -3
  5. package/src/components/ScrollMask.module.css +5 -5
  6. package/src/components/ScrollMask.tsx +3 -3
package/dist/components/ScrollMask.cjs CHANGED
@@ -41,11 +41,11 @@ const external_deepsea_tools_namespaceObject = require("deepsea-tools");
41
41
  const external_soda_hooks_namespaceObject = require("soda-hooks");
42
42
  const external_ScrollMask_module_cjs_namespaceObject = require("./ScrollMask.module.cjs");
43
43
  var external_ScrollMask_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_ScrollMask_module_cjs_namespaceObject);
44
- const ScrollMask = ({ className, style, position = "top", size = 16, from = "rgba(0, 0, 0, 0.15)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
44
+ const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
45
45
  const ref = (0, external_react_namespaceObject.useRef)(null);
46
46
  const contentSize = (0, external_soda_hooks_namespaceObject.useSize)(ref);
47
47
  const radius = (0, external_deepsea_tools_namespaceObject.isNonNullable)(contentSize) ? "top" === position || "bottom" === position ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (2 * contentSize.height) : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (2 * contentSize.width) : void 0;
48
- const clipPath = showRadian && (0, external_deepsea_tools_namespaceObject.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width} 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
48
+ const clipPath = showRadian && (0, external_deepsea_tools_namespaceObject.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width}px 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
49
49
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
50
50
  className: (0, external_deepsea_tools_namespaceObject.clsx)(external_ScrollMask_module_cjs_default()["scroll-mask"], external_ScrollMask_module_cjs_default()[`${position}-scroll-mask`], className),
51
51
  style: {
package/dist/components/ScrollMask.js CHANGED
@@ -3,11 +3,11 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
3
3
  import * as __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__ from "deepsea-tools";
4
4
  import * as __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__ from "soda-hooks";
5
5
  import * as __WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__ from "./ScrollMask.module.js";
6
- const ScrollMask = ({ className, style, position = "top", size = 16, from = "rgba(0, 0, 0, 0.15)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
6
+ const ScrollMask = ({ className, style, position = "top", size = 8, from = "rgba(0, 0, 0, 0.1)", to = "rgba(0, 0, 0, 0)", contentClassName, contentStyle, showRadian = false, ...rest })=>{
7
7
  const ref = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
8
8
  const contentSize = (0, __WEBPACK_EXTERNAL_MODULE_soda_hooks_b1fef7dd__.useSize)(ref);
9
9
  const radius = (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(contentSize) ? "top" === position || "bottom" === position ? (contentSize.width ** 2 / 4 + contentSize.height ** 2) / (2 * contentSize.height) : (contentSize.height ** 2 / 4 + contentSize.width ** 2) / (2 * contentSize.width) : void 0;
10
- const clipPath = showRadian && (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width} 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
10
+ const clipPath = showRadian && (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.isNonNullable)(radius) ? "top" === position ? `circle(${radius}px at 50% -${radius - contentSize.height}px)` : "bottom" === position ? `circle(${radius}px at 50% ${radius}px)` : "left" === position ? `circle(${radius}px at -${radius - contentSize.width}px 50%)` : "right" === position ? `circle(${radius}px at ${radius}px 50%)` : "none" : "none";
11
11
  return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
12
12
  className: (0, __WEBPACK_EXTERNAL_MODULE_deepsea_tools_8ecdf5a5__.clsx)(__WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"]["scroll-mask"], __WEBPACK_EXTERNAL_MODULE__ScrollMask_module_js_e15d4b28__["default"][`${position}-scroll-mask`], className),
13
13
  style: {
package/dist/components/ScrollMask_module.css CHANGED
@@ -11,14 +11,14 @@
11
11
  }
12
12
 
13
13
  .scroll-mask-content-ThVLaU {
14
- background-image: linear-gradient(to var(--scroll-mask-direction), var(--scroll-mask-color-from, #00000026), var(--scroll-mask-color-to, #0000));
14
+ background-image: linear-gradient(to var(--scroll-mask-direction), var(--scroll-mask-color-from, #0000001a), var(--scroll-mask-color-to, #0000));
15
15
  clip-path: var(--scroll-mask-clip-path, none);
16
16
  position: absolute;
17
17
  }
18
18
 
19
19
  .top-scroll-mask-content-xlQcwt {
20
20
  width: 100%;
21
- height: var(--scroll-mask-size, 16px);
21
+ height: var(--scroll-mask-size, 8px);
22
22
  --scroll-mask-direction: bottom;
23
23
  top: 0;
24
24
  right: 50%;
@@ -33,7 +33,7 @@
33
33
 
34
34
  .bottom-scroll-mask-content-XkOPgR {
35
35
  width: 100%;
36
- height: var(--scroll-mask-size, 16px);
36
+ height: var(--scroll-mask-size, 8px);
37
37
  --scroll-mask-direction: top;
38
38
  bottom: 0;
39
39
  left: 50%;
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  .left-scroll-mask-content-hUFxOv {
50
- width: var(--scroll-mask-size, 16px);
50
+ width: var(--scroll-mask-size, 8px);
51
51
  --scroll-mask-direction: right;
52
52
  height: 100%;
53
53
  top: 50%;
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .right-scroll-mask-content-mbgCn_ {
65
- width: var(--scroll-mask-size, 16px);
65
+ width: var(--scroll-mask-size, 8px);
66
66
  --scroll-mask-direction: left;
67
67
  height: 100%;
68
68
  bottom: 50%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "deepsea-components",
3
- "version": "5.13.1",
3
+ "version": "5.13.2",
4
4
  "description": "格数科技自用组件库",
5
5
  "type": "module",
6
6
  "exports": {
@@ -40,8 +40,8 @@
40
40
  "echarts": "^5.6.0",
41
41
  "hls.js": "^1.6.1",
42
42
  "smooth-scrollbar": "^8.8.4",
43
- "deepsea-tools": "5.27.0",
44
- "soda-hooks": "6.9.0"
43
+ "soda-hooks": "6.9.0",
44
+ "deepsea-tools": "5.27.0"
45
45
  },
46
46
  "devDependencies": {
47
47
  "typescript": "^5.8.3"
package/src/components/ScrollMask.module.css CHANGED
@@ -17,7 +17,7 @@
17
17
  position: absolute;
18
18
  background-image: linear-gradient(
19
19
  to var(--scroll-mask-direction),
20
- var(--scroll-mask-color-from, rgba(0, 0, 0, 0.15)),
20
+ var(--scroll-mask-color-from, rgba(0, 0, 0, 0.1)),
21
21
  var(--scroll-mask-color-to, rgba(0, 0, 0, 0))
22
22
  );
23
23
  clip-path: var(--scroll-mask-clip-path, none);
@@ -25,7 +25,7 @@
25
25
 
26
26
  .top-scroll-mask-content {
27
27
  width: 100%;
28
- height: var(--scroll-mask-size, 16px);
28
+ height: var(--scroll-mask-size, 8px);
29
29
  top: 0;
30
30
  right: 50%;
31
31
  transform: translateX(50%);
@@ -43,7 +43,7 @@
43
43
 
44
44
  .bottom-scroll-mask-content {
45
45
  width: 100%;
46
- height: var(--scroll-mask-size, 16px);
46
+ height: var(--scroll-mask-size, 8px);
47
47
  bottom: 0;
48
48
  left: 50%;
49
49
  transform: translateX(-50%);
@@ -60,7 +60,7 @@
60
60
  }
61
61
 
62
62
  .left-scroll-mask-content {
63
- width: var(--scroll-mask-size, 16px);
63
+ width: var(--scroll-mask-size, 8px);
64
64
  height: 100%;
65
65
  left: 0;
66
66
  top: 50%;
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  .right-scroll-mask-content {
81
- width: var(--scroll-mask-size, 16px);
81
+ width: var(--scroll-mask-size, 8px);
82
82
  height: 100%;
83
83
  right: 0;
84
84
  bottom: 50%;
package/src/components/ScrollMask.tsx CHANGED
@@ -20,8 +20,8 @@ export const ScrollMask: FC<ScrollMaskProps> = ({
20
20
  className,
21
21
  style,
22
22
  position = "top",
23
- size = 16,
24
- from = "rgba(0, 0, 0, 0.15)",
23
+ size = 8,
24
+ from = "rgba(0, 0, 0, 0.1)",
25
25
  to = "rgba(0, 0, 0, 0)",
26
26
  contentClassName,
27
27
  contentStyle,
@@ -42,7 +42,7 @@ export const ScrollMask: FC<ScrollMaskProps> = ({
42
42
  : position === "bottom"
43
43
  ? `circle(${radius}px at 50% ${radius}px)`
44
44
  : position === "left"
45
- ? `circle(${radius}px at -${radius - contentSize!.width} 50%)`
45
+ ? `circle(${radius}px at -${radius - contentSize!.width}px 50%)`
46
46
  : position === "right"
47
47
  ? `circle(${radius}px at ${radius}px 50%)`
48
48
  : "none"