@tagplus/components 5.2.7 → 5.2.9

package/src/components/InputNumber/input-number.js

@@ -1,135 +0,0 @@
-import { isNil } from 'lodash-unified'
-import { useSizeProp } from 'element-plus/es/hooks/index'
-import {
-  buildProps,
-  isNumber,
-  CHANGE_EVENT,
-  INPUT_EVENT,
-  UPDATE_MODEL_EVENT,
-} from '@/utils'
-
-export const inputNumberProps = buildProps({
-  /**
-   * @description same as `id` in native input
-   */
-  id: {
-    type: String,
-    default: undefined,
-  },
-  /**
-   * @description incremental step
-   */
-  step: {
-    type: Number,
-    default: 1,
-  },
-  /**
-   * @description whether input value can only be multiple of step
-   */
-  stepStrictly: Boolean,
-  /**
-   * @description the maximum allowed value
-   */
-  max: {
-    type: Number,
-    default: Number.POSITIVE_INFINITY,
-  },
-  /**
-   * @description the minimum allowed value
-   */
-  min: {
-    type: Number,
-    default: Number.NEGATIVE_INFINITY,
-  },
-  /**
-   * @description binding value
-   */
-  modelValue: {
-    type: [Number, String],
-    default: null
-  },
-  /**
-   * @description same as `readonly` in native input
-   */
-  readonly: Boolean,
-  /**
-   * @description whether the component is disabled
-   */
-  disabled: Boolean,
-  /**
-   * @description size of the component
-   */
-  size: useSizeProp,
-  /**
-   * @description whether to enable the control buttons
-   */
-  controls: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @description position of the control buttons
-   */
-  controlsPosition: {
-    type: String,
-    default: '',
-    values: ['', 'right'],
-  },
-  /**
-   * @description value should be set when input box is cleared
-   */
-  valueOnClear: {
-    type: [String, Number, null],
-    validator: (val) =>
-      val === null || isNumber(val) || ['min', 'max'].includes(val),
-    default: null,
-  },
-  /**
-   * @description same as `name` in native input
-   */
-  name: String,
-  /**
-   * @description same as `label` in native input
-   */
-  label: String,
-  /**
-   * @description same as `placeholder` in native input
-   */
-  placeholder: String,
-  /**
-   * @tagplus default 2
-   * @description precision of input value
-   */
-  precision: {
-    type: Number,
-    default: 2,
-    validator: (val) =>
-      val >= 0 && val === Number.parseInt(`${val}`, 10),
-  },
-  /**
-   * @description whether to trigger form validation
-   */
-  validateEvent: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @tagplus
-   * Se false permite campo vazio
-   **/
-  stringDefaultsZero: {
-    type: Boolean,
-    default: true
-  }
-})
-
-export const inputNumberEmits = {
-  [CHANGE_EVENT]: (cur, prev) =>
-    prev !== cur,
-  blur: (e) => e instanceof FocusEvent,
-  focus: (e) => e instanceof FocusEvent,
-  [INPUT_EVENT]: (val) =>
-    isNumber(val) || isNil(val),
-  [UPDATE_MODEL_EVENT]: (val) =>
-    isNumber(val) || isNil(val),
-}

package/src/components/Loader/Loader.vue

