@vef-framework/components 1.0.122 → 1.0.124

package/cjs/vef-approval-flow-editor/props.cjs

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

package/cjs/vef-approval-flow-editor/store.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const {
+  StoreProvider: ApprovalFlowEditorStoreProvider,
+  useStore: useApprovalFlowEditorStore,
+  useStoreApi: useApprovalFlowEditorStoreApi
+} = shared.createComponentStore(
+  "ApprovalFlowEditor",
+  () => (set) => ({
+    selectedNode: null,
+    setSelectedNode: (selectedNode) => set({ selectedNode })
+  })
+);
+
+exports.ApprovalFlowEditorStoreProvider = ApprovalFlowEditorStoreProvider;
+exports.useApprovalFlowEditorStore = useApprovalFlowEditorStore;
+exports.useApprovalFlowEditorStoreApi = useApprovalFlowEditorStoreApi;

package/cjs/vef-approval-flow-editor/styles.cjs

@@ -0,0 +1,53 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var shared = require('@vef-framework/shared');
+var base = require('../internal/base.css.cjs');
+
+"use strict";
+const flowEditorContainerStyle = react.css`
+  height: 80%;
+
+  ${base.default}
+`;
+const flowEditorStyle = react.css`
+  --xy-edge-stroke-width: 2px;
+  --xy-edge-stroke: rgb(177, 177, 183);
+  --xy-edge-stroke-selected: rgb(177, 177, 183);
+
+  .react-flow__attribution {
+    display: none;
+  }
+  .react-flow__nodesselection-rect,
+  .react-flow__selection {
+    background-color: oklch(from ${shared.themeVariables.colorPrimary} l c h / 0.06);
+    border: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorPrimary};
+    border-radius: ${shared.themeVariables.borderRadius};
+  }
+
+  .react-flow__node {
+    width: 240px;
+    border-radius: ${shared.themeVariables.borderRadiusLg};
+    padding: ${shared.themeVariables.paddingSm};
+    background-color: ${shared.themeVariables.colorBgContainer};
+
+    &:hover:not(.selected) {
+      box-shadow: ${shared.themeVariables.boxShadowElevated};
+    }
+
+    &.selected {
+      outline: 2px ${shared.themeVariables.lineType} ${shared.themeVariables.colorPrimary};
+      outline-offset: -2px;
+    }
+  }
+
+  .react-flow__handle {
+    min-width: 12px;
+    min-height: 12px;
+    background-color: transparent;
+  }
+`;
+
+exports.flowEditorContainerStyle = flowEditorContainerStyle;
+exports.flowEditorStyle = flowEditorStyle;

package/cjs/vef-approval-flow-editor/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+'use strict';
+
+"use strict";
+var NodeType = /* @__PURE__ */ ((NodeType2) => {
+  NodeType2["Submit"] = "submit";
+  NodeType2["Approval"] = "approval";
+  NodeType2["Handle"] = "handle";
+  NodeType2["Condition"] = "condition";
+  NodeType2["End"] = "end";
+  return NodeType2;
+})(NodeType || {});
+var EdgeType = /* @__PURE__ */ ((EdgeType2) => {
+  EdgeType2["Vef"] = "vef";
+  return EdgeType2;
+})(EdgeType || {});
+
+exports.EdgeType = EdgeType;
+exports.NodeType = NodeType;

package/cjs/vef-area-chart/index.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('react');
+var recharts = require('recharts');
+var index = require('../vef-chart-container/index.cjs');
+var index$2 = require('../vef-chart-legend-content/index.cjs');
+var index$1 = require('../vef-chart-tooltip-content/index.cjs');
+
+"use strict";
+function VefAreaChartBase({
+  config,
+  data,
+  dataKey,
+  valueFormatter,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { config, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: Object.keys(config).map((key) => /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `fill-${key}`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: `var(--vef-color-${key})`, stopOpacity: 0.8 }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: `var(--vef-color-${key})`, stopOpacity: 0.1 })
+    ] }, key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { axisLine: false, dataKey, tickLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { axisLine: false, tickLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { valueFormatter }) }),
+    Object.keys(config).map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Area,
+      {
+        dataKey: key,
+        fill: `url(#fill-${key})`,
+        stackId: "vef-area-chart",
+        stroke: `var(--vef-color-${key})`,
+        type: "natural"
+      },
+      key
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { content: /* @__PURE__ */ jsxRuntime.jsx(index$2.VefChartLegendContent, {}) })
+  ] }) });
+}
+const VefAreaChart = react.memo(VefAreaChartBase);
+
+exports.default = VefAreaChart;

