diff --git a/README b/README deleted file mode 100644 index 5b8f3e68..00000000 --- a/README +++ /dev/null @@ -1,91 +0,0 @@ -# vue-ellipse-progress - -[![Known Vulnerabilities](https://snyk.io/test/github/setaman/vue-ellipse-progress/badge.svg?targetFile=package.json)](https://snyk.io/test/github/setaman/vue-ellipse-progress?targetFile=package.json) -[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) -[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](#vue-ellipse-progress) -[![Build Status](https://travis-ci.org/setaman/vue-ellipse-progress.svg?branch=master)](https://travis-ci.org/setaman/vue-ellipse-progress) - -[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com) -[![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)](https://forthebadge.com) -[![forthebadge](https://forthebadge.com/images/badges/check-it-out.svg)](https://forthebadge.com) - -A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose -of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in -a simple to use component with friendly interface. - -With the available options you can create simple circles very quickly. But playing with the combinations of props and -with a bit of imagination you can create really exciting things. - -:grey_exclamation: Take a look at some interesting examples on the [Demo page](https://vue-ellipse-progress-demo.netlify.com) :grey_exclamation: - -## Installation -Use your package manager or CDN to install and initialize the component. - -### NPM -Install the library via npm: -``` -npm i vue-ellipse-progress -``` -The component is provided as a Vue.js plugin. So just initialize it in your ``main.js``: -```js -import VueEllipseProgress from 'vue-ellipse-progress'; - -Vue.use(VueEllipseProgress); - -// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like -``` - -### CDN -Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified -component from [JSDelivr](https://www.jsdelivr.com/package/npm/vue-ellipse-progress). -Just add the following line to your HTML and start using the component, nothing more is required: - -```html - -``` - -## Usage -After you have initialized the component, use it everywhere you want in your application: -```html - - - /200 -

GOOD JOB

- -
-``` - -## Options -You are ready to go with just following line: -```html - -``` -The **[`progress`](#progress)** is the only required property. However, in order to created unique circles -that match your design needs, you can use all the properties explained in the documentation on github. - -:heavy_exclamation_mark: -# [PLEASE READ THE DOCUMENTATION ON GITHUB](https://github.com/setaman/vue-ellipse-progress) diff --git a/README.md b/README.md index b89800e3..fc0c7b20 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,21 @@ Vue.use(VueEllipseProgress); // Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like ``` +Usage direct as component: +```vue + + +``` + ### CDN Use this option where you have a global Vue.js instance available. You can customize and get the bundled and minified component from [JSDelivr](https://www.jsdelivr.com/package/npm/vue-ellipse-progress). diff --git a/package-lock.json b/package-lock.json index 8c3010ba..c131519f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-ellipse-progress", - "version": "1.3.0", + "version": "1.3.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2493,16 +2493,6 @@ "integrity": "sha512-Jus9s4CDbqwocc5pOAnh8ShfrnMcPHuJYzVcSUU7lrh8Ni5HuIqX3oilL86p3dlTrk0LzHRCgA/GQ7uNCw6l2Q==", "dev": true }, - "@types/mini-css-extract-plugin": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@types/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.1.tgz", - "integrity": "sha512-+mN04Oszdz9tGjUP/c1ReVwJXxSniLd7lF++sv+8dkABxVNthg6uccei+4ssKxRHGoMmPxdn7uBdJWONSJGTGQ==", - "dev": true, - "optional": true, - "requires": { - "@types/webpack": "*" - } - }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -4493,9 +4483,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001132", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001132.tgz", - "integrity": "sha512-zk5FXbnsmHa0Ktc/NOZJRr+ilXva+2KFJuRiQfnjkxJfV/7DYP5C27lSQF++/veCUzVWE5xecZnSBJjf6fSwJA==", + "version": "1.0.30001300", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001300.tgz", + "integrity": "sha512-cVjiJHWGcNlJi8TZVKNMnvMid3Z3TTdDHmLDzlOdIiZq138Exvo0G+G0wTdVYolxKb4AYwC+38pxodiInVtJSA==", "dev": true }, "case-sensitive-paths-webpack-plugin": { @@ -14511,35 +14501,31 @@ } }, "vue-loader-v16": { - "version": "npm:vue-loader@16.0.0-beta.7", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-beta.7.tgz", - "integrity": "sha512-xQ8/GZmRPdQ3EinnE0IXwdVoDzh7Dowo0MowoyBuScEBXrRabw6At5/IdtD3waKklKW5PGokPsm8KRN6rvQ1cw==", + "version": "npm:vue-loader@16.8.3", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz", + "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==", "dev": true, "optional": true, "requires": { - "@types/mini-css-extract-plugin": "^0.9.1", - "chalk": "^3.0.0", + "chalk": "^4.1.0", "hash-sum": "^2.0.0", - "loader-utils": "^1.2.3", - "merge-source-map": "^1.1.0", - "source-map": "^0.6.1" + "loader-utils": "^2.0.0" }, "dependencies": { "ansi-styles": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz", - "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", "dev": true, "optional": true, "requires": { - "@types/color-name": "^1.1.1", "color-convert": "^2.0.1" } }, "chalk": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz", - "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", "dev": true, "optional": true, "requires": { @@ -14571,12 +14557,17 @@ "dev": true, "optional": true }, - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "loader-utils": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.2.tgz", + "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==", "dev": true, - "optional": true + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } }, "supports-color": { "version": "7.2.0", diff --git a/package.json b/package.json index 683d26b8..e24b7088 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-ellipse-progress", - "version": "1.3.0", + "version": "1.3.1", "private": false, "description": "A Vue.js component to create beautiful animated circular progress bars", "main": "./dist/vue-ellipse-progress.umd.min.js", diff --git a/src/main.js b/src/main.js index 4a9aa80b..84968cda 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,8 @@ import Vue from "vue"; -import VueEllipseProgress from "@/plugin"; +import vueEllipseProgress from "@/plugin"; import App from "./App.vue"; -Vue.use(VueEllipseProgress); +Vue.use(vueEllipseProgress); Vue.config.productionTip = false; diff --git a/src/plugin.js b/src/plugin.js index 0a521310..f9c39257 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -12,6 +12,5 @@ if (globalVue) { globalVue.use({ install }); } -export default { - install, -}; +export { VueEllipseProgress, install }; +export default install;