@vef-framework/components 1.0.121 → 1.0.123

package/cjs/vef-not-found/props.cjs

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

package/cjs/vef-page/index.cjs

@@ -0,0 +1,140 @@
+"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 clsx = require('clsx');
+var react$1 = require('motion/react');
+var index$1 = require('../vef-scroll-area/index.cjs');
+var index = require('../vef-title/index.cjs');
+
+"use strict";
+const pageStyle = react.css`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: ${shared.themeVariables.colorBgLayout};
+
+  .vef-page-header {
+    flex: none;
+    background-color: ${shared.themeVariables.colorBgContainer};
+    padding: ${shared.themeVariables.paddingSm} ${shared.themeVariables.paddingLg};
+    border-bottom: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
+
+    &.vef-page-header-default {
+      display: flex;
+      align-items: center;
+
+      > .vef-page-title {
+        flex: none;
+      }
+
+      > .vef-page-actions {
+        flex: auto;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+      }
+    }
+
+    .vef-typography {
+      font-weight: normal;
+    }
+  }
+
+  .vef-page-body {
+    flex: auto;
+    min-height: 0;
+  }
+
+  .vef-page-content {
+    margin: ${shared.themeVariables.marginSm};
+
+    &.vef-page-content-footer-padding {
+      padding-bottom: calc(${shared.themeVariables.controlHeight} * 2);
+    }
+  }
+
+  .vef-page-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
+    border-top: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
+    background-color: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(8px);
+    height: calc(${shared.themeVariables.controlHeight} * 2);
+  }
+`;
+function VefPage({
+  title,
+  actions,
+  header,
+  footer,
+  scrollable = false,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: pageStyle, children: [
+    header !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx("vef-page-header", {
+          "vef-page-header-default": !header
+        }),
+        children: header || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index.default,
+            {
+              noPaddingBottom: true,
+              showLeftBar: true,
+              className: "vef-page-title",
+              level: 5,
+              children: title ?? "无标题"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vef-page-actions", children: actions })
+        ] })
+      }
+    ),
+    scrollable ? /* @__PURE__ */ jsxRuntime.jsxs(index$1.default, { className: "vef-page-body", scrollDirection: "both", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: clsx("vef-page-content", {
+            "vef-page-content-footer-padding": !!footer
+          }),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { children: footer && /* @__PURE__ */ jsxRuntime.jsx(
+        react$1.motion.div,
+        {
+          className: "vef-page-footer",
+          animate: {
+            opacity: 1,
+            y: 0
+          },
+          exit: {
+            opacity: 0,
+            y: 60
+          },
+          initial: {
+            opacity: 0,
+            y: 60
+          },
+          transition: {
+            duration: 0.2,
+            ease: "easeInOut"
+          },
+          children: footer
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vef-page-body vef-page-content", children })
+  ] });
+}
+
+exports.default = VefPage;

package/cjs/vef-page/props.cjs

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

package/cjs/vef-pagination/index.cjs

@@ -0,0 +1,62 @@
+"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');
+var index = require('../vef-text/index.cjs');
+var props = require('./props.cjs');
+
+"use strict";
+function renderTotal(total) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    "共",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { bold: true, children: total }),
+    " ",
+    "条"
+  ] });
+}
+const sizeChangerProps = {
+  listHeight: 300
+};
+function VefPaginationBase({
+  defaultPageNumber,
+  defaultPageSize,
+  pageNumber,
+  pageSize,
+  total,
+  size,
+  pageSizeOptions = props.defaultPageSizeOptions,
+  allowChangePageSize = true,
+  showTotal = true,
+  compact,
+  allowQuickJump,
+  onChange,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Pagination,
+    {
+      current: pageNumber,
+      defaultCurrent: defaultPageNumber,
+      defaultPageSize,
+      pageSize,
+      pageSizeOptions,
+      showQuickJumper: allowQuickJump,
+      showSizeChanger: allowChangePageSize ? sizeChangerProps : allowChangePageSize,
+      showTotal: showTotal ? renderTotal : void 0,
+      simple: compact,
+      size: size === "medium" ? "default" : size,
+      total,
+      onChange,
+      ...restProps
+    }
+  );
+}
+const VefPagination = react.memo(VefPaginationBase);
+VefPagination.displayName = "VefPagination";
+
+exports.default = VefPagination;

package/cjs/vef-pagination/props.cjs

