adding watched startangle and readme default prop values

README.md

@@ -48,11 +48,13 @@ export default {
 
 ## Available Props
 
-| Prop | Type | Description | Required |
-| ---------- | ------- | ------------------------------------------------------------------------ | -------- |
-| options | Array | An array of values to appear in the slices of the wheel. | \* |
-| blockSpin | Boolean | Used to disable the spin button. | |
-| startAngle | Number | Set the degrees to which the wheel is initially rotated. (Defaults to 0) | |
+| Prop | Type | Description | Default Value | Required |
+| ------------ | ------- | -------------------------------------------------------- | ------------- | -------- |
+| options | Array | An array of values to appear in the slices of the wheel. | [] | \* |
+| blockSpin | Boolean | Used to disable the spin button. | false | |
+| startAngle | Number | Set the degrees to which the wheel is initially rotated. | 0 | |
+| canvasWidth | Number | Set the width of the canvas element. (Defaults to 500) | 500 | |
+| canvasHeight | Number | Set the height of the canvas element. (Defaults to 500) | 500 | |
 
 ## Available Events
 

dist/raffle-wheel.esm.js

@@ -5,6 +5,13 @@
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
 
 var script = {
  name: "RaffleWheel",
@@ -21,7 +28,18 @@ var script = {
  props: {
  options: Array,
  blockSpin: Boolean,
- startAngle: Number,
+ startAngle: {
+ type: Number,
+ default: 0,
+ },
+ canvasWidth: {
+ type: Number,
+ default: 500,
+ },
+ canvasHeight: {
+ type: Number,
+ default: 500,
+ },
  },
  methods: {
  byte2Hex: function byte2Hex(n) {
@@ -144,6 +162,11 @@ var script = {
  return b + c * (tc + -3 * ts + 3 * t);
  },
  },
+ watch: {
+ startAngle: function startAngle() {
+ this.start = this.startAngle;
+ },
+ },
  mounted: function mounted() {
  this.start = this.startAngle;
  this.arc = Math.PI / (this.options.length / 2);
@@ -237,11 +260,19 @@ var __vue_render__ = function() {
  return _c("div", { staticClass: "raffle-wheel" }, [
  _c(
  "button",
- { attrs: { disabled: _vm.blockSpin }, on: { click: _vm.spin } },
- [_vm._v("Spin")]
+ {
+ staticClass: "raffle-wheel__button",
+ attrs: { disabled: _vm.blockSpin },
+ on: { click: _vm.spin }
+ },
+ [_vm._v("\n Spin\n ")]
  ),
  _vm._v(" "),
- _c("canvas", { ref: "wheel", attrs: { width: "500", height: "500" } })
+ _c("canvas", {
+ ref: "wheel",
+ staticClass: "raffle-wheel__canvas",
+ attrs: { width: _vm.canvasWidth, height: _vm.canvasHeight }
+ })
  ])
 };
 var __vue_staticRenderFns__ = [];

dist/raffle-wheel.min.js

@@ -1,6 +1,13 @@
 var RaffleWheel = (function (exports) {
  'use strict';
 
+ //
+ //
+ //
+ //
+ //
+ //
+ //
  //
  //
  //
@@ -24,7 +31,18 @@ var RaffleWheel = (function (exports) {
  props: {
  options: Array,
  blockSpin: Boolean,
- startAngle: Number,
+ startAngle: {
+ type: Number,
+ default: 0,
+ },
+ canvasWidth: {
+ type: Number,
+ default: 500,
+ },
+ canvasHeight: {
+ type: Number,
+ default: 500,
+ },
  },
  methods: {
  byte2Hex: function byte2Hex(n) {
@@ -147,6 +165,11 @@ var RaffleWheel = (function (exports) {
  return b + c * (tc + -3 * ts + 3 * t);
  },
  },
+ watch: {
+ startAngle: function startAngle() {
+ this.start = this.startAngle;
+ },
+ },
  mounted: function mounted() {
  this.start = this.startAngle;
  this.arc = Math.PI / (this.options.length / 2);
@@ -240,11 +263,19 @@ var RaffleWheel = (function (exports) {
  return _c("div", { staticClass: "raffle-wheel" }, [
  _c(
  "button",
- { attrs: { disabled: _vm.blockSpin }, on: { click: _vm.spin } },
- [_vm._v("Spin")]
+ {
+ staticClass: "raffle-wheel__button",
+ attrs: { disabled: _vm.blockSpin },
+ on: { click: _vm.spin }
+ },
+ [_vm._v("\n Spin\n ")]
  ),
  _vm._v(" "),
- _c("canvas", { ref: "wheel", attrs: { width: "500", height: "500" } })
+ _c("canvas", {
+ ref: "wheel",
+ staticClass: "raffle-wheel__canvas",
+ attrs: { width: _vm.canvasWidth, height: _vm.canvasHeight }
+ })
  ])
  };
  var __vue_staticRenderFns__ = [];

dist/raffle-wheel.umd.js

@@ -11,6 +11,13 @@
  //
  //
  //
+ //
+ //
+ //
+ //
+ //
+ //
+ //
 
  var script = {
  name: "RaffleWheel",
@@ -27,7 +34,18 @@
  props: {
  options: Array,
  blockSpin: Boolean,
- startAngle: Number,
+ startAngle: {
+ type: Number,
+ default: 0,
+ },
+ canvasWidth: {
+ type: Number,
+ default: 500,
+ },
+ canvasHeight: {
+ type: Number,
+ default: 500,
+ },
  },
  methods: {
  byte2Hex: function byte2Hex(n) {
@@ -150,6 +168,11 @@
  return b + c * (tc + -3 * ts + 3 * t);
  },
  },
+ watch: {
+ startAngle: function startAngle() {
+ this.start = this.startAngle;
+ },
+ },
  mounted: function mounted() {
  this.start = this.startAngle;
  this.arc = Math.PI / (this.options.length / 2);
@@ -243,11 +266,19 @@
  return _c("div", { staticClass: "raffle-wheel" }, [
  _c(
  "button",
- { attrs: { disabled: _vm.blockSpin }, on: { click: _vm.spin } },
- [_vm._v("Spin")]
+ {
+ staticClass: "raffle-wheel__button",
+ attrs: { disabled: _vm.blockSpin },
+ on: { click: _vm.spin }
+ },
+ [_vm._v("\n Spin\n ")]
  ),
  _vm._v(" "),
- _c("canvas", { ref: "wheel", attrs: { width: "500", height: "500" } })
+ _c("canvas", {
+ ref: "wheel",
+ staticClass: "raffle-wheel__canvas",
+ attrs: { width: _vm.canvasWidth, height: _vm.canvasHeight }
+ })
  ])
  };
  var __vue_staticRenderFns__ = [];

package.json

@@ -36,5 +36,8 @@
  "roulette"
  ],
  "author": "James Macon https://github.com/jamacon36/",
- "license": "ISC"
+ "license": "ISC",
+ "dependencies": {
+ "core-js": "^3.9.0"
+ }
 }

src/Raffle-Wheel.vue

@@ -6,8 +6,8 @@
  <canvas
  class="raffle-wheel__canvas"
  ref="wheel"
- width="500"
- height="500"
+ :width="canvasWidth"
+ :height="canvasHeight"
  ></canvas>
  </div>
 </template>
@@ -32,6 +32,14 @@ export default {
  type: Number,
  default: 0,
  },
+ canvasWidth: {
+ type: Number,
+ default: 500,
+ },
+ canvasHeight: {
+ type: Number,
+ default: 500,
+ },
  },
  methods: {
  byte2Hex(n) {
@@ -154,6 +162,11 @@ export default {
  return b + c * (tc + -3 * ts + 3 * t);
  },
  },
+ watch: {
+ startAngle() {
+ this.start = this.startAngle;
+ },
+ },
  mounted() {
  this.start = this.startAngle;
  this.arc = Math.PI / (this.options.length / 2);