@nixweb/nixloc-ui 0.0.121 → 0.0.124

package/src/component/forms/Decimal.vue

@@ -1,137 +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>
-      <vue-numeric
-        class="form-control"
-        v-on:keyup.enter.native="apertouEnter"
-        :class="{ 'is-invalid': notificacoes.length > 0 && formSujo }"
-        :placeholder="placeholder"
-        :disabled="desabilitado"
-        currency="R$"
-        separator="."
-        v-bind:precision="2"
-        v-model="valor"
-      ></vue-numeric>
-    </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 VueNumeric from "vue-numeric";
-
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "Numero",
-  mixins: [],
-  props: {
-    titulo: String,
-    campo: String,
-    desabilitado: Boolean,
-    placeholder: String,
-    formNome: String,
-    requerido: Boolean,
-    value: Number,
-    enter: Function,
-  },
-  components: {
-    VueNumeric,
-    Dica,
-  },
-  data() {
-    return {
-      notificacoes: [],
-      formSujo: false,
-      valor: 0,
-    };
-  },
-  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);
-      }
-    },
-    apertouEnter() {
-      if (this.enter) this.enter();
-    },
-  },
-  computed: {
-    ...mapState("validation", ["reiniciaForm"]),
-  },
-  watch: {
-    value() {
-      this.valor = this.value;
-    },
-    valor() {
-      this.valida();
-      this.formSujo = true;
-      this.insereFormSujo(true);
-      this.$emit("input", this.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/Escolher.vue

@@ -1,335 +0,0 @@
-<template>
-  <div>
-    <label>
-      <span class="titulo">{{ titulo }}</span>
-      <span class="requerido" v-if="requerido">*</span>
-      <Dica :campo="campo" :formNome="formNome" />
-    </label>
-    <div
-      class="selecione"
-      :class="{
-        'selecione-invalido': notificacoes.length > 0 && formSujo,
-        borda: mostrarBorda,
-      }"
-    >
-      <multiselect
-        @open="aoAbrir"
-        @select="aoSelecionar"
-        @search-change="aoPesquisar"
-        :options="dados"
-        v-model.trim="valorAtual"
-        :custom-label="rotulo"
-        placeholder
-        :disabled="desabilitado"
-        :showLabels="true"
-        :noResult="false"
-        :maxHeight="250"
-        ref="multiselect"
-        selectLabel
-        deselectLabel
-        selectedLabel
-      >
-        <div slot="beforeList">
-          <vue-loading
-            v-if="carregando"
-            type="bubbles"
-            color="#577696"
-            :size="{ width: '40px', height: '40px' }"
-          ></vue-loading>
-          <div class="antes-lista" v-if="!carregando">
-            <Botao
-              v-if="formNomeCadastrarNovo"
-              chave="novoCadastroEscolher"
-              tipo="primario"
-              titulo="Novo"
-              tamanho="pequeno"
-              :clique="novoCadastroEscolher"
-            />
-            <Botao
-              chave="limpaEscolher"
-              tipo="alerta"
-              classeIcone="fas fa-broom"
-              tamanho="pequeno"
-              :clique="limpaEscolher"
-            />
-          </div>
-        </div>
-        <div slot="afterList" v-if="totalRegistros > 20 && dados.length < totalRegistros">
-          <div class="depois-lista text-center">
-            <Botao
-              chave="carregarMaisSelecione"
-              tipo="info"
-              titulo="Carregar mais..."
-              classeIcone="fas fa-redo-alt"
-              tamanho="pequeno"
-              :clique="carregarMais"
-            />
-          </div>
-        </div>
-        <div slot="noOptions">Lista está vazia</div>
-        <div slot="noResult">Nenhum registro encontrado</div>
-      </multiselect>
-      <div v-if="formSujo">
-        <div v-for="mensagem in notificacoes" :key="mensagem">
-          <span class="invalido">{{ mensagem }}</span>
-        </div>
-      </div>
-    </div>
-
-    <vodal
-      v-if="formNomeCadastrarNovo"
-      :show="mostrarVodal(formNomeCadastrarNovo)"
-      @hide="escondeVodal()"
-      :width="cadastrarNovoLargura"
-      :height="cadastrarNovoAltura"
-      :closeOnEsc="true"
-      :closeButton="true"
-    >
-      <Mensagem v-if="vodal.abrir" />
-      <div class="cadastrar-novo-titulo">{{ cadastrarNovoTitulo }}</div>
-      <hr />
-      <slot></slot>
-    </vodal>
-  </div>
-</template>
-<script>
-import Dica from "../shared/Dica.vue";
-import Mensagem from "../shared/Mensagem.vue";
-import Multiselect from "vue-multiselect";
-
-import Botao from "./Botao.vue";
-import Vodal from "vodal";
-
-import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
-
-export default {
-  name: "Escolher",
-  props: {
-    titulo: String,
-    campo: String,
-    formNome: String,
-    requerido: Boolean,
-    url: String,
-    desabilitado: Boolean,
-    campoAlvo: String,
-    propsParams: Object,
-    value: Object,
-    alterou: Function,
-    formNomeCadastrarNovo: String,
-    cadastrarNovoTitulo: String,
-    cadastrarNovoLargura: Number,
-    cadastrarNovoAltura: Number,
-    marcarFormSujo: {
-      type: Boolean,
-      default: true,
-    },
-    mostrarBorda: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  components: {
-    Multiselect,
-    Botao,
-    Vodal,
-    Mensagem,
-    Dica,
-  },
-  data() {
-    return {
-      valorAtual: {},
-      dados: [],
-      totalRegistros: 0,
-      baseParams: {
-        pesquisa: "",
-        paginaAtual: 1,
-        totalPorPagina: 20,
-      },
-
-      cadastrarNovo: false,
-      carregando: true,
-      notificacoes: [],
-      formSujo: false,
-    };
-  },
-  created() {
-    this.valida();
-  },
-  mounted() {
-    let el = this.$el.getElementsByClassName("multiselect")[0];
-    if (el) {
-      el.tabIndex = 0;
-    }
-  },
-  computed: {
-    ...mapState("validation", ["reiniciaForm", "vodal"]),
-    ...mapState("generic", ["vodal"]),
-    ...mapGetters("generic", ["mostrarVodal"]),
-  },
-  methods: {
-    ...mapActions("generic", ["getApi"]),
-    ...mapMutations("generic", [
-      "removeCarregando",
-      "abrirVodal",
-      "fecharVodal",
-      "removeNotificacao",
-      "insereFiltro",
-    ]),
-    ...mapMutations("validation", [
-      "insereValidacao",
-      "removeValidacao",
-      "reiniciaValidacao",
-      "insereFormSujo",
-    ]),
-    aoAbrir() {
-      this.obterTodos();
-    },
-    aoSelecionar(value) {
-      this.$emit("input", value);
-      if (this.alterou) this.alterou();
-      if (this.campoAlvo) {
-        let obj = { campoAlvo: this.campoAlvo, valor: value.id };
-        this.insereFiltro(obj);
-      }
-    },
-    aoPesquisar(value) {
-      this.baseParams.pesquisa = value;
-      this.obterTodos();
-    },
-    rotulo(value) {
-      if (value.conteudo) return `${value.conteudo}`;
-    },
-    obterTodos() {
-      let obj = { ...this.baseParams, ...this.propsParams };
-      let params = { url: this.url, obj: obj };
-      this.carregando = true;
-      this.getApi(params).then((response) => {
-        this.totalRegistros = response.conteudo.totalRegistros;
-        let self = this;
-        if (this.baseParams.paginaAtual == 1) {
-          this.dados = [];
-        }
-        response.conteudo.dados.map(function (value, key) {
-          self.dados.push(value);
-        });
-        this.carregando = false;
-        this.removeCarregando(["carregarMaisSelecione"]);
-      });
-    },
-    novoCadastroEscolher() {
-      this.abrirVodal(this.formNomeCadastrarNovo);
-      this.reiniciaValidacao(this.formNomeCadastrarNovo);
-      this.removeNotificacao();
-      this.$refs.multiselect.deactivate();
-      this.removeCarregando(["novoCadastroEscolher"]);
-    },
-    escondeVodal() {
-      this.fecharVodal();
-    },
-    limpaEscolher() {
-      let objLimpo = { id: "", conteudo: "" };
-      this.valorAtual = objLimpo;
-      this.$emit("input", objLimpo);
-      this.$refs.multiselect.deactivate();
-      this.removeCarregando(["limpaEscolher"]);
-
-      if (this.campoAlvo) {
-        let obj = { campoAlvo: this.campoAlvo, valor: "" };
-        this.insereFiltro(obj);
-      }
-    },
-    carregarMais() {
-      this.baseParams.paginaAtual++;
-      this.obterTodos();
-    },
-    valida() {
-      this.notificacoes = [];
-      if (this.requerido && !this.value.id) {
-        var mensagem = `${this.titulo} não pode ser vazio!`;
-        this.notificacoes.push(mensagem);
-      }
-    },
-  },
-  watch: {
-    "value.id": function () {
-      this.valida();
-      this.formSujo = true;
-      if (this.marcarFormSujo) this.insereFormSujo(true);
-      this.valorAtual = { id: this.value.id, conteudo: this.value.conteudo };
-    },
-    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) {
-          let objLimpo = { id: "", conteudo: "" };
-          this.valorAtual = objLimpo;
-          this.$emit("input", objLimpo);
-          this.formSujo = false;
-        }
-      },
-      deep: true,
-    },
-    "vodal.abrir": function (value) {
-      if (!value) this.cadastrarNovo = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-div.antes-lista {
-  padding: 8px;
-}
-
-div.depois-lista {
-  padding: 8px;
-}
-
-.invalido {
-  color: #f0134d;
-  font-size: 14px;
-}
-
-.selecione {
-  height: 36px;
-  border-bottom: 1px solid #d6dadf;
-  border-radius: 0px !important;
-}
-
-.selecione-invalido {
-  border-bottom: 1px solid #ff5454;
-}
-
-.selecione-valido {
-  border-bottom: 1px solid #94aa2a;
-}
-
-.cadastrar-novo-titulo {
-  font-size: 18px;
-  margin-bottom: 5px;
-}
-
-.borda {
-  border: 1px solid #dbdee0 !important;
-  border-radius: 5px !important;
-  height: 38px !important;
-}
-</style>

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>