@nixweb/nixloc-ui 0.0.171 → 0.0.173

package/package.json

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

package/src/component/forms/CheckboxSimple.vue

@@ -38,6 +38,9 @@ export default {
   methods: {
     ...mapMutations("validation", ["updateFormDirty"]),
   },
+  mounted() {
+    this.valueLocal = this.value;
+  },
   watch: {
     value() {
       this.valueLocal = this.value;

package/src/component/forms/DateTime.vue

@@ -100,7 +100,7 @@ export default {
       if (this.range) {
         let obj = {
           fieldTarget: this.fieldTarget,
-          valueLocal: { start: this.valueLocal[0], end: this.valueLocal[1] },
+          value: { start: this.valueLocal[0], end: this.valueLocal[1] },
         };
         this.addFilter(obj);
       }
@@ -108,7 +108,7 @@ export default {
     close() {
       let obj = {
         fieldTarget: this.fieldTarget,
-        valueLocal: { start: "", end: "" },
+        value: { start: "", end: "" },
       };
       this.addFilter(obj);
     },

package/src/component/forms/ImageUpload.vue

@@ -233,7 +233,8 @@ export default {
 }
 
 .img-round {
-  border-radius: 50px;
+  border-radius: 100px;
+  margin-left: 15px;
 }
 
 .div-button {

package/src/component/forms/IncrementDecrement.vue

@@ -1,21 +1,17 @@
 <template>
   <div>
+    <label v-if="title">
+      <span class="title">{{ title }} </span>
+    </label>
     <div class="wrapper">
-      <span class="minus" @click="decrement">-</span>
-      <span class="num" @click="showEdit = true" v-if="!showEdit">{{
-        number
-      }}</span>
-      <input
-        class="input"
-        type="number"
-        @keyup.enter.prevent="showEdit = false"
-        v-model="number"
-        v-if="showEdit"
-      />
-      <span @click="showEdit = false" v-if="showEdit"
-        ><i class="fa-solid fa-check"></i
-      ></span>
-      <span class="plus" @click="increment">+</span>
+      <span :class="{ disabled: disabled }" class="minus" @click="decrement">-</span>
+      <span :class="{ disabled: disabled }" class="num" @click="showEdit = true" v-if="!showEdit">{{ number }}</span>
+      <input v-if="showEdit" class="input" type="number" @keyup.enter.prevent="showEdit = false" :disabled="disabled"
+        v-model="number" />
+      <span v-if="showEdit" :class="{ disabled: disabled }" @click="showEdit = false">
+        <i class="fa-solid fa-check"></i>
+      </span>
+      <span :class="{ disabled: disabled }" class="plus" @click="increment">+</span>
     </div>
   </div>
 </template>
@@ -25,7 +21,16 @@ import { mapMutations } from "vuex";
 
 export default {
   name: "IncrementDecrement",
-  props: ["value", "triggerEvent", "min", "max"],
+  props: [
+    "title",
+    "initialValue",
+    "value",
+    "disabled",
+    "fieldTarget",
+    "triggerEvent",
+    "min",
+    "max",
+  ],
   data() {
     return {
       number: 1,
@@ -36,12 +41,24 @@ export default {
     this.number = this.value;
   },
   methods: {
-    ...mapMutations("generic", ["addEvent"]),
+    ...mapMutations("generic", ["addFilter", "addEvent"]),
     increment() {
-      this.number++;
+      if (!this.disabled) {
+        this.number++;
+        this.executeFilter();
+      }
     },
     decrement() {
-      this.number--;
+      if (!this.disabled) {
+        this.number--;
+        this.executeFilter();
+      }
+    },
+    executeFilter() {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.number };
+        this.addFilter(obj);
+      }
     },
   },
   watch: {
@@ -89,6 +106,7 @@ export default {
   border: 1px solid #eaedf3;
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 3%);
 }
+
 .wrapper span {
   width: 100%;
   text-align: center;
@@ -97,6 +115,7 @@ export default {
   cursor: pointer;
   user-select: none;
 }
+
 .wrapper span.num {
   font-size: 17px;
   border-right: 1px solid #eaedf3;
@@ -112,4 +131,9 @@ export default {
   text-decoration: underline;
   transition: 0.1s;
 }
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
 </style>

package/src/component/forms/RadioGroup.vue

@@ -3,12 +3,8 @@
     <span class="title">{{ title }}</span>
     <div class="options">
       <b-form-group>
-        <b-form-radio-group
-          v-model="selected"
-          :options="options"
-          :disabled="disabled"
-          :stacked="stacked"
-        ></b-form-radio-group>
+        <b-form-radio-group v-model="selected" :options="options" :disabled="disabled"
+          :stacked="stacked"></b-form-radio-group>
       </b-form-group>
     </div>
   </div>
@@ -25,6 +21,7 @@ export default {
   props: {
     title: String,
     options: Array,
+    fieldTarget: String,
     disabled: Boolean,
     stacked: Boolean,
     markFormDirty: {
@@ -40,6 +37,7 @@ export default {
   },
   methods: {
     ...mapMutations("validation", ["updateFormDirty"]),
+    ...mapMutations("generic", ["addFilter"]),
   },
   watch: {
     value() {
@@ -47,8 +45,13 @@ export default {
     },
     selected() {
       this.$emit("input", this.selected);
+
       if (this.markFormDirty) this.updateFormDirty(true);
       if (this.changed) this.changed();
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: this.selected };
+        this.addFilter(obj);
+      }
     },
   },
 };
@@ -60,6 +63,7 @@ export default {
   text-transform: uppercase;
   color: #778498;
 }
+
 .options {
   margin-top: 5px;
 }

package/src/component/forms/Select.vue

@@ -243,7 +243,7 @@ export default {
       this.hideVodal(this.nameNewRegister);
     },
     cleanSelect() {
-      let obj = { id: "", conteudo: "" };
+      let obj = { id: "", content: "" };
       this.currentValue = obj;
       this.$emit("input", obj);
       this.$refs.multiselect.deactivate();
@@ -295,7 +295,7 @@ export default {
     resetForm: {
       handler(form) {
         if (form.nome == this.formName) {
-          let obj = { id: "", conteudo: "" };
+          let obj = { id: "", content: "" };
           this.currentValue = obj;
           this.$emit("input", obj);
           this.formDirty = false;

package/src/component/forms/SideBar.vue

@@ -70,10 +70,27 @@ export default {
   border-radius: 15px 15px 0px 0px !important;
   margin-top: 20px !important;
   margin-right: 5% !important;
+  padding-top: 20px !important;
 }
 
 .b-sidebar > .b-sidebar-body {
-  overflow: hidden !important;
+  overflow-y: scroll !important;
+}
+
+.b-sidebar > .b-sidebar-body::-webkit-scrollbar-track {
+  background-color: white;
+  border-radius: 20px;
+}
+
+.b-sidebar > .b-sidebar-body::-webkit-scrollbar {
+  width: 6px;
+  background-color: #b9babb;
+  border-radius: 20px;
+}
+
+.b-sidebar > .b-sidebar-body::-webkit-scrollbar-thumb {
+  background-color: #b9babb;
+  border-radius: 20px;
 }
 
 .title-side-bar {

package/src/component/layout/ScrollBar.vue

@@ -2,9 +2,13 @@
   <div
     :id="id"
     class="scrollbar"
-    :style="'max-height:' + maxHeight + 'px' + ';' + 'min-height:' + minHeight + 'px'"
+    :style="
+      'max-height:' + maxHeight + 'px' + ';' + 'min-height:' + minHeight + 'px'
+    "
   >
-    <slot></slot>
+    <div id="scroll-bar">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -23,7 +27,7 @@ export default {
     const listElm = document.querySelector("#" + this.id);
     if (listElm != null)
       listElm.addEventListener("scroll", (e) => {
-        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {  
+        if (listElm.scrollTop + listElm.clientHeight >= listElm.scrollHeight) {
           if (this.endScrollBar) this.endScrollBar();
         }
       });
@@ -39,5 +43,4 @@ div {
   overflow-y: visible;
   overflow-x: hidden;
 }
-
 </style>

package/src/component/shared/HorizontalFilter.vue

@@ -1,34 +1,25 @@
 <template>
   <div class="filter-horizontal">
-    <Collapse
-      :buttonShow="{
-        title: 'Mais filtros',
-        icon: 'fas fa-arrow-alt-circle-down',
-        type: 'info',
-      }"
-      :buttonHide="{
-        title: 'Menos filtros',
-        icon: 'fas fa-arrow-alt-circle-up',
-        type: 'warning',
-      }"
-    >
+    <Collapse :buttonShow="{
+      title: 'Mais filtros',
+      icon: 'fas fa-arrow-alt-circle-down',
+      type: 'info',
+    }" :buttonHide="{
+  title: 'Menos filtros',
+  icon: 'fas fa-arrow-alt-circle-up',
+  type: 'warning',
+}">
+      <slot name="content-filter-horizontal"></slot>
       <b-row>
-        <b-col :sm="showTotalPerPage ? 10 : 12">
-          <slot name="content-filter-horizontal"></slot>
-        </b-col>
+        <b-col :sm="showTotalPerPage ? 10 : 12"></b-col>
         <b-col xs="12" sm="12" md="12" lg="2" xl="2" v-if="showTotalPerPage">
-          <SelectStatic
-            title="Mostrar"
-            fieldTarget="totalPerPage"
-            :initialValue="{ content: '10', id: 10 }"
-            :data="[
-              { content: '10', id: 10 },
-              { content: '20', id: 20 },
-              { content: '30', id: 30 },
-              { content: '50', id: 50 },
-              { content: '100', id: 100 },
-            ]"
-          />
+          <SelectStatic title="Mostrar" fieldTarget="totalPerPage" :initialValue="{ content: '10', id: 10 }" :data="[
+            { content: '10', id: 10 },
+            { content: '20', id: 20 },
+            { content: '30', id: 30 },
+            { content: '50', id: 50 },
+            { content: '100', id: 100 },
+          ]" />
         </b-col>
       </b-row>
     </Collapse>

package/src/component/shared/SelectOption.vue

@@ -4,44 +4,25 @@
       {{ title }}
     </div>
     <div class="alignment" v-for="option in options">
-      <div
-        class="option"
-        :style="'width:' + width + 'px; height:' + height + 'px'"
-        :class="{ selected: option.value == selected }"
-        @click="optionSelected(option.value)"
-      >
-        <div class="div-content text-center">
-          <span :style="'font-size:' + option.titleSize + 'px;'">
+      <div class="option" :style="'width:' + width + 'px; height:' + height + 'px'"
+        :class="{ selected: option.value == selected }" @click="optionSelected(option.value)">
+        <div class="text-center">
+          <span :class="{ disabled: disabled }" :style="'font-size:' + option.titleSize + 'px;'">
             <i v-if="size === 'small'" :class="option.icon"></i>
             {{ option.title }}
           </span>
-          <div
-            v-if="size === 'medium'"
-            class="icon"
-            :style="'font-size:' + option.iconSize + 'px;'"
-          >
+          <div v-if="size === 'medium'" class="icon" :style="'font-size:' + option.iconSize + 'px;'">
             <i :class="option.icon"></i>
           </div>
         </div>
         <div v-if="option.tipId">
-          <i
-            v-b-tooltip.hover
-            :title="tip(option.tipId)"
-            class="fas fa-question-circle"
-          ></i>
+          <i v-b-tooltip.hover :title="tip(option.tipId)" class="fas fa-question-circle"></i>
         </div>
       </div>
     </div>
     <div class="div-btn" v-if="showButtonNext">
-      <Button
-        _key="btnClickedNext"
-        type="info"
-        title="Avançar"
-        :disabled="selected == null"
-        :classIcon="buttonClassIcon"
-        :size="buttonSize"
-        :clicked="execute"
-      />
+      <Button _key="btnClickedNext" type="info" title="Avançar" :disabled="selected == null" :classIcon="buttonClassIcon"
+        :size="buttonSize" :clicked="execute" />
     </div>
   </div>
 </template>
@@ -58,14 +39,17 @@ export default {
   props: {
     title: String,
     titleSize: Number,
+    fieldTarget: String,
     buttonSize: String,
     buttonClassIcon: String,
     showButtonNext: { type: Boolean, default: true },
     size: { type: String, default: "medium" },
     alignment: { type: String, default: "text-center" },
+    disabled: Boolean,
     width: Number,
     height: Number,
     options: Array,
+    initialValue: Number,
     value: Number,
     clickedNext: Function,
   },
@@ -75,10 +59,19 @@ export default {
     };
   },
   methods: {
-    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("generic", ["addFilter", "removeLoading"]),
     optionSelected(value) {
-      this.selected = value;
-      this.$emit("input", value);
+      if (!this.disabled) {
+        this.selected = value;
+        this.$emit("input", value);
+        this.executeFilter(value);
+      }
+    },
+    executeFilter(value) {
+      if (this.fieldTarget) {
+        let obj = { fieldTarget: this.fieldTarget, value: value };
+        this.addFilter(obj);
+      }
     },
     execute() {
       let self = this;
@@ -96,7 +89,7 @@ export default {
 <style scoped>
 .div-main {
   margin: auto;
-  padding: 10px;
+  padding: 0px;
 }
 
 .option {
@@ -110,6 +103,9 @@ export default {
   margin-bottom: 10px;
   font-size: 16px;
   font-weight: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-shadow: 0px 10px 20px -6px rgb(0 0 0 / 2%);
 }
 
@@ -121,10 +117,6 @@ export default {
   background-color: white;
 }
 
-.div-content {
-  padding: 10px;
-}
-
 .selected {
   background-color: white;
   border-color: #4680a5;
@@ -147,4 +139,9 @@ export default {
 .div-btn {
   margin-top: 10px;
 }
+
+.disabled {
+  color: grey;
+  opacity: 0.5;
+}
 </style>

package/src/component/template/ListViewWithDataHandler.vue

@@ -26,23 +26,13 @@
       <Loading type="line" :center="false" v-show="isLoading('loadingLine')" />
       <div class="fixed-bar-options" v-show="selected.length > 0">
         <div>
-          <Button
-            v-if="buttonRemove"
-            key="remove"
-            :title="`Remover  ${selected.length}`"
-            type="danger"
-            size="small"
-            :clicked="removeSelected"
-          />
+          <Button v-if="buttonRemove" key="remove" :title="`Remover  ${selected.length}`" type="danger" size="small"
+            :clicked="removeSelected" />
           <slot name="content-buttons-table-header"></slot>
         </div>
       </div>
-      <Table
-        :header="templateList.headerTable"
-        :data="content.data"
-        :showChecks="templateList.showChecks"
-        :dragAndDrop="templateList.dragAndDrop"
-      >
+      <Table :header="templateList.headerTable" :data="content.data" :showChecks="templateList.showChecks"
+        :dragAndDrop="templateList.dragAndDrop">
         <div slot="content-buttons-table">
           <slot name="content-buttons-table"></slot>
         </div>
@@ -171,9 +161,36 @@ export default {
           notNotifyToast: true,
         };
 
-        this.orderAllApi(params).then((response) => {});
+        this.orderAllApi(params).then((response) => { });
       }
     },
+    selectFilter(value) {
+      let fieldTarget = value.fieldTarget;
+      let obj = { key: fieldTarget, value: value.value };
+      this.paramsFilter.push(obj);
+
+      var result = {};
+      for (var i = 0; i < this.paramsFilter.length; i++) {
+        let key = this.paramsFilter[i].key;
+        let value = this.paramsFilter[i].value;
+
+        if (key == "period") {
+          result["start"] = value.start;
+          result["end"] = value.end;
+        } else {
+          result[key] = value;
+        }
+      }
+
+      this.dynamicFilter = result;
+
+      this.updatePagination({
+        key: "templateList",
+        totalPerPage: this.dynamicFilter.totalPerPage,
+      });
+
+      this.getAll();
+    },
     removeSelected() {
       let params = {
         url: this.templateList.urlDeleteAllApi,
@@ -227,31 +244,7 @@ export default {
     },
     selectStatic: {
       handler(value) {
-        let fieldTarget = value.fieldTarget;
-        let obj = { key: fieldTarget, value: value.value };
-        this.paramsFilter.push(obj);
-
-        var result = {};
-        for (var i = 0; i < this.paramsFilter.length; i++) {
-          let key = this.paramsFilter[i].key;
-          let value = this.paramsFilter[i].value;
-
-          if (key == "period") {
-            result["start"] = value.inicio;
-            result["end"] = value.fim;
-          } else {
-            result[key] = value;
-          }
-        }
-
-        this.dynamicFilter = result;
-
-        this.updatePagination({
-          key: "templateList",
-          totalPerPage: this.dynamicFilter.totalPerPage,
-        });
-
-        this.getAll();
+        this.selectFilter(value);
       },
       deep: true,
     },

package/src/component/template/ViewTemplateWithTable.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <Panel
-      :module="panel.module"
-      :title="panel.title"
-      :showVerticalFilter="panel.showVerticalFilter"
-      :showSearch="panel.showSearch"
-      :showButtons="panel.showButtons"
-    >
+    <Panel :module="panel.module" :title="panel.title" :showVerticalFilter="panel.showVerticalFilter"
+      :showSearch="panel.showSearch" :showButtons="panel.showButtons">
       <div slot="content-filter-vertical">
         <slot name="content-filter-vertical"></slot>
       </div>
@@ -14,11 +9,9 @@
         <slot name="content-buttons"></slot>
       </div>
       <div slot="content-main">
+        <slot name="content-between-search-table"></slot>
         <Molded>
-          <ListViewWithDataHandler
-            :templateList="templateList"
-            :buttonRemove="buttonRemove"
-          >
+          <ListViewWithDataHandler :templateList="templateList" :propsParam="propsParam" :buttonRemove="buttonRemove">
             <div slot="content-buttons-table-header">
               <slot name="content-buttons-table-header"></slot>
             </div>
@@ -47,6 +40,7 @@ export default {
   props: {
     panel: Object,
     templateList: Object,
+    propsParam: Object,
     buttonRemove: {
       type: Boolean,
       default: true,

package/src/store/modules/generic.js

@@ -308,9 +308,11 @@ export default {
             });
         },
         addFilter: (state, obj) => {
-            state.selectStatic.dateTime = new Date();
-            state.selectStatic.fieldTarget = obj.fieldTarget;
-            state.selectStatic.value = obj.value;
+            setTimeout(function () {
+                state.selectStatic.dateTime = new Date();
+                state.selectStatic.fieldTarget = obj.fieldTarget;
+                state.selectStatic.value = obj.value;
+            }, 100);
         },
     },
     actions: {