@tagplus/components 4.7.12 → 5.1.0

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

@@ -0,0 +1,135 @@
+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,19 +1,9 @@
 <template>
   <div class="tp-loader">
     <div class="wrapper">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="150px"
-        height="150px"
-      >
+      <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"
-          />
+          <rect x="0" y="0" width="100%" height="100%" fill="white" />
           <circle
             id="circulo-interno"
             class="circulo"
@@ -38,10 +28,7 @@
             fill="#1F7DE7"
             mask="url(#mascara)"
           />
-          <g
-            fill="none"
-            fill-rule="evenodd"
-          >
+          <g fill="none" fill-rule="evenodd">
             <circle
               class="residuo top center"
               cx="45"
@@ -127,18 +114,19 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 /*
     Cria componente de loader com overlayer em toda a página
     `<tp-loader />`
   */
-export default {
+export default defineComponent({
   name: 'TpLoader',
   props: {
     // Lista contendo as classes de icones a serem exibidos no loader
     icons: {
       type: Array,
       required: false,
-      default: () => ([
+      default: () => [
         'fa-solid fa-badge-percent',
         'fa-solid fa-box-usd',
         'fa-solid fa-credit-card-front',
@@ -155,46 +143,40 @@ export default {
         '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%;
+@import 'animations';
 
-$oTrans: 40px;
+$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
-$animationTime: 2;
-$numIcons: 8;
+// tempo da animacao em segundos
+$animation-time: 2;
 
 .tp-loader {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 5000;
 
   > .overlay {
     position: absolute;
     width: 100%;
     height: 100%;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
     background-color: #fff;
     opacity: 1;
   }
+
   .wrapper {
     text-align: center;
     display: flex;
@@ -212,16 +194,18 @@ $numIcons: 8;
     .circulo {
       transform-origin: 30% 32%;
     }
+
     #circulo {
       animation-name: expande;
-      animation-duration: #{$animationTime}s;
+      animation-duration: #{$animation-time}s;
       animation-direction: normal;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
     }
+
     #circulo-interno {
       animation-name: expandeInterno;
-      animation-duration: #{$animationTime}s;
+      animation-duration: #{$animation-time}s;
       animation-direction: normal;
       animation-iteration-count: infinite;
       animation-timing-function: linear;
@@ -246,12 +230,12 @@ $numIcons: 8;
         opacity: 0;
         transform-origin: center center;
         color: $--color-primary;
-
         animation-name: icone;
-        animation-duration: #{$animationTime}s;
+        animation-duration: #{$animation-time}s;
         animation-timing-function: ease-out;
         animation-iteration-count: 1;
-        animation-delay: calc(var(--iconsItem) * #{$animationTime}s);
+        /* stylelint-disable-next-line custom-property-pattern */
+        animation-delay: calc(var(--iconsItem) * #{$animation-time}s);
 
         &:last-child {
           animation-iteration-count: infinite;
@@ -262,42 +246,47 @@ $numIcons: 8;
     #bola {
       .residuo {
         animation-name: residuo;
-        animation-duration: #{$animationTime}s;
+        animation-duration: #{$animation-time}s;
         animation-direction: reverse;
         animation-iteration-count: infinite;
         animation-timing-function: ease-in;
         transform: scale(0.1);
 
         &.top {
-          transform-origin: #{$oCenter} #{$oTop};
+          transform-origin: #{$o-center} #{$o-top};
 
           &.right {
             transform-origin: 45% 5%;
-            transform: translate(#{$oTrans}, -#{$oTrans}) scale(0.1);
+            transform: translate(#{$o-trans}, -#{$o-trans}) scale(0.1);
           }
+
           &.left {
             transform-origin: 15% 5%;
-            transform: translate(-#{$oTrans}, -#{$oTrans}) scale(0.1);
+            transform: translate(-#{$o-trans}, -#{$o-trans}) scale(0.1);
           }
         }
+
         &.bottom {
-          transform-origin: #{$oCenter} #{$oBottom};
+          transform-origin: #{$o-center} #{$o-bottom};
 
           &.right {
             transform-origin: 45% 65%;
-            transform: translate(#{$oTrans}, #{$oTrans}) scale(0.1);
+            transform: translate(#{$o-trans}, #{$o-trans}) scale(0.1);
           }
+
           &.left {
             transform-origin: 15% 65%;
-            transform: translate(-#{$oTrans}, #{$oTrans}) scale(0.1);
+            transform: translate(-#{$o-trans}, #{$o-trans}) scale(0.1);
           }
         }
+
         &.middle {
           &.right {
-            transform-origin: #{$oRight} #{$oMiddle};
+            transform-origin: #{$o-right} #{$o-middle};
           }
+
           &.left {
-            transform-origin: #{$oLeft} #{$oMiddle};
+            transform-origin: #{$o-left} #{$o-middle};
           }
         }
       }

package/src/components/Loader/animations.scss

@@ -3,27 +3,33 @@
     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);
   }
@@ -33,15 +39,19 @@
   0%, 30%{
     opacity: 0;
   }
+
   40%{
     opacity: 0.5;
   }
+
   60%{
     opacity: 1;
   }
+
   70% {
     opacity: 0;
   }
+
   100% {
     opacity: 0;
     transform: scale(1.2);
@@ -53,14 +63,17 @@
     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/Money/Money.vue

@@ -2,40 +2,31 @@
   <el-input
     :id="`${_id}`"
     class="tp-money"
-    :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>
       {{ prepend }}
     </template>
 
-    <template
-      v-for="(_, slot) of $scopedSlots"
-      #[slot]="scope"
-    >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
+    <template v-for="(_, slot) of $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope" />
     </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: 'TpMoney',
-
-  mixins: [Locale, floatFormatterMixin],
+  mixins: [floatFormatterMixin],
+  inheritAttrs: false,
   props: {
     id: {
       type: String,
@@ -49,7 +40,7 @@ export default {
       default: false
     },
     // valor do campo. Pode ser usado como v-model também
-    value: {
+    modelValue: {
       type: [Number, String],
       default: 0
     },
@@ -67,10 +58,10 @@ export default {
     },
 
     prepend () {
-      return this.t('tp.money.currency')
+      return this.$t('tp.money.currency')
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

package/src/components/Multisuggest/index.js

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

package/src/components/MultisuggestTest.vue

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

package/src/components/OptionsList/OptionsList.vue

@@ -1,16 +1,17 @@
 <template>
-  <ul :class="[justifyContent, 'tp-options-list', (disabled ? 'disabled' : '')]">
+  <ul :class="[justifyContent, 'tp-options-list', disabled ? 'disabled' : '']">
     <!-- Conteúdo do OptionList -->
     <slot />
   </ul>
 </template>
 
 <script>
+import { defineComponent } from 'vue'
 /**
  * Container de uma lista de opções
  * `<tp-options-list></tp-options-list>`
  */
-export default {
+export default defineComponent({
   name: 'TpOptionsList',
   props: {
     justifyContent: {
@@ -23,7 +24,7 @@ export default {
       default: false
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
@@ -49,13 +50,13 @@ export default {
   div,
   li {
     // só aplicar em telas grandes
-    @media screen and ( min-width: 992px ) {
+    @media screen and (width >= 992px) {
       margin-right: 10px;
     }
   }
 }
 
-ul{
-    padding-inline-start: 0px;
+ul {
+  padding-inline-start: 0;
 }
 </style>