@schukai/monster 4.145.3 → 4.147.0

package/source/components/layout/tabs.mjs

@@ -35,7 +35,11 @@ import {
 	findTargetElementFromEvent,
 	fireCustomEvent,
 } from "../../dom/events.mjs";
-import { getDocument, getWindow } from "../../dom/util.mjs";
+import {
+	findElementWithSelectorUpwards,
+	getDocument,
+	getWindow,
+} from "../../dom/util.mjs";
 import { random } from "../../math/random.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
@@ -60,6 +64,7 @@ import {
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { generateComponentConfigKey } from "../host/util.mjs";
 
 export { Tabs };
 
@@ -109,6 +114,30 @@ const changeTabEventHandler = Symbol("changeTabEventHandler");
  */
 const removeTabEventHandler = Symbol("removeTabEventHandler");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragStartEventHandler = Symbol("dragStartEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragOverEventHandler = Symbol("dragOverEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dropEventHandler = Symbol("dropEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragEndEventHandler = Symbol("dragEndEventHandler");
+
 /**
  * @private
  * @type {symbol}
@@ -160,6 +189,20 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  */
 const activeReferenceSymbol = Symbol("activeReference");
 
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const draggingReferenceSymbol = Symbol("draggingReference");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const suppressOrderConfigSaveSymbol = Symbol("suppressOrderConfigSave");
+
 /**
  * @private
  * @type {symbol}
@@ -225,6 +268,11 @@ class Tabs extends CustomElement {
 	 * @property {string} features.removeBehavior Remove behavior, auto, next, previous and none
 	 * @property {boolean} features.openFirst Open the first tab when no active tab is set
 	 * @property {boolean} features.deriveLabelFromContent=true Generate labels from panel text when no `data-monster-button-label` is set
+	 * @property {Object} features.order Tab ordering features
+	 * @property {boolean} features.order.drag=true Allow tab headers to be reordered by drag and drop
+	 * @property {boolean} features.order.persist=false Persist reordered tabs through the host config manager
+	 * @property {Object} config Host configuration options
+	 * @property {string} config.instanceKey Stable config identity for persisted tab order
 	 *
 	 * Tab panels can use `data-monster-name` as stable public identity, while
 	 * DOM ids remain the internal button reference. `data-monster-tab-available`
@@ -278,6 +326,14 @@ class Tabs extends CustomElement {
 				removeBehavior: "auto",
 				openFirst: true,
 				deriveLabelFromContent: true,
+				order: {
+					drag: true,
+					persist: false,
+				},
+			},
+
+			config: {
+				instanceKey: null,
 			},
 
 			classes: {
@@ -333,11 +389,22 @@ class Tabs extends CustomElement {
 		attachTabChangeObserver.call(this);
 
 		// setup structure
-		initTabButtons.call(this).then(() => {
-			initPopperSwitch.call(this);
-			initPopper.call(this);
-			attachResizeObserver.call(this);
-		});
+		const initTabs =
+			isTabOrderPersistenceEnabled.call(this) === true
+				? initTabOrderFromHostConfig
+						.call(this)
+						.then(() => initTabButtons.call(this))
+				: initTabButtons.call(this);
+
+		initTabs
+			.then(() => {
+				initPopperSwitch.call(this);
+				initPopper.call(this);
+				attachResizeObserver.call(this);
+			})
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+			});
 	}
 
 	/**
@@ -582,6 +649,19 @@ class Tabs extends CustomElement {
 		this[popperInstanceSymbol]?.destroy();
 		this[tabListMutationObserverSymbol]?.disconnect();
 		this[resizeObserverSymbol]?.disconnect();
+		this[navElementSymbol]?.removeEventListener(
+			"dragstart",
+			this[dragStartEventHandler],
+		);
+		this[navElementSymbol]?.removeEventListener(
+			"dragover",
+			this[dragOverEventHandler],
+		);
+		this[navElementSymbol]?.removeEventListener("drop", this[dropEventHandler]);
+		this[navElementSymbol]?.removeEventListener(
+			"dragend",
+			this[dragEndEventHandler],
+		);
 		if (this[rearrangeFrameSymbol] !== undefined) {
 			getWindow().cancelAnimationFrame(this[rearrangeFrameSymbol]);
 			delete this[rearrangeFrameSymbol];
@@ -1268,6 +1348,93 @@ function initEventHandler() {
 	this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
 	this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
 
+	this[dragStartEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (!(button instanceof HTMLButtonElement) || button.disabled === true) {
+			return;
+		}
+
+		const reference = button.getAttribute(`${ATTRIBUTE_PREFIX}tab-reference`);
+		if (!reference) {
+			return;
+		}
+
+		this[draggingReferenceSymbol] = reference;
+		button.setAttribute("data-monster-dragging", "true");
+		event.dataTransfer?.setData("text/plain", reference);
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = "move";
+		}
+	};
+
+	this[dragOverEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (
+			!(button instanceof HTMLButtonElement) ||
+			button.disabled === true ||
+			!this[draggingReferenceSymbol]
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = "move";
+		}
+	};
+
+	this[dropEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (!(button instanceof HTMLButtonElement) || button.disabled === true) {
+			return;
+		}
+
+		const sourceReference = this[draggingReferenceSymbol];
+		const targetReference = button.getAttribute(
+			`${ATTRIBUTE_PREFIX}tab-reference`,
+		);
+		if (
+			!sourceReference ||
+			!targetReference ||
+			sourceReference === targetReference
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		reorderTabPanels.call(this, sourceReference, targetReference);
+		clearDraggingButton.call(this);
+		delete this[draggingReferenceSymbol];
+	};
+
+	this[dragEndEventHandler] = () => {
+		clearDraggingButton.call(this);
+		delete this[draggingReferenceSymbol];
+	};
+
+	this[navElementSymbol].addEventListener(
+		"dragstart",
+		this[dragStartEventHandler],
+	);
+	this[navElementSymbol].addEventListener(
+		"dragover",
+		this[dragOverEventHandler],
+	);
+	this[navElementSymbol].addEventListener("drop", this[dropEventHandler]);
+	this[navElementSymbol].addEventListener("dragend", this[dragEndEventHandler]);
+
 	return this;
 }
 
@@ -1436,6 +1603,7 @@ function initTabButtons() {
 			state,
 			class: classes,
 			disabled,
+			draggable: isTabDragEnabled.call(this) === true && disabled !== true,
 			title: disabled === true ? disabledReason : null,
 			"aria-label": disabled === true ? disabledReason : null,
 			remove,
@@ -1774,9 +1942,13 @@ function resolveSwitchWidth(force = false) {
 		return 0;
 	}
 
-	width = measureElementWidthInNavigation.call(this, this[switchElementSymbol], {
-		removeHiddenClass: true,
-	});
+	width = measureElementWidthInNavigation.call(
+		this,
+		this[switchElementSymbol],
+		{
+			removeHiddenClass: true,
+		},
+	);
 	this[dimensionsSymbol].setVia("data.switchWidth", width);
 	return width;
 }
@@ -1888,7 +2060,10 @@ function ensureMeasurementNav() {
  * @param {Object[]} popperButtons
  */
 function setButtonCollections(standardButtons, popperButtons) {
-	const signature = getButtonCollectionsSignature(standardButtons, popperButtons);
+	const signature = getButtonCollectionsSignature(
+		standardButtons,
+		popperButtons,
+	);
 	if (this[buttonCollectionsSignatureSymbol] === signature) {
 		return;
 	}
@@ -1937,6 +2112,7 @@ function getButtonSignature(button) {
 		state: button?.state,
 		class: button?.class,
 		disabled: button?.disabled,
+		draggable: button?.draggable,
 		title: button?.title,
 		"aria-label": button?.["aria-label"],
 		remove: button?.remove,
@@ -1968,6 +2144,218 @@ function splitButtonsByCurrentPopperReferences(buttons) {
 	return { standardButtons, popperButtons };
 }
 
+/**
+ * @private
+ * @return {boolean}
+ */
+function isTabDragEnabled() {
+	return this.getOption("features.order.drag") !== false;
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isTabOrderPersistenceEnabled() {
+	return this.getOption("features.order.persist") === true;
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function hasConfigIdentity() {
+	return (
+		(isString(this.id) && this.id.trim() !== "") ||
+		(isString(this.getOption("config.instanceKey")) &&
+			this.getOption("config.instanceKey").trim() !== "")
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTabOrderConfigKey() {
+	return generateComponentConfigKey("tabs", this?.id, "tab_order", {
+		instanceKey: this.getOption("config.instanceKey"),
+	});
+}
+
+/**
+ * @private
+ * @return {HTMLElement|null}
+ */
+function getHostElement() {
+	return findElementWithSelectorUpwards(this, "monster-host");
+}
+
+/**
+ * @private
+ * @return {string[]}
+ */
+function getCurrentTabOrder() {
+	return getAllTabPanels
+		.call(this)
+		.map((node) => getTabPublicReference(node))
+		.filter((reference) => isString(reference) && reference.trim() !== "");
+}
+
+/**
+ * @private
+ * @return {Promise}
+ */
+function initTabOrderFromHostConfig() {
+	if (isTabOrderPersistenceEnabled.call(this) !== true) {
+		return Promise.resolve();
+	}
+
+	const host = getHostElement.call(this);
+	if (!(host && hasConfigIdentity.call(this))) {
+		return Promise.resolve();
+	}
+
+	const configKey = getTabOrderConfigKey.call(this);
+	return host
+		.hasConfig(configKey)
+		.then((hasConfig) => {
+			if (hasConfig !== true) {
+				return null;
+			}
+			return host.getConfig(configKey);
+		})
+		.then((order) => {
+			if (!isArray(order)) {
+				return;
+			}
+			this[suppressOrderConfigSaveSymbol] = true;
+			applyTabOrder.call(this, order);
+			this[suppressOrderConfigSaveSymbol] = false;
+		})
+		.catch((error) => {
+			this[suppressOrderConfigSaveSymbol] = false;
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		});
+}
+
+/**
+ * @private
+ * @param {string[]} order
+ * @return {void}
+ */
+function applyTabOrder(order) {
+	const panels = getAllTabPanels.call(this);
+	const panelsByReference = new Map();
+	for (const panel of panels) {
+		panelsByReference.set(getTabReference(panel), panel);
+		const name = getTabName(panel);
+		if (name) {
+			panelsByReference.set(name, panel);
+		}
+	}
+
+	const appended = new Set();
+	for (const reference of order) {
+		const panel = panelsByReference.get(reference);
+		if (panel instanceof HTMLElement && appended.has(panel) !== true) {
+			this.appendChild(panel);
+			appended.add(panel);
+		}
+	}
+
+	for (const panel of panels) {
+		if (appended.has(panel) !== true) {
+			this.appendChild(panel);
+		}
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function saveTabOrderConfig() {
+	if (
+		isTabOrderPersistenceEnabled.call(this) !== true ||
+		this[suppressOrderConfigSaveSymbol] === true
+	) {
+		return;
+	}
+
+	const host = getHostElement.call(this);
+	if (!(host && hasConfigIdentity.call(this))) {
+		return;
+	}
+
+	try {
+		host.setConfig(
+			getTabOrderConfigKey.call(this),
+			getCurrentTabOrder.call(this),
+		);
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
+}
+
+/**
+ * @private
+ * @param {string} sourceReference
+ * @param {string} targetReference
+ * @return {void}
+ */
+function reorderTabPanels(sourceReference, targetReference) {
+	const sourcePanel = findTabPanel.call(this, sourceReference, {
+		availableOnly: true,
+	});
+	const targetPanel = findTabPanel.call(this, targetReference, {
+		availableOnly: true,
+	});
+
+	if (
+		!(sourcePanel instanceof HTMLElement) ||
+		!(targetPanel instanceof HTMLElement) ||
+		sourcePanel === targetPanel
+	) {
+		return;
+	}
+
+	const panels = getAllTabPanels.call(this);
+	const sourceIndex = panels.indexOf(sourcePanel);
+	const targetIndex = panels.indexOf(targetPanel);
+
+	if (sourceIndex < targetIndex) {
+		targetPanel.after(sourcePanel);
+	} else {
+		targetPanel.before(sourcePanel);
+	}
+
+	this[dimensionsSymbol].setVia("data.calculated", false);
+	initTabButtons
+		.call(this)
+		.then(() => {
+			saveTabOrderConfig.call(this);
+			fireCustomEvent(this, "monster-tab-order-changed", {
+				order: getCurrentTabOrder.call(this),
+				source: getTabEventDetail(sourcePanel),
+				target: getTabEventDetail(targetPanel),
+			});
+		})
+		.catch((error) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		});
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearDraggingButton() {
+	const buttons = this.shadowRoot.querySelectorAll("[data-monster-dragging]");
+	for (const button of buttons) {
+		button.removeAttribute("data-monster-dragging");
+	}
+}
+
 /**
  * @private
  * @return {Object}
@@ -2288,6 +2676,7 @@ function getTemplate() {
                     data-monster-attributes="
                     class path:classes.button,
                     data-monster-state path:buttons.state,
+                    draggable path:buttons.draggable | if:true,
                     disabled path:buttons.disabled | if:true,
                     title path:buttons.title,
                     aria-label path:buttons.aria-label,

package/source/components/navigation/style/table-of-content.pcss

@@ -25,16 +25,26 @@
     }
 
     box-sizing: border-box;
-    position: absolute;
-    top: 0;
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
     display: block;
     cursor: pointer; 
     width: 20px; 
+    z-index: var(--monster-z-index-fixed);
     
     transition: top 0.2s ease, right 0.3s ease, bottom 0.3s ease, left 0.3s ease, visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
 
+    &.follow-scroll {
+        position: absolute;
+        top: 0;
+        transform: none;
+    }
+
     & [data-monster-role="navigation-list"] {
         box-sizing: border-box;
+        max-height: calc(100vh - (var(--monster-space-6) * 2));
+        max-width: min(32rem, calc(100vw - (var(--monster-space-6) * 2)));
         overflow-y: auto;
         overscroll-behavior: contain;
         scrollbar-width: thin;