@vef-framework/components 1.0.63 → 1.0.64

package/es/vef-drawer/index.js

@@ -1,10 +1,160 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e,jsxs as o,Fragment as t}from"@emotion/react/jsx-runtime";import{css as n}from"@emotion/react";import{themeVariables as l,isFunction as s}from"@vef-framework/shared";import{Drawer as r}from"antd";import{useMemo as i,useState as a,useLayoutEffect as c,useCallback as d,memo as m}from"react";import p from"./components/cancel-action-button.js";import f from"./components/ok-action-button.js";import{DrawerContextProvider as u}from"./context.js";export{default as VefDrawerActionButtonWrapper}from"./components/action-button-wrapper.js";const C=n`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables, isFunction } from '@vef-framework/shared';
+import { Drawer } from 'antd';
+import { useMemo, useState, useLayoutEffect, useCallback, memo } from 'react';
+import VefCancelActionButton from './components/cancel-action-button.js';
+import VefOkActionButton from './components/ok-action-button.js';
+import { DrawerContextProvider } from './context.js';
+export { default as VefDrawerActionButtonWrapper } from './components/action-button-wrapper.js';
+
+const drawerStyle = css`
   .vef-drawer-footer {
     display: flex;
-    gap: ${l.padding};
+    gap: ${themeVariables.padding};
     justify-content: flex-end;
     align-items: center;
   }
