@vef-framework/components 1.0.132 → 1.0.134

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 (99) hide show
  1. package/cjs/index.cjs +1 -1
  2. package/cjs/vef-layout/components/user-avatar.cjs +1 -1
  3. package/esm/index.js +1 -1
  4. package/esm/vef-layout/components/user-avatar.js +1 -1
  5. package/package.json +4 -6
  6. package/types/index.d.ts +0 -2
  7. package/types/vef-layout/props.d.ts +8 -0
  8. package/cjs/internal/base.css.cjs +0 -495
  9. package/cjs/vef-approval-flow-editor/components/edge.cjs +0 -7
  10. package/cjs/vef-approval-flow-editor/components/label-value.cjs +0 -18
  11. package/cjs/vef-approval-flow-editor/components/node-content.cjs +0 -17
  12. package/cjs/vef-approval-flow-editor/components/node-selector.cjs +0 -13
  13. package/cjs/vef-approval-flow-editor/components/node-toolbar.cjs +0 -2
  14. package/cjs/vef-approval-flow-editor/components/nodes/approval.cjs +0 -2
  15. package/cjs/vef-approval-flow-editor/components/nodes/condition.cjs +0 -2
  16. package/cjs/vef-approval-flow-editor/components/nodes/end.cjs +0 -2
  17. package/cjs/vef-approval-flow-editor/components/nodes/handle.cjs +0 -2
  18. package/cjs/vef-approval-flow-editor/components/nodes/index.cjs +0 -2
  19. package/cjs/vef-approval-flow-editor/components/nodes/submit.cjs +0 -2
  20. package/cjs/vef-approval-flow-editor/components/selector-content.cjs +0 -25
  21. package/cjs/vef-approval-flow-editor/components/source-handle.cjs +0 -2
  22. package/cjs/vef-approval-flow-editor/components/target-handle.cjs +0 -2
  23. package/cjs/vef-approval-flow-editor/constants.cjs +0 -2
  24. package/cjs/vef-approval-flow-editor/helper.cjs +0 -2
  25. package/cjs/vef-approval-flow-editor/hooks/use-edges-interaction.cjs +0 -2
  26. package/cjs/vef-approval-flow-editor/hooks/use-element-selection.cjs +0 -2
  27. package/cjs/vef-approval-flow-editor/hooks/use-nodes-interaction.cjs +0 -2
  28. package/cjs/vef-approval-flow-editor/index.cjs +0 -2
  29. package/cjs/vef-approval-flow-editor/models/edge-node.cjs +0 -2
  30. package/cjs/vef-approval-flow-editor/models/flow-node.cjs +0 -2
  31. package/cjs/vef-approval-flow-editor/props.cjs +0 -2
  32. package/cjs/vef-approval-flow-editor/store.cjs +0 -2
  33. package/cjs/vef-approval-flow-editor/styles.cjs +0 -42
  34. package/cjs/vef-approval-flow-editor/types.cjs +0 -2
  35. package/cjs/vef-data-grid/index.cjs +0 -2
  36. package/cjs/vef-data-grid/props.cjs +0 -2
  37. package/cjs/vef-data-table/index.cjs +0 -2
  38. package/cjs/vef-data-table/props.cjs +0 -2
  39. package/esm/internal/base.css.js +0 -495
  40. package/esm/vef-approval-flow-editor/components/edge.js +0 -7
  41. package/esm/vef-approval-flow-editor/components/label-value.js +0 -18
  42. package/esm/vef-approval-flow-editor/components/node-content.js +0 -17
  43. package/esm/vef-approval-flow-editor/components/node-selector.js +0 -13
  44. package/esm/vef-approval-flow-editor/components/node-toolbar.js +0 -2
  45. package/esm/vef-approval-flow-editor/components/nodes/approval.js +0 -2
  46. package/esm/vef-approval-flow-editor/components/nodes/condition.js +0 -2
  47. package/esm/vef-approval-flow-editor/components/nodes/end.js +0 -2
  48. package/esm/vef-approval-flow-editor/components/nodes/handle.js +0 -2
  49. package/esm/vef-approval-flow-editor/components/nodes/index.js +0 -2
  50. package/esm/vef-approval-flow-editor/components/nodes/submit.js +0 -2
  51. package/esm/vef-approval-flow-editor/components/selector-content.js +0 -25
  52. package/esm/vef-approval-flow-editor/components/source-handle.js +0 -2
  53. package/esm/vef-approval-flow-editor/components/target-handle.js +0 -2
  54. package/esm/vef-approval-flow-editor/constants.js +0 -2
  55. package/esm/vef-approval-flow-editor/helper.js +0 -2
  56. package/esm/vef-approval-flow-editor/hooks/use-edges-interaction.js +0 -2
  57. package/esm/vef-approval-flow-editor/hooks/use-element-selection.js +0 -2
  58. package/esm/vef-approval-flow-editor/hooks/use-nodes-interaction.js +0 -2
  59. package/esm/vef-approval-flow-editor/index.js +0 -2
  60. package/esm/vef-approval-flow-editor/models/edge-node.js +0 -2
  61. package/esm/vef-approval-flow-editor/models/flow-node.js +0 -2
  62. package/esm/vef-approval-flow-editor/props.js +0 -2
  63. package/esm/vef-approval-flow-editor/store.js +0 -2
  64. package/esm/vef-approval-flow-editor/styles.js +0 -42
  65. package/esm/vef-approval-flow-editor/types.js +0 -2
  66. package/esm/vef-data-grid/index.js +0 -2
  67. package/esm/vef-data-grid/props.js +0 -2
  68. package/esm/vef-data-table/index.js +0 -2
  69. package/esm/vef-data-table/props.js +0 -2
  70. package/types/vef-approval-flow-editor/components/edge.d.ts +0 -4
  71. package/types/vef-approval-flow-editor/components/label-value.d.ts +0 -10
  72. package/types/vef-approval-flow-editor/components/node-content.d.ts +0 -9
  73. package/types/vef-approval-flow-editor/components/node-selector.d.ts +0 -12
  74. package/types/vef-approval-flow-editor/components/node-toolbar.d.ts +0 -8
  75. package/types/vef-approval-flow-editor/components/nodes/approval.d.ts +0 -3
  76. package/types/vef-approval-flow-editor/components/nodes/condition.d.ts +0 -3
  77. package/types/vef-approval-flow-editor/components/nodes/end.d.ts +0 -3
  78. package/types/vef-approval-flow-editor/components/nodes/handle.d.ts +0 -3
  79. package/types/vef-approval-flow-editor/components/nodes/index.d.ts +0 -15
  80. package/types/vef-approval-flow-editor/components/nodes/submit.d.ts +0 -3
  81. package/types/vef-approval-flow-editor/components/selector-content.d.ts +0 -16
  82. package/types/vef-approval-flow-editor/components/source-handle.d.ts +0 -2
  83. package/types/vef-approval-flow-editor/components/target-handle.d.ts +0 -2
  84. package/types/vef-approval-flow-editor/constants.d.ts +0 -15
  85. package/types/vef-approval-flow-editor/helper.d.ts +0 -31
  86. package/types/vef-approval-flow-editor/hooks/use-edges-interaction.d.ts +0 -11
  87. package/types/vef-approval-flow-editor/hooks/use-element-selection.d.ts +0 -9
  88. package/types/vef-approval-flow-editor/hooks/use-nodes-interaction.d.ts +0 -5
  89. package/types/vef-approval-flow-editor/index.d.ts +0 -5
  90. package/types/vef-approval-flow-editor/models/edge-node.d.ts +0 -32
  91. package/types/vef-approval-flow-editor/models/flow-node.d.ts +0 -106
  92. package/types/vef-approval-flow-editor/props.d.ts +0 -5
  93. package/types/vef-approval-flow-editor/store.d.ts +0 -25
  94. package/types/vef-approval-flow-editor/styles.d.ts +0 -2
  95. package/types/vef-approval-flow-editor/types.d.ts +0 -73
  96. package/types/vef-data-grid/index.d.ts +0 -4
  97. package/types/vef-data-grid/props.d.ts +0 -5
  98. package/types/vef-data-table/index.d.ts +0 -4
  99. package/types/vef-data-table/props.d.ts +0 -5
