@nixweb/nixloc-ui 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nixweb/nixloc-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Componentes UI",
   "author": "Fábio Ávila <fabio@nixweb.com.br>",
   "private": false,

package/src/component/forms/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="c-div-button" v-b-tooltip.hover :title="tooltip">
-    <button :style="'background-color:' + backGroundColor + ';color:' + color" class="button" :class="{
+    <button :id="_key" :style="'background-color:' + backGroundColor + ';color:' + color" class="button" :class="{
       small: size === 'small',
       medium: size === 'medium',
       large: size === 'large',

package/src/component/forms/ButtonFilter.vue

@@ -1,49 +1,77 @@
 <template>
   <div>
     <div class="btn-container side-by-side text-center">
-      <div v-for="option in options" class="btn-item-button-filter side-by-side"
-        :class="{ 'selected-button-filter': option.value == selected }" @click="execute(option)" :key="option.title">
+      <div v-for="option in options" :key="option.value || option.title" class="btn-item-button-filter side-by-side"
+        :class="{ 'selected-button-filter': option.value === selected }" @click="execute(option)">
         <i :class="option.classIcon"></i>
         <span class="btn-title">{{ option.title }}</span>
       </div>
     </div>
   </div>
 </template>
+
 <script>
 import { mapMutations } from "vuex";
 
 export default {
   name: "ButtonFilter",
-  props: {
-    initialOption: String,
-    options: {
-      type: Array,
-      default: [],
-    },
-    value: String,
-    params: Object,
-    clicked: Function,
-  },
+  props: ["initialOption", "options", "value", "params", "clicked"],
   data() {
     return {
-      selected: "",
+      selected: null,
     };
   },
   created() {
-    if (this.initialOption) this.selected = this.initialOption;
+    this.setSelectedFromProps();
+  },
+  watch: {
+    // se o pai atualizar o v-model (prop value), sincroniza
+    value() {
+      this.setSelectedFromProps();
+    },
+    // se o pai trocar a initialOption depois, sincroniza também
+    initialOption() {
+      this.setSelectedFromProps();
+    },
   },
   methods: {
     ...mapMutations("generic", ["addEvent"]),
+
+    setSelectedFromProps() {
+      // prioridade para v-model (value)
+      if (this.value !== undefined) {
+        this.selected = this.value;
+        return;
+      }
+
+      // aceita initialOption como valor (0, "", "x", etc.) ou como objeto { value: ... }
+      if (this.initialOption !== undefined && this.initialOption !== null) {
+        this.selected =
+          typeof this.initialOption === "object"
+            ? this.initialOption.value
+            : this.initialOption;
+      }
+    },
+
     execute(option) {
-      if (this.initialOption) this.selected = option.value;
-      this.addEvent({ name: option.eventName, data: option });
+      // SEMPRE atualiza o selecionado
+      this.selected = option.value;
+
+      // eventos
+      if (option.eventName) {
+        this.addEvent({ name: option.eventName, data: option });
+      }
+
+      // emite para v-model do pai
       this.$emit("input", option.value);
+
+      // callback opcional
       if (this.clicked) this.clicked(this.params);
     },
   },
-
 };
 </script>
+
 <style scoped>
 .btn-container {
   margin-left: 10px;
@@ -67,10 +95,10 @@ export default {
 }
 
 .selected-button-filter {
-  background-color: #4BB4E2;
-  color: white;
+  background-color: #4bb4e2;
+  color: #fff;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 15px;
 }
-</style>
+</style>

package/src/component/forms/RadioGroup.vue

@@ -78,13 +78,6 @@ export default {
 };
 </script>
 <style>
-.custom-control-label {
-  font-size: 13px !important;
-  font-weight: 400 !important;
-  text-transform: uppercase;
-  color: #778498;
-}
-
 .options {
   margin-top: 5px;
 }

package/src/component/layout/BottomActionsBar.vue

@@ -94,7 +94,7 @@ export default {
     width: 38px;
     height: 38px;
     border-radius: 50%;
-    background: #007bff;
+    background: #D98621;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -110,7 +110,7 @@ export default {
     top: -5px;
     right: -5px;
     background: #fff;
-    color: #007bff;
+    color: #D98621;
     font-size: 11px;
     font-weight: bold;
     border-radius: 50%;
@@ -119,7 +119,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    border: 2px solid #007bff;
+    border: 2px solid #D98621;
 }
 
 .bab-title {

package/src/component/shared/Table.vue

@@ -17,7 +17,7 @@
         <tr>
           <th class="td-checkbox" v-if="showChecks">
             <div class="hide-print">
-              <b-form-checkbox v-model="selectAll" @change="select" />
+              <b-form-checkbox v-model="selectAll"  @change="select" />
             </div>
           </th>
           <th v-for="(obj, ind) in header" :key="ind">
@@ -152,7 +152,7 @@ table tbody tr td {
 }
 
 .td-checkbox {
-  width: 30px;
+  width: 0px;
 }
 
 tr:hover {

package/src/component/shared/TableItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="item-main">
     <div v-if="obj.type === 'period-rent'" class="period-rent" @click="navegateTo(obj, row)" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <DisplayPeriodRent :periodRent="row[obj.field]" :fontSize="14" :showDeliveryDevolution="true" />
@@ -18,7 +18,7 @@
         {{ row[obj.field] }}
       </div>
     </div>
-    <div v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
+    <div class="item-align-center" v-if="obj.type === 'html' && row[obj.field]" :style="obj.styleBody"
       :class="convertClass(row[obj.fieldComparison], obj.classCssBody)">
       <div v-if="row[obj.field]" v-html="row[obj.field]"></div>
       <div v-else v-html="obj.html"></div>
@@ -149,6 +149,7 @@ export default {
 <style scoped>
 .field-second {
   color: rgb(83, 82, 82);
+  font-size: 13px;
 }
 
 .table-currency {
@@ -213,4 +214,15 @@ export default {
   margin-top: 11px;
   width: 200px;
 }
+
+.item-main {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.item-main > * {
+  display: table-cell;
+  vertical-align: middle;
+}
 </style>

package/src/component/shared/actions/ActionErrorContent.vue

@@ -23,8 +23,8 @@
         </ScrollBar>
 
         <div class="text-center">
-            <Button key="closeErrors" title="Fechar" color="white" backGroundColor="#6B7280" size="small"
-                :clicked="() => $emit('close')" />
+            <Button key="closeErrors" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white"
+                backGroundColor="#6D757B" size="small" :clicked="() => $emit('close')" />
         </div>
     </div>
 </template>
@@ -63,8 +63,8 @@ export default {
 }
 
 .error-details-title {
-    font-weight: 600;
-    color: #111827;
+    font-weight: 500;
+    color: #6b7280;
 }
 
 .error-details-sub {

package/src/component/shared/actions/ActionFooter.vue

@@ -10,7 +10,7 @@
         </div>
 
         <div v-else class="text-center">
-            <Button key="finish" title="Fechar" classIcon="fa-solid fa-xmark" color="white" backGroundColor="#6D757B" size="medium"
+            <Button key="finish" title="Fechar" classIcon="fa-solid fa-circle-xmark" color="white" backGroundColor="#6D757B" size="medium"
                 :clicked="finished" />
         </div>
     </div>