@vef-framework/components 1.0.122 → 1.0.123

package/esm/vef-error/index.js

@@ -0,0 +1,68 @@
+"use strict";
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { styles, themeVariables } from '@vef-framework/shared';
+import { RefreshCwIcon } from 'lucide-react';
+import VefButton from '../vef-button/index.js';
+import VefIcon from '../vef-icon/index.js';
+import Memo from './error-icon.js';
+
+"use strict";
+const errorStyle = css`
+  height: 100%;
+  ${styles.flexCenter}
+`;
+const contentStyle = css`
+  width: 40%;
+  position: relative;
+  top: -60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  row-gap: ${themeVariables.margin};
+
+  > svg {
+    width: 70%;
+  }
+
+  > span {
+    font-size: ${themeVariables.fontSizeLg};
+    font-weight: 500;
+    color: ${themeVariables.colorTextTertiary};
+
+    > span {
+      padding-left: ${themeVariables.paddingSm};
+      color: ${themeVariables.colorErrorText};
+    }
+  }
+`;
+function VefError({
+  error,
+  reset,
+  componentStack
+}) {
+  return /* @__PURE__ */ jsx("div", { css: errorStyle, children: /* @__PURE__ */ jsxs("div", { css: contentStyle, children: [
+    /* @__PURE__ */ jsx(Memo, {}),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "发生错误:",
+      /* @__PURE__ */ jsx("span", { children: error.message }),
+      componentStack && /* @__PURE__ */ jsxs(Fragment, { children: [
+        "组件堆栈:",
+        /* @__PURE__ */ jsx("span", { children: componentStack })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      VefButton,
+      {
+        color: "primary",
+        size: "large",
+        icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(RefreshCwIcon, {}) }),
+        onClick: reset,
+        children: "重试一下"
+      }
+    )
+  ] }) });
+}
+
+export { VefError as default };

package/esm/vef-error/props.js

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

package/esm/vef-filter/components/action-buttons.js

@@ -0,0 +1,136 @@
+"use strict";
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useThemeTokens } from '@vef-framework/hooks';
+import { themeVariables, omit } from '@vef-framework/shared';
+import { SearchIcon, ChevronDownIcon } from 'lucide-react';
+import { motion } from 'motion/react';
+import VefButton from '../../vef-button/index.js';
+import VefFlex from '../../vef-flex/index.js';
+import VefIcon from '../../vef-icon/index.js';
+import { useFilterContextSelector } from '../hooks/use-filter-context.js';
+import { useFilterStore } from '../store.js';
+
+"use strict";
+const collapseButtonStyle = css`
+  &.vef-btn {
+    --vef-button-padding-inline: 0;
+
+    gap: 0;
+  }
+
+  .vef-collapse-button-text {
+    position: relative;
+    width: calc(${themeVariables.fontSize} * 2 + 4px);
+    height: calc(${themeVariables.controlHeight} - 4px);
+    text-align: center;
+    line-height: calc(${themeVariables.controlHeight} - 4px);
+
+    > span {
+      position: absolute;
+    }
+  }
+`;
+const defaultConfirmationButtonConfig = {
+  text: "搜索",
+  icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) })
+};
+const defaultResetButtonConfig = {
+  text: "重置"
+};
+function VefActionButtons() {
+  const [isLoading, isAdvancedFilterVisible, setIsAdvancedFilterVisible] = useFilterStore((state) => [state.isLoading, state.isAdvancedFilterVisible, state.setIsAdvancedFilterVisible]);
+  const [
+    externalLoading,
+    confirmationButton,
+    resetButton,
+    showCollapseButton,
+    handleReset,
+    extraActionButtons
+  ] = useFilterContextSelector((ctx) => [
+    ctx.externalLoading,
+    ctx.confirmationButton,
+    ctx.resetButton,
+    ctx.showCollapseButton,
+    ctx.handleReset,
+    ctx.extraActionButtons
+  ]);
+  const { controlHeight } = useThemeTokens();
+  const transitionY = (controlHeight - 4) / 2;
+  const confirmationButtonConfig = confirmationButton ?? defaultConfirmationButtonConfig;
+  const resetButtonConfig = resetButton ?? defaultResetButtonConfig;
+  return /* @__PURE__ */ jsxs(VefFlex, { align: "center", gap: "medium", children: [
+    showCollapseButton && /* @__PURE__ */ jsxs(
+      VefButton,
+      {
+        color: "primary",
+        css: collapseButtonStyle,
+        variant: "link",
+        onClick: () => setIsAdvancedFilterVisible(!isAdvancedFilterVisible),
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "vef-collapse-button-text", children: [
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: false,
+                animate: {
+                  opacity: isAdvancedFilterVisible ? 1 : 0,
+                  y: isAdvancedFilterVisible ? 0 : -transitionY
+                },
+                children: "收起"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: false,
+                animate: {
+                  opacity: isAdvancedFilterVisible ? 0 : 1,
+                  y: isAdvancedFilterVisible ? transitionY : 0
+                },
+                children: "展开"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              initial: false,
+              animate: {
+                rotate: isAdvancedFilterVisible ? -180 : 0,
+                transition: {
+                  bounce: 0
+                }
+              },
+              children: /* @__PURE__ */ jsx(VefIcon, { size: "large", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+            }
+          )
+        ]
+      }
+    ),
+    resetButtonConfig && /* @__PURE__ */ jsx(
+      VefButton,
+      {
+        color: "default",
+        variant: "filled",
+        onClick: handleReset,
+        ...omit(resetButtonConfig, ["text"]),
+        children: resetButtonConfig.text
+      }
+    ),
+    confirmationButtonConfig && /* @__PURE__ */ jsx(
+      VefButton,
+      {
+        color: "primary",
+        icon: confirmationButtonConfig.icon,
+        loading: externalLoading || isLoading,
+        type: "submit",
+        ...omit(confirmationButtonConfig, ["text"]),
+        children: confirmationButtonConfig.text
+      }
+    ),
+    extraActionButtons
+  ] });
+}
+
+export { VefActionButtons as default };

