<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <px-pivot :items="tabs" v-model:selected="selectedTab" />
        <px-slides :items="tabs" v-model:selected="selectedTab" :drag-enabled="false">
            <template #slide="{ item }">
                <div :class="bem('slide')">
                    <h1>{{ item.label }}</h1>
                </div>
            </template>
        </px-slides>
    </div>
</template>

<script>
import PxPivot from '../../components/PxPivot.vue';
import PxSlides from '../../components/PxSlides.vue';
import stringToItems from '../../plugins/filters/stringToItems.js';

export default {
    name: 'demo-px-pivot',
    components: { PxPivot, PxSlides },
    filters: { stringToItems },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        const tabs = stringToItems('Apple, Orange, Banana, Super Delicious Pineapple');
        tabs[1].hideSelector = true;

        return { tabs, selectedTab: null };
    },
    // computed: {},
    // watch: {},
    // mounted() {},
    // methods: {},
};
</script>

<style lang="scss">
.demo-px-pivot {
    overflow-x: hidden;
    padding: 20vh 0 150vh;
    max-width: 100vw;

    &__slide {
        margin: 0 auto;
        background-color: rgba(gold, 0.1);
        width: 80vw;
        max-width: 600px;
        aspect-ratio: 4 / 3;
    }
}
</style>
