@vef-framework/components 1.0.122 → 1.0.124

package/cjs/vef-button/index.cjs

@@ -0,0 +1,156 @@
+"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 react = require('react');
+var index$1 = require('../vef-popconfirm/index.cjs');
+var index = require('../vef-tooltip/index.cjs');
+var baseButton = require('./components/base-button.cjs');
+
+"use strict";
+const VefButtonBase = react.forwardRef(({
+  tip,
+  onClick,
+  disabled = false,
+  loading,
+  ...restProps
+}, ref) => {
+  const [isLoading, setIsLoading] = react.useState(false);
+  const onConfirmationOkToUse = react.useMemo(
+    () => {
+      if (restProps.requireConfirmation) {
+        const { onConfirmationOk } = restProps;
+        return shared.isNullish(loading) ? async () => {
+          await shared.invokeMaybeAsyncFn(
+            onConfirmationOk,
+            {
+              beforeInvoke: () => {
+                setIsLoading(true);
+              },
+              onFinally: () => {
+                setIsLoading(false);
+              }
+            }
+          );
+        } : onConfirmationOk;
+      }
+    },
+    // eslint-disable-next-line ts/ban-ts-comment
+    // @ts-expect-error
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [restProps.requireConfirmation, restProps.onConfirmationOk]
+  );
+  const onClickToUse = react.useMemo(
+    () => {
+      if (!restProps.requireConfirmation) {
+        if (onClick && shared.isNullish(loading)) {
+          return async (event) => {
+            await shared.invokeMaybeAsyncFn(
+              onClick,
+              {
+                beforeInvoke: () => {
+                  setIsLoading(true);
+                },
+                onFinally: () => {
+                  setIsLoading(false);
+                }
+              },
+              event
+            );
+          };
+        } else {
+          return onClick;
+        }
+      }
+      const {
+        confirmationMode = "simple",
+        confirmationTitle = shared.defaultMessageTitle,
+        confirmationContent,
+        onConfirmationCancel
+      } = restProps;
+      if (confirmationMode === "simple") {
+        return (event) => {
+          event.stopPropagation();
+        };
+      }
+      return (event) => {
+        event.stopPropagation();
+        shared.showConfirmation(
+          confirmationTitle,
+          confirmationContent,
+          onConfirmationOkToUse,
+          {
+            onCancel: onConfirmationCancel
+          }
+        );
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      loading,
+      onClick,
+      onConfirmationOkToUse,
+      restProps.requireConfirmation,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationMode,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationTitle,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.confirmationContent,
+      // eslint-disable-next-line ts/ban-ts-comment
+      // @ts-expect-error
+      restProps.onConfirmationCancel
+    ]
+  );
+  const contextDisabled = hooks.useContextDisabled();
+  const buttonDisabled = contextDisabled || disabled;
+  const buttonNode = /* @__PURE__ */ jsxRuntime.jsx(
+    baseButton.default,
+    {
+      ref,
+      disabled: buttonDisabled,
+      loading: loading ?? isLoading,
+      onClick: onClickToUse,
+      ...shared.omit(restProps, [
+        "requireConfirmation",
+        "confirmationMode",
+        "confirmationTitle",
+        "confirmationContent",
+        "onConfirmationOk",
+        "onConfirmationCancel"
+      ])
+    }
+  );
+  const buttonNodeMaybeWithTip = tip ? /* @__PURE__ */ jsxRuntime.jsx(index.default, { content: tip, children: buttonNode }) : buttonNode;
+  if (restProps.requireConfirmation && restProps.confirmationMode === "simple") {
+    const {
+      confirmationTitle = shared.defaultMessageTitle,
+      confirmationContent,
+      onConfirmationCancel
+    } = restProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index$1.default,
+      {
+        ref,
+        content: confirmationContent,
+        disabled: buttonDisabled,
+        title: confirmationTitle,
+        onCancel: onConfirmationCancel,
+        onOk: onConfirmationOkToUse,
+        children: buttonNodeMaybeWithTip
+      }
+    );
+  }
+  return buttonNodeMaybeWithTip;
+});
+const VefButton = react.memo(VefButtonBase);
+VefButton.displayName = "VefButton";
+
+exports.default = VefButton;

