@vef-framework/components 1.0.128 → 1.0.129

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

@@ -1,99 +1,2 @@
 "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 VefDrawer from '../vef-drawer/index.js';
-import VefForm from '../vef-form/index.js';
-import VefDrawerActionButtonWrapper from '../vef-drawer/components/action-button-wrapper.js';
-
-"use strict";
-function VefFormDrawerBase({
-  title,
-  open,
-  closable,
-  closeOnMaskClick,
-  closeOnEscPress,
-  destroyOnClose = true,
-  cancelOnClose,
-  placement,
-  expansionSize = "medium",
-  loading,
-  extra,
-  cancelButtonText,
-  actions,
-  onClose,
-  onCancel,
-  onAfterClose,
-  onAfterOpen,
-  submissionButtonText,
-  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(VefDrawerActionButtonWrapper, { children: /* @__PURE__ */ jsx(
-      VefButton,
-      {
-        color: "default",
-        disabled: formDisabled,
-        variant: "filled",
-        onClick: handleReset,
-        children: "重置"
-      }
-    ) }, "resetActionButton");
-    if (isFunction(actions)) {
-      return actions([cancelButton, resetButton, submitButton]);
-    }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      cancelButton,
-      resetButton,
-      submitButton
-    ] });
-  }, [actions, formDisabled, handleReset]);
-  return /* @__PURE__ */ jsx(DisabledContextProvider, { value: formDisabled, children: /* @__PURE__ */ jsx(
-    VefDrawer,
-    {
-      actions: actionNode,
-      cancelOnClose,
-      closable,
-      closeOnEscPress,
-      closeOnMaskClick,
-      destroyOnClose,
-      expansionSize,
-      extra,
-      loading,
-      okButtonText: submissionButtonText,
-      open,
-      placement,
-      title,
-      onAfterClose,
-      onAfterOpen,
-      onCancel,
-      onClose,
-      onOk: handleSubmit,
-      children: /* @__PURE__ */ jsx(
-        VefForm,
-        {
-          ref: formInstanceRef,
-          resetButton: false,
-          submissionButton: false,
-          ...formProps
-        }
-      )
-    }
-  ) });
-}
-const VefFormDrawer = memo(VefFormDrawerBase);
-VefFormDrawer.displayName = "VefFormDrawer";
-
-export { VefFormDrawer as default };
+import{jsx as e,jsxs as T,Fragment as j}from"@emotion/react/jsx-runtime";import{useContextDisabled as w,DisabledContextProvider as z}from"@vef-framework/hooks";import{isFunction as E}from"@vef-framework/shared";import{useRef as S,useCallback as s,memo as q}from"react";import K from"../vef-button/index.js";import N from"../vef-drawer/index.js";import R from"../vef-form/index.js";import V from"../vef-drawer/components/action-button-wrapper.js";function W({title:m,open:u,closable:d,closeOnMaskClick:f,closeOnEscPress:p,destroyOnClose:C=!0,cancelOnClose:x,placement:O,expansionSize:b="medium",loading:k,extra:B,cancelButtonText:$,actions:o,onClose:h,onCancel:A,onAfterClose:v,onAfterOpen:y,submissionButtonText:g,disabled:D=!1,...F}){const n=S(null),M=s(async()=>{await n.current?.submit()},[]),t=w()||D,l=s(()=>{n.current?.reset()},[]),P=s(([r,i])=>{const c=e(V,{children:e(K,{color:"default",disabled:t,variant:"filled",onClick:l,children:"重置"})},"resetActionButton");return E(o)?o([r,c,i]):T(j,{children:[r,c,i]})},[o,t,l]);return e(z,{value:t,children:e(N,{actions:P,cancelOnClose:x,closable:d,closeOnEscPress:p,closeOnMaskClick:f,destroyOnClose:C,expansionSize:b,extra:B,loading:k,okButtonText:g,open:u,placement:O,title:m,onAfterClose:v,onAfterOpen:y,onCancel:A,onClose:h,onOk:M,children:e(R,{ref:n,resetButton:!1,submissionButton:!1,...F})})})}const a=q(W);a.displayName="VefFormDrawer";export{a as default};

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

