@plitzi/sdk-elements 0.30.19

package/dist/elements/media/Video/index.d.ts

@@ -0,0 +1,60 @@
+declare const Video: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Video').VideoProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            src: string;
+            autoPlay: boolean;
+            playsInline: boolean;
+            loop: boolean;
+            muted: boolean;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        display: string;
+                        width: string;
+                        height: string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Video;

package/dist/elements/media/Video/index.mjs

@@ -0,0 +1,52 @@
+import e from "./Video.mjs";
+//#region src/elements/media/Video/index.ts
+var t = Object.assign(e, {
+	type: "video",
+	content: {
+		attributes: {
+			src: "",
+			autoPlay: !1,
+			playsInline: !1,
+			loop: !1,
+			muted: !0
+		},
+		definition: {
+			label: "Video",
+			type: "video",
+			description: "Use an URL to display a video.",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "media",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-video"
+		},
+		defaultStyle: {
+			name: "Video",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "block",
+				width: "400px",
+				height: "250px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/provider/ApiContainer/ApiContainer.d.ts

@@ -0,0 +1,22 @@
+import { RuleGroup } from '@plitzi/plitzi-ui/QueryBuilder';
+import { ReactNode, RefObject } from 'react';
+export type ApiContainerProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    children?: ReactNode;
+    query?: string;
+    method?: 'get' | 'post' | 'put' | 'delete' | 'patch';
+    accessToken?: string;
+    when?: RuleGroup;
+    headers?: Record<string, string>;
+    mockData?: Record<string, unknown> | string;
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
+    credentials?: RequestCredentials;
+};
+declare const ApiContainer: ({ ref, className, children, query, method, accessToken, when, headers, mockData, subType, credentials }: ApiContainerProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ApiContainerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { ApiContainer };

package/dist/elements/provider/ApiContainer/ApiContainer.mjs

@@ -0,0 +1,138 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "./hooks/useApi.mjs";
+import n from "../../../Element/hocs/withElement.mjs";
+import { use as r, useCallback as i, useEffect as a, useMemo as o } from "react";
+import s from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as c } from "@plitzi/plitzi-ui/helpers";
+import { processTwig as l } from "@plitzi/sdk-shared/helpers/twigWrapper";
+import { emptyObject as u, getPathsFromObeject as d } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as f } from "react/jsx-runtime";
+import p from "clsx";
+import m from "@plitzi/sdk-shared/elements/hooks/useElement";
+import { QueryBuilderEvaluator as h } from "@plitzi/plitzi-ui/QueryBuilder";
+var g = n(({ ref: n, className: g = "", children: _, query: v = "", method: y = "get", accessToken: b = "", when: x = u, headers: S = u, mockData: C = "{}", subType: w = "div", credentials: T = "same-origin" }) => {
+	let { id: E, definition: { label: D = "Api Container" } } = m(), { settings: { previewMode: O, debugMode: k }, contexts: { DataSourceContext: A, NavigationContext: j, InteractionsContext: M } } = s(), { interactionsManager: N } = r(M), { useDataSource: P } = r(A), { routeParams: F, queryParams: I } = r(j), L = o(() => {
+		if (!v) return "";
+		try {
+			let e = {
+				...I,
+				...F
+			};
+			k && [...v.matchAll(/{{([ ]+|)(?<token>[a-zA-Z0-9-_:*/]+)([ ]+|)}}/gim)].forEach(({ groups: t }) => {
+				let n = t?.token.trim();
+				(!n || !c(e, n)) && console.log(`Token ${n} is required`);
+			});
+			let t = l(v, e, !0);
+			return typeof t == "string" ? t : v;
+		} catch (e) {
+			console.error(e.message);
+		}
+		return "";
+	}, [
+		v,
+		I,
+		F,
+		k
+	]), R = o(() => b ? {
+		...S,
+		Authorization: `Bearer ${b}`
+	} : S, [S, b]), z = o(() => !!(O && L && (x === u || h(x, {
+		...F,
+		...I
+	})) || !O && (L || C && C !== "{}" && C !== u)), [
+		O,
+		L,
+		x,
+		F,
+		I,
+		C
+	]), { isLoading: B, data: V, refetch: H, isSuccess: U, isError: W } = t({
+		url: L,
+		method: y,
+		credentials: T,
+		mock: O ? void 0 : C,
+		customHeaders: R,
+		enabled: z
+	});
+	a(() => {
+		B || (U ? N.interactionTrigger(E, "onApiSuccess", {
+			url: L,
+			method: y,
+			...V
+		}) : W && N.interactionTrigger(E, "onApiError", {
+			url: L,
+			method: y,
+			...V
+		}));
+	}, [
+		V,
+		E,
+		N,
+		W,
+		B,
+		U,
+		y,
+		L
+	]);
+	let G = i(() => d(V).reduce((e, t) => {
+		let n = t.split(".");
+		return n.length > 1 ? [...e, {
+			path: t,
+			name: n.slice(n.length - 2).join(" ")
+		}] : [...e, {
+			path: t,
+			name: n[n.length - 1]
+		}];
+	}, []), [V]), [K] = P({
+		id: E,
+		source: `apiContainer_${E}`,
+		mode: "write",
+		name: D || `API - ${E}`,
+		fields: G
+	}), q = o(() => ({ performQuery: {
+		action: "performQuery",
+		title: `Perform Query ${D}`,
+		type: "callback",
+		callback: H,
+		preview: {},
+		params: {}
+	} }), [D, H]), J = o(() => ({
+		onApiError: {
+			action: "onApiError",
+			title: "On Api Error",
+			type: "trigger",
+			params: {},
+			preview: {
+				url: "",
+				method: "",
+				status: "",
+				data: ""
+			}
+		},
+		onApiSuccess: {
+			action: "onApiSuccess",
+			title: "On Api Success",
+			type: "trigger",
+			params: {},
+			preview: {
+				url: "",
+				method: "",
+				status: "",
+				data: ""
+			}
+		}
+	}), []);
+	return /* @__PURE__ */ f(e, {
+		ref: n,
+		tag: w,
+		className: p("plitzi-component__api-container", g),
+		interactionTriggers: J,
+		interactionCallbacks: q,
+		children: /* @__PURE__ */ f(K, {
+			value: V,
+			children: !B && _
+		})
+	});
+});
+//#endregion
+export { g as default };

package/dist/elements/provider/ApiContainer/Settings.d.ts

@@ -0,0 +1,14 @@
+import { RuleGroup } from '@plitzi/plitzi-ui/QueryBuilder';
+type SettingsProps = {
+    query?: string;
+    method?: 'get' | 'post';
+    accessToken?: string;
+    when?: RuleGroup;
+    headers?: object;
+    subType?: 'div' | 'header' | 'footer' | 'nav' | 'main' | 'section' | 'article' | 'aside' | 'address' | 'figure';
+    mockData?: string;
+    credentials?: RequestCredentials;
+    onUpdate?: (key: string, value: string | boolean | number | object) => void;
+};
+declare const Settings: ({ query, method, accessToken, when, headers, subType, mockData, credentials, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/provider/ApiContainer/Settings.mjs

@@ -0,0 +1,171 @@
+import { use as e, useCallback as t, useMemo as n, useState as r } from "react";
+import { get as i } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as a } from "@plitzi/sdk-store/createStore";
+import { emptyObject as o } from "@plitzi/sdk-shared/helpers/utils";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@plitzi/plitzi-ui/QueryBuilder";
+import d from "@plitzi/plitzi-ui/CodeMirror";
+import { ThemeContext as f } from "@plitzi/sdk-shared/theme/ThemeProvider";
+import p from "@plitzi/plitzi-ui/Input";
+import m from "@plitzi/plitzi-ui/Select";
+import h from "@plitzi/plitzi-ui/KVInput";
+import g from "@plitzi/plitzi-ui/Switch";
+import _ from "@plitzi/sdk-navigation/NavigationContext";
+//#region src/elements/provider/ApiContainer/Settings.tsx
+var v = ({ query: v = "", method: y = "get", accessToken: b = "", when: x, headers: S = o, subType: C = "div", mockData: w = "{}", credentials: T = "same-origin", onUpdate: E }) => {
+	let { theme: D } = e(f), { useStore: O } = a(), [k] = O("pageDefinitions"), [A, j] = r(!1), { routeParams: M, queryParams: N, currentPageId: P } = e(_), F = t((e) => (t) => E?.(e, t), [E]), I = t((e) => E?.("query", e), [E]), L = t((e) => E?.("when", e), [E]), R = t((e) => E?.("mockData", e), [E]), z = t((e) => j(e.target.checked), []), B = t((e, t) => E?.("headers", t), [E]), V = n(() => [...i(k, `${P}.attributes.slug`, "").matchAll(/:[a-z0-9_-]+/gim)].map((e) => e[0].slice(1)), [k, P]), H = n(() => [
+		...Object.keys(M),
+		...Object.keys(N),
+		...V
+	].map((e) => ({
+		type: "token",
+		value: e
+	})), [
+		M,
+		N,
+		V
+	]);
+	return /* @__PURE__ */ l("div", {
+		className: "flex grow flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ c("label", { children: "Query" }), /* @__PURE__ */ c(d, {
+					className: "font-rubik min-h-6.5 basis-auto rounded-sm border border-gray-300 px-1 text-xs",
+					value: v,
+					theme: D === "dark" ? "dark" : "light",
+					mode: "text",
+					autoComplete: H,
+					lineWrapping: !0,
+					multiline: !1,
+					onChange: I
+				})]
+			}),
+			/* @__PURE__ */ l(m, {
+				value: y,
+				label: "Method",
+				onChange: F("method"),
+				size: "xs",
+				children: [/* @__PURE__ */ c("option", {
+					value: "get",
+					children: "Get"
+				}), /* @__PURE__ */ c("option", {
+					value: "post",
+					children: "Post"
+				})]
+			}),
+			/* @__PURE__ */ c(p, {
+				value: b,
+				label: "Access Token",
+				onChange: F("accessToken"),
+				size: "xs"
+			}),
+			/* @__PURE__ */ l(m, {
+				value: T,
+				label: "Include Credentials",
+				onChange: F("credentials"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ c("option", {
+						value: "include",
+						children: "Include"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "omit",
+						children: "Omit"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "same-origin",
+						children: "Same Origin"
+					})
+				]
+			}),
+			/* @__PURE__ */ c(g, {
+				checked: A,
+				size: "sm",
+				label: "Advanced Settings",
+				onChange: z
+			}),
+			A && /* @__PURE__ */ l(s, { children: [
+				/* @__PURE__ */ c(h, {
+					value: Object.entries(S),
+					label: "Headers",
+					onChange: B,
+					size: "xs"
+				}),
+				/* @__PURE__ */ l("div", {
+					className: "flex flex-col",
+					children: [/* @__PURE__ */ c("label", { children: "When to perform query request" }), /* @__PURE__ */ c(u, {
+						direction: "vertical",
+						className: "w-full",
+						size: "xs",
+						query: x,
+						onChange: L,
+						showBranches: !0
+					})]
+				}),
+				/* @__PURE__ */ l(m, {
+					value: C,
+					label: "Container Tag",
+					onChange: F("subType"),
+					size: "xs",
+					children: [
+						/* @__PURE__ */ c("option", {
+							value: "div",
+							children: "Div"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "header",
+							children: "Header"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "footer",
+							children: "Footer"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "nav",
+							children: "Nav"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "main",
+							children: "Main"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "section",
+							children: "Section"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "article",
+							children: "Article"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "aside",
+							children: "Aside"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "address",
+							children: "Address"
+						}),
+						/* @__PURE__ */ c("option", {
+							value: "figure",
+							children: "Figure"
+						})
+					]
+				}),
+				/* @__PURE__ */ c("div", { className: "my-2 h-px w-full border border-gray-300 bg-gray-300" }),
+				/* @__PURE__ */ l("div", {
+					className: "flex min-h-50 grow flex-col",
+					children: [/* @__PURE__ */ c("label", { children: "Mock Data (Build Mode)" }), /* @__PURE__ */ c(d, {
+						value: w,
+						theme: D === "dark" ? "dark" : "light",
+						mode: "json",
+						lineWrapping: !0,
+						onChange: R
+					})]
+				})
+			] })
+		]
+	});
+};
+//#endregion
+export { v as default };