package/cjs/vef-button/props.cjs

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

package/cjs/vef-card/index.cjs

@@ -0,0 +1,30 @@
+"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');
+
+"use strict";
+function VefCard({
+  size = "medium",
+  showHoverEffect = false,
+  actions,
+  nested = false,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Card,
+    {
+      actions: shared.isArray(actions) ? actions : actions ? [actions] : void 0,
+      hoverable: showHoverEffect,
+      size: size === "medium" ? "default" : size,
+      type: nested ? "inner" : void 0,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefCard;

package/cjs/vef-card/props.cjs

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

package/cjs/vef-card-meta/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var antd = require('antd');
+
+"use strict";
+const { Meta: CardMeta } = antd.Card;
+function VefCardMeta({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CardMeta, { ...props });
+}
+
+exports.default = VefCardMeta;

package/cjs/vef-card-meta/props.cjs

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

package/cjs/vef-chart-container/hooks/use-chart-container-context.cjs

@@ -0,0 +1,17 @@
+"use strict";
+'use strict';
+
+var shared = require('@vef-framework/shared');
+
+"use strict";
+const {
+  useContextSelector: useChartContainerContextSelector,
+  useContext: useChartContainerContext,
+  ContextProvider: ChartContainerContextProvider
+} = shared.createSelectableContext({
+  config: {}
+});
+
+exports.ChartContainerContextProvider = ChartContainerContextProvider;
+exports.useChartContainerContext = useChartContainerContext;
+exports.useChartContainerContextSelector = useChartContainerContextSelector;

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

@@ -0,0 +1,128 @@
+"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$1 = require('react');
+var recharts = require('recharts');
+var useChartContainerContext = require('./hooks/use-chart-container-context.cjs');
+
+"use strict";
+const chartContainerStyle = react.css`
+  display: flex;
+  justify-content: center;
+  
+  & .recharts-cartesian-axis-tick text {
+    fill: ${shared.themeVariables.colorTextDescription};
+  }
+  
+  & .recharts-cartesian-grid line[stroke='#ccc'] {
+    stroke: color-mix(in srgb, ${shared.themeVariables.colorBorder} 50%, transparent);
+  }
+  
+  & .recharts-curve.recharts-tooltip-cursor {
+    stroke: ${shared.themeVariables.colorBorderSecondary};
+  }
+  
+  & .recharts-dot[stroke='#fff'] {
+    stroke: transparent;
+  }
+  
+  & .recharts-layer {
+    outline: none;
+  }
+  
+  & .recharts-polar-grid[stroke='#ccc'] {
+    stroke: ${shared.themeVariables.colorBorderSecondary};
+  }
+  
+  & .recharts-radial-bar-background-sector {
+    fill: ${shared.themeVariables.colorFillContent};
+  }
+  
+  & .recharts-rectangle.recharts-tooltip-cursor {
+    fill: ${shared.themeVariables.colorFillContent};
+  }
+  
+  & .recharts-reference-line[stroke='#ccc'] {
+    stroke: ${shared.themeVariables.colorBorderSecondary};
+  }
+  
+  & .recharts-sector[stroke='#fff'] {
+    stroke: transparent;
+  }
+  
+  & .recharts-sector {
+    outline: none;
+  }
+  
+  & .recharts-surface {
+    outline: none;
+  }
+`;
+function ChartStyle({
+  id,
+  config
+}) {
+  const colors = Object.entries(config).map(([key, { color }]) => [key, color]).filter(([, color]) => shared.isString(color));
+  if (!colors.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+          [data-chart="${id}"] {
+            ${colors.map(([key, color]) => `--vef-color-${key}: ${color};`).join("\n")}
+          }
+        `
+      }
+    }
+  );
+}
+const VefChartContainer = react$1.forwardRef(({
+  id,
+  className,
+  children,
+  config,
+  aspect = 16 / 9,
+  width = "100%",
+  height,
+  minWidth,
+  minHeight,
+  ...restProps
+}, ref) => {
+  const uniqueId = react$1.useId();
+  const chartId = `${id || uniqueId.replace(/:/g, "")}-chart`;
+  return /* @__PURE__ */ jsxRuntime.jsx(useChartContainerContext.ChartContainerContextProvider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className,
+      css: chartContainerStyle,
+      "data-chart": chartId,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ChartStyle, { config, id: chartId }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.ResponsiveContainer,
+          {
+            aspect,
+            height,
+            minHeight,
+            minWidth,
+            width,
+            children
+          }
+        )
+      ]
+    }
+  ) });
+});
+VefChartContainer.displayName = "VefChartContainer";
+
+exports.default = VefChartContainer;

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

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

package/cjs/vef-chart-legend-content/index.cjs

@@ -0,0 +1,55 @@
+"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$1 = require('react');
+require('../internal/index.cjs');
+var useChartContainerContext = require('../vef-chart-container/hooks/use-chart-container-context.cjs');
+var chart = require('../internal/chart.cjs');
+
+"use strict";
+const chartLegendContentStyle = react.css`
+  ${shared.styles.flexCenter}
+  gap: ${shared.themeVariables.margin};
+  padding-top: ${shared.themeVariables.marginSm};
+`;
+const itemStyle = react.css`
+  display: flex;
+  align-items: center;
+  gap: ${shared.themeVariables.marginXs};
+  color: ${shared.themeVariables.colorTextLabel};
+`;
+const indicatorStyle = react.css`
+  flex: none;
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: ${shared.themeVariables.borderRadiusXs};
+  background-color: var(--vef-indicator-color);
+`;
+const VefChartLegendContent = react$1.forwardRef(({
+  className,
+  payload
+}, ref) => {
+  const config = useChartContainerContext.useChartContainerContextSelector((ctx) => ctx.config);
+  if (!payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, css: chartLegendContentStyle, children: payload.map(
+    (item) => {
+      const key = `${item.dataKey || "value"}`;
+      const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: itemStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: indicatorStyle, style: { "--vef-indicator-color": item.color } }),
+        itemConfig?.label
+      ] }, item.value);
+    }
+  ) });
+});
+VefChartLegendContent.displayName = "VefChartLegendContent";
+
+exports.VefChartLegendContent = VefChartLegendContent;
+exports.default = VefChartLegendContent;

package/cjs/vef-chart-legend-content/props.cjs

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

package/cjs/vef-chart-tooltip-content/index.cjs

@@ -0,0 +1,110 @@
+"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$1 = require('react');
+require('../internal/index.cjs');
+var useChartContainerContext = require('../vef-chart-container/hooks/use-chart-container-context.cjs');
+var chart = require('../internal/chart.cjs');
+
+"use strict";
+const wrapperStyle = react.css`
+  display: grid;
+  min-width: 10rem;
+  align-items: start;
+  gap: ${shared.themeVariables.marginXs};
+  border-radius: ${shared.themeVariables.borderRadius};
+  border: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
+  background: ${shared.themeVariables.colorBgContainer};
+  padding: ${shared.themeVariables.paddingXs} ${shared.themeVariables.paddingSm};
+  box-shadow: ${shared.themeVariables.boxShadowSecondary};
+  color: ${shared.themeVariables.colorTextLabel}
+`;
+const itemsWrapperStyle = react.css`
+  display: grid;
+  gap: ${shared.themeVariables.marginXs};
+`;
+const labelStyle = react.css`
+  font-weight: 500;
+`;
+const itemStyle = react.css`
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: ${shared.themeVariables.marginXs};
+`;
+const indicatorStyle = react.css`
+  height: 0.75rem;
+  width: 0.75rem;
+  flex: none;
+  border-radius: ${shared.themeVariables.borderRadiusXs};
+  border-color: var(--vef-indicator-color);
+  background-color: var(--vef-indicator-color);
+`;
+const itemContentStyle = react.css`
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${shared.themeVariables.marginXs};
+  line-height: 1;
+`;
+const itemLabelStyle = react.css`
+  color: ${shared.themeVariables.colorTextDescription};
+`;
+const itemValueStyle = react.css`
+  font-weight: 500;
+  font-family: ${shared.themeVariables.fontFamilyCode};
+`;
+const VefChartTooltipContent = react$1.forwardRef(({
+  active,
+  payload,
+  className,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  valueFormatter,
+  color,
+  hideLabel = false
+}, ref) => {
+  const config = useChartContainerContext.useChartContainerContextSelector((ctx) => ctx.config);
+  const tooltipLabel = react$1.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${item.dataKey || item.name || "value"}`;
+    const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+    const labelValue = shared.isString(label) ? label : itemConfig?.label;
+    if (!labelValue) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: labelClassName, css: labelStyle, children: shared.isFunction(labelFormatter) ? labelFormatter(labelValue, payload) : labelValue });
+  }, [hideLabel, payload, config, label, labelClassName, labelFormatter]);
+  if (!active || !payload?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className, css: wrapperStyle, children: [
+    tooltipLabel,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: itemsWrapperStyle, children: payload.map((item, index) => {
+      const key = `${item.name || item.dataKey || "value"}`;
+      const itemConfig = chart.getPayloadConfigFromPayload(item, key, config);
+      const indicatorColor = color || item.payload.fill || item.color;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { css: itemStyle, children: formatter && !shared.isNullish(item?.value) && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: indicatorStyle, style: { "--vef-indicator-color": indicatorColor } }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: itemContentStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { css: itemLabelStyle, children: itemConfig?.label || item.name }),
+          item.value && /* @__PURE__ */ jsxRuntime.jsx("span", { css: itemValueStyle, children: shared.isFunction(valueFormatter) ? valueFormatter(item.value) : item.value.toLocaleString() })
+        ] })
+      ] }) }, item.dataKey);
+    }) })
+  ] });
+});
+
+exports.default = VefChartTooltipContent;

