@tanstack/vue-router/dist/esm/Matches.js

Modern and scalable routing for Vue applications

import { CatchBoundary } from "./CatchBoundary.js";
import { useRouter } from "./useRouter.js";
import { matchContext } from "./matchContext.js";
import { Match } from "./Match.js";
import { useTransitionerSetup } from "./Transitioner.js";
import * as Vue from "vue";
import { isServer } from "@tanstack/router-core/isServer";
import { useStore } from "@tanstack/vue-store";
//#region src/Matches.tsx
var MatchesContent = Vue.defineComponent({
	name: "MatchesContent",
	setup() {
		useTransitionerSetup();
		return () => Vue.h(MatchesInner);
	}
});
var Matches = Vue.defineComponent({
	name: "Matches",
	setup() {
		const router = useRouter();
		return () => {
			const pendingElement = router?.options?.defaultPendingComponent ? Vue.h(router.options.defaultPendingComponent) : null;
			const inner = (isServer ?? router?.isServer ?? false) || typeof document !== "undefined" && router?.ssr ? Vue.h(MatchesContent) : Vue.h(Vue.Suspense, { fallback: pendingElement }, { default: () => Vue.h(MatchesContent) });
			return router?.options?.InnerWrap ? Vue.h(router.options.InnerWrap, null, { default: () => inner }) : inner;
		};
	}
});
var errorComponentFn = (props) => {
	return Vue.h("div", { class: "error" }, [
		Vue.h("h1", null, "Error"),
		Vue.h("p", null, props.error.message || String(props.error)),
		Vue.h("button", { onClick: props.reset }, "Try Again")
	]);
};
var MatchesInner = Vue.defineComponent({
	name: "MatchesInner",
	setup() {
		const router = useRouter();
		const matchId = useStore(router.stores.firstId, (id) => id);
		const resetKey = useStore(router.stores.loadedAt, (loadedAt) => loadedAt);
		const matchIdRef = Vue.computed(() => matchId.value);
		Vue.provide(matchContext, matchIdRef);
		return () => {
			const childElement = matchId.value ? Vue.h(Match, { matchId: matchId.value }) : Vue.h("div");
			if (router.options.disableGlobalCatchBoundary) return childElement;
			return Vue.h(CatchBoundary, {
				getResetKey: () => resetKey.value,
				errorComponent: errorComponentFn,
				onCatch: process.env.NODE_ENV !== "production" ? (error) => {
					console.warn(`Warning: The following error wasn't caught by any route! At the very least, consider setting an 'errorComponent' in your RootRoute!`);
					console.warn(`Warning: ${error.message || error.toString()}`);
				} : void 0,
				children: childElement
			});
		};
	}
});
function useMatchRoute() {
	const router = useRouter();
	const routerState = useStore(router.stores.matchRouteDeps, (value) => value);
	return (opts) => {
		const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts;
		return Vue.computed(() => {
			routerState.value;
			return router.matchRoute(rest, {
				pending,
				caseSensitive,
				fuzzy,
				includeSearch
			});
		});
	};
}
var MatchRoute = Vue.defineComponent({
	name: "MatchRoute",
	props: {
		from: {
			type: String,
			required: false
		},
		to: {
			type: String,
			required: false
		},
		fuzzy: {
			type: Boolean,
			required: false
		},
		caseSensitive: {
			type: Boolean,
			required: false
		},
		includeSearch: {
			type: Boolean,
			required: false
		},
		pending: {
			type: Boolean,
			required: false
		}
	},
	setup(props, { slots }) {
		const status = useStore(useRouter().stores.matchRouteDeps, (value) => value.status);
		return () => {
			if (!status.value) return null;
			const params = useMatchRoute()(props).value;
			if (!params || !slots.default) return null;
			if (typeof slots.default === "function") return Vue.h(Vue.Fragment, null, slots.default(params));
			return Vue.h(Vue.Fragment, null, slots.default);
		};
	}
});
function useMatches(opts) {
	return useStore(useRouter().stores.matches, (matches) => {
		return opts?.select ? opts.select(matches) : matches;
	});
}
function useParentMatches(opts) {
	const contextMatchId = Vue.inject(matchContext);
	const safeMatchId = Vue.computed(() => contextMatchId?.value || "");
	return useMatches({ select: (matches) => {
		matches = matches.slice(0, matches.findIndex((d) => d.id === safeMatchId.value));
		return opts?.select ? opts.select(matches) : matches;
	} });
}
function useChildMatches(opts) {
	const contextMatchId = Vue.inject(matchContext);
	const safeMatchId = Vue.computed(() => contextMatchId?.value || "");
	return useMatches({ select: (matches) => {
		matches = matches.slice(matches.findIndex((d) => d.id === safeMatchId.value) + 1);
		return opts?.select ? opts.select(matches) : matches;
	} });
}
//#endregion
export { MatchRoute, Matches, useChildMatches, useMatchRoute, useMatches, useParentMatches };

//# sourceMappingURL=Matches.js.map