@plitzi/sdk-elements 0.30.19

package/dist/elements/basic/Link/Settings.mjs

@@ -0,0 +1,129 @@
+import { use as e, useCallback as t, useEffect as n, useMemo as r } from "react";
+import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as a, pick as o } from "@plitzi/plitzi-ui/helpers";
+import { createStoreHook as s } from "@plitzi/sdk-store/createStore";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { getPageFullPath as u } from "@plitzi/sdk-navigation/NavigationHelper";
+import d from "@plitzi/plitzi-ui/Input";
+import f from "@plitzi/plitzi-ui/Select";
+//#region src/elements/basic/Link/Settings.tsx
+var p = ({ mode: p = "page", href: m = "#", target: h = "self", onUpdate: g }) => {
+	let { contexts: { NetworkContext: _ } } = i(), { useStore: v } = s(), [[y, b, x]] = v([
+		"schema.flat",
+		"schema.pages",
+		"schema.pageFolders"
+	]), { server: S } = e(_), C = r(() => a(S, "domain", "https://subdomain.plitzi.app"), [S]), w = r(() => {
+		let e = o(y, b);
+		return Object.keys(e).reduce((t, n) => {
+			let r = e[n], i = a(r, "attributes.name", n), o = a(r, "attributes.default", !1);
+			return [...t, {
+				key: n,
+				label: i,
+				defaultPage: o
+			}];
+		}, []);
+	}, [y, b]), T = t((e) => (t) => g?.(e, t), [g]), E = t((e) => g?.("href", e), [g]), D = t((e) => {
+		if (g?.("mode", e), e !== "page") {
+			g?.("href", "#");
+			return;
+		}
+		let t = w.find((e) => e.defaultPage);
+		t && g?.("href", t.key);
+	}, [g, w]);
+	n(() => {
+		if (p === "page" && m === "#") {
+			let e = w.find((e) => e.defaultPage);
+			e && g?.("href", e.key);
+		}
+	}, [
+		p,
+		m,
+		w,
+		g
+	]);
+	let O = r(() => p === "page" ? `${C}${u(y, x, m, !0)}` : m.replaceAll(/[/]+/gim, "/"), [
+		p,
+		y,
+		x,
+		m,
+		C
+	]);
+	return /* @__PURE__ */ l("div", {
+		className: "flex h-full flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ l(f, {
+				value: h,
+				label: "Target",
+				onChange: T("target"),
+				size: "sm",
+				children: [
+					/* @__PURE__ */ c("option", {
+						value: "blank",
+						children: "Blank"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "self",
+						children: "Self"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "parent",
+						children: "Parent"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "top",
+						children: "Top"
+					})
+				]
+			}),
+			/* @__PURE__ */ l(f, {
+				value: p,
+				label: "Mode",
+				onChange: D,
+				size: "sm",
+				children: [
+					/* @__PURE__ */ c("option", {
+						value: "page",
+						children: "Space Page"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "internal",
+						children: "Inside Space"
+					}),
+					/* @__PURE__ */ c("option", {
+						value: "external",
+						children: "Outside Space"
+					})
+				]
+			}),
+			p !== "page" && /* @__PURE__ */ c(d, {
+				value: m,
+				label: "Url",
+				onChange: E,
+				size: "sm"
+			}),
+			p === "page" && /* @__PURE__ */ l("div", {
+				className: "flex flex-col",
+				children: [/* @__PURE__ */ l(f, {
+					value: m,
+					label: "Url",
+					onChange: E,
+					className: { inputContainer: "rounded-t" },
+					size: "sm",
+					children: [/* @__PURE__ */ c("option", {
+						value: "",
+						disabled: !0,
+						children: "Select a page"
+					}), w.map((e) => /* @__PURE__ */ c("option", {
+						value: e.key,
+						children: e.label
+					}, e.key))]
+				}), /* @__PURE__ */ c("div", {
+					className: "truncate rounded-b border-r border-b border-l border-gray-200 p-1 text-xs",
+					children: O
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { p as default };

package/dist/elements/basic/Link/index.d.ts

@@ -0,0 +1,61 @@
+declare const Link: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Link').LinkProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            href: string;
+            target: string;
+            mode: string;
+            linkContext: undefined;
+        };
+        definition: {
+            label: string;
+            type: string;
+            items: never[];
+            bindings: {};
+            styleSelectors: {
+                base: string;
+            };
+            initialState: {
+                visibility: boolean;
+            };
+        };
+        builder: {
+            canDelete: boolean;
+            canSelect: boolean;
+            canDragDrop: boolean;
+            canMove: boolean;
+            canTemplate: boolean;
+            itemsAllowed: never[];
+            itemsNotAllowed: string[];
+        };
+        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;
+                        'min-height': string;
+                        'min-width': string;
+                        color: string;
+                        cursor: string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Link;

package/dist/elements/basic/Link/index.mjs

@@ -0,0 +1,53 @@
+import e from "./Link.mjs";
+//#region src/elements/basic/Link/index.ts
+var t = Object.assign(e, {
+	type: "link",
+	content: {
+		attributes: {
+			href: "#",
+			target: "self",
+			mode: "page",
+			linkContext: void 0
+		},
+		definition: {
+			label: "Link",
+			type: "link",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: ["link"]
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-link"
+		},
+		defaultStyle: {
+			name: "Link",
+			displayMode: "desktop",
+			style: { base: { default: {
+				display: "inline-block",
+				"min-height": "30px",
+				"min-width": "30px",
+				color: "#333",
+				cursor: "pointer"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Markdown/Markdown.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export type MarkdownProps = {
+    ref: RefObject<HTMLElement>;
+    className: string;
+    content: string;
+};
+declare const Markdown: ({ ref, content, className }: MarkdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<MarkdownProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Markdown };

package/dist/elements/basic/Markdown/Markdown.mjs

@@ -0,0 +1,16 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import n from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as r } from "react/jsx-runtime";
+import i from "clsx";
+import a from "@plitzi/plitzi-ui/Markdown";
+var o = t(({ ref: t, content: o = "Markdown", className: s = "" }) => {
+	let { settings: { previewMode: c } } = n();
+	return /* @__PURE__ */ r(e, {
+		ref: t,
+		className: i("plitzi-component__markdown", { "plitzi-component__markdown--edit-mode": !c }, s),
+		children: /* @__PURE__ */ r(a, { children: o })
+	});
+});
+//#endregion
+export { o as default };

package/dist/elements/basic/Markdown/Settings.d.ts

@@ -0,0 +1,6 @@
+type SettingsProps = {
+    content?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Markdown/Settings.mjs

@@ -0,0 +1,15 @@
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/TextArea";
+//#region src/elements/basic/Markdown/Settings.tsx
+var r = ({ content: r = "Markdown", onUpdate: i }) => /* @__PURE__ */ t("div", {
+	className: "flex h-full flex-col gap-4 py-2",
+	children: /* @__PURE__ */ t(n, {
+		value: r,
+		label: "Content",
+		className: "h-full",
+		onChange: e((e) => i?.("content", e), [i])
+	})
+});
+//#endregion
+export { r as default };

package/dist/elements/basic/Markdown/index.d.ts

@@ -0,0 +1,54 @@
+declare const Markdown: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Markdown').MarkdownProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            content: string;
+        };
+        definition: {
+            label: string;
+            type: 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: {
+                        'font-size': string;
+                        'line-height': string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Markdown;

package/dist/elements/basic/Markdown/index.mjs

@@ -0,0 +1,44 @@
+import e from "./Markdown.mjs";
+//#region src/elements/basic/Markdown/index.ts
+var t = Object.assign(e, {
+	type: "markdown",
+	content: {
+		attributes: { content: "Markdown" },
+		definition: {
+			label: "Markdown",
+			type: "markdown",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-brands fa-markdown"
+		},
+		defaultStyle: {
+			name: "Markdown",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"font-size": "14px",
+				"line-height": "24px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Paragraph/Paragraph.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export type ParagraphProps = {
+    ref?: RefObject<HTMLElement>;
+    content?: string | number;
+    className?: string;
+};
+declare const Paragraph: ({ ref, content, className }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<ParagraphProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Paragraph };

package/dist/elements/basic/Paragraph/Paragraph.mjs

@@ -0,0 +1,24 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useCallback as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
+import l from "@plitzi/sdk-shared/elements/hooks/useElement";
+import u from "@plitzi/plitzi-ui/ContentEditable";
+var d = t(({ ref: t, content: d = "Paragraph", className: f = "" }) => {
+	let { id: p } = l(), { settings: { previewMode: m }, contexts: { BuilderContext: h } } = a(), g = h ? n(h) : void 0, _ = i(() => typeof d != "string" && typeof d != "number" ? JSON.stringify(d) : !d && d !== "" && !m ? "Paragraph" : typeof d == "number" ? `${d}` : d, [d, m]), v = r((e) => g?.updateElement(p, "content", e), [g, p]);
+	return /* @__PURE__ */ s(e, {
+		ref: t,
+		tag: m ? "p" : "div",
+		className: c("plitzi-component__paragraph", f),
+		children: [m && _, !m && /* @__PURE__ */ o(u, {
+			className: "",
+			value: _,
+			onChange: v,
+			openMode: "doubleClick"
+		})]
+	});
+});
+//#endregion
+export { d as default };

package/dist/elements/basic/Paragraph/Settings.d.ts

@@ -0,0 +1,6 @@
+type SettingsProps = {
+    content?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Paragraph/Settings.mjs

@@ -0,0 +1,17 @@
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/TextArea";
+//#region src/elements/basic/Paragraph/Settings.tsx
+var r = ({ content: r = "Paragraph", onUpdate: i }) => /* @__PURE__ */ t("div", {
+	className: "flex h-full flex-col gap-4 py-2",
+	children: /* @__PURE__ */ t(n, {
+		value: r,
+		label: "Content",
+		className: "h-full",
+		rows: 4,
+		onChange: e((e) => i?.("content", e), [i]),
+		size: "xs"
+	})
+});
+//#endregion
+export { r as default };

package/dist/elements/basic/Paragraph/index.d.ts

@@ -0,0 +1,54 @@
+declare const Paragraph: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Paragraph').ParagraphProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            content: string;
+        };
+        definition: {
+            label: string;
+            type: 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: {
+                        'margin-top': string;
+                        'margin-bottom': string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Paragraph;

package/dist/elements/basic/Paragraph/index.mjs

@@ -0,0 +1,44 @@
+import e from "./Paragraph.mjs";
+//#region src/elements/basic/Paragraph/index.ts
+var t = Object.assign(e, {
+	type: "paragraph",
+	content: {
+		attributes: { content: "Paragraph" },
+		definition: {
+			label: "Paragraph",
+			type: "paragraph",
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canTemplate: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "basic",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-paragraph"
+		},
+		defaultStyle: {
+			name: "Paragraph",
+			displayMode: "desktop",
+			style: { base: { default: {
+				"margin-top": "14px",
+				"margin-bottom": "14px"
+			} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/basic/Text/Settings.d.ts

@@ -0,0 +1,6 @@
+type SettingsProps = {
+    content?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ content, onUpdate }: SettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default Settings;

package/dist/elements/basic/Text/Settings.mjs

@@ -0,0 +1,16 @@
+import { useCallback as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import n from "@plitzi/plitzi-ui/TextArea";
+//#region src/elements/basic/Text/Settings.tsx
+var r = ({ content: r = "Text", onUpdate: i }) => /* @__PURE__ */ t("div", {
+	className: "flex h-full flex-col gap-4 py-2",
+	children: /* @__PURE__ */ t(n, {
+		value: r,
+		label: "Content",
+		className: "h-full",
+		size: "xs",
+		onChange: e((e) => i?.("content", e), [i])
+	})
+});
+//#endregion
+export { r as default };

package/dist/elements/basic/Text/Text.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+export type TextProps = {
+    ref?: RefObject<HTMLElement>;
+    className?: string;
+    content?: string | number;
+};
+declare const Text: ({ ref, content, className }: TextProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<TextProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;
+export { Text };

package/dist/elements/basic/Text/Text.mjs

@@ -0,0 +1,23 @@
+import e from "../../../Element/RootElement.mjs";
+import t from "../../../Element/hocs/withElement.mjs";
+import { use as n, useCallback as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "clsx";
+import l from "@plitzi/sdk-shared/elements/hooks/useElement";
+import u from "@plitzi/plitzi-ui/ContentEditable";
+var d = t(({ ref: t, content: d = "Text", className: f = "" }) => {
+	let { id: p } = l(), { settings: { previewMode: m }, contexts: { BuilderContext: h } } = a(), g = h ? n(h) : void 0, _ = i(() => typeof d != "string" && typeof d != "number" ? JSON.stringify(d) : !d && d !== "" && !m ? "Text" : typeof d == "number" ? `${d}` : d, [d, m]), v = r((e) => g?.updateElement(p, "content", e), [g, p]);
+	return /* @__PURE__ */ s(e, {
+		ref: t,
+		className: c("plitzi-component__text", f),
+		children: [m && _, !m && /* @__PURE__ */ o(u, {
+			className: "focus-visible:outline-hidden",
+			value: _,
+			onChange: v,
+			openMode: "doubleClick"
+		})]
+	});
+});
+//#endregion
+export { d as default };

package/dist/elements/basic/Text/index.d.ts

@@ -0,0 +1,55 @@
+declare const Text: {
+    (props: import('../../../Element/hocs/withElement').WithElementProps<import('./Text').TextProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    type: string;
+    content: {
+        attributes: {
+            content: string;
+        };
+        definition: {
+            label: string;
+            type: 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: {
+                        'font-size': string;
+                        'line-height': string;
+                        display: string;
+                    };
+                };
+            };
+        };
+        settings: {};
+    };
+};
+export default Text;