This package has been deprecated

Author message:

no more maintained

vuetify-number-smarty

Demo page

Features

1. integer/float
2. signed/unsigned
3. step size
4. increment/decrement value by scrolling when focused
5. min and max boundaries
6. max length of integer part (only for float type)
7. max length of float part (only for float type)
8. max length of string
9. color options
10. vuetify properties support
11. vuetify events support

Installation

npm i vuetify-number-smarty

or with yarn:

yarn add vuetify-number-smarty

Then just include plugin in your component:

import VNumberSmarty from 'vuetify-number-smarty';

components: {
  ...
  VNumberSmarty,
},

That's all!

Usage

Props

<!-- Vuetify property -->
success: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
success-messages: {
  required: false,
  type: [String, Array],
  default: '',
},
<!-- Vuetify property -->
append-outer-icon: {
  required: false,
  type: String,
  default: undefined,
},
<!-- Vuetify property -->
append-icon: {
  required: false,
  type: String,
  default: undefined,
},
<!-- Vuetify property -->
prepend-inner-icon: {
  required: false,
  type: String,
  default: undefined,
},
<!-- Vuetify property -->
prepend-icon: {
  required: false,
  type: String,
  default: undefined,
},
<!-- Vuetify property -->
prefix: {
  required: false,
  type: String,
  default: '',
},
<!-- Vuetify property -->
suffix: {
  required: false,
  type: String,
  default: '',
},
<!-- Vuetify property -->
autofocus: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
persistent-hint: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
hint: {
  required: false,
  type: String,
  default: '',
},
<!-- Vuetify property -->
clearable: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- plus/minus arrows persistent color -->
arrows-color: {
  required: false,
  type: String,
  default: 'inherit',
},
<!-- Vuetify property -->
background-color: {
  required: false,
  type: String,
  default: 'inherit',
},
<!-- Vuetify property -->
color: {
  required: false,
  type: String,
  default: 'inherit',
},
<!-- Vuetify property -->
label: {
  required: false,
  type: String,
  default: '',
},
<!-- Vuetify property -->
hide-details: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
solo: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
box: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
outline: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
disabled: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
readonly: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
placeholder: {
  required: false,
  type: String,
  default: '',
},
<!-- set unsigned input mode -->
unsigned: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- 'integer' of 'float' -->
number-type: {
  required: true,
  type: String,
},
<!-- set minimum input value -->
min-value: {
  required: false,
  type: Number,
  default: -9999999,
},
<!-- set maximum input value -->
max-value: {
  required: false,
  type: Number,
  default: 9999999,
},
<!-- set increment/decrement value size -->
step: {
  required: false,
  type: Number,
  default: 1,
},
/* only for integer | max length of string */
max-len: {
  required: false,
  type: Number,
  default: 6,
},
/* max length of string before float part */
int-part-max-len: {
  required: false,
  type: Number,
  default: 4,
},
/* max length of string after float part */
float-part-max-len: {
  required: false,
  type: Number,
  default: 2,
},
<!-- Vuetify property -->
error: {
  required: false,
  type: Boolean,
  default: false,
},
<!-- Vuetify property -->
error-messages: {
  required: false,
  type: [String, Array],
  default: '',
},

Project setup

yarn install || npm i

Compiles and hot-reloads for development

yarn serve || npm run serve

Go to /src/main.js and do it:

// import VNumberSmarty from 'vuetify-number-smarty';
import VNumberSmarty from '@/plugin-src/main.js';

Now you can go to the root folder and type:

yarn serve || npm run serve

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

Compiles and minifies for production

Go to /src/plugin-src/ and do:

npx bili

Then go to /src/plugin-src/dist/main.js and at the end replace

module.exports

with

export default

Customize configuration

See Configuration Reference.