@simple-builder/react 1.4.1 → 1.4.2
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/package.json +2 -2
- package/dist/build-container-client-EQBL556Y.js +0 -2334
- package/dist/build-container-client-LMZUWEUI.mjs +0 -2298
- package/dist/builder-content-OR2VTIUY.mjs +0 -20
- package/dist/builder-content-XNIM2YVG.js +0 -42
- package/dist/chunk-4SFXTFFU.js +0 -269
- package/dist/chunk-7I4RGF45.js +0 -42
- package/dist/chunk-MXIMMIPT.mjs +0 -244
- package/dist/chunk-UA2CNH3R.mjs +0 -20
- package/dist/chunk-YFRFNRKR.js +0 -153
- package/dist/chunk-ZQBKKI2S.mjs +0 -123
package/dist/chunk-YFRFNRKR.js
DELETED
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React3 = require('react');
|
|
4
|
-
var NextImage = require('next/image');
|
|
5
|
-
var clsx = require('clsx');
|
|
6
|
-
var tailwindMerge = require('tailwind-merge');
|
|
7
|
-
var tailwindVariants = require('tailwind-variants');
|
|
8
|
-
|
|
9
|
-
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
|
|
11
|
-
function _interopNamespace(e) {
|
|
12
|
-
if (e && e.__esModule) return e;
|
|
13
|
-
var n = Object.create(null);
|
|
14
|
-
if (e) {
|
|
15
|
-
Object.keys(e).forEach(function (k) {
|
|
16
|
-
if (k !== 'default') {
|
|
17
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
-
enumerable: true,
|
|
20
|
-
get: function () { return e[k]; }
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
n.default = e;
|
|
26
|
-
return Object.freeze(n);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
|
|
30
|
-
var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
|
|
31
|
-
|
|
32
|
-
// src/lib/builder.ts
|
|
33
|
-
var builder = /* @__PURE__ */ (() => {
|
|
34
|
-
const components = [];
|
|
35
|
-
return {
|
|
36
|
-
register: (component, config) => {
|
|
37
|
-
if (components.find(({ name }) => name === config.name)) {
|
|
38
|
-
console.log(
|
|
39
|
-
`[simple-builder]: Component ${config.name} already registered.`
|
|
40
|
-
);
|
|
41
|
-
return;
|
|
42
|
-
}
|
|
43
|
-
components.push({
|
|
44
|
-
component,
|
|
45
|
-
...config
|
|
46
|
-
});
|
|
47
|
-
},
|
|
48
|
-
getComponents: () => components,
|
|
49
|
-
getComponent: (name) => {
|
|
50
|
-
return components.find((c) => c.name === name);
|
|
51
|
-
},
|
|
52
|
-
bindComponent: ({ content, ...block }, edit) => {
|
|
53
|
-
const component = components.find(({ name }) => name === block.component);
|
|
54
|
-
if (!component) {
|
|
55
|
-
throw new Error(
|
|
56
|
-
`[simple-builder]: Component ${block.component} not found`
|
|
57
|
-
);
|
|
58
|
-
}
|
|
59
|
-
const Element = React3.createElement(component.component, {
|
|
60
|
-
key: block.id,
|
|
61
|
-
builder: { id: block.id, content, edit },
|
|
62
|
-
...block.props
|
|
63
|
-
});
|
|
64
|
-
return Element;
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
})();
|
|
68
|
-
var Image = (props) => {
|
|
69
|
-
if (typeof NextImage__default.default !== "undefined") {
|
|
70
|
-
return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default, { ...props });
|
|
71
|
-
}
|
|
72
|
-
return /* @__PURE__ */ React3__namespace.createElement("img", { ...props });
|
|
73
|
-
};
|
|
74
|
-
var twMerge = tailwindMerge.extendTailwindMerge({
|
|
75
|
-
prefix: "sb-"
|
|
76
|
-
});
|
|
77
|
-
function cn(...inputs) {
|
|
78
|
-
return twMerge(clsx.clsx(inputs));
|
|
79
|
-
}
|
|
80
|
-
var tv = tailwindVariants.createTV({
|
|
81
|
-
twMergeConfig: {
|
|
82
|
-
prefix: "sb-"
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
var insertAt = (items, index, item) => {
|
|
86
|
-
return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
// src/components/design-wrapper.tsx
|
|
90
|
-
var DesignWrapper = (props) => {
|
|
91
|
-
const { children, className, building = false } = props;
|
|
92
|
-
const { background } = props.styles?.desktop ?? {};
|
|
93
|
-
const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
|
|
94
|
-
const src = matches ? matches[1] : void 0;
|
|
95
|
-
const desktopStyles = props.styles?.desktop ?? {};
|
|
96
|
-
const mobileStyles = props.styles?.mobile ?? {};
|
|
97
|
-
const container = props.styles?.container ?? true;
|
|
98
|
-
const hidden = props.styles?.hidden ?? "never";
|
|
99
|
-
const id = React3__namespace.useId().replace(/[^a-zA-Z0-9]/g, "");
|
|
100
|
-
let hiddenClass = "";
|
|
101
|
-
switch (hidden) {
|
|
102
|
-
case "always":
|
|
103
|
-
hiddenClass = building ? "sb:opacity-30" : "sb:hidden";
|
|
104
|
-
break;
|
|
105
|
-
case "mobile":
|
|
106
|
-
hiddenClass = building ? "sb:max-md:opacity-30" : "sb:max-md:hidden";
|
|
107
|
-
break;
|
|
108
|
-
case "desktop":
|
|
109
|
-
hiddenClass = building ? "sb:md:opacity-30" : "sb:md:hidden";
|
|
110
|
-
break;
|
|
111
|
-
case "never":
|
|
112
|
-
hiddenClass = "";
|
|
113
|
-
break;
|
|
114
|
-
}
|
|
115
|
-
return /* @__PURE__ */ React3__namespace.createElement("div", { id, className: cn("sb:relative", className, hiddenClass) }, src && /* @__PURE__ */ React3__namespace.createElement(
|
|
116
|
-
Image,
|
|
117
|
-
{
|
|
118
|
-
src,
|
|
119
|
-
alt: "",
|
|
120
|
-
fill: true,
|
|
121
|
-
className: "sb:object-cover sb:absolute sb:inset-0 sb:pointer-events-none sb:-z-1"
|
|
122
|
-
}
|
|
123
|
-
), container ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "container sb:mx-auto" }, children) : children, /* @__PURE__ */ React3__namespace.createElement("style", null, `
|
|
124
|
-
#${id} {
|
|
125
|
-
${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
@media (max-width: 1024px) {
|
|
129
|
-
#${id} {
|
|
130
|
-
${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
`.replace(/\s\s+/g, " ")));
|
|
134
|
-
};
|
|
135
|
-
var BuildContainerInner = React3__namespace.lazy(
|
|
136
|
-
() => import('./build-container-client-EQBL556Y.js')
|
|
137
|
-
);
|
|
138
|
-
var BuildContainer = (props) => {
|
|
139
|
-
const { content, edit, name } = props;
|
|
140
|
-
const items = Array.isArray(content) ? content : content?.[name] || [];
|
|
141
|
-
if (!edit) {
|
|
142
|
-
return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
|
|
143
|
-
}
|
|
144
|
-
return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
exports.BuildContainer = BuildContainer;
|
|
148
|
-
exports.DesignWrapper = DesignWrapper;
|
|
149
|
-
exports.Image = Image;
|
|
150
|
-
exports.builder = builder;
|
|
151
|
-
exports.cn = cn;
|
|
152
|
-
exports.insertAt = insertAt;
|
|
153
|
-
exports.tv = tv;
|
package/dist/chunk-ZQBKKI2S.mjs
DELETED
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import * as React3 from 'react';
|
|
2
|
-
import { createElement } from 'react';
|
|
3
|
-
import NextImage from 'next/image';
|
|
4
|
-
import { clsx } from 'clsx';
|
|
5
|
-
import { extendTailwindMerge } from 'tailwind-merge';
|
|
6
|
-
import { createTV } from 'tailwind-variants';
|
|
7
|
-
|
|
8
|
-
// src/lib/builder.ts
|
|
9
|
-
var builder = /* @__PURE__ */ (() => {
|
|
10
|
-
const components = [];
|
|
11
|
-
return {
|
|
12
|
-
register: (component, config) => {
|
|
13
|
-
if (components.find(({ name }) => name === config.name)) {
|
|
14
|
-
console.log(
|
|
15
|
-
`[simple-builder]: Component ${config.name} already registered.`
|
|
16
|
-
);
|
|
17
|
-
return;
|
|
18
|
-
}
|
|
19
|
-
components.push({
|
|
20
|
-
component,
|
|
21
|
-
...config
|
|
22
|
-
});
|
|
23
|
-
},
|
|
24
|
-
getComponents: () => components,
|
|
25
|
-
getComponent: (name) => {
|
|
26
|
-
return components.find((c) => c.name === name);
|
|
27
|
-
},
|
|
28
|
-
bindComponent: ({ content, ...block }, edit) => {
|
|
29
|
-
const component = components.find(({ name }) => name === block.component);
|
|
30
|
-
if (!component) {
|
|
31
|
-
throw new Error(
|
|
32
|
-
`[simple-builder]: Component ${block.component} not found`
|
|
33
|
-
);
|
|
34
|
-
}
|
|
35
|
-
const Element = createElement(component.component, {
|
|
36
|
-
key: block.id,
|
|
37
|
-
builder: { id: block.id, content, edit },
|
|
38
|
-
...block.props
|
|
39
|
-
});
|
|
40
|
-
return Element;
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
})();
|
|
44
|
-
var Image = (props) => {
|
|
45
|
-
if (typeof NextImage !== "undefined") {
|
|
46
|
-
return /* @__PURE__ */ React3.createElement(NextImage, { ...props });
|
|
47
|
-
}
|
|
48
|
-
return /* @__PURE__ */ React3.createElement("img", { ...props });
|
|
49
|
-
};
|
|
50
|
-
var twMerge = extendTailwindMerge({
|
|
51
|
-
prefix: "sb-"
|
|
52
|
-
});
|
|
53
|
-
function cn(...inputs) {
|
|
54
|
-
return twMerge(clsx(inputs));
|
|
55
|
-
}
|
|
56
|
-
var tv = createTV({
|
|
57
|
-
twMergeConfig: {
|
|
58
|
-
prefix: "sb-"
|
|
59
|
-
}
|
|
60
|
-
});
|
|
61
|
-
var insertAt = (items, index, item) => {
|
|
62
|
-
return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
// src/components/design-wrapper.tsx
|
|
66
|
-
var DesignWrapper = (props) => {
|
|
67
|
-
const { children, className, building = false } = props;
|
|
68
|
-
const { background } = props.styles?.desktop ?? {};
|
|
69
|
-
const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
|
|
70
|
-
const src = matches ? matches[1] : void 0;
|
|
71
|
-
const desktopStyles = props.styles?.desktop ?? {};
|
|
72
|
-
const mobileStyles = props.styles?.mobile ?? {};
|
|
73
|
-
const container = props.styles?.container ?? true;
|
|
74
|
-
const hidden = props.styles?.hidden ?? "never";
|
|
75
|
-
const id = React3.useId().replace(/[^a-zA-Z0-9]/g, "");
|
|
76
|
-
let hiddenClass = "";
|
|
77
|
-
switch (hidden) {
|
|
78
|
-
case "always":
|
|
79
|
-
hiddenClass = building ? "sb:opacity-30" : "sb:hidden";
|
|
80
|
-
break;
|
|
81
|
-
case "mobile":
|
|
82
|
-
hiddenClass = building ? "sb:max-md:opacity-30" : "sb:max-md:hidden";
|
|
83
|
-
break;
|
|
84
|
-
case "desktop":
|
|
85
|
-
hiddenClass = building ? "sb:md:opacity-30" : "sb:md:hidden";
|
|
86
|
-
break;
|
|
87
|
-
case "never":
|
|
88
|
-
hiddenClass = "";
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb:relative", className, hiddenClass) }, src && /* @__PURE__ */ React3.createElement(
|
|
92
|
-
Image,
|
|
93
|
-
{
|
|
94
|
-
src,
|
|
95
|
-
alt: "",
|
|
96
|
-
fill: true,
|
|
97
|
-
className: "sb:object-cover sb:absolute sb:inset-0 sb:pointer-events-none sb:-z-1"
|
|
98
|
-
}
|
|
99
|
-
), container ? /* @__PURE__ */ React3.createElement("div", { className: "container sb:mx-auto" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
|
|
100
|
-
#${id} {
|
|
101
|
-
${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@media (max-width: 1024px) {
|
|
105
|
-
#${id} {
|
|
106
|
-
${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
`.replace(/\s\s+/g, " ")));
|
|
110
|
-
};
|
|
111
|
-
var BuildContainerInner = React3.lazy(
|
|
112
|
-
() => import('./build-container-client-LMZUWEUI.mjs')
|
|
113
|
-
);
|
|
114
|
-
var BuildContainer = (props) => {
|
|
115
|
-
const { content, edit, name } = props;
|
|
116
|
-
const items = Array.isArray(content) ? content : content?.[name] || [];
|
|
117
|
-
if (!edit) {
|
|
118
|
-
return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
|
|
119
|
-
}
|
|
120
|
-
return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: /* @__PURE__ */ React3.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3.createElement(BuildContainerInner, { ...props }));
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
export { BuildContainer, DesignWrapper, Image, builder, cn, insertAt, tv };
|