aldehyde 0.2.514 → 0.2.516

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 (144) hide show
  1. package/lib/controls/direct-file-view/index.d.ts +1 -1
  2. package/lib/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
  3. package/lib/detail/button/cquery-button-bar.d.ts +1 -1
  4. package/lib/detail/rightbar/index.d.ts +1 -1
  5. package/lib/draw-canvas-edit/components/asset-bar/index.js +3 -3
  6. package/lib/draw-canvas-edit/components/asset-bar/index.js.map +1 -1
  7. package/lib/draw-canvas-edit/components/asset-bar/index.less +35 -35
  8. package/lib/draw-canvas-edit/components/main-header/index.less +23 -23
  9. package/lib/form/field-group-form.d.ts +1 -1
  10. package/lib/index.d.ts +2 -1
  11. package/lib/index.d.ts.map +1 -1
  12. package/lib/index.js +2 -1
  13. package/lib/index.js.map +1 -1
  14. package/lib/layout/menu/l2menu-message-bar.d.ts +1 -1
  15. package/lib/layout2/page.d.ts.map +1 -1
  16. package/lib/layout2/page.js +3 -0
  17. package/lib/layout2/page.js.map +1 -1
  18. package/lib/layout3/css/main.less +17 -17
  19. package/lib/layout4/css/main.less +18 -17
  20. package/lib/locale/LocaleProvider.d.ts.map +1 -1
  21. package/lib/locale/LocaleProvider.js +4 -2
  22. package/lib/locale/LocaleProvider.js.map +1 -1
  23. package/lib/lowcode-components/base-table/index.less +61 -61
  24. package/lib/lowcode-components/data-number/index.less +10 -10
  25. package/lib/lowcode-components/date-time/index.less +4 -4
  26. package/lib/lowcode-components/four-angle-glow-border/index.less +49 -49
  27. package/lib/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  28. package/lib/lowcode-components/lowcode-view/component/group-layer/index.d.ts +1 -1
  29. package/lib/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  30. package/lib/lowcode-components/text-scroller/index.less +28 -28
  31. package/lib/module/index.less +6 -0
  32. package/lib/module/ltmpl-table.d.ts +3 -0
  33. package/lib/module/ltmpl-table.d.ts.map +1 -1
  34. package/lib/module/ltmpl-table.js +2 -2
  35. package/lib/module/ltmpl-table.js.map +1 -1
  36. package/lib/module/ttmpl-table.d.ts +41 -0
  37. package/lib/module/ttmpl-table.d.ts.map +1 -0
  38. package/lib/module/ttmpl-table.js +188 -0
  39. package/lib/module/ttmpl-table.js.map +1 -0
  40. package/lib/routable/index.less +6 -0
  41. package/lib/routable/ttmpl-table-route.d.ts +12 -0
  42. package/lib/routable/ttmpl-table-route.d.ts.map +1 -0
  43. package/lib/routable/ttmpl-table-route.js +283 -0
  44. package/lib/routable/ttmpl-table-route.js.map +1 -0
  45. package/lib/table/act-table.d.ts +11 -3
  46. package/lib/table/act-table.d.ts.map +1 -1
  47. package/lib/table/act-table.js +2 -2
  48. package/lib/table/act-table.js.map +1 -1
  49. package/lib/table/column/column-builder.d.ts.map +1 -1
  50. package/lib/table/column/column-builder.js +7 -3
  51. package/lib/table/column/column-builder.js.map +1 -1
  52. package/lib/table/index.css +2 -2
  53. package/lib/table/l2-act-table.d.ts +1 -1
  54. package/lib/table/page-chart.d.ts +1 -1
  55. package/lib/table/pagination.d.ts +1 -0
  56. package/lib/table/pagination.d.ts.map +1 -1
  57. package/lib/table/pagination.js +5 -4
  58. package/lib/table/pagination.js.map +1 -1
  59. package/lib/table/query-table.d.ts +2 -0
  60. package/lib/table/query-table.d.ts.map +1 -1
  61. package/lib/table/query-table.js +10 -6
  62. package/lib/table/query-table.js.map +1 -1
  63. package/lib/table/relation-table.d.ts +2 -2
  64. package/lib/tmpl/hc-data-source.d.ts +2 -1
  65. package/lib/tmpl/hc-data-source.d.ts.map +1 -1
  66. package/lib/tmpl/hc-data-source.js +12 -0
  67. package/lib/tmpl/hc-data-source.js.map +1 -1
  68. package/lib/tmpl/hcservice-v3.d.ts +1 -0
  69. package/lib/tmpl/hcservice-v3.d.ts.map +1 -1
  70. package/lib/tmpl/hcservice-v3.js +12 -0
  71. package/lib/tmpl/hcservice-v3.js.map +1 -1
  72. package/lib/tmpl/interface.d.ts +16 -1
  73. package/lib/tmpl/interface.d.ts.map +1 -1
  74. package/lib/tmpl/interface.js.map +1 -1
  75. package/lib/welcome/components/page-card.d.ts +1 -1
  76. package/package.json +4 -2
  77. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.css +99 -99
  78. package/src/aldehyde/controls/icon-selector/icon/phonenode-menu-icon/iconfont.json +156 -156
  79. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.less +35 -35
  80. package/src/aldehyde/draw-canvas-edit/components/asset-bar/index.tsx +110 -110
  81. package/src/aldehyde/draw-canvas-edit/components/main-header/index.less +23 -23
  82. package/src/aldehyde/draw-canvas-edit/components/main-header/index.tsx +263 -263
  83. package/src/aldehyde/draw-canvas-edit/components/render/draws/index.ts +7 -7
  84. package/src/aldehyde/draw-canvas-edit/components/render/graphs/base-graph.ts +241 -241
  85. package/src/aldehyde/draw-canvas-edit/components/render/graphs/circle.ts +699 -699
  86. package/src/aldehyde/draw-canvas-edit/components/render/graphs/curve.ts +500 -500
  87. package/src/aldehyde/draw-canvas-edit/components/render/graphs/index.ts +5 -5
  88. package/src/aldehyde/draw-canvas-edit/components/render/graphs/line.ts +493 -493
  89. package/src/aldehyde/draw-canvas-edit/components/render/graphs/rect.ts +680 -680
  90. package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-handlers.ts +68 -68
  91. package/src/aldehyde/draw-canvas-edit/components/render/handlers/graph-handlers.ts +113 -113
  92. package/src/aldehyde/draw-canvas-edit/components/render/handlers/index.ts +9 -9
  93. package/src/aldehyde/draw-canvas-edit/components/render/handlers/key-move-handlers.ts +49 -49
  94. package/src/aldehyde/draw-canvas-edit/components/render/handlers/link-handlers.ts +45 -45
  95. package/src/aldehyde/draw-canvas-edit/components/render/handlers/shutcut-handlers.ts +45 -45
  96. package/src/aldehyde/draw-canvas-edit/components/render/handlers/text-handlers.ts +81 -81
  97. package/src/aldehyde/draw-canvas-edit/components/render/handlers/zoom-handlers.ts +59 -59
  98. package/src/aldehyde/draw-canvas-edit/components/render/tools/align-tool.ts +89 -89
  99. package/src/aldehyde/draw-canvas-edit/components/render/tools/asset-tool.ts +154 -154
  100. package/src/aldehyde/draw-canvas-edit/components/render/tools/link-tool.ts +222 -222
  101. package/src/aldehyde/draw-canvas-edit/components/render/tools/z-index-tool.ts +224 -224
  102. package/src/aldehyde/draw-canvas-edit/components/render/utils/a-star.ts +116 -116
  103. package/src/aldehyde/draw-canvas-edit/components/render/utils/bezier-scene-func.ts +72 -72
  104. package/src/aldehyde/draw-canvas-edit/components/setting-form/imag-upload.tsx +119 -119
  105. package/src/aldehyde/index.tsx +3 -1
  106. package/src/aldehyde/layout2/page.tsx +3 -0
  107. package/src/aldehyde/layout3/css/main.less +17 -17
  108. package/src/aldehyde/layout4/css/main.less +18 -17
  109. package/src/aldehyde/layout4/imgs/user.svg +26 -26
  110. package/src/aldehyde/locale/LocaleProvider.tsx +4 -2
  111. package/src/aldehyde/lowcode-components/base-color-block/index.tsx +31 -31
  112. package/src/aldehyde/lowcode-components/base-table/index.less +61 -61
  113. package/src/aldehyde/lowcode-components/data-number/index.less +10 -10
  114. package/src/aldehyde/lowcode-components/date-time/index.less +4 -4
  115. package/src/aldehyde/lowcode-components/date-time/index.tsx +64 -64
  116. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.less +49 -49
  117. package/src/aldehyde/lowcode-components/four-angle-glow-border/index.tsx +53 -53
  118. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-controller.ts +64 -64
  119. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-definition.ts +77 -77
  120. package/src/aldehyde/lowcode-components/lowcode-view/component/abstract-designer-loader.ts +36 -36
  121. package/src/aldehyde/lowcode-components/lowcode-view/component/component-container.tsx +144 -144
  122. package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css +26 -26
  123. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/controller.ts +36 -36
  124. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/definition.ts +53 -53
  125. package/src/aldehyde/lowcode-components/lowcode-view/component/group-layer/index.tsx +15 -15
  126. package/src/aldehyde/lowcode-components/lowcode-view/component/layer-builder.tsx +98 -98
  127. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.less +13 -13
  128. package/src/aldehyde/lowcode-components/lowcode-view/component/screen-fit/index.tsx +121 -121
  129. package/src/aldehyde/lowcode-components/placeholder-component/index.tsx +81 -81
  130. package/src/aldehyde/lowcode-components/text-scroller/index.less +28 -28
  131. package/src/aldehyde/lowcode-components/text-scroller/index.tsx +173 -173
  132. package/src/aldehyde/module/index.less +6 -0
  133. package/src/aldehyde/module/ltmpl-table.tsx +8 -1
  134. package/src/aldehyde/module/ttmpl-table.tsx +349 -0
  135. package/src/aldehyde/routable/index.less +6 -0
  136. package/src/aldehyde/routable/ttmpl-table-route.tsx +390 -0
  137. package/src/aldehyde/table/act-table.tsx +9 -1
  138. package/src/aldehyde/table/column/column-builder.tsx +5 -3
  139. package/src/aldehyde/table/index.css +2 -2
  140. package/src/aldehyde/table/pagination.tsx +11 -9
  141. package/src/aldehyde/table/query-table.tsx +13 -4
  142. package/src/aldehyde/tmpl/hc-data-source.tsx +12 -0
  143. package/src/aldehyde/tmpl/hcservice-v3.tsx +11 -0
  144. package/src/aldehyde/tmpl/interface.tsx +14 -2
