@nixweb/nixloc-ui 0.0.119 → 0.0.122

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

@@ -1,164 +0,0 @@
-<template>
-  <div class="vue-query-builder">
-    <slot v-bind="vqbProps">
-      <query-builder-group v-bind="vqbProps" :query.sync="query" />
-    </slot>
-  </div>
-</template>
-
-<script>
-/* eslint-disable vue/require-default-prop */
-import QueryBuilderGroup from "./layouts/Bootstrap/BootstrapGroup.vue";
-import deepClone from "./utilities.js";
-
-var defaultLabels = {
-  matchType: "Construtor de Consulta",
-  matchTypes: [
-    { id: "all", label: "All" },
-    { id: "any", label: "Any" },
-  ],
-  addRule: "+ Adicionar",
-  removeRule: "&times;",
-  addGroup: "+ Adicionar",
-  removeGroup: "&times;",
-  textInputPlaceholder: "Valor",
-};
-
-export default {
-  name: "VueQueryBuilder",
-
-  components: {
-    QueryBuilderGroup,
-  },
-
-  props: {
-    rules: Array,
-    labels: {
-      type: Object,
-      default() {
-        return defaultLabels;
-      },
-    },
-    maxDepth: {
-      type: Number,
-      default: 3,
-      validator: function (value) {
-        return value >= 1;
-      },
-    },
-    value: Object,
-  },
-
-  data() {
-    return {
-      query: {
-        logicalOperator: this.labels.matchTypes[0].id,
-        children: [],
-      },
-      ruleTypes: {
-        text: {
-          operators: ["igual", "diferente", "contem"],
-          inputType: "text",
-          id: "text-field",
-        },
-        numeric: {
-          operators: ["=", "!=", "<", "<=", ">", ">="],
-          inputType: "number",
-          id: "number-field",
-        },
-        custom: {
-          operators: [],
-          inputType: "text",
-          id: "custom-field",
-        },
-        radio: {
-          operators: [],
-          choices: [],
-          inputType: "radio",
-          id: "radio-field",
-        },
-        checkbox: {
-          operators: ["checkbox"],
-          choices: [],
-          inputType: "checkbox",
-          id: "checkbox-field",
-        },
-        select: {
-          operators: [],
-          choices: [],
-          inputType: "select",
-          id: "select-field",
-        },
-        "multi-select": {
-          operators: ["="],
-          choices: [],
-          inputType: "select",
-          id: "multi-select-field",
-        },
-      },
-    };
-  },
-
-  computed: {
-    mergedLabels() {
-      return Object.assign({}, defaultLabels, this.labels);
-    },
-
-    mergedRules() {
-      var mergedRules = [];
-      var vm = this;
-
-      vm.rules.forEach(function (rule) {
-        if (typeof vm.ruleTypes[rule.type] !== "undefined") {
-          mergedRules.push(Object.assign({}, vm.ruleTypes[rule.type], rule));
-        } else {
-          mergedRules.push(rule);
-        }
-      });
-
-      return mergedRules;
-    },
-
-    vqbProps() {
-      return {
-        index: 0,
-        depth: 1,
-        maxDepth: this.maxDepth,
-        ruleTypes: this.ruleTypes,
-        rules: this.mergedRules,
-        labels: this.mergedLabels,
-      };
-    },
-  },
-
-  mounted() {
-    this.$watch(
-      "query",
-      (newQuery) => {
-        if (JSON.stringify(newQuery) !== JSON.stringify(this.value)) {
-          this.$emit("input", deepClone(newQuery));
-        }
-      },
-      {
-        deep: true,
-      }
-    );
-
-    this.$watch(
-      "value",
-      (newValue) => {
-        if (JSON.stringify(newValue) !== JSON.stringify(this.query)) {
-          this.query = deepClone(newValue);
-        }
-      },
-      {
-        deep: true,
-      }
-    );
-
-    if (typeof this.$options.propsData.value !== "undefined") {
-      this.query = Object.assign(this.query, this.$options.propsData.value);
-    }
-  },
-};
-</script>

package/src/component/shared/query-builder/components/CustomSelect.vue

