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