1<template>
2  <transition name="slide">
3    <div v-if="isToolbarActive" class="toolbar-container">
4      <div class="toolbar-content">
5        <p class="toolbar-selected">
6          {{ selectedItemsCount }} {{ $t('global.action.selected') }}
7        </p>
8        <div class="toolbar-actions d-flex">
9          <b-button
10            v-for="(action, index) in actions"
11            :key="index"
12            variant="primary"
13            class="d-block"
14            @click="$emit('batchAction', action.value)"
15          >
16            {{ action.label }}
17          </b-button>
18          <slot name="export"></slot>
19          <b-button
20            variant="primary"
21            class="d-block"
22            @click="$emit('clearSelected')"
23          >
24            {{ $t('global.action.cancel') }}
25          </b-button>
26        </div>
27      </div>
28    </div>
29  </transition>
30</template>
31
32<script>
33export default {
34  name: 'TableToolbar',
35  props: {
36    selectedItemsCount: {
37      type: Number,
38      required: true
39    },
40    actions: {
41      type: Array,
42      default: () => [],
43      validator: prop => {
44        return prop.every(action => {
45          return (
46            action.hasOwnProperty('value') && action.hasOwnProperty('label')
47          );
48        });
49      }
50    }
51  },
52  data() {
53    return {
54      isToolbarActive: false
55    };
56  },
57  watch: {
58    selectedItemsCount: function(selectedItemsCount) {
59      if (selectedItemsCount > 0) {
60        this.isToolbarActive = true;
61      } else {
62        this.isToolbarActive = false;
63      }
64    }
65  }
66};
67</script>
68
69<style lang="scss" scoped>
70@import 'src/assets/styles/helpers';
71
72$toolbar-height: 46px;
73
74.toolbar-container {
75  width: 100%;
76  position: relative;
77}
78
79.toolbar-content {
80  height: $toolbar-height;
81  background-color: $primary;
82  color: $white;
83  position: absolute;
84  left: 0;
85  right: 0;
86  top: -$toolbar-height;
87  display: flex;
88  flex-direction: row;
89  justify-content: space-between;
90}
91
92.toolbar-actions {
93  > :last-child {
94    position: relative;
95    &::before {
96      content: '';
97      position: absolute;
98      height: $toolbar-height / 2;
99      border-left: 2px solid $white;
100      left: -2px;
101      top: $toolbar-height / 4;
102    }
103  }
104}
105
106.toolbar-selected {
107  line-height: $toolbar-height;
108  margin: 0;
109  padding: 0 $spacer;
110}
111
112.slide-enter-active {
113  transition: transform $duration--moderate-02 $entrance-easing--productive;
114}
115.slide-leave-active {
116  transition: transform $duration--moderate-02 $exit-easing--productive;
117}
118.slide-enter,
119.slide-leave-to {
120  transform: translateY($toolbar-height);
121}
122</style>
123