@vef-framework/components 1.0.100 → 1.0.101

package/es/vef-title/index.js

@@ -1,15 +1,97 @@
-/*! 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`
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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`
   &::before {
     content: "";
     display: inline-block;
     width: 6px;
     height: var(--vef-title-left-bar-height);
     border-radius: 3px;
-    background: linear-gradient(to top, ${n.colorPrimary}, ${n.blue5});
-    margin-right: ${n.paddingSm};
+    background: linear-gradient(to top, ${themeVariables.colorPrimary}, ${themeVariables.blue5});
+    margin-right: ${themeVariables.paddingSm};
   }
-`;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};
+`;
+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 };
 /*! 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,3 +1,36 @@
-/*! 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 version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 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,3 +1,34 @@
-/*! 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 version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 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,3 +1,46 @@
-/*! 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 version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 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,3 +1,21 @@
-/*! 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 version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 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,3 +1,90 @@
-/*! 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 version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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 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,14 +1,117 @@
-/*! 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`
+/*! VefFramework version: 1.0.101, build time: 2025-03-07T14:07:14.971Z, 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`
   position: relative;
   width: var(--vef-virtual-grid-width);
   height: var(--vef-virtual-grid-height);
-`,u=e`
+`;
+const virtualItemStyle = css`
   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));
-`;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};
+`;
+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 };
 /*! 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 */