@staging-apiplus/essentials 0.0.1 → 0.0.3

package/dist/npm-package.json

@@ -1,9 +1,10 @@
 {
   "name": "@staging-apiplus/essentials",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "quickpage": {
     "kind": "code-package",
     "engine": "^1.0.0",
+    "manifest": "./dist/qp-package.json",
     "modules": [
       {
         "id": "gallery",

package/dist/qp-package.json

@@ -1,6 +1,6 @@
 {
   "id": "@staging-apiplus/essentials",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "engine": "^1.0.0",
   "framework": "svelte",
   "capabilities": [
@@ -38,15 +38,8 @@
           "items": {
             "content": {
               "list": "wrapper",
-              "hideInactive": true
-            },
-            "markers": {
-              "list": "pagination",
-              "template": "paginationDot",
-              "variables": [
-                "slideIndex",
-                "slideNumber"
-              ]
+              "item": "slide",
+              "shiftToActive": true
             },
             "add": {
               "label": "Add slide",
@@ -76,10 +69,14 @@
           "chromeNavigation": {
             "prevRole": "prev",
             "nextRole": "next"
+          },
+          "unboundRoleParents": {
+            "paginationDot": "pagination"
           }
         },
         "schema": "./dist/slider.schema.json",
         "runtime": "./dist/slider.js",
+        "wiringSchema": "./dist/slider.wiring.json",
         "editor": {
           "runtime": "./dist/slider.editor.js"
         }
@@ -123,6 +120,7 @@
         },
         "schema": "./dist/tab.schema.json",
         "runtime": "./dist/tab.js",
+        "wiringSchema": "./dist/tab.wiring.json",
         "editor": {
           "runtime": "./dist/tab.editor.js"
         }

package/dist/slider.editor.js

@@ -1,33 +1,496 @@
-import { n as e, t } from "./derive_logic_editor_panel-D_bgZnMq.js";
-import { n, t as r } from "./design_time-hqGakP97.js";
+import { n as e, t } from "./derive_logic_editor_panel-CpdUm43a.js";
+import { n, r, t as i } from "./design_time-CtAJMDnD.js";
+//#region ../../packages/qp_sdk/src/editor/bridge/editor_panel.ts
+var a = {
+	Setting: "setting",
+	Slide: "slide",
+	Vertical: "vertical",
+	Horizontal: "horizontal"
+}, o = 30, s = 334, c = "#0099FF26", l = "#38b6ff80", u = [
+	"#ff66c426",
+	"#ff313126",
+	"#ff751f26"
+], d = {
+	fontFamily: "system-ui",
+	fontSize: "48px",
+	fontWeight: "700",
+	color: "#000000"
+}, f = {
+	page: "95bc79e3-2ffc-4f0e-bc3b-59772d40b5dd",
+	host: "72fe81e8-1821-4e65-9d40-f3ed990c81ae",
+	wrapper: "b0b1b6f1-5f20-46f2-80c8-3f2482a18095",
+	slides: [
+		"65e9e881-6038-4aac-ac85-846defc4382f",
+		"a9c45552-e9ce-4750-93f8-ff44fe98767b",
+		"115bb039-6113-4f53-827d-28c5bad38a31"
+	],
+	pagination: "e5c43906-ca4a-4cd7-a9a0-cd90b3b562a1",
+	dot: "e0f3ebf7-ae36-4cf1-9add-c54af889fe0e",
+	nav: "3746c8c1-56d4-4b0f-8694-26dc940366b0",
+	prev: "b382ce4c-346c-41bc-8825-80f29c883348",
+	prevText: "9cb450ae-9399-4950-b19c-de0b02991ff3",
+	next: "0acdcb04-00f4-4d13-ba60-19c0e415fe57",
+	nextText: "6cc69b23-2b5f-4e34-8112-509dcf5a635e"
+}, p = f.pagination, m = f.dot, h = (e) => `${e}px`;
+function g(e, t = e) {
+	return {
+		paddingTop: h(e),
+		paddingRight: h(t),
+		paddingBottom: h(e),
+		paddingLeft: h(t)
+	};
+}
+function _(e) {
+	return {
+		borderTopLeftRadius: h(e),
+		borderTopRightRadius: h(e),
+		borderBottomRightRadius: h(e),
+		borderBottomLeftRadius: h(e)
+	};
+}
+function v(e) {
+	return { background: { bg1: { css: e } } };
+}
+function y(e, t) {
+	return [e.nodes.frame({
+		id: t.frameId,
+		parentId: f.nav,
+		indexKey: t.indexKey,
+		title: t.title,
+		props: { style: {
+			display: "flex",
+			overflow: "hidden",
+			flexDirection: "column",
+			justifyContent: "center",
+			alignItems: "center",
+			...g(10),
+			rowGap: h(10),
+			columnGap: h(10),
+			position: "relative",
+			width: "fit-content",
+			height: "fit-content",
+			aspectRatio: "1",
+			flexGrow: "0",
+			flexShrink: "0",
+			...v(c)
+		} }
+	}), e.nodes.text({
+		id: t.textId,
+		parentId: t.frameId,
+		indexKey: "a0",
+		title: `${t.title} icon`,
+		text: t.text,
+		textStyle: d,
+		props: { style: {
+			display: "flex",
+			width: "fit-content",
+			height: "fit-content",
+			flexGrow: "0",
+			flexShrink: "0"
+		} }
+	})];
+}
+function b(e) {
+	return [e.nodes.frame({
+		id: p,
+		parentId: f.host,
+		indexKey: "a1",
+		title: "Pagination",
+		props: { style: {
+			display: "flex",
+			overflow: "hidden",
+			flexDirection: "row",
+			justifyContent: "center",
+			alignItems: "center",
+			...g(10),
+			rowGap: h(10),
+			columnGap: h(10),
+			position: "relative",
+			width: h(400),
+			height: h(40),
+			flexGrow: "0",
+			flexShrink: "0",
+			borderTopWidth: h(2),
+			borderRightWidth: h(2),
+			borderBottomWidth: h(2),
+			borderLeftWidth: h(2),
+			borderColor: "#000000",
+			borderStyle: "solid",
+			..._(20)
+		} }
+	}), e.nodes.frame({
+		id: m,
+		parentId: p,
+		indexKey: "a0",
+		title: "Dot",
+		props: {
+			style: {
+				display: "flex",
+				overflow: "hidden",
+				flexDirection: "column",
+				alignItems: "start",
+				rowGap: h(10),
+				columnGap: h(10),
+				position: "relative",
+				width: h(20),
+				height: "100%",
+				flexGrow: "0",
+				flexShrink: "0",
+				..._(20),
+				...v(c)
+			},
+			interaction: { pseudoStates: { "dot-selected": {
+				state: "[aria-current=\"true\"]",
+				title: "aria-current",
+				indexKey: "a0",
+				targets: { [`node=${m}`]: { props: { style: {
+					...v(l),
+					width: h(50)
+				} } } }
+			} } }
+		}
+	})];
+}
+function x(e) {
+	return {
+		flatNodes: b(e),
+		rootNodeId: p,
+		roleNodes: {
+			[r.Pagination]: p,
+			[r.PaginationDot]: m
+		},
+		wiring: { [r.Pagination]: r.Pagination },
+		roleDefinitions: n
+	};
+}
+function S(e) {
+	let t = [
+		e.nodes.frame({
+			id: f.host,
+			parentId: f.page,
+			indexKey: "a0",
+			title: "Slider",
+			props: { style: {
+				display: "flex",
+				overflow: "hidden",
+				flexDirection: "column",
+				justifyContent: "center",
+				alignItems: "center",
+				...g(20, 50),
+				rowGap: h(20),
+				columnGap: h(10),
+				position: "relative",
+				width: "stretch",
+				height: "fit-content",
+				flexGrow: "0",
+				flexShrink: "0"
+			} }
+		}),
+		e.nodes.frame({
+			id: f.wrapper,
+			parentId: f.host,
+			indexKey: "a0",
+			title: "Slides",
+			props: { style: {
+				display: "flex",
+				overflow: "hidden",
+				flexDirection: "row",
+				alignItems: "start",
+				...g(o),
+				rowGap: h(10),
+				columnGap: h(10),
+				position: "relative",
+				width: "100%",
+				height: h(s),
+				flexGrow: "0",
+				flexShrink: "0",
+				...v(c)
+			} }
+		}),
+		...u.map((t, n) => e.nodes.frame({
+			id: f.slides[n],
+			parentId: f.wrapper,
+			indexKey: `a${n}`,
+			title: `Slide ${n + 1}`,
+			props: { style: {
+				display: "flex",
+				overflow: "hidden",
+				flexDirection: "column",
+				alignItems: "start",
+				rowGap: h(10),
+				columnGap: h(10),
+				position: "relative",
+				width: "100%",
+				height: "100%",
+				flexGrow: "0",
+				flexShrink: "0",
+				...v(t)
+			} }
+		})),
+		...b(e),
+		e.nodes.frame({
+			id: f.nav,
+			parentId: f.host,
+			indexKey: "a2",
+			title: "Navigation",
+			props: { style: {
+				display: "flex",
+				overflow: "hidden",
+				flexDirection: "row",
+				justifyContent: "center",
+				alignItems: "center",
+				...g(10),
+				rowGap: h(10),
+				columnGap: h(10),
+				position: "relative",
+				width: "fit-content",
+				height: "fit-content",
+				flexGrow: "0",
+				flexShrink: "0"
+			} }
+		}),
+		...y(e, {
+			frameId: f.prev,
+			textId: f.prevText,
+			title: "Previous",
+			text: "<",
+			indexKey: "a0"
+		}),
+		...y(e, {
+			frameId: f.next,
+			textId: f.nextText,
+			title: "Next",
+			text: ">",
+			indexKey: "a1"
+		})
+	];
+	return {
+		version: 1,
+		hostNodeId: f.host,
+		flatNodes: t,
+		roleNodes: {
+			[r.Wrapper]: f.wrapper,
+			[r.Slide]: f.slides[0],
+			[r.Pagination]: p,
+			[r.PaginationDot]: m,
+			[r.Prev]: f.prev,
+			[r.Next]: f.next
+		},
+		attach: {
+			repeatRoles: [{
+				role: r.PaginationDot,
+				sourceRole: r.Wrapper
+			}],
+			editorState: { activeSlideIndex: 0 },
+			wiring: {
+				wrapper: `@role:${r.Wrapper}`,
+				pagination: `@role:${r.Pagination}`,
+				prevButton: `@role:${r.Prev}`,
+				nextButton: `@role:${r.Next}`
+			},
+			roleDefinitions: n
+		}
+	};
+}
+//#endregion
 //#region src/slider/editor/editor.ts
-var i = t(r, { contentRole: n.Slide }, {
+var C = 3e3, w = 500, T = {
+	vertical: "vertical",
+	horizontal: "horizontal"
+}, E = t(i, { contentRole: r.Slide }, {
 	includeSettings: !1,
 	suggestClass: "qp-slider-slide",
 	contentActions: {
 		reorder: "reorderSlide",
 		remove: "removeSlide",
 		add: "addSlide",
-		setActive: "setActiveSlide"
+		setActive: "setActiveSlide",
+		duplicate: "duplicateSlide",
+		rename: "renameSlide"
 	}
-}), a = e({
+}), D = E.find((e) => e.type === "collection"), O = E.filter((e) => e.type === "logic-states");
+function k(e) {
+	return e.tree.getRoleStyle(r.Wrapper, "flexDirection") === "column" ? "rowGap" : "columnGap";
+}
+function A(e) {
+	return e.tree.hasRole(r.Wrapper);
+}
+function j(e) {
+	return e.logic.getProps().autoplay === !0;
+}
+function M(e) {
+	return e.tree.isRoleVisible(r.Pagination);
+}
+function N(e, t) {
+	return e.tree.setRoleRepeated(r.PaginationDot, {
+		sourceRole: r.Wrapper,
+		enabled: t
+	});
+}
+var P = {
+	type: "controls",
+	id: "slider-settings",
+	label: "Settings",
+	controls: [
+		{
+			id: "default-slide",
+			kind: "select",
+			label: "Default",
+			value: {
+				editorState: i.activeIndexStateKey,
+				fallback: 0
+			},
+			options: (e) => e.host.listByRole(r.Slide).map((e, t) => ({
+				value: t,
+				label: e.name
+			}))
+		},
+		{
+			id: "autoplay",
+			kind: "toggle",
+			label: "Autoplay",
+			value: {
+				prop: "autoplay",
+				fallback: !1
+			}
+		},
+		{
+			id: "autoplay-delay",
+			kind: "number",
+			label: "Speed",
+			value: {
+				prop: "autoplayDelay",
+				fallback: C
+			},
+			min: w,
+			step: 100,
+			unit: "ms",
+			isDisabled: (e) => !j(e)
+		},
+		{
+			id: "loop",
+			kind: "toggle",
+			label: "Loop",
+			value: {
+				prop: "loop",
+				fallback: !0
+			}
+		},
+		{
+			id: "space-between",
+			kind: "style-input",
+			label: "Space between",
+			role: r.Wrapper,
+			property: k,
+			cssProperty: "gap",
+			isVisible: A
+		},
+		{
+			id: "pagination",
+			kind: "toggle",
+			label: "Pagination",
+			value: {
+				read: M,
+				action: "setPagination"
+			}
+		},
+		{
+			id: "pagination-dot",
+			kind: "toggle",
+			label: "Pagination dot",
+			description: "Pagination dots automatically repeat based on the number of slides.",
+			value: {
+				read: (e) => e.tree.isRoleRepeated(r.PaginationDot),
+				action: "setPaginationDot"
+			},
+			isDisabled: (e) => !M(e) || !e.tree.hasRole(r.PaginationDot),
+			devOnly: !0
+		}
+	]
+}, F = [
+	{
+		type: "repeat-source",
+		role: r.Slide,
+		parentRole: r.Wrapper,
+		addAction: "addSlide"
+	},
+	{
+		type: "controls",
+		id: "slider-direction",
+		controls: [{
+			id: "direction",
+			kind: "segmented",
+			label: "Direction",
+			description: "Specifies the direction in which the slider moves during transition.",
+			options: [{
+				value: T.vertical,
+				label: "column (vertical)",
+				icon: a.Vertical
+			}, {
+				value: T.horizontal,
+				label: "row (horizontal)",
+				icon: a.Horizontal
+			}],
+			value: {
+				read: (e) => e.tree.getRoleStyle(r.Wrapper, "flexDirection") === "column" ? T.vertical : T.horizontal,
+				action: "setDirection"
+			},
+			isVisible: A
+		}]
+	},
+	...D ? [{
+		...D,
+		label: "Slide"
+	}] : []
+], I = e({
 	editorPanel: {
 		profile: { label: "Slider" },
-		sections: i
+		sections: [...O, P],
+		dialog: {
+			label: "Slide settings",
+			icon: a.Slide,
+			sections: F
+		}
+	},
+	insert: {
+		label: "Slider",
+		snapshot: S,
+		roleSubtrees: { [r.Pagination]: x }
+	},
+	async onWireBound(e, t) {
+		let { bridge: n } = e;
+		return t !== r.Pagination || !n.tree.hasRole(r.PaginationDot) ? { success: !0 } : N(n, !0);
 	},
-	async onAction(e, t, r) {
+	async onAction(e, t, n) {
 		let { bridge: i } = e;
 		switch (t) {
 			case "reorderSlide": {
-				let e = String(r.nodeId ?? ""), t = Number(r.offset ?? 0);
+				let e = String(n.nodeId ?? ""), t = Number(n.offset ?? 0);
 				return i.tree.reorderChild(e, t);
 			}
 			case "removeSlide": {
-				let e = String(r.nodeId ?? "");
+				let e = String(n.nodeId ?? "");
 				return i.tree.removeRole(e);
 			}
-			case "addSlide": return i.tree.addRole(n.Slide, { parentRole: n.Wrapper });
-			case "setActiveSlide": return i.logic.setEditorState({ activeSlideIndex: Number(r.index ?? 0) });
+			case "addSlide": return i.tree.addRole(r.Slide, { parentRole: r.Wrapper });
+			case "setActiveSlide": return i.logic.setEditorState({ activeSlideIndex: Number(n.index ?? 0) });
+			case "duplicateSlide": {
+				let e = String(n.nodeId ?? ""), t = i.host.listByRole(r.Slide).findIndex((t) => t.nodeId === e), a = Number(i.logic.getEditorState().activeSlideIndex ?? 0), o = await i.tree.duplicateRole(e);
+				return o.success && t >= 0 && a > t ? i.logic.setEditorState({ activeSlideIndex: a + 1 }) : o;
+			}
+			case "setDirection": return i.tree.setRoleStyle(r.Wrapper, "flexDirection", n.value === T.vertical ? "column" : "row");
+			case "setPagination": {
+				let e = n.value === !0;
+				if (i.tree.hasRole(r.Pagination)) return i.tree.setRoleVisible(r.Pagination, e);
+				if (!e) return { success: !0 };
+				let t = await i.tree.insertRoleSubtree(r.Pagination, { afterRole: r.Wrapper });
+				return t.success ? N(i, !0) : t;
+			}
+			case "setPaginationDot": return N(i, n.value === !0);
+			case "renameSlide": {
+				let e = String(n.nodeId ?? ""), t = String(n.label ?? "");
+				return i.tree.renameRoleNode(e, t);
+			}
 			default: return {
 				success: !1,
 				message: `Unsupported slider editor action: ${t}`
@@ -36,4 +499,4 @@ var i = t(r, { contentRole: n.Slide }, {
 	}
 });
 //#endregion
-export { a as default };
+export { I as default };