package/cjs/vef-area-chart/props.cjs

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

package/cjs/vef-auto-sizer/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var AutoSizer = require('react-virtualized-auto-sizer');
+
+"use strict";
+const VefAutoSizer = AutoSizer;
+
+exports.default = VefAutoSizer;

package/cjs/vef-auto-sizer/props.cjs

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

package/cjs/vef-avatar/index.cjs

@@ -0,0 +1,25 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+
+"use strict";
+function VefAvatar({
+  size = "medium",
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Avatar,
+    {
+      crossOrigin: "anonymous",
+      draggable: false,
+      size: size === "medium" ? "default" : size,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefAvatar;

package/cjs/vef-avatar/props.cjs

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

package/cjs/vef-avatar-group/index.cjs

@@ -0,0 +1,30 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+var react = require('react');
+
+"use strict";
+const { Group } = antd.Avatar;
+function VefAvatarGroup({
+  max,
+  size = "medium",
+  ...restProps
+}) {
+  const maxToUse = react.useMemo(() => ({
+    count: max
+  }), [max]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Group,
+    {
+      max: maxToUse,
+      size: size === "medium" ? "default" : size,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefAvatarGroup;

package/cjs/vef-avatar-group/props.cjs

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

package/cjs/vef-badge/index.cjs

@@ -0,0 +1,52 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var antd = require('antd');
+var react = require('react');
+
+"use strict";
+function VefBadge({
+  variant = "default",
+  count,
+  overflowCount,
+  showZero,
+  size,
+  offset,
+  color
+}) {
+  const colorTokens = hooks.useColorTokens();
+  const badgeProps = react.useMemo(() => {
+    if (variant === "dot") {
+      return {
+        dot: true,
+        color: color ? colorTokens.get(color) : void 0,
+        size: size === "medium" ? "default" : size,
+        offset
+      };
+    }
+    return {
+      count,
+      overflowCount,
+      showZero,
+      size: size === "medium" ? "default" : size,
+      offset,
+      color: color ? colorTokens.get(color) : void 0
+    };
+  }, [
+    variant,
+    count,
+    overflowCount,
+    showZero,
+    size,
+    offset,
+    color,
+    colorTokens
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Badge, { ...badgeProps });
+}
+
+exports.default = VefBadge;

package/cjs/vef-badge/props.cjs

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

package/cjs/vef-bar-chart/index.cjs

@@ -0,0 +1,46 @@
+"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 recharts = require('recharts');
+var index = require('../vef-chart-container/index.cjs');
+var index$2 = require('../vef-chart-legend-content/index.cjs');
+var index$1 = require('../vef-chart-tooltip-content/index.cjs');
+
+"use strict";
+function VefBarChartBase({
+  data,
+  config,
+  dataKey,
+  valueFormatter,
+  stack,
+  ...restProps
+}) {
+  const { borderRadius } = hooks.useThemeTokens();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { config, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { axisLine: false, dataKey, tickLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { axisLine: false, tickLine: false, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { valueFormatter }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { content: /* @__PURE__ */ jsxRuntime.jsx(index$2.VefChartLegendContent, {}) }),
+    Object.keys(config).map(
+      (key) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Bar,
+        {
+          dataKey: key,
+          fill: `var(--vef-color-${key})`,
+          radius: borderRadius,
+          stackId: stack ? "vef-bar-chart" : void 0
+        },
+        key
+      )
+    )
+  ] }) });
+}
+const VefBarChart = react.memo(VefBarChartBase);
+
+exports.default = VefBarChart;

package/cjs/vef-bar-chart/props.cjs

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

package/cjs/vef-bool/hooks/use-bool-instance.cjs

@@ -0,0 +1,37 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+function useBoolInstance(variant, ref) {
+  const switchRef = react.useRef(null);
+  const checkboxRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => {
+    if (variant === "switch") {
+      return {
+        focus: () => {
+          switchRef.current?.focus({ preventScroll: true });
+        },
+        blur: () => {
+          switchRef.current?.blur();
+        }
+      };
+    } else {
+      return {
+        focus: () => {
+          checkboxRef.current?.focus({ preventScroll: true });
+        },
+        blur: () => {
+          checkboxRef.current?.blur();
+        }
+      };
+    }
+  });
+  return {
+    switchRef,
+    checkboxRef
+  };
+}
+
+exports.useBoolInstance = useBoolInstance;

package/cjs/vef-bool/index.cjs

@@ -0,0 +1,65 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+var useBoolInstance = require('./hooks/use-bool-instance.cjs');
+
+"use strict";
+function VefBoolBase({
+  defaultValue,
+  value,
+  disabled,
+  size,
+  label,
+  indeterminate,
+  variant = "switch",
+  loading,
+  onChange
+}, ref) {
+  const handleChange = react.useMemo(() => {
+    if (!shared.isFunction(onChange)) {
+      return;
+    }
+    if (variant === "switch") {
+      return (value2) => onChange(value2);
+    } else {
+      return ({ target: { checked } }) => onChange(checked);
+    }
+  }, [onChange, variant]);
+  const { switchRef, checkboxRef } = useBoolInstance.useBoolInstance(variant, ref);
+  if (variant === "switch") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Switch,
+      {
+        ref: switchRef,
+        defaultChecked: defaultValue,
+        disabled,
+        loading,
+        size: size === "medium" ? "default" : size,
+        onChange: handleChange,
+        ...value === void 0 ? {} : { checked: value }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Checkbox,
+    {
+      ref: checkboxRef,
+      defaultChecked: defaultValue,
+      disabled,
+      indeterminate,
+      onChange: handleChange,
+      ...value === void 0 ? {} : { checked: value },
+      children: label
+    }
+  );
+}
+const VefBool = react.memo(react.forwardRef(VefBoolBase));
+VefBool.displayName = "VefBool";
+
+exports.default = VefBool;

package/cjs/vef-bool/props.cjs

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

package/cjs/vef-breadcrumb/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+
+"use strict";
+function VefBreadcrumb({ items, onClick }) {
+  const breadcrumbItems = react.useMemo(() => items.map((item) => {
+    const {
+      label,
+      key,
+      dropdownItems
+    } = item;
+    return {
+      title: label,
+      key,
+      menu: shared.isArray(dropdownItems) && dropdownItems.length > 0 ? {
+        items: dropdownItems.map((it) => ({
+          key: it.key,
+          title: it.label
+        })),
+        onClick: ({ key: key2 }) => onClick?.(key2)
+      } : void 0
+    };
+  }), [items, onClick]);
+  const renderItem = react.useCallback(({ key, title }) => {
+    if (shared.isString(key)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          className: "vef-breadcrumb-link",
+          onClick: () => onClick?.(key),
+          children: title
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "vef-breadcrumb-text", children: title });
+  }, [onClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Breadcrumb,
+    {
+      itemRender: renderItem,
+      items: breadcrumbItems
+    }
+  );
+}
+
+exports.default = VefBreadcrumb;

package/cjs/vef-breadcrumb/props.cjs

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

package/cjs/vef-button/components/base-button.cjs

@@ -0,0 +1,78 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var antd = require('antd');
+var react = require('react');
+require('../../internal/index.cjs');
+var utils = require('../../internal/utils.cjs');
+
+"use strict";
+const buttonColorTypes = [...shared.defaultColorTypes, "default", "primary", "error"];
+const VefBaseButton = react.forwardRef(({
+  color,
+  iconPosition,
+  size,
+  type,
+  variant = "solid",
+  autoInsertSpace,
+  disabled,
+  loading,
+  ...restProps
+}, ref) => {
+  const colorTokens = hooks.useColorTokens();
+  const iconPositionToUse = iconPosition === "left" ? "start" : iconPosition === "right" ? "end" : void 0;
+  if (!color || buttonColorTypes.includes(color)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Button,
+      {
+        ref,
+        autoInsertSpace,
+        color: color === "error" ? "danger" : color,
+        disabled: loading ? false : disabled,
+        htmlType: type,
+        iconPosition: iconPositionToUse,
+        loading,
+        size: utils.convertBasicSizeToUiSize(size),
+        variant,
+        ...restProps
+      }
+    );
+  }
+  if (colorTokens.has(color)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.ConfigProvider,
+      {
+        theme: {
+          token: {
+            colorPrimary: colorTokens.get(color)
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          antd.Button,
+          {
+            ref,
+            autoInsertSpace,
+            color: "primary",
+            disabled: loading ? false : disabled,
+            htmlType: type,
+            iconPosition: iconPositionToUse,
+            loading,
+            size: utils.convertBasicSizeToUiSize(size),
+            variant,
+            ...restProps
+          }
+        )
+      }
+    );
+  } else {
+    throw new Error(`Invalid button color: ${color}`);
+  }
+});
+VefBaseButton.displayName = "VefBaseButton";
+
+exports.default = VefBaseButton;