@tagplus/components 5.3.3 → 5.3.4

package/src/components/Multisuggest/index.js

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

package/src/components/OptionsList/OptionsList.vue

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

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

package/src/components/OptionsListItem/OptionsListItem.vue

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

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

package/src/components/Percent/Percent.vue

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

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

package/src/components/Skeleton/Skeleton.vue

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

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

package/src/components/Step/Step.vue

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