package/dist/elements/provider/ApiContainer/hooks/useApi.d.ts

@@ -0,0 +1,20 @@
+export type UseApiProps = {
+    url?: string;
+    method?: 'get' | 'post' | 'put' | 'delete' | 'patch';
+    mock?: Record<string, unknown> | string;
+    params?: Record<string, string | Blob>;
+    customHeaders?: Record<string, string>;
+    enabled?: boolean;
+    credentials?: RequestCredentials;
+};
+declare const useApi: ({ url, method, mock, params, customHeaders, enabled, credentials }: UseApiProps) => {
+    isLoading: boolean;
+    data: {
+        status: number;
+        data: unknown;
+    } | undefined;
+    refetch: () => void;
+    isSuccess: boolean | undefined;
+    isError: boolean | undefined;
+};
+export default useApi;

package/dist/elements/provider/ApiContainer/hooks/useApi.mjs

@@ -0,0 +1,94 @@
+import { useCallback as e, useEffect as t, useState as n } from "react";
+import { emptyObject as r } from "@plitzi/sdk-shared/helpers/utils";
+//#region src/elements/provider/ApiContainer/hooks/useApi.ts
+var i = async ({ url: e = "", method: t = "get", credentials: n = "same-origin", params: i = r, customHeaders: a = r, mock: o = r } = {}) => {
+	if (o && o !== "{}" && o !== r) try {
+		return typeof o == "string" ? {
+			status: 200,
+			data: JSON.parse(o)
+		} : {
+			status: 200,
+			data: o
+		};
+	} catch (e) {
+		return {
+			status: 500,
+			data: e.message
+		};
+	}
+	let s = new Headers();
+	if (s.append("Content-Type", "application/json"), Object.keys(a).length > 0 && Object.keys(a).forEach((e) => {
+		s.append(e, a[e]);
+	}), !e) return {
+		status: 400,
+		data: "URL is required"
+	};
+	Object.values(i).forEach((e) => {
+		if (e instanceof Blob && s.get("Content-Type") !== "multipart/form-data") {
+			s.set("Content-Type", "multipart/form-data");
+			return;
+		}
+	});
+	let c = new FormData();
+	Object.entries(i).forEach(([e, t]) => {
+		c.append(e, t);
+	});
+	let l = {
+		method: t,
+		credentials: n,
+		headers: s,
+		body: c
+	};
+	s.get("Content-Type") === "application/json" && (l.body = JSON.stringify(i)), t === "get" && delete l.body;
+	try {
+		let t = await fetch(e, l);
+		return {
+			status: t.status,
+			data: await t.json()
+		};
+	} catch (e) {
+		return {
+			status: 500,
+			data: e.message
+		};
+	}
+}, a = ({ url: a = "", method: o = "get", mock: s = r, params: c = r, customHeaders: l = r, enabled: u = !0, credentials: d = "same-origin" }) => {
+	let [f, p] = n(u), [m, h] = n(), g = e(() => {
+		u && (p(!0), i({
+			url: a,
+			method: o,
+			credentials: d,
+			mock: s,
+			customHeaders: l,
+			params: c
+		}).then((e) => h(e)).catch((e) => h({
+			status: 500,
+			data: e.message
+		})).finally(() => p(!1)));
+	}, [
+		u,
+		a,
+		o,
+		d,
+		s,
+		l,
+		c
+	]);
+	return t(() => {
+		g();
+	}, [
+		u,
+		c,
+		s,
+		a,
+		g
+	]), {
+		isLoading: f,
+		data: m,
+		refetch: g,
+		isSuccess: !f && m && m.status < 400,
+		isError: !f && m && m.status >= 400
+	};
+};
+//#endregion
+export { a as default };

