@tagplus/components 5.3.4 → 5.3.6

package/src/components/Loader/Loader.vue

@@ -1,317 +0,0 @@
-<template>
-  <div class="tp-loader">
-    <div class="wrapper">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="150px"
-        height="150px"
-      >
-        <mask id="mascara">
-          <rect
-            x="0"
-            y="0"
-            width="100%"
-            height="100%"
-            fill="white"
-          />
-          <circle
-            id="circulo-interno"
-            class="circulo"
-            cx="45"
-            cy="50"
-            r="40"
-            fill="black"
-          />
-        </mask>
-        <g
-          id="bola"
-          fill="none"
-          fill-rule="evenodd"
-          transform="translate(30 30)"
-        >
-          <circle
-            id="circulo"
-            class="circulo"
-            cx="45"
-            cy="50"
-            r="40"
-            fill="#1F7DE7"
-            mask="url(#mascara)"
-          />
-          <g
-            fill="none"
-            fill-rule="evenodd"
-          >
-            <circle
-              class="residuo top center"
-              cx="45"
-              cy="9"
-              r="15"
-              fill="#FFCB05"
-            />
-            <circle
-              class="residuo top right"
-              cx="72"
-              cy="21"
-              r="8.5"
-              fill="#1F7DE7"
-            />
-            <circle
-              class="residuo middle right"
-              cx="81"
-              cy="45"
-              r="12"
-              fill="#1F7DE7"
-            />
-            <circle
-              class="residuo bottom right"
-              cx="71"
-              cy="70"
-              r="8.5"
-              fill="none"
-              stroke="#FFCB05"
-              stroke-width="3"
-            />
-            <circle
-              class="residuo bottom center"
-              cx="45"
-              cy="81"
-              r="8.5"
-              fill="none"
-              stroke="#1F7DE7"
-              stroke-width="3"
-            />
-            <circle
-              class="residuo bottom left"
-              cx="19"
-              cy="70"
-              r="8.5"
-              fill="#1F7DE7"
-            />
-            <circle
-              class="residuo middle left"
-              cx="9"
-              cy="45"
-              r="10"
-              fill="#FFCB05"
-            />
-            <circle
-              class="residuo top left"
-              cx="18"
-              cy="21"
-              r="8.5"
-              fill="none"
-              stroke="#1F7DE7"
-              stroke-width="3"
-            />
-          </g>
-        </g>
-      </svg>
-
-      <div class="icones">
-        <i
-          v-for="(icon, k) in icons"
-          :key="k"
-          :class="icon"
-          :style="`--iconsItem:${k}`"
-        />
-      </div>
-
-      <div class="texto">
-        <!-- Texto contido no loading -->
-        <slot />
-      </div>
-    </div>
-    <div class="overlay" />
-  </div>
-</template>
-
-<script>
-/*
-    Cria componente de loader com overlayer em toda a página
-    `<tp-loader />`
-  */
-export default {
-  name: 'TpLoader',
-  props: {
-    // Lista contendo as classes de icones a serem exibidos no loader
-    icons: {
-      type: Array,
-      required: false,
-      default: () => ([
-        'fa-solid fa-badge-percent',
-        'fa-solid fa-box-usd',
-        'fa-solid fa-credit-card-front',
-        'fa-solid fa-cart-shopping',
-        'fa-solid fa-gift',
-        'fa-solid fa-dolly-flatbed-alt',
-        'fa-solid fa-receipt',
-        'fa-solid fa-chart-pie-alt',
-        'fa-solid fa-badge-percent',
-        'fa-solid fa-box-usd',
-        'fa-solid fa-credit-card-front',
-        'fa-solid fa-cart-shopping',
-        'fa-solid fa-gift',
-        'fa-solid fa-dolly-flatbed-alt',
-        'fa-solid fa-receipt',
-        'fa-solid fa-chart-pie-alt'
-      ])
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import url("animations.scss");
-$oTop: 0;
-$oBottom: 70%;
-$oMiddle: 35%;
-$oLeft: 0;
-$oRight: 65%;
-$oCenter: 30%;
-
-$oTrans: 40px;
-
-//tempo da animacao em segundos
-$animationTime: 2;
-$numIcons: 8;
-
-.tp-loader {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 5000;
-
-  > .overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: #fff;
-    opacity: 1;
-  }
-  .wrapper {
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    height: 100%;
-
-    > svg {
-      position: relative;
-      z-index: 98;
-      margin-top: -10px;
-    }
-
-    .circulo {
-      transform-origin: 30% 32%;
-    }
-    #circulo {
-      animation-name: expande;
-      animation-duration: #{$animationTime}s;
-      animation-direction: normal;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-    #circulo-interno {
-      animation-name: expandeInterno;
-      animation-duration: #{$animationTime}s;
-      animation-direction: normal;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    .icones {
-      position: absolute;
-      z-index: 99;
-      width: 50px;
-      height: 50px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: row;
-
-      i {
-        font-size: 3em;
-        position: absolute;
-        display: inline-block;
-        width: 100%;
-        line-height: 100%;
-        opacity: 0;
-        transform-origin: center center;
-        color: $--color-primary;
-
-        animation-name: icone;
-        animation-duration: #{$animationTime}s;
-        animation-timing-function: ease-out;
-        animation-iteration-count: 1;
-        animation-delay: calc(var(--iconsItem) * #{$animationTime}s);
-
-        &:last-child {
-          animation-iteration-count: infinite;
-        }
-      }
-    }
-
-    #bola {
-      .residuo {
-        animation-name: residuo;
-        animation-duration: #{$animationTime}s;
-        animation-direction: reverse;
-        animation-iteration-count: infinite;
-        animation-timing-function: ease-in;
-        transform: scale(0.1);
-
-        &.top {
-          transform-origin: #{$oCenter} #{$oTop};
-
-          &.right {
-            transform-origin: 45% 5%;
-            transform: translate(#{$oTrans}, -#{$oTrans}) scale(0.1);
-          }
-          &.left {
-            transform-origin: 15% 5%;
-            transform: translate(-#{$oTrans}, -#{$oTrans}) scale(0.1);
-          }
-        }
-        &.bottom {
-          transform-origin: #{$oCenter} #{$oBottom};
-
-          &.right {
-            transform-origin: 45% 65%;
-            transform: translate(#{$oTrans}, #{$oTrans}) scale(0.1);
-          }
-          &.left {
-            transform-origin: 15% 65%;
-            transform: translate(-#{$oTrans}, #{$oTrans}) scale(0.1);
-          }
-        }
-        &.middle {
-          &.right {
-            transform-origin: #{$oRight} #{$oMiddle};
-          }
-          &.left {
-            transform-origin: #{$oLeft} #{$oMiddle};
-          }
-        }
-      }
-    }
-
-    .texto {
-      position: absolute;
-      display: inline-flex;
-      z-index: 5001;
-      color: $--color-text-primary;
-      margin-top: 100px;
-      font-size: 1.5em;
-      font-weight: bold;
-    }
-  }
-}
-</style>

package/src/components/Loader/animations.scss

@@ -1,68 +0,0 @@
-@keyframes expande {
-  0%{
-    transform: scale(0);
-    opacity: 1;
-  }
-  25%{
-    transform: scale(1);
-    opacity: 1;
-  }
-  40%{
-    transform: scale(0.8);
-    opacity: 0;
-  }
-  50%{
-    transform: scale(0);
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-@keyframes expandeInterno {
-  0%, 10%, 100%{
-    transform: scale(0);
-  }
-  50%{
-    transform: scale(2);
-  }
-}
-
-@keyframes residuo {
-  0%, 30%{
-    opacity: 0;
-  }
-  40%{
-    opacity: 0.5;
-  }
-  60%{
-    opacity: 1;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.2);
-  }
-}
-
-@keyframes icone {
-  0%, 15% {
-    opacity: 1;
-    transform: scale(0.1);
-  }
-  35%{
-    opacity: 1;
-    transform: scale(1);
-  }
-  85% {
-    opacity: 1;
-    transform: scale(1.2);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(1.8);
-  }
-}

package/src/components/Loader/index.js

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

package/src/components/Money/Money.vue

@@ -1,82 +0,0 @@
-<template>
-  <el-input
-    :id="`${_id}`"
-    class="tp-money"
-    :value="formattedValue"
-    v-bind="$attrs"
-    :maxlength="maxlength"
-    @input="input"
-    @change="handleChange"
-    @focus="$event.target.select()"
-  >
-    <template
-      v-if="!removePrepend"
-      slot="prepend"
-    >
-      {{ prepend }}
-    </template>
-
-    <template
-      v-for="(_, slot) of $scopedSlots"
-      #[slot]="scope"
-    >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
-    </template>
-  </el-input>
-</template>
-
-<script>
-import Locale from 'tp-ui/mixins/locale'
-import floatFormatterMixin from 'tp-ui/mixins/floatFormatter'
-
-export default {
-  name: 'TpMoney',
-
-  mixins: [Locale, floatFormatterMixin],
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null
-    },
-
-    // remove o simbolo em prepend
-    removePrepend: {
-      type: Boolean,
-      default: false
-    },
-    // valor do campo. Pode ser usado como v-model também
-    value: {
-      type: [Number, String],
-      default: 0
-    },
-
-    // tamanho máximo do campo. limitado por padrão a 21 caracteres por limitações do JS
-    maxlength: {
-      type: Number,
-      default: 21
-    }
-  },
-
-  computed: {
-    _id () {
-      return this.id || this.$options.name
-    },
-
-    prepend () {
-      return this.t('tp.money.currency')
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tp-money {
-  & input {
-    text-align: right;
-  }
-}
-</style>

package/src/components/Money/index.js

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