@nixweb/nixloc-ui 0.0.121 → 0.0.124

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>

package/src/component/forms/TextoArea.vue

@@ -1,126 +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>
-
-      <textarea
-        type="text"
-        :placeholder="placeholder"
-        v-bind:value="value"
-        v-on:input="$emit('input', $event.target.value)"
-        class="form-control"
-        :class="{ 'is-invalid': notificacoes.length > 0 && formSujo }"
-      ></textarea>
-    </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: "TextoArea",
-  props: {
-    titulo: String,
-    campo: String,
-    placeholder: String,
-    formNome: String,
-    requerido: Boolean,
-    tamanhoMaximo: Number,
-    value: String,
-  },
-  data() {
-    return {
-      notificacoes: [],
-      formSujo: false,
-    };
-  },
-  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;
-}
-</style>