@plitzi/sdk-elements 0.37.8 → 0.37.10

package/dist/elements/structure/Carousel/CarouselTrack/declaration.d.ts

@@ -0,0 +1,53 @@
+import { CarouselTrackProps } from './CarouselTrack';
+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 CarouselTrackAttributes = AuthorableAttributes<CarouselTrackProps>;
+declare const declaration: {
+    readonly type: "carouselTrack";
+    readonly ancestorType: "carousel";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Carousel Track";
+            readonly type: "carouselTrack";
+            readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
+            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 canSnippet: false;
+            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-film";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel Track";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+export default declaration;

package/dist/elements/structure/Carousel/CarouselTrack/declaration.mjs

@@ -0,0 +1,44 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/Carousel/CarouselTrack/declaration.ts
+var t = e()({
+	type: "carouselTrack",
+	ancestorType: "carousel",
+	content: {
+		attributes: {},
+		definition: {
+			label: "Carousel Track",
+			type: "carouselTrack",
+			description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !1,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-film"
+		},
+		defaultStyle: {
+			name: "Carousel Track",
+			displayMode: "desktop",
+			style: { base: { default: {} } }
+		},
+		settings: {}
+	}
+});
+//#endregion
+export { t as default };

package/dist/elements/structure/Carousel/CarouselTrack/index.d.ts

@@ -0,0 +1,52 @@
+declare const CarouselTrack: {
+    (props: import('../../../../Element/hocs/withElement').WithElementProps<import('./CarouselTrack').CarouselTrackProps>): import('react').JSX.Element;
+    displayName: string;
+} & {
+    readonly type: "carouselTrack";
+    readonly ancestorType: "carousel";
+    readonly content: {
+        readonly attributes: {};
+        readonly definition: {
+            readonly label: "Carousel Track";
+            readonly type: "carouselTrack";
+            readonly description: "Where a carousel shows its slides: what is inside is one slide, rendered once per item.";
+            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 canSnippet: false;
+            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-film";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel Track";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {};
+                };
+            };
+        };
+        readonly settings: {};
+    };
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<unknown>;
+export default CarouselTrack;

package/dist/elements/structure/Carousel/CarouselTrack/index.mjs

@@ -0,0 +1,6 @@
+import e from "./CarouselTrack.mjs";
+import t from "./declaration.mjs";
+//#region src/elements/structure/Carousel/CarouselTrack/index.ts
+var n = Object.assign(e, t);
+//#endregion
+export { n as default };

package/dist/elements/structure/Carousel/Settings.d.ts

@@ -0,0 +1,14 @@
+import { CarouselMode, CarouselTransition } from './CarouselContext';
+type SettingsProps = {
+    mode?: CarouselMode;
+    autoplay?: number;
+    pauseOnHover?: boolean;
+    loop?: boolean;
+    transition?: CarouselTransition;
+    speed?: number;
+    itemKey?: string;
+    label?: string;
+    onUpdate?: (key: string, value: string | boolean | number) => void;
+};
+declare const Settings: ({ mode, autoplay, pauseOnHover, loop, transition, speed, itemKey, label, onUpdate }: SettingsProps) => import('react').JSX.Element;
+export default Settings;

package/dist/elements/structure/Carousel/Settings.mjs

