@vef-framework/components 1.0.122 → 1.0.123

package/cjs/vef-access-denied/index.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var lucideReact = require('lucide-react');
+var index = require('../vef-button/index.cjs');
+var index$1 = require('../vef-icon/index.cjs');
+var accessDeniedIcon = require('./access-denied-icon.cjs');
+
+"use strict";
+const accessDeniedStyle = react.css`
+  height: 100%;
+  ${shared.styles.flexCenter}
+`;
+const contentStyle = react.css`
+  width: 40%;
+  position: relative;
+  top: -60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${shared.themeVariables.margin};
+  > svg {
+    width: 70%;
+  }
+
+  > span {
+    font-size: ${shared.themeVariables.fontSizeLg};
+    font-weight: 500;
+    color: ${shared.themeVariables.colorTextTertiary};
+  }
+
+  span.vef-access-denied-uri {
+    padding-left: ${shared.themeVariables.paddingSm};
+    color: ${shared.themeVariables.colorWarningText};
+  }
+`;
+function VefAccessDenied({
+  uri,
+  title = "抱歉，您没有权限访问该页面～～～",
+  onNavigateHome
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: accessDeniedStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: contentStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(accessDeniedIcon.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
+    uri && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      "路径:",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vef-access-denied-uri", children: uri })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        color: "primary",
+        size: "large",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, {}) }),
+        onClick: onNavigateHome,
+        children: "回到首页"
+      }
+    )
+  ] }) });
+}
+
+exports.default = VefAccessDenied;

package/cjs/vef-access-denied/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-action-buttons/index.cjs

@@ -0,0 +1,80 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var react = require('react');
+var index = require('../vef-button/index.cjs');
+var index$1 = require('../vef-flex/index.cjs');
+
+"use strict";
+function VefActionButtonsBase({
+  buttons,
+  context,
+  useFlexContainer = true,
+  size = "medium"
+}) {
+  const authorizedButtons = hooks.useAuthorizedItems(buttons);
+  const contextToUse = context ?? {};
+  const computedButtons = hooks.useComputedActionButtons(authorizedButtons, contextToUse);
+  if (computedButtons.length === 0) {
+    return null;
+  }
+  const buttonsNode = computedButtons.map((button) => {
+    const {
+      key,
+      label,
+      icon,
+      color,
+      disabled,
+      requireConfirmation,
+      confirmationMode,
+      confirmationTitle,
+      confirmationContent,
+      onClick
+    } = button;
+    const handleClick = () => onClick?.(contextToUse);
+    if (requireConfirmation) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        index.default,
+        {
+          requireConfirmation: true,
+          color,
+          confirmationContent,
+          confirmationMode,
+          confirmationTitle,
+          disabled,
+          icon,
+          size,
+          onConfirmationOk: handleClick,
+          children: label
+        },
+        key
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.default,
+      {
+        color,
+        disabled,
+        icon,
+        size,
+        onClick: handleClick,
+        children: label
+      },
+      key
+    );
+  });
+  if (useFlexContainer) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { wrap: true, align: "center", gap: "medium", children: buttonsNode });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: buttonsNode });
+}
+const VefActionButtons = react.memo(
+  VefActionButtonsBase
+);
+VefActionButtons.displayName = "VefActionButtons";
+
+exports.default = VefActionButtons;

package/cjs/vef-action-buttons/props.cjs

@@ -0,0 +1,4 @@
+"use strict";
+'use strict';
+
+"use strict";

package/cjs/vef-approval-flow-editor/components/edge.cjs

