@tagplus/components 5.2.8 → 5.2.9

package/src/components/OptionsList/OptionsList.vue

@@ -1,62 +0,0 @@
-<template>
-  <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 defineComponent({
-  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 (width >= 992px) {
-      margin-right: 10px;
-    }
-  }
-}
-
-ul {
-  padding-inline-start: 0;
-}
-</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,195 +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>
-import { defineComponent } from 'vue'
-export default defineComponent({
-  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: ''
-    }
-  },
-  emits: ['input', 'updateValor'],
-  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;
-
-    .text {
-      span {
-        display: block;
-      }
-    }
-
-    .options-icon {
-      font-size: 24px;
-    }
-
-    &.vertical {
-      flex-direction: column;
-
-      .text {
-        span {
-          font-size: 14px;
-        }
-      }
-
-      .options-icon {
-        font-size: 24px;
-      }
-    }
-
-    &.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;
-      }
-    }
-  }
-}
-
-.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,75 +0,0 @@
-<template>
-  <el-input
-    :id="`${_id}`"
-    class="tp-percent"
-    :model-value="formattedValue"
-    v-bind="$attrs"
-    :maxlength="maxlength"
-    @input="input"
-    @change="handleChange"
-    @focus="$event.target.select()"
-  >
-    <template v-if="!removePrepend" #prepend>
-      %
-    </template>
-    <template v-if="showAppend" #append>
-      %
-    </template>
-  </el-input>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import floatFormatterMixin from 'tp-ui/mixins/floatFormatter'
-
-export default defineComponent({
-  name: 'TpPercent',
-  mixins: [floatFormatterMixin],
-  inheritAttrs: false,
-  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,142 +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>
-import { defineComponent } from 'vue'
-/**
- * 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 defineComponent({
-  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%;
-
-  /* stylelint-disable-next-line custom-property-pattern */
-  --baseColor: #ebeef2;
-
-  span {
-    /* stylelint-disable-next-line custom-property-pattern */
-    $base-color: var(--baseColor);
-
-    background-color: var($base-color);
-    background-image: linear-gradient(
-      90deg,
-      var($base-color),
-      color-mix($--color-white, $--border-color-light, 70%),
-      var($base-color)
-    );
-    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