@@ -1,96 +1,2 @@
 "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 };
+import{jsx as e,jsxs as F,Fragment as P}from"@emotion/react/jsx-runtime";import{useContextDisabled as j,DisabledContextProvider as D}from"@vef-framework/hooks";import{isFunction as E}from"@vef-framework/shared";import{useRef as I,useCallback as n,memo as K}from"react";import N from"../vef-button/index.js";import R from"../vef-form/index.js";import V from"../vef-modal/index.js";import q from"../vef-modal/components/action-button-wrapper.js";function z({submissionButtonText:m="提交",actions:o,title:d,open:u,closable:f,closeOnMaskClick:C,closeOnEscPress:p,destroyOnClose:O=!0,cancelOnClose:b,width:k="medium",loading:x,cancelButtonText:B,onClose:h,onCancel:A,onAfterOpen:v,onAfterClose:y,disabled:M=!1,...T}){const t=I(null),g=n(async()=>{await t.current?.submit()},[]),s=j()||M,l=n(()=>{t.current?.reset()},[]),w=n(([r,i])=>{const c=e(q,{children:e(N,{color:"default",variant:"filled",onClick:l,children:"重置"})},"resetActionButton");return E(o)?o([r,c,i]):F(P,{children:[r,c,i]})},[o,l]);return e(D,{value:s,children:e(V,{actions:w,cancelButtonText:B,cancelOnClose:b,closable:f,closeOnEscPress:p,closeOnMaskClick:C,destroyOnClose:O,loading:x,okButtonText:m,open:u,title:d,width:k,onAfterClose:y,onAfterOpen:v,onCancel:A,onClose:h,onOk:g,children:e(R,{ref:t,disabled:s,resetButton:!1,submissionButton:!1,...T})})})}const a=K(z);a.displayName="VefFormModal";export{a as default};

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

@@ -1,82 +1,2 @@
 "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 };
+import{jsx as e}from"@emotion/react/jsx-runtime";import{SearchOutlined as I}from"@ant-design/icons";import{isFunction as k,styles as B}from"@vef-framework/shared";import{Select as D}from"antd";import{LeafIcon as L}from"lucide-react";import{useState as r,useDeferredValue as M,useCallback as l,useMemo as O,cloneElement as R}from"react";import"../internal/index.js";import T from"../vef-icon/index.js";import{convertBasicSizeToUiSize as W}from"../internal/utils.js";const j={"--vef-select-option-padding":0};function E({value:c,size:s,renderLabel:o,placeholder:d,disabled:u,clearable:m,loading:p,variant:f,children:h,onClear:S}){const[n,t]=r(!1),[C,a]=r(!1),[i,b]=r(),v=M(i),w=l(()=>{a(!1)},[]),g=l(()=>{a(!0)},[]),y=l(()=>{t(!1)},[]),z=O(()=>{if(k(o))return({value:x})=>o?.(x)},[o]),F=C&&n?e(I,{}):e(T,{children:e(L,{})}),V=R(h,{keyword:v,onConfirm:y});return e(D,{showSearch:!0,allowClear:m,css:B.fullWidth,disabled:u,dropdownStyle:j,labelRender:z,loading:p,notFoundContent:V,open:n,placeholder:d,popupMatchSelectWidth:!1,searchValue:i,size:W(s),suffixIcon:F,value:c,variant:f,onBlur:w,onClear:S,onDropdownVisibleChange:t,onFocus:g,onSearch:b})}export{E as default};

package/esm/vef-grid/index.js

@@ -1,90 +1,25 @@
 "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`