package/esm/vef-filter/components/advanced-filter.js

@@ -0,0 +1,73 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+import { motion } from 'motion/react';
+import VefResponsiveContainer from '../../vef-responsive-container/index.js';
+import VefResponsiveItem from '../../vef-responsive-item/index.js';
+import { useFilterContextSelector } from '../hooks/use-filter-context.js';
+import { useLabelConfig } from '../hooks/use-label-config.js';
+import VefFilterItem from './filter-item.js';
+
+"use strict";
+const filterItemMinWidth = 200;
+const advancedFilterWrapperStyle = css`
+  overflow: hidden;
+`;
+const advancedFilterStyle = css`
+  margin-top: ${themeVariables.margin};
+  background-color: ${themeVariables.colorFillAlt};
+  padding: ${themeVariables.padding};
+  border-radius: ${themeVariables.borderRadiusLg};
+  border: ${themeVariables.lineWidth} ${themeVariables.lineType} ${themeVariables.colorBorderSecondary};
+`;
+const animateConfig = {
+  opacity: 1,
+  height: "auto",
+  transition: {
+    ease: "easeInOut",
+    duration: 0.2
+  }
+};
+const initialConfig = {
+  opacity: 0,
+  height: 0
+};
+function VefAdvancedFilter({
+  items
+}) {
+  const [labelPosition, labelAlign, labelWidth] = useFilterContextSelector((ctx) => [ctx.labelPosition, ctx.labelAlign, ctx.labelWidth]);
+  const { labelWidthToUse, labelCol } = useLabelConfig(labelPosition, labelWidth);
+  const filterItemMinWidthToUse = labelPosition === "top" ? filterItemMinWidth : filterItemMinWidth + (labelWidthToUse ?? 80);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: animateConfig,
+      css: advancedFilterWrapperStyle,
+      exit: initialConfig,
+      initial: initialConfig,
+      children: /* @__PURE__ */ jsx(
+        VefResponsiveContainer,
+        {
+          baseItemWidth: filterItemMinWidthToUse,
+          css: advancedFilterStyle,
+          gap: "large",
+          children: items.map((item) => {
+            const { name, span } = item;
+            return /* @__PURE__ */ jsx(VefResponsiveItem, { span: span ?? 1, children: /* @__PURE__ */ jsx(
+              VefFilterItem,
+              {
+                item,
+                labelAlign,
+                labelCol,
+                layout: labelPosition === "top" ? "vertical" : "horizontal"
+              }
+            ) }, name);
+          })
+        }
+      )
+    }
+  );
+}
+
+export { VefAdvancedFilter as default };

