@nixweb/nixloc-ui 0.0.119 → 0.0.122

package/src/component/forms/EscolherEstatico.vue

@@ -1,139 +0,0 @@
-<template>
-  <div>
-    <label>
-      <span class="titulo">{{ titulo }}</span>
-    </label>
-    <div class="selecione" :class="{ borda: mostrarBorda }">
-      <multiselect
-        @open="aoAbrir"
-        @select="aoSelecionar"
-        @search-change="aoPesquisar"
-        :options="dados"
-        v-model.trim="valorAtual"
-        :custom-label="rotulo"
-        :disabled="desabilitado"
-        placeholder
-        :showLabels="true"
-        :noResult="false"
-        ref="multiselect"
-        selectLabel
-        deselectLabel
-        selectedLabel
-      >
-        <div slot="beforeList">
-          <div class="antes-lista">
-            <!--  <b-button
-              size="sm"
-              variant="outline-danger"
-              @click="limpaEscolherEstatico"
-              v-tooltip.top-center="'Limpar'"
-            >
-              <font-awesome-icon icon="broom" />
-            </b-button> -->
-            <!--  <Botao
-              chave="limpaEscolherEstatico"
-              tipo="alerta"
-              classeIcone="fas fa-broom"
-              tamanho="pequeno"
-              :clique="limpaEscolherEstatico"
-            />-->
-          </div>
-        </div>
-      </multiselect>
-    </div>
-  </div>
-</template>
-<script>
-import Multiselect from "vue-multiselect";
-import Botao from "./Botao";
-
-import { mapMutations } from "vuex";
-
-export default {
-  name: "EscolherEstatico",
-  props: {
-    titulo: String,
-    formNome: String,
-    campoAlvo: String,
-    valorInicial: Object,
-    desabilitado: {
-      type: Boolean,
-      default: false,
-    },
-    somenteConsulta: {
-      type: Boolean,
-      default: false,
-    },
-    mostrarBorda: {
-      type: Boolean,
-      default: true,
-    },
-    dados: Array,
-    value: Object,
-  },
-  components: {
-    Multiselect,
-    Botao,
-  },
-  data() {
-    return {
-      valorAtual: this.valorInicial,
-    };
-  },
-  mounted() {
-    let el = this.$el.getElementsByClassName("multiselect")[0];
-    if (el) {
-      el.tabIndex = 0;
-    }
-  },
-  methods: {
-    ...mapMutations("generic", ["insereFiltro", "removeCarregando"]),
-    aoAbrir() {},
-    aoSelecionar(value) {
-      this.$emit("input", value);
-      let obj = { campoAlvo: this.campoAlvo, valor: value.id };
-      if (!this.somenteConsulta) this.insereFiltro(obj);
-    },
-    aoPesquisar(value) {},
-    rotulo(value) {
-      return `${value.conteudo}`;
-    },
-    limpaEscolherEstatico() {
-      let objLimpo = { conteudo: "", id: "" };
-      this.valorAtual = objLimpo;
-      this.$emit("input", objLimpo);
-      this.$refs.multiselect.deactivate();
-      this.removeCarregando(["limpaEscolherEstatico"]);
-
-      if (this.campoAlvo) {
-        let obj = { campoAlvo: this.campoAlvo, valor: "" };
-        this.insereFiltro(obj);
-      }
-    },
-  },
-  watch: {
-    "value.id": function () {
-      this.valorAtual = { id: this.value.id, conteudo: this.value.conteudo };
-    },
-    "valorInicial.id": function () {
-      this.valorAtual = { id: this.value.id, conteudo: this.value.conteudo };
-    },
-  },
-};
-</script>
-
-<style scoped>
-div.antes-lista {
-  padding: 8px;
-}
-
-.selecione {
-  height: 38px;
-  border-radius: 5px !important;
-  margin-bottom: 20px;
-}
-
-.borda {
-  border: 1px solid #dbdee0 !important;
-}
-</style>

