@m5kdev/web-ui 0.6.0 → 0.8.0

package/dist/src/modules/table/components/ColumnOrderAndVisibility.d.ts

@@ -1,10 +1,20 @@
-import type { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
-import type { ColumnItem } from "./table.types";
+import { ColumnItem } from "./table.types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnOrderState, VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/table/components/ColumnOrderAndVisibility.d.ts
 interface ColumnOrderAndVisibilityProps {
-    layout: ColumnItem[];
-    onChangeOrder: (order: ColumnOrderState) => void;
-    onChangeVisibility: (visibility: VisibilityState) => void;
-    onClose: () => void;
+  layout: ColumnItem[];
+  onChangeOrder: (order: ColumnOrderState) => void;
+  onChangeVisibility: (visibility: VisibilityState) => void;
+  onClose: () => void;
 }
-export declare const ColumnOrderAndVisibility: ({ layout, onChangeOrder, onChangeVisibility, onClose, }: ColumnOrderAndVisibilityProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const ColumnOrderAndVisibility: ({
+  layout,
+  onChangeOrder,
+  onChangeVisibility,
+  onClose
+}: ColumnOrderAndVisibilityProps) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ColumnOrderAndVisibility };
+//# sourceMappingURL=ColumnOrderAndVisibility.d.ts.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.js

@@ -1,42 +1,85 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../../components/ui/button.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EyeIcon, EyeOffIcon, GripVertical } from "lucide-react";
 import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { SortableContext, arrayMove, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { EyeIcon, EyeOffIcon, GripVertical } from "lucide-react";
-import { useCallback, useState } from "react";
-import { Button } from "../../../components/ui/button";
-const ColumnOrderAndVisibilityItem = ({ column, onChangeVisibilityState, }) => {
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-        id: column.id,
-    });
-    return (_jsxs("div", { ref: setNodeRef, style: { transform: CSS.Transform.toString(transform), transition }, className: "flex justify-between items-center gap-2", children: [column.label, _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing touch-none", children: _jsx(GripVertical, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: () => onChangeVisibilityState(String(column.id)), children: column.visibility ? _jsx(EyeIcon, { className: "h-4 w-4" }) : _jsx(EyeOffIcon, { className: "h-4 w-4" }) })] })] }));
+//#region src/modules/table/components/ColumnOrderAndVisibility.tsx
+const ColumnOrderAndVisibilityItem = ({ column, onChangeVisibilityState }) => {
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: column.id });
+	return /* @__PURE__ */ jsxs("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		className: "flex justify-between items-center gap-2",
+		children: [column.label, /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				...attributes,
+				...listeners,
+				className: "cursor-grab active:cursor-grabbing touch-none",
+				children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				onClick: () => onChangeVisibilityState(String(column.id)),
+				children: column.visibility ? /* @__PURE__ */ jsx(EyeIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(EyeOffIcon, { className: "h-4 w-4" })
+			})]
+		})]
+	});
 };
