@plitzi/sdk-elements 0.33.2 → 0.34.0

package/dist/elements/structure/List/ListItem/index.mjs

@@ -1,46 +1,6 @@
-import e from "./ListItem.mjs";
+import e from "./declaration.mjs";
+import t from "./ListItem.mjs";
 //#region src/elements/structure/List/ListItem/index.ts
-var t = Object.assign(e, {
-	type: "listItem",
-	content: {
-		attributes: {},
-		definition: {
-			label: "List Item",
-			type: "listItem",
-			description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			initialState: { visibility: !0 }
-		},
-		builder: {
-			canDelete: !0,
-			canSelect: !0,
-			canDragDrop: !0,
-			canMove: !0,
-			canTemplate: !0,
-			itemsAllowed: [],
-			itemsNotAllowed: ["listItem"]
-		},
-		market: {
-			category: "structure",
-			owner: "Plitzi",
-			verified: !0,
-			license: "MIT",
-			website: "https://plitzi.com",
-			backgroundColor: "#4422ee",
-			icon: "fa-solid fa-list"
-		},
-		defaultStyle: {
-			name: "List Item",
-			displayMode: "desktop",
-			style: { base: { default: {
-				"min-width": "50px",
-				"min-height": "50px"
-			} } }
-		},
-		settings: {}
-	}
-});
+var n = Object.assign(t, e);
 //#endregion
-export { t as default };
+export { n as default };

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

@@ -0,0 +1,90 @@
+import { ListProps } from './List';
+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 ListAttributes = AuthorableAttributes<ListProps>;
+declare const declaration: {
+    readonly type: "list";
+    readonly sourceType: "list";
+    readonly content: {
+        readonly attributes: {
+            readonly items: readonly [];
+            readonly source: "none";
+            readonly subType: "ul";
+        };
+        readonly definition: {
+            readonly label: "List";
+            readonly type: "list";
+            readonly description: string;
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
+            };
+            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-solid fa-list";
+        };
+        readonly defaultStyle: {
+            readonly name: "List";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+            readonly subTypes: {
+                readonly ul: {
+                    readonly name: "List UL";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "0px";
+                                readonly 'margin-bottom': "10px";
+                                readonly 'padding-left': "40px";
+                            };
+                        };
+                    };
+                };
+                readonly ol: {
+                    readonly name: "List OL";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "0px";
+                                readonly 'margin-bottom': "10px";
+                                readonly 'padding-left': "40px";
+                            };
+                        };
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["listItem", "listItem", "listItem"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    source?: "none" | "controlled" | undefined;
+    items?: unknown[] | undefined;
+    subType?: "ul" | "ol" | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,73 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/List/declaration.ts
+var t = e()({
+	type: "list",
+	sourceType: "list",
+	content: {
+		attributes: {
+			items: [],
+			source: "none",
+			subType: "ul"
+		},
+		definition: {
+			label: "List",
+			type: "list",
+			description: "Repeats a template (its listItem/link child) once per entry of a data array — the way to render a dynamic collection. Bind its items to a data source (e.g. an apiContainer response).",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			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-solid fa-list"
+		},
+		defaultStyle: {
+			name: "List",
+			displayMode: "desktop",
+			style: { base: { default: {} } },
+			subTypes: {
+				ul: {
+					name: "List UL",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "0px",
+						"margin-bottom": "10px",
+						"padding-left": "40px"
+					} } }
+				},
+				ol: {
+					name: "List OL",
+					displayMode: "desktop",
+					style: { base: { default: {
+						"margin-top": "0px",
+						"margin-bottom": "10px",
+						"padding-left": "40px"
+					} } }
+				}
+			}
+		},
+		settings: {}
+	},
+	initialItems: [
+		"listItem",
+		"listItem",
+		"listItem"
+	]
+});
+//#endregion
+export { t as default };

package/dist/elements/structure/List/index.d.ts