@@ -0,0 +1,92 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var react$1 = require('@xyflow/react');
+var react$2 = require('react');
+var helper = require('../helper.cjs');
+var nodeSelector = require('./node-selector.cjs');
+
+"use strict";
+const labelStyle = react.css`
+  position: absolute;
+  pointer-events: all;
+  transform-origin: center;
+  transform: translate(-50%, -50%) translate(var(--vef-edge-label-x), var(--vef-edge-label-y));
+`;
+function VefEdge({
+  id,
+  data,
+  source,
+  target,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  markerStart,
+  interactionWidth,
+  style,
+  selected
+}) {
+  const { getNode } = react$1.useReactFlow();
+  const handleAddNode = react$2.useCallback((type) => {
+    const newNode = helper.createNode(type);
+    return [
+      newNode,
+      [
+        helper.createEdge(source, newNode.id),
+        helper.createEdge(newNode.id, target)
+      ],
+      [id]
+    ];
+  }, [id, source, target]);
+  const [edgePath, labelX, labelY] = react$1.getBezierPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    curvature: 0.16
+  });
+  const isHovering = data?.edge.isHovering() ?? false;
+  const sourceNode = getNode(source).data.node;
+  const targetNode = getNode(target).data.node;
+  const availableNodeTypes = new Set(targetNode.getAvailablePreviousNodeTypes());
+  const nodeTypes = sourceNode.getAvailableNextNodeTypes().filter(
+    (nodeType) => availableNodeTypes.has(nodeType)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.BaseEdge,
+      {
+        id,
+        interactionWidth,
+        markerEnd,
+        markerStart,
+        path: edgePath,
+        style
+      }
+    ),
+    (isHovering || selected) && /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "nodrag nopan",
+        css: labelStyle,
+        style: {
+          "--vef-edge-label-x": `${labelX}px`,
+          "--vef-edge-label-y": `${labelY}px`
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(nodeSelector.default, { items: nodeTypes, selectorContentPosition: "right", onAddNode: handleAddNode })
+      }
+    ) })
+  ] });
+}
+
+exports.default = VefEdge;

package/cjs/vef-approval-flow-editor/components/label-value.cjs

@@ -0,0 +1,41 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var lucideReact = require('lucide-react');
+var index = require('../../vef-icon/index.cjs');
+
+"use strict";
+const labelValueStyle = react.css`
+  display: grid;
+  grid-template-columns: max-content 1fr max-content;
+  align-items: center;
+  column-gap: ${shared.themeVariables.marginXs};
+  background-color: ${shared.themeVariables.colorFillTertiary};
+  padding: ${shared.themeVariables.paddingXxs} ${shared.themeVariables.paddingXxs} ${shared.themeVariables.paddingXxs} ${shared.themeVariables.paddingXs};
+  border-radius: ${shared.themeVariables.borderRadius};
+
+  & > span:first-of-type {
+    color: ${shared.themeVariables.colorTextSecondary};
+  }
+
+  & > span:last-of-type {
+    color: ${shared.themeVariables.colorText};
+  }
+`;
+function VefLabelValue({ label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: labelValueStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      label,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, {}) })
+  ] });
+}
+
+exports.default = VefLabelValue;

package/cjs/vef-approval-flow-editor/components/node-content.cjs

@@ -0,0 +1,56 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var react$1 = require('@xyflow/react');
+var index = require('../../vef-icon/index.cjs');
+var nodeToolbar = require('./node-toolbar.cjs');
+var sourceHandle = require('./source-handle.cjs');
+var targetHandle = require('./target-handle.cjs');
+
+"use strict";
+const titleWrapperStyle = react.css`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: ${shared.themeVariables.marginSm};
+  margin-bottom: ${shared.themeVariables.marginSm};
+`;
+const titleIconStyle = react.css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${shared.themeVariables.colorWhite};
+  border-radius: ${shared.themeVariables.borderRadius};
+  padding: ${shared.themeVariables.paddingXxs};
+`;
+const titleTextStyle = react.css`
+  font-size: ${shared.themeVariables.fontSizeLg};
+`;
+function VefNodeContent({
+  icon,
+  iconColor,
+  selected,
+  children
+}) {
+  const node = react$1.useNodesData(react$1.useNodeId()).data.node;
+  const colorTokens = hooks.useColorTokens();
+  const iconBgColor = colorTokens.get(iconColor);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(sourceHandle.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(targetHandle.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(nodeToolbar.default, { selected }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { css: titleWrapperStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: titleIconStyle, style: { backgroundColor: iconBgColor }, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: icon }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { css: titleTextStyle, children: node.getLabel() })
+    ] }),
+    children
+  ] });
+}
+
+exports.default = VefNodeContent;

package/cjs/vef-approval-flow-editor/components/node-selector.cjs

@@ -0,0 +1,46 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var lucideReact = require('lucide-react');
+var index$1 = require('../../vef-icon/index.cjs');
+var index = require('../../vef-popover/index.cjs');
+var selectorContent = require('./selector-content.cjs');
+
+"use strict";
+const selectorStyle = react.css`
+  cursor: pointer;
+  transform-origin: center;
+  background-color: ${shared.themeVariables.colorPrimary};
+  color: ${shared.themeVariables.colorWhite};
+  border-radius: 50%;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const popoverContentStyle = {
+  "--vef-popover-inner-content-padding": "6px"
+};
+function VefNodeSelector({
+  selectorContentPosition,
+  items,
+  onAddNode
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      content: /* @__PURE__ */ jsxRuntime.jsx(selectorContent.default, { items, onAddNode }),
+      contentStyle: popoverContentStyle,
+      placement: selectorContentPosition,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { css: selectorStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlusIcon, {}) }) })
+    }
+  );
+}
+
+exports.default = VefNodeSelector;

