eiru_purchases/src/components/supplier/SupplierStep.vue

<template lang="pug">
    .purchase-step
        .supplier-selection-step
            .supplier-selector
                searcher(:items='suppliers' :keys="['name', 'displayName']" @onSearch='filterSuppliers')
                card-grid(:items='visibleSuppliers' @onAdd='showSupplierForm' @onSelect='selectSupplier')
                supplier-form
            transition(name='slide-fade')
                supplier-details(v-if='!!supplierSelected')
</template>

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

    import Searcher from '@/components/common/Searcher'
    import CardGrid from '@/components/common/CardGrid'
    import SupplierForm from '@/components/supplier/SupplierForm'
    import SupplierDetails from '@/components/supplier/SupplierDetails'

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

<style lang="sass">
    .purchase-step 
        .supplier-selection-step
            width: 100%
            height: 100%
            display: flex
            .supplier-selector, .supplier-details
                height: 100%
            .supplier-selector
                width: 100%
            .supplier-details
                width: 360px
                margin: 0 15px
            .slide-fade-enter-active
                transition: all 300ms ease
            .slide-fade-leave-active
                transition: all 800ms cubic-bezier(1.0, 0.5, 0.8, 1.0)
            .slide-fade-enter, .slide-fade-leave-to
                transform: translateX(10px)
                opacity: 0
</style>