@@ -2,142 +2,141 @@ declare const List: {
     (props: import('../../../Element/hocs/withElement').WithElementProps<import('./List').ListProps<unknown>>): import("react").JSX.Element;
     displayName: string;
 } & {
-    type: string;
+    plugins: {
+        listItem: {
+            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react").JSX.Element;
+            displayName: string;
+        } & {
+            readonly type: "listItem";
+            readonly content: {
+                readonly attributes: {};
+                readonly definition: {
+                    readonly label: "List Item";
+                    readonly type: "listItem";
+                    readonly description: "The List Item element lets you add more items to existing List elements. You can then add any content you would like to them, including links, images, etc.";
+                    readonly items: readonly [];
+                    readonly bindings: {};
+                    readonly styleSelectors: {
+                        readonly base: "";
+                    };
+                    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 ["listItem"];
+                };
+                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-solid fa-list";
+                };
+                readonly defaultStyle: {
+                    readonly name: "List Item";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {};
+                        };
+                    };
+                };
+                readonly settings: {};
+            };
+        } & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+    };
+    type: "list";
+    sourceType: "list";
     content: {
-        attributes: {
-            items: never[];
-            source: string;
-            subType: string;
+        readonly attributes: {
+            readonly items: readonly [];
+            readonly source: "none";
+            readonly subType: "ul";
         };
-        definition: {
-            label: string;
-            type: string;
-            description: string;
-            items: never[];
-            bindings: {};
-            styleSelectors: {
-                base: string;
+        readonly definition: {
+            readonly label: "List";
+            readonly type: "list";
+            readonly description: string;
+            readonly items: readonly [];
+            readonly bindings: {};
+            readonly styleSelectors: {
+                readonly base: "";
             };
-            initialState: {
-                visibility: boolean;
+            readonly initialState: {
+                readonly visibility: true;
             };
         };
-        builder: {
-            canDelete: boolean;
-            canSelect: boolean;
-            canDragDrop: boolean;
-            canMove: boolean;
-            canTemplate: boolean;
-            itemsAllowed: never[];
-            itemsNotAllowed: never[];
+        readonly builder: {
+            readonly canDelete: true;
+            readonly canSelect: true;
+            readonly canDragDrop: true;
+            readonly canMove: true;
+            readonly canTemplate: true;
+            readonly itemsAllowed: readonly [];
+            readonly itemsNotAllowed: readonly [];
         };
-        market: {
-            category: string;
-            owner: string;
-            verified: boolean;
-            license: string;
-            website: string;
-            backgroundColor: string;
-            icon: string;
+        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-solid fa-list";
         };
-        defaultStyle: {
-            name: string;
-            displayMode: string;
-            style: {
-                base: {
-                    default: {};
+        readonly defaultStyle: {
+            readonly name: "List";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
                 };
             };
-            subTypes: {
-                ul: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'padding-left': string;
-                                'min-width': string;
-                                'min-height': string;
-                            };
-                        };
-                    };
-                };
-                ol: {
-                    name: string;
-                    displayMode: string;
-                    style: {
-                        base: {
-                            default: {
-                                'margin-top': string;
-                                'margin-bottom': string;
-                                'padding-left': string;
-                                'min-width': string;
-                                'min-height': string;
+            readonly subTypes: {
+                readonly ul: {
+                    readonly name: "List UL";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "0px";
+                                readonly 'margin-bottom': "10px";
+                                readonly 'padding-left': "40px";
                             };
                         };
                     };
                 };
-            };
-        };
-        settings: {};
-    };
-    initialItems: string[];
-    plugins: {
-        listItem: {
-            (props: import('../../../Element/hocs/withElement').WithElementProps<import('./ListItem/ListItem').ListItemProps>): import("react").JSX.Element;
-            displayName: string;
-        } & {
-            type: string;
-            content: {
-                attributes: {};
-                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: string[];
-                };
-                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;
+                readonly ol: {
+                    readonly name: "List OL";
+                    readonly displayMode: "desktop";
+                    readonly style: {
+                        readonly base: {
+                            readonly default: {
+                                readonly 'margin-top': "0px";
+                                readonly 'margin-bottom': "10px";
+                                readonly 'padding-left': "40px";
                             };
                         };
                     };
                 };
-                settings: {};
             };
         };
+        readonly settings: {};
     };
+    initialItems: readonly ["listItem", "listItem", "listItem"];
+    __attributes: Partial<{
+        source?: "none" | "controlled" | undefined;
+        items?: unknown[] | undefined;
+        subType?: "ul" | "ol" | undefined;
+    }>;
 };
 export default List;

package/dist/elements/structure/List/index.mjs

@@ -1,78 +1,10 @@
-import e from "./List.mjs";
-import t from "./ListItem/index.mjs";
+import e from "./declaration.mjs";
+import t from "./List.mjs";
+import n from "./ListItem/index.mjs";
 //#region src/elements/structure/List/index.ts
-var n = Object.assign(e, {
-	type: "list",
-	content: {
-		attributes: {
-			items: [],
-			source: "none",
-			subType: "ul"
-		},
-		definition: {
-			label: "List",
-			type: "list",
-			description: "A List gives you the ability to group elements or content (like links in a navigation menu, or steps in a recipe), to add helpful structure to your site.",
-			items: [],
-			bindings: {},
-			styleSelectors: { base: "" },
-			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-solid fa-list"
-		},
-		defaultStyle: {
-			name: "List",
-			displayMode: "desktop",
-			style: { base: { default: {} } },
-			subTypes: {
-				ul: {
-					name: "List UL",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "0px",
-						"margin-bottom": "10px",
-						"padding-left": "40px",
-						"min-width": "50px",
-						"min-height": "50px"
-					} } }
-				},
-				ol: {
-					name: "List OL",
-					displayMode: "desktop",
-					style: { base: { default: {
-						"margin-top": "0px",
-						"margin-bottom": "10px",
-						"padding-left": "40px",
-						"min-width": "50px",
-						"min-height": "50px"
-					} } }
-				}
-			}
-		},
-		settings: {}
-	},
-	initialItems: [
-		"listItem",
-		"listItem",
-		"listItem"
-	],
-	plugins: { listItem: t }
+var r = Object.assign(t, {
+	...e,
+	plugins: { listItem: n }
 });
 //#endregion
-export { n as default };
+export { r as default };

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

@@ -1,54 +1,55 @@
 import e from "../../../../../Element/hooks/useElement.mjs";
 import { RootElement as t } from "../../../../../Element/RootElement.mjs";
-import n from "./ListControlledItem.mjs";
-import { useCallback as r, useMemo as i } from "react";
-import a from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
-import { get as o } from "@plitzi/plitzi-ui/helpers";
-import { StoreProvider as s } from "@plitzi/nexus/react";
-import { emptyObject as c, getPathsFromObeject as l } from "@plitzi/sdk-shared/helpers/utils";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import f from "clsx";
-import p from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
-import m from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
+import n from "../../declaration.mjs";
+import r from "./ListControlledItem.mjs";
+import { useCallback as i, useMemo as a } from "react";
+import o from "@plitzi/sdk-shared/hooks/usePlitziServiceContext";
+import { get as s } from "@plitzi/plitzi-ui/helpers";
+import { StoreProvider as c } from "@plitzi/nexus/react";
+import { emptyObject as l, getPathsFromObeject as u } from "@plitzi/sdk-shared/helpers/utils";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "clsx";
+import m from "@plitzi/sdk-shared/dataSource/helpers/getSourceName";
+import h from "@plitzi/sdk-shared/dataSource/hooks/useRegisterSource";
 //#region src/elements/structure/List/modes/ListControlled/ListControlled.tsx
-var h = ({ ref: h, className: g = "", children: _, items: v = [] }) => {
-	let { id: y, idRef: b, definition: { label: x } } = e(), S = p("list", { idRef: b }), { settings: { previewMode: C } } = a(), w = i(() => Array.isArray(v) ? v : [], [v]), T = r(() => l({
-		item: o(w, "0", {}),
+var g = ({ ref: g, className: _ = "", children: v, items: y = [] }) => {
+	let { id: b, definition: { label: x } } = e(), S = m(n.sourceType, b), { settings: { previewMode: C } } = o(), w = a(() => Array.isArray(y) ? y : [], [y]), T = i(() => u({
+		item: s(w, "0", {}),
 		index: "0"
 	}).reduce((e, t) => [...e, {
 		path: t,
 		name: t
-	}], []), [w]), E = i(() => S ? { runtime: { sources: { [S]: { items: w } } } } : c, [S, w]);
-	return m({
-		id: y,
+	}], []), [w]), E = a(() => S ? { runtime: { sources: { [S]: { items: w } } } } : l, [S, w]);
+	return h({
+		id: b,
 		source: S,
-		name: x || `List - ${y}`,
+		name: x || `List - ${b}`,
 		fields: T
-	}), /* @__PURE__ */ d(t, {
-		ref: h,
-		className: f("plitzi-component__controlled-list", g, { "controlled-list--build-mode": !C }),
-		children: [/* @__PURE__ */ u(s, {
+	}), /* @__PURE__ */ f(t, {
+		ref: g,
+		className: p("plitzi-component__controlled-list", _, { "controlled-list--build-mode": !C }),
+		children: [/* @__PURE__ */ d(c, {
 			inherit: "live",
-			name: `List:${y}`,
+			name: `List:${b}`,
 			value: E,
-			children: w.map((e, t) => !_ || Array.isArray(_) && _.length === 0 ? /* @__PURE__ */ u("div", {
+			children: w.map((e, t) => !v || Array.isArray(v) && v.length === 0 ? /* @__PURE__ */ d("div", {
 				className: "plitzi-component__controlled-list-item controlled-list--empty",
-				children: /* @__PURE__ */ u("div", {
+				children: /* @__PURE__ */ d("div", {
 					className: "controlled-list-item__counter",
 					children: `List Item - ${t + 1}`
 				})
-			}, t) : /* @__PURE__ */ u(n, {
-				itemCount: t + 1,
+			}, t) : /* @__PURE__ */ d(r, {
+				index: t,
 				isTemplate: t !== 0 && !C,
 				record: e,
 				source: S,
-				children: _
+				children: v
 			}, t))
-		}), !C && w.length === 0 && /* @__PURE__ */ u("div", {
+		}), !C && w.length === 0 && /* @__PURE__ */ d("div", {
 			className: "controlled-list controlled-list--empty",
 			children: "This list does not contain any items"
 		})]
 	});
 };
 //#endregion
-export { h as default };
+export { g as default };

package/dist/elements/structure/List/modes/ListControlled/ListControlledItem.d.ts

@@ -3,9 +3,10 @@ export type ListControlledItemProps<T = unknown> = {
     children: ReactNode;
     className?: string;
     isTemplate: boolean;
-    itemCount: number;
+    /** The row's own position, from zero — what `index` publishes, and what indexes back into the bound array. */
+    index: number;
     record: T;
     source: string;
 };
-declare const ListControlledItem: ({ children, className, isTemplate, itemCount, record, source }: ListControlledItemProps) => import("react").JSX.Element;
+declare const ListControlledItem: ({ children, className, isTemplate, index, record, source }: ListControlledItemProps) => import("react").JSX.Element;
 export default ListControlledItem;