https://github.com/Keiwen/vue-integer-plusminus

Integer input with increment and decrement buttons for vue 2 - https://keiwen.github.io/vue-integer-plusminus/
https://github.com/Keiwen/vue-integer-plusminus

Last synced: about 1 month ago
JSON representation

Integer input with increment and decrement buttons for vue 2 - https://keiwen.github.io/vue-integer-plusminus/

• Host: GitHub
• URL: https://github.com/Keiwen/vue-integer-plusminus
• Owner: Keiwen
• Created: 2018-08-23T14:58:54.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-10T16:25:31.000Z (over 1 year ago)
• Last Synced: 2024-03-23T22:20:21.889Z (2 months ago)
• Language: Vue
• Homepage:
• Size: 1.63 MB
• Stars: 18
• Watchers: 3
• Forks: 8
• Open Issues: 11
• Metadata Files:
  • Readme: README.md

Lists

• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (UI Components / Minus Plus Input)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (UI Components / Minus Plus Input)
• awesome-vue - vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2. (Components & Libraries / UI Components)
• awesome-vue - vue-integer-plusminus ★6 - Integer input with increment and decrement buttons for vue 2. (UI Components / Minus Plus Input)

README

        
# vue-integer-plusminus

[![npm](https://img.shields.io/npm/v/vue-integer-plusminus.svg)](https://www.npmjs.com/package/vue-integer-plusminus)

[![npm](https://img.shields.io/npm/dt/vue-integer-plusminus.svg)](https://www.npmjs.com/package/vue-integer-plusminus)

Integer input with increment and decrement buttons

[Live demo here](https://keiwen.github.io/vue-integer-plusminus/)

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

```

```

```

    
Your value is

    {{ ipm_value }}

    

    {{ ipm_slot_decr }}

    

    {{ ipm_slot_incr }}


```

| 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.