-export const ColumnOrderAndVisibility = ({ layout, onChangeOrder, onChangeVisibility, onClose, }) => {
-    const [activeLayout, setActiveLayout] = useState([...layout]);
-    const onChangeVisibilityState = useCallback((columnId) => {
-        setActiveLayout((prev) => {
-            const index = prev.findIndex((c) => c.id === columnId);
-            if (index !== -1) {
-                const newLayout = [...prev];
-                newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };
-                return newLayout;
-            }
-            return prev;
-        });
-    }, []);
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
-        coordinateGetter: sortableKeyboardCoordinates,
-    }));
-    const onSubmit = useCallback(() => {
-        onChangeOrder(activeLayout.map((column) => column.id));
-        onChangeVisibility(Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility])));
-        onClose();
-    }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);
-    return (_jsxs("div", { className: "flex flex-col gap-2 p-1 min-w-[200px]", children: [_jsx(DndContext, { onDragEnd: ({ active, over }) => {
-                    if (over && active.id !== over?.id) {
-                        const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);
-                        const overIndex = activeLayout.findIndex(({ id }) => id === over.id);
-                        setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));
-                    }
-                }, sensors: sensors, children: _jsx(SortableContext, { items: activeLayout.map((column) => column.id), strategy: verticalListSortingStrategy, children: activeLayout.map((column) => (_jsx(ColumnOrderAndVisibilityItem, { column: column, onChangeVisibilityState: onChangeVisibilityState }, column.id))) }) }), _jsx(Button, { onClick: onSubmit, children: "Apply" })] }));
+const ColumnOrderAndVisibility = ({ layout, onChangeOrder, onChangeVisibility, onClose }) => {
+	const [activeLayout, setActiveLayout] = useState([...layout]);
+	const onChangeVisibilityState = useCallback((columnId) => {
+		setActiveLayout((prev) => {
+			const index = prev.findIndex((c) => c.id === columnId);
+			if (index !== -1) {
+				const newLayout = [...prev];
+				newLayout[index] = {
+					...prev[index],
+					visibility: !prev[index].visibility
+				};
+				return newLayout;
+			}
+			return prev;
+		});
+	}, []);
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const onSubmit = useCallback(() => {
+		onChangeOrder(activeLayout.map((column) => column.id));
+		onChangeVisibility(Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility])));
+		onClose();
+	}, [
+		activeLayout,
+		onChangeOrder,
+		onChangeVisibility,
+		onClose
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-2 p-1 min-w-[200px]",
+		children: [/* @__PURE__ */ jsx(DndContext, {
+			onDragEnd: ({ active, over }) => {
+				if (over && active.id !== over?.id) setActiveLayout(arrayMove(activeLayout, activeLayout.findIndex(({ id }) => id === active.id), activeLayout.findIndex(({ id }) => id === over.id)));
+			},
+			sensors,
+			children: /* @__PURE__ */ jsx(SortableContext, {
+				items: activeLayout.map((column) => column.id),
+				strategy: verticalListSortingStrategy,
+				children: activeLayout.map((column) => /* @__PURE__ */ jsx(ColumnOrderAndVisibilityItem, {
+					column,
+					onChangeVisibilityState
+				}, column.id))
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			onClick: onSubmit,
+			children: "Apply"
+		})]
+	});
 };
+//#endregion
+export { ColumnOrderAndVisibility };
+
+//# sourceMappingURL=ColumnOrderAndVisibility.js.map

