@staging-apiplus/essentials 0.0.0-stage → 0.0.1

package/dist/qp-package.json

@@ -0,0 +1,132 @@
+{
+  "id": "@staging-apiplus/essentials",
+  "version": "0.0.1",
+  "engine": "^1.0.0",
+  "framework": "svelte",
+  "capabilities": [
+    "document:component:render",
+    "document:logic:mount",
+    "editor:plugin:load"
+  ],
+  "library": {
+    "category": "Custom"
+  },
+  "modules": {
+    "components": [
+      {
+        "id": "gallery",
+        "tag": "qp-ext-qp-gallery",
+        "slots": [
+          "slide"
+        ],
+        "schema": "./dist/gallery.schema.json",
+        "runtime": "./dist/gallery.js"
+      }
+    ],
+    "logics": [
+      {
+        "id": "slider",
+        "wiring": [
+          "wrapper",
+          "pagination",
+          "prevButton",
+          "nextButton"
+        ],
+        "designTime": {
+          "mode": "active-item",
+          "activeIndexStateKey": "activeSlideIndex",
+          "items": {
+            "content": {
+              "list": "wrapper",
+              "hideInactive": true
+            },
+            "markers": {
+              "list": "pagination",
+              "template": "paginationDot",
+              "variables": [
+                "slideIndex",
+                "slideNumber"
+              ]
+            },
+            "add": {
+              "label": "Add slide",
+              "name": "Slide {n}"
+            }
+          },
+          "states": {
+            "paginationDot": {
+              "selected": {
+                "marker": "aria-current",
+                "required": true
+              }
+            }
+          },
+          "controls": {
+            "prev": {
+              "disabled": {
+                "marker": "aria-disabled"
+              }
+            },
+            "next": {
+              "disabled": {
+                "marker": "aria-disabled"
+              }
+            }
+          },
+          "chromeNavigation": {
+            "prevRole": "prev",
+            "nextRole": "next"
+          }
+        },
+        "schema": "./dist/slider.schema.json",
+        "runtime": "./dist/slider.js",
+        "editor": {
+          "runtime": "./dist/slider.editor.js"
+        }
+      },
+      {
+        "id": "tab",
+        "wiring": [
+          "tabList",
+          "panelList"
+        ],
+        "designTime": {
+          "mode": "active-item",
+          "activeIndexStateKey": "activeTabIndex",
+          "items": {
+            "label": {
+              "list": "tabList"
+            },
+            "content": {
+              "list": "panelList",
+              "hideInactive": true
+            },
+            "add": {
+              "label": "Add tab",
+              "name": "Tab {n}"
+            }
+          },
+          "states": {
+            "tab": {
+              "selected": {
+                "marker": "aria-selected",
+                "required": true
+              },
+              "hover": {}
+            },
+            "panel": {
+              "active": {
+                "automatic": true
+              }
+            }
+          }
+        },
+        "schema": "./dist/tab.schema.json",
+        "runtime": "./dist/tab.js",
+        "editor": {
+          "runtime": "./dist/tab.editor.js"
+        }
+      }
+    ]
+  }
+}

package/dist/slider/package.json

@@ -0,0 +1,7 @@
+{
+  "quickpage": {
+    "id": "slider",
+    "kind": "logic",
+    "name": "slider"
+  }
+}

package/dist/slider.editor.js

@@ -0,0 +1,39 @@
+import { n as e, t } from "./derive_logic_editor_panel-D_bgZnMq.js";
+import { n, t as r } from "./design_time-hqGakP97.js";
+//#region src/slider/editor/editor.ts
+var i = t(r, { contentRole: n.Slide }, {
+	includeSettings: !1,
+	suggestClass: "qp-slider-slide",
+	contentActions: {
+		reorder: "reorderSlide",
+		remove: "removeSlide",
+		add: "addSlide",
+		setActive: "setActiveSlide"
+	}
+}), a = e({
+	editorPanel: {
+		profile: { label: "Slider" },
+		sections: i
+	},
+	async onAction(e, t, r) {
+		let { bridge: i } = e;
+		switch (t) {
+			case "reorderSlide": {
+				let e = String(r.nodeId ?? ""), t = Number(r.offset ?? 0);
+				return i.tree.reorderChild(e, t);
+			}
+			case "removeSlide": {
+				let e = String(r.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) });
+			default: return {
+				success: !1,
+				message: `Unsupported slider editor action: ${t}`
+			};
+		}
+	}
+});
+//#endregion
+export { a as default };

