Implemented Spinner Component

src/AppMenu.vue

@@ -16,6 +16,7 @@
                     <router-link to="/radiobutton">&#9679; RadioButton</router-link>
                     <router-link to="/rating">&#9679; Rating</router-link>
                     <router-link to="/selectbutton">&#9679; SelectButton</router-link>
+                    <router-link to="/spinner">&#9679; Spinner</router-link>
                     <router-link to="/textarea">&#9679; Textarea</router-link>
                     <router-link to="/togglebutton">&#9679; ToggleButton</router-link>
                     <router-link to="/tristatecheckbox">&#9679; TriCheckbox</router-link>

src/assets/styles/primevue.css

@@ -11,6 +11,7 @@
 @import '../../components/panel/Panel.css';
 @import '../../components/radiobutton/RadioButton.css';
 @import '../../components/rating/Rating.css';
+@import '../../components/spinner/Spinner.css';
 @import '../../components/tabview/TabView.css';
 @import '../../components/textarea/Textarea.css';
 @import '../../components/toolbar/Toolbar.css';

src/components/chips/Chips.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="p-chips p-component">
-        <ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick($event)">
+        <ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick()">
             <li v-for="(val,i) of value" :key="val" class="p-chips-token p-highlight">
                 <slot :value="val">  
                     <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
