dn-react-router-toolkit 0.8.0 → 0.9.0

package/dist/table/table_form.js

@@ -40,7 +40,8 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
@@ -65,8 +66,8 @@ function Table({
                 "button",
                 {
                   className: (0, import_utils.cn)(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -87,14 +88,45 @@ function Table({
             }
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: reactNode });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: (0, import_utils.cn)("border-y font-normal"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, {}) }, key);
+          const filter = filters?.[key];
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "th",
+            {
+              className: (0, import_utils.cn)("py-4 border-y font-normal align-top"),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Head, {}),
+                filter && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-3 mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(key, encodeURIComponent(value2));
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option, children: option }, option))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [
           sortedArray.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
@@ -119,7 +151,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {})
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {});
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -133,16 +165,7 @@ function Table({
 var import_react_router2 = require("react-router");
 function useTable() {
   const { table } = (0, import_react_router2.useLoaderData)();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 
 // src/table/buttons.tsx
@@ -225,7 +248,16 @@ function TableForm({
   primaryKey = "id"
 }) {
   const { pathname } = (0, import_react_router4.useLocation)();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
   const navigate = (0, import_react_router4.useNavigate)();
   const search = (query) => {
     const searchParams2 = new URLSearchParams(window.location.search);
@@ -238,7 +270,7 @@ function TableForm({
     searchKey && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "form",
       {
-        className: "h-18 px-4 flex items-center border-t",
+        className: "h-20 px-4 flex items-center border-t",
         onSubmit: (e) => {
           e.preventDefault();
           const formData = new FormData(e.currentTarget);
@@ -275,7 +307,8 @@ function TableForm({
         limit,
         offset,
         orderBy,
-        direction
+        direction,
+        filters
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(

package/dist/table/table_form.mjs

@@ -16,7 +16,8 @@ function Table({
   limit,
   offset,
   orderBy,
-  direction
+  direction,
+  filters
 }) {
   const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
   const sortedArray = [...data];
@@ -41,8 +42,8 @@ function Table({
                 "button",
                 {
                   className: cn(
-                    orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
-                    "px-4 h-14 flex items-center w-full"
+                    orderBy === key ? "text-gray-900 font-medium" : "text-gray-500 font-medium",
+                    "px-4 flex items-center w-full"
                   ),
                   onClick: () => {
                     let newDirection = "asc";
@@ -63,14 +64,45 @@ function Table({
             }
             return /* @__PURE__ */ jsx(Fragment, { children: reactNode });
           }
-          return /* @__PURE__ */ jsx("th", { className: cn("border-y font-normal"), children: /* @__PURE__ */ jsx(Head, {}) }, key);
+          const filter = filters?.[key];
+          return /* @__PURE__ */ jsxs(
+            "th",
+            {
+              className: cn("py-4 border-y font-normal align-top"),
+              children: [
+                /* @__PURE__ */ jsx(Head, {}),
+                filter && /* @__PURE__ */ jsx("div", { className: "px-3 mt-4", children: /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: "w-full h-10 px-1.5 border rounded-full outline-none",
+                    onChange: (e) => {
+                      const value2 = e.target.value;
+                      setSearchParams((prev) => {
+                        if (value2) {
+                          prev.set(key, encodeURIComponent(value2));
+                        } else {
+                          prev.delete(key);
+                        }
+                        return prev;
+                      });
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "", children: "\uC804\uCCB4" }),
+                      filter.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+                    ]
+                  }
+                ) })
+              ]
+            },
+            key
+          );
         }) }) }),
         /* @__PURE__ */ jsxs("tbody", { children: [
           sortedArray.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
             "td",
             {
               colSpan: keys.length,
-              className: "px-4 h-14 text-neutral-400 text-center",
+              className: "px-4 h-20 text-gray-400 text-center",
               children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
             }
           ) }),
@@ -95,7 +127,7 @@ function Table({
                 className: "block content-center px-4 w-full h-full",
                 children: /* @__PURE__ */ jsx(Content, {})
               }
-            ) : /* @__PURE__ */ jsx(Content, {});
+            ) : /* @__PURE__ */ jsx("div", { className: "px-4 w-full h-full content-center", children: /* @__PURE__ */ jsx(Content, {}) });
             const cell = Mapper ? /* @__PURE__ */ jsx(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
             return /* @__PURE__ */ jsx("td", { className: "px-0 h-14 border-b", children: cell }, key);
           }) }, i))
@@ -109,16 +141,7 @@ function Table({
 import { useLoaderData } from "react-router";
 function useTable() {
   const { table } = useLoaderData();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 
 // src/table/buttons.tsx
@@ -201,7 +224,16 @@ function TableForm({
   primaryKey = "id"
 }) {
   const { pathname } = useLocation2();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = useTable();
+  const {
+    items,
+    total,
+    limit,
+    offset,
+    orderBy,
+    direction,
+    searchKey,
+    filters
+  } = useTable();
   const navigate = useNavigate();
   const search = (query) => {
     const searchParams2 = new URLSearchParams(window.location.search);
@@ -214,7 +246,7 @@ function TableForm({
     searchKey && /* @__PURE__ */ jsxs3(
       "form",
       {
-        className: "h-18 px-4 flex items-center border-t",
+        className: "h-20 px-4 flex items-center border-t",
         onSubmit: (e) => {
           e.preventDefault();
           const formData = new FormData(e.currentTarget);
@@ -251,7 +283,8 @@ function TableForm({
         limit,
         offset,
         orderBy,
-        direction
+        direction,
+        filters
       }
     ),
     /* @__PURE__ */ jsx3(

package/dist/table/use_table.d.mts

@@ -1,4 +1,4 @@
-type LoadedTable<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
-declare function useTable<T extends (...args: any) => any>(): LoadedTable<T>;
+type TableLoaderData<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
+declare function useTable<T extends (...args: any) => any>(): TableLoaderData<T>;
 
-export { type LoadedTable, useTable };
+export { type TableLoaderData, useTable };

package/dist/table/use_table.d.ts

@@ -1,4 +1,4 @@
-type LoadedTable<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
-declare function useTable<T extends (...args: any) => any>(): LoadedTable<T>;
+type TableLoaderData<T extends (...args: any) => any> = Awaited<ReturnType<T>>["table"];
+declare function useTable<T extends (...args: any) => any>(): TableLoaderData<T>;
 
-export { type LoadedTable, useTable };
+export { type TableLoaderData, useTable };

package/dist/table/use_table.js

@@ -26,16 +26,7 @@ module.exports = __toCommonJS(use_table_exports);
 var import_react_router = require("react-router");
 function useTable() {
   const { table } = (0, import_react_router.useLoaderData)();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/table/use_table.mjs

@@ -2,16 +2,7 @@
 import { useLoaderData } from "react-router";
 function useTable() {
   const { table } = useLoaderData();
-  const { items, total, limit, offset, orderBy, direction, searchKey } = table;
-  return {
-    items,
-    total,
-    limit,
-    offset,
-    orderBy,
-    direction,
-    searchKey
-  };
+  return table;
 }
 export {
   useTable

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dn-react-router-toolkit",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.mjs",
   "module": "./dist/index.js",

package/dist/crud/crud_loader.d.mts

@@ -1,26 +0,0 @@
-import { LoaderFunctionArgs, LoaderFunction } from 'react-router';
-import { TableItemLoaderOptions } from '../table/item_loader.mjs';
-import { TableRepository } from '../table/repository.mjs';
-import { TableLoaderOptions } from '../table/load_table.mjs';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
-import { APIHandlerOptions } from '../api/create_api_handler.mjs';
-import 'drizzle-orm';
-import 'drizzle-orm/node-postgres';
-import '../auth/with_auth.mjs';
-import 'dn-react-toolkit/auth';
-import 'dn-react-toolkit/auth/server';
-
-type CrudHandlerOptions<T extends PgTableWithColumns<any>, TSelect> = {
-    repository: TableRepository<T, TSelect>;
-    apiHandlerOptions: Omit<APIHandlerOptions<T, TSelect>, "repository">;
-    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository"> & {
-        loader?: LoaderFunction;
-    };
-    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository"> & {
-        loader?: LoaderFunction;
-    };
-};
-type CrudHandler = (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
-declare function crudHandler<T extends PgTableWithColumns<any>, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<unknown>;
-
-export { type CrudHandler, type CrudHandlerOptions, crudHandler };

package/dist/crud/crud_loader.d.ts

@@ -1,26 +0,0 @@
-import { LoaderFunctionArgs, LoaderFunction } from 'react-router';
-import { TableItemLoaderOptions } from '../table/item_loader.js';
-import { TableRepository } from '../table/repository.js';
-import { TableLoaderOptions } from '../table/load_table.js';
-import { PgTableWithColumns } from 'drizzle-orm/pg-core';
-import { APIHandlerOptions } from '../api/create_api_handler.js';
-import 'drizzle-orm';
-import 'drizzle-orm/node-postgres';
-import '../auth/with_auth.js';
-import 'dn-react-toolkit/auth';
-import 'dn-react-toolkit/auth/server';
-
-type CrudHandlerOptions<T extends PgTableWithColumns<any>, TSelect> = {
-    repository: TableRepository<T, TSelect>;
-    apiHandlerOptions: Omit<APIHandlerOptions<T, TSelect>, "repository">;
-    loaderOptions: Omit<TableLoaderOptions<T, TSelect>, "repository"> & {
-        loader?: LoaderFunction;
-    };
-    itemLoaderOptions: Omit<TableItemLoaderOptions<T, TSelect>, "repository"> & {
-        loader?: LoaderFunction;
-    };
-};
-type CrudHandler = (prefix: string) => (args: LoaderFunctionArgs) => Promise<any>;
-declare function crudHandler<T extends PgTableWithColumns<any>, TSelect>({ repository, apiHandlerOptions, loaderOptions, itemLoaderOptions, }: CrudHandlerOptions<T, TSelect>): (prefix: string) => (args: LoaderFunctionArgs) => Promise<unknown>;
-
-export { type CrudHandler, type CrudHandlerOptions, crudHandler };