@@ -1,32 +1,32 @@
1
- import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
2
-
3
- export interface BaseColorBlockComponentStyle {
4
- borderRadius?: number;
5
- borderWidth?: number;
6
- borderColor?: string;
7
- borderStyle?: string;
8
- background?: string;
9
- }
10
-
11
- export interface BaseColorBlockComponentProps {
12
- style?: BaseColorBlockComponentStyle;
13
- }
14
-
15
- export interface BaseColorBlockComponentRef {
16
- updateConfig: (newConfig: BaseColorBlockComponentProps) => void;
17
- }
18
-
19
- const BaseColorBlockComponent = forwardRef((props: BaseColorBlockComponentProps, ref: ForwardedRef<BaseColorBlockComponentRef>) => {
20
- const [config, setConfig] = useState<BaseColorBlockComponentProps>({ ...props });
21
-
22
- useImperativeHandle(ref, () => ({
23
- updateConfig: (newConfig) => setConfig({ ...newConfig }),
24
- }));
25
-
26
-
27
- return (
28
- <div style={{ ...{ height: '100%', display: 'flex' }, ...(config?.style || {}) }} />
29
- );
30
- });
31
-
1
+ import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from 'react';
2
+
3
+ export interface BaseColorBlockComponentStyle {
4
+ borderRadius?: number;
5
+ borderWidth?: number;
6
+ borderColor?: string;
7
+ borderStyle?: string;
8
+ background?: string;
9
+ }
10
+
11
+ export interface BaseColorBlockComponentProps {
12
+ style?: BaseColorBlockComponentStyle;
13
+ }
14
+
15
+ export interface BaseColorBlockComponentRef {
16
+ updateConfig: (newConfig: BaseColorBlockComponentProps) => void;
17
+ }
18
+
19
+ const BaseColorBlockComponent = forwardRef((props: BaseColorBlockComponentProps, ref: ForwardedRef<BaseColorBlockComponentRef>) => {
20
+ const [config, setConfig] = useState<BaseColorBlockComponentProps>({ ...props });
21
+
22
+ useImperativeHandle(ref, () => ({
23
+ updateConfig: (newConfig) => setConfig({ ...newConfig }),
24
+ }));
25
+
26
+
27
+ return (
28
+ <div style={{ ...{ height: '100%', display: 'flex' }, ...(config?.style || {}) }} />
29
+ );
30
+ });
31
+
32
32
  export default BaseColorBlockComponent;
