lowcoder-comp-template-demos 0.0.1 → 0.0.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.
Files changed (2) hide show
  1. package/index.js +890 -899
  2. package/package.json +25 -14
package/index.js CHANGED
@@ -1,18 +1,18 @@
1
- (function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.id="lowcoder-comp-template-demos-0.0.1",e.appendChild(document.createTextNode("")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
2
- var B = Object.defineProperty, S = Object.defineProperties;
3
- var T = Object.getOwnPropertyDescriptors;
4
- var w = Object.getOwnPropertySymbols;
5
- var P = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
6
- var u = (e, r, n) => r in e ? B(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, s = (e, r) => {
7
- for (var n in r || (r = {}))
8
- P.call(r, n) && u(e, n, r[n]);
9
- if (w)
10
- for (var n of w(r))
11
- H.call(r, n) && u(e, n, r[n]);
1
+ (function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.id="lowcoder-comp-template-demos-0.0.2",e.appendChild(document.createTextNode("")),document.head.appendChild(e)}}catch(d){console.error("vite-plugin-css-injected-by-js",d)}})();
2
+ var _ = Object.defineProperty, z = Object.defineProperties;
3
+ var R = Object.getOwnPropertyDescriptors;
4
+ var S = Object.getOwnPropertySymbols;
5
+ var I = Object.prototype.hasOwnProperty, P = Object.prototype.propertyIsEnumerable;
6
+ var k = (e, i, n) => i in e ? _(e, i, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[i] = n, g = (e, i) => {
7
+ for (var n in i || (i = {}))
8
+ I.call(i, n) && k(e, n, i[n]);
9
+ if (S)
10
+ for (var n of S(i))
11
+ P.call(i, n) && k(e, n, i[n]);
12
12
  return e;
13
- }, p = (e, r) => S(e, T(r));
14
- var k = { exports: {} }, b = {};
15
- const V = $react;
13
+ }, p = (e, i) => z(e, R(i));
14
+ var C = { exports: {} }, f = {};
15
+ const T = $react;
16
16
  /**
17
17
  * @license React
18
18
  * react-jsx-runtime.production.min.js
@@ -22,932 +22,923 @@ const V = $react;
22
22
  * This source code is licensed under the MIT license found in the
23
23
  * LICENSE file in the root directory of this source tree.
24
24
  */
25
- var N = V, I = Symbol.for("react.element"), z = Symbol.for("react.fragment"), A = Object.prototype.hasOwnProperty, F = N.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, M = { key: !0, ref: !0, __self: !0, __source: !0 };
26
- function v(e, r, n) {
27
- var i, d = {}, l = null, c = null;
28
- n !== void 0 && (l = "" + n), r.key !== void 0 && (l = "" + r.key), r.ref !== void 0 && (c = r.ref);
29
- for (i in r)
30
- A.call(r, i) && !M.hasOwnProperty(i) && (d[i] = r[i]);
25
+ var D = T, A = Symbol.for("react.element"), $ = Symbol.for("react.fragment"), O = Object.prototype.hasOwnProperty, B = D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, M = { key: !0, ref: !0, __self: !0, __source: !0 };
26
+ function H(e, i, n) {
27
+ var r, a = {}, l = null, d = null;
28
+ n !== void 0 && (l = "" + n), i.key !== void 0 && (l = "" + i.key), i.ref !== void 0 && (d = i.ref);
29
+ for (r in i)
30
+ O.call(i, r) && !M.hasOwnProperty(r) && (a[r] = i[r]);
31
31
  if (e && e.defaultProps)
32
- for (i in r = e.defaultProps, r)
33
- d[i] === void 0 && (d[i] = r[i]);
34
- return { $$typeof: I, type: e, key: l, ref: c, props: d, _owner: F.current };
32
+ for (r in i = e.defaultProps, i)
33
+ a[r] === void 0 && (a[r] = i[r]);
34
+ return { $$typeof: A, type: e, key: l, ref: d, props: a, _owner: B.current };
35
35
  }
36
- b.Fragment = z;
37
- b.jsx = v;
38
- b.jsxs = v;
39
- k.exports = b;
40
- var C = k.exports;
41
- const g = C.Fragment, o = C.jsx, t = C.jsxs, R = $styled_components.div`
42
- display: flex;
43
- flex-direction: column;
44
- height: 100%;
45
- background: ${(e) => e.$bgColor || "#f0f2f5"};
46
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
47
- `, G = $styled_components.div`
48
- display: flex;
49
- align-items: center;
50
- justify-content: space-between;
51
- padding: 0 24px;
52
- height: 56px;
53
- background: ${(e) => e.$navBg || "#1a1a2e"};
54
- color: ${(e) => e.$navText || "#ffffff"};
55
- flex-shrink: 0;
56
- `, j = $styled_components.div`
57
- font-size: 18px;
58
- font-weight: 700;
59
- letter-spacing: -0.5px;
60
- `, L = $styled_components.div`
61
- display: flex;
62
- gap: 24px;
63
- font-size: 14px;
64
- opacity: 0.85;
65
- `, f = $styled_components.span`
66
- cursor: pointer;
67
- &:hover { opacity: 1; }
68
- `, E = $styled_components.div`
69
- display: grid;
70
- grid-template-columns: repeat(4, 1fr);
71
- gap: 16px;
72
- padding: 20px 24px;
73
- flex-shrink: 0;
74
- `, h = $styled_components.div`
75
- background: #fff;
76
- border-radius: 10px;
77
- padding: 18px 20px;
78
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
79
- border-left: 4px solid ${(e) => e.$accent};
80
- `, m = $styled_components.div`
81
- font-size: 12px;
82
- color: #8c8c8c;
83
- text-transform: uppercase;
84
- letter-spacing: 0.5px;
85
- margin-bottom: 6px;
86
- `, x = $styled_components.div`
87
- font-size: 26px;
88
- font-weight: 700;
89
- color: #1a1a2e;
90
- `, U = $styled_components.div`
91
- flex: 1;
92
- padding: 0 24px 24px;
93
- min-height: 200px;
94
- `, D = $styled_components.div`
95
- background: #fff;
96
- border-radius: 10px;
97
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
98
- height: 100%;
99
- overflow: hidden;
100
- `, O = {
101
- appName: $lowcoder_sdk.StringControl,
102
- navBgColor: $lowcoder_sdk.ColorControl,
103
- navTextColor: $lowcoder_sdk.ColorControl,
104
- bgColor: $lowcoder_sdk.ColorControl,
105
- accentColor: $lowcoder_sdk.ColorControl
106
- }, W = new $lowcoder_sdk.ContainerCompBuilder(O, (e, r) => /* @__PURE__ */ t(R, {
107
- $bgColor: e.bgColor,
108
- children: [/* @__PURE__ */ t(G, {
109
- $navBg: e.navBgColor,
110
- $navText: e.navTextColor,
111
- children: [/* @__PURE__ */ o(j, {
112
- children: e.appName || "My Dashboard"
113
- }), /* @__PURE__ */ t(L, {
114
- children: [/* @__PURE__ */ o(f, {
115
- children: "Overview"
116
- }), /* @__PURE__ */ o(f, {
117
- children: "Analytics"
118
- }), /* @__PURE__ */ o(f, {
119
- children: "Reports"
120
- }), /* @__PURE__ */ o(f, {
121
- children: "Settings"
36
+ f.Fragment = $;
37
+ f.jsx = H;
38
+ f.jsxs = H;
39
+ C.exports = f;
40
+ var v = C.exports;
41
+ const w = v.Fragment, t = v.jsx, o = v.jsxs;
42
+ function c(e) {
43
+ var a, l;
44
+ const i = (a = e.containers[e.zoneId]) == null ? void 0 : a.children;
45
+ if (!i)
46
+ return null;
47
+ const n = e.hint ? /* @__PURE__ */ t($lowcoder_sdk.ContainerPlaceholder, {
48
+ children: e.hint
49
+ }) : $lowcoder_sdk.HintPlaceHolder, r = (d) => {
50
+ d.stopPropagation(), document.dispatchEvent(new MouseEvent("mousedown"));
51
+ };
52
+ return /* @__PURE__ */ t("div", {
53
+ "data-lowcoder-dropzone": e.zoneId,
54
+ draggable: !1,
55
+ onMouseDown: r,
56
+ style: {
57
+ width: "100%",
58
+ height: e.autoHeight ? "auto" : "100%",
59
+ minHeight: e.minHeight,
60
+ margin: 0,
61
+ padding: 0,
62
+ overflow: e.autoHeight ? "visible" : "hidden"
63
+ },
64
+ children: /* @__PURE__ */ t($lowcoder_sdk.InnerGrid, {
65
+ layout: i.layout.getView(),
66
+ items: $lowcoder_sdk.gridItemCompToGridItems(i.items.getView()),
67
+ positionParams: i.positionParams.getView(),
68
+ dispatch: $lowcoder_sdk.wrapDispatch($lowcoder_sdk.wrapDispatch(e.dispatch, "containers"), e.zoneId),
69
+ autoHeight: e.autoHeight,
70
+ horizontalGridCells: e.horizontalGridCells,
71
+ emptyRows: (l = e.emptyRows) != null ? l : 15,
72
+ minHeight: e.minHeight,
73
+ containerPadding: e.containerPadding,
74
+ hintPlaceholder: n,
75
+ showName: e.showName,
76
+ overflow: e.autoHeight ? "visible" : "hidden"
77
+ })
78
+ });
79
+ }
80
+ function j(e, i, n) {
81
+ var r;
82
+ return n == null ? (r = e[i]) != null ? r : Object.values(e)[0] : Object.values(e).find((a) => a.realSimpleContainer(n));
83
+ }
84
+ function V(e) {
85
+ return $lowcoder_sdk.mergeCompTrees(Object.values(e).map((i) => i.getCompTree()));
86
+ }
87
+ function W(e, i, n) {
88
+ for (const r of Object.values(i)) {
89
+ const a = r.findContainer(n);
90
+ if (a)
91
+ return a === r ? e : a;
92
+ }
93
+ }
94
+ function E(e, i, n) {
95
+ const r = {};
96
+ return Object.keys(i).forEach((a) => {
97
+ r[a] = i[a].getPasteValue(n);
98
+ }), p(g({}, e), { containers: r });
99
+ }
100
+ function h(e, i, n) {
101
+ const r = {
102
+ autoHeight: $lowcoder_sdk.withDefault($lowcoder_sdk.AutoHeightControl, "auto"),
103
+ containers: $lowcoder_sdk.withDefault($lowcoder_sdk.sameTypeMap($lowcoder_sdk.SimpleContainerComp), i)
104
+ }, a = new $lowcoder_sdk.UICompBuilder(r, (d, s) => /* @__PURE__ */ t(e, p(g({}, d), {
105
+ dispatch: s
106
+ }))).setPropertyViewFn(() => null).build();
107
+ class l extends a {
108
+ realSimpleContainer(s) {
109
+ return j(this.children.containers.children, n, s);
110
+ }
111
+ getCompTree() {
112
+ return V(this.children.containers.getView());
113
+ }
114
+ findContainer(s) {
115
+ return W(this, this.children.containers.getView(), s);
116
+ }
117
+ getPasteValue(s) {
118
+ return E(this.toJsonValue(), this.children.containers.getView(), s);
119
+ }
120
+ autoHeight() {
121
+ return this.children.autoHeight.getView();
122
+ }
123
+ }
124
+ return $lowcoder_sdk.withExposingConfigs(l, [$lowcoder_sdk.NameConfigHidden]);
125
+ }
126
+ const G = [{
127
+ label: "Total Users",
128
+ value: "12,847",
129
+ accent: "#4361ee"
130
+ }, {
131
+ label: "Revenue",
132
+ value: "$48.2K",
133
+ accent: "#2ec4b6"
134
+ }, {
135
+ label: "Orders",
136
+ value: "1,024",
137
+ accent: "#ff6b6b"
138
+ }, {
139
+ label: "Conversion",
140
+ value: "3.24%",
141
+ accent: "#ffd166"
142
+ }];
143
+ function F() {
144
+ return /* @__PURE__ */ o(w, {
145
+ children: [/* @__PURE__ */ o("header", {
146
+ style: {
147
+ display: "flex",
148
+ alignItems: "center",
149
+ justifyContent: "space-between",
150
+ padding: "0 24px",
151
+ height: 56,
152
+ background: "#1a1a2e",
153
+ color: "#fff",
154
+ flexShrink: 0
155
+ },
156
+ children: [/* @__PURE__ */ t("div", {
157
+ style: {
158
+ fontSize: 18,
159
+ fontWeight: 700
160
+ },
161
+ children: "My Dashboard"
162
+ }), /* @__PURE__ */ t("nav", {
163
+ style: {
164
+ display: "flex",
165
+ gap: 24,
166
+ fontSize: 14,
167
+ opacity: 0.85
168
+ },
169
+ children: ["Overview", "Analytics", "Reports", "Settings"].map((e) => /* @__PURE__ */ t("span", {
170
+ children: e
171
+ }, e))
122
172
  })]
173
+ }), /* @__PURE__ */ t("div", {
174
+ style: {
175
+ display: "grid",
176
+ gridTemplateColumns: "repeat(4, 1fr)",
177
+ gap: 16,
178
+ padding: "20px 24px",
179
+ flexShrink: 0
180
+ },
181
+ children: G.map((e) => /* @__PURE__ */ o("div", {
182
+ style: {
183
+ background: "#fff",
184
+ borderRadius: 10,
185
+ padding: "18px 20px",
186
+ boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
187
+ borderLeft: `4px solid ${e.accent}`
188
+ },
189
+ children: [/* @__PURE__ */ t("div", {
190
+ style: {
191
+ fontSize: 12,
192
+ color: "#8c8c8c",
193
+ textTransform: "uppercase",
194
+ letterSpacing: "0.5px",
195
+ marginBottom: 6
196
+ },
197
+ children: e.label
198
+ }), /* @__PURE__ */ t("div", {
199
+ style: {
200
+ fontSize: 26,
201
+ fontWeight: 700,
202
+ color: "#1a1a2e"
203
+ },
204
+ children: e.value
205
+ })]
206
+ }, e.label))
123
207
  })]
124
- }), /* @__PURE__ */ t(E, {
125
- children: [/* @__PURE__ */ t(h, {
126
- $accent: e.accentColor || "#4361ee",
127
- children: [/* @__PURE__ */ o(m, {
128
- children: "Total Users"
129
- }), /* @__PURE__ */ o(x, {
130
- children: "12,847"
131
- })]
132
- }), /* @__PURE__ */ t(h, {
133
- $accent: "#2ec4b6",
134
- children: [/* @__PURE__ */ o(m, {
135
- children: "Revenue"
136
- }), /* @__PURE__ */ o(x, {
137
- children: "$48.2K"
138
- })]
139
- }), /* @__PURE__ */ t(h, {
140
- $accent: "#ff6b6b",
141
- children: [/* @__PURE__ */ o(m, {
142
- children: "Orders"
143
- }), /* @__PURE__ */ o(x, {
144
- children: "1,024"
145
- })]
146
- }), /* @__PURE__ */ t(h, {
147
- $accent: "#ffd166",
148
- children: [/* @__PURE__ */ o(m, {
149
- children: "Conversion"
150
- }), /* @__PURE__ */ o(x, {
151
- children: "3.24%"
152
- })]
208
+ });
209
+ }
210
+ const u = "main_content";
211
+ function N(e) {
212
+ return /* @__PURE__ */ o("div", {
213
+ style: {
214
+ display: "flex",
215
+ flexDirection: "column",
216
+ width: "100%",
217
+ height: e.autoHeight ? "auto" : "100%",
218
+ minHeight: e.autoHeight ? 640 : void 0,
219
+ background: "#f0f2f5",
220
+ fontFamily: "Inter, system-ui, sans-serif",
221
+ overflow: "hidden"
222
+ },
223
+ children: [/* @__PURE__ */ t(F, {}), /* @__PURE__ */ t("div", {
224
+ style: {
225
+ flex: 1,
226
+ padding: "0 24px 24px",
227
+ minHeight: 300
228
+ },
229
+ children: /* @__PURE__ */ t("div", {
230
+ style: {
231
+ background: "#fff",
232
+ borderRadius: 10,
233
+ boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
234
+ height: "100%",
235
+ minHeight: 300,
236
+ overflow: "hidden"
237
+ },
238
+ children: /* @__PURE__ */ t(c, {
239
+ containers: e.containers,
240
+ dispatch: e.dispatch,
241
+ zoneId: u,
242
+ autoHeight: !0,
243
+ horizontalGridCells: 12,
244
+ emptyRows: 20,
245
+ minHeight: "300px",
246
+ containerPadding: [16, 16],
247
+ hint: "Drop charts, tables, or widgets here"
248
+ })
249
+ })
153
250
  })]
154
- }), /* @__PURE__ */ o(U, {
155
- children: /* @__PURE__ */ o(D, {
156
- children: /* @__PURE__ */ o($lowcoder_sdk.InnerGrid, p(s({}, e.container), {
157
- items: $lowcoder_sdk.gridItemCompToGridItems(e.container.items),
158
- autoHeight: !0,
159
- emptyRows: 20,
160
- minHeight: "300px",
161
- containerPadding: [16, 16],
162
- hintPlaceholder: $lowcoder_sdk.HintPlaceHolder
163
- }))
251
+ });
252
+ }
253
+ const L = h(N, {
254
+ [u]: {
255
+ layout: {},
256
+ items: {}
257
+ }
258
+ }, u);
259
+ function U() {
260
+ return /* @__PURE__ */ t(w, {
261
+ children: /* @__PURE__ */ o("section", {
262
+ style: {
263
+ background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
264
+ color: "#fff",
265
+ padding: "60px 48px",
266
+ textAlign: "center",
267
+ flexShrink: 0
268
+ },
269
+ children: [/* @__PURE__ */ t("h1", {
270
+ style: {
271
+ margin: "0 0 16px",
272
+ fontSize: 42,
273
+ fontWeight: 800,
274
+ letterSpacing: -1
275
+ },
276
+ children: "Build Something Amazing"
277
+ }), /* @__PURE__ */ t("p", {
278
+ style: {
279
+ margin: "0 auto 32px",
280
+ maxWidth: 600,
281
+ fontSize: 18,
282
+ opacity: 0.9,
283
+ lineHeight: 1.6
284
+ },
285
+ children: "A powerful platform to create, deploy, and scale your applications with ease."
286
+ }), /* @__PURE__ */ t("div", {
287
+ style: {
288
+ display: "inline-block",
289
+ background: "#fff",
290
+ color: "#667eea",
291
+ padding: "14px 36px",
292
+ borderRadius: 8,
293
+ fontWeight: 600,
294
+ fontSize: 16
295
+ },
296
+ children: "Get Started Free"
297
+ })]
164
298
  })
165
- })]
166
- })).setPropertyViewFn((e) => /* @__PURE__ */ t(g, {
167
- children: [/* @__PURE__ */ t($lowcoder_sdk.Section, {
168
- name: "Template Settings",
169
- children: [e.appName.propertyView({
170
- label: "App Name"
171
- }), e.navBgColor.propertyView({
172
- label: "Navbar Background"
173
- }), e.navTextColor.propertyView({
174
- label: "Navbar Text Color"
175
- }), e.bgColor.propertyView({
176
- label: "Background Color"
177
- }), e.accentColor.propertyView({
178
- label: "Accent Color"
179
- })]
180
- }), /* @__PURE__ */ o($lowcoder_sdk.Section, {
181
- name: "Content",
182
- children: e.container.getPropertyView()
183
- })]
184
- })).build(), q = $lowcoder_sdk.withExposingConfigs(W, [$lowcoder_sdk.NameConfigHidden]), Y = $styled_components.div`
185
- display: flex;
186
- flex-direction: column;
187
- height: 100%;
188
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
189
- background: #ffffff;
190
- `, J = $styled_components.div`
191
- background: ${(e) => e.$heroBg || "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"};
192
- color: ${(e) => e.$heroText || "#ffffff"};
193
- padding: 60px 48px;
194
- text-align: center;
195
- flex-shrink: 0;
196
- `, K = $styled_components.h1`
197
- font-size: 42px;
198
- font-weight: 800;
199
- margin: 0 0 16px;
200
- letter-spacing: -1px;
201
- line-height: 1.1;
202
- `, Q = $styled_components.p`
203
- font-size: 18px;
204
- opacity: 0.9;
205
- margin: 0 0 32px;
206
- max-width: 600px;
207
- margin-left: auto;
208
- margin-right: auto;
209
- line-height: 1.6;
210
- `, X = $styled_components.div`
211
- display: inline-block;
212
- background: ${(e) => e.$accent || "#ffffff"};
213
- color: ${(e) => e.$accent ? "#ffffff" : "#667eea"};
214
- padding: 14px 36px;
215
- border-radius: 8px;
216
- font-weight: 600;
217
- font-size: 16px;
218
- cursor: pointer;
219
- `, Z = $styled_components.div`
220
- flex: 1;
221
- min-height: 250px;
222
- `, ee = $styled_components.div`
223
- background: ${(e) => e.$footerBg || "#1a1a2e"};
224
- color: #ffffff;
225
- padding: 32px 48px;
226
- flex-shrink: 0;
227
- `, oe = $styled_components.div`
228
- display: grid;
229
- grid-template-columns: 2fr 1fr 1fr 1fr;
230
- gap: 32px;
231
- `, te = $styled_components.div`
232
- font-size: 20px;
233
- font-weight: 700;
234
- margin-bottom: 8px;
235
- `, ne = $styled_components.p`
236
- font-size: 13px;
237
- opacity: 0.6;
238
- line-height: 1.6;
239
- margin: 0;
240
- `, $ = $styled_components.div``, y = $styled_components.div`
241
- font-size: 13px;
242
- font-weight: 600;
243
- text-transform: uppercase;
244
- letter-spacing: 0.5px;
245
- margin-bottom: 12px;
246
- opacity: 0.8;
247
- `, a = $styled_components.div`
248
- font-size: 13px;
249
- opacity: 0.5;
250
- margin-bottom: 8px;
251
- cursor: pointer;
252
- &:hover { opacity: 0.8; }
253
- `, re = {
254
- heroTitle: $lowcoder_sdk.StringControl,
255
- heroSubtitle: $lowcoder_sdk.StringControl,
256
- ctaText: $lowcoder_sdk.StringControl,
257
- heroBgColor: $lowcoder_sdk.ColorControl,
258
- heroTextColor: $lowcoder_sdk.ColorControl,
259
- footerBgColor: $lowcoder_sdk.ColorControl,
260
- brandName: $lowcoder_sdk.StringControl
261
- }, ie = new $lowcoder_sdk.ContainerCompBuilder(re, (e, r) => /* @__PURE__ */ t(Y, {
262
- children: [/* @__PURE__ */ t(J, {
263
- $heroBg: e.heroBgColor,
264
- $heroText: e.heroTextColor,
265
- children: [/* @__PURE__ */ o(K, {
266
- children: e.heroTitle || "Build Something Amazing"
267
- }), /* @__PURE__ */ o(Q, {
268
- children: e.heroSubtitle || "A powerful platform to create, deploy, and scale your applications with ease. Get started in minutes."
269
- }), /* @__PURE__ */ o(X, {
270
- $accent: "",
271
- children: e.ctaText || "Get Started Free"
272
- })]
273
- }), /* @__PURE__ */ o(Z, {
274
- children: /* @__PURE__ */ o($lowcoder_sdk.InnerGrid, p(s({}, e.container), {
275
- items: $lowcoder_sdk.gridItemCompToGridItems(e.container.items),
276
- autoHeight: !0,
277
- emptyRows: 18,
278
- minHeight: "250px",
279
- containerPadding: [32, 32],
280
- hintPlaceholder: $lowcoder_sdk.HintPlaceHolder
281
- }))
282
- }), /* @__PURE__ */ o(ee, {
283
- $footerBg: e.footerBgColor,
284
- children: /* @__PURE__ */ t(oe, {
285
- children: [/* @__PURE__ */ t($, {
286
- children: [/* @__PURE__ */ o(te, {
287
- children: e.brandName || "YourBrand"
288
- }), /* @__PURE__ */ o(ne, {
299
+ });
300
+ }
301
+ function Y() {
302
+ return /* @__PURE__ */ t("footer", {
303
+ style: {
304
+ background: "#1a1a2e",
305
+ color: "#fff",
306
+ padding: "32px 48px",
307
+ flexShrink: 0
308
+ },
309
+ children: /* @__PURE__ */ o("div", {
310
+ style: {
311
+ display: "grid",
312
+ gridTemplateColumns: "2fr 1fr 1fr 1fr",
313
+ gap: 32
314
+ },
315
+ children: [/* @__PURE__ */ o("div", {
316
+ children: [/* @__PURE__ */ t("div", {
317
+ style: {
318
+ fontSize: 20,
319
+ fontWeight: 700,
320
+ marginBottom: 8
321
+ },
322
+ children: "YourBrand"
323
+ }), /* @__PURE__ */ t("p", {
324
+ style: {
325
+ fontSize: 13,
326
+ opacity: 0.6,
327
+ margin: 0,
328
+ lineHeight: 1.6
329
+ },
289
330
  children: "Making the world a better place through quality software and design."
290
331
  })]
291
- }), /* @__PURE__ */ t($, {
292
- children: [/* @__PURE__ */ o(y, {
293
- children: "Product"
294
- }), /* @__PURE__ */ o(a, {
295
- children: "Features"
296
- }), /* @__PURE__ */ o(a, {
297
- children: "Pricing"
298
- }), /* @__PURE__ */ o(a, {
299
- children: "Documentation"
300
- })]
301
- }), /* @__PURE__ */ t($, {
302
- children: [/* @__PURE__ */ o(y, {
303
- children: "Company"
304
- }), /* @__PURE__ */ o(a, {
305
- children: "About"
306
- }), /* @__PURE__ */ o(a, {
307
- children: "Blog"
308
- }), /* @__PURE__ */ o(a, {
309
- children: "Careers"
310
- })]
311
- }), /* @__PURE__ */ t($, {
312
- children: [/* @__PURE__ */ o(y, {
313
- children: "Support"
314
- }), /* @__PURE__ */ o(a, {
315
- children: "Help Center"
316
- }), /* @__PURE__ */ o(a, {
317
- children: "Contact"
318
- }), /* @__PURE__ */ o(a, {
319
- children: "Status"
320
- })]
321
- })]
332
+ }), [{
333
+ title: "Product",
334
+ links: ["Features", "Pricing", "Docs"]
335
+ }, {
336
+ title: "Company",
337
+ links: ["About", "Blog", "Careers"]
338
+ }, {
339
+ title: "Support",
340
+ links: ["Help", "Contact", "Status"]
341
+ }].map((e) => /* @__PURE__ */ o("div", {
342
+ children: [/* @__PURE__ */ t("div", {
343
+ style: {
344
+ fontSize: 13,
345
+ fontWeight: 600,
346
+ textTransform: "uppercase",
347
+ letterSpacing: "0.5px",
348
+ marginBottom: 12,
349
+ opacity: 0.8
350
+ },
351
+ children: e.title
352
+ }), e.links.map((i) => /* @__PURE__ */ t("div", {
353
+ style: {
354
+ fontSize: 13,
355
+ opacity: 0.5,
356
+ marginBottom: 8
357
+ },
358
+ children: i
359
+ }, i))]
360
+ }, e.title))]
322
361
  })
323
- })]
324
- })).setPropertyViewFn((e) => /* @__PURE__ */ t(g, {
325
- children: [/* @__PURE__ */ t($lowcoder_sdk.Section, {
326
- name: "Hero Section",
327
- children: [e.heroTitle.propertyView({
328
- label: "Title"
329
- }), e.heroSubtitle.propertyView({
330
- label: "Subtitle"
331
- }), e.ctaText.propertyView({
332
- label: "CTA Button Text"
333
- }), e.heroBgColor.propertyView({
334
- label: "Hero Background"
335
- }), e.heroTextColor.propertyView({
336
- label: "Hero Text Color"
337
- })]
338
- }), /* @__PURE__ */ t($lowcoder_sdk.Section, {
339
- name: "Footer",
340
- children: [e.brandName.propertyView({
341
- label: "Brand Name"
342
- }), e.footerBgColor.propertyView({
343
- label: "Footer Background"
344
- })]
345
- }), /* @__PURE__ */ o($lowcoder_sdk.Section, {
346
- name: "Content",
347
- children: e.container.getPropertyView()
348
- })]
349
- })).build(), le = $lowcoder_sdk.withExposingConfigs(ie, [$lowcoder_sdk.NameConfigHidden]), de = $styled_components.div`
350
- display: flex;
351
- height: 100%;
352
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
353
- `, ae = $styled_components.div`
354
- width: ${(e) => e.$collapsed ? "60px" : "240px"};
355
- background: ${(e) => e.$sidebarBg || "#1a1a2e"};
356
- color: #ffffff;
357
- display: flex;
358
- flex-direction: column;
359
- flex-shrink: 0;
360
- transition: width 0.2s ease;
361
- overflow: hidden;
362
- `, ce = $styled_components.div`
363
- padding: ${(e) => e.$collapsed ? "20px 12px" : "20px 20px"};
364
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
365
- display: flex;
366
- align-items: center;
367
- gap: 12px;
368
- `, se = $styled_components.div`
369
- width: 32px;
370
- height: 32px;
371
- border-radius: 8px;
372
- background: ${(e) => e.$accent || "#4361ee"};
373
- display: flex;
374
- align-items: center;
375
- justify-content: center;
376
- font-weight: 800;
377
- font-size: 14px;
378
- flex-shrink: 0;
379
- `, pe = $styled_components.div`
380
- font-size: 16px;
381
- font-weight: 700;
382
- white-space: nowrap;
383
- `, ge = $styled_components.div`
384
- padding: 16px 0;
385
- flex: 1;
386
- `, fe = $styled_components.div`
387
- font-size: 10px;
388
- text-transform: uppercase;
389
- letter-spacing: 1px;
390
- color: rgba(255, 255, 255, 0.35);
391
- padding: ${(e) => e.$collapsed ? "0 12px" : "0 20px"};
392
- margin-bottom: 8px;
393
- white-space: nowrap;
394
- overflow: hidden;
395
- `, he = $styled_components.div`
396
- display: flex;
397
- align-items: center;
398
- gap: 12px;
399
- padding: ${(e) => e.$collapsed ? "10px 18px" : "10px 20px"};
400
- margin: 2px 8px;
401
- border-radius: 8px;
402
- cursor: pointer;
403
- font-size: 14px;
404
- white-space: nowrap;
405
- background: ${(e) => e.$active ? e.$accent || "#4361ee" : "transparent"};
406
- opacity: ${(e) => e.$active ? 1 : 0.65};
407
- &:hover {
408
- background: ${(e) => e.$active ? e.$accent || "#4361ee" : "rgba(255,255,255,0.06)"};
409
- opacity: 1;
362
+ });
363
+ }
364
+ const m = "main_content";
365
+ function Z(e) {
366
+ return /* @__PURE__ */ o("div", {
367
+ style: {
368
+ display: "flex",
369
+ flexDirection: "column",
370
+ width: "100%",
371
+ height: e.autoHeight ? "auto" : "100%",
372
+ minHeight: e.autoHeight ? 720 : void 0,
373
+ background: "#fff",
374
+ fontFamily: "Inter, system-ui, sans-serif"
375
+ },
376
+ children: [/* @__PURE__ */ t(U, {}), /* @__PURE__ */ t("div", {
377
+ style: {
378
+ flex: 1,
379
+ minHeight: 250
380
+ },
381
+ children: /* @__PURE__ */ t(c, {
382
+ containers: e.containers,
383
+ dispatch: e.dispatch,
384
+ zoneId: m,
385
+ autoHeight: !0,
386
+ horizontalGridCells: 12,
387
+ emptyRows: 18,
388
+ minHeight: "250px",
389
+ containerPadding: [32, 32],
390
+ hint: "Drop content sections here"
391
+ })
392
+ }), /* @__PURE__ */ t(Y, {})]
393
+ });
394
+ }
395
+ const q = h(Z, {
396
+ [m]: {
397
+ layout: {},
398
+ items: {}
410
399
  }
411
- `, me = $styled_components.span`
412
- font-size: 16px;
413
- flex-shrink: 0;
414
- width: 20px;
415
- text-align: center;
416
- `, xe = $styled_components.div`
417
- padding: 16px 20px;
418
- border-top: 1px solid rgba(255, 255, 255, 0.08);
419
- font-size: 13px;
420
- opacity: 0.5;
421
- cursor: pointer;
422
- &:hover { opacity: 0.8; }
423
- `, $e = $styled_components.div`
424
- flex: 1;
425
- background: ${(e) => e.$bgColor || "#f5f6fa"};
426
- overflow: auto;
427
- min-height: 0;
428
- `, be = $styled_components.div`
429
- padding: 20px 28px;
430
- border-bottom: 1px solid #e8e8e8;
431
- background: #ffffff;
432
- `, ye = $styled_components.h2`
433
- margin: 0;
434
- font-size: 22px;
435
- font-weight: 700;
436
- color: #1a1a2e;
437
- `, Ce = $styled_components.div`
438
- min-height: 300px;
439
- `, we = {
440
- brandName: $lowcoder_sdk.StringControl,
441
- pageTitle: $lowcoder_sdk.StringControl,
442
- sidebarBgColor: $lowcoder_sdk.ColorControl,
443
- bgColor: $lowcoder_sdk.ColorControl,
444
- accentColor: $lowcoder_sdk.ColorControl
445
- }, ue = new $lowcoder_sdk.ContainerCompBuilder(we, (e, r) => {
446
- const [n, i] = $react.useState(!1), d = [{
447
- icon: "📊",
448
- label: "Dashboard",
449
- active: !0
450
- }, {
451
- icon: "👥",
452
- label: "Users"
453
- }, {
454
- icon: "📦",
455
- label: "Products"
456
- }, {
457
- icon: "📈",
458
- label: "Analytics"
459
- }, {
460
- icon: "💬",
461
- label: "Messages"
462
- }, {
463
- icon: "⚙️",
464
- label: "Settings"
465
- }];
466
- return /* @__PURE__ */ t(de, {
467
- children: [/* @__PURE__ */ t(ae, {
468
- $sidebarBg: e.sidebarBgColor,
469
- $collapsed: n,
470
- children: [/* @__PURE__ */ t(ce, {
471
- $collapsed: n,
472
- children: [/* @__PURE__ */ o(se, {
473
- $accent: e.accentColor,
474
- children: (e.brandName || "App").charAt(0).toUpperCase()
475
- }), !n && /* @__PURE__ */ o(pe, {
476
- children: e.brandName || "My App"
477
- })]
478
- }), /* @__PURE__ */ t(ge, {
479
- children: [/* @__PURE__ */ o(fe, {
480
- $collapsed: n,
481
- children: n ? "•" : "Navigation"
482
- }), d.map((l) => /* @__PURE__ */ t(he, {
483
- $active: l.active,
484
- $accent: e.accentColor,
485
- $collapsed: n,
486
- children: [/* @__PURE__ */ o(me, {
487
- children: l.icon
488
- }), !n && l.label]
489
- }, l.label))]
490
- }), /* @__PURE__ */ o(xe, {
491
- onClick: () => i(!n),
492
- children: n ? "→" : "← Collapse"
400
+ }, m), J = [{
401
+ icon: "📊",
402
+ label: "Dashboard",
403
+ active: !0
404
+ }, {
405
+ icon: "👥",
406
+ label: "Users"
407
+ }, {
408
+ icon: "📦",
409
+ label: "Products"
410
+ }, {
411
+ icon: "📈",
412
+ label: "Analytics"
413
+ }, {
414
+ icon: "💬",
415
+ label: "Messages"
416
+ }, {
417
+ icon: "⚙️",
418
+ label: "Settings"
419
+ }];
420
+ function K() {
421
+ const [e, i] = $react.useState(!1);
422
+ return /* @__PURE__ */ o("aside", {
423
+ style: {
424
+ width: e ? 60 : 240,
425
+ background: "#1a1a2e",
426
+ color: "#fff",
427
+ display: "flex",
428
+ flexDirection: "column",
429
+ flexShrink: 0,
430
+ transition: "width 0.2s ease",
431
+ overflow: "hidden"
432
+ },
433
+ children: [/* @__PURE__ */ o("div", {
434
+ style: {
435
+ padding: e ? "20px 12px" : "20px 20px",
436
+ borderBottom: "1px solid rgba(255,255,255,0.08)",
437
+ display: "flex",
438
+ alignItems: "center",
439
+ gap: 12
440
+ },
441
+ children: [/* @__PURE__ */ t("div", {
442
+ style: {
443
+ width: 32,
444
+ height: 32,
445
+ borderRadius: 8,
446
+ background: "#4361ee",
447
+ display: "flex",
448
+ alignItems: "center",
449
+ justifyContent: "center",
450
+ fontWeight: 800,
451
+ fontSize: 14,
452
+ flexShrink: 0
453
+ },
454
+ children: "A"
455
+ }), !e && /* @__PURE__ */ t("div", {
456
+ style: {
457
+ fontSize: 16,
458
+ fontWeight: 700
459
+ },
460
+ children: "My App"
493
461
  })]
494
- }), /* @__PURE__ */ t($e, {
495
- $bgColor: e.bgColor,
496
- children: [/* @__PURE__ */ o(be, {
497
- children: /* @__PURE__ */ o(ye, {
498
- children: e.pageTitle || "Dashboard"
462
+ }), /* @__PURE__ */ o("nav", {
463
+ style: {
464
+ padding: "16px 0",
465
+ flex: 1
466
+ },
467
+ children: [/* @__PURE__ */ t("div", {
468
+ style: {
469
+ fontSize: 10,
470
+ textTransform: "uppercase",
471
+ letterSpacing: 1,
472
+ color: "rgba(255,255,255,0.35)",
473
+ padding: e ? "0 12px" : "0 20px",
474
+ marginBottom: 8
475
+ },
476
+ children: e ? "•" : "Navigation"
477
+ }), J.map((n) => /* @__PURE__ */ o("div", {
478
+ style: {
479
+ display: "flex",
480
+ alignItems: "center",
481
+ gap: 12,
482
+ padding: e ? "10px 18px" : "10px 20px",
483
+ margin: "2px 8px",
484
+ borderRadius: 8,
485
+ fontSize: 14,
486
+ background: n.active ? "#4361ee" : "transparent",
487
+ opacity: n.active ? 1 : 0.65
488
+ },
489
+ children: [/* @__PURE__ */ t("span", {
490
+ style: {
491
+ width: 20,
492
+ textAlign: "center"
493
+ },
494
+ children: n.icon
495
+ }), !e && n.label]
496
+ }, n.label))]
497
+ }), /* @__PURE__ */ t("button", {
498
+ type: "button",
499
+ onClick: () => i(!e),
500
+ onMouseDown: (n) => n.stopPropagation(),
501
+ style: {
502
+ padding: "16px 20px",
503
+ border: "none",
504
+ borderTop: "1px solid rgba(255,255,255,0.08)",
505
+ background: "transparent",
506
+ color: "#fff",
507
+ fontSize: 13,
508
+ opacity: 0.5,
509
+ cursor: "pointer",
510
+ textAlign: "left"
511
+ },
512
+ children: e ? "→" : "← Collapse"
513
+ })]
514
+ });
515
+ }
516
+ const x = "main_content";
517
+ function Q(e) {
518
+ return /* @__PURE__ */ o("div", {
519
+ style: {
520
+ display: "flex",
521
+ width: "100%",
522
+ height: e.autoHeight ? "auto" : "100%",
523
+ minHeight: e.autoHeight ? 600 : void 0,
524
+ fontFamily: "Inter, system-ui, sans-serif",
525
+ overflow: "hidden"
526
+ },
527
+ children: [/* @__PURE__ */ t(K, {}), /* @__PURE__ */ o("main", {
528
+ style: {
529
+ flex: 1,
530
+ minWidth: 0,
531
+ display: "flex",
532
+ flexDirection: "column",
533
+ background: "#f5f6fa"
534
+ },
535
+ children: [/* @__PURE__ */ t("div", {
536
+ style: {
537
+ padding: "20px 28px",
538
+ borderBottom: "1px solid #e8e8e8",
539
+ background: "#fff"
540
+ },
541
+ children: /* @__PURE__ */ t("h2", {
542
+ style: {
543
+ margin: 0,
544
+ fontSize: 22,
545
+ fontWeight: 700,
546
+ color: "#1a1a2e"
547
+ },
548
+ children: "Dashboard"
499
549
  })
500
- }), /* @__PURE__ */ o(Ce, {
501
- children: /* @__PURE__ */ o($lowcoder_sdk.InnerGrid, p(s({}, e.container), {
502
- items: $lowcoder_sdk.gridItemCompToGridItems(e.container.items),
550
+ }), /* @__PURE__ */ t("div", {
551
+ style: {
552
+ flex: 1,
553
+ minHeight: 300
554
+ },
555
+ children: /* @__PURE__ */ t(c, {
556
+ containers: e.containers,
557
+ dispatch: e.dispatch,
558
+ zoneId: x,
503
559
  autoHeight: !0,
560
+ horizontalGridCells: 12,
504
561
  emptyRows: 20,
505
562
  minHeight: "300px",
506
563
  containerPadding: [20, 20],
507
- hintPlaceholder: $lowcoder_sdk.HintPlaceHolder
508
- }))
564
+ hint: "Drop components into the main area"
565
+ })
509
566
  })]
510
567
  })]
511
568
  });
512
- }).setPropertyViewFn((e) => /* @__PURE__ */ t(g, {
513
- children: [/* @__PURE__ */ t($lowcoder_sdk.Section, {
514
- name: "Template Settings",
515
- children: [e.brandName.propertyView({
516
- label: "Brand Name"
517
- }), e.pageTitle.propertyView({
518
- label: "Page Title"
519
- }), e.sidebarBgColor.propertyView({
520
- label: "Sidebar Background"
521
- }), e.bgColor.propertyView({
522
- label: "Content Background"
523
- }), e.accentColor.propertyView({
524
- label: "Accent Color"
525
- })]
526
- }), /* @__PURE__ */ o($lowcoder_sdk.Section, {
527
- name: "Content",
528
- children: e.container.getPropertyView()
529
- })]
530
- })).build(), _e = $lowcoder_sdk.withExposingConfigs(ue, [$lowcoder_sdk.NameConfigHidden]), ke = $styled_components.div`
531
- display: flex;
532
- flex-direction: column;
533
- height: 100%;
534
- background: ${(e) => e.$bgColor || "#f8f9fc"};
535
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
536
- `, ve = $styled_components.div`
537
- background: ${(e) => e.$headerBg || "#ffffff"};
538
- color: ${(e) => e.$headerText || "#1a1a2e"};
539
- padding: 28px 32px;
540
- border-bottom: 1px solid #e8e8e8;
541
- flex-shrink: 0;
542
- `, Be = $styled_components.div`
543
- display: flex;
544
- align-items: center;
545
- justify-content: space-between;
546
- margin-bottom: 8px;
547
- `, Se = $styled_components.h1`
548
- font-size: 26px;
549
- font-weight: 800;
550
- margin: 0;
551
- letter-spacing: -0.5px;
552
- `, Te = $styled_components.span`
553
- background: ${(e) => e.$accent || "#4361ee"};
554
- color: #fff;
555
- padding: 4px 14px;
556
- border-radius: 20px;
557
- font-size: 12px;
558
- font-weight: 600;
559
- `, Pe = $styled_components.p`
560
- font-size: 14px;
561
- color: #8c8c8c;
562
- margin: 0;
563
- line-height: 1.5;
564
- `, He = $styled_components.div`
565
- display: flex;
566
- gap: 0;
567
- padding: 0 32px;
568
- background: #ffffff;
569
- border-bottom: 1px solid #e8e8e8;
570
- flex-shrink: 0;
571
- `, Ve = $styled_components.div`
572
- padding: 12px 20px;
573
- font-size: 14px;
574
- font-weight: ${(e) => e.$active ? 600 : 400};
575
- color: ${(e) => e.$active ? e.$accent || "#4361ee" : "#8c8c8c"};
576
- border-bottom: 2px solid ${(e) => e.$active ? e.$accent || "#4361ee" : "transparent"};
577
- cursor: pointer;
578
- &:hover { color: ${(e) => e.$accent || "#4361ee"}; }
579
- `, Ne = $styled_components.div`
580
- flex: 1;
581
- padding: 24px 32px;
582
- min-height: 250px;
583
- `, Ie = $styled_components.div`
584
- background: #ffffff;
585
- border-radius: 12px;
586
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
587
- height: 100%;
588
- overflow: hidden;
589
- `, ze = {
590
- title: $lowcoder_sdk.StringControl,
591
- subtitle: $lowcoder_sdk.StringControl,
592
- badgeText: $lowcoder_sdk.StringControl,
593
- headerBgColor: $lowcoder_sdk.ColorControl,
594
- headerTextColor: $lowcoder_sdk.ColorControl,
595
- bgColor: $lowcoder_sdk.ColorControl,
596
- accentColor: $lowcoder_sdk.ColorControl
597
- }, Ae = new $lowcoder_sdk.ContainerCompBuilder(ze, (e, r) => {
598
- const n = ["All Items", "Recent", "Favorites", "Archived"];
599
- return /* @__PURE__ */ t(ke, {
600
- $bgColor: e.bgColor,
601
- children: [/* @__PURE__ */ t(ve, {
602
- $headerBg: e.headerBgColor,
603
- $headerText: e.headerTextColor,
604
- children: [/* @__PURE__ */ t(Be, {
605
- children: [/* @__PURE__ */ o(Se, {
606
- children: e.title || "Item Collection"
607
- }), (e.badgeText || "12 Items") && /* @__PURE__ */ o(Te, {
608
- $accent: e.accentColor,
609
- children: e.badgeText || "12 Items"
569
+ }
570
+ const X = h(Q, {
571
+ [x]: {
572
+ layout: {},
573
+ items: {}
574
+ }
575
+ }, x), ee = ["All Items", "Recent", "Favorites", "Archived"];
576
+ function te() {
577
+ return /* @__PURE__ */ o(w, {
578
+ children: [/* @__PURE__ */ o("header", {
579
+ style: {
580
+ background: "#fff",
581
+ padding: "28px 32px",
582
+ borderBottom: "1px solid #e8e8e8",
583
+ flexShrink: 0
584
+ },
585
+ children: [/* @__PURE__ */ o("div", {
586
+ style: {
587
+ display: "flex",
588
+ alignItems: "center",
589
+ justifyContent: "space-between"
590
+ },
591
+ children: [/* @__PURE__ */ t("h1", {
592
+ style: {
593
+ margin: 0,
594
+ fontSize: 26,
595
+ fontWeight: 800,
596
+ color: "#1a1a2e"
597
+ },
598
+ children: "Item Collection"
599
+ }), /* @__PURE__ */ t("span", {
600
+ style: {
601
+ background: "#4361ee",
602
+ color: "#fff",
603
+ padding: "4px 14px",
604
+ borderRadius: 20,
605
+ fontSize: 12,
606
+ fontWeight: 600
607
+ },
608
+ children: "12 Items"
610
609
  })]
611
- }), /* @__PURE__ */ o(Pe, {
612
- children: e.subtitle || "Browse, search, and manage your collection of items in one place."
610
+ }), /* @__PURE__ */ t("p", {
611
+ style: {
612
+ fontSize: 14,
613
+ color: "#8c8c8c",
614
+ margin: "8px 0 0"
615
+ },
616
+ children: "Browse, search, and manage your collection of items in one place."
613
617
  })]
614
- }), /* @__PURE__ */ o(He, {
615
- $accent: e.accentColor,
616
- children: n.map((i, d) => /* @__PURE__ */ o(Ve, {
617
- $active: d === 0,
618
- $accent: e.accentColor,
619
- children: i
620
- }, i))
621
- }), /* @__PURE__ */ o(Ne, {
622
- children: /* @__PURE__ */ o(Ie, {
623
- children: /* @__PURE__ */ o($lowcoder_sdk.InnerGrid, p(s({}, e.container), {
624
- items: $lowcoder_sdk.gridItemCompToGridItems(e.container.items),
618
+ }), /* @__PURE__ */ t("div", {
619
+ style: {
620
+ display: "flex",
621
+ gap: 0,
622
+ padding: "0 32px",
623
+ background: "#fff",
624
+ borderBottom: "1px solid #e8e8e8",
625
+ flexShrink: 0
626
+ },
627
+ children: ee.map((e, i) => /* @__PURE__ */ t("div", {
628
+ style: {
629
+ padding: "12px 20px",
630
+ fontSize: 14,
631
+ fontWeight: i === 0 ? 600 : 400,
632
+ color: i === 0 ? "#4361ee" : "#8c8c8c",
633
+ borderBottom: i === 0 ? "2px solid #4361ee" : "2px solid transparent"
634
+ },
635
+ children: e
636
+ }, e))
637
+ })]
638
+ });
639
+ }
640
+ const y = "main_content";
641
+ function ie(e) {
642
+ return /* @__PURE__ */ o("div", {
643
+ style: {
644
+ display: "flex",
645
+ flexDirection: "column",
646
+ width: "100%",
647
+ height: e.autoHeight ? "auto" : "100%",
648
+ minHeight: e.autoHeight ? 600 : void 0,
649
+ background: "#f8f9fc",
650
+ fontFamily: "Inter, system-ui, sans-serif",
651
+ overflow: "hidden"
652
+ },
653
+ children: [/* @__PURE__ */ t(te, {}), /* @__PURE__ */ t("div", {
654
+ style: {
655
+ flex: 1,
656
+ padding: "24px 32px",
657
+ minHeight: 250
658
+ },
659
+ children: /* @__PURE__ */ t("div", {
660
+ style: {
661
+ background: "#fff",
662
+ borderRadius: 12,
663
+ boxShadow: "0 1px 3px rgba(0,0,0,0.06)",
664
+ height: "100%",
665
+ minHeight: 250,
666
+ overflow: "hidden"
667
+ },
668
+ children: /* @__PURE__ */ t(c, {
669
+ containers: e.containers,
670
+ dispatch: e.dispatch,
671
+ zoneId: y,
625
672
  autoHeight: !0,
673
+ horizontalGridCells: 12,
626
674
  emptyRows: 18,
627
675
  minHeight: "250px",
628
676
  containerPadding: [16, 16],
629
- hintPlaceholder: $lowcoder_sdk.HintPlaceHolder
630
- }))
677
+ hint: "Drop cards or list components here"
678
+ })
631
679
  })
632
680
  })]
633
681
  });
634
- }).setPropertyViewFn((e) => /* @__PURE__ */ t(g, {
635
- children: [/* @__PURE__ */ t($lowcoder_sdk.Section, {
636
- name: "Header",
637
- children: [e.title.propertyView({
638
- label: "Title"
639
- }), e.subtitle.propertyView({
640
- label: "Subtitle"
641
- }), e.badgeText.propertyView({
642
- label: "Badge Text"
643
- })]
644
- }), /* @__PURE__ */ t($lowcoder_sdk.Section, {
645
- name: "Colors",
646
- children: [e.headerBgColor.propertyView({
647
- label: "Header Background"
648
- }), e.headerTextColor.propertyView({
649
- label: "Header Text Color"
650
- }), e.bgColor.propertyView({
651
- label: "Content Background"
652
- }), e.accentColor.propertyView({
653
- label: "Accent Color"
654
- })]
655
- }), /* @__PURE__ */ o($lowcoder_sdk.Section, {
656
- name: "Content",
657
- children: e.container.getPropertyView()
658
- })]
659
- })).build(), Fe = $lowcoder_sdk.withExposingConfigs(Ae, [$lowcoder_sdk.NameConfigHidden]), Me = $styled_components.div`
660
- display: flex;
661
- flex-direction: column;
662
- height: 100%;
663
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
664
- `, Re = $styled_components.div`
665
- display: flex;
666
- align-items: center;
667
- justify-content: space-between;
668
- height: 52px;
669
- padding: 0 20px;
670
- background: ${(e) => e.$topBarBg || "#ffffff"};
671
- border-bottom: 1px solid #e8e8e8;
672
- flex-shrink: 0;
673
- `, Ge = $styled_components.div`
674
- display: flex;
675
- align-items: center;
676
- gap: 16px;
677
- `, je = $styled_components.div`
678
- width: 32px;
679
- height: 32px;
680
- border-radius: 6px;
681
- display: flex;
682
- align-items: center;
683
- justify-content: center;
684
- cursor: pointer;
685
- font-size: 18px;
686
- &:hover { background: #f0f0f0; }
687
- `, Le = $styled_components.div`
688
- display: flex;
689
- align-items: center;
690
- background: #f5f6fa;
691
- border-radius: 8px;
692
- padding: 6px 14px;
693
- gap: 8px;
694
- min-width: 280px;
695
- `, Ee = $styled_components.span`
696
- font-size: 14px;
697
- opacity: 0.4;
698
- `, Ue = $styled_components.div`
699
- font-size: 13px;
700
- color: #bbb;
701
- `, De = $styled_components.div`
702
- display: flex;
703
- align-items: center;
704
- gap: 12px;
705
- `, _ = $styled_components.div`
706
- width: 34px;
707
- height: 34px;
708
- border-radius: 8px;
709
- display: flex;
710
- align-items: center;
711
- justify-content: center;
712
- cursor: pointer;
713
- font-size: 16px;
714
- position: relative;
715
- &:hover { background: #f5f6fa; }
716
- `, Oe = $styled_components.span`
717
- position: absolute;
718
- top: 6px;
719
- right: 6px;
720
- width: 7px;
721
- height: 7px;
722
- background: ${(e) => e.$accent || "#ff4757"};
723
- border-radius: 50%;
724
- `, We = $styled_components.div`
725
- width: 32px;
726
- height: 32px;
727
- border-radius: 50%;
728
- background: ${(e) => e.$accent || "#4361ee"};
729
- color: #fff;
730
- display: flex;
731
- align-items: center;
732
- justify-content: center;
733
- font-size: 13px;
734
- font-weight: 700;
735
- cursor: pointer;
736
- `, qe = $styled_components.div`
737
- display: flex;
738
- flex: 1;
739
- min-height: 0;
740
- `, Ye = $styled_components.div`
741
- width: ${(e) => e.$collapsed ? "60px" : "220px"};
742
- background: ${(e) => e.$sidebarBg || "#fafbfc"};
743
- border-right: 1px solid #e8e8e8;
744
- display: flex;
745
- flex-direction: column;
746
- flex-shrink: 0;
747
- transition: width 0.2s ease;
748
- overflow: hidden;
749
- padding-top: 8px;
750
- `, Je = $styled_components.div`
751
- margin-bottom: 16px;
752
- `, Ke = $styled_components.div`
753
- font-size: 10px;
754
- text-transform: uppercase;
755
- letter-spacing: 1px;
756
- color: #aaa;
757
- padding: ${(e) => e.$collapsed ? "8px 12px" : "8px 16px"};
758
- white-space: nowrap;
759
- overflow: hidden;
760
- `, Qe = $styled_components.div`
761
- display: flex;
762
- align-items: center;
763
- gap: 10px;
764
- padding: ${(e) => e.$collapsed ? "9px 19px" : "9px 16px"};
765
- margin: 1px 6px;
766
- border-radius: 6px;
767
- cursor: pointer;
768
- font-size: 13px;
769
- white-space: nowrap;
770
- color: ${(e) => e.$active ? e.$accent || "#4361ee" : "#555"};
771
- background: ${(e) => e.$active ? (e.$accent || "#4361ee") + "12" : "transparent"};
772
- font-weight: ${(e) => e.$active ? 600 : 400};
773
- &:hover {
774
- background: ${(e) => e.$active ? (e.$accent || "#4361ee") + "18" : "#f0f1f3"};
682
+ }
683
+ const ne = h(ie, {
684
+ [y]: {
685
+ layout: {},
686
+ items: {}
775
687
  }
776
- `, Xe = $styled_components.span`
777
- font-size: 15px;
778
- width: 20px;
779
- text-align: center;
780
- flex-shrink: 0;
781
- `, Ze = $styled_components.div`
782
- flex: 1;
783
- background: ${(e) => e.$bgColor || "#f0f2f5"};
784
- display: flex;
785
- flex-direction: column;
786
- min-height: 0;
787
- `, eo = $styled_components.div`
788
- display: flex;
789
- align-items: center;
790
- justify-content: space-between;
791
- padding: 18px 24px;
792
- flex-shrink: 0;
793
- `, oo = $styled_components.div`
794
- font-size: 13px;
795
- color: #999;
796
- display: flex;
797
- gap: 6px;
798
- align-items: center;
799
- `, to = $styled_components.span`
800
- color: #333;
801
- font-weight: 600;
802
- `, no = $styled_components.div`
803
- flex: 1;
804
- padding: 0 24px 24px;
805
- min-height: 250px;
806
- `, ro = $styled_components.div`
807
- background: #ffffff;
808
- border-radius: 10px;
809
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
810
- height: 100%;
811
- overflow: hidden;
812
- `, io = {
813
- appName: $lowcoder_sdk.StringControl,
814
- pageTitle: $lowcoder_sdk.StringControl,
815
- topBarBgColor: $lowcoder_sdk.ColorControl,
816
- sidebarBgColor: $lowcoder_sdk.ColorControl,
817
- bgColor: $lowcoder_sdk.ColorControl,
818
- accentColor: $lowcoder_sdk.ColorControl
819
- }, lo = new $lowcoder_sdk.ContainerCompBuilder(io, (e, r) => {
820
- const [n, i] = $react.useState(!1), d = [{
821
- label: "Main",
822
- items: [{
823
- icon: "🏠",
824
- label: "Dashboard",
825
- active: !0
826
- }, {
827
- icon: "📊",
828
- label: "Analytics"
829
- }, {
830
- icon: "👥",
831
- label: "Users"
832
- }]
688
+ }, y), oe = [{
689
+ label: "Main",
690
+ items: [{
691
+ icon: "🏠",
692
+ label: "Dashboard",
693
+ active: !0
833
694
  }, {
834
- label: "Management",
835
- items: [{
836
- icon: "📦",
837
- label: "Products"
838
- }, {
839
- icon: "🧾",
840
- label: "Orders"
841
- }, {
842
- icon: "💳",
843
- label: "Billing"
844
- }]
695
+ icon: "📊",
696
+ label: "Analytics"
845
697
  }, {
846
- label: "System",
847
- items: [{
848
- icon: "⚙️",
849
- label: "Settings"
850
- }, {
851
- icon: "🔐",
852
- label: "Security"
853
- }]
854
- }];
855
- return /* @__PURE__ */ t(Me, {
856
- children: [/* @__PURE__ */ t(Re, {
857
- $topBarBg: e.topBarBgColor,
858
- children: [/* @__PURE__ */ t(Ge, {
859
- children: [/* @__PURE__ */ o(je, {
860
- onClick: () => i(!n),
861
- children: "☰"
862
- }), /* @__PURE__ */ t(Le, {
863
- children: [/* @__PURE__ */ o(Ee, {
864
- children: "🔍"
865
- }), /* @__PURE__ */ o(Ue, {
866
- children: "Search anything..."
867
- })]
868
- })]
869
- }), /* @__PURE__ */ t(De, {
870
- children: [/* @__PURE__ */ t(_, {
871
- children: ["🔔", /* @__PURE__ */ o(Oe, {
872
- $accent: e.accentColor
873
- })]
874
- }), /* @__PURE__ */ o(_, {
875
- children: "💬"
876
- }), /* @__PURE__ */ o(We, {
877
- $accent: e.accentColor,
878
- children: (e.appName || "Admin").charAt(0).toUpperCase()
879
- })]
698
+ icon: "👥",
699
+ label: "Users"
700
+ }]
701
+ }, {
702
+ label: "Management",
703
+ items: [{
704
+ icon: "📦",
705
+ label: "Products"
706
+ }, {
707
+ icon: "🧾",
708
+ label: "Orders"
709
+ }, {
710
+ icon: "💳",
711
+ label: "Billing"
712
+ }]
713
+ }, {
714
+ label: "System",
715
+ items: [{
716
+ icon: "⚙️",
717
+ label: "Settings"
718
+ }, {
719
+ icon: "🔐",
720
+ label: "Security"
721
+ }]
722
+ }];
723
+ function re({
724
+ onToggle: e
725
+ }) {
726
+ return /* @__PURE__ */ o("header", {
727
+ style: {
728
+ display: "flex",
729
+ alignItems: "center",
730
+ justifyContent: "space-between",
731
+ height: 52,
732
+ padding: "0 20px",
733
+ background: "#fff",
734
+ borderBottom: "1px solid #e8e8e8",
735
+ flexShrink: 0
736
+ },
737
+ children: [/* @__PURE__ */ o("div", {
738
+ style: {
739
+ display: "flex",
740
+ alignItems: "center",
741
+ gap: 16
742
+ },
743
+ children: [/* @__PURE__ */ t("button", {
744
+ type: "button",
745
+ onClick: e,
746
+ onMouseDown: (i) => i.stopPropagation(),
747
+ style: {
748
+ width: 32,
749
+ height: 32,
750
+ border: "none",
751
+ borderRadius: 6,
752
+ background: "transparent",
753
+ fontSize: 18,
754
+ cursor: "pointer"
755
+ },
756
+ children: "☰"
757
+ }), /* @__PURE__ */ t("div", {
758
+ style: {
759
+ display: "flex",
760
+ alignItems: "center",
761
+ background: "#f5f6fa",
762
+ borderRadius: 8,
763
+ padding: "6px 14px",
764
+ gap: 8,
765
+ minWidth: 280,
766
+ fontSize: 13,
767
+ color: "#bbb"
768
+ },
769
+ children: "🔍 Search anything..."
880
770
  })]
881
- }), /* @__PURE__ */ t(qe, {
882
- children: [/* @__PURE__ */ o(Ye, {
883
- $sidebarBg: e.sidebarBgColor,
884
- $collapsed: n,
885
- children: d.map((l) => /* @__PURE__ */ t(Je, {
886
- children: [/* @__PURE__ */ o(Ke, {
887
- $collapsed: n,
888
- children: n ? "•" : l.label
889
- }), l.items.map((c) => /* @__PURE__ */ t(Qe, {
890
- $active: c.active,
891
- $accent: e.accentColor,
892
- $collapsed: n,
893
- children: [/* @__PURE__ */ o(Xe, {
894
- children: c.icon
895
- }), !n && c.label]
896
- }, c.label))]
897
- }, l.label))
898
- }), /* @__PURE__ */ t(Ze, {
899
- $bgColor: e.bgColor,
900
- children: [/* @__PURE__ */ o(eo, {
901
- children: /* @__PURE__ */ t(oo, {
902
- children: [e.appName || "Admin", " / ", /* @__PURE__ */ o(to, {
903
- children: e.pageTitle || "Dashboard"
904
- })]
905
- })
906
- }), /* @__PURE__ */ o(no, {
907
- children: /* @__PURE__ */ o(ro, {
908
- children: /* @__PURE__ */ o($lowcoder_sdk.InnerGrid, p(s({}, e.container), {
909
- items: $lowcoder_sdk.gridItemCompToGridItems(e.container.items),
771
+ }), /* @__PURE__ */ o("div", {
772
+ style: {
773
+ display: "flex",
774
+ alignItems: "center",
775
+ gap: 12
776
+ },
777
+ children: [/* @__PURE__ */ t("span", {
778
+ style: {
779
+ fontSize: 16
780
+ },
781
+ children: "🔔"
782
+ }), /* @__PURE__ */ t("span", {
783
+ style: {
784
+ fontSize: 16
785
+ },
786
+ children: "💬"
787
+ }), /* @__PURE__ */ t("div", {
788
+ style: {
789
+ width: 32,
790
+ height: 32,
791
+ borderRadius: "50%",
792
+ background: "#4361ee",
793
+ color: "#fff",
794
+ display: "flex",
795
+ alignItems: "center",
796
+ justifyContent: "center",
797
+ fontSize: 13,
798
+ fontWeight: 700
799
+ },
800
+ children: "A"
801
+ })]
802
+ })]
803
+ });
804
+ }
805
+ function ae({
806
+ collapsed: e
807
+ }) {
808
+ return /* @__PURE__ */ t("aside", {
809
+ style: {
810
+ width: e ? 60 : 220,
811
+ background: "#fafbfc",
812
+ borderRight: "1px solid #e8e8e8",
813
+ flexShrink: 0,
814
+ paddingTop: 8,
815
+ overflow: "hidden",
816
+ transition: "width 0.2s ease"
817
+ },
818
+ children: oe.map((i) => /* @__PURE__ */ o("div", {
819
+ style: {
820
+ marginBottom: 16
821
+ },
822
+ children: [/* @__PURE__ */ t("div", {
823
+ style: {
824
+ fontSize: 10,
825
+ textTransform: "uppercase",
826
+ letterSpacing: 1,
827
+ color: "#aaa",
828
+ padding: e ? "8px 12px" : "8px 16px"
829
+ },
830
+ children: e ? "•" : i.label
831
+ }), i.items.map((n) => /* @__PURE__ */ o("div", {
832
+ style: {
833
+ display: "flex",
834
+ alignItems: "center",
835
+ gap: 10,
836
+ padding: e ? "9px 19px" : "9px 16px",
837
+ margin: "1px 6px",
838
+ borderRadius: 6,
839
+ fontSize: 13,
840
+ color: n.active ? "#4361ee" : "#555",
841
+ background: n.active ? "rgba(67,97,238,0.07)" : "transparent",
842
+ fontWeight: n.active ? 600 : 400
843
+ },
844
+ children: [/* @__PURE__ */ t("span", {
845
+ style: {
846
+ width: 20,
847
+ textAlign: "center"
848
+ },
849
+ children: n.icon
850
+ }), !e && n.label]
851
+ }, n.label))]
852
+ }, i.label))
853
+ });
854
+ }
855
+ const b = "main_content";
856
+ function le(e) {
857
+ const [i, n] = $react.useState(!1);
858
+ return /* @__PURE__ */ o("div", {
859
+ style: {
860
+ display: "flex",
861
+ flexDirection: "column",
862
+ width: "100%",
863
+ height: e.autoHeight ? "auto" : "100%",
864
+ minHeight: e.autoHeight ? 680 : void 0,
865
+ fontFamily: "Inter, system-ui, sans-serif",
866
+ overflow: "hidden"
867
+ },
868
+ children: [/* @__PURE__ */ t(re, {
869
+ onToggle: () => n(!i)
870
+ }), /* @__PURE__ */ o("div", {
871
+ style: {
872
+ display: "flex",
873
+ flex: 1,
874
+ minHeight: 0
875
+ },
876
+ children: [/* @__PURE__ */ t(ae, {
877
+ collapsed: i
878
+ }), /* @__PURE__ */ o("main", {
879
+ style: {
880
+ flex: 1,
881
+ minWidth: 0,
882
+ display: "flex",
883
+ flexDirection: "column",
884
+ background: "#f0f2f5"
885
+ },
886
+ children: [/* @__PURE__ */ o("div", {
887
+ style: {
888
+ padding: "18px 24px",
889
+ fontSize: 13,
890
+ color: "#999"
891
+ },
892
+ children: ["Admin / ", /* @__PURE__ */ t("strong", {
893
+ style: {
894
+ color: "#333"
895
+ },
896
+ children: "Dashboard"
897
+ })]
898
+ }), /* @__PURE__ */ t("div", {
899
+ style: {
900
+ flex: 1,
901
+ padding: "0 24px 24px",
902
+ minHeight: 300
903
+ },
904
+ children: /* @__PURE__ */ t("div", {
905
+ style: {
906
+ background: "#fff",
907
+ borderRadius: 10,
908
+ boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
909
+ height: "100%",
910
+ minHeight: 300,
911
+ overflow: "hidden"
912
+ },
913
+ children: /* @__PURE__ */ t(c, {
914
+ containers: e.containers,
915
+ dispatch: e.dispatch,
916
+ zoneId: b,
910
917
  autoHeight: !0,
918
+ horizontalGridCells: 12,
911
919
  emptyRows: 20,
912
920
  minHeight: "300px",
913
921
  containerPadding: [16, 16],
914
- hintPlaceholder: $lowcoder_sdk.HintPlaceHolder
915
- }))
922
+ hint: "Drop admin widgets here"
923
+ })
916
924
  })
917
925
  })]
918
926
  })]
919
927
  })]
920
928
  });
921
- }).setPropertyViewFn((e) => /* @__PURE__ */ t(g, {
922
- children: [/* @__PURE__ */ t($lowcoder_sdk.Section, {
923
- name: "Template Settings",
924
- children: [e.appName.propertyView({
925
- label: "App Name"
926
- }), e.pageTitle.propertyView({
927
- label: "Page Title"
928
- })]
929
- }), /* @__PURE__ */ t($lowcoder_sdk.Section, {
930
- name: "Colors",
931
- children: [e.topBarBgColor.propertyView({
932
- label: "Top Bar Background"
933
- }), e.sidebarBgColor.propertyView({
934
- label: "Sidebar Background"
935
- }), e.bgColor.propertyView({
936
- label: "Content Background"
937
- }), e.accentColor.propertyView({
938
- label: "Accent Color"
939
- })]
940
- }), /* @__PURE__ */ o($lowcoder_sdk.Section, {
941
- name: "Content",
942
- children: e.container.getPropertyView()
943
- })]
944
- })).build(), ao = $lowcoder_sdk.withExposingConfigs(lo, [$lowcoder_sdk.NameConfigHidden]), so = {
945
- dashboardTemplate: q,
946
- landingPageTemplate: le,
947
- sidebarTemplate: _e,
948
- cardGridTemplate: Fe,
949
- adminPanelTemplate: ao
929
+ }
930
+ const de = h(le, {
931
+ [b]: {
932
+ layout: {},
933
+ items: {}
934
+ }
935
+ }, b), ce = {
936
+ dashboardTemplate: L,
937
+ landingPageTemplate: q,
938
+ sidebarTemplate: X,
939
+ cardGridTemplate: ne,
940
+ adminPanelTemplate: de
950
941
  };
951
942
  export {
952
- so as default
943
+ ce as default
953
944
  };