@hybridcore/ui 1.5.85 → 1.5.87

package/dist/components/card-alternate/index.js

@@ -1,43 +1,43 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Box as t, Skeleton as n, Typography as a } from "@mui/material";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Box as r, Skeleton as t, Typography as l } from "@mui/material";
 import { AlternateCardRoot as b, AlternateCardMenuContainer as v } from "./styled.js";
-const g = ({
-  title: d,
-  subTitle: h,
-  text: l,
-  avatar: s,
-  footer: p,
-  menu: m,
-  extra: x,
+const y = ({
+  title: p,
+  subTitle: d,
+  text: o,
+  avatar: h,
+  footer: c,
+  menu: s,
+  extra: w,
   loading: i,
-  rightMenu: w,
-  onClick: o
+  rightMenu: x,
+  onClick: a
 }) => {
-  const c = () => {
-    o && o();
+  const m = () => {
+    a && a();
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ n(
     b,
     {
       sx: {
         display: "flex"
       },
       children: [
-        /* @__PURE__ */ r(t, { flex: 1, children: [
-          m && /* @__PURE__ */ e(v, { className: "menu-container", children: m }),
-          /* @__PURE__ */ r(t, { display: "flex", alignItems: "center", children: [
-            s && /* @__PURE__ */ e(t, { mr: 2, children: i ? /* @__PURE__ */ e(
-              n,
+        /* @__PURE__ */ n(r, { flex: 1, children: [
+          s && /* @__PURE__ */ e(v, { className: "menu-container", children: s }),
+          /* @__PURE__ */ n(r, { display: "flex", alignItems: "center", children: [
+            h && /* @__PURE__ */ e(r, { mr: 2, children: i ? /* @__PURE__ */ e(
+              t,
               {
                 animation: "wave",
                 variant: "circular",
                 width: 42,
                 height: 42
               }
-            ) : s }),
-            /* @__PURE__ */ r(t, { width: "100%", children: [
+            ) : h }),
+            /* @__PURE__ */ n(r, { width: "100%", sx: { minWidth: 0 }, children: [
               i ? /* @__PURE__ */ e(
-                n,
+                t,
                 {
                   animation: "wave",
                   height: 10,
@@ -45,7 +45,7 @@ const g = ({
                   sx: { mb: 0.25, mt: 0.35 }
                 }
               ) : /* @__PURE__ */ e(
-                a,
+                l,
                 {
                   gutterBottom: !0,
                   variant: "subtitle1",
@@ -57,15 +57,17 @@ const g = ({
                     display: "-webkit-box",
                     WebkitLineClamp: 3,
                     WebkitBoxOrient: "vertical",
-                    cursor: o ? "pointer" : "default",
-                    lineHeight: "22px"
+                    cursor: a ? "pointer" : "default",
+                    lineHeight: "22px",
+                    overflowWrap: "break-word",
+                    wordBreak: "break-word"
                   },
-                  onClick: c,
-                  children: d
+                  onClick: m,
+                  children: p
                 }
               ),
-              h && (i ? /* @__PURE__ */ e(
-                n,
+              d && (i ? /* @__PURE__ */ e(
+                t,
                 {
                   animation: "wave",
                   height: 10,
@@ -73,7 +75,7 @@ const g = ({
                   sx: { mb: 0.25, mt: 0.35 }
                 }
               ) : /* @__PURE__ */ e(
-                a,
+                l,
                 {
                   variant: "caption",
                   component: "p",
@@ -84,17 +86,19 @@ const g = ({
                     display: "-webkit-box",
                     WebkitLineClamp: 4,
                     WebkitBoxOrient: "vertical",
-                    lineHeight: "16px"
+                    lineHeight: "16px",
+                    overflowWrap: "break-word",
+                    wordBreak: "break-word"
                   },
-                  children: h
+                  children: d
                 }
               ))
             ] })
           ] }),
-          i ? /* @__PURE__ */ r(t, { children: [
-            /* @__PURE__ */ e(n, { animation: "wave", height: 10, sx: { mb: 0.5, mt: 0.5 } }),
+          i ? /* @__PURE__ */ n(r, { children: [
+            /* @__PURE__ */ e(t, { animation: "wave", height: 10, sx: { mb: 0.5, mt: 0.5 } }),
             /* @__PURE__ */ e(
-              n,
+              t,
               {
                 animation: "wave",
                 height: 10,
@@ -103,7 +107,7 @@ const g = ({
               }
             )
           ] }) : /* @__PURE__ */ e(
-            a,
+            l,
             {
               variant: "caption",
               component: "p",
@@ -115,29 +119,31 @@ const g = ({
                 WebkitLineClamp: 4,
                 WebkitBoxOrient: "vertical",
                 lineHeight: "16px",
-                cursor: o ? "pointer" : "default",
-                my: 2
+                cursor: a ? "pointer" : "default",
+                my: 2,
+                overflowWrap: "break-word",
+                wordBreak: "break-word"
               },
-              onClick: c,
-              children: /* @__PURE__ */ e("small", { children: typeof l == "string" ? l.length > 350 ? `${l.substring(0, 350)}...` : l : null })
+              onClick: m,
+              children: /* @__PURE__ */ e("small", { children: typeof o == "string" ? o.length > 350 ? `${o.substring(0, 350)}...` : o : null })
             }
           ),
           i ? /* @__PURE__ */ e(
-            n,
+            t,
             {
               animation: "wave",
               height: 10,
               width: "100px",
               sx: { mb: 1, mt: 1 }
             }
-          ) : p,
-          i ? null : x
+          ) : c,
+          i ? null : w
         ] }),
-        /* @__PURE__ */ e(t, { children: w })
+        /* @__PURE__ */ e(r, { children: x })
       ]
     }
   );
 };
 export {
-  g as CardAlternate
+  y as CardAlternate
 };

package/dist/components/card-alternate/styled.js

@@ -1,21 +1,22 @@
-import { styled as a, Card as t, Box as o } from "@mui/material";
-const r = a(t, {
+import { styled as i, Card as t, Box as n } from "@mui/material";
+const r = i(t, {
   name: "SNAlternateCard",
   // The component name
   slot: "root"
   // The slot name
-})(({ theme: i }) => ({
+})(({ theme: a }) => ({
   position: "relative",
   display: "flex",
-  padding: i.spacing(3),
-  gap: i.spacing(2),
+  padding: a.spacing(3),
+  paddingTop: a.spacing(6),
+  gap: a.spacing(2),
   "& .MuiCardMedia-root": {
-    borderRadius: i.shape.borderRadius
+    borderRadius: a.shape.borderRadius
   },
   "& .MuiCardContent-root, & .MuiCardContent-root:last-child": {
     display: "flex",
     flex: 1,
-    gap: i.spacing(3),
+    gap: a.spacing(3),
     padding: 0,
     margin: 0
   },
@@ -23,7 +24,7 @@ const r = a(t, {
     visibility: "visible",
     opacity: 1
   }
-})), e = a(o, {
+})), e = i(n, {
   name: "SNAlternateCard",
   slot: "menuContainer"
 })(() => ({
@@ -31,6 +32,9 @@ const r = a(t, {
   top: 8,
   right: 8,
   display: "flex",
+  flexWrap: "wrap",
+  gap: 8,
+  alignItems: "center",
   visibility: "hidden",
   opacity: 0,
   transition: "0.3s all"

package/dist/components/instance-variable-list/index.js

@@ -1,29 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useMemo as m } from "react";
+import { jsx as m } from "react/jsx-runtime";
 import s from "lodash";
-import n from "./variable.js";
-const c = ({
+import { useMemo as n } from "react";
+import h from "./variable.js";
+const $ = ({
   template: r,
-  data: t
+  data: t,
+  fieldOptions: p
 }) => {
-  const p = m(() => {
+  const a = n(() => {
     let e = /* @__PURE__ */ new Map();
     return r.properties.forEach((o) => {
-      const a = `${r.type}-${r.templateKey}-${o.propertyId}`;
-      e.set(a, o);
+      const i = `${r.type}-${r.templateKey}-${o.propertyId}`;
+      e.set(i, o);
     }), e;
   }, [r]);
-  return s.keys(t.variables).map((e, o) => /* @__PURE__ */ i(
-    n,
+  return s.keys(t.variables).map((e, o) => /* @__PURE__ */ m(
+    h,
     {
       type: e,
       data: s.get(t.variables, e),
-      properties: p,
-      hashPrefix: `${t.template.type}-${t.template.templateKey}-`
+      properties: a,
+      hashPrefix: `${t.template.type}-${t.template.templateKey}-`,
+      fieldOptions: p
     },
     o
   ));
 };
 export {
-  c as InstanceVariableList
+  $ as InstanceVariableList
 };

package/dist/components/instance-variable-list/variable.js

@@ -1,9 +1,9 @@
-import { jsx as n, Fragment as V, jsxs as a } from "react/jsx-runtime";
-import { Box as f } from "@mui/material";
-import Y from "dayjs";
-import x from "lodash";
-import { VariableRoot as j, VariableRow as d, VariableTitle as h, VariableValue as m } from "./styled.js";
-const D = [
+import { jsx as a, Fragment as x, jsxs as m } from "react/jsx-runtime";
+import { Box as i } from "@mui/material";
+import V from "dayjs";
+import Y from "lodash";
+import { VariableRoot as v, VariableRow as g, VariableTitle as h, VariableValue as f } from "./styled.js";
+const T = [
   "string",
   "boolean",
   "date",
@@ -15,44 +15,69 @@ const D = [
   "list",
   "text",
   "composite-list"
-], i = ({ title: r, value: e }) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ n(h, { variant: "subtitle2", children: r }),
-  /* @__PURE__ */ n(m, { variant: "body2", children: e })
-] }), s = ({ title: r, value: e }) => /* @__PURE__ */ n(i, { title: r, value: e }), T = ({ title: r, value: e }) => /* @__PURE__ */ n(i, { title: r, value: e ? "Yes" : "No" }), B = ({ title: r, value: e }) => {
-  const u = Y(e).format("DD/MM/YYYY");
-  return /* @__PURE__ */ n(i, { title: r, value: u });
-}, g = ({ title: r, value: e }) => {
-  const u = (e ?? []).join(", ");
-  return /* @__PURE__ */ n(i, { title: r, value: u });
-}, E = ({ title: r, value: e }) => /* @__PURE__ */ a(d, { children: [
-  /* @__PURE__ */ n(h, { variant: "subtitle2", children: r }),
-  /* @__PURE__ */ n(m, { variant: "body2", children: /* @__PURE__ */ n("a", { href: e, target: "_blank", rel: "noopener noreferrer", children: e }) })
+], b = ({ title: e, value: r }) => /* @__PURE__ */ m(g, { children: [
+  /* @__PURE__ */ a(h, { variant: "subtitle2", children: e }),
+  /* @__PURE__ */ a(f, { variant: "body2", children: r })
+] }), j = ({ title: e, value: r }) => /* @__PURE__ */ a(b, { title: e, value: r }), D = ({ title: e, value: r }) => /* @__PURE__ */ a(b, { title: e, value: r ? "Yes" : "No" }), k = ({ title: e, value: r }) => {
+  const n = V(r).format("DD/MM/YYYY");
+  return /* @__PURE__ */ a(b, { title: e, value: n });
+}, B = ({ title: e, value: r }) => {
+  const n = (r ?? []).join(", ");
+  return /* @__PURE__ */ a(b, { title: e, value: n });
+}, E = ({ title: e, value: r }) => /* @__PURE__ */ m(g, { children: [
+  /* @__PURE__ */ a(h, { variant: "subtitle2", children: e }),
+  /* @__PURE__ */ a(f, { variant: "body2", children: /* @__PURE__ */ a("a", { href: r, target: "_blank", rel: "noopener noreferrer", children: r }) })
 ] });
+function _(e, r, n, t) {
+  if (t != null && t.component) return t.component;
+  if (t != null && t.clickable) return /* @__PURE__ */ a(E, { title: n, value: r });
+  switch (e) {
+    case "string":
+    case "byte":
+    case "double":
+    case "integer":
+    case "long":
+    case "enum":
+    case "text":
+      return /* @__PURE__ */ a(j, { title: n, value: r });
+    case "boolean":
+      return /* @__PURE__ */ a(D, { title: n, value: r });
+    case "date":
+      return /* @__PURE__ */ a(k, { title: n, value: r });
+    case "list":
+    case "composite-list":
+      return /* @__PURE__ */ a(B, { title: n, value: r });
+    default:
+      return null;
+  }
+}
 function R({
-  type: r,
-  data: e,
-  filter: u,
-  properties: c,
-  hashPrefix: v
+  type: e,
+  data: r,
+  filter: n,
+  properties: t,
+  hashPrefix: d,
+  fieldOptions: s
 }) {
-  return r === "geometry" ? /* @__PURE__ */ n(V, {}) : /* @__PURE__ */ n(j, { children: x.keys(e).filter((l) => {
-    const t = c.get(v + l);
-    return t && !t.visible ? !1 : u === void 0 || u === "" || l.includes(u);
-  }).map((l, t) => {
-    const b = c.get(v + l), o = b ? b.name : "";
-    return D.includes(r) ? /* @__PURE__ */ a(f, { mb: 1, className: "variable", children: [
-      r === "string" && l === "url" ? /* @__PURE__ */ n(E, { title: o, value: e[l] }) : r === "string" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "boolean" && /* @__PURE__ */ n(T, { title: o, value: e[l] }),
-      r === "date" && /* @__PURE__ */ n(B, { title: o, value: e[l] }),
-      r === "byte" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "double" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "integer" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "long" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "enum" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "list" && /* @__PURE__ */ n(g, { title: o, value: e[l] }),
-      r === "text" && /* @__PURE__ */ n(s, { title: o, value: e[l] }),
-      r === "composite-list" && /* @__PURE__ */ n(g, { title: o, value: e[l] })
-    ] }, t) : /* @__PURE__ */ n(f, {}, t);
+  return e === "geometry" ? /* @__PURE__ */ a(x, {}) : /* @__PURE__ */ a(v, { children: Y.keys(r).filter((l) => {
+    var o;
+    const u = t.get(d + l);
+    return u && !u.visible || (o = s == null ? void 0 : s[l]) != null && o.hidden ? !1 : n === void 0 || n === "" || l.includes(n);
+  }).map((l, u) => {
+    const o = t.get(d + l), y = o ? o.name : "", c = s == null ? void 0 : s[l];
+    return T.includes(e) ? /* @__PURE__ */ m(
+      i,
+      {
+        mb: 1,
+        className: "variable",
+        ...(c == null ? void 0 : c.order) && { order: c.order },
+        children: [
+          _(e, r[l], y, c),
+          c == null ? void 0 : c.helperText
+        ]
+      },
+      u
+    ) : /* @__PURE__ */ a(i, {}, u);
   }) });
 }
 export {

package/dist/main.d.ts

@@ -283,6 +283,7 @@ declare interface FieldOptions {
     order?: number;
     hidden?: boolean;
     disabled?: boolean;
+    clickable?: boolean;
     minDate?: Dayjs;
     helperText?: React.ReactNode;
     placeholder?: string;
@@ -551,6 +552,9 @@ export declare const InstanceVariableList: FC<InstanceVariableListProps>;
 export declare interface InstanceVariableListProps {
     template: ONTOLOGY.TemplateType;
     data: INSTANCE.InstanceType;
+    fieldOptions?: {
+        [key: string]: FieldOptions;
+    };
 }
 
 declare interface ItemProps {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.85",
+  "version": "1.5.87",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",