@tagplus/components 1.0.8 → 1.2.0

package/package.json

@@ -8,7 +8,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "1.0.8",
+  "version": "1.2.0",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,232 @@
+<template>
+  <transition
+    name="dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave"
+  >
+    <div
+      v-show="visible"
+      class="el-dialog__wrapper"
+      @click.self="handleWrapperClick"
+    >
+      <div
+        :key="key"
+        ref="dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
+        :style="style"
+      >
+        <div class="el-dialog__header">
+          <slot name="title">
+            <span class="el-dialog__title">{{ title }}</span>
+          </slot>
+          <button
+            v-if="showClose"
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            @click="handleClose"
+          >
+            <i class="el-dialog__close el-icon el-icon-close" />
+          </button>
+        </div>
+        <div
+          v-if="rendered"
+          class="el-dialog__body"
+        >
+          <slot />
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="el-dialog__footer"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'element-ui/src/utils/popup'
+import Migrating from 'element-ui/src/mixins/migrating'
+import emitter from 'element-ui/src/mixins/emitter'
+
+/**
+ * Sobrescreve o Dialog original sem usar o extends porque trocou um watch e watch não sobrescreve
+ * <BR /> A nossa versão chama o $emit open quando tem v-if
+ */
+export default {
+  name: 'TpDialog',
+
+  mixins: [Popup, emitter, Migrating],
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+
+    modal: {
+      type: Boolean,
+      default: true
+    },
+
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+
+    width: String,
+
+    fullscreen: Boolean,
+
+    customClass: {
+      type: String,
+      default: ''
+    },
+
+    top: {
+      type: String,
+      default: '15vh'
+    },
+    beforeClose: Function,
+    center: {
+      type: Boolean,
+      default: false
+    },
+
+    destroyOnClose: Boolean
+  },
+
+  data () {
+    return {
+      closed: false,
+      key: 0
+    }
+  },
+
+  computed: {
+    style () {
+      const style = {}
+      if (!this.fullscreen) {
+        style.marginTop = this.top
+        if (this.width) {
+          style.width = this.width
+        }
+      }
+      return style
+    }
+  },
+
+  watch: {
+    // CORREÇÂO Sobrescreve o watch visible do dialog original para rodar o open quando tem v-if
+    visible: {
+      immediate: true,
+      handler (val, oldValue) {
+        if (val) {
+          this.closed = false
+          this.$emit('open')
+          this.$el.addEventListener('scroll', this.updatePopper)
+          this.$nextTick(() => {
+            this.$refs.dialog.scrollTop = 0
+          })
+          if (this.appendToBody) {
+            document.body.appendChild(this.$el)
+          }
+        } else {
+          this.$el.removeEventListener('scroll', this.updatePopper)
+          if (!this.closed) this.$emit('close')
+          if (this.destroyOnClose) {
+            this.$nextTick(() => {
+              this.key++
+            })
+          }
+        }
+      }
+    }
+  },
+
+  mounted () {
+    if (this.visible) {
+      this.rendered = true
+      this.open()
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el)
+      }
+    }
+  },
+
+  destroyed () {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  },
+
+  methods: {
+    getMigratingConfig () {
+      return {
+        props: {
+          size: 'size is removed.'
+        }
+      }
+    },
+    handleWrapperClick () {
+      if (!this.closeOnClickModal) return
+      this.handleClose()
+    },
+    handleClose () {
+      if (typeof this.beforeClose === 'function') {
+        this.beforeClose(this.hide)
+      } else {
+        this.hide()
+      }
+    },
+    hide (cancel) {
+      if (cancel !== false) {
+        this.$emit('update:visible', false)
+        this.$emit('close')
+        this.closed = true
+      }
+    },
+    updatePopper () {
+      this.broadcast('ElSelectDropdown', 'updatePopper')
+      this.broadcast('ElDropdownMenu', 'updatePopper')
+    },
+    afterEnter () {
+      this.$emit('opened')
+    },
+    afterLeave () {
+      this.$emit('closed')
+    }
+  }
+}
+</script>

