Skip to content

Commit 336b3ee

Browse files
amroessamamroessam
committed
Added Browser support
1 parent fdcce82 commit 336b3ee

File tree

5 files changed

+185
-128
lines changed

5 files changed

+185
-128
lines changed

‎README.md

+52-22
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,28 @@
33
A Vue Wrapper to [GaugeJS](https://github.com/bernii/gauge.js/)
44

55
### Play
6-
[Live Demo](https://jz3qoxny63.codesandbox.io/)
6+
7+
[Live Demo](https://jz3qoxny63.codesandbox.io/)
78

89
### Installing
910

10-
```
11+
```shell
1112
npm i vgauge --save
1213
```
1314

15+
or
16+
17+
```html
18+
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
19+
<script src="https://cdn.jsdelivr.net/npm/vgauge/dist/VGauge.min.js"></script>
20+
```
21+
1422
### Usage
23+
24+
## By Importing
25+
1526
```js
16-
import VGauge from 'vgauge'
27+
import VGauge from "vgauge";
1728

1829
export default {
1930
components: {
@@ -22,41 +33,60 @@ export default {
2233
data() {
2334
return {
2435
value: 35
25-
}
36+
};
2637
}
27-
}
38+
};
39+
```
40+
41+
```html
42+
<v-gauge :value="value" />
2843
```
2944

45+
## By Including
46+
3047
```html
31-
<v-gauge :value="value"/>
48+
<body>
49+
<div id="app">
50+
<v-gauge :value="value">
51+
</div>
52+
<script>
53+
var app = new Vue({
54+
el: '#app',
55+
data:{
56+
value:35
57+
}
58+
})
59+
</script>
60+
</body>
3261
```
3362

3463
## Props
64+
3565
You can use the following props
3666

37-
| Name | Description | Type | Default |
38-
| ------------- |---------------| -----:| -----:|
39-
| options | GaugeJS render options, check gaugejs [API](http://bernii.github.io/gauge.js/) | Object | Basic gaugejs Object |
40-
| height | height of the gauge | string | 200px |
41-
| unit | unit to show after value | string | '' |
42-
| initialValue | Initial value to display on the Gauge | Number | 0 |
43-
| value | Value to display/watch | Number | 50 |
44-
| minValue | Min value for the gauge to display | Number | 0 |
45-
| maxValue | Max value for the gauge to display | Number | 100 |
46-
| decimalPlace | Show decimal place values to which extent | Number | 0 |
47-
| top | To have the gauge value on top of the gauge | Boolean | false |
48-
| gaugeValueClass | Class to apply to gauge value (Must use [/deep/](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) in css selector)| String | * |
49-
| animationSpeed | Animation speed for gauge | Number | 10 |
67+
| Name | Description | Type | Default |
68+
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------: | -------------------: |
69+
| options | GaugeJS render options, check gaugejs [API](http://bernii.github.io/gauge.js/) | Object | Basic gaugejs Object |
70+
| height | height of the gauge | string | 200px |
71+
| unit | unit to show after value | string | '' |
72+
| initialValue | Initial value to display on the Gauge | Number | 0 |
73+
| value | Value to display/watch | Number | 50 |
74+
| minValue | Min value for the gauge to display | Number | 0 |
75+
| maxValue | Max value for the gauge to display | Number | 100 |
76+
| decimalPlace | Show decimal place values to which extent | Number | 0 |
77+
| top | To have the gauge value on top of the gauge | Boolean | false |
78+
| gaugeValueClass | Class to apply to gauge value (Must use [/deep/](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) in css selector) | String | \* |
79+
| animationSpeed | Animation speed for gauge | Number | 10 |
5080

5181
## Authors
5282

53-
* **Amr Essam** - [Github](https://github.com/amroessam)
83+
- **Amr Essam** - [Github](https://github.com/amroessam)
5484

5585
## License
5686

5787
This project is licensed under the MIT License
5888

5989
## Acknowledgments
6090

61-
* [Vue](https://github.com/vuejs/vue)
62-
* [GaugeJS](https://github.com/bernii/gauge.js/)
91+
- [Vue](https://github.com/vuejs/vue)
92+
- [GaugeJS](https://github.com/bernii/gauge.js/)

‎build/rollup.config.js

+20-15
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,42 @@
11
// rollup.config.js
2-
import vue from 'rollup-plugin-vue';
3-
import buble from 'rollup-plugin-buble';
4-
import commonjs from 'rollup-plugin-commonjs';
5-
import replace from 'rollup-plugin-replace';
6-
import uglify from 'rollup-plugin-uglify-es';
7-
import minimist from 'minimist';
2+
import vue from "rollup-plugin-vue";
3+
import buble from "rollup-plugin-buble";
4+
import resolve from "rollup-plugin-node-resolve";
5+
import commonjs from "rollup-plugin-commonjs";
6+
import replace from "rollup-plugin-replace";
7+
import uglify from "rollup-plugin-uglify-es";
8+
import minimist from "minimist";
9+
import pkg from "../package.json";
810

911
const argv = minimist(process.argv.slice(2));
12+
const external = Object.keys(pkg.dependencies);
1013

1114
const config = {
12-
input: 'src/entry.js',
15+
input: "src/entry.js",
1316
output: {
14-
name: 'VGauge',
15-
exports: 'named',
17+
name: "VGauge",
18+
exports: "named"
1619
},
1720
plugins: [
21+
external,
1822
replace({
19-
'process.env.NODE_ENV': JSON.stringify('production'),
23+
"process.env.NODE_ENV": JSON.stringify("production")
2024
}),
25+
resolve(),
2126
commonjs(),
2227
vue({
2328
css: true,
2429
compileTemplate: true,
2530
template: {
26-
isProduction: true,
27-
},
31+
isProduction: true
32+
}
2833
}),
29-
buble(),
30-
],
34+
buble()
35+
]
3136
};
3237

3338
// Only minify browser (iife) version
34-
if (argv.format === 'iife') {
39+
if (argv.format === "iife") {
3540
config.plugins.push(uglify());
3641
}
3742

0 commit comments

Comments
 (0)