@next-libs/visual-builder 1.12.3 → 1.12.5
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.
- package/dist/cjs/workbench-mini-action-bar/WorkbenchMiniActionBar.js +15 -0
- package/dist/cjs/workbench-mini-action-bar/WorkbenchMiniActionBar.js.map +1 -1
- package/dist/esm/workbench-mini-action-bar/WorkbenchMiniActionBar.js +16 -1
- package/dist/esm/workbench-mini-action-bar/WorkbenchMiniActionBar.js.map +1 -1
- package/dist/types/workbench-mini-action-bar/WorkbenchMiniActionBar.d.ts +2 -1
- package/package.json +5 -5
|
@@ -19,6 +19,7 @@ function WorkbenchMiniActionBar({
|
|
|
19
19
|
isLast,
|
|
20
20
|
actions,
|
|
21
21
|
actionsHidden,
|
|
22
|
+
useNativeEvent,
|
|
22
23
|
onActionClick
|
|
23
24
|
}) {
|
|
24
25
|
const enabledActions = (0, _react.useMemo)(() => actions === null || actions === void 0 ? void 0 : actions.filter(item => (0, _brickKit.looseCheckIfByTransform)(item, data)), [actions, data]);
|
|
@@ -36,6 +37,7 @@ function WorkbenchMiniActionBar({
|
|
|
36
37
|
data: data,
|
|
37
38
|
isFirst: isFirst,
|
|
38
39
|
isLast: isLast,
|
|
40
|
+
useNativeEvent: useNativeEvent,
|
|
39
41
|
onActionClick: onActionClick
|
|
40
42
|
})));
|
|
41
43
|
}
|
|
@@ -44,10 +46,12 @@ function WorkbenchSubAction({
|
|
|
44
46
|
data,
|
|
45
47
|
isFirst,
|
|
46
48
|
isLast,
|
|
49
|
+
useNativeEvent,
|
|
47
50
|
onActionClick
|
|
48
51
|
}) {
|
|
49
52
|
var _action$iconUseBrick;
|
|
50
53
|
const disabled = isFirst && action.action === "move-up" || isLast && action.action === "move-down";
|
|
54
|
+
const linkRef = (0, _react.useRef)();
|
|
51
55
|
const handleActionClick = (0, _react.useCallback)(event => {
|
|
52
56
|
event.preventDefault();
|
|
53
57
|
event.stopPropagation();
|
|
@@ -56,6 +60,16 @@ function WorkbenchSubAction({
|
|
|
56
60
|
data: data
|
|
57
61
|
}));
|
|
58
62
|
}, [action.action, data, disabled, onActionClick]);
|
|
63
|
+
(0, _react.useEffect)(() => {
|
|
64
|
+
const link = linkRef.current;
|
|
65
|
+
if (!link || !useNativeEvent) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
link.addEventListener("click", handleActionClick);
|
|
69
|
+
return () => {
|
|
70
|
+
link.removeEventListener("click", handleActionClick);
|
|
71
|
+
};
|
|
72
|
+
}, [handleActionClick, useNativeEvent]);
|
|
59
73
|
const preventMouseEvent = (0, _react.useCallback)(event => {
|
|
60
74
|
event.preventDefault();
|
|
61
75
|
event.stopPropagation();
|
|
@@ -66,6 +80,7 @@ function WorkbenchSubAction({
|
|
|
66
80
|
}),
|
|
67
81
|
title: action.title,
|
|
68
82
|
role: "button",
|
|
83
|
+
ref: linkRef,
|
|
69
84
|
onClick: handleActionClick,
|
|
70
85
|
onContextMenu: preventMouseEvent,
|
|
71
86
|
onMouseDown: preventMouseEvent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WorkbenchMiniActionBar.js","names":["WorkbenchMiniActionBar","data","className","gap","isFirst","isLast","actions","actionsHidden","onActionClick","enabledActions","useMemo","filter","item","looseCheckIfByTransform","length","classNames","styles","actionsBar","map","action","WorkbenchSubAction","disabled","handleActionClick","useCallback","event","preventDefault","stopPropagation","preventMouseEvent","title","iconUseBrick","useBrick","icon"],"sources":["../../../src/workbench-mini-action-bar/WorkbenchMiniActionBar.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport {\n BrickAsComponent,\n looseCheckIfByTransform,\n} from \"@next-core/brick-kit\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport { WorkbenchTreeAction, ActionClickDetail } from \"../interfaces\";\n\nimport styles from \"./WorkbenchMiniActionBar.module.css\";\n\nexport interface WorkbenchSubActionBarProps {\n data?: unknown;\n className?: string;\n gap?: number;\n isFirst?: boolean;\n isLast?: boolean;\n actions?: WorkbenchTreeAction[];\n actionsHidden?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nexport function WorkbenchMiniActionBar({\n data,\n className,\n gap,\n isFirst,\n isLast,\n actions,\n actionsHidden,\n onActionClick,\n}: WorkbenchSubActionBarProps): React.ReactElement {\n const enabledActions = useMemo(\n () => actions?.filter((item) => looseCheckIfByTransform(item, data)),\n [actions, data]\n );\n\n if (actionsHidden || !enabledActions?.length) {\n return null;\n }\n\n return (\n <div className={classNames(styles.actionsBar, className)} style={{ gap }}>\n {enabledActions.map((item) => (\n <WorkbenchSubAction\n key={item.action}\n action={item}\n data={data}\n isFirst={isFirst}\n isLast={isLast}\n onActionClick={onActionClick}\n />\n ))}\n </div>\n );\n}\n\ninterface WorkbenchSubActionProps {\n action: WorkbenchTreeAction;\n data?: unknown;\n isFirst?: boolean;\n isLast?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nfunction WorkbenchSubAction({\n action,\n data,\n isFirst,\n isLast,\n onActionClick,\n}: WorkbenchSubActionProps): React.ReactElement {\n const disabled =\n (isFirst && action.action === \"move-up\") ||\n (isLast && action.action === \"move-down\");\n\n const handleActionClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n disabled ||\n onActionClick?.({\n action: action.action,\n data: data,\n });\n },\n [action.action, data, disabled, onActionClick]\n );\n\n const preventMouseEvent = useCallback((event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n <a\n className={classNames(styles.action, { [styles.disabled]: disabled })}\n title={action.title}\n role=\"button\"\n onClick={handleActionClick}\n onContextMenu={preventMouseEvent}\n onMouseDown={preventMouseEvent}\n >\n {action.iconUseBrick?.useBrick ? (\n <BrickAsComponent useBrick={action.iconUseBrick.useBrick} data={data} />\n ) : (\n <GeneralIcon icon={action.icon} />\n )}\n </a>\n );\n}\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AAIA;AAGA;
|
|
1
|
+
{"version":3,"file":"WorkbenchMiniActionBar.js","names":["WorkbenchMiniActionBar","data","className","gap","isFirst","isLast","actions","actionsHidden","useNativeEvent","onActionClick","enabledActions","useMemo","filter","item","looseCheckIfByTransform","length","classNames","styles","actionsBar","map","action","WorkbenchSubAction","disabled","linkRef","useRef","handleActionClick","useCallback","event","preventDefault","stopPropagation","useEffect","link","current","addEventListener","removeEventListener","preventMouseEvent","title","iconUseBrick","useBrick","icon"],"sources":["../../../src/workbench-mini-action-bar/WorkbenchMiniActionBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport classNames from \"classnames\";\nimport {\n BrickAsComponent,\n looseCheckIfByTransform,\n} from \"@next-core/brick-kit\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport { WorkbenchTreeAction, ActionClickDetail } from \"../interfaces\";\n\nimport styles from \"./WorkbenchMiniActionBar.module.css\";\n\nexport interface WorkbenchSubActionBarProps {\n data?: unknown;\n className?: string;\n gap?: number;\n isFirst?: boolean;\n isLast?: boolean;\n actions?: WorkbenchTreeAction[];\n actionsHidden?: boolean;\n useNativeEvent?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nexport function WorkbenchMiniActionBar({\n data,\n className,\n gap,\n isFirst,\n isLast,\n actions,\n actionsHidden,\n useNativeEvent,\n onActionClick,\n}: WorkbenchSubActionBarProps): React.ReactElement {\n const enabledActions = useMemo(\n () => actions?.filter((item) => looseCheckIfByTransform(item, data)),\n [actions, data]\n );\n\n if (actionsHidden || !enabledActions?.length) {\n return null;\n }\n\n return (\n <div className={classNames(styles.actionsBar, className)} style={{ gap }}>\n {enabledActions.map((item) => (\n <WorkbenchSubAction\n key={item.action}\n action={item}\n data={data}\n isFirst={isFirst}\n isLast={isLast}\n useNativeEvent={useNativeEvent}\n onActionClick={onActionClick}\n />\n ))}\n </div>\n );\n}\n\ninterface WorkbenchSubActionProps {\n action: WorkbenchTreeAction;\n data?: unknown;\n isFirst?: boolean;\n isLast?: boolean;\n useNativeEvent?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nfunction WorkbenchSubAction({\n action,\n data,\n isFirst,\n isLast,\n useNativeEvent,\n onActionClick,\n}: WorkbenchSubActionProps): React.ReactElement {\n const disabled =\n (isFirst && action.action === \"move-up\") ||\n (isLast && action.action === \"move-down\");\n const linkRef = useRef<HTMLAnchorElement>();\n\n const handleActionClick = useCallback(\n (event: MouseEvent | React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n disabled ||\n onActionClick?.({\n action: action.action,\n data: data,\n });\n },\n [action.action, data, disabled, onActionClick]\n );\n\n useEffect(() => {\n const link = linkRef.current;\n if (!link || !useNativeEvent) {\n return;\n }\n link.addEventListener(\"click\", handleActionClick);\n return () => {\n link.removeEventListener(\"click\", handleActionClick);\n };\n }, [handleActionClick, useNativeEvent]);\n\n const preventMouseEvent = useCallback((event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n <a\n className={classNames(styles.action, { [styles.disabled]: disabled })}\n title={action.title}\n role=\"button\"\n ref={linkRef}\n onClick={handleActionClick}\n onContextMenu={preventMouseEvent}\n onMouseDown={preventMouseEvent}\n >\n {action.iconUseBrick?.useBrick ? (\n <BrickAsComponent useBrick={action.iconUseBrick.useBrick} data={data} />\n ) : (\n <GeneralIcon icon={action.icon} />\n )}\n </a>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useCallback, useMemo } from "react";
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useRef } from "react";
|
|
2
2
|
import classNames from "classnames";
|
|
3
3
|
import { BrickAsComponent, looseCheckIfByTransform } from "@next-core/brick-kit";
|
|
4
4
|
import { GeneralIcon } from "@next-libs/basic-components";
|
|
@@ -12,6 +12,7 @@ export function WorkbenchMiniActionBar(_ref) {
|
|
|
12
12
|
isLast,
|
|
13
13
|
actions,
|
|
14
14
|
actionsHidden,
|
|
15
|
+
useNativeEvent,
|
|
15
16
|
onActionClick
|
|
16
17
|
} = _ref;
|
|
17
18
|
var enabledActions = useMemo(() => actions === null || actions === void 0 ? void 0 : actions.filter(item => looseCheckIfByTransform(item, data)), [actions, data]);
|
|
@@ -29,6 +30,7 @@ export function WorkbenchMiniActionBar(_ref) {
|
|
|
29
30
|
data: data,
|
|
30
31
|
isFirst: isFirst,
|
|
31
32
|
isLast: isLast,
|
|
33
|
+
useNativeEvent: useNativeEvent,
|
|
32
34
|
onActionClick: onActionClick
|
|
33
35
|
})));
|
|
34
36
|
}
|
|
@@ -39,9 +41,11 @@ function WorkbenchSubAction(_ref2) {
|
|
|
39
41
|
data,
|
|
40
42
|
isFirst,
|
|
41
43
|
isLast,
|
|
44
|
+
useNativeEvent,
|
|
42
45
|
onActionClick
|
|
43
46
|
} = _ref2;
|
|
44
47
|
var disabled = isFirst && action.action === "move-up" || isLast && action.action === "move-down";
|
|
48
|
+
var linkRef = useRef();
|
|
45
49
|
var handleActionClick = useCallback(event => {
|
|
46
50
|
event.preventDefault();
|
|
47
51
|
event.stopPropagation();
|
|
@@ -50,6 +54,16 @@ function WorkbenchSubAction(_ref2) {
|
|
|
50
54
|
data: data
|
|
51
55
|
}));
|
|
52
56
|
}, [action.action, data, disabled, onActionClick]);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
var link = linkRef.current;
|
|
59
|
+
if (!link || !useNativeEvent) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
link.addEventListener("click", handleActionClick);
|
|
63
|
+
return () => {
|
|
64
|
+
link.removeEventListener("click", handleActionClick);
|
|
65
|
+
};
|
|
66
|
+
}, [handleActionClick, useNativeEvent]);
|
|
53
67
|
var preventMouseEvent = useCallback(event => {
|
|
54
68
|
event.preventDefault();
|
|
55
69
|
event.stopPropagation();
|
|
@@ -60,6 +74,7 @@ function WorkbenchSubAction(_ref2) {
|
|
|
60
74
|
}),
|
|
61
75
|
title: action.title,
|
|
62
76
|
role: "button",
|
|
77
|
+
ref: linkRef,
|
|
63
78
|
onClick: handleActionClick,
|
|
64
79
|
onContextMenu: preventMouseEvent,
|
|
65
80
|
onMouseDown: preventMouseEvent
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WorkbenchMiniActionBar.js","names":["React","useCallback","useMemo","classNames","BrickAsComponent","looseCheckIfByTransform","GeneralIcon","styles","WorkbenchMiniActionBar","data","className","gap","isFirst","isLast","actions","actionsHidden","onActionClick","enabledActions","filter","item","length","actionsBar","map","action","WorkbenchSubAction","disabled","handleActionClick","event","preventDefault","stopPropagation","preventMouseEvent","title","iconUseBrick","useBrick","icon"],"sources":["../../../src/workbench-mini-action-bar/WorkbenchMiniActionBar.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport classNames from \"classnames\";\nimport {\n BrickAsComponent,\n looseCheckIfByTransform,\n} from \"@next-core/brick-kit\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport { WorkbenchTreeAction, ActionClickDetail } from \"../interfaces\";\n\nimport styles from \"./WorkbenchMiniActionBar.module.css\";\n\nexport interface WorkbenchSubActionBarProps {\n data?: unknown;\n className?: string;\n gap?: number;\n isFirst?: boolean;\n isLast?: boolean;\n actions?: WorkbenchTreeAction[];\n actionsHidden?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nexport function WorkbenchMiniActionBar({\n data,\n className,\n gap,\n isFirst,\n isLast,\n actions,\n actionsHidden,\n onActionClick,\n}: WorkbenchSubActionBarProps): React.ReactElement {\n const enabledActions = useMemo(\n () => actions?.filter((item) => looseCheckIfByTransform(item, data)),\n [actions, data]\n );\n\n if (actionsHidden || !enabledActions?.length) {\n return null;\n }\n\n return (\n <div className={classNames(styles.actionsBar, className)} style={{ gap }}>\n {enabledActions.map((item) => (\n <WorkbenchSubAction\n key={item.action}\n action={item}\n data={data}\n isFirst={isFirst}\n isLast={isLast}\n onActionClick={onActionClick}\n />\n ))}\n </div>\n );\n}\n\ninterface WorkbenchSubActionProps {\n action: WorkbenchTreeAction;\n data?: unknown;\n isFirst?: boolean;\n isLast?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nfunction WorkbenchSubAction({\n action,\n data,\n isFirst,\n isLast,\n onActionClick,\n}: WorkbenchSubActionProps): React.ReactElement {\n const disabled =\n (isFirst && action.action === \"move-up\") ||\n (isLast && action.action === \"move-down\");\n\n const handleActionClick = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n disabled ||\n onActionClick?.({\n action: action.action,\n data: data,\n });\n },\n [action.action, data, disabled, onActionClick]\n );\n\n const preventMouseEvent = useCallback((event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n <a\n className={classNames(styles.action, { [styles.disabled]: disabled })}\n title={action.title}\n role=\"button\"\n onClick={handleActionClick}\n onContextMenu={preventMouseEvent}\n onMouseDown={preventMouseEvent}\n >\n {action.iconUseBrick?.useBrick ? (\n <BrickAsComponent useBrick={action.iconUseBrick.useBrick} data={data} />\n ) : (\n <GeneralIcon icon={action.icon} />\n )}\n </a>\n );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"file":"WorkbenchMiniActionBar.js","names":["React","useCallback","useEffect","useMemo","useRef","classNames","BrickAsComponent","looseCheckIfByTransform","GeneralIcon","styles","WorkbenchMiniActionBar","data","className","gap","isFirst","isLast","actions","actionsHidden","useNativeEvent","onActionClick","enabledActions","filter","item","length","actionsBar","map","action","WorkbenchSubAction","disabled","linkRef","handleActionClick","event","preventDefault","stopPropagation","link","current","addEventListener","removeEventListener","preventMouseEvent","title","iconUseBrick","useBrick","icon"],"sources":["../../../src/workbench-mini-action-bar/WorkbenchMiniActionBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport classNames from \"classnames\";\nimport {\n BrickAsComponent,\n looseCheckIfByTransform,\n} from \"@next-core/brick-kit\";\nimport { GeneralIcon } from \"@next-libs/basic-components\";\nimport { WorkbenchTreeAction, ActionClickDetail } from \"../interfaces\";\n\nimport styles from \"./WorkbenchMiniActionBar.module.css\";\n\nexport interface WorkbenchSubActionBarProps {\n data?: unknown;\n className?: string;\n gap?: number;\n isFirst?: boolean;\n isLast?: boolean;\n actions?: WorkbenchTreeAction[];\n actionsHidden?: boolean;\n useNativeEvent?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nexport function WorkbenchMiniActionBar({\n data,\n className,\n gap,\n isFirst,\n isLast,\n actions,\n actionsHidden,\n useNativeEvent,\n onActionClick,\n}: WorkbenchSubActionBarProps): React.ReactElement {\n const enabledActions = useMemo(\n () => actions?.filter((item) => looseCheckIfByTransform(item, data)),\n [actions, data]\n );\n\n if (actionsHidden || !enabledActions?.length) {\n return null;\n }\n\n return (\n <div className={classNames(styles.actionsBar, className)} style={{ gap }}>\n {enabledActions.map((item) => (\n <WorkbenchSubAction\n key={item.action}\n action={item}\n data={data}\n isFirst={isFirst}\n isLast={isLast}\n useNativeEvent={useNativeEvent}\n onActionClick={onActionClick}\n />\n ))}\n </div>\n );\n}\n\ninterface WorkbenchSubActionProps {\n action: WorkbenchTreeAction;\n data?: unknown;\n isFirst?: boolean;\n isLast?: boolean;\n useNativeEvent?: boolean;\n onActionClick?(detail: ActionClickDetail): void;\n}\n\nfunction WorkbenchSubAction({\n action,\n data,\n isFirst,\n isLast,\n useNativeEvent,\n onActionClick,\n}: WorkbenchSubActionProps): React.ReactElement {\n const disabled =\n (isFirst && action.action === \"move-up\") ||\n (isLast && action.action === \"move-down\");\n const linkRef = useRef<HTMLAnchorElement>();\n\n const handleActionClick = useCallback(\n (event: MouseEvent | React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n disabled ||\n onActionClick?.({\n action: action.action,\n data: data,\n });\n },\n [action.action, data, disabled, onActionClick]\n );\n\n useEffect(() => {\n const link = linkRef.current;\n if (!link || !useNativeEvent) {\n return;\n }\n link.addEventListener(\"click\", handleActionClick);\n return () => {\n link.removeEventListener(\"click\", handleActionClick);\n };\n }, [handleActionClick, useNativeEvent]);\n\n const preventMouseEvent = useCallback((event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n }, []);\n\n return (\n <a\n className={classNames(styles.action, { [styles.disabled]: disabled })}\n title={action.title}\n role=\"button\"\n ref={linkRef}\n onClick={handleActionClick}\n onContextMenu={preventMouseEvent}\n onMouseDown={preventMouseEvent}\n >\n {action.iconUseBrick?.useBrick ? (\n <BrickAsComponent useBrick={action.iconUseBrick.useBrick} data={data} />\n ) : (\n <GeneralIcon icon={action.icon} />\n )}\n </a>\n );\n}\n"],"mappings":"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"}
|
|
@@ -8,6 +8,7 @@ export interface WorkbenchSubActionBarProps {
|
|
|
8
8
|
isLast?: boolean;
|
|
9
9
|
actions?: WorkbenchTreeAction[];
|
|
10
10
|
actionsHidden?: boolean;
|
|
11
|
+
useNativeEvent?: boolean;
|
|
11
12
|
onActionClick?(detail: ActionClickDetail): void;
|
|
12
13
|
}
|
|
13
|
-
export declare function WorkbenchMiniActionBar({ data, className, gap, isFirst, isLast, actions, actionsHidden, onActionClick, }: WorkbenchSubActionBarProps): React.ReactElement;
|
|
14
|
+
export declare function WorkbenchMiniActionBar({ data, className, gap, isFirst, isLast, actions, actionsHidden, useNativeEvent, onActionClick, }: WorkbenchSubActionBarProps): React.ReactElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@next-libs/visual-builder",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.5",
|
|
4
4
|
"description": "> TODO: description",
|
|
5
5
|
"homepage": "https://github.com/easyops-cn/next-libs/tree/master/libs/visual-builder",
|
|
6
6
|
"license": "GPL-3.0",
|
|
@@ -29,11 +29,11 @@
|
|
|
29
29
|
"@next-dll/ace": "*"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@next-libs/basic-components": "^5.3.
|
|
33
|
-
"@next-libs/code-editor-components": "^4.10.
|
|
34
|
-
"@next-libs/forms": "^3.5.
|
|
32
|
+
"@next-libs/basic-components": "^5.3.6",
|
|
33
|
+
"@next-libs/code-editor-components": "^4.10.8",
|
|
34
|
+
"@next-libs/forms": "^3.5.3",
|
|
35
35
|
"@types/react-color": "^3.0.6",
|
|
36
36
|
"react-color": "^2.19.3"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "13f443b174ac11c0c087500312935ed232d80785"
|
|
39
39
|
}
|