JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
  <account-component v-for="account in accounts" :account="account" :key="account.number"></account-component>
  
  <div v-if="selectedAccount" class="panel">
    Name: <input v-model="selectedAccount.name" />
    Color: <input v-model="selectedAccount.color" type="color" />
    <button @click="done">done</button>
  </div>
</div>

SCSS

:root {
  --bar-color: transparent;
}

.account {
  border: 1px solid black;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-family: sans-serif;
  margin: 10px;
  padding: 10px 10px 10px 30px;
  position: relative;
  
  &::before {
    background-color: var(--bar-color);
    border-radius: 2px;
    content: '';
    display: block;
    height: calc(100% - 20px);
    left: 10px;
    position: absolute;
    width: 10px;
  }
  
  &-name {
    font-size: 18px;
    width: 50%;
  }
  &-amount {
    font-size: 18px;
    text-align: right;
    transform: translate3d(0, 50%, 0);
    width: 50%;
  }
  &-number {
    color: gray;
    font-size: 14px;
    width: 100%;
  }
}

.panel {
  margin: 10px;
}

Vue

console.clear();

Vue.component('account-component', {
	name: 'account-component',
  
  props: {
  	account: Object
  },
  
  computed: {
  	barColor: function () {
    	return `--bar-color: ${this.account.color}`;
    }
  },
  
  template: `
  	<div class="account" :style="barColor" @click="$root.$emit('edit-account', account.number)">
      <div class="account-name">{{ account.name }}</div>
      <div v-if="account.amount" class="account-amount">$ {{ account.amount }}</div>
      <div v-if="account.number" class="account-number">{{ account.number }}</div>
    </div>
  `
});

new Vue({
  el: "#app",
  
  data () {
  	return {
    	selectedAccount: null,
    	accounts: [
      	{
        	name: 'Checking Account',
          amount: '1000',
          number: '********123',
          color: '#7a0028'
        },
        {
        	name: 'Savings Account',
          amount: '100',
          number: '********890',
          color: '#29a3f6'
        },
        {
        	name: 'Secret Account',
          amount: '1000000',
          number: '********007',
          color: '#607743'
        }
      ]
    }
  },
  
  methods: {
  	editAccount: function (acctNum) {
    	let selectedAccountNum = acctNum;
      let index = this.accounts.findIndex(x => x.number === acctNum);
      
      this.selectedAccount = this.accounts[index];
    },
    done: function () {
    	this.selectedAccount = null;
    }
  },
  
  created: function () {
  	this.$root.$on('edit-account', acctNum => this.editAccount(acctNum));
  }
})