@tagplus/components 5.3.3 → 5.3.4

package/src/components/Step/index.js

@@ -0,0 +1,3 @@
+import Step from './Step'
+
+export default Step

package/src/components/Steps/Steps.vue

@@ -0,0 +1,18 @@
+<script>
+import { Steps } from 'element-ui'
+
+export default {
+  name: 'TpSteps',
+  extends: Steps,
+  props: {
+    newItem: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/Steps/index.js

@@ -0,0 +1,3 @@
+import Steps from './Steps'
+
+export default Steps

package/src/components/Tip/Tip.vue

@@ -0,0 +1,193 @@
+<template>
+  <el-row
+    v-if="!title"
+    :id="`${_id}`"
+    type="flex"
+    align="middle"
+    :class="tptipclasses"
+    class="text-black"
+  >
+    <el-col :xs="3" :sm="1" style="align-self: start;">
+      <em class="far fa-lightbulb-on" />
+    </el-col>
+
+    <el-col :xs="21" :sm="23">
+      <div
+        :id="`${_id}-text`"
+        v-html="text"
+      />
+    </el-col>
+  </el-row>
+
+  <el-row
+    v-else
+    :id="`${_id}`"
+    type="flex"
+    align="middle"
+    justify="center"
+    :class="tptipclasses"
+    class="text-black"
+  >
+
+    <el-col :xs="3" :sm="1">
+      <el-row type="flex" justify="start">
+        <em class="far fa-lightbulb-on" />
+      </el-row>
+    </el-col>
+
+    <el-col :xs="18" :sm="22">
+      <b class="tp-title">{{ title }}</b>
+    </el-col>
+
+    <el-col :xs="3" :sm="1">
+      <el-row type="flex" justify="end">
+        <em v-if="closed" class="fa fa-plus tp-close-button" @click="closed = !closed" />
+        <em v-else class="fa fa-minus tp-close-button" @click="closed = !closed" />
+      </el-row>
+    </el-col>
+
+    <el-col :xs="18" :sm="22" :class="'tp-text ' + (closed ? 'tp-vanish' : '' )">
+      <div
+        :id="`${_id}-text`"
+        v-html="text"
+      />
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'TpTip',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    text: {
+      type: String,
+      required: true,
+      default: ''
+    },
+
+    title: {
+      type: String,
+      default: ''
+    },
+
+    type: {
+      type: String,
+      default: 'default'
+    }
+  },
+
+  data () {
+    return {
+      closed: true
+    }
+  },
+
+  computed: {
+    _id () {
+      return this.id || this.$options.name
+    },
+
+    tptipclasses () {
+      const classes = ['grid-content', 'pa-3']
+
+      if (this.type === 'error') {
+        classes.push('tp-tip-error')
+      }
+
+      if (this.type === 'warning') {
+        classes.push('tp-tip-warning')
+      }
+
+      if (this.type === 'success') {
+        classes.push('tp-tip-success')
+      }
+
+      return classes
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.far.fa-lightbulb-on {
+  font-size: 20px;
+}
+
+.grid-content {
+  flex-wrap: wrap;
+  border-radius: 4px;
+  background-color: rgba(76, 135, 251, 0.1);
+  border-radius: 4px;
+  border: solid 1px rgba(76, 135, 251, 0.2);
+  padding: 1rem;
+  font-size: 14px;
+  line-height: 24px;
+  color: #586d93;
+}
+
+.info-text {
+  font-size: 12px;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.33;
+  letter-spacing: normal;
+  text-align: left;
+}
+
+.tp-tip-error {
+  background: #f56c6c1a 0% 0% no-repeat padding-box;
+  border: 1px solid #ff6077;
+  :deep(){
+    strong, b, em {
+      color: #ff425f;
+    }
+  }
+}
+
+.tp-tip-warning {
+  background: #fff9ea 0% 0% no-repeat padding-box;
+  border: 1px solid #ffc437;
+  :deep(){
+    strong, b, em {
+      color: #ffc437;
+    }
+  }
+}
+
+.tp-tip-success {
+  background: #f3fcfc 0% 0% no-repeat padding-box;
+  border: 1px solid #08a19e;
+  :deep(){
+    strong, b, em {
+      color: #08a19e;
+    }
+  }
+}
+
+.tp-close-button {
+  cursor: pointer;
+}
+
+.tp-title {
+  font-size: 16px;
+}
+
+.tp-text {
+  height: auto;
+  transition: 0.4s opacity ease-out;
+}
+
+.tp-vanish {
+  position: absolute;
+  max-height:0;
+  transform: scale(0);
+  opacity:0;
+  transition: 0s opacity linear;
+}
+</style>

package/src/components/Tip/index.js

@@ -0,0 +1,3 @@
+import Tip from './Tip'
+
+export default Tip

package/src/components/index.js

@@ -0,0 +1,31 @@
+import Autosuggest from './Autosuggest'
+import Inline from './Inline'
+import Money from './Money'
+import Percent from './Percent'
+import OptionsList from './OptionsList'
+import OptionsListItem from './OptionsListItem'
+import Loader from './Loader'
+import Skeleton from './Skeleton'
+import Tip from './Tip'
+import Multisuggest from './Multisuggest'
+import Step from './Step'
+import Steps from './Steps'
+import InputNumber from './InputNumber'
+import Dialog from './Dialog'
+
+export {
+  Autosuggest,
+  Inline,
+  Money,
+  Percent,
+  OptionsList,
+  OptionsListItem,
+  Loader,
+  Skeleton,
+  Tip,
+  Multisuggest,
+  Step,
+  Steps,
+  InputNumber,
+  Dialog
+}

package/src/locale/index.js

@@ -0,0 +1,78 @@
+import defaultLang from 'tp-ui/locale/lang/en'
+import Vue from 'vue'
+import Format from 'element-ui/src/locale/format'
+
+const format = Format(Vue)
+
+const i18nHandler = function () {
+  // Existe this e contem função "$t"
+  if (this && this.$i18n) {
+    return this.$i18n
+  }
+
+  // Tenta usar o vueI18n da instancia do TP, caso tenha sido carregada
+  if (Vue.prototype.$tpI18n) {
+    return Vue.prototype.$tpI18n
+  }
+
+  return null
+}
+
+/**
+ * Recupera qual a locale de linguagem atualmente sendo utilizada
+ */
+export const getCurrentLocale = () => {
+  return (Vue.prototype.$tpI18n) ? Vue.prototype.$tpI18n.locale : Vue.prototype.$defaultLang
+}
+
+/**
+ * Retorna as messages definidas na lang
+ */
+export const messages = function () {
+  const i18n = i18nHandler.apply(this, arguments)
+
+  if (i18n !== null && i18n !== undefined && i18n.messages) {
+    return i18n.messages
+  }
+
+  return defaultLang
+}
+
+/**
+ * Recupera um item de linguagem nas messages registradas.
+ * Caso não haja i18n registrado, utiliza da lingua padrão
+ * @param {String} path
+ * @param {Object} options
+ */
+export const t = function (path, options) {
+  const i18n = i18nHandler.apply(this, arguments)
+
+  if (i18n !== null && i18n !== undefined && i18n.t) {
+    return i18n.t(path)
+  }
+
+  const array = path.split('.')
+  let current = defaultLang
+  let value = null
+
+  for (let i = 0, j = array.length; i < j; i++) {
+    const property = array[i]
+
+    value = current[property]
+
+    if (!value) {
+      // eslint-disable-next-line
+      console.warn(`[Tp-i18n] Fall back to translate '${path}'. Key does not exist on language messages. Assuming key as value`)
+
+      return path
+    }
+
+    if (i === j - 1) return format(value, options)
+
+    current = value
+  }
+
+  return ''
+}
+
+export default { t, messages }

package/{dist → src/locale}/lang/en.js

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

package/{dist → src/locale}/lang/pt-br.js

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

package/src/main.js

@@ -0,0 +1,26 @@
+import ElementUI from 'element-ui'
+// import './assets/scss/index.scss'
+import * as components from './components'
+
+const install = function (Vue, opts = {}) {
+  Vue.prototype.$defaultLang = 'en'
+  Vue.prototype.$tpI18n = opts.locale || {}
+  opts.locale = null
+
+  // Element
+  ElementUI.install(Vue, opts)
+
+  // components
+  for (const componentName in components) {
+    const component = components[componentName]
+
+    Vue.component(component.name, component)
+  }
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+// TODO: Validar encapsulamento do ElementUI
+export default ({ ...ElementUI, ...components, install })

package/src/mixins/floatFormatter.js

@@ -0,0 +1,53 @@
+import { formatMoney } from 'tp-ui/utils/currency'
+
+/**
+ * Eventos para componentes tp-money e tp-percent mostratem o número formatado com a precisão correta e devolver float sem arredondar
+ */
+export default {
+  data () {
+    return {
+      formattedValue: this.value
+    }
+  },
+
+  props: {
+    allowEmpty: {
+      type: Boolean,
+      default: false
+    },
+
+    customPrecision: {
+      default: false
+    }
+  },
+
+  computed: {
+    locale () {
+      return this.t('locale')
+    }
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler (newValue, oldValue) {
+        if (newValue === '' && this.allowEmpty) { this.formattedValue = ''; return }
+        this.formattedValue = formatMoney(newValue, true, this.locale, this.customPrecision)
+      }
+    }
+  },
+
+  methods: {
+    input (evt) {
+      this.formattedValue = formatMoney(evt, true, this.locale, this.customPrecision)
+      const moneyFormatado = formatMoney(evt, false, this.locale, this.customPrecision)
+
+      this.$emit('input', moneyFormatado)
+    },
+
+    handleChange (evt) {
+      this.$emit('change', formatMoney(evt, false, this.locale, this.customPrecision))
+    }
+  }
+
+}

package/src/mixins/locale.js

@@ -0,0 +1,9 @@
+import { t } from 'tp-ui/locale'
+
+export default {
+  methods: {
+    t (...args) {
+      return t.apply(this, args)
+    }
+  }
+}

package/src/utils/currency.js

@@ -0,0 +1,180 @@
+import { messages } from 'tp-ui/locale'
+
+const defaults = messages().locale.number
+
+function format (input, opt = defaults) {
+  if (typeof input === 'number') {
+    input = input.toFixed(fixed(opt.precision))
+  }
+
+  const negative = input.indexOf('-') >= 0 ? '-' : ''
+
+  const numbers = onlyNumbers(input)
+  const currency = numbersToCurrency(numbers, opt.precision)
+  const parts = toStr(currency).split('.')
+  let integer = parts[0]
+  const decimal = parts[1]
+
+  integer = addThousandSeparator(integer, opt.thousands)
+
+  return opt.prefix + negative + joinIntegerAndDecimal(integer, decimal, opt.decimal) + opt.suffix
+}
+
+function unformat (input, precision = defaults.precision) {
+  const negative = (`${input}`).indexOf('-') >= 0 ? -1 : 1
+  const numbers = onlyNumbers(input)
+  const currency = numbersToCurrency(numbers, precision)
+
+  return currency * negative
+}
+
+/**
+ * Formata dinheiro para float sem arredondar ou para string garantindo decimais completos (.00) e respeitando caracter de decimal
+ * @author gteixeira
+ * @param {Float} input Valor
+ * @param {Boolean} toString Se o retorno será float ou string
+ * @param {Object} locale Configuração de localidade para saber número de casas decimais (precision) e caracter de decimal (decimal)
+ * @param {Number} customPrecision Caso o usuário queira sobrescrever o número de casas decimais (precision) da configuração de localidade.
+ * @returns
+ */
+function formatMoney (input, toString = false, locale = defaults, customPrecision = false) {
+  let inputString = removeSecondSeparator(`${input}`, locale)
+
+  // Impede de digitar . ou , porque o formatador já adiciona
+  if ((inputString.slice(-1).match(/[.,]/))) {
+    inputString = inputString.substring(0, inputString.length - 1)
+  }
+
+  const negative = inputString.indexOf('-') >= 0 ? -1 : 1
+
+  if (toString) {
+    input = completeZeros(customPrecision, inputString, locale)
+  }
+
+  const precision = customPrecision || locale.number.precision
+
+  const numbers = onlyNumbers(input, precision)
+  const currency = numbersToCurrency(numbers, precision)
+
+  if (toString) {
+    let num = negative === -1 ? `-${currency}` : `${currency}`
+
+    if (locale?.number?.decimal) {
+      const decimalChar = locale?.number?.decimal
+
+      num = num.replaceAll(',', decimalChar).replaceAll('.', decimalChar)
+    }
+
+    return num
+  }
+
+  return currency * negative
+}
+
+function completeZeros (customPrecision, input, locale) {
+  const precision = customPrecision || locale?.number?.precision || defaults.precision
+  const decimal = locale?.number?.decimal || defaults.decimal
+  let i = input.lastIndexOf('.')
+  const j = input.lastIndexOf(',')
+
+  i = i > j ? i : j
+  const qntDecimais = i ? input.length - i - 1 : 0
+
+  // correção para decimal quebrado
+  if (i === -1) {
+    input = input + decimal + '0'.repeat(precision)
+  } else if (i && qntDecimais < precision) {
+    input += '0'.repeat(precision - qntDecimais)
+  }
+
+  return input
+}
+
+// Impede que seja adicionado um segundo separadador apos o ponto ou a virgula
+function removeSecondSeparator (input, locale) {
+  const decimal = locale?.number?.decimal
+
+  if (!decimal || !input) {
+    return input
+  }
+
+  // Separa a string pelo decimal
+  const newInputParts = input.split(decimal)
+
+  if (newInputParts.length) {
+    let newInput = ''
+
+    // Percorre as partes dividas da string limpando tudo que nao for numerico depois do separador decimal
+    for (let i = 0; i < newInputParts.length; i++) {
+      newInputParts[i] = i >= 1 ? newInputParts[i].replace(/[^0-9]/g, '') : newInputParts[i] + decimal
+      newInput += newInputParts[i]
+    }
+
+    return newInput
+  }
+
+  return input
+}
+
+function onlyNumbers (input) {
+  return toStr(input).replace(/\D+/g, '') || '0'
+}
+
+// Uncaught RangeError: toFixed() digits argument must be between 0 and 20 at Number.toFixed
+function fixed (precision = defaults.precision) {
+  return between(0, precision, 20)
+}
+
+function between (min, n, max) {
+  return Math.max(min, Math.min(n, max))
+}
+
+function numbersToCurrency (numbers, precision) {
+  const exp = Math.pow(10, precision)
+  const float = parseFloat(numbers) / exp
+  return float.toFixed(fixed(precision))
+}
+
+function addThousandSeparator (integer, separator) {
+  return integer.replace(/(\d)(?=(?:\d{3})+\b)/g, `$1${separator}`)
+}
+
+// eslint-disable-next-line
+function currencyToIntegerAndDecimal (float) {
+  return toStr(float).split('.')
+}
+
+function joinIntegerAndDecimal (integer, decimal, separator) {
+  return decimal ? integer + separator + decimal : integer
+}
+
+function toStr (value) {
+  return value ? value.toString() : ''
+}
+
+function setCursor (el, position) {
+  const setSelectionRange = function () { el.setSelectionRange(position, position) }
+
+  if (el === document.activeElement) {
+    setSelectionRange()
+    setTimeout(setSelectionRange, 1) // Android Fix
+  }
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way
+function event (name) {
+  const evt = document.createEvent('Event')
+
+  evt.initEvent(name, true, true)
+
+  return evt
+}
+
+export {
+  formatMoney,
+  format,
+  unformat,
+  setCursor,
+  completeZeros,
+  event
+}