dn-react-router-toolkit 0.7.6 → 0.7.8
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.
- package/dist/api/create_api_handler.d.mts +5 -5
- package/dist/api/create_api_handler.d.ts +5 -5
- package/dist/api/index.d.mts +7 -0
- package/dist/api/index.d.ts +7 -0
- package/dist/api/index.js +163 -2
- package/dist/api/index.mjs +169 -1
- package/dist/client/env_loader.d.mts +2 -2
- package/dist/client/env_loader.d.ts +2 -2
- package/dist/client/env_loader.js +2 -12
- package/dist/client/env_loader.mjs +2 -2
- package/dist/client/file_input.d.mts +3 -2
- package/dist/client/file_input.d.ts +3 -2
- package/dist/client/file_input.js +30 -37
- package/dist/client/file_input.mjs +33 -28
- package/dist/client/index.d.mts +1 -0
- package/dist/client/index.d.ts +1 -0
- package/dist/client/index.js +38 -44
- package/dist/client/index.mjs +39 -33
- package/dist/client/store_text_editor.d.mts +2 -2
- package/dist/client/store_text_editor.d.ts +2 -2
- package/dist/client/store_text_editor.js +3 -12
- package/dist/client/store_text_editor.mjs +3 -2
- package/dist/crud/crud_form.d.mts +5 -4
- package/dist/crud/crud_form.d.ts +5 -4
- package/dist/crud/crud_form.js +74 -72
- package/dist/crud/crud_form.mjs +79 -62
- package/dist/crud/crud_form_provider.d.mts +9 -7
- package/dist/crud/crud_form_provider.d.ts +9 -7
- package/dist/crud/crud_form_provider.js +2 -12
- package/dist/crud/crud_form_provider.mjs +6 -3
- package/dist/crud/crud_page.d.mts +10 -6
- package/dist/crud/crud_page.d.ts +10 -6
- package/dist/crud/crud_page.js +272 -409
- package/dist/crud/crud_page.mjs +277 -399
- package/dist/crud/generate_pages.d.mts +10 -2
- package/dist/crud/generate_pages.d.ts +10 -2
- package/dist/crud/generate_pages.js +17 -14
- package/dist/crud/generate_pages.mjs +17 -4
- package/dist/crud/index.d.mts +2 -1
- package/dist/crud/index.d.ts +2 -1
- package/dist/crud/index.js +290 -404
- package/dist/crud/index.mjs +295 -404
- package/dist/form/create_form_component.d.mts +3 -2
- package/dist/form/create_form_component.d.ts +3 -2
- package/dist/form/create_form_component.js +3 -12
- package/dist/form/create_form_component.mjs +3 -2
- package/dist/form/form_components.d.mts +5 -4
- package/dist/form/form_components.d.ts +5 -4
- package/dist/form/form_components.js +3 -12
- package/dist/form/form_components.mjs +3 -2
- package/dist/form/index.d.mts +1 -0
- package/dist/form/index.d.ts +1 -0
- package/dist/form/index.js +3 -12
- package/dist/form/index.mjs +3 -2
- package/dist/post/editor_toolbar.d.mts +4 -3
- package/dist/post/editor_toolbar.d.ts +4 -3
- package/dist/post/editor_toolbar.js +116 -273
- package/dist/post/editor_toolbar.mjs +123 -263
- package/dist/post/index.d.mts +1 -0
- package/dist/post/index.d.ts +1 -0
- package/dist/post/index.js +329 -411
- package/dist/post/index.mjs +337 -409
- package/dist/post/post_form_page.d.mts +5 -4
- package/dist/post/post_form_page.d.ts +5 -4
- package/dist/post/post_form_page.js +331 -413
- package/dist/post/post_form_page.mjs +337 -409
- package/dist/post/thumbnail_picker.d.mts +3 -2
- package/dist/post/thumbnail_picker.d.ts +3 -2
- package/dist/post/thumbnail_picker.js +14 -23
- package/dist/post/thumbnail_picker.mjs +14 -13
- package/dist/seo/index.d.mts +1 -1
- package/dist/seo/index.d.ts +1 -1
- package/dist/seo/index.js +2 -2
- package/dist/seo/index.mjs +2 -2
- package/dist/seo/seo.d.mts +2 -2
- package/dist/seo/seo.d.ts +2 -2
- package/dist/seo/seo.js +2 -2
- package/dist/seo/seo.mjs +2 -2
- package/dist/table/buttons.d.mts +2 -2
- package/dist/table/buttons.d.ts +2 -2
- package/dist/table/buttons.js +42 -57
- package/dist/table/buttons.mjs +42 -47
- package/dist/table/index.d.mts +1 -0
- package/dist/table/index.d.ts +1 -0
- package/dist/table/index.js +185 -338
- package/dist/table/index.mjs +185 -328
- package/dist/table/page.d.mts +5 -4
- package/dist/table/page.d.ts +5 -4
- package/dist/table/page.js +185 -338
- package/dist/table/page.mjs +185 -328
- package/dist/table/table.d.mts +5 -4
- package/dist/table/table.d.ts +5 -4
- package/dist/table/table.js +77 -237
- package/dist/table/table.mjs +77 -227
- package/package.json +7 -5
package/dist/table/page.mjs
CHANGED
|
@@ -6,160 +6,12 @@ import {
|
|
|
6
6
|
useNavigate,
|
|
7
7
|
useSearchParams as useSearchParams3
|
|
8
8
|
} from "react-router";
|
|
9
|
-
|
|
10
|
-
// node_modules/react-icons/lib/iconBase.mjs
|
|
11
|
-
import React2 from "react";
|
|
12
|
-
|
|
13
|
-
// node_modules/react-icons/lib/iconContext.mjs
|
|
14
|
-
import React from "react";
|
|
15
|
-
var DefaultContext = {
|
|
16
|
-
color: void 0,
|
|
17
|
-
size: void 0,
|
|
18
|
-
className: void 0,
|
|
19
|
-
style: void 0,
|
|
20
|
-
attr: void 0
|
|
21
|
-
};
|
|
22
|
-
var IconContext = React.createContext && /* @__PURE__ */ React.createContext(DefaultContext);
|
|
23
|
-
|
|
24
|
-
// node_modules/react-icons/lib/iconBase.mjs
|
|
25
|
-
var _excluded = ["attr", "size", "title"];
|
|
26
|
-
function _objectWithoutProperties(source, excluded) {
|
|
27
|
-
if (source == null) return {};
|
|
28
|
-
var target = _objectWithoutPropertiesLoose(source, excluded);
|
|
29
|
-
var key, i;
|
|
30
|
-
if (Object.getOwnPropertySymbols) {
|
|
31
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
32
|
-
for (i = 0; i < sourceSymbolKeys.length; i++) {
|
|
33
|
-
key = sourceSymbolKeys[i];
|
|
34
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
35
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
36
|
-
target[key] = source[key];
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
return target;
|
|
40
|
-
}
|
|
41
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
42
|
-
if (source == null) return {};
|
|
43
|
-
var target = {};
|
|
44
|
-
for (var key in source) {
|
|
45
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
46
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
47
|
-
target[key] = source[key];
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
return target;
|
|
51
|
-
}
|
|
52
|
-
function _extends() {
|
|
53
|
-
_extends = Object.assign ? Object.assign.bind() : function(target) {
|
|
54
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
55
|
-
var source = arguments[i];
|
|
56
|
-
for (var key in source) {
|
|
57
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
58
|
-
target[key] = source[key];
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
return target;
|
|
63
|
-
};
|
|
64
|
-
return _extends.apply(this, arguments);
|
|
65
|
-
}
|
|
66
|
-
function ownKeys(e, r) {
|
|
67
|
-
var t = Object.keys(e);
|
|
68
|
-
if (Object.getOwnPropertySymbols) {
|
|
69
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
70
|
-
r && (o = o.filter(function(r2) {
|
|
71
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
72
|
-
})), t.push.apply(t, o);
|
|
73
|
-
}
|
|
74
|
-
return t;
|
|
75
|
-
}
|
|
76
|
-
function _objectSpread(e) {
|
|
77
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
78
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
79
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
80
|
-
_defineProperty(e, r2, t[r2]);
|
|
81
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
82
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
return e;
|
|
86
|
-
}
|
|
87
|
-
function _defineProperty(obj, key, value) {
|
|
88
|
-
key = _toPropertyKey(key);
|
|
89
|
-
if (key in obj) {
|
|
90
|
-
Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
|
|
91
|
-
} else {
|
|
92
|
-
obj[key] = value;
|
|
93
|
-
}
|
|
94
|
-
return obj;
|
|
95
|
-
}
|
|
96
|
-
function _toPropertyKey(t) {
|
|
97
|
-
var i = _toPrimitive(t, "string");
|
|
98
|
-
return "symbol" == typeof i ? i : i + "";
|
|
99
|
-
}
|
|
100
|
-
function _toPrimitive(t, r) {
|
|
101
|
-
if ("object" != typeof t || !t) return t;
|
|
102
|
-
var e = t[Symbol.toPrimitive];
|
|
103
|
-
if (void 0 !== e) {
|
|
104
|
-
var i = e.call(t, r || "default");
|
|
105
|
-
if ("object" != typeof i) return i;
|
|
106
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
107
|
-
}
|
|
108
|
-
return ("string" === r ? String : Number)(t);
|
|
109
|
-
}
|
|
110
|
-
function Tree2Element(tree) {
|
|
111
|
-
return tree && tree.map((node, i) => /* @__PURE__ */ React2.createElement(node.tag, _objectSpread({
|
|
112
|
-
key: i
|
|
113
|
-
}, node.attr), Tree2Element(node.child)));
|
|
114
|
-
}
|
|
115
|
-
function GenIcon(data) {
|
|
116
|
-
return (props) => /* @__PURE__ */ React2.createElement(IconBase, _extends({
|
|
117
|
-
attr: _objectSpread({}, data.attr)
|
|
118
|
-
}, props), Tree2Element(data.child));
|
|
119
|
-
}
|
|
120
|
-
function IconBase(props) {
|
|
121
|
-
var elem = (conf) => {
|
|
122
|
-
var {
|
|
123
|
-
attr,
|
|
124
|
-
size,
|
|
125
|
-
title
|
|
126
|
-
} = props, svgProps = _objectWithoutProperties(props, _excluded);
|
|
127
|
-
var computedSize = size || conf.size || "1em";
|
|
128
|
-
var className;
|
|
129
|
-
if (conf.className) className = conf.className;
|
|
130
|
-
if (props.className) className = (className ? className + " " : "") + props.className;
|
|
131
|
-
return /* @__PURE__ */ React2.createElement("svg", _extends({
|
|
132
|
-
stroke: "currentColor",
|
|
133
|
-
fill: "currentColor",
|
|
134
|
-
strokeWidth: "0"
|
|
135
|
-
}, conf.attr, attr, svgProps, {
|
|
136
|
-
className,
|
|
137
|
-
style: _objectSpread(_objectSpread({
|
|
138
|
-
color: props.color || conf.color
|
|
139
|
-
}, conf.style), props.style),
|
|
140
|
-
height: computedSize,
|
|
141
|
-
width: computedSize,
|
|
142
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
143
|
-
}), title && /* @__PURE__ */ React2.createElement("title", null, title), props.children);
|
|
144
|
-
};
|
|
145
|
-
return IconContext !== void 0 ? /* @__PURE__ */ React2.createElement(IconContext.Consumer, null, (conf) => elem(conf)) : elem(DefaultContext);
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
// node_modules/react-icons/go/index.mjs
|
|
149
|
-
function GoArrowDown(props) {
|
|
150
|
-
return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M4.97 13.22a.75.75 0 0 1 1.06 0L11 18.19V3.75a.75.75 0 0 1 1.5 0v14.44l4.97-4.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734l-6.25 6.25a.75.75 0 0 1-1.06 0l-6.25-6.25a.75.75 0 0 1 0-1.06Z" }, "child": [] }] })(props);
|
|
151
|
-
}
|
|
152
|
-
function GoArrowUp(props) {
|
|
153
|
-
return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M18.655 10.405a.75.75 0 0 1-1.06 0l-4.97-4.97v14.44a.75.75 0 0 1-1.5 0V5.435l-4.97 4.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l6.25-6.25a.75.75 0 0 1 1.06 0l6.25 6.25a.75.75 0 0 1 0 1.06Z" }, "child": [] }] })(props);
|
|
154
|
-
}
|
|
155
|
-
function GoSearch(props) {
|
|
156
|
-
return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M10.25 2a8.25 8.25 0 0 1 6.34 13.53l5.69 5.69a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-5.69-5.69A8.25 8.25 0 1 1 10.25 2ZM3.5 10.25a6.75 6.75 0 1 0 13.5 0 6.75 6.75 0 0 0-13.5 0Z" }, "child": [] }] })(props);
|
|
157
|
-
}
|
|
9
|
+
import { GoSearch } from "react-icons/go";
|
|
158
10
|
|
|
159
11
|
// src/table/buttons.tsx
|
|
160
12
|
import { cn } from "dn-react-toolkit/utils";
|
|
161
13
|
import { Link, useLocation, useSearchParams } from "react-router";
|
|
162
|
-
import
|
|
14
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
163
15
|
function TablePageButtons({
|
|
164
16
|
MAX_PAGES_TO_SHOW,
|
|
165
17
|
total,
|
|
@@ -172,63 +24,59 @@ function TablePageButtons({
|
|
|
172
24
|
const currentPage = Math.floor(offset / limit) + 1;
|
|
173
25
|
const startButton = (Math.ceil(currentPage / MAX_PAGES_TO_SHOW) - 1) * MAX_PAGES_TO_SHOW;
|
|
174
26
|
const endButton = Math.min(startButton + MAX_PAGES_TO_SHOW - 1, pages);
|
|
175
|
-
return /* @__PURE__ */
|
|
176
|
-
|
|
177
|
-
{
|
|
178
|
-
to: (() => {
|
|
179
|
-
searchParams.set(
|
|
180
|
-
"offset",
|
|
181
|
-
String((startButton - 1) * limit)
|
|
182
|
-
);
|
|
183
|
-
return `${pathname}?${searchParams.toString()}`;
|
|
184
|
-
})(),
|
|
185
|
-
className: "w-10 block text-center transition-colors hover:text-primary"
|
|
186
|
-
},
|
|
187
|
-
"\uC774\uC804"
|
|
188
|
-
), Array.from({
|
|
189
|
-
length: Math.min(
|
|
190
|
-
MAX_PAGES_TO_SHOW,
|
|
191
|
-
pages - startButton
|
|
192
|
-
)
|
|
193
|
-
}).map((_, index) => {
|
|
194
|
-
return /* @__PURE__ */ React3.createElement(
|
|
27
|
+
return /* @__PURE__ */ jsx(Fragment, { children: pages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center my-8 gap-4 text-neutral-400", children: [
|
|
28
|
+
startButton > 1 && /* @__PURE__ */ jsx(
|
|
195
29
|
Link,
|
|
196
30
|
{
|
|
197
|
-
key: index,
|
|
198
31
|
to: (() => {
|
|
199
|
-
searchParams.set(
|
|
200
|
-
"offset",
|
|
201
|
-
String((startButton + index) * limit)
|
|
202
|
-
);
|
|
32
|
+
searchParams.set("offset", String((startButton - 1) * limit));
|
|
203
33
|
return `${pathname}?${searchParams.toString()}`;
|
|
204
34
|
})(),
|
|
205
|
-
className:
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
)
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
35
|
+
className: "w-10 block text-center transition-colors hover:text-primary",
|
|
36
|
+
children: "\uC774\uC804"
|
|
37
|
+
}
|
|
38
|
+
),
|
|
39
|
+
Array.from({
|
|
40
|
+
length: Math.min(MAX_PAGES_TO_SHOW, pages - startButton)
|
|
41
|
+
}).map((_, index) => {
|
|
42
|
+
return /* @__PURE__ */ jsx(
|
|
43
|
+
Link,
|
|
44
|
+
{
|
|
45
|
+
to: (() => {
|
|
46
|
+
searchParams.set(
|
|
47
|
+
"offset",
|
|
48
|
+
String((startButton + index) * limit)
|
|
49
|
+
);
|
|
50
|
+
return `${pathname}?${searchParams.toString()}`;
|
|
51
|
+
})(),
|
|
52
|
+
className: cn(
|
|
53
|
+
"w-6 block text-center transition-colors",
|
|
54
|
+
currentPage === startButton + index + 1 ? "font-bold text-primary" : "hover:text-primary"
|
|
55
|
+
),
|
|
56
|
+
children: startButton + index + 1
|
|
57
|
+
},
|
|
58
|
+
index
|
|
59
|
+
);
|
|
60
|
+
}),
|
|
61
|
+
endButton < pages && /* @__PURE__ */ jsx(
|
|
62
|
+
Link,
|
|
63
|
+
{
|
|
64
|
+
to: (() => {
|
|
65
|
+
searchParams.set("offset", String((endButton + 1) * limit));
|
|
66
|
+
return `${pathname}?${searchParams.toString()}`;
|
|
67
|
+
})(),
|
|
68
|
+
className: "w-10 block text-center transition-colors hover:text-primary",
|
|
69
|
+
children: "\uB2E4\uC74C"
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
] }) });
|
|
226
73
|
}
|
|
227
74
|
|
|
228
75
|
// src/table/table.tsx
|
|
229
76
|
import { cn as cn2 } from "dn-react-toolkit/utils";
|
|
77
|
+
import { GoArrowDown, GoArrowUp } from "react-icons/go";
|
|
230
78
|
import { Link as Link2, useSearchParams as useSearchParams2 } from "react-router";
|
|
231
|
-
import
|
|
79
|
+
import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
232
80
|
function Table({
|
|
233
81
|
className = "min-w-full whitespace-nowrap",
|
|
234
82
|
data,
|
|
@@ -243,95 +91,92 @@ function Table({
|
|
|
243
91
|
const keys = Object.entries(columns).filter((entry) => entry[1]).map(([key]) => key);
|
|
244
92
|
const sortedArray = [...data];
|
|
245
93
|
const [_, setSearchParams] = useSearchParams2();
|
|
246
|
-
return /* @__PURE__ */
|
|
94
|
+
return /* @__PURE__ */ jsxs2(
|
|
247
95
|
"table",
|
|
248
96
|
{
|
|
249
|
-
className: cn2(
|
|
250
|
-
|
|
251
|
-
"
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
97
|
+
className: cn2(className, "text-[15px] border-separate border-spacing-0"),
|
|
98
|
+
children: [
|
|
99
|
+
/* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: keys.map((key) => {
|
|
100
|
+
const value = columns[key];
|
|
101
|
+
function getReactNode() {
|
|
102
|
+
if (value && typeof value === "object" && "label" in value) {
|
|
103
|
+
return value.label;
|
|
104
|
+
}
|
|
105
|
+
return value;
|
|
106
|
+
}
|
|
107
|
+
function Head() {
|
|
108
|
+
const reactNode = getReactNode();
|
|
109
|
+
if (typeof reactNode === "string") {
|
|
110
|
+
return /* @__PURE__ */ jsxs2(
|
|
111
|
+
"button",
|
|
112
|
+
{
|
|
113
|
+
className: cn2(
|
|
114
|
+
orderBy === key ? "text-neutral-900 font-medium" : "text-neutral-500",
|
|
115
|
+
"px-4 h-14 flex items-center w-full"
|
|
116
|
+
),
|
|
117
|
+
onClick: () => {
|
|
118
|
+
let newDirection = "asc";
|
|
119
|
+
if (orderBy === key) {
|
|
120
|
+
newDirection = direction === "asc" ? "desc" : "asc";
|
|
121
|
+
}
|
|
122
|
+
setSearchParams({
|
|
123
|
+
orderBy: key,
|
|
124
|
+
direction: newDirection
|
|
125
|
+
});
|
|
126
|
+
},
|
|
127
|
+
children: [
|
|
128
|
+
reactNode,
|
|
129
|
+
orderBy === key && /* @__PURE__ */ jsx2("div", { className: "ml-0.5", children: direction === "asc" ? /* @__PURE__ */ jsx2(GoArrowUp, {}) : /* @__PURE__ */ jsx2(GoArrowDown, {}) })
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
);
|
|
133
|
+
}
|
|
134
|
+
return /* @__PURE__ */ jsx2(Fragment2, { children: reactNode });
|
|
135
|
+
}
|
|
136
|
+
return /* @__PURE__ */ jsx2("th", { className: cn2("border-y font-normal"), children: /* @__PURE__ */ jsx2(Head, {}) }, key);
|
|
137
|
+
}) }) }),
|
|
138
|
+
/* @__PURE__ */ jsxs2("tbody", { children: [
|
|
139
|
+
sortedArray.length === 0 && /* @__PURE__ */ jsx2("tr", { children: /* @__PURE__ */ jsx2(
|
|
140
|
+
"td",
|
|
267
141
|
{
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
142
|
+
colSpan: keys.length,
|
|
143
|
+
className: "px-4 h-14 text-neutral-400 text-center",
|
|
144
|
+
children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
145
|
+
}
|
|
146
|
+
) }),
|
|
147
|
+
sortedArray.map((item, i) => /* @__PURE__ */ jsx2("tr", { className: "hover:bg-gray-50 transition-colors", children: keys.map((key, i2) => {
|
|
148
|
+
const value = item[key];
|
|
149
|
+
function Content() {
|
|
150
|
+
if (key in columns) {
|
|
151
|
+
const column = columns[key];
|
|
152
|
+
if (column && typeof column === "object" && "mapper" in column) {
|
|
153
|
+
const mapper = column.mapper;
|
|
154
|
+
if (mapper) {
|
|
155
|
+
return /* @__PURE__ */ jsx2(Fragment2, { children: mapper(item) });
|
|
156
|
+
}
|
|
276
157
|
}
|
|
277
|
-
setSearchParams({
|
|
278
|
-
orderBy: key,
|
|
279
|
-
direction: newDirection
|
|
280
|
-
});
|
|
281
158
|
}
|
|
282
|
-
|
|
283
|
-
reactNode,
|
|
284
|
-
orderBy === key && /* @__PURE__ */ React4.createElement("div", { className: "ml-0.5" }, direction === "asc" ? /* @__PURE__ */ React4.createElement(GoArrowUp, null) : /* @__PURE__ */ React4.createElement(GoArrowDown, null))
|
|
285
|
-
);
|
|
286
|
-
}
|
|
287
|
-
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, reactNode);
|
|
288
|
-
}
|
|
289
|
-
return /* @__PURE__ */ React4.createElement(
|
|
290
|
-
"th",
|
|
291
|
-
{
|
|
292
|
-
key,
|
|
293
|
-
className: cn2("border-y font-normal")
|
|
294
|
-
},
|
|
295
|
-
/* @__PURE__ */ React4.createElement(Head, null)
|
|
296
|
-
);
|
|
297
|
-
}))),
|
|
298
|
-
/* @__PURE__ */ React4.createElement("tbody", null, sortedArray.length === 0 && /* @__PURE__ */ React4.createElement("tr", null, /* @__PURE__ */ React4.createElement(
|
|
299
|
-
"td",
|
|
300
|
-
{
|
|
301
|
-
colSpan: keys.length,
|
|
302
|
-
className: "px-4 h-14 text-neutral-400 text-center"
|
|
303
|
-
},
|
|
304
|
-
"\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
|
|
305
|
-
)), sortedArray.map((item, i) => /* @__PURE__ */ React4.createElement("tr", { key: i, className: "hover:bg-gray-50 transition-colors" }, keys.map((key, i2) => {
|
|
306
|
-
const value = item[key];
|
|
307
|
-
function Content() {
|
|
308
|
-
if (key in columns) {
|
|
309
|
-
const column = columns[key];
|
|
310
|
-
if (column && typeof column === "object" && "mapper" in column) {
|
|
311
|
-
const mapper = column.mapper;
|
|
312
|
-
if (mapper) {
|
|
313
|
-
return /* @__PURE__ */ React4.createElement(React4.Fragment, null, mapper(item));
|
|
159
|
+
return /* @__PURE__ */ jsx2(Fragment2, { children: String(value) });
|
|
314
160
|
}
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
}))))
|
|
161
|
+
const linkedContent = getLink ? /* @__PURE__ */ jsx2(
|
|
162
|
+
Link2,
|
|
163
|
+
{
|
|
164
|
+
to: getLink(item),
|
|
165
|
+
className: "block content-center px-4 w-full h-full",
|
|
166
|
+
children: /* @__PURE__ */ jsx2(Content, {})
|
|
167
|
+
}
|
|
168
|
+
) : /* @__PURE__ */ jsx2(Content, {});
|
|
169
|
+
const cell = Mapper ? /* @__PURE__ */ jsx2(Mapper, { item, index: i2, children: linkedContent }) : linkedContent;
|
|
170
|
+
return /* @__PURE__ */ jsx2("td", { className: "px-0 h-14 border-b", children: cell }, key);
|
|
171
|
+
}) }, i))
|
|
172
|
+
] })
|
|
173
|
+
]
|
|
174
|
+
}
|
|
330
175
|
);
|
|
331
176
|
}
|
|
332
177
|
|
|
333
178
|
// src/table/page.tsx
|
|
334
|
-
import
|
|
179
|
+
import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
335
180
|
function createTablePage({
|
|
336
181
|
name,
|
|
337
182
|
columns,
|
|
@@ -351,60 +196,72 @@ function createTablePage({
|
|
|
351
196
|
navigate(`${pathname}?${searchParams2.toString()}`);
|
|
352
197
|
};
|
|
353
198
|
const [searchParams] = useSearchParams3();
|
|
354
|
-
return /* @__PURE__ */
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
title: name,
|
|
358
|
-
actions: /* @__PURE__ */ React5.createElement(Link3, { to: `${pathname}/new`, className: "button-primary" }, name, " \uCD94\uAC00")
|
|
359
|
-
}
|
|
360
|
-
), /* @__PURE__ */ React5.createElement("div", { className: "max-w-7xl mx-auto w-full overflow-auto" }, searchKey && /* @__PURE__ */ React5.createElement(
|
|
361
|
-
"form",
|
|
362
|
-
{
|
|
363
|
-
className: "h-18 px-4 flex items-center border-t",
|
|
364
|
-
onSubmit: (e) => {
|
|
365
|
-
e.preventDefault();
|
|
366
|
-
const formData = new FormData(e.currentTarget);
|
|
367
|
-
const query = formData.get("query");
|
|
368
|
-
search(query);
|
|
369
|
-
}
|
|
370
|
-
},
|
|
371
|
-
/* @__PURE__ */ React5.createElement(
|
|
372
|
-
"button",
|
|
199
|
+
return /* @__PURE__ */ jsxs3(Fragment3, { children: [
|
|
200
|
+
/* @__PURE__ */ jsx3(
|
|
201
|
+
Header,
|
|
373
202
|
{
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
/* @__PURE__ */ React5.createElement(
|
|
380
|
-
"input",
|
|
381
|
-
{
|
|
382
|
-
className: "outline-none h-full flex-1",
|
|
383
|
-
placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
|
|
384
|
-
name: "query",
|
|
385
|
-
defaultValue: searchParams.get("query") ?? ""
|
|
203
|
+
title: name,
|
|
204
|
+
actions: /* @__PURE__ */ jsxs3(Link3, { to: `${pathname}/new`, className: "button-primary", children: [
|
|
205
|
+
name,
|
|
206
|
+
" \uCD94\uAC00"
|
|
207
|
+
] })
|
|
386
208
|
}
|
|
387
|
-
)
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
209
|
+
),
|
|
210
|
+
/* @__PURE__ */ jsxs3("div", { className: "max-w-7xl mx-auto w-full overflow-auto", children: [
|
|
211
|
+
searchKey && /* @__PURE__ */ jsxs3(
|
|
212
|
+
"form",
|
|
213
|
+
{
|
|
214
|
+
className: "h-18 px-4 flex items-center border-t",
|
|
215
|
+
onSubmit: (e) => {
|
|
216
|
+
e.preventDefault();
|
|
217
|
+
const formData = new FormData(e.currentTarget);
|
|
218
|
+
const query = formData.get("query");
|
|
219
|
+
search(query);
|
|
220
|
+
},
|
|
221
|
+
children: [
|
|
222
|
+
/* @__PURE__ */ jsx3(
|
|
223
|
+
"button",
|
|
224
|
+
{
|
|
225
|
+
type: "submit",
|
|
226
|
+
className: "w-10 h-10 flex justify-center items-center",
|
|
227
|
+
children: /* @__PURE__ */ jsx3(GoSearch, { className: "text-xl mr-4" })
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
/* @__PURE__ */ jsx3(
|
|
231
|
+
"input",
|
|
232
|
+
{
|
|
233
|
+
className: "outline-none h-full flex-1",
|
|
234
|
+
placeholder: "\uC5EC\uAE30\uC5D0 \uAC80\uC0C9\uD558\uC138\uC694...",
|
|
235
|
+
name: "query",
|
|
236
|
+
defaultValue: searchParams.get("query") ?? ""
|
|
237
|
+
}
|
|
238
|
+
)
|
|
239
|
+
]
|
|
240
|
+
}
|
|
241
|
+
),
|
|
242
|
+
/* @__PURE__ */ jsx3(
|
|
243
|
+
Table,
|
|
244
|
+
{
|
|
245
|
+
data: items,
|
|
246
|
+
columns,
|
|
247
|
+
getLink: primaryKey ? (item) => `${pathname}/${item[primaryKey]}` : void 0,
|
|
248
|
+
limit,
|
|
249
|
+
offset,
|
|
250
|
+
orderBy,
|
|
251
|
+
direction
|
|
252
|
+
}
|
|
253
|
+
),
|
|
254
|
+
/* @__PURE__ */ jsx3(
|
|
255
|
+
TablePageButtons,
|
|
256
|
+
{
|
|
257
|
+
total,
|
|
258
|
+
limit,
|
|
259
|
+
offset,
|
|
260
|
+
MAX_PAGES_TO_SHOW: 10
|
|
261
|
+
}
|
|
262
|
+
)
|
|
263
|
+
] })
|
|
264
|
+
] });
|
|
408
265
|
};
|
|
409
266
|
}
|
|
410
267
|
export {
|
package/dist/table/table.d.mts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, DetailedHTMLProps, TableHTMLAttributes, FC } from 'react';
|
|
2
3
|
|
|
3
4
|
type TableColumnProps<T> = ReactNode | {
|
|
4
5
|
label: ReactNode;
|
|
@@ -8,10 +9,10 @@ type TableColumnProps<T> = ReactNode | {
|
|
|
8
9
|
type TableColumnOptions<T> = {
|
|
9
10
|
[key in string]?: TableColumnProps<T>;
|
|
10
11
|
};
|
|
11
|
-
type OrderedTableProps<T> =
|
|
12
|
+
type OrderedTableProps<T> = DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> & {
|
|
12
13
|
data: T[];
|
|
13
14
|
columns: TableColumnOptions<T>;
|
|
14
|
-
mapper?:
|
|
15
|
+
mapper?: FC<{
|
|
15
16
|
item: T;
|
|
16
17
|
index: number;
|
|
17
18
|
children: ReactNode;
|
|
@@ -22,6 +23,6 @@ type OrderedTableProps<T> = React__default.DetailedHTMLProps<React__default.Tabl
|
|
|
22
23
|
orderBy?: string;
|
|
23
24
|
direction?: string;
|
|
24
25
|
};
|
|
25
|
-
declare function Table<T>({ className, data, columns, mapper: Mapper, getLink, limit, offset, orderBy, direction, }: OrderedTableProps<T>):
|
|
26
|
+
declare function Table<T>({ className, data, columns, mapper: Mapper, getLink, limit, offset, orderBy, direction, }: OrderedTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
26
27
|
|
|
27
28
|
export { type OrderedTableProps, Table, type TableColumnOptions, type TableColumnProps };
|
package/dist/table/table.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode, DetailedHTMLProps, TableHTMLAttributes, FC } from 'react';
|
|
2
3
|
|
|
3
4
|
type TableColumnProps<T> = ReactNode | {
|
|
4
5
|
label: ReactNode;
|
|
@@ -8,10 +9,10 @@ type TableColumnProps<T> = ReactNode | {
|
|
|
8
9
|
type TableColumnOptions<T> = {
|
|
9
10
|
[key in string]?: TableColumnProps<T>;
|
|
10
11
|
};
|
|
11
|
-
type OrderedTableProps<T> =
|
|
12
|
+
type OrderedTableProps<T> = DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> & {
|
|
12
13
|
data: T[];
|
|
13
14
|
columns: TableColumnOptions<T>;
|
|
14
|
-
mapper?:
|
|
15
|
+
mapper?: FC<{
|
|
15
16
|
item: T;
|
|
16
17
|
index: number;
|
|
17
18
|
children: ReactNode;
|
|
@@ -22,6 +23,6 @@ type OrderedTableProps<T> = React__default.DetailedHTMLProps<React__default.Tabl
|
|
|
22
23
|
orderBy?: string;
|
|
23
24
|
direction?: string;
|
|
24
25
|
};
|
|
25
|
-
declare function Table<T>({ className, data, columns, mapper: Mapper, getLink, limit, offset, orderBy, direction, }: OrderedTableProps<T>):
|
|
26
|
+
declare function Table<T>({ className, data, columns, mapper: Mapper, getLink, limit, offset, orderBy, direction, }: OrderedTableProps<T>): react_jsx_runtime.JSX.Element;
|
|
26
27
|
|
|
27
28
|
export { type OrderedTableProps, Table, type TableColumnOptions, type TableColumnProps };
|