├── .gitignore
├── .vscode
└── settings.json
├── tslint.json
├── .npmignore
├── app
├── app.ts
├── index.html
└── app.vue
├── tsconfig.json
├── package.json
├── webpack.config.js
├── README.md
├── index.vue
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | *.log
4 | .idea
5 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "git.ignoreLimitWarning": true
3 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint-config-standard"
3 | }
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | app
2 | dist
3 | *.js
4 | *.lock
5 | *.log
6 | *.yml
7 | .gitignore
8 | .npmignore
9 | tsconfig.json
10 | tslint.json
11 | .vscode
12 |
--------------------------------------------------------------------------------
/app/app.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import InputNumber from '../index.vue'
3 | import App from './app.vue'
4 |
5 | Vue.component('input-number', InputNumber)
6 |
7 | // tslint:disable-next-line
8 | new Vue({
9 | el: '#app',
10 | render: (h) => h(App)
11 | })
12 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vue Input Number
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "outDir": "dist",
5 | "sourceMap": true,
6 | "strict": true,
7 | "module": "es2015",
8 | "moduleResolution": "node",
9 | "target": "es5",
10 | "noImplicitAny": true,
11 | "noImplicitThis": true,
12 | "strictNullChecks": true,
13 | "noImplicitReturns": true,
14 | "noUnusedLocals": true,
15 | "noUnusedParameters": true,
16 | "experimentalDecorators": true,
17 | "allowSyntheticDefaultImports": true,
18 | "types": [ "vue-typescript-import-dts" ],
19 | "typeRoots": [ "node_modules/@types" ],
20 | "lib": [
21 | "dom",
22 | "es5",
23 | "es6",
24 | "es2015.core",
25 | "es2015.collection",
26 | "es2015.generator",
27 | "es2015.iterable",
28 | "es2015.promise",
29 | "es2015.proxy",
30 | "es2015.reflect",
31 | "es2015.symbol",
32 | "es2015.symbol.wellknown",
33 | "esnext.asynciterable"
34 | ]
35 | },
36 | "exclude": [ "node_modules", "dist" ]
37 | }
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-input-number",
3 | "version": "0.1.5",
4 | "license": "MIT",
5 | "description": "A custom input type number component for Vue",
6 | "repository": "joseluisq/vue-input-number",
7 | "main": "index.vue",
8 | "author": "Jose Luis Quintana ",
9 | "engines": {
10 | "node": ">= 4.0"
11 | },
12 | "devDependencies": {
13 | "css-loader": "^0.28.4",
14 | "html-loader": "^0.5.1",
15 | "style-loader": "^0.19.0",
16 | "ts-loader": "^3.0.5",
17 | "tslint": "^5.8.0",
18 | "tslint-config-standard": "^6.0.1",
19 | "typescript": "^2.4.2",
20 | "vue": "^2.0",
21 | "vue-class-component": "^6.0.0",
22 | "vue-loader": "^13.0.2",
23 | "vue-template-compiler": "^2.4.2",
24 | "vue-typescript-import-dts": "^3.1.1",
25 | "webpack": "^3.4.1",
26 | "webpack-dev-server": "^2.6.1"
27 | },
28 | "scripts": {
29 | "start": "npm run dev",
30 | "dev": "NODE_ENV=development webpack-dev-server",
31 | "build": "NODE_ENV=production webpack -p",
32 | "clean": "rm -rf ./dist",
33 | "lint": "node node_modules/tslint/bin/tslint --format stylish --project tsconfig.json --type-check",
34 | "test": "echo \"Error: no test specified\" && exit"
35 | },
36 | "peerDependencies": {
37 | "vue": ">= 2.0"
38 | },
39 | "keywords": [
40 | "vue",
41 | "input",
42 | "input-number",
43 | "component"
44 | ]
45 | }
46 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const { resolve } = require('path')
2 | const Webpack = require('webpack')
3 |
4 | const port = process.env.APP_PORT || 4044
5 | const dist = resolve(__dirname, 'dist')
6 | const src = resolve(__dirname, 'app')
7 |
8 | module.exports = {
9 | entry: {
10 | app: [ resolve(src, 'app.ts') ]
11 | },
12 | output: {
13 | filename: 'bundle.js',
14 | path: dist,
15 | publicPath: '/'
16 | },
17 | devtool: 'eval',
18 | node: {
19 | fs: 'empty'
20 | },
21 |
22 | devServer: {
23 | hot: true,
24 | contentBase: src,
25 | port: port,
26 | publicPath: '/',
27 | historyApiFallback: true,
28 | disableHostCheck: true,
29 | stats: {
30 | assets: true,
31 | children: false,
32 | chunks: false,
33 | hash: false,
34 | modules: false,
35 | publicPath: false,
36 | timings: true,
37 | version: false,
38 | warnings: true,
39 | colors: {
40 | green: '\u001b[32m'
41 | }
42 | }
43 | },
44 |
45 | module: {
46 | rules: [
47 | {
48 | test: /\.ts(x?)$/,
49 | loader: 'ts-loader',
50 | exclude: /node_modules/,
51 | options: {
52 | appendTsSuffixTo: [ /\.vue$/ ]
53 | }
54 | },
55 | {
56 | test: /\.vue$/,
57 | loader: 'vue-loader',
58 | options: {
59 | loaders: {
60 | css: 'vue-style-loader!css-loader'
61 | }
62 | }
63 | },
64 | {
65 | test: /\.css$/,
66 | loaders: [ 'style-loader', 'css-loader?importLoader=1&localIdentName=[name]__[local]__[hash:base64:5]' ]
67 | },
68 | {
69 | test: /\.html$/,
70 | loader: 'html-loader'
71 | }
72 | ]
73 | },
74 |
75 | resolve: {
76 | extensions: [ '.js', '.ts' ],
77 | alias: {
78 | vue$: 'vue/dist/vue.common.js'
79 | }
80 | },
81 |
82 | plugins: [ new Webpack.HotModuleReplacementPlugin() ]
83 | }
84 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vue-input-number [](https://www.npmjs.com/package/vue-input-number) [](https://www.npmjs.com/package/vue-input-number) [](https://standardjs.com)
2 |
3 | > A custom input number component for [Vue.js 2](https://vuejs.org/).
4 |
5 | ## Install
6 |
7 | [Yarn](https://yarnpkg.com/lang/en/)
8 |
9 | ```sh
10 | yarn add vue-input-number --dev
11 | ```
12 |
13 | [NPM](https://www.npmjs.com/)
14 | ```sh
15 | npm install vue-input-number --save-dev
16 | ```
17 |
18 | ## Prerequisites
19 |
20 | - [Vue.js 2](https://vuejs.org/)
21 |
22 | ## Usage
23 |
24 | ```html
25 |
26 |
27 |
34 |
35 |
36 |
37 |
46 | ```
47 |
48 | In your entry app:
49 |
50 | ```js
51 | const Vue = require('vue')
52 |
53 | Vue.component('vue-input-number', require('vue-input-number'))
54 |
55 | const app = new Vue({
56 | el: '#app'
57 | })
58 | ```
59 |
60 | For more detailed example check out [the app directory](./app).
61 |
62 | ## Attributes
63 |
64 | - __value:__ Add a default value to input.
65 | - __step:__ Step value for increment and decrement the input number value.
66 | - __min:__ Minimum value for input number. `min` is only used as a placeholder if `placeholder` is empty.
67 | - __max:__ Maximum value for input number.
68 | - __maxlength:__ Maxlength for the input number.
69 | - __keydown:__ Enable keydown for increment or decrement value.
70 | - __mousedown:__ Enable mousedown for increment or decrement value.
71 | - __integer:__ Enable integer value only.
72 | - __placeholder:__ Set a input placeholder. If `placeholder` has some value then `min` is not used as a placeholder.
73 | - __inputclass:__ Set a diferent class for the input element. For example, if you use Bootstrap default input class you can set `:inputclass="'form-control'"` to use `form-control` class in the input element.
74 |
75 | ## Events
76 |
77 | #### @onInputNumberChange
78 |
79 | Event is fired when value is changed.
80 |
81 | ## License
82 | MIT license
83 |
84 | © 2018 [José Luis Quintana](https://git.io/joseluisq)
85 |
--------------------------------------------------------------------------------
/app/app.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Input Number
5 |
6 |
Options:
7 |
8 |
9 |
10 | {{ opt }}:
11 |
12 |
13 |
14 | Try:
15 |
23 |
24 |
25 |
Value: {{ inputValue }}
26 |
27 |