@plitzi/sdk-elements 0.37.9 → 0.37.10

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

@@ -1,9 +1,14 @@
 type SettingsProps = {
     mode?: 'page' | 'internal' | 'external';
     href?: string;
+    hash?: string;
     target?: 'blank' | 'self' | 'parent' | 'top';
     label?: string;
+    content?: string;
+    contentPlacement?: 'before' | 'after';
+    icon?: string;
+    iconPlacement?: 'before' | 'after';
     onUpdate?: (key: string, value: string | boolean | number) => void;
 };
-declare const Settings: ({ mode, href, target, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+declare const Settings: ({ mode, href, hash, target, label, content, contentPlacement, icon, iconPlacement, onUpdate }: SettingsProps) => import('react').JSX.Element;
 export default Settings;

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

@@ -1,136 +1,169 @@
-import { use as e, useCallback as t, useEffect as n, useMemo as r } from "react";
-import i from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { useCommonStore as a } from "@plitzi/sdk-shared/store";
-import { get as o, pick as s } from "@plitzi/plitzi-ui/helpers";
-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";
+import e from "../../../components/IconField/IconField.mjs";
+import { use as t, useCallback as n, useEffect as r, useMemo as i } from "react";
+import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { useCommonStore as o } from "@plitzi/sdk-shared/store";
+import { get as s, pick as c } from "@plitzi/plitzi-ui/helpers";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { getPageFullPath as d } from "@plitzi/sdk-navigation/NavigationHelper";
+import f from "@plitzi/plitzi-ui/Input";
+import p from "@plitzi/plitzi-ui/Select";
 //#region src/elements/basic/Link/Settings.tsx
-var p = ({ mode: p = "page", href: m = "#", target: h = "self", label: g = "", onUpdate: _ }) => {
-	let { contexts: { NetworkContext: v } } = i(), [[y, b, x]] = a([
+var m = ({ mode: m = "page", href: h = "#", hash: g = "", target: _ = "self", label: v = "", content: y = "", contentPlacement: b = "after", icon: x = "", iconPlacement: S = "before", onUpdate: C }) => {
+	let { contexts: { NetworkContext: w } } = a(), [[T, E, D]] = o([
 		"schema.flat",
 		"schema.pages",
 		"schema.pageFolders"
-	]), { server: S } = e(v), C = r(() => o(S, "domain", "https://subdomain.plitzi.app"), [S]), w = r(() => {
-		let e = s(y, b);
+	]), { server: O } = t(w), k = i(() => s(O, "domain", "https://subdomain.plitzi.app"), [O]), A = i(() => {
+		let e = c(T, E);
 		return Object.keys(e).reduce((t, n) => {
-			let r = e[n], i = o(r, "attributes.name", n), a = o(r, "attributes.default", !1);
+			let r = e[n], i = s(r, "attributes.name", n), a = s(r, "attributes.default", !1);
 			return [...t, {
 				key: n,
 				label: i,
 				defaultPage: a
 			}];
 		}, []);
-	}, [y, b]), T = t((e) => (t) => _?.(e, t), [_]), E = t((e) => _?.("href", e), [_]), D = t((e) => {
-		if (_?.("mode", e), e !== "page") {
-			_?.("href", "#");
+	}, [T, E]), j = n((e) => (t) => C?.(e, t), [C]), M = n((e) => C?.("href", e), [C]), N = n((e) => {
+		if (C?.("mode", e), e !== "page") {
+			C?.("href", "#");
 			return;
 		}
-		let t = w.find((e) => e.defaultPage);
-		t && _?.("href", t.key);
-	}, [_, w]);
-	n(() => {
-		if (p === "page" && m === "#") {
-			let e = w.find((e) => e.defaultPage);
-			e && _?.("href", e.key);
+		let t = A.find((e) => e.defaultPage);
+		t && C?.("href", t.key);
+	}, [C, A]);
+	r(() => {
+		if (m === "page" && h === "#") {
+			let e = A.find((e) => e.defaultPage);
+			e && C?.("href", e.key);
 		}
 	}, [
-		p,
 		m,
-		w,
-		_
+		h,
+		A,
+		C
 	]);
-	let O = r(() => p === "page" ? `${C}${u(y, x, m, !0)}` : m.replaceAll(/[/]+/gim, "/"), [
-		p,
-		y,
-		x,
+	let P = i(() => m === "page" ? `${k}${d(T, D, h, !0)}` : h.replaceAll(/[/]+/gim, "/"), [
 		m,
-		C
+		T,
+		D,
+		h,
+		k
 	]);
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "flex h-full flex-col gap-4 py-2",
 		children: [
 			/* @__PURE__ */ l(f, {
-				value: h,
+				value: y,
+				label: "Content",
+				placeholder: "The link's words, without a text inside it",
+				onChange: j("content"),
+				size: "sm"
+			}),
+			/* @__PURE__ */ u(p, {
+				value: b,
+				label: "Content Placement",
+				onChange: j("contentPlacement"),
+				size: "sm",
+				children: [/* @__PURE__ */ l("option", {
+					value: "before",
+					children: "Before Elements"
+				}), /* @__PURE__ */ l("option", {
+					value: "after",
+					children: "After Elements"
+				})]
+			}),
+			/* @__PURE__ */ u(p, {
+				value: _,
 				label: "Target",
-				onChange: T("target"),
+				onChange: j("target"),
 				size: "sm",
 				children: [
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "blank",
 						children: "Blank"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "self",
 						children: "Self"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "parent",
 						children: "Parent"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "top",
 						children: "Top"
 					})
 				]
 			}),
-			/* @__PURE__ */ l(f, {
-				value: p,
+			/* @__PURE__ */ u(p, {
+				value: m,
 				label: "Mode",
-				onChange: D,
+				onChange: N,
 				size: "sm",
 				children: [
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "page",
 						children: "Space Page"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "internal",
 						children: "Inside Space"
 					}),
-					/* @__PURE__ */ c("option", {
+					/* @__PURE__ */ l("option", {
 						value: "external",
 						children: "Outside Space"
 					})
 				]
 			}),
-			p !== "page" && /* @__PURE__ */ c(d, {
-				value: m,
+			m !== "page" && /* @__PURE__ */ l(f, {
+				value: h,
 				label: "Url",
-				onChange: E,
+				onChange: M,
 				size: "sm"
 			}),
-			p === "page" && /* @__PURE__ */ l("div", {
+			m === "page" && /* @__PURE__ */ u("div", {
 				className: "flex flex-col",
-				children: [/* @__PURE__ */ l(f, {
-					value: m,
+				children: [/* @__PURE__ */ u(p, {
+					value: h,
 					label: "Url",
-					onChange: E,
+					onChange: M,
 					className: { inputContainer: "rounded-t" },
 					size: "sm",
-					children: [/* @__PURE__ */ c("option", {
+					children: [/* @__PURE__ */ l("option", {
 						value: "",
 						disabled: !0,
 						children: "Select a page"
-					}), w.map((e) => /* @__PURE__ */ c("option", {
+					}), A.map((e) => /* @__PURE__ */ l("option", {
 						value: e.key,
 						children: e.label
 					}, e.key))]
-				}), /* @__PURE__ */ c("div", {
+				}), /* @__PURE__ */ l("div", {
 					className: "truncate rounded-b border-r border-b border-l border-gray-200 p-1 text-xs",
-					children: O
+					children: P
 				})]
 			}),
-			/* @__PURE__ */ c(d, {
+			m !== "external" && /* @__PURE__ */ l(f, {
 				value: g,
+				label: "Section",
+				placeholder: "An element's anchor, without the #",
+				onChange: j("hash"),
+				size: "sm"
+			}),
+			/* @__PURE__ */ l(f, {
+				value: v,
 				label: "Accessible Name",
 				placeholder: "For a link that wraps a whole card",
-				onChange: T("label"),
+				onChange: j("label"),
 				size: "sm"
+			}),
+			/* @__PURE__ */ l(e, {
+				icon: x,
+				iconPlacement: S,
+				onUpdate: C
 			})
 		]
 	});
 };
 //#endregion
-export { p as default };
+export { m as default };

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

@@ -7,13 +7,20 @@ declare const declaration: {
     readonly attributeValues: {
         readonly mode: readonly string[];
         readonly target: readonly string[];
+        readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly href: "#";
             readonly target: "self";
             readonly mode: "page";
+            readonly hash: "";
             readonly label: "";
+            readonly content: "";
+            readonly contentPlacement: "after";
+            readonly icon: "";
+            readonly iconPlacement: "before";
         };
         readonly definition: {
             readonly label: "Link";
@@ -23,6 +30,7 @@ declare const declaration: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -33,7 +41,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["link"];
         };
@@ -66,5 +74,10 @@ declare const declaration: {
     href?: string | undefined;
     label?: string | undefined;
     target?: "self" | "blank" | "parent" | "top" | undefined;
+    content?: string | undefined;
+    icon?: string | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
+    contentPlacement?: "before" | "after" | undefined;
+    hash?: string | undefined;
 }>>;
 export default declaration;

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

@@ -13,22 +13,32 @@ var n = e()({
 			"blank",
 			"parent",
 			"top"
-		])
+		]),
+		contentPlacement: t()(["before", "after"]),
+		iconPlacement: t()(["before", "after"])
 	},
 	content: {
 		attributes: {
 			href: "#",
 			target: "self",
 			mode: "page",
-			label: ""
+			hash: "",
+			label: "",
+			content: "",
+			contentPlacement: "after",
+			icon: "",
+			iconPlacement: "before"
 		},
 		definition: {
 			label: "Link",
 			type: "link",
-			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction.",
+			description: "Navigation. Moves the user between pages of the site or to an external URL (its `mode`/`href` decide which). Use this to go page-to-page rather than a button + interaction. Its words are its own `content` and an icon beside them its `icon` (Font Awesome classes) — no text or fontAwesome element inside it for them.",
 			items: [],
 			bindings: {},
-			styleSelectors: { base: "" },
+			styleSelectors: {
+				base: "",
+				icon: ""
+			},
 			initialState: { visibility: !0 }
 		},
 		builder: {
@@ -36,7 +46,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: ["link"]
 		},

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

@@ -6,13 +6,20 @@ declare const Link: {
     readonly attributeValues: {
         readonly mode: readonly string[];
         readonly target: readonly string[];
+        readonly contentPlacement: readonly string[];
+        readonly iconPlacement: readonly string[];
     };
     readonly content: {
         readonly attributes: {
             readonly href: "#";
             readonly target: "self";
             readonly mode: "page";
+            readonly hash: "";
             readonly label: "";
+            readonly content: "";
+            readonly contentPlacement: "after";
+            readonly icon: "";
+            readonly iconPlacement: "before";
         };
         readonly definition: {
             readonly label: "Link";
@@ -22,6 +29,7 @@ declare const Link: {
             readonly bindings: {};
             readonly styleSelectors: {
                 readonly base: "";
+                readonly icon: "";
             };
             readonly initialState: {
                 readonly visibility: true;
@@ -32,7 +40,7 @@ declare const Link: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly ["link"];
         };
@@ -65,5 +73,10 @@ declare const Link: {
     href?: string | undefined;
     label?: string | undefined;
     target?: "self" | "blank" | "parent" | "top" | undefined;
+    content?: string | undefined;
+    icon?: string | undefined;
+    iconPlacement?: import('../../../Element/ElementWords').IconPlacement | undefined;
+    contentPlacement?: "before" | "after" | undefined;
+    hash?: string | undefined;
 }>>;
 export default Link;

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

@@ -0,0 +1,5 @@
+/**
+ * Whether a link's path is the page being shown, given the page's whole address (`navigation.href`). Paths alone: the
+ * query and the section (`#plans`) are the same page. Undefined while no address is known — nothing is current then.
+ */
+export declare const isCurrentPage: (path: string, location: string | undefined) => boolean;

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

@@ -0,0 +1,12 @@
+//#region src/elements/basic/Link/isCurrentPage.ts
+var e = (e) => e.length > 1 ? e.replace(/\/+$/, "") : e, t = (t, n) => {
+	if (!n || !t.startsWith("/")) return !1;
+	try {
+		let r = new URL(n).pathname, i = new URL(t, n).pathname;
+		return e(decodeURI(r)) === e(decodeURI(i));
+	} catch {
+		return !1;
+	}
+};
+//#endregion
+export { t as isCurrentPage };

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

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -17,7 +17,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -24,7 +24,7 @@ declare const Markdown: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -17,7 +17,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -24,7 +24,7 @@ declare const Paragraph: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/RichText/declaration.d.ts

@@ -31,7 +31,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/RichText/declaration.mjs

@@ -27,7 +27,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -30,7 +30,7 @@ declare const RichText: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -25,7 +25,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

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

@@ -17,7 +17,7 @@ var t = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -24,7 +24,7 @@ declare const Text: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/ThemeToggle/declaration.d.ts

@@ -46,7 +46,7 @@ declare const declaration: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };

package/dist/elements/basic/ThemeToggle/declaration.mjs

@@ -36,7 +36,7 @@ var n = e()({
 			canSelect: !0,
 			canDragDrop: !0,
 			canMove: !0,
-			canTemplate: !0,
+			canSnippet: !0,
 			itemsAllowed: [],
 			itemsNotAllowed: []
 		},

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

@@ -45,7 +45,7 @@ declare const ThemeToggle: {
             readonly canSelect: true;
             readonly canDragDrop: true;
             readonly canMove: true;
-            readonly canTemplate: true;
+            readonly canSnippet: true;
             readonly itemsAllowed: readonly [];
             readonly itemsNotAllowed: readonly [];
         };