@m4l/components 9.4.45 → 9.4.46

package/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/ColumnsConfig.js

@@ -0,0 +1,253 @@
+import { jsxs as I, jsx as i } from "@emotion/react/jsx-runtime";
+import { forwardRef as $, useRef as x, useState as p, useImperativeHandle as q, useMemo as _, useEffect as J } from "react";
+import { useModuleDictionary as Q } from "@m4l/core";
+import X from "react-data-grid";
+import { ColumnsConfigWrapperStyled as Z, ColumnsConfigDataGridStyled as ee, ColumnsConfigSelColumnsStyled as ne, TableWrapperDataGridStyled as te, ColumnsConfigActiosStyled as oe } from "../../../../../../slots/DataGridSlot.js";
+import { DICTIONARY as a } from "../../../../../../dictionary.js";
+import { ArrowChevronUpOutlined as ie, ArrowChevronMdUpOutlined as le, ArrowChevronDownOutlined as re, ArrowChevronMdDownOutlined as se, ActionsMultiCheckOutlined as ae, ActionsCheckIndeterminateOutlined as de, ArrowRestoreOutlined as ce } from "@m4l/icons";
+import { IconButton as c } from "../../../../../../../extended/mui/IconButton/IconButton.js";
+import { ColumnInteractiveCheckFormatter as E } from "../../../../../../formatters/ColumnInteractiveCheckFormatter/formatter.js";
+function R(u, w) {
+  return u.filter((l) => !l.hidden).map(
+    (l) => ({
+      key: l.key,
+      name: w?.find((h) => h.key === l.key)?.name ?? "",
+      visible: l.visible === void 0 ? !0 : l.visible,
+      showTitle: l.showTitle === void 0 ? !0 : l.showTitle,
+      originalIndex: l.originalIndex,
+      originalVisible: l.originalVisible,
+      originalShowTitle: l.originalShowTitle
+    })
+  );
+}
+const f = (u) => {
+  const w = u !== void 0 ? `rdg-cell-align-${u}` : "";
+  return {
+    cellClass: w,
+    headerCellClass: w
+  };
+}, ue = $(
+  (u, w) => {
+    const l = x(null), {
+      onCloseSettings: h,
+      columnsConfig: m,
+      onChangeColumnsConfig: N,
+      rowHeight: O,
+      classes: A,
+      size: T,
+      columns: k
+    } = u, { getLabel: s } = Q(), [L, M] = p(!0), [t, d] = p(
+      R(m, k)
+    ), [C, G] = p(
+      () => /* @__PURE__ */ new Set()
+    ), b = x(null);
+    q(w, () => ({
+      onClickIntro: H,
+      current: b.current
+    }));
+    const V = _(
+      () => [
+        {
+          key: "name",
+          name: s(a.SETTINGS_COLUMN_NAME),
+          width: 220,
+          resizable: !0,
+          type: "string",
+          ...f("left")
+        },
+        {
+          key: "visible",
+          name: s(a.SETTINGS_COLUMN_VISIBLE),
+          width: 80,
+          type: "boolean",
+          renderCell: E,
+          ...f("center")
+        },
+        {
+          key: "showTitle",
+          name: s(a.SETTINGS_COLUMN_SHOW_TITLE),
+          width: 100,
+          type: "boolean",
+          renderCell: E,
+          ...f("center")
+        }
+      ],
+      [s]
+    ), D = () => {
+      d(t.map((e) => ({ ...e, visible: !0 })));
+    }, U = () => {
+      d(t.map((e) => ({ ...e, visible: !1 })));
+    }, F = () => {
+      d(
+        t.map((e) => ({
+          ...e,
+          visible: e.originalVisible,
+          showTitle: e.originalShowTitle,
+          index: e.originalIndex
+        })).sort((e, n) => e.index - n.index)
+      );
+    };
+    J(() => {
+      L === !1 && d(R(m, k)), M(!1);
+    }, [m]);
+    const o = _(() => {
+      let e = -1;
+      if (C.size !== 1)
+        return e;
+      const r = C.entries().next().value?.[1];
+      return e = t.findIndex((S) => S.key === r), e;
+    }, [t, C]), B = () => {
+      if (o === -1)
+        return -1;
+      const e = [...t];
+      e.splice(o, 1), e.splice(0, 0, t[o]), l.current?.selectCell({ idx: 0, rowIdx: 0 }), d(e);
+    }, W = () => {
+      if (o === -1)
+        return -1;
+      const e = [...t];
+      e.splice(o, 1), e.splice(e.length, 0, t[o]), l.current?.selectCell({ idx: 0, rowIdx: e.length - 1 }), d(e);
+    }, y = (e) => {
+      if (o === -1)
+        return -1;
+      const n = [...t], r = n[o];
+      n.splice(o, 1), n.splice(o + e, 0, r), l.current?.selectCell({
+        idx: 0,
+        rowIdx: o + e
+      }), d(n);
+    }, z = (e) => {
+      const n = t.findIndex((r) => r.key === e);
+      if (n > -1)
+        return {
+          visible: t[n].visible,
+          showTitle: t[n].showTitle
+        };
+    }, g = (e) => {
+      const n = t.findIndex((r) => r.key === e.key);
+      return n > -1 ? n : m.findIndex(
+        (r) => r.key === e.key
+      );
+    }, H = () => {
+      const e = m.map((n) => {
+        const r = { ...n };
+        if (!n.hidden) {
+          const S = z(n.key);
+          S && (r.visible = S.visible, r.showTitle = S.showTitle);
+          const v = t.findIndex(
+            (Y) => Y.key === n.key
+          );
+          v > -1 && (r.index = v);
+        }
+        return r;
+      }).sort((n, r) => g(n) - g(r));
+      N(e), h();
+    }, j = () => {
+    }, K = (e) => {
+      d(e);
+    }, P = ({ row: e }) => {
+      if (C.has(e.key))
+        return;
+      const n = /* @__PURE__ */ new Set([e.key]);
+      G(n);
+    };
+    return /* @__PURE__ */ I(Z, { ownerState: {}, ref: b, children: [
+      /* @__PURE__ */ I(ee, { ownerState: {}, children: [
+        /* @__PURE__ */ i(ne, { ownerState: { size: T }, children: s(a.SETTINGS_SEL_COLUMNS) }),
+        /* @__PURE__ */ i(
+          te,
+          {
+            className: A?.tableWrapperDataGrid,
+            ownerState: { size: T },
+            children: /* @__PURE__ */ i(
+              X,
+              {
+                ref: l,
+                rowHeight: O,
+                columns: V,
+                rows: t,
+                onRowsChange: K,
+                selectedRows: C,
+                onSelectedRowsChange: j,
+                onCellClick: P,
+                rowKeyGetter: (e) => e.key,
+                defaultColumnOptions: { resizable: !0, sortable: !0 }
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ I(oe, { ownerState: {}, children: [
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_MOVE_FIRST),
+            onClick: B,
+            "aria-label": "move first place",
+            disabled: o < 1,
+            icon: /* @__PURE__ */ i(ie, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_MOVE_UP),
+            onClick: () => y(-1),
+            "aria-label": "move up place",
+            disabled: o < 1,
+            icon: /* @__PURE__ */ i(le, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_MOVE_LAST),
+            onClick: W,
+            "aria-label": "move last place",
+            disabled: o === t.length - 1 || o === -1,
+            icon: /* @__PURE__ */ i(re, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_MOVE_DOWN),
+            onClick: () => y(1),
+            "aria-label": "move down place",
+            disabled: o === t.length - 1 || o === -1,
+            icon: /* @__PURE__ */ i(se, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_VISIBLE_ALL),
+            onClick: D,
+            "aria-label": "check visible all",
+            icon: /* @__PURE__ */ i(ae, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_NO_VISIBLE_ALL),
+            onClick: U,
+            "aria-label": "un check all",
+            icon: /* @__PURE__ */ i(de, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          c,
+          {
+            tooltip: s(a.SETTINGS_RESTORE),
+            onClick: F,
+            "aria-label": "Restore columns",
+            icon: /* @__PURE__ */ i(ce, {})
+          }
+        )
+      ] })
+    ] });
+  }
+);
+ue.displayName = "ListViewColumnsConfig";
+export {
+  ue as ColumnsConfig
+};

package/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ColumnsConfig';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts

@@ -0,0 +1,32 @@
+import { DataGridContextProps, IViewConfig } from '../../../../../../contexts/DataGridContext/types';
+import { GridProps } from '../../../../../../types';
+import { Column } from 'react-data-grid';
+export interface Row {
+    key: string;
+    name: string;
+    visible: boolean;
+    showTitle: boolean;
+    width: number;
+    index: number;
+    originalIndex: number;
+    originalVisible: boolean;
+    originalShowTitle: boolean;
+}
+export type ColumnsConfigRef = {
+    onClickIntro: () => void;
+    current: HTMLDivElement | null;
+};
+export interface ConfigProps {
+    onCloseSettings: () => void;
+    columns: readonly Column<any, any>[];
+    columnsConfig: IViewConfig[];
+    onChangeColumnsConfig: (newColumnsConfig: IViewConfig[]) => void;
+    rowHeight: number;
+    classes: DataGridContextProps<unknown, unknown>['classes'];
+    size: GridProps<unknown, unknown>['size'];
+}
+export interface CheckFormatterProps {
+    key: string;
+    row: any;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/Settings/subcomponents/ColumnsConfig/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,WAAW,EACZ,MAAM,kDAAkD,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,WAAW,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,OAAO,EAAE,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IACrC,aAAa,EAAE,WAAW,EAAE,CAAC;IAC7B,qBAAqB,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,oBAAoB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3D,IAAI,EAAE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C;AAED,MAAM,WAAW,mBAAmB;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,GAAG,CAAC;CACV"}

package/components/datagrids/views/ListView/subcomponents/Settings/types.d.ts

@@ -0,0 +1,5 @@
+import { Column } from 'react-data-grid';
+export interface SettingsProps {
+    columns: readonly Column<any, any>[];
+}
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/subcomponents/Settings/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/ListView/subcomponents/Settings/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;CACtC"}

package/components/datagrids/views/ListView/types.d.ts

@@ -0,0 +1,7 @@
+import { GridProps, RowKey } from '../../types';
+/**
+ * Props for the ListView component.
+ * Same shape as GridProps; uses listViewConfig from context.
+ */
+export type ListViewProps<TRow, TSummaryRow, TKey extends RowKey = RowKey> = GridProps<TRow, TSummaryRow, TKey>;
+//# sourceMappingURL=types.d.ts.map

package/components/datagrids/views/ListView/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/components/src/components/datagrids/views/ListView/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAEhD;;;GAGG;AACH,MAAM,MAAM,aAAa,CACvB,IAAI,EACJ,WAAW,EACX,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1B,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC"}

package/components/datagrids/views/adapters/RenderContent/RenderContent.d.ts

@@ -1,6 +1,7 @@
 import { GridProps, RowKey } from '../../../types';
 /**
- * Componente que renderiza el contenido del DataGrid en formato de tarjetas o tabla, depende del viewMode.
+ * Renders DataGrid content based on viewMode: table, cards, or list.
+ * List view is independent and uses listViewConfig (columnsConfig or customRender).
  */
 export declare function RenderContent<TRow, TSummaryRow, TKey extends RowKey = RowKey>(props: GridProps<TRow, TSummaryRow, TKey>): import("@emotion/react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=RenderContent.d.ts.map

package/components/datagrids/views/adapters/RenderContent/RenderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderContent.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/datagrids/views/adapters/RenderContent/RenderContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAInD;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM,EAC3E,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,oDAY1C"}
+{"version":3,"file":"RenderContent.d.ts","sourceRoot":"","sources":["../../../../../../../../../packages/components/src/components/datagrids/views/adapters/RenderContent/RenderContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKnD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,SAAS,MAAM,GAAG,MAAM,EAC3E,KAAK,EAAE,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,oDAa1C"}

package/components/datagrids/views/adapters/RenderContent/RenderContent.js

@@ -1,10 +1,11 @@
-import { jsx as r, Fragment as o } from "@emotion/react/jsx-runtime";
-import { TableView as i } from "../../TableView/TableView.js";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import { ListView as n } from "../../ListView/ListView.js";
+import { TableView as f } from "../../TableView/TableView.js";
 import { CardsView as m } from "../../CardsView/CardsView.js";
-import { useDataGrid as n } from "../../../hooks/shared/useDataGrid/useDataGrid.js";
-function l(e) {
-  const { viewMode: t } = n();
-  return /* @__PURE__ */ r(o, { children: t === "table" ? /* @__PURE__ */ r(i, { ...e }) : /* @__PURE__ */ r(m, { ...e }) });
+import { useDataGrid as a } from "../../../hooks/shared/useDataGrid/useDataGrid.js";
+function l(i) {
+  const { viewMode: t, listViewConfig: e, cardsViewConfig: o } = a();
+  return t === "table" ? /* @__PURE__ */ r(f, { ...i }) : t === "list" && e ? /* @__PURE__ */ r(n, { ...i, listViewConfig: e }) : /* @__PURE__ */ r(m, { ...i, cardsViewConfig: o });
 }
 export {
   l as RenderContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.4.45",
+  "version": "9.4.46",
   "publishConfig": {
     "access": "public"
   },
@@ -52,20 +52,21 @@
     "nprogress": "^0.2.0",
     "date-fns": "^2.30.0",
     "react-transition-group": "^4.4.5",
-    "react-dropzone": "^14.2.2",
     "react-spinners": "^0.13.8",
-    "react-rnd": "^10.5.2",
     "react-draggable": "^4.4.5",
+    "react-dropzone": "^14.2.2",
+    "react-rnd": "^10.5.2",
     "chart.js": "^4.4.0",
     "chartjs-chart-error-bars": "^4.3.3",
     "qrcode.react": "^3.1.0",
-    "react-color": "^2.19.3",
+    "simplebar-react": "3.2.6",
     "@mui/x-date-pickers": "6.20.2",
+    "react-color": "^2.19.3",
     "react-resizable-panels": "^2.1.8",
-    "simplebar-react": "3.2.6",
     "react-data-grid": "7.0.0-beta.47",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-resizable": "^3.0.4"
+    "react-resizable": "^3.0.4",
+    "@tanstack/react-virtual": "3.13.23"
   }
 }

package/components/datagrids/views/CardsView/helpers/scrollToCardElement/index.d.ts

@@ -1,2 +0,0 @@
-export * from './scrollToCardElement';
-//# sourceMappingURL=index.d.ts.map

package/components/datagrids/views/CardsView/helpers/scrollToCardElement/scrollToCardElement.d.ts

@@ -1,10 +0,0 @@
-/**
- * Helper para hacer scroll a una card por su key.
- * Busca el elemento en el DOM usando querySelector y hace scrollIntoView.
- * @param containerElement - Elemento contenedor que tiene scroll
- * @param rowKey - Key de la fila/card a la que hacer scroll
- * @param selectorType - Tipo de selector: 'class' o 'data-attribute'
- * @param selectorName - Nombre de la clase o atributo base
- */
-export declare function scrollToCardElement(containerElement: HTMLElement | null, rowKey: string | number, selectorType?: 'class' | 'data-attribute', selectorName?: string): void;
-//# sourceMappingURL=scrollToCardElement.d.ts.map

package/components/datagrids/views/CardsView/helpers/scrollToCardElement/scrollToCardElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"scrollToCardElement.d.ts","sourceRoot":"","sources":["../../../../../../../../../../packages/components/src/components/datagrids/views/CardsView/helpers/scrollToCardElement/scrollToCardElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,gBAAgB,EAAE,WAAW,GAAG,IAAI,EACpC,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,YAAY,GAAE,OAAO,GAAG,gBAAmC,EAC3D,YAAY,SAAiB,GAC5B,IAAI,CA+BN"}

package/components/datagrids/views/CardsView/helpers/scrollToCardElement/scrollToCardElement.js

@@ -1,24 +0,0 @@
-function c(o, e, t = "data-attribute", l = "data-row-key") {
-  if (!o) {
-    console.warn("scrollToCardElement: containerElement is null");
-    return;
-  }
-  try {
-    const r = t === "class" ? `.${l}-${e}` : `[${l}="${e}"]`, n = o.querySelector(r);
-    if (!n) {
-      console.warn(
-        `scrollToCardElement: No se encontró card con selector "${r}"`
-      );
-      return;
-    }
-    n.scrollIntoView({
-      behavior: "smooth",
-      block: "end"
-    });
-  } catch (r) {
-    console.error("scrollToCardElement: Error al hacer scroll", r);
-  }
-}
-export {
-  c as scrollToCardElement
-};