package/src/components/Dialog/index.js

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

package/src/components/InputNumber/InputNumber.vue

@@ -1,17 +1,123 @@
+<template>
+  <div
+    :class="[
+      'el-input-number',
+      inputNumberSize ? 'el-input-number--' + inputNumberSize : '',
+      { 'is-disabled': inputNumberDisabled },
+      { 'is-without-controls': !controls },
+      { 'is-controls-right': controlsAtRight }
+    ]"
+    @dragstart.prevent
+  >
+    <span
+      v-if="controls"
+      v-repeat-click="decrease"
+      class="el-input-number__decrease"
+      role="button"
+      :class="{'is-disabled': minDisabled}"
+      @keydown.enter="decrease"
+    >
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`" />
+    </span>
+    <span
+      v-if="controls"
+      v-repeat-click="increase"
+      class="el-input-number__increase"
+      role="button"
+      :class="{'is-disabled': maxDisabled}"
+      @keydown.enter="increase"
+    >
+      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`" />
+    </span>
+    <el-input
+      ref="input"
+      :value="displayValue"
+      :placeholder="placeholder"
+      :disabled="inputNumberDisabled"
+      :size="inputNumberSize"
+      :max="max"
+      :min="min"
+      :name="name"
+      :label="label"
+      @keydown.up.native.prevent="increase"
+      @keydown.down.native.prevent="decrease"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @input="handleInput"
+      @change="handleInputChange"
+    />
+  </div>
+</template>
+
 <script>
