z-bar-qt/Modules/Settings/Pages.qml

import QtQuick
import qs.Components
import ZShell.Config

Item {
	id: root

	property int animOff
	property Item currentItem
	property int lastPageIdx
	required property SettingsState sState

	function loadPage(idx: int): void {
		if (currentItem)
			currentItem.destroy();

		const comp = PageCompRegistry.pageComps[idx] ?? PageCompRegistry.placeholderComp;
		const incubator = comp.incubateObject(container, {
			sState
		});

		const attach = () => {
			incubator.object.anchors.fill = container;
			currentItem = incubator.object;
		};

		if (incubator.status === Component.Ready)
			attach();
		else
			incubator.onStatusChanged = status => {
				if (status === Component.Ready)
					attach();
			};
	}

	Item {
		id: container

		anchors.fill: parent
		layer.enabled: opacity < 1
		objectName: "PageContainer"

		Component.onCompleted: root.loadPage(root.sState.currentPageIdx)
	}

	Connections {
		function onCurrentPageIdxChanged(): void {
			switchAnim.complete();
			root.animOff = Tokens.padding.small * (root.sState.currentPageIdx > root.lastPageIdx ? 1 : -1);
			switchAnim.start();
			root.lastPageIdx = root.sState.currentPageIdx;
		}

		target: root.sState
	}

	SequentialAnimation {
		id: switchAnim

		Anim {
			property: "opacity"
			target: container
			to: 0
			type: Anim.DefaultEffects
		}

		ScriptAction {
			script: root.loadPage(root.sState.currentPageIdx)
		}

		PropertyAction {
			property: "topMargin"
			target: container.anchors
			value: root.animOff
		}

		PropertyAction {
			property: "bottomMargin"
			target: container.anchors
			value: -root.animOff
		}

		ParallelAnimation {
			Anim {
				from: 0
				property: "opacity"
				target: container
				to: 1
				type: Anim.SlowEffects
			}

			Anim {
				properties: "topMargin,bottomMargin"
				target: container.anchors
				to: 0
				type: Anim.SlowEffects
			}
		}
	}
}