configTable.vue

<template>
  <div class="config-table">
    <div class="header">
      <div class="column" v-for="(title, i) in columns" :key="i">
        <span class="label">
          {{ title }}
        </span>
      </div>

      <div class="column">
      </div>
    </div>

    <div class="body">
      <div class="row" v-for="(row, id) in rows" :key="id">
        <div class="column" v-for="(label, i) in row" :key="i">
          <span v-if="Object(label) !== label" class="label">
            {{ label }}
          </span>
          <slot v-else v-bind:label="label" />
        </div>

        <div class="column actions">
          <c-button flat
            v-for="(icon, name) in enabledActions"
            :key="name"
            :class="`c-button-${name}`"
            :icon="icon"
            :icon-size="14"
            :error="name == 'remove'"
            :size="30"
            @click.stop="onActionClick(name, id)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => ([
        'Departamento(s)', 'Atrelados'
      ])
    },

    rows: {
      type: Object,
      default: () => ({
        '12345': ['Administração', '9 pessoas']
      })
    },

    actions: {
      type: Object,
      default: () => ({
        share: 'share2',
        edit: 'pencil',
        remove: 'cross'
      })
    },

    actionsTests: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    enabledActions () {
      return Object.fromEntries(
        Object.entries(this.actions).filter(([name]) =>
           this.actionsTests[name] !== undefined ? this.actionsTests[name] : true
        )
      )
    }
  },

  methods: {
    onActionClick (name, id) {
      this.$emit(`action:${name}`, id)
    }
  }
}
</script>

<style lang="scss">
.config-table {
  & > .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    @include responsive (xs-mobile, mobile) { display: none; }

    & > .column {
      flex: 1;

      & > .label {
        color: rgba(#121E48, .3);
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 500;
        font-family: Ubuntu;
        -webkit-font-smoothing: antialiased;
      }
    }
  }

  & > .body > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 15px;
    border-top: 1px solid #e7e9ed;

    @include responsive (xs-mobile, mobile) {
      padding: { left: 10px; right: 10px; }
      &:first-child { border-top: 0; }
    }

    & > .column {
      flex: 1;

      & > .label {
        color: rgba(#121E48, .8);
        line-height: 16px;
        font-size: 14px;
        font-weight: 600;
        font-family: Nunito Sans;
      }

      &:first-child {
        & > .label {
          color: rgba(#121E48, .8);
          line-height: 22px;
          font-size: 16px;
          font-weight: 500;
          font-family: Ubuntu;
          -webkit-font-smoothing: antialiased;
        }
      }
    }

    & > .actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;


      & > .c-button {
        margin-left: 10px;
      }

      & > .c-button-share > svg {
        transform: translateX(-5%);
      }
    }

    @include desktop {
      & > .actions { opacity: 0; }
      &:hover > .actions { opacity: 1; }
    }
  }
}
</style>