@tagplus/components 5.3.3 → 5.3.4

package/src/components/Loader/Loader.vue

@@ -0,0 +1,317 @@
+<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

@@ -0,0 +1,68 @@
+@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

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

package/src/components/Money/Money.vue

@@ -0,0 +1,82 @@
+<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

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