@coding-flow/flow-design 0.0.35 → 0.0.38

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 (16) hide show
  1. package/dist/components/design-editor/components/base-node/styles.js +15 -2
  2. package/dist/components/design-editor/components/branch-adder/index.js +1 -1
  3. package/dist/components/design-editor/components/node-icon/index.js +39 -62
  4. package/dist/components/design-editor/components/sidebar/sidebar-node-renderer.js +1 -0
  5. package/dist/components/design-editor/components/sidebar/sidebar-renderer.js +1 -1
  6. package/dist/components/design-editor/node-components/header/index.js +8 -4
  7. package/dist/components/design-editor/node-components/manual-title/index.js +9 -6
  8. package/dist/components/design-editor/node-components/panel/index.js +4 -2
  9. package/dist/components/design-editor/node-components/strategy/operator-load.js +3 -12
  10. package/dist/components/design-editor/nodes/condition-else-branch/form-meta.js +8 -18
  11. package/dist/components/design-editor/nodes/condition-else-branch/index.js +1 -4
  12. package/dist/components/design-editor/nodes/inclusive-else-branch/form-meta.js +8 -18
  13. package/dist/components/design-editor/nodes/inclusive-else-branch/index.js +1 -4
  14. package/dist/components/design-editor/nodes/router/index.js +1 -1
  15. package/dist/components/design-editor/styles.js +6 -2
  16. package/package.json +7 -7
package/dist/components/design-editor/components/base-node/styles.js CHANGED
@@ -4,18 +4,31 @@ import styled_components from "styled-components";
4
4
  const BaseNodeStyle = styled_components.div`
5
5
  align-items: flex-start;
6
6
  background-color: #fff;
7
- border: 1px solid rgba(6, 7, 9, 0.15);
7
+ border: 1px solid rgba(6, 7, 9, 0.1);
8
8
  border-radius: 8px;
9
- box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.02);
9
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04),
10
+ 0 4px 10px -2px rgba(0, 0, 0, 0.08),
11
+ 0 10px 24px -6px rgba(0, 0, 0, 0.06);
10
12
  display: flex;
11
13
  flex-direction: column;
12
14
  justify-content: center;
13
15
  position: relative;
14
16
  width: 260px;
15
17
  cursor: default;
18
+ transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
19
+
20
+ &:hover {
21
+ transform: translateY(-2px);
22
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06),
23
+ 0 8px 16px -2px rgba(0, 0, 0, 0.12),
24
+ 0 16px 32px -8px rgba(0, 0, 0, 0.1);
25
+ }
16
26
 
17
27
  &.activated {
18
28
  border: 1px solid ${(props)=>props.primaryColor || '#82a7fc'};
29
+ box-shadow: 0 0 0 3px ${(props)=>props.primaryColor ? `${props.primaryColor}29` : 'rgba(130, 167, 252, 0.16)'},
30
+ 0 4px 12px -2px rgba(0, 0, 0, 0.1),
31
+ 0 14px 30px -8px rgba(0, 0, 0, 0.08);
19
32
  }
20
33
  `;