+import{jsx as h}from"@emotion/react/jsx-runtime";import{css as $}from"@emotion/react";import{useGapSizeNormalizer as g,useElementSize as x}from"@vef-framework/hooks";import{breakpoints as v,isArray as W}from"@vef-framework/shared";import y from"clsx";import{useMemo as s,useRef as w,useEffect as z}from"react";import{useContainerQuery as A}from"react-container-query";const r=24,b=$`
   display: grid;
-  grid: auto-flow / repeat(${GRID_COLUMNS}, minmax(0, 1fr));
+  grid: auto-flow / repeat(${r}, minmax(0, 1fr));
   
   > * {
-    grid-column: span ${GRID_COLUMNS};
+    grid-column: span ${r};
   }
 
-  ${Array.from({ length: GRID_COLUMNS }).map((_, index) => `
-    > .vef-grid-item-${index + 1} {
-      grid-column: span ${index + 1};
+  ${Array.from({length:r}).map((i,t)=>`
+    > .vef-grid-item-${t+1} {
+      grid-column: span ${t+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};
+  ${v.map(i=>`
+    &.vef-container-${i} {
+      ${Array.from({length:r}).map((t,e)=>`
+        > .vef-grid-item-${i}-${e+1} {
+          grid-column: span ${e+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 };
+`;function E({baseWidth:i=240,gap:t,children:e}){const c=s(()=>({"vef-container-xs":{minWidth:0},"vef-container-sm":{minWidth:i*2},"vef-container-md":{minWidth:i*3},"vef-container-lg":{minWidth:i*4},"vef-container-xl":{minWidth:i*5},"vef-container-xxl":{minWidth:i*6}}),[i]),n=w(null),[l,p]=A(c,{width:i*2}),o=g(),[m,a]=s(()=>{if(W(t))return[o(t[0]),o(t[1])];if(t){const d=o(t);return[d,d]}return[0,0]},[t,o]);z(()=>{p(n.current)},[n,p]);const f=x(n),u=s(()=>(f?.width??i*2)>r*a?{gap:`${m}px ${a}px`}:{gap:`${m}px ${Math.floor((f?.width??i*2)/r)}px`},[f?.width,i,a,m]);return h("div",{ref:n,className:y(l),css:b,style:u,children:e})}export{E as default};

package/esm/vef-grid/props.js

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

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

@@ -1,53 +1,2 @@
 "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 };
+import{jsx as g}from"@emotion/react/jsx-runtime";import l from"clsx";import{useMemo as n}from"react";function p({span:i,xs:r,sm:s,md:m,lg:t,xl:d,xxl:u,children:o}){const f=n(()=>{const e=[];return i&&e.push(`vef-grid-item-${i}`),r&&e.push(`vef-grid-item-xs-${r}`),s&&e.push(`vef-grid-item-sm-${s}`),m&&e.push(`vef-grid-item-md-${m}`),t&&e.push(`vef-grid-item-lg-${t}`),d&&e.push(`vef-grid-item-xl-${d}`),u&&e.push(`vef-grid-item-xxl-${u}`),e},[i,r,s,m,t,d,u]);return g("div",{className:l(f),children:o})}export{p as default};

package/esm/vef-icon/index.js

@@ -1,51 +1,2 @@
 "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 };
+import{jsx as a}from"@emotion/react/jsx-runtime";import d from"@ant-design/icons";import{useColorTokens as S}from"@vef-framework/hooks";import{themeVariables as n,omit as z}from"@vef-framework/shared";import{forwardRef as g,useMemo as h,Suspense as y,cloneElement as i,memo as x}from"react";const V=g(({size:e,color:m,children:r,...f},c)=>{const s=S(),p=h(()=>{const o={},t=e==="small"?n.fontSizeSm:e==="medium"?n.fontSize:e==="large"?n.fontSizeLg:e==="huge"?n.fontSizeXl:void 0;return t&&(o.fontSize=t),m&&(o.color=s.get(m)),o},[e,m,s]);return a(d,{ref:c,style:p,component:o=>{const t=z(o,["fill"]);if(r.type===y){const{children:u}=r.props;return i(r,{children:i(u,t)})}return i(r,t)},...f})}),l=x(V);l.displayName="VefIcon";export{l as default};