-import { InputNumber } from 'element-ui'
+import ElInput from 'element-ui/packages/input'
+import Focus from 'element-ui/src/mixins/focus'
+import RepeatClick from 'element-ui/src/directives/repeat-click'
 
 export default {
   name: 'TpInputNumber',
 
-  extends: InputNumber,
+  directives: {
+    repeatClick: RepeatClick
+  },
+
+  components: {
+    ElInput
+  },
+
+  mixins: [Focus('input')],
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
 
   props: {
+    step: {
+      type: Number,
+      default: 1
+    },
+    stepStrictly: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    value: {},
+    disabled: Boolean,
+    size: String,
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    controlsPosition: {
+      type: String,
+      default: ''
+    },
+    name: String,
+    label: String,
+    placeholder: String,
+    precision: {
+      type: Number,
+      validator (val) {
+        return val >= 0 && val === parseInt(val, 10)
+      }
+    },
+    // Customizada
     usarVirgula: {
       type: Boolean,
       default: true
     },
-    // Se false permite campo vazio
+    // Customizada - Se false permite campo vazio
     stringDefaultsZero: {
       type: Boolean,
       default: true
@@ -20,19 +126,52 @@ export default {
 
   data () {
     return {
-      currentValue: ''
+      currentValue: '',
+      userInput: null
     }
   },
 
   computed: {
+    /**
+     * Sobrescrito do element
+     */
     minDisabled () {
       return this.value < this.min
     },
 
+    /**
+     * Sobrescrito do element
+     */
     maxDisabled () {
       return this.value > this.max
     },
-
+    numPrecision () {
+      const { value, step, getPrecision, precision } = this
+      const stepPrecision = getPrecision(step)
+      if (precision !== undefined) {
+        if (stepPrecision > precision) {
+          console.warn('[Element Warn][InputNumber]precision should not be less than the decimal places of step')
+        }
+        return precision
+      } else {
+        return Math.max(getPrecision(value), stepPrecision)
+      }
+    },
+    controlsAtRight () {
+      return this.controls && this.controlsPosition === 'right'
+    },
+    _elFormItemSize () {
+      return (this.elFormItem || {}).elFormItemSize
+    },
+    inputNumberSize () {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size
+    },
+    inputNumberDisabled () {
+      return this.disabled || !!(this.elForm || {}).disabled
+    },
+    /**
+     * Sobrescrito do element
+     */
     displayValue () {
       if (this.userInput !== null) {
         // corrige o bug para deixar limpar o campo
@@ -73,6 +212,9 @@ export default {
   },
 
   watch: {
+    /**
+     * Sobrescrito do element
+     */
     value: {
       immediate: true,
       handler (value) {
@@ -109,7 +251,72 @@ export default {
     }
   },
 
+  mounted () {
+    const innerInput = this.$refs.input.$refs.input
+    innerInput.setAttribute('role', 'spinbutton')
+    innerInput.setAttribute('aria-valuemax', this.max)
+    innerInput.setAttribute('aria-valuemin', this.min)
+    innerInput.setAttribute('aria-valuenow', this.currentValue)
+    innerInput.setAttribute('aria-disabled', this.inputNumberDisabled)
+  },
+
+  updated () {
+    if (!this.$refs || !this.$refs.input) return
+    const innerInput = this.$refs.input.$refs.input
+    innerInput.setAttribute('aria-valuenow', this.currentValue)
+  },
+
   methods: {
+    toPrecision (num, precision) {
+      if (precision === undefined) precision = this.numPrecision
+      return parseFloat(Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision))
+    },
+    getPrecision (value) {
+      if (value === undefined) return 0
+      const valueString = value.toString()
+      const dotPosition = valueString.indexOf('.')
+      let precision = 0
+      if (dotPosition !== -1) {
+        precision = valueString.length - dotPosition - 1
+      }
+      return precision
+    },
+    _increase (val, step) {
+      if (typeof val !== 'number' && val !== undefined) return this.currentValue
+
+      const precisionFactor = Math.pow(10, this.numPrecision)
+      // Solve the accuracy problem of JS decimal calculation by converting the value to integer.
+      return this.toPrecision((precisionFactor * val + precisionFactor * step) / precisionFactor)
+    },
+    _decrease (val, step) {
+      if (typeof val !== 'number' && val !== undefined) return this.currentValue
+
+      const precisionFactor = Math.pow(10, this.numPrecision)
+
+      return this.toPrecision((precisionFactor * val - precisionFactor * step) / precisionFactor)
+    },
+    increase () {
+      if (this.inputNumberDisabled || this.maxDisabled) return
+      const value = this.value || 0
+      const newVal = this._increase(value, this.step)
+      this.setCurrentValue(newVal)
+    },
+    decrease () {
+      if (this.inputNumberDisabled || this.minDisabled) return
+      const value = this.value || 0
+      const newVal = this._decrease(value, this.step)
+      this.setCurrentValue(newVal)
+    },
+    handleBlur (event) {
+      this.$emit('blur', event)
+    },
+    handleFocus (event) {
+      this.$emit('focus', event)
+    },
+
+    /**
+     * Sobrescrito do element
+     */
     handleInput (value) {
       this.userInput = value
       let newVal
@@ -122,6 +329,9 @@ export default {
       this.$emit('change', newVal)
     },
 
+    /**
+     * Sobrescrito do element
+     */
     handleInputChange (value) {
       let newVal
       if (value === '') {
@@ -141,6 +351,9 @@ export default {
       this.userInput = null
     },
 
+    /**
+     * Sobrescrito do element
+     */
     setCurrentValue (newVal) {
       const oldVal = this.currentValue
       if (typeof newVal === 'number' && this.precision !== undefined) {
@@ -148,11 +361,14 @@ export default {
       }
       if (newVal >= this.max) newVal = this.max
       if (newVal <= this.min) newVal = this.min
-      if (oldVal === newVal && newVal !== '') return
+      if (oldVal === newVal && newVal === this.value) return
       this.userInput = null
       this.$emit('input', newVal)
       this.$emit('change', newVal, oldVal)
-      this.currentValue = newVal
+    },
+
+    select () {
+      this.$refs.input.select()
     }
   }
 }

package/src/components/index.js

@@ -11,6 +11,7 @@ import Multisuggest from './Multisuggest'
 import Step from './Step'
 import Steps from './Steps'
 import InputNumber from './InputNumber'
+import Dialog from './Dialog'
 
 export {
   Autosuggest,
@@ -25,5 +26,6 @@ export {
   Multisuggest,
   Step,
   Steps,
-  InputNumber
+  InputNumber,
+  Dialog
 }