eiru_purchases/src/components/steps/Supplier.vue

<template lang="pug">
    .purchase-step
        .supplier-selection-step
            .supplier-selector
                searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuplliers')
                card-grid(:items='visibleSuppliers' :loading='loadingSuppliers' @onSelect='selectSupplier')
            transition(name='slide-fade')
                customer-form
</template>

<script>
    import { mapGetters, mapActions } from 'vuex'

    import { Searcher, CardGrid } from '../common'
    import SupplierForm from '@/components/forms/SupplierForm'

    export default {
        components: {
            Searcher,
            CardGrid,
            SupplierForm
        },
        computed: mapGetters([
            'suppliers',
            'visibleSuppliers',
            'loadingSuppliers'
        ]),
        methods: mapActions([
            'selectSupplier',
            'filterSuppliers'
        ])
    }
</script>

<style lang="sass">
    .purchase-step
        .supplier-selection-step
            width: 100%
            height: 100%
            display: flex
            .supplier-selector
                width: 100%
                height: 100%
            .slide-fade-enter-active
                transition: all 300ms ease;
            .slide-fade-enter
                transform: translateX(300px)
                opacity: 0
</style>