import { computed as e, reactive as t, ref as n, unref as r, watch as i } from "vue";
import { delay as a, exclusiveRequest as o } from "@milaboratories/helpers";
/**
* Watch any reactive source and perform an asynchronous operation
*
* @example
* ```ts
* const v = useWatchFetch(
*   watchSource,
*   async (sourceValue) => {
*     return await fetchDataFromApi(sourceValue);
*   }
* );
*
* // Usage in a template
* <template>
*   <div v-if="v.loading">Loading...</div>
*   <div v-else-if="v.error">Error: {{ v.error.message }}</div>
*   <div v-else>Data: {{ v.value }}</div>
* </template>
* ```
*/
function s(s, c, l) {
	let u = n(0), d = t({
		loading: e(() => u.value > 0),
		loadingRef: u,
		value: void 0,
		error: void 0
	}), f = o(async (e) => (l?.debounce && await a(r(l.debounce)), c(e)));
	return i(s, async (e) => {
		l?.filterWatchResult && !l.filterWatchResult(e) || (d.error = void 0, u.value++, f(e).then((e) => {
			e.ok && (d.value = e.value);
		}).catch((e) => {
			d.value = void 0, d.error = e;
		}).finally(() => {
			u.value--;
		}));
	}, Object.assign({
		immediate: !0,
		deep: !0
	}, l?.watchOptions ?? {})), d;
}
export { s as useWatchFetch };

//# sourceMappingURL=useWatchFetch.js.map