@@ -1,25 +0,0 @@
1
- "use strict";
2
- import{jsx as t,jsxs as g}from"@emotion/react/jsx-runtime";import{css as l}from"@emotion/react";import{themeVariables as o}from"@vef-framework/shared";import{useReactFlow as $}from"@xyflow/react";import{useMemo as h,useCallback as b}from"react";import x from"../../vef-icon/index.js";import{nodesMetadata as y}from"../constants.js";const k=l`
3
- min-width: 160px;
4
- display: flex;
5
- flex-direction: column;
6
- gap: ${o.margin};
7
- `,C=l`
8
- display: flex;
9
- align-items: center;
10
- gap: ${o.marginSm};
11
- padding: ${o.paddingXs} ${o.paddingSm};
12
- border-radius: ${o.borderRadius};
13
- cursor: pointer;
14
- transition: background-color ${o.motionDurationMid} ${o.motionEaseInOutCirc};
15
-
16
- &:hover {
17
- background-color: ${o.colorFillSecondary};
18
- }
19
-
20
- > span:first-of-type {
21
- }
22
-
23
- > span:last-of-type {
24
- }
25
- `;function v({items:n,onAddNode:a}){const m=h(()=>n.map(r=>y[r]),[n]),{setEdges:d,addNodes:c}=$(),p=b(r=>{const[i,e,s]=a(r);d(u=>[...u.filter(f=>!s.includes(f.id)),...e]),c(i)},[a,d,c]);return t("div",{css:k,children:m.map(({type:r,label:i,icon:e,color:s})=>g("div",{css:C,onClick:()=>p(r),children:[t(x,{color:s,size:"huge",children:e}),t("span",{children:i})]},i))})}export{v as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsx as t}from"@emotion/react/jsx-runtime";import{useNodesData as a,useNodeId as l,useNodeConnections as m,Handle as c,Position as p}from"@xyflow/react";import{useCallback as u}from"react";import{createNode as N,createEdge as f}from"../helper.js";import g from"./node-selector.js";function y(){const{node:e}=a(l()).data,n=m({handleType:"source"}),r=u(i=>{const o=N(i);return[o,[f(e.getId(),o.id)],[]]},[e]),s=e.getAvailableNextNodeTypes().length>0,d=n.length>0;return t(c,{position:p.Bottom,type:"source",children:!d&&s&&t(g,{items:e.getAvailableNextNodeTypes(),selectorContentPosition:"bottom",onAddNode:r})})}export{y as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsx as t}from"@emotion/react/jsx-runtime";import{Handle as o,Position as r}from"@xyflow/react";function e(){return t(o,{position:r.Top,type:"target"})}export{e as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsx as a}from"@emotion/react/jsx-runtime";import{MarkerType as i}from"@xyflow/react";import{CircleIcon as d,GitCommitVerticalIcon as p,SquarePenIcon as r,StampIcon as l,SendIcon as c}from"lucide-react";import s from"./components/edge.js";import{VefFlowEdge as e}from"./models/edge-node.js";import{VefSubmitFlowNode as m,VefApprovalFlowNode as t,VefConditionFlowNode as n,VefHandleFlowNode as v,VefEndFlowNode as y}from"./models/flow-node.js";import{NodeType as o}from"./types.js";const w=[{id:"submit",data:{node:new m("submit","提交")},type:o.Submit,deletable:!1,position:{x:0,y:0}},{id:"approval",data:{node:new t("approval","审批")},type:o.Approval,position:{x:0,y:100}},{id:"condition-1",data:{node:new n("condition-1","条件1")},type:o.Condition,position:{x:0,y:200}},{id:"approval-1",data:{node:new t("approval-1","审批1")},type:o.Approval,position:{x:0,y:300}},{id:"condition-2",data:{node:new n("condition-2","条件2")},type:o.Condition,position:{x:100,y:200}},{id:"approval-2",data:{node:new t("approval-2","审批2")},type:o.Approval,position:{x:100,y:300}},{id:"handle",data:{node:new v("handle","办理")},type:o.Handle,position:{x:100,y:400}},{id:"end",data:{node:new y("end","结束")},type:o.End,deletable:!1,position:{x:0,y:400}}],g=[{id:"submit-approval",source:"submit",target:"approval",data:{edge:new e}},{id:"approval-condition-1",source:"approval",target:"condition-1",data:{edge:new e}},{id:"condition-1-approval-1",source:"condition-1",target:"approval-1",data:{edge:new e}},{id:"approval-condition-2",source:"approval",target:"condition-2",data:{edge:new e}},{id:"condition-2-approval-2",source:"condition-2",target:"approval-2",data:{edge:new e}},{id:"approval-2-handle",source:"approval-2",target:"handle",data:{edge:new e}},{id:"handle-end",source:"handle",target:"end",data:{edge:new e}},{id:"approval-1-end",source:"approval-1",target:"end",data:{edge:new e}}],u={minZoom:1},b={vef:s},f={type:"vef",deletable:!1,interactionWidth:40,markerEnd:{type:i.ArrowClosed,strokeWidth:1,height:16,width:16}},h={[o.Submit]:{type:o.Submit,label:"提交",icon:a(c,{}),color:"primary"},[o.Approval]:{type:o.Approval,label:"审批",icon:a(l,{}),color:"geekblue"},[o.Handle]:{type:o.Handle,label:"办理",icon:a(r,{}),color:"success"},[o.Condition]:{type:o.Condition,label:"条件",icon:a(p,{}),color:"warning"},[o.End]:{type:o.End,label:"结束",icon:a(d,{}),color:"cyan"}};export{f as defaultEdgeOptions,b as edgeTypes,u as fitViewOptions,g as initialEdges,w as initialNodes,h as nodesMetadata};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{graphlib as s,layout as p}from"@dagrejs/dagre";import{generateId as u}from"@vef-framework/shared";import{nodesMetadata as n}from"./constants.js";import{VefFlowEdge as c}from"./models/edge-node.js";import{VefEndFlowNode as f,VefConditionFlowNode as m,VefHandleFlowNode as w,VefApprovalFlowNode as g,VefSubmitFlowNode as h}from"./models/flow-node.js";import{NodeType as a}from"./types.js";function b(t,e){const r=new s.Graph;r.setGraph({rankdir:"TB",ranker:"network-simplex",nodesep:60,edgesep:16,ranksep:80}),r.setDefaultEdgeLabel(()=>({}));for(const o of t)r.setNode(o.id,{...o,width:o.measured?.width??240,height:o.measured?.height??100});for(const o of e)r.setEdge(o.source,o.target);return p(r),t.map(o=>{const{x:i,y:l}=r.node(o.id);return{...o,position:{x:i,y:l}}})}function d(t,e){switch(t){case a.Submit:return new h(e,n.submit.label);case a.Approval:return new g(e,n.approval.label);case a.Handle:return new w(e,n.handle.label);case a.Condition:return new m(e,n.condition.label);case a.End:return new f(e,n.end.label)}}function N(t){const e=`${t}-${u()}`;return{id:e,type:t,data:{node:d(t,e)},position:{x:0,y:0}}}function F(t,e){return{id:`e-${t}-${e}`,source:t,target:e,data:{edge:new c}}}export{F as createEdge,d as createFlowNode,N as createNode,b as layoutFlowElements};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{useReactFlow as n}from"@xyflow/react";import{useCallback as a}from"react";function s(){const{updateEdgeData:t}=n(),d=a((o,e)=>{e.data?.edge.setHovering(!0),t(e.id,e.data,{replace:!0})},[t]),r=a((o,e)=>{e.data?.edge.setHovering(!1),t(e.id,e.data,{replace:!0})},[t]);return{handleEdgeMouseEnter:d,handleEdgeMouseLeave:r}}export{s as useEdgesInteraction};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{useCallback as l}from"react";import{useApprovalFlowEditorStoreApi as d}from"../store.js";function s(){const e=d();return{handleSelectionChange:l(({nodes:t})=>{const{selectedNode:r,setSelectedNode:o}=e.getState();if(t.length===0){o(null);return}const[n]=t;n.id!==r?.getId()&&o(n.data.node)},[e])}}export{s as useElementSelection};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{useReactFlow as u,getConnectedEdges as p}from"@xyflow/react";import{useCallback as m}from"react";import{createEdge as h}from"../helper.js";import{NodeType as E}from"../types.js";function y(){const{addEdges:r,getNode:n,getEdges:s}=u();return{handleBeforeDelete:m(async({nodes:d,edges:c})=>{if(d.length===0)return!1;const[i]=d,a=c.filter(t=>t.source===i.id).map(t=>t.target);if(a.length>0){const t=[],f=c.filter(e=>e.target===i.id).map(e=>e.source),g=s();for(const e of f){const l=p([{id:e,position:{x:0,y:0},data:{}}],g).filter(o=>o.source===e);for(const o of a)n(o)?.type===E.End&&l.length>1||t.push(h(e,o))}r(t)}return!0},[r,s,n])}}export{y as useNodesInteraction};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsxs as f,jsx as t}from"@emotion/react/jsx-runtime";import{useEdgesState as p,useNodesState as g,ReactFlow as E,MiniMap as y,Controls as h,Background as S,BackgroundVariant as v,SelectionMode as C,ReactFlowProvider as b}from"@xyflow/react";import{useRef as w,useLayoutEffect as M,memo as _}from"react";import{nodeTypes as F}from"./components/nodes/index.js";import{initialEdges as $,initialNodes as x,fitViewOptions as K,edgeTypes as A,defaultEdgeOptions as B}from"./constants.js";import{layoutFlowElements as D}from"./helper.js";import{useEdgesInteraction as L}from"./hooks/use-edges-interaction.js";import{useElementSelection as N}from"./hooks/use-element-selection.js";import{useNodesInteraction as O}from"./hooks/use-nodes-interaction.js";import{ApprovalFlowEditorStoreProvider as R}from"./store.js";import{flowEditorStyle as T,flowEditorContainerStyle as V}from"./styles.js";function k(){const[e,j,r]=p($),[i,a,s]=g(x),{handleEdgeMouseEnter:l,handleEdgeMouseLeave:d}=L(),{handleSelectionChange:c}=N(),{handleBeforeDelete:u}=O(),n=w();return M(()=>{if(n.current&&e.every(o=>n.current.has(`${o.id}__${o.source}__${o.target}`)))return;const m=D(i,e);a(m),n.current=new Set(e.map(o=>`${o.id}__${o.source}__${o.target}`))},[e]),f(E,{disableKeyboardA11y:!0,fitView:!0,css:T,defaultEdgeOptions:B,edges:e,edgesFocusable:!1,edgesReconnectable:!1,edgeTypes:A,fitViewOptions:K,maxZoom:2,minZoom:.5,multiSelectionKeyCode:null,nodes:i,nodesConnectable:!1,nodesDraggable:!1,nodesFocusable:!1,nodeTypes:F,panActivationKeyCode:null,selectionKeyCode:null,selectionMode:C.Partial,zoomActivationKeyCode:null,onBeforeDelete:u,onEdgeMouseEnter:l,onEdgeMouseLeave:d,onEdgesChange:r,onNodesChange:s,onSelectionChange:c,children:[t(y,{pannable:!0,position:"bottom-left"}),t(h,{orientation:"horizontal",position:"bottom-left"}),t(S,{gap:12,variant:v.Dots})]})}function z(e){return t("div",{css:V,children:t(R,{initialState:null,children:t(b,{children:t(k,{...e})})})})}var P=_(z);export{P as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- var t=Object.defineProperty,n=(r,e,i)=>e in r?t(r,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):r[e]=i,o=(r,e,i)=>n(r,typeof e!="symbol"?e+"":e,i);class s{constructor(){o(this,"_isHovering"),this._isHovering=!1}isHovering(){return this._isHovering}setHovering(e){this._isHovering=e}}class a extends s{}export{s as AbstractFlowEdge,a as VefFlowEdge};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{NodeType as e}from"../types.js";var r=Object.defineProperty,d=(i,a,s)=>a in i?r(i,a,{enumerable:!0,configurable:!0,writable:!0,value:s}):i[a]=s,t=(i,a,s)=>d(i,typeof a!="symbol"?a+"":a,s);class l{constructor(a,s,o){t(this,"id"),t(this,"type"),t(this,"label"),this.id=a,this.type=s,this.label=o}getId(){return this.id}getType(){return this.type}getLabel(){return this.label}setLabel(a){this.label=a}}class p extends l{constructor(a,s){super(a,e.Submit,s),t(this,"_availablePreviousNodeTypes"),t(this,"_availableNextNodeTypes"),this._availablePreviousNodeTypes=[],this._availableNextNodeTypes=[e.Approval,e.Handle,e.Condition]}getAvailablePreviousNodeTypes(){return this._availablePreviousNodeTypes}getAvailableNextNodeTypes(){return this._availableNextNodeTypes}}class v extends l{constructor(a,s){super(a,e.Approval,s),t(this,"_availablePreviousNodeTypes"),t(this,"_availableNextNodeTypes"),this._availablePreviousNodeTypes=[e.Approval,e.Handle,e.Condition],this._availableNextNodeTypes=[e.Approval,e.Handle,e.Condition]}getAvailablePreviousNodeTypes(){return this._availablePreviousNodeTypes}getAvailableNextNodeTypes(){return this._availableNextNodeTypes}}class N extends l{constructor(a,s){super(a,e.Handle,s),t(this,"_availablePreviousNodeTypes"),t(this,"_availableNextNodeTypes"),this._availablePreviousNodeTypes=[e.Approval,e.Handle,e.Condition],this._availableNextNodeTypes=[e.Approval,e.Handle,e.Condition]}getAvailablePreviousNodeTypes(){return this._availablePreviousNodeTypes}getAvailableNextNodeTypes(){return this._availableNextNodeTypes}}class n extends l{constructor(a,s){super(a,e.Condition,s),t(this,"_availablePreviousNodeTypes"),t(this,"_availableNextNodeTypes"),this._availablePreviousNodeTypes=[e.Approval,e.Handle,e.Condition],this._availableNextNodeTypes=[e.Approval,e.Handle,e.Condition]}getAvailablePreviousNodeTypes(){return this._availablePreviousNodeTypes}getAvailableNextNodeTypes(){return this._availableNextNodeTypes}}class b extends l{constructor(a,s){super(a,e.End,s),t(this,"_availablePreviousNodeTypes"),t(this,"_availableNextNodeTypes"),this._availablePreviousNodeTypes=[e.Approval,e.Handle,e.Condition],this._availableNextNodeTypes=[]}getAvailablePreviousNodeTypes(){return this._availablePreviousNodeTypes}getAvailableNextNodeTypes(){return this._availableNextNodeTypes}}export{l as AbstractFlowNode,v as VefApprovalFlowNode,n as VefConditionFlowNode,b as VefEndFlowNode,N as VefHandleFlowNode,p as VefSubmitFlowNode};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- "use strict";
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{createComponentStore as r}from"@vef-framework/shared";const{StoreProvider:t,useStore:l,useStoreApi:d}=r("ApprovalFlowEditor",()=>e=>({selectedNode:null,setSelectedNode:o=>e({selectedNode:o})}));export{t as ApprovalFlowEditorStoreProvider,l as useApprovalFlowEditorStore,d as useApprovalFlowEditorStoreApi};
@@ -1,42 +0,0 @@
1
- "use strict";
2
- import{css as e}from"@emotion/react";import{themeVariables as o}from"@vef-framework/shared";import r from"../internal/base.css.js";const t=e`
3
- height: 80%;
4
-
5
- ${r}
6
- `,i=e`
7
- --xy-edge-stroke-width: 2px;
8
- --xy-edge-stroke: rgb(177, 177, 183);
9
- --xy-edge-stroke-selected: rgb(177, 177, 183);
10
-
11
- .react-flow__attribution {
12
- display: none;
13
- }
14
- .react-flow__nodesselection-rect,
15
- .react-flow__selection {
16
- background-color: oklch(from ${o.colorPrimary} l c h / 0.06);
17
- border: ${o.lineWidth} ${o.lineType} ${o.colorPrimary};
18
- border-radius: ${o.borderRadius};
19
- }
20
-
21
- .react-flow__node {
22
- width: 240px;
23
- border-radius: ${o.borderRadiusLg};
24
- padding: ${o.paddingSm};
25
- background-color: ${o.colorBgContainer};
26
-
27
- &:hover:not(.selected) {
28
- box-shadow: ${o.boxShadowElevated};
29
- }
30
-
31
- &.selected {
32
- outline: 2px ${o.lineType} ${o.colorPrimary};
33
- outline-offset: -2px;
34
- }
35
- }
36
-
37
- .react-flow__handle {
38
- min-width: 12px;
39
- min-height: 12px;
40
- background-color: transparent;
41
- }
42
- `;export{t as flowEditorContainerStyle,i as flowEditorStyle};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- var n=(d=>(d.Submit="submit",d.Approval="approval",d.Handle="handle",d.Condition="condition",d.End="end",d))(n||{}),i=(d=>(d.Vef="vef",d))(i||{});export{i as EdgeType,n as NodeType};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsx as l}from"@emotion/react/jsx-runtime";import{HotTable as i}from"@handsontable/react-wrapper";import{registerLanguageDictionary as m,zhCN as t}from"handsontable/i18n";import{registerAllModules as s}from"handsontable/registry";import{useRef as g}from"react";s(),m(t);const d=Array.from({length:1e3}).map((n,e)=>({name:`Name${e+1}`,gender:e%2===0?"Male":"Female",age:Math.floor(Math.random()*100)+18,id:e+1,desc:`Description may be very long, very long, very long, very long, very long, very long, very long, very long, very long, very long${e+1}`})),u=[{data:"id",title:"ID",fixedColumnsStart:1},{data:"name",title:"Name"},{data:"gender",title:"Gender"},{data:"age",title:"Age"},{data:"desc",title:"Description",width:200}];function c(n){console.log("file: index.tsx:49 ~ props:",n);const e=g(null);return l("div",{style:{width:"100%",maxHeight:"500px"},children:l(i,{ref:e,autoColumnSize:!0,autoRowSize:!0,colHeaders:!0,disableVisualSelection:!0,manualColumnMove:!0,manualColumnResize:!0,multiColumnSorting:!0,readOnly:!0,rowHeaders:!0,columns:u,data:d,language:t.languageCode,licenseKey:"non-commercial-and-evaluation",locale:t.languageCode,themeName:"ht-theme-main",beforeColumnSort:(f,o)=>{if(console.log("file: index.tsx:68 ~ sortConfigs:",o),o.length>0){const a=e.current?.hotInstance?.getColHeader(o[0].column);console.log("file: index.tsx:77 ~ header:",a);const r=e.current?.hotInstance?.getColumnMeta(o[0].column);console.log("file: index.tsx:79 ~ meta:",r)}}})})}export{c as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- "use strict";
@@ -1,2 +0,0 @@
1
- "use strict";
2
- import{jsx as t}from"@emotion/react/jsx-runtime";function o(e){return console.log("file: index.tsx:3 ~ props:",e),t("div",{children:"data table"})}export{o as default};
@@ -1,2 +0,0 @@
1
- "use strict";
2
- "use strict";
@@ -1,4 +0,0 @@
1
- import type { EdgeProps } from "@xyflow/react";
2
- import type { VefEdge as VefEdgeType } from "../types";
3
- declare function VefEdge({ id, data, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, markerEnd, markerStart, interactionWidth, style, selected, }: EdgeProps<VefEdgeType>): import("@emotion/react/jsx-runtime").JSX.Element;
4
- export default VefEdge;
@@ -1,10 +0,0 @@
1
- import type { ReactNode } from "react";
2
- /**
3
- * The props of the LabelValue component.
4
- */
5
- interface VefLabelValueProps {
6
- label: ReactNode;
7
- value: ReactNode;
8
- }
9
- declare function VefLabelValue({ label, value }: VefLabelValueProps): import("@emotion/react/jsx-runtime").JSX.Element;
10
- export default VefLabelValue;
@@ -1,9 +0,0 @@
1
- import type { ChildrenProps, ColorType } from "@vef-framework/shared";
2
- import type { ReactElement } from "react";
3
- interface VefNodeContentProps extends ChildrenProps {
4
- icon: ReactElement;
5
- iconColor: ColorType;
6
- selected: boolean;
7
- }
8
- declare function VefNodeContent({ icon, iconColor, selected, children, }: VefNodeContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
9
- export default VefNodeContent;
@@ -1,12 +0,0 @@
1
- import type { VefSelectorContentProps } from "./selector-content";
2
- /**
3
- * The props of the node selector.
4
- */
5
- interface VefNodeSelectorProps extends VefSelectorContentProps {
6
- /**
7
- * The position of the selector content
8
- */
9
- selectorContentPosition: "right" | "bottom";
10
- }
11
- declare function VefNodeSelector({ selectorContentPosition, items, onAddNode, }: VefNodeSelectorProps): import("@emotion/react/jsx-runtime").JSX.Element;
12
- export default VefNodeSelector;
@@ -1,8 +0,0 @@
1
- /**
2
- * The props of the NodeToolbar component.
3
- */
4
- interface VefNodeToolbarProps {
5
- selected: boolean;
6
- }
7
- declare function VefNodeToolbar({ selected }: VefNodeToolbarProps): import("@emotion/react/jsx-runtime").JSX.Element;
8
- export default VefNodeToolbar;
@@ -1,3 +0,0 @@
1
- import type { NodeProps } from "@xyflow/react";
2
- declare function VefApprovalNode({ selected, }: NodeProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export default VefApprovalNode;
@@ -1,3 +0,0 @@
1
- import type { NodeProps } from "@xyflow/react";
2
- declare function VefConditionNode({ selected, }: NodeProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export default VefConditionNode;
@@ -1,3 +0,0 @@
1
- import type { NodeProps } from "@xyflow/react";
2
- declare function VefEndNode({ selected, }: NodeProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export default VefEndNode;
@@ -1,3 +0,0 @@
1
- import type { NodeProps } from "@xyflow/react";
2
- declare function VefHandleNode({ selected, }: NodeProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export default VefHandleNode;
@@ -1,15 +0,0 @@
1
- import VefApprovalNode from "./approval";
2
- import VefConditionNode from "./condition";
3
- import VefEndNode from "./end";
4
- import VefHandleNode from "./handle";
5
- import VefSubmitNode from "./submit";
6
- /**
7
- * The node types that can be used in the approval flow editor.
8
- */
9
- export declare const nodeTypes: {
10
- submit: typeof VefSubmitNode;
11
- approval: typeof VefApprovalNode;
12
- handle: typeof VefHandleNode;
13
- condition: typeof VefConditionNode;
14
- end: typeof VefEndNode;
15
- };
@@ -1,3 +0,0 @@
1
- import type { NodeProps } from "@xyflow/react";
2
- declare function VefSubmitNode({ selected, }: NodeProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export default VefSubmitNode;
@@ -1,16 +0,0 @@
1
- import type { NodeType, VefEdge, VefNode } from "../types";
2
- /**
3
- * The props of the selector content.
4
- */
5
- export interface VefSelectorContentProps {
6
- /**
7
- * The items of the selector content.
8
- */
9
- items: NodeType[];
10
- /**
11
- * The function to add a node.
12
- */
13
- onAddNode: (nodeType: NodeType) => readonly [VefNode, VefEdge[], string[]];
14
- }
15
- declare function VefSelectorContent({ items, onAddNode }: VefSelectorContentProps): import("@emotion/react/jsx-runtime").JSX.Element;
16
- export default VefSelectorContent;
@@ -1,2 +0,0 @@
1
- declare function VefSourceHandle(): import("@emotion/react/jsx-runtime").JSX.Element;
2
- export default VefSourceHandle;
@@ -1,2 +0,0 @@
1
- declare function VefTargetHandle(): import("@emotion/react/jsx-runtime").JSX.Element;
2
- export default VefTargetHandle;
@@ -1,15 +0,0 @@
1
- import type { DefaultEdgeOptions, FitViewOptions } from "@xyflow/react";
2
- import type { NodeMetadata, VefEdge, VefNode } from "./types";
3
- import VefEdgeComponent from "./components/edge";
4
- import { NodeType } from "./types";
5
- export declare const initialNodes: VefNode[];
6
- export declare const initialEdges: VefEdge[];
7
- export declare const fitViewOptions: FitViewOptions;
8
- export declare const edgeTypes: {
9
- vef: typeof VefEdgeComponent;
10
- };
11
- export declare const defaultEdgeOptions: DefaultEdgeOptions;
12
- /**
13
- * The metadata of the nodes.
14
- */
15
- export declare const nodesMetadata: Record<NodeType, NodeMetadata>;
@@ -1,31 +0,0 @@
1
- import type { VefEdge, VefNode } from "./types";
2
- import { VefApprovalFlowNode, VefConditionFlowNode, VefEndFlowNode, VefHandleFlowNode, VefSubmitFlowNode } from "./models/flow-node";
3
- import { NodeType } from "./types";
4
- /**
5
- * Layout the nodes and edges
6
- *
7
- * @param nodes The nodes to layout
8
- * @param edges The edges to layout
9
- * @returns The nodes and edges after layout
10
- */
11
- export declare function layoutFlowElements(nodes: VefNode[], edges: VefEdge[]): VefNode[];
12
- /**
13
- * Create a flow node
14
- *
15
- * @param type The type of the node
16
- * @param id The id of the node
17
- */
18
- export declare function createFlowNode(type: NodeType, id: string): VefSubmitFlowNode | VefApprovalFlowNode | VefHandleFlowNode | VefConditionFlowNode | VefEndFlowNode;
19
- /**
20
- * Create a node
21
- *
22
- * @param type The type of the node
23
- */
24
- export declare function createNode(type: NodeType): VefNode;
25
- /**
26
- * Create an edge
27
- *
28
- * @param source The source node id
29
- * @param target The target node id
30
- */
31
- export declare function createEdge(source: string, target: string): VefEdge;
@@ -1,11 +0,0 @@
1
- import type { EdgeMouseHandler } from "@xyflow/react";
2
- import type { VefEdge } from "../types";
3
- /**
4
- * Hook that handles the edge interactions
5
- *
6
- * @returns The edge interactions handler
7
- */
8
- export declare function useEdgesInteraction(): {
9
- handleEdgeMouseEnter: EdgeMouseHandler<VefEdge>;
10
- handleEdgeMouseLeave: EdgeMouseHandler<VefEdge>;
11
- };
@@ -1,9 +0,0 @@
1
- import type { OnSelectionChangeFunc } from "@xyflow/react";
2
- /**
3
- * Handles the selection of elements in the approval flow editor.
4
- *
5
- * @returns An object containing the `handleSelectionChange` function.
6
- */
7
- export declare function useElementSelection(): {
8
- handleSelectionChange: OnSelectionChangeFunc;
9
- };
@@ -1,5 +0,0 @@
1
- import type { OnBeforeDelete } from "@xyflow/react";
2
- import type { VefEdge, VefNode } from "../types";
3
- export declare function useNodesInteraction(): {
4
- handleBeforeDelete: OnBeforeDelete<VefNode, VefEdge>;
5
- };
@@ -1,5 +0,0 @@
1
- import type { VefApprovalFlowEditorProps } from "./props";
2
- declare function VefApprovalFlowEditor(props: VefApprovalFlowEditorProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export type { VefApprovalFlowEditorProps };
4
- declare const _default: import("react").MemoExoticComponent<typeof VefApprovalFlowEditor>;
5
- export default _default;
@@ -1,32 +0,0 @@
1
- /**
2
- * The edge metadata
3
- */
4
- export interface EdgeMetadata {
5
- /**
6
- * Check if the edge is hovering
7
- */
8
- isHovering: () => boolean;
9
- /**
10
- * Set the edge hovering
11
- */
12
- setHovering: (isHovering: boolean) => void;
13
- }
14
- /**
15
- * The flow edge
16
- */
17
- export interface FlowEdge extends EdgeMetadata {
18
- }
19
- /**
20
- * The abstract flow edge
21
- */
22
- export declare abstract class AbstractFlowEdge implements FlowEdge {
23
- private _isHovering;
24
- constructor();
25
- isHovering(): boolean;
26
- setHovering(isHovering: boolean): void;
27
- }
28
- /**
29
- * The vef flow edge
30
- */
31
- export declare class VefFlowEdge extends AbstractFlowEdge {
32
- }
@@ -1,106 +0,0 @@
1
- import { NodeType } from "../types";
2
- /**
3
- * The flow node metadata
4
- */
5
- export interface NodeMetadata {
6
- /**
7
- * Get the available previous node types
8
- *
9
- * @param node - The current node
10
- */
11
- getAvailablePreviousNodeTypes: () => NodeType[];
12
- /**
13
- * Get the available next node types
14
- *
15
- * @param node - The current node
16
- */
17
- getAvailableNextNodeTypes: () => NodeType[];
18
- }
19
- /**
20
- * The flow node
21
- */
22
- export interface FlowNode extends NodeMetadata {
23
- /**
24
- * Get the node id
25
- */
26
- getId: () => string;
27
- /**
28
- * Get the node type
29
- */
30
- getType: () => NodeType;
31
- /**
32
- * Get the node label
33
- */
34
- getLabel: () => string;
35
- /**
36
- * Set the node label
37
- *
38
- * @param label - The new label
39
- */
40
- setLabel: (label: string) => void;
41
- }
42
- /**
43
- * The abstract flow node
44
- */
45
- export declare abstract class AbstractFlowNode implements FlowNode {
46
- private readonly id;
47
- private readonly type;
48
- private label;
49
- constructor(id: string, type: NodeType, label: string);
50
- getId(): string;
51
- getType(): NodeType;
52
- getLabel(): string;
53
- setLabel(label: string): void;
54
- abstract getAvailablePreviousNodeTypes(): NodeType[];
55
- abstract getAvailableNextNodeTypes(): NodeType[];
56
- }
57
- /**
58
- * The vef submit flow node
59
- */
60
- export declare class VefSubmitFlowNode extends AbstractFlowNode {
61
- private readonly _availablePreviousNodeTypes;
62
- private readonly _availableNextNodeTypes;
63
- constructor(id: string, label: string);
64
- getAvailablePreviousNodeTypes(): NodeType[];
65
- getAvailableNextNodeTypes(): NodeType[];
66
- }
67
- /**
68
- * The vef approval flow node
69
- */
70
- export declare class VefApprovalFlowNode extends AbstractFlowNode {
71
- private readonly _availablePreviousNodeTypes;
72
- private readonly _availableNextNodeTypes;
73
- constructor(id: string, label: string);
74
- getAvailablePreviousNodeTypes(): NodeType[];
75
- getAvailableNextNodeTypes(): NodeType[];
76
- }
77
- /**
78
- * The vef handle flow node
79
- */
80
- export declare class VefHandleFlowNode extends AbstractFlowNode {
81
- private readonly _availablePreviousNodeTypes;
82
- private readonly _availableNextNodeTypes;
83
- constructor(id: string, label: string);
84
- getAvailablePreviousNodeTypes(): NodeType[];
85
- getAvailableNextNodeTypes(): NodeType[];
86
- }
87
- /**
88
- * The vef condition flow node
89
- */
90
- export declare class VefConditionFlowNode extends AbstractFlowNode {
91
- private readonly _availablePreviousNodeTypes;
92
- private readonly _availableNextNodeTypes;
93
- constructor(id: string, label: string);
94
- getAvailablePreviousNodeTypes(): NodeType[];
95
- getAvailableNextNodeTypes(): NodeType[];
96
- }
97
- /**
98
- * The vef end flow node
99
- */
100
- export declare class VefEndFlowNode extends AbstractFlowNode {
101
- private readonly _availablePreviousNodeTypes;
102
- private readonly _availableNextNodeTypes;
103
- constructor(id: string, label: string);
104
- getAvailablePreviousNodeTypes(): NodeType[];
105
- getAvailableNextNodeTypes(): NodeType[];
106
- }
@@ -1,5 +0,0 @@
1
- /**
2
- * The props for the VefApprovalFlowEditor component
3
- */
4
- export interface VefApprovalFlowEditorProps {
5
- }
@@ -1,25 +0,0 @@
1
- import type { Consumer, MaybeNull } from "@vef-framework/shared";
2
- import type { FlowNode } from "./models/flow-node";
3
- /**
4
- * The approval flow editor state
5
- */
6
- export interface ApprovalFlowEditorState {
7
- /**
8
- * The selected node id
9
- */
10
- selectedNode: MaybeNull<FlowNode>;
11
- /**
12
- * Sets the selected node
13
- */
14
- setSelectedNode: Consumer<MaybeNull<FlowNode>>;
15
- }
16
- declare const ApprovalFlowEditorStoreProvider: import("react").FC<import("@vef-framework/shared").StoreProviderProps<null>>, useApprovalFlowEditorStore: <State extends ApprovalFlowEditorState, U>(selector: import("@vef-framework/shared").Mapper<State, U>) => U, useApprovalFlowEditorStoreApi: <State extends ApprovalFlowEditorState>() => Omit<import("zustand").StoreApi<State>, "subscribe"> & {
17
- subscribe: {
18
- (listener: (selectedState: State, previousSelectedState: State) => void): () => void;
19
- <U>(selector: (state: State) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
20
- equalityFn?: ((a: U, b: U) => boolean) | undefined;
21
- fireImmediately?: boolean;
22
- } | undefined): () => void;
23
- };
24
- };
25
- export { ApprovalFlowEditorStoreProvider, useApprovalFlowEditorStore, useApprovalFlowEditorStoreApi, };
@@ -1,2 +0,0 @@
1
- export declare const flowEditorContainerStyle: import("@emotion/react").SerializedStyles;
2
- export declare const flowEditorStyle: import("@emotion/react").SerializedStyles;
@@ -1,73 +0,0 @@
1
- import type { ColorType } from "@vef-framework/shared";
2
- import type { Edge, Node } from "@xyflow/react";
3
- import type { ReactElement } from "react";
4
- import type { FlowEdge } from "./models/edge-node";
5
- import type { FlowNode } from "./models/flow-node";
6
- /**
7
- * The type of the node.
8
- */
9
- export declare enum NodeType {
10
- Submit = "submit",
11
- Approval = "approval",
12
- Handle = "handle",
13
- Condition = "condition",
14
- End = "end"
15
- }
16
- /**
17
- * The type of the edge.
18
- */
19
- export declare enum EdgeType {
20
- Vef = "vef"
21
- }
22
- /**
23
- * The metadata of the node.
24
- */
25
- export interface NodeMetadata {
26
- /**
27
- * The type of the node.
28
- */
29
- type: NodeType;
30
- /**
31
- * The label of the node.
32
- */
33
- label: string;
34
- /**
35
- * The icon of the node.
36
- */
37
- icon: ReactElement;
38
- /**
39
- * The color of the node.
40
- */
41
- color: ColorType;
42
- }
43
- /**
44
- * The props of the handle.
45
- */
46
- export interface VefHandleProps {
47
- }
48
- /**
49
- * The node data
50
- */
51
- export type NodeData = {
52
- /**
53
- * The node
54
- */
55
- node: FlowNode;
56
- } & {};
57
- /**
58
- * The edge data
59
- */
60
- export type EdgeData = {
61
- /**
62
- * The edge
63
- */
64
- edge: FlowEdge;
65
- } & {};
66
- /**
67
- * The node type.
68
- */
69
- export type VefNode = Node<NodeData, NodeType>;
70
- /**
71
- * The edge type.
72
- */
73
- export type VefEdge = Edge<EdgeData, EdgeType>;
@@ -1,4 +0,0 @@
1
- import type { VefDataGridProps } from "./props";
2
- declare function VefDataGrid(props: VefDataGridProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export type { VefDataGridProps };
4
- export default VefDataGrid;
@@ -1,5 +0,0 @@
1
- /**
2
- * The props of the VefDataGrid component.
3
- */
4
- export interface VefDataGridProps {
5
- }
@@ -1,4 +0,0 @@
1
- import type { VefDataTableProps } from "./props";
2
- declare function VefDataTable(props: VefDataTableProps): import("@emotion/react/jsx-runtime").JSX.Element;
3
- export type { VefDataTableProps };
4
- export default VefDataTable;