@nixweb/nixloc-ui 1.19.0 → 1.21.0

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

@@ -1,93 +1,93 @@
-<template>
-  <div>
-    <b-row>
-      <b-col sm="6">
-        <ScrollBar :minHeight="200" :maxHeight="250">
-          <div class="div-options">
-            <CheckboxGroup
-              :stacked="true"
-              :initialValue="fieldsLocal.selected"
-              :options="fieldsLocal.options"
-              v-model="fieldsLocal.selected"
-            />
-          </div>
-        </ScrollBar>
-      </b-col>
-      <b-col sm="6">
-        <RadioGroup
-          :options="[
-            { text: 'Crescente', value: 'asc' },
-            { text: 'Decrescente', value: 'desc' },
-          ]"
-          v-model="fieldsLocal.orderBy"
-        />
-        <SelectStatic
-          title="Ordenar"
-          fieldTarget="order"
-          :initialValue="{ content: fieldsLocal.sort.content, id: fieldsLocal.sort.id }"
-          :data="options"
-          v-model="fieldsLocal.sort"
-        />
-      </b-col>
-    </b-row>
-  </div>
-</template>
-<script>
-import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
-import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
-import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
-import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
-
-import { mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "Fields",
-  components: {
-    CheckboxGroup,
-    SelectStatic,
-    ScrollBar,
-    RadioGroup,
-  },
-  data() {
-    return {
-      fieldsLocal: {
-        selected: [],
-        options: [],
-        sort: { content: "", id: "asc" },
-        orderBy: "",
-      },
-    };
-  },
-  created() {
-    // converte getters para data local para que possa ser manipulado com o v-model
-    this.fieldsLocal = this.fields;
-  },
-  computed: {
-    ...mapGetters("report", ["fields"]),
-    options() {
-      let options = [];
-      this.fields.options.forEach((option) => {
-        let obj = { content: option.text, id: option.value };
-        options.push(obj);
-      });
-      return options;
-    },
-  },
-  methods: {
-    ...mapMutations("report", ["updateSelectedFields"]),
-  },
-  watch: {
-    fieldsLocal: {
-      handler(fieldsLocal) {
-        this.updateSelectedFields(fieldsLocal);
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-<style scoped>
-.div-options {
-  padding-left: 0px;
-}
-</style>
+<template>
+  <div>
+    <b-row>
+      <b-col sm="6">
+        <ScrollBar :minHeight="200" :maxHeight="250">
+          <div class="div-options">
+            <CheckboxGroup
+              :stacked="true"
+              :initialValue="fieldsLocal.selected"
+              :options="fieldsLocal.options"
+              v-model="fieldsLocal.selected"
+            />
+          </div>
+        </ScrollBar>
+      </b-col>
+      <b-col sm="6">
+        <RadioGroup
+          :options="[
+            { text: 'Crescente', value: 'asc' },
+            { text: 'Decrescente', value: 'desc' },
+          ]"
+          v-model="fieldsLocal.orderBy"
+        />
+        <SelectStatic
+          title="Ordenar"
+          fieldTarget="order"
+          :initialValue="{ content: fieldsLocal.sort.content, id: fieldsLocal.sort.id }"
+          :data="options"
+          v-model="fieldsLocal.sort"
+        />
+      </b-col>
+    </b-row>
+  </div>
+</template>
+<script>
+import SelectStatic from "@nixweb/nixloc-ui/src/component/forms/SelectStatic";
+import RadioGroup from "@nixweb/nixloc-ui/src/component/forms/RadioGroup";
+import CheckboxGroup from "@nixweb/nixloc-ui/src/component/forms/CheckboxGroup";
+import ScrollBar from "@nixweb/nixloc-ui/src/component/layout/ScrollBar.vue";
+
+import { mapMutations, mapGetters } from "vuex";
+
+export default {
+  name: "Fields",
+  components: {
+    CheckboxGroup,
+    SelectStatic,
+    ScrollBar,
+    RadioGroup,
+  },
+  data() {
+    return {
+      fieldsLocal: {
+        selected: [],
+        options: [],
+        sort: { content: "", id: "asc" },
+        orderBy: "",
+      },
+    };
+  },
+  created() {
+    // converte getters para data local para que possa ser manipulado com o v-model
+    this.fieldsLocal = this.fields;
+  },
+  computed: {
+    ...mapGetters("report", ["fields"]),
+    options() {
+      let options = [];
+      this.fields.options.forEach((option) => {
+        let obj = { content: option.text, id: option.value };
+        options.push(obj);
+      });
+      return options;
+    },
+  },
+  methods: {
+    ...mapMutations("report", ["updateSelectedFields"]),
+  },
+  watch: {
+    fieldsLocal: {
+      handler(fieldsLocal) {
+        this.updateSelectedFields(fieldsLocal);
+      },
+      deep: true,
+    },
+  },
+};
+</script>
+<style scoped>
+.div-options {
+  padding-left: 0px;
+}
+</style>

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

@@ -1,68 +1,68 @@
-<template>
-  <div>
-    <QueryBuilder />
-  </div>
-</template>
-
-<script>
-import QueryBuilder from "./QueryBuilder.vue";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "Rules",
-  components: { QueryBuilder },
-};
-</script>
-
-<style>
-.btn-secondary {
-  background-color: #4ab4e2 !important;
-  border: 0px !important;
-  font-size: 14px !important;
-  border-radius: 20px !important;
-}
-
-.vue-query-builder .vqb-group.depth-1 .vqb-rule,
-.vue-query-builder .vqb-group.depth-2 {
-  border-left: 2px solid #577696 !important;
-}
-
-.vue-query-builder .vqb-rule {
-  background-color: #fafafc !important;
-}
-
-.form-i nline label {
-  font-size: 14px !important;
-}
-
-.card-header {
-  padding: 5px !important;
-}
-
-.card {
-  padding: 10px !important;
-}
-
-.vqb-rule {
-  margin-bottom: 10px !important;
-}
-
-.rule-actions {
-  margin-bottom: 10px !important;
-}
-
-.mr-2 {
-  font-size: 14px !important;
-  margin-left: 10px !important;
-}
-
-.form-inline .form-control {
-  min-width: 200px !important;
-}
-
-option {
-  font-size: 14px !important;
-  padding: 5px !important;
-}
-</style>
+<template>
+  <div>
+    <QueryBuilder />
+  </div>
+</template>
+
+<script>
+import QueryBuilder from "./QueryBuilder.vue";
+
+import { mapMutations } from "vuex";
+
+export default {
+  name: "Rules",
+  components: { QueryBuilder },
+};
+</script>
+
+<style>
+.btn-secondary {
+  background-color: #4ab4e2 !important;
+  border: 0px !important;
+  font-size: 14px !important;
+  border-radius: 20px !important;
+}
+
+.vue-query-builder .vqb-group.depth-1 .vqb-rule,
+.vue-query-builder .vqb-group.depth-2 {
+  border-left: 2px solid #577696 !important;
+}
+
+.vue-query-builder .vqb-rule {
+  background-color: #fafafc !important;
+}
+
+.form-i nline label {
+  font-size: 14px !important;
+}
+
+.card-header {
+  padding: 5px !important;
+}
+
+.card {
+  padding: 10px !important;
+}
+
+.vqb-rule {
+  margin-bottom: 10px !important;
+}
+
+.rule-actions {
+  margin-bottom: 10px !important;
+}
+
+.mr-2 {
+  font-size: 14px !important;
+  margin-left: 10px !important;
+}
+
+.form-inline .form-control {
+  min-width: 200px !important;
+}
+
+option {
+  font-size: 14px !important;
+  padding: 5px !important;
+}
+</style>

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

@@ -1,97 +1,97 @@
-<template>
-  <div class="selected-filter" @blur="open = false">
-    <div class="selected" :class="{ open: open }" @click="open = !open">
-      <span class="title">{{ selected }}</span>
-    </div>
-    <div class="items" :class="{ hide: !open }">
-      <div v-for="(options, i) of options" :key="i">
-        <div @click="select(options)">
-          <span :class="options.classCss">
-            <i class="icon-query-builder" :class="options.icon"></i>
-            <span class="title"> {{ options.title }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: ["options", "value"],
-  data() {
-    return {
-      selected: "Selecione os filtros",
-      open: false,
-    };
-  },
-  mounted() {
-    this.$emit("input", this.selected);
-  },
-  methods: {
-    select(options) {
-      this.$emit("input", options);
-      this.selected = options.title;
-      this.open = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.selected-filter {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  outline: none;
-  height: 40px;
-  line-height: 40px;
-  z-index: 500;
-}
-
-.selected-filter .selected {
-  background-color: white;
-  border: 1px solid #DBDEE0;
-  border-radius: 6px;
-  color: #495057;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.selected-filter .selected:after {
-  position: absolute;
-  content: "";
-  top: 19px;
-  right: 1em;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-color: black transparent transparent transparent;
-}
-
-.selected-filter .items {
-  color: black;
-  border-radius: 0px 0px 6px 6px;
-  overflow: hidden;
-  position: absolute;
-  background-color: #fafafc;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  height: 200px;
-  overflow-y: visible;
-  overflow-x: hidden;
-}
-
-.selected-filter .items div {
-  color: black;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.hide {
-  display: none;
-}
-</style>
+<template>
+  <div class="selected-filter" @blur="open = false">
+    <div class="selected" :class="{ open: open }" @click="open = !open">
+      <span class="title">{{ selected }}</span>
+    </div>
+    <div class="items" :class="{ hide: !open }">
+      <div v-for="(options, i) of options" :key="i">
+        <div @click="select(options)">
+          <span :class="options.classCss">
+            <i class="icon-query-builder" :class="options.icon"></i>
+            <span class="title"> {{ options.title }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["options", "value"],
+  data() {
+    return {
+      selected: "Selecione os filtros",
+      open: false,
+    };
+  },
+  mounted() {
+    this.$emit("input", this.selected);
+  },
+  methods: {
+    select(options) {
+      this.$emit("input", options);
+      this.selected = options.title;
+      this.open = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.selected-filter {
+  position: relative;
+  width: 100%;
+  text-align: left;
+  outline: none;
+  height: 40px;
+  line-height: 40px;
+  z-index: 500;
+}
+
+.selected-filter .selected {
+  background-color: white;
+  border: 1px solid #DBDEE0;
+  border-radius: 6px;
+  color: #495057;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.selected-filter .selected:after {
+  position: absolute;
+  content: "";
+  top: 19px;
+  right: 1em;
+  width: 0;
+  height: 0;
+  border: 5px solid transparent;
+  border-color: black transparent transparent transparent;
+}
+
+.selected-filter .items {
+  color: black;
+  border-radius: 0px 0px 6px 6px;
+  overflow: hidden;
+  position: absolute;
+  background-color: #fafafc;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  height: 200px;
+  overflow-y: visible;
+  overflow-x: hidden;
+}
+
+.selected-filter .items div {
+  color: black;
+  padding-left: 1em;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hide {
+  display: none;
+}
+</style>

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

@@ -1,59 +1,59 @@
-<template>
-  <div>
-    <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
-      <Tag :eventName="eventName" :eventData="tag" :title="tag.title" :value="tag.value" />
-    </div>
-  </div>
-</template>
-
-<script>
-import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
-
-import { mapGetters, mapMutations } from "vuex";
-
-export default {
-  name: "Tags",
-  components: { Tag },
-  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", ["removeSelectedRule"]),
-  },
-  watch: {
-    event: {
-      handler(event) {
-        if (event.name == "tagRemoved") {
-          var tags = this.tagsLocal.filter((item) => {
-            return item.id != event.data.id;
-          });
-          this.tagsLocal = tags;
-          this.removeSelectedRule(event.data.id);
-        }
-      },
-      deep: true,
-    },
-    tags: {
-      handler(value) {
-        this.tagsLocal = value;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="side-by-side div-tag" v-for="tag in tagsLocal" :key="tag.id">
+      <Tag :eventName="eventName" :eventData="tag" :title="tag.title" :value="tag.value" />
+    </div>
+  </div>
+</template>
+
+<script>
+import Tag from "@nixweb/nixloc-ui/src/component/layout/Tag";
+
+import { mapGetters, mapMutations } from "vuex";
+
+export default {
+  name: "Tags",
+  components: { Tag },
+  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", ["removeSelectedRule"]),
+  },
+  watch: {
+    event: {
+      handler(event) {
+        if (event.name == "tagRemoved") {
+          var tags = this.tagsLocal.filter((item) => {
+            return item.id != event.data.id;
+          });
+          this.tagsLocal = tags;
+          this.removeSelectedRule(event.data.id);
+        }
+      },
+      deep: true,
+    },
+    tags: {
+      handler(value) {
+        this.tagsLocal = value;
+      },
+      deep: true,
+    },
+  },
+};
+</script>