@@ -1,62 +1,62 @@
1
- .base-table {
2
- width: 100%;
3
- height: 100%;
4
- overflow: hidden;
5
-
6
- .base-table-empty {
7
- width: 100%;
8
- height: 100%;
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- }
13
-
14
- table {
15
- width: 100%;
16
- text-align: center;
17
- table-layout: fixed;
18
- /* 关键:合并相邻边框,消除双线 */
19
- border-collapse: collapse;
20
- margin-top: -2px;
21
-
22
- thead {
23
- position: relative;
24
- z-index: 1;
25
-
26
- th {
27
- padding: 0 4px;
28
- }
29
- }
30
-
31
-
32
- .scroll-body {
33
- overflow: hidden;
34
- animation: scroll 10s linear infinite;
35
-
36
- td {
37
- padding: 0 4px;
38
- overflow: hidden;
39
- white-space: nowrap;
40
- text-overflow: ellipsis;
41
- }
42
- }
43
- }
44
-
45
- table:hover {
46
- .scroll-body {
47
- animation-play-state: paused !important;
48
- }
49
- }
50
-
51
- }
52
-
53
-
54
- @keyframes scroll {
55
- 0% {
56
- transform: translateY(0);
57
- }
58
-
59
- 100% {
60
- transform: translateY(-100%);
61
- }
1
+ .base-table {
2
+ width: 100%;
3
+ height: 100%;
4
+ overflow: hidden;
5
+
6
+ .base-table-empty {
7
+ width: 100%;
8
+ height: 100%;
9
+ display: flex;
10
+ justify-content: center;
11
+ align-items: center;
12
+ }
13
+
14
+ table {
15
+ width: 100%;
16
+ text-align: center;
17
+ table-layout: fixed;
18
+ /* 关键:合并相邻边框,消除双线 */
19
+ border-collapse: collapse;
20
+ margin-top: -2px;
21
+
22
+ thead {
23
+ position: relative;
24
+ z-index: 1;
25
+
26
+ th {
27
+ padding: 0 4px;
28
+ }
29
+ }
30
+
31
+
32
+ .scroll-body {
33
+ overflow: hidden;
34
+ animation: scroll 10s linear infinite;
35
+
36
+ td {
37
+ padding: 0 4px;
38
+ overflow: hidden;
39
+ white-space: nowrap;
40
+ text-overflow: ellipsis;
41
+ }
42
+ }
43
+ }
44
+
45
+ table:hover {
46
+ .scroll-body {
47
+ animation-play-state: paused !important;
48
+ }
49
+ }
50
+
51
+ }
52
+
53
+
54
+ @keyframes scroll {
55
+ 0% {
56
+ transform: translateY(0);
57
+ }
58
+
59
+ 100% {
60
+ transform: translateY(-100%);
61
+ }
62
62
  }
@@ -1,11 +1,11 @@
1
- .data-number-component {
2
- --stroke-color: #000000;
3
- --stroke-width: 0;
4
-
5
- height: 100%;
6
- display: flex;
7
- -webkit-text-stroke-color: var(--stroke-color);
8
- -webkit-text-stroke-width: var(--stroke-width);
9
- stroke-color: var(--stroke-color);
10
- stroke-width: var(--stroke-width);
1
+ .data-number-component {
2
+ --stroke-color: #000000;
3
+ --stroke-width: 0;
4
+
5
+ height: 100%;
6
+ display: flex;
7
+ -webkit-text-stroke-color: var(--stroke-color);
8
+ -webkit-text-stroke-width: var(--stroke-width);
9
+ stroke-color: var(--stroke-color);
10
+ stroke-width: var(--stroke-width);
11
11
  }
@@ -1,5 +1,5 @@
1
- .date-time-component {
2
- width: 100%;
3
- height: 100%;
4
- display: flex;
1
+ .date-time-component {
2
+ width: 100%;
3
+ height: 100%;
4
+ display: flex;
5
5
  }
@@ -1,65 +1,65 @@
1
- import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
- import dayjs from "dayjs";
3
- import './index.less';
4
-
5
- export interface DateTimeComponentStyle {
6
- fontSize?: number;
7
- color?: string;
8
- fontFamily?: string;
9
- fontWeight?: number;
10
- alignItems?: string;
11
- justifyContent?: string;
12
- letterSpacing?: string;
13
- formatType?: string;
14
- }
15
-
16
- export interface DateTimeComponentProps {
17
- style?: DateTimeComponentStyle;
18
- }
19
-
20
- export interface DateTimeComponentRef {
21
- updateConfig: (newConfig: DateTimeComponentProps) => void;
22
- setEventHandler: (eventMap: Record<string, Function>) => void;
23
- destroy: () => void;
24
- }
25
-
26
- const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
27
-
28
- const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
29
- const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
30
- const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
31
- const timeRef = useRef<NodeJS.Timeout | null>(null);
32
- const eventHandlerMap = useRef<Record<string, Function>>({});
33
-
34
- const handleClearInterval = () => {
35
- timeRef.current && clearInterval(timeRef.current);
36
- timeRef.current = null;
37
- }
38
-
39
- useEffect(() => {
40
- timeRef.current = setInterval(() => {
41
- setDateTime(dayjs().format(config.style?.formatType || defFormatType));
42
- }, 1000);
43
- return () => {
44
- handleClearInterval();
45
- }
46
- }, []);
47
-
48
-
49
- useImperativeHandle(ref, () => ({
50
- updateConfig: (newConfig) => setConfig({ ...newConfig }),
51
- setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
52
- destroy: () => {
53
- handleClearInterval();
54
- }
55
- }));
56
-
57
-
58
- return (
59
- <div className="date-time-component" style={{ ...(config?.style || {}) }}>
60
- {datetime}
61
- </div>
62
- );
63
- });
64
-
1
+ import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
2
+ import dayjs from "dayjs";
3
+ import './index.less';
4
+
5
+ export interface DateTimeComponentStyle {
6
+ fontSize?: number;
7
+ color?: string;
8
+ fontFamily?: string;
9
+ fontWeight?: number;
10
+ alignItems?: string;
11
+ justifyContent?: string;
12
+ letterSpacing?: string;
13
+ formatType?: string;
14
+ }
15
+
16
+ export interface DateTimeComponentProps {
17
+ style?: DateTimeComponentStyle;
18
+ }
19
+
20
+ export interface DateTimeComponentRef {
21
+ updateConfig: (newConfig: DateTimeComponentProps) => void;
22
+ setEventHandler: (eventMap: Record<string, Function>) => void;
23
+ destroy: () => void;
24
+ }
25
+
26
+ const defFormatType = "YYYY年MM月DD日 HH时mm分ss秒";
27
+
28
+ const DateTimeComponent = forwardRef((props: DateTimeComponentProps, ref: ForwardedRef<DateTimeComponentRef>) => {
29
+ const [config, setConfig] = useState<DateTimeComponentProps>({ ...props });
30
+ const [datetime, setDateTime] = useState<string>(dayjs().format(config.style?.formatType || defFormatType));
31
+ const timeRef = useRef<NodeJS.Timeout | null>(null);
32
+ const eventHandlerMap = useRef<Record<string, Function>>({});
33
+
34
+ const handleClearInterval = () => {
35
+ timeRef.current && clearInterval(timeRef.current);
36
+ timeRef.current = null;
37
+ }
38
+
39
+ useEffect(() => {
40
+ timeRef.current = setInterval(() => {
41
+ setDateTime(dayjs().format(config.style?.formatType || defFormatType));
42
+ }, 1000);
43
+ return () => {
44
+ handleClearInterval();
45
+ }
46
+ }, []);
47
+
48
+
49
+ useImperativeHandle(ref, () => ({
50
+ updateConfig: (newConfig) => setConfig({ ...newConfig }),
51
+ setEventHandler: (eventMap) => eventHandlerMap.current = eventMap,
52
+ destroy: () => {
53
+ handleClearInterval();
54
+ }
55
+ }));
56
+
57
+
58
+ return (
59
+ <div className="date-time-component" style={{ ...(config?.style || {}) }}>
60
+ {datetime}
61
+ </div>
62
+ );
63
+ });
64
+
65
65
  export default DateTimeComponent;
@@ -1,50 +1,50 @@
1
- .four-angle-glow {
2
- --fagb-color: #00ebff;
3
- --fagb-width: 2px;
4
- --fagb-length: 8px;
5
- --fagb-radius: 3px;
6
- width: 100%;
7
- height: 100%;
8
- position: relative;
9
-
10
- .angle {
11
- position: absolute;
12
- border: var(--fagb-width) solid var(--fagb-color);
13
- width: var(--fagb-length);
14
- height: var(--fagb-length);
15
- }
16
-
17
- .angle-tl {
18
- margin: -1px 0 0 -1px;
19
- border-right: 0;
20
- border-bottom: 0;
21
- border-top-left-radius: var(--fagb-radius);
22
- }
23
-
24
- .angle-tr {
25
- top: 0;
26
- right: 0;
27
- border-left: 0;
28
- border-bottom: 0;
29
- margin: -1px -1px 0 0;
30
- border-top-right-radius: var(--fagb-radius);
31
- }
32
-
33
- .angle-bl {
34
- bottom: 0;
35
- left: 0;
36
- border-top: 0;
37
- border-right: 0;
38
- margin: 0 0 -1px -1px;
39
- border-bottom-left-radius: var(--fagb-radius);
40
- }
41
-
42
- .angle-br {
43
- bottom: 0;
44
- right: 0;
45
- border-left: 0;
46
- border-top: 0;
47
- margin: 0 -1px -1px 0;
48
- border-bottom-right-radius: var(--fagb-radius);
49
- }
1
+ .four-angle-glow {
2
+ --fagb-color: #00ebff;
3
+ --fagb-width: 2px;
4
+ --fagb-length: 8px;
5
+ --fagb-radius: 3px;
6
+ width: 100%;
7
+ height: 100%;
8
+ position: relative;
9
+
10
+ .angle {
11
+ position: absolute;
12
+ border: var(--fagb-width) solid var(--fagb-color);
13
+ width: var(--fagb-length);
14
+ height: var(--fagb-length);
15
+ }
16
+
17
+ .angle-tl {
18
+ margin: -1px 0 0 -1px;
19
+ border-right: 0;
20
+ border-bottom: 0;
21
+ border-top-left-radius: var(--fagb-radius);
22
+ }
23
+
24
+ .angle-tr {
25
+ top: 0;
26
+ right: 0;
27
+ border-left: 0;
28
+ border-bottom: 0;
29
+ margin: -1px -1px 0 0;
30
+ border-top-right-radius: var(--fagb-radius);
31
+ }
32
+
33
+ .angle-bl {
34
+ bottom: 0;
35
+ left: 0;
36
+ border-top: 0;
37
+ border-right: 0;
38
+ margin: 0 0 -1px -1px;
39
+ border-bottom-left-radius: var(--fagb-radius);
40
+ }
41
+
42
+ .angle-br {
43
+ bottom: 0;
44
+ right: 0;
45
+ border-left: 0;
46
+ border-top: 0;
47
+ margin: 0 -1px -1px 0;
48
+ border-bottom-right-radius: var(--fagb-radius);
49
+ }
50
50
  }
@@ -1,53 +1,53 @@
1
- import './index.less';
2
- import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
3
-
4
- export interface FourAngleGlowBorderStyle {
5
- width?: number;
6
- length?: number;
7
- color?: string;
8
- radius?: number;
9
- }
10
-
11
- export interface FourAngleGlowProps {
12
- style?: FourAngleGlowBorderStyle;
13
- }
14
-
15
- export interface FourAngleGlowBorderRef {
16
- updateConfig: (config: FourAngleGlowProps) => void;
17
- }
18
-
19
- const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
20
- const [config] = useState<FourAngleGlowProps>({ ...props });
21
- const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
22
-
23
- const updateStyle = (style: FourAngleGlowBorderStyle) => {
24
- const dom = fourAngleGlowRef.current;
25
- if (dom) {
26
- dom.style.setProperty('--fagb-length', `${style?.length}px`);
27
- dom.style.setProperty('--fagb-color', style?.color);
28
- dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
29
- dom.style.setProperty('--fagb-width', `${style?.width}px`);
30
- }
31
- };
32
-
33
- useImperativeHandle(ref, () => ({
34
- updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
35
- }));
36
-
37
- useEffect(() => {
38
- updateStyle(config.style);
39
- }, []);
40
-
41
- return (
42
- <div className="four-angle-glow" ref={fourAngleGlowRef}>
43
- <span className="angle angle-tl" />
44
- <span className="angle angle-tr" />
45
- <span className="angle angle-bl" />
46
- <span className="angle angle-br" />
47
- </div>
48
- );
49
- })
50
-
51
- export default FourAngleGlowBorder;
52
-
53
-
1
+ import './index.less';
2
+ import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
3
+
4
+ export interface FourAngleGlowBorderStyle {
5
+ width?: number;
6
+ length?: number;
7
+ color?: string;
8
+ radius?: number;
9
+ }
10
+
11
+ export interface FourAngleGlowProps {
12
+ style?: FourAngleGlowBorderStyle;
13
+ }
14
+
15
+ export interface FourAngleGlowBorderRef {
16
+ updateConfig: (config: FourAngleGlowProps) => void;
17
+ }
18
+
19
+ const FourAngleGlowBorder = forwardRef((props: FourAngleGlowProps, ref: ForwardedRef<FourAngleGlowBorderRef>) => {
20
+ const [config] = useState<FourAngleGlowProps>({ ...props });
21
+ const fourAngleGlowRef = useRef<HTMLDivElement | null>(null);
22
+
23
+ const updateStyle = (style: FourAngleGlowBorderStyle) => {
24
+ const dom = fourAngleGlowRef.current;
25
+ if (dom) {
26
+ dom.style.setProperty('--fagb-length', `${style?.length}px`);
27
+ dom.style.setProperty('--fagb-color', style?.color);
28
+ dom.style.setProperty('--fagb-radius', `${style?.radius}px`);
29
+ dom.style.setProperty('--fagb-width', `${style?.width}px`);
30
+ }
31
+ };
32
+
33
+ useImperativeHandle(ref, () => ({
34
+ updateConfig: (newConfig) => updateStyle({ ...newConfig.style }),
35
+ }));
36
+
37
+ useEffect(() => {
38
+ updateStyle(config.style);
39
+ }, []);
40
+
41
+ return (
42
+ <div className="four-angle-glow" ref={fourAngleGlowRef}>
43
+ <span className="angle angle-tl" />
44
+ <span className="angle angle-tr" />
45
+ <span className="angle angle-bl" />
46
+ <span className="angle angle-br" />
47
+ </div>
48
+ );
49
+ })
50
+
51
+ export default FourAngleGlowBorder;
52
+
53
+