@vef-framework/components 1.0.99 → 1.0.100

package/es/vef-title/index.js

@@ -1,97 +1,15 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useColorTokens } from '@vef-framework/hooks';
-import { themeVariables } from '@vef-framework/shared';
-import { Typography } from 'antd';
-import { useMemo } from 'react';
-import VefDivider from '../vef-divider/index.js';
-
-const { Title } = Typography;
-const dividerStyle = css`
-  margin: ${themeVariables.marginSm} 0 ${themeVariables.marginLg};
-`;
-const leftBarStyle = css`
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{jsxs as e,Fragment as t,jsx as r}from"@emotion/react/jsx-runtime";import{css as i}from"@emotion/react";import{useColorTokens as o}from"@vef-framework/hooks";import{themeVariables as n}from"@vef-framework/shared";import{Typography as a}from"antd";import{useMemo as l}from"react";import s from"../vef-divider/index.js";const{Title:m}=a,f=i`
+  margin: ${n.marginSm} 0 ${n.marginLg};
+`,c=i`
   &::before {
     content: "";
     display: inline-block;
     width: 6px;
     height: var(--vef-title-left-bar-height);
     border-radius: 3px;
-    background: linear-gradient(to top, ${themeVariables.colorPrimary}, ${themeVariables.blue5});
-    margin-right: ${themeVariables.paddingSm};
+    background: linear-gradient(to top, ${n.colorPrimary}, ${n.blue5});
+    margin-right: ${n.paddingSm};
   }
