Skip to content

Commit c17e02e

Browse files
JayeshLabJayeshLab
committed
.Added Styling Component section in Docs
.two more test cases
1 parent 80fe362 commit c17e02e

File tree

7 files changed

+112
-11
lines changed

7 files changed

+112
-11
lines changed

‎README.md

+5-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Number input component based on Vue that is a replacement of native input number
1010

1111
![vue-numeric-input](https://user-images.githubusercontent.com/36194663/44717643-33e4ea00-aadb-11e8-82bf-e1fdeeea3bb5.gif)
1212

13-
[Live Demo](https://jayeshlab.github.io/vue-numeric-input/)
13+
[Live Demo & Doc](https://jayeshlab.github.io/vue-numeric-input/)
1414

1515
### Installation
1616

@@ -20,17 +20,16 @@ Install via NPM
2020

2121
Install via CDN
2222

23-
```
23+
```html
2424
<script src="https://unpkg.com/vue"></script>
2525
<script src="https://unpkg.com/vue-numeric-input"></script>
26-
2726
```
2827

2928
#### Global
3029

3130
Register VueNumericInput globally:
3231

33-
```
32+
```javascript
3433
import Vue from 'Vue';
3534
import VueNumericInput from 'vue-numeric-input';
3635

@@ -41,7 +40,7 @@ Vue.use(VueNumericInput)
4140

4241
Include the VueNumericInput directly into your component using import:
4342

44-
```
43+
```javascript
4544
import VueNumericInput from 'vue-numeric-input'
4645

4746
export default {
@@ -54,7 +53,7 @@ export default {
5453

5554
#### Basic usage
5655

57-
```
56+
```html
5857
<template>
5958
<div>
6059
<vue-numeric-input v-model="value" :min="1" :max="10" :step="2"></vue-numeric-input>

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
max-width: 980px;
55
margin: 0 auto;
66
padding: 45px;
7-
}</style></head><body><div id=app></div><script type=text/javascript src=static/js/manifest.js></script><script type=text/javascript src=static/js/vendor.js></script><script type=text/javascript src=static/js/app.js></script></body></html>
7+
}</style></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.js></script><script type=text/javascript src=/static/js/vendor.js></script><script type=text/javascript src=/static/js/app.js></script></body></html>

‎docs/static/js/app.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/app.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/static/js/manifest.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

+74
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,51 @@
9898
<p><code>&lt;vue-numeric-input :value="4.367" :step="1.2" :precision="2"&gt;&lt;/vue-numeric-input&gt;</code></p>
9999
<vue-numeric-input :value="4.367" :step="1.25" :precision="2"></vue-numeric-input>
100100
</blockquote>
101+
<h3 id="styling" data-source-line="75"><a class="anchor" href="#with-float-values"><span class="octicon octicon-link"></span></a>Styling Component</h3>
102+
<p data-source-line="76">You can override the styling of the v-numeric-input component by applying !important rule to css properties</p>
103+
<vue-numeric-input id="style1" :value="5" :step="1" :min="0" :max="10" size="2.2em" align="center" controls-type="updown"></vue-numeric-input>
104+
<br>
105+
<br>
106+
<blockquote data-source-line="78">
107+
<pre><code>&lt;vue-numeric-input
108+
id="style1"
109+
:value="5"
110+
:min="0"
111+
:max="10"
112+
size="60px"
113+
controls-type="updown"&gt;
114+
&lt;/vue-numeric-input&gt;
115+
&lt;style&gt;
116+
#style1.vue-numeric-input.updown {
117+
padding-top: 1.5rem;
118+
padding-bottom: 1.5rem;
119+
}
120+
#style1.vue-numeric-input.updown .numeric-input {
121+
padding-right: 5px !important;
122+
padding-left: 5px !important;
123+
}
124+
#style1.vue-numeric-input.updown .btn {
125+
background: #6fbbff !important;
126+
}
127+
#style1.vue-numeric-input.updown .btn-increment {
128+
height: 1.5rem;
129+
width: 100%;
130+
right: 0 !important;
131+
left:0 !important;
132+
top: 0 !important;
133+
bottom: auto !important;
134+
}
135+
#style1.vue-numeric-input.updown .btn-decrement {
136+
height: 1.5rem;
137+
width: 100%;
138+
left: 0 !important;
139+
right: 0 !important;
140+
top: auto !important;
141+
bottom: 0 !important;
142+
}
143+
&lt;/style&gt;
144+
</code></pre>
145+
</blockquote>
101146
<hr>
102147
<h3><a id="PROPS_69"></a>PROPS:</h3>
103148
<table class="table table-striped table-bordered">
@@ -286,3 +331,32 @@ export default {
286331
}
287332
}
288333
</script>
334+
<style>
335+
#style1.vue-numeric-input.updown {
336+
padding-top: 1.5rem;
337+
padding-bottom: 1.5rem;
338+
}
339+
#style1.vue-numeric-input.updown .numeric-input {
340+
padding-right: 5px !important;
341+
padding-left: 5px !important;
342+
}
343+
#style1.vue-numeric-input.updown .btn {
344+
background: #6fbbff;
345+
}
346+
#style1.vue-numeric-input.updown .btn-increment {
347+
height: 1.5rem;
348+
width: 100%;
349+
right: 0;
350+
left:0;
351+
top: 0;
352+
bottom: auto;
353+
}
354+
#style1.vue-numeric-input.updown .btn-decrement {
355+
height: 1.5rem;
356+
width: 100%;
357+
left: 0 !important;
358+
right: 0 !important;
359+
top: auto !important;
360+
bottom: 0 !important;
361+
}
362+
</style>

‎test/unit/specs/vue-numeric-input.spec.js

+29-1
Original file line numberDiff line numberDiff line change
@@ -239,6 +239,20 @@ describe('VueNumericInput.vue', () => {
239239
}).$mount()
240240
expect(vm.$el.style.width).to.be.equal('200px')
241241
})
242+
it('test stop mouse event when called before time interval', () => {
243+
const vm = new Vue({
244+
template: '<vue-numeric-input ref="numeric" v-model="value"></vue-numeric-input>',
245+
data () {
246+
return {
247+
value: 10
248+
}
249+
}
250+
}).$mount()
251+
sinon.spy(vm.$refs.numeric, 'increment')
252+
vm.$refs.numeric.start(vm.$refs.numeric.increment)
253+
vm.$refs.numeric.stop(new Event('mouseup'))
254+
expect(vm.$refs.numeric.increment).to.have.been.called.once
255+
})
242256
it('test focus method', () => {
243257
const vm = new Vue({
244258
template: '<vue-numeric-input ref="numeric" v-model="value"></vue-numeric-input>',
@@ -251,7 +265,21 @@ describe('VueNumericInput.vue', () => {
251265
let input = vm.$el.querySelector('input')
252266
sinon.spy(input, 'focus')
253267
vm.$refs.numeric.focus()
254-
expect(input.focus).to.have.been.called
268+
expect(input.focus).to.have.been.called.once
269+
})
270+
it('test focus method on disabled', () => {
271+
const vm = new Vue({
272+
template: '<vue-numeric-input ref="numeric" v-model="value" disabled></vue-numeric-input>',
273+
data () {
274+
return {
275+
value: 10
276+
}
277+
}
278+
}).$mount()
279+
let input = vm.$el.querySelector('input')
280+
sinon.spy(input, 'focus')
281+
vm.$refs.numeric.focus()
282+
expect(input.focus).to.not.have.been.called.once
255283
})
256284
it('test blur method', () => {
257285
const vm = new Vue({

0 commit comments

Comments
 (0)