@nixweb/nixloc-ui 0.0.121 → 0.0.122

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>

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

@@ -1,187 +0,0 @@
-<template>
-  <!-- eslint-disable vue/no-v-html -->
-  <div class="vqb-rule card">
-    <div class="form-inline">
-      <label :class="rule.classeCss" class="mr-5">
-        <i :class="rule.icone"></i>
-        <span style="margin-left: 10px">{{ rule.label }} </span>
-      </label>
-
-      <!-- List of operands (optional) -->
-      <select
-        v-if="typeof rule.operands !== 'undefined'"
-        v-model="query.operand"
-        class="form-control mr-2"
-      >
-        <option v-for="operand in rule.operands" :key="operand">
-          {{ operand }}
-        </option>
-      </select>
-
-      <!-- List of operators (e.g. =, !=, >, <) -->
-      <select
-        v-if="typeof rule.operators !== 'undefined' && rule.operators.length > 1"
-        v-model="query.operator"
-        class="form-control mr-2"
-      >
-        <option v-for="operator in rule.operators" :key="operator" :value="operator">
-          {{ operator }}
-        </option>
-      </select>
-
-      <!-- Basic text input -->
-      <input
-        v-if="rule.inputType === 'text'"
-        v-model="query.value"
-        class="form-control"
-        type="text"
-        :placeholder="labels.textInputPlaceholder"
-      />
-
-      <!-- Basic number input -->
-      <input
-        v-if="rule.inputType === 'number'"
-        v-model="query.value"
-        class="form-control"
-        type="number"
-      />
-
-      <!-- Datepicker -->
-      <input
-        v-if="rule.inputType === 'date'"
-        v-model="query.value"
-        class="form-control"
-        type="date"
-      />
-
-      <!-- Custom component input -->
-      <div v-if="isCustomComponent" class="vqb-custom-component-wrap">
-        <DateTime
-          v-if="rule.component == 'datetime'"
-          :format="rule.props.format"
-          :type="rule.props.type"
-          :range="rule.props.range"
-          :value="query.value"
-          @input="updateQuery"
-        />
-
-        <div class="div-escolher" v-if="rule.component == 'escolher'">
-          <Escolher :url="rule.props.url" :value="query.value" @input="updateQuery" />
-        </div>
-      </div>
-
-      <!-- Checkbox input -->
-      <template v-if="rule.inputType === 'checkbox'">
-        <div
-          v-for="choice in rule.choices"
-          :key="choice.value"
-          class="form-check form-check-inline"
-        >
-          <input
-            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
-            v-model="query.value"
-            type="checkbox"
-            :value="choice.value"
-            class="form-check-input"
-          />
-          <label
-            class="form-check-label"
-            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
-          >
-            {{ choice.label }}
-          </label>
-        </div>
-      </template>
-
-      <!-- Radio input -->
-      <template v-if="rule.inputType === 'radio'">
-        <div
-          v-for="choice in rule.choices"
-          :key="choice.value"
-          class="form-check form-check-inline"
-        >
-          <input
-            :id="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
-            v-model="query.value"
-            :name="'depth' + depth + '-' + rule.id + '-' + index"
-            type="radio"
-            :value="choice.value"
-            class="form-check-input"
-          />
-          <label
-            class="form-check-label"
-            :for="'depth' + depth + '-' + rule.id + '-' + index + '-' + choice.value"
-          >
-            {{ choice.label }}
-          </label>
-        </div>
-      </template>
-
-      <!-- Select without groups -->
-      <select
-        v-if="rule.inputType === 'select' && !hasOptionGroups"
-        v-model="query.value"
-        class="form-control"
-        :multiple="rule.type === 'multi-select'"
-      >
-        <option v-for="option in selectOptions" :key="option.value" :value="option.value">
-          {{ option.label }}
-        </option>
-      </select>
-
-      <!-- Select with groups -->
-      <select
-        v-if="rule.inputType === 'select' && hasOptionGroups"
-        v-model="query.value"
-        class="form-control"
-        :multiple="rule.type === 'multi-select'"
-      >
-        <optgroup
-          v-for="(option, option_key) in selectOptions"
-          :key="option_key"
-          :label="option_key"
-        >
-          <option
-            v-for="sub_option in option"
-            :key="sub_option.value"
-            :value="sub_option.value"
-          >
-            {{ sub_option.label }}
-          </option>
-        </optgroup>
-      </select>
-
-      <!-- Remove rule button -->
-      <button
-        type="button"
-        class="close ml-auto"
-        @click="remove"
-        v-html="labels.removeRule"
-      ></button>
-    </div>
-  </div>
-</template>
-
-<script>
-import QueryBuilderRule from "../../components/QueryBuilderRule";
-import DateTime from "@nixweb/nixloc-ui/src/component/forms/DateTime";
-import Escolher from "@nixweb/nixloc-ui/src/component/forms/Escolher";
-
-export default {
-  extends: QueryBuilderRule,
-  components: {
-    DateTime,
-    Escolher,
-  },
-  data() {
-    return {
-      teste: {},
-    };
-  },
-};
-</script>
-<style scoped>
-.div-escolher {
-  width: 320px;
-}
-</style>