vue-number-smarty - Number input that can change value on scrolling when field is focused.

NO MORE MAINTAINED

1. low activity
2. complete reworking is required
3. there is no point in reworking due to p.1

Playground and demo

Features

1. integer/float
2. signed/unsigned
3. step size
4. increment/decrement value by scrolling when focused
5. align variants
6. min and max boundaries
7. max length of integer part (only for float type)
8. max length of float part (only for float type)
9. max length of string
10. error state
11. disabled state
12. a lot of theme options
13. override-friendly styles

Installation

npm i vue-number-smarty

or with yarn:

yarn add vue-number-smarty

Usage

Just include plugin in your component:

import VNumberSmarty from 'vue-number-smarty';

components: {
  ...
  VNumberSmarty,
},

Now you can use it:

<v-number-smarty
  v-model="myModel"
  number-type="integer"
  unsigned
  placeholder="Focus me and scroll"
  font-family="Roboto Condensed"
  font-size="1rem"
  :step="5"
  :max="1000"
/>

<v-number-smarty
  v-model="myModel"
  number-type="float"
  text-color="#eee"
  :step="5.5"
  :int-part-max-len="3"
  :float-part-max-len="1"
  :min="-1000"
  :max="1000"
/>

Props

• align

  description: text-align within input
  required: false
  default: 'left'
  allowed: 'left', 'center', 'right', 'justify'
  

• placeholder

  required: false
  default: ''
  type: String
  

• unsigned

  description: true - number can be negative, false - number can't be negative
  required: false
  default: false
  type: Boolean
  

• number-type

  required: true
  allowed: 'integer', 'float'
  

• min

  description: number will be bring to min value if it is exceeded, when field becomes inactive (on blur)
  required: false
  type: Number
  default: -9999999
  

• max

  description: number will be bring to max value if it is exceeded, when field becomes inactive (on blur)
  required: false
  type: Number
  default: 9999999
  

• step

  description: increment/decrement size
  required: false
  type: Number
  default: 1
  

• max-len

  description: max length of string (only for integer type)
  required: false
  type: Number
  default: 6
  

• max-len

  description: max length of string (only for integer type)
  required: false
  type: Number
  default: 6
  

• int-part-max-len

  description: max length of integer part of number (only for float type)
  required: false
  type: Number
  default: 4
  

• float-part-max-len

  description: max length of fractional part of number (only for float type)
  required: false
  type: Number
  default: 2
  

• error

  description: field's error state
  required: false
  type: Boolean
  default: false
  

• disabled

  required: false
  type: Boolean
  default: false
  

• text-color

  required: false
  type: String
  default: 'rgba(0,0,0,.9)'
  

• font-weight

  description: it is just a string - write what you want here ('bold', '500' or whatever)
  required: false
  type: String
  default: 'normal'
  

• font-family

  required: false
  type: String
  default: 'monospace'
  

• font-size

  description: it is just a string - write what you want here ('18px', '1.5em' or whatever)
  required: false
  type: String
  default: '1.3em'
  

• max-width

  description: it is just a string - write what you want here ('100px', '3.5em', '50%' or whatever)
  required: false
  type: String
  default: '250px'
  

• margin

  description: it is just a string - write what you want here ('10px auto', '0px 10px 15px' or whatever)
  required: false
  type: String
  default: '0 auto'
  

• padding

  description: it is just a string - write what you want here ('10px auto', '0px 10px 15px' or whatever)
  required: false
  type: String
  default: '5px 10px'
  

Styles

Component styles are override-friendly. So you can configure the desired field style.

The css classes of the component are listed here:

.vns__wrapper
  .vns__input (.vns__input-error)
  .vns-arrows
    .vns-arrows__arrow-up
    .vns-arrows__arrow-down

Project setup

yarn install || npm i

Compiles and hot-reloads for development

Go to the root folder and type:

yarn serve || npm run serve

You can work with /src/plugin/NumberInput.vue and see it in your browser.

ToDo

• Configure husky
• Move project to TypeScript

Compiles and minifies for production

Go to /src/plugin/ and do:

npx bili

Run tests

Go to the root folder and type:

yarn test:unit || npm run test:unit

Customize configuration

See Configuration Reference.