123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279 |
- <template lang="pug">
- div
- .input-group
- .input-group-button(v-if='hasPrefix()')
- button(type='button') {{ prefix }}
- input.input-formatted(
- v-model='formattedValue'
- type='text'
- :disabled='!editable'
- :autofocus='focus'
- )
- .input-group-button(v-if='hasSuffix()')
- button(
- type='button'
- @click='onShowOptions()'
- ref='suffixButton'
- ) {{ suffix }}
- span.caret(:style="{'display': hasOptions() ? 'inline-block' : 'none'}")
- ul.dropdown(
- :style="{'display': isShowOptions ? 'block' : 'none'}"
- ref='suffixDropdown'
- )
- li(
- v-for='(option, index) in options'
- :key='index'
- )
- a(@click='onClickOption(option)') {{ option }}
- </template>
- <script>
- export default {
- props: {
- value: {
- type: Number,
- default: 0
- },
- format: {
- type: String,
- default: 'text'
- },
- editable: {
- type: Boolean,
- default: true
- },
- focus: {
- type: Boolean,
- default: false
- },
- prefix: {
- type: String,
- default: ''
- },
- suffix: {
- type: String,
- default: ''
- },
- options: {
- type: Array,
- default: []
- }
- },
- computed: {
- formattedValue: {
- get() {
- let value = this.value
- if (this.format === 'number') {
- value = this.formatValue(value)
- value = !!this.value ? value : value.replace(/\d/, '')
- value = value.length === 0 ? 0 : value
- }
- return value
- },
- set(value) {
- if (this.format === 'number') {
- value = this.unformatValue(value)
- }
- this.value = value
- this.onChangeValue(value)
- }
- }
- },
- methods: {
- formatValue(value, options) {
- value = value.toString()
- if (!(options instanceof Object)) {
- options = {}
- }
- options.thousandsSeparator = options.thousandsSeparator || '.'
- options.decimalPlaces = options.decimalPlaces >= 0 || options.decimalPlaces <= 2 ? options.decimalPlaces : 2
- options.decimalSeparator = options.decimalSeparator || ','
- options.decimalZeros = !!options.decimalZeros
- if (!!(`${options.thousandsSeparator}${options.decimalSeparator}`).replace(/\.,|,\./g, '')) {
- throw new Error('Same thousands and decimal separator is not allowed')
- }
- value = value.split('.')
- value[0] = value[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, `$1${options.thousandsSeparator}`)
- if (!!value[1]) {
- value[1] = Number.parseFloat(`1.${value[1]}e${options.decimalPlaces}`)
- value[1] = Math.round(value[1]).toString().replace(/^1/, '')
- }
- value = value.join(options.decimalSeparator)
- if (!options.decimalZeros) {
- value = value.replace(/([\.|,]\d)0$/, '$1')
- }
- return value
- },
- unformatValue(value) {
- value = value.replace(/[\.|,](\d{0,2}$)/, '?$1').split(/\?/)
- value[0] = value[0].replace(/[^0-9]/g, '')
- value = Number.parseFloat(value.join('.')) || 0
- return value
- },
- hideOptions() {
- this.isShowOptions = false
- },
- onChangeValue(value) {
- this.$emit('onChangeValue', value)
- },
- hasPrefix() {
- return !!this.prefix && this.prefix.length !== 0
- },
- hasSuffix() {
- return !!this.suffix && this.suffix.length !== 0
- },
- hasOptions() {
- return this.options.length !== 0
- },
- onShowOptions() {
- if (!this.hasOptions()) {
- return
- }
-
- this.isShowOptions = !this.isShowOptions
- },
- onClickOutside(e) {
- let suffixButton = this.$refs.suffixButton
- if (!suffixButton) {
- return
- }
- let target = e.target
- if (target === suffixButton) {
- return
- }
- let el = this.$refs.suffixDropdown
-
- if (el !== target && !el.contains(target)) {
- this.hideOptions()
- }
- },
- onClickOption(selectedOption) {
- this.hideOptions()
- this.$emit('onClickOption', selectedOption)
- }
- },
- created() {
- document.addEventListener('click', this.onClickOutside)
- },
- destroyed() {
- document.removeEventListener('click', this.onClickOutside)
- },
- data() {
- return {
- value: '',
- isShowOptions: false
- }
- }
- }
- </script>
- <style lang="sass">
- @import '../../assets/variables'
- .input-group
- position: relative
- width: 100%
- display: table
- border-collapse: separate
- .input-formatted
- position: relative
- width: 100%
- height: 35px
- float: left
- z-index: 2
- display: table-cell
- margin-bottom: 0
- border-radius: 0
- font-size: 12pt
- padding: 6px 12px
- &:focus
- z-index: 3
- .input-group-button
- position: relative
- font-size: 0
- width: 1%
- white-space: nowrap
- vertical-align: middle
- display: table-cell
- &:first-child
- & > button
- margin-right: -1px
- &:last-child
- & > button
- margin-left: -1px
- button
- height: 35px
- display: inline-block
- margin-bottom: 0
- text-align: center
- vertical-align: middle
- white-space: nowrap
- border: 1px solid #ccc
- border-radius: 0
- box-shadow: none
- background: $app-main-color
- color: #fff
- z-index: 2
- position: relative
- user-select: none
- &:focus
- outline: 0 !important
- border: 1px solid #ccc
- box-shadow: none
- &:caret
- display: inline-block
- width: 0
- height: 0
- margin-left: 0
- vertical-align: middle
- border-top: 4px dashed
- border-right: 4px solid transparent
- border-left: 4px solid transparent
- .dropdown
- position: absolute
- top: 100%
- float: left
- left: auto
- right: 0
- list-style: none
- text-align: left
- border: 1px solid #ccc
- background-color: #fff
- background-clip: padding-box
- min-width: 160px
- padding: 5px 0
- margin: 2px 0 0
- z-index: 1000
- font-size: 10pt
- & > li > a
- height: 35px
- display: block
- padding: 3px 20px
- clear: both
- font-weight: normal
- line-height: 2.1
- white-space: nowrap
- color: #333
- border-bottom: 1px solid #e5e5e5
- &:hover, &:focus
- text-decoration: none
- border-bottom: 2px solid #7c7bad
- </style>
|