package/dist/slider.js

@@ -0,0 +1,335 @@
+import { t as e } from "./sync_selected_style_roles-CZFO6BaK.js";
+import { n as t, t as n } from "./design_time-hqGakP97.js";
+//#region src/slider/runtime/dom.ts
+var r = "data-qp-logic-slider", i = "qp-slider-runtime-styles", a = "qp-slider-dot", o = `
+    [${r}] {
+        display: block;
+        position: relative;
+        overflow: hidden;
+    }
+
+    [${r}] .qp-slider-wrapper {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        width: 100%;
+        height: 100%;
+        will-change: transform;
+    }
+
+    /* Publish critical CSS hides inactive slides by class with !important. */
+    [${r}] .qp-slider-slide {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        visibility: visible !important;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+    }
+
+    [${r}] .qp-slider-prev,
+    [${r}] .qp-slider-next {
+        position: absolute;
+        top: 50%;
+        z-index: 10;
+        cursor: pointer;
+        pointer-events: auto;
+        transform: translateY(-50%);
+    }
+
+    [${r}] .qp-slider-prev {
+        left: 8px;
+    }
+
+    [${r}] .qp-slider-next {
+        right: 8px;
+    }
+
+    [${r}] .qp-slider-pagination {
+        position: absolute;
+        bottom: 12px;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        z-index: 10;
+        pointer-events: auto;
+    }
+
+    [${r}] .${a} {
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        border: none;
+        padding: 0;
+        background: rgba(0, 0, 0, 0.3);
+        cursor: pointer;
+    }
+`;
+function s() {
+	if (typeof document > "u" || document.getElementById("qp-slider-runtime-styles")) return;
+	let e = document.createElement("style");
+	e.id = i, e.textContent = o, document.head.appendChild(e);
+}
+function c(e, t) {
+	if (t instanceof HTMLElement) return t;
+	let n = e.querySelector(".qp-slider-wrapper");
+	return n instanceof HTMLElement ? n : null;
+}
+function l(e, t) {
+	t.classList.contains("qp-slider-wrapper") || t.classList.add("qp-slider-wrapper");
+	for (let e of g(t)) e.classList.contains("qp-slider-slide") || e.classList.add("qp-slider-slide");
+	for (let t of [
+		".qp-slider-prev",
+		".qp-slider-next",
+		".qp-slider-pagination"
+	]) {
+		let n = e.querySelector(t);
+		if (n instanceof HTMLElement) {
+			let e = t.slice(1);
+			n.classList.contains(e) || n.classList.add(e);
+		}
+	}
+}
+function u(e) {
+	for (let t of g(e)) t.style.setProperty("display", "flex", "important"), t.style.setProperty("align-items", "center", "important"), t.style.setProperty("justify-content", "center", "important"), t.style.setProperty("visibility", "visible", "important");
+}
+var d = [
+	"qp-slider-prev",
+	"qp-slider-next",
+	"qp-slider-pagination",
+	a
+];
+function f(e) {
+	return d.some((t) => e.classList.contains(t));
+}
+function p(e) {
+	if (f(e)) return !0;
+	let t = m(e);
+	return t.length > 0 && t.every(f);
+}
+function m(e) {
+	return Array.from(e.children).filter((e) => e instanceof HTMLElement);
+}
+function h(e, t) {
+	if (t.length === 0) return e;
+	let n = t[0]?.parentElement;
+	return n instanceof HTMLElement && n !== e && t.every((e) => e.parentElement === n) ? n : e;
+}
+function g(e) {
+	let t = m(e).filter((e) => e.classList.contains("qp-slider-slide") && !f(e));
+	if (t.length > 0) return t;
+	let n = m(e).filter((e) => !p(e));
+	if (n.length === 1) {
+		let e = m(n[0]).filter((e) => !f(e));
+		if (e.length > 1) return e;
+	}
+	if (n.length > 1) {
+		let e = n.map((e) => ({
+			el: e,
+			count: m(e).filter((e) => !f(e)).length
+		})).sort((e, t) => t.count - e.count), t = e[0], r = e[1];
+		if (t && t.count >= 2 && t.count > (r?.count ?? 0)) return m(t.el).filter((e) => !f(e));
+	}
+	return n;
+}
+function _(e) {
+	let t = e.getBoundingClientRect(), n = e.clientWidth > 0 ? e.clientWidth : t.width, r = e.clientHeight > 0 ? e.clientHeight : t.height;
+	if (typeof getComputedStyle == "function") {
+		let t = getComputedStyle(e), i = (Number.parseFloat(t.paddingLeft) || 0) + (Number.parseFloat(t.paddingRight) || 0), a = (Number.parseFloat(t.paddingTop) || 0) + (Number.parseFloat(t.paddingBottom) || 0);
+		return {
+			width: Math.max(0, n - i),
+			height: Math.max(0, r - a)
+		};
+	}
+	return {
+		width: n,
+		height: r
+	};
+}
+function v(e, t) {
+	let n = _(e);
+	if (!t || t === e) return n;
+	let r = _(t);
+	return {
+		width: n.width > 0 ? n.width : r.width,
+		height: n.height > 0 ? n.height : r.height
+	};
+}
+function y(e, t) {
+	e.style.padding = "0", e.style.gap = "0", e.style.rowGap = "0", e.style.columnGap = "0", e.style.boxSizing = "border-box";
+	let { width: n, height: r } = v(e, t);
+	e.style.display = "block", e.style.position = "relative", e.style.overflow = "hidden", n > 0 && (e.style.width = `${n}px`, e.style.maxWidth = `${n}px`), r > 0 && (e.style.height = `${r}px`);
+	let i = g(t), a = h(t, i), o = n > 0 ? Math.max(i.length, 1) * n : 0;
+	a.style.display = "flex", a.style.flexDirection = "row", a.style.flexWrap = "nowrap", a.style.flexShrink = "0", a.style.overflow = "hidden", a.style.padding = "0", a.style.gap = "0", a.style.boxSizing = "border-box", a.style.width = o > 0 ? `${o}px` : "max-content", a.style.maxWidth = "none", a.style.height = r > 0 ? `${r}px` : "100%", a !== t && (t.style.transform = "", t.style.transition = "", t.style.overflow = "hidden", t.style.position = "relative", t.style.padding = "0", t.style.gap = "0", t.style.width = "100%", t.style.maxWidth = "100%", t.style.height = r > 0 ? `${r}px` : "100%");
+	for (let e of i) e.style.display = "flex", e.style.alignItems = "center", e.style.justifyContent = "center", e.style.flex = "0 0 auto", e.style.flexShrink = "0", e.style.width = `${n}px`, e.style.minWidth = `${n}px`, e.style.maxWidth = `${n}px`, r > 0 && (e.style.height = `${r}px`), e.style.boxSizing = "border-box", e.style.overflow = "hidden";
+	return n;
+}
+function b(e, t, n, r) {
+	let i = g(t);
+	if (i.length === 0) return;
+	let a = Math.max(0, Math.min(n, i.length - 1));
+	u(t);
+	let o = y(e, t), s = h(t, i), c = a * Math.max(0, o);
+	s.style.transition = r > 0 ? `transform ${r}ms ease` : "none", s.style.transform = `translate3d(-${c}px, 0, 0)`;
+}
+function x(e, t, n) {
+	e.replaceChildren();
+	let r = [];
+	for (let i = 0; i < n; i += 1) {
+		let n = t.cloneNode(!0);
+		n.classList.add(a), n.setAttribute("aria-label", `Go to slide ${i + 1}`), n.dataset.slideIndex = String(i), e.appendChild(n), r.push(n);
+	}
+	return r;
+}
+function S(e, t) {
+	let n = Array.from(e.querySelectorAll(`.${a}`)).filter((e) => e instanceof HTMLElement);
+	if (n.length === t) return n;
+	e.replaceChildren();
+	let r = [];
+	for (let n = 0; n < t; n += 1) {
+		let t = document.createElement("button");
+		t.type = "button", t.className = a, t.setAttribute("aria-label", `Go to slide ${n + 1}`), t.dataset.slideIndex = String(n), e.appendChild(t), r.push(t);
+	}
+	return r;
+}
+//#endregion
+//#region src/slider/runtime/runtime.ts
+function C(e) {
+	return e.scopeRoot instanceof HTMLElement ? e.scopeRoot : null;
+}
+function w(e, t, n) {
+	if (e instanceof HTMLElement) return e;
+	let r = t.querySelector(n);
+	return r instanceof HTMLElement ? r : null;
+}
+function T(e) {
+	let t = C(e);
+	if (!t) return null;
+	let n = c(t, e.wiring.wrapper);
+	return n ? {
+		slider: t,
+		wrapper: n,
+		prevButton: w(e.wiring.prevButton, t, ".qp-slider-prev"),
+		nextButton: w(e.wiring.nextButton, t, ".qp-slider-next"),
+		pagination: w(e.wiring.pagination, t, ".qp-slider-pagination")
+	} : null;
+}
+function E(e, t) {
+	let n = Array.from(e.children).filter((e) => e instanceof HTMLElement);
+	if (n.length > 0 && !n.some((e) => e.classList.contains("qp-slider-dot"))) {
+		let r = n[0];
+		return x(e, r, t);
+	}
+	return S(e, t);
+}
+function D(e, t, n, r) {
+	let i = t <= 0, a = t >= n - 1;
+	for (let [t, n] of [[e.prevButton, !r && i], [e.nextButton, !r && a]]) t && (n ? t.setAttribute("aria-disabled", "true") : t.removeAttribute("aria-disabled"));
+}
+function O(r, i) {
+	e({
+		spec: n,
+		activeIndex: i,
+		roleLists: { [t.PaginationDot]: r }
+	});
+}
+function k(e, t) {
+	e && !e.classList.contains(t) && e.classList.add(t);
+}
+function A(e) {
+	k(e.prevButton, "qp-slider-prev"), k(e.nextButton, "qp-slider-next"), k(e.pagination, "qp-slider-pagination"), l(e.slider, e.wrapper);
+}
+function j(e) {
+	let t = Number(e.editorState?.[n.activeIndexStateKey] ?? 0);
+	return Number.isFinite(t) ? t : 0;
+}
+function M(e) {
+	let t = e, n = T(e);
+	if (!n) return;
+	s(), A(n), u(n.wrapper);
+	let i = j(e), a, o = [], c = null, l = (e) => Number(e.props.speed ?? 400), d = (e) => !!e.props.loop, f = (e) => !!e.props.autoplay, p = (e) => Number(e.props.autoplayDelay ?? 3e3), m = () => {
+		a &&= (clearInterval(a), void 0);
+	}, h = (e, t, n = !0) => {
+		let r = T(e);
+		if (!r) return;
+		let a = g(r.wrapper);
+		if (a.length === 0) return;
+		A(r), u(r.wrapper);
+		let s = d(e), c = t;
+		if (s) {
+			let e = a.length;
+			c = (t % e + e) % e;
+		} else c = Math.max(0, Math.min(t, a.length - 1));
+		i = c, b(r.slider, r.wrapper, i, n ? l(e) : 0), O(o, i), D(r, i, a.length, s);
+	}, _ = (e) => {
+		m(), f(e) && (a = setInterval(() => {
+			h(t, i + 1);
+		}, p(e)));
+	}, y = (e) => {
+		let t = T(e);
+		if (!t?.pagination) {
+			o = [];
+			return;
+		}
+		let n = g(t.wrapper);
+		o = E(t.pagination, n.length), O(o, i);
+	}, x = (e) => {
+		let n = T(t);
+		if (!n) return;
+		let r = e.target;
+		if (r instanceof Node) {
+			if (n.prevButton && (n.prevButton === r || n.prevButton.contains(r))) {
+				e.preventDefault(), h(t, i - 1);
+				return;
+			}
+			if (n.nextButton && (n.nextButton === r || n.nextButton.contains(r))) {
+				e.preventDefault(), h(t, i + 1);
+				return;
+			}
+			if (n.pagination) {
+				for (let [n, i] of o.entries()) if (i === r || i.contains(r)) {
+					e.preventDefault(), h(t, n);
+					return;
+				}
+			}
+		}
+	}, S = new ResizeObserver(() => {
+		h(t, i, !1);
+	}), C = (e) => {
+		let t = T(e);
+		t && (S.disconnect(), S.observe(t.slider));
+	}, w = (e) => {
+		let t = T(e);
+		t && c !== t.slider && (c?.removeEventListener("click", x), c = t.slider, c.addEventListener("click", x));
+	}, k = (e) => {
+		t = e;
+		let n = T(e);
+		n && (n.slider.setAttribute(r, ""), A(n), w(e), y(e), h(e, i, !1), _(e), C(e));
+	}, M = (e, t = 0) => {
+		let n = T(e);
+		if (!n) return;
+		let { width: r } = v(n.slider, n.wrapper);
+		if (r > 0 || t >= 30) {
+			h(e, i, !1);
+			return;
+		}
+		requestAnimationFrame(() => M(e, t + 1));
+	};
+	return w(e), k(e), M(e), {
+		update: (e) => {
+			k(e);
+		},
+		destroy: () => {
+			m(), S.disconnect(), c?.removeEventListener("click", x), c?.removeAttribute(r), c = null;
+		}
+	};
+}
+var N = { mount(e) {
+	return M(e);
+} };
+//#endregion
+export { N as default };

