eiru_purchases/src/components/product/ProductsStep.vue

<template lang="pug">
    .purchase-step
        .products-selector
            searcher(:items='products' :keys="['name', 'displayName']" @onSearch='filterProducts')
            card-grid(:items='visibleProducts' canAdd description='standardPrice' @onAdd='showProductForm' @onSelect='selectProduct')
            product-form
        cart
</template>

<script>
    import Searcher from '@/components/common/Searcher'
    import CardGrid from '@/components/common/CardGrid'
    import ProductForm from '@/components/product/ProductForm'
    import Cart from '@/components/product/Cart'

    import { mapGetters, mapActions } from 'vuex'

    export default {
        components: {
            Searcher,
            CardGrid,
            ProductForm,
            Cart
        },
        computed: mapGetters([
            'products',
            'visibleProducts'
        ]),
        methods: mapActions([
            'filterProducts',
            'showProductForm',
            'selectProduct'
        ])
    }
</script>

<style lang="sass">
    .purchase-step
        .products-selector
            width: calc(100% - 300px)
            height: 100%
            padding-right: 5px
            display: inline-block
        .cart-viewer
            width: 300px
            height: 100%
            border-left: 1px solid #d3d3d3
            padding-left: 10px
            display: inline-block
            vertical-align: top
</style>