vue-integer-plusminus

vue-integer-plusminus

Integer input component for vue3 with increment and decrement buttons, fitting as spinbutton, allowing keyboard functionalities. See versions 1.x for vue2 component

Live demo here

Global use

• npm install in console

npm install --save vue-integer-plusminus

• import component in your code

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

you may also import it globally in your app

import { createApp } from "vue";
import vueIntegerPlusminus from "vue-interger-plusminus";
createApp(App).use(vueIntegerPlusminus);

• Use component as described below

Component usage

In code

<integer-plusminus></integer-plusminus>

<integer-plusminus :min="ipmMin"
                   :max="ipmMax"
                   :step="ipmStep"
                   :vertical="ipmVertical"
                   :disabled="impDisabled"
                   form-name="integer_plus_minus"
                   v-model="ipmValue">
    <p>Your value is</p>
    {{ ipm_value }}
    
    <template v-slot:decrement>{{ ipmSlotDecr }}</template>
    
    <template v-slot:increment>{{ ipmSlotIncr }}</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 step. Must be greater than 0. Default is 1
vertical	Boolean	Use vertical layout. Default is false
disabled	Boolean	Disabled buttons and keys events. Default is false
spin-button-aria-label	string	Set aria-label attribute on value element, optional
increment-aria-label	string	Set aria-label attribute on decrement button element, optional
decrement-aria-label	string	Set aria-label attribute on increment button element, optional
form-name	string	Set the 'name' attribute of the form input. Default is 'integerPlusMinus', optional
initial-value	number	When v-model is not used, use this attribute to initialized integer value, optional

Slots

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.

Spinbutton

Spinbutton pattern (from WAI-ARIA specifications) is implemented on the middle part, where value is usually displayed. By focusing it (click on it), you can use keyboard to:

• increment (arrow up or page up keys),
• decrement (arrow down or page down keys),
• set min (home key)
• set max (end key, only if max defined).

Thanks to codekipple for this.

Style

You can override base CSS variable used, like colors. After importing this library style, override CSS variable in root. For example, the following CSS will set spinbutton part's background to fuchsia.

:root {
  --ipm-background-color: fuchsia;
}

Refer to src/styles/variables.css for the full list of variable used in this library that you can override.

You can also override style regrouped under .int-pm class.

Events

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

Contribution

This library is managed with vue-CLI

• Fork the repository
• Run npm install
• You can run npm run serve, the script will start the mini demo application
• Do your stuff
• When you're done, run npm run build command and commit your work for a pull request.