@tagplus/components 4.7.12 → 5.1.0

package/src/components/Tip/Tip.vue

@@ -6,22 +6,24 @@
     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>
@@ -32,11 +34,14 @@
     type="flex"
     align="middle"
     justify="space-between"
-    :class="tptipclasses">
-    <el-col
-      :span="17"
-    >
-      <el-row align="middle" type="flex" style="min-width:25px; margin:15px; padding: auto">
+    :class="tptipclasses"
+  >
+    <el-col :span="17">
+      <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>
@@ -45,10 +50,10 @@
       <em class="fa fa-ellipsis-h tp-close-button" @click="closed = !closed" />
     </el-col>
 
-    <el-col :class="'tp-text ' + (closed ? 'tp-vanish' : '' )" :span="24">
+    <el-col :class="'tp-text ' + (closed ? 'tp-vanish' : '')" :span="24">
       <div
         :id="`${_id}-text`"
-        style="margin:15px; margin-left:0px"
+        style="margin: 15px; margin-left: 0"
         v-html="text"
       />
     </el-col>
@@ -56,7 +61,9 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'TpTip',
   props: {
     id: {
@@ -111,7 +118,7 @@ export default {
       return classes
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -121,10 +128,9 @@ 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;
@@ -143,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;
     }
   }
@@ -153,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;
     }
   }
@@ -163,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;
     }
   }
@@ -187,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,162 @@
+import { createI18n } from 'vue-i18n'
+import { reactive } from 'vue'
+
+let i18n
+
+const loadedLanguages = []
+
+let importLangFile = false
+const i18nHelper = {
+  /**
+   * Eventos que podem ser observados com watch
+   */
+  hooks: reactive({
+    onLanguageChanged: ''
+  })
+}
+
+/**
+ * Assincronamente importa e mescla arquivos de lang do vue components e do projeto em que essa lib é importada
+ * na lingaguem escolhida
+ * caminho padrão src/locale/lang/*.js
+ * @param {String} filename - The name of the language file to import.
+ * @returns {Promise} - A promise that resolves to an object containing merged custom and local language messages.
+ */
+const importLangFiles = async function (filename) {
+  let langsCustom = {}
+  const langsLocais = await import(/* webpackChunkName: "lang-tp-[request]" */ `@src/locale/lang/${filename}.js`)
+  if (importLangFile && typeof importLangFile === 'function') {
+    langsCustom = await importLangFile(filename)
+  }
+  return { ...langsCustom, ...langsLocais }
+}
+
+/**
+ * Essa função deve ser impementada no i18nHelper para executar ações após trocar a linguagem,
+ * como salvar nos cookies ou session a linguagem atual
+ *
+ * @param {String} locale - The locale string representing the language to be set.
+ * @throws {Error} Throws an error if the onLanguageSet function is not implemented.
+ * @returns {void}
+ */
+i18nHelper.onLanguageSet = function (locale) {
+  throw new Error('Implemente a função onLanguageSet na definição do plugin i18n')
+}
+
+/**
+ * Sets the current language and updates the i18n instance accordingly.
+ * Triggers the onLanguageChanged hook and calls the onLanguageSet function.
+ * @param {String} locale - The locale string representing the language to be set. EX: 'pt-br', 'en'
+ * @returns {String} - The updated locale string.
+ */
+i18nHelper.setI18nLanguage = function (locale) {
+  if (i18n.mode === 'legacy') {
+    i18n.global.locale = locale
+  } else {
+    i18n.global.locale.value = locale
+  }
+
+  i18nHelper.hooks.onLanguageChanged = locale
+  document.querySelector('html').setAttribute('lang', locale)
+  i18nHelper.onLanguageSet(locale)
+  return locale
+}
+
+/**
+ * Asynchronously loads and sets the current language for the i18n instance.
+ * If the language is already loaded, it returns immediately.
+ * @param {String} locale - The locale string representing the language to be set. EX: 'pt-br', 'en'
+ * @returns {Promise}
+ */
+i18nHelper.loadLanguageAsync = async function (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 importLangFiles(locale)
+  // set locale and locale message
+  i18n.global.setLocaleMessage(locale, messages.default)
+  loadedLanguages.push(locale)
+  return locale
+}
+
+/**
+ * Asynchronously sets up and initializes the i18n instance with the provided options.
+ * If the i18n instance is already created, it returns the existing instance.
+ *
+ * @param {Object} [options={}] - An optional object containing configuration options for the i18n instance.
+ * @param {String} [options.locale='pt-br'] - The default locale for the i18n instance.
+ * @param {Object} [options.i18nOptions] - Additional options to be passed to the createI18n function.
+ *
+ * @returns {Promise<I18n>} - A promise that resolves to the initialized i18n instance.
+ */
+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 i18nHelper.loadLanguageAsync(locale)
+    i18nHelper.setI18nLanguage(locale)
+  }
+  return i18n
+}
+
+/**
+ * A plugin for Vue.js that initializes and configures the i18n instance with customizable options.
+ * It also provides a helper object for managing language settings and loading language files asynchronously.
+ *
+ * @param {Object} options - An object containing configuration options for the plugin.
+ * @param {Object} options.i18nHelper - An object containing custom functions for managing language settings.
+ * @param {Function} [options.i18nHelper.importLangFile] - A function for asynchronously importing custom language files.
+ * @param {Function} [options.i18nHelper.onLanguageSet] - A function to be called after setting the language.
+ * @param {Object} [options.i18nOptions] - Additional options to be passed to the createI18n function.
+ *
+ * @returns {Object} - An object with an install function for Vue.js plugins.
+ */
+export default async (options) => {
+  // Override the importLangFile function if provided in options
+  if (typeof options.i18nHelper.importLangFile === 'function') {
+    i18nHelper.importLangFile = options.i18nHelper.importLangFile
+  }
+
+  // Override the onLanguageSet function if provided in options
+  if (typeof options.i18nHelper.onLanguageSet === 'function') {
+    i18nHelper.onLanguageSet = options.i18nHelper.onLanguageSet
+  }
+
+  let i18nOptions = {}
+  // Use provided i18nOptions if available
+  if (options.i18nOptions && typeof options.i18nOptions === 'object') {
+    i18nOptions = options.i18nOptions
+  }
+
+  // Initialize the i18n instance with the provided options
+  i18n = await setupI18n(i18nOptions)
+
+  return {
+    install: (app, opts) => {
+      // Install the original i18n instance
+      i18n.install(app, i18nOptions)
+
+      /**
+       * Override project-specific functions and provide the $i18nHelper
+       * in the Vue.js app's global properties.
+       **/
+      app.config.globalProperties.$i18nHelper = i18nHelper
+    }
+  }
+}

package/src/locale/lang/en.js

@@ -1,7 +1,8 @@
-import locale from 'element-ui/lib/locale/lang/en'
+import enLocale from 'element-plus/es/locale/lang/en'
 
 export default {
-  ...locale,
+  ...enLocale,
+  lingua: 'English',
 
   tp: {
     money: {

package/src/locale/lang/pt-br.js

@@ -1,7 +1,8 @@
-import locale from 'element-ui/lib/locale/lang/pt-br'
+import ptbrLocale from 'element-plus/es/locale/lang/pt-br'
 
 export default {
-  ...locale,
+  ...ptbrLocale,
+  lingua: 'Português',
 
   tp: {
     money: {