package/cjs/vef-chart-tooltip-content/props.cjs

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

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

@@ -0,0 +1,23 @@
+"use strict";
+'use strict';
+
+var react = require('react');
+
+"use strict";
+function useCheckboxInstance(ref, dataOptions) {
+  const checkboxRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => ({
+    blur: () => {
+      checkboxRef.current?.blur();
+    },
+    focus: () => {
+      checkboxRef.current?.focus({
+        preventScroll: true
+      });
+    },
+    getDataOptions: () => dataOptions
+  }));
+  return checkboxRef;
+}
+
+exports.useCheckboxInstance = useCheckboxInstance;

package/cjs/vef-checkbox/hooks/use-data-options.cjs

@@ -0,0 +1,43 @@
+"use strict";
+'use strict';
+
+var hooks = require('@vef-framework/hooks');
+var shared = require('@vef-framework/shared');
+var react = require('react');
+
+"use strict";
+function useDataOptions({
+  value,
+  onChange,
+  ...rest
+}) {
+  const {
+    normalizedOptions,
+    defaultOption,
+    isLoading
+  } = hooks.useComputedOptions({
+    ...rest,
+    isGrouped: false,
+    filterable: false,
+    selectedOptionValues: value
+  });
+  const optionsMap = react.useMemo(() => normalizedOptions.reduce((map, option) => {
+    map.set(option.value, option);
+    return map;
+  }, /* @__PURE__ */ new Map()), [normalizedOptions]);
+  react.useLayoutEffect(() => {
+    if (defaultOption && shared.isFunction(onChange) && shared.isNullish(value)) {
+      onChange(
+        [defaultOption.value],
+        [defaultOption]
+      );
+    }
+  }, [defaultOption, onChange, value]);
+  return {
+    optionsMap,
+    normalizedOptions,
+    isLoading
+  };
+}
+
+exports.useDataOptions = useDataOptions;