Toast Component

[ilhamfu]

So I made a toast component using alpinejs and I want to make a package for this but I don't know if it's good enough to be used on large scale or not. this is the component

Alpine.data("toast", () => ({
    toasts: [],
    pendingToast: [],
    toastsCount: 0,
    pendingToastsCount: 0,
    interval: null,
    addToast({ type = "info", message, title, redirect_url }) {
        this.pendingToast.push({
            index: this.toastsCount + 1,
            type,
            message,
            title,
            redirect_url,
            timeout: null,
        });
        this.pendingToastsCount++;
        this.toastsCount++;
    },
    removeToast(index) {
        this.toasts = this.toasts.filter((e) => e.index != index);
    },
    toastClick(toast) {
        this.removeToastRemoval(toast);
        toast.show = false;
        setTimeout(() => this.removeToast(`${toast.index}`), 500);
        this.setToastRemovalAfter(toast.index);
    },
    setToastRemoval(toast, timeout = 5000) {
        if (toast.timeout) return;
        toast.timeout = setTimeout(() => {
            toast.show = false;
            setTimeout(() => this.removeToast(`${toast.index}`), 500);
        }, timeout);
    },
    removeToastRemoval(toast) {
        if (toast.timeout) {
            clearTimeout(toast.timeout);
            toast.timeout = null;
        }
    },
    removeToastRemovalAfter(curr) {
        this.toasts.map((e) => {
            if (e.index >= curr) {
                this.removeToastRemoval(e);
            }
        });
    },
    setToastRemovalAfter(curr) {
        this.toasts
            .filter((e) => e.index >= curr)
            .map((e, index) => {
                this.setToastRemoval(e, 5000 + index * 250);
            });
    },
    loadToast() {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null;
        }
        this.interval = setInterval(() => {
            if (this.pendingToast.length > 0) {
                this.toasts.push(this.pendingToast.shift());
                this.pendingToastsCount--;
            }
        }, 500);
    },
    stopLoadToast() {
        if (!this.interval) return;
        clearInterval(this.interval);
        this.interval = null;
    },
    init() {
        window.Toast = {
            addToast: (toast) => {
                this.addToast(toast);
            },
        };
        this.$watch("pendingToastsCount", (curr, prev) => {
            if (prev == 0 && curr == 1) {
                this.loadToast();
                return;
            }
            if (prev == 1 && curr == 0) {
                this.stopLoadToast();
            }
        });
    },
}));

and this is how to use it in HTML

<div class="fixed right-0 bottom-0 z-50 p-4 space-y-3 w-full max-w-lg sm:p-6"
    x-on:mouseenter="stopLoadToast" 
    x-on:mouseleave="loadToast"
    x-data='toast'>
    <template x-for="toast in toasts" :key="toast.index">
        <div x-show="toast.show" x-transition:enter="transform ease-out duration-500 transition"
            x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-10"
            x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
            x-transition:leave="transition ease-in duration-500" 
            x-transition:leave-start="opacity-100"
            x-transition:leave-end="opacity-0" 
            x-on:mouseenter="removeToastRemovalAfter(toast.index)"
            x-on:mouseleave="setToastRemovalAfter(toast.index)"
            x-on:click="toastClick(toast)"
            x-init="
                $nextTick(()=>toast.show=true);
                setToastRemoval(toast)
                ">
            <x-basic.toast.content></x-basic.toast.content>
        </div>
    </template>
</div>

there are lot of stuff that I wanna add like permanent toast, callable toast etc but I think I am at my limit rn