@tagplus/components 4.7.3 → 4.7.5

package/src/components/Tip/Tip.vue

@@ -6,68 +6,64 @@
     align="middle"
     :class="tptipclasses"
   >
-    <el-col
-      :sm="24"
-      :lg="3"
-    >
-      <div style="display: flex; min-width:25px; justify-content: center; margin:15px; padding: auto">
+    <el-col :sm="24" :lg="3">
+      <div
+        style="
+          display: flex;
+          min-width: 25px;
+          justify-content: center;
+          margin: 15px;
+          padding: auto;
+        "
+      >
         <em class="far fa-lightbulb-on" />
       </div>
     </el-col>
 
-    <el-col
-      :sm="24"
-      :lg="21"
-    >
+    <el-col :sm="24" :lg="21">
       <div
         :id="`${_id}-text`"
-        style="margin:15px; margin-left:0px"
+        style="margin: 15px; margin-left: 0"
         v-html="text"
       />
     </el-col>
   </el-row>
-  <div
+  <el-row
     v-else
-    class="c-pointer"
-    @click="onClick"
+    :id="`${_id}`"
+    type="flex"
+    align="middle"
+    justify="space-between"
+    :class="tptipclasses"
   >
-    <el-row
-      :id="`${_id}`"
-      type="flex"
-      align="middle"
-      justify="space-between"
-      :class="tptipclasses"
-    >
-      <!-- Titulo -->
-      <el-col
-        :span="17"
+    <el-col :span="17">
+      <el-row
+        align="middle"
+        type="flex"
+        style="min-width: 25px; margin: 15px; padding: auto"
       >
