deepsea-components 5.7.4 → 5.7.6

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 (100) hide show
  1. package/dist/cjs/components/AutoFit.js +1 -1
  2. package/dist/cjs/components/AutoFit.js.map +2 -2
  3. package/dist/cjs/components/AutoScroll.js +1 -1
  4. package/dist/cjs/components/AutoScroll.js.map +2 -2
  5. package/dist/cjs/components/AutoSizeTextarea.js +1 -1
  6. package/dist/cjs/components/AutoSizeTextarea.js.map +2 -2
  7. package/dist/cjs/components/CircleText.js +0 -1
  8. package/dist/cjs/components/CircleText.js.map +2 -2
  9. package/dist/cjs/components/CopyButton.d.ts +7 -3
  10. package/dist/cjs/components/CopyButton.js +1 -0
  11. package/dist/cjs/components/CopyButton.js.map +2 -2
  12. package/dist/cjs/components/Echart.d.ts +2 -2
  13. package/dist/cjs/components/Echart.js +1 -0
  14. package/dist/cjs/components/Echart.js.map +2 -2
  15. package/dist/cjs/components/Flow.d.ts +1 -1
  16. package/dist/cjs/components/Flow.js +1 -1
  17. package/dist/cjs/components/Flow.js.map +2 -2
  18. package/dist/cjs/components/FormLabel.d.ts +2 -2
  19. package/dist/cjs/components/FormLabel.js +15 -18
  20. package/dist/cjs/components/FormLabel.js.map +2 -2
  21. package/dist/cjs/components/InfiniteScroll.d.ts +26 -3
  22. package/dist/cjs/components/InfiniteScroll.js +2 -1
  23. package/dist/cjs/components/InfiniteScroll.js.map +2 -2
  24. package/dist/cjs/components/LoopSwiper.js +1 -1
  25. package/dist/cjs/components/LoopSwiper.js.map +2 -2
  26. package/dist/cjs/components/Ring.js +0 -1
  27. package/dist/cjs/components/Ring.js.map +2 -2
  28. package/dist/cjs/components/Scroll.d.ts +1 -1
  29. package/dist/cjs/components/Scroll.js +1 -1
  30. package/dist/cjs/components/Scroll.js.map +2 -2
  31. package/dist/cjs/components/SectionRing.d.ts +2 -2
  32. package/dist/cjs/components/SectionRing.js +6 -4
  33. package/dist/cjs/components/SectionRing.js.map +2 -2
  34. package/dist/cjs/components/Skeleton.js +2 -4
  35. package/dist/cjs/components/Skeleton.js.map +2 -2
  36. package/dist/cjs/components/Title.d.ts +2 -2
  37. package/dist/cjs/components/Title.js +1 -0
  38. package/dist/cjs/components/Title.js.map +2 -2
  39. package/dist/cjs/components/TransitionBox.js.map +1 -1
  40. package/dist/cjs/components/Trapezium.js +1 -2
  41. package/dist/cjs/components/Trapezium.js.map +2 -2
  42. package/dist/esm/components/AutoFit.js +1 -1
  43. package/dist/esm/components/AutoFit.js.map +1 -1
  44. package/dist/esm/components/AutoScroll.js +1 -1
  45. package/dist/esm/components/AutoScroll.js.map +1 -1
  46. package/dist/esm/components/AutoSizeTextarea.js +1 -1
  47. package/dist/esm/components/AutoSizeTextarea.js.map +1 -1
  48. package/dist/esm/components/CircleText.js +0 -2
  49. package/dist/esm/components/CircleText.js.map +1 -1
  50. package/dist/esm/components/CopyButton.d.ts +7 -3
  51. package/dist/esm/components/CopyButton.js +2 -0
  52. package/dist/esm/components/CopyButton.js.map +1 -1
  53. package/dist/esm/components/Echart.d.ts +2 -2
  54. package/dist/esm/components/Echart.js +2 -0
  55. package/dist/esm/components/Echart.js.map +1 -1
  56. package/dist/esm/components/Flow.d.ts +1 -1
  57. package/dist/esm/components/Flow.js +1 -1
  58. package/dist/esm/components/Flow.js.map +1 -1
  59. package/dist/esm/components/FormLabel.d.ts +2 -2
  60. package/dist/esm/components/FormLabel.js +24 -27
  61. package/dist/esm/components/FormLabel.js.map +1 -1
  62. package/dist/esm/components/InfiniteScroll.d.ts +26 -3
  63. package/dist/esm/components/InfiniteScroll.js +3 -1
  64. package/dist/esm/components/InfiniteScroll.js.map +1 -1
  65. package/dist/esm/components/LoopSwiper.js +1 -1
  66. package/dist/esm/components/LoopSwiper.js.map +1 -1
  67. package/dist/esm/components/Ring.js +0 -2
  68. package/dist/esm/components/Ring.js.map +1 -1
  69. package/dist/esm/components/Scroll.d.ts +1 -1
  70. package/dist/esm/components/Scroll.js +1 -1
  71. package/dist/esm/components/Scroll.js.map +1 -1
  72. package/dist/esm/components/SectionRing.d.ts +2 -2
  73. package/dist/esm/components/SectionRing.js +6 -4
  74. package/dist/esm/components/SectionRing.js.map +1 -1
  75. package/dist/esm/components/Skeleton.js +3 -6
  76. package/dist/esm/components/Skeleton.js.map +1 -1
  77. package/dist/esm/components/Title.d.ts +2 -2
  78. package/dist/esm/components/Title.js +2 -0
  79. package/dist/esm/components/Title.js.map +1 -1
  80. package/dist/esm/components/TransitionBox.js.map +1 -1
  81. package/dist/esm/components/Trapezium.js +1 -3
  82. package/dist/esm/components/Trapezium.js.map +1 -1
  83. package/package.json +2 -2
  84. package/src/components/AutoFit.tsx +3 -2
  85. package/src/components/AutoScroll.tsx +3 -2
  86. package/src/components/AutoSizeTextarea.tsx +3 -2
  87. package/src/components/CircleText.tsx +0 -2
  88. package/src/components/CopyButton.tsx +4 -2
  89. package/src/components/Echart.tsx +7 -5
  90. package/src/components/Flow.tsx +3 -2
  91. package/src/components/FormLabel.tsx +20 -23
  92. package/src/components/InfiniteScroll.tsx +6 -3
  93. package/src/components/LoopSwiper.tsx +3 -2
  94. package/src/components/Ring.tsx +1 -3
  95. package/src/components/Scroll.tsx +5 -3
  96. package/src/components/SectionRing.tsx +5 -4
  97. package/src/components/Skeleton.tsx +3 -6
  98. package/src/components/Title.tsx +5 -2
  99. package/src/components/TransitionBox.tsx +1 -1
  100. package/src/components/Trapezium.tsx +2 -3
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Ring.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { forwardRef, HTMLAttributes } from \"react\"\n\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\n outerWidth: number\n innerWidth: number\n}\n\n/** 环形组件 */\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\n const { outerWidth, innerWidth, style, ...rest } = props\n\n const outerRadius = outerWidth / 2\n\n const innerRadius = innerWidth / 2\n\n return (\n <div\n ref={ref}\n style={{\n ...style,\n width: `${outerWidth}px`,\n height: `${outerWidth}px`,\n clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")`,\n }}\n {...rest}\n />\n )\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA2C;AAQpC,IAAM,WAAO,yBAAsC,CAAC,OAAO,QAAQ;AACtE,QAAM,EAAE,YAAY,YAAY,OAAO,GAAG,KAAK,IAAI;AAEnD,QAAM,cAAc,aAAa;AAEjC,QAAM,cAAc,aAAa;AAEjC,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,GAAG;AAAA,QACV,QAAQ,GAAG;AAAA,QACX,UAAU,YAAY,gBAAgB,eAAe,qBAAqB,iBAAiB,eAAe,sBAAsB,iBAAiB,cAAc,kBAAkB,eAAe,qBAAqB,cAAc,QAAQ,eAAe,sBAAsB,cAAc;AAAA,MAClS;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
4
+ "sourcesContent": ["import { HTMLAttributes, forwardRef } from \"react\"\n\nexport interface RingProps extends HTMLAttributes<HTMLDivElement> {\n outerWidth: number\n innerWidth: number\n}\n\n/** 环形组件 */\nexport const Ring = forwardRef<HTMLDivElement, RingProps>((props, ref) => {\n const { outerWidth, innerWidth, style, ...rest } = props\n\n const outerRadius = outerWidth / 2\n\n const innerRadius = innerWidth / 2\n\n return (\n <div\n ref={ref}\n style={{\n ...style,\n width: `${outerWidth}px`,\n height: `${outerWidth}px`,\n clipPath: `path(\"M0,${outerRadius} a${outerRadius},${outerRadius},0,1,0,${outerWidth},0 a${outerRadius},${outerRadius},0,1,0,-${outerWidth},0 l${outerRadius - innerRadius},0 a${innerRadius},${innerRadius},0,0,1,${innerRadius * 2},0 a${innerRadius},${innerRadius},0,0,1,-${innerRadius * 2},0 Z\")`,\n }}\n {...rest}\n />\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAQpC,IAAM,WAAO,yBAAsC,CAAC,OAAO,QAAQ;AACtE,QAAM,EAAE,YAAY,YAAY,OAAO,GAAG,KAAK,IAAI;AAEnD,QAAM,cAAc,aAAa;AAEjC,QAAM,cAAc,aAAa;AAEjC,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,GAAG;AAAA,QACV,QAAQ,GAAG;AAAA,QACX,UAAU,YAAY,gBAAgB,eAAe,qBAAqB,iBAAiB,eAAe,sBAAsB,iBAAiB,cAAc,kBAAkB,eAAe,qBAAqB,cAAc,QAAQ,eAAe,sBAAsB,cAAc;AAAA,MAClS;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import { CSSProperties, ForwardedRef, HTMLAttributes } from "react";
2
2
  import Scrollbar from "smooth-scrollbar";
3
- import type { ScrollbarOptions, ScrollListener } from "smooth-scrollbar/interfaces";
3
+ import type { ScrollListener, ScrollbarOptions } from "smooth-scrollbar/interfaces";
4
4
  export { default as Scrollbar } from "smooth-scrollbar";
5
5
  export * from "smooth-scrollbar/interfaces";
6
6
  export interface ScrollOptions extends Partial<ScrollbarOptions> {
@@ -35,10 +35,10 @@ __export(Scroll_exports, {
35
35
  Scrollbar: () => import_smooth_scrollbar2.default
36
36
  });
37
37
  module.exports = __toCommonJS(Scroll_exports);
38
- var import_css = require("@emotion/css");
39
38
  var import_deepsea_tools = require("deepsea-tools");
40
39
  var import_react = require("react");
41
40
  var import_smooth_scrollbar = __toESM(require("smooth-scrollbar"));
41
+ var import_css = require("@emotion/css");
42
42
  var import_utils = require("../utils");
43
43
  var import_smooth_scrollbar2 = __toESM(require("smooth-scrollbar"));
44
44
  __reExport(Scroll_exports, require("smooth-scrollbar/interfaces"), module.exports);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Scroll.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, ForwardedRef, forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport type { ScrollbarOptions, ScrollListener } from \"smooth-scrollbar/interfaces\"\nimport { px, transformCSSVariable } from \"../utils\"\nexport { default as Scrollbar } from \"smooth-scrollbar\"\nexport * from \"smooth-scrollbar/interfaces\"\n\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\n /** 滑块宽度 */\n thumbWidth?: number | string\n /** 滑块圆角大小 */\n thumbRadius?: number | string\n /** 滑块背景颜色 */\n thumbColor?: CSSProperties[\"backgroundColor\"]\n /** 滚动条背景颜色 */\n trackColor?: CSSProperties[\"backgroundColor\"]\n}\n\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\n /** 滚动的配置 */\n options?: ScrollOptions\n /** 滚动条实例 */\n scrollbar?: ForwardedRef<Scrollbar>\n /** 滚动条滚动事件 */\n onScrollbar?: ScrollListener\n}\n\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\n const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\n const ele = useRef<HTMLDivElement>(null)\n const bar = useRef<Scrollbar | null>(null)\n\n useLayoutEffect(() => {\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\n return () => bar.current?.destroy()\n }, [])\n\n useImperativeHandle(ref, () => ele.current!, [])\n\n useImperativeHandle(scrollbar, () => bar.current!, [])\n\n useEffect(() => {\n if (!onScrollbar) return\n bar.current?.addListener(onScrollbar)\n return () => bar.current?.removeListener(onScrollbar)\n }, [onScrollbar])\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n .scrollbar-track.scrollbar-track-x {\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n }\n\n .scrollbar-thumb.scrollbar-thumb-x {\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n }\n\n .scrollbar-track.scrollbar-track-y {\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n }\n\n .scrollbar-thumb.scrollbar-thumb-y {\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n }\n `,\n className,\n )}\n style={transformCSSVariable(\n {\n thumbWidth: px(thumbWidth),\n thumbRadius: px(thumbRadius),\n thumbColor,\n trackColor,\n },\n style,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAEtB,mBAAyC;AACzC,IAAAA,2BAAqC;AACrC,2BAAc,wCATd;AA+BO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,gBAAY,iBAAG,UAAU;AAAA,UACzB,iBAAa,iBAAG,WAAW;AAAA,UAC3B;AAAA,UACA;AAAA,QACJ;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { CSSProperties, ForwardedRef, HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport type { ScrollListener, ScrollbarOptions } from \"smooth-scrollbar/interfaces\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport { default as Scrollbar } from \"smooth-scrollbar\"\nexport * from \"smooth-scrollbar/interfaces\"\n\nexport interface ScrollOptions extends Partial<ScrollbarOptions> {\n /** 滑块宽度 */\n thumbWidth?: number | string\n /** 滑块圆角大小 */\n thumbRadius?: number | string\n /** 滑块背景颜色 */\n thumbColor?: CSSProperties[\"backgroundColor\"]\n /** 滚动条背景颜色 */\n trackColor?: CSSProperties[\"backgroundColor\"]\n}\n\nexport interface ScrollProps extends HTMLAttributes<HTMLDivElement> {\n /** 滚动的配置 */\n options?: ScrollOptions\n /** 滚动条实例 */\n scrollbar?: ForwardedRef<Scrollbar>\n /** 滚动条滚动事件 */\n onScrollbar?: ScrollListener\n}\n\nexport const Scroll = forwardRef<HTMLDivElement, ScrollProps>((props, ref) => {\n const { children, options, className, style, scrollbar, onScrollbar, ...rest } = props\n const { thumbWidth, thumbRadius, thumbColor, trackColor, ...scrollbarOptions } = options || {}\n const ele = useRef<HTMLDivElement>(null)\n const bar = useRef<Scrollbar | null>(null)\n\n useLayoutEffect(() => {\n bar.current = Scrollbar.init(ele.current!, scrollbarOptions)\n return () => bar.current?.destroy()\n }, [])\n\n useImperativeHandle(ref, () => ele.current!, [])\n\n useImperativeHandle(scrollbar, () => bar.current!, [])\n\n useEffect(() => {\n if (!onScrollbar) return\n bar.current?.addListener(onScrollbar)\n return () => bar.current?.removeListener(onScrollbar)\n }, [onScrollbar])\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n .scrollbar-track.scrollbar-track-x {\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n }\n\n .scrollbar-thumb.scrollbar-thumb-x {\n ${thumbWidth !== undefined ? \"height: var(--thumb-width);\" : \"\"}\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n }\n\n .scrollbar-track.scrollbar-track-y {\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n ${trackColor !== undefined ? \"background-color: var(--track-color);\" : \"\"}\n }\n\n .scrollbar-thumb.scrollbar-thumb-y {\n ${thumbWidth !== undefined ? \"width: var(--thumb-width);\" : \"\"}\n ${thumbRadius !== undefined ? \"border-radius: var(--thumb-radius);\" : \"\"}\n ${thumbColor !== undefined ? \"background-color: var(--thumb-color);\" : \"\"}\n }\n `,\n className,\n )}\n style={transformCSSVariable(\n {\n thumbWidth: px(thumbWidth),\n thumbRadius: px(thumbRadius),\n thumbColor,\n trackColor,\n },\n style,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAqB;AACrB,mBAAiI;AACjI,8BAAsB;AAGtB,iBAAoB;AACpB,mBAAyC;AAEzC,IAAAA,2BAAqC;AACrC,2BAAc,wCAXd;AAiCO,IAAM,aAAS,yBAAwC,CAAC,OAAO,QAAQ;AAC1E,QAAM,EAAE,UAAU,SAAS,WAAW,OAAO,WAAW,aAAa,GAAG,KAAK,IAAI;AACjF,QAAM,EAAE,YAAY,aAAa,YAAY,YAAY,GAAG,iBAAiB,IAAI,WAAW,CAAC;AAC7F,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,UAAM,qBAAyB,IAAI;AAEzC,oCAAgB,MAAM;AAClB,QAAI,UAAU,wBAAAC,QAAU,KAAK,IAAI,SAAU,gBAAgB;AAC3D,WAAO,MAAM,IAAI,SAAS,QAAQ;AAAA,EACtC,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,IAAI,SAAU,CAAC,CAAC;AAE/C,wCAAoB,WAAW,MAAM,IAAI,SAAU,CAAC,CAAC;AAErD,8BAAU,MAAM;AACZ,QAAI,CAAC;AAAa;AAClB,QAAI,SAAS,YAAY,WAAW;AACpC,WAAO,MAAM,IAAI,SAAS,eAAe,WAAW;AAAA,EACxD,GAAG,CAAC,WAAW,CAAC;AAEhB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW;AAAA,QACP;AAAA;AAAA,0BAEU,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,gCAAgC;AAAA,0BAC3D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA;AAAA,0BAIrE,eAAe,SAAY,+BAA+B;AAAA,0BAC1D,gBAAgB,SAAY,wCAAwC;AAAA,0BACpE,eAAe,SAAY,0CAA0C;AAAA;AAAA;AAAA,QAG/E;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,gBAAY,iBAAG,UAAU;AAAA,UACzB,iBAAa,iBAAG,WAAW;AAAA,UAC3B;AAAA,UACA;AAAA,QACJ;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
6
6
  "names": ["import_smooth_scrollbar", "Scrollbar"]
7
7
  }
@@ -1,8 +1,8 @@
1
- import { FC, HTMLAttributes } from "react";
1
+ import { HTMLAttributes } from "react";
2
2
  export interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {
3
3
  outerRadius: number;
4
4
  innerRadius: number;
5
5
  count: number;
6
6
  angel: number;
7
7
  }
8
- export declare const SectionRing: FC<SectionRingProps>;
8
+ export declare const SectionRing: import("react").ForwardRefExoticComponent<SectionRingProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -24,7 +24,8 @@ __export(SectionRing_exports, {
24
24
  });
25
25
  module.exports = __toCommonJS(SectionRing_exports);
26
26
  var import_deepsea_tools = require("deepsea-tools");
27
- var SectionRing = (props) => {
27
+ var import_react = require("react");
28
+ var SectionRing = (0, import_react.forwardRef)((props, ref) => {
28
29
  const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props;
29
30
  const s = Math.PI * 2 / c - a;
30
31
  function arc(radius, startAngle, endAngle, options = {}) {
@@ -33,18 +34,19 @@ var SectionRing = (props) => {
33
34
  return /* @__PURE__ */ React.createElement(
34
35
  "div",
35
36
  {
37
+ ref,
36
38
  style: {
37
- ...style,
38
39
  width: o * 2,
39
40
  height: o * 2,
40
41
  clipPath: `path("${Array(c).fill(0).map(
41
42
  (it, idx) => `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`
42
- ).join(" ")} Z")`
43
+ ).join(" ")} Z")`,
44
+ ...style
43
45
  },
44
46
  ...rest
45
47
  }
46
48
  );
47
- };
49
+ });
48
50
  // Annotate the CommonJS export names for ESM import in node:
49
51
  0 && (module.exports = {
50
52
  SectionRing
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/SectionRing.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\nimport { FC, HTMLAttributes } from \"react\"\n\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\n outerRadius: number\n innerRadius: number\n count: number\n angel: number\n}\n\nexport const SectionRing: FC<SectionRingProps> = props => {\n const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\n\n const s = (Math.PI * 2) / c - a\n\n function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\n return drawArc(o, o, radius, startAngle, endAngle, options)\n }\n\n return (\n <div\n style={{\n ...style,\n width: o * 2,\n height: o * 2,\n clipPath: `path(\"${Array(c)\n .fill(0)\n .map(\n (it, idx) =>\n `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,\n )\n .join(\" \")} Z\")`,\n }}\n {...rest}\n />\n )\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAwC;AAUjC,IAAM,cAAoC,WAAS;AACtD,QAAM,EAAE,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,IAAI;AAE/E,QAAM,IAAK,KAAK,KAAK,IAAK,IAAI;AAE9B,WAAS,IAAI,QAAgB,YAAoB,UAAkB,UAA0B,CAAC,GAAG;AAC7F,eAAO,8BAAQ,GAAG,GAAG,QAAQ,YAAY,UAAU,OAAO;AAAA,EAC9D;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG,OAAO;AAAA,QACH,GAAG;AAAA,QACH,OAAO,IAAI;AAAA,QACX,QAAQ,IAAI;AAAA,QACZ,UAAU,SAAS,MAAM,CAAC,EACrB,KAAK,CAAC,EACN;AAAA,UACG,CAAC,IAAI,QACD,GAAG,IAAI,GAAG,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,IAAI,EAAE,MAAM,MAAM,eAAe,KAAK,CAAC;AAAA,QACnI,EACC,KAAK,GAAG;AAAA,MACjB;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { DrawArcOptions, drawArc } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nexport interface SectionRingProps extends HTMLAttributes<HTMLDivElement> {\n outerRadius: number\n innerRadius: number\n count: number\n angel: number\n}\n\nexport const SectionRing = forwardRef<HTMLDivElement, SectionRingProps>((props, ref) => {\n const { outerRadius: o, innerRadius: i, count: c, angel: a, style, ...rest } = props\n\n const s = (Math.PI * 2) / c - a\n\n function arc(radius: number, startAngle: number, endAngle: number, options: DrawArcOptions = {}) {\n return drawArc(o, o, radius, startAngle, endAngle, options)\n }\n\n return (\n <div\n ref={ref}\n style={{\n width: o * 2,\n height: o * 2,\n clipPath: `path(\"${Array(c)\n .fill(0)\n .map(\n (it, idx) =>\n `${arc(o, idx * (a + s), idx * (a + s) + a)} ${arc(i, idx * (a + s) + a, idx * (a + s), { line: true, anticlockwise: true })}`,\n )\n .join(\" \")} Z\")`,\n ...style,\n }}\n {...rest}\n />\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,2BAAwC;AACxC,mBAA2C;AASpC,IAAM,kBAAc,yBAA6C,CAAC,OAAO,QAAQ;AACpF,QAAM,EAAE,aAAa,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,IAAI;AAE/E,QAAM,IAAK,KAAK,KAAK,IAAK,IAAI;AAE9B,WAAS,IAAI,QAAgB,YAAoB,UAAkB,UAA0B,CAAC,GAAG;AAC7F,eAAO,8BAAQ,GAAG,GAAG,QAAQ,YAAY,UAAU,OAAO;AAAA,EAC9D;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAO;AAAA,QACH,OAAO,IAAI;AAAA,QACX,QAAQ,IAAI;AAAA,QACZ,UAAU,SAAS,MAAM,CAAC,EACrB,KAAK,CAAC,EACN;AAAA,UACG,CAAC,IAAI,QACD,GAAG,IAAI,GAAG,OAAO,IAAI,IAAI,OAAO,IAAI,KAAK,CAAC,KAAK,IAAI,GAAG,OAAO,IAAI,KAAK,GAAG,OAAO,IAAI,IAAI,EAAE,MAAM,MAAM,eAAe,KAAK,CAAC;AAAA,QACnI,EACC,KAAK,GAAG;AAAA,QACb,GAAG;AAAA,MACP;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  var __defProp = Object.defineProperty;
3
2
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -23,12 +22,11 @@ __export(Skeleton_exports, {
23
22
  Skeleton: () => Skeleton
24
23
  });
25
24
  module.exports = __toCommonJS(Skeleton_exports);
26
- var import_css = require("@emotion/css");
27
25
  var import_deepsea_tools = require("deepsea-tools");
28
26
  var import_react = require("react");
27
+ var import_css = require("@emotion/css");
29
28
  var Skeleton = (0, import_react.forwardRef)((props, ref) => {
30
- let { className, loading, children, ...rest } = props;
31
- loading ??= children === void 0 || children === null;
29
+ const { className, children, loading = children === void 0 || children === null, ...rest } = props;
32
30
  return /* @__PURE__ */ React.createElement(
33
31
  "div",
34
32
  {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Skeleton.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, HTMLAttributes } from \"react\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n let { className, loading, children, ...rest } = props\n\n loading ??= children === undefined || children === null\n\n return (\n <div\n ref={ref}\n className={clsx(\n css`\n @keyframes shimmer {\n 0% {\n background-position: -400px 0px;\n }\n 100% {\n background-position: 400px 0px;\n }\n }\n `,\n loading &&\n css`\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: shimmer;\n animation-timing-function: linear;\n background-size: 800px 104px;\n `,\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAMpC,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,MAAI,EAAE,WAAW,SAAS,UAAU,GAAG,KAAK,IAAI;AAEhD,cAAY,aAAa,UAAa,aAAa;AAEnD,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
4
+ "sourcesContent": ["import { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nimport { css } from \"@emotion/css\"\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n loading?: boolean\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>((props, ref) => {\n const { className, children, loading = children === undefined || children === null, ...rest } = props\n\n return (\n <div\n ref={ref}\n className={clsx(\n css`\n @keyframes shimmer {\n 0% {\n background-position: -400px 0px;\n }\n 100% {\n background-position: 400px 0px;\n }\n }\n `,\n loading &&\n css`\n background-image: linear-gradient(to right, rgba(0, 0, 0, 0.067) 8%, rgba(0, 0, 0, 0.133) 18%, rgba(0, 0, 0, 0.067) 33%);\n animation-duration: 1s;\n animation-fill-mode: forwards;\n animation-iteration-count: infinite;\n animation-name: shimmer;\n animation-timing-function: linear;\n background-size: 800px 104px;\n `,\n className,\n )}\n {...rest}\n >\n {children}\n </div>\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AAMb,IAAM,eAAW,yBAA0C,CAAC,OAAO,QAAQ;AAC9E,QAAM,EAAE,WAAW,UAAU,UAAU,aAAa,UAAa,aAAa,MAAM,GAAG,KAAK,IAAI;AAEhG,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAUA,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASJ;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,IAEH;AAAA,EACL;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,3 +1,3 @@
1
- import { ComponentProps } from "react";
2
- export type TitleProps = ComponentProps<"title">;
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ export type TitleProps = ComponentPropsWithoutRef<"title">;
3
3
  export declare const Title: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, "ref"> & import("react").RefAttributes<HTMLTitleElement>>;
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  var __defProp = Object.defineProperty;
2
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Title.tsx"],
4
- "sourcesContent": ["import { ComponentProps, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport { getReactVersion } from \"../utils/getReactVersion\"\n\nexport type TitleProps = ComponentProps<\"title\">\n\nconst [major] = getReactVersion()\n\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\n if (major >= 19) return <title ref={ref} {...props} />\n\n const ele = useRef<HTMLTitleElement>(null)\n\n useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\n\n useLayoutEffect(() => {\n const title = document.head.querySelector(\"title\")\n if (title === ele.current) return\n document.head.insertBefore(ele.current as HTMLTitleElement, title)\n }, [])\n\n return createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyF;AACzF,uBAA6B;AAC7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAC1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
4
+ "sourcesContent": ["\"use client\"\n\nimport { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useLayoutEffect, useRef } from \"react\"\nimport { createPortal } from \"react-dom\"\n\nimport { getReactVersion } from \"../utils/getReactVersion\"\n\nexport type TitleProps = ComponentPropsWithoutRef<\"title\">\n\nconst [major] = getReactVersion()\n\nexport const Title = forwardRef<HTMLTitleElement, TitleProps>((props, ref) => {\n if (major >= 19) return <title ref={ref} {...props} />\n\n const ele = useRef<HTMLTitleElement>(null)\n\n useImperativeHandle(ref, () => ele.current as HTMLTitleElement, [ele.current])\n\n useLayoutEffect(() => {\n const title = document.head.querySelector(\"title\")\n if (title === ele.current) return\n document.head.insertBefore(ele.current as HTMLTitleElement, title)\n }, [])\n\n return createPortal(<title ref={ele} {...props} />, document.head)\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmG;AACnG,uBAA6B;AAE7B,6BAAgC;AAIhC,IAAM,CAAC,KAAK,QAAI,wCAAgB;AAEzB,IAAM,YAAQ,yBAAyC,CAAC,OAAO,QAAQ;AAC1E,MAAI,SAAS;AAAI,WAAO,oCAAC,WAAM,KAAW,GAAG,OAAO;AAEpD,QAAM,UAAM,qBAAyB,IAAI;AAEzC,wCAAoB,KAAK,MAAM,IAAI,SAA6B,CAAC,IAAI,OAAO,CAAC;AAE7E,oCAAgB,MAAM;AAClB,UAAM,QAAQ,SAAS,KAAK,cAAc,OAAO;AACjD,QAAI,UAAU,IAAI;AAAS;AAC3B,aAAS,KAAK,aAAa,IAAI,SAA6B,KAAK;AAAA,EACrE,GAAG,CAAC,CAAC;AAEL,aAAO,+BAAa,oCAAC,WAAM,KAAK,KAAM,GAAG,OAAO,GAAI,SAAS,IAAI;AACrE,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/TransitionBox.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { CSSProperties, FC, forwardRef, HTMLAttributes, useEffect, useRef, useState } from \"react\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n containerClassName?: string\n containerStyle?: CSSProperties\n vertical?: boolean\n horizontal?: boolean\n time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n const container = useRef<HTMLDivElement>(null)\n const size = useSize(container)\n const width = size?.width ?? 0\n const height = size?.height ?? 0\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(count => Math.min(count + 1, 3))\n }, [width, height])\n\n const outerStyle: CSSProperties = {\n transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n transitionDuration: count === 3 ? `${time}ms` : undefined,\n width,\n height,\n overflow: \"hidden\",\n position: \"relative\",\n ...style,\n }\n\n return (\n <div ref={ref} style={outerStyle} {...rest}>\n <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n {children}\n </div>\n </div>\n )\n})\n"],
4
+ "sourcesContent": ["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { CSSProperties, FC, HTMLAttributes, forwardRef, useEffect, useRef, useState } from \"react\"\n\nexport interface TransitionBoxProps extends HTMLAttributes<HTMLDivElement> {\n containerClassName?: string\n containerStyle?: CSSProperties\n vertical?: boolean\n horizontal?: boolean\n time?: number\n}\n\n/** 尺寸渐变的组件 */\nexport const TransitionBox: FC<TransitionBoxProps> = forwardRef<HTMLDivElement, TransitionBoxProps>((props, ref) => {\n const { style, containerClassName, containerStyle, children, vertical = true, horizontal = true, time = 3000, ...rest } = props\n const container = useRef<HTMLDivElement>(null)\n const size = useSize(container)\n const width = size?.width ?? 0\n const height = size?.height ?? 0\n const [count, setCount] = useState(0)\n\n useEffect(() => {\n setCount(count => Math.min(count + 1, 3))\n }, [width, height])\n\n const outerStyle: CSSProperties = {\n transitionProperty: count === 3 ? [horizontal && \"width\", vertical && \"height\"].filter(Boolean).join(\", \") : undefined,\n transitionDuration: count === 3 ? `${time}ms` : undefined,\n width,\n height,\n overflow: \"hidden\",\n position: \"relative\",\n ...style,\n }\n\n return (\n <div ref={ref} style={outerStyle} {...rest}>\n <div className={containerClassName} style={{ position: \"absolute\", ...containerStyle }} ref={container}>\n {children}\n </div>\n </div>\n )\n})\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAwB;AACxB,mBAA2F;AAWpF,IAAM,oBAAwC,yBAA+C,CAAC,OAAO,QAAQ;AAChH,QAAM,EAAE,OAAO,oBAAoB,gBAAgB,UAAU,WAAW,MAAM,aAAa,MAAM,OAAO,KAAM,GAAG,KAAK,IAAI;AAC1H,QAAM,gBAAY,qBAAuB,IAAI;AAC7C,QAAM,WAAO,uBAAQ,SAAS;AAC9B,QAAM,QAAQ,MAAM,SAAS;AAC7B,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AAEpC,8BAAU,MAAM;AACZ,aAAS,CAAAA,WAAS,KAAK,IAAIA,SAAQ,GAAG,CAAC,CAAC;AAAA,EAC5C,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,aAA4B;AAAA,IAC9B,oBAAoB,UAAU,IAAI,CAAC,cAAc,SAAS,YAAY,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,IAAI,IAAI;AAAA,IAC7G,oBAAoB,UAAU,IAAI,GAAG,WAAW;AAAA,IAChD;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG;AAAA,EACP;AAEA,SACI,oCAAC,SAAI,KAAU,OAAO,YAAa,GAAG,QAClC,oCAAC,SAAI,WAAW,oBAAoB,OAAO,EAAE,UAAU,YAAY,GAAG,eAAe,GAAG,KAAK,aACxF,QACL,CACJ;AAER,CAAC;",
6
6
  "names": ["count"]
7
7
  }
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  var __defProp = Object.defineProperty;
3
2
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -23,9 +22,9 @@ __export(Trapezium_exports, {
23
22
  Trapezium: () => Trapezium
24
23
  });
25
24
  module.exports = __toCommonJS(Trapezium_exports);
26
- var import_css = require("@emotion/css");
27
25
  var import_deepsea_tools = require("deepsea-tools");
28
26
  var import_react = require("react");
27
+ var import_css = require("@emotion/css");
29
28
  var import_utils = require("../utils");
30
29
  var Trapezium = (0, import_react.forwardRef)((props, ref) => {
31
30
  const { top, bottom, height, borderRadius, className, style, ...rest } = props;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/components/Trapezium.tsx"],
4
- "sourcesContent": ["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\n top: number\n bottom: number\n height: number\n borderRadius: number\n}\n\n/** 梯形组件 */\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\n const { top, bottom, height, borderRadius, className, style, ...rest } = props\n\n const diff = (bottom - top) / 2\n\n const a = Math.atan(height / diff) / 2\n\n const b = borderRadius / Math.tan(a)\n\n const c = b * Math.cos(a * 2)\n\n const d = b * Math.sin(a * 2)\n\n const e = Math.PI / 2 - a\n\n const f = borderRadius / Math.tan(e)\n\n const g = f * Math.cos(a * 2)\n\n const h = f * Math.sin(a * 2)\n\n return (\n <div\n ref={ref}\n className={clsx(\n css`\n width: var(--width);\n height: var(--height);\n clip-path: var(--clip-path);\n `,\n className,\n )}\n style={transformCSSVariable(\n {\n width: px(bottom),\n height: px(height),\n clipath: `path(\"M ${diff + f} ${0} A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`,\n },\n style,\n )}\n {...rest}\n />\n )\n})\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,2BAAqB;AACrB,mBAA2C;AAC3C,mBAAyC;AAUlC,IAAM,gBAAY,yBAA2C,CAAC,OAAO,QAAQ;AAChF,QAAM,EAAE,KAAK,QAAQ,QAAQ,cAAc,WAAW,OAAO,GAAG,KAAK,IAAI;AAEzE,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI;AAErC,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,KAAK,KAAK,IAAI;AAExB,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,WAAO,iBAAG,MAAM;AAAA,UAChB,YAAQ,iBAAG,MAAM;AAAA,UACjB,SAAS,WAAW,OAAO,KAAK,QAAQ,gBAAgB,sBAAsB,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,gBAAgB,sBAAsB,KAAK,YAAY,SAAS,KAAK,YAAY,gBAAgB,sBAAsB,SAAS,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK,OAAO,gBAAgB,sBAAsB,MAAM,OAAO,KAAK;AAAA,QAChW;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
4
+ "sourcesContent": ["import { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef } from \"react\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface TrapeziumProps extends HTMLAttributes<HTMLDivElement> {\n top: number\n bottom: number\n height: number\n borderRadius: number\n}\n\n/** 梯形组件 */\nexport const Trapezium = forwardRef<HTMLDivElement, TrapeziumProps>((props, ref) => {\n const { top, bottom, height, borderRadius, className, style, ...rest } = props\n\n const diff = (bottom - top) / 2\n\n const a = Math.atan(height / diff) / 2\n\n const b = borderRadius / Math.tan(a)\n\n const c = b * Math.cos(a * 2)\n\n const d = b * Math.sin(a * 2)\n\n const e = Math.PI / 2 - a\n\n const f = borderRadius / Math.tan(e)\n\n const g = f * Math.cos(a * 2)\n\n const h = f * Math.sin(a * 2)\n\n return (\n <div\n ref={ref}\n className={clsx(\n css`\n width: var(--width);\n height: var(--height);\n clip-path: var(--clip-path);\n `,\n className,\n )}\n style={transformCSSVariable(\n {\n width: px(bottom),\n height: px(height),\n clipath: `path(\"M ${diff + f} ${0} A ${borderRadius} ${borderRadius} 0 0 0 ${diff - g} ${h} L ${c} ${height - d} A ${borderRadius} ${borderRadius} 0 0 0 ${b} ${height} L ${bottom - b} ${height} A ${borderRadius} ${borderRadius} 0 0 0 ${bottom - c} ${height - d} L ${top + diff + g} ${h} A ${borderRadius} ${borderRadius} 0 0 0 ${top + diff - f} ${0} Z\")`,\n },\n style,\n )}\n {...rest}\n />\n )\n})\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAqB;AACrB,mBAA2C;AAE3C,iBAAoB;AACpB,mBAAyC;AAUlC,IAAM,gBAAY,yBAA2C,CAAC,OAAO,QAAQ;AAChF,QAAM,EAAE,KAAK,QAAQ,QAAQ,cAAc,WAAW,OAAO,GAAG,KAAK,IAAI;AAEzE,QAAM,QAAQ,SAAS,OAAO;AAE9B,QAAM,IAAI,KAAK,KAAK,SAAS,IAAI,IAAI;AAErC,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,KAAK,KAAK,IAAI;AAExB,QAAM,IAAI,eAAe,KAAK,IAAI,CAAC;AAEnC,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,QAAM,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAE5B,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAW;AAAA,QACP;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,MACJ;AAAA,MACA,WAAO;AAAA,QACH;AAAA,UACI,WAAO,iBAAG,MAAM;AAAA,UAChB,YAAQ,iBAAG,MAAM;AAAA,UACjB,SAAS,WAAW,OAAO,KAAK,QAAQ,gBAAgB,sBAAsB,OAAO,KAAK,OAAO,KAAK,SAAS,OAAO,gBAAgB,sBAAsB,KAAK,YAAY,SAAS,KAAK,YAAY,gBAAgB,sBAAsB,SAAS,KAAK,SAAS,OAAO,MAAM,OAAO,KAAK,OAAO,gBAAgB,sBAAsB,MAAM,OAAO,KAAK;AAAA,QAChW;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
 
3
- import { css } from "@emotion/css";
4
3
  import { clsx } from "deepsea-tools";
5
4
  import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
5
+ import { css } from "@emotion/css";
6
6
  import { px, transformCSSVariable } from "../utils";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  /**
@@ -1 +1 @@
1
- {"version":3,"names":["css","clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","AutoFit","props","ref","width","designWidth","height","designHeight","direction","className","style","rest","ele","show","setShow","transform","setTransform","undefined","setWidth","setHeight","current","element","parent","parentElement","listener","entries","entry","contentRect","scale","Math","min","observer","ResizeObserver","observe","disconnect","process","env","NODE_ENV","getComputedStyle","position","console","warn","display"],"sources":["../../../src/components/AutoFit.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, HTMLAttributes, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\n /** 设计稿宽度,默认 1920 */\n width?: number\n /** 设计稿高度,默认 1080 */\n height?: number\n /**\n * 在哪些方向进行缩放,默认缩放所有方向\n * 1. 水平方向是指,宽度按照设计稿进行占满,高度反向缩放\n * 2. 垂直方向是指,高度按照设计稿进行占满,宽度反向缩放\n * 3. 默认是水平和垂直方向都进行缩放,类似于 background-size: contain 的效果\n */\n direction?: \"horizontal\" | \"vertical\" | \"both\"\n}\n\n/**\n * 自适应缩放组件\n *\n * 注意:\n * 1. 父元素必须设置非 static 定位方式\n * 2. 父元素只能有且仅有一个子元素,那就是 AutoFit\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\n * 4. 在第一次完成缩放前,无论 props 是什么,返回的都是 <div style={{ display: \"none\" }} />\n * 5. 元素的属性、事件、资源并不是立即加载的,会有一帧的延迟,在第一次完成缩放后才会显示\n */\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\n const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props\n const ele = useRef<HTMLDivElement>(null)\n const [show, setShow] = useState(false)\n const [transform, setTransform] = useState<string | undefined>(undefined)\n const [width, setWidth] = useState<string | undefined>(undefined)\n const [height, setHeight] = useState<string | undefined>(undefined)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n useLayoutEffect(() => {\n const element = ele.current\n const parent = element?.parentElement\n if (!element || !parent) return\n function listener(entries: ResizeObserverEntry[]) {\n const entry = entries[0]\n const { contentRect } = entry\n if (direction === \"horizontal\") {\n const scale = contentRect.width / designWidth\n setTransform(`scale(${scale})`)\n setWidth(px(designWidth))\n setHeight(px(contentRect.height / scale))\n } else if (direction === \"vertical\") {\n const scale = contentRect.height / designHeight\n setTransform(`scale(${scale})`)\n setWidth(px(contentRect.width / scale))\n setHeight(px(designHeight))\n } else {\n const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)\n setTransform(\n `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,\n )\n setWidth(px(designWidth))\n setHeight(px(designHeight))\n }\n setShow(true)\n }\n const observer = new ResizeObserver(listener)\n observer.observe(parent)\n return () => observer.disconnect()\n }, [ele.current?.parentElement, designWidth, designHeight, direction])\n\n if (process.env.NODE_ENV === \"development\") {\n useEffect(() => {\n const parent = ele.current?.parentElement\n if (!parent) return\n const style = getComputedStyle(parent)\n if (style.position === \"static\") {\n console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\n }\n }, [ele.current?.parentElement])\n }\n\n if (!show) return <div ref={ele} style={{ display: \"none\" }} />\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n position: absolute;\n transform: var(--transform);\n transform-origin: top left;\n width: var(--width);\n height: var(--height);\n `,\n className,\n )}\n style={transformCSSVariable({ transform, width, height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"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"}
1
+ {"version":3,"names":["clsx","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","useState","css","px","transformCSSVariable","jsx","_jsx","AutoFit","props","ref","width","designWidth","height","designHeight","direction","className","style","rest","ele","show","setShow","transform","setTransform","undefined","setWidth","setHeight","current","element","parent","parentElement","listener","entries","entry","contentRect","scale","Math","min","observer","ResizeObserver","observe","disconnect","process","env","NODE_ENV","getComputedStyle","position","console","warn","display"],"sources":["../../../src/components/AutoFit.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { HTMLAttributes, forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"../utils\"\n\nexport interface AutoFitProps extends HTMLAttributes<HTMLDivElement> {\n /** 设计稿宽度,默认 1920 */\n width?: number\n /** 设计稿高度,默认 1080 */\n height?: number\n /**\n * 在哪些方向进行缩放,默认缩放所有方向\n * 1. 水平方向是指,宽度按照设计稿进行占满,高度反向缩放\n * 2. 垂直方向是指,高度按照设计稿进行占满,宽度反向缩放\n * 3. 默认是水平和垂直方向都进行缩放,类似于 background-size: contain 的效果\n */\n direction?: \"horizontal\" | \"vertical\" | \"both\"\n}\n\n/**\n * 自适应缩放组件\n *\n * 注意:\n * 1. 父元素必须设置非 static 定位方式\n * 2. 父元素只能有且仅有一个子元素,那就是 AutoFit\n * 3. 不要设置 AutoFit 的 position、left、top、transform、width、height 属性\n * 4. 在第一次完成缩放前,无论 props 是什么,返回的都是 <div style={{ display: \"none\" }} />\n * 5. 元素的属性、事件、资源并不是立即加载的,会有一帧的延迟,在第一次完成缩放后才会显示\n */\nexport const AutoFit = forwardRef<HTMLDivElement, AutoFitProps>((props, ref) => {\n const { width: designWidth = 1920, height: designHeight = 1080, direction, className, style, ...rest } = props\n const ele = useRef<HTMLDivElement>(null)\n const [show, setShow] = useState(false)\n const [transform, setTransform] = useState<string | undefined>(undefined)\n const [width, setWidth] = useState<string | undefined>(undefined)\n const [height, setHeight] = useState<string | undefined>(undefined)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n useLayoutEffect(() => {\n const element = ele.current\n const parent = element?.parentElement\n if (!element || !parent) return\n function listener(entries: ResizeObserverEntry[]) {\n const entry = entries[0]\n const { contentRect } = entry\n if (direction === \"horizontal\") {\n const scale = contentRect.width / designWidth\n setTransform(`scale(${scale})`)\n setWidth(px(designWidth))\n setHeight(px(contentRect.height / scale))\n } else if (direction === \"vertical\") {\n const scale = contentRect.height / designHeight\n setTransform(`scale(${scale})`)\n setWidth(px(contentRect.width / scale))\n setHeight(px(designHeight))\n } else {\n const scale = Math.min(contentRect.width / designWidth, contentRect.height / designHeight)\n setTransform(\n `translateX(${(contentRect.width - designWidth * scale) / 2}px) translateY(${(contentRect.height - designHeight * scale) / 2}px) scale(${scale})`,\n )\n setWidth(px(designWidth))\n setHeight(px(designHeight))\n }\n setShow(true)\n }\n const observer = new ResizeObserver(listener)\n observer.observe(parent)\n return () => observer.disconnect()\n }, [ele.current?.parentElement, designWidth, designHeight, direction])\n\n if (process.env.NODE_ENV === \"development\") {\n useEffect(() => {\n const parent = ele.current?.parentElement\n if (!parent) return\n const style = getComputedStyle(parent)\n if (style.position === \"static\") {\n console.warn(\"AutoFit 组件的父元素的 position 属性不应该是 static\")\n }\n }, [ele.current?.parentElement])\n }\n\n if (!show) return <div ref={ele} style={{ display: \"none\" }} />\n\n return (\n <div\n ref={ele}\n className={clsx(\n css`\n position: absolute;\n transform: var(--transform);\n transform-origin: top left;\n width: var(--width);\n height: var(--height);\n `,\n className,\n )}\n style={transformCSSVariable({ transform, width, height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"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"}
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
 
3
- import { css } from "@emotion/css";
4
3
  import { useSize } from "ahooks";
5
4
  import { clsx, getArray } from "deepsea-tools";
6
5
  import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
6
+ import { css } from "@emotion/css";
7
7
  import { px, transformCSSVariable } from "../utils";
8
8
  import { Scroll } from "./Scroll";
9
9
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -1 +1 @@
1
- {"version":3,"names":["css","useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","px","transformCSSVariable","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport { CSSProperties, forwardRef, MouseEvent as ReactMouseEvent, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\nimport { px, transformCSSVariable } from \"../utils\"\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n /** 轮播元素的个数 */\n count: number\n\n /** 轮播元素的高度 */\n itemHeight: number\n\n /**\n * 轮播动画的时间,单位毫秒\n * @default 1000\n */\n animation?: number\n\n /**\n * 每个元素的停留时间,单位毫秒\n * @default 3000\n */\n duration?: number\n\n /**\n * 元素之间的间距\n * @default 0\n */\n gap?: number\n\n /** 容器类名 */\n containerClassName?: string\n\n /** 容器样式 */\n containerStyle?: CSSProperties\n\n /**\n * 在鼠标移入时是否继续播放\n * @default false\n */\n playOnMouseEnter?: boolean\n\n /**\n * 是否暂停\n * @default false\n */\n paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n const {\n count,\n itemHeight,\n animation = 1000,\n duration = 3000,\n onMouseEnter,\n onMouseLeave,\n gap = 0,\n containerClassName,\n containerStyle,\n children,\n playOnMouseEnter,\n scrollbar,\n paused,\n ...rest\n } = props\n const bar = useRef<Scrollbar | null>(null)\n const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n const ele = useRef<HTMLDivElement>(null)\n const size = useSize(ele)\n const pausedRef = useRef(false)\n const pausedProps = useRef(paused)\n pausedProps.current = paused\n\n useImperativeHandle(ref, () => ele.current!, [])\n useImperativeHandle(scrollbar, () => bar.current!, [])\n\n useEffect(() => {\n if (playOnMouseEnter) pausedRef.current = false\n }, [playOnMouseEnter])\n\n useEffect(() => {\n if (!size || count === 0) return\n const { height } = size\n const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n const scrollHeight = range[range.length - 1]\n if (height >= scrollHeight) return\n function scroll(target: number) {\n clearTimeout(timeout.current)\n timeout.current = setTimeout(() => {\n if (pausedRef.current || pausedProps.current) return scroll(target)\n bar.current?.scrollTo(0, target, animation)\n }, duration)\n }\n scroll(range[0])\n function listener(status: ScrollStatus) {\n const { y } = status.offset\n const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n const target = scrollToBottom ? 0 : range.find(item => item > y)!\n scroll(target)\n }\n bar.current?.addListener(listener)\n return () => {\n clearTimeout(timeout.current)\n bar.current?.removeListener(listener)\n bar.current?.scrollTo(0, 0)\n }\n }, [size, count, itemHeight, gap, duration, animation])\n\n function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = true\n onMouseEnter?.(e)\n }\n\n function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = false\n onMouseLeave?.(e)\n }\n\n return (\n <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n <div\n className={clsx(\n css`\n display: flex;\n flex-direction: column;\n gap: var(--gap, 0);\n & > * {\n flex: none;\n }\n `,\n containerClassName,\n )}\n style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n >\n {children}\n </div>\n </Scroll>\n )\n})\n"],"mappings":"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"}
1
+ {"version":3,"names":["useSize","clsx","getArray","forwardRef","useEffect","useImperativeHandle","useRef","css","px","transformCSSVariable","Scroll","jsx","_jsx","AutoScroll","props","ref","count","itemHeight","animation","duration","onMouseEnter","onMouseLeave","gap","containerClassName","containerStyle","children","playOnMouseEnter","scrollbar","paused","rest","bar","timeout","undefined","ele","size","pausedRef","pausedProps","current","height","range","index","scrollHeight","length","scroll","target","clearTimeout","setTimeout","scrollTo","listener","status","y","offset","scrollToBottom","Math","abs","find","item","addListener","removeListener","onContainerMouseEnter","e","onContainerMouseLeave","className","style"],"sources":["../../../src/components/AutoScroll.tsx"],"sourcesContent":["\"use client\"\n\nimport { useSize } from \"ahooks\"\nimport { clsx, getArray } from \"deepsea-tools\"\nimport { CSSProperties, MouseEvent as ReactMouseEvent, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\nimport Scrollbar from \"smooth-scrollbar\"\nimport { ScrollStatus } from \"smooth-scrollbar/interfaces/scrollbar\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"../utils\"\nimport { Scroll, ScrollProps } from \"./Scroll\"\n\nexport interface AutoScrollProps extends ScrollProps {\n /** 轮播元素的个数 */\n count: number\n\n /** 轮播元素的高度 */\n itemHeight: number\n\n /**\n * 轮播动画的时间,单位毫秒\n * @default 1000\n */\n animation?: number\n\n /**\n * 每个元素的停留时间,单位毫秒\n * @default 3000\n */\n duration?: number\n\n /**\n * 元素之间的间距\n * @default 0\n */\n gap?: number\n\n /** 容器类名 */\n containerClassName?: string\n\n /** 容器样式 */\n containerStyle?: CSSProperties\n\n /**\n * 在鼠标移入时是否继续播放\n * @default false\n */\n playOnMouseEnter?: boolean\n\n /**\n * 是否暂停\n * @default false\n */\n paused?: boolean\n}\n\nexport const AutoScroll = forwardRef<HTMLDivElement, AutoScrollProps>((props, ref) => {\n const {\n count,\n itemHeight,\n animation = 1000,\n duration = 3000,\n onMouseEnter,\n onMouseLeave,\n gap = 0,\n containerClassName,\n containerStyle,\n children,\n playOnMouseEnter,\n scrollbar,\n paused,\n ...rest\n } = props\n const bar = useRef<Scrollbar | null>(null)\n const timeout = useRef<NodeJS.Timeout | undefined>(undefined)\n const ele = useRef<HTMLDivElement>(null)\n const size = useSize(ele)\n const pausedRef = useRef(false)\n const pausedProps = useRef(paused)\n pausedProps.current = paused\n\n useImperativeHandle(ref, () => ele.current!, [])\n useImperativeHandle(scrollbar, () => bar.current!, [])\n\n useEffect(() => {\n if (playOnMouseEnter) pausedRef.current = false\n }, [playOnMouseEnter])\n\n useEffect(() => {\n if (!size || count === 0) return\n const { height } = size\n const range = getArray(count, index => (itemHeight + gap) * (index + 1) - (index === count - 1 ? gap : 0))\n const scrollHeight = range[range.length - 1]\n if (height >= scrollHeight) return\n function scroll(target: number) {\n clearTimeout(timeout.current)\n timeout.current = setTimeout(() => {\n if (pausedRef.current || pausedProps.current) return scroll(target)\n bar.current?.scrollTo(0, target, animation)\n }, duration)\n }\n scroll(range[0])\n function listener(status: ScrollStatus) {\n const { y } = status.offset\n const scrollToBottom = Math.abs(y + height - scrollHeight) / itemHeight <= 0.05\n const target = scrollToBottom ? 0 : range.find(item => item > y)!\n scroll(target)\n }\n bar.current?.addListener(listener)\n return () => {\n clearTimeout(timeout.current)\n bar.current?.removeListener(listener)\n bar.current?.scrollTo(0, 0)\n }\n }, [size, count, itemHeight, gap, duration, animation])\n\n function onContainerMouseEnter(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = true\n onMouseEnter?.(e)\n }\n\n function onContainerMouseLeave(e: ReactMouseEvent<HTMLDivElement, MouseEvent>) {\n if (playOnMouseEnter) return\n pausedRef.current = false\n onMouseLeave?.(e)\n }\n\n return (\n <Scroll ref={ele} scrollbar={bar} onMouseEnter={onContainerMouseEnter} onMouseLeave={onContainerMouseLeave} {...rest}>\n <div\n className={clsx(\n css`\n display: flex;\n flex-direction: column;\n gap: var(--gap, 0);\n & > * {\n flex: none;\n }\n `,\n containerClassName,\n )}\n style={transformCSSVariable({ gap: px(gap) }, containerStyle)}\n >\n {children}\n </div>\n </Scroll>\n )\n})\n"],"mappings":"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"}
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
 
3
- import { css } from "@emotion/css";
4
3
  import { clsx } from "deepsea-tools";
5
4
  import { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
5
+ import { css } from "@emotion/css";
6
6
  import { px, transformCSSVariable } from "../utils";
7
7
 
8
8
  /**
@@ -1 +1 @@
1
- {"version":3,"names":["css","clsx","forwardRef","useImperativeHandle","useLayoutEffect","useRef","useState","px","transformCSSVariable","jsx","_jsx","AutoSizeTextArea","props","ref","className","style","rest","height","setHeight","undefined","ele","current","textarea","resizeTextarea","scrollHeight","offsetHeight","clientHeight","addEventListener","removeEventListener"],"sources":["../../../src/components/AutoSizeTextarea.tsx"],"sourcesContent":["\"use client\"\n\nimport { css } from \"@emotion/css\"\nimport { clsx } from \"deepsea-tools\"\nimport { forwardRef, TextareaHTMLAttributes, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\nimport { px, transformCSSVariable } from \"../utils\"\n\n/**\n * 自适应高度的文本域\n */\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\n const { className, style, ...rest } = props\n const [height, setHeight] = useState<string | undefined>(undefined)\n const ele = useRef<HTMLTextAreaElement>(null)\n\n useImperativeHandle(ref, () => ele.current!, [])\n\n useLayoutEffect(() => {\n const textarea = ele.current!\n function resizeTextarea() {\n setHeight(\"auto\")\n setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))\n }\n resizeTextarea()\n textarea.addEventListener(\"input\", resizeTextarea)\n textarea.addEventListener(\"change\", resizeTextarea)\n\n return () => {\n textarea.removeEventListener(\"input\", resizeTextarea)\n textarea.removeEventListener(\"change\", resizeTextarea)\n }\n }, [])\n\n return (\n <textarea\n ref={ele}\n className={clsx(\n css`\n height: var(--height);\n resize: none;\n overflow-y: hidden;\n `,\n className,\n )}\n style={transformCSSVariable({ height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,GAAG,QAAQ,cAAc;AAClC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAASC,UAAU,EAA0BC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAClH,SAASC,EAAE,EAAEC,oBAAoB;;AAEjC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAGA,OAAO,MAAMC,gBAAgB,gBAAGT,UAAU,CAAmE,CAACU,KAAK,EAAEC,GAAG,KAAK;EACzH,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC3C,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGZ,QAAQ,CAAqBa,SAAS,CAAC;EACnE,MAAMC,GAAG,GAAGf,MAAM,CAAsB,IAAI,CAAC;EAE7CF,mBAAmB,CAACU,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,EAAE,CAAC;EAEhDjB,eAAe,CAAC,MAAM;IAClB,MAAMkB,QAAQ,GAAGF,GAAG,CAACC,OAAQ;IAC7B,SAASE,cAAcA,CAAA,EAAG;MACtBL,SAAS,CAAC,MAAM,CAAC;MACjBA,SAAS,CAACX,EAAE,CAACe,QAAQ,CAACE,YAAY,GAAGF,QAAQ,CAACG,YAAY,GAAGH,QAAQ,CAACI,YAAY,CAAC,CAAC;IACxF;IACAH,cAAc,CAAC,CAAC;IAChBD,QAAQ,CAACK,gBAAgB,CAAC,OAAO,EAAEJ,cAAc,CAAC;IAClDD,QAAQ,CAACK,gBAAgB,CAAC,QAAQ,EAAEJ,cAAc,CAAC;IAEnD,OAAO,MAAM;MACTD,QAAQ,CAACM,mBAAmB,CAAC,OAAO,EAAEL,cAAc,CAAC;MACrDD,QAAQ,CAACM,mBAAmB,CAAC,QAAQ,EAAEL,cAAc,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIb,IAAA;IACIG,GAAG,EAAEO,GAAI;IACTN,SAAS,EAAEb,IAAI,CACXD,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDc,SACJ,CAAE;IACFC,KAAK,EAAEP,oBAAoB,CAAC;MAAES;IAAO,CAAC,EAAEF,KAAK,CAAE;IAAA,GAC3CC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
1
+ {"version":3,"names":["clsx","forwardRef","useImperativeHandle","useLayoutEffect","useRef","useState","css","px","transformCSSVariable","jsx","_jsx","AutoSizeTextArea","props","ref","className","style","rest","height","setHeight","undefined","ele","current","textarea","resizeTextarea","scrollHeight","offsetHeight","clientHeight","addEventListener","removeEventListener"],"sources":["../../../src/components/AutoSizeTextarea.tsx"],"sourcesContent":["\"use client\"\n\nimport { clsx } from \"deepsea-tools\"\nimport { TextareaHTMLAttributes, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from \"react\"\n\nimport { css } from \"@emotion/css\"\nimport { px, transformCSSVariable } from \"../utils\"\n\n/**\n * 自适应高度的文本域\n */\nexport const AutoSizeTextArea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>((props, ref) => {\n const { className, style, ...rest } = props\n const [height, setHeight] = useState<string | undefined>(undefined)\n const ele = useRef<HTMLTextAreaElement>(null)\n\n useImperativeHandle(ref, () => ele.current!, [])\n\n useLayoutEffect(() => {\n const textarea = ele.current!\n function resizeTextarea() {\n setHeight(\"auto\")\n setHeight(px(textarea.scrollHeight + textarea.offsetHeight - textarea.clientHeight))\n }\n resizeTextarea()\n textarea.addEventListener(\"input\", resizeTextarea)\n textarea.addEventListener(\"change\", resizeTextarea)\n\n return () => {\n textarea.removeEventListener(\"input\", resizeTextarea)\n textarea.removeEventListener(\"change\", resizeTextarea)\n }\n }, [])\n\n return (\n <textarea\n ref={ele}\n className={clsx(\n css`\n height: var(--height);\n resize: none;\n overflow-y: hidden;\n `,\n className,\n )}\n style={transformCSSVariable({ height }, style)}\n {...rest}\n />\n )\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,IAAI,QAAQ,eAAe;AACpC,SAAiCC,UAAU,EAAEC,mBAAmB,EAAEC,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAElH,SAASC,GAAG,QAAQ,cAAc;AAClC,SAASC,EAAE,EAAEC,oBAAoB;;AAEjC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAGA,OAAO,MAAMC,gBAAgB,gBAAGV,UAAU,CAAmE,CAACW,KAAK,EAAEC,GAAG,KAAK;EACzH,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC3C,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAGb,QAAQ,CAAqBc,SAAS,CAAC;EACnE,MAAMC,GAAG,GAAGhB,MAAM,CAAsB,IAAI,CAAC;EAE7CF,mBAAmB,CAACW,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,EAAE,CAAC;EAEhDlB,eAAe,CAAC,MAAM;IAClB,MAAMmB,QAAQ,GAAGF,GAAG,CAACC,OAAQ;IAC7B,SAASE,cAAcA,CAAA,EAAG;MACtBL,SAAS,CAAC,MAAM,CAAC;MACjBA,SAAS,CAACX,EAAE,CAACe,QAAQ,CAACE,YAAY,GAAGF,QAAQ,CAACG,YAAY,GAAGH,QAAQ,CAACI,YAAY,CAAC,CAAC;IACxF;IACAH,cAAc,CAAC,CAAC;IAChBD,QAAQ,CAACK,gBAAgB,CAAC,OAAO,EAAEJ,cAAc,CAAC;IAClDD,QAAQ,CAACK,gBAAgB,CAAC,QAAQ,EAAEJ,cAAc,CAAC;IAEnD,OAAO,MAAM;MACTD,QAAQ,CAACM,mBAAmB,CAAC,OAAO,EAAEL,cAAc,CAAC;MACrDD,QAAQ,CAACM,mBAAmB,CAAC,QAAQ,EAAEL,cAAc,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIb,IAAA;IACIG,GAAG,EAAEO,GAAI;IACTN,SAAS,EAAEd,IAAI,CACXM,GAAI;AACpB;AACA;AACA;AACA,iBAAiB,EACDQ,SACJ,CAAE;IACFC,KAAK,EAAEP,oBAAoB,CAAC;MAAES;IAAO,CAAC,EAAEF,KAAK,CAAE;IAAA,GAC3CC;EAAI,CACX,CAAC;AAEV,CAAC,CAAC"}
@@ -1,5 +1,3 @@
1
- "use client";
2
-
3
1
  import { Fragment } from "react";
4
2
  import { jsx as _jsx } from "react/jsx-runtime";
5
3
  /** 环形文字 */
@@ -1 +1 @@
1
- {"version":3,"names":["Fragment","jsx","_jsx","CircleText","props","width","height","radius","startAngel","gapAngel","align","style","direction","reverse","separator","children","rest","unitAngle","Math","atan","totalAngle","length","offsetAngle","getTransform","idx","angle","x","cos","y","sin","z","PI","words","split","map","w","position","transform","textAlign","lineHeight"],"sources":["../../../src/components/CircleText.tsx"],"sourcesContent":["\"use client\"\n\nimport { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n /** 每一个方块的宽度 */\n width: number\n /** 每一个方块的高度 */\n height: number\n /** 圆弧的半径,不包含方块的高度 */\n radius: number\n /** 开始旋转的弧度,逆时针增加,0 为 x 轴方向 */\n startAngel?: number\n /** 每一个方块之间间隔的弧度 */\n gapAngel?: number\n /** 文字对齐的方式,默认居中 */\n align?: \"left\" | \"center\" | \"right\"\n /** 文字朝向圆心还是外侧,默认外侧 */\n direction?: \"inner\" | \"outer\"\n /** 是否反转文字顺序 */\n reverse?: boolean\n /** 分割文字的方法 */\n separator?: string | RegExp | ((text: string) => string[])\n /** 显示的文字 */\n children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n const {\n width,\n height,\n radius,\n startAngel = 0,\n gapAngel = 0,\n align = \"center\",\n style,\n direction = \"outer\",\n reverse = false,\n separator,\n children,\n ...rest\n } = props\n const unitAngle = Math.atan(width / 2 / radius) * 2\n const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n function getTransform(idx: number) {\n const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n const x = (radius + height / 2) * Math.cos(angle) - width / 2\n const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n }\n\n const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n if (reverse) words.reverse()\n\n return (\n <Fragment>\n {words.map((w, idx) => (\n <span\n key={idx}\n style={{\n position: \"absolute\",\n ...style,\n transform: getTransform(idx),\n textAlign: \"center\",\n width,\n lineHeight: `${height}px`,\n height: height,\n }}\n {...rest}\n >\n {w}\n </span>\n ))}\n </Fragment>\n )\n}\n"],"mappings":"AAAA,YAAY;;AAEZ,SAAaA,QAAQ,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBpD;AACA,OAAO,MAAMC,UAA+B,GAAGC,KAAK,IAAI;EACpD,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,UAAU,GAAG,CAAC;IACdC,QAAQ,GAAG,CAAC;IACZC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,OAAO,GAAG,KAAK;IACfC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACP,CAAC,GAAGZ,KAAK;EACT,MAAMa,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACd,KAAK,GAAG,CAAC,GAAGE,MAAM,CAAC,GAAG,CAAC;EACnD,MAAMa,UAAU,GAAG,CAACH,SAAS,GAAGR,QAAQ,IAAIM,QAAQ,CAACM,MAAM,GAAGZ,QAAQ;EACtE,MAAMa,WAAW,GAAGZ,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGA,KAAK,KAAK,OAAO,GAAGU,UAAU,GAAGA,UAAU,GAAG,CAAC;EAE1F,SAASG,YAAYA,CAACC,GAAW,EAAE;IAC/B,MAAMC,KAAK,GAAGjB,UAAU,GAAGgB,GAAG,IAAIP,SAAS,GAAGR,QAAQ,CAAC,GAAGa,WAAW,GAAGL,SAAS,GAAG,CAAC;IACrF,MAAMS,CAAC,GAAG,CAACnB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACS,GAAG,CAACF,KAAK,CAAC,GAAGpB,KAAK,GAAG,CAAC;IAC7D,MAAMuB,CAAC,GAAG,CAACrB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACW,GAAG,CAACJ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGnB,MAAM,GAAG,CAAC;IACnE,MAAMwB,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAG,CAAC,GAAGN,KAAK,IAAIb,SAAS,KAAK,OAAO,GAAGM,IAAI,CAACa,EAAE,GAAG,CAAC,CAAC;IACrE,OAAQ,cAAaL,CAAE,kBAAiBE,CAAE,eAAeE,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAI,GAAI,MAAK;EACrF;EAEA,MAAMC,KAAK,GAAG,OAAOlB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACC,QAAQ,CAAC,GAAGA,QAAQ,CAACkB,KAAK,CAACnB,SAAS,IAAI,EAAE,CAAC;EAErG,IAAID,OAAO,EAAEmB,KAAK,CAACnB,OAAO,CAAC,CAAC;EAE5B,oBACIX,IAAA,CAACF,QAAQ;IAAAe,QAAA,EACJiB,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,EAAEX,GAAG,kBACdtB,IAAA;MAEIS,KAAK,EAAE;QACHyB,QAAQ,EAAE,UAAU;QACpB,GAAGzB,KAAK;QACR0B,SAAS,EAAEd,YAAY,CAACC,GAAG,CAAC;QAC5Bc,SAAS,EAAE,QAAQ;QACnBjC,KAAK;QACLkC,UAAU,EAAG,GAAEjC,MAAO,IAAG;QACzBA,MAAM,EAAEA;MACZ,CAAE;MAAA,GACEU,IAAI;MAAAD,QAAA,EAEPoB;IAAC,GAZGX,GAaH,CACT;EAAC,CACI,CAAC;AAEnB,CAAC"}
1
+ {"version":3,"names":["Fragment","jsx","_jsx","CircleText","props","width","height","radius","startAngel","gapAngel","align","style","direction","reverse","separator","children","rest","unitAngle","Math","atan","totalAngle","length","offsetAngle","getTransform","idx","angle","x","cos","y","sin","z","PI","words","split","map","w","position","transform","textAlign","lineHeight"],"sources":["../../../src/components/CircleText.tsx"],"sourcesContent":["import { FC, Fragment, HTMLAttributes } from \"react\"\n\nexport interface CircleTextProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n /** 每一个方块的宽度 */\n width: number\n /** 每一个方块的高度 */\n height: number\n /** 圆弧的半径,不包含方块的高度 */\n radius: number\n /** 开始旋转的弧度,逆时针增加,0 为 x 轴方向 */\n startAngel?: number\n /** 每一个方块之间间隔的弧度 */\n gapAngel?: number\n /** 文字对齐的方式,默认居中 */\n align?: \"left\" | \"center\" | \"right\"\n /** 文字朝向圆心还是外侧,默认外侧 */\n direction?: \"inner\" | \"outer\"\n /** 是否反转文字顺序 */\n reverse?: boolean\n /** 分割文字的方法 */\n separator?: string | RegExp | ((text: string) => string[])\n /** 显示的文字 */\n children: string\n}\n\n/** 环形文字 */\nexport const CircleText: FC<CircleTextProps> = props => {\n const {\n width,\n height,\n radius,\n startAngel = 0,\n gapAngel = 0,\n align = \"center\",\n style,\n direction = \"outer\",\n reverse = false,\n separator,\n children,\n ...rest\n } = props\n const unitAngle = Math.atan(width / 2 / radius) * 2\n const totalAngle = (unitAngle + gapAngel) * children.length - gapAngel\n const offsetAngle = align === \"left\" ? 0 : align === \"right\" ? totalAngle : totalAngle / 2\n\n function getTransform(idx: number) {\n const angle = startAngel - idx * (unitAngle + gapAngel) + offsetAngle - unitAngle / 2\n const x = (radius + height / 2) * Math.cos(angle) - width / 2\n const y = (radius + height / 2) * Math.sin(angle) * -1 - height / 2\n const z = Math.PI / 2 - angle + (direction === \"inner\" ? Math.PI : 0)\n return `translateX(${x}px) translateY(${y}px) rotateZ(${(z / Math.PI) * 180}deg)`\n }\n\n const words = typeof separator === \"function\" ? separator(children) : children.split(separator ?? \"\")\n\n if (reverse) words.reverse()\n\n return (\n <Fragment>\n {words.map((w, idx) => (\n <span\n key={idx}\n style={{\n position: \"absolute\",\n ...style,\n transform: getTransform(idx),\n textAlign: \"center\",\n width,\n lineHeight: `${height}px`,\n height: height,\n }}\n {...rest}\n >\n {w}\n </span>\n ))}\n </Fragment>\n )\n}\n"],"mappings":"AAAA,SAAaA,QAAQ,QAAwB,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyBpD;AACA,OAAO,MAAMC,UAA+B,GAAGC,KAAK,IAAI;EACpD,MAAM;IACFC,KAAK;IACLC,MAAM;IACNC,MAAM;IACNC,UAAU,GAAG,CAAC;IACdC,QAAQ,GAAG,CAAC;IACZC,KAAK,GAAG,QAAQ;IAChBC,KAAK;IACLC,SAAS,GAAG,OAAO;IACnBC,OAAO,GAAG,KAAK;IACfC,SAAS;IACTC,QAAQ;IACR,GAAGC;EACP,CAAC,GAAGZ,KAAK;EACT,MAAMa,SAAS,GAAGC,IAAI,CAACC,IAAI,CAACd,KAAK,GAAG,CAAC,GAAGE,MAAM,CAAC,GAAG,CAAC;EACnD,MAAMa,UAAU,GAAG,CAACH,SAAS,GAAGR,QAAQ,IAAIM,QAAQ,CAACM,MAAM,GAAGZ,QAAQ;EACtE,MAAMa,WAAW,GAAGZ,KAAK,KAAK,MAAM,GAAG,CAAC,GAAGA,KAAK,KAAK,OAAO,GAAGU,UAAU,GAAGA,UAAU,GAAG,CAAC;EAE1F,SAASG,YAAYA,CAACC,GAAW,EAAE;IAC/B,MAAMC,KAAK,GAAGjB,UAAU,GAAGgB,GAAG,IAAIP,SAAS,GAAGR,QAAQ,CAAC,GAAGa,WAAW,GAAGL,SAAS,GAAG,CAAC;IACrF,MAAMS,CAAC,GAAG,CAACnB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACS,GAAG,CAACF,KAAK,CAAC,GAAGpB,KAAK,GAAG,CAAC;IAC7D,MAAMuB,CAAC,GAAG,CAACrB,MAAM,GAAGD,MAAM,GAAG,CAAC,IAAIY,IAAI,CAACW,GAAG,CAACJ,KAAK,CAAC,GAAG,CAAC,CAAC,GAAGnB,MAAM,GAAG,CAAC;IACnE,MAAMwB,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAG,CAAC,GAAGN,KAAK,IAAIb,SAAS,KAAK,OAAO,GAAGM,IAAI,CAACa,EAAE,GAAG,CAAC,CAAC;IACrE,OAAQ,cAAaL,CAAE,kBAAiBE,CAAE,eAAeE,CAAC,GAAGZ,IAAI,CAACa,EAAE,GAAI,GAAI,MAAK;EACrF;EAEA,MAAMC,KAAK,GAAG,OAAOlB,SAAS,KAAK,UAAU,GAAGA,SAAS,CAACC,QAAQ,CAAC,GAAGA,QAAQ,CAACkB,KAAK,CAACnB,SAAS,IAAI,EAAE,CAAC;EAErG,IAAID,OAAO,EAAEmB,KAAK,CAACnB,OAAO,CAAC,CAAC;EAE5B,oBACIX,IAAA,CAACF,QAAQ;IAAAe,QAAA,EACJiB,KAAK,CAACE,GAAG,CAAC,CAACC,CAAC,EAAEX,GAAG,kBACdtB,IAAA;MAEIS,KAAK,EAAE;QACHyB,QAAQ,EAAE,UAAU;QACpB,GAAGzB,KAAK;QACR0B,SAAS,EAAEd,YAAY,CAACC,GAAG,CAAC;QAC5Bc,SAAS,EAAE,QAAQ;QACnBjC,KAAK;QACLkC,UAAU,EAAG,GAAEjC,MAAO,IAAG;QACzBA,MAAM,EAAEA;MACZ,CAAE;MAAA,GACEU,IAAI;MAAAD,QAAA,EAEPoB;IAAC,GAZGX,GAaH,CACT;EAAC,CACI,CAAC;AAEnB,CAAC"}
@@ -1,9 +1,13 @@
1
1
  import { Event } from "clipboard";
2
- import { ComponentProps } from "react";
2
+ import { ComponentPropsWithoutRef } from "react";
3
3
  export { Event } from "clipboard";
4
- export type CopyButtonProps = ComponentProps<"button"> & {
4
+ export type CopyButtonProps = ComponentPropsWithoutRef<"button"> & {
5
5
  text?: string;
6
6
  onCopySuccess?: (e: Event) => void;
7
7
  onCopyError?: (e: Event) => void;
8
8
  };
9
- export declare const CopyButton: import("react").ForwardRefExoticComponent<Omit<CopyButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
9
+ export declare const CopyButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
10
+ text?: string | undefined;
11
+ onCopySuccess?: ((e: Event) => void) | undefined;
12
+ onCopyError?: ((e: Event) => void) | undefined;
13
+ } & import("react").RefAttributes<HTMLButtonElement>>;
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { useLatest } from "ahooks";
2
4
  import ClipboardJS from "clipboard";
3
5
  import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
@@ -1 +1 @@
1
- {"version":3,"names":["useLatest","ClipboardJS","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["import { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentProps<\"button\"> & {\n text?: string\n onCopySuccess?: (e: Event) => void\n onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n const ele = useRef<HTMLButtonElement>(null)\n const onCopySuccess = useLatest(_onCoptSuccess)\n const onCopyError = useLatest(_onCopyError)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n useEffect(() => {\n const clipboard = new ClipboardJS(ele.current!)\n clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n clipboard.on(\"error\", event => onCopyError.current?.(event))\n return () => clipboard.destroy()\n }, [])\n\n return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,OAAOC,WAAW,MAAiB,WAAW;AAC9C,SAAyBC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAE1F,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGb,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMQ,aAAa,GAAGb,SAAS,CAACc,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGf,SAAS,CAACgB,YAAY,CAAC;EAE3CZ,mBAAmB,CAACO,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DhB,SAAS,CAAC,MAAM;IACZ,MAAMiB,SAAS,GAAG,IAAInB,WAAW,CAACiB,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}
1
+ {"version":3,"names":["useLatest","ClipboardJS","forwardRef","useEffect","useImperativeHandle","useRef","jsx","_jsx","Event","CopyButton","props","ref","text","onCopySuccess","_onCoptSuccess","onCopyError","_onCopyError","rest","ele","current","clipboard","on","event","destroy"],"sources":["../../../src/components/CopyButton.tsx"],"sourcesContent":["\"use client\"\n\nimport { useLatest } from \"ahooks\"\nimport ClipboardJS, { Event } from \"clipboard\"\nimport { ComponentPropsWithoutRef, forwardRef, useEffect, useImperativeHandle, useRef } from \"react\"\n\nexport { Event } from \"clipboard\"\n\nexport type CopyButtonProps = ComponentPropsWithoutRef<\"button\"> & {\n text?: string\n onCopySuccess?: (e: Event) => void\n onCopyError?: (e: Event) => void\n}\n\nexport const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>((props, ref) => {\n const { text, onCopySuccess: _onCoptSuccess, onCopyError: _onCopyError, ...rest } = props\n const ele = useRef<HTMLButtonElement>(null)\n const onCopySuccess = useLatest(_onCoptSuccess)\n const onCopyError = useLatest(_onCopyError)\n\n useImperativeHandle(ref, () => ele.current!, [ele.current])\n\n useEffect(() => {\n const clipboard = new ClipboardJS(ele.current!)\n clipboard.on(\"success\", event => onCopySuccess.current?.(event))\n clipboard.on(\"error\", event => onCopyError.current?.(event))\n return () => clipboard.destroy()\n }, [])\n\n return <button ref={ele} {...rest} data-clipboard-text={text} />\n})\n"],"mappings":"AAAA,YAAY;;AAEZ,SAASA,SAAS,QAAQ,QAAQ;AAClC,OAAOC,WAAW,MAAiB,WAAW;AAC9C,SAAmCC,UAAU,EAAEC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpG,SAASC,KAAK,QAAQ,WAAW;AAQjC,OAAO,MAAMC,UAAU,gBAAGP,UAAU,CAAqC,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACrF,MAAM;IAAEC,IAAI;IAAEC,aAAa,EAAEC,cAAc;IAAEC,WAAW,EAAEC,YAAY;IAAE,GAAGC;EAAK,CAAC,GAAGP,KAAK;EACzF,MAAMQ,GAAG,GAAGb,MAAM,CAAoB,IAAI,CAAC;EAC3C,MAAMQ,aAAa,GAAGb,SAAS,CAACc,cAAc,CAAC;EAC/C,MAAMC,WAAW,GAAGf,SAAS,CAACgB,YAAY,CAAC;EAE3CZ,mBAAmB,CAACO,GAAG,EAAE,MAAMO,GAAG,CAACC,OAAQ,EAAE,CAACD,GAAG,CAACC,OAAO,CAAC,CAAC;EAE3DhB,SAAS,CAAC,MAAM;IACZ,MAAMiB,SAAS,GAAG,IAAInB,WAAW,CAACiB,GAAG,CAACC,OAAQ,CAAC;IAC/CC,SAAS,CAACC,EAAE,CAAC,SAAS,EAAEC,KAAK,IAAIT,aAAa,CAACM,OAAO,GAAGG,KAAK,CAAC,CAAC;IAChEF,SAAS,CAACC,EAAE,CAAC,OAAO,EAAEC,KAAK,IAAIP,WAAW,CAACI,OAAO,GAAGG,KAAK,CAAC,CAAC;IAC5D,OAAO,MAAMF,SAAS,CAACG,OAAO,CAAC,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,oBAAOhB,IAAA;IAAQI,GAAG,EAAEO,GAAI;IAAA,GAAKD,IAAI;IAAE,uBAAqBL;EAAK,CAAE,CAAC;AACpE,CAAC,CAAC"}
@@ -1,9 +1,9 @@
1
1
  import { BarSeriesOption, ComposeOption, DatasetComponentOption, ECharts, GridComponentOption, LineSeriesOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from "echarts";
2
- import { ComponentProps, ForwardedRef, ForwardRefExoticComponent, RefAttributes } from "react";
2
+ import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ForwardedRef, RefAttributes } from "react";
3
3
  export type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
4
4
  export type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
5
5
  export type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>;
6
- export interface EchartProps<T extends any = any> extends Omit<ComponentProps<"div">, "children"> {
6
+ export interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
7
7
  width: number;
8
8
  height: number;
9
9
  option: T;
@@ -1,3 +1,5 @@
1
+ "use client";
2
+
1
3
  import { init } from "echarts";
2
4
  import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef } from "react";
3
5
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -1 +1 @@
1
- {"version":3,"names":["init","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["import {\n BarSeriesOption,\n ComposeOption,\n DatasetComponentOption,\n ECharts,\n GridComponentOption,\n init,\n LineSeriesOption,\n PieSeriesOption,\n TitleComponentOption,\n TooltipComponentOption,\n} from \"echarts\"\nimport {\n ComponentProps,\n ForwardedRef,\n forwardRef,\n ForwardRefExoticComponent,\n RefAttributes,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n} from \"react\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentProps<\"div\">, \"children\"> {\n width: number\n height: number\n option: T\n chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n const { width, height, option, chart, ...rest } = props\n const container = useRef<HTMLDivElement>(null)\n const chartRef = useRef<ECharts | null>(null)\n\n useLayoutEffect(() => {\n const ele = container.current!\n chartRef.current = init(ele, option, { width, height })\n return () => chartRef.current?.dispose()\n }, [])\n\n useImperativeHandle(ref, () => container.current!, [])\n\n useImperativeHandle(chart, () => chartRef.current!, [])\n\n useEffect(() => {\n chartRef.current?.setOption(option)\n chartRef.current?.resize({ width, height })\n })\n\n return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],"mappings":"AAAA,SAMIA,IAAI,QAKD,SAAS;AAChB,SAGIC,UAAU,EAGVC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,MAAM,QACH,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBd,MAAMC,MAAM,gBAAGP,UAAU,CAA8B,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMY,QAAQ,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMc,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGnB,IAAI,CAACkB,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CAACO,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDhB,mBAAmB,CAACW,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDjB,SAAS,CAAC,MAAM;IACZe,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}
1
+ {"version":3,"names":["init","forwardRef","useEffect","useImperativeHandle","useLayoutEffect","useRef","jsx","_jsx","Echart","props","ref","width","height","option","chart","rest","container","chartRef","ele","current","dispose","setOption","resize","Pie","Bar","Line"],"sources":["../../../src/components/Echart.tsx"],"sourcesContent":["\"use client\"\n\nimport {\n BarSeriesOption,\n ComposeOption,\n DatasetComponentOption,\n ECharts,\n GridComponentOption,\n LineSeriesOption,\n PieSeriesOption,\n TitleComponentOption,\n TooltipComponentOption,\n init,\n} from \"echarts\"\nimport {\n ComponentPropsWithoutRef,\n ForwardRefExoticComponent,\n ForwardedRef,\n RefAttributes,\n forwardRef,\n useEffect,\n useImperativeHandle,\n useLayoutEffect,\n useRef,\n} from \"react\"\n\nexport type PieOption = ComposeOption<PieSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type BarOption = ComposeOption<BarSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport type LineOption = ComposeOption<LineSeriesOption | TitleComponentOption | DatasetComponentOption | GridComponentOption | TooltipComponentOption>\n\nexport interface EchartProps<T extends any = any> extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n width: number\n height: number\n option: T\n chart?: ForwardedRef<ECharts>\n}\n\nexport type EchartComponent<T extends PieOption | BarOption | LineOption> = ForwardRefExoticComponent<\n Omit<EchartProps<T>, \"ref\"> & RefAttributes<HTMLDivElement>\n>\n\nconst Echart = forwardRef<HTMLDivElement, EchartProps>((props, ref) => {\n const { width, height, option, chart, ...rest } = props\n const container = useRef<HTMLDivElement>(null)\n const chartRef = useRef<ECharts | null>(null)\n\n useLayoutEffect(() => {\n const ele = container.current!\n chartRef.current = init(ele, option, { width, height })\n return () => chartRef.current?.dispose()\n }, [])\n\n useImperativeHandle(ref, () => container.current!, [])\n\n useImperativeHandle(chart, () => chartRef.current!, [])\n\n useEffect(() => {\n chartRef.current?.setOption(option)\n chartRef.current?.resize({ width, height })\n })\n\n return <div ref={container} {...rest} />\n})\n\nexport const Pie = Echart as EchartComponent<PieOption>\nexport const Bar = Echart as EchartComponent<BarOption>\nexport const Line = Echart as EchartComponent<LineOption>\n"],"mappings":"AAAA,YAAY;;AAEZ,SAUIA,IAAI,QACD,SAAS;AAChB,SAKIC,UAAU,EACVC,SAAS,EACTC,mBAAmB,EACnBC,eAAe,EACfC,MAAM,QACH,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBd,MAAMC,MAAM,gBAAGP,UAAU,CAA8B,CAACQ,KAAK,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAE,GAAGC;EAAK,CAAC,GAAGN,KAAK;EACvD,MAAMO,SAAS,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAC9C,MAAMY,QAAQ,GAAGZ,MAAM,CAAiB,IAAI,CAAC;EAE7CD,eAAe,CAAC,MAAM;IAClB,MAAMc,GAAG,GAAGF,SAAS,CAACG,OAAQ;IAC9BF,QAAQ,CAACE,OAAO,GAAGnB,IAAI,CAACkB,GAAG,EAAEL,MAAM,EAAE;MAAEF,KAAK;MAAEC;IAAO,CAAC,CAAC;IACvD,OAAO,MAAMK,QAAQ,CAACE,OAAO,EAAEC,OAAO,CAAC,CAAC;EAC5C,CAAC,EAAE,EAAE,CAAC;EAENjB,mBAAmB,CAACO,GAAG,EAAE,MAAMM,SAAS,CAACG,OAAQ,EAAE,EAAE,CAAC;EAEtDhB,mBAAmB,CAACW,KAAK,EAAE,MAAMG,QAAQ,CAACE,OAAQ,EAAE,EAAE,CAAC;EAEvDjB,SAAS,CAAC,MAAM;IACZe,QAAQ,CAACE,OAAO,EAAEE,SAAS,CAACR,MAAM,CAAC;IACnCI,QAAQ,CAACE,OAAO,EAAEG,MAAM,CAAC;MAAEX,KAAK;MAAEC;IAAO,CAAC,CAAC;EAC/C,CAAC,CAAC;EAEF,oBAAOL,IAAA;IAAKG,GAAG,EAAEM,SAAU;IAAA,GAAKD;EAAI,CAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,OAAO,MAAMQ,GAAG,GAAGf,MAAoC;AACvD,OAAO,MAAMgB,GAAG,GAAGhB,MAAoC;AACvD,OAAO,MAAMiB,IAAI,GAAGjB,MAAqC"}
@@ -83,4 +83,4 @@ export interface ManualFlowProps<T> extends FlowProps<T> {
83
83
  /** 手动组件,由外界指定宽度,性能更好 */
84
84
  export declare function ManualFlow<T>(props: ManualFlowProps<T>): import("react/jsx-runtime").JSX.Element;
85
85
  /** 自适应浮动组件 */
86
- export declare function Flow<T>(props: FlowProps<T>): import("react/jsx-runtime").JSX.Element;
86
+ export declare function Flow<T>(props: FlowProps<T>): ReactNode;
@@ -1,9 +1,9 @@
1
1
  "use client";
2
2
 
3
- import { css } from "@emotion/css";
4
3
  import { useSize } from "ahooks";
5
4
  import { clsx } from "deepsea-tools";
6
5
  import { useEffect, useImperativeHandle, useRef, useState } from "react";
6
+ import { css } from "@emotion/css";
7
7
  import { px, transformCSSVariable } from "../utils";
8
8
  import { jsx as _jsx } from "react/jsx-runtime";
9
9
  export function getGapRange(gap) {