@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.mjs

@@ -5,7 +5,7 @@ import { emptyObject as i } from "@plitzi/sdk-shared/helpers/utils";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 import s from "clsx";
 //#region src/elements/structure/List/modes/ListControlled/ListControlledItem.tsx
-var c = ({ children: c, className: l = "", isTemplate: u = !1, itemCount: d = 0, record: f, source: p = "" }) => {
+var c = ({ children: c, className: l = "", isTemplate: u = !1, index: d = 0, record: f, source: p = "" }) => {
 	let m = t(), h = n(() => p ? { runtime: { sources: { [p]: {
 		item: f,
 		index: `${d}`
@@ -24,7 +24,7 @@ var c = ({ children: c, className: l = "", isTemplate: u = !1, itemCount: d = 0,
 		className: s("plitzi-component__controlled-list-item", l),
 		children: [/* @__PURE__ */ a("div", {
 			className: "controlled-list-item__counter",
-			children: `List Item - ${d}`
+			children: `List Item - ${d + 1}`
 		}), g]
 	}) : g;
 };

package/dist/elements/structure/ModalContainer/ModalContainer.mjs

@@ -1,17 +1,18 @@
-import e from "../../../Element/hooks/useElement.mjs";
-import { RootElement as t } from "../../../Element/RootElement.mjs";
-import n from "../../../Element/hocs/withElement.mjs";
-import { use as r, useCallback as i, useEffect as a, useMemo as o, useState as s } from "react";
-import c from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { StoreProvider as l } from "@plitzi/nexus/react";
-import { emptyObject as u, getPathsFromObeject as d } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import m from "clsx";
-import h from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import g from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import e from "../../../Element/hocs/withElement.mjs";
+import t from "../../../Element/hooks/useElement.mjs";
+import { RootElement as n } from "../../../Element/RootElement.mjs";
+import r from "./declaration.mjs";
+import { use as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import l from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { StoreProvider as u } from "@plitzi/nexus/react";
+import { emptyObject as d, getPathsFromObeject as f } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import h from "clsx";
+import g from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import _ from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/ModalContainer/ModalContainer.tsx
-var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", autoHideAfterClick: b = !0 }) => {
-	let { id: x, idRef: S, definition: { styleSelectors: C, label: w = "Modal" }, elementState: T, setElementState: E } = e(), D = h("modalContainer", { idRef: S }), { contexts: { InteractionsContext: O } } = c(), { interactionsManager: k } = r(O), [A, j] = s({}), M = i((e) => {
+var v = ({ ref: e, className: v = "", children: y, title: b = "Modal Header", autoHideAfterClick: x = !0 }) => {
+	let { id: S, definition: { styleSelectors: C, label: w = "Modal" }, elementState: T, setElementState: E } = t(), D = g(r.sourceType, S), { contexts: { InteractionsContext: O } } = l(), { interactionsManager: k } = i(O), [A, j] = c({}), M = a((e) => {
 		let { metadata: t } = e;
 		if (t && typeof t == "object") j(t);
 		else if (typeof t == "string") try {
@@ -24,7 +25,7 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 			...e,
 			visibility: !0
 		}));
-	}, [E, j]), N = i(() => {
+	}, [E, j]), N = a(() => {
 		k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
 			...e,
 			visibility: !1
@@ -35,19 +36,19 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 		j,
 		A,
 		S
-	]), P = i(() => {
-		b && (k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
+	]), P = a(() => {
+		x && (k.interactionTrigger(S, "onModalClose", { metadata: A }), j({}), E((e) => ({
 			...e,
 			visibility: !1
 		})));
 	}, [
 		k,
-		b,
+		x,
 		E,
 		j,
 		A,
 		S
-	]), F = o(() => ({
+	]), F = s(() => ({
 		onModalOpen: {
 			action: "onModalOpen",
 			title: "On Modal Open",
@@ -65,7 +66,7 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 			preview: {},
 			params: {}
 		}
-	}), []), I = o(() => ({
+	}), []), I = s(() => ({
 		openModal: {
 			action: "openModal",
 			title: `Open ${w}`,
@@ -90,7 +91,7 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 		M,
 		w
 	]);
-	a(() => {
+	o(() => {
 		T.visibility !== !1 && k.interactionTrigger(S, "onModalOpen", { metadata: A });
 	}, [
 		S,
@@ -98,7 +99,7 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 		A,
 		T.visibility
 	]);
-	let L = i(() => d(A).reduce((e, t) => {
+	let L = a(() => f(A).reduce((e, t) => {
 		let n = t.split(".");
 		return n.length > 1 ? [...e, {
 			path: t,
@@ -108,44 +109,44 @@ var _ = ({ ref: n, className: _ = "", children: v, title: y = "Modal Header", au
 			name: n[n.length - 1]
 		}];
 	}, []), [A]);
-	g({
-		id: x,
+	_({
+		id: S,
 		source: D,
-		name: w || `Modal - ${x}`,
+		name: w || `Modal - ${S}`,
 		fields: L
 	});
-	let R = o(() => D ? { runtime: { sources: { [D]: A } } } : u, [D, A]);
-	return /* @__PURE__ */ p(t, {
-		ref: n,
-		className: m("plitzi-component__modal-container", _),
+	let R = s(() => D ? { runtime: { sources: { [D]: A } } } : d, [D, A]);
+	return /* @__PURE__ */ m(n, {
+		ref: e,
+		className: h("plitzi-component__modal-container", v),
 		interactionTriggers: F,
 		interactionCallbacks: I,
-		children: [/* @__PURE__ */ f("div", {
-			className: m("modal-container__background", C.backgroundContainer),
+		children: [/* @__PURE__ */ p("div", {
+			className: h("modal-container__background", C.backgroundContainer),
 			onClick: P
-		}), /* @__PURE__ */ p("div", {
-			className: m("modal-container__root", C.rootContainer),
-			children: [/* @__PURE__ */ p("div", {
-				className: m("modal-container__header", C.headerContainer),
-				children: [/* @__PURE__ */ f("div", {
-					className: m("modal-container__header__title", C.headerTitle),
-					children: y || "Modal Header"
-				}), /* @__PURE__ */ f("i", {
-					className: m("fa-solid fa-xmark", C.headerCloseButton),
+		}), /* @__PURE__ */ m("div", {
+			className: h("modal-container__root", C.rootContainer),
+			children: [/* @__PURE__ */ m("div", {
+				className: h("modal-container__header", C.headerContainer),
+				children: [/* @__PURE__ */ p("div", {
+					className: h("modal-container__header__title", C.headerTitle),
+					children: b || "Modal Header"
+				}), /* @__PURE__ */ p("i", {
+					className: h("fa-solid fa-xmark", C.headerCloseButton),
 					title: "Close",
 					onClick: N
 				})]
-			}), /* @__PURE__ */ f("div", {
-				className: m("modal-container__body", C.bodyContainer),
-				children: /* @__PURE__ */ f(l, {
+			}), /* @__PURE__ */ p("div", {
+				className: h("modal-container__body", C.bodyContainer),
+				children: /* @__PURE__ */ p(u, {
 					inherit: "live",
-					name: `Modal:${x}`,
+					name: `Modal:${S}`,
 					value: R,
-					children: v
+					children: y
 				})
 			})]
 		})]
 	});
-}, v = n(_);
+}, y = e(v);
 //#endregion
-export { _ as ModalContainer, v as default };
+export { v as ModalContainer, y as default };

package/dist/elements/structure/ModalContainer/declaration.d.ts

@@ -0,0 +1,151 @@
+import { ModalContainerProps } from './ModalContainer';
+import { AuthorableAttributes } from '@plitzi/sdk-shared/authoring/declare';
+/** What this element can be authored with — its component's own props, minus what the runtime supplies. */
+export type ModalContainerAttributes = AuthorableAttributes<ModalContainerProps>;
+declare const declaration: {
+    readonly type: "modalContainer";
+    readonly sourceType: "modalContainer";
+    readonly content: {
+        readonly attributes: {
+            readonly title: "Modal Header";
+            readonly autoHideAfterClick: true;
+        };
+        readonly definition: {
+            readonly label: "Modal Container";
+            readonly type: "modalContainer";
+            readonly description: "A modal overlay container opened and closed through interactions; use for dialogs over the page.";
+            readonly items: readonly [];
+            readonly bindings: {};
+            /**
+             * A modal nobody opens is the commonest hidden subtree on a page, and before this it was built, bound and
+             * subscribed on every render of the page it sat in. `lazy` rather than `visible` so what a visitor typed into
+             * one survives closing it — reopening a form that cleared itself is a worse bug than the cost this saves.
+             */
+            readonly loadStrategy: "lazy";
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly backgroundContainer: "";
+                readonly rootContainer: "";
+                readonly headerContainer: "";
+                readonly headerTitle: "";
+                readonly headerCloseButton: "";
+                readonly bodyContainer: "";
+            };
+            readonly initialState: {
+                readonly visibility: true;
+            };
+        };
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
+        };
+        readonly market: {
+            readonly category: "structure";
+            readonly owner: "Plitzi";
+            readonly verified: true;
+            readonly license: "MIT";
+            readonly website: "https://plitzi.com";
+            readonly backgroundColor: "#4422ee";
+            readonly icon: "fa-regular fa-clone";
+        };
+        readonly defaultStyle: {
+            readonly name: "Modal Container";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly position: "absolute";
+                        readonly top: "0";
+                        readonly bottom: "0";
+                        readonly left: "0";
+                        readonly right: "0";
+                    };
+                };
+                readonly backgroundContainer: {
+                    readonly default: {
+                        readonly height: "100%";
+                        readonly width: "100%";
+                        readonly left: "0";
+                        readonly top: "0";
+                        readonly position: "absolute";
+                        readonly 'background-color': "black";
+                        readonly opacity: "0.5";
+                    };
+                };
+                readonly rootContainer: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'flex-direction': "column";
+                        readonly position: "absolute";
+                        readonly top: "50%";
+                        readonly left: "50%";
+                        readonly width: "500px";
+                        readonly height: "300px";
+                        readonly 'background-color': "white";
+                        readonly transform: "translate3d(-50%, -50%, 0px)";
+                        readonly 'border-top-left-radius': "8px";
+                        readonly 'border-top-right-radius': "8px";
+                        readonly 'border-bottom-left-radius': "8px";
+                        readonly 'border-bottom-right-radius': "8px";
+                    };
+                };
+                readonly headerContainer: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'align-items': "center";
+                        readonly 'justify-content': "space-between";
+                        readonly 'border-bottom-width': "1px";
+                        readonly 'border-bottom-color': "#d1d5db";
+                        readonly 'border-bottom-style': "solid";
+                        readonly 'padding-left': "20px";
+                        readonly 'padding-right': "20px";
+                        readonly 'padding-top': "10px";
+                        readonly 'padding-bottom': "10px";
+                    };
+                };
+                readonly headerTitle: {
+                    readonly default: {
+                        readonly 'font-size': "20px";
+                        readonly 'font-weight': "500";
+                        readonly 'line-height': "1.2";
+                    };
+                };
+                readonly headerCloseButton: {
+                    readonly default: {
+                        readonly height: "20px";
+                        readonly width: "20px";
+                        readonly padding: "4px";
+                        readonly display: "flex";
+                        readonly 'justify-content': "center";
+                        readonly 'align-items': "center";
+                        readonly cursor: "pointer";
+                    };
+                    readonly bodyContainer: {
+                        readonly default: {
+                            readonly display: "flex";
+                            readonly 'flex-direction': "column";
+                            readonly 'flex-grow': "1";
+                            readonly 'flex-basis': "0";
+                            readonly 'padding-top': "20px";
+                            readonly 'padding-bottom': "20px";
+                            readonly 'padding-left': "20px";
+                            readonly 'padding-right': "20px";
+                        };
+                    };
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["container"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    title?: string | undefined;
+    autoHideAfterClick?: boolean | undefined;
+}>>;
+export default declaration;

package/dist/elements/structure/ModalContainer/declaration.mjs

@@ -0,0 +1,128 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/ModalContainer/declaration.ts
+var t = e()({
+	type: "modalContainer",
+	sourceType: "modalContainer",
+	content: {
+		attributes: {
+			title: "Modal Header",
+			autoHideAfterClick: !0
+		},
+		definition: {
+			label: "Modal Container",
+			type: "modalContainer",
+			description: "A modal overlay container opened and closed through interactions; use for dialogs over the page.",
+			items: [],
+			bindings: {},
+			loadStrategy: "lazy",
+			styleSelectors: {
+				base: "",
+				backgroundContainer: "",
+				rootContainer: "",
+				headerContainer: "",
+				headerTitle: "",
+				headerCloseButton: "",
+				bodyContainer: ""
+			},
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-regular fa-clone"
+		},
+		defaultStyle: {
+			name: "Modal Container",
+			displayMode: "desktop",
+			style: {
+				base: { default: {
+					position: "absolute",
+					top: "0",
+					bottom: "0",
+					left: "0",
+					right: "0"
+				} },
+				backgroundContainer: { default: {
+					height: "100%",
+					width: "100%",
+					left: "0",
+					top: "0",
+					position: "absolute",
+					"background-color": "black",
+					opacity: "0.5"
+				} },
+				rootContainer: { default: {
+					display: "flex",
+					"flex-direction": "column",
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					width: "500px",
+					height: "300px",
+					"background-color": "white",
+					transform: "translate3d(-50%, -50%, 0px)",
+					"border-top-left-radius": "8px",
+					"border-top-right-radius": "8px",
+					"border-bottom-left-radius": "8px",
+					"border-bottom-right-radius": "8px"
+				} },
+				headerContainer: { default: {
+					display: "flex",
+					"align-items": "center",
+					"justify-content": "space-between",
+					"border-bottom-width": "1px",
+					"border-bottom-color": "#d1d5db",
+					"border-bottom-style": "solid",
+					"padding-left": "20px",
+					"padding-right": "20px",
+					"padding-top": "10px",
+					"padding-bottom": "10px"
+				} },
+				headerTitle: { default: {
+					"font-size": "20px",
+					"font-weight": "500",
+					"line-height": "1.2"
+				} },
+				headerCloseButton: {
+					default: {
+						height: "20px",
+						width: "20px",
+						padding: "4px",
+						display: "flex",
+						"justify-content": "center",
+						"align-items": "center",
+						cursor: "pointer"
+					},
+					bodyContainer: { default: {
+						display: "flex",
+						"flex-direction": "column",
+						"flex-grow": "1",
+						"flex-basis": "0",
+						"padding-top": "20px",
+						"padding-bottom": "20px",
+						"padding-left": "20px",
+						"padding-right": "20px"
+					} }
+				}
+			},
+			subTypes: {}
+		},
+		settings: {}
+	},
+	initialItems: ["container"]
+});
+//#endregion
+export { t as default };