feature: v1.0.0

.browserslistrc

@@ -1,2 +1,3 @@
 > 1%
 last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -3,15 +3,27 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
-    'eslint:recommended'
+    '@vue/standard',
+    '@vue/typescript/recommended'
   ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
   rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
 }

README.CN.md

@@ -122,9 +122,9 @@ export default {
     },
     // 模拟请求后端接口, verified: 是否通过验证, duration: 延迟时间
     DoServiceVerify(verified, duration) {
-      return new Promise((resove) => {
+      return new Promise((resolve) => {
         setTimeout(() => {
-          resove(verified)
+          resolve(verified)
         }, duration)
       })
     }
@@ -145,15 +145,15 @@ export default {
 | useWeight | 是否以权重计算概率 | Boolean | false |
 | disabled | 是否禁用 (禁用后, 点击按钮不会旋转) | Boolean | false |
 | verify | 是否开启验证 | Boolean | false |
-| radius | 圆的半径 (type: canvas) | Number | 250 |
-| textRadius | 文本距圆心的距离 (type: canvas) | Number | 190 |
-| textLength | 奖品一行几个字符, 超出换行 (最多两行) | Number | 6 |
-| lineHeight | 文本行高 (type: canvas) | Number | 20 |
-| borderWidth | 圆的外边框 (type: canvas) | Number | 0 |
-| borderColor | 外边框的色值 (type: canvas) | String | transparent |
-| btnText | 按钮文本 (type: canvas) | String | GO |
-| btnWidth | 按钮的宽 (px) | Number | 140 |
-| fontSize | 奖品字号 (px) | Number | 34 |
+| canvas.radius | 圆的半径 (type: canvas) | Number | 250 |
+| canvas.textRadius | 文本距圆心的距离 (type: canvas) | Number | 190 |
+| canvas.textLength | 奖品一行几个字符, 超出换行 (最多两行) | Number | 6 |
+| canvas.lineHeight | 文本行高 (type: canvas) | Number | 20 |
+| canvas.borderWidth | 圆的外边框 (type: canvas) | Number | 0 |
+| canvas.borderColor | 外边框的色值 (type: canvas) | String | transparent |
+| canvas.btnText | 按钮文本 (type: canvas) | String | GO |
+| canvas.btnWidth | 按钮的宽 (px) | Number | 140 |
+| canvas.fontSize | 奖品字号 (px) | Number | 34 |
 | duration | 完成一次旋转的时间 (单位 ms) | Number | 6000 |
 | timingFun | 旋转过渡的 css 时间函数 | String | cubic-bezier(0.36, 0.95, 0.64, 1) |
 | angleBase | 旋转圈数 (angleBase * 360 为一次旋转的总角度, 为负数时可反向旋转) | Number | 10 |

README.md

@@ -44,8 +44,7 @@ https://xiaolin1995.github.io/vue-fortune-wheel/demo/
     <!-- type: canvas -->
     <FortuneWheel
       style="width: 500px"
-      borderColor="#584b43"
-      :borderWidth="6"
+      :canvas="canvasOptions"
       :prizes="prizes"
       :verify="cavansVerify"
       @rotateStart="onCanvasRotateStart"
@@ -66,6 +65,10 @@ export default {
   data() {
     return {
       cavansVerify: true, // Whether the turntable in canvas mode is enabled for verification
+      canvasOptions: {
+        borderWidth: 6,
+        borderColor: '#584b43'
+      },
       prizes: [
         {
           id: 1, //* The unique id of each prize, an integer greater than 0
@@ -122,9 +125,9 @@ export default {
     },
     // Simulate the request back-end interface, verified: whether to pass the verification, duration: delay time
     DoServiceVerify(verified, duration) {
-      return new Promise((resove) => {
+      return new Promise((resolve) => {
         setTimeout(() => {
-          resove(verified)
+          resolve(verified)
         }, duration)
       })
     }
@@ -145,15 +148,15 @@ export default {
 | useWeight | Whether to calculate probability by weight | Boolean | false |
 | disabled | Whether to disable (after disabled, click the button will not rotate) | Boolean | false |
 | verify | Whether to enable verification mode | Boolean | false |
-| radius | Radius of circle (type: canvas) | Number | 250 |
-| textRadius | The distance of the text from the center of the circle (type: canvas) | Number | 190 |
-| textLength | A few characters in one line of the prize, beyond the line break (maximum two lines)| Number | 6 |
-| lineHeight | Text line height (type: canvas) | Number | 20 |
-| borderWidth | Round outer border (type: canvas) | Number | 0 |
-| borderColor | Color value of the outer border (type: canvas) | String | transparent |
-| btnText | Button text (type: canvas) | String | GO |
-| btnWidth | Button width (px) | Number | 140 |
-| fontSize | Prize size (px) | Number | 34 |
+| canvas.radius | Radius of circle (type: canvas) | Number | 250 |
+| canvas.textRadius | The distance of the text from the center of the circle (type: canvas) | Number | 190 |
+| canvas.textLength | A few characters in one line of the prize, beyond the line break (maximum two lines)| Number | 6 |
+| canvas.lineHeight | Text line height (type: canvas) | Number | 20 |
+| canvas.borderWidth | Round outer border (type: canvas) | Number | 0 |
+| canvas.borderColor | Color value of the outer border (type: canvas) | String | transparent |
+| canvas.btnText | Button text (type: canvas) | String | GO |
+| canvas.btnWidth | Button width (px) | Number | 140 |
+| canvas.fontSize | Prize size (px) | Number | 34 |
 | duration | Time to complete one rotation (unit: ms) | Number | 6000 |
 | timingFun | Css time function of rotation transition | String | cubic-bezier(0.36, 0.95, 0.64, 1) |
 | angleBase | Number of rotations (angleBase * 360 is the total angle of one rotation, it can be reversed when it is a negative number) | Number | 10 |

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    '@vue/cli-plugin-babel/preset'
   ]
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-fortune-wheel",
-  "version": "0.3.4",
+  "version": "1.0.0",
   "author": "Xiaolin Zhu",
   "license": "MIT",
   "bugs": {
@@ -22,22 +22,40 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "build:lib": "vue-cli-service build --target lib --name vue-fortune-wheel --dest lib src/components/fortuneWheel/index.js"
+    "build:lib": "vue-cli-service build --target lib --name vue-fortune-wheel --dest lib src/components/FortuneWheel/install.js"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
-    "vue": "^2.6.10"
+    "core-js": "^3.6.5",
+    "lodash": "^4.17.20",
+    "normalize.css": "^8.0.1",
+    "vue": "^2.6.11"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.12.0",
-    "@vue/cli-plugin-eslint": "^3.12.0",
-    "@vue/cli-service": "^3.12.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "sass": "^1.19.0",
-    "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "@types/chai": "^4.2.11",
+    "@types/lodash": "^4.14.162",
+    "@types/mocha": "^5.2.4",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@vue/test-utils": "^1.0.3",
+    "chai": "^4.1.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "typescript": "~3.9.3",
+    "vue-template-compiler": "^2.6.11"
   }
 }

postcss.config.js

@@ -1,5 +1,14 @@
 module.exports = {
   plugins: {
-    autoprefixer: {}
+    autoprefixer: {
+      overrideBrowserslist: [
+        'Android 4.1',
+        'iOS 7.1',
+        'Chrome > 31',
+        'ff > 31',
+        'ie >= 8'
+        //'last 10 versions', // 所有主流浏览器最近10版本用
+      ]
+    }
   }
 }