21
34
  const ErrorIcon = ()=>/*#__PURE__*/ jsx(InfoCircleOutlined, {
package/dist/components/design-editor/components/branch-adder/index.js CHANGED
@@ -36,7 +36,7 @@ const BranchAdderRender = (props)=>{
36
36
  /*#__PURE__*/ jsx(NodeHeader, {
37
37
  iconEnable: true,
38
38
  style: {
39
- width: 120
39
+ width: 160
40
40
  }
41
41
  }),
42
42
  /*#__PURE__*/ jsx(Button, {
package/dist/components/design-editor/components/node-icon/index.js CHANGED
@@ -2,73 +2,50 @@ import { jsx } from "react/jsx-runtime";
2
2
  import "react";
3
3
  import { theme } from "antd";
4
4
  import { ApiOutlined, AuditOutlined, BellOutlined, BranchesOutlined, ClockCircleOutlined, EditOutlined, MergeOutlined, NodeExpandOutlined, PoweroffOutlined, PullRequestOutlined, ShareAltOutlined, StarOutlined, UserOutlined } from "@ant-design/icons";
5
+ const ICON_MAP = {
6
+ APPROVAL: AuditOutlined,
7
+ CONDITION: BranchesOutlined,
8
+ CONDITION_BRANCH: BranchesOutlined,
9
+ CONDITION_ELSE_BRANCH: BranchesOutlined,
10
+ DELAY: ClockCircleOutlined,
11
+ END: PoweroffOutlined,
12
+ HANDLE: EditOutlined,
13
+ MANUAL: UserOutlined,
14
+ MANUAL_BRANCH: UserOutlined,
15
+ INCLUSIVE: MergeOutlined,
16
+ INCLUSIVE_BRANCH: MergeOutlined,
17
+ INCLUSIVE_ELSE_BRANCH: MergeOutlined,
18
+ NOTIFY: BellOutlined,
19
+ PARALLEL: NodeExpandOutlined,
20
+ PARALLEL_BRANCH: NodeExpandOutlined,
21
+ ROUTER: PullRequestOutlined,
22
+ START: StarOutlined,
23
+ SUB_PROCESS: ShareAltOutlined,
24
+ TRIGGER: ApiOutlined
25
+ };
5
26
  const NodeIcon = (props)=>{
6
- const icon = props.type;
7
27
  const { token } = theme.useToken();
8
- const style = {
9
- fontSize: 18,
28
+ const IconComponent = props.type ? ICON_MAP[props.type] : void 0;
29
+ if (!IconComponent) return null;
30
+ const wrapperStyle = {
31
+ display: "inline-flex",
32
+ alignItems: "center",
33
+ justifyContent: "center",
34
+ width: 20,
35
+ height: 20,
10
36
  marginRight: 4,
11
37
  marginLeft: 4,
12
- color: token.colorPrimary
38
+ borderRadius: 5,
39
+ background: token.colorPrimaryBg
13
40
  };
14
- if (!icon) return null;
15
- if ('APPROVAL' === icon) return /*#__PURE__*/ jsx(AuditOutlined, {
16
- style: style
17
- });
18
- if ('CONDITION' === icon) return /*#__PURE__*/ jsx(BranchesOutlined, {
19
- style: style
20
- });
21
- if ('CONDITION_BRANCH' === icon) return /*#__PURE__*/ jsx(BranchesOutlined, {
22
- style: style
23
- });
24
- if ('CONDITION_ELSE_BRANCH' === icon) return /*#__PURE__*/ jsx(BranchesOutlined, {
25
- style: style
26
- });
27
- if ('DELAY' === icon) return /*#__PURE__*/ jsx(ClockCircleOutlined, {
28
- style: style
29
- });
30
- if ('END' === icon) return /*#__PURE__*/ jsx(PoweroffOutlined, {
31
- style: style
32
- });
33
- if ('HANDLE' === icon) return /*#__PURE__*/ jsx(EditOutlined, {
34
- style: style
35
- });
36
- if ('MANUAL' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
37
- style: style
38
- });
39
- if ('MANUAL_BRANCH' === icon) return /*#__PURE__*/ jsx(UserOutlined, {
40
- style: style
41
- });
42
- if ('INCLUSIVE' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
43
- style: style
44
- });
45
- if ('INCLUSIVE_BRANCH' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
46
- style: style
47
- });
48
- if ('INCLUSIVE_ELSE_BRANCH' === icon) return /*#__PURE__*/ jsx(MergeOutlined, {
49
- style: style
50
- });
51
- if ('NOTIFY' === icon) return /*#__PURE__*/ jsx(BellOutlined, {
52
- style: style
53
- });
54
- if ('PARALLEL' === icon) return /*#__PURE__*/ jsx(NodeExpandOutlined, {
55
- style: style
56
- });
57
- if ('PARALLEL_BRANCH' === icon) return /*#__PURE__*/ jsx(NodeExpandOutlined, {
58
- style: style
59
- });
60
- if ('ROUTER' === icon) return /*#__PURE__*/ jsx(PullRequestOutlined, {
61
- style: style
62
- });
63
- if ('START' === icon) return /*#__PURE__*/ jsx(StarOutlined, {
64
- style: style
65
- });
66
- if ('SUB_PROCESS' === icon) return /*#__PURE__*/ jsx(ShareAltOutlined, {
67
- style: style
68
- });
69
- if ('TRIGGER' === icon) return /*#__PURE__*/ jsx(ApiOutlined, {
70
- style: style
41
+ return /*#__PURE__*/ jsx("span", {
42
+ style: wrapperStyle,
43
+ children: /*#__PURE__*/ jsx(IconComponent, {
44
+ style: {
45
+ fontSize: 14,
46
+ color: token.colorPrimary
47
+ }
48
+ })
71
49
  });
72
- return null;
73
50
  };
74
51
  export { NodeIcon };
package/dist/components/design-editor/components/sidebar/sidebar-node-renderer.js CHANGED
@@ -13,6 +13,7 @@ function SidebarNodeRenderer(props) {
13
13
  overflowY: 'auto',
14
14
  borderRadius: 8,
15
15
  border: '1px solid rgba(82,100,154, 0.13)',
16
+ boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 8px 24px -6px rgba(0, 0, 0, 0.1)',
16
17
  boxSizing: 'border-box'
17
18
  },
18
19
  children: nodeRender.form?.render()
package/dist/components/design-editor/components/sidebar/sidebar-renderer.js CHANGED
@@ -59,7 +59,7 @@ const SidebarRenderer = ({ nodeId })=>{
59
59
  };
60
60
  const nodeFormPanelFactory = {
61
61
  key: 'node-form-panel',
62
- defaultSize: 400,
62
+ defaultSize: 500,
63
63
  render: (props)=>/*#__PURE__*/ jsx(SidebarRenderer, {
64
64
  ...props
65
65
  })
package/dist/components/design-editor/node-components/header/index.js CHANGED
@@ -75,10 +75,14 @@ const NodeHeader = (props)=>{
75
75
  panelManager
76
76
  ]);
77
77
  const headerStyle = {
78
- width: "100%",
79
- padding: isSidebar ? "4px 5px" : "5px",
80
- borderBottom: "1px solid #f0f0f0",
81
- marginBottom: 8,
78
+ width: "calc(100% + 6px)",
79
+ boxSizing: "border-box",
80
+ margin: "-3px -3px 8px -3px",
81
+ padding: "3px 8px",
82
+ background: token.colorPrimaryBg,
83
+ borderBottom: `1px solid ${token.colorPrimaryBorder}`,
84
+ borderTopLeftRadius: 7,
85
+ borderTopRightRadius: 7,
82
86
  position: "relative",
83
87
  ...props.style
84
88
  };
package/dist/components/design-editor/node-components/manual-title/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { useCallback, useState } from "react";
3
- import { useIsSidebar } from "../../hooks/index.js";
4
3
  import { Flex, Input, Space, theme } from "antd";
5
4
  import { Field, useClientContext } from "@flowgram.ai/fixed-layout-editor";
6
5
  import { EditOutlined } from "@ant-design/icons";
@@ -55,14 +54,18 @@ const HeaderTitle = ({ title, onChange, readonly })=>{
55
54
  };
56
55
  const ManualTitle = (props)=>{
57
56
  const { node } = useNodeRenderContext();
58
- const isSidebar = useIsSidebar();
57
+ const { token } = theme.useToken();
59
58
  const iconEnable = props.iconEnable ?? true;
60
59
  const nodeType = node.getNodeRegistry().type;
61
60
  const headerStyle = {
62
- width: "100%",
63
- padding: isSidebar ? "4px 5px" : "5px",
64
- borderBottom: "1px solid #f0f0f0",
65
- marginBottom: 8,
61
+ width: "calc(100% + 6px)",
62
+ boxSizing: "border-box",
63
+ margin: "-3px -3px 8px -3px",
64
+ padding: "3px 8px",
65
+ background: token.colorPrimaryBg,
66
+ borderBottom: `1px solid ${token.colorPrimaryBorder}`,
67
+ borderTopLeftRadius: 7,
68
+ borderTopRightRadius: 7,
66
69
  position: "relative",
67
70
  ...props.style
68
71
  };
package/dist/components/design-editor/node-components/panel/index.js CHANGED
@@ -50,7 +50,8 @@ const $NodePanel = (props)=>{
50
50
  if (isSidebar || canDeleteNode) return /*#__PURE__*/ jsx("div", {
51
51
  style: {
52
52
  width: '100%',
53
- padding: 3
53
+ padding: 3,
54
+ boxSizing: 'border-box'
54
55
  },
55
56
  children: /*#__PURE__*/ jsx(Flex, {
56
57
  vertical: true,
@@ -62,7 +63,8 @@ const $NodePanel = (props)=>{
62
63
  return /*#__PURE__*/ jsxs("div", {
63
64
  style: {
64
65
  width: '100%',
65
- padding: 3
66
+ padding: 3,
67
+ boxSizing: 'border-box'
66
68
  },
67
69
  onMouseEnter: ()=>setIsHovered(true),
68
70
  onMouseLeave: ()=>setIsHovered(false),
package/dist/components/design-editor/node-components/strategy/operator-load.js CHANGED
@@ -19,10 +19,6 @@ const SELECT_TYPE_OPTIONS = [
19
19
  value: 'APPROVER_SELECT'
20
20
  }
21
21
  ];
22
- const SELECT_TYPE_LABEL_MAP = {
23
- INITIATOR_SELECT: '发起人设定',
24
- APPROVER_SELECT: '审批人设定'
25
- };
26
22
  const OperatorLoadStrategy = ()=>{
27
23
  const [form] = Form.useForm();
28
24
  const [visible, setVisible] = react.useState(false);
@@ -52,19 +48,14 @@ const OperatorLoadStrategy = ()=>{
52
48
  /*#__PURE__*/ jsx(Field, {
53
49
  name: "OperatorLoadStrategy.selectType",
54
50
  render: ({ field: { value: selectType } })=>{
55
- if (selectType && 'SCRIPT' !== selectType) return /*#__PURE__*/ jsx(Form.Item, {
56
- label: "当前操作人",
57
- children: /*#__PURE__*/ jsx("span", {
58
- children: SELECT_TYPE_LABEL_MAP[selectType] || selectType
59
- })
60
- });
51
+ const isRangeMode = 'INITIATOR_SELECT' === selectType || 'APPROVER_SELECT' === selectType;
61
52
  return /*#__PURE__*/ jsx(Form.Item, {
62
- label: "当前操作人",
53
+ label: isRangeMode ? "设定人员范围" : "当前操作人",
63
54
  name: [
64
55
  "OperatorLoadStrategy",
65
56
  "script"
66
57
  ],
67
- tooltip: "设定流程的审批人",
58
+ tooltip: isRangeMode ? "设定可选人员范围，留空表示不限范围（可选任意人）" : "设定流程的审批人",
68
59
  children: /*#__PURE__*/ jsx(Field, {
69
60
  name: "OperatorLoadStrategy.script",
70
61
  render: ({ field: { value, onChange } })=>/*#__PURE__*/ jsxs(Space.Compact, {
package/dist/components/design-editor/nodes/condition-else-branch/form-meta.js CHANGED
@@ -3,25 +3,15 @@ import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-m
3
3
  import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
4
4
  import { NodePanel } from "../../node-components/panel/index.js";
5
5
  import "react";
6
- import { NodeIcon } from "../../components/node-icon/index.js";
7
- import { Space } from "antd";
8
- const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
6
+ import { NodeHeader } from "../../node-components/header/index.js";
7
+ const renderForm = (data)=>/*#__PURE__*/ jsxs(NodePanel, {
9
8
  data: data,
10
- children: /*#__PURE__*/ jsxs(Space, {
11
- style: {
12
- width: 100,
13
- textAlign: 'center',
14
- padding: 5
15
- },
16
- children: [
17
- /*#__PURE__*/ jsx(NodeIcon, {
18
- type: "CONDITION_ELSE_BRANCH"
19
- }),
20
- /*#__PURE__*/ jsx("span", {
21
- children: "其他情况"
22
- })
23
- ]
24
- })
9
+ children: [
10
+ /*#__PURE__*/ jsx(NodeHeader, {}),
11
+ /*#__PURE__*/ jsx("span", {
12
+ children: "else条件"
13
+ })
14
+ ]
25
15
  });
26
16
  const formMeta = {
27
17
  render: renderForm,
package/dist/components/design-editor/nodes/condition-else-branch/index.js CHANGED
@@ -7,10 +7,7 @@ const ConditionElseBranchNodeRegistry = {
7
7
  copyDisable: true,
8
8
  addDisable: true,
9
9
  deleteDisable: true,
10
- sidebarDisable: true,
11
- style: {
12
- width: '100%'
13
- }
10
+ sidebarDisable: true
14
11
  },
15
12
  info: {
16
13
  icon: 'CONDITION_ELSE_BRANCH',
package/dist/components/design-editor/nodes/inclusive-else-branch/form-meta.js CHANGED
@@ -3,25 +3,15 @@ import { provideJsonSchemaOutputs, syncVariableTitle } from "@flowgram.ai/form-m
3
3
  import { ValidateTrigger } from "@flowgram.ai/fixed-layout-editor";
4
4
  import { NodePanel } from "../../node-components/panel/index.js";
5
5
  import "react";
6
- import { NodeIcon } from "../../components/node-icon/index.js";
7
- import { Space } from "antd";
8
- const renderForm = (data)=>/*#__PURE__*/ jsx(NodePanel, {
6
+ import { NodeHeader } from "../../node-components/header/index.js";
7
+ const renderForm = (data)=>/*#__PURE__*/ jsxs(NodePanel, {
9
8
  data: data,
10
- children: /*#__PURE__*/ jsxs(Space, {
11
- style: {
12
- width: 100,
13
- textAlign: 'center',
14
- padding: 5
15
- },
16
- children: [
17
- /*#__PURE__*/ jsx(NodeIcon, {
18
- type: "INCLUSIVE_ELSE_BRANCH"
19
- }),
20
- /*#__PURE__*/ jsx("span", {
21
- children: "其他情况"
22
- })
23
- ]
24
- })
9
+ children: [
10
+ /*#__PURE__*/ jsx(NodeHeader, {}),
11
+ /*#__PURE__*/ jsx("span", {
12
+ children: "else条件"
13
+ })
14
+ ]
25
15
  });
26
16
  const formMeta = {
27
17
  render: renderForm,
package/dist/components/design-editor/nodes/inclusive-else-branch/index.js CHANGED
@@ -6,10 +6,7 @@ const InclusiveElseBranchNodeRegistry = {
6
6
  copyDisable: true,
7
7
  addDisable: true,
8
8
  sidebarDisable: true,
9
- deleteDisable: true,
10
- style: {
11
- width: '100%'
12
- }
9
+ deleteDisable: true
13
10
  },
14
11
  info: {
15
12
  icon: 'INCLUSIVE_ELSE_BRANCH',
package/dist/components/design-editor/nodes/router/index.js CHANGED
@@ -13,7 +13,7 @@ const RouterNodeRegistry = {
13
13
  },
14
14
  canAdd (ctx, from) {
15
15
  while(from.parent){
16
- if ('CONDITION_BRANCH' === from.parent.flowNodeType) return true;
16
+ if ('CONDITION_BRANCH' === from.parent.flowNodeType || 'CONDITION_ELSE_BRANCH' === from.parent.flowNodeType) return true;
17
17
  from = from.parent;
18
18
  }
19
19
  return false;
package/dist/components/design-editor/styles.js CHANGED
@@ -17,7 +17,9 @@ const VersionSection = styled_components.div`
17
17
  background-color: #fff;
18
18
  border: 1px solid rgba(68, 83, 130, 0.25);
19
19
  border-radius: 10px;
20
- box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px;
20
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04),
21
+ 0 6px 16px -4px rgba(0, 0, 0, 0.12),
22
+ 0 12px 28px -8px rgba(0, 0, 0, 0.08);
21
23
  column-gap: 10px;
22
24
  height: 40px;
23
25
  padding: 0 4px;
@@ -40,7 +42,9 @@ const ToolSection = styled_components.div`
40
42
  background-color: #fff;
41
43
  border: 1px solid rgba(68, 83, 130, 0.25);
42
44
  border-radius: 10px;
43
- box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 6px 0px, rgba(0, 0, 0, 0.02) 0px 4px 12px 0px;
45
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04),
46
+ 0 6px 16px -4px rgba(0, 0, 0, 0.12),
47
+ 0 12px 28px -8px rgba(0, 0, 0, 0.08);
44
48
  column-gap: 10px;
45
49
  height: 40px;
46
50
  padding: 0 4px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coding-flow/flow-design",
3
- "version": "0.0.35",
3
+ "version": "0.0.38",
4
4
  "description": "flow-engine design components ",
5
5
  "type": "module",
6
6
  "keywords": [
@@ -54,16 +54,16 @@
54
54
  "nanoid": "^5.1.6",
55
55
  "react-redux": "^9.2.0",
56
56
  "styled-components": "^5.3.11",
57
- "@coding-flow/flow-core": "0.0.35",
58
- "@coding-flow/flow-icons": "0.0.35",
59
- "@coding-flow/flow-types": "0.0.35",
60
- "@coding-flow/flow-pc-ui": "0.0.35"
57
+ "@coding-flow/flow-core": "0.0.38",
58
+ "@coding-flow/flow-icons": "0.0.38",
59
+ "@coding-flow/flow-types": "0.0.38",
60
+ "@coding-flow/flow-pc-ui": "0.0.38"
61
61
  },
62
62
  "devDependencies": {
63
63
  "@types/lodash-es": "^4.17.12",
64
64
  "@types/styled-components": "^5.1.36",
65
- "@coding-flow/flow-core": "0.0.35",
66
- "@coding-flow/flow-types": "0.0.35"
65
+ "@coding-flow/flow-types": "0.0.38",
66
+ "@coding-flow/flow-core": "0.0.38"
67
67
  },
68
68
  "scripts": {
69
69
  "build": "rslib build",