@vef-framework/components 1.0.122 → 1.0.123

package/esm/vef-form-modal/index.js

@@ -0,0 +1,96 @@
+"use strict";
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { useContextDisabled, DisabledContextProvider } from '@vef-framework/hooks';
+import { isFunction } from '@vef-framework/shared';
+import { useRef, useCallback, memo } from 'react';
+import VefButton from '../vef-button/index.js';
+import VefForm from '../vef-form/index.js';
+import VefModal from '../vef-modal/index.js';
+import VefModalActionButtonWrapper from '../vef-modal/components/action-button-wrapper.js';
+
+"use strict";
+function VefFormModalBase({
+  submissionButtonText = "提交",
+  actions,
+  title,
+  open,
+  closable,
+  closeOnMaskClick,
+  closeOnEscPress,
+  destroyOnClose = true,
+  cancelOnClose,
+  width = "medium",
+  loading,
+  cancelButtonText,
+  onClose,
+  onCancel,
+  onAfterOpen,
+  onAfterClose,
+  disabled = false,
+  ...formProps
+}) {
+  const formInstanceRef = useRef(null);
+  const handleSubmit = useCallback(async () => {
+    await formInstanceRef.current?.submit();
+  }, []);
+  const contextDisabled = useContextDisabled();
+  const formDisabled = contextDisabled || disabled;
+  const handleReset = useCallback(() => {
+    formInstanceRef.current?.reset();
+  }, []);
+  const actionNode = useCallback(([cancelButton, submitButton]) => {
+    const resetButton = /* @__PURE__ */ jsx(VefModalActionButtonWrapper, { children: /* @__PURE__ */ jsx(
+      VefButton,
+      {
+        color: "default",
+        variant: "filled",
+        onClick: handleReset,
+        children: "重置"
+      }
+    ) }, "resetActionButton");
+    if (isFunction(actions)) {
+      return actions([cancelButton, resetButton, submitButton]);
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cancelButton,
+      resetButton,
+      submitButton
+    ] });
+  }, [actions, handleReset]);
+  return /* @__PURE__ */ jsx(DisabledContextProvider, { value: formDisabled, children: /* @__PURE__ */ jsx(
+    VefModal,
+    {
+      actions: actionNode,
+      cancelButtonText,
+      cancelOnClose,
+      closable,
+      closeOnEscPress,
+      closeOnMaskClick,
+      destroyOnClose,
+      loading,
+      okButtonText: submissionButtonText,
+      open,
+      title,
+      width,
+      onAfterClose,
+      onAfterOpen,
+      onCancel,
+      onClose,
+      onOk: handleSubmit,
+      children: /* @__PURE__ */ jsx(
+        VefForm,
+        {
+          ref: formInstanceRef,
+          disabled: formDisabled,
+          resetButton: false,
+          submissionButton: false,
+          ...formProps
+        }
+      )
+    }
+  ) });
+}
+const VefFormModal = memo(VefFormModalBase);
+VefFormModal.displayName = "VefFormModal";
+
+export { VefFormModal as default };

package/esm/vef-form-modal/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-generic-select/index.js

