@nixweb/nixloc-ui 0.0.125 → 0.0.128

package/src/component/shared/query-builder/SelectRule.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="escolher-filter" :tabindex="tabindex" @blur="abrir = false">
-    <div class="selecionado" :class="{ abrir: abrir }" @click="abrir = !abrir">
-      {{ selecionado }}
+  <div class="selected-filter" @blur="open = false">
+    <div class="selected" :class="{ open: open }" @click="open = !open">
+      {{ selected }}
     </div>
-    <div class="items" :class="{ hide: !abrir }">
+    <div class="items" :class="{ hide: !open }">
       <div v-for="(options, i) of options" :key="i">
         <div @click="select(options)">
           <span :class="options.classCss">
@@ -18,28 +18,28 @@
 
 <script>
 export default {
-  props: ["options", "tabindex", "value"],
+  props: ["options", "value"],
   data() {
     return {
-      selecionado: "Selecione os filtros",
-      abrir: false,
+      selected: "Selecione os filtros",
+      open: false,
     };
   },
   mounted() {
-    this.$emit("input", this.selecionado);
+    this.$emit("input", this.selected);
   },
   methods: {
     select(options) {
       this.$emit("input", options);
-      this.selecionado = options.title;
-      this.abrir = false;
+      this.selected = options.title;
+      this.open = false;
     },
   },
 };
 </script>
 
 <style scoped>
-.escolher-filter {
+.selected-filter {
   position: relative;
   width: 100%;
   text-align: left;
@@ -49,7 +49,7 @@ export default {
   z-index: 1000;
 }
 
-.escolher-filter .selecionado {
+.selected-filter .selected {
   background-color: white;
   border-bottom: 1px solid #dbdee0;
   color: black;
@@ -58,7 +58,7 @@ export default {
   user-select: none;
 }
 
-.escolher-filter .selecionado:after {
+.selected-filter .selected:after {
   position: absolute;
   content: "";
   top: 22px;
@@ -69,7 +69,7 @@ export default {
   border-color: black transparent transparent transparent;
 }
 
-.escolher-filter .items {
+.selected-filter .items {
   color: black;
   border-radius: 0px 0px 6px 6px;
   overflow: hidden;
@@ -83,7 +83,7 @@ export default {
   overflow-x: hidden;
 }
 
-.escolher-filter .items div {
+.selected-filter .items div {
   color: black;
   padding-left: 1em;
   cursor: pointer;

package/src/component/shared/query-builder/Tags.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <div class="side-by-side div-tag" v-for="tag in tags" :key="tag.id">
+    <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
       <Tag
         :eventName="eventName"
         :eventData="tag"
         :title="tag.title"
-        :valor="tag.valor"
+        :value="tag.value"
       />
     </div>
   </div>
@@ -22,27 +22,43 @@ export default {
   props: {
     eventName: String,
   },
-
+  data() {
+    return {
+      tagsLocal: [],
+    };
+  },
+  created() {
+    let self = this;
+    setTimeout(function () {
+      self.tagsLocal = self.tags;
+    }, 100);
+  },
   computed: {
     ...mapGetters("report", ["tags"]),
     ...mapGetters("generic", ["showModal", "event"]),
   },
   methods: {
-    ...mapMutations("report", ["removeFiltroSelecionado"]),
+    ...mapMutations("report", ["removeSelectedRule"]),
   },
   watch: {
     event: {
       handler(event) {
-        if (event.nome == "tagRemovida") {
-          var tags = this.tags.filter((item) => {
+        if (event.name == "tagRemoved") {
+          var tags = this.tagsLocal.filter((item) => {
             return item.id != event.data.id;
           });
-          this.tags = tags;
-          this.removeFiltroSelecionado(event.data.id);
+          this.tagsLocal = tags;
+          this.removeSelectedRule(event.data.id);
         }
       },
       deep: true,
     },
+    tags: {
+      handler(value) {
+        this.tagsLocal = value;
+      },
+      deep: true,
+    },
   },
 };
 </script>

package/src/component/shared/query-builder/utilities.js

@@ -1,22 +1,22 @@
-/**
- * Returns a depply cloned object without reference.
- * Copied from Vue MultiSelect and Vuex.
- * @type {Object}
- */
-const deepClone = function (obj) {
-  if (Array.isArray(obj)) {
-    return obj.map(deepClone)
-  } else if (obj && typeof obj === 'object') {
-    var cloned = {}
-    var keys = Object.keys(obj)
-    for (var i = 0, l = keys.length; i < l; i++) {
-      var key = keys[i]
-      cloned[key] = deepClone(obj[key])
-    }
-    return cloned
-  } else {
-    return obj
-  }
-}
-
+/**
+ * Returns a depply cloned object without reference.
+ * Copied from Vue MultiSelect and Vuex.
+ * @type {Object}
+ */
+const deepClone = function (obj) {
+  if (Array.isArray(obj)) {
+    return obj.map(deepClone)
+  } else if (obj && typeof obj === 'object') {
+    var cloned = {}
+    var keys = Object.keys(obj)
+    for (var i = 0, l = keys.length; i < l; i++) {
+      var key = keys[i]
+      cloned[key] = deepClone(obj[key])
+    }
+    return cloned
+  } else {
+    return obj
+  }
+}
+
 export default deepClone;