dn-react-router-toolkit 0.5.2 → 0.5.4

package/dist/crud/index.js

@@ -69,58 +69,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {
@@ -163,33 +161,65 @@ function CrudFormProvider({
 // src/crud/crud_form.tsx
 var import_store2 = require("dn-react-toolkit/store");
 var import_react3 = __toESM(require("react"));
+var import_utils = require("dn-react-toolkit/utils");
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ import_react3.default.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ import_react3.default.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ import_react3.default.createElement(value.component, null) : /* @__PURE__ */ import_react3.default.createElement(
-        import_store2.SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ import_react3.default.createElement(value.component, { store: form.store, property: key });
+        }
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ import_react3.default.createElement(
+            import_store2.SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return (0, import_utils.moment)(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return (0, import_utils.moment)(value2).toDate();
+              }
+            }
+          );
         }
-      ))
-    )),
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react3.default.createElement(Component, null));
+        }
+        return /* @__PURE__ */ import_react3.default.createElement(
+          import_store2.SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ import_react3.default.createElement(
       "button",
       {
@@ -248,24 +278,16 @@ function tableLoader({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };
@@ -451,13 +473,35 @@ function crudHandler({
       }
     }
     if (pattern === prefix2) {
-      return tableLoader({
+      const body = await tableLoader({
         ...loaderOptions,
         repository
       })(args);
+      if (loaderOptions.loader) {
+        const result = await loaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
     if (pattern.startsWith(prefix2)) {
-      return tableItemloader({ ...itemLoaderOptions, repository })(args);
+      const body = await tableItemloader({ ...itemLoaderOptions, repository })(
+        args
+      );
+      if (itemLoaderOptions.loader) {
+        const result = await itemLoaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
   };
 }
@@ -618,7 +662,7 @@ function GoSearch(props) {
 }
 
 // src/table/buttons.tsx
-var import_utils = require("dn-react-toolkit/utils");
+var import_utils2 = require("dn-react-toolkit/utils");
 var import_react_router4 = require("react-router");
 var import_react6 = __toESM(require("react"));
 function TablePageButtons({
@@ -663,7 +707,7 @@ function TablePageButtons({
           );
           return `${pathname}?${searchParams.toString()}`;
         })(),
-        className: (0, import_utils.cn)(
+        className: (0, import_utils2.cn)(
           "w-6 block text-center transition-colors",
           currentPage === startButton + index2 + 1 ? "font-bold text-primary" : "hover:text-primary"
         )
@@ -687,7 +731,7 @@ function TablePageButtons({
 }
 
 // src/table/table.tsx
-var import_utils2 = require("dn-react-toolkit/utils");
+var import_utils3 = require("dn-react-toolkit/utils");
 var import_react_router5 = require("react-router");
 var import_react7 = __toESM(require("react"));
 function Table({
@@ -707,7 +751,7 @@ function Table({
   return /* @__PURE__ */ import_react7.default.createElement(
     "table",
     {
-      className: (0, import_utils2.cn)(
+      className: (0, import_utils3.cn)(
         className,
         "text-[15px] border-separate border-spacing-0"
       )
@@ -726,7 +770,7 @@ function Table({
           return /* @__PURE__ */ import_react7.default.createElement(
             "button",
             {
-              className: (0, import_utils2.cn)(
+              className: (0, import_utils3.cn)(
                 orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
                 "px-4 h-14 flex items-center w-full"
               ),
@@ -751,7 +795,7 @@ function Table({
         "th",
         {
           key,
-          className: (0, import_utils2.cn)("border-y font-normal")
+          className: (0, import_utils3.cn)("border-y font-normal")
         },
         /* @__PURE__ */ import_react7.default.createElement(Head, null)
       );

package/dist/crud/index.mjs

@@ -27,58 +27,56 @@ function CrudFormProvider({
         "Content-Type": "application/json"
       },
       body: JSON.stringify(
-        Object.entries(store.state).reduce(
-          function reducer(acc, [key, value]) {
-            const converter = (value2) => {
-              if (value2 === void 0) {
-                return void 0;
-              }
-              if (value2 === null) {
-                return {
-                  type: "null",
-                  value: null
-                };
-              }
-              if (typeof value2 === "string") {
-                return {
-                  type: "string",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "number") {
-                return {
-                  type: "number",
-                  value: value2
-                };
-              }
-              if (typeof value2 === "boolean") {
-                return {
-                  type: "boolean",
-                  value: value2
-                };
-              }
-              if (value2 instanceof Date) {
-                return {
-                  type: "date",
-                  value: value2.toISOString()
-                };
-              }
-              if (Array.isArray(value2)) {
-                return value2.map((v) => converter(v));
-              }
-              if (typeof value2 === "object") {
-                return Object.entries(
-                  value2
-                ).reduce(reducer, {});
-              }
-            };
-            return {
-              ...acc,
-              [key]: converter(value)
-            };
-          },
-          {}
-        )
+        Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
+          const converter = (value2) => {
+            if (value2 === void 0) {
+              return void 0;
+            }
+            if (value2 === null) {
+              return {
+                type: "null",
+                value: null
+              };
+            }
+            if (typeof value2 === "string") {
+              return {
+                type: "string",
+                value: value2
+              };
+            }
+            if (typeof value2 === "number") {
+              return {
+                type: "number",
+                value: value2
+              };
+            }
+            if (typeof value2 === "boolean") {
+              return {
+                type: "boolean",
+                value: value2
+              };
+            }
+            if (value2 instanceof Date) {
+              return {
+                type: "date",
+                value: value2.toISOString()
+              };
+            }
+            if (Array.isArray(value2)) {
+              return value2.map((v) => converter(v));
+            }
+            if (typeof value2 === "object") {
+              return Object.entries(value2).reduce(
+                reducer,
+                {}
+              );
+            }
+          };
+          return {
+            ...acc,
+            [key]: converter(value)
+          };
+        }, {})
       )
     });
     if (!res.ok) {
@@ -119,35 +117,67 @@ function CrudFormProvider({
 }
 
 // src/crud/crud_form.tsx
-import { SyncInput } from "dn-react-toolkit/store";
+import { SyncInput, SyncSelect, SyncSwitch } from "dn-react-toolkit/store";
 import React2 from "react";
+import { moment } from "dn-react-toolkit/utils";
 function CrudForm({ AdminLayout }) {
   const form = useFormContext();
   return /* @__PURE__ */ React2.createElement(
     AdminLayout,
     {
       title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
-      actions: /* @__PURE__ */ React2.createElement(
-        "button",
-        {
-          type: "button",
-          className: "button-primary",
-          onClick: form.submit
-        },
-        "\uC800\uC7A5\uD558\uAE30"
-      ),
+      actions: /* @__PURE__ */ React2.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
       className: "max-w-3xl mx-auto"
     },
-    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(form.columns).map(
-      ([key, value]) => /* @__PURE__ */ React2.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ React2.createElement(value.component, null) : /* @__PURE__ */ React2.createElement(
-        SyncInput,
-        {
-          store: form.store,
-          property: key,
-          className: "input-form"
+    Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(
+      form.columns
+    ).map(([key, value]) => {
+      const createComponent = () => {
+        if (value.component) {
+          return /* @__PURE__ */ React2.createElement(value.component, { store: form.store, property: key });
+        }
+        if (value.type === "checkbox") {
+          return /* @__PURE__ */ React2.createElement(SyncSwitch, { store: form.store, property: key });
+        }
+        if (value.type === "datetime") {
+          return /* @__PURE__ */ React2.createElement(
+            SyncInput,
+            {
+              store: form.store,
+              property: key,
+              className: "input-form",
+              type: "datetime-local",
+              serializer: (value2) => {
+                if (value2 instanceof Date) {
+                  return moment(value2).toISOString(true).slice(0, 16);
+                }
+                return String(value2);
+              },
+              deserializer: (value2) => {
+                if (!value2) {
+                  return void 0;
+                }
+                return moment(value2).toDate();
+              }
+            }
+          );
         }
-      ))
-    )),
+        if (value.options) {
+          const Component = value.options;
+          return /* @__PURE__ */ React2.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React2.createElement(Component, null));
+        }
+        return /* @__PURE__ */ React2.createElement(
+          SyncInput,
+          {
+            store: form.store,
+            property: key,
+            type: value.type,
+            className: "input-form"
+          }
+        );
+      };
+      return /* @__PURE__ */ React2.createElement("label", { key }, value.label, createComponent());
+    })),
     form.item && /* @__PURE__ */ React2.createElement(
       "button",
       {
@@ -209,24 +239,16 @@ function tableLoader({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };
@@ -421,13 +443,35 @@ function crudHandler({
       }
     }
     if (pattern === prefix2) {
-      return tableLoader({
+      const body = await tableLoader({
         ...loaderOptions,
         repository
       })(args);
+      if (loaderOptions.loader) {
+        const result = await loaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
     if (pattern.startsWith(prefix2)) {
-      return tableItemloader({ ...itemLoaderOptions, repository })(args);
+      const body = await tableItemloader({ ...itemLoaderOptions, repository })(
+        args
+      );
+      if (itemLoaderOptions.loader) {
+        const result = await itemLoaderOptions.loader(args);
+        if (typeof result === "object") {
+          return {
+            ...result,
+            ...body
+          };
+        }
+      }
+      return body;
     }
   };
 }

package/dist/table/index.js

@@ -158,24 +158,16 @@ function TablePageButtons({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };

package/dist/table/index.mjs

@@ -123,24 +123,16 @@ function TablePageButtons({
 
 // src/table/item_loader.tsx
 var tableItemloader = ({
-  loader,
   repository
 }) => {
-  return async ({ params }) => {
-    const body = loader ? await (async () => {
-      const result = await loader({ params });
-      if (result instanceof Response) {
-        return result.json();
-      }
-      return result;
-    })() : {};
+  return async (args) => {
+    const { params } = args;
     if (params["itemId"] === "new") {
-      return { item: void 0, ...body };
+      return { item: void 0 };
     }
     const item = params["itemId"] ? await repository.find(params["itemId"]) : void 0;
     return {
-      item,
-      ...body
+      item
     };
   };
 };

package/dist/table/item_loader.d.mts

@@ -4,9 +4,10 @@ import { LoaderFunctionArgs } from 'react-router';
 import 'drizzle-orm/pg-core';
 
 type TableItemLoaderOptions<T extends Table, TSelect> = {
-    loader?: (args: LoaderFunctionArgs) => Promise<any>;
     repository: TableRepository<T, TSelect>;
 };
-declare const tableItemloader: <T extends Table, TSelect>({ loader, repository, }: TableItemLoaderOptions<T, TSelect>) => ({ params }: LoaderFunctionArgs) => Promise<any>;
+declare const tableItemloader: <T extends Table, TSelect>({ repository, }: TableItemLoaderOptions<T, TSelect>) => (args: LoaderFunctionArgs) => Promise<{
+    item: Awaited<TSelect> | undefined;
+}>;
 
 export { type TableItemLoaderOptions, tableItemloader };

package/dist/table/item_loader.d.ts

@@ -4,9 +4,10 @@ import { LoaderFunctionArgs } from 'react-router';
 import 'drizzle-orm/pg-core';
 
 type TableItemLoaderOptions<T extends Table, TSelect> = {
-    loader?: (args: LoaderFunctionArgs) => Promise<any>;
     repository: TableRepository<T, TSelect>;
 };
-declare const tableItemloader: <T extends Table, TSelect>({ loader, repository, }: TableItemLoaderOptions<T, TSelect>) => ({ params }: LoaderFunctionArgs) => Promise<any>;
+declare const tableItemloader: <T extends Table, TSelect>({ repository, }: TableItemLoaderOptions<T, TSelect>) => (args: LoaderFunctionArgs) => Promise<{
+    item: Awaited<TSelect> | undefined;
+}>;
 
 export { type TableItemLoaderOptions, tableItemloader };