package/dist/slider.schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://quickpage.dev/schemas/logic/v1",
+  "type": "object",
+  "properties": {
+    "speed": {
+      "type": "number",
+      "default": 400,
+      "minimum": 0,
+      "x-qp-control": "number",
+      "x-qp-label": "Transition speed (ms)"
+    },
+    "loop": {
+      "type": "boolean",
+      "default": false,
+      "x-qp-control": "boolean",
+      "x-qp-label": "Loop slides"
+    },
+    "autoplay": {
+      "type": "boolean",
+      "default": false,
+      "x-qp-control": "boolean",
+      "x-qp-label": "Autoplay"
+    },
+    "autoplayDelay": {
+      "type": "number",
+      "default": 3000,
+      "minimum": 500,
+      "x-qp-control": "number",
+      "x-qp-label": "Autoplay delay (ms)"
+    }
+  }
+}

package/dist/slider.wiring.json

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://quickpage.dev/schemas/wiring/v1",
+  "type": "object",
+  "properties": {
+    "wrapper": {
+      "type": "string",
+      "x-qp-wire-kind": "node",
+      "x-qp-label": "Slider wrapper"
+    },
+    "pagination": {
+      "type": "string",
+      "x-qp-wire-kind": "node",
+      "x-qp-label": "Pagination"
+    },
+    "prevButton": {
+      "type": "string",
+      "x-qp-wire-kind": "node",
+      "x-qp-label": "Previous button"
+    },
+    "nextButton": {
+      "type": "string",
+      "x-qp-wire-kind": "node",
+      "x-qp-label": "Next button"
+    }
+  }
+}

