@hybridcore/ui 1.5.83 → 1.5.86

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,8 +1,8 @@
-import { jsx as o, Fragment as m, jsxs as g } from "react/jsx-runtime";
-import { Box as b } from "@mui/material";
-import V from "lodash";
-import Y from "dayjs";
-import { VariableRoot as x, VariableRow as d, VariableTitle as j, VariableValue as D } from "./styled.js";
+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",
@@ -15,43 +15,71 @@ const T = [
   "list",
   "text",
   "composite-list"
-], i = ({ title: r, value: e }) => /* @__PURE__ */ g(d, { children: [
-  /* @__PURE__ */ o(j, { variant: "subtitle2", children: r }),
-  /* @__PURE__ */ o(D, { variant: "body2", children: e })
-] }), s = ({ title: r, value: e }) => /* @__PURE__ */ o(i, { title: r, value: e }), h = ({ title: r, value: e }) => /* @__PURE__ */ o(i, { title: r, value: e ? "Yes" : "No" }), B = ({ title: r, value: e }) => {
-  const u = Y(e).format("DD/MM/YYYY");
-  return /* @__PURE__ */ o(i, { title: r, value: u });
-}, f = ({ title: r, value: e }) => {
-  const u = (e ?? []).join(", ");
-  return /* @__PURE__ */ o(i, { title: r, value: u });
-};
-function _({
-  type: r,
-  data: e,
-  filter: u,
-  properties: a,
-  hashPrefix: c
+], 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: e,
+  data: r,
+  filter: n,
+  properties: t,
+  hashPrefix: d,
+  fieldOptions: s
 }) {
-  return r === "geometry" ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(x, { children: V.keys(e).filter((l) => {
-    const t = a.get(c + l);
-    return t && !t.visible ? !1 : u === void 0 || u === "" || l.includes(u);
-  }).map((l, t) => {
-    const v = a.get(c + l), n = v ? v.name : "";
-    return T.includes(r) ? /* @__PURE__ */ g(b, { mb: 1, className: "variable", children: [
-      r === "string" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "boolean" && /* @__PURE__ */ o(h, { title: n, value: e[l] }),
-      r === "date" && /* @__PURE__ */ o(B, { title: n, value: e[l] }),
-      r === "byte" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "double" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "integer" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "long" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "enum" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "list" && /* @__PURE__ */ o(f, { title: n, value: e[l] }),
-      r === "text" && /* @__PURE__ */ o(s, { title: n, value: e[l] }),
-      r === "composite-list" && /* @__PURE__ */ o(f, { title: n, value: e[l] })
-    ] }, t) : /* @__PURE__ */ o(b, {}, 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 {
-  _ as default
+  R as default
 };

package/dist/components/template-property-filters/property.js

@@ -1,19 +1,19 @@
-import { jsxs as m, jsx as t, Fragment as T } from "react/jsx-runtime";
-import { useState as Y } from "react";
-import u from "dayjs";
-import { KeyboardArrowUp as z, KeyboardArrowDown as L } from "@mui/icons-material";
-import { Typography as f, FormLabel as P, FormGroup as D, Button as W } from "@mui/material";
+import { jsxs as m, jsx as t, Fragment as P } from "react/jsx-runtime";
+import { useState as T } from "react";
+import { KeyboardArrowUp as k, KeyboardArrowDown as w } from "@mui/icons-material";
+import { Typography as c, FormLabel as Y, FormGroup as D, Button as W } from "@mui/material";
 import { DatePicker as C } from "@mui/x-date-pickers";
-import { B as d } from "../../Box-B1AVyJ_s.js";
+import f from "dayjs";
+import { B as r } from "../../Box-B1AVyJ_s.js";
 import { T as b } from "../../TextField-Bf46COnQ.js";
 import { F as O } from "../../FormControlLabel-DzNokgFD.js";
-import { C as k } from "../../Checkbox-CrU2hpWB.js";
+import { C as z } from "../../Checkbox-CrU2hpWB.js";
 import { F as B } from "../../InputLabel-rrSJo8M_.js";
 const R = ({
   property: e,
   value: a,
-  size: r = "medium",
-  variant: c,
+  size: d = "medium",
+  variant: u,
   onChange: p
 }) => {
   var I, S, y, V, M;
@@ -23,31 +23,31 @@ const R = ({
     o[l] = String(i), p({
       [n.target.name]: o
     });
-  }, w = (l) => {
+  }, F = (l) => {
     var x;
     const n = { ...a }, { value: o, checked: i, name: s } = l.target;
     i ? (n.atLeastOneOf || (n.atLeastOneOf = []), n.atLeastOneOf.push(o)) : n.atLeastOneOf = (x = n.atLeastOneOf) == null ? void 0 : x.filter(
-      (F) => F !== o
+      (L) => L !== o
     ), p({
       [s]: n
     });
   }, g = (l) => (n) => {
     let o = { ...a };
-    o[l] = u(n).format("YYYY-MM-DD"), p({
+    o[l] = f(n).format("YYYY-MM-DD"), p({
       [e.propertyId]: o
     });
   };
   if (["string", "text", "list"].includes(e.type))
-    return /* @__PURE__ */ m(d, { mb: 1, children: [
-      /* @__PURE__ */ t(f, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
+    return /* @__PURE__ */ m(r, { mb: 1, children: [
+      /* @__PURE__ */ t(c, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
       /* @__PURE__ */ t(
         b,
         {
           name: e.propertyId,
           value: a.exact ?? e.defaultValue ?? "",
-          size: r,
+          size: d,
           onChange: h("exact"),
-          variant: c,
+          variant: u,
           type: "text",
           multiline: e.type === "text",
           disabled: !e.editable,
@@ -59,17 +59,17 @@ const R = ({
       )
     ] });
   if (["integer", "double", "long", "byte"].includes(e.type))
-    return /* @__PURE__ */ m(d, { mb: 1, children: [
-      /* @__PURE__ */ t(f, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
-      /* @__PURE__ */ m(d, { display: "flex", alignItems: "center", mb: 2, children: [
+    return /* @__PURE__ */ m(r, { mb: 1, children: [
+      /* @__PURE__ */ t(c, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
+      /* @__PURE__ */ m(r, { display: "flex", alignItems: "center", mb: 2, children: [
         /* @__PURE__ */ t(
           b,
           {
             name: e.propertyId,
             value: a.min ?? e.defaultValue ?? "",
-            size: r,
+            size: d,
             onChange: h("min"),
-            variant: c,
+            variant: u,
             type: "number",
             disabled: !e.editable,
             fullWidth: !0,
@@ -79,15 +79,15 @@ const R = ({
             }
           }
         ),
-        /* @__PURE__ */ t(f, { px: 1, children: "-" }),
+        /* @__PURE__ */ t(c, { px: 1, children: "-" }),
         /* @__PURE__ */ t(
           b,
           {
             name: e.propertyId,
             value: a.max ?? e.defaultValue ?? "",
-            size: r,
+            size: d,
             onChange: h("max"),
-            variant: c,
+            variant: u,
             type: "number",
             disabled: !e.editable,
             fullWidth: !0,
@@ -100,23 +100,25 @@ const R = ({
       ] })
     ] });
   if (e.type === "date") {
-    const l = "DD/MM/YYYY", n = "YYYY-MM-DD", o = a.min && u(a.min, n, !0).isValid() ? u(a.min, n) : null, i = a.max && u(a.max, n, !0).isValid() ? u(a.max, n) : null;
-    return /* @__PURE__ */ m(d, { mb: 1, children: [
-      /* @__PURE__ */ t(f, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
-      /* @__PURE__ */ m(d, { display: "flex", alignItems: "center", children: [
+    const l = "DD/MM/YYYY", n = "YYYY-MM-DD", o = a.min && f(a.min, n, !0).isValid() ? f(a.min, n) : null, i = a.max && f(a.max, n, !0).isValid() ? f(a.max, n) : null;
+    return /* @__PURE__ */ m(r, { mb: 1, children: [
+      /* @__PURE__ */ t(c, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
+      /* @__PURE__ */ m(r, { display: "flex", alignItems: "center", children: [
         /* @__PURE__ */ t(
           C,
           {
+            label: "From",
             value: o,
             format: l,
             views: ["year", "month", "day"],
             slotProps: {
               textField: {
-                variant: c,
+                variant: u,
                 name: e.propertyId,
-                size: r,
+                size: d,
                 fullWidth: !0,
-                inputProps: { sx: { fontSize: 12 } }
+                inputProps: { sx: { fontSize: 12 } },
+                InputLabelProps: { sx: { fontSize: 12 } }
               },
               inputAdornment: {
                 sx: {
@@ -129,21 +131,23 @@ const R = ({
             onChange: g("min")
           }
         ),
-        /* @__PURE__ */ t(f, { px: 1, children: "-" }),
+        /* @__PURE__ */ t(c, { px: 1, children: "-" }),
         /* @__PURE__ */ t(
           C,
           {
+            label: "To",
             value: i,
             format: l,
             minDate: o !== null ? o : void 0,
             views: ["year", "month", "day"],
             slotProps: {
               textField: {
-                variant: c,
+                variant: u,
                 name: e.propertyId,
-                size: r,
+                size: d,
                 fullWidth: !0,
-                inputProps: { sx: { fontSize: 12 } }
+                inputProps: { sx: { fontSize: 12 } },
+                InputLabelProps: { sx: { fontSize: 12 } }
               },
               inputAdornment: {
                 sx: {
@@ -160,14 +164,14 @@ const R = ({
     ] });
   }
   if (e.type === "boolean")
-    return /* @__PURE__ */ t(d, { mb: 1, children: /* @__PURE__ */ t(
+    return /* @__PURE__ */ t(r, { mb: 1, children: /* @__PURE__ */ t(
       O,
       {
         label: e.name,
         control: /* @__PURE__ */ t(
-          k,
+          z,
           {
-            size: r,
+            size: d,
             name: e.propertyId,
             checked: !!a,
             onChange: h("exact")
@@ -181,23 +185,23 @@ const R = ({
       }
     ) });
   if (e.type === "enum" || e.type === "composite-list" && ((S = (I = e.dataTypeInfo) == null ? void 0 : I.innerType) == null ? void 0 : S.type) === "enum") {
-    const [l, n] = Y(!1), o = 10;
+    const [l, n] = T(!1), o = 10;
     let i = [];
-    return (y = e.dataTypeInfo) != null && y.enumValues && (i = e.dataTypeInfo.enumValues), (M = (V = e.dataTypeInfo) == null ? void 0 : V.innerType) != null && M.enumValues && (i = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ m(d, { mb: 1, children: [
-      /* @__PURE__ */ m(B, { fullWidth: !0, component: "fieldset", variant: c, children: [
-        /* @__PURE__ */ t(P, { component: "legend", sx: { mb: 1, fontSize: 12 }, children: e.name }),
+    return (y = e.dataTypeInfo) != null && y.enumValues && (i = e.dataTypeInfo.enumValues), (M = (V = e.dataTypeInfo) == null ? void 0 : V.innerType) != null && M.enumValues && (i = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ m(r, { mb: 1, children: [
+      /* @__PURE__ */ m(B, { fullWidth: !0, component: "fieldset", variant: u, children: [
+        /* @__PURE__ */ t(Y, { component: "legend", sx: { mb: 1, fontSize: 12 }, children: e.name }),
         /* @__PURE__ */ t(D, { children: i.slice(0, l ? 9999 : o).map((s, x) => /* @__PURE__ */ t(
           O,
           {
             label: s,
             control: /* @__PURE__ */ t(
-              k,
+              z,
               {
                 name: e.propertyId,
                 value: s,
                 size: "small",
                 checked: a.atLeastOneOf ? a.atLeastOneOf.includes(s) : !1,
-                onChange: w,
+                onChange: F,
                 sx: {
                   p: 0,
                   mr: 1,
@@ -226,7 +230,7 @@ const R = ({
         {
           size: "small",
           sx: { p: 0, textTransform: "none", fontSize: 12 },
-          endIcon: l ? /* @__PURE__ */ t(z, { sx: { fontSize: 14 } }) : /* @__PURE__ */ t(L, { sx: { fontSize: 14 } }),
+          endIcon: l ? /* @__PURE__ */ t(k, { sx: { fontSize: 14 } }) : /* @__PURE__ */ t(w, { sx: { fontSize: 14 } }),
           onClick: () => n((s) => !s),
           children: [
             "Show ",
@@ -236,7 +240,7 @@ const R = ({
       )
     ] });
   }
-  return /* @__PURE__ */ t(T, {});
+  return /* @__PURE__ */ t(P, {});
 };
 export {
   R as Property

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.83",
+  "version": "1.5.86",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",