@vef-framework/components 1.0.122 → 1.0.124

package/esm/vef-table/components/columns/data-dictionary.js

@@ -0,0 +1,93 @@
+"use strict";
+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';
+
+"use strict";
+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 };

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

@@ -0,0 +1,102 @@
+"use strict";
+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';
+
+"use strict";
+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 };

package/esm/vef-table/components/columns/file.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function File({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { File as default };

package/esm/vef-table/components/columns/icon.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function Icon({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Icon as default };

package/esm/vef-table/components/columns/id.js

@@ -0,0 +1,83 @@
+"use strict";
+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';
+
+"use strict";
+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 };

package/esm/vef-table/components/columns/image.js

@@ -0,0 +1,12 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { extractBaseName } from '@vef-framework/shared';
+
+"use strict";
+function Image({
+  value
+}) {
+  return /* @__PURE__ */ jsx("img", { alt: extractBaseName(value), src: value });
+}
+
+export { Image as default };

package/esm/vef-table/components/columns/index.js

@@ -0,0 +1,34 @@
+"use strict";
+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';
+import './props.js';
+
+"use strict";
+const columnComponents = {
+  Text,
+  Number: NumberColumn,
+  Enum,
+  Boolean: BoolMemo,
+  DataDictionary,
+  Id,
+  Render,
+  Markdown,
+  Icon,
+  File,
+  RichText,
+  Image,
+  Code
+};
+
+export { columnComponents };

package/esm/vef-table/components/columns/markdown.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function Markdown({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { Markdown as default };

package/esm/vef-table/components/columns/number.js

@@ -0,0 +1,84 @@
+"use strict";
+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';
+
+"use strict";
+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 };

package/esm/vef-table/components/columns/props.js

@@ -0,0 +1,2 @@
+"use strict";
+"use strict";

package/esm/vef-table/components/columns/render.js

@@ -0,0 +1,29 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { VefError } from '@vef-framework/shared';
+import { useMemo } from 'react';
+
+"use strict";
+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 };

package/esm/vef-table/components/columns/rich-text.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from '@emotion/react/jsx-runtime';
+
+"use strict";
+function RichText({
+  value
+}) {
+  return /* @__PURE__ */ jsx("span", { children: value });
+}
+
+export { RichText as default };

package/esm/vef-table/components/columns/text.js

@@ -0,0 +1,89 @@
+"use strict";
+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';
+
+"use strict";
+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 };