vue-integer-plusminus

Integer input with increment and decrement buttons

Live demo here

This component fits as spinbutton, allowing keyboard functionalities (up/down arrows or page up/down to increment/decrement, home/end to min/max)

Global use

• npm install

npm install --save vue-integer-plusminus

• import components

import { IntegerPlusminus } from 'vue-integer-plusminus'

• declare use or imported components in your vue script

export default {
    components: { IntegerPlusminus },
    methods: ...
}

• Use components as described below

Components

Integer plus/minus

<integer-plusminus></integer-plusminus>

<integer-plusminus :min="ipm_min"
                   :max="ipm_max"
                   :step="ipm_step"
                   :vertical="ipm_vertical"
                   :disabled="imp_disabled"
                   formName="integer_plus_minus"
                   v-model="ipm_value">
    <p>Your value is</p>
    {{ ipm_value }}
    
    <template slot="decrement">{{ ipm_slot_decr }}</template>
    
    <template slot="increment">{{ ipm_slot_incr }}</template>
</integer-plusminus>

| Prop | Type | Note | :--- | :--- | ---: | | min | number | minimum possible value. Cannot decrement lower. Default is 0 | | max | number | maximum possible value. Cannot increment over. Default is undefined | | step | number | Incremental and decremental step. Must be greater than 0. Default is 1 | | stepIncrement | number | Incremental step, optional. If greater than 0 (default), this value replaced the 'step' one when incrementing | | stepDecrement | number | Decremental step, optional. If greater than 0 (default), this value replaced the 'step' one when decrementing | | vertical | Boolean | Use vertical layout. Default is false | | disabled | Boolean | Disabled buttons and keys events. Default is false | | spinButtonAriaLabel | string | Set aria-label attribute on value element, optional | | incrementAriaLabel | string | Set aria-label attribute on decrement button element, optional | | decrementAriaLabel | string | Set aria-label attribute on increment button element, optional | | formName | string | Set the 'name' attribute of the form input. Default is 'integerPlusMinus' |

This component provide 3 slots

• Default slot is the middle part when value is usually displayed
• 'increment' slot is used for increment button. Usually on right for horizontal layout, or top for vertical layout.
• 'decrement' slot is used for decrement button. Usually on left for horizontal layout, or bottom for vertical layout.

Style could be overwritten using !important css keyword

.int-input-increment {
    background: #5CB85C !important;
}

Events:

• 'input' on value change
• 'ipm-increment' on value increment
• 'ipm-decrement' on value decrement

Contribution

• Fork the repository
• Run npm install
• You can run npm run dev, site is at http://localhost:8081.
• Do your stuff
• When you're done, run npm run build command and commit your work for a pull request.