package/dist/sync_selected_style_roles-CZFO6BaK.js

@@ -0,0 +1,45 @@
+//#region ../../packages/qp_code_host/src/logic/sync_selected_style_roles.ts
+function e(e, t) {
+	return t <= 0 ? 0 : Math.max(0, Math.min(e, t - 1));
+}
+function t(e) {
+	if (e.activeIndex !== void 0) return e.activeIndex;
+	let t = Number(e.editorState?.[e.spec.activeIndexStateKey] ?? 0);
+	return Number.isFinite(t) ? t : 0;
+}
+function n(e, t, n) {
+	let r = t[e];
+	if (r?.length) return r;
+	let i = n?.[e];
+	return i ? [i] : [];
+}
+function r(e, t, n) {
+	if (e instanceof HTMLElement) {
+		if (n) {
+			e.setAttribute(t, "true");
+			return;
+		}
+		e.removeAttribute(t);
+	}
+}
+function i(e) {
+	if (e.selectedStyleRoles?.length) return e.selectedStyleRoles;
+	if (!e.states) return;
+	let t = [];
+	for (let [n, r] of Object.entries(e.states)) for (let e of Object.values(r)) (e.marker === "aria-selected" || e.marker === "aria-current") && t.push({
+		role: n,
+		marker: e.marker
+	});
+	return t.length > 0 ? t : void 0;
+}
+function a(a) {
+	let o = i(a.spec);
+	if (!o?.length) return;
+	let s = t(a);
+	for (let t of o) {
+		let i = n(t.role, a.roleLists, a.roleNodes), o = e(s, i.length);
+		for (let e = 0; e < i.length; e++) r(i[e], t.marker, e === o);
+	}
+}
+//#endregion
+export { a as t };