@@ -0,0 +1,82 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { SearchOutlined } from '@ant-design/icons';
+import { isFunction, styles } from '@vef-framework/shared';
+import { Select } from 'antd';
+import { LeafIcon } from 'lucide-react';
+import { useState, useDeferredValue, useCallback, useMemo, cloneElement } from 'react';
+import '../internal/index.js';
+import VefIcon from '../vef-icon/index.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+const dropdownStyle = {
+  "--vef-select-option-padding": 0
+};
+function VefGenericSelect({
+  value,
+  size,
+  renderLabel,
+  placeholder,
+  disabled,
+  clearable,
+  loading,
+  variant,
+  children,
+  onClear
+}) {
+  const [opened, setOpened] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [keyword, setKeyword] = useState();
+  const deferredKeyword = useDeferredValue(keyword);
+  const handleBlur = useCallback(() => {
+    setFocused(false);
+  }, []);
+  const handleFocus = useCallback(() => {
+    setFocused(true);
+  }, []);
+  const handleConfirm = useCallback(() => {
+    setOpened(false);
+  }, []);
+  const renderLabelToUse = useMemo(() => {
+    if (isFunction(renderLabel)) {
+      return ({ value: value2 }) => renderLabel?.(value2);
+    }
+  }, [renderLabel]);
+  const suffixIcon = focused && opened ? /* @__PURE__ */ jsx(SearchOutlined, {}) : /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(LeafIcon, {}) });
+  const childrenToUse = cloneElement(
+    children,
+    {
+      keyword: deferredKeyword,
+      onConfirm: handleConfirm
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      showSearch: true,
+      allowClear: clearable,
+      css: styles.fullWidth,
+      disabled,
+      dropdownStyle,
+      labelRender: renderLabelToUse,
+      loading,
+      notFoundContent: childrenToUse,
+      open: opened,
+      placeholder,
+      popupMatchSelectWidth: false,
+      searchValue: keyword,
+      size: convertBasicSizeToUiSize(size),
+      suffixIcon,
+      value,
+      variant,
+      onBlur: handleBlur,
+      onClear,
+      onDropdownVisibleChange: setOpened,
+      onFocus: handleFocus,
+      onSearch: setKeyword
+    }
+  );
+}
+
+export { VefGenericSelect as default };

package/esm/vef-generic-select/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-grid/index.js

@@ -0,0 +1,90 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useGapSizeNormalizer, useElementSize } from '@vef-framework/hooks';
+import { breakpoints, isArray } from '@vef-framework/shared';
+import clsx from 'clsx';
+import { useMemo, useRef, useEffect } from 'react';
+import { useContainerQuery } from 'react-container-query';
+
+"use strict";
+const GRID_COLUMNS = 24;
+const gridStyle = css`
+  display: grid;
+  grid: auto-flow / repeat(${GRID_COLUMNS}, minmax(0, 1fr));
+  
+  > * {
+    grid-column: span ${GRID_COLUMNS};
+  }
+
+  ${Array.from({ length: GRID_COLUMNS }).map((_, index) => `
+    > .vef-grid-item-${index + 1} {
+      grid-column: span ${index + 1};
+    }
+  `)}
+
+  ${breakpoints.map((breakpoint) => `
+    &.vef-container-${breakpoint} {
+      ${Array.from({ length: GRID_COLUMNS }).map((_, index) => `
+        > .vef-grid-item-${breakpoint}-${index + 1} {
+          grid-column: span ${index + 1};
+        }
+      `)}
+    }
+  `)}
+`;
+function VefGrid({
+  baseWidth = 240,
+  gap,
+  children
+}) {
+  const query = useMemo(() => ({
+    "vef-container-xs": { minWidth: 0 },
+    "vef-container-sm": { minWidth: baseWidth * 2 },
+    "vef-container-md": { minWidth: baseWidth * 3 },
+    "vef-container-lg": { minWidth: baseWidth * 4 },
+    "vef-container-xl": { minWidth: baseWidth * 5 },
+    "vef-container-xxl": { minWidth: baseWidth * 6 }
+  }), [baseWidth]);
+  const containerRef = useRef(null);
+  const [classNames, setRef] = useContainerQuery(query, {
+    width: baseWidth * 2
+  });
+  const normalizeGapSize = useGapSizeNormalizer();
+  const [rowGap, columnGap] = useMemo(() => {
+    if (isArray(gap)) {
+      return [normalizeGapSize(gap[0]), normalizeGapSize(gap[1])];
+    }
+    if (gap) {
+      const normalizedGap = normalizeGapSize(gap);
+      return [normalizedGap, normalizedGap];
+    }
+    return [0, 0];
+  }, [gap, normalizeGapSize]);
+  useEffect(() => {
+    setRef(containerRef.current);
+  }, [containerRef, setRef]);
+  const containerSize = useElementSize(containerRef);
+  const gapStyle = useMemo(() => {
+    if ((containerSize?.width ?? baseWidth * 2) > GRID_COLUMNS * columnGap) {
+      return {
+        gap: `${rowGap}px ${columnGap}px`
+      };
+    }
+    return {
+      gap: `${rowGap}px ${Math.floor((containerSize?.width ?? baseWidth * 2) / GRID_COLUMNS)}px`
+    };
+  }, [containerSize?.width, baseWidth, columnGap, rowGap]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx(classNames),
+      css: gridStyle,
+      style: gapStyle,
+      children
+    }
+  );
+}
+
+export { VefGrid as default };