package/cjs/vef-approval-flow-editor/components/node-toolbar.cjs

@@ -0,0 +1,26 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@xyflow/react');
+var lucideReact = require('lucide-react');
+var index = require('../../vef-button/index.cjs');
+var index$1 = require('../../vef-icon/index.cjs');
+
+"use strict";
+function VefNodeToolbar({ selected }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.NodeToolbar, { align: "end", isVisible: selected, offset: 4, position: react.Position.Top, children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      color: "error",
+      size: "small",
+      tip: "删除",
+      variant: "solid",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, {}) })
+    }
+  ) });
+}
+
+exports.default = VefNodeToolbar;

package/cjs/vef-approval-flow-editor/components/nodes/approval.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var constants = require('../../constants.cjs');
+var types = require('../../types.cjs');
+var labelValue = require('../label-value.cjs');
+var nodeContent = require('../node-content.cjs');
+
+"use strict";
+const nodeMetadata = constants.nodesMetadata[types.NodeType.Approval];
+function VefApprovalNode({
+  selected
+}) {
+  const { icon, color } = nodeMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nodeContent.default,
+    {
+      icon,
+      iconColor: color,
+      selected,
+      children: /* @__PURE__ */ jsxRuntime.jsx(labelValue.default, { label: "审批人", value: "无" })
+    }
+  );
+}
+
+exports.default = VefApprovalNode;

package/cjs/vef-approval-flow-editor/components/nodes/condition.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var constants = require('../../constants.cjs');
+var types = require('../../types.cjs');
+var labelValue = require('../label-value.cjs');
+var nodeContent = require('../node-content.cjs');
+
+"use strict";
+const nodeMetadata = constants.nodesMetadata[types.NodeType.Condition];
+function VefConditionNode({
+  selected
+}) {
+  const { icon, color } = nodeMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nodeContent.default,
+    {
+      icon,
+      iconColor: color,
+      selected,
+      children: /* @__PURE__ */ jsxRuntime.jsx(labelValue.default, { label: "条件", value: "无" })
+    }
+  );
+}
+
+exports.default = VefConditionNode;

package/cjs/vef-approval-flow-editor/components/nodes/end.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var constants = require('../../constants.cjs');
+var types = require('../../types.cjs');
+var labelValue = require('../label-value.cjs');
+var nodeContent = require('../node-content.cjs');
+
+"use strict";
+const nodeMetadata = constants.nodesMetadata[types.NodeType.End];
+function VefEndNode({
+  selected
+}) {
+  const { icon, color } = nodeMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nodeContent.default,
+    {
+      icon,
+      iconColor: color,
+      selected,
+      children: /* @__PURE__ */ jsxRuntime.jsx(labelValue.default, { label: "通知人", value: "无" })
+    }
+  );
+}
+
+exports.default = VefEndNode;