package/dist/tab/package.json

@@ -0,0 +1,7 @@
+{
+  "quickpage": {
+    "id": "tab",
+    "kind": "logic",
+    "name": "tab"
+  }
+}

package/dist/tab.editor.js

@@ -0,0 +1,52 @@
+import { n as e, t } from "./derive_logic_editor_panel-D_bgZnMq.js";
+import { n, t as r } from "./design_time-BeEBEFSF.js";
+//#region src/tab/editor/editor.ts
+var i = t(r, {
+	labelRole: n.Tab,
+	contentRole: n.Panel,
+	labelListRole: n.TabList,
+	contentListRole: n.PanelList
+}, { includeSettings: !1 }), a = e({
+	editorPanel: {
+		profile: { label: "Tabs" },
+		sections: i
+	},
+	async onAction(e, t, r) {
+		let { bridge: i } = e;
+		switch (t) {
+			case "reorderTab": {
+				let e = String(r.nodeId ?? ""), t = Number(r.offset ?? 0), a = await i.tree.reorderChild(e, t);
+				if (!a.success) return a;
+				let o = i.host.listByRole(n.Tab).findIndex((t) => t.nodeId === e), s = i.host.listByRole(n.Panel)[o];
+				return s && await i.tree.reorderChild(s.nodeId, t), a;
+			}
+			case "removeTab": {
+				let e = String(r.nodeId ?? ""), t = i.host.listByRole(n.Tab), a = t.findIndex((t) => t.nodeId === e), o = i.host.listByRole(n.Panel)[a], s = await i.tree.removeRole(e);
+				if (!s.success) return s;
+				o && await i.tree.removeRole(o.nodeId);
+				let c = Math.max(0, Math.min(Number(i.logic.getEditorState().activeTabIndex ?? 0), Math.max(0, t.length - 2)));
+				return i.logic.setEditorState({ activeTabIndex: c });
+			}
+			case "addTab": {
+				let e = i.host.listByRole(n.Tab).length, t = await i.tree.addRole(n.Tab, { parentRole: n.TabList });
+				if (!t.success) return t;
+				let r = await i.tree.addRole(n.Panel, { parentRole: n.PanelList });
+				return r.success ? i.logic.setEditorState({ activeTabIndex: e }) : r;
+			}
+			case "setActiveTab": return i.logic.setEditorState({ activeTabIndex: Number(r.index ?? 0) });
+			case "renameTab": {
+				let e = String(r.headerNodeId ?? ""), t = String(r.label ?? "");
+				return e ? i.tree.renameRoleNode(e, t) : {
+					success: !1,
+					message: "Tab header node id is required"
+				};
+			}
+			default: return {
+				success: !1,
+				message: `Unsupported tab editor action: ${t}`
+			};
+		}
+	}
+});
+//#endregion
+export { a as default };