init project

src/store/navBarStore.ts

@@ -0,0 +1,96 @@
+export const useNavBarStore = defineStore("nav-bar", () => {
+	const route = useRoute();
+	const router = useRouter();
+
+	const height = ref(0);
+	const title = ref("");
+	const backTo = ref<string>();
+	const rightIcon = ref("");
+	const rightText = ref("");
+	const rightTextColor = ref("");
+	const rightAction = shallowRef<(() => void | Promise<void>) | undefined>();
+	const customTitleVisible = ref(false);
+	const customRightVisible = ref(false);
+
+	const isShowing = computed(() => !!router.currentRoute.value.meta.navBarVisible);
+	const canBack = computed(() => !!router.currentRoute.value.meta.navBarCanBack);
+
+	watch(
+		() => route.meta.navBarTitle,
+		(value) => {
+			title.value = typeof value === "string" ? value : "";
+		},
+		{ immediate: true }
+	);
+
+	function setHeight(value: number): void {
+		height.value = value;
+	}
+
+	function setBackTo(value?: string): void {
+		backTo.value = value;
+	}
+
+	function setRightIcon(value?: string, action?: () => void | Promise<void>): void {
+		rightIcon.value = value || "";
+		rightAction.value = action;
+		if (value) {
+			rightText.value = "";
+			rightTextColor.value = "";
+			customRightVisible.value = false;
+		}
+	}
+
+	function setRightText(value?: string, color?: string, action?: () => void | Promise<void>): void {
+		rightText.value = value || "";
+		rightTextColor.value = color || "";
+		rightAction.value = action;
+		if (value) {
+			rightIcon.value = "";
+			customRightVisible.value = false;
+		}
+	}
+
+	function setCustomTitleVisible(value: boolean): void {
+		customTitleVisible.value = value;
+	}
+
+	function setCustomRightVisible(value: boolean): void {
+		customRightVisible.value = value;
+		if (value) {
+			rightIcon.value = "";
+			rightText.value = "";
+			rightTextColor.value = "";
+			rightAction.value = undefined;
+		}
+	}
+
+	function clearRight(): void {
+		rightIcon.value = "";
+		rightText.value = "";
+		rightTextColor.value = "";
+		rightAction.value = undefined;
+		customRightVisible.value = false;
+	}
+
+	return {
+		height,
+		title,
+		backTo,
+		rightIcon,
+		rightText,
+		rightTextColor,
+		rightAction,
+		customTitleVisible,
+		customRightVisible,
+		isShowing,
+		canBack,
+		setHeight,
+		setBackTo,
+		setRightIcon,
+		setRightText,
+		setCustomTitleVisible,
+		setCustomRightVisible,
+		clearRight
+	};
+});