@nixweb/nixloc-ui 0.0.169 → 0.0.170

package/package.json

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

package/src/component/forms/RadioGroup.vue

@@ -22,7 +22,17 @@ import { mapMutations } from "vuex";
 export default {
   components: { Tip },
   name: "options",
-  props: ["title", "options", "disabled", "value", "stacked", "markFormDirty"],
+  props: {
+    title: String,
+    options: Array,
+    disabled: Boolean,
+    stacked: Boolean,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
+    value: Number,
+  },
   data() {
     return {
       selected: this.value,
@@ -37,7 +47,7 @@ export default {
     },
     selected() {
       this.$emit("input", this.selected);
-      this.updateFormDirty(true);
+      if (this.markFormDirty) this.updateFormDirty(true);
       if (this.changed) this.changed();
     },
   },

package/src/component/forms/Select.vue

@@ -124,6 +124,7 @@ export default {
       type: Boolean,
       default: true,
     },
+    clickedNewRegister: Function,
     titleNewRegister: String,
     widthNewRegister: Number,
     heightNewRegister: Number,
@@ -158,6 +159,7 @@ export default {
       loading: true,
       notifications: [],
       formDirty: false,
+      names: [],
     };
   },
   created() {
@@ -227,14 +229,18 @@ export default {
       });
     },
     addNewRegister() {
-      this.openVodal(this.nameNewRegister);
-      this.resetValidation(this.nameNewRegister);
-      this.removeNotificarions();
-      this.$refs.multiselect.deactivate();
-      this.removeLoading(["addNewRegister"]);
+      if (this.clickedNewRegister) {
+        this.clickedNewRegister();
+      } else {
+        this.openVodal(this.nameNewRegister);
+        this.resetValidation(this.nameNewRegister);
+        this.removeNotificarions();
+        this.$refs.multiselect.deactivate();
+        this.removeLoading(["addNewRegister"]);
+      }
     },
     hide() {
-      this.hideVodal();
+      this.hideVodal(this.nameNewRegister);
     },
     cleanSelect() {
       let obj = { id: "", conteudo: "" };

package/src/component/forms/SideBar.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <b-sidebar
+      id="my-sidebar"
+      :title="title"
+      width="90%"
+      bg-variant="white"
+      no-header
+      right
+      backdrop-variant="dark"
+      @hidden="hideSideBar"
+      backdrop
+      shadow
+    >
+      <div class="margin-side-bar">
+        <div>
+          <Messages />
+          <b-row>
+            <b-col sm="6">
+              <div class="title-side-bar">{{ title }}</div>
+            </b-col>
+            <b-col sm="6">
+              <div class="text-right" @click="hideSideBar">
+                <i class="fa-solid fa-circle-xmark icon-side-bar"></i>
+              </div>
+            </b-col>
+          </b-row>
+        </div>
+        <br />
+        <slot></slot>
+      </div>
+    </b-sidebar>
+  </div>
+</template>
+
+<script>
+import Messages from "@nixweb/nixloc-ui/src/component/shared/Messages";
+import { mapState, mapMutations } from "vuex";
+
+export default {
+  name: "SideBar",
+  components: {
+    Messages,
+  },
+  props: {
+    title: String,
+  },
+  computed: {
+    ...mapState("generic", ["sideBar"]),
+  },
+  methods: {
+    ...mapMutations("generic", ["hideSideBar"]),
+    hide() {
+      this.$root.$emit("bv::toggle::collapse", "my-sidebar");
+      this.hideSideBar();
+    },
+  },
+  watch: {
+    sideBar: {
+      handler(sideBar) {
+        this.$root.$emit("bv::toggle::collapse", "my-sidebar");
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style>
+.b-sidebar {
+  border-radius: 15px 15px 0px 0px !important;
+  margin-top: 20px !important;
+  margin-right: 5% !important;
+}
+
+.b-sidebar > .b-sidebar-body {
+  overflow: hidden !important;
+}
+
+.title-side-bar {
+  font-size: 20px;
+}
+
+.icon-side-bar {
+  font-size: 30px;
+  cursor: pointer;
+}
+
+.margin-side-bar {
+  margin-top: 20px;
+  margin-left: 30px;
+  margin-right: 20px;
+}
+</style>

package/src/component/layout/FixedBar.vue

@@ -3,10 +3,13 @@
     <div
       v-show="!isLoading('panel')"
       class="bar side-by-side"
-      :style="'min-height:' + height + 'px; background-color:' + backgroundColor"
+      :style="
+        'min-height:' + height + 'px; background-color:' + backgroundColor
+      "
       :class="{
         top: position == 'top',
         footer: position == 'footer',
+        none: position == 'none',
       }"
     >
       <div class="size">
@@ -75,6 +78,11 @@ export default {
   margin: auto;
 }
 
+.none {
+  left: 0;
+  right: 0;
+}
+
 .top {
   top: 0;
   left: 0;

package/src/component/shared/SaveCancel.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
     <FixedBar
-      position="footer"
+      :position="positionFixedBar"
       backgroundColor="#FAFAFC"
-      v-show="formDirty && !modal.open && on"
+      v-show="formDirty && !modal.open && on || showFixed"
     >
-      <div class="margin">
+      <div class="margin" :style="'margin-bottom:' + marginBottom + 'px'">
         <Button
           _key="cancelSaveCancel"
           eventName="cancelSaveCancel"
@@ -16,7 +16,7 @@
         />
         <Button
           _key="saveSaveCancel"
-          eventName="saveSaveCancel"
+          :eventName="eventName"
           classIcon="fa-solid fa-floppy-disk"
           title="Salvar"
           type="success"
@@ -38,6 +38,22 @@ export default {
   components: { FixedBar, Button },
   props: {
     formName: String,
+    showFixed: {
+      type: Boolean,
+      default: false,
+    },
+    eventName: {
+      type: String,
+      default: "saveSaveCancel",
+    },
+    positionFixedBar: {
+      type: String,
+      default: "footer",
+    },
+    marginBottom: {
+      type: Number,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -70,10 +86,11 @@ export default {
   },
   methods: {
     ...mapMutations("validation", ["updateFormDirty", "resetValidation"]),
-    ...mapMutations("generic", ["removeLoading"]),
+    ...mapMutations("generic", ["removeLoading", "hideSideBar"]),
     cancel() {
       this.updateFormDirty(false);
       this.removeLoading(["cancelSaveCancel"]);
+      this.hideSideBar();
     },
   },
   watch: {

package/src/component/value-objects/Address.vue

@@ -9,6 +9,7 @@
           :mask="'#####-###'"
           :maxLength="9"
           :required="required"
+          :markFormDirty="markFormDirty"
           v-model="address.zipCode"
         >
           <div class="glyphicon margin-button">
@@ -29,6 +30,7 @@
           :formName="formName"
           :maxLength="150"
           :required="required"
+          :markFormDirty="markFormDirty"
           v-model="address.street"
         />
       </b-col>
@@ -38,6 +40,7 @@
           field="number"
           :formName="formName"
           :maxLength="20"
+          :markFormDirty="markFormDirty"
           v-model="address.number"
         />
       </b-col>
@@ -47,6 +50,7 @@
           field="complement"
           :formName="formName"
           :maxLength="50"
+          :markFormDirty="markFormDirty"
           v-model="address.complement"
         />
       </b-col>
@@ -60,6 +64,7 @@
           :formName="formName"
           :maxLength="100"
           :required="required"
+          :markFormDirty="markFormDirty"
           v-model="address.province"
         /> </b-col
       ><b-col xs="12" sm="12" md="12" lg="5" xl="5">
@@ -69,6 +74,7 @@
           :formName="formName"
           :maxLength="100"
           :required="required"
+          :markFormDirty="markFormDirty"
           v-model="address.city"
         />
       </b-col>
@@ -77,6 +83,7 @@
           title="UF"
           fieldTarget="uf"
           :required="required"
+          :markFormDirty="markFormDirty"
           v-model="address.state"
           :data="states"
         /> </b-col
@@ -97,6 +104,10 @@ export default {
   name: "Address",
   props: {
     formName: String,
+    markFormDirty: {
+      type: Boolean,
+      default: true,
+    },
     required: {
       type: Boolean,
       default: false,
@@ -146,7 +157,11 @@ export default {
     ...mapGetters("generic", ["event"]),
   },
   methods: {
-    ...mapMutations("generic", ["addEvent", "addNotifications", "removeLoading"]),
+    ...mapMutations("generic", [
+      "addEvent",
+      "addNotifications",
+      "removeLoading",
+    ]),
     searchZipCode() {
       let zipCode = this.address.zipCode.replace(/\.|\-/g, "");
       let url = `https://viacep.com.br/ws/${zipCode}/json/`;
@@ -163,7 +178,8 @@ export default {
       this.address.street = data.logradouro;
       this.address.number = data.complemento;
       this.address.province = data.bairro;
-      this.address.city = data.localidade == undefined ? data.municipio : data.localidade;
+      this.address.city =
+        data.localidade == undefined ? data.municipio : data.localidade;
       this.address.state = { id: data.uf, content: data.uf };
     },
   },

package/src/store/modules/generic.js

@@ -10,6 +10,10 @@ export default {
             open: false
         },
         vodal: {
+            name: [],
+            open: false
+        },
+        sideBar: {
             name: undefined,
             open: false
         },
@@ -49,8 +53,7 @@ export default {
             return false;
         },
         showVodal: (state) => (name) => {
-            if (name == state.vodal.name) return true;
-            return false;
+            return state.vodal.name.includes(name);
         },
         isLoading: (state) => (key) => {
             var loading = state.loading.find(value => {
@@ -207,12 +210,20 @@ export default {
         hideModal: (state) => {
             state.modal.open = false;
         },
+        openSideBar: (state, name) => {
+            state.sideBar.name = name;
+            state.sideBar.open = true;
+        },
+        hideSideBar: (state) => {
+            state.sideBar.open = false;
+        },
         openVodal: (state, name) => {
-            state.vodal.name = name;
+            state.vodal.name.push(name);
             state.vodal.open = true;
         },
-        hideVodal: (state) => {
-            state.vodal.name = "";
+        hideVodal: (state, name) => {
+            let filter = state.vodal.name.filter(x => x != name);
+            state.vodal.name = filter;
             state.vodal.open = false;
         },
         updateSearch: (state, value) => {