@tagplus/components 4.7.12 → 5.1.0

package/src/components/OptionsListItem/OptionsListItem.vue

@@ -1,7 +1,11 @@
 <template>
   <li
     :id="id"
-    :class="['tp-options-list-item', itemType, active == optValue ? 'active' : '']"
+    :class="[
+      'tp-options-list-item',
+      itemType,
+      active === optValue ? 'active' : '',
+    ]"
     tabindex="0"
     @click="updateOption"
     @keyup.enter="updateOption"
@@ -9,10 +13,7 @@
     <div :class="['icon', direction]">
       <em :class="[icon, 'options-icon']" />
       <p class="text">
-        <span
-          v-for="(text, index) in texts"
-          :key="index"
-        >
+        <span v-for="(text, index) in texts" :key="index">
           {{ text }}
         </span>
       </p>
@@ -22,7 +23,8 @@
 </template>
 
 <script>
-export default {
+import { defineComponent } from 'vue'
+export default defineComponent({
   name: 'TpOptionsListItem',
   props: {
     itemType: {
@@ -70,13 +72,14 @@ export default {
       default: ''
     }
   },
+  emits: ['input', 'updateValor'],
   methods: {
     updateOption () {
       this.$emit('updateValor', this.optValue)
       this.$emit('input', this.optValue)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -118,7 +121,7 @@ export default {
     }
   }
 
-  &:focus{
+  &:focus {
     border: 1px solid #437cf9;
   }
 
@@ -126,33 +129,25 @@ export default {
     color: #565b66;
     display: flex;
     align-items: center;
+
     // text-align: center;
     transition: color 150ms ease-in-out;
     line-height: 1.75em;
     min-width: 120px;
 
-    &.horizontal {
-      justify-content: space-around;
-      min-width: 130px;
-
-      .text {
-        text-align: center;
-        width: 70px;
-
-        span {
-          &:first-child {
-            font-weight: $bold;
-          }
-        }
+    .text {
+      span {
+        display: block;
       }
+    }
 
-      .options-icon {
-        font-size: 47px;
-      }
+    .options-icon {
+      font-size: 24px;
     }
 
     &.vertical {
       flex-direction: column;
+
       .text {
         span {
           font-size: 14px;
@@ -164,28 +159,37 @@ export default {
       }
     }
 
-    .text {
-      span {
-        display: block;
+    &.horizontal {
+      justify-content: space-around;
+      min-width: 130px;
+
+      .text {
+        text-align: center;
+        width: 70px;
+
+        span {
+          &:first-child {
+            font-weight: $bold;
+          }
+        }
       }
-    }
 
-    .options-icon {
-      font-size: 24px;
+      .options-icon {
+        font-size: 47px;
+      }
     }
   }
-
 }
 
-.option-item-badge{
-    background-color: #F56C6C;
-    border: 1px solid #FFF;
-    position: absolute;
-    top: 0;
-    transform: translateY(-50%) translateX(100%);
-    height: 12px;
-    width: 12px;
-    right: 5px;
-    border-radius: 50%;
-  }
+.option-item-badge {
+  background-color: #f56c6c;
+  border: 1px solid #fff;
+  position: absolute;
+  top: 0;
+  transform: translateY(-50%) translateX(100%);
+  height: 12px;
+  width: 12px;
+  right: 5px;
+  border-radius: 50%;
+}
 </style>

package/src/components/Percent/Percent.vue

@@ -2,36 +2,30 @@
   <el-input
     :id="`${_id}`"
     class="tp-percent"
-    :value="formattedValue"
+    :model-value="formattedValue"
     v-bind="$attrs"
     :maxlength="maxlength"
     @input="input"
     @change="handleChange"
     @focus="$event.target.select()"
   >
-    <template
-      v-if="!removePrepend"
-      slot="prepend"
-    >
+    <template v-if="!removePrepend" #prepend>
       %
     </template>
-    <template
-      v-if="showAppend"
-      slot="append"
-    >
+    <template v-if="showAppend" #append>
       %
     </template>
   </el-input>
 </template>
 
 <script>
-import Locale from 'tp-ui/mixins/locale'
+import { defineComponent } from 'vue'
 import floatFormatterMixin from 'tp-ui/mixins/floatFormatter'
 
-export default {
+export default defineComponent({
   name: 'TpPercent',
-
-  mixins: [Locale, floatFormatterMixin],
+  mixins: [floatFormatterMixin],
+  inheritAttrs: false,
   props: {
     id: {
       type: String,
@@ -69,7 +63,7 @@ export default {
       return this.id || this.$options.name
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

package/src/components/Skeleton/Skeleton.vue

@@ -3,7 +3,7 @@
     <span
       v-for="item in count"
       :key="item"
-      :class="{'circle':circle}"
+      :class="{ circle: circle }"
       :style="`--duration:${duration}; --item:${item}; width: ${cWidth}; height: ${cHeight}`"
     >
       &nbsp;
@@ -12,12 +12,13 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 /**
  * Placeholder de elemententos enquanto estão sendo carregados.
  * Exibe retângulos  e circulos para mostrar ao usuario a estrutura dos dados que serão exibidos.
  * `<tp-skeleton />`
  */
-export default {
+export default defineComponent({
   name: 'TpSkeleton',
   props: {
     /**
@@ -84,14 +85,15 @@ export default {
       return `${this.height}em`
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
-@keyframes skeleton{
+@keyframes skeleton {
   0% {
     background-position: -200px 0;
   }
+
   100% {
     background-position: calc(200px + 100%) 0;
   }
@@ -101,15 +103,19 @@ export default {
   display: block;
   height: 100%;
 
+  /* stylelint-disable-next-line custom-property-pattern */
   --baseColor: #ebeef2;
 
   span {
-    background-color: var(--baseColor);
+    /* stylelint-disable-next-line custom-property-pattern */
+    $base-color: var(--baseColor);
+
+    background-color: var($base-color);
     background-image: linear-gradient(
       90deg,
-      var(--baseColor),
-      mix($--color-white, $--border-color-light, 70%),
-      var(--baseColor)
+      var($base-color),
+      color-mix($--color-white, $--border-color-light, 70%),
+      var($base-color)
     );
     background-size: 200px 100%;
     background-repeat: no-repeat;
@@ -120,18 +126,17 @@ export default {
     margin-bottom: 3px;
     width: 100%;
     min-height: 15px;
-
     animation-name: skeleton;
     animation-duration: calc(var(--duration) * 1s);
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
+
     // animation-delay: calc(var(--item) * 300ms);
 
-    &.circle{
+    &.circle {
       width: inherit;
       border-radius: 50%;
     }
   }
 }
-
 </style>

package/src/components/Step/Step.vue

@@ -6,7 +6,8 @@
       !isSimple && `is-${$parent.direction}`,
       isSimple && 'is-simple',
       isLast && !space && !isCenter && 'is-flex',
-      isCenter && !isVertical && !isSimple && 'is-center']"
+      isCenter && !isVertical && !isSimple && 'is-center',
+    ]"
   >
     <!-- icon & line -->
     <div
@@ -18,6 +19,7 @@
         :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
       >
         <em class="el-step__line-inner" :style="lineStyle" />
+
       </div>
 
       <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
@@ -32,28 +34,22 @@
         </slot>
         <em
           v-else
-          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          :class="[
+            'el-icon-' + (currentStatus === 'success' ? 'check' : 'close'),
+          ]"
           class="el-step__icon-inner is-status"
         />
       </div>
     </div>
     <!-- title & description -->
     <div class="el-step__main">
-      <div
-        ref="title"
-        class="el-step__title"
-        :class="['is-' + currentStatus]"
-      >
+      <div ref="title" class="el-step__title" :class="['is-' + currentStatus]">
         <slot name="title">
           {{ title }}
         </slot>
       </div>
       <div v-if="isSimple" class="el-step__arrow" />
-      <div
-        v-else
-        class="el-step__description"
-        :class="['is-' + currentStatus]"
-      >
+      <div v-else class="el-step__description" :class="['is-' + currentStatus]">
         <slot name="description">
           {{ description }}
         </slot>
@@ -61,8 +57,11 @@
     </div>
   </div>
 </template>
+
 <script>
-export default {
+import { defineComponent } from 'vue'
+
+export default defineComponent({
   name: 'TpStep',
 
   props: {
@@ -119,7 +118,10 @@ export default {
       return this.$parent.steps.length
     },
     space () {
-      const { isSimple, $parent: { space } } = this
+      const {
+        isSimple,
+        $parent: { space }
+      } = this
 
       return isSimple ? '' : space
     },
@@ -128,20 +130,21 @@ export default {
       const parent = this.$parent
       const len = parent.steps.length
 
-      const space = (typeof this.space === 'number'
-        ? `${this.space }px`
-        : this.space
-          ? this.space
-          : `${100 / (len - (this.isCenter ? 0 : 1)) }%`)
+      const space =
+        typeof this.space === 'number'
+          ? `${this.space}px`
+          : this.space
+            ? this.space
+            : `${100 / (len - (this.isCenter ? 0 : 1))}%`
 
       style.flexBasis = space
 
       if (this.isVertical) return style
 
       if (this.isLast) {
-        style.maxWidth = `${100 / this.stepsCount }%`
+        style.maxWidth = `${100 / this.stepsCount}%`
       } else {
-        style.marginRight = `${-this.$parent.stepOffset }px`
+        style.marginRight = `${-this.$parent.stepOffset}px`
       }
 
       return style
@@ -153,14 +156,13 @@ export default {
       this.updateStatus(this.$parent.active)
       this.internalStatus = this.status
     }
-
   },
 
   beforeCreate () {
     this.$parent.steps.push(this)
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     const steps = this.$parent.steps
     const index = steps.indexOf(this)
 
@@ -172,11 +174,15 @@ export default {
   mounted () {
     const unwatch = this.$watch('index', () => {
       this.$watch('$parent.active', this.updateStatus, { immediate: true })
-      this.$watch('$parent.processStatus', () => {
-        const activeIndex = this.$parent.active
-
-        this.updateStatus(activeIndex)
-      }, { immediate: true })
+      this.$watch(
+        '$parent.processStatus',
+        () => {
+          const activeIndex = this.$parent.active
+
+          this.updateStatus(activeIndex)
+        },
+        { immediate: true }
+      )
       unwatch()
     })
   },
@@ -202,29 +208,30 @@ export default {
       let step = 100
       const style = {}
 
-      style.transitionDelay = `${150 * this.index }ms`
+      style.transitionDelay = `${150 * this.index}ms`
 
       // if (status === this.$parent.processStatus) {
       //   step = this.currentStatus !== 'error' ? 0 : 0
       // } else
       if (status === 'wait') {
         step = 0
-        style.transitionDelay = `${-50 * this.index }ms`
+        style.transitionDelay = `${-50 * this.index}ms`
       }
 
       style.borderWidth = step && !this.isSimple ? '1px' : 0
       this.$parent.direction === 'vertical'
-        ? style.height = `${step }%`
-        : style.width = `${step }%`
+        ? (style.height = `${step}%`)
+        : (style.width = `${step}%`)
 
       this.lineStyle = style
     }
   }
-}
+})
 </script>
+
 <style lang="scss" scoped>
 .el-step__head.is-process {
-    color: #2d6eda;
-    border-color: #2d6eda;
+  color: #2d6eda;
+  border-color: #2d6eda;
 }
 </style>

package/src/components/Steps/Steps.vue

@@ -1,7 +1,8 @@
 <script>
-import { Steps } from 'element-ui'
+import { defineComponent } from 'vue'
+import { ElSteps as Steps } from 'element-plus'
 
-export default {
+export default defineComponent({
   name: 'TpSteps',
   extends: Steps,
   props: {
@@ -10,9 +11,5 @@ export default {
       default: false
     }
   }
-}
-
+})
 </script>
-
-<style lang="scss" scoped>
-</style>

package/src/components/TesteToCurrency.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    Começo do teste com {{ decimais }} casas decimais, até o número {{ limite }}, com o locale atual {{ $t('locale.prefix') }}.
+    <div v-if="ready">
+      <div v-if="listaErros.length">
+        Acabou o teste com erros, log:
+      </div>
+      <div v-else>
+        Acabou o teste sem erros
+      </div>
+      <div
+        v-for="(message, key) in listaErros"
+        :key="key"
+      >
+        {{ message }}
+      </div>
+    </div>
+    <el-button
+      v-if="!start"
+      type="primary"
+      size="default"
+      @click="startTest"
+    >
+      Start
+    </el-button>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+// import { toCurrency } from 'tp-ui/utils/filters'
+
+export default defineComponent({
+  name: 'TesteToCurrency',
+  // filters: { toCurrency },
+
+  data () {
+    return {
+      start: false,
+      ready: false,
+      listaErros: [],
+      testeFixo: [1000, 0, 0.1, 0.2, 0.01],
+      max: 10000,
+      decimais: 2,
+      limiteErros: 100
+    }
+  },
+
+  computed: {
+    divisorDecimais () {
+      return Math.pow(10, this.decimais)
+    },
+
+    limite () {
+      return this.max * this.divisorDecimais
+    }
+  },
+
+  mounted () {
+    for (let i = 0; i < this.testeFixo.length; i++) {
+      const res = this.testeNum(this.testeFixo[i])
+
+      if (res !== true) {
+        this.listaErros.push(res)
+      }
+    }
+
+    this.ready = true
+  },
+
+  methods: {
+    toCurrency (val) {
+      if (val === '') {
+        return val
+      }
+
+      try {
+        let with2Decimals = val.toString().match(/^-?\d+(?:\.\d{0,2})?/)[0]
+
+        with2Decimals = Number(with2Decimals).toLocaleString(this.$t('locale.prefix'), {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+
+        return with2Decimals
+      } catch (Exception) {
+        return val.toLocaleString(this.$t('locale.prefix'), {
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2
+        })
+      }
+    },
+
+    reverseString (str) {
+      return str.split('').reverse().join('')
+    },
+
+    startTest () {
+      this.ready = true
+      this.listaErros = []
+      this.start = false
+
+      for (let i = 0; i < this.limite && this.listaErros.length < this.limiteErros; i++) {
+        const num = i / this.divisorDecimais
+        const res = this.testeNum(num)
+
+        if (res !== true) {
+          this.listaErros.push(res)
+        }
+      }
+
+      this.ready = true
+    },
+
+    addThousandsSeparator (number) {
+      const numStr = number.toString()
+      const parts = numStr.split(this.$t('locale.number.decimal'))
+
+      const integerPart = parts[0]
+      let formattedInteger = ''
+
+      // Insert commas for thousands separation
+      for (let i = 0; i < integerPart.length; i++) {
+        if (i > 0 && (integerPart.length - i) % 3 === 0) {
+          formattedInteger += this.$t('locale.number.thousands')
+        }
+        formattedInteger += integerPart[i]
+      }
+
+      if (parts.length === 2) {
+        const decimalPart = parts[1]
+        return formattedInteger + ',' + decimalPart
+      } else {
+        return formattedInteger
+      }
+    },
+
+    testeNum (num) {
+      const newNum = `${this.toCurrency(num) }`
+
+      let numF = (`${num }`).substring(0, newNum.length)
+      let i = ''
+      if (this.$t('locale.number.decimal') === '.') {
+        i = this.reverseString(numF).indexOf('.')
+      }
+      if (this.$t('locale.number.decimal') === ',') {
+        numF = numF.replace('.', ',')
+        i = this.reverseString(numF).indexOf(',')
+      }
+
+      if (i === -1) {
+        numF += `${ this.$t('locale.number.decimal') + '00' }`
+      } else if (i !== 2) {
+        const qntZeros = Math.abs(i - 2)
+        if (qntZeros > 0) {
+          numF += '0'.repeat(qntZeros)
+        }
+      }
+      if (numF.split(this.$t('locale.number.decimal'))[0].length >= 4) {
+        numF = this.addThousandsSeparator(numF)
+      }
+
+      if (numF !== newNum) {
+        return `errado | ${ num } | ${ newNum}`
+      }
+
+      return true
+    }
+  }
+})
+</script>