@@ -1,115 +0,0 @@
-<template>
-  <div class="custom-escolher" :tabindex="tabindex" @blur="open = false">
-    <div class="selected" :class="{ open: open }" @click="open = !open">
-      {{ selected }}
-    </div>
-    <div class="items" :class="{ selectHide: !open }">
-      <div v-for="(option, i) of options" :key="i">
-        <div @click="selecionar(option)">
-          <span :class="option.classeCss">
-            <i :class="option.icone"></i>
-            <span> {{ option.label }}</span>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: [
-    "options",
-    "tabindex",
-    "value",
-  ] /* {
-    options: {
-      type: Array,
-      required: true,
-    },
-    default: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    tabindex: {
-      type: Number,
-      required: false,
-      default: 0,
-    },
-    value: Object,
-  },*/,
-  data() {
-    return {
-      selected: "Selecione os filtros",
-      open: false,
-    };
-  },
-  mounted() {
-    this.$emit("input", this.selected);
-  },
-  methods: {
-    selecionar(option) {
-      this.$emit("input", option);
-      this.selected = option.label;
-      this.open = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.custom-escolher {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  outline: none;
-  height: 40px;
-  line-height: 40px;
-}
-
-.custom-escolher .selected {
-  background-color: white;
-  border-bottom: 1px solid #dbdee0;
-  color: black;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.custom-escolher .selected:after {
-  position: absolute;
-  content: "";
-  top: 22px;
-  right: 1em;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-color: black transparent transparent transparent;
-}
-
-.custom-escolher .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;
-}
-
-.custom-escolher .items div {
-  color: black;
-  padding-left: 1em;
-  cursor: pointer;
-  user-select: none;
-}
-
-.selectHide {
-  display: none;
-}
-</style>

package/src/component/shared/query-builder/components/QueryBuilderChildren.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="vqb-children">
-    <component
-      :is="getComponent(child.type)"
-      v-for="(child, index) in query.children"
-      :key="index"
-      :type="child.type"
-      :query.sync="child.query"
-      :rule-types="ruleTypes"
-      :rules="rules"
-      :rule="$parent.ruleById(child.query.rule)"
-      :index="index"
-      :max-depth="maxDepth"
-      :depth="depth + 1"
-      :labels="labels"
-      @child-deletion-requested="$parent.removeChild"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  // eslint-disable-next-line vue/require-prop-types
-  props: ['query', 'ruleTypes', 'rules', 'maxDepth', 'labels', 'depth'],
-
-  data() {
-    return {
-      groupComponent: null,
-      ruleComponent: null
-    }
-  },
-
-  mounted() {
-    this.groupComponent = this.$parent.$options.components['QueryBuilderGroup'];
-    this.ruleComponent = this.$parent.$options.components['QueryBuilderRule'];
-  },
-
-  methods: {
-    getComponent(type) {
-      return type === 'query-builder-group'
-        ? this.groupComponent
-        : this.ruleComponent;
-    }
-  }
-}
-</script>

package/src/component/shared/query-builder/components/QueryBuilderGroup.vue

@@ -1,151 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-/* eslint-disable vue/require-default-prop */
-import deepClone from "../utilities.js";
-import QueryBuilderChildren from "./QueryBuilderChildren.vue";
-
-import { mapMutations, mapGetters } from "vuex";
-
-export default {
-  components: {
-    // eslint-disable-next-line vue/no-unused-components
-    QueryBuilderChildren,
-  },
-
-  props: {
-    ruleTypes: Object,
-    type: {
-      type: String,
-      default: "query-builder-group",
-    },
-    query: Object,
-    rules: Array,
-    index: Number,
-    maxDepth: Number,
-    depth: Number,
-    labels: Object,
-  },
-
-  data() {
-    return {
-      selectedRule: this.rules[0],
-      valida: [],
-    };
-  },
-  computed: {
-    ...mapGetters("generic", ["evento"]),
-  },
-  methods: {
-    ...mapMutations("generic", ["insereNotificacao"]),
-
-    ruleById(ruleId) {
-      var rule = null;
-
-      this.rules.forEach(function (value) {
-        if (value.id === ruleId) {
-          rule = value;
-          return false;
-        }
-      });
-
-      return rule;
-    },
-
-    addRule() {
-      let updated_query = deepClone(this.query);
-      let child = {
-        type: "query-builder-rule",
-        query: {
-          id: Math.random()
-            .toString(36)
-            .replace(/[^a-z]+/g, "")
-            .substr(0, 5),
-          obrigatorio: this.selectedRule.obrigatorio,
-          type: this.selectedRule.type,
-          choices: this.selectedRule.choices,
-          classeCss: this.selectedRule.classeCss,
-          valida: this.selectedRule.valida,
-          tipo: this.selectedRule.tipo,
-          label: this.selectedRule.label,
-          rule: this.selectedRule.id,
-          operator: this.selectedRule.operators[0],
-          operand:
-            typeof this.selectedRule.operands === "undefined"
-              ? this.selectedRule.label
-              : this.selectedRule.operands[0],
-          value: null,
-        },
-      };
-      // A bit hacky, but `v-model` on `select` requires an array.
-      if (this.ruleById(child.query.rule).type === "multi-select") {
-        child.query.value = [];
-      }
-
-      if (!this.jaExiste(child.query.rule)) {
-        updated_query.children.push(child);
-        if (child.query.valida) this.valida.push(child);
-      } else {
-        var erro = {
-          property: "ERRO QUERY BUILDER",
-          mensagem: `Não é possível adicionar o filtro ${child.query.label} 2 vezes!`,
-        };
-        this.insereNotificacao([erro]);
-      }
-
-      this.$emit("update:query", updated_query);
-    },
-
-    addGroup() {
-      let updated_query = deepClone(this.query);
-      if (this.depth < this.maxDepth) {
-        updated_query.children.push({
-          type: "query-builder-group",
-          query: {
-            logicalOperator: this.labels.matchTypes[0].id,
-            children: [],
-          },
-        });
-        this.$emit("update:query", updated_query);
-      }
-    },
-
-    remove() {
-      this.$emit("child-deletion-requested", this.index);
-    },
-
-    removeChild(index) {
-      this.valida.splice(this.valida.indexOf(index, 1));
-
-      let updated_query = deepClone(this.query);
-
-      updated_query.children.splice(index, 1);
-
-      this.$emit("update:query", updated_query);
-    },
-
-    jaExiste(chave) {
-      var existe = this.valida.find((value) => {
-        return value.query.rule === chave;
-      });
-      if (existe) return true;
-      return false;
-    },
-  },
-  watch: {
-    evento: {
-      handler(evento) {
-        if (evento.nome == "tagRemovida") {
-          var valida = this.valida.filter((x) => {
-            return x.query.id != evento.dados.id;
-          });
-          this.valida = valida;
-        }
-      },
-      deep: true,
-    },
-  },
-};
-</script>

package/src/component/shared/query-builder/components/QueryBuilderRule.vue

@@ -1,81 +0,0 @@
-<template>
-  <div></div>
-</template>
-
-<script>
-import deepClone from "../utilities.js";
-
-export default {
-  // eslint-disable-next-line vue/require-prop-types
-  props: ["query", "index", "rule", "labels", "depth"],
-
-  computed: {
-    isCustomComponent() {
-      return this.rule.type === "custom-component";
-    },
-
-    selectOptions() {
-      if (typeof this.rule.choices === "undefined") {
-        return {};
-      }
-
-      // Nest items to support <optgroup> if the rule's choices have
-      // defined groups. Otherwise just return a single-level array
-      return this.rule.choices.reduce(function (groups, item, index) {
-        let key = item["group"];
-        if (typeof key !== "undefined") {
-          groups[key] = groups[key] || [];
-          groups[key].push(item);
-        } else {
-          groups[index] = item;
-        }
-
-        return groups;
-      }, {});
-    },
-
-    hasOptionGroups() {
-      return this.selectOptions.length && Array.isArray(this.selectOptions[0]);
-    },
-  },
-
-  beforeMount() {
-    if (this.rule.type === "custom-component") {
-      this.$options.components[this.id] = this.rule.component;
-    }
-  },
-
-  mounted() {
-    let updated_query = deepClone(this.query);
-
-    // Set a default value for these types if one isn't provided already
-    if (this.query.value === null) {
-      if (this.rule.inputType === "checkbox") {
-        updated_query.value = [];
-      }
-      if (this.rule.type === "select") {
-        updated_query.value = this.rule.choices[0].value;
-      }
-      if (this.rule.type === "custom-component") {
-        updated_query.value = null;
-        if (typeof this.rule.default !== "undefined") {
-          updated_query.value = deepClone(this.rule.default);
-        }
-      }
-
-      this.$emit("update:query", updated_query);
-    }
-  },
-
-  methods: {
-    remove: function () {
-      this.$emit("child-deletion-requested", this.index);
-    },
-    updateQuery(value) {
-      let updated_query = deepClone(this.query);
-      updated_query.value = value;
-      this.$emit("update:query", updated_query);
-    },
-  },
-};
-</script>

package/src/component/shared/query-builder/layouts/Bootstrap/BootstrapGroup.vue

@@ -1,120 +0,0 @@
-<template>
-  <!-- eslint-disable vue/no-v-html -->
-  <div class="vqb-group card" :class="'depth-' + depth.toString()">
-    <div class="vqb-group-heading card-header" v-if="false">
-      <div class="match-type-container form-inline">
-        <label class="mr-2" for="vqb-match-type">
-          {{ labels.matchType }}
-        </label>
-
-        <select id="vqb-match-type" v-model="query.logicalOperator" class="form-control">
-          <option v-for="label in labels.matchTypes" :key="label.id" :value="label.id">
-            {{ label.label }}
-          </option>
-        </select>
-
-        <button
-          v-if="depth > 1"
-          type="button"
-          class="close ml-auto"
-          @click="remove"
-          v-html="labels.removeGroup"
-        ></button>
-      </div>
-    </div>
-
-    <div class="vqb-group-body card-body">
-      <div class="rule-actions form-inline">
-        <div class="div-custom">
-          <b-row>
-            <b-col sm="6">
-              <CustomSelect :options="rules" class="select" v-model="selectedRule" />
-            </b-col>
-            <b-col sm="4">
-              <button type="button" class="btn btn-secondary mr-2" @click="addRule">
-                {{ labels.addRule }}
-              </button>
-            </b-col>
-          </b-row>
-
-          <!--   <button
-            v-if="depth < maxDepth"
-            type="button"
-            class="btn btn-secondary"
-            @click="addGroup"
-          >
-            {{ labels.addGroup }}
-          </button> -->
-        </div>
-      </div>
-
-      <query-builder-children v-bind="$props" />
-    </div>
-  </div>
-</template>
-
-<script>
-import CustomSelect from "../../components/CustomSelect.vue";
-import QueryBuilderGroup from "../../components/QueryBuilderGroup";
-import QueryBuilderRule from "./BootstrapRule.vue";
-
-export default {
-  name: "QueryBuilderGroup",
-
-  components: {
-    // eslint-disable-next-line vue/no-unused-components
-    QueryBuilderRule: QueryBuilderRule,
-    CustomSelect,
-  },
-
-  extends: QueryBuilderGroup,
-};
-</script>
-
-<style>
-.titulo-option {
-  padding: 10px;
-}
-
-.div-custom {
-  width: 100%;
-}
-
-.vue-query-builder .vqb-group .rule-actions {
-  margin-bottom: 20px;
-}
-
-.vue-query-builder .vqb-rule {
-  margin-top: 15px;
-  margin-bottom: 15px;
-  background-color: #f5f5f5;
-  border-color: #ddd;
-  padding: 15px;
-}
-
-.vue-query-builder .vqb-group.depth-1 .vqb-rule,
-.vue-query-builder .vqb-group.depth-2 {
-  border-left: 2px solid #8bc34a;
-}
-
-.vue-query-builder .vqb-group.depth-2 .vqb-rule,
-.vue-query-builder .vqb-group.depth-3 {
-  border-left: 2px solid #00bcd4;
-}
-
-.vue-query-builder .vqb-group.depth-3 .vqb-rule,
-.vue-query-builder .vqb-group.depth-4 {
-  border-left: 2px solid #ff5722;
-}
-
-.vue-query-builder .close {
-  opacity: 1;
-  color: rgb(150, 150, 150);
-}
-
-@media (min-width: 768px) {
-  .vue-query-builder .vqb-rule.form-inline .form-group {
-    display: block;
-  }
-}
-</style>