@nixweb/nixloc-ui 0.0.119 → 0.0.122

package/src/component/forms/ArquivoUpload.vue

@@ -1,199 +0,0 @@
-<template>
-  <div>
-    <div>
-      <div class="arquivo" v-if="!value">
-        <button class="botao pequeno primario">
-          <span v-if="!carregandoAdicionar">
-            <i class="fas fa-cloud-upload-alt"></i> {{ titulo }}</span
-          >
-          <vue-loading
-            v-if="carregandoAdicionar"
-            type="bubbles"
-            color="#fff"
-            :size="{ width: '20px', height: '20px' }"
-          ></vue-loading>
-        </button>
-        <input
-          type="file"
-          name="myfile"
-          ref="arquivo"
-          :accept="aceitos"
-          v-on:change="carregar()"
-        />
-      </div>
-      <div v-if="value">
-        <button
-          class="botao pequeno sucesso"
-          @click="baixar()"
-          v-if="!carregandoAdicionar"
-        >
-          <i class="fas fa-cloud-download-alt"></i> Baixar
-        </button>
-        <button
-          class="botao pequeno perigo"
-          v-if="!carregandoAdicionar"
-          @click="remover()"
-        >
-          <span v-if="!carregandoRemover">Remover</span>
-          <vue-loading
-            v-if="carregandoRemover"
-            type="bubbles"
-            color="#fff"
-            :size="{ width: '20px', height: '20px' }"
-          ></vue-loading>
-        </button>
-      </div>
-      <div class="div-alerta">
-        <Alerta tipo="info" v-if="value">
-          <span>{{ mensagem }}</span>
-        </Alerta>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Alerta from "../layout/Alerta.vue";
-
-import { mapActions } from "vuex";
-
-export default {
-  name: "ArquivoUpload",
-  components: { Alerta },
-  props: {
-    titulo: String,
-    nome: String,
-    container: String,
-    aceitos: String,
-    mensagem: String,
-    urlAdicionar: String,
-    urlRemover: String,
-    nomeBancoDados: String,
-    aoCarregar: Function,
-    value: String,
-  },
-  data() {
-    return {
-      arquivo: "",
-      carregandoAdicionar: false,
-      carregandoRemover: false,
-      urlAzure: "https://espaco.blob.core.windows.net",
-    };
-  },
-  methods: {
-    ...mapActions("generic", ["postFileApi", "deleteFileApi"]),
-    carregar() {
-      this.arquivo = this.$refs.arquivo.files[0];
-      let params = {
-        url: this.urlAdicionar,
-        arquivo: this.arquivo,
-        container: this.container,
-        nome: this.nome,
-        aceitos: this.aceitos,
-      };
-      this.carregandoAdicionar = true;
-      this.postFileApi(params).then((response) => {
-        if (response.sucesso) {
-          if (this.aoCarregar) this.aoCarregar();
-          this.$emit("input", response.conteudo);
-        } else {
-          this.limpar();
-        }
-        this.carregandoAdicionar = false;
-      });
-    },
-    remover() {
-      let props = {
-        url: this.urlRemover,
-        container: this.container,
-        nome: this.nomeBancoDados,
-      };
-      this.carregandoRemover = true;
-      let params = { url: this.urlRemover, obj: props };
-      this.deleteFileApi(params).then((response) => {
-        if (response.sucesso) {
-          if (this.aoCarregar) this.aoCarregar();
-          this.limpar();
-          this.$emit("input", "");
-        }
-        this.carregandoRemover = false;
-      });
-    },
-    limpar() {
-      this.arquivo = "";
-    },
-    baixar() {
-      const url = `${this.urlAzure}/${this.container}/${this.nomeBancoDados}`;
-      window.location.href = url;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.arquivo {
-  position: relative;
-  overflow: hidden;
-  display: inline-block;
-  cursor: pointer;
-}
-
-.botao {
-  padding: 8px 12px;
-  cursor: pointer;
-  border: none;
-  border-radius: 40px !important;
-  font-size: 14px;
-  font-weight: 400;
-}
-
-.primario {
-  background: #577696;
-  border-color: #577696;
-  color: #fff;
-}
-
-.primario:hover {
-  background: #355472;
-}
-
-.sucesso {
-  color: #fff;
-  background: #94aa2a;
-  border-color: #94aa2a;
-}
-
-.sucesso:hover {
-  background: #6d7e1c;
-}
-
-.perigo {
-  color: #fff;
-  border-color: #f0134d;
-  background: #f0134d;
-  margin-left: 5px;
-}
-
-.perigo:hover {
-  background: #c70f40;
-}
-
-.pequeno {
-  padding: 5px 10px;
-  font-size: 13px;
-}
-
-.arquivo input[type="file"] {
-  font-size: 100px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-}
-
-.div-alerta{
-  margin-top:15px;
-}
-
-
-</style>

package/src/component/forms/CheckboxMultiplo.vue

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <b-form-group :label="titulo">
-      <b-form-checkbox-group
-        v-model="selecionado"
-        :options="opcoes"
-        :stacked="empilhado"
-        @click.native="executar"
-      ></b-form-checkbox-group>
-    </b-form-group>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from "vuex";
-
-export default {
-  name: "CheckboxMultiplo",
-  props: {
-    titulo: String,
-    opcoes: Array,
-    params: Object,
-    alterou: Function,
-    clicou: Function,
-    valorInicial: Array,
-    value: Array,
-    empilhado: {
-      type: Boolean,
-      default: false,
-    },
-    marcarFormSujo: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      selecionado: [],
-    };
-  },
-  mounted() {
-    this.selecionado = this.valorInicial;
-  },
-  methods: {
-    ...mapMutations("validation", ["insereFormSujo"]),
-    executar(event) {
-      if (this.marcarFormSujo) this.insereFormSujo(true);
-      this.$emit("input", this.selecionado);
-      let self = this;
-      setTimeout(function () {
-        // adicionado o pointerId para prevenir que não seja executado em duplicidade
-        if (self.clicou && event.pointerId === 1) self.clicou(self.params);
-      }, 100);
-    },
-  },
-  watch: {
-    selecionado() {
-      this.$emit("input", this.selecionado);
-      if (this.alterou) this.alterou(this.params);
-    },
-  },
-};
-</script>

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,324 +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,
-      }"
-    >
-      <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,
-    },
-  },
-  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;
-  margin-bottom: 20px;
-}
-
-.selecione-invalido {
-  border-bottom: 1px solid #ff5454;
-}
-
-.selecione-valido {
-  border-bottom: 1px solid #94aa2a;
-}
-
-.cadastrar-novo-titulo {
-  font-size: 18px;
-  margin-bottom: 5px;
-}
-</style>