package/cjs/vef-approval-flow-editor/components/nodes/handle.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var constants = require('../../constants.cjs');
+var types = require('../../types.cjs');
+var labelValue = require('../label-value.cjs');
+var nodeContent = require('../node-content.cjs');
+
+"use strict";
+const nodeMetadata = constants.nodesMetadata[types.NodeType.Handle];
+function VefHandleNode({
+  selected
+}) {
+  const { icon, color } = nodeMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nodeContent.default,
+    {
+      icon,
+      iconColor: color,
+      selected,
+      children: /* @__PURE__ */ jsxRuntime.jsx(labelValue.default, { label: "办理人", value: "无" })
+    }
+  );
+}
+
+exports.default = VefHandleNode;

package/cjs/vef-approval-flow-editor/components/nodes/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+'use strict';
+
+var types = require('../../types.cjs');
+var approval = require('./approval.cjs');
+var condition = require('./condition.cjs');
+var end = require('./end.cjs');
+var handle = require('./handle.cjs');
+var submit = require('./submit.cjs');
+
+"use strict";
+const nodeTypes = {
+  [types.NodeType.Submit]: submit.default,
+  [types.NodeType.Approval]: approval.default,
+  [types.NodeType.Handle]: handle.default,
+  [types.NodeType.Condition]: condition.default,
+  [types.NodeType.End]: end.default
+};
+
+exports.nodeTypes = nodeTypes;

package/cjs/vef-approval-flow-editor/components/nodes/submit.cjs

@@ -0,0 +1,29 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var constants = require('../../constants.cjs');
+var types = require('../../types.cjs');
+var labelValue = require('../label-value.cjs');
+var nodeContent = require('../node-content.cjs');
+
+"use strict";
+const nodeMetadata = constants.nodesMetadata[types.NodeType.Submit];
+function VefSubmitNode({
+  selected
+}) {
+  const { icon, color } = nodeMetadata;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    nodeContent.default,
+    {
+      icon,
+      iconColor: color,
+      selected,
+      children: /* @__PURE__ */ jsxRuntime.jsx(labelValue.default, { label: "提交人", value: "全员" })
+    }
+  );
+}
+
+exports.default = VefSubmitNode;

package/cjs/vef-approval-flow-editor/components/selector-content.cjs

@@ -0,0 +1,68 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var react$2 = require('@xyflow/react');
+var react$1 = require('react');
+var index = require('../../vef-icon/index.cjs');
+var constants = require('../constants.cjs');
+
+"use strict";
+const selectorContentStyle = react.css`
+  min-width: 160px;
+  display: flex;
+  flex-direction: column;
+  gap: ${shared.themeVariables.margin};
+`;
+const selectorItemStyle = react.css`
+  display: flex;
+  align-items: center;
+  gap: ${shared.themeVariables.marginSm};
+  padding: ${shared.themeVariables.paddingXs} ${shared.themeVariables.paddingSm};
+  border-radius: ${shared.themeVariables.borderRadius};
+  cursor: pointer;
+  transition: background-color ${shared.themeVariables.motionDurationMid} ${shared.themeVariables.motionEaseInOutCirc};
+  
+  &:hover {
+    background-color: ${shared.themeVariables.colorFillSecondary};
+  }
+
+  > span:first-of-type {
+  }
+
+  > span:last-of-type {
+  }
+`;
+function VefSelectorContent({ items, onAddNode }) {
+  const nodes = react$1.useMemo(
+    () => items.map((item) => constants.nodesMetadata[item]),
+    [items]
+  );
+  const {
+    setEdges,
+    addNodes
+  } = react$2.useReactFlow();
+  const handleAddNode = react$1.useCallback((nodeType) => {
+    const [node, edgesToAdd, edgesToRemove] = onAddNode(nodeType);
+    setEdges((edges) => [
+      ...edges.filter((edge) => !edgesToRemove.includes(edge.id)),
+      ...edgesToAdd
+    ]);
+    addNodes(node);
+  }, [onAddNode, setEdges, addNodes]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: selectorContentStyle, children: nodes.map(({
+    type,
+    label,
+    icon,
+    color
+  }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { css: selectorItemStyle, onClick: () => handleAddNode(type), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { color, size: "huge", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+  ] }, label)) });
+}
+
+exports.default = VefSelectorContent;