package/esm/vef-filter/components/basic-filter.js

@@ -0,0 +1,51 @@
+"use strict";
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables } from '@vef-framework/shared';
+import { Form } from 'antd';
+import clsx from 'clsx';
+import VefActionButtons from './action-buttons.js';
+import VefFilterItem from './filter-item.js';
+
+"use strict";
+const basicFilterStyle = css`
+  &.vef-filter-basic-items-with-prefix {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    align-items: center;
+    gap: ${themeVariables.margin};
+  }
+
+  .vef-filter-basic-items-prefix {
+  }
+
+  &.vef-filter-basic-items-content, .vef-filter-basic-items-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: ${themeVariables.margin};
+  }
+`;
+function VefBasicFilter({
+  items,
+  prefix
+}) {
+  const className = clsx({
+    "vef-filter-basic-items-with-prefix": !!prefix,
+    "vef-filter-basic-items-content": !prefix
+  });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    items.map((item) => {
+      const { name } = item;
+      return /* @__PURE__ */ jsx(VefFilterItem, { item }, name);
+    }),
+    /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsx(VefActionButtons, {}) })
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className, css: basicFilterStyle, children: [
+    prefix && /* @__PURE__ */ jsx("div", { className: "vef-filter-basic-items-prefix", children: prefix }),
+    prefix ? /* @__PURE__ */ jsx("div", { className: "vef-filter-basic-items-content", children: content }) : content
+  ] });
+}
+
+export { VefBasicFilter as default };

package/esm/vef-filter/components/fields/index.js

@@ -0,0 +1,20 @@
+"use strict";
+import Input from './input.js';
+import InputNumber from './input-number.js';
+import Radio from './radio.js';
+import Select from './select.js';
+import TreeSelect from './tree-select.js';
+import './props.js';
+
+"use strict";
+const fieldMap = {
+  Input,
+  InputNumber,
+  Radio,
+  SingleSelect: Select,
+  MultipleSelect: Select,
+  TreeSingleSelect: TreeSelect,
+  TreeMultipleSelect: TreeSelect
+};
+
+export { fieldMap };

package/esm/vef-filter/components/fields/input-number.js

@@ -0,0 +1,91 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isString, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefInputNumber from '../../../vef-input-number/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useFilterStore } from '../../store.js';
+
+"use strict";
+function InputNumber({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "InputNumber") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the filter field is not "InputNumber", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onEnterKeyPress,
+    placeholder,
+    prefix,
+    suffix,
+    max,
+    min
+  } = componentProps;
+  const [form, setValues] = useFilterStore((state) => [state.form, state.setValues]);
+  const [placeholderValue, maxValue, minValue, prefixValue, suffixValue] = useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? isString(label) ? `请输入${label}` : "请输入" : void 0
+    },
+    {
+      key: "max",
+      rawValue: max
+    },
+    {
+      key: "min",
+      rawValue: min
+    },
+    {
+      key: "prefix",
+      rawValue: prefix
+    },
+    {
+      key: "suffix",
+      rawValue: suffix
+    }
+  ]);
+  const events = useMemo(() => {
+    const events2 = {};
+    events2.onChange = (value2) => {
+      onChange?.(value2);
+      if (isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          values,
+          setValues
+        });
+      }
+    };
+    if (isFunction(onEnterKeyPress)) {
+      events2.onPressEnter = (value2) => {
+        const values = form.getFieldsValue();
+        onEnterKeyPress(value2, {
+          values,
+          setValues
+        });
+      };
+    }
+    return events2;
+  }, [form, onChange, onEnterKeyPress, onValueChange, setValues]);
+  return /* @__PURE__ */ jsx(
+    VefInputNumber,
+    {
+      disabled,
+      max: maxValue,
+      min: minValue,
+      placeholder: placeholderValue,
+      prefix: prefixValue,
+      suffix: suffixValue,
+      value,
+      ...events
+    }
+  );
+}
+
+export { InputNumber as default };

package/esm/vef-filter/components/fields/input.js