package/esm/vef-grid/props.js

@@ -0,0 +1,5 @@
+"use strict";
+"use strict";
+const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl", "xxl"];
+
+export { BREAKPOINTS };

package/esm/vef-grid-item/index.js

@@ -0,0 +1,53 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+"use strict";
+function VefGridItem({
+  span,
+  xs,
+  sm,
+  md,
+  lg,
+  xl,
+  xxl,
+  children
+}) {
+  const classNames = useMemo(() => {
+    const classNames2 = [];
+    if (span) {
+      classNames2.push(`vef-grid-item-${span}`);
+    }
+    if (xs) {
+      classNames2.push(`vef-grid-item-xs-${xs}`);
+    }
+    if (sm) {
+      classNames2.push(`vef-grid-item-sm-${sm}`);
+    }
+    if (md) {
+      classNames2.push(`vef-grid-item-md-${md}`);
+    }
+    if (lg) {
+      classNames2.push(`vef-grid-item-lg-${lg}`);
+    }
+    if (xl) {
+      classNames2.push(`vef-grid-item-xl-${xl}`);
+    }
+    if (xxl) {
+      classNames2.push(`vef-grid-item-xxl-${xxl}`);
+    }
+    return classNames2;
+  }, [
+    span,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    xxl
+  ]);
+  return /* @__PURE__ */ jsx("div", { className: clsx(classNames), children });
+}
+
+export { VefGridItem as default };

package/esm/vef-grid-item/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-icon/index.js

@@ -0,0 +1,51 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import Icon from '@ant-design/icons';
+import { useColorTokens } from '@vef-framework/hooks';
+import { themeVariables, omit } from '@vef-framework/shared';
+import { forwardRef, useMemo, Suspense, cloneElement, memo } from 'react';
+
+"use strict";
+const VefIconBase = forwardRef(
+  ({
+    size,
+    color,
+    children,
+    ...restProps
+  }, ref) => {
+    const colorTokens = useColorTokens();
+    const style = useMemo(() => {
+      const style2 = {};
+      const fontSize = size === "small" ? themeVariables.fontSizeSm : size === "medium" ? themeVariables.fontSize : size === "large" ? themeVariables.fontSizeLg : size === "huge" ? themeVariables.fontSizeXl : void 0;
+      if (fontSize) {
+        style2.fontSize = fontSize;
+      }
+      if (color) {
+        style2.color = colorTokens.get(color);
+      }
+      return style2;
+    }, [size, color, colorTokens]);
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ref,
+        style,
+        component: (props) => {
+          const svgProps = omit(props, ["fill"]);
+          if (children.type === Suspense) {
+            const { children: icon } = children.props;
+            return cloneElement(children, {
+              children: cloneElement(icon, svgProps)
+            });
+          }
+          return cloneElement(children, svgProps);
+        },
+        ...restProps
+      }
+    );
+  }
+);
+const VefIcon = memo(VefIconBase);
+VefIcon.displayName = "VefIcon";
+
+export { VefIcon as default };

package/esm/vef-icon/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-icon-select/index.js

