primevue-mirror/apps/showcase/components/template/TemplateFeaturesAnimationInline.vue

<template>
    <div ref="animationInlineRef" class="w-full py-8 rounded-xl bg-surface-50 dark:bg-surface-800 relative flex flex-col items-center justify-center">
        <div class="hidden sm:flex items-center gap-0.5 xl:gap-1 rounded-full border border-surface p-1 w-[90%] bg-surface-0 dark:bg-surface-900">
            <template v-for="(data, index) in inlineFeaturesData" :key="index">
                <button
                    @click="handleBtnClick(data.id)"
                    @mouseenter="enterCardArea(data.id)"
                    @mouseleave="leaveCardArea"
                    :class="`flex-1 py-1 px-1 lg:px-2 rounded-full text-surface-900 dark:text-surface-0 border-none outline-none text-xs font-medium transition-all hover:bg-surface-200 dark:hover:bg-surface-700 cursor-pointer ${
                        data.id === selectedID ? 'bg-surface-200 dark:bg-surface-700' : 'bg-transparent'
                    }`"
                >
                    {{ data.title }}
                </button>
            </template>
        </div>
        <div class="w-[90%] h-fit overflow-hidden relative flex mt-5 rounded-lg shadow-[0px_0px_48px_0px_rgba(0,0,0,0.08)]">
            <img class="max-h-96 w-full h-auto object-cover object-top flex" :src="inlineFeaturesData[selectedID - 1].src" alt="Animation Inline Feature Image" />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        inlineFeaturesData: {
            type: null,
            default: null
        },
        parentHandleClick: {
            type: null,
            default: null
        },
        parentHandleHover: {
            type: null,
            default: null
        },
        parentID: {
            type: null,
            default: null
        },
        inlineSeconds: {
            type: Number,
            default: 1000
        }
    },
    observer: null,
    timeout: null,
    data() {
        return {
            selectedID: 1,
            hoveredID: null,
            intervalId: null
        };
    },
    mounted() {
        this.observer = new IntersectionObserver(([entry]) => {
            clearTimeout(this.timeout);

            if (entry.isIntersecting) {
                this.timeout = setTimeout(
                    () => {
                        this.startInterval();
                        this.observer.unobserve(this.$el);
                    },
                    { threshold: 0.2 }
                );
            }
        });

        this.observer.observe(this.$el);
    },
    beforeUnmount() {
        this.$el && this.observer?.unobserve(this.$el);
        clearInterval(this.intervalId);
    },
    methods: {
        handleClick(id) {
            this.selectedID = id;
        },
        handleBtnClick(id) {
            this.handleClick(id);
            this.parentHandleClick(this.parentID);
            clearInterval(this.intervalId);
        },
        startInterval() {
            this.intervalId = setInterval(() => {
                this.selectedID = this.selectedID === this.inlineFeaturesData.length ? 1 : this.selectedID + 1;
            }, this.inlineSeconds);
        },
        enterCardArea(id) {
            this.hoveredID = id;
            this.parentHandleHover(this.parentID, 'onMouseEnter');
        },
        leaveCardArea() {
            this.hoveredID = null;
            this.parentHandleHover(this.parentID, 'onMouseLeave');
        }
    }
};
</script>