@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/template-form/styled.js

@@ -0,0 +1,84 @@
+import { styled as e, TextField as l, FormGroup as a, Box as o, Button as m, FormLabel as n } from "@mui/material";
+const s = e("form", {
+  name: "HCTemplateForm",
+  slot: "root"
+})({}), p = e(l, {
+  name: "HCTemplateForm",
+  slot: "field"
+})(({ theme: t }) => ({
+  marginBottom: t.spacing(2)
+})), c = e(a, {
+  name: "HCTemplateForm",
+  slot: "fieldGroup"
+})(({ theme: t }) => ({
+  marginBottom: t.spacing(2)
+})), i = e(a, {
+  name: "HCTemplateForm",
+  slot: "checkboxesRow"
+})(({ theme: t }) => ({
+  marginBottom: t.spacing(2)
+})), T = e(o, {
+  name: "HCTemplateForm",
+  slot: "actionsRow"
+})(({ theme: t }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  marginTop: t.spacing(3)
+})), F = e(o, {
+  name: "HCTemplateForm",
+  slot: "actionsRight"
+})({}), C = e(m, {
+  name: "HCTemplateForm",
+  slot: "cancelButton"
+})({
+  textTransform: "none"
+}), f = e(m, {
+  name: "HCTemplateForm",
+  slot: "saveButton"
+})({
+  textTransform: "none"
+}), g = e(m, {
+  name: "HCTemplateForm",
+  slot: "extraSaveButton"
+})(({ theme: t }) => ({
+  marginLeft: t.spacing(1),
+  textTransform: "none"
+})), u = e(n, {
+  name: "HCTemplateForm",
+  slot: "topLabel"
+})(({ theme: t }) => ({
+  display: "block",
+  marginBottom: t.spacing(0.5)
+})), B = e(o, {
+  name: "HCTemplateForm",
+  slot: "leftLayout"
+})(({ theme: t }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: t.spacing(2)
+})), H = e(n, {
+  name: "HCTemplateForm",
+  slot: "leftLabel"
+})({
+  width: "32%"
+}), x = e(o, {
+  name: "HCTemplateForm",
+  slot: "leftContent"
+})({
+  width: "68%"
+});
+export {
+  F as TemplateFormActionsRight,
+  T as TemplateFormActionsRow,
+  C as TemplateFormCancelButton,
+  i as TemplateFormCheckboxesRow,
+  g as TemplateFormExtraSaveButton,
+  p as TemplateFormField,
+  c as TemplateFormFieldGroup,
+  x as TemplateFormLeftContent,
+  H as TemplateFormLeftLabel,
+  B as TemplateFormLeftLayout,
+  s as TemplateFormRoot,
+  f as TemplateFormSaveButton,
+  u as TemplateFormTopLabel
+};

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

@@ -1,110 +1,60 @@
-import { jsx as d, jsxs as x } from "react/jsx-runtime";
-import s from "lodash";
-import { Property as y } from "./property.js";
-import { Box as c, Typography as I } from "@mui/material";
-import { Accordion as A, AccordionSummary as K, AccordionDetails as N } from "./styled.js";
-const j = ({
-  values: f,
-  templates: h,
-  inputVariant: m,
-  fieldOptions: i,
-  onChange: g
-}) => {
-  const p = (a) => (n) => {
-    if (a) {
-      let e = f.find((r) => r.templateKey === a);
-      if (e) {
-        const r = s.keys(n)[0];
-        let t = e.filters.findIndex(
-          (l) => l.fieldName === r
-        );
-        const o = s.get(n, r);
-        s.values(o).filter((l) => !(s.isArray(l) && l.length === 0 || l === "")).length === 0 && t !== -1 ? e.filters.splice(t, 1) : t !== -1 ? e.filters[t] = {
-          fieldName: r,
-          value: o
-        } : e.filters.push({
-          fieldName: r,
-          value: o
-        });
-      }
-      g(f, e);
-    } else console.warn("Template could not be found!");
-  };
-  if (f.length === 1) {
-    const a = f[0], n = h.get(a.templateKey);
-    return /* @__PURE__ */ d(c, { display: "flex", flexDirection: "column", children: n == null ? void 0 : n.properties.filter((e) => {
-      var r;
-      return i ? !((r = i[e.propertyId]) != null && r.hidden) : !0;
-    }).map((e, r) => {
-      var l;
-      let t = {};
-      const o = a.filters.find(
-        (u) => u.fieldName === e.propertyId
+import { jsx as t, jsxs as h, Fragment as P } from "react/jsx-runtime";
+import { Box as v } from "@mui/material";
+import { TemplatePropertyFiltersRoot as f, Accordion as A, AccordionSummary as F, AccordionTitle as T, AccordionDetails as C, ExpandIcon as K, CollapseIcon as N } from "./styled.js";
+import { useTemplatePropertyFiltersLogic as b } from "./logic.js";
+import { Property as j } from "./property.js";
+const E = /* @__PURE__ */ h(P, { children: [
+  /* @__PURE__ */ t(K, { className: "expandIcon" }),
+  /* @__PURE__ */ t(N, { className: "collapseIcon" })
+] }), w = (i) => {
+  const { state: x, actions: I } = b(i), { ownerState: l } = x, { values: c, templates: s, inputVariant: y, fieldOptions: n } = i, d = (o) => {
+    const e = s.get(o.templateKey);
+    return e == null ? void 0 : e.properties.filter((r) => {
+      var a;
+      return n ? !((a = n[r.propertyId]) != null && a.hidden) : !0;
+    }).map((r, a) => {
+      var u;
+      let p = {};
+      const m = o.filters.find(
+        (g) => g.fieldName === r.propertyId
       );
-      return o && (t = o.value), /* @__PURE__ */ d(
-        c,
+      return m && (p = m.value), /* @__PURE__ */ t(
+        v,
         {
-          ...i && ((l = i[e.propertyId]) == null ? void 0 : l.order) && {
-            order: i[e.propertyId].order
+          ...n && ((u = n[r.propertyId]) == null ? void 0 : u.order) && {
+            order: n[r.propertyId].order
           },
-          children: /* @__PURE__ */ d(
-            y,
+          children: /* @__PURE__ */ t(
+            j,
             {
-              property: e,
-              value: t,
+              property: r,
+              value: p,
               size: "small",
-              variant: m,
-              onChange: p(n == null ? void 0 : n.templateKey)
+              variant: y,
+              onChange: I.handleOnChange(e == null ? void 0 : e.templateKey)
             }
           )
         },
-        r
+        a
       );
-    }) });
-  }
-  return f.map((a, n) => {
-    const e = h.get(a.templateKey);
-    return /* @__PURE__ */ x(A, { disableGutters: !0, elevation: 0, square: !0, children: [
-      /* @__PURE__ */ d(
-        K,
+    });
+  };
+  return c.length === 1 ? /* @__PURE__ */ t(f, { ownerState: l, sx: i.sx, children: d(c[0]) }) : /* @__PURE__ */ t(f, { ownerState: l, sx: i.sx, children: c.map((o, e) => {
+    const r = s.get(o.templateKey);
+    return /* @__PURE__ */ h(A, { disableGutters: !0, elevation: 0, square: !0, children: [
+      /* @__PURE__ */ t(
+        F,
         {
-          "aria-controls": `panel${n}-content`,
-          id: `panel${n}-header`,
-          children: /* @__PURE__ */ d(I, { variant: "body2", sx: { fontSize: 12 }, children: e == null ? void 0 : e.name })
+          expandIcon: E,
+          "aria-controls": `panel${e}-content`,
+          id: `panel${e}-header`,
+          children: /* @__PURE__ */ t(T, { variant: "body2", children: r == null ? void 0 : r.name })
         }
       ),
-      /* @__PURE__ */ d(N, { children: e == null ? void 0 : e.properties.filter((r) => {
-        var t;
-        return i ? !((t = i[r.propertyId]) != null && t.hidden) : !0;
-      }).map((r, t) => {
-        var u;
-        let o = {};
-        const l = a.filters.find(
-          (v) => v.fieldName === r.propertyId
-        );
-        return l && (o = l.value), /* @__PURE__ */ d(
-          c,
-          {
-            ...i && ((u = i[r.propertyId]) == null ? void 0 : u.order) && {
-              order: i[r.propertyId].order
-            },
-            children: /* @__PURE__ */ d(
-              y,
-              {
-                property: r,
-                value: o,
-                size: "small",
-                variant: m,
-                onChange: p(e == null ? void 0 : e.templateKey)
-              }
-            )
-          },
-          t
-        );
-      }) })
-    ] }, n);
-  });
+      /* @__PURE__ */ t(C, { children: d(o) })
+    ] }, e);
+  }) });
 };
 export {
-  j as TemplatePropertyFilters
+  w as TemplatePropertyFilters
 };

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

@@ -0,0 +1,27 @@
+import { useThemeProps as d } from "@mui/material";
+import s from "lodash";
+const x = (p) => {
+  const l = d({
+    props: p,
+    name: "HCTemplatePropertyFilters"
+  }), { values: i, onChange: u } = l, c = { ...l };
+  return {
+    refs: {},
+    state: { ownerState: c },
+    actions: { handleOnChange: (a) => (f) => {
+      if (!a) {
+        console.warn("Template could not be found!");
+        return;
+      }
+      const t = i.find((e) => e.templateKey === a);
+      if (!t) return;
+      const n = s.keys(f)[0], o = s.get(f, n), r = t.filters.findIndex(
+        (e) => e.fieldName === n
+      );
+      s.values(o).filter((e) => !(s.isArray(e) && e.length === 0 || e === "")).length === 0 && r !== -1 ? t.filters.splice(r, 1) : r !== -1 ? t.filters[r] = { fieldName: n, value: o } : t.filters.push({ fieldName: n, value: o }), u(i, t);
+    } }
+  };
+};
+export {
+  x as useTemplatePropertyFiltersLogic
+};

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

@@ -1,247 +1,187 @@
-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 f from "dayjs";
-import { B as r } from "../../Box-p6OtTUEo.js";
-import { T as b } from "../../TextField-1yCesIbH.js";
-import { F as O } from "../../FormControlLabel-C8SPv14J.js";
-import { C as z } from "../../Checkbox-CWRMFTBp.js";
-import { F as B } from "../../FormControl-BLbrq4C7.js";
-const R = ({
-  property: e,
-  value: a,
-  size: d = "medium",
-  variant: u = "outlined",
-  onChange: p
-}) => {
-  var I, S, y, V, M;
-  const h = (l) => (n) => {
-    let o = { ...a };
-    const i = n.target.type === "checkbox" ? n.target.checked : n.target.value;
-    o[l] = String(i), p({
-      [n.target.name]: o
-    });
-  }, 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(
-      (L) => L !== o
-    ), p({
-      [s]: n
-    });
-  }, g = (l) => (n) => {
-    let o = { ...a };
-    o[l] = f(n).format("YYYY-MM-DD"), p({
-      [e.propertyId]: o
-    });
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { KeyboardArrowUp as D, KeyboardArrowDown as F } from "@mui/icons-material";
+import { TextField as y, FormControlLabel as R, Checkbox as E, FormControl as A, FormGroup as B } from "@mui/material";
+import { DatePicker as S } from "@mui/x-date-pickers";
+import d from "dayjs";
+import { useState as W } from "react";
+import { PropertyContainer as m, PropertyLabel as f, INPUT_FONT_SX as O, PropertyRangeRow as T, PropertyRangeSeparator as V, DATE_PICKER_SLOT_PROPS as _, PropertyEnumLabel as z, PropertyEnumItem as N, PropertyEnumCheckbox as j, PropertyShowMoreButton as K, SHOW_MORE_ICON_SX as M } from "./styled.js";
+const v = 10, H = {
+  typography: { variant: "body2", fontSize: 13 }
+}, U = {
+  typography: { fontSize: 13 }
+}, ee = (w) => {
+  var P, b, g, I, C;
+  const {
+    property: e,
+    value: r,
+    size: s = "medium",
+    variant: u = "outlined",
+    onChange: h
+  } = w, c = (o) => (n) => {
+    const a = { ...r }, l = n.target.type === "checkbox" ? n.target.checked : n.target.value;
+    a[o] = String(l), h({ [n.target.name]: a });
+  }, Y = (o) => {
+    var L;
+    const n = { ...r }, { value: a, checked: l, name: p } = o.target;
+    l ? (n.atLeastOneOf || (n.atLeastOneOf = []), n.atLeastOneOf.push(a)) : n.atLeastOneOf = (L = n.atLeastOneOf) == null ? void 0 : L.filter(
+      (k) => k !== a
+    ), h({ [p]: n });
+  }, x = (o) => (n) => {
+    const a = { ...r };
+    a[o] = d(n).format("YYYY-MM-DD"), h({ [e.propertyId]: a });
   };
   if (["string", "text", "list"].includes(e.type))
-    return /* @__PURE__ */ m(r, { mb: 1, children: [
-      /* @__PURE__ */ t(c, { variant: "caption", mb: 0.5, display: "block", children: e.name }),
+    return /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ t(f, { variant: "caption", children: e.name }),
       /* @__PURE__ */ t(
-        b,
+        y,
         {
           name: e.propertyId,
-          value: a.exact ?? e.defaultValue ?? "",
-          size: d,
-          onChange: h("exact"),
+          value: r.exact ?? e.defaultValue ?? "",
+          size: s,
+          onChange: c("exact"),
           variant: u,
           type: "text",
           multiline: e.type === "text",
           disabled: !e.editable,
           fullWidth: !0,
-          InputProps: {
-            sx: { fontSize: 12 }
-          }
+          InputProps: { sx: O }
         }
       )
     ] });
   if (["integer", "double", "long", "byte"].includes(e.type))
-    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: [
+    return /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ t(f, { variant: "caption", children: e.name }),
+      /* @__PURE__ */ i(T, { children: [
         /* @__PURE__ */ t(
-          b,
+          y,
           {
             name: e.propertyId,
-            value: a.min ?? e.defaultValue ?? "",
-            size: d,
-            onChange: h("min"),
+            value: r.min ?? e.defaultValue ?? "",
+            size: s,
+            onChange: c("min"),
             variant: u,
             type: "number",
             disabled: !e.editable,
             fullWidth: !0,
-            InputProps: {
-              placeholder: "Min",
-              sx: { fontSize: 12 }
-            }
+            InputProps: { placeholder: "Min", sx: O }
           }
         ),
-        /* @__PURE__ */ t(c, { px: 1, children: "-" }),
+        /* @__PURE__ */ t(V, { children: "-" }),
         /* @__PURE__ */ t(
-          b,
+          y,
           {
             name: e.propertyId,
-            value: a.max ?? e.defaultValue ?? "",
-            size: d,
-            onChange: h("max"),
+            value: r.max ?? e.defaultValue ?? "",
+            size: s,
+            onChange: c("max"),
             variant: u,
             type: "number",
             disabled: !e.editable,
             fullWidth: !0,
-            InputProps: {
-              placeholder: "Max",
-              sx: { fontSize: 12 }
-            }
+            InputProps: { placeholder: "Max", sx: O }
           }
         )
       ] })
     ] });
   if (e.type === "date") {
-    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: [
+    const o = "YYYY-MM-DD", n = "DD/MM/YYYY", a = r.min && d(r.min, o, !0).isValid() ? d(r.min, o) : null, l = r.max && d(r.max, o, !0).isValid() ? d(r.max, o) : null, p = {
+      ..._,
+      textField: {
+        ..._.textField,
+        variant: u,
+        name: e.propertyId,
+        size: s
+      }
+    };
+    return /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ t(f, { variant: "caption", children: e.name }),
+      /* @__PURE__ */ i(T, { children: [
         /* @__PURE__ */ t(
-          C,
+          S,
           {
             label: "From",
-            value: o,
-            format: l,
+            value: a,
+            format: n,
             views: ["year", "month", "day"],
-            slotProps: {
-              textField: {
-                variant: u,
-                name: e.propertyId,
-                size: d,
-                fullWidth: !0,
-                inputProps: { sx: { fontSize: 12 } },
-                InputLabelProps: { sx: { fontSize: 12 } }
-              },
-              inputAdornment: {
-                sx: {
-                  "& .MuiSvgIcon-root": {
-                    fontSize: 16
-                  }
-                }
-              }
-            },
-            onChange: g("min")
+            slotProps: p,
+            onChange: x("min")
           }
         ),
-        /* @__PURE__ */ t(c, { px: 1, children: "-" }),
+        /* @__PURE__ */ t(V, { children: "-" }),
         /* @__PURE__ */ t(
-          C,
+          S,
           {
             label: "To",
-            value: i,
-            format: l,
-            minDate: o !== null ? o : void 0,
+            value: l,
+            format: n,
+            minDate: a !== null ? a : void 0,
             views: ["year", "month", "day"],
-            slotProps: {
-              textField: {
-                variant: u,
-                name: e.propertyId,
-                size: d,
-                fullWidth: !0,
-                inputProps: { sx: { fontSize: 12 } },
-                InputLabelProps: { sx: { fontSize: 12 } }
-              },
-              inputAdornment: {
-                sx: {
-                  "& .MuiSvgIcon-root": {
-                    fontSize: 16
-                  }
-                }
-              }
-            },
-            onChange: g("max")
+            slotProps: p,
+            onChange: x("max")
           }
         )
       ] })
     ] });
   }
   if (e.type === "boolean")
-    return /* @__PURE__ */ t(r, { mb: 1, children: /* @__PURE__ */ t(
-      O,
+    return /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t(
+      R,
       {
         label: e.name,
         control: /* @__PURE__ */ t(
-          z,
+          E,
           {
-            size: d,
+            size: s,
             name: e.propertyId,
-            checked: !!a,
-            onChange: h("exact")
+            checked: !!r,
+            onChange: c("exact")
           }
         ),
-        slotProps: {
-          typography: {
-            fontSize: 13
-          }
-        }
+        slotProps: U
       }
     ) });
-  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] = 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(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,
+  if (e.type === "enum" || e.type === "composite-list" && ((b = (P = e.dataTypeInfo) == null ? void 0 : P.innerType) == null ? void 0 : b.type) === "enum") {
+    const [o, n] = W(!1);
+    let a = [];
+    return (g = e.dataTypeInfo) != null && g.enumValues && (a = e.dataTypeInfo.enumValues), (C = (I = e.dataTypeInfo) == null ? void 0 : I.innerType) != null && C.enumValues && (a = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ i(m, { children: [
+      /* @__PURE__ */ i(A, { fullWidth: !0, component: "fieldset", variant: u, children: [
+        /* @__PURE__ */ t(z, { children: e.name }),
+        /* @__PURE__ */ t(B, { children: a.slice(0, o ? 9999 : v).map((l, p) => /* @__PURE__ */ t(
+          N,
           {
-            label: s,
+            label: l,
             control: /* @__PURE__ */ t(
-              z,
+              j,
               {
                 name: e.propertyId,
-                value: s,
+                value: l,
                 size: "small",
-                checked: a.atLeastOneOf ? a.atLeastOneOf.includes(s) : !1,
-                onChange: F,
-                sx: {
-                  p: 0,
-                  mr: 1,
-                  "& .MuiSvgIcon-root": {
-                    fontSize: 16
-                  }
-                }
+                checked: r.atLeastOneOf ? r.atLeastOneOf.includes(l) : !1,
+                onChange: Y
               }
             ),
-            componentsProps: {
-              typography: {
-                variant: "body2",
-                fontSize: 13
-              }
-            },
-            sx: {
-              m: 0,
-              mb: 1
-            }
+            componentsProps: H
           },
-          x
+          p
         )) })
       ] }),
-      i.length > o && /* @__PURE__ */ m(
-        W,
+      a.length > v && /* @__PURE__ */ i(
+        K,
         {
           size: "small",
-          sx: { p: 0, textTransform: "none", fontSize: 12 },
-          endIcon: l ? /* @__PURE__ */ t(k, { sx: { fontSize: 14 } }) : /* @__PURE__ */ t(w, { sx: { fontSize: 14 } }),
-          onClick: () => n((s) => !s),
+          endIcon: o ? /* @__PURE__ */ t(D, { sx: M }) : /* @__PURE__ */ t(F, { sx: M }),
+          onClick: () => n((l) => !l),
           children: [
             "Show ",
-            l ? "Less" : "More"
+            o ? "Less" : "More"
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ t(P, {});
+  return null;
 };
 export {
-  R as Property
+  ee as Property
 };