vue-identify-network/dist/index.js

Vue 3 component and composable for detecting network speed, connection type (4G, wifi, 2g, 3g), data saver, and Network Information API.

import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, mergeModels, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useModel } from "vue";
//#region src/components/VueIdentifyNetwork.vue
const _sfc_main = /* @__PURE__ */ defineComponent({
	__name: "VueIdentifyNetwork",
	props: {
		"unknownClass": {
			required: false,
			default: null
		},
		"unknownClassModifiers": {},
		"slowClass": {
			required: false,
			default: null
		},
		"slowClassModifiers": {},
		"fastClass": {
			required: false,
			default: null
		},
		"fastClassModifiers": {}
	},
	emits: /* @__PURE__ */ mergeModels(["network-type", "network-speed"], [
		"update:unknownClass",
		"update:slowClass",
		"update:fastClass"
	]),
	setup(__props, { emit: __emit }) {
		const unknownClass = useModel(__props, "unknownClass");
		const slowClass = useModel(__props, "slowClass");
		const fastClass = useModel(__props, "fastClass");
		const emits = __emit;
		const type = ref(null);
		const downLink = ref("Unknown");
		const vendor = computed(() => typeof window === "undefined" ? "Unknown" : navigator.vendor);
		onMounted(() => {
			if (vendor.value.includes("Google") && type.value !== "Unknown") {
				type.value = navigator.connection.effectiveType;
				downLink.value = navigator.connection.downlink;
			} else {
				type.value = "Unknown";
				downLink.value = "Unknown";
			}
			emits("network-type", type.value);
			emits("network-speed", downLink.value);
			navigator.connection.addEventListener("change", updateConnection);
		});
		onBeforeUnmount(() => {
			navigator.connection.removeEventListener("change", updateConnection);
		});
		const updateConnection = (e) => {
			type.value = e.currentTarget && e.currentTarget.effectiveType;
			downLink.value = e.currentTarget && e.currentTarget.downlink;
			emits("network-type", type.value);
			emits("network-speed", downLink.value);
		};
		return (_ctx, _cache) => {
			return openBlock(), createElementBlock(Fragment, null, [
				type.value === "Unknown" ? (openBlock(), createElementBlock("div", {
					key: 0,
					class: normalizeClass(unknownClass.value)
				}, [renderSlot(_ctx.$slots, "unknown")], 2)) : createCommentVNode("v-if", true),
				type.value === "2g" ? (openBlock(), createElementBlock("div", {
					key: 1,
					class: normalizeClass(slowClass.value)
				}, [renderSlot(_ctx.$slots, "slow")], 2)) : createCommentVNode("v-if", true),
				type.value !== "2g" && type.value !== "Unknown" ? (openBlock(), createElementBlock("div", {
					key: 2,
					class: normalizeClass(fastClass.value)
				}, [renderSlot(_ctx.$slots, "fast")], 2)) : createCommentVNode("v-if", true)
			], 64);
		};
	}
});
//#endregion
//#region src/install.ts
let installed = false;
const install = (app) => {
	if (!installed) {
		app.component("VueIdentifyNetwork", _sfc_main);
		installed = true;
	}
};
//#endregion
export { _sfc_main as VueIdentifyNetwork, install as default };

//# sourceMappingURL=index.js.map