NO MORE MAINTAINED
- low activity
- complete reworking is required
- there is no point in reworking due to p.1
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