-`,h={narrow:"25",half:"50",wide:"75",full:"100"};const x=m((function({title:n,open:l,closable:m=!0,closeOnEscPress:x=!0,closeOnMaskClick:y=!1,destroyOnClose:k=!1,placement:g="right",expansionSize:w,extra:O,showCancelButton:b=!0,cancelButtonText:j="取消",okButtonText:B="提交",actions:F,loading:v,cancelOnClose:A=!0,onClose:z,onCancel:D,onOk:$,onAfterOpen:I,onAfterClose:T,children:V}){const E=i((()=>"small"===w?{size:"default"}:"medium"===w?{size:"large"}:"left"===g||"right"===g?{width:h[w]?`${h[w]}vw`:w}:{height:h[w]?`${h[w]}vh`:w}),[w,g]),[M,N]=a({isFullyOpened:!1,isFullyClosed:!1}),[P,S]=a(!1),W=i((()=>({isDisabled:P,setIsDisabled:S,...M})),[P,M]),q=v||P;c((()=>{l&&M.isFullyClosed&&N((e=>({...e,isFullyClosed:!1})))}),[l]);const G=i((()=>{const n=e(p,{text:j,onClick:D},"cancelActionButton"),l=e(f,{text:B,onClick:$},"okActionButton");return s(F)?F([n,l]):F||(b?o(t,{children:[n,l]}):l)}),[F,j,B,D,$,b]),H=d((()=>{q||(A&&D?.(),z?.())}),[A,q,D,z]),J=d((e=>{const o=s(I),t=s(T);e?(o&&I(),N((e=>({...e,isFullyOpened:!0})))):(t&&T(),N((e=>({...e,isFullyClosed:!0}))))}),[I,T]);return e(u,{value:W,children:e(r,{afterOpenChange:J,closable:m,css:C,destroyOnClose:k,extra:O,footer:!v&&G,keyboard:x,loading:v,maskClosable:y,open:l,placement:g,title:n,zIndex:20,onClose:H,...E,children:V})})}));x.displayName="VefDrawer";export{x as default};
+`;
+const responsiveSizeMap = {
+  narrow: "25",
+  half: "50",
+  wide: "75",
+  full: "100"
+};
+function VefDrawerBase({
+  title,
+  open,
+  closable = true,
+  closeOnEscPress = true,
+  closeOnMaskClick = false,
+  destroyOnClose = false,
+  placement = "right",
+  expansionSize,
+  extra,
+  showCancelButton = true,
+  cancelButtonText = "\u53D6\u6D88",
+  okButtonText = "\u63D0\u4EA4",
+  actions,
+  loading,
+  cancelOnClose = true,
+  onClose,
+  onCancel,
+  onOk,
+  onAfterOpen,
+  onAfterClose,
+  children
+}) {
+  const expansionSizeProps = useMemo(() => {
+    if (expansionSize === "small") {
+      return {
+        size: "default"
+      };
+    } else if (expansionSize === "medium") {
+      return {
+        size: "large"
+      };
+    }
+    if (placement === "left" || placement === "right") {
+      return {
+        width: responsiveSizeMap[expansionSize] ? `${responsiveSizeMap[expansionSize]}vw` : expansionSize
+      };
+    }
+    return {
+      height: responsiveSizeMap[expansionSize] ? `${responsiveSizeMap[expansionSize]}vh` : expansionSize
+    };
+  }, [expansionSize, placement]);
+  const [drawerVisibleState, setDrawerVisibleState] = useState({
+    isFullyOpened: false,
+    isFullyClosed: false
+  });
+  const [isDisabled, setIsDisabled] = useState(false);
+  const drawerContext = useMemo(() => ({
+    isDisabled,
+    setIsDisabled,
+    ...drawerVisibleState
+  }), [isDisabled, drawerVisibleState]);
+  const modalDisabled = loading || isDisabled;
+  useLayoutEffect(() => {
+    if (open && drawerVisibleState.isFullyClosed) {
+      setDrawerVisibleState((prevState) => ({
+        ...prevState,
+        isFullyClosed: false
+      }));
+    }
+  }, [open]);
+  const actionNode = useMemo(() => {
+    const cancelButton = /* @__PURE__ */ jsx(VefCancelActionButton, { text: cancelButtonText, onClick: onCancel }, "cancelActionButton");
+    const okButton = /* @__PURE__ */ jsx(VefOkActionButton, { text: okButtonText, onClick: onOk }, "okActionButton");
+    if (isFunction(actions)) {
+      return actions([cancelButton, okButton]);
+    }
+    if (actions) {
+      return actions;
+    }
+    if (!showCancelButton) {
+      return okButton;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cancelButton,
+      okButton
+    ] });
+  }, [actions, cancelButtonText, okButtonText, onCancel, onOk, showCancelButton]);
+  const handleClose = useCallback(() => {
+    if (modalDisabled) {
+      return;
+    }
+    if (cancelOnClose) {
+      onCancel?.();
+    }
+    onClose?.();
+  }, [cancelOnClose, modalDisabled, onCancel, onClose]);
+  const handleAfterOpenChange = useCallback((open2) => {
+    const hasAfterOpen = isFunction(onAfterOpen);
+    const hasAfterClose = isFunction(onAfterClose);
+    if (open2) {
+      if (hasAfterOpen) {
+        onAfterOpen();
+      }
+      setDrawerVisibleState((prevState) => ({
+        ...prevState,
+        isFullyOpened: true
+      }));
+    } else {
+      if (hasAfterClose) {
+        onAfterClose();
+      }
+      setDrawerVisibleState((prevState) => ({
+        ...prevState,
+        isFullyClosed: true
+      }));
+    }
+  }, [onAfterOpen, onAfterClose]);
+  return /* @__PURE__ */ jsx(DrawerContextProvider, { value: drawerContext, children: /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      afterOpenChange: handleAfterOpenChange,
+      closable,
+      css: drawerStyle,
+      destroyOnClose,
+      extra,
+      footer: !loading && actionNode,
+      keyboard: closeOnEscPress,
+      loading,
+      maskClosable: closeOnMaskClick,
+      open,
+      placement,
+      title,
+      zIndex: 20,
+      onClose: handleClose,
+      ...expansionSizeProps,
+      children
+    }
+  ) });
+}
+const VefDrawer = memo(VefDrawerBase);
+VefDrawer.displayName = "VefDrawer";
+
+export { VefDrawer as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-dropdown/index.js

@@ -1,3 +1,93 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{useNormalizedMenuItems as t,useDeepMemo as o}from"@vef-framework/hooks";import{isFunction as l}from"@vef-framework/shared";import{Dropdown as a}from"antd";import{useMemo as s,memo as r}from"react";const n=r((function({className:r,disabled:n,placement:c,children:i,items:m,trigger:d="hover",selectable:p=!1,deselectable:f=!1,multiple:y=!1,defaultSelectedKeys:k,selectedKeys:u,onChange:h,onSelect:v,onDeselect:g,onClick:b}){const K=s((()=>[d]),[d]),P=t(m),S=o((()=>({items:P,selectable:p,unselectable:f?"on":"off",multiple:y,defaultSelectedKeys:k,selectedKeys:u,onSelect:l(h)||l(v)?({key:e,keyPath:t,selectedKeys:o,domEvent:l})=>{l.stopPropagation(),h?.(o),v?.(e,t)}:void 0,onDeselect:l(h)||l(g)?({key:e,keyPath:t,selectedKeys:o,domEvent:l})=>{l.stopPropagation(),h?.(o),g?.(e,t)}:void 0,onClick:l(b)?({key:e,keyPath:t,domEvent:o})=>{o.stopPropagation(),b(e,t)}:void 0})),[k,y,P,h,b,g,v,p,u,f]);return e(a,{className:r,disabled:n,menu:S,placement:c,trigger:K,children:i})}));n.displayName="VefDropdown";export{n as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useNormalizedMenuItems, useDeepMemo } from '@vef-framework/hooks';
+import { isFunction } from '@vef-framework/shared';
+import { Dropdown } from 'antd';
+import { useMemo, memo } from 'react';
+
+function VefDropdownBase({
+  className,
+  disabled,
+  placement,
+  children,
+  items,
+  trigger = "hover",
+  selectable = false,
+  deselectable = false,
+  multiple = false,
+  defaultSelectedKeys,
+  selectedKeys,
+  onChange,
+  onSelect,
+  onDeselect,
+  onClick
+}) {
+  const dropdownTrigger = useMemo(() => [trigger], [trigger]);
+  const normalizedItems = useNormalizedMenuItems(items);
+  const menuProps = useDeepMemo(
+    () => ({
+      items: normalizedItems,
+      selectable,
+      unselectable: deselectable ? "on" : "off",
+      multiple,
+      defaultSelectedKeys,
+      selectedKeys,
+      onSelect: isFunction(onChange) || isFunction(onSelect) ? ({
+        key,
+        keyPath,
+        selectedKeys: selectedKeys2,
+        domEvent
+      }) => {
+        domEvent.stopPropagation();
+        onChange?.(selectedKeys2);
+        onSelect?.(key, keyPath);
+      } : void 0,
+      onDeselect: isFunction(onChange) || isFunction(onDeselect) ? ({
+        key,
+        keyPath,
+        selectedKeys: selectedKeys2,
+        domEvent
+      }) => {
+        domEvent.stopPropagation();
+        onChange?.(selectedKeys2);
+        onDeselect?.(key, keyPath);
+      } : void 0,
+      onClick: isFunction(onClick) ? ({
+        key,
+        keyPath,
+        domEvent
+      }) => {
+        domEvent.stopPropagation();
+        onClick(key, keyPath);
+      } : void 0
+    }),
+    [
+      defaultSelectedKeys,
+      multiple,
+      normalizedItems,
+      onChange,
+      onClick,
+      onDeselect,
+      onSelect,
+      selectable,
+      selectedKeys,
+      deselectable
+    ]
+  );
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      className,
+      disabled,
+      menu: menuProps,
+      placement,
+      trigger: dropdownTrigger,
+      children
+    }
+  );
+}
+const VefDropdown = memo(VefDropdownBase);
+VefDropdown.displayName = "VefDropdown";
+
+export { VefDropdown as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-dynamic-icon/index.js

@@ -1,3 +1,47 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{useThemeTokens as o}from"@vef-framework/hooks";import r from"lucide-react/dynamicIconImports";import{forwardRef as t,lazy as i,Suspense as n}from"react";import m from"../vef-icon/index.js";function c(){const{colorFillContent:r}=o();return e("svg",{"aria-label":"Loading icon",height:"1em",role:"img",viewBox:"0 0 100 100",width:"1em",xmlns:"http://www.w3.org/2000/svg",children:e("rect",{fill:r,height:"100",rx:"20",width:"100"})})}const a=e(c,{}),l=new Map,f=t((({name:o,...t},c)=>{if(!l.has(o)){const e=i(r[o]);l.set(o,e)}const f=l.get(o);return e(m,{ref:c,...t,children:e(n,{fallback:a,children:e(f,{})})})}));f.displayName="VefDynamicIcon";export{f as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useThemeTokens } from '@vef-framework/hooks';
+import dynamicIconImports from 'lucide-react/dynamicIconImports';
+import { forwardRef, lazy, Suspense } from 'react';
+import VefIcon from '../vef-icon/index.js';
+
+function SvgPlaceholder() {
+  const { colorFillContent } = useThemeTokens();
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-label": "Loading icon",
+      height: "1em",
+      role: "img",
+      viewBox: "0 0 100 100",
+      width: "1em",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          fill: colorFillContent,
+          height: "100",
+          rx: "20",
+          width: "100"
+        }
+      )
+    }
+  );
+}
+const fallback = /* @__PURE__ */ jsx(SvgPlaceholder, {});
+const iconCache = /* @__PURE__ */ new Map();
+const VefDynamicIcon = forwardRef(({
+  name,
+  ...restProps
+}, ref) => {
+  if (!iconCache.has(name)) {
+    const Icon2 = lazy(dynamicIconImports[name]);
+    iconCache.set(name, Icon2);
+  }
+  const Icon = iconCache.get(name);
+  return /* @__PURE__ */ jsx(VefIcon, { ref, ...restProps, children: /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(Icon, {}) }) });
+});
+VefDynamicIcon.displayName = "VefDynamicIcon";
+
+export { VefDynamicIcon as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-dynamic-icon/props.js

@@ -1,3 +1,7 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import e from"lucide-react/dynamicIconImports";const t=new Set(Object.keys(e));export{t as dynamicIconNames};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import dynamicIconImports from 'lucide-react/dynamicIconImports';
+
+const dynamicIconNames = new Set(Object.keys(dynamicIconImports));
+
+export { dynamicIconNames };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-empty/index.js

@@ -1,3 +1,38 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as t}from"@emotion/react/jsx-runtime";import{isNullish as r}from"@vef-framework/shared";import{Empty as e}from"antd";import{useMemo as o}from"react";const{PRESENTED_IMAGE_DEFAULT:m,PRESENTED_IMAGE_SIMPLE:i}=e;function n({icon:n,iconStyle:a,presetIcon:f="default",...E}){const c=o((()=>r(n)?"default"===f?m:i:n),[n,f]),s=o((()=>{if(!r(a))return{image:a}}),[a]);return t(e,{image:c,styles:s,...E})}export{n as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { isNullish } from '@vef-framework/shared';
+import { Empty } from 'antd';
+import { useMemo } from 'react';
+
+const { PRESENTED_IMAGE_DEFAULT, PRESENTED_IMAGE_SIMPLE } = Empty;
+function VefEmpty({
+  icon,
+  iconStyle,
+  presetIcon = "default",
+  ...restProps
+}) {
+  const iconToUse = useMemo(() => {
+    if (isNullish(icon)) {
+      return presetIcon === "default" ? PRESENTED_IMAGE_DEFAULT : PRESENTED_IMAGE_SIMPLE;
+    }
+    return icon;
+  }, [icon, presetIcon]);
+  const styles = useMemo(() => {
+    if (!isNullish(iconStyle)) {
+      return {
+        image: iconStyle
+      };
+    }
+  }, [iconStyle]);
+  return /* @__PURE__ */ jsx(
+    Empty,
+    {
+      image: iconToUse,
+      styles,
+      ...restProps
+    }
+  );
+}
+
+export { VefEmpty as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/es/vef-empty-placeholder/index.js

@@ -1,7 +1,21 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{css as r}from"@emotion/react";import{themeVariables as t,styles as o}from"@vef-framework/shared";import m from"../vef-empty/index.js";const i=r`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { themeVariables, styles } from '@vef-framework/shared';
+import VefEmpty from '../vef-empty/index.js';
+
+const emptyPlaceholderStyle = css`
   height: 100%;
-  padding: ${t.paddingLg};
-  ${o.flexCenter}
-`;function s({className:r,style:t,...o}){return e("div",{className:r,css:i,style:t,children:e(m,{...o})})}export{s as default};
+  padding: ${themeVariables.paddingLg};
+  ${styles.flexCenter}
+`;
+function VefEmptyPlaceholder({
+  className,
+  style,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx("div", { className, css: emptyPlaceholderStyle, style, children: /* @__PURE__ */ jsx(VefEmpty, { ...restProps }) });
+}
+
+export { VefEmptyPlaceholder as default };
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */