@vef-framework/components 1.0.98 → 1.0.99

package/lib/vef-sortable-list/index.cjs

@@ -1,3 +1,119 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@dnd-kit/core"),r=require("@dnd-kit/modifiers"),s=require("@dnd-kit/sortable"),i=require("@vef-framework/shared"),a=require("react"),n=require("./components/overlay-item.cjs"),o=require("./components/sortable-item.cjs"),l=require("./hooks/use-merged-items.cjs");const d=a.memo((function VefSortableListBase({defaultItems:d,items:c,itemKey:m="id",className:u,style:g,orientation:y="vertical",useOverlay:S=!0,restrictStrategy:v="parent",onChange:x,...f}){const[p,j]=l.useMergedItems(d,c,x),b=t.useSensors(t.useSensor(t.PointerSensor)),q=a.useMemo((()=>i.isFunction(m)?m:e=>e[m]),[m]),[h,k]=a.useState(),C=a.useCallback((({active:e})=>{k(p[e.data.current.index])}),[p]),E=a.useCallback((({active:e,over:t})=>{t&&e.id!==t.id&&j((r=>s.arrayMove(r,e.data.current.index,t.data.current.index)))}),[j]),D=p.map((e=>q(e))),{itemClassName:M,itemStyle:N,disabled:T,...w}=f;return e.jsx(t.DndContext,{collisionDetection:t.closestCenter,sensors:b,modifiers:["parent"===v?r.restrictToParentElement:r.restrictToWindowEdges],onDragEnd:E,onDragStart:C,children:e.jsx(s.SortableContext,{items:D,strategy:"vertical"===y?s.verticalListSortingStrategy:s.horizontalListSortingStrategy,children:e.jsxs("div",{className:u,style:g,children:[p.map(((t,r)=>{const s=q(t);return e.jsx(o.default,{item:t,itemIndex:r,itemKey:s,...f},s)})),S&&e.jsx(t.DragOverlay,{className:M,style:N,wrapperElement:"div",modifiers:["parent"===v?r.restrictToParentElement:r.restrictToWindowEdges],children:h&&e.jsx(n.default,{item:h,...w})})]})})})}));d.displayName="VefSortableList",exports.default=d;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const core = require('@dnd-kit/core');
+const modifiers = require('@dnd-kit/modifiers');
+const sortable = require('@dnd-kit/sortable');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const overlayItem = require('./components/overlay-item.cjs');
+const sortableItem = require('./components/sortable-item.cjs');
+const useMergedItems = require('./hooks/use-merged-items.cjs');
+
+const defaultItemKey = "id";
+function VefSortableListBase({
+  defaultItems,
+  items,
+  itemKey = defaultItemKey,
+  className,
+  style,
+  orientation = "vertical",
+  useOverlay = true,
+  restrictStrategy = "parent",
+  onChange,
+  ...restProps
+}) {
+  const [mergedItems, mergedOnChange] = useMergedItems.useMergedItems(defaultItems, items, onChange);
+  const sensors = core.useSensors(core.useSensor(core.PointerSensor));
+  const itemKeyFn = react.useMemo(() => {
+    if (shared.isFunction(itemKey)) {
+      return itemKey;
+    }
+    return (item) => item[itemKey];
+  }, [itemKey]);
+  const [activeItem, setActiveItem] = react.useState();
+  const handleDragStart = react.useCallback(({ active }) => {
+    setActiveItem(mergedItems[active.data.current.index]);
+  }, [mergedItems]);
+  const handleDragEnd = react.useCallback(({ active, over }) => {
+    if (!over) {
+      return;
+    }
+    if (active.id !== over.id) {
+      mergedOnChange(
+        (items2) => sortable.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__ */ jsxRuntime.jsx(
+    core.DndContext,
+    {
+      collisionDetection: core.closestCenter,
+      sensors,
+      modifiers: [
+        restrictStrategy === "parent" ? modifiers.restrictToParentElement : modifiers.restrictToWindowEdges
+      ],
+      onDragEnd: handleDragEnd,
+      onDragStart: handleDragStart,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        sortable.SortableContext,
+        {
+          items: itemKeys,
+          strategy: orientation === "vertical" ? sortable.verticalListSortingStrategy : sortable.horizontalListSortingStrategy,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, children: [
+            mergedItems.map((item, index) => {
+              const key = itemKeyFn(item);
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                sortableItem.default,
+                {
+                  item,
+                  itemIndex: index,
+                  itemKey: key,
+                  ...restProps
+                },
+                key
+              );
+            }),
+            useOverlay && /* @__PURE__ */ jsxRuntime.jsx(
+              core.DragOverlay,
+              {
+                className: itemClassName,
+                style: itemStyle,
+                wrapperElement: "div",
+                modifiers: [
+                  restrictStrategy === "parent" ? modifiers.restrictToParentElement : modifiers.restrictToWindowEdges
+                ],
+                children: activeItem && /* @__PURE__ */ jsxRuntime.jsx(
+                  overlayItem.default,
+                  {
+                    item: activeItem,
+                    ...overlayItemProps
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      )
+    }
+  );
+}
+const VefSortableList = react.memo(VefSortableListBase);
+VefSortableList.displayName = "VefSortableList";
+
+exports.default = VefSortableList;
 /*! 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/lib/vef-sortable-list/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-space/index.cjs

@@ -1,3 +1,30 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@vef-framework/hooks"),o=require("@vef-framework/shared"),t=require("antd"),a=require("react");exports.default=function VefSpace({gap:i,...s}){const u=r.useGapSizeNormalizer(),n=a.useMemo((()=>o.isArray(i)?i.map((e=>u(e))):i?u(i):i),[i,u]);return e.jsx(t.Space,{size:n,...s})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react = require('react');
+
+function VefSpace({
+  gap,
+  ...restProps
+}) {
+  const normalizeGapSize = hooks.useGapSizeNormalizer();
+  const size = react.useMemo(() => {
+    if (shared.isArray(gap)) {
+      return gap.map((it) => normalizeGapSize(it));
+    }
+    if (gap) {
+      return normalizeGapSize(gap);
+    }
+    return gap;
+  }, [gap, normalizeGapSize]);
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Space, { size, ...restProps });
+}
+
+exports.default = VefSpace;
 /*! 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/lib/vef-space/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-spin/index.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd");exports.default=function VefSpin({size:i,...r}){return e.jsx(t.Spin,{size:"medium"===i?"default":i,...r})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+function VefSpin({
+  size,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(antd.Spin, { size: size === "medium" ? "default" : size, ...restProps });
+}
+
+exports.default = VefSpin;
 /*! 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/lib/vef-spin/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-splitter/index.cjs

@@ -1,3 +1,25 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd");exports.default=function VefSplitter({orientation:r,onResizeBegin:i,...o}){return e.jsx(t.Splitter,{layout:r,onResizeStart:i,...o})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+function VefSplitter({
+  orientation,
+  onResizeBegin,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    antd.Splitter,
+    {
+      layout: orientation,
+      onResizeStart: onResizeBegin,
+      ...rest
+    }
+  );
+}
+
+exports.default = VefSplitter;
 /*! 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/lib/vef-splitter/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-splitter-panel/index.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("antd"),{Panel:r}=t.Splitter;exports.default=function VefSplitterPanel({...t}){return e.jsx(r,{...t})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const antd = require('antd');
+
+const { Panel } = antd.Splitter;
+function VefSplitterPanel({
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Panel, { ...rest });
+}
+
+exports.default = VefSplitterPanel;
 /*! 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/lib/vef-splitter-panel/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-status/index.cjs

@@ -1,3 +1,42 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@vef-framework/hooks"),r=require("antd"),o=require("react");exports.default=function VefStatus({processing:u=!1,color:s="default",children:a}){const l=t.useColorTokens(),n=o.useMemo((()=>{if("default"===s)return{status:"default",text:a};if(l.has(s))return{status:u?"processing":"default",color:l.get(s),text:a};throw new Error(`Invalid color value "${s}" of VefStatus component. Color must be either "default" or a valid color token.`)}),[s,l,u,a]);return e.jsx(r.Badge,{...n})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const hooks = require('@vef-framework/hooks');
+const antd = require('antd');
+const react = require('react');
+
+function VefStatus({
+  processing = false,
+  color = "default",
+  children
+}) {
+  const colorTokens = hooks.useColorTokens();
+  const badgeProps = react.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__ */ jsxRuntime.jsx(antd.Badge, { ...badgeProps });
+}
+
+exports.default = VefStatus;
 /*! 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/lib/vef-status/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+
 /*! 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/lib/vef-table/components/columns/bool.cjs

@@ -1,3 +1,96 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),o=require("@emotion/react"),r=require("@vef-framework/shared"),t=require("react"),u=require("../../../vef-text/index.cjs"),l=require("../../hooks/use-computed-values.cjs");const a=t.memo((function Bool({value:a,record:s,rowIndex:i,columnProps:c}){if("Boolean"!==c.type)throw new r.VefError(-1,"Column type must be Boolean");const{defaultValue:n,trueText:d="是",falseText:m="否",bold:f,italic:p,color:x,width:w}=c,[h,V,b]=l.useComputedValues([{key:"bold",rawValue:f,defaultValue:!1},{key:"italic",rawValue:p,defaultValue:!1},{key:"color",rawValue:x}],a,s,i),q=t.useMemo((()=>r.isString(b)?b:b?!r.isNullish(a)&&Object.hasOwn(b,a)?b[a]:b["*"]:void 0),[b,a]),v=t.useMemo((()=>a?a?d:m:n),[a,d,m,n]),j=t.useMemo((()=>{if(w)return o.css({maxWidth:`${w}px !important`})}),[w]);return e.jsx(u.default,{bold:h,color:q,css:j,italic:V,children:v})}),r.isDeepEqual);exports.default=a;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react$1 = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../../../vef-text/index.cjs');
+const useComputedValues = require('../../hooks/use-computed-values.cjs');
+
+function Bool({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Boolean") {
+    throw new shared.VefError(-1, "Column type must be Boolean");
+  }
+  const {
+    defaultValue,
+    trueText = "\u662F",
+    falseText = "\u5426",
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues.useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = react.useMemo(() => {
+    if (shared.isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!shared.isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = react.useMemo(() => {
+    if (value) {
+      return value ? trueText : falseText;
+    }
+    return defaultValue;
+  }, [
+    value,
+    trueText,
+    falseText,
+    defaultValue
+  ]);
+  const cssToUse = react.useMemo(() => {
+    if (width) {
+      return react$1.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+const BoolMemo = react.memo(Bool, shared.isDeepEqual);
+
+exports.default = BoolMemo;
 /*! 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/lib/vef-table/components/columns/code.cjs

@@ -1,3 +1,15 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime");exports.default=function Code({value:t}){return e.jsx("span",{children:t})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+
+function Code({
+  value
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: value });
+}
+
+exports.default = Code;
 /*! 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/lib/vef-table/components/columns/data-dictionary.cjs

@@ -1,3 +1,97 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("@vef-framework/shared"),i=require("react"),o=require("../../../vef-text/index.cjs"),a=require("../../hooks/use-computed-values.cjs"),u="Name";exports.default=function DataDictionary({value:l,record:s,rowIndex:c,columnProps:n}){if("DataDictionary"!==n.type)throw new t.VefError(-1,"Column type must be DataDictionary");const{name:d,defaultValue:m,ellipsis:f,bold:p,italic:h,color:w,width:x}=n,[y,V,b]=a.useComputedValues([{key:"bold",rawValue:p,defaultValue:!1},{key:"italic",rawValue:h,defaultValue:!1},{key:"color",rawValue:w}],l,s,c),v=i.useMemo((()=>t.isString(b)?b:b?!t.isNullish(l)&&Object.hasOwn(b,l)?b[l]:b["*"]:void 0),[b,l]),j=i.useMemo((()=>t.isNullish(l)||t.isNullish(s[`${d}${u}`])?m:s[`${d}${u}`]),[l,s,d,m]),q=i.useMemo((()=>{if(x)return r.css({maxWidth:`${x}px !important`})}),[x]);return e.jsx(o.default,{bold:y,color:v,css:q,ellipsis:f,italic:V,children:j})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react$1 = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react = require('react');
+const index = require('../../../vef-text/index.cjs');
+const useComputedValues = require('../../hooks/use-computed-values.cjs');
+
+const DATA_DICTIONARY_NAME_SUFFIX = "Name";
+function DataDictionary({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "DataDictionary") {
+    throw new shared.VefError(-1, "Column type must be DataDictionary");
+  }
+  const {
+    name,
+    defaultValue,
+    ellipsis,
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues.useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = react.useMemo(() => {
+    if (shared.isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!shared.isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = react.useMemo(() => {
+    if (shared.isNullish(value) || shared.isNullish(record[`${name}${DATA_DICTIONARY_NAME_SUFFIX}`])) {
+      return defaultValue;
+    }
+    return record[`${name}${DATA_DICTIONARY_NAME_SUFFIX}`];
+  }, [
+    value,
+    record,
+    name,
+    defaultValue
+  ]);
+  const cssToUse = react.useMemo(() => {
+    if (width) {
+      return react$1.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      ellipsis,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+exports.default = DataDictionary;
 /*! 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/lib/vef-table/components/columns/enum.cjs

@@ -1,3 +1,106 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),i=require("@vef-framework/shared"),l=require("react"),s=require("../../../vef-tag/index.cjs"),t=require("../../../vef-text/index.cjs"),u=require("../../hooks/use-computed-values.cjs"),o="Name",a=r.css({color:"inherit",fontSize:"inherit"});exports.default=function Enum({value:c,record:n,rowIndex:d,columnProps:m}){if("Enum"!==m.type)throw new i.VefError(-1,"Column type must be Enum");const{name:f,defaultValue:h,showAsTag:p=!0,bold:x,italic:w,ellipsis:j,color:b,width:v}=m,[V,q,y]=u.useComputedValues([{key:"bold",rawValue:x,defaultValue:!1},{key:"italic",rawValue:w,defaultValue:!1},{key:"color",rawValue:b}],c,n,d),g=l.useMemo((()=>i.isString(y)?y:y?!i.isNullish(c)&&Object.hasOwn(y,c)?y[c]:y["*"]:void 0),[y,c]),k=l.useMemo((()=>i.isNullish(c)||i.isNullish(n[`${f}${o}`])?h:n[`${f}${o}`]),[c,n,f,h]),M=l.useMemo((()=>{if(v)return r.css({maxWidth:`${v}px !important`})}),[v]);return p?e.jsx(s.default,{color:g,children:e.jsx(t.default,{bold:V,css:a,italic:q,children:k})}):e.jsx(t.default,{bold:V,color:g,css:M,ellipsis:j,italic:q,children:k})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react$1 = require('react');
+const index = require('../../../vef-tag/index.cjs');
+const index$1 = require('../../../vef-text/index.cjs');
+const useComputedValues = require('../../hooks/use-computed-values.cjs');
+
+const ENUM_NAME_SUFFIX = "Name";
+const tagTextStyle = react.css({
+  color: "inherit",
+  fontSize: "inherit"
+});
+function Enum({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Enum") {
+    throw new shared.VefError(-1, "Column type must be Enum");
+  }
+  const {
+    name,
+    defaultValue,
+    showAsTag = true,
+    bold,
+    italic,
+    ellipsis,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorOrMapping] = useComputedValues.useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const colorToUse = react$1.useMemo(() => {
+    if (shared.isString(colorOrMapping)) {
+      return colorOrMapping;
+    }
+    if (colorOrMapping) {
+      if (!shared.isNullish(value) && Object.hasOwn(colorOrMapping, value)) {
+        return colorOrMapping[value];
+      } else {
+        return colorOrMapping["*"];
+      }
+    }
+  }, [colorOrMapping, value]);
+  const valueToDisplay = react$1.useMemo(() => {
+    if (shared.isNullish(value) || shared.isNullish(record[`${name}${ENUM_NAME_SUFFIX}`])) {
+      return defaultValue;
+    }
+    return record[`${name}${ENUM_NAME_SUFFIX}`];
+  }, [
+    value,
+    record,
+    name,
+    defaultValue
+  ]);
+  const cssToUse = react$1.useMemo(() => {
+    if (width) {
+      return react.css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (showAsTag) {
+    return /* @__PURE__ */ jsxRuntime.jsx(index.default, { color: colorToUse, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { bold: boldToUse, css: tagTextStyle, italic: italicToUse, children: valueToDisplay }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      ellipsis,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+exports.default = Enum;
 /*! 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 */