@@ -0,0 +1,16 @@
+"use strict";
+'use strict';
+
+"use strict";
+const defaultPageSizeOptions = [
+  5,
+  10,
+  15,
+  20,
+  30,
+  40,
+  50,
+  100
+];
+
+exports.defaultPageSizeOptions = defaultPageSizeOptions;

package/cjs/vef-paragraph/index.cjs

@@ -0,0 +1,94 @@
+"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');
+
+"use strict";
+const { Paragraph } = antd.Typography;
+function VefParagraph({
+  variant,
+  color,
+  bold,
+  ellipsis,
+  ellipsisRows = 2,
+  expandable,
+  defaultExpanded,
+  expanded,
+  copyable,
+  copiedText,
+  onCopy,
+  onExpand,
+  ...restProps
+}) {
+  const ellipsisConfig = react.useMemo(() => {
+    if (ellipsis) {
+      return {
+        rows: ellipsisRows,
+        expandable: expandable ? "collapsible" : void 0,
+        defaultExpanded,
+        expanded,
+        onExpand: shared.isFunction(onExpand) ? (_, { expanded: expanded2 }) => {
+          onExpand(expanded2);
+        } : void 0
+      };
+    }
+  }, [
+    expandable,
+    defaultExpanded,
+    ellipsis,
+    ellipsisRows,
+    expanded,
+    onExpand
+  ]);
+  const colorTokens = hooks.useColorTokens();
+  const styleProps = react.useMemo(() => {
+    const props = {};
+    if (variant === "strikethrough") {
+      props.delete = true;
+    } else if (variant) {
+      props[variant] = true;
+    }
+    if (color === "secondary") {
+      props.type = "secondary";
+    } else if (color) {
+      props.css = {
+        color: colorTokens.get(color)
+      };
+    }
+    if (bold) {
+      props.strong = true;
+    }
+    return props;
+  }, [
+    bold,
+    color,
+    colorTokens,
+    variant
+  ]);
+  const copyConfig = react.useMemo(() => {
+    if (copyable) {
+      return {
+        format: "text/plain",
+        text: copiedText,
+        onCopy
+      };
+    }
+  }, [copyable, copiedText, onCopy]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Paragraph,
+    {
+      copyable: copyConfig,
+      ellipsis: ellipsisConfig,
+      ...styleProps,
+      ...restProps
+    }
+  );
+}
+
+exports.default = VefParagraph;

package/cjs/vef-paragraph/props.cjs

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

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

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

package/cjs/vef-password/index.cjs

