@tagplus/components 5.2.8 → 5.2.9

package/src/components/AutosuggestTest.vue

@@ -1,56 +0,0 @@
-<template>
-  <tp-autosuggest
-    :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="false"
-    @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: 'AutosuggestTest',
-  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/CardExemplo.vue

@@ -1,49 +0,0 @@
-<template>
-  <el-container class="component-sample">
-    <el-header>
-      {{ title }}
-    </el-header>
-    <el-main>
-      <el-scrollbar>
-        <el-row class="scrollbar-flex-content" justify="center">
-          <slot name="default" />
-        </el-row>
-      </el-scrollbar>
-    </el-main>
-    <slot name="codeSamples" />
-  </el-container>
-</template>
-
-<script>
-export default {
-  name:'CardExemplo',
-
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.component-sample {
-  margin: 0px auto;
-  margin-bottom: 16px;
-  max-width: 700px;
-  border: 1px #ccc solid;
-  border-radius: 10px;
-  padding: 8px;
-  background-color: #919191;
-
-  header.el-header {
-    font-size: 17px;
-    font-weight: bold;
-    color: #fff;
-    border-bottom: 1px solid $--border-color-lighter;
-    text-align: center;
-    height: auto;
-  }
-}
-</style>

package/src/components/CodeSample.vue

@@ -1,78 +0,0 @@
-<template>
-  <div class="code-sample">
-    <el-row class="code-sample-description">
-      <span v-html="description" />
-    </el-row>
-    <el-row class="code-sample-code">
-      <pre>
-        <slot>
-          {{ formattedCode }}
-        </slot>
-      </pre>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import { onMounted, ref, watch } from 'vue'
-export default {
-  name: 'CodeSample',
-  props: {
-    description: {
-      type: String,
-      default: ''
-    },
-    code: {
-      required: false
-    },
-    /**
-     * Se vai observar as alterações na variável code
-     */
-    reactive: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  setup (props) {
-    let formattedCode = ref('')
-    const handler = (newValue, oldValue) => {
-      const code = props.code ?? 'undefined'
-      formattedCode.value = '\n' + JSON.stringify(code, undefined, 2).trim()
-    }
-
-    if (props.reactive){
-      watch(() => props.code, handler)
-    }
-
-    onMounted(handler)
-    return {
-      formattedCode
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.code-sample{
-  background-color: #eee;
-  border-radius: 8px;
-}
-.code-sample-description {
-  font-size: 14px;
-  padding: 8px;
-}
-.code-sample-code {
-  pre {
-    display: inline-flex;
-    width: 100%;
-    margin: 0;
-    font-family: monospace;
-    background-color: #444;
-    color: #eee;
-    padding: 10px 10px 0 10px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-  }
-}
-</style>

package/src/components/Inline/Inline.vue

@@ -1,141 +0,0 @@
-<template>
-  <div :id="`${_id}-wrapper`" class="tp-inline">
-    <span v-if="hideInput || readonly" data-tid="inline-span">
-      <a
-        :id="`${_id}-toggle`"
-        tabindex="0"
-        @click="toggleInput"
-        @keypress.enter="toggleInput"
-      >
-        <span data-tid="inline-value">{{ value }}</span>
-        <small v-if="!readonly" class="el-icon-edit" />
-      </a>
-    </span>
-    <el-input
-      v-else
-      :id="`${_id}-input`"
-      ref="inlineInput"
-      :model-value="value"
-      data-tid="inline-input"
-      @input="input"
-      @blur="blur"
-      @keypress.enter="toggleInput"
-    >
-      <template #append>
-        <el-button
-          :id="`${_id}-btn`"
-          :icon="ElIconCheck"
-          data-tid="inline-button"
-          @click="toggleInput"
-        >
-          {{ buttonText }}
-        </el-button>
-      </template>
-    </el-input>
-  </div>
-</template>
-
-<script>
-import { defineComponent } from 'vue'
-import { Check as ElIconCheck } from '@element-plus/icons-vue'
-export default defineComponent({
-  name: 'TpInline',
-  props: {
-    id: {
-      type: String,
-      required: false,
-      default: null
-    },
-
-    value: {
-      type: [Number, String],
-      default: ''
-    },
-
-    readonly: {
-      type: Boolean,
-      default: false
-    },
-
-    inputHidden: {
-      type: Boolean,
-      default: true
-    },
-
-    buttonText: {
-      type: String,
-      default: 'Ok'
-    }
-  },
-  emits: ['input', 'change', 'blur'],
-  data () {
-    return {
-      hideInput: true,
-      ElIconCheck
-    }
-  },
-  computed: {
-    _id () {
-      return this.id || this.$options.name
-    }
-  },
-  mounted () {
-    this.hideInput = this.inputHidden
-  },
-  methods: {
-    toggleInput () {
-      const status = !this.hideInput
-
-      if (this.readonly) {
-        this.hideInput = true
-      } else if (!this.readonly) {
-        this.hideInput = status
-
-        if (!this.hideInput) {
-          this.$nextTick(function () {
-            this.$refs.inlineInput.focus()
-          })
-        }
-      }
-    },
-
-    input (event) {
-      this.$emit('input', event)
-    },
-
-    blur (event) {
-      this.$emit('blur', event)
-    }
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.tp-inline {
-  .el-input-group__append,
-  .el-input-group__append button.el-button {
-    background-color: $--color-primary;
-    border-color: $--color-primary;
-    color: $--color-white;
-    height: 100%;
-    border-radius: 0;
-  }
-
-  > span {
-    display: inline-block;
-    padding: 12px 0;
-  }
-
-  a {
-    cursor: pointer;
-    display: inline-block;
-    color: $--color-text-primary;
-    border-bottom: 1px dotted transparent;
-
-    &:focus,
-    &:hover {
-      border-bottom-color: $--color-text-primary;
-    }
-  }
-}
-</style>

package/src/components/Inline/index.js

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

package/src/components/InputNumber/InputNumber.vue

@@ -1,381 +0,0 @@
-<template>
-  <div
-    :class="[
-      ns.b(),
-      ns.m(inputNumberSize),
-      ns.is('disabled', inputNumberDisabled),
-      ns.is('without-controls', !controls),
-      ns.is('controls-right', controlsAtRight),
-    ]"
-    @dragstart.prevent
-  >
-    <span
-      v-if="controls"
-      v-repeat-click="decrease"
-      role="button"
-      :aria-label="t('el.inputNumber.decrease')"
-      :class="[ns.e('decrease'), ns.is('disabled', minDisabled)]"
-      @keydown.enter="decrease"
-    >
-      <el-icon>
-        <arrow-down v-if="controlsAtRight" />
-        <minus v-else />
-      </el-icon>
-    </span>
-    <span
-      v-if="controls"
-      v-repeat-click="increase"
-      role="button"
-      :aria-label="t('el.inputNumber.increase')"
-      :class="[ns.e('increase'), ns.is('disabled', maxDisabled)]"
-      @keydown.enter="increase"
-    >
-      <el-icon>
-        <arrow-up v-if="controlsAtRight" />
-        <plus v-else />
-      </el-icon>
-    </span>
-    <el-input
-      :id="id"
-      ref="input"
-      :key="key"
-      :step="step"
-      :model-value="displayValue"
-      :formatter="displayFormatter"
-      :parser="inputParser"
-      :placeholder="placeholder"
-      :readonly="readonly"
-      :disabled="inputNumberDisabled"
-      :size="inputNumberSize"
-      :max="max"
-      :min="min"
-      :name="name"
-      :label="label"
-      :validate-event="false"
-      @wheel.prevent
-      @keydown.up.prevent="increase"
-      @keydown.down.prevent="decrease"
-      @blur="handleBlur"
-      @focus="handleFocus"
-      @input="handleInput"
-      @change="handleInputChange"
-    />
-  </div>
-</template>
-<script setup>
-import { computed, onMounted, onUpdated, reactive, ref, watch, getCurrentInstance } from 'vue'
-import { isNil } from 'lodash-unified'
-import {
-  useFormDisabled,
-  useFormItem,
-  useFormSize,
-  debugWarn,
-  isNumber,
-  isString,
-  isUndefined,
-  throwError,
-} from '@/utils'
-import { vRepeatClick } from 'element-plus'
-import { useLocale, useNamespace } from 'element-plus/es/hooks/index'
-import { ArrowDown, ArrowUp, Minus, Plus } from '@element-plus/icons-vue'
-import { inputNumberEmits, inputNumberProps } from '@/components/InputNumber/input-number'
-const props = defineProps(inputNumberProps)
-const emit = defineEmits(inputNumberEmits)
-const UPDATE_MODEL_EVENT = 'update:modelValue'
-const CHANGE_EVENT = 'change'
-const INPUT_EVENT = 'input'
-
-defineOptions({
-  name: 'TpInputNumber',
-})
-
-const { t } = useLocale()
-const ns = useNamespace('input-number')
-const input = ref()
-const vm = getCurrentInstance().proxy
-const key = ref(1)
-
-// eslint-disable-next-line vue/no-setup-props-destructure
-const data = reactive({
-  currentValue: props.modelValue,
-  userInput: null,
-})
-
-const { formItem } = useFormItem()
-
-const minDisabled = computed(
-  () => isNumber(props.modelValue) && props.modelValue <= props.min
-)
-const maxDisabled = computed(
-  () => isNumber(props.modelValue) && props.modelValue >= props.max
-)
-
-const numPrecision = computed(() => {
-  const stepPrecision = getPrecision(props.step)
-  if (!isUndefined(props.precision)) {
-    if (stepPrecision > props.precision) {
-      debugWarn(
-        'InputNumber',
-        'precision should not be less than the decimal places of step'
-      )
-    }
-    return props.precision
-  } else {
-    return Math.max(getPrecision(props.modelValue), stepPrecision)
-  }
-})
-const controlsAtRight = computed(() => {
-  return props.controls && props.controlsPosition === 'right'
-})
-
-const inputNumberSize = useFormSize()
-const inputNumberDisabled = useFormDisabled()
-
-/**
- * @tagplus
- * Modificado para permitir um valor padrão vazio ou 0 de acordo com a prop
- */
-const displayValue = computed(() => {
-  if (data.userInput !== null) {
-    return data.userInput
-  }
-  let currentValue = data.currentValue
-
-  const fallbackValue = props.stringDefaultsZero ? 0 : ''
-  if (props.modelValue === '' || isNil(currentValue) || currentValue === ''){
-    return fallbackValue
-  }
-
-  if (isNumber(currentValue)) {
-    if (Number.isNaN(currentValue)) return fallbackValue
-    if (!isUndefined(props.precision)) {
-      currentValue = currentValue.toFixed(props.precision)
-    }
-  }
-  return currentValue
-})
-
-/**
- * @tagplus
- * Criado para simular o comportamento do type=number porque ele não deixa
- * exibir os valores formatados no padrão pt-br 100.555,55
- */
-const displayFormatter = computed(() => {
-  const decimalChar = vm.$t('locale.number.decimal')
-  const thousandsChar = vm.$t('locale.number.thousands')
-  return (value) => {
-    // Essa linha simula o comportamento do type="number" para não deixar digitar letras
-    const noLetters = value.replaceAll(/[a-zA-Z]/g, '')
-    const res = noLetters.replace('.', decimalChar).replace(/\B(?=(\d{3})+(?!\d))/g, thousandsChar)
-    return res
-  }
-})
-
-/**
- * @tagplus
- * Criado em conjunto do displayFormatter para simular o type="number"
- * @see displayFormatter
- */
-const inputParser = computed(() => {
-  const decimalChar = vm.$t('locale.number.decimal')
-  const thousandsChar = vm.$t('locale.number.thousands')
-  return (value) => {
-    const regexThou = `/\$\s?|(${thousandsChar}*)/g`
-    const res = value.replace(regexThou, '').replace(decimalChar, '.')
-    return res
-  }
-})
-
-const toPrecision = (num, pre) => {
-  // eslint-disable-next-line no-param-reassign
-  if (isUndefined(pre)) pre = numPrecision.value
-  if (pre === 0) return Math.round(num)
-  let snum = String(num)
-  const pointPos = snum.indexOf('.')
-  if (pointPos === -1) return num
-  const nums = snum.replace('.', '').split('')
-  const datum = nums[pointPos + pre]
-  if (!datum) return num
-  const length = snum.length
-  if (snum.charAt(length - 1) === '5') {
-    snum = `${snum.slice(0, Math.max(0, length - 1))}6`
-  }
-  return Number.parseFloat(Number(snum).toFixed(pre))
-}
-const getPrecision = (value) => {
-  if (isNil(value)) return 0
-  const valueString = value.toString()
-  const dotPosition = valueString.indexOf('.')
-  let precision = 0
-  if (dotPosition !== -1) {
-    precision = valueString.length - dotPosition - 1
-  }
-  return precision
-}
-const ensurePrecision = (val, coefficient = 1) => {
-  if (!isNumber(val)) return data.currentValue
-  // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
-  return toPrecision(val + props.step * coefficient)
-}
-const increase = () => {
-  if (props.readonly || inputNumberDisabled.value || maxDisabled.value) return
-  const value = Number(displayValue.value) || 0
-  const newVal = ensurePrecision(value)
-  setCurrentValue(newVal)
-  emit(INPUT_EVENT, data.currentValue)
-  setCurrentValueToModelValue()
-}
-const decrease = () => {
-  if (props.readonly || inputNumberDisabled.value || minDisabled.value) return
-  const value = Number(displayValue.value) || 0
-  const newVal = ensurePrecision(value, -1)
-  setCurrentValue(newVal)
-  emit(INPUT_EVENT, data.currentValue)
-  setCurrentValueToModelValue()
-}
-const verifyValue = (value, update) => {
-  const { max, min, step, precision, stepStrictly, valueOnClear } = props
-  if (max < min) {
-    throwError('InputNumber', 'min should not be greater than max.')
-  }
-  let newVal = Number(value)
-  if (isNil(value) || Number.isNaN(newVal)) {
-    return null
-  }
-  if (value === '') {
-    if (valueOnClear === null) {
-      return null
-    }
-    newVal = isString(valueOnClear) ? { min, max }[valueOnClear] : valueOnClear
-  }
-  if (stepStrictly) {
-    newVal = toPrecision(Math.round(newVal / step) * step, precision)
-  }
-  if (!isUndefined(precision)) {
-    newVal = toPrecision(newVal, precision)
-  }
-  if (newVal > max || newVal < min) {
-    newVal = newVal > max ? max : min
-    update && emit(UPDATE_MODEL_EVENT, newVal)
-  }
-  return newVal
-}
-const setCurrentValue = (value, emitChange = true) => {
-  const oldVal = data.currentValue
-  const newVal = verifyValue(value)
-  if (!emitChange) {
-    emit(UPDATE_MODEL_EVENT, newVal)
-    return
-  }
-  if (oldVal === newVal) return
-  data.userInput = null
-  emit(UPDATE_MODEL_EVENT, newVal)
-  emit(CHANGE_EVENT, newVal, oldVal)
-  if (props.validateEvent) {
-    formItem?.validate?.('change').catch((err) => debugWarn(err))
-  }
-  data.currentValue = newVal
-}
-const handleInput = (value) => {
-  data.userInput = value
-  const newVal = value === '' ? null : Number(value)
-  emit(INPUT_EVENT, newVal)
-  setCurrentValue(newVal, false)
-}
-const handleInputChange = (value) => {
-  const newVal = value !== '' ? Number(value) : ''
-  if ((isNumber(newVal) && !Number.isNaN(newVal)) || value === '') {
-    setCurrentValue(newVal)
-  }
-  setCurrentValueToModelValue()
-  data.userInput = null
-}
-
-const focus = () => {
-  input.value?.focus?.()
-}
-
-const blur = () => {
-  input.value?.blur?.()
-}
-
-const handleFocus = (event) => {
-  emit('focus', event)
-}
-
-const handleBlur = (event) => {
-  data.userInput = null
-  emit('blur', event)
-  if (props.validateEvent) {
-    formItem?.validate?.('blur').catch((err) => debugWarn(err))
-  }
-}
-
-const setCurrentValueToModelValue = () => {
-  if (data.currentValue !== props.modelValue) {
-    data.currentValue = props.modelValue
-  }
-}
-watch(
-  () => props.modelValue,
-  (value, oldValue) => {
-    const newValue = verifyValue(value, true)
-    if (data.userInput === null && newValue !== oldValue) {
-      data.currentValue = newValue
-    }
-  },
-  { immediate: true }
-)
-
-/**
- * @tagplus
- * Criado para observar se a lang mudou para reformatar o displayValue
- */
-watch(
-  () => vm.$i18nHelper.hooks.onLanguageChanged,
-  (value, oldValue) => {
-    key.value++
-  }
-)
-
-onMounted(() => {
-  const { min, max, modelValue } = props
-  const innerInput = input.value?.input
-  innerInput.setAttribute('role', 'spinbutton')
-  if (Number.isFinite(max)) {
-    innerInput.setAttribute('aria-valuemax', String(max))
-  } else {
-    innerInput.removeAttribute('aria-valuemax')
-  }
-  if (Number.isFinite(min)) {
-    innerInput.setAttribute('aria-valuemin', String(min))
-  } else {
-    innerInput.removeAttribute('aria-valuemin')
-  }
-  innerInput.setAttribute(
-    'aria-valuenow',
-    data.currentValue || data.currentValue === 0
-      ? String(data.currentValue)
-      : ''
-  )
-  innerInput.setAttribute('aria-disabled', String(inputNumberDisabled.value))
-  // eslint-disable-next-line no-eq-null, eqeqeq
-  if (!isNumber(modelValue) && modelValue != null) {
-    let val = Number(modelValue)
-    if (Number.isNaN(val)) {
-      val = null
-    }
-    emit(UPDATE_MODEL_EVENT, val)
-  }
-})
-onUpdated(() => {
-  const innerInput = input.value?.input
-  innerInput?.setAttribute('aria-valuenow', `${data.currentValue ?? ''}`)
-})
-defineExpose({
-  /** @description get focus the input component */
-  focus,
-  /** @description remove focus the input component */
-  blur,
-})
-</script>

package/src/components/InputNumber/index.js

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