vue-number-smarty

vue-number-smarty

Playground and demo

Features

• integer/float
• signed/unsigned
• step size
• increment/decrement value by scrolling when focused
• align variants
• min and max boundaries
• max length of integer part (only for float type)
• max length of float part (only for float type)
• max length of string
• error state
• disabled state
• a lot of theme options
• 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.