@dynamic-field-kit/react 1.0.4 → 1.0.5
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 +29 -8
- package/dist/index.d.ts +29 -8
- package/dist/index.js +153 -47
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +59 -79
- 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,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, FieldDescription, Properties } 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;
|
|
13
33
|
}
|
|
14
|
-
declare const DynamicInput: <T extends FieldTypeKey
|
|
34
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
15
35
|
|
|
16
36
|
interface Props$1 {
|
|
17
37
|
fieldDescription: FieldDescription;
|
|
18
38
|
renderInfos: Properties;
|
|
19
39
|
onValueChangeField: (value: any, key: string) => void;
|
|
20
40
|
}
|
|
21
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField
|
|
41
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
22
42
|
|
|
23
43
|
interface Props {
|
|
24
44
|
fieldDescriptions: FieldDescription[];
|
|
25
45
|
properties?: Properties;
|
|
26
46
|
onChange?: (data: Properties) => void;
|
|
47
|
+
layout?: LayoutConfig;
|
|
27
48
|
}
|
|
28
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
|
|
49
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
29
50
|
|
|
30
|
-
export { DynamicInput, FieldInput, type
|
|
51
|
+
export { DynamicInput, FieldInput, type LayoutConfig, MultiFieldInput, layoutRegistry };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,30 +1,51 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { FieldTypeKey
|
|
3
|
+
import { FieldTypeKey, FieldDescription, Properties } 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;
|
|
13
33
|
}
|
|
14
|
-
declare const DynamicInput: <T extends FieldTypeKey
|
|
34
|
+
declare const DynamicInput: <T extends FieldTypeKey>({ type, value, onChange, label }: Props$2<T>) => react_jsx_runtime.JSX.Element;
|
|
15
35
|
|
|
16
36
|
interface Props$1 {
|
|
17
37
|
fieldDescription: FieldDescription;
|
|
18
38
|
renderInfos: Properties;
|
|
19
39
|
onValueChangeField: (value: any, key: string) => void;
|
|
20
40
|
}
|
|
21
|
-
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField
|
|
41
|
+
declare const FieldInput: ({ fieldDescription, renderInfos, onValueChangeField }: Props$1) => react_jsx_runtime.JSX.Element;
|
|
22
42
|
|
|
23
43
|
interface Props {
|
|
24
44
|
fieldDescriptions: FieldDescription[];
|
|
25
45
|
properties?: Properties;
|
|
26
46
|
onChange?: (data: Properties) => void;
|
|
47
|
+
layout?: LayoutConfig;
|
|
27
48
|
}
|
|
28
|
-
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, }: Props) => react_jsx_runtime.JSX.Element;
|
|
49
|
+
declare const MultiFieldInput: ({ fieldDescriptions, properties, onChange, layout }: Props) => react_jsx_runtime.JSX.Element;
|
|
29
50
|
|
|
30
|
-
export { DynamicInput, FieldInput, type
|
|
51
|
+
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,46 +180,39 @@ 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 }) => {
|
|
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 });
|
|
109
208
|
};
|
|
110
209
|
var DynamicInput_default = DynamicInput;
|
|
111
210
|
|
|
112
|
-
// src/FieldInput.tsx
|
|
113
|
-
var
|
|
114
|
-
var FieldInput = ({
|
|
115
|
-
fieldDescription,
|
|
116
|
-
renderInfos,
|
|
117
|
-
onValueChangeField
|
|
118
|
-
}) => {
|
|
211
|
+
// src/components/FieldInput.tsx
|
|
212
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
213
|
+
var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
119
214
|
const { name, type, label } = fieldDescription;
|
|
120
|
-
return /* @__PURE__ */ (0,
|
|
215
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
121
216
|
DynamicInput_default,
|
|
122
217
|
{
|
|
123
218
|
type,
|
|
@@ -129,25 +224,29 @@ var FieldInput = ({
|
|
|
129
224
|
};
|
|
130
225
|
var FieldInput_default = FieldInput;
|
|
131
226
|
|
|
132
|
-
// src/MultiFieldInput.tsx
|
|
227
|
+
// src/components/MultiFieldInput.tsx
|
|
133
228
|
var import_react = require("react");
|
|
134
|
-
var
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
}
|
|
229
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
230
|
+
function resolveLayout(layout) {
|
|
231
|
+
if (!layout) return { type: "column", config: {} };
|
|
232
|
+
if (typeof layout === "string") return { type: layout, config: {} };
|
|
233
|
+
return { type: layout.type, config: layout };
|
|
234
|
+
}
|
|
235
|
+
var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
140
236
|
const [data, setData] = (0, import_react.useState)({});
|
|
141
237
|
(0, import_react.useEffect)(() => {
|
|
142
238
|
if (properties) setData(properties);
|
|
143
239
|
}, [properties]);
|
|
144
240
|
const visibleFields = (0, import_react.useMemo)(
|
|
145
|
-
() => fieldDescriptions.filter(
|
|
146
|
-
(f) => !f.appearCondition || f.appearCondition(data)
|
|
147
|
-
),
|
|
241
|
+
() => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
|
|
148
242
|
[fieldDescriptions, data]
|
|
149
243
|
);
|
|
150
|
-
|
|
244
|
+
const { type, config } = resolveLayout(layout);
|
|
245
|
+
const Layout = layoutRegistry.get(type);
|
|
246
|
+
if (!Layout) {
|
|
247
|
+
throw new Error(`Unknown layout: ${type}`);
|
|
248
|
+
}
|
|
249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
151
250
|
FieldInput_default,
|
|
152
251
|
{
|
|
153
252
|
fieldDescription: f,
|
|
@@ -157,14 +256,21 @@ var MultiFieldInput = ({
|
|
|
157
256
|
setData(next);
|
|
158
257
|
onChange?.(next);
|
|
159
258
|
}
|
|
160
|
-
}
|
|
161
|
-
|
|
259
|
+
},
|
|
260
|
+
f.name
|
|
261
|
+
)) });
|
|
162
262
|
};
|
|
163
263
|
var MultiFieldInput_default = MultiFieldInput;
|
|
264
|
+
|
|
265
|
+
// src/index.ts
|
|
266
|
+
var import_core2 = __toESM(require_dist());
|
|
267
|
+
registerDefaults();
|
|
164
268
|
// Annotate the CommonJS export names for ESM import in node:
|
|
165
269
|
0 && (module.exports = {
|
|
166
270
|
DynamicInput,
|
|
167
271
|
FieldInput,
|
|
168
|
-
MultiFieldInput
|
|
272
|
+
MultiFieldInput,
|
|
273
|
+
fieldRegistry,
|
|
274
|
+
layoutRegistry
|
|
169
275
|
});
|
|
170
276
|
//# 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 } 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\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label }: 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} />\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 } = 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 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,44 +43,32 @@ 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 }) => {
|
|
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 });
|
|
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
|
-
}) => {
|
|
71
|
+
var FieldInput = ({ fieldDescription, renderInfos, onValueChangeField }) => {
|
|
104
72
|
const { name, type, label } = fieldDescription;
|
|
105
73
|
return /* @__PURE__ */ jsx2(
|
|
106
74
|
DynamicInput_default,
|
|
@@ -114,25 +82,29 @@ var FieldInput = ({
|
|
|
114
82
|
};
|
|
115
83
|
var FieldInput_default = FieldInput;
|
|
116
84
|
|
|
117
|
-
// src/MultiFieldInput.tsx
|
|
118
|
-
import {
|
|
119
|
-
import {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
}
|
|
85
|
+
// src/components/MultiFieldInput.tsx
|
|
86
|
+
import { useEffect, useMemo, useState } from "react";
|
|
87
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
88
|
+
function resolveLayout(layout) {
|
|
89
|
+
if (!layout) return { type: "column", config: {} };
|
|
90
|
+
if (typeof layout === "string") return { type: layout, config: {} };
|
|
91
|
+
return { type: layout.type, config: layout };
|
|
92
|
+
}
|
|
93
|
+
var MultiFieldInput = ({ fieldDescriptions, properties, onChange, layout }) => {
|
|
125
94
|
const [data, setData] = useState({});
|
|
126
95
|
useEffect(() => {
|
|
127
96
|
if (properties) setData(properties);
|
|
128
97
|
}, [properties]);
|
|
129
98
|
const visibleFields = useMemo(
|
|
130
|
-
() => fieldDescriptions.filter(
|
|
131
|
-
(f) => !f.appearCondition || f.appearCondition(data)
|
|
132
|
-
),
|
|
99
|
+
() => fieldDescriptions.filter((f) => !f.appearCondition || f.appearCondition(data)),
|
|
133
100
|
[fieldDescriptions, data]
|
|
134
101
|
);
|
|
135
|
-
|
|
102
|
+
const { type, config } = resolveLayout(layout);
|
|
103
|
+
const Layout = layoutRegistry.get(type);
|
|
104
|
+
if (!Layout) {
|
|
105
|
+
throw new Error(`Unknown layout: ${type}`);
|
|
106
|
+
}
|
|
107
|
+
return /* @__PURE__ */ jsx3(Layout, { config, children: visibleFields.map((f) => /* @__PURE__ */ jsx3(
|
|
136
108
|
FieldInput_default,
|
|
137
109
|
{
|
|
138
110
|
fieldDescription: f,
|
|
@@ -142,13 +114,21 @@ var MultiFieldInput = ({
|
|
|
142
114
|
setData(next);
|
|
143
115
|
onChange?.(next);
|
|
144
116
|
}
|
|
145
|
-
}
|
|
146
|
-
|
|
117
|
+
},
|
|
118
|
+
f.name
|
|
119
|
+
)) });
|
|
147
120
|
};
|
|
148
121
|
var MultiFieldInput_default = MultiFieldInput;
|
|
122
|
+
|
|
123
|
+
// src/index.ts
|
|
124
|
+
var import_core2 = __toESM(require_dist());
|
|
125
|
+
registerDefaults();
|
|
126
|
+
var export_fieldRegistry = import_core2.fieldRegistry;
|
|
149
127
|
export {
|
|
150
128
|
DynamicInput_default as DynamicInput,
|
|
151
129
|
FieldInput_default as FieldInput,
|
|
152
|
-
MultiFieldInput_default as MultiFieldInput
|
|
130
|
+
MultiFieldInput_default as MultiFieldInput,
|
|
131
|
+
export_fieldRegistry as fieldRegistry,
|
|
132
|
+
layoutRegistry
|
|
153
133
|
};
|
|
154
134
|
//# 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 } 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\n\r\nconst DynamicInput = <T extends FieldTypeKey>({ type, value, onChange, label }: 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} />\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 } = 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 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,kBAA4C;AAclB,SAGf,KAHe;AAJ1B,IAAM,eAAe,CAAyB,EAAE,MAAM,OAAO,UAAU,MAAM,MAAgB;AACzF,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;AAC1E;AAGA,IAAO,uBAAQ;;;ACNX,gBAAAC,YAAA;AALJ,IAAM,aAAa,CAAC,EAAE,kBAAkB,aAAa,mBAAmB,MAAa;AACnF,QAAM,EAAE,MAAM,MAAM,MAAM,IAAI;AAG9B,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO,YAAY,IAAI;AAAA,MACvB,UAAU,CAAC,MAAM,mBAAmB,GAAG,IAAI;AAAA;AAAA,EAC7C;AAEJ;AAGA,IAAO,qBAAQ;;;ACxBf,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":[]}
|