Skip to content

Commit cd49918

Browse files
KeiwenKeiwen
committed
initial commit: version 1.0
0 parents  commit cd49918

File tree

15 files changed

+8892
-0
lines changed

15 files changed

+8892
-0
lines changed

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.DS_Store
2+
node_modules/
3+
npm-debug.log*
4+
yarn-debug.log*
5+
yarn-error.log*
6+
7+
# Editor directories and files
8+
.idea
9+
*.suo
10+
*.ntvs*
11+
*.njsproj
12+
*.sln

‎README.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# vue-integer-plusminus
2+
[![npm](https://img.shields.io/npm/v/vue-integer-plusminus.svg)](https://www.npmjs.com/package/vue-integer-plusminus)
3+
[![npm](https://img.shields.io/npm/dt/vue-integer-plusminus.svg)](https://www.npmjs.com/package/vue-integer-plusminus)
4+
5+
Integer input with increment and decrement buttons
6+
7+
[Live demo here](https://keiwen.github.io/vue-integer-plusminus/)
8+
9+
## Global use
10+
- npm install
11+
```
12+
npm install --save vue-integer-plusminus
13+
```
14+
- import components
15+
```
16+
import { IntegerPlusminus } from 'vue-integer-plusminus'
17+
```
18+
- declare use or imported components in your vue script
19+
```
20+
export default {
21+
components: { IntegerPlusminus },
22+
methods: ...
23+
}
24+
```
25+
- Use components as described below
26+
27+
## Components
28+
### Integer plus/minus
29+
```
30+
<integer-plusminus></integer-plusminus>
31+
```
32+
```
33+
<integer-plusminus :min="ipm_min"
34+
:max="ipm_max"
35+
:step="ipm_step"
36+
:vertical="ipm_vertical"
37+
v-model="ipm_value">
38+
<p>Your value is</p>
39+
{{ ipm_value }}
40+
41+
<template slot="decrement">{{ ipm_slot_decr }}</template>
42+
43+
<template slot="increment">{{ ipm_slot_incr }}</template>
44+
</integer-plusminus>
45+
```
46+
47+
48+
| Prop | Type | Note
49+
| :--- | :--- | ---: |
50+
| `min` | `number` | minimum possible value. Cannot decrement lower. Default is 0 |
51+
| `max` | `number` | maximum possible value. Cannot increment over. Default is undefined |
52+
| `step` | `number` | Incremental step. Must be greater than 0. Default is 1 |
53+
| `vertical` | `Boolean` | Use vertical layout. Default is false |
54+
55+
This component provide 3 slots
56+
- Default slot is the middle part when value is usually displayed
57+
- 'increment' slot is used for increment button.
58+
Usually on right for horizontal layout,
59+
or top for vertical layout.
60+
- 'decrement' slot is used for decrement button.
61+
Usually on left for horizontal layout,
62+
or bottom for vertical layout.
63+
64+
Style could be overwritten using `!important` css keyword
65+
```
66+
.int-input-increment {
67+
background: #5CB85C !important;
68+
}
69+
```
70+
71+
## Contribution
72+
- Fork the repository
73+
- Run `npm install`
74+
- You can run `npm run dev`, site is at http://localhost:8081.
75+
- Do your stuff
76+
- When you're done, run `npm run build` command and commit your work for a pull request.

‎conf/webpack.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
var path = require('path')
2+
var webpack = require('webpack')
3+
4+
// Determine which env to use
5+
// by having it overriden at runtime using `cross-env NODE_ENV=...`
6+
// Possible envs: dev, production
7+
var node_env
8+
9+
if (process.env.NODE_ENV) {
10+
node_env = process.env.NODE_ENV.toLowerCase()
11+
} else {
12+
node_env = 'production'
13+
}
14+
15+
console.log('ENV', node_env)
16+
17+
module.exports = {
18+
resolve: {
19+
alias: {
20+
'vue$': 'vue/dist/vue.js',
21+
},
22+
23+
extensions: ['.js', '.vue']
24+
},
25+
26+
module: {
27+
rules: [
28+
{
29+
test: /\.vue$/,
30+
use: 'vue-loader'
31+
},
32+
{
33+
test: /\.css$/,
34+
use: [
35+
'style-loader',
36+
'css-loader'
37+
]
38+
},
39+
{
40+
test: /\.scss$/,
41+
use: [
42+
'style-loader',
43+
'css-loader',
44+
'sass-loader'
45+
]
46+
},
47+
{
48+
test: /\.js$/,
49+
exclude: /node_modules/,
50+
use: {
51+
loader: 'babel-loader',
52+
options: {
53+
presets: [['env', {
54+
targets: {
55+
browsers: ['last 2 versions', '>= 3%', 'not ie <= 10'],
56+
uglify: true
57+
},
58+
modules: false,
59+
forceAllTransforms: node_env === 'production'
60+
}]]
61+
}
62+
}
63+
},
64+
{
65+
test: /\.svg$/,
66+
use: 'svg-inline-loader?classPrefix'
67+
},
68+
{
69+
test: /\.(png|jpg|gif|svg)$/,
70+
use: [
71+
{
72+
loader: 'file-loader',
73+
query: {
74+
name: '[name].[ext]?[hash]'
75+
}
76+
}
77+
]
78+
}
79+
],
80+
},
81+
82+
plugins: [
83+
new webpack.DefinePlugin({
84+
'process.env': {
85+
NODE_ENV: '"' + node_env + '"'
86+
}
87+
})
88+
],
89+
90+
devtool: '#cheap-source-map',
91+
92+
devServer: {
93+
historyApiFallback: true,
94+
noInfo: true,
95+
port: 8081
96+
}
97+
}
98+
99+
if (node_env == 'production') {
100+
module.exports.devtool = '#source-map'
101+
}

‎dist/vue-integer-plusminus.js

Lines changed: 131 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/dist/build.js

Lines changed: 201 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Vue integer plus/minus demo</title>
6+
7+
</head>
8+
9+
<body>
10+
<div id="app"><main-view></main-view></div>
11+
12+
<script src="dist/build.js"></script>
13+
</body>
14+
</html>

‎docs/main.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from 'vue'
2+
3+
import MainView from './views/Main'
4+
5+
new Vue({
6+
components: {
7+
MainView
8+
},
9+
10+
mounted () {
11+
this.$el.className = 'loaded'
12+
}
13+
}).$mount('#app')

‎docs/views/Main.vue

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<div class="container">
3+
4+
<fieldset>
5+
<h1>Integer plus/minus</h1>
6+
7+
<div class="playWith">
8+
<h2>Play with it</h2>
9+
10+
<integer-plusminus :min="parseInt(ipm_min)"
11+
:max="parseInt(ipm_max)"
12+
:step="parseInt(ipm_step)"
13+
:vertical="ipm_vertical"
14+
v-model="ipm_value">
15+
<p v-if="ipm_slot_header">{{ ipm_slot_header }}</p>
16+
{{ ipm_value }}
17+
<template slot="decrement">
18+
{{ ipm_slot_decr }}
19+
</template>
20+
<template slot="increment">
21+
{{ ipm_slot_incr }}
22+
</template>
23+
</integer-plusminus>
24+
25+
<hr/>
26+
27+
<label for="ipm_value">Value:</label>
28+
<input type="number" v-model="ipm_value" id="ipm_value"/>
29+
30+
<label for="ipm_vertical">Vertical:</label>
31+
<input type="checkbox" v-model="ipm_vertical" id="ipm_vertical"/>
32+
33+
<br/><br/>
34+
35+
<label for="ipm_min">Min:</label>
36+
<input type="number" v-model="ipm_min" id="ipm_min"/>
37+
38+
<label for="ipm_max">Max:</label>
39+
<input type="number" v-model="ipm_max" id="ipm_max"/>
40+
41+
<label for="ipm_step">Step:</label>
42+
<input type="number" v-model="ipm_step" id="ipm_step"/>
43+
44+
<br/><br/>
45+
46+
<label for="ipm_slot_header">Additional text:</label>
47+
<input type="text" v-model="ipm_slot_header" id="ipm_slot_header"/>
48+
49+
<br/><br/>
50+
51+
<label for="ipm_slot_decr">Decrement button:</label>
52+
<input type="text" v-model="ipm_slot_decr" id="ipm_slot_decr"/>
53+
54+
<label for="ipm_slot_incr">Increment button:</label>
55+
<input type="text" v-model="ipm_slot_incr" id="ipm_slot_incr"/>
56+
57+
58+
</div>
59+
60+
<div class="gallery">
61+
<h2>Gallery</h2>
62+
63+
<integer-plusminus :min="1" :max="3" :value="2"></integer-plusminus>
64+
<br/>
65+
<integer-plusminus :min="0" :max="100" :step="10" v-model="demo_slot_value">
66+
<p>You have {{ demo_slot_value }} points</p>
67+
<i>Games worth 10 points</i>
68+
<template slot="increment">Win</template>
69+
<template slot="decrement">Loss</template>
70+
</integer-plusminus>
71+
<br/>
72+
<integer-plusminus class="demo-vertical" :min="0" :max="9" :vertical="true" :value="5"></integer-plusminus>
73+
74+
75+
</div>
76+
77+
</fieldset>
78+
79+
</div>
80+
</template>
81+
82+
83+
<script>
84+
import { IntegerPlusminus } from '../../src/main'
85+
86+
export default {
87+
components: { IntegerPlusminus },
88+
data () {
89+
return {
90+
ipm_value: 5,
91+
ipm_min: 0,
92+
ipm_max: 9,
93+
ipm_step: 1,
94+
ipm_slot_header: 'Your value is',
95+
ipm_slot_decr: '-1',
96+
ipm_slot_incr: '+1',
97+
ipm_vertical: false,
98+
demo_slot_value: 50
99+
}
100+
}
101+
}
102+
</script>
103+
104+
105+
<style lang="scss">
106+
h1 {
107+
margin-top: 0;
108+
margin-bottom: 0;
109+
}
110+
111+
.container {
112+
margin-top: 20px;
113+
}
114+
115+
.playWith {
116+
width: 60%;
117+
float: left;
118+
}
119+
120+
.gallery {
121+
float: right;
122+
width: 30%;
123+
}
124+
125+
.int-pm {
126+
&.demo-vertical {
127+
font-size: 1.5em;
128+
.int-pm-value {
129+
background-color: black;
130+
color: white;
131+
font-size: 2em;
132+
padding: 0 30px !important;
133+
border: 1px solid black !important;
134+
}
135+
.int-pm-btn {
136+
border: none !important;
137+
color: white;
138+
}
139+
.int-pm-increment {
140+
background: #5cb85c !important;
141+
}
142+
.int-pm-decrement {
143+
background: #d9534f !important;
144+
}
145+
}
146+
}
147+
148+
</style>

‎docs/webpack.config.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var path = require('path')
2+
var merge = require('webpack-merge')
3+
4+
module.exports = merge.smart(require(path.resolve(__dirname, '../conf/webpack.js')), {
5+
entry: path.resolve(__dirname, './main.js'),
6+
7+
output: {
8+
path: path.resolve(__dirname, './dist'),
9+
publicPath: 'dist',
10+
filename: 'build.js'
11+
},
12+
13+
devServer: {
14+
contentBase: path.resolve(__dirname)
15+
},
16+
17+
devtool: '#eval-source-map'
18+
})

0 commit comments

Comments
 (0)