package/src/component/forms/Numero.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="form-group">
-    <label>
-      <span class="titulo">{{ titulo }}</span>
-      <span class="requerido" v-if="requerido">*</span>
-      <Dica :campo="campo" :formNome="formNome" />
-    </label>
-    <div class="inner-addon right-addon">
-      <i
-        v-if="notificacoes.length > 0 && formSujo"
-        class="requerido glyphicon fas fa-exclamation-triangle"
-      ></i>
-      <slot v-else></slot>
-      <input
-        class="form-control"
-        type="number"
-        v-model="valor"
-        @keyup.enter.prevent="apertouEnter"
-      />
-    </div>
-
-    <div v-if="formSujo">
-      <div v-for="mensagem in notificacoes" :key="mensagem">
-        <span class="invalido">{{ mensagem }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Dica from "../shared/Dica.vue";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "Numero",
-  components: { Dica },
-  props: {
-    titulo: String,
-    campo: String,
-    placeholder: String,
-    desabilitado: Boolean,
-    formNome: String,
-    requerido: Boolean,
-    tamanhoMaximo: Number,
-    tipo: {
-      type: String,
-      default: "float",
-    },
-    marcarFormSujo: {
-      type: Boolean,
-      default: true,
-    },
-    value: Number,
-    alterou: Function,
-    enter: Function,
-  },
-  data() {
-    return {
-      notificacoes: [],
-      formSujo: false,
-      valor: 0,
-      precision: 1,
-    };
-  },
-  created() {
-    // não carregar as validações iniciais para number
-    this.valor = this.value;
-  },
-
-  methods: {
-    ...mapMutations("validation", [
-      "insereValidacao",
-      "removeValidacao",
-      "insereFormSujo",
-    ]),
-    valida() {
-      this.notificacoes = [];
-      if (this.value == 0) return;
-      if (this.requerido && !this.value) {
-        var mensagem = `${this.titulo} não pode ser vazio!`;
-        this.notificacoes.push(mensagem);
-      }
-
-      if (this.valor.toString().length > this.tamanhoMaximo) {
-        var mensagem = `Valor inválido!`;
-        this.notificacoes.push(mensagem);
-      }
-    },
-    apertouEnter() {
-      if (this.enter) this.enter();
-    },
-  },
-  computed: {
-    ...mapState("validation", ["reiniciaForm"]),
-  },
-  watch: {
-    value() {
-      this.valor = this.value;
-      if (this.alterou) this.alterou();
-    },
-    valor() {
-      this.valida();
-
-      let valor;
-      if (this.tipo === "int") valor = parseInt(this.valor);
-      if (this.tipo === "float") valor = parseFloat(this.valor);
-
-      this.$emit("input", valor);
-      this.formSujo = true;
-      if (this.marcarFormSujo) this.insereFormSujo(true);
-
-      this.valor = valor;
-    },
-    notificacoes() {
-      let self = this;
-      this.notificacoes.forEach(function (notificacao) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-          notificacao: notificacao,
-        };
-        self.insereValidacao(obj);
-      });
-
-      if (this.notificacoes.length == 0) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-        };
-        self.removeValidacao(obj);
-      }
-    },
-    reiniciaForm: {
-      handler(form) {
-        if (form.nome == this.formNome) this.formSujo = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.sucesso {
-  color: #94aa2a;
-  font-size: 14px;
-}
-.invalido {
-  color: #f0134d;
-  font-size: 14px;
-}
-</style>

package/src/component/forms/Opcoes.vue

@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <span class="titulo">{{ titulo }}</span>
-    <Dica :campo="campo" :formNome="formNome" />
-    <div class="opcoes">
-      <b-form-group>
-        <b-form-radio-group
-          v-model="selecionado"
-          :options="opcoes"
-          :disabled="desabilitado"
-        ></b-form-radio-group>
-      </b-form-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import Dica from "../shared/Dica.vue";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: { Dica },
-  name: "Opcoes",
-  props: ["titulo", "opcoes", "value", "alterou", "campo", "formNome", "desabilitado"],
-  data() {
-    return {
-      selecionado: this.value,
-    };
-  },
-  methods: {
-    ...mapMutations("validation", ["insereFormSujo"]),
-  },
-  watch: {
-    value() {
-      this.selecionado = this.value;
-    },
-    selecionado() {
-      this.$emit("input", this.selecionado);
-      this.insereFormSujo(true);
-      if (this.alterou) this.alterou();
-    },
-  },
-};
-</script>
-<style scoped>
-.opcoes {
-  margin-top: 5px;
-}
-
-</style>

package/src/component/forms/Senha.vue

@@ -1,139 +0,0 @@
-<template>
-  <div class="form-group">
-    <label>
-      <span class="titulo" :style="'color: ' + corTitulo">{{ titulo }} </span>
-      <span class="requerido" v-if="requerido">*</span>
-      <Dica :campo="campo" :formNome="formNome" />
-    </label>
-    <div class="inner-addon right-addon">
-      <i
-        v-if="notificacoes.length > 0 && formSujo"
-        class="requerido glyphicon fas fa-exclamation-triangle"
-      ></i>
-      <slot v-else></slot>
-      <input
-        type="password"
-        :placeholder="placeholder"
-        v-mask="mascara || semMascara"
-        v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)"
-        class="form-control"
-        :class="{ requerido: notificacoes.length > 0 && formSujo }"
-      />
-    </div>
-    <div v-if="formSujo">
-      <div v-for="mensagem in notificacoes" :key="mensagem">
-        <span class="invalido">{{ mensagem }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Dica from "../shared/Dica.vue";
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: { Dica },
-  name: "Senha",
-  mixins: [],
-  props: [
-    "titulo",
-    "campo",
-    "corTitulo",
-    "placeholder",
-    "mascara",
-    "formNome",
-    "requerido",
-    "tamanhoMaximo",
-    "value",
-  ],
-  data() {
-    return {
-      notificacoes: [],
-      formSujo: false,
-      semMascara: {
-        mask: "*".repeat(255),
-        tokens: {
-          "*": { pattern: /./ },
-        },
-      },
-    };
-  },
-  created() {
-    this.valida();
-  },
-  methods: {
-    ...mapMutations("validation", [
-      "insereValidacao",
-      "removeValidacao",
-      "insereFormSujo",
-    ]),
-    valida() {
-      this.notificacoes = [];
-
-      if (this.requerido && this.value.length == 0) {
-        var mensagem = `${this.titulo} não pode ser vazio!`;
-        this.notificacoes.push(mensagem);
-      }
-
-      if (this.tamanhoMaximo > 0) {
-        if (this.value.length > this.tamanhoMaximo) {
-          var mensagem = `Máximo de ${this.tamanhoMaximo} caracteres!`;
-          this.notificacoes.push(mensagem);
-        }
-      }
-    },
-  },
-  computed: {
-    ...mapState("validation", ["reiniciaForm", "validacao"]),
-  },
-  watch: {
-    value() {
-      this.valida();
-      this.formSujo = true;
-      this.insereFormSujo(true);
-    },
-    notificacoes() {
-      let self = this;
-      this.notificacoes.forEach(function (notificacao) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-          notificacao: notificacao,
-        };
-        self.insereValidacao(obj);
-      });
-
-      if (this.notificacoes.length == 0) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-        };
-        self.removeValidacao(obj);
-      }
-    },
-    reiniciaForm: {
-      handler(form) {
-        if (form.nome == this.formNome) this.formSujo = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.sucesso {
-  color: #94aa2a;
-  font-size: 14px;
-}
-.invalido {
-  color: #f0134d;
-  font-size: 14px;
-}
-
-.margem-botao {
-  margin-top: -10px;
-}
-</style>

package/src/component/forms/Texto.vue

@@ -1,161 +0,0 @@
-<template>
-  <div class="form-group">
-    <label>
-      <span class="titulo" :style="'color: ' + corTitulo">{{ titulo }} </span>
-      <span class="requerido" v-if="requerido">*</span>
-      <Dica :campo="campo" :formNome="formNome" />
-    </label>
-    <div class="inner-addon right-addon">
-      <div class="requerido glyphicon" v-if="notificacoes.length > 0 && formSujo">
-        <i class="fas fa-exclamation-triangle"></i>
-      </div>
-      <slot v-else></slot>
-      <input
-        type="text"
-        :style="estilo"
-        :placeholder="placeholder"
-        :disabled="desabilitado"
-        @keyup.enter.prevent="apertouEnter"
-        @keyup="limpouCampo"
-        @blur="saiuCampo"
-        v-mask="mascara || semMascara"
-        v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)"
-        class="form-control"
-        :class="{ requerido: notificacoes.length > 0 && formSujo }"
-      />
-    </div>
-    <div v-if="formSujo">
-      <div v-for="mensagem in notificacoes" :key="mensagem">
-        <span class="invalido">{{ mensagem }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Dica from "../shared/Dica.vue";
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  components: { Dica },
-  name: "Texto",
-  props: [
-    "titulo",
-    "campo",
-    "placeholder",
-    "desabilitado",
-    "corTitulo",
-    "mascara",
-    "estilo",
-    "formNome",
-    "requerido",
-    "tamanhoMaximo",
-    "value",
-    "enter",
-    "limpou",
-    "saiu",
-    "marcarFormSujo",
-  ],
-  data() {
-    return {
-      notificacoes: [],
-      formSujo: false,
-      semMascara: {
-        mask: "*".repeat(255),
-        tokens: {
-          "*": { pattern: /./ },
-        },
-      },
-    };
-  },
-  created() {
-    this.valida();
-  },
-  methods: {
-    ...mapMutations("validation", [
-      "insereValidacao",
-      "removeValidacao",
-      "insereFormSujo",
-    ]),
-    valida() {
-      this.notificacoes = [];
-
-      if (this.requerido && this.value.length == 0) {
-        var mensagem = `${this.titulo} não pode ser vazio!`;
-        this.notificacoes.push(mensagem);
-      }
-
-      if (this.tamanhoMaximo > 0) {
-        if (this.value.length > this.tamanhoMaximo) {
-          var mensagem = `Máximo de ${this.tamanhoMaximo} caracteres!`;
-          this.notificacoes.push(mensagem);
-        }
-      }
-    },
-    apertouEnter() {
-      if (this.enter) this.enter();
-    },
-    saiuCampo() {
-      if (this.saiu) this.saiu();
-    },
-    limpouCampo() {
-      if (this.value.length == 0) {
-        if (this.limpou) this.limpou();
-      }
-    },
-  },
-  computed: {
-    ...mapState("validation", ["reiniciaForm", "validacao"]),
-  },
-  watch: {
-    value() {
-      this.valida();
-      this.formSujo = true;
-      // inverti a validação devido não colocar o default como true no props
-      var valor = this.marcarFormSujo == undefined ? true : this.marcarFormSujo;
-      if (valor) this.insereFormSujo(true);
-    },
-    notificacoes() {
-      let self = this;
-      this.notificacoes.forEach(function (notificacao) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-          notificacao: notificacao,
-        };
-        self.insereValidacao(obj);
-      });
-
-      if (this.notificacoes.length == 0) {
-        let obj = {
-          chave: self.campo + "&" + self.formNome,
-          formNome: self.formNome,
-        };
-        self.removeValidacao(obj);
-      }
-    },
-    reiniciaForm: {
-      handler(form) {
-        if (form.nome == this.formNome) this.formSujo = false;
-      },
-      deep: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.sucesso {
-  color: #94aa2a;
-  font-size: 14px;
-}
-.invalido {
-  color: #f0134d;
-  font-size: 14px;
-}
-
-.margem-botao {
-  margin-top: -3px;
-}
-</style>