@@ -0,0 +1,68 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isString, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefInput from '../../../vef-input/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useFilterStore } from '../../store.js';
+
+"use strict";
+function Input({
+  label,
+  disabled,
+  value,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "Input") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the filter field is not "Input", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    onEnterKeyPress,
+    placeholder
+  } = componentProps;
+  const [form, setValues] = useFilterStore((state) => [state.form, state.setValues]);
+  const [placeholderValue] = useComputedValues([
+    {
+      key: "placeholder",
+      rawValue: placeholder,
+      defaultValue: label ? isString(label) ? `请输入${label}` : "请输入" : void 0
+    }
+  ]);
+  const events = useMemo(() => {
+    const events2 = {};
+    events2.onChange = (value2) => {
+      onChange?.(value2);
+      if (isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          values,
+          setValues
+        });
+      }
+    };
+    if (isFunction(onEnterKeyPress)) {
+      events2.onPressEnter = (value2) => {
+        const values = form.getFieldsValue();
+        onEnterKeyPress(value2, {
+          values,
+          setValues
+        });
+      };
+    }
+    return events2;
+  }, [form, onChange, onEnterKeyPress, onValueChange, setValues]);
+  return /* @__PURE__ */ jsx(
+    VefInput,
+    {
+      clearable: true,
+      disabled,
+      placeholder: placeholderValue,
+      value,
+      ...events
+    }
+  );
+}
+
+export { Input as default };

package/esm/vef-filter/components/fields/props.js

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

package/esm/vef-filter/components/fields/radio.js

@@ -0,0 +1,110 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { VefError, isFunction } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import { useComputedValues } from '../../../vef-form/hooks/use-computed-values.js';
+import VefRadio from '../../../vef-radio/index.js';
+import { useFilterStore } from '../../store.js';
+
+"use strict";
+function Radio({
+  value,
+  disabled,
+  onChange,
+  componentProps
+}) {
+  if (componentProps.type !== "Radio") {
+    throw new VefError(-9, `Oops! Something went wrong. The type of the filter field is not "Radio", but rendered.`);
+  }
+  const {
+    onChange: onValueChange,
+    block,
+    variant,
+    labelKey,
+    valueKey,
+    descriptionKey,
+    disabledKey,
+    childrenKey,
+    defaultToFirst,
+    api,
+    apiParams,
+    apiEnabled,
+    data,
+    dataDictionaryKey,
+    placeholderData,
+    keepPreviousData,
+    staleTime,
+    onFetched
+  } = componentProps;
+  const [
+    apiValue,
+    apiParamsValue,
+    apiEnabledValue,
+    dataValue,
+    dataDictionaryKeyValue
+  ] = useComputedValues([
+    {
+      key: "api",
+      rawValue: api
+    },
+    {
+      key: "apiParams",
+      rawValue: apiParams
+    },
+    {
+      key: "apiEnabled",
+      rawValue: apiEnabled
+    },
+    {
+      key: "data",
+      rawValue: data
+    },
+    {
+      key: "dataDictionaryKey",
+      rawValue: dataDictionaryKey
+    }
+  ]);
+  const [form, setValues] = useFilterStore((state) => [state.form, state.setValues]);
+  const events = useMemo(() => {
+    const events2 = {};
+    events2.onChange = (value2, option) => {
+      onChange?.(value2);
+      if (isFunction(onValueChange)) {
+        const values = form.getFieldsValue();
+        onValueChange(value2, {
+          values,
+          setValues,
+          option
+        });
+      }
+    };
+    return events2;
+  }, [form, onChange, onValueChange, setValues]);
+  return /* @__PURE__ */ jsx(
+    VefRadio,
+    {
+      api: apiValue,
+      apiEnabled: apiEnabledValue,
+      apiParams: apiParamsValue,
+      block,
+      childrenKey,
+      data: dataValue,
+      dataDictionaryKey: dataDictionaryKeyValue,
+      defaultToFirst,
+      descriptionKey,
+      disabled,
+      disabledKey,
+      keepPreviousData,
+      labelKey,
+      placeholderData,
+      staleTime,
+      value,
+      valueKey,
+      variant,
+      onFetched,
+      ...events
+    }
+  );
+}
+
+export { Radio as default };