package/dist/src/modules/table/components/ColumnOrderAndVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnOrderAndVisibility.js","names":[],"sources":["../../../../../src/modules/table/components/ColumnOrderAndVisibility.tsx"],"sourcesContent":["import { DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors } from \"@dnd-kit/core\";\r\nimport {\r\n  arrayMove,\r\n  SortableContext,\r\n  sortableKeyboardCoordinates,\r\n  useSortable,\r\n  verticalListSortingStrategy,\r\n} from \"@dnd-kit/sortable\";\r\nimport { CSS } from \"@dnd-kit/utilities\";\r\nimport { EyeIcon, EyeOffIcon, GripVertical } from \"lucide-react\";\r\nimport { useCallback, useState } from \"react\";\r\nimport type { ColumnOrderState, VisibilityState } from \"@tanstack/react-table\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport type { ColumnItem } from \"./table.types\";\r\n\r\ninterface ColumnOrderAndVisibilityItemProps {\r\n  column: ColumnItem;\r\n  onChangeVisibilityState: (columnId: string) => void;\r\n}\r\n\r\nconst ColumnOrderAndVisibilityItem = ({\r\n  column,\r\n  onChangeVisibilityState,\r\n}: ColumnOrderAndVisibilityItemProps) => {\r\n  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\r\n    id: column.id,\r\n  });\r\n  return (\r\n    <div\r\n      ref={setNodeRef}\r\n      style={{ transform: CSS.Transform.toString(transform), transition }}\r\n      className=\"flex justify-between items-center gap-2\"\r\n    >\r\n      {column.label}\r\n      <div className=\"flex items-center gap-2\">\r\n        <div\r\n          {...attributes}\r\n          {...listeners}\r\n          className=\"cursor-grab active:cursor-grabbing touch-none\"\r\n        >\r\n          <GripVertical className=\"h-4 w-4\" />\r\n        </div>\r\n        <Button\r\n          variant=\"ghost\"\r\n          size=\"icon\"\r\n          onClick={() => onChangeVisibilityState(String(column.id))}\r\n        >\r\n          {column.visibility ? <EyeIcon className=\"h-4 w-4\" /> : <EyeOffIcon className=\"h-4 w-4\" />}\r\n        </Button>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\ninterface ColumnOrderAndVisibilityProps {\r\n  layout: ColumnItem[];\r\n  onChangeOrder: (order: ColumnOrderState) => void;\r\n  onChangeVisibility: (visibility: VisibilityState) => void;\r\n  onClose: () => void;\r\n}\r\n\r\nexport const ColumnOrderAndVisibility = ({\r\n  layout,\r\n  onChangeOrder,\r\n  onChangeVisibility,\r\n  onClose,\r\n}: ColumnOrderAndVisibilityProps) => {\r\n  const [activeLayout, setActiveLayout] = useState<ColumnItem[]>([...layout]);\r\n\r\n  const onChangeVisibilityState = useCallback((columnId: string) => {\r\n    setActiveLayout((prev) => {\r\n      const index = prev.findIndex((c) => c.id === columnId);\r\n      if (index !== -1) {\r\n        const newLayout = [...prev];\r\n        newLayout[index] = { ...prev[index], visibility: !prev[index].visibility };\r\n        return newLayout;\r\n      }\r\n      return prev;\r\n    });\r\n  }, []);\r\n\r\n  const sensors = useSensors(\r\n    useSensor(PointerSensor),\r\n    useSensor(KeyboardSensor, {\r\n      coordinateGetter: sortableKeyboardCoordinates,\r\n    })\r\n  );\r\n\r\n  const onSubmit = useCallback(() => {\r\n    onChangeOrder(activeLayout.map((column) => column.id));\r\n    onChangeVisibility(\r\n      Object.fromEntries(activeLayout.map((column) => [column.id, column.visibility]))\r\n    );\r\n    onClose();\r\n  }, [activeLayout, onChangeOrder, onChangeVisibility, onClose]);\r\n\r\n  return (\r\n    <div className=\"flex flex-col gap-2 p-1 min-w-[200px]\">\r\n      <DndContext\r\n        onDragEnd={({ active, over }) => {\r\n          if (over && active.id !== over?.id) {\r\n            const activeIndex = activeLayout.findIndex(({ id }) => id === active.id);\r\n            const overIndex = activeLayout.findIndex(({ id }) => id === over.id);\r\n\r\n            setActiveLayout(arrayMove(activeLayout, activeIndex, overIndex));\r\n          }\r\n        }}\r\n        sensors={sensors}\r\n      >\r\n        <SortableContext\r\n          items={activeLayout.map((column) => column.id)}\r\n          strategy={verticalListSortingStrategy}\r\n        >\r\n          {activeLayout.map((column) => (\r\n            <ColumnOrderAndVisibilityItem\r\n              key={column.id}\r\n              column={column}\r\n              onChangeVisibilityState={onChangeVisibilityState}\r\n            />\r\n          ))}\r\n        </SortableContext>\r\n      </DndContext>\r\n      <Button onClick={onSubmit}>Apply</Button>\r\n    </div>\r\n  );\r\n};\r\n\r\n"],"mappings":";;;;;;;;AAoBA,MAAM,gCAAgC,EACpC,QACA,8BACuC;CACvC,MAAM,EAAE,YAAY,WAAW,YAAY,WAAW,eAAe,YAAY,EAC/E,IAAI,OAAO,IACZ,CAAC;AACF,QACE,qBAAC,OAAD;EACE,KAAK;EACL,OAAO;GAAE,WAAW,IAAI,UAAU,SAAS,UAAU;GAAE;GAAY;EACnE,WAAU;YAHZ,CAKG,OAAO,OACR,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,OAAD;IACE,GAAI;IACJ,GAAI;IACJ,WAAU;cAEV,oBAAC,cAAD,EAAc,WAAU,WAAY,CAAA;IAChC,CAAA,EACN,oBAAC,QAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAe,wBAAwB,OAAO,OAAO,GAAG,CAAC;cAExD,OAAO,aAAa,oBAAC,SAAD,EAAS,WAAU,WAAY,CAAA,GAAG,oBAAC,YAAD,EAAY,WAAU,WAAY,CAAA;IAClF,CAAA,CACL;KACF;;;AAWV,MAAa,4BAA4B,EACvC,QACA,eACA,oBACA,cACmC;CACnC,MAAM,CAAC,cAAc,mBAAmB,SAAuB,CAAC,GAAG,OAAO,CAAC;CAE3E,MAAM,0BAA0B,aAAa,aAAqB;AAChE,mBAAiB,SAAS;GACxB,MAAM,QAAQ,KAAK,WAAW,MAAM,EAAE,OAAO,SAAS;AACtD,OAAI,UAAU,IAAI;IAChB,MAAM,YAAY,CAAC,GAAG,KAAK;AAC3B,cAAU,SAAS;KAAE,GAAG,KAAK;KAAQ,YAAY,CAAC,KAAK,OAAO;KAAY;AAC1E,WAAO;;AAET,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,UAAU,WACd,UAAU,cAAc,EACxB,UAAU,gBAAgB,EACxB,kBAAkB,6BACnB,CAAC,CACH;CAED,MAAM,WAAW,kBAAkB;AACjC,gBAAc,aAAa,KAAK,WAAW,OAAO,GAAG,CAAC;AACtD,qBACE,OAAO,YAAY,aAAa,KAAK,WAAW,CAAC,OAAO,IAAI,OAAO,WAAW,CAAC,CAAC,CACjF;AACD,WAAS;IACR;EAAC;EAAc;EAAe;EAAoB;EAAQ,CAAC;AAE9D,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,YAAD;GACE,YAAY,EAAE,QAAQ,WAAW;AAC/B,QAAI,QAAQ,OAAO,OAAO,MAAM,GAI9B,iBAAgB,UAAU,cAHN,aAAa,WAAW,EAAE,SAAS,OAAO,OAAO,GAAG,EACtD,aAAa,WAAW,EAAE,SAAS,OAAO,KAAK,GAAG,CAEL,CAAC;;GAG3D;aAET,oBAAC,iBAAD;IACE,OAAO,aAAa,KAAK,WAAW,OAAO,GAAG;IAC9C,UAAU;cAET,aAAa,KAAK,WACjB,oBAAC,8BAAD;KAEU;KACiB;KACzB,EAHK,OAAO,GAGZ,CACF;IACc,CAAA;GACP,CAAA,EACb,oBAAC,QAAD;GAAQ,SAAS;aAAU;GAAc,CAAA,CACrC"}