@@ -1,306 +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>
-import { defineComponent } from 'vue'
-/*
-    Cria componente de loader com overlayer em toda a página
-    `<tp-loader />`
-  */
-export default defineComponent({
-  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 'animations';
-
-$o-top: 0;
-$o-bottom: 70%;
-$o-middle: 35%;
-$o-left: 0;
-$o-right: 65%;
-$o-center: 30%;
-$o-trans: 40px;
-
-// tempo da animacao em segundos
-$animation-time: 2;
-
-.tp-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 5000;
-
-  > .overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    inset: 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: #{$animation-time}s;
-      animation-direction: normal;
-      animation-iteration-count: infinite;
-      animation-timing-function: linear;
-    }
-
-    #circulo-interno {
-      animation-name: expandeInterno;
-      animation-duration: #{$animation-time}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: #{$animation-time}s;
-        animation-timing-function: ease-out;
-        animation-iteration-count: 1;
-        /* stylelint-disable-next-line custom-property-pattern */
-        animation-delay: calc(var(--iconsItem) * #{$animation-time}s);
-
-        &:last-child {
-          animation-iteration-count: infinite;
-        }
-      }
-    }
-
-    #bola {
-      .residuo {
-        animation-name: residuo;
-        animation-duration: #{$animation-time}s;
-        animation-direction: reverse;
-        animation-iteration-count: infinite;
-        animation-timing-function: ease-in;
-        transform: scale(0.1);
-
-        &.top {
-          transform-origin: #{$o-center} #{$o-top};
-
-          &.right {
-            transform-origin: 45% 5%;
-            transform: translate(#{$o-trans}, -#{$o-trans}) scale(0.1);
-          }
-
-          &.left {
-            transform-origin: 15% 5%;
-            transform: translate(-#{$o-trans}, -#{$o-trans}) scale(0.1);
-          }
-        }
-
-        &.bottom {
-          transform-origin: #{$o-center} #{$o-bottom};
-
-          &.right {
-            transform-origin: 45% 65%;
-            transform: translate(#{$o-trans}, #{$o-trans}) scale(0.1);
-          }
-
-          &.left {
-            transform-origin: 15% 65%;
-            transform: translate(-#{$o-trans}, #{$o-trans}) scale(0.1);
-          }
-        }
-
-        &.middle {
-          &.right {
-            transform-origin: #{$o-right} #{$o-middle};
-          }
-
-          &.left {
-            transform-origin: #{$o-left} #{$o-middle};
-          }
-        }
-      }
-    }
-
-    .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,81 +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,73 +0,0 @@
-<template>
-  <el-input
-    :id="`${_id}`"
-    class="tp-money"
-    :model-value="formattedValue"
-    v-bind="$attrs"
-    :maxlength="maxlength"
-    @input="input"
-    @change="handleChange"
-    @focus="$event.target.select()"
-  >
-    <template v-if="!removePrepend" #prepend>
-      {{ prepend }}
-    </template>
-
-    <template v-for="(_, slot) of $slots" #[slot]="scope">
-      <slot :name="slot" v-bind="scope" />
-    </template>
-  </el-input>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import floatFormatterMixin from 'tp-ui/mixins/floatFormatter'
-
-export default defineComponent({
-  name: 'TpMoney',
-  mixins: [floatFormatterMixin],
-  inheritAttrs: false,
-  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
-    modelValue: {
-      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

package/src/components/Multisuggest/index.js

@@ -1,2 +0,0 @@
-import { Multisuggest } from '@src/components/Autosuggest'
-export default Multisuggest

package/src/components/MultisuggestTest.vue

@@ -1,56 +0,0 @@
-<template>
-  <tp-multisuggest
-    :id="_id"
-    :model-value="modelValue"
-    :placeholder="$t($options.placeholder)"
-    :label-key="$options.labelKey"
-    :remote-method="remoteMethod"
-    :suggestions="list"
-    :loading="loading"
-    :load-on-create="isLoadOnCreate"
-    :disabled="_disabled"
-    :allow-create="true"
-    :multiple="true"
-    @update:model-value="autosuggestMixin_input"
-    @handleOptionClick="autosuggestMixin_handleCreate"
-    @change="autosuggestMixin_handleChange"
-  />
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import AutosuggestsMixin from '@/components/autosuggestMixin'
-
-export default defineComponent({
-  name: 'MultisuggestTest',
-  valueKey: 'id',
-  labelKey: 'name',
-  placeholder: 'common.placeholder',
-
-  mixins: [AutosuggestsMixin],
-
-  data () {
-    return {
-      uri: 'https://jsonplaceholder.typicode.com/users',
-      loading: false
-    }
-  },
-
-  methods: {
-    remoteMethod (query) {
-      this.loading = true
-      this.axios
-        .get(`${this.uri}?q=${query}`)
-        .then(res => {
-          this.list = res.data
-          this.loading = false
-        })
-        .catch(err => {
-          console.log(err)
-          this.loading = false
-          this.list = []
-        })
-    }
-  }
-})
-</script>