<template>
  <div class="row no-span">
    <template v-for="action in actions">
      <q-separator v-if="action.name == 'separator'" :key="key(action)" vertical inset />
      <q-btn v-else
        :key="key(action)"
        :icon="action.icon"
        :color="action.warning ? 'red' : ''"
        flat
        round
        :dense="dense"
        @click="onActionTriggered(action)">
        <q-tooltip>
          {{action.warning ? action.warning : action.label}}
        </q-tooltip>
      </q-btn>
    </template>
  </div>
</template>

<script>
import { uid } from 'quasar'

export default {
  name: 'k-tool-bar',
  props: {
    actions: {
      type: Array,
      default: () => { return [] }
    },
    dense: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    key (action) {
      return action.name + '-' + uid()
    },
    onActionTriggered (action) {
      // If a handler is given call it
      if (action.handler) action.handler()
      // If a route is given activate it
      else if (action.route) this.$router.push(action.route)
    }
  }
}
</script>

<template>
  <div class="row no-span">
    <template v-for="action in actions">
      <q-separator v-if="action.name == 'separator'" :key="key(action)" vertical inset />
      <q-btn v-else
        :key="key(action)"
        :icon="action.icon"
        :color="action.warning ? 'red' : 'primary'"
        flat
        round
        :dense="dense"
        @click="onActionTriggered(action)">
        <q-tooltip>
          {{action.warning ? action.warning : action.label}}
        </q-tooltip>
      </q-btn>
    </template>
  </div>
</template>

<script>
import { uid } from 'quasar'

export default {
  name: 'k-tool-bar',
  props: {
    actions: {
      type: Array,
      default: () => { return [] }
    },
    dense: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    key (action) {
      return action.name + '-' + uid()
    },
    onActionTriggered (action) {
      // If a handler is given call it
      if (action.handler) action.handler()
      // If a route is given activate it
      else if (action.route) this.$router.push(action.route)
    }
  }
}
</script>

Set toolbar button color to secondary be default
Set toolbar button color to secondary be default
