Vuejs-Vue number smarty: 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.

Comments