@@ -0,0 +1,72 @@
+"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');
+require('../internal/index.cjs');
+var usePasswordInstance = require('./hooks/use-password-instance.cjs');
+var utils = require('../internal/utils.cjs');
+
+"use strict";
+const { Password } = antd.Input;
+function normalizeValue(value) {
+  if (value === "") {
+    return null;
+  }
+  return value;
+}
+const VefPassword = react.forwardRef(
+  ({
+    defaultValue,
+    value,
+    size,
+    clearable,
+    showCount,
+    onChange,
+    onEnterKeyPress,
+    onBlur,
+    onFocus,
+    ...restProps
+  }, ref) => {
+    const eventHandlers = react.useMemo(() => ({
+      onChange: shared.isFunction(onChange) ? (event) => onChange(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onPressEnter: shared.isFunction(onEnterKeyPress) ? (event) => onEnterKeyPress(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onBlur: shared.isFunction(onBlur) ? (event) => onBlur(
+        normalizeValue(event.target.value)
+      ) : void 0,
+      onFocus: shared.isFunction(onFocus) ? (event) => onFocus(
+        normalizeValue(event.target.value)
+      ) : void 0
+    }), [
+      onChange,
+      onEnterKeyPress,
+      onBlur,
+      onFocus
+    ]);
+    const passwordRef = usePasswordInstance.usePasswordInstance(ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Password,
+      {
+        ref: passwordRef,
+        allowClear: clearable,
+        defaultValue,
+        showCount,
+        size: utils.convertBasicSizeToUiSize(size),
+        value,
+        ...restProps,
+        ...eventHandlers
+      }
+    );
+  }
+);
+VefPassword.displayName = "VefPassword";
+
+exports.default = VefPassword;

package/cjs/vef-password/props.cjs

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

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

@@ -0,0 +1,75 @@
+"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 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";
+const valueStyle = react.css`
+  fill: ${shared.themeVariables.colorText};
+  font-size: ${shared.themeVariables.fontSizeHeading3};
+  font-weight: ${shared.themeVariables.fontWeightStrong};
+  font-family: ${shared.themeVariables.fontFamilyCode};
+`;
+const labelStyle = react.css`
+  fill: ${shared.themeVariables.colorTextDescription};
+`;
+function VefPieChartBase({
+  config,
+  data,
+  dataKey,
+  nameKey,
+  valueFormatter,
+  innerRadius = 60
+}) {
+  const total = react$1.useMemo(
+    () => data.reduce((acc, item) => acc + Number(item[dataKey] ?? 0), 0),
+    [data, dataKey]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(index.default, { config, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { hideLabel: true, valueFormatter }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, { content: /* @__PURE__ */ jsxRuntime.jsx(index$2.VefChartLegendContent, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Pie,
+      {
+        data,
+        dataKey,
+        innerRadius,
+        nameKey,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Label,
+          {
+            content: ({ viewBox }) => {
+              if (viewBox && "cx" in viewBox && "cy" in viewBox && (viewBox.innerRadius ?? 0) > 50) {
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "text",
+                  {
+                    dominantBaseline: "middle",
+                    textAnchor: "middle",
+                    x: viewBox.cx,
+                    y: viewBox.cy,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("tspan", { css: valueStyle, x: viewBox.cx, y: viewBox.cy, children: total }),
+                      /* @__PURE__ */ jsxRuntime.jsx("tspan", { css: labelStyle, x: viewBox.cx, y: (viewBox.cy || 0) + 28, children: config[dataKey]?.label ?? dataKey })
+                    ]
+                  }
+                );
+              }
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+}
+const VefPieChart = react$1.memo(VefPieChartBase);
+
+exports.default = VefPieChart;

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

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

package/cjs/vef-popconfirm/index.cjs

@@ -0,0 +1,61 @@
+"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 lucideReact = require('lucide-react');
+var react = require('react');
+var index = require('../vef-icon/index.cjs');
+
+"use strict";
+const okButtonProps = {
+  autoInsertSpace: false,
+  icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckIcon, {}) })
+};
+const cancelButtonProps = {
+  autoInsertSpace: false,
+  variant: "text",
+  color: "default"
+};
+function popupClickHandler(event) {
+  event.stopPropagation();
+}
+const VefPopconfirm = react.forwardRef(({
+  title = shared.defaultMessageTitle,
+  content,
+  cancelable = true,
+  defaultOpened,
+  opened,
+  onOpenedChange,
+  onOk,
+  onCancel,
+  ...restProps
+}, ref) => {
+  const tooltipRef = react.useRef(null);
+  react.useImperativeHandle(ref, () => tooltipRef.current.nativeElement);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Popconfirm,
+    {
+      ref: tooltipRef,
+      cancelButtonProps,
+      defaultOpen: defaultOpened,
+      description: content,
+      icon: shared.infoIcon,
+      okButtonProps,
+      open: opened,
+      showCancel: cancelable,
+      title,
+      onCancel,
+      onConfirm: onOk,
+      onOpenChange: onOpenedChange,
+      onPopupClick: popupClickHandler,
+      ...restProps
+    }
+  );
+});
+VefPopconfirm.displayName = "VefPopconfirm";
+
+exports.default = VefPopconfirm;

package/cjs/vef-popconfirm/props.cjs

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

package/cjs/vef-popover/index.cjs

@@ -0,0 +1,39 @@
+"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 VefPopover = react.forwardRef(({
+  title,
+  content,
+  contentStyle,
+  trigger = "click",
+  arrow = false,
+  ...restProps
+}, ref) => {
+  const popoverRef = react.useRef(null);
+  const styles = react.useMemo(() => ({
+    body: contentStyle
+  }), [contentStyle]);
+  react.useImperativeHandle(ref, () => popoverRef.current.nativeElement);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Popover,
+    {
+      ref: popoverRef,
+      arrow,
+      content,
+      styles,
+      title,
+      trigger,
+      ...restProps
+    }
+  );
+});
+VefPopover.displayName = "VefPopover";
+
+exports.default = VefPopover;

package/cjs/vef-popover/props.cjs

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

package/cjs/vef-radio/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 ? [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;

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

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