package/dist/src/modules/table/components/NuqsTable.d.ts

@@ -1,24 +1,36 @@
-import type { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
-import type { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
-import type { ColumnDef } from "@tanstack/react-table";
-import type { ColumnDataType } from "./table.types";
-export type NuqsTableColumn<T> = ColumnDef<T> & {
-    visible?: boolean;
-    type?: ColumnDataType;
-    options?: {
-        label: string;
-        value: string;
-    }[];
-    endColumnId?: string;
-    groupable?: boolean;
+import { ColumnDataType as ColumnDataType$1 } from "./table.types.js";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnDef } from "@tanstack/react-table";
+import { FilterMethods } from "@m5kdev/commons/modules/table/filter.types";
+import { TableParams } from "@m5kdev/frontend/modules/table/hooks/useNuqsTable";
+
+//#region src/modules/table/components/NuqsTable.d.ts
+type NuqsTableColumn<T> = ColumnDef<T> & {
+  visible?: boolean;
+  type?: ColumnDataType$1;
+  options?: {
+    label: string;
+    value: string;
+  }[];
+  endColumnId?: string;
+  groupable?: boolean;
 };
 type NuqsTableParams<T> = {
-    data: T[];
-    total?: number;
-    columns: NuqsTableColumn<T>[];
-    tableProps: TableParams;
-    singleFilter?: boolean;
-    filterMethods?: Partial<FilterMethods>;
+  data: T[];
+  total?: number;
+  columns: NuqsTableColumn<T>[];
+  tableProps: TableParams;
+  singleFilter?: boolean;
+  filterMethods?: Partial<FilterMethods>;
 };
-export declare const NuqsTable: <T>({ data, total, columns, tableProps, singleFilter, filterMethods, }: NuqsTableParams<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
+declare const NuqsTable: <T>({
+  data,
+  total,
+  columns,
+  tableProps,
+  singleFilter,
+  filterMethods
+}: NuqsTableParams<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NuqsTable, NuqsTableColumn };
+//# sourceMappingURL=NuqsTable.d.ts.map