@tagplus/components 5.3.4 → 5.3.5

package/src/components/Multisuggest/index.js

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

package/src/components/OptionsList/OptionsList.vue

@@ -1,61 +0,0 @@
-<template>
-  <ul :class="[justifyContent, 'tp-options-list', (disabled ? 'disabled' : '')]">
-    <!-- Conteúdo do OptionList -->
-    <slot />
-  </ul>
-</template>
-
-<script>
-/**
- * Container de uma lista de opções
- * `<tp-options-list></tp-options-list>`
- */
-export default {
-  name: 'TpOptionsList',
-  props: {
-    justifyContent: {
-      // 'space-between' / 'space-around' / (any flex property)
-      type: String,
-      default: 'space-between'
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tp-options-list {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-
-  &.space-between {
-    justify-content: space-between;
-  }
-
-  &.center {
-    justify-content: center;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    cursor: default;
-    filter: grayscale(100%);
-  }
-
-  div,
-  li {
-    // só aplicar em telas grandes
-    @media screen and ( min-width: 992px ) {
-      margin-right: 10px;
-    }
-  }
-}
-
-ul{
-    padding-inline-start: 0px;
-}
-</style>

package/src/components/OptionsList/index.js

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

package/src/components/OptionsListItem/OptionsListItem.vue

@@ -1,191 +0,0 @@
-<template>
-  <li
-    :id="id"
-    :class="['tp-options-list-item', itemType, active == optValue ? 'active' : '']"
-    tabindex="0"
-    @click="updateOption"
-    @keyup.enter="updateOption"
-  >
-    <div :class="['icon', direction]">
-      <em :class="[icon, 'options-icon']" />
-      <p class="text">
-        <span
-          v-for="(text, index) in texts"
-          :key="index"
-        >
-          {{ text }}
-        </span>
-      </p>
-    </div>
-    <sup v-if="badge" class="option-item-badge" />
-  </li>
-</template>
-
-<script>
-export default {
-  name: 'TpOptionsListItem',
-  props: {
-    itemType: {
-      type: String,
-      default: ''
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-    optValue: {
-      type: [String, Boolean, Number],
-      default: null
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    badge: {
-      type: Boolean,
-      default: false
-    },
-    direction: {
-      type: String,
-      default: ''
-    },
-    id: {
-      type: String,
-      default: ''
-    },
-    texts: {
-      type: Array,
-      default: null
-    },
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    type: {
-      type: String,
-      default: ''
-    },
-    active: {
-      type: String,
-      default: ''
-    }
-  },
-  methods: {
-    updateOption () {
-      this.$emit('updateValor', this.optValue)
-      this.$emit('input', this.optValue)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tp-options-list-item {
-  position: relative;
-  height: 84px;
-  min-width: 114px;
-  border: 1px solid #dde5ee;
-  border-radius: 6px;
-  cursor: pointer;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-  transition: border-color 150ms ease-in-out;
-  margin-right: 15px;
-  margin-top: 15px;
-
-  &.entrada {
-    @include option-list-item-hover(#08a19e);
-    @include option-list-item-checked(#08a19e);
-  }
-
-  &.saida {
-    @include option-list-item-hover(#ff7675);
-    @include option-list-item-checked(#ff7675);
-  }
-
-  &.default {
-    @include option-list-item-hover(#437cf9);
-    @include option-list-item-checked(#437cf9);
-  }
-
-  &.entrada,
-  &.saida {
-    @include r(1024) {
-      max-width: 165px;
-    }
-  }
-
-  &:focus{
-    border: 1px solid #437cf9;
-  }
-
-  .icon {
-    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;
-          }
-        }
-      }
-
-      .options-icon {
-        font-size: 47px;
-      }
-    }
-
-    &.vertical {
-      flex-direction: column;
-      .text {
-        span {
-          font-size: 14px;
-        }
-      }
-
-      .options-icon {
-        font-size: 24px;
-      }
-    }
-
-    .text {
-      span {
-        display: block;
-      }
-    }
-
-    .options-icon {
-      font-size: 24px;
-    }
-  }
-
-}
-
-.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/OptionsListItem/index.js

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

package/src/components/Percent/Percent.vue

@@ -1,81 +0,0 @@
-<template>
-  <el-input
-    :id="`${_id}`"
-    class="tp-percent"
-    :value="formattedValue"
-    v-bind="$attrs"
-    :maxlength="maxlength"
-    @input="input"
-    @change="handleChange"
-    @focus="$event.target.select()"
-  >
-    <template
-      v-if="!removePrepend"
-      slot="prepend"
-    >
-      %
-    </template>
-    <template
-      v-if="showAppend"
-      slot="append"
-    >
-      %
-    </template>
-  </el-input>
-</template>
-
-<script>
-import Locale from 'tp-ui/mixins/locale'
-import floatFormatterMixin from 'tp-ui/mixins/floatFormatter'
-
-export default {
-  name: 'TpPercent',
-
-  mixins: [Locale, floatFormatterMixin],
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null
-    },
-
-    // remove o simbolo em prepend
-    removePrepend: {
-      type: Boolean,
-      default: false
-    },
-
-    // coloca o simbolo no append
-    showAppend: {
-      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
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.tp-percent {
-  & input {
-    text-align: right;
-  }
-}
-</style>

package/src/components/Percent/index.js

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

package/src/components/Skeleton/Skeleton.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="tp-skeleton">
-    <span
-      v-for="item in count"
-      :key="item"
-      :class="{'circle':circle}"
-      :style="`--duration:${duration}; --item:${item}; width: ${cWidth}; height: ${cHeight}`"
-    >
-      &nbsp;
-    </span>
-  </div>
-</template>
-
-<script>
-/**
- * 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 {
-  name: 'TpSkeleton',
-  props: {
-    /**
-     * Quantos itens em sequencia
-     */
-    count: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-
-    /**
-     * Quanto tempo dura um ciclo da animação em segundos
-     */
-    duration: {
-      type: Number,
-      required: false,
-      default: 1
-    },
-
-    /**
-     * Largura em "%"". Quando círculo, em "px"
-     *
-     */
-    width: {
-      type: Number,
-      required: false,
-      default: null
-    },
-
-    /**
-     * Altura em "em"". Ignorado quando circulo e utiliza-se o mesmo parametro do width
-     */
-    height: {
-      type: Number,
-      required: false,
-      default: null
-    },
-
-    /**
-     * Flag que identifica se será um círculo
-     */
-    circle: {
-      type: Boolean,
-      required: false,
-      default: false
-    }
-  },
-
-  computed: {
-    cWidth () {
-      if (this.circle && this.width) {
-        return `${this.width}px`
-      }
-
-      return `${this.width}%`
-    },
-
-    cHeight () {
-      if (this.circle && this.width) {
-        return `${this.width}px`
-      }
-
-      return `${this.height}em`
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@keyframes skeleton{
-  0% {
-    background-position: -200px 0;
-  }
-  100% {
-    background-position: calc(200px + 100%) 0;
-  }
-}
-
-.tp-skeleton {
-  display: block;
-  height: 100%;
-
-  --baseColor: #ebeef2;
-
-  span {
-    background-color: var(--baseColor);
-    background-image: linear-gradient(
-      90deg,
-      var(--baseColor),
-      mix($--color-white, $--border-color-light, 70%),
-      var(--baseColor)
-    );
-    background-size: 200px 100%;
-    background-repeat: no-repeat;
-    background-position: -200px 0;
-    border-radius: $--border-radius-base;
-    display: inline-block;
-    line-height: 20px;
-    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{
-      width: inherit;
-      border-radius: 50%;
-    }
-  }
-}
-
-</style>

package/src/components/Skeleton/index.js

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

package/src/components/Step/Step.vue

@@ -1,230 +0,0 @@
-<template>
-  <div
-    class="el-step"
-    :style="style"
-    :class="[
-      !isSimple && `is-${$parent.direction}`,
-      isSimple && 'is-simple',
-      isLast && !space && !isCenter && 'is-flex',
-      isCenter && !isVertical && !isSimple && 'is-center']"
-  >
-    <!-- icon & line -->
-    <div
-      class="el-step__head"
-      :class="`is-${currentStatus === 'active' ? 'finish' : currentStatus}`"
-    >
-      <div
-        class="el-step__line"
-        :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'}`">
-        <slot
-          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
-          name="icon"
-        >
-          <em v-if="icon" class="el-step__icon-inner" :class="[icon]" />
-          <div v-if="!icon && !isSimple" class="el-step__icon-inner">
-            {{ index + 1 }}
-          </div>
-        </slot>
-        <em
-          v-else
-          :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]"
-      >
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <div v-if="isSimple" class="el-step__arrow" />
-      <div
-        v-else
-        class="el-step__description"
-        :class="['is-' + currentStatus]"
-      >
-        <slot name="description">
-          {{ description }}
-        </slot>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'TpStep',
-
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    icon: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
-    },
-    status: {
-      type: String,
-      default: ''
-    }
-  },
-
-  data () {
-    return {
-      index: -1,
-      lineStyle: {},
-      internalStatus: ''
-    }
-  },
-
-  computed: {
-    currentStatus () {
-      return this.internalStatus
-    },
-    prevStatus () {
-      const prevStep = this.$parent.steps[this.index - 1]
-
-      return prevStep ? prevStep.currentStatus : 'wait'
-    },
-    isCenter () {
-      return this.$parent.alignCenter
-    },
-    isVertical () {
-      return this.$parent.direction === 'vertical'
-    },
-    isSimple () {
-      return this.$parent.simple
-    },
-    isLast () {
-      const parent = this.$parent
-
-      return parent.steps[parent.steps.length - 1] === this
-    },
-    stepsCount () {
-      return this.$parent.steps.length
-    },
-    space () {
-      const { isSimple, $parent: { space } } = this
-
-      return isSimple ? '' : space
-    },
-    style: function () {
-      const style = {}
-      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)) }%`)
-
-      style.flexBasis = space
-
-      if (this.isVertical) return style
-
-      if (this.isLast) {
-        style.maxWidth = `${100 / this.stepsCount }%`
-      } else {
-        style.marginRight = `${-this.$parent.stepOffset }px`
-      }
-
-      return style
-    }
-  },
-
-  watch: {
-    status () {
-      this.updateStatus(this.$parent.active)
-      this.internalStatus = this.status
-    }
-
-  },
-
-  beforeCreate () {
-    this.$parent.steps.push(this)
-  },
-
-  beforeDestroy () {
-    const steps = this.$parent.steps
-    const index = steps.indexOf(this)
-
-    if (index >= 0) {
-      steps.splice(index, 1)
-    }
-  },
-
-  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 })
-      unwatch()
-    })
-  },
-
-  methods: {
-    updateStatus (val) {
-      const prevChild = this.$parent.$children[this.index - 1]
-
-      if (this.status === 'error') {
-        this.internalStatus = 'error'
-      } else if (val > this.index) {
-        this.internalStatus = this.$parent.finishStatus
-      } else if (val === this.index && this.prevStatus !== 'error') {
-        this.internalStatus = this.$parent.processStatus
-      } else if (this.$parent.newItem && this.prevStatus !== 'error') {
-        this.internalStatus = 'wait'
-      }
-
-      if (prevChild) prevChild.calcProgress(this.internalStatus)
-    },
-
-    calcProgress (status) {
-      let step = 100
-      const style = {}
-
-      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.borderWidth = step && !this.isSimple ? '1px' : 0
-      this.$parent.direction === 'vertical'
-        ? style.height = `${step }%`
-        : style.width = `${step }%`
-
-      this.lineStyle = style
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.el-step__head.is-process {
-    color: #2d6eda;
-    border-color: #2d6eda;
-}
-</style>