@@ -0,0 +1,176 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useThemeTokens } from '@vef-framework/hooks';
+import { themeVariables, trim, cluster, isUndefined } from '@vef-framework/shared';
+import { useMemo, useCallback, memo, useState } from 'react';
+import VefDynamicIcon from '../vef-dynamic-icon/index.js';
+import { dynamicIconNames } from '../vef-dynamic-icon/props.js';
+import VefEmptyPlaceholder from '../vef-empty-placeholder/index.js';
+import VefGenericSelect from '../vef-generic-select/index.js';
+import VefSpace from '../vef-space/index.js';
+import VefText from '../vef-text/index.js';
+import VefVirtualGrid from '../vef-virtual-grid/index.js';
+
+"use strict";
+const iconsStyle = css`
+  color: ${themeVariables.colorTextSlate};
+
+  .vef-icon-select-wrapper {
+    padding: calc(${themeVariables.paddingXxs} + 2px) ${themeVariables.paddingXs};
+  }
+`;
+const iconItemStyle = css`
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${themeVariables.colorFillContent};
+  border-radius: ${themeVariables.borderRadius};
+  transition: background-color ${themeVariables.motionDurationMid} ${themeVariables.motionEaseInOut};
+  &:hover {
+    cursor: pointer;
+    background-color: ${themeVariables.colorFillContentHover};
+  }
+
+  &.vef-icon-select-item-selected {
+    background-color: ${themeVariables.colorPrimaryBg};
+  }
+
+  .vef-icon {
+    font-size: 28px;
+  }
+`;
+const iconItemSize = 60;
+const iconNames = Array.from(dynamicIconNames);
+function VefIconsContentBase({
+  value,
+  onChange,
+  keyword,
+  onConfirm
+}) {
+  const { paddingXS, paddingXXS } = useThemeTokens();
+  const filteredIcons = useMemo(() => {
+    const trimmedKeyword = trim(keyword);
+    if (!trimmedKeyword) {
+      return cluster(iconNames, 6);
+    }
+    return cluster(
+      iconNames.filter((name) => name.includes(trimmedKeyword)),
+      6
+    );
+  }, [keyword]);
+  const [width, height] = useMemo(() => [
+    6 * iconItemSize + 12 * 5 + paddingXS * 2,
+    5 * iconItemSize + 12 * 4 + (paddingXXS + 2) * 2
+  ], [paddingXXS, paddingXS]);
+  const renderItem = useCallback(({ item }) => {
+    const isSelected = item === value;
+    const handleClick = () => {
+      if (isSelected) {
+        onConfirm?.();
+        return;
+      }
+      onChange(item);
+      onConfirm?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isSelected ? "vef-icon-select-item-selected" : void 0,
+        css: iconItemStyle,
+        title: item,
+        onClick: handleClick,
+        children: /* @__PURE__ */ jsx(VefDynamicIcon, { name: item })
+      }
+    );
+  }, [onChange, onConfirm, value]);
+  const emptyPlaceholderStyle = useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
+  if (filteredIcons.length === 0) {
+    return /* @__PURE__ */ jsx("div", { css: iconsStyle, children: /* @__PURE__ */ jsx("div", { className: "vef-icon-select-wrapper", style: emptyPlaceholderStyle, children: /* @__PURE__ */ jsx(VefEmptyPlaceholder, { description: "暂无图标", presetIcon: "simple" }) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { css: iconsStyle, children: /* @__PURE__ */ jsx(
+    VefVirtualGrid,
+    {
+      className: "vef-icon-select-wrapper",
+      columnWidth: iconItemSize,
+      gap: "small",
+      height,
+      items: filteredIcons,
+      renderItem,
+      rowHeight: iconItemSize,
+      width
+    }
+  ) });
+}
+const VefIconsContent = memo(VefIconsContentBase);
+VefIconsContent.displayName = "VefIconsContent";
+const labelStyle = css`
+  width: 100%;
+
+  .vef-space-item:last-of-type {
+    min-width: 0;
+  }
+
+  .vef-typography {
+    line-height: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    color: inherit;
+  }
+`;
+function renderLabel(name) {
+  return /* @__PURE__ */ jsxs(VefSpace, { css: labelStyle, children: [
+    /* @__PURE__ */ jsx(VefDynamicIcon, { name }),
+    /* @__PURE__ */ jsx(VefText, { ellipsis: true, children: name })
+  ] });
+}
+function VefIconSelect({
+  defaultValue,
+  value,
+  size,
+  placeholder,
+  disabled,
+  clearable,
+  variant,
+  onChange,
+  onClear
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue ?? null);
+  const handleChange = useCallback((changedValue) => {
+    if (isUndefined(value)) {
+      setInternalValue(changedValue);
+      return;
+    }
+    onChange?.(changedValue);
+  }, [onChange, value]);
+  const handleClear = useCallback(() => {
+    handleChange(null);
+    onClear?.();
+  }, [handleChange, onClear]);
+  return /* @__PURE__ */ jsx(
+    VefGenericSelect,
+    {
+      clearable,
+      disabled,
+      placeholder,
+      renderLabel,
+      size,
+      value: value ?? internalValue,
+      variant,
+      onClear: handleClear,
+      children: /* @__PURE__ */ jsx(
+        VefIconsContent,
+        {
+          value: isUndefined(value) ? internalValue : value,
+          onChange: handleChange
+        }
+      )
+    }
+  );
+}
+
+export { VefIconSelect as default };

package/esm/vef-icon-select/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-input/hooks/use-input-instance.js

@@ -0,0 +1,16 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useInputInstance(ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => inputRef.current?.blur(),
+    focus: () => inputRef.current?.focus({ preventScroll: true }),
+    input: inputRef.current?.input ?? null,
+    nativeElement: inputRef.current?.nativeElement ?? null
+  }));
+  return inputRef;
+}
+
+export { useInputInstance };