-        <el-row align="middle" type="flex" style="min-width:25px; margin:15px; padding: auto">
-          <em class="far fa-lightbulb-on" />
-          <b class="tp-title">{{ title }}</b>
-        </el-row>
-      </el-col>
-
-      <!-- Close/Open Btn -->
-      <el-col :span="3" class="flexContent justify-content-end">
-        <em :class="closed ? 'fa fa-plus' : 'fa fa-minus'" class="tp-close-button" />
-      </el-col>
-
-      <!-- Texto -->
-      <el-col :class="'tp-text ' + (closed ? 'tp-vanish' : '' )" :span="24">
-        <div
-          :id="`${_id}-text`"
-          data-tp-tip-content
-          style="margin:15px; margin-left:0px"
-          v-html="text"
-        />
-      </el-col>
-    </el-row>
-  </div>
+        <em class="far fa-lightbulb-on" />
+        <b class="tp-title">{{ title }}</b>
+      </el-row>
+    </el-col>
+    <el-col :span="3" class="flexContent justify-content-end">
+      <em class="fa fa-ellipsis-h tp-close-button" @click="closed = !closed" />
+    </el-col>
+
+    <el-col :class="'tp-text ' + (closed ? 'tp-vanish' : '')" :span="24">
+      <div
+        :id="`${_id}-text`"
+        style="margin: 15px; margin-left: 0"
+        v-html="text"
+      />
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'TpTip',
   props: {
     id: {
@@ -121,23 +117,8 @@ export default {
 
       return classes
     }
-  },
-
-  methods: {
-    onClick (evt) {
-      // Permite clicar em link sem fechar Tip
-      const isLink = evt.target?.nodeName === 'A'
-      // Permite copiar texto sem fechar Tip
-      const isContent = evt.target?.closest('[data-tp-tip-content]')
-
-      if (isLink || isContent) {
-        return
-      }
-
-      this.closed = !this.closed
-    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -147,20 +128,15 @@ export default {
 
 .grid-content {
   flex-wrap: wrap;
+  background-color: rgb(76 135 251 / 10%);
   border-radius: 4px;
-  background-color: rgba(76, 135, 251, 0.1);
-  border-radius: 4px;
-  border: solid 1px rgba(76, 135, 251, 0.2);
+  border: solid 1px rgb(76 135 251 / 20%);
   padding: 1rem;
   font-size: 14px;
   line-height: 24px;
   color: #586d93;
 }
 
-[data-tp-tip-content] {
-  cursor: initial
-}
-
 .info-text {
   font-size: 12px;
   font-stretch: normal;
@@ -173,8 +149,11 @@ export default {
 .tp-tip-error {
   background: #f56c6c1a 0% 0% no-repeat padding-box;
   border: 1px solid #ff6077;
-  :deep(){
-    strong, b, em {
+
+  :deep() {
+    strong,
+    b,
+    em {
       color: #ff425f;
     }
   }
@@ -183,8 +162,11 @@ export default {
 .tp-tip-warning {
   background: #fff9ea 0% 0% no-repeat padding-box;
   border: 1px solid #ffc437;
-  :deep(){
-    strong, b, em {
+
+  :deep() {
+    strong,
+    b,
+    em {
       color: #ffc437;
     }
   }
@@ -193,8 +175,11 @@ export default {
 .tp-tip-success {
   background: #f3fcfc 0% 0% no-repeat padding-box;
   border: 1px solid #08a19e;
-  :deep(){
-    strong, b, em {
+
+  :deep() {
+    strong,
+    b,
+    em {
       color: #08a19e;
     }
   }
@@ -202,6 +187,7 @@ export default {
 
 .tp-close-button {
   padding: 10px;
+  cursor: pointer;
 }
 
 .tp-title {
@@ -216,9 +202,9 @@ export default {
 
 .tp-vanish {
   position: absolute;
-  max-height:0;
+  max-height: 0;
   transform: scale(0);
-  opacity:0;
+  opacity: 0;
   transition: 0s opacity linear;
 }
 </style>

package/src/components/ValueSelector.vue

@@ -0,0 +1,60 @@
+<template>
+  <el-row justify="center" align="middle" class="value-selector-row">
+    <el-button
+      v-for="item in formattedValues"
+      :key="item.value"
+      :type="type"
+      class="value-selector-btn"
+      @click="$emit('input', item.value)">
+      {{item.label}}
+    </el-button>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'ValueSelector',
+
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+
+  emits: ['input'],
+
+  computed: {
+    formattedValues () {
+      return this.modelValue.map(item => {
+        let label = item
+        if (typeof item === 'string'){
+          label = `'${item}'`
+        } else if (item === null){
+          label = 'null'
+        }
+        return {
+          label,
+          value: item
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.value-selector-row {
+  flex-wrap: nowrap;
+}
+
+.value-selector-btn {
+  flex-shrink: 0;
+  min-width: 50px;
+}
+</style>

package/src/components/autosuggestMixin.js

@@ -0,0 +1,301 @@
+/**
+ * Mixin contendo metodos para autosuggests
+ */
+export default {
+  props: {
+    /**
+     * @vuese
+     * id do css para teste unitário
+     */
+    id: {
+      type: String
+    },
+
+    modelValue: {
+      type: [Number, String, Object, Boolean, Array],
+      default: ''
+    },
+
+    // Desativa o loader global ao carregar lista
+    disableLoader: {
+      type: Boolean,
+      default: false
+    },
+
+    // Indica se primeiro item da lista deve ser retornado por padrão
+    noDefault: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * Se a lista vai ser carregada no create ou o labelKey não venha por padrão na requisição loadOnCreate = true,
+     * caso deva ser carregada quando o usuário clica deixar vazio ou false.
+     */
+    loadOnCreate: {
+      type: Boolean,
+      default: null
+    },
+
+    // Indicia se o campo deve ser desabilitado
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    // Se o valor desse autosuggest for obrigatório se o value for vazio o after get vai selecionar a primeira opção
+    isRequired: {
+      type: Boolean,
+      default: false
+    },
+
+    allowCreate: {
+      type: Boolean,
+      default: true
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+
+    disableForm: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      config: {
+        params: {}
+      },
+      doEmptyRequest: false,
+      list: [],
+      loading: true,
+      isLoadOnCreate: true,
+      modal: false,
+      autosuggest: false, // endpoint /autosuggest/*
+      customEndpoint: false // buscar em qualquer endpoint
+    }
+  },
+
+  computed: {
+    _id () {
+      return this.id || this.$options.name
+    },
+
+    /** desabilita o componente quando recebe disable true ou não tem permissão no form de incluir ou alterar */
+    _disabled () {
+      if (this.disabled) {
+        return true
+      }
+
+      if (this.disableForm) {
+        return true
+      }
+
+      return false
+    },
+
+    /** @vuese
+     * Action para buscar em stores customizadas/dinâmicas, por padrão pega do $options.listAction
+     */
+    listAction () {
+      return this.customAction ? this.customAction : this.$options.listAction
+    },
+
+    /** @vuese
+     * Retorna a URL a ser usada para buscar a lista caso não esteja definida no $options
+     * Passam aqui as urls customizadas, do /autosuggests, /entidade/categorias etc
+     */
+    customUrl () {
+      if (this.customEndpoint) {
+        return this.customEndpoint
+      }
+
+      if (this.autosuggest) {
+        return `/autosuggests/${this.$options.autosuggest}`
+      }
+
+      return false
+    },
+
+    _valueKey () {
+      return this.$options.valueKey || 'id'
+    },
+
+    _labelKey () {
+      return this.$options.labelKey || 'descricao'
+    }
+  },
+
+  /**
+   * Ao montar componente, inicia o loading
+   */
+  mounted () {
+    if (!this.disableLoader && this.isLoadOnCreate) {
+      this.startLoading(this.$options.name)
+    }
+  },
+
+  created () {
+    if (this.$parent.$options.name.substring(0, 6) === 'Filtro') {
+      this.isLoadOnCreate = false
+    } else if (this.loadOnCreate !== null) { // Se recebeu loadOnCreate via prop leva precedência
+      // Se for campo obrigatório e não vier o value inicial força a busca na api
+      if (this.isRequired && typeof this.value === 'undefined') {
+        this.isLoadOnCreate = true
+      } else {
+        this.isLoadOnCreate = this.loadOnCreate
+      }
+    } else if (this.$route && !isNaN(this.$route.params.id)) {
+      // Se está num form com ID só carrega lista quando clica
+      this.isLoadOnCreate = false
+    }
+
+    // Caso tenha value no created a primeira busca quando clica é vazia
+    this.doEmptyRequest = (typeof this.value !== 'undefined')
+  },
+
+  methods: {
+    /**
+     * HOOK executado quando getList é chamado
+     */
+    autosuggestMixin_beforeGet () { },
+
+    /**
+     * HOOK executado quando getList é chamado
+     */
+    autosuggestMixin_afterGet () { },
+
+    /**
+     * HOOK executado quando handleClose é chamado
+     */
+    autosuggestMixin_beforeHandleClose () { },
+
+    /**
+     * Realiza chamada da action no endpoint
+     * @param {*} busca valor recebido no autosuggest
+     */
+    async autosuggestMixin_getList (busca) {
+      busca ||= ''
+
+      if (!Array.isArray(busca) && (busca !== '' || this.config.params.q !== busca)) {
+        this.config.params.q = busca
+      }
+
+      // Tratamento caso clique no primeiro autosuggest daquele tipo com loadOnCreate false e tenha um valor padrão
+      if (this.doEmptyRequest) {
+        this.config.params.q = ''
+        this.doEmptyRequest = false
+      }
+
+      // Hook executado antes de recuperar a lista
+      this.autosuggestMixin_beforeGet()
+
+      this.loading = true
+
+      // Se buscar em /autosuggest ou url dinâmica/customizada pega a url aqui
+      this.config.customUrl = this.customUrl
+
+      /*   try {
+          await this.axios
+            .get(`${this.params.uri}?q=${busca}`)
+            .then(res => {
+              this.list = res.data
+            })
+            // eslint-disable-next-line no-unused-vars
+            .catch(_err => {
+              this.list = []
+            }).finally(() => {
+              this.loading = false
+            })
+        } catch (err) {
+          // this.$TpError(err)
+        } finally {
+          // this.finishLoading(this.$options.name)
+        } */
+    },
+
+    /**
+       * Metodo para lidar com a criação de um novo registro
+       * Exibe o modal por padrão
+       * @param {*} evt Evento de criação
+       */
+    autosuggestMixin_handleCreate (evt) {
+      if (evt.created) {
+        this.modal = true
+      }
+    },
+
+    /**
+       * Método para lidar com o fechamento do modal
+       * Por padrão recarrega a lista e recupera o valor criado no modal, caso haja
+       * @param {*} val Valor recebido do modal
+       */
+    async autosuggestMixin_handleClose (val) {
+      // Fecha o modal primeiro para diminuir tempo de transição
+      this.modal = false
+
+      if (val.id !== 0) {
+        const id = val.id?.id !== undefined ? val.id.id : val.id
+
+        await this.autosuggestMixin_getList('')
+
+        this.$emit('update:model-value', val.id)
+
+        const item = this.list.filter((value) => {
+          return id === value.id
+        })
+
+        this.$emit('change', item[0])
+      }
+    },
+
+    /**
+       * Evento para tratamento do valor
+       * Devolve o valor recebido para o v-model no componente pai
+       * @param {*} evt
+       */
+    autosuggestMixin_input (evt) {
+      this.$emit('update:model-value', evt)
+      this.autosuggestMixin_inputFullItem(evt)
+    },
+
+    /**
+     * Evento Input com os dados completos do item selecionado
+     * @param {*} evt
+     */
+    autosuggestMixin_inputFullItem (evt) {
+      let res = []
+
+      if (Array.isArray(evt)) {
+        evt.map((idValue) => {
+          this.list.map((item2) => {
+            if (idValue === item2[this._valueKey]) {
+              res.push(item2)
+            }
+
+            return item2
+          })
+        })
+      } else {
+        res = evt
+      }
+
+      this.$emit('inputFullItem', res)
+    },
+
+    autosuggestMixin_handleChange (val) {
+      if (val !== null && val !== undefined) {
+        const item = this.list.filter((value) => {
+          return val === value.id
+        })
+
+        this.$emit('change', item[0])
+      } else {
+        this.$emit('change', val)
+      }
+    }
+  }
+}

package/src/components/index.js

@@ -11,7 +11,10 @@ import Multisuggest from './Multisuggest'
 import Step from './Step'
 import Steps from './Steps'
 import InputNumber from './InputNumber'
-import Dialog from './Dialog'
+import { ElDialog } from 'element-plus'
+// hack para não ter que substituir todos tp-dialog de uma vez no nuxt
+ElDialog.name = 'TpDialog'
+const Dialog = ElDialog
 
 export {
   Autosuggest,

package/src/locale/i18n.js

@@ -0,0 +1,114 @@
+import { createI18n } from 'vue-i18n'
+import { reactive } from 'vue'
+
+let i18n
+/**
+ * Eventos que podem ser observados com watch
+ */
+const hooks = reactive({
+  onLanguageChanged: ''
+})
+
+const loadedLanguages = []
+
+/**
+ * Função padrão para importar arquivos de language
+ * caminho padrão src/locale/lang/*.js
+ * @param {String} filename
+ * @returns {Promise}
+ */
+let importLangFile = (filename) => {
+  return import(/* webpackChunkName: "lang-[request]" */ `@src/locale/lang/${filename}.js`)
+}
+
+/**
+ * Executa após trocar a lang, pode ser usado para salvar nos cookies ou session
+ * @param {String} locale
+ */
+let onLanguageSet = (locale) => {
+
+}
+
+/**
+ * Seta a linguagem atual
+ * @param {String} locale 'pt-br', 'en'
+ * @returns {String} locale
+ */
+export function setI18nLanguage (locale) {
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+
+  hooks.onLanguageChanged = locale
+  document.querySelector('html').setAttribute('lang', locale)
+  onLanguageSet(locale)
+  return locale
+}
+
+/**
+ *
+ * @param {String} locale 'pt-br', 'en'
+ * @returns {String} locale
+ */
+export async function loadLanguageAsync (locale) {
+  if (i18n.global.locale === locale) {
+    return locale
+  }
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(locale)) {
+    return locale
+  }
+
+  // load locale messages with dynamic import
+  const messages = await importLangFile(locale)
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+  loadedLanguages.push(locale)
+  return locale
+}
+
+/**
+ * Essa função cria a instância do i18n
+ * Exporta isso para poder importar do projeto nuxt sem ter que reimplementar toda a lib
+ * @param {Object} options
+ * @returns
+ */
+export async function setupI18n (options = {}) {
+  if (!i18n) {
+    const locale = options.locale || 'pt-br'
+
+    i18n = createI18n({
+      legacy: false,
+      locale,
+      missing: (locale, key) => {
+        console.warn(`translation missing: locale=${locale}, key=${key}`)
+      },
+      ...options
+    })
+
+    await loadLanguageAsync(locale)
+    setI18nLanguage(locale)
+  }
+  return i18n
+}
+
+export default (options) => {
+  // Sobrescreve a função de importar arquivos
+  if (typeof options.importLangFile === 'function') {
+    importLangFile = options.importLangFile
+  }
+
+  if (typeof options.onLanguageSet === 'function') {
+    onLanguageSet = options.onLanguageSet
+  }
+
+  return {
+    setupI18n,
+    loadLanguageAsync,
+    setI18nLanguage,
+    hooks
+  }
+}