-`;
-function VefTitle({
-  showLeftBar,
-  showBottomLine,
-  noPaddingBottom,
-  variant,
-  color,
-  ellipsis,
-  ellipsisTip,
-  ...restProps
-}) {
-  const { level = 1 } = restProps;
-  const ellipsisConfig = useMemo(() => {
-    if (ellipsis) {
-      return {
-        tooltip: ellipsisTip ?? restProps.children
-      };
-    }
-  }, [ellipsis, ellipsisTip, restProps.children]);
-  const colorTokens = useColorTokens();
-  const styleProps = useMemo(() => {
-    const props = {};
-    if (color === "secondary") {
-      props.type = "secondary";
-    } else {
-      const css2 = [];
-      if (color) {
-        css2.push({
-          color: colorTokens.get(color)
-        });
-      }
-      if (showLeftBar) {
-        css2.push(leftBarStyle);
-      }
-      props.css = css2;
-    }
-    if (variant) {
-      props[variant] = true;
-    }
-    if (showLeftBar) {
-      props.style = {
-        "--vef-title-left-bar-height": `calc(var(--vef-font-size-heading-${level}) * 0.8)`
-      };
-    }
-    if (noPaddingBottom) {
-      props.style = {
-        ...props.style,
-        "--vef-typography-title-margin-bottom": 0
-      };
-    }
-    return props;
-  }, [
-    color,
-    variant,
-    showLeftBar,
-    colorTokens,
-    level,
-    noPaddingBottom
-  ]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Title,
-      {
-        ellipsis: ellipsisConfig,
-        ...styleProps,
-        ...restProps
-      }
-    ),
-    showBottomLine && /* @__PURE__ */ jsx(VefDivider, { css: dividerStyle })
-  ] });
-}
-
-export { VefTitle as default };
+`;function VefTitle({showLeftBar:i,showBottomLine:n,noPaddingBottom:a,variant:p,color:d,ellipsis:h,ellipsisTip:g,...v}){const{level:u=1}=v,y=l((()=>{if(h)return{tooltip:g??v.children}}),[h,g,v.children]),b=o(),$=l((()=>{const e={};if("secondary"===d)e.type="secondary";else{const t=[];d&&t.push({color:b.get(d)}),i&&t.push(c),e.css=t}return p&&(e[p]=!0),i&&(e.style={"--vef-title-left-bar-height":`calc(var(--vef-font-size-heading-${u}) * 0.8)`}),a&&(e.style={...e.style,"--vef-typography-title-margin-bottom":0}),e}),[d,p,i,b,u,a]);return e(t,{children:[r(m,{ellipsis:y,...$,...v}),n&&r(s,{css:f})]})}export{VefTitle 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-tooltip/index.js

@@ -1,36 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { Tooltip } from 'antd';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-
-const VefTooltip = forwardRef(({
-  content,
-  trigger = "hover",
-  arrow = true,
-  delay = 0.1,
-  defaultOpened,
-  opened,
-  onOpenedChange,
-  ...restProps
-}, ref) => {
-  const tooltipRef = useRef(null);
-  useImperativeHandle(ref, () => tooltipRef.current.nativeElement);
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      ref: tooltipRef,
-      arrow,
-      defaultOpen: defaultOpened,
-      mouseEnterDelay: delay,
-      open: opened,
-      title: content,
-      trigger,
-      onOpenChange: onOpenedChange,
-      ...restProps
-    }
-  );
-});
-VefTooltip.displayName = "VefTooltip";
-
-export { VefTooltip as default };
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{jsx as e}from"@emotion/react/jsx-runtime";import{Tooltip as t}from"antd";import{forwardRef as r,useRef as n,useImperativeHandle as o}from"react";const a=r((({content:r,trigger:a="hover",arrow:p=!0,delay:i=.1,defaultOpened:l,opened:m,onOpenedChange:d,...f},u)=>{const c=n(null);return o(u,(()=>c.current.nativeElement)),e(t,{ref:c,arrow:p,defaultOpen:l,mouseEnterDelay:i,open:m,title:r,trigger:a,onOpenChange:d,...f})}));a.displayName="VefTooltip";export{a 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-tree-select/hooks/use-change-handler.js

@@ -1,34 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { isFunction, isArray } from '@vef-framework/shared';
-import { useMemo } from 'react';
-
-function useChangeHandler(onChange, options) {
-  const optionsMap = useMemo(() => options.reduce((map, option) => {
-    map.set(option.value, option);
-    return map;
-  }, /* @__PURE__ */ new Map()), [options]);
-  return useMemo(() => {
-    if (isFunction(onChange)) {
-      return (value) => {
-        if (!value) {
-          onChange(null, null);
-          return;
-        }
-        if (isArray(value)) {
-          onChange(
-            value,
-            value.map((it) => optionsMap.get(it))
-          );
-        } else {
-          onChange(
-            value,
-            optionsMap.get(value)
-          );
-        }
-      };
-    }
-  }, [onChange, optionsMap]);
-}
-
-export { useChangeHandler };
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{isFunction as e,isArray as r}from"@vef-framework/shared";import{useMemo as n}from"react";function useChangeHandler(t,a){const u=n((()=>a.reduce(((e,r)=>(e.set(r.value,r),e)),new Map)),[a]);return n((()=>{if(e(t))return e=>{e?r(e)?t(e,e.map((e=>u.get(e)))):t(e,u.get(e)):t(null,null)}}),[t,u])}export{useChangeHandler};
 /*! 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-tree-select/hooks/use-data-options.js

@@ -1,46 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { useComputedOptions } from '@vef-framework/hooks';
-import { isArray, isFunction, isNullish } from '@vef-framework/shared';
-import { useLayoutEffect } from 'react';
-
-function useDataOptions({
-  value,
-  multiple = false,
-  onChange,
-  ...rest
-}) {
-  const {
-    onFilterKeywordChange,
-    normalizedOptions,
-    defaultOption,
-    isLoading,
-    fallbackOptions,
-    isFallbackOptionsLoading
-  } = useComputedOptions({
-    ...rest,
-    selectedOptionValues: isArray(value) ? value : value ? [value] : []
-  });
-  useLayoutEffect(() => {
-    if (defaultOption && isFunction(onChange) && isNullish(value)) {
-      onChange(
-        multiple ? [defaultOption.value] : defaultOption.value,
-        multiple ? [defaultOption] : defaultOption
-      );
-    }
-  }, [
-    defaultOption,
-    multiple,
-    onChange,
-    value
-  ]);
-  return {
-    onFilterKeywordChange,
-    normalizedOptions,
-    isLoading,
-    fallbackOptions,
-    isFallbackOptionsLoading
-  };
-}
-
-export { useDataOptions };
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{useComputedOptions as o}from"@vef-framework/hooks";import{isArray as a,isFunction as e,isNullish as i}from"@vef-framework/shared";import{useLayoutEffect as n}from"react";function useDataOptions({value:t,multiple:r=!1,onChange:l,...s}){const{onFilterKeywordChange:p,normalizedOptions:d,defaultOption:f,isLoading:m,fallbackOptions:u,isFallbackOptionsLoading:O}=o({...s,selectedOptionValues:a(t)?t:t?[t]:[]});return n((()=>{f&&e(l)&&i(t)&&l(r?[f.value]:f.value,r?[f]:f)}),[f,r,l,t]),{onFilterKeywordChange:p,normalizedOptions:d,isLoading:m,fallbackOptions:u,isFallbackOptionsLoading:O}}export{useDataOptions};
 /*! 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-tree-select/hooks/use-tree-select-instance.js

@@ -1,21 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { useRef, useImperativeHandle } from 'react';
-
-function useTreeSelectInstance(ref, dataOptions) {
-  const treeSelectRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    blur: () => {
-      treeSelectRef.current?.blur();
-    },
-    focus: () => {
-      treeSelectRef.current?.focus({
-        preventScroll: true
-      });
-    },
-    getDataOptions: () => dataOptions
-  }));
-  return treeSelectRef;
-}
-
-export { useTreeSelectInstance };
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{useRef as e,useImperativeHandle as r}from"react";function useTreeSelectInstance(t,n){const c=e(null);return r(t,(()=>({blur:()=>{c.current?.blur()},focus:()=>{c.current?.focus({preventScroll:!0})},getDataOptions:()=>n}))),c}export{useTreeSelectInstance};
 /*! 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-tree-select/index.js

@@ -1,90 +1,3 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useOptionFilter } from '@vef-framework/hooks';
-import { styles } from '@vef-framework/shared';
-import { TreeSelect } from 'antd';
-import { memo, forwardRef } from 'react';
-import '../internal/index.js';
-import VefLoadingPlaceholder from '../vef-loading-placeholder/index.js';
-import { useChangeHandler } from './hooks/use-change-handler.js';
-import { useDataOptions } from './hooks/use-data-options.js';
-import { useTreeSelectInstance } from './hooks/use-tree-select-instance.js';
-import { convertBasicSizeToUiSize } from '../internal/utils.js';
-
-const listHeight = 280;
-const loadingPlaceholder = /* @__PURE__ */ jsx("div", { css: { height: listHeight / 2 }, children: /* @__PURE__ */ jsx(VefLoadingPlaceholder, {}) });
-const treeLineOptions = { showLeafIcon: false };
-function VefTreeSelectBase({
-  defaultValue,
-  value,
-  size,
-  clearable,
-  disabled,
-  placeholder,
-  variant,
-  maxCount,
-  onClear,
-  onBlur,
-  onFocus,
-  onChange,
-  onSelect,
-  onDeselect,
-  multiple = false,
-  filterable = true,
-  filterFromRemote = false,
-  ...restProps
-}, ref) {
-  const {
-    normalizedOptions,
-    isLoading
-  } = useDataOptions({
-    value,
-    multiple,
-    onChange,
-    filterable,
-    filterFromRemote,
-    ...restProps
-  });
-  const filterTreeNode = useOptionFilter(filterable, false);
-  const handleChange = useChangeHandler(onChange, normalizedOptions);
-  const treeSelectRef = useTreeSelectInstance(ref, normalizedOptions);
-  return /* @__PURE__ */ jsx(
-    TreeSelect,
-    {
-      ref: treeSelectRef,
-      virtual: true,
-      allowClear: clearable,
-      css: styles.fullWidth,
-      defaultValue,
-      disabled,
-      filterTreeNode,
-      listHeight,
-      loading: isLoading,
-      maxCount,
-      maxTagCount: multiple ? "responsive" : void 0,
-      multiple,
-      notFoundContent: isLoading ? loadingPlaceholder : void 0,
-      placeholder,
-      showSearch: filterable,
-      size: convertBasicSizeToUiSize(size),
-      treeCheckable: multiple,
-      treeData: normalizedOptions,
-      treeLine: treeLineOptions,
-      value,
-      variant,
-      onBlur,
-      onChange: handleChange,
-      onClear,
-      onDeselect,
-      onFocus,
-      onSelect
-    }
-  );
-}
-const VefTreeSelect = memo(
-  forwardRef(VefTreeSelectBase)
-);
-VefTreeSelect.displayName = "VefTreeSelect";
-
-export { VefTreeSelect as default };
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{jsx as e}from"@emotion/react/jsx-runtime";import{useOptionFilter as o}from"@vef-framework/hooks";import{styles as t}from"@vef-framework/shared";import{TreeSelect as r}from"antd";import{memo as a,forwardRef as l}from"react";import"../internal/index.js";import n from"../vef-loading-placeholder/index.js";import{useChangeHandler as i}from"./hooks/use-change-handler.js";import{useDataOptions as s}from"./hooks/use-data-options.js";import{useTreeSelectInstance as m}from"./hooks/use-tree-select-instance.js";import{convertBasicSizeToUiSize as f}from"../internal/utils.js";const d=e("div",{css:{height:140},children:e(n,{})}),u={showLeafIcon:!1};const c=a(l((function VefTreeSelectBase({defaultValue:a,value:l,size:n,clearable:c,disabled:h,placeholder:p,variant:v,maxCount:C,onClear:g,onBlur:j,onFocus:k,onChange:x,onSelect:b,onDeselect:w,multiple:F=!1,filterable:S=!0,filterFromRemote:T=!1,...V},z){const{normalizedOptions:B,isLoading:D}=s({value:l,multiple:F,onChange:x,filterable:S,filterFromRemote:T,...V}),L=o(S,!1),N=i(x,B),R=m(z,B);return e(r,{ref:R,virtual:!0,allowClear:c,css:t.fullWidth,defaultValue:a,disabled:h,filterTreeNode:L,listHeight:280,loading:D,maxCount:C,maxTagCount:F?"responsive":void 0,multiple:F,notFoundContent:D?d:void 0,placeholder:p,showSearch:S,size:f(n),treeCheckable:F,treeData:B,treeLine:u,value:l,variant:v,onBlur:j,onChange:N,onClear:g,onDeselect:w,onFocus:k,onSelect:b})})));c.displayName="VefTreeSelect";export{c 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-virtual-grid/index.js

@@ -1,117 +1,14 @@
-/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
-import { jsx } from '@emotion/react/jsx-runtime';
-import { css } from '@emotion/react';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useGapSizeNormalizer } from '@vef-framework/hooks';
-import { isArray, isNumber } from '@vef-framework/shared';
-import { useMemo, memo, useRef, Fragment, createElement } from 'react';
-import VefAutoSizer from '../vef-auto-sizer/index.js';
-import VefScrollArea from '../vef-scroll-area/index.js';
-
-const viewportStyle = {
-  willChange: "transform"
-};
-const containerStyle = css`
+/*! VefFramework version: 1.0.100, build time: 2025-03-07T13:52:52.580Z, made by Venus. */
+import{jsx as t}from"@emotion/react/jsx-runtime";import{css as e}from"@emotion/react";import{useVirtualizer as i}from"@tanstack/react-virtual";import{useGapSizeNormalizer as r}from"@vef-framework/hooks";import{isArray as a,isNumber as l}from"@vef-framework/shared";import{useMemo as o,memo as n,useRef as s,Fragment as m,createElement as d}from"react";import v from"../vef-auto-sizer/index.js";import h from"../vef-scroll-area/index.js";const f={willChange:"transform"},g=e`
   position: relative;
   width: var(--vef-virtual-grid-width);
   height: var(--vef-virtual-grid-height);
-`;
-const virtualItemStyle = css`
+`,u=e`
   position: absolute;
   top: 0;
   left: 0;
   width: var(--vef-virtual-grid-item-width);
   height: var(--vef-virtual-grid-item-height);
   transform: translateX(var(--vef-virtual-grid-item-x)) translateY(var(--vef-virtual-grid-item-y));
-`;
-function VefVirtualGridBase({
-  className,
-  style,
-  items,
-  renderItem,
-  itemClassName,
-  itemStyle,
-  rowHeight,
-  columnWidth,
-  gap,
-  ...restProps
-}) {
-  const GridItem = useMemo(() => memo(renderItem), [renderItem]);
-  const viewportRef = useRef(null);
-  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]);
-  const rowVirtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: isNumber(rowHeight) ? () => rowHeight : rowHeight,
-    overscan: 2,
-    gap: rowGap
-  });
-  const columnVirtualizer = useVirtualizer({
-    horizontal: true,
-    count: items[0]?.length ?? 0,
-    getScrollElement: () => viewportRef.current,
-    estimateSize: isNumber(columnWidth) ? () => columnWidth : columnWidth,
-    overscan: 2,
-    gap: columnGap
-  });
-  const containerSizeStyle = useMemo(() => ({
-    "--vef-virtual-grid-height": `${rowVirtualizer.getTotalSize()}px`,
-    "--vef-virtual-grid-width": `${columnVirtualizer.getTotalSize()}px`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [rowVirtualizer.getTotalSize(), columnVirtualizer.getTotalSize()]);
-  const getVirtualGridNode = (height, width) => /* @__PURE__ */ jsx(
-    VefScrollArea,
-    {
-      className,
-      height,
-      scrollbarSize: "small",
-      style,
-      viewportRef,
-      viewportStyle,
-      width,
-      children: /* @__PURE__ */ jsx("div", { css: containerStyle, style: containerSizeStyle, children: rowVirtualizer.getVirtualItems().map((row) => /* @__PURE__ */ jsx(Fragment, { children: columnVirtualizer.getVirtualItems().map((item) => {
-        const itemData = items[row.index][item.index];
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: itemClassName,
-            css: virtualItemStyle,
-            style: {
-              ...itemStyle,
-              "--vef-virtual-grid-item-width": `${item.size}px`,
-              "--vef-virtual-grid-item-height": `${row.size}px`,
-              "--vef-virtual-grid-item-x": `${item.start}px`,
-              "--vef-virtual-grid-item-y": `${row.start}px`
-            },
-            children: itemData && createElement(GridItem, {
-              item: itemData,
-              rowIndex: row.index,
-              columnIndex: item.index
-            })
-          },
-          item.key
-        );
-      }) }, row.key)) })
-    }
-  );
-  if (!restProps.autoSize) {
-    const { height, width } = restProps;
-    return getVirtualGridNode(height, width);
-  }
-  return /* @__PURE__ */ jsx(VefAutoSizer, { children: ({ height, width }) => getVirtualGridNode(height, width) });
-}
-const VefVirtualGrid = memo(VefVirtualGridBase);
-VefVirtualGrid.displayName = "VefVirtualGrid";
-
-export { VefVirtualGrid as default };
+`;const c=n((function VefVirtualGridBase({className:e,style:c,items:p,renderItem:x,itemClassName:w,itemStyle:z,rowHeight:S,columnWidth:y,gap:k,...V}){const $=o((()=>n(x)),[x]),I=s(null),N=r(),[T,j]=o((()=>{if(a(k))return[N(k[0]),N(k[1])];if(k){const t=N(k);return[t,t]}return[0,0]}),[k,N]),b=i({count:p.length,getScrollElement:()=>I.current,estimateSize:l(S)?()=>S:S,overscan:2,gap:T}),C=i({horizontal:!0,count:p[0]?.length??0,getScrollElement:()=>I.current,estimateSize:l(y)?()=>y:y,overscan:2,gap:j}),E=o((()=>({"--vef-virtual-grid-height":`${b.getTotalSize()}px`,"--vef-virtual-grid-width":`${C.getTotalSize()}px`})),[b.getTotalSize(),C.getTotalSize()]),getVirtualGridNode=(i,r)=>t(h,{className:e,height:i,scrollbarSize:"small",style:c,viewportRef:I,viewportStyle:f,width:r,children:t("div",{css:g,style:E,children:b.getVirtualItems().map((e=>t(m,{children:C.getVirtualItems().map((i=>{const r=p[e.index][i.index];return t("div",{className:w,css:u,style:{...z,"--vef-virtual-grid-item-width":`${i.size}px`,"--vef-virtual-grid-item-height":`${e.size}px`,"--vef-virtual-grid-item-x":`${i.start}px`,"--vef-virtual-grid-item-y":`${e.start}px`},children:r&&d($,{item:r,rowIndex:e.index,columnIndex:i.index})},i.key)}))},e.key)))})});if(!V.autoSize){const{height:t,width:e}=V;return getVirtualGridNode(t,e)}return t(v,{children:({height:t,width:e})=>getVirtualGridNode(t,e)})}));c.displayName="VefVirtualGrid";export{c 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 */