dn-react-router-toolkit 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/crud/crud_form.js +50 -18
  2. package/dist/crud/crud_form.mjs +51 -19
  3. package/dist/crud/crud_form_provider.d.mts +10 -6
  4. package/dist/crud/crud_form_provider.d.ts +10 -6
  5. package/dist/crud/crud_form_provider.js +50 -52
  6. package/dist/crud/crud_form_provider.mjs +50 -52
  7. package/dist/crud/crud_page.d.mts +0 -1
  8. package/dist/crud/crud_page.d.ts +0 -1
  9. package/dist/crud/crud_page.js +100 -70
  10. package/dist/crud/crud_page.mjs +101 -71
  11. package/dist/crud/generate_pages.d.mts +0 -1
  12. package/dist/crud/generate_pages.d.ts +0 -1
  13. package/dist/crud/index.d.mts +1 -1
  14. package/dist/crud/index.d.ts +1 -1
  15. package/dist/crud/index.js +106 -76
  16. package/dist/crud/index.mjs +101 -71
  17. package/package.json +1 -1
package/dist/crud/crud_form.js CHANGED
@@ -47,33 +47,65 @@ function useFormContext() {
47
47
  // src/crud/crud_form.tsx
48
48
  var import_store2 = require("dn-react-toolkit/store");
49
49
  var import_react3 = __toESM(require("react"));
50
+ var import_utils = require("dn-react-toolkit/utils");
50
51
  function CrudForm({ AdminLayout }) {
51
52
  const form = useFormContext();
52
53
  return /* @__PURE__ */ import_react3.default.createElement(
53
54
  AdminLayout,
54
55
  {
55
56
  title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
56
- actions: /* @__PURE__ */ import_react3.default.createElement(
57
- "button",
58
- {
59
- type: "button",
60
- className: "button-primary",
61
- onClick: form.submit
62
- },
63
- "\uC800\uC7A5\uD558\uAE30"
64
- ),
57
+ actions: /* @__PURE__ */ import_react3.default.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
65
58
  className: "max-w-3xl mx-auto"
66
59
  },
67
- Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(form.columns).map(
68
- ([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(
69
- import_store2.SyncInput,
70
- {
71
- store: form.store,
72
- property: key,
73
- className: "input-form"
60
+ Object.keys(form.columns).length > 0 && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, Object.entries(
61
+ form.columns
62
+ ).map(([key, value]) => {
63
+ const createComponent = () => {
64
+ if (value.component) {
65
+ return /* @__PURE__ */ import_react3.default.createElement(value.component, { store: form.store, property: key });
74
66
  }
75
- ))
76
- )),
67
+ if (value.type === "checkbox") {
68
+ return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSwitch, { store: form.store, property: key });
69
+ }
70
+ if (value.type === "datetime") {
71
+ return /* @__PURE__ */ import_react3.default.createElement(
72
+ import_store2.SyncInput,
73
+ {
74
+ store: form.store,
75
+ property: key,
76
+ className: "input-form",
77
+ type: "datetime-local",
78
+ serializer: (value2) => {
79
+ if (value2 instanceof Date) {
80
+ return (0, import_utils.moment)(value2).toISOString(true).slice(0, 16);
81
+ }
82
+ return String(value2);
83
+ },
84
+ deserializer: (value2) => {
85
+ if (!value2) {
86
+ return void 0;
87
+ }
88
+ return (0, import_utils.moment)(value2).toDate();
89
+ }
90
+ }
91
+ );
92
+ }
93
+ if (value.options) {
94
+ const Component = value.options;
95
+ return /* @__PURE__ */ import_react3.default.createElement(import_store2.SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ import_react3.default.createElement(Component, null));
96
+ }
97
+ return /* @__PURE__ */ import_react3.default.createElement(
98
+ import_store2.SyncInput,
99
+ {
100
+ store: form.store,
101
+ property: key,
102
+ type: value.type,
103
+ className: "input-form"
104
+ }
105
+ );
106
+ };
107
+ return /* @__PURE__ */ import_react3.default.createElement("label", { key }, value.label, createComponent());
108
+ })),
77
109
  form.item && /* @__PURE__ */ import_react3.default.createElement(
78
110
  "button",
79
111
  {
package/dist/crud/crud_form.mjs CHANGED
@@ -9,35 +9,67 @@ function useFormContext() {
9
9
  }
10
10
 
11
11
  // src/crud/crud_form.tsx
12
- import { SyncInput } from "dn-react-toolkit/store";
12
+ import { SyncInput, SyncSelect, SyncSwitch } from "dn-react-toolkit/store";
13
13
  import React2 from "react";
14
+ import { moment } from "dn-react-toolkit/utils";
14
15
  function CrudForm({ AdminLayout }) {
15
16
  const form = useFormContext();
16
17
  return /* @__PURE__ */ React2.createElement(
17
18
  AdminLayout,
18
19
  {
19
20
  title: `${form.name} ${form.item ? "\uC218\uC815" : "\uCD94\uAC00"}`,
20
- actions: /* @__PURE__ */ React2.createElement(
21
- "button",
22
- {
23
- type: "button",
24
- className: "button-primary",
25
- onClick: form.submit
26
- },
27
- "\uC800\uC7A5\uD558\uAE30"
28
- ),
21
+ actions: /* @__PURE__ */ React2.createElement("button", { type: "button", className: "button-primary", onClick: form.submit }, "\uC800\uC7A5\uD558\uAE30"),
29
22
  className: "max-w-3xl mx-auto"
30
23
  },
31
- Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(form.columns).map(
32
- ([key, value]) => /* @__PURE__ */ React2.createElement("label", { key }, value.label, value.component ? /* @__PURE__ */ React2.createElement(value.component, null) : /* @__PURE__ */ React2.createElement(
33
- SyncInput,
34
- {
35
- store: form.store,
36
- property: key,
37
- className: "input-form"
24
+ Object.keys(form.columns).length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, Object.entries(
25
+ form.columns
26
+ ).map(([key, value]) => {
27
+ const createComponent = () => {
28
+ if (value.component) {
29
+ return /* @__PURE__ */ React2.createElement(value.component, { store: form.store, property: key });
38
30
  }
39
- ))
40
- )),
31
+ if (value.type === "checkbox") {
32
+ return /* @__PURE__ */ React2.createElement(SyncSwitch, { store: form.store, property: key });
33
+ }
34
+ if (value.type === "datetime") {
35
+ return /* @__PURE__ */ React2.createElement(
36
+ SyncInput,
37
+ {
38
+ store: form.store,
39
+ property: key,
40
+ className: "input-form",
41
+ type: "datetime-local",
42
+ serializer: (value2) => {
43
+ if (value2 instanceof Date) {
44
+ return moment(value2).toISOString(true).slice(0, 16);
45
+ }
46
+ return String(value2);
47
+ },
48
+ deserializer: (value2) => {
49
+ if (!value2) {
50
+ return void 0;
51
+ }
52
+ return moment(value2).toDate();
53
+ }
54
+ }
55
+ );
56
+ }
57
+ if (value.options) {
58
+ const Component = value.options;
59
+ return /* @__PURE__ */ React2.createElement(SyncSelect, { store: form.store, property: key }, /* @__PURE__ */ React2.createElement(Component, null));
60
+ }
61
+ return /* @__PURE__ */ React2.createElement(
62
+ SyncInput,
63
+ {
64
+ store: form.store,
65
+ property: key,
66
+ type: value.type,
67
+ className: "input-form"
68
+ }
69
+ );
70
+ };
71
+ return /* @__PURE__ */ React2.createElement("label", { key }, value.label, createComponent());
72
+ })),
41
73
  form.item && /* @__PURE__ */ React2.createElement(
42
74
  "button",
43
75
  {
package/dist/crud/crud_form_provider.d.mts CHANGED
@@ -1,16 +1,20 @@
1
1
  import { RxStore } from 'dn-react-toolkit/store';
2
- import { PgTableWithColumns } from 'drizzle-orm/pg-core';
3
2
  import React from 'react';
4
3
 
5
4
  type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
6
5
  [K in TPrimaryKey]?: TModel[K];
7
6
  };
8
- type FormColumnValue = {
7
+ type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
9
8
  label: string;
10
- component?: React.FC;
9
+ type?: React.HTMLInputTypeAttribute;
10
+ component?: React.FC<{
11
+ store: RxStore<FormState<TModel, TPrimaryKey>>;
12
+ property: string;
13
+ }>;
14
+ options?: React.FC;
11
15
  };
12
- type FormColumns<T> = Partial<{
13
- [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
16
+ type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
17
+ [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
14
18
  }>;
15
19
  declare const FormContext: React.Context<{}>;
16
20
  declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -26,7 +30,7 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
26
30
  name: string;
27
31
  prefix: string;
28
32
  item?: TModel;
29
- columns?: FormColumns<TModel>;
33
+ columns?: FormColumns<TModel, TPrimaryKey>;
30
34
  children?: React.ReactNode;
31
35
  };
32
36
  declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
package/dist/crud/crud_form_provider.d.ts CHANGED
@@ -1,16 +1,20 @@
1
1
  import { RxStore } from 'dn-react-toolkit/store';
2
- import { PgTableWithColumns } from 'drizzle-orm/pg-core';
3
2
  import React from 'react';
4
3
 
5
4
  type FormState<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Omit<TModel, TPrimaryKey> & {
6
5
  [K in TPrimaryKey]?: TModel[K];
7
6
  };
8
- type FormColumnValue = {
7
+ type FormColumnValue<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = {
9
8
  label: string;
10
- component?: React.FC;
9
+ type?: React.HTMLInputTypeAttribute;
10
+ component?: React.FC<{
11
+ store: RxStore<FormState<TModel, TPrimaryKey>>;
12
+ property: string;
13
+ }>;
14
+ options?: React.FC;
11
15
  };
12
- type FormColumns<T> = Partial<{
13
- [K in T extends PgTableWithColumns<infer U> ? keyof U["columns"] : never]: FormColumnValue;
16
+ type FormColumns<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never> = Partial<{
17
+ [K in keyof TModel]: FormColumnValue<TModel, TPrimaryKey>;
14
18
  }>;
15
19
  declare const FormContext: React.Context<{}>;
16
20
  declare function useFormContext<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>(): {
@@ -26,7 +30,7 @@ type CrudFormProps<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof
26
30
  name: string;
27
31
  prefix: string;
28
32
  item?: TModel;
29
- columns?: FormColumns<TModel>;
33
+ columns?: FormColumns<TModel, TPrimaryKey>;
30
34
  children?: React.ReactNode;
31
35
  };
32
36
  declare function CrudFormProvider<TModel, TPrimaryKey extends keyof TModel = "id" extends keyof TModel ? "id" : never>({ primaryKey, name, prefix, item, columns, children, }: CrudFormProps<TModel, TPrimaryKey>): React.JSX.Element;
package/dist/crud/crud_form_provider.js CHANGED
@@ -63,58 +63,56 @@ function CrudFormProvider({
63
63
  "Content-Type": "application/json"
64
64
  },
65
65
  body: JSON.stringify(
66
- Object.entries(store.state).reduce(
67
- function reducer(acc, [key, value]) {
68
- const converter = (value2) => {
69
- if (value2 === void 0) {
70
- return void 0;
71
- }
72
- if (value2 === null) {
73
- return {
74
- type: "null",
75
- value: null
76
- };
77
- }
78
- if (typeof value2 === "string") {
79
- return {
80
- type: "string",
81
- value: value2
82
- };
83
- }
84
- if (typeof value2 === "number") {
85
- return {
86
- type: "number",
87
- value: value2
88
- };
89
- }
90
- if (typeof value2 === "boolean") {
91
- return {
92
- type: "boolean",
93
- value: value2
94
- };
95
- }
96
- if (value2 instanceof Date) {
97
- return {
98
- type: "date",
99
- value: value2.toISOString()
100
- };
101
- }
102
- if (Array.isArray(value2)) {
103
- return value2.map((v) => converter(v));
104
- }
105
- if (typeof value2 === "object") {
106
- return Object.entries(
107
- value2
108
- ).reduce(reducer, {});
109
- }
110
- };
111
- return {
112
- ...acc,
113
- [key]: converter(value)
114
- };
115
- },
116
- {}
117
- )
66
+ Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
67
+ const converter = (value2) => {
68
+ if (value2 === void 0) {
69
+ return void 0;
70
+ }
71
+ if (value2 === null) {
72
+ return {
73
+ type: "null",
74
+ value: null
75
+ };
76
+ }
77
+ if (typeof value2 === "string") {
78
+ return {
79
+ type: "string",
80
+ value: value2
81
+ };
82
+ }
83
+ if (typeof value2 === "number") {
84
+ return {
85
+ type: "number",
86
+ value: value2
87
+ };
88
+ }
89
+ if (typeof value2 === "boolean") {
90
+ return {
91
+ type: "boolean",
92
+ value: value2
93
+ };
94
+ }
95
+ if (value2 instanceof Date) {
96
+ return {
97
+ type: "date",
98
+ value: value2.toISOString()
99
+ };
100
+ }
101
+ if (Array.isArray(value2)) {
102
+ return value2.map((v) => converter(v));
103
+ }
104
+ if (typeof value2 === "object") {
105
+ return Object.entries(value2).reduce(
106
+ reducer,
107
+ {}
108
+ );
109
+ }
110
+ };
111
+ return {
112
+ ...acc,
113
+ [key]: converter(value)
114
+ };
115
+ }, {})
118
116
  )
119
117
  });
120
118
  if (!res.ok) {
package/dist/crud/crud_form_provider.mjs CHANGED
@@ -27,58 +27,56 @@ function CrudFormProvider({
27
27
  "Content-Type": "application/json"
28
28
  },
29
29
  body: JSON.stringify(
30
- Object.entries(store.state).reduce(
31
- function reducer(acc, [key, value]) {
32
- const converter = (value2) => {
33
- if (value2 === void 0) {
34
- return void 0;
35
- }
36
- if (value2 === null) {
37
- return {
38
- type: "null",
39
- value: null
40
- };
41
- }
42
- if (typeof value2 === "string") {
43
- return {
44
- type: "string",
45
- value: value2
46
- };
47
- }
48
- if (typeof value2 === "number") {
49
- return {
50
- type: "number",
51
- value: value2
52
- };
53
- }
54
- if (typeof value2 === "boolean") {
55
- return {
56
- type: "boolean",
57
- value: value2
58
- };
59
- }
60
- if (value2 instanceof Date) {
61
- return {
62
- type: "date",
63
- value: value2.toISOString()
64
- };
65
- }
66
- if (Array.isArray(value2)) {
67
- return value2.map((v) => converter(v));
68
- }
69
- if (typeof value2 === "object") {
70
- return Object.entries(
71
- value2
72
- ).reduce(reducer, {});
73
- }
74
- };
75
- return {
76
- ...acc,
77
- [key]: converter(value)
78
- };
79
- },
80
- {}
81
- )
30
+ Object.entries(store.state).reduce(function reducer(acc, [key, value]) {
31
+ const converter = (value2) => {
32
+ if (value2 === void 0) {
33
+ return void 0;
34
+ }
35
+ if (value2 === null) {
36
+ return {
37
+ type: "null",
38
+ value: null
39
+ };
40
+ }
41
+ if (typeof value2 === "string") {
42
+ return {
43
+ type: "string",
44
+ value: value2
45
+ };
46
+ }
47
+ if (typeof value2 === "number") {
48
+ return {
49
+ type: "number",
50
+ value: value2
51
+ };
52
+ }
53
+ if (typeof value2 === "boolean") {
54
+ return {
55
+ type: "boolean",
56
+ value: value2
57
+ };
58
+ }
59
+ if (value2 instanceof Date) {
60
+ return {
61
+ type: "date",
62
+ value: value2.toISOString()
63
+ };
64
+ }
65
+ if (Array.isArray(value2)) {
66
+ return value2.map((v) => converter(v));
67
+ }
68
+ if (typeof value2 === "object") {
69
+ return Object.entries(value2).reduce(
70
+ reducer,
71
+ {}
72
+ );
73
+ }
74
+ };
75
+ return {
76
+ ...acc,
77
+ [key]: converter(value)
78
+ };
79
+ }, {})
82
80
  )
83
81
  });
84
82
  if (!res.ok) {
package/dist/crud/crud_page.d.mts CHANGED
@@ -2,7 +2,6 @@ import { CrudFormProps } from './crud_form_provider.mjs';
2
2
  import { TablePageOptions } from '../table/page.mjs';
3
3
  import React from 'react';
4
4
  import 'dn-react-toolkit/store';
5
- import 'drizzle-orm/pg-core';
6
5
  import '../table/table.mjs';
7
6
 
8
7
  type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {
package/dist/crud/crud_page.d.ts CHANGED
@@ -2,7 +2,6 @@ import { CrudFormProps } from './crud_form_provider.js';
2
2
  import { TablePageOptions } from '../table/page.js';
3
3
  import React from 'react';
4
4
  import 'dn-react-toolkit/store';
5
- import 'drizzle-orm/pg-core';
6
5
  import '../table/table.js';
7
6
 
8
7
  type CrudPageOptions<TModel, TPrimaryKey extends keyof TModel> = {