fix: prefer ofetch

Author: vis97c

packages/common-types/src/plugin.ts

@@ -108,7 +108,9 @@ export interface iPluginOptions<ComponentType = unknown> {
 	 */
 	country?: string;
 	/**
-	 * Countries API base endpoint (full URL)
+	 * Countries API base endpoint
+	 *
+	 * Pathname or full URL (With pathname)
 	 *
 	 * If using nuxt, get better performance with the module
 	 * @see https://www.npmjs.com/package/nuxt-countries-api

packages/components-vue/src/components/base/Action.vue

@@ -34,7 +34,7 @@
 
 	const props = defineProps<iActionProps>();
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { routerComponent } = inject<iPluginOptions>("xamu") || {};
 	const { getModifierClasses: GMC } = useHelpers(useUtils);
 
 	const currentTag = computed(() => {
@@ -44,7 +44,7 @@
 	});
 
 	const actionComponent = computed(() => {
-		return (props.to && xamuOptions?.routerComponent) || currentTag.value;
+		return (props.to && routerComponent) || currentTag.value;
 	});
 
 	/**

packages/components-vue/src/components/base/Img.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-	import { type PropType, computed, inject } from "vue";
+	import { type PropType, inject } from "vue";
 
 	import type { iPluginOptions } from "@open-xamu-co/ui-common-types";
 
@@ -41,7 +41,5 @@
 		},
 	});
 
-	const xamuOptions = inject<iPluginOptions<vComponent>>("xamu");
-
-	const imageComponent = computed(() => xamuOptions?.imageComponent || "img");
+	const { imageComponent = "img" } = inject<iPluginOptions<vComponent>>("xamu") || {};
 </script>

packages/components-vue/src/components/icon/Fa.vue

@@ -39,10 +39,10 @@
 
 	const props = defineProps<iIconFaProps>();
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { fontAwesomePro } = inject<iPluginOptions>("xamu") || {};
 
 	const regular = computed(() => {
-		return props.forceRegular || (xamuOptions?.fontAwesomePro && props.regular);
+		return props.forceRegular || (fontAwesomePro && props.regular);
 	});
 
 	/**

packages/components-vue/src/components/loader/ContentFetch.vue

@@ -102,8 +102,8 @@
 	const emit = defineEmits(["refresh"]);
 
 	const { logger } = useHelpers(useUtils);
-	const xamuOptions = inject<iVuePluginOptions>("xamu");
-	const useAsyncData: typeof useAsyncDataFn = xamuOptions?.asyncDataFn ?? useAsyncDataFn;
+	const { internals } = inject<iVuePluginOptions>("xamu") || {};
+	const useAsyncData: typeof useAsyncDataFn = internals?.useAsyncData ?? useAsyncDataFn;
 
 	const firstLoad = ref(false);
 	const hydrated = ref(false);

packages/components-vue/src/components/pagination/Content.vue

@@ -120,7 +120,7 @@
 	});
 	const emit = defineEmits(["refresh", "hasContent"]);
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { first: defaultFirst } = inject<iPluginOptions>("xamu") || {};
 	const router = getCurrentInstance()?.appContext.config.globalProperties.$router;
 
 	/**
@@ -134,7 +134,7 @@
 	};
 	const propsPagination = ref<iPagination>({
 		orderBy: props.orderBy,
-		first: props.first ?? xamuOptions?.first,
+		first: props.first ?? defaultFirst,
 		at: props.at,
 	});
 	const routePagination = computed<iPagination>(() => {

packages/components-vue/src/components/pagination/Simple.vue

@@ -93,7 +93,7 @@
 	const emit = defineEmits(["update:model-value"]);
 	const props = defineProps<iPaginationSimpleProps<T, C>>();
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { first: defaultFirst } = inject<iPluginOptions>("xamu") || {};
 	const { t } = useHelpers(useI18n);
 
 	/**
@@ -110,7 +110,7 @@
 	 * PaginationSimple first model
 	 */
 	const firstModel = computed({
-		get: () => props.modelValue?.first ?? xamuOptions?.first,
+		get: () => props.modelValue?.first ?? defaultFirst,
 		set(first) {
 			emit("update:model-value", { ...props.modelValue, first });
 		},

packages/components-vue/src/components/slider/Simple.vue

@@ -139,7 +139,7 @@
 		intervalDuration: 7000,
 	});
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { disableAutoAnimate } = inject<iPluginOptions>("xamu") || {};
 	const { t } = useHelpers(useI18n);
 	const { isBrowser } = useHelpers(useUtils);
 
@@ -154,7 +154,7 @@
 	const childCount = ref(0);
 
 	const allowAutoAnimate = computed<boolean>(() => {
-		return !xamuOptions?.disableAutoAnimate && props.animate;
+		return !disableAutoAnimate && props.animate;
 	});
 
 	const sliderTag = computed(() => {

packages/components-vue/src/components/value/Simple.vue

@@ -161,13 +161,10 @@
 
 	const props = defineProps<iValueSimpleProps<P>>();
 
-	const xamuOptions = inject<iPluginOptions>("xamu");
+	const { lang = "en", country = "US", imageHosts = [] } = inject<iPluginOptions>("xamu") || {};
 	const { t } = useHelpers(useI18n);
 
 	const locale = computed(() => {
-		const lang = xamuOptions?.lang || "en";
-		const country = xamuOptions?.country || "US";
-
 		return `${lang}-${country}`;
 	});
 
@@ -181,10 +178,10 @@
 		const [firstPart] = url.split("?");
 
 		// host is required
-		if (isURL(firstPart) && xamuOptions?.imageHosts?.length) {
+		if (isURL(firstPart) && imageHosts.length) {
 			const url = new URL(firstPart);
 
-			if (xamuOptions.imageHosts.includes(url.host)) return true;
+			if (imageHosts.includes(url.host)) return true;
 		}
 
 		return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(firstPart);

packages/components-vue/src/composables/browser.ts

@@ -1,6 +1,5 @@
-import { type Ref, inject, onMounted, onBeforeUnmount, ref } from "vue";
+import { type Ref, onMounted, onBeforeUnmount, ref } from "vue";
 
-import type { iPluginOptions } from "@open-xamu-co/ui-common-types";
 import { useUtils } from "@open-xamu-co/ui-common-helpers";
 
 import { useHelpers } from "../composables/utils";
@@ -21,44 +20,46 @@ function matchMedia(size?: number) {
  * @composable
  */
 export default function useBrowser() {
-	const { mediaQueryPixels } = inject<iPluginOptions>("xamu") || {};
-	const { isBrowser } = useHelpers(useUtils);
+	return useHelpers((xo) => {
+		const { mediaQueryPixels } = xo;
+		const { isBrowser } = useUtils(xo);
 
-	// Viewports
-	const laptopMqRange = ref<boolean>(false);
-	const tabletMqRange = ref<boolean>(false);
-	const mobileMqRange = ref<boolean>(false);
-	// Viewport listeners
-	const laptopMQHandler = MQHandler(laptopMqRange);
-	const tabletMQHandler = MQHandler(tabletMqRange);
-	const mobileMQHandler = MQHandler(mobileMqRange);
+		// Viewports
+		const laptopMqRange = ref<boolean>(false);
+		const tabletMqRange = ref<boolean>(false);
+		const mobileMqRange = ref<boolean>(false);
+		// Viewport listeners
+		const laptopMQHandler = MQHandler(laptopMqRange);
+		const tabletMQHandler = MQHandler(tabletMqRange);
+		const mobileMQHandler = MQHandler(mobileMqRange);
 
-	// lifecycle, listeners only work on browser
-	if (isBrowser) {
-		// Define MQlist
-		const laptopMQList = matchMedia(mediaQueryPixels?.laptop ?? 1080);
-		const tabletMQList = matchMedia(mediaQueryPixels?.tablet ?? 768);
-		const mobileMQList = matchMedia(mediaQueryPixels?.mobile ?? 576);
+		// lifecycle, listeners only work on browser
+		if (isBrowser) {
+			// Define MQlist
+			const laptopMQList = matchMedia(mediaQueryPixels?.laptop ?? 1080);
+			const tabletMQList = matchMedia(mediaQueryPixels?.tablet ?? 768);
+			const mobileMQList = matchMedia(mediaQueryPixels?.mobile ?? 576);
 
-		onMounted(() => {
-			// Mount listeners
-			laptopMQList.addEventListener("change", laptopMQHandler, true);
-			tabletMQList.addEventListener("change", tabletMQHandler, true);
-			mobileMQList.addEventListener("change", mobileMQHandler, true);
+			onMounted(() => {
+				// Mount listeners
+				laptopMQList.addEventListener("change", laptopMQHandler, true);
+				tabletMQList.addEventListener("change", tabletMQHandler, true);
+				mobileMQList.addEventListener("change", mobileMQHandler, true);
 
-			// Set initial values
-			laptopMQHandler(laptopMQList);
-			tabletMQHandler(tabletMQList);
-			mobileMQHandler(mobileMQList);
-		});
+				// Set initial values
+				laptopMQHandler(laptopMQList);
+				tabletMQHandler(tabletMQList);
+				mobileMQHandler(mobileMQList);
+			});
 
-		onBeforeUnmount(() => {
-			// Unmount listeners
-			laptopMQList.removeEventListener("change", laptopMQHandler, true);
-			tabletMQList.removeEventListener("change", tabletMQHandler, true);
-			mobileMQList.removeEventListener("change", mobileMQHandler, true);
-		});
-	}
+			onBeforeUnmount(() => {
+				// Unmount listeners
+				laptopMQList.removeEventListener("change", laptopMQHandler, true);
+				tabletMQList.removeEventListener("change", tabletMQHandler, true);
+				mobileMQList.removeEventListener("change", mobileMQHandler, true);
+			});
+		}
 
-	return { laptopMqRange, tabletMqRange, mobileMqRange };
+		return { laptopMqRange, tabletMqRange, mobileMqRange };
+	});
 }