<!--
    Describe this component...
-->
<template>
    <div :class="bem()">
        <px-card-grid
            :items="fruits"
            :debug="true"
            :gap="60"
            :allow-orphans="true"
            :pad-orphans="true"
            :maxColumns="4"
            :templates="{
                4: ['== -- -----', '-- == -- --', '----- -- ==', '-- -- == --'],
                3: ['== -- --', '-- -- ==', '-- == --'],
                2: ['-- --', '-----', '== --'],
            }"
        >
            <template #default="{ item }">{{ item.name }}</template>
        </px-card-grid>
    </div>
</template>

<script>
import PxCardGrid from '../../components/PxCardGrid.vue';
import random from '../data/random.js';

export default {
    components: { PxCardGrid },
    name: 'demo-px-card-grid',
    // components: { Component },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { fruits: [] };
    },
    // computed: {},
    // watch: {},
    mounted() {
        this.fruits = random.randomFruits(20);
    },
    // methods: {},
};
</script>

<style lang="scss">
.demo-px-card-grid {
    padding: 5vh 0 10vh;
}
</style>
