@nixweb/nixloc-ui 0.0.277 → 0.0.279

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/component/forms/ButtonToggle.vue +31 -21
  3. package/src/component/shared/DocumentPublic.vue +1 -1
  4. package/src/component/shared/Pagination.vue +3 -1
  5. package/src/component/shared/TableTotalPerPage.vue +1 -0
  6. package/src/component/shared/filter-builder/FilterBuilder.vue +4 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nixweb/nixloc-ui",
3
- "version": "0.0.277",
3
+ "version": "0.0.279",
4
4
  "description": "Componentes UI",
5
5
  "author": "Fábio Ávila <fabio@nixweb.com.br>",
6
6
  "private": false,
package/src/component/forms/ButtonToggle.vue CHANGED
@@ -1,10 +1,13 @@
1
1
  <template>
2
- <button-toggle :class="buttonClass" @click="handleClick">
3
- <span v-if="active" class="icon"><i class="fa-regular fa-check-double"></i></span>
4
- <span v-else class="icon"><i class="fa-solid fa-calendar-week"></i></span>
5
- <span v-if="active">{{ titleActive }}</span>
6
- <span v-else="active">{{ titleInactive }}</span>
7
- </button-toggle>
2
+ <div>
3
+ <button-toggle :style="{ backgroundColor: value ? colorActive : colorInactive }" :class="buttonClass"
4
+ @click="handleClick">
5
+ <span v-if="value" class="icon-button-toggle"><i :class="classIconActive"></i></span>
6
+ <span v-else class="icon-button-toggle"><i :class="classIconInactive"></i></span>
7
+ <span v-if="value">{{ titleActive }}</span>
8
+ <span v-else="value">{{ titleInactive }}</span>
9
+ </button-toggle>
10
+ </div>
8
11
  </template>
9
12
 
10
13
  <script>
@@ -12,27 +15,30 @@ export default {
12
15
  name: 'ToggleButton',
13
16
  props: {
14
17
  titleActive: String,
18
+ classIconActive: String,
19
+ colorActive: String,
15
20
  titleInactive: String,
16
- value: Number
17
- },
18
- data() {
19
- return {
20
- active: false,
21
- }
21
+ classIconInactive: String,
22
+ colorInactive: String,
23
+ value: Number,
24
+ disabled: Boolean
22
25
  },
23
26
  computed: {
24
27
  buttonClass() {
25
28
  return {
26
29
  'button-toggle': true,
27
- 'button-toggle--active': this.active,
28
- 'button-toggle--inactive': !this.active
30
+ 'button-toggle--value': this.value,
31
+ 'button-toggle--inactive': !this.value,
32
+ 'button-toggle-disabled': this.disabled
29
33
  };
30
34
  },
31
35
  },
32
36
  methods: {
33
37
  handleClick() {
34
- this.active = this.active == true ? false : true;
35
- this.$emit("input", this.active);
38
+ if (!this.disabled) {
39
+ this.value = this.value == true ? false : true;
40
+ this.$emit("input", this.value);
41
+ }
36
42
  }
37
43
  }
38
44
  }
@@ -43,7 +49,7 @@ export default {
43
49
  display: flex;
44
50
  align-items: center;
45
51
  justify-content: center;
46
- padding: 5px 25px;
52
+ padding: 3px 15px;
47
53
  border: none;
48
54
  border-radius: 20px;
49
55
  font-size: 13px;
@@ -51,17 +57,21 @@ export default {
51
57
  transition: background-color 0.3s, color 0.3s;
52
58
  }
53
59
 
54
- .button-toggle--active {
55
- background-color: #FF8A1B;
60
+ .button-toggle--value {
56
61
  color: white;
57
62
  }
58
63
 
59
64
  .button-toggle--inactive {
60
- background-color: #F0F0F0;
61
65
  color: black;
62
66
  }
63
67
 
64
- .icon {
68
+ .icon-button-toggle {
65
69
  margin-right: 8px;
66
70
  }
71
+
72
+ .button-toggle-disabled {
73
+ background-color: #b0b0b0;
74
+ opacity: 0.5;
75
+ cursor: not-allowed;
76
+ }
67
77
  </style>
package/src/component/shared/DocumentPublic.vue CHANGED
@@ -27,7 +27,7 @@ export default {
27
27
  }
28
28
 
29
29
  .content {
30
- width: 1024px;
30
+ width: 1042px;
31
31
  margin: auto;
32
32
  }
33
33
  </style>
package/src/component/shared/Pagination.vue CHANGED
@@ -10,7 +10,9 @@
10
10
  </span>
11
11
  <span v-else>
12
12
  <div>
13
- <span class="title"> {{ currentPage }} de {{ totalPages }}</span>
13
+ <span class="title">
14
+ <span v-if="totalPages == 0">0</span>
15
+ <span v-else>{{ currentPage }}</span> de {{ totalPages }}</span>
14
16
  </div>
15
17
  </span>
16
18
  </div>
package/src/component/shared/TableTotalPerPage.vue CHANGED
@@ -5,6 +5,7 @@
5
5
  </div>
6
6
  <div class="side-by-side div-select">
7
7
  <SelectStatic fieldTarget="totalPerPage" :initialValue="initialValue" :data="[
8
+ { content: '10', id: 10 },
8
9
  { content: '20', id: 20 },
9
10
  { content: '50', id: 50 },
10
11
  { content: '100', id: 100 },
package/src/component/shared/filter-builder/FilterBuilder.vue CHANGED
@@ -30,7 +30,8 @@
30
30
  </div>
31
31
  <div v-if="item.type == 'multiOptions'">
32
32
  <div class="div-multi-options">
33
- <CheckboxServer :title="item.title" :url="item.url" v-model="item.value" />
33
+ <CheckboxServer :title="item.title" :propsParams="item.propsParams" :url="item.url"
34
+ v-model="item.value" />
34
35
  </div>
35
36
  </div>
36
37
  <InputText v-if="item.type == 'text'" :title="item.title" v-model="item.value" />
@@ -97,7 +98,8 @@ export default {
97
98
  title: filter.title,
98
99
  type: filter.type,
99
100
  url: filter.url,
100
- value: filter.value
101
+ value: filter.value,
102
+ propsParams: filter.propsParams
101
103
  });
102
104
  });
103
105
  return options;