@vef-framework/components 1.0.63 → 1.0.64

package/es/vef-table/components/columns/enum.js

@@ -1,3 +1,102 @@
-/*! 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 r,isString as t,isNullish as i}from"@vef-framework/shared";import{useMemo as l}from"react";import a from"../../../vef-tag/index.js";import m from"../../../vef-text/index.js";import{useComputedValues as n}from"../../hooks/use-computed-values.js";const c="Name",s=o({color:"inherit",fontSize:"inherit"});function u({value:u,record:d,rowIndex:f,columnProps:p}){if("Enum"!==p.type)throw new r(-1,"Column type must be Enum");const{name:h,defaultValue:w,showAsTag:x=!0,bold:b,italic:v,ellipsis:V,color:j,width:k}=p,[y,$,g]=n([{key:"bold",rawValue:b,defaultValue:!1},{key:"italic",rawValue:v,defaultValue:!1},{key:"color",rawValue:j}],u,d,f),E=l((()=>t(g)?g:g?!i(u)&&Object.hasOwn(g,u)?g[u]:g["*"]:void 0),[g,u]),O=l((()=>i(u)||i(d[`${h}${c}`])?w:d[`${h}${c}`]),[u,d,h,w]),z=l((()=>{if(k)return o({maxWidth:`${k}px !important`})}),[k]);return x?e(a,{color:E,children:e(m,{bold:y,css:s,italic:$,children:O})}):e(m,{bold:y,color:E,css:z,ellipsis:V,italic:$,children:O})}export{u 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 VefTag from '../../../vef-tag/index.js';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+
+const ENUM_NAME_SUFFIX = "Name";
+const tagTextStyle = css({
+  color: "inherit",
+  fontSize: "inherit"
+});
+function Enum({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Enum") {
+    throw new VefError(-1, "Column type must be Enum");
+  }
+  const {
+    name,
+    defaultValue,
+    showAsTag = true,
+    bold,
+    italic,
+    ellipsis,
+    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}${ENUM_NAME_SUFFIX}`])) {
+      return defaultValue;
+    }
+    return record[`${name}${ENUM_NAME_SUFFIX}`];
+  }, [
+    value,
+    record,
+    name,
+    defaultValue
+  ]);
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (showAsTag) {
+    return /* @__PURE__ */ jsx(VefTag, { color: colorToUse, children: /* @__PURE__ */ jsx(VefText, { bold: boldToUse, css: tagTextStyle, italic: italicToUse, children: valueToDisplay }) });
+  }
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      ellipsis,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+export { Enum 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/file.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 File({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { File 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/icon.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 Icon({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Icon 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/id.js

@@ -1,3 +1,83 @@
-/*! 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 r,isNullish as t}from"@vef-framework/shared";import{useMemo as a}from"react";import l from"../../../vef-text/index.js";import{useComputedValues as i}from"../../hooks/use-computed-values.js";const m=/Id$/;function u({value:u,record:c,rowIndex:n,columnProps:s}){if("Id"!==s.type)throw new r(-1,"Column type must be Id");const{name:d,defaultValue:f,ellipsis:p,bold:w,italic:x,color:h,width:V}=s,[k,y,b]=i([{key:"bold",rawValue:w,defaultValue:!1},{key:"italic",rawValue:x,defaultValue:!1},{key:"color",rawValue:h}],u,c,n),v=a((()=>{const e=d.replace(m,"Name");return t(u)||t(c[e])?f:c[e]}),[u,c,d,f]),I=a((()=>{if(V)return o({maxWidth:`${V}px !important`})}),[V]);return e(l,{bold:k,color:b,css:I,ellipsis:p,italic:y,children:v})}export{u 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, 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 ID_NAME_SUFFIX = "Name";
+const ID_NAME_REPLACE_REGEX = /Id$/;
+function Id({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Id") {
+    throw new VefError(-1, "Column type must be Id");
+  }
+  const {
+    name,
+    defaultValue,
+    ellipsis,
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorToUse] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const valueToDisplay = useMemo(() => {
+    const nameToUse = name.replace(ID_NAME_REPLACE_REGEX, ID_NAME_SUFFIX);
+    if (isNullish(value) || isNullish(record[nameToUse])) {
+      return defaultValue;
+    }
+    return record[nameToUse];
+  }, [
+    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 { Id 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/image.js

@@ -1,3 +1,12 @@
-/*! 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{extractBaseName as e}from"@vef-framework/shared";function t({value:t}){return r("img",{alt:e(t),src:t})}export{t 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 { extractBaseName } from '@vef-framework/shared';
+
+function Image({
+  value
+}) {
+  return /* @__PURE__ */ jsx("img", { alt: extractBaseName(value), src: value });
+}
+
+export { Image 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/index.js

@@ -1,3 +1,34 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import o from"./bool.js";import r from"./code.js";import m from"./data-dictionary.js";import t from"./enum.js";import i from"./file.js";import e from"./icon.js";import p from"./id.js";import s from"./image.js";import f from"./markdown.js";import j from"./number.js";import n from"./render.js";import a from"./rich-text.js";import d from"./text.js";const c={Text:d,Number:j,Enum:t,Boolean:o,DataDictionary:m,Id:p,Render:n,Markdown:f,Icon:e,File:i,RichText:a,Image:s,Code:r};export{c as columnComponents};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+import BoolMemo from './bool.js';
+import Code from './code.js';
+import DataDictionary from './data-dictionary.js';
+import Enum from './enum.js';
+import File from './file.js';
+import Icon from './icon.js';
+import Id from './id.js';
+import Image from './image.js';
+import Markdown from './markdown.js';
+import NumberColumn from './number.js';
+import Render from './render.js';
+import RichText from './rich-text.js';
+import Text from './text.js';
+
+
+const columnComponents = {
+  Text,
+  Number: NumberColumn,
+  Enum,
+  Boolean: BoolMemo,
+  DataDictionary,
+  Id,
+  Render,
+  Markdown,
+  Icon,
+  File,
+  RichText,
+  Image,
+  Code
+};
+
+export { columnComponents };
 /*! 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/markdown.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 Markdown({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Markdown 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/number.js

@@ -1,3 +1,84 @@
-/*! VefFramework version: 1.0.63, build time: 2025-01-09T12:00:00.992Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{css as r}from"@emotion/react";import{VefError as o,isNullish as t}from"@vef-framework/shared";import{useMemo as a}from"react";import l from"../../../vef-text/index.js";import{useComputedValues as u}from"../../hooks/use-computed-values.js";import{useDisplayValue as i}from"../../hooks/use-display-value.js";function m({value:m,record:f,rowIndex:s,columnProps:d}){if("Number"!==d.type)throw new o(-1,"Column type must be Number");const{defaultValue:p,formatter:c,prefix:n,suffix:x,bold:w,italic:h,color:V,width:b}=d,k=i(m,f,s,{defaultValue:p,formatter:c,prefix:n,suffix:x}),[y,v,j]=u([{key:"bold",rawValue:w,defaultValue:!1},{key:"italic",rawValue:h,defaultValue:!1},{key:"color",rawValue:V}],m,f,s),N=a((()=>{if(b)return r({maxWidth:`${b}px !important`})}),[b]);return t(k)?null:e(l,{bold:y,color:j,css:N,italic:v,children:k})}export{m 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, isNullish } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useDisplayValue } from '../../hooks/use-display-value.js';
+
+function NumberColumn({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Number") {
+    throw new VefError(-1, "Column type must be Number");
+  }
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix,
+    bold,
+    italic,
+    color,
+    width
+  } = columnProps;
+  const displayValue = useDisplayValue(
+    value,
+    record,
+    rowIndex,
+    {
+      defaultValue,
+      formatter,
+      prefix,
+      suffix
+    }
+  );
+  const [boldToUse, italicToUse, colorToUse] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (isNullish(displayValue)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      css: cssToUse,
+      italic: italicToUse,
+      children: displayValue
+    }
+  );
+}
+
+export { NumberColumn 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/render.js

@@ -1,3 +1,29 @@
-/*! 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{css as e}from"@emotion/react";import{VefError as t}from"@vef-framework/shared";import{useMemo as o}from"react";function m({value:m,record:n,rowIndex:i,columnProps:d}){if("Render"!==d.type)throw new t(-1,"Column type must be Render");const{render:a,width:f}=d,p=a?.(m,n,i),c=o((()=>{if(f)return e({maxWidth:`${f}px !important`})}),[f]);return r("div",{css:c,children:p})}export{m 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 } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+function Render({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Render") {
+    throw new VefError(-1, "Column type must be Render");
+  }
+  const { render, width } = columnProps;
+  const content = render?.(value, record, rowIndex);
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  return /* @__PURE__ */ jsx("div", { css: cssToUse, children: content });
+}
+
+export { Render 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/rich-text.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 RichText({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { RichText 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/text.js

@@ -1,3 +1,89 @@
-/*! 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 r,isNullish as t}from"@vef-framework/shared";import{useMemo as l}from"react";import i from"../../../vef-text/index.js";import{useComputedValues as a}from"../../hooks/use-computed-values.js";import{useDisplayValue as u}from"../../hooks/use-display-value.js";function f({value:f,record:m,rowIndex:s,columnProps:p}){if("Text"!==p.type)throw new r(-1,"Column type must be Text");const{defaultValue:c,formatter:d,prefix:n,suffix:x,ellipsis:w,bold:y,italic:h,color:V,copyable:b,width:k}=p,[v,j,T]=a([{key:"bold",rawValue:y,defaultValue:!1},{key:"italic",rawValue:h,defaultValue:!1},{key:"color",rawValue:V}],f,m,s),C=u(f,m,s,{defaultValue:c,formatter:d,prefix:n,suffix:x}),I=l((()=>{if(k)return o({maxWidth:`${k}px !important`})}),[k]);return t(C)?null:e(i,{bold:v,color:T,copyable:b,css:I,ellipsis:w,ellipsisTip:w?C:void 0,italic:j,children:C})}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 { css } from '@emotion/react';
+import { VefError, isNullish } from '@vef-framework/shared';
+import { useMemo } from 'react';
+import VefText from '../../../vef-text/index.js';
+import { useComputedValues } from '../../hooks/use-computed-values.js';
+import { useDisplayValue } from '../../hooks/use-display-value.js';
+
+function Text({
+  value,
+  record,
+  rowIndex,
+  columnProps
+}) {
+  if (columnProps.type !== "Text") {
+    throw new VefError(-1, "Column type must be Text");
+  }
+  const {
+    defaultValue,
+    formatter,
+    prefix,
+    suffix,
+    ellipsis,
+    bold,
+    italic,
+    color,
+    copyable,
+    width
+  } = columnProps;
+  const [boldToUse, italicToUse, colorToUse] = useComputedValues(
+    [
+      {
+        key: "bold",
+        rawValue: bold,
+        defaultValue: false
+      },
+      {
+        key: "italic",
+        rawValue: italic,
+        defaultValue: false
+      },
+      {
+        key: "color",
+        rawValue: color
+      }
+    ],
+    value,
+    record,
+    rowIndex
+  );
+  const valueToDisplay = useDisplayValue(
+    value,
+    record,
+    rowIndex,
+    {
+      defaultValue,
+      formatter,
+      prefix,
+      suffix
+    }
+  );
+  const cssToUse = useMemo(() => {
+    if (width) {
+      return css({
+        maxWidth: `${width}px !important`
+      });
+    }
+  }, [width]);
+  if (isNullish(valueToDisplay)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    VefText,
+    {
+      bold: boldToUse,
+      color: colorToUse,
+      copyable,
+      css: cssToUse,
+      ellipsis,
+      ellipsisTip: ellipsis ? valueToDisplay : void 0,
+      italic: italicToUse,
+      children: valueToDisplay
+    }
+  );
+}
+
+export { Text 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 */