@plitzi/sdk-elements 0.33.1 → 0.34.0

package/dist/elements/structure/DialogContainer/DialogContainer.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/DialogContainer/DialogContainer.tsx
-var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Header", acceptButtonLabel: b = "Accept", acceptButtonLabelLoading: x = "Loading...", rejectButtonLabel: S = "Cancel", autoHideAfterClick: C = !0 }) => {
-	let { id: w, idRef: T, setElementState: E, definition: { styleSelectors: D, label: O = "Dialog" }, elementState: k } = e(), A = h("dialogContainer", { idRef: T }), { contexts: { InteractionsContext: j } } = c(), { interactionsManager: M } = r(j), [N, P] = s({}), [F, I] = s(!1), L = i((e) => {
+var v = ({ ref: e, className: v = "", children: y, headerLabel: b = "Dialog Header", acceptButtonLabel: x = "Accept", acceptButtonLabelLoading: S = "Loading...", rejectButtonLabel: C = "Cancel", autoHideAfterClick: w = !0 }) => {
+	let { id: T, setElementState: E, definition: { styleSelectors: D, label: O = "Dialog" }, elementState: k } = t(), A = g(r.sourceType, T), { contexts: { InteractionsContext: j } } = l(), { interactionsManager: M } = i(j), [N, P] = c({}), [F, I] = c(!1), L = a((e) => {
 		let { metadata: t } = e;
 		if (t && typeof t == "object") P(t);
 		else if (typeof t == "string") try {
@@ -24,7 +25,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 			...e,
 			visibility: !0
 		}));
-	}, [E, P]), R = i(() => {
+	}, [E, P]), R = a(() => {
 		M.interactionTrigger(T, "onDialogClose", { metadata: N }), P({}), E((e) => ({
 			...e,
 			visibility: !1
@@ -35,20 +36,19 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 		P,
 		N,
 		T
-	]), z = i(() => {
-		C && (M.interactionTrigger(T, "onDialogClose", { metadata: N }), P({}), E((e) => ({
+	]), z = a(() => {
+		w && (M.interactionTrigger(T, "onDialogClose", { metadata: N }), P({}), E((e) => ({
 			...e,
 			visibility: !1
 		})));
 	}, [
 		M,
-		C,
+		w,
 		E,
 		P,
 		N,
 		T
-	]);
-	i(async () => {
+	]), B = a(async () => {
 		I(!0), await M.interactionTrigger(T, "onDialogAccept", { metadata: N }), I(!1), E((e) => ({
 			...e,
 			visibility: !1
@@ -58,7 +58,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 		T,
 		N,
 		E
-	]), i(async () => {
+	]), V = a(async () => {
 		I(!0), await M.interactionTrigger(T, "onDialogReject", { metadata: N }), I(!1), E((e) => ({
 			...e,
 			visibility: !1
@@ -68,8 +68,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 		T,
 		N,
 		E
-	]);
-	let B = o(() => ({
+	]), H = s(() => ({
 		onDialogAccept: {
 			action: "onDialogAccept",
 			title: "On Dialog Accept",
@@ -110,7 +109,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 			} },
 			preview: { metadata: "" }
 		}
-	}), []), V = o(() => ({
+	}), []), U = s(() => ({
 		openDialog: {
 			action: "openDialog",
 			title: `Open ${O}`,
@@ -135,7 +134,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 		L,
 		O
 	]);
-	a(() => {
+	o(() => {
 		k.visibility !== !1 && M.interactionTrigger(T, "onDialogOpen", { metadata: N });
 	}, [
 		T,
@@ -143,7 +142,7 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 		N,
 		k.visibility
 	]);
-	let H = i(() => typeof N == "object" ? d(N).reduce((e, t) => {
+	let W = a(() => typeof N == "object" ? f(N).reduce((e, t) => {
 		let n = t.split(".");
 		return n.length > 1 ? [...e, {
 			path: t,
@@ -153,64 +152,64 @@ var _ = ({ ref: n, className: _ = "", children: v, headerLabel: y = "Dialog Head
 			name: n[n.length - 1]
 		}];
 	}, []) : [], [N]);
-	g({
-		id: w,
+	_({
+		id: T,
 		source: A,
-		name: O || `Dialog - ${w}`,
-		fields: H
+		name: O || `Dialog - ${T}`,
+		fields: W
 	});
-	let U = o(() => A ? { runtime: { sources: { [A]: N } } } : u, [A, N]);
-	return /* @__PURE__ */ p(t, {
-		ref: n,
-		className: m("plitzi-component__dialog-container", _),
-		interactionTriggers: B,
-		interactionCallbacks: V,
-		children: [/* @__PURE__ */ f("div", {
-			className: m("dialog-container__background", D.backgroundContainer),
+	let G = s(() => A ? { runtime: { sources: { [A]: N } } } : d, [A, N]);
+	return /* @__PURE__ */ m(n, {
+		ref: e,
+		className: h("plitzi-component__dialog-container", v),
+		interactionTriggers: H,
+		interactionCallbacks: U,
+		children: [/* @__PURE__ */ p("div", {
+			className: h("dialog-container__background", D.backgroundContainer),
 			onClick: z
-		}), /* @__PURE__ */ p("div", {
-			className: m("dialog-container__root", D.rootContainer),
+		}), /* @__PURE__ */ m("div", {
+			className: h("dialog-container__root", D.rootContainer),
 			children: [
-				/* @__PURE__ */ p("div", {
-					className: m("dialog-container__header", D.headerContainer),
-					children: [/* @__PURE__ */ f("div", {
-						className: m("dialog-container__header__title", D.headerTitle),
-						children: y || "Dialog Header"
-					}), /* @__PURE__ */ f("i", {
+				/* @__PURE__ */ m("div", {
+					className: h("dialog-container__header", D.headerContainer),
+					children: [/* @__PURE__ */ p("div", {
+						className: h("dialog-container__header__title", D.headerTitle),
+						children: b || "Dialog Header"
+					}), /* @__PURE__ */ p("i", {
 						className: "fa-solid fa-xmark",
 						title: "Close",
-						onClick: void 0
+						onClick: V
 					})]
 				}),
-				/* @__PURE__ */ f("div", {
-					className: m("dialog-container__body", D.body),
-					children: /* @__PURE__ */ f(l, {
+				/* @__PURE__ */ p("div", {
+					className: h("dialog-container__body", D.body),
+					children: /* @__PURE__ */ p(u, {
 						inherit: "live",
-						name: `Dialog:${w}`,
-						value: U,
-						children: v
+						name: `Dialog:${T}`,
+						value: G,
+						children: y
 					})
 				}),
-				/* @__PURE__ */ p("div", {
-					className: m("dialog-container__footer", D.footerContainer),
-					children: [/* @__PURE__ */ p("button", {
-						className: m("footer__button button--accept", D.acceptButton),
-						onClick: void 0,
+				/* @__PURE__ */ m("div", {
+					className: h("dialog-container__footer", D.footerContainer),
+					children: [/* @__PURE__ */ m("button", {
+						className: h("footer__button button--accept", D.acceptButton),
+						onClick: B,
 						disabled: F,
-						children: [F && /* @__PURE__ */ p("div", {
+						children: [F && /* @__PURE__ */ m("div", {
 							className: "button--accept__container",
-							children: [/* @__PURE__ */ f("i", { className: "fa-solid fa-rotate fa-spin" }), x]
-						}), !F && b]
-					}), /* @__PURE__ */ f("button", {
-						className: m("footer__button button--cancel", D.cancelButton),
-						onClick: void 0,
+							children: [/* @__PURE__ */ p("i", { className: "fa-solid fa-rotate fa-spin" }), S]
+						}), !F && x]
+					}), /* @__PURE__ */ p("button", {
+						className: h("footer__button button--cancel", D.cancelButton),
+						onClick: V,
 						disabled: F,
-						children: S
+						children: C
 					})]
 				})
 			]
 		})]
 	});
-}, v = n(_);
+}, y = e(v);
 //#endregion
-export { _ as DialogContainer, v as default };
+export { v as DialogContainer, y as default };

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

@@ -0,0 +1,155 @@
+import { DialogContainerProps } from './DialogContainer';
+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 DialogContainerAttributes = AuthorableAttributes<DialogContainerProps>;
+declare const declaration: {
+    readonly type: "dialogContainer";
+    readonly sourceType: "dialogContainer";
+    readonly content: {
+        readonly attributes: {
+            readonly headerLabel: "Dialog Header";
+            readonly acceptButtonLabel: "Accept";
+            readonly rejectButtonLabel: "Cancel";
+            readonly autoHideAfterClick: true;
+        };
+        readonly definition: {
+            readonly label: "Dialog Container";
+            readonly type: "dialogContainer";
+            readonly description: "A native <dialog> container shown or hidden through interactions (e.g. an onClick open/close).";
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly loadStrategy: "lazy";
+            readonly styleSelectors: {
+                readonly base: "";
+                readonly backgroundContainer: "";
+                readonly rootContainer: "";
+                readonly headerContainer: "";
+                readonly headerTitle: "";
+                readonly headerCloseButton: "";
+                readonly bodyContainer: "";
+                readonly footerContainer: "";
+                readonly acceptButton: "";
+                readonly cancelButton: "";
+            };
+            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: "Dialog 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 'padding-top': "20px";
+                        readonly 'padding-bottom': "20px";
+                        readonly 'padding-left': "20px";
+                        readonly 'padding-right': "20px";
+                        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 headerTitle: {
+                    readonly default: {
+                        readonly 'font-size': "20px";
+                        readonly 'font-weight': "500";
+                        readonly 'line-height': "1.2";
+                        readonly color: "#333";
+                    };
+                };
+                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 footerContainer: {
+                    readonly default: {
+                        readonly display: "flex";
+                        readonly 'justify-content': "flex-end";
+                        readonly 'margin-top': "8px";
+                    };
+                };
+            };
+            readonly subTypes: {};
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["container"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    headerLabel: string;
+    acceptButtonLabel: string;
+    acceptButtonLabelLoading: string;
+    rejectButtonLabel: string;
+    autoHideAfterClick: boolean;
+}>>;
+export default declaration;

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

@@ -0,0 +1,130 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/DialogContainer/declaration.ts
+var t = e()({
+	type: "dialogContainer",
+	sourceType: "dialogContainer",
+	content: {
+		attributes: {
+			headerLabel: "Dialog Header",
+			acceptButtonLabel: "Accept",
+			rejectButtonLabel: "Cancel",
+			autoHideAfterClick: !0
+		},
+		definition: {
+			label: "Dialog Container",
+			type: "dialogContainer",
+			description: "A native <dialog> container shown or hidden through interactions (e.g. an onClick open/close).",
+			items: [],
+			bindings: {},
+			loadStrategy: "lazy",
+			styleSelectors: {
+				base: "",
+				backgroundContainer: "",
+				rootContainer: "",
+				headerContainer: "",
+				headerTitle: "",
+				headerCloseButton: "",
+				bodyContainer: "",
+				footerContainer: "",
+				acceptButton: "",
+				cancelButton: ""
+			},
+			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: "Dialog 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)",
+					"padding-top": "20px",
+					"padding-bottom": "20px",
+					"padding-left": "20px",
+					"padding-right": "20px",
+					"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"
+				} },
+				headerTitle: { default: {
+					"font-size": "20px",
+					"font-weight": "500",
+					"line-height": "1.2",
+					color: "#333"
+				} },
+				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"
+				} },
+				footerContainer: { default: {
+					display: "flex",
+					"justify-content": "flex-end",
+					"margin-top": "8px"
+				} }
+			},
+			subTypes: {}
+		},
+		settings: {}
+	},
+	initialItems: ["container"]
+});
+//#endregion
+export { t as default };