package/esm/vef-input/index.js

@@ -0,0 +1,65 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isFunction } from '@vef-framework/shared';
+import { Input } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import '../internal/index.js';
+import { useInputInstance } from './hooks/use-input-instance.js';
+import { convertBasicSizeToUiSize } from '../internal/utils.js';
+
+"use strict";
+function normalizeValue(value) {
+  if (value === "") {
+    return null;
+  }
+  return value;
+}
+const VefInput = forwardRef(({
+  defaultValue,
+  value,
+  clearable,
+  size,
+  showCount,
+  prepend,
+  append,
+  onChange,
+  onEnterKeyPress,
+  onBlur,
+  onFocus,
+  ...restProps
+}, ref) => {
+  const eventHandlers = useMemo(() => ({
+    onChange: isFunction(onChange) ? (event) => onChange(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onPressEnter: isFunction(onEnterKeyPress) ? (event) => onEnterKeyPress(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onBlur: isFunction(onBlur) ? (event) => onBlur(
+      normalizeValue(event.target.value)
+    ) : void 0,
+    onFocus: isFunction(onFocus) ? (event) => onFocus(
+      normalizeValue(event.target.value)
+    ) : void 0
+  }), [onChange, onEnterKeyPress, onBlur, onFocus]);
+  const inputRef = useInputInstance(ref);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: inputRef,
+      addonAfter: append,
+      addonBefore: prepend,
+      allowClear: clearable,
+      defaultValue,
+      showCount,
+      size: convertBasicSizeToUiSize(size),
+      type: "text",
+      value,
+      ...restProps,
+      ...eventHandlers
+    }
+  );
+});
+VefInput.displayName = "VefInput";
+
+export { VefInput as default };

package/esm/vef-input/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-input-number/hooks/use-input-number-instance.js

@@ -0,0 +1,14 @@
+"use strict";
+import { useRef, useImperativeHandle } from 'react';
+
+"use strict";
+function useInputNumberInstance(ref) {
+  const inputNumberRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => inputNumberRef.current?.blur(),
+    focus: () => inputNumberRef.current?.focus({ preventScroll: true })
+  }));
+  return inputNumberRef;
+}
+
+export { useInputNumberInstance };