@oondemand/oon-core-front 0.3.14 → 0.3.16

package/dist/index.d.ts

@@ -674,8 +674,9 @@ interface CoreCollectionProps {
     list?: OonCollectionListConfig;
     relations?: Record<string, OonRelationDef>;
     detailModal?: OonDetailModalConfig;
+    cellRenderers?: OonComponentRegistry["cellRenderers"];
 }
-declare function CoreCollection({ model, label, section, mode, endpoint, columns, form, importExport, list, relations, detailModal }: CoreCollectionProps): react.JSX.Element;
+declare function CoreCollection({ model, label, section, mode, endpoint, columns, form, importExport, list, relations, detailModal, cellRenderers }: CoreCollectionProps): react.JSX.Element;
 
 interface CoreDocumentProps {
     model: string;

package/dist/index.js

@@ -787,6 +787,12 @@ function renderCell(value, kind) {
   }
   return formatted;
 }
+function renderColumnCell(row, column, cellRenderers) {
+  const value = row[column.field];
+  const Renderer = column.renderer ? cellRenderers?.[column.renderer] : void 0;
+  if (Renderer) return /* @__PURE__ */ jsx7(Renderer, { value, row, column });
+  return renderCell(value, column.kind);
+}
 function DataGrid({
   resource,
   resourceKey,
@@ -798,7 +804,8 @@ function DataGrid({
   toolbarExtra,
   filters = [],
   queryExtra,
-  renderRowActions
+  renderRowActions,
+  cellRenderers
 }) {
   const [pageIndex, setPageIndex] = useState3(0);
   const [pageSize, setPageSize] = useState3(20);
@@ -904,7 +911,7 @@ function DataGrid({
         actionCount ? /* @__PURE__ */ jsx7(Table.ColumnHeader, { w: "84px", h: "39px", px: "10px", py: "8px", color: "#667085", borderBottomWidth: "1px", borderColor: "#D5DDE3", fontSize: "10px", fontWeight: "600", textAlign: "center", children: "A\xE7\xF5es" }) : null
       ] }) }),
       /* @__PURE__ */ jsx7(Table.Body, { children: rows.length === 0 ? /* @__PURE__ */ jsx7(Table.Row, { children: /* @__PURE__ */ jsx7(Table.Cell, { colSpan: columns.length + actionCount, children: /* @__PURE__ */ jsx7(Text3, { minH: "140px", display: "grid", placeItems: "center", color: "#98A2B3", fontSize: "12px", children: "Nenhum registro encontrado." }) }) }) : rows.map((row, index) => /* @__PURE__ */ jsxs3(Table.Row, { bg: index % 2 ? "#FBFCFD" : "white", _hover: { bg: "#F0F7FF" }, children: [
-        columns.map((column) => /* @__PURE__ */ jsx7(Table.Cell, { maxW: "250px", h: "42px", px: "10px", py: "8px", overflow: "hidden", color: "#52606D", borderBottomWidth: "1px", borderColor: "#EEF1F3", fontSize: "11px", textOverflow: "ellipsis", whiteSpace: "nowrap", children: renderCell(row[column.field], column.kind) }, column.field)),
+        columns.map((column) => /* @__PURE__ */ jsx7(Table.Cell, { maxW: "250px", h: "42px", px: "10px", py: "8px", overflow: "hidden", color: "#52606D", borderBottomWidth: "1px", borderColor: "#EEF1F3", fontSize: "11px", textOverflow: "ellipsis", whiteSpace: "nowrap", children: renderColumnCell(row, column, cellRenderers) }, column.field)),
         actionCount ? /* @__PURE__ */ jsx7(Table.Cell, { h: "42px", px: "10px", py: "5px", borderBottomWidth: "1px", borderColor: "#EEF1F3", textAlign: "center", children: /* @__PURE__ */ jsxs3(Flex2, { justify: "center", gap: "5px", children: [
           onEdit ? /* @__PURE__ */ jsx7(Button2, { type: "button", "aria-label": "Editar", w: "31px", minW: "31px", h: "31px", p: 0, color: "#667085", bg: "white", borderWidth: "1px", borderColor: "#E5E9ED", borderRadius: "6px", onClick: () => onEdit(row), _hover: { color: "#036491", bg: "#F0F7FF", borderColor: "#B8D9EB" }, children: /* @__PURE__ */ jsx7(EditIcon, {}) }) : null,
           onDelete ? /* @__PURE__ */ jsx7(Button2, { type: "button", "aria-label": "Excluir", w: "31px", minW: "31px", h: "31px", p: 0, color: "#667085", bg: "white", borderWidth: "1px", borderColor: "#E5E9ED", borderRadius: "6px", onClick: () => onDelete(row), _hover: { color: "#B42318", bg: "#FFF5F5", borderColor: "#FECACA" }, children: /* @__PURE__ */ jsx7(TrashIcon, {}) }) : null,
@@ -1991,7 +1998,7 @@ function mergeFormFields(metadataFields, overrides) {
   });
   return merged;
 }
-function CoreCollection({ model, label, section = "Cole\xE7\xE3o", mode = "dynamic", endpoint, columns, form, importExport, list, relations, detailModal }) {
+function CoreCollection({ model, label, section = "Cole\xE7\xE3o", mode = "dynamic", endpoint, columns, form, importExport, list, relations, detailModal, cellRenderers }) {
   const needsSchema = mode !== "full" || !columns || !form || !endpoint;
   const schemaQuery = useModelSchema(needsSchema ? model : "");
   const schema = schemaQuery.data;
@@ -2038,6 +2045,7 @@ function CoreCollection({ model, label, section = "Cole\xE7\xE3o", mode = "dynam
         resourceKey: basePath,
         columns: resolvedColumns,
         filters: list?.filters,
+        cellRenderers,
         onCreate: () => {
           setFormError(null);
           if (detailModal?.enabled) setDetailState({ open: true });
@@ -2471,7 +2479,7 @@ function viewLabel(view) {
   if (view.type === "dashboard") return "Dashboard";
   return view.model;
 }
-function renderView(view) {
+function renderView(view, registry) {
   switch (view.type) {
     case "collection": {
       const v = view;
@@ -2487,7 +2495,8 @@ function renderView(view) {
           importExport: v.importExport,
           list: v.list,
           relations: v.relations,
-          detailModal: v.detailModal
+          detailModal: v.detailModal,
+          cellRenderers: registry?.cellRenderers
         }
       );
     }
@@ -2515,10 +2524,10 @@ function renderView(view) {
       return null;
   }
 }
-function viewToRoute(view) {
+function viewToRoute(view, registry) {
   return {
     path: viewPath(view),
-    element: renderView(view),
+    element: renderView(view, registry),
     permissions: requiredAccess2(view)
   };
 }
@@ -2543,6 +2552,7 @@ function resolveRegistry(config) {
   const routes = [];
   const menu = [];
   const seenPaths = /* @__PURE__ */ new Set();
+  const componentRegistry = config.registry ?? config.ui?.registry;
   const pushRoute = (route) => {
     if (seenPaths.has(route.path)) return;
     seenPaths.add(route.path);
@@ -2552,7 +2562,7 @@ function resolveRegistry(config) {
     for (const route of mod.routes ?? []) pushRoute({ ...route, permissions: requiredAccess2(route) });
     for (const item of mod.menu ?? []) menu.push({ ...item, permissions: requiredAccess2(item) });
     for (const view of mod.views ?? []) {
-      pushRoute(viewToRoute(view));
+      pushRoute(viewToRoute(view, componentRegistry));
       menu.push(viewToMenu(view));
     }
   }
@@ -2561,11 +2571,11 @@ function resolveRegistry(config) {
   const includeManual = navMode === "manual" || navMode === "mixed";
   if (includeAuto) {
     for (const view of config.ui?.views ?? []) {
-      pushRoute(viewToRoute(view));
+      pushRoute(viewToRoute(view, componentRegistry));
       menu.push(viewToMenu(view));
     }
     for (const page of config.ui?.pages ?? []) {
-      pushRoute(pageToRoute(page, config.registry ?? config.ui?.registry));
+      pushRoute(pageToRoute(page, componentRegistry));
       const item = pageToMenu(page);
       if (item) menu.push(item);
     }