@@ -16,6 +16,7 @@
 
 <script>
 export default {
+    inheritAttrs: false,
     props: {
         value: Array,
         disabled: Boolean,
@@ -27,7 +28,7 @@ export default {
         };
     },
     methods: {
-        onWrapperClick(event) {
+        onWrapperClick() {
             this.$refs.input.focus();
         },
         onFocus(event) {

src/components/spinner/Spinner.css

@@ -0,0 +1,53 @@
+.p-spinner {
+    display: inline-block;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    vertical-align: middle;
+}
+.p-spinner-input {
+    vertical-align: middle;
+    padding-right: 1.5em;
+}
+.p-spinner-button {
+    cursor: default;
+    display: block;
+    height: 50%;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    vertical-align: middle;
+    width: 1.5em;
+}
+.p-spinner .p-spinner-button-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -.5em;
+    margin-left: -.5em;
+    width: 1em;
+}
+.p-spinner-button-up {
+    top: 0;
+}
+.p-spinner-button-down {
+    bottom: 0;
+}
+
+/* Fluid */
+.p-fluid .p-spinner {
+    width: 100%;
+}
+.p-fluid .p-spinner .p-spinner-input {
+    padding-right: 2em;
+    width: 100%;
+}
+.p-fluid .p-spinner .p-spinner-button {
+    width: 1.5em;
+}
+.p-fluid .p-spinner .p-spinner-button .p-spinner-button-icon {
+    left: .375em;
+}

src/components/spinner/Spinner.vue

@@ -0,0 +1,176 @@
+<template>
+    <span :class="containerClass">
+        <input ref="input" :class="inputClass" v-bind="$attrs" v-on="listeners" :value="value">
+        <button type="button" :class="upButtonClass" @mousedown="onButtonMouseDown($event, 1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave" 
+            @keydown="onButtonKeyDown($event, 1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
+            <span class="p-spinner-button-icon pi pi-caret-up"></span>
+        </button>
+        <button type="button" :class="downButtonClass" @mousedown="onButtonMouseDown($event, -1)" @mouseup="onButtonMouseUp" @mouseleave="onButtonMouseLeave" 
+            @keydown="onButtonKeyDown($event, -1)" @keyup="onButtonKeyUp" :disabled="$attrs.disabled">
+            <span class="p-spinner-button-icon pi pi-caret-down"></span>
+        </button>
+    </span>
+</template>
+
+<script>
+export default {
+    inheritAttrs: false,
+    props: {
+        value: null,
+        step: {
+            type: Number,
+            default: 1
+        },
+        min: Number,
+        max: Number
+    },
+    data() {
+        return {
+            focused: false
+        }
+    },
+    methods: {
+        repeat(event, interval, dir) {
+            let i = interval || 500;
+
+            this.clearTimer();
+            this.timer = setTimeout(() => {
+                this.repeat(event, 40, dir);
+            }, i);
+
+            this.spin(event, dir);
+        },
+        spin(event, dir) {
+            let step = this.step * dir;
+            let currentValue;
+            let newValue;
+
+            if (this.value)
+                currentValue = (typeof this.value === 'string') ? this.parseValue(this.value) : this.value;
+            else
+                currentValue = 0;
+
+            if (this.precision)
+                newValue = parseFloat(this.toFixed(currentValue + step, this.precision));
+            else
+                newValue = currentValue + step;
+
+            if (this.min !== null && newValue < this.min) {
+                newValue = this.min;
+            }
+
+            if (this.max !== null && newValue > this.max) {
+                newValue= this.max;
+            }
+
+            this.$emit('input', newValue);
+        },
+        toFixed(value, precision) {
+            let power = Math.pow(10, precision || 0);
+            return String(Math.round(value * power) / power);
+        },
+        parseValue(val) {
+            let value = val.trim();
+
+            if (val === '') {
+                value = this.min != null ? this.min : null;
+            }
+            else {
+                if (this.precision)
+                    value = parseFloat(val.replace(',', '.'));
+                else
+                    value = parseInt(val, 10);
+
+                if (!isNaN(value)) {
+                    if (this.max !== null && value > this.max) {
+                        value = this.props.max;
+                    }
+
+                    if (this.min !== null && value < this.min) {
+                        value = this.props.min;
+                    }
+                }
+                else {
+                    value = null;
+                }
+            }
+
+            return value;
+        },
+        onButtonMouseDown(event, direction) {
+            this.$refs.input.focus();
+            this.repeat(event, null, direction);
+            event.preventDefault();
+        },
+        onButtonMouseUp() {
+            this.clearTimer();
+        },
+        onButtonMouseLeave() {
+           this.clearTimer();
+        },
+        onButtonKeyUp() {
+            this.clearTimer();
+        },
+        onButtonKeyDown(event, direction) {
+            if (event.keyCode === 32 || event.keyCode === 13) {
+                this.repeat(event, null, direction);
+            }
+        },
+        clearTimer() {
+            if (this.timer) {
+                clearInterval(this.timer);
+            }
+        }
+    },
+    computed: {
+        listeners() {
+            return {
+                ...this.$listeners,
+                input: event => {
+                    this.$emit('input', event.target.value)
+                },
+                focus: event => {
+                    this.focused = true;
+                },
+                blur: event => {
+                    this.focused = false;
+
+                    const parsedValue =  this.parseValue(event.target.value);
+                    this.$emit('input', parsedValue);
+                },
+                keydown: event => {
+                    if (event.which === 38) {
+                        this.spin(1);
+                        event.preventDefault();
+                    }
+                    else if (event.which === 40) {
+                        this.spin(-1);
+                        event.preventDefault();
+                    }
+                }
+            };
+        },
+        precision() {
+            if (Math.floor(this.step) === 0)
+                return this.step.toString().split(/[,]|[.]/)[1].length;
+            else
+                return null;
+        },
+        containerClass() {
+            return ['p-spinner p-component', {'p-inputwrapper-filled': this.filled, 'p-inputwrapper-focus': this.focused}];
+        },
+        inputClass() {
+            return ['p-inputtext p-component p-spinner-input', {'p-filled': this.filled, 'p-disabled': this.$attrs.disabled}];
+        },
+        upButtonClass() {
+            return ['p-spinner-button p-spinner-button-up p-button p-component', {'p-disabled': this.$attrs.disabled}];
+        },
+        downButtonClass() {
+            return ['p-spinner-button p-spinner-button-down p-button p-component', {'p-disabled': this.$attrs.disabled}];
+        },
+        filled() {
+            return (this.value != null && this.value.toString().length > 0)
+        }
+    }
+}
+</script>

src/main.js

@@ -15,6 +15,7 @@ import Panel from './components/panel/Panel';
 import Rating from './components/rating/Rating';
 import RadioButton from './components/radiobutton/RadioButton';
 import SelectButton from './components/selectbutton/SelectButton';
+import Spinner from './components/spinner/Spinner';
 import Textarea from './components/textarea/Textarea';
 import Toolbar from './components/toolbar/Toolbar';
 import TabView from './components/tabview/TabView';
@@ -42,6 +43,7 @@ Vue.component('p-panel', Panel);
 Vue.component('p-radioButton', RadioButton);
 Vue.component('p-rating', Rating);
 Vue.component('p-selectButton', SelectButton);
+Vue.component('p-spinner', Spinner);
 Vue.component('p-tabView', TabView);
 Vue.component('p-tabPanel', TabPanel);
 Vue.component('p-textarea', Textarea);

src/router.js

@@ -81,6 +81,11 @@ export default new Router({
         name: 'selectbutton',
         component: () => import('./views/selectbutton/SelectButtonDemo.vue')
     },
+    {
+        path: '/spinner',
+        name: 'spinner',
+        component: () => import('./views/spinner/SpinnerDemo.vue')
+    },
     {
         path: '/textarea',
         name: 'textarea',

src/views/spinner/SpinnerDemo.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Spinner</h1>
+                <p>Spinner is an input component to provide a numerical input.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Basic</h3>
+            <p-spinner v-model="value1" />
+
+            <h3>Min/Max</h3>
+            <p-spinner v-model="value2" :min="0" :max="100" />
+
+            <h3>Step</h3>
+            <p-spinner v-model="value3" :step="0.25" />
+
+            <h3>Disabled</h3>
+            <p-spinner v-model="value4" :disabled="true" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value1: null,
+            value2: null,
+            value3: null,
+            value4: null
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>