@vef-framework/components 1.0.63 → 1.0.64

package/es/vef-slider/hooks/use-slider-instance.js

@@ -1,3 +1,14 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{useRef as r,useImperativeHandle as u}from"react";function t(t){const c=r(null);return u(t,(()=>({blur:()=>c.current?.blur(),focus:()=>c.current?.focus()}))),c}export{t as useSliderInstance};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { useRef, useImperativeHandle } from 'react';
+
+function useSliderInstance(ref) {
+  const sliderRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    blur: () => sliderRef.current?.blur(),
+    focus: () => sliderRef.current?.focus()
+  }));
+  return sliderRef;
+}
+
+export { useSliderInstance };
 /*! 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-slider/index.js

@@ -1,3 +1,35 @@
-/*! 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{Slider as r}from"antd";import{forwardRef as e,useMemo as o}from"react";import{useSliderInstance as m}from"./hooks/use-slider-instance.js";const n=e((({step:e,tipFormatter:n,onChange:a,...i},s)=>{const p=o((()=>{if(n)return{formatter:t=>n(t)}}),[n]),f=m(s);return t(r,{ref:f,step:"mark"===e?null:e,tooltip:p,onChange:a,...i})}));n.displayName="VefSlider";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 { Slider } from 'antd';
+import { forwardRef, useMemo } from 'react';
+import { useSliderInstance } from './hooks/use-slider-instance.js';
+
+const VefSlider = forwardRef(({
+  step,
+  tipFormatter,
+  onChange,
+  ...restProps
+}, ref) => {
+  const tooltipProps = useMemo(() => {
+    if (tipFormatter) {
+      return {
+        formatter: (value) => tipFormatter(value)
+      };
+    }
+  }, [tipFormatter]);
+  const sliderRef = useSliderInstance(ref);
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      ref: sliderRef,
+      step: step === "mark" ? null : step,
+      tooltip: tooltipProps,
+      onChange,
+      ...restProps
+    }
+  );
+});
+VefSlider.displayName = "VefSlider";
+
+export { VefSlider 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-sortable-list/components/overlay-item.js

@@ -1,7 +1,35 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e,jsxs as n,Fragment as o}from"@emotion/react/jsx-runtime";import{HolderOutlined as t}from"@ant-design/icons";import{css as r}from"@emotion/react";const s=e(t,{}),a=r`
+/*! 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 { HolderOutlined } from '@ant-design/icons';
+import { css } from '@emotion/react';
+
+const defaultHandleIcon = /* @__PURE__ */ jsx(HolderOutlined, {});
+const handlePresetStyle = css`
   cursor: move;
   user-select: none;
   touch-action: none;
-`;function c({item:t,renderItem:r,useHandle:c,handleClassName:i,handleStyle:m,handleIcon:l}){return n(o,{children:[c&&e("div",{className:i,css:a,style:m,children:l??s}),r(t,!0)]})}export{c as default};
+`;
+function VefOverlayItem({
+  item,
+  renderItem,
+  useHandle,
+  handleClassName,
+  handleStyle,
+  handleIcon
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    useHandle && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: handleClassName,
+        css: handlePresetStyle,
+        style: handleStyle,
+        children: handleIcon ?? defaultHandleIcon
+      }
+    ),
+    renderItem(item, true)
+  ] });
+}
+
+export { VefOverlayItem 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-sortable-list/components/sortable-item.js

@@ -1,7 +1,79 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e,jsxs as t}from"@emotion/react/jsx-runtime";import{HolderOutlined as i}from"@ant-design/icons";import{useSortable as r}from"@dnd-kit/sortable";import{CSS as n}from"@dnd-kit/utilities";import{css as s}from"@emotion/react";const o=e(i,{}),a=s`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { HolderOutlined } from '@ant-design/icons';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { css } from '@emotion/react';
+
+const defaultHandleIcon = /* @__PURE__ */ jsx(HolderOutlined, {});
+const handlePresetStyle = css`
   cursor: move;
   user-select: none;
   touch-action: none;
-`;function m({item:i,itemKey:s,itemIndex:m,itemClassName:d,itemStyle:l,renderItem:c,useHandle:f,useOverlay:u,handleClassName:p,handleStyle:h,handleIcon:v,disabled:y}){const{isDragging:N,attributes:g,listeners:x,setNodeRef:b,setActivatorNodeRef:I,transition:S,transform:k}=r({id:s,disabled:y,data:{index:m}}),C={...l,transition:S,transform:n.Transform.toString(k),...!u&&N?{position:"relative",zIndex:999}:{}};return t("div",{ref:b,className:d,style:C,...g,...f?{}:x,children:[f&&e("div",{ref:I,className:p,css:a,style:h,...x,children:v??o}),c(i,!1)]})}export{m as default};
+`;
+function VefSortableItem({
+  item,
+  itemKey,
+  itemIndex,
+  itemClassName,
+  itemStyle,
+  renderItem,
+  useHandle,
+  useOverlay,
+  handleClassName,
+  handleStyle,
+  handleIcon,
+  disabled
+}) {
+  const {
+    isDragging,
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transition,
+    transform
+  } = useSortable({
+    id: itemKey,
+    disabled,
+    data: {
+      index: itemIndex
+    }
+  });
+  const style = {
+    ...itemStyle,
+    transition,
+    transform: CSS.Transform.toString(transform),
+    ...!useOverlay && isDragging ? {
+      position: "relative",
+      zIndex: 999
+    } : {}
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: itemClassName,
+      style,
+      ...attributes,
+      ...useHandle ? {} : listeners,
+      children: [
+        useHandle && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setActivatorNodeRef,
+            className: handleClassName,
+            css: handlePresetStyle,
+            style: handleStyle,
+            ...listeners,
+            children: handleIcon ?? defaultHandleIcon
+          }
+        ),
+        renderItem(item, false)
+      ]
+    }
+  );
+}
+
+export { VefSortableItem 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-sortable-list/hooks/use-merged-items.js

@@ -1,3 +1,22 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{isNullish as r}from"@vef-framework/shared";import{useState as e,useCallback as o}from"react";function t(t,f,m){if(r(t)&&r(f))throw new Error("At least one of `defaultItems` and `items` must be provided for VefSortableList component.");const[n,a]=e(t??[]);return[f??n,o((r=>{f?m?.(r(f)):a(r)}),[f,m])]}export{t as useMergedItems};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { isNullish } from '@vef-framework/shared';
+import { useState, useCallback } from 'react';
+
+function useMergedItems(defaultItems, items, onChange) {
+  if (isNullish(defaultItems) && isNullish(items)) {
+    throw new Error("At least one of `defaultItems` and `items` must be provided for VefSortableList component.");
+  }
+  const [internalItems, setInternalItems] = useState(defaultItems ?? []);
+  const mergedItems = items ?? internalItems;
+  const mergedOnChange = useCallback((moveItems) => {
+    if (items) {
+      onChange?.(moveItems(items));
+    } else {
+      setInternalItems(moveItems);
+    }
+  }, [items, onChange]);
+  return [mergedItems, mergedOnChange];
+}
+
+export { useMergedItems };
 /*! 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-sortable-list/index.js

@@ -1,3 +1,115 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e,jsxs as t}from"@emotion/react/jsx-runtime";import{useSensors as r,useSensor as i,PointerSensor as o,DndContext as m,closestCenter as a,DragOverlay as s}from"@dnd-kit/core";import{restrictToParentElement as n,restrictToWindowEdges as d}from"@dnd-kit/modifiers";import{arrayMove as c,SortableContext as l,verticalListSortingStrategy as p,horizontalListSortingStrategy as f}from"@dnd-kit/sortable";import{isFunction as u}from"@vef-framework/shared";import{useMemo as y,useState as v,useCallback as h,memo as g}from"react";import x from"./components/overlay-item.js";import k from"./components/sortable-item.js";import{useMergedItems as N}from"./hooks/use-merged-items.js";const b=g((function({defaultItems:g,items:b,itemKey:j="id",className:S,style:D,orientation:w="vertical",useOverlay:C=!0,restrictStrategy:E="parent",onChange:I,...K}){const[L,O]=N(g,b,I),V=r(i(o)),q=y((()=>u(j)?j:e=>e[j]),[j]),[z,A]=v(),B=h((({active:e})=>{A(L[e.data.current.index])}),[L]),F=h((({active:e,over:t})=>{t&&e.id!==t.id&&O((r=>c(r,e.data.current.index,t.data.current.index)))}),[O]),G=L.map((e=>q(e))),{itemClassName:H,itemStyle:J,disabled:M,...P}=K;return e(m,{collisionDetection:a,sensors:V,modifiers:["parent"===E?n:d],onDragEnd:F,onDragStart:B,children:e(l,{items:G,strategy:"vertical"===w?p:f,children:t("div",{className:S,style:D,children:[L.map(((t,r)=>{const i=q(t);return e(k,{item:t,itemIndex:r,itemKey:i,...K},i)})),C&&e(s,{className:H,style:J,wrapperElement:"div",modifiers:["parent"===E?n:d],children:z&&e(x,{item:z,...P})})]})})})}));b.displayName="VefSortableList";export{b as default};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { restrictToParentElement, restrictToWindowEdges } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, verticalListSortingStrategy, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { isFunction } from '@vef-framework/shared';
+import { useMemo, useState, useCallback, memo } from 'react';
+import VefOverlayItem from './components/overlay-item.js';
+import VefSortableItem from './components/sortable-item.js';
+import { useMergedItems } from './hooks/use-merged-items.js';
+
+const defaultItemKey = "id";
+function VefSortableListBase({
+  defaultItems,
+  items,
+  itemKey = defaultItemKey,
+  className,
+  style,
+  orientation = "vertical",
+  useOverlay = true,
+  restrictStrategy = "parent",
+  onChange,
+  ...restProps
+}) {
+  const [mergedItems, mergedOnChange] = useMergedItems(defaultItems, items, onChange);
+  const sensors = useSensors(useSensor(PointerSensor));
+  const itemKeyFn = useMemo(() => {
+    if (isFunction(itemKey)) {
+      return itemKey;
+    }
+    return (item) => item[itemKey];
+  }, [itemKey]);
+  const [activeItem, setActiveItem] = useState();
+  const handleDragStart = useCallback(({ active }) => {
+    setActiveItem(mergedItems[active.data.current.index]);
+  }, [mergedItems]);
+  const handleDragEnd = useCallback(({ active, over }) => {
+    if (!over) {
+      return;
+    }
+    if (active.id !== over.id) {
+      mergedOnChange(
+        (items2) => arrayMove(
+          items2,
+          active.data.current.index,
+          over.data.current.index
+        )
+      );
+    }
+  }, [mergedOnChange]);
+  const itemKeys = mergedItems.map((item) => itemKeyFn(item));
+  const {
+    itemClassName,
+    itemStyle,
+    disabled,
+    ...overlayItemProps
+  } = restProps;
+  return /* @__PURE__ */ jsx(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      sensors,
+      modifiers: [
+        restrictStrategy === "parent" ? restrictToParentElement : restrictToWindowEdges
+      ],
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: /* @__PURE__ */ jsx(
+        SortableContext,
+        {
+          items: itemKeys,
+          strategy: orientation === "vertical" ? verticalListSortingStrategy : horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxs("div", { className, style, children: [
+            mergedItems.map((item, index) => {
+              const key = itemKeyFn(item);
+              return /* @__PURE__ */ jsx(
+                VefSortableItem,
+                {
+                  item,
+                  itemIndex: index,
+                  itemKey: key,
+                  ...restProps
+                },
+                key
+              );
+            }),
+            useOverlay && /* @__PURE__ */ jsx(
+              DragOverlay,
+              {
+                className: itemClassName,
+                style: itemStyle,
+                wrapperElement: "div",
+                modifiers: [
+                  restrictStrategy === "parent" ? restrictToParentElement : restrictToWindowEdges
+                ],
+                children: activeItem && /* @__PURE__ */ jsx(
+                  VefOverlayItem,
+                  {
+                    item: activeItem,
+                    ...overlayItemProps
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const VefSortableList = memo(VefSortableListBase);
+VefSortableList.displayName = "VefSortableList";
+
+export { VefSortableList 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-space/index.js

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as r}from"@emotion/react/jsx-runtime";import{useGapSizeNormalizer as o}from"@vef-framework/hooks";import{isArray as m}from"@vef-framework/shared";import{Space as t}from"antd";import{useMemo as e}from"react";function f({gap:f,...a}){const i=o(),p=e((()=>m(f)?f.map((r=>i(r))):f?i(f):f),[f,i]);return r(t,{size:p,...a})}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 { useGapSizeNormalizer } from '@vef-framework/hooks';
+import { isArray } from '@vef-framework/shared';
+import { Space } from 'antd';
+import { useMemo } from 'react';
+
+function VefSpace({
+  gap,
+  ...restProps
+}) {
+  const normalizeGapSize = useGapSizeNormalizer();
+  const size = useMemo(() => {
+    if (isArray(gap)) {
+      return gap.map((it) => normalizeGapSize(it));
+    }
+    if (gap) {
+      return normalizeGapSize(gap);
+    }
+    return gap;
+  }, [gap, normalizeGapSize]);
+  return /* @__PURE__ */ jsx(Space, { size, ...restProps });
+}
+
+export { VefSpace 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-spin/index.js

@@ -1,3 +1,13 @@
-/*! 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{Spin as e}from"antd";function r({size:r,...i}){return t(e,{size:"medium"===r?"default":r,...i})}export{r 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 { Spin } from 'antd';
+
+function VefSpin({
+  size,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(Spin, { size: size === "medium" ? "default" : size, ...restProps });
+}
+
+export { VefSpin 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-splitter/index.js

@@ -1,3 +1,21 @@
-/*! 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{Splitter as o}from"antd";function e({orientation:e,onResizeBegin:n,...r}){return t(o,{layout:e,onResizeStart:n,...r})}export{e 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 { Splitter } from 'antd';
+
+function VefSplitter({
+  orientation,
+  onResizeBegin,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Splitter,
+    {
+      layout: orientation,
+      onResizeStart: onResizeBegin,
+      ...rest
+    }
+  );
+}
+
+export { VefSplitter 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-splitter-panel/index.js

@@ -1,3 +1,13 @@
-/*! 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{Splitter as o}from"antd";const{Panel:r}=o;function n({...o}){return t(r,{...o})}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 { Splitter } from 'antd';
+
+const { Panel } = Splitter;
+function VefSplitterPanel({
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(Panel, { ...rest });
+}
+
+export { VefSplitterPanel 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-status/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{useColorTokens as o}from"@vef-framework/hooks";import{Badge as r}from"antd";import{useMemo as e}from"react";function a({processing:a=!1,color:f="default",children:n}){const u=o(),i=e((()=>{if("default"===f)return{status:"default",text:n};if(u.has(f))return{status:a?"processing":"default",color:u.get(f),text:n};throw new Error(`Invalid color value "${f}" of VefStatus component. Color must be either "default" or a valid color token.`)}),[f,u,a,n]);return t(r,{...i})}export{a 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 { useColorTokens } from '@vef-framework/hooks';
+import { Badge } from 'antd';
+import { useMemo } from 'react';
+
+function VefStatus({
+  processing = false,
+  color = "default",
+  children
+}) {
+  const colorTokens = useColorTokens();
+  const badgeProps = useMemo(() => {
+    if (color === "default") {
+      return {
+        status: "default",
+        text: children
+      };
+    }
+    if (colorTokens.has(color)) {
+      return {
+        status: processing ? "processing" : "default",
+        color: colorTokens.get(color),
+        text: children
+      };
+    }
+    throw new Error(`Invalid color value "${color}" of VefStatus component. Color must be either "default" or a valid color token.`);
+  }, [
+    color,
+    colorTokens,
+    processing,
+    children
+  ]);
+  return /* @__PURE__ */ jsx(Badge, { ...badgeProps });
+}
+
+export { VefStatus 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-table/components/columns/bool.js

@@ -1,3 +1,92 @@
-/*! 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 o}from"@emotion/react";import{VefError as t,isString as r,isNullish as a,isDeepEqual as l}from"@vef-framework/shared";import{useMemo as i,memo as m}from"react";import u from"../../../vef-text/index.js";import{useComputedValues as n}from"../../hooks/use-computed-values.js";const c=m((function({value:l,record:m,rowIndex:c,columnProps:f}){if("Boolean"!==f.type)throw new t(-1,"Column type must be Boolean");const{defaultValue:d,trueText:s="是",falseText:p="否",bold:w,italic:x,color:h,width:V}=f,[b,k,v]=n([{key:"bold",rawValue:w,defaultValue:!1},{key:"italic",rawValue:x,defaultValue:!1},{key:"color",rawValue:h}],l,m,c),y=i((()=>r(v)?v:v?!a(l)&&Object.hasOwn(v,l)?v[l]:v["*"]:void 0),[v,l]),j=i((()=>l?l?s:p:d),[l,s,p,d]),B=i((()=>{if(V)return o({maxWidth:`${V}px !important`})}),[V]);return e(u,{bold:b,color:y,css:B,italic:k,children:j})}),l);export{c 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 { css } from '@emotion/react';
+import { VefError, isString, isNullish, isDeepEqual } from '@vef-framework/shared';
+import { useMemo, memo } from 'react';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+
+function Bool({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Boolean") {
+    throw new VefError(-1, "Column type must be Boolean");
+  }
+  const {
+    defaultValue,
+    trueText = "\u662F",
+    falseText = "\u5426",
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = useMemo(() => {
+    if (isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = useMemo(() => {
+    if (value) {
+      return value ? trueText : falseText;
+    }
+    return defaultValue;
+  }, [
+    value,
+    trueText,
+    falseText,
+    defaultValue
+  ]);
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+const BoolMemo = memo(Bool, isDeepEqual);
+
+export { BoolMemo 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-table/components/columns/code.js

@@ -1,3 +1,11 @@
-/*! 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";function r({value:r}){return e("span",{children:r})}export{r 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';
+
+function Code({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Code 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-table/components/columns/data-dictionary.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{css as o}from"@emotion/react";import{VefError as t,isString as r,isNullish as a}from"@vef-framework/shared";import{useMemo as i}from"react";import l from"../../../vef-text/index.js";import{useComputedValues as m}from"../../hooks/use-computed-values.js";const u="Name";function c({value:c,record:n,rowIndex:s,columnProps:d}){if("DataDictionary"!==d.type)throw new t(-1,"Column type must be DataDictionary");const{name:f,defaultValue:p,ellipsis:w,bold:h,italic:x,color:y,width:V}=d,[b,k,v]=m([{key:"bold",rawValue:h,defaultValue:!1},{key:"italic",rawValue:x,defaultValue:!1},{key:"color",rawValue:y}],c,n,s),$=i((()=>r(v)?v:v?!a(c)&&Object.hasOwn(v,c)?v[c]:v["*"]:void 0),[v,c]),j=i((()=>a(c)||a(n[`${f}${u}`])?p:n[`${f}${u}`]),[c,n,f,p]),D=i((()=>{if(V)return o({maxWidth:`${V}px !important`})}),[V]);return e(l,{bold:b,color:$,css:D,ellipsis:w,italic:k,children:j})}export{c 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 { css } from '@emotion/react';
+import { VefError, isString, isNullish } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+
+const DATA_DICTIONARY_NAME_SUFFIX = "Name";
+function DataDictionary({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "DataDictionary") {
+    throw new VefError(-1, "Column type must be DataDictionary");
+  }
+  const {
+    name,
+    defaultValue,
+    ellipsis,
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = useMemo(() => {
+    if (isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = useMemo(() => {
+    if (isNullish(value) || isNullish(record[`${name}${DATA_DICTIONARY_NAME_SUFFIX}`])) {
+      return defaultValue;
+    }
+    return record[`${name}${DATA_DICTIONARY_NAME_SUFFIX}`];
+  }, [
+    value,
+    record,
+    name,
+    defaultValue
+  ]);
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      ellipsis,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+export { DataDictionary 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 */