@@ -0,0 +1,97 @@
+import { useCallback as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@plitzi/plitzi-ui/Checkbox";
+import i from "@plitzi/plitzi-ui/Input";
+import a from "@plitzi/plitzi-ui/Select";
+//#region src/elements/structure/Carousel/Settings.tsx
+var o = ({ mode: o = "slide", autoplay: s = 0, pauseOnHover: c = !0, loop: l = !0, transition: u = "slide", speed: d = 30, itemKey: f = "", label: p = "", onUpdate: m }) => {
+	let h = e((e) => (t) => m?.(e, t), [m]), g = e((e) => (t) => m?.(e, Math.max(0, Math.round(Number(t) || 0))), [m]), _ = e((e) => (t) => m?.(e, t.target.checked), [m]);
+	return /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-4 py-2",
+		children: [
+			/* @__PURE__ */ t(i, {
+				label: "Label",
+				size: "xs",
+				placeholder: "Featured products",
+				value: p,
+				onChange: h("label")
+			}),
+			/* @__PURE__ */ n(a, {
+				label: "Mode",
+				value: o,
+				onChange: h("mode"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "slide",
+						children: "One slide at a time"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "marquee",
+						children: "Marquee"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "scroll",
+						children: "Scrolling row"
+					})
+				]
+			}),
+			o === "slide" && /* @__PURE__ */ n(a, {
+				label: "Transition",
+				value: u,
+				onChange: h("transition"),
+				size: "xs",
+				children: [
+					/* @__PURE__ */ t("option", {
+						value: "slide",
+						children: "Slide"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "fade",
+						children: "Fade"
+					}),
+					/* @__PURE__ */ t("option", {
+						value: "none",
+						children: "None"
+					})
+				]
+			}),
+			o === "slide" && /* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Autoplay (ms, 0 for none)",
+				size: "xs",
+				value: String(s),
+				onChange: g("autoplay")
+			}),
+			o === "marquee" && /* @__PURE__ */ t(i, {
+				type: "number",
+				label: "Speed (px per second)",
+				size: "xs",
+				value: String(d),
+				onChange: g("speed")
+			}),
+			/* @__PURE__ */ t(r, {
+				checked: c,
+				onChange: _("pauseOnHover"),
+				label: "Pause on hover",
+				size: "xs"
+			}),
+			o === "slide" && /* @__PURE__ */ t(r, {
+				checked: l,
+				onChange: _("loop"),
+				label: "Loop",
+				size: "xs"
+			}),
+			/* @__PURE__ */ t(i, {
+				label: "Row key",
+				size: "xs",
+				placeholder: "id",
+				value: f,
+				title: "The field of each item that names it, so a slide stays with its item when the items change.",
+				onChange: h("itemKey")
+			})
+		]
+	});
+};
+//#endregion
+export { o as default };

package/dist/elements/structure/Carousel/carouselIndex.d.ts

@@ -0,0 +1,13 @@
+/** Which way the carousel last moved: what a slide entering animates from. */
+export type CarouselDirection = 'next' | 'previous';
+/**
+ * Where a move lands: `delta` slides on, round the ends when the carousel loops and stopped at them when it does not.
+ * An empty carousel stays at 0.
+ */
+export declare const stepIndex: (index: number, count: number, delta: number, loop: boolean) => number;
+/** A requested position, as one the carousel has: whole, and within its slides. */
+export declare const clampIndex: (index: unknown, count: number) => number;
+/** The way a jump goes: on to a later slide, back to an earlier one. */
+export declare const directionOf: (from: number, to: number) => CarouselDirection;
+/** How far one slide is from the next in a scrolling row: its width and the gap after it. */
+export declare const slideStep: (scroller: HTMLElement) => number;

package/dist/elements/structure/Carousel/carouselIndex.mjs

@@ -0,0 +1,16 @@
+//#region src/elements/structure/Carousel/carouselIndex.ts
+var e = (e, t, n, r) => {
+	if (t <= 0) return 0;
+	let i = e + n;
+	return r ? (i % t + t) % t : Math.min(t - 1, Math.max(0, i));
+}, t = (e, t) => {
+	let n = typeof e == "number" ? e : Number(e);
+	return !Number.isFinite(n) || t <= 0 ? 0 : Math.min(t - 1, Math.max(0, Math.trunc(n)));
+}, n = (e, t) => t < e ? "previous" : "next", r = (e) => {
+	let t = e.firstElementChild;
+	if (!(t instanceof HTMLElement)) return 0;
+	let n = Number.parseFloat(getComputedStyle(e).columnGap);
+	return t.offsetWidth + (Number.isFinite(n) ? n : 0);
+};
+//#endregion
+export { t as clampIndex, n as directionOf, r as slideStep, e as stepIndex };

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

