init

Author: joseluisq

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.log

.npmignore

@@ -0,0 +1,10 @@
+app
+dist
+*.js
+*.lock
+*.log
+*.yml
+.gitignore
+.npmignore
+tsconfig.json
+tslint.json

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}

README.md

@@ -0,0 +1,77 @@
+# vue-input-number
+
+> A custom input number component for [Vue.js 2](https://vuejs.org/).
+
+## Install
+
+[Yarn](https://yarnpkg.com/lang/en/)
+
+```sh
+yarn add vue-input-number --dev
+```
+
+[NPM](https://www.npmjs.com/)
+```sh
+npm install vue-input-number --save-dev
+```
+
+## Prerequisites
+
+- [Vue.js 2](https://vuejs.org/)
+
+## Usage
+
+```html
+<template>
+
+    <input-number
+        :step="1"
+        :min="10"
+        :max="100"
+        :maxlength="3"
+        @onInputNumberChange="onChange"></input-number>
+
+</template>
+
+<script>
+  export default {
+    methods: {
+        onChange (value) {
+            console.log(value)
+        }
+    }
+  }
+</script>
+```
+
+In your entry app:
+
+```js
+const Vue = require('vue')
+
+Vue.component('vue-input-number', require('vue-input-number'))
+
+const app = new Vue({
+  el: '#app'
+})
+```
+
+For more detailed example check out [the app directory](./app).
+
+## Attributes
+
+- __step:__ Step value for increment and decrement the input number value.
+- __min:__ Minimum value for input number.
+- __max:__ Maximum value for input number.
+- __maxlength:__ Maxlength for the input number.
+
+## Events
+
+#### @onInputNumberChange
+
+Event is fired when value is changed.
+
+## License
+MIT license
+
+© 2017 [José Luis Quintana](https://git.io/joseluisq)

app/app.ts

@@ -0,0 +1,11 @@
+import Vue from 'vue'
+import InputNumber from '../index.vue'
+import App from './app.vue'
+
+Vue.component('input-number', InputNumber)
+
+// tslint:disable-next-line
+new Vue({
+  el: '#app',
+  render: (h) => h(App)
+})

app/app.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+
+    <h3>Input Number</h3>
+
+    <strong>Options:</strong>
+
+    <div v-for="opt in getOptions()" :key="opt">
+      <span style="display:inline-block; width: 100px; text-align:right;">
+        {{ opt }}:</span> <input type="input" v-model.number="options[opt]">
+    </div>
+
+    <p>
+      <strong>Try:</strong> <br>
+      <input-number
+        :step="options.step"
+        :min="options.min"
+        :max="options.max"
+        :maxlength="options.maxlength"
+        @onInputNumberChange="inputChange"></input-number>
+    </p>
+
+    <strong>Value:</strong> <span>{{ inputValue }}</span>
+
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+interface Options {
+  step: number,
+  min: number,
+  max: number,
+  maxlength: number
+}
+
+@Component
+export default class App extends Vue {
+  options: Options = {
+    step: 1,
+    min: 1,
+    max: 100,
+    maxlength: 3
+  }
+
+  inputValue: number = 1
+
+  getOptions () {
+    return Object.keys(this.options)
+  }
+
+  inputChange (val: number) {
+    this.inputValue = val
+  }
+}
+</script>
+
+<style>
+.v-input-number {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 175px;
+}
+.v-input-number * {
+  box-sizing: border-box;
+}
+.v-input-number-arrows {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  right: 0;
+}
+.v-input-number-arrows > a {
+  position: absolute;
+  top: 0;
+  right: 2px;
+  background-color: #ccc;
+  border: 0;
+  width: 28px;
+  height: 15px;
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
+}
+.v-input-number-arrows > a.v-input-number-up {
+  top: 2px;
+}
+.v-input-number-arrows > a.v-input-number-down {
+  top: 18px;
+}
+.v-input-number-arrows > a > i {
+  display: inline-block;
+  height: 0;
+  text-indent: -999em;
+  content: "";
+  overflow: hidden;
+  position: relative;
+  vertical-align: baseline;
+  width: 0;
+  border: 4px solid transparent;
+}
+.v-input-number-arrows > a.v-input-number-up > i {
+  top: -3px;
+  border: 4px solid transparent;
+  border-bottom-color: #333;
+}
+.v-input-number-arrows > a.v-input-number-down > i {
+  border-top-color: #333;
+}
+.v-input-number-input {
+  display: block;
+  padding: 5px 25px 5px 0;
+  font-size: 16px;
+  background-color: #fff;
+  border: 1px solid #bbb;
+  text-align: center;
+  width: 100%;
+  height: 35px;
+  text-align: center;
+}
+</style>

app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Vue Input Number</title>
+</head>
+<body>
+</body>
+    <div id="app"></div>
+    <script src="bundle.js"></script>
+</html>