keep-vue/lib/components/Progress/useProgressStore.js

Keep Vue is an open-source component library built on top of Vue3 and Tailwind CSS. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications.

import { createInjectionState } from "@vueuse/core";
import { ref, watch } from "vue";
const [useProvideProgressStore, useInjectProgress] = createInjectionState((initialProgress) => {
    //state
    const progress = ref(initialProgress);
    const progressBar = ref(0);
    watch(progress, (newValue) => {
        const timer = setTimeout(() => {
            progressBar.value = newValue;
        }, 200);
        //side Effect return
        return () => clearTimeout(timer);
    }, { immediate: true });
    return { progressBar };
});
function useProgressStore() {
    const progressStore = useInjectProgress();
    if (progressStore == null) {
        throw new Error("Please call `useProvideProgressStore` on the <progress/> component");
    }
    return progressStore;
}
export { useProgressStore, useProvideProgressStore };