@nixweb/nixloc-ui 0.0.237 → 0.0.239

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "0.0.237",
3
+ "version": "0.0.239",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
@@ -2,14 +2,10 @@
2
2
  <div>
3
3
  <div>
4
4
  <b-button-group size="sm">
5
- <b-button
6
- v-for="option in options"
7
- :class="{ selected: option.title == selected }"
8
- class="btn-group"
9
- @click="execute(option)"
10
- :key="option.title"
11
- >
5
+ <b-button v-for="option in options" :class="{ selected: option.title == selected }" class="btn-group"
6
+ @click="execute(option)" :key="option.title">
12
7
  {{ option.title }}
8
+ <div v-if="option.badge" class="badge-button">{{ option.badge }}</div>
13
9
  </b-button>
14
10
  </b-button-group>
15
11
  </div>
@@ -53,7 +49,17 @@ export default {
53
49
  border-color: #e9e9e9 !important;
54
50
  outline: none !important;
55
51
  }
52
+
56
53
  .selected {
57
54
  background-color: #f5f5f5 !important;
58
55
  }
56
+
57
+ .badge-button {
58
+ width: 20px;
59
+ height: 20px;
60
+ background-color: darkblue;
61
+ border-radius: 20px;
62
+ margin-left: 10px;
63
+ color: white;
64
+ }
59
65
  </style>
@@ -1,6 +1,18 @@
1
1
  <template>
2
2
  <div>
3
- <div class="div-current" @click="show = true">
3
+ <div v-if="multiSelected">
4
+ <div class="side-by-side icon-filter" @click="show = true">
5
+ <i class="fa-solid fa-circle-plus "></i>
6
+ <span class="title-users" v-if="currentValueFilter.length == 0"> Todos usuários</span>
7
+ </div>
8
+ <div class="side-by-side" v-for="user in currentValueFilter">
9
+ <img class="img-current" :src="baseUrl + user.photo" alt="">
10
+ <div class="side-by-side icon-close" @click="remove(user)">
11
+ <i class="fa-solid fa-do-not-enter"></i>
12
+ </div>
13
+ </div>
14
+ </div>
15
+ <div v-else class="div-current" @click="show = true">
4
16
  <img class="img-current" :src="baseUrl + currentValue.photo" alt="">
5
17
  </div>
6
18
  <div v-if="show" class="main-select" @mouseleave="show = false">
@@ -28,9 +40,14 @@ export default {
28
40
  props: {
29
41
  genericId: String,
30
42
  responsibleUser: Object,
43
+ multiSelected: {
44
+ type: Boolean,
45
+ default: false,
46
+ },
31
47
  title: String,
32
48
  urlGet: String,
33
49
  urlUpdate: String,
50
+ value: Array
34
51
  },
35
52
  components: {
36
53
 
@@ -39,6 +56,7 @@ export default {
39
56
  return {
40
57
  baseUrl: "https://espaco.blob.core.windows.net/nixloc-photo-user/",
41
58
  currentValue: {},
59
+ currentValueFilter: [],
42
60
  data: [],
43
61
  show: false,
44
62
  baseParams: {
@@ -70,9 +88,22 @@ export default {
70
88
  this.putApi(params).then((response) => { });
71
89
  },
72
90
  select(item) {
73
- this.currentValue = item;
91
+ if (!this.multiSelected) {
92
+ this.currentValue = item;
93
+ } else {
94
+ const exists = this.currentValueFilter.some(x => x.id === item.id);
95
+ if (!exists)
96
+ this.currentValueFilter.push(item);
97
+ this.$emit("input", this.currentValueFilter);
98
+ }
99
+
100
+ if (this.genericId)
101
+ this.updateResponsibleUser();
102
+
74
103
  this.show = false;
75
- this.updateResponsibleUser();
104
+ },
105
+ remove(item) {
106
+ this.currentValueFilter = this.currentValueFilter.filter(x => x.id !== item.id);
76
107
  }
77
108
  },
78
109
  watch: {
@@ -113,6 +144,10 @@ export default {
113
144
  font-size: 13px;
114
145
  }
115
146
 
147
+ .title-users {
148
+ font-size: 14px;
149
+ }
150
+
116
151
  .img-card {
117
152
  width: 35px;
118
153
  height: 35px;
@@ -125,5 +160,16 @@ export default {
125
160
  height: 30px;
126
161
  border-radius: 50px;
127
162
  }
163
+
164
+ .icon-filter {
165
+ font-size: 15px;
166
+ cursor: pointer;
167
+ }
168
+
169
+ .icon-close {
170
+ color: red;
171
+ font-size: 13px;
172
+ cursor: pointer;
173
+ }
128
174
  </style>
129
175