eiru_pos/src/components/ProductVariant.vue

<template lang="pug">
    .product-variant(@click="selectVariant({ data })")
        img.variant-image(:src="this.data.image_medium ? 'data:image/png;base64,' + this.data.image_medium : '/web/static/src/img/placeholder.png'")
        .variant-details
            h2.variant-name {{ data.display_name }}
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        props: {
            data: {
                type: Object,
                default: () => {
                    return {}
                }
            }
        },
        methods: mapActions([
            'selectVariant'
        ])
    }
</script>


<style lang="sass">
    .product-variant
        width: calc(100% - 20px)
        height: 84px
        margin: 5px 10px
        
        display: flex

        &:hover
            cursor: pointer
            .variant-details
                transition-duration: 0.5s
                border-bottom: 2px solid #7c7bad

        .variant-image
            width: 80px
            height: 80px
            margin: 0
            border: none
        
        .variant-details
            flex-grow: 1
            border-bottom: 1px solid #d3d3d3

            .variant-name
                font-size: 10pt
</style>