package/dist/elements/provider/ApiContainer/index.d.ts

@@ -0,0 +1,62 @@
+declare const ApiContainer: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ApiContainer').ApiContainerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            query: string;
+            method: string;
+            accessToken: string;
+            mockData: string;
+            subType: string;
+            credentials: string;
+        };
+        definition: {
+            label: string;
+            type: string;
+            description: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: never[];
+        };
+        market: {
+            category: string;
+            owner: string;
+            verified: boolean;
+            license: string;
+            website: string;
+            backgroundColor: string;
+            icon: string;
+        };
+        defaultStyle: {
+            name: string;
+            displayMode: string;
+            style: {
+                base: {
+                    default: {
+                        'min-width': string;
+                        'min-height': string;
+                    };
+                };
+            };
+            subTypes: {};
+        };
+        settings: {};
+    };
+};
+export default ApiContainer;

package/dist/elements/provider/ApiContainer/index.mjs

@@ -0,0 +1,54 @@
+import e from "./ApiContainer.mjs";
+//#region src/elements/provider/ApiContainer/index.ts
+var t = Object.assign(e, {
+	type: "apiContainer",
+	content: {
+		attributes: {
+			query: "",
+			method: "get",
+			accessToken: "",
+			mockData: "{}",
+			subType: "div",
+			credentials: "same-origin"
+		},
+		definition: {
+			label: "Api Container",
+			type: "apiContainer",
+			description: "",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "provider",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-server"
+		},
+		defaultStyle: {
+			name: "Api Container",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"min-width": "50px",
+				"min-height": "50px"
+			} } },
+			subTypes: {}
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };