@oondemand/oon-core-front 0.3.12 → 0.3.14

package/dist/index.d.ts

@@ -246,6 +246,7 @@ interface OonColumnDef {
     permissions?: string[];
     capabilities?: string[];
 }
+type OonFormFieldWidget = "default" | "checkbox";
 interface OonFormFieldDef {
     field: string;
     label?: string;
@@ -255,6 +256,19 @@ interface OonFormFieldDef {
     /** model relacionada quando kind === "ref". */
     ref?: string;
     renderer?: string;
+    /** Controle visual pontual sem substituir a página/formulário inteiro. */
+    widget?: OonFormFieldWidget;
+    /** Valor persistido quando um checkbox está marcado. Default: true. */
+    checkedValue?: string | number | boolean;
+    /** Valor persistido quando um checkbox está desmarcado. Default: false. */
+    uncheckedValue?: string | number | boolean;
+    /** Agrupa campos relacionados em um bloco visual comum. */
+    group?: string;
+    /** Rótulo exibido uma vez acima do grupo. Default: group. */
+    groupLabel?: string;
+    groupDescription?: string;
+    /** Exibe controles do mesmo grupo na mesma linha quando houver espaço. */
+    inline?: boolean;
     permissions?: string[];
     capabilities?: string[];
 }
@@ -412,7 +426,7 @@ interface CollectionViewDef {
     mode?: CollectionMode;
     /** modo "full": colunas explícitas. */
     columns?: OonColumnDef[];
-    /** modo "full": campos de formulário explícitos. */
+    /** Campos explícitos ou overrides pontuais sobre a metadata do model. */
     form?: OonFormFieldDef[];
     importExport?: boolean;
     renderer?: string;
@@ -583,6 +597,8 @@ interface CentralUiManifest {
         path?: string;
         label?: string;
         section?: string;
+        /** Overrides pontuais de campos; os demais continuam vindo da metadata. */
+        form?: OonFormFieldDef[];
         list?: OonCollectionListConfig;
         relations?: Record<string, OonRelationDef>;
         detailModal?: OonDetailModalConfig;

package/dist/index.js

@@ -3,7 +3,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/app/OonApp.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 import { RouterProvider } from "react-router-dom";
 
 // src/api/createRestClient.ts
@@ -953,7 +953,7 @@ function DataGrid({
 }
 
 // src/components/internal/DynamicForm.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo4, useState as useState5 } from "react";
 import { Box as Box4, Button as Button4, Flex as Flex4, Heading as Heading2, Input as Input3, NativeSelect as NativeSelect2, SimpleGrid, Stack as Stack2, Text as Text5, Textarea } from "@chakra-ui/react";
 
 // src/components/internal/ReferenceSelect.tsx
@@ -1443,10 +1443,25 @@ var controlProps = (invalid) => ({
   boxShadow: invalid ? "0 0 0 3px rgba(220,38,38,.08)" : void 0,
   fontSize: "11px"
 });
+function buildItems(fields) {
+  const items = [];
+  const renderedGroups = /* @__PURE__ */ new Set();
+  fields.forEach((field) => {
+    if (!field.group) {
+      items.push({ type: "field", field });
+      return;
+    }
+    if (renderedGroups.has(field.group)) return;
+    renderedGroups.add(field.group);
+    items.push({ type: "group", id: field.group, fields: fields.filter((candidate) => candidate.group === field.group) });
+  });
+  return items;
+}
 function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submitting, error, onSubmit, onCancel, onFieldChange }) {
   const [values, setValues] = useState5(() => Object.fromEntries(fields.map((field) => [field.field, toValue(initialValues?.[field.field], field.kind)])));
   const [errors, setErrors] = useState5({});
   const [dismissed, setDismissed] = useState5(false);
+  const items = useMemo4(() => buildItems(fields), [fields]);
   useEffect4(() => {
     const listener = (event) => {
       if (event.key !== "Escape" || event.defaultPrevented || submitting) return;
@@ -1496,6 +1511,83 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
     setErrors({});
     onSubmit(payload);
   };
+  const renderField = (field, grouped = false) => {
+    const label = fieldLabel({ name: field.field, label: field.label });
+    const message = errors[field.field];
+    const id = idFor(field.field);
+    const errorId = message ? errorIdFor(field.field) : void 0;
+    const multiline = isMultiline(field);
+    const span = field.span === 2 || multiline;
+    const wrap = (control, showLabel = true) => /* @__PURE__ */ jsxs5(Box4, { minW: grouped ? "150px" : void 0, flex: grouped ? "0 1 auto" : void 0, gridColumn: !grouped && span ? "1 / -1" : void 0, children: [
+      showLabel ? /* @__PURE__ */ jsx9(Label, { id, label, required: field.required }) : null,
+      control,
+      /* @__PURE__ */ jsx9(ErrorText, { id: errorId, text: message })
+    ] }, field.field);
+    if (field.widget === "checkbox") {
+      const checkedValue = String(field.checkedValue ?? true);
+      const uncheckedValue = String(field.uncheckedValue ?? false);
+      const checked = (values[field.field] ?? uncheckedValue) === checkedValue;
+      return wrap(
+        /* @__PURE__ */ jsxs5(
+          Box4,
+          {
+            as: "label",
+            display: "flex",
+            minH: "37px",
+            px: "11px",
+            alignItems: "center",
+            gap: "8px",
+            color: "#344054",
+            bg: checked ? "#F0F7FF" : "white",
+            borderWidth: "1px",
+            borderColor: message ? "#DC2626" : checked ? "#8FC9E7" : "#D5DDE3",
+            borderRadius: "7px",
+            cursor: "pointer",
+            transition: "background .15s ease, border-color .15s ease",
+            _hover: { borderColor: "#8FC9E7", bg: "#F7FBFE" },
+            children: [
+              /* @__PURE__ */ jsx9(
+                "input",
+                {
+                  id,
+                  type: "checkbox",
+                  checked,
+                  "aria-invalid": !!message,
+                  "aria-describedby": errorId,
+                  style: { width: 16, height: 16, accentColor: "#0474AF", cursor: "pointer" },
+                  onChange: (event) => change(field.field, event.currentTarget.checked ? checkedValue : uncheckedValue)
+                }
+              ),
+              /* @__PURE__ */ jsxs5(Text5, { as: "span", fontSize: "11px", fontWeight: "600", children: [
+                label,
+                field.required ? /* @__PURE__ */ jsx9(Text5, { as: "span", color: "#DC2626", children: " *" }) : null
+              ] })
+            ]
+          }
+        ),
+        false
+      );
+    }
+    if (field.kind === "ref" && field.ref) return wrap(/* @__PURE__ */ jsx9(ReferenceSelect, { field: field.field, inputId: id, errorId, label, refModel: field.ref, value: values[field.field] ?? "", initialValue: initialValues?.[field.field], required: field.required, invalid: !!message, error: message, onChange: (value) => change(field.field, value) }));
+    if (field.kind === "enum" && field.options?.length) return wrap(/* @__PURE__ */ jsxs5(NativeSelect2.Root, { size: "sm", children: [
+      /* @__PURE__ */ jsxs5(NativeSelect2.Field, { id, "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value), children: [
+        /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 Selecione \u2014" }),
+        field.options.map((option) => /* @__PURE__ */ jsx9("option", { value: option, children: option }, option))
+      ] }),
+      /* @__PURE__ */ jsx9(NativeSelect2.Indicator, {})
+    ] }));
+    if (field.kind === "boolean") return wrap(/* @__PURE__ */ jsxs5(NativeSelect2.Root, { size: "sm", children: [
+      /* @__PURE__ */ jsxs5(NativeSelect2.Field, { id, "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value), children: [
+        /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 Selecione \u2014" }),
+        /* @__PURE__ */ jsx9("option", { value: "true", children: "Sim" }),
+        /* @__PURE__ */ jsx9("option", { value: "false", children: "N\xE3o" })
+      ] }),
+      /* @__PURE__ */ jsx9(NativeSelect2.Indicator, {})
+    ] }));
+    if (multiline) return wrap(/* @__PURE__ */ jsx9(Textarea, { id, rows: field.rows ?? 4, resize: "vertical", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), lineHeight: "1.5", onChange: (event) => change(field.field, event.currentTarget.value) }));
+    const type = field.kind === "date" ? "date" : ["number", "currency", "currencyConverted"].includes(field.kind ?? "") ? "number" : "text";
+    return wrap(/* @__PURE__ */ jsx9(Input3, { id, type, step: type === "number" ? "any" : void 0, autoComplete: "off", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value) }));
+  };
   const invalid = fields.filter((field) => errors[field.field]);
   const generic = dismissed ? null : messageOf(error);
   return /* @__PURE__ */ jsx9(Flex4, { position: "fixed", inset: 0, zIndex: 1e3, align: "center", justify: "center", p: { base: 2, md: 6 }, bg: "rgba(15,23,42,.48)", backdropFilter: "blur(2px)", onMouseDown: (event) => {
@@ -1525,38 +1617,15 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
           /* @__PURE__ */ jsx9(AlertIcon, {}),
           generic
         ] }) : null,
-        /* @__PURE__ */ jsx9(SimpleGrid, { columns: { base: 1, lg: 2 }, gapX: "16px", gapY: "15px", children: fields.map((baseField) => {
-          const field = baseField;
-          const label = fieldLabel({ name: field.field, label: field.label });
-          const message = errors[field.field];
-          const id = idFor(field.field);
-          const errorId = message ? errorIdFor(field.field) : void 0;
-          const multiline = isMultiline(field);
-          const span = field.span === 2 || multiline;
-          const wrap = (control) => /* @__PURE__ */ jsxs5(Box4, { gridColumn: span ? "1 / -1" : void 0, children: [
-            /* @__PURE__ */ jsx9(Label, { id, label, required: field.required }),
-            control,
-            /* @__PURE__ */ jsx9(ErrorText, { id: errorId, text: message })
-          ] }, field.field);
-          if (field.kind === "ref" && field.ref) return wrap(/* @__PURE__ */ jsx9(ReferenceSelect, { field: field.field, inputId: id, errorId, label, refModel: field.ref, value: values[field.field] ?? "", initialValue: initialValues?.[field.field], required: field.required, invalid: !!message, error: message, onChange: (value) => change(field.field, value) }));
-          if (field.kind === "enum" && field.options?.length) return wrap(/* @__PURE__ */ jsxs5(NativeSelect2.Root, { size: "sm", children: [
-            /* @__PURE__ */ jsxs5(NativeSelect2.Field, { id, "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value), children: [
-              /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 Selecione \u2014" }),
-              field.options.map((option) => /* @__PURE__ */ jsx9("option", { value: option, children: option }, option))
-            ] }),
-            /* @__PURE__ */ jsx9(NativeSelect2.Indicator, {})
-          ] }));
-          if (field.kind === "boolean") return wrap(/* @__PURE__ */ jsxs5(NativeSelect2.Root, { size: "sm", children: [
-            /* @__PURE__ */ jsxs5(NativeSelect2.Field, { id, "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value), children: [
-              /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014 Selecione \u2014" }),
-              /* @__PURE__ */ jsx9("option", { value: "true", children: "Sim" }),
-              /* @__PURE__ */ jsx9("option", { value: "false", children: "N\xE3o" })
-            ] }),
-            /* @__PURE__ */ jsx9(NativeSelect2.Indicator, {})
-          ] }));
-          if (multiline) return wrap(/* @__PURE__ */ jsx9(Textarea, { id, rows: field.rows ?? 4, resize: "vertical", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), lineHeight: "1.5", onChange: (event) => change(field.field, event.currentTarget.value) }));
-          const type = field.kind === "date" ? "date" : ["number", "currency", "currencyConverted"].includes(field.kind ?? "") ? "number" : "text";
-          return wrap(/* @__PURE__ */ jsx9(Input3, { id, type, step: type === "number" ? "any" : void 0, autoComplete: "off", "aria-invalid": !!message, "aria-describedby": errorId, value: values[field.field] ?? "", ...controlProps(!!message), onChange: (event) => change(field.field, event.currentTarget.value) }));
+        /* @__PURE__ */ jsx9(SimpleGrid, { columns: { base: 1, lg: 2 }, gapX: "16px", gapY: "15px", children: items.map((item) => {
+          if (item.type === "field") return renderField(item.field);
+          const first = item.fields[0];
+          const inline = item.fields.some((field) => field.inline !== false);
+          return /* @__PURE__ */ jsxs5(Box4, { gridColumn: "1 / -1", p: "12px", bg: "#FAFCFD", borderWidth: "1px", borderColor: "#E5E9ED", borderRadius: "9px", children: [
+            /* @__PURE__ */ jsx9(Text5, { color: "#344054", fontSize: "11px", fontWeight: "700", children: first.groupLabel ?? item.id }),
+            first.groupDescription ? /* @__PURE__ */ jsx9(Text5, { mt: "2px", mb: "10px", color: "#667085", fontSize: "10px", children: first.groupDescription }) : /* @__PURE__ */ jsx9(Box4, { h: "8px" }),
+            /* @__PURE__ */ jsx9(Flex4, { direction: inline ? "row" : "column", wrap: "wrap", gap: "9px", children: item.fields.map((field) => renderField(field, true)) })
+          ] }, item.id);
         }) })
       ] }) }),
       /* @__PURE__ */ jsxs5(Flex4, { minH: "68px", px: "20px", py: "14px", justify: "flex-end", gap: "9px", borderTopWidth: "1px", borderColor: "#E5E9ED", children: [
@@ -1571,7 +1640,7 @@ function DynamicForm({ title, eyebrow = "Cadastro", fields, initialValues, submi
 }
 
 // src/components/internal/CoreDetailModal.tsx
-import { useEffect as useEffect6, useMemo as useMemo5, useState as useState9 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState9 } from "react";
 import { Box as Box8, Button as Button8, Flex as Flex7, Heading as Heading3, Text as Text10 } from "@chakra-ui/react";
 import { useQuery as useQuery6, useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 
@@ -1632,7 +1701,7 @@ function CoreSummaryCards({ cards = [], parent, relations }) {
 }
 
 // src/components/internal/CoreRelatedGrid.tsx
-import { useMemo as useMemo4, useState as useState7 } from "react";
+import { useMemo as useMemo5, useState as useState7 } from "react";
 import { Badge as Badge3, Box as Box6, Button as Button6, Flex as Flex5, Table as Table2, Text as Text8 } from "@chakra-ui/react";
 import { useMutation, useQuery as useQuery5, useQueryClient } from "@tanstack/react-query";
 
@@ -1748,7 +1817,7 @@ function CoreRelatedGrid({ tab, parent, relations, refreshToken, onRefresh }) {
   const parentValue = relation ? parent[relation.parentKey ?? "_id"] : void 0;
   const key = ["oon", "related", relation?.model, relation?.foreignKey, parentValue, refreshToken];
   const query = useQuery5({ queryKey: key, enabled: !!relation && parentValue != null, queryFn: () => resource.list({ [relation.foreignKey]: parentValue, pageSize: 1e3 }) });
-  const columns = useMemo4(() => (tab.columns?.length ? tab.columns : schema?.fields.slice(0, 8).map((f) => f.name) ?? []).map((column) => normalizeColumn(column, schema)).filter((column) => !column.hidden), [tab.columns, schema]);
+  const columns = useMemo5(() => (tab.columns?.length ? tab.columns : schema?.fields.slice(0, 8).map((f) => f.name) ?? []).map((column) => normalizeColumn(column, schema)).filter((column) => !column.hidden), [tab.columns, schema]);
   const [drafts, setDrafts] = useState7({});
   const [errors, setErrors] = useState7({});
   const editable = tab.type === "relatedGrid" && tab.editable && tab.editMode === "inline";
@@ -1876,7 +1945,7 @@ function CoreDetailModal({ model, title, config, recordId, initialRecord, initia
   useEffect6(() => {
     if (parentQuery.data) setParent(parentQuery.data);
   }, [parentQuery.data]);
-  const formFields = useMemo5(() => schema ? formFieldsFromMeta(schema.fields) : [], [schema]);
+  const formFields = useMemo6(() => schema ? formFieldsFromMeta(schema.fields) : [], [schema]);
   const refresh = (targets) => {
     const list = targets?.length ? targets : ["self"];
     if (list.includes("parent") || list.includes("all")) {
@@ -1912,13 +1981,24 @@ function CoreDetailModal({ model, title, config, recordId, initialRecord, initia
 
 // src/components/CoreCollection.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function mergeFormFields(metadataFields, overrides) {
+  if (!overrides?.length) return metadataFields;
+  const byField = new Map(overrides.map((field) => [field.field, field]));
+  const merged = metadataFields.map((field) => ({ ...field, ...byField.get(field.field) }));
+  const known = new Set(metadataFields.map((field) => field.field));
+  overrides.forEach((field) => {
+    if (!known.has(field.field)) merged.push(field);
+  });
+  return merged;
+}
 function CoreCollection({ model, label, section = "Cole\xE7\xE3o", mode = "dynamic", endpoint, columns, form, importExport, list, relations, detailModal }) {
   const needsSchema = mode !== "full" || !columns || !form || !endpoint;
   const schemaQuery = useModelSchema(needsSchema ? model : "");
   const schema = schemaQuery.data;
   const basePath = endpoint ?? schema?.basePath ?? `/${model.toLowerCase()}s`;
   const resolvedColumns = (list?.columns?.length ? list.columns.map((column) => normalizeColumn(column, schema)) : columns) ?? (schema ? columnsFromMeta(schema.fields) : []);
-  const resolvedForm = form ?? (schema ? formFieldsFromMeta(schema.fields) : []);
+  const metadataForm = schema ? formFieldsFromMeta(schema.fields) : [];
+  const resolvedForm = mode === "full" && form?.length ? form : mergeFormFields(metadataForm, form);
   const resource = useOonResource(basePath);
   const queryClient = useQueryClient3();
   const [formState, setFormState] = useState10({ open: false });
@@ -3438,7 +3518,7 @@ function localLoginUrl() {
   return `/login?redirect=${encodeURIComponent(current)}`;
 }
 function OonApp({ config }) {
-  const { http, storage, router } = useMemo6(() => {
+  const { http, storage, router } = useMemo7(() => {
     const storage2 = createTokenStorage(config.app.id);
     const externalLoginUrl = config.auth?.loginUrl ?? config.api.meusAppsUrl;
     const http2 = createRestClient({
@@ -3533,6 +3613,7 @@ function manifestToConfig(manifest, runtime) {
       path: c.path,
       label: c.label,
       section: c.section,
+      form: c.form,
       list: c.list,
       relations: c.relations,
       detailModal: c.detailModal