@dynamic-field-kit/react 1.0.4 → 1.0.6
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/README.md +3 -3
- package/dist/chunk-HAKPX2A2.mjs +49 -0
- package/dist/chunk-HAKPX2A2.mjs.map +1 -0
- package/dist/defaultLayouts-PVN6T4LH.mjs +40 -0
- package/dist/defaultLayouts-PVN6T4LH.mjs.map +1 -0
- package/dist/index.d.mts +32 -8
- package/dist/index.d.ts +32 -8
- package/dist/index.js +157 -48
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +63 -80
- package/dist/index.mjs.map +1 -1
- package/dist/responsiveLayout-2KUYZQJ3.mjs +28 -0
- package/dist/responsiveLayout-2KUYZQJ3.mjs.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -130,7 +130,7 @@ The library does **not** ship UI components.
|
|
|
130
130
|
Instead, applications register their own renderers.
|
|
131
131
|
|
|
132
132
|
```ts
|
|
133
|
-
import { fieldRegistry } from "@dynamic-field-kit/
|
|
133
|
+
import { fieldRegistry } from "@dynamic-field-kit/react"
|
|
134
134
|
|
|
135
135
|
fieldRegistry.register("text", ({ value, onValueChange, label }) => (
|
|
136
136
|
<div>
|
|
@@ -202,7 +202,7 @@ You **do not** need to modify the library.
|
|
|
202
202
|
Just extend `FieldTypeMap`:
|
|
203
203
|
|
|
204
204
|
```ts
|
|
205
|
-
declare module "@dynamic-field-kit/
|
|
205
|
+
declare module "@dynamic-field-kit/core" {
|
|
206
206
|
interface FieldTypeMap {
|
|
207
207
|
date: Date
|
|
208
208
|
}
|
|
@@ -296,4 +296,4 @@ This library intentionally does not include:
|
|
|
296
296
|
It is a **form engine**, not a full form framework.
|
|
297
297
|
|
|
298
298
|
## 📄 License
|
|
299
|
-
MIT © vannt-dev
|
|
299
|
+
MIT © [vannt-dev](https://github.com/vannt-dev)
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
// src/layout/layoutRegistry.ts
|
|
28
|
+
var LayoutRegistry = class {
|
|
29
|
+
constructor() {
|
|
30
|
+
this.layouts = /* @__PURE__ */ new Map();
|
|
31
|
+
}
|
|
32
|
+
register(type, renderer) {
|
|
33
|
+
if (this.layouts.has(type)) {
|
|
34
|
+
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
35
|
+
}
|
|
36
|
+
this.layouts.set(type, renderer);
|
|
37
|
+
}
|
|
38
|
+
get(type) {
|
|
39
|
+
return this.layouts.get(type);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
var layoutRegistry = new LayoutRegistry();
|
|
43
|
+
|
|
44
|
+
export {
|
|
45
|
+
__commonJS,
|
|
46
|
+
__toESM,
|
|
47
|
+
layoutRegistry
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=chunk-HAKPX2A2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/layout/layoutRegistry.ts"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,IAAM,iBAAN,MAAqB;AAAA,EAArB;AACH,SAAQ,UAAU,oBAAI,IAA4B;AAAA;AAAA,EAElD,SAAS,MAAc,UAA0B;AAC7C,QAAI,KAAK,QAAQ,IAAI,IAAI,GAAG;AACxB,cAAQ,KAAK,+BAA+B,IAAI,kBAAkB;AAAA,IACtE;AACA,SAAK,QAAQ,IAAI,MAAM,QAAQ;AAAA,EACnC;AAAA,EAEA,IAAI,MAA0C;AAC1C,WAAO,KAAK,QAAQ,IAAI,IAAI;AAAA,EAChC;AACJ;AAEO,IAAM,iBAAiB,IAAI,eAAe;","names":[]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import {
|
|
2
|
+
layoutRegistry
|
|
3
|
+
} from "./chunk-HAKPX2A2.mjs";
|
|
4
|
+
|
|
5
|
+
// src/layout/defaultLayouts.tsx
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
8
|
+
"div",
|
|
9
|
+
{
|
|
10
|
+
style: {
|
|
11
|
+
display: "flex",
|
|
12
|
+
flexDirection: "column",
|
|
13
|
+
gap: config?.gap ?? 12
|
|
14
|
+
},
|
|
15
|
+
children
|
|
16
|
+
}
|
|
17
|
+
));
|
|
18
|
+
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
19
|
+
"div",
|
|
20
|
+
{
|
|
21
|
+
style: {
|
|
22
|
+
display: "flex",
|
|
23
|
+
flexDirection: "row",
|
|
24
|
+
gap: config?.gap ?? 12
|
|
25
|
+
},
|
|
26
|
+
children
|
|
27
|
+
}
|
|
28
|
+
));
|
|
29
|
+
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
style: {
|
|
33
|
+
display: "grid",
|
|
34
|
+
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
35
|
+
gap: config?.gap ?? 12
|
|
36
|
+
},
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
));
|
|
40
|
+
//# sourceMappingURL=defaultLayouts-PVN6T4LH.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/layout/defaultLayouts.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))"],"mappings":";;;;;AAGI;AADJ,eAAe,SAAS,UAAU,CAAC,EAAE,UAAU,OAAO,MAClD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,OAAO,CAAC,EAAE,UAAU,OAAO,MAC/C;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;AAED,eAAe,SAAS,QAAQ,CAAC,EAAE,UAAU,OAAO,MAChD;AAAA,EAAC;AAAA;AAAA,IACG,OAAO;AAAA,MACH,SAAS;AAAA,MACT,qBAAqB,UAAU,QAAQ,WAAW,CAAC;AAAA,MACnD,KAAK,QAAQ,OAAO;AAAA,IACxB;AAAA,IAEC;AAAA;AACL,CACH;","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,30 +1,54 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, Properties, FieldDescription } from '@dynamic-field-kit/core';
|
|
4
|
+
export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
type LayoutRenderer<C = any> = (props: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
config?: C;
|
|
9
|
+
}) => React.ReactElement;
|
|
10
|
+
declare class LayoutRegistry {
|
|
11
|
+
private layouts;
|
|
12
|
+
register(type: string, renderer: LayoutRenderer): void;
|
|
13
|
+
get(type: string): LayoutRenderer | undefined;
|
|
5
14
|
}
|
|
6
|
-
|
|
15
|
+
declare const layoutRegistry: LayoutRegistry;
|
|
7
16
|
|
|
8
|
-
|
|
17
|
+
type BaseLayout = "column" | "row" | {
|
|
18
|
+
type: "grid";
|
|
19
|
+
columns?: number;
|
|
20
|
+
gap?: number;
|
|
21
|
+
};
|
|
22
|
+
type LayoutConfig = BaseLayout | {
|
|
23
|
+
type: "responsive";
|
|
24
|
+
mobile: BaseLayout;
|
|
25
|
+
desktop: BaseLayout;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
interface Props$2<T extends FieldTypeKey> {
|
|
9
29
|
type: T;
|
|
10
30
|
value?: any;
|
|
11
31
|
onChange?: (value: any) => void;
|
|
12
32
|
label?: string;
|
|
33
|
+
options?: Properties[];
|
|
34
|
+
className?: string;
|
|
35
|
+
description?: ReactNode;
|
|
13
36
|
}
|
|
14
|
-
declare const DynamicInput: <T extends FieldTypeKey
|
|
37
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
15
38
|
|
|
16
39
|
interface Props$1 {
|
|
17
40
|
fieldDescription: FieldDescription;
|
|
18
41
|
renderInfos: Properties;
|
|
19
42
|
onValueChangeField: (value: any, key: string) => void;
|
|
20
43
|
}
|
|
21
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField
|
|
44
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
22
45
|
|
|
23
46
|
interface Props {
|
|
24
47
|
fieldDescriptions: FieldDescription[];
|
|
25
48
|
properties?: Properties;
|
|
26
49
|
onChange?: (data: Properties) => void;
|
|
50
|
+
layout?: LayoutConfig;
|
|
27
51
|
}
|
|
28
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
29
53
|
|
|
30
|
-
export { DynamicInput, FieldInput, type
|
|
54
|
+
export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,30 +1,54 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, Properties, FieldDescription } from '@dynamic-field-kit/core';
|
|
4
|
+
export { FieldDescription, FieldRendererProps, FieldTypeKey, fieldRegistry } from '@dynamic-field-kit/core';
|
|
3
5
|
|
|
4
|
-
|
|
6
|
+
type LayoutRenderer<C = any> = (props: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
config?: C;
|
|
9
|
+
}) => React.ReactElement;
|
|
10
|
+
declare class LayoutRegistry {
|
|
11
|
+
private layouts;
|
|
12
|
+
register(type: string, renderer: LayoutRenderer): void;
|
|
13
|
+
get(type: string): LayoutRenderer | undefined;
|
|
5
14
|
}
|
|
6
|
-
|
|
15
|
+
declare const layoutRegistry: LayoutRegistry;
|
|
7
16
|
|
|
8
|
-
|
|
17
|
+
type BaseLayout = "column" | "row" | {
|
|
18
|
+
type: "grid";
|
|
19
|
+
columns?: number;
|
|
20
|
+
gap?: number;
|
|
21
|
+
};
|
|
22
|
+
type LayoutConfig = BaseLayout | {
|
|
23
|
+
type: "responsive";
|
|
24
|
+
mobile: BaseLayout;
|
|
25
|
+
desktop: BaseLayout;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
interface Props$2<T extends FieldTypeKey> {
|
|
9
29
|
type: T;
|
|
10
30
|
value?: any;
|
|
11
31
|
onChange?: (value: any) => void;
|
|
12
32
|
label?: string;
|
|
33
|
+
options?: Properties[];
|
|
34
|
+
className?: string;
|
|
35
|
+
description?: ReactNode;
|
|
13
36
|
}
|
|
14
|
-
declare const DynamicInput: <T extends FieldTypeKey
|
|
37
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
15
38
|
|
|
16
39
|
interface Props$1 {
|
|
17
40
|
fieldDescription: FieldDescription;
|
|
18
41
|
renderInfos: Properties;
|
|
19
42
|
onValueChangeField: (value: any, key: string) => void;
|
|
20
43
|
}
|
|
21
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField
|
|
44
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
22
45
|
|
|
23
46
|
interface Props {
|
|
24
47
|
fieldDescriptions: FieldDescription[];
|
|
25
48
|
properties?: Properties;
|
|
26
49
|
onChange?: (data: Properties) => void;
|
|
50
|
+
layout?: LayoutConfig;
|
|
27
51
|
}
|
|
28
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
|
|
52
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
29
53
|
|
|
30
|
-
export { DynamicInput, FieldInput, type
|
|
54
|
+
export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
|
package/dist/index.js
CHANGED
|
@@ -5,6 +5,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __esm = (fn, res) => function __init() {
|
|
9
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
10
|
+
};
|
|
8
11
|
var __commonJS = (cb, mod) => function __require() {
|
|
9
12
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
10
13
|
};
|
|
@@ -30,6 +33,105 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
30
33
|
));
|
|
31
34
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
32
35
|
|
|
36
|
+
// src/layout/layoutRegistry.ts
|
|
37
|
+
var LayoutRegistry, layoutRegistry;
|
|
38
|
+
var init_layoutRegistry = __esm({
|
|
39
|
+
"src/layout/layoutRegistry.ts"() {
|
|
40
|
+
"use strict";
|
|
41
|
+
LayoutRegistry = class {
|
|
42
|
+
constructor() {
|
|
43
|
+
this.layouts = /* @__PURE__ */ new Map();
|
|
44
|
+
}
|
|
45
|
+
register(type, renderer) {
|
|
46
|
+
if (this.layouts.has(type)) {
|
|
47
|
+
console.warn(`[dynamic-field-kit] Layout "${type}" already exists`);
|
|
48
|
+
}
|
|
49
|
+
this.layouts.set(type, renderer);
|
|
50
|
+
}
|
|
51
|
+
get(type) {
|
|
52
|
+
return this.layouts.get(type);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
layoutRegistry = new LayoutRegistry();
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
// src/layout/defaultLayouts.tsx
|
|
60
|
+
var defaultLayouts_exports = {};
|
|
61
|
+
var import_jsx_runtime;
|
|
62
|
+
var init_defaultLayouts = __esm({
|
|
63
|
+
"src/layout/defaultLayouts.tsx"() {
|
|
64
|
+
"use strict";
|
|
65
|
+
init_layoutRegistry();
|
|
66
|
+
import_jsx_runtime = require("react/jsx-runtime");
|
|
67
|
+
layoutRegistry.register("column", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
style: {
|
|
71
|
+
display: "flex",
|
|
72
|
+
flexDirection: "column",
|
|
73
|
+
gap: config?.gap ?? 12
|
|
74
|
+
},
|
|
75
|
+
children
|
|
76
|
+
}
|
|
77
|
+
));
|
|
78
|
+
layoutRegistry.register("row", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
+
"div",
|
|
80
|
+
{
|
|
81
|
+
style: {
|
|
82
|
+
display: "flex",
|
|
83
|
+
flexDirection: "row",
|
|
84
|
+
gap: config?.gap ?? 12
|
|
85
|
+
},
|
|
86
|
+
children
|
|
87
|
+
}
|
|
88
|
+
));
|
|
89
|
+
layoutRegistry.register("grid", ({ children, config }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
style: {
|
|
93
|
+
display: "grid",
|
|
94
|
+
gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,
|
|
95
|
+
gap: config?.gap ?? 12
|
|
96
|
+
},
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
));
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// src/layout/responsiveLayout.tsx
|
|
104
|
+
var responsiveLayout_exports = {};
|
|
105
|
+
function resolve(layout) {
|
|
106
|
+
if (typeof layout === "string") {
|
|
107
|
+
return { type: layout, config: {} };
|
|
108
|
+
}
|
|
109
|
+
return { type: layout.type, config: layout };
|
|
110
|
+
}
|
|
111
|
+
var import_jsx_runtime2;
|
|
112
|
+
var init_responsiveLayout = __esm({
|
|
113
|
+
"src/layout/responsiveLayout.tsx"() {
|
|
114
|
+
"use strict";
|
|
115
|
+
init_layoutRegistry();
|
|
116
|
+
import_jsx_runtime2 = require("react/jsx-runtime");
|
|
117
|
+
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
118
|
+
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
119
|
+
const current = isMobile ? config.mobile : config.desktop;
|
|
120
|
+
if (!current) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
121
|
+
children,
|
|
122
|
+
" "
|
|
123
|
+
] });
|
|
124
|
+
const { type, config: childConfig } = resolve(current);
|
|
125
|
+
const Renderer = layoutRegistry.get(type);
|
|
126
|
+
if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
127
|
+
children,
|
|
128
|
+
" "
|
|
129
|
+
] });
|
|
130
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Renderer, { config: childConfig, children });
|
|
131
|
+
});
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
|
|
33
135
|
// ../core/dist/index.js
|
|
34
136
|
var require_dist = __commonJS({
|
|
35
137
|
"../core/dist/index.js"(exports2, module2) {
|
|
@@ -54,7 +156,7 @@ var require_dist = __commonJS({
|
|
|
54
156
|
var index_exports2 = {};
|
|
55
157
|
__export2(index_exports2, {
|
|
56
158
|
FieldRegistry: () => FieldRegistry,
|
|
57
|
-
fieldRegistry: () =>
|
|
159
|
+
fieldRegistry: () => fieldRegistry3
|
|
58
160
|
});
|
|
59
161
|
module2.exports = __toCommonJS2(index_exports2);
|
|
60
162
|
var FieldRegistry = class {
|
|
@@ -69,7 +171,7 @@ var require_dist = __commonJS({
|
|
|
69
171
|
return this.registry[type];
|
|
70
172
|
}
|
|
71
173
|
};
|
|
72
|
-
var
|
|
174
|
+
var fieldRegistry3 = new FieldRegistry();
|
|
73
175
|
}
|
|
74
176
|
});
|
|
75
177
|
|
|
@@ -78,76 +180,76 @@ var index_exports = {};
|
|
|
78
180
|
__export(index_exports, {
|
|
79
181
|
DynamicInput: () => DynamicInput_default,
|
|
80
182
|
FieldInput: () => FieldInput_default,
|
|
81
|
-
MultiFieldInput: () => MultiFieldInput_default
|
|
183
|
+
MultiFieldInput: () => MultiFieldInput_default,
|
|
184
|
+
fieldRegistry: () => import_core2.fieldRegistry,
|
|
185
|
+
layoutRegistry: () => layoutRegistry
|
|
82
186
|
});
|
|
83
187
|
module.exports = __toCommonJS(index_exports);
|
|
84
188
|
|
|
85
|
-
// src/
|
|
189
|
+
// src/registerDefaults.ts
|
|
190
|
+
async function registerDefaults() {
|
|
191
|
+
await Promise.resolve().then(() => (init_defaultLayouts(), defaultLayouts_exports));
|
|
192
|
+
await Promise.resolve().then(() => (init_responsiveLayout(), responsiveLayout_exports));
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
// src/layout/index.ts
|
|
196
|
+
init_layoutRegistry();
|
|
197
|
+
|
|
198
|
+
// src/components/DynamicInput.tsx
|
|
86
199
|
var import_core = __toESM(require_dist());
|
|
87
|
-
var
|
|
88
|
-
var DynamicInput = ({
|
|
89
|
-
type,
|
|
90
|
-
value,
|
|
91
|
-
onChange,
|
|
92
|
-
label
|
|
93
|
-
}) => {
|
|
200
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
201
|
+
var DynamicInput = ({ type, value, onChange, label, options, className, description }) => {
|
|
94
202
|
const Renderer = import_core.fieldRegistry.get(type);
|
|
95
|
-
if (!Renderer) {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
102
|
-
Renderer,
|
|
103
|
-
{
|
|
104
|
-
value,
|
|
105
|
-
onValueChange: onChange,
|
|
106
|
-
label
|
|
107
|
-
}
|
|
108
|
-
);
|
|
203
|
+
if (!Renderer) return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
|
|
204
|
+
"Unknown field type: ",
|
|
205
|
+
type
|
|
206
|
+
] });
|
|
207
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Renderer, { value, onValueChange: onChange, label, options, className, description });
|
|
109
208
|
};
|
|
110
209
|
var DynamicInput_default = DynamicInput;
|
|
111
210
|
|
|
112
|
-
// src/FieldInput.tsx
|
|
113
|
-
var
|
|
114
|
-
var FieldInput = ({
|
|
115
|
-
fieldDescription
|
|
116
|
-
|
|
117
|
-
onValueChangeField
|
|
118
|
-
}) => {
|
|
119
|
-
const { name, type, label } = fieldDescription;
|
|
120
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
211
|
+
// src/components/FieldInput.tsx
|
|
212
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
213
|
+
var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
214
|
+
const { name, type, label, options, className, description } = fieldDescription;
|
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
121
216
|
DynamicInput_default,
|
|
122
217
|
{
|
|
123
218
|
type,
|
|
124
219
|
label,
|
|
125
220
|
value: renderInfos[name],
|
|
221
|
+
options,
|
|
222
|
+
className,
|
|
223
|
+
description,
|
|
126
224
|
onChange: (v) => onValueChangeField(v, name)
|
|
127
225
|
}
|
|
128
226
|
);
|
|
129
227
|
};
|
|
130
228
|
var FieldInput_default = FieldInput;
|
|
131
229
|
|
|
132
|
-
// src/MultiFieldInput.tsx
|
|
230
|
+
// src/components/MultiFieldInput.tsx
|
|
133
231
|
var import_react = require("react");
|
|
134
|
-
var
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
232
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
233
|
+
function resolveLayout(layout) {
|
|
234
|
+
if (!layout) return { type: "column", config: {} };
|
|
235
|
+
if (typeof layout === "string") return { type: layout, config: {} };
|
|
236
|
+
return { type: layout.type, config: layout };
|
|
237
|
+
}
|
|
238
|
+
var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
140
239
|
const [data, setData] = (0, import_react.useState)({});
|
|
141
240
|
(0, import_react.useEffect)(() => {
|
|
142
241
|
if (properties) setData(properties);
|
|
143
242
|
}, [properties]);
|
|
144
243
|
const visibleFields = (0, import_react.useMemo)(
|
|
145
|
-
() => fieldDescriptions.filter(
|
|
146
|
-
(f) => !f.appearCondition || f.appearCondition(data)
|
|
147
|
-
),
|
|
244
|
+
() => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
|
|
148
245
|
[fieldDescriptions, data]
|
|
149
246
|
);
|
|
150
|
-
|
|
247
|
+
const { type, config } = resolveLayout(layout);
|
|
248
|
+
const Layout = layoutRegistry.get(type);
|
|
249
|
+
if (!Layout) {
|
|
250
|
+
throw new Error(`Unknown layout: ${type}`);
|
|
251
|
+
}
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
151
253
|
FieldInput_default,
|
|
152
254
|
{
|
|
153
255
|
fieldDescription: f,
|
|
@@ -157,14 +259,21 @@ var MultiFieldInput = ({
|
|
|
157
259
|
setData(next);
|
|
158
260
|
onChange?.(next);
|
|
159
261
|
}
|
|
160
|
-
}
|
|
161
|
-
|
|
262
|
+
},
|
|
263
|
+
f.name
|
|
264
|
+
)) });
|
|
162
265
|
};
|
|
163
266
|
var MultiFieldInput_default = MultiFieldInput;
|
|
267
|
+
|
|
268
|
+
// src/index.ts
|
|
269
|
+
var import_core2 = __toESM(require_dist());
|
|
270
|
+
registerDefaults();
|
|
164
271
|
// Annotate the CommonJS export names for ESM import in node:
|
|
165
272
|
0 && (module.exports = {
|
|
166
273
|
DynamicInput,
|
|
167
274
|
FieldInput,
|
|
168
|
-
MultiFieldInput
|
|
275
|
+
MultiFieldInput,
|
|
276
|
+
fieldRegistry,
|
|
277
|
+
layoutRegistry
|
|
169
278
|
});
|
|
170
279
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/index.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, KHÔNG constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety ở API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","export * from \"./types\"\r\nexport { default as DynamicInput } from \"./DynamicInput\"\r\nexport { default as FieldInput } from \"./FieldInput\"\r\nexport { default as MultiFieldInput } from \"./MultiFieldInput\"\r\n","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({\r\n type,\r\n value,\r\n onChange,\r\n label,\r\n}: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n if (!Renderer) {\r\n return <div>Unknown field type: {type}</div>\r\n }\r\n\r\n return (\r\n <Renderer\r\n value={value}\r\n onValueChange={onChange}\r\n label={label}\r\n />\r\n )\r\n}\r\n\r\nexport default DynamicInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\nconst FieldInput = ({\r\n fieldDescription,\r\n renderInfos,\r\n onValueChangeField,\r\n}: Props) => {\r\n const { name, type, label } = fieldDescription\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n}\r\n\r\nconst MultiFieldInput = ({\r\n fieldDescriptions,\r\n properties,\r\n onChange,\r\n}: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () =>\r\n fieldDescriptions.filter(\r\n (f) => !f.appearCondition || f.appearCondition(data)\r\n ),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n return (\r\n <>\r\n {visibleFields.map((f) => (\r\n <Fragment key={f.name}>\r\n <FieldInput\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n </Fragment>\r\n ))}\r\n </>\r\n )\r\n}\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,QAAAA,iBAAA,CAAA;AAAA,IAAAC,UAAAD,gBAAA;MAAA,eAAA,MAAA;MAAA,eAAA,MAAAE;IAAA,CAAA;AAAA,IAAAC,QAAA,UAAAC,cAAAJ,cAAA;ACKO,QAAM,gBAAN,MAAoB;MAApB,cAAA;AAEH,aAAQ,WAA+C,CAAC;MAAA;;MAGxD,SACI,MACA,UACF;AACE,aAAK,SAAS,IAAc,IAAI;MACpC;MAEA,IACI,MAC0C;AAC1C,eAAO,KAAK,SAAS,IAAc;MACvC;IACJ;AAEO,QAAME,iBAAgB,IAAI,cAAc;;;;;ACxB/C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAA4C;AAkB7B;AATf,IAAM,eAAe,CAAyB;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAgB;AACZ,QAAM,WAAW,0BAAc,IAAI,IAAI;AAEvC,MAAI,CAAC,UAAU;AACX,WAAO,6CAAC,SAAI;AAAA;AAAA,MAAqB;AAAA,OAAK;AAAA,EAC1C;AAEA,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,eAAe;AAAA,MACf;AAAA;AAAA,EACJ;AAER;AAEA,IAAO,uBAAQ;;;ACbX,IAAAG,sBAAA;AARJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAEA,IAAO,qBAAQ;;;ACzBf,mBAAuD;AA6BnD,IAAAC,sBAAA;AApBJ,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,MAAa;AACX,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAqB,CAAC,CAAC;AAE/C,8BAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,oBAAgB;AAAA,IACpB,MACE,kBAAkB;AAAA,MAChB,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI;AAAA,IACrD;AAAA,IACF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,SACE,6EACG,wBAAc,IAAI,CAAC,MAClB,6CAAC,yBACC;AAAA,IAAC;AAAA;AAAA,MACC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,EACF,KATa,EAAE,IAUjB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":["index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../src/layout/layoutRegistry.ts","../src/layout/defaultLayouts.tsx","../src/layout/responsiveLayout.tsx","../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/index.ts","../src/registerDefaults.ts","../src/layout/index.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx"],"sourcesContent":["import React from \"react\"\r\n\r\nexport type LayoutRenderer<C = any> = (props: {\r\n children: React.ReactNode\r\n config?: C\r\n}) => React.ReactElement\r\n\r\nexport class LayoutRegistry {\r\n private layouts = new Map<string, LayoutRenderer>()\r\n\r\n register(type: string, renderer: LayoutRenderer) {\r\n if (this.layouts.has(type)) {\r\n console.warn(`[dynamic-field-kit] Layout \"${type}\" already exists`)\r\n }\r\n this.layouts.set(type, renderer)\r\n }\r\n\r\n get(type: string): LayoutRenderer | undefined {\r\n return this.layouts.get(type)\r\n }\r\n}\r\n\r\nexport const layoutRegistry = new LayoutRegistry()\r\n","import { layoutRegistry } from \"./layoutRegistry\"\r\n\r\nlayoutRegistry.register(\"column\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"row\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))\r\n\r\nlayoutRegistry.register(\"grid\", ({ children, config }) => (\r\n <div\r\n style={{\r\n display: \"grid\",\r\n gridTemplateColumns: `repeat(${config?.columns ?? 2}, 1fr)`,\r\n gap: config?.gap ?? 12,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n))","import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n","export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, KHÔNG constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety ở API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n","export async function registerDefaults() {\r\n await import(\"./layout/defaultLayouts\")\r\n await import(\"./layout/responsiveLayout\")\r\n}\r\n","export { layoutRegistry } from \"./layoutRegistry\"\r\nexport type { LayoutConfig } from \"../types/layout\"","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n"],"mappings":"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","names":["import_jsx_runtime","index_exports","__export","fieldRegistry","module","__toCommonJS","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_core"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,54 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
-
mod
|
|
25
|
-
));
|
|
1
|
+
import {
|
|
2
|
+
__commonJS,
|
|
3
|
+
__toESM,
|
|
4
|
+
layoutRegistry
|
|
5
|
+
} from "./chunk-HAKPX2A2.mjs";
|
|
26
6
|
|
|
27
7
|
// ../core/dist/index.js
|
|
28
8
|
var require_dist = __commonJS({
|
|
29
9
|
"../core/dist/index.js"(exports, module) {
|
|
30
10
|
"use strict";
|
|
31
|
-
var
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
11
|
+
var __defProp = Object.defineProperty;
|
|
12
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
13
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
14
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
35
15
|
var __export = (target, all) => {
|
|
36
16
|
for (var name in all)
|
|
37
|
-
|
|
17
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
18
|
};
|
|
39
|
-
var
|
|
19
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
20
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
-
for (let key of
|
|
42
|
-
if (!
|
|
43
|
-
|
|
21
|
+
for (let key of __getOwnPropNames(from))
|
|
22
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
23
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
24
|
}
|
|
45
25
|
return to;
|
|
46
26
|
};
|
|
47
|
-
var __toCommonJS = (mod) =>
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
28
|
var index_exports = {};
|
|
49
29
|
__export(index_exports, {
|
|
50
30
|
FieldRegistry: () => FieldRegistry,
|
|
51
|
-
fieldRegistry: () =>
|
|
31
|
+
fieldRegistry: () => fieldRegistry3
|
|
52
32
|
});
|
|
53
33
|
module.exports = __toCommonJS(index_exports);
|
|
54
34
|
var FieldRegistry = class {
|
|
@@ -63,76 +43,71 @@ var require_dist = __commonJS({
|
|
|
63
43
|
return this.registry[type];
|
|
64
44
|
}
|
|
65
45
|
};
|
|
66
|
-
var
|
|
46
|
+
var fieldRegistry3 = new FieldRegistry();
|
|
67
47
|
}
|
|
68
48
|
});
|
|
69
49
|
|
|
70
|
-
// src/
|
|
50
|
+
// src/registerDefaults.ts
|
|
51
|
+
async function registerDefaults() {
|
|
52
|
+
await import("./defaultLayouts-PVN6T4LH.mjs");
|
|
53
|
+
await import("./responsiveLayout-2KUYZQJ3.mjs");
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// src/components/DynamicInput.tsx
|
|
71
57
|
var import_core = __toESM(require_dist());
|
|
72
58
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
73
|
-
var DynamicInput = ({
|
|
74
|
-
type,
|
|
75
|
-
value,
|
|
76
|
-
onChange,
|
|
77
|
-
label
|
|
78
|
-
}) => {
|
|
59
|
+
var DynamicInput = ({ type, value, onChange, label, options, className, description }) => {
|
|
79
60
|
const Renderer = import_core.fieldRegistry.get(type);
|
|
80
|
-
if (!Renderer) {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
return /* @__PURE__ */ jsx(
|
|
87
|
-
Renderer,
|
|
88
|
-
{
|
|
89
|
-
value,
|
|
90
|
-
onValueChange: onChange,
|
|
91
|
-
label
|
|
92
|
-
}
|
|
93
|
-
);
|
|
61
|
+
if (!Renderer) return /* @__PURE__ */ jsxs("div", { children: [
|
|
62
|
+
"Unknown field type: ",
|
|
63
|
+
type
|
|
64
|
+
] });
|
|
65
|
+
return /* @__PURE__ */ jsx(Renderer, { value, onValueChange: onChange, label, options, className, description });
|
|
94
66
|
};
|
|
95
67
|
var DynamicInput_default = DynamicInput;
|
|
96
68
|
|
|
97
|
-
// src/FieldInput.tsx
|
|
69
|
+
// src/components/FieldInput.tsx
|
|
98
70
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
99
|
-
var FieldInput = ({
|
|
100
|
-
fieldDescription
|
|
101
|
-
renderInfos,
|
|
102
|
-
onValueChangeField
|
|
103
|
-
}) => {
|
|
104
|
-
const { name, type, label } = fieldDescription;
|
|
71
|
+
var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
72
|
+
const { name, type, label, options, className, description } = fieldDescription;
|
|
105
73
|
return /* @__PURE__ */ jsx2(
|
|
106
74
|
DynamicInput_default,
|
|
107
75
|
{
|
|
108
76
|
type,
|
|
109
77
|
label,
|
|
110
78
|
value: renderInfos[name],
|
|
79
|
+
options,
|
|
80
|
+
className,
|
|
81
|
+
description,
|
|
111
82
|
onChange: (v) => onValueChangeField(v, name)
|
|
112
83
|
}
|
|
113
84
|
);
|
|
114
85
|
};
|
|
115
86
|
var FieldInput_default = FieldInput;
|
|
116
87
|
|
|
117
|
-
// src/MultiFieldInput.tsx
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
88
|
+
// src/components/MultiFieldInput.tsx
|
|
89
|
+
import { useEffect, useMemo, useState } from "react";
|
|
90
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
91
|
+
function resolveLayout(layout) {
|
|
92
|
+
if (!layout) return { type: "column", config: {} };
|
|
93
|
+
if (typeof layout === "string") return { type: layout, config: {} };
|
|
94
|
+
return { type: layout.type, config: layout };
|
|
95
|
+
}
|
|
96
|
+
var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
125
97
|
const [data, setData] = useState({});
|
|
126
98
|
useEffect(() => {
|
|
127
99
|
if (properties) setData(properties);
|
|
128
100
|
}, [properties]);
|
|
129
101
|
const visibleFields = useMemo(
|
|
130
|
-
() => fieldDescriptions.filter(
|
|
131
|
-
(f) => !f.appearCondition || f.appearCondition(data)
|
|
132
|
-
),
|
|
102
|
+
() => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
|
|
133
103
|
[fieldDescriptions, data]
|
|
134
104
|
);
|
|
135
|
-
|
|
105
|
+
const { type, config } = resolveLayout(layout);
|
|
106
|
+
const Layout = layoutRegistry.get(type);
|
|
107
|
+
if (!Layout) {
|
|
108
|
+
throw new Error(`Unknown layout: ${type}`);
|
|
109
|
+
}
|
|
110
|
+
return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
|
|
136
111
|
FieldInput_default,
|
|
137
112
|
{
|
|
138
113
|
fieldDescription: f,
|
|
@@ -142,13 +117,21 @@ var MultiFieldInput = ({
|
|
|
142
117
|
setData(next);
|
|
143
118
|
onChange?.(next);
|
|
144
119
|
}
|
|
145
|
-
}
|
|
146
|
-
|
|
120
|
+
},
|
|
121
|
+
f.name
|
|
122
|
+
)) });
|
|
147
123
|
};
|
|
148
124
|
var MultiFieldInput_default = MultiFieldInput;
|
|
125
|
+
|
|
126
|
+
// src/index.ts
|
|
127
|
+
var import_core2 = __toESM(require_dist());
|
|
128
|
+
registerDefaults();
|
|
129
|
+
var export_fieldRegistry = import_core2.fieldRegistry;
|
|
149
130
|
export {
|
|
150
131
|
DynamicInput_default as DynamicInput,
|
|
151
132
|
FieldInput_default as FieldInput,
|
|
152
|
-
MultiFieldInput_default as MultiFieldInput
|
|
133
|
+
MultiFieldInput_default as MultiFieldInput,
|
|
134
|
+
export_fieldRegistry as fieldRegistry,
|
|
135
|
+
layoutRegistry
|
|
153
136
|
};
|
|
154
137
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/DynamicInput.tsx","../src/FieldInput.tsx","../src/MultiFieldInput.tsx"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, KHÔNG constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety ở API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","import { fieldRegistry, FieldTypeKey } from \"@dynamic-field-kit/core\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n}\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({
|
|
1
|
+
{"version":3,"sources":["../../core/src/index.ts","../../core/src/fieldRegistry.ts","../src/registerDefaults.ts","../src/components/DynamicInput.tsx","../src/components/FieldInput.tsx","../src/components/MultiFieldInput.tsx","../src/index.ts"],"sourcesContent":["export * from \"./types\"\r\nexport * from \"./fieldRegistry\"\r\n","import { JSX } from \"react\"\r\nimport type { FieldRendererProps, FieldTypeMap } from \"./types\"\r\n\r\nexport type FieldRenderer<T = any> = (props: FieldRendererProps<T>) => JSX.Element\r\n\r\nexport class FieldRegistry {\r\n // ❗ INTERNAL = string, KHÔNG constrain\r\n private registry: Record<string, FieldRenderer<any>> = {}\r\n\r\n // ✅ Type safety ở API\r\n register<K extends keyof FieldTypeMap>(\r\n type: K,\r\n renderer: FieldRenderer<FieldTypeMap[K]>\r\n ) {\r\n this.registry[type as string] = renderer\r\n }\r\n\r\n get<K extends keyof FieldTypeMap>(\r\n type: K\r\n ): FieldRenderer<FieldTypeMap[K]> | undefined {\r\n return this.registry[type as string]\r\n }\r\n}\r\n\r\nexport const fieldRegistry = new FieldRegistry()\r\n","export async function registerDefaults() {\r\n await import(\"./layout/defaultLayouts\")\r\n await import(\"./layout/responsiveLayout\")\r\n}\r\n","import { fieldRegistry, FieldTypeKey, Properties } from \"@dynamic-field-kit/core\"\r\nimport { ReactNode } from \"react\"\r\n\r\ninterface Props<T extends FieldTypeKey> {\r\n type: T\r\n value?: any\r\n onChange?: (value: any) => void\r\n label?: string\r\n options?: Properties[]\r\n className?: string\r\n description?: ReactNode\r\n}\r\n\r\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label, options, className, description }: Props<T>) => {\r\n const Renderer = fieldRegistry.get(type)\r\n\r\n\r\n if (!Renderer) return <div>Unknown field type: {type}</div>\r\n\r\n\r\n return <Renderer value={value} onValueChange={onChange} label={label} options={options} className={className} description={description} />\r\n}\r\n\r\n\r\nexport default DynamicInput","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport DynamicInput from \"./DynamicInput\"\r\n\r\ninterface Props {\r\n fieldDescription: FieldDescription\r\n renderInfos: Properties\r\n onValueChangeField: (value: any, key: string) => void\r\n}\r\n\r\n\r\nconst FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }: Props) => {\r\n const { name, type, label, options, className, description } = fieldDescription\r\n\r\n\r\n return (\r\n <DynamicInput\r\n type={type}\r\n label={label}\r\n value={renderInfos[name]}\r\n options={options}\r\n className={className}\r\n description={description}\r\n onChange={(v) => onValueChangeField(v, name)}\r\n />\r\n )\r\n}\r\n\r\n\r\nexport default FieldInput\r\n","import { FieldDescription, Properties } from \"@dynamic-field-kit/core\"\r\nimport { Fragment, useEffect, useMemo, useState } from \"react\"\r\nimport FieldInput from \"./FieldInput\"\r\nimport { layoutRegistry } from \"../layout\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\n\r\ninterface Props {\r\n fieldDescriptions: FieldDescription[]\r\n properties?: Properties\r\n onChange?: (data: Properties) => void\r\n layout?: LayoutConfig\r\n}\r\n\r\n\r\nfunction resolveLayout(layout?: LayoutConfig) {\r\n if (!layout) return { type: \"column\", config: {} }\r\n if (typeof layout === \"string\") return { type: layout, config: {} }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\n\r\nconst MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }: Props) => {\r\n const [data, setData] = useState<Properties>({})\r\n\r\n useEffect(() => {\r\n if (properties) setData(properties)\r\n }, [properties])\r\n\r\n const visibleFields = useMemo(\r\n () => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),\r\n [fieldDescriptions, data]\r\n )\r\n\r\n const { type, config } = resolveLayout(layout)\r\n \r\n const Layout = layoutRegistry.get(type)\r\n\r\n if (!Layout) {\r\n throw new Error(`Unknown layout: ${type}`)\r\n }\r\n\r\n return (\r\n <Layout config={config}>\r\n {visibleFields.map((f) => (\r\n <FieldInput\r\n key={f.name}\r\n fieldDescription={f}\r\n renderInfos={data}\r\n onValueChangeField={(value, key) => {\r\n const next = { ...data, [key]: value }\r\n setData(next)\r\n onChange?.(next)\r\n }}\r\n />\r\n ))}\r\n </Layout>\r\n )\r\n}\r\n\r\n\r\nexport default MultiFieldInput\r\n","import { registerDefaults } from \"./registerDefaults\"\r\n\r\nregisterDefaults()\r\n\r\n\r\nexport { layoutRegistry } from \"./layout\"\r\n\r\n\r\nexport { default as DynamicInput } from \"./components/DynamicInput\"\r\nexport { default as FieldInput } from \"./components/FieldInput\"\r\nexport { default as MultiFieldInput } from \"./components/MultiFieldInput\"\r\n\r\n\r\nexport type { LayoutConfig } from \"./types/layout\"\r\n// 🔁 Re-export từ core (CÙNG INSTANCE ĐÃ BUNDLE)\r\nexport {\r\n fieldRegistry,\r\n type FieldTypeKey,\r\n type FieldDescription,\r\n type FieldRendererProps,\r\n} from \"@dynamic-field-kit/core\"\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,QAAA,gBAAA,CAAA;AAAA,aAAA,eAAA;MAAA,eAAA,MAAA;MAAA,eAAA,MAAAA;IAAA,CAAA;AAAA,WAAA,UAAA,aAAA,aAAA;ACKO,QAAM,gBAAN,MAAoB;MAApB,cAAA;AAEH,aAAQ,WAA+C,CAAC;MAAA;;MAGxD,SACI,MACA,UACF;AACE,aAAK,SAAS,IAAc,IAAI;MACpC;MAEA,IACI,MAC0C;AAC1C,eAAO,KAAK,SAAS,IAAc;MACvC;IACJ;AAEO,QAAMA,iBAAgB,IAAI,cAAc;;;;;ACxB/C,eAAsB,mBAAmB;AACrC,QAAM,OAAO,+BAAyB;AACtC,QAAM,OAAO,iCAA2B;AAC5C;;;ACHA,kBAAwD;AAkB9B,SAGf,KAHe;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,OAAO,SAAS,WAAW,YAAY,MAAgB;AAC1H,QAAM,WAAW,0BAAc,IAAI,IAAI;AAGvC,MAAI,CAAC,SAAU,QAAO,qBAAC,SAAI;AAAA;AAAA,IAAqB;AAAA,KAAK;AAGrD,SAAO,oBAAC,YAAS,OAAc,eAAe,UAAU,OAAc,SAAkB,WAAsB,aAA0B;AAC5I;AAGA,IAAO,uBAAQ;;;ACVX,gBAAAC,YAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,YAAY,IAAI;AAG/D,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;AC3Bf,SAAmB,WAAW,SAAS,gBAAgB;AA4C/C,gBAAAC,YAAA;AA9BR,SAAS,cAAc,QAAuB;AAC5C,MAAI,CAAC,OAAQ,QAAO,EAAE,MAAM,UAAU,QAAQ,CAAC,EAAE;AACjD,MAAI,OAAO,WAAW,SAAU,QAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAClE,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC7C;AAGA,IAAM,kBAAkB,CAAC,EAAE,mBAAmB,YAAY,UAAU,OAAO,MAAa;AACtF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAqB,CAAC,CAAC;AAE/C,YAAU,MAAM;AACd,QAAI,WAAY,SAAQ,UAAU;AAAA,EACpC,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,gBAAgB;AAAA,IACpB,MAAM,kBAAkB,OAAO,CAAC,MAAM,CAAC,EAAE,mBAAmB,EAAE,gBAAgB,IAAI,CAAC;AAAA,IACnF,CAAC,mBAAmB,IAAI;AAAA,EAC1B;AAEA,QAAM,EAAE,MAAM,OAAO,IAAI,cAAc,MAAM;AAE7C,QAAM,SAAS,eAAe,IAAI,IAAI;AAEtC,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,mBAAmB,IAAI,EAAE;AAAA,EAC3C;AAEA,SACE,gBAAAA,KAAC,UAAO,QACL,wBAAc,IAAI,CAAC,MAClB,gBAAAA;AAAA,IAAC;AAAA;AAAA,MAEC,kBAAkB;AAAA,MAClB,aAAa;AAAA,MACb,oBAAoB,CAAC,OAAO,QAAQ;AAClC,cAAM,OAAO,EAAE,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM;AACrC,gBAAQ,IAAI;AACZ,mBAAW,IAAI;AAAA,MACjB;AAAA;AAAA,IAPK,EAAE;AAAA,EAQT,CACD,GACH;AAEJ;AAGA,IAAO,0BAAQ;;;AC9Cf,IAAAC,eAKO;AAlBP,iBAAiB;","names":["fieldRegistry","jsx","jsx","import_core"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import {
|
|
2
|
+
layoutRegistry
|
|
3
|
+
} from "./chunk-HAKPX2A2.mjs";
|
|
4
|
+
|
|
5
|
+
// src/layout/responsiveLayout.tsx
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
function resolve(layout) {
|
|
8
|
+
if (typeof layout === "string") {
|
|
9
|
+
return { type: layout, config: {} };
|
|
10
|
+
}
|
|
11
|
+
return { type: layout.type, config: layout };
|
|
12
|
+
}
|
|
13
|
+
layoutRegistry.register("responsive", ({ children, config }) => {
|
|
14
|
+
const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
|
|
15
|
+
const current = isMobile ? config.mobile : config.desktop;
|
|
16
|
+
if (!current) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
17
|
+
children,
|
|
18
|
+
" "
|
|
19
|
+
] });
|
|
20
|
+
const { type, config: childConfig } = resolve(current);
|
|
21
|
+
const Renderer = layoutRegistry.get(type);
|
|
22
|
+
if (!Renderer) return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
23
|
+
children,
|
|
24
|
+
" "
|
|
25
|
+
] });
|
|
26
|
+
return /* @__PURE__ */ jsx(Renderer, { config: childConfig, children });
|
|
27
|
+
});
|
|
28
|
+
//# sourceMappingURL=responsiveLayout-2KUYZQJ3.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/layout/responsiveLayout.tsx"],"sourcesContent":["import { layoutRegistry } from \"./layoutRegistry\"\r\nimport { LayoutConfig } from \"../types/layout\"\r\n\r\nfunction resolve(layout: LayoutConfig) {\r\n if (typeof layout === \"string\") {\r\n return { type: layout, config: {} }\r\n }\r\n return { type: layout.type, config: layout }\r\n}\r\n\r\nlayoutRegistry.register(\"responsive\", ({ children, config }) => {\r\n const isMobile =\r\n typeof window !== \"undefined\" && window.innerWidth < 768\r\n\r\n const current = isMobile ? config.mobile : config.desktop\r\n if (!current) return <>{ children } </>\r\n\r\n const { type, config: childConfig } = resolve(current)\r\n const Renderer = layoutRegistry.get(type)\r\n\r\n if (!Renderer) return <>{ children } </>\r\n\r\n return (\r\n <Renderer config= { childConfig } >\r\n { children }\r\n </Renderer>\r\n )\r\n})\r\n"],"mappings":";;;;;AAeyB,mBAQjB,KARiB;AAZzB,SAAS,QAAQ,QAAsB;AACnC,MAAI,OAAO,WAAW,UAAU;AAC5B,WAAO,EAAE,MAAM,QAAQ,QAAQ,CAAC,EAAE;AAAA,EACtC;AACA,SAAO,EAAE,MAAM,OAAO,MAAM,QAAQ,OAAO;AAC/C;AAEA,eAAe,SAAS,cAAc,CAAC,EAAE,UAAU,OAAO,MAAM;AAC5D,QAAM,WACF,OAAO,WAAW,eAAe,OAAO,aAAa;AAEzD,QAAM,UAAU,WAAW,OAAO,SAAS,OAAO;AAClD,MAAI,CAAC,QAAS,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAEpC,QAAM,EAAE,MAAM,QAAQ,YAAY,IAAI,QAAQ,OAAO;AACrD,QAAM,WAAW,eAAe,IAAI,IAAI;AAExC,MAAI,CAAC,SAAU,QAAO,iCAAI;AAAA;AAAA,IAAU;AAAA,KAAC;AAErC,SACI,oBAAC,YAAS,QAAU,aAClB,UACF;AAER,CAAC;","names":[]}
|