@@ -0,0 +1,131 @@
+import { CarouselProps } from './Carousel';
+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 CarouselAttributes = AuthorableAttributes<CarouselProps>;
+declare const declaration: {
+    readonly type: "carousel";
+    readonly sourceType: "carousel";
+    readonly triggers: {
+        readonly onChange: {
+            readonly action: "onChange";
+            readonly title: "On Slide Change";
+            readonly type: "trigger";
+            readonly params: {};
+            readonly preview: {
+                readonly index: "0";
+                readonly item: {};
+            };
+        };
+    };
+    readonly callbacks: {
+        readonly next: {
+            readonly action: "next";
+            readonly title: "Next Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly previous: {
+            readonly action: "previous";
+            readonly title: "Previous Slide";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly goTo: {
+            readonly action: "goTo";
+            readonly title: "Go To Slide";
+            readonly type: "callback";
+            readonly params: {
+                readonly index: {
+                    readonly type: "text";
+                    readonly label: "Index (from 0)";
+                    readonly defaultValue: "0";
+                    readonly canBind: true;
+                };
+            };
+            readonly preview: {};
+        };
+        readonly play: {
+            readonly action: "play";
+            readonly title: "Play";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+        readonly pause: {
+            readonly action: "pause";
+            readonly title: "Pause";
+            readonly type: "callback";
+            readonly params: {};
+            readonly preview: {};
+        };
+    };
+    readonly content: {
+        readonly attributes: {
+            readonly items: readonly [];
+            readonly mode: "slide";
+            readonly autoplay: 0;
+            readonly pauseOnHover: true;
+            readonly loop: true;
+            readonly transition: "slide";
+            readonly speed: 30;
+            readonly label: "";
+        };
+        readonly definition: {
+            readonly label: "Carousel";
+            readonly type: "carousel";
+            readonly description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.";
+            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 canSnippet: 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-images";
+        };
+        readonly defaultStyle: {
+            readonly name: "Carousel";
+            readonly displayMode: "desktop";
+            readonly style: {
+                readonly base: {
+                    readonly default: {
+                        readonly position: "relative";
+                    };
+                };
+            };
+        };
+        readonly settings: {};
+    };
+    readonly initialItems: readonly ["carouselTrack"];
+} & import('@plitzi/sdk-shared/authoring/declare').ElementAttributesBrand<Partial<{
+    mode?: import('./CarouselContext').CarouselMode | undefined;
+    label?: string | undefined;
+    items?: unknown[] | undefined;
+    speed?: number | undefined;
+    loop?: boolean | undefined;
+    autoplay?: number | undefined;
+    pauseOnHover?: boolean | undefined;
+    transition?: import('./CarouselContext').CarouselTransition | undefined;
+    itemKey?: string | undefined;
+}>>;
+export default declaration;

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

@@ -0,0 +1,106 @@
+import { elementDeclaration as e } from "@plitzi/sdk-shared/authoring/declare";
+//#region src/elements/structure/Carousel/declaration.ts
+var t = e()({
+	type: "carousel",
+	sourceType: "carousel",
+	triggers: { onChange: {
+		action: "onChange",
+		title: "On Slide Change",
+		type: "trigger",
+		params: {},
+		preview: {
+			index: "0",
+			item: {}
+		}
+	} },
+	callbacks: {
+		next: {
+			action: "next",
+			title: "Next Slide",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		previous: {
+			action: "previous",
+			title: "Previous Slide",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		goTo: {
+			action: "goTo",
+			title: "Go To Slide",
+			type: "callback",
+			params: { index: {
+				type: "text",
+				label: "Index (from 0)",
+				defaultValue: "0",
+				canBind: !0
+			} },
+			preview: {}
+		},
+		play: {
+			action: "play",
+			title: "Play",
+			type: "callback",
+			params: {},
+			preview: {}
+		},
+		pause: {
+			action: "pause",
+			title: "Pause",
+			type: "callback",
+			params: {},
+			preview: {}
+		}
+	},
+	content: {
+		attributes: {
+			items: [],
+			mode: "slide",
+			autoplay: 0,
+			pauseOnHover: !0,
+			loop: !0,
+			transition: "slide",
+			speed: 30,
+			label: ""
+		},
+		definition: {
+			label: "Carousel",
+			type: "carousel",
+			description: "Items shown one at a time, scrolled past as a marquee, or swiped as a row — with controls of its own inside.",
+			items: [],
+			bindings: {},
+			styleSelectors: { base: "" },
+			initialState: { visibility: !0 }
+		},
+		builder: {
+			canDelete: !0,
+			canSelect: !0,
+			canDragDrop: !0,
+			canMove: !0,
+			canSnippet: !0,
+			itemsAllowed: [],
+			itemsNotAllowed: []
+		},
+		market: {
+			category: "structure",
+			owner: "Plitzi",
+			verified: !0,
+			license: "MIT",
+			website: "https://plitzi.com",
+			backgroundColor: "#4422ee",
+			icon: "fa-solid fa-images"
+		},
+		defaultStyle: {
+			name: "Carousel",
+			displayMode: "desktop",
+			style: { base: { default: { position: "relative" } } }
+		},
+		settings: {}
+	},
+	initialItems: ["carouselTrack"]
+});
+//#endregion
+export { t as default };