vue-ellipse-progress - npm Package Compare versions

Comparing version 2.0.0-beta.1 to 2.0.0

package.json

 {
   "name": "vue-ellipse-progress",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "private": false,
@@ -12,3 +12,4 @@ "description": "A Vue.js component to create beautiful animated circle progress bars",
     "test": "vue-cli-service test:unit --colors",
-    "publish-beta": "npm run lint && npm run test && npm run build && npm publish --tag beta"
+    "publish-beta": "npm run lint && npm run test && npm run build && npm publish --tag beta",
+    "changelog": "auto-changelog --template changelog-template.hbs"
   },
@@ -24,2 +25,3 @@ "author": {
     "vue2",
+    "vue3",
     "circle",
@@ -39,23 +41,33 @@ "half circle",
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.10",
-    "@vue/cli-plugin-eslint": "^4.5.10",
-    "@vue/cli-plugin-unit-mocha": "^4.5.10",
-    "@vue/cli-service": "^4.5.10",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@vue/cli-plugin-babel": "^4.5.13",
+    "@vue/cli-plugin-eslint": "^4.5.13",
+    "@vue/cli-plugin-unit-mocha": "^4.5.13",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.11",
     "@vue/eslint-config-airbnb": "^5.3.0",
-    "@vue/test-utils": "^2.0.0-rc.0",
+    "@vue/test-utils": "^2.0.0-rc.6",
+    "auto-changelog": "^2.2.1",
     "babel-eslint": "^10.1.0",
-    "chai": "^4.2.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.4.1",
+    "chai": "^4.3.4",
+    "commitlint": "^12.1.4",
+    "eslint": "^7.26.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-vue": "^7.9.0",
     "node-sass": "^5.0.0",
-    "prettier": "^2.2.1",
-    "sass-loader": "^10.1.0",
-    "vue": "^3.0.5"
+    "prettier": "^2.3.0",
+    "sass-loader": "^10.1.1",
+    "vue": "^3.0.6"
   },
   "files": [
     "dist"
-  ]
+  ],
+  "auto-changelog": {
+    "unreleased": true,
+    "commitLimit": false,
+    "breakingPattern": ".!:.",
+    "startingVersion": "v2.0.0-alpha.4",
+    "package": false
+  }
 }

README.md

 # vue-ellipse-progress
-![npm (tag)](https://img.shields.io/npm/v/vue-ellipse-progress/beta?color=yellow&label=NPM&style=for-the-badge)
-![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/setaman/vue-ellipse-progress?style=for-the-badge)
+[![npm (tag)](https://img.shields.io/npm/v/vue-ellipse-progress/beta?color=yellow&label=NPM&style=for-the-badge)](https://www.npmjs.com/package/vue-ellipse-progress)
+[![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/setaman/vue-ellipse-progress?style=for-the-badge)](https://snyk.io/test/npm/vue-ellipse-progress/1.3.0)
 ![GitHub](https://img.shields.io/github/license/setaman/vue-ellipse-progress?style=for-the-badge)
-![Travis (.org)](https://img.shields.io/travis/setaman/vue-ellipse-progress?style=for-the-badge)
+[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/setaman/vue-ellipse-progress/build?style=for-the-badge)](https://github.com/setaman/vue-ellipse-progress/actions/workflows/build.yml)
 
@@ -35,3 +35,3 @@ A dependency-free simple, flexible and smooth Vue.js plugin to create beautiful circle progress bars, implemented with SVG.
 ### NPM
-Install the library via npm:
+Installation via npm:
 ```
@@ -102,3 +102,3 @@ npm i vue-ellipse-progress
   
-  <span slot="legend-value">/200</span>
+  <span slot="legend">/200</span>
   <p slot="legend-caption">GOOD JOB</p>
@@ -109,3 +109,3 @@
 ## Options
-The **[`progress`](#progress)** is the only required property and you are ready to go with just following line:
+The **[`progress`](#progress)** is the only required property, and you are ready to go with just following line:
 ```html
@@ -131,3 +131,3 @@ <ve-progress :progress="progress"/>
 | **[`hideLegend`](#hideLegend)** | Boolean | |  true |
-| **[`legend`](#legend)** | Number \| String | any number, accepts a `.` or `","` as decimals delimiter |   |
+| **[`legend`](#legend)** | Number \| String | any number, accepts a `.` or `","` as decimals delimiter and simple formatting |   |
 | **[`legendFormatter`](#legendformatter)** | Function | Function that returns formatted value  |   |
@@ -146,3 +146,3 @@ | **[`animation`](#animation)** | String | "default \| rs \| loop \| reverse \| bounce [duration delay]" | "default 1000 400"|
 | **[`gap`](#gap)** | Number | any Number that defines the gap between multiple circles in pixel | 0 |
-| **[`dot`](#dot)** | String \| Number \| Object | Accepts size, color and other styles as Number, descriptive string `"10% red"` or object `{size : 10, backgroundColor: "red", widht: "2px", borderRadius: "5px" ...}`  | 0 |
+| **[`dot`](#dot)** | String \| Number \| Object | Accepts size, color and other styles as Number, descriptive string `"size [color]"` or object `{size [, backgroundColor, widht, borderRadius ...]}`  | 0 |
 | **[`reverse`](#reverse)** | Boolean | | false |
@@ -160,5 +160,4 @@ | **[`data`](#data)** | Array | defines multiple circles, takes as values Objects with almost all props defined above | |
 Is any Number in range \[-100, 100] (including **decimals**). This property defines the filled area from progress circle line in 
-percent. `progress` is animated and counts up or down on any value changes with duration defined in 
-**[`animation.duration`](#animation)** property. The progress is shown by default as the **legend** in the middle of the circle.
-Set a negative value to fill the progress counterclockwise. Alternative you can use [`reverse`](#reverse).
+percent and is shown by default as the **legend** in the middle of the circle. `progress` is animated and counts up or down on any value changes with duration defined in 
+**[`animation.duration`](#animation)** property. Set a negative value to fill the progress line counterclockwise. Alternatively [`reverse`](#reverse) can be used.
 
@@ -174,7 +173,6 @@ ###### Example: 📜
 
->❗ The `progress` is always used to fill the progress circle line. So you cannot customize this 
->value, it should be always in the range [-100, 100] and not valid Numbers lead to **[`noData`](#noData)** state. 
+>❗ The `progress` is always used to fill the progress circle line, it should be always in the range [-100, 100] and not valid Numbers lead to **[`noData`](#noData)** state. 
 >For customization purpose please use **[`legend`](#legend)** and take a look at **[`legendFormatter`](#legendformatter)**. 
 
->❗ If **[`legend`](#legend)** is defined the progress will **NOT** be displayed as circle legend.
+>❗ If **[`legend`](#legend)** is defined the `progress` will **not** be displayed as circle legend.
 
@@ -199,3 +197,3 @@ <br>
 
-Is a string value from `round | square | butt`. Defines the progress circle line cap. Internally is used the CSS property `stroke-linecap`.
+Is a String value from `round | square | butt`. Defines the progress circle line cap. Internally the CSS property `stroke-linecap` is used.
 
@@ -214,4 +212,3 @@ ###### Example: 📜
 
-Is a number >=0 or a string to define a percent value. It defines the progress line thickness. 
-If you set the value in percent as string, the thickness will be calculated in relation to **[`size`](#size)**.
+Is a Number >=0 or a String that defines the progress line thickness. If you set the value in percent as String, the thickness will be calculated in relation to **[`size`](#size)**.
 
@@ -231,4 +228,3 @@ ###### Example: 📜
 
-Is a number >=0 or a string to define a percent value.
-It defines the empty circle line thickness. If you define the value in percent, thickness will be calculated in relation to **[`size`](#size)**.
+Is a Number >=0 or a String. It defines the empty circle line thickness. If you set the value in percent, thickness will be calculated in relation to **[`size`](#size)**.
 
@@ -241,3 +237,3 @@ <br>
 
-Descriptive string in form `"mode [offset]"` that defines how the progress line is aligned in relation to empty line. 
+Descriptive string in form `"mode [offset]"` that defines, how the progress line is aligned in relation to empty line. 
 The first value ist the `mode` and the optional second is the `offset`. You can understand the modes as the presets that
@@ -247,3 +243,3 @@ help you to align lines as you want to.
 - `mode`:
-  - `center`: this is the default value and both lines are aligned at the base line (centered).
+  - `center`: this is the default value and both lines are aligned at the baseline (centered).
   <img width="100" height="50" src="https://github.com/setaman/Bilder/blob/master/ellipse-normal.png">
@@ -269,3 +265,3 @@
 
-- `offset`: is any negative or positive number and defines the distance between the progress and empty lines. It can be **only** combined with the `in` and `out` modes
+- `offset`: is any negative or positive Number and defines the distance between the progress and empty lines. It can be **only** combined with the `in` and `out` modes
 
@@ -280,3 +276,3 @@ ###### Example: 📜
 
-As you can see the second and fourth examples are similar to the modes `bottom` and `top`. Only with the modes `in` and `out` and the `offset` you can achieve the same result. But the provided modes like a presets take care about annoying calculations and do the job for you.
+In general, any positioning can already be achieved with values `in` and `out` in a combination with certain `offset`. The modes, however, act like presets, which reduce the effort for the manual calculations. 
 
@@ -290,3 +286,3 @@ <br>
 
-Descriptive string in form `"mode [offset]"` that defines how the progress line is aligned in relation to the fill area. 
+Descriptive string in form `"mode [offset]"` that defines how the progress line is aligned in relation to the circle fill area. 
 Available modes are  `center`, `in` and `out`. Additionally, with the `out` mode you can provide an `offset` value as any Number.
@@ -318,3 +314,3 @@ In general, this prop makes it possible to mimic the SVG2 `stroke-aligment`, which is currently not supported in any browser.
 
-Defines the color of progress circle **line**. Is any CSS color like `#123` or `lime` or an object that defines the gradient.
+Defines the color of progress circle line. Is any CSS color like `#123` or `lime` or an object that defines the gradient.
 
@@ -324,3 +320,3 @@ - `color="#3f79ff"` - as String
 - `:color="{ colors [, radial ]}"` - as Object
-  - `radial` - default `false`. Defines whether the gradient is radial or linear
+  - `radial` - default `false`. Boolean that defines, whether the gradient is radial or linear
   - `colors` - array that contains the gradient colors as objects `{ color: "#6546f7", offset: "10" [, opacity: 1] }`
@@ -378,3 +374,3 @@
 
-Boolean value that defines whether the **[`progress`](#progress)** or from you defined  **[`legend`](#legend)** is displayed as the legend of the circle.
+Boolean that defines whether the legend value (**[`progress`](#progress)** or  **[`legend`](#legend)**) is hidden.
 
@@ -387,7 +383,7 @@ <br>
 
-Is any Number or String. Use this property if you want to show progress value as the legend of the circle that is not in
-the range [-100, 100]. If defined, `legend` will replace [`progress`](#progress) as the circle legend!
-You can set any precision of the decimal numbers. If the prop is defined as a string, you can specify the `","` 
-as decimals delimiter (e.g "123,123" for german numbers), apart from this the value must generally be a valid JavaScript Number.
-For more customization possibilities please use [`legendFormatter`](#legendformatter) or [`scoped slot`](#default). 
+Is any Number or String. Use this property if you want to show the progress value as the legend of the circle that is not in
+the range [-100, 100]. If defined, `legend` will replace [`progress`](#progress) as the circle legend! Defining the value as 
+string you can apply very simple formatting with `"."` or `","` as delimiter to set initial counter placeholder (e.g "0045.00"). 
+Apart from this the value must generally be a valid JavaScript Number. For more customization possibilities please 
+use [`legendFormatter`](#legendformatter) or [`scoped slot`](#default). 
 
@@ -409,3 +405,3 @@ ###### Example: 📜
 ```vue
-<ve-progress legend="345,12345" /> // set "," as delimiter defining the value as string
+<ve-progress legend="0100,450" /> // counts up from "0000,000"
 ```
@@ -421,4 +417,4 @@
 Is a Function that must return your custom formatted value. The function takes counter properties object as argument and 
-is called on every tick of the counter. Here the formatting of [legend](#legend) or [progress](#progress) 
-is completely up to you and you have full freedom to adjust the presentation to your needs. The function can return any 
+is called on every counter tick. Here the formatting of [legend](#legend) or [progress](#progress) 
+is completely up to you and you have the full freedom to adjust the presentation to your needs. The function can return any 
 value, even HTML.   
@@ -430,3 +426,3 @@
 
-Let's see how it works. The function takes counter properties object as argument that you can use to define custom formatting.
+The function takes counter properties Object as argument that you can use to define custom formatting.
 `currentValue` is the most relevant value, as it is the actual value at specific counter tick. The return value will be 
@@ -436,7 +432,7 @@ displayed as the legend of the circle.
 ```js
-const myFormatter = ({ currentValue, currentRawValue, duration, previousCountStepValue, start, end, difference, oneStepDifference, startTime, elapsed }) => {
+const myFormatter = ({ currentValue, ...otherProps }) => {
   return new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(currentValue); 
 }
 ```
-You can also return HTML:
+The function can also return HTML:
 ```js
@@ -455,3 +451,3 @@ const myFormatter = ({ currentValue }) => {
 <ve-progress :legend-formatter="myFormatter"/>
-<!-- shorter version if you wish-->
+<!-- shorter version-->
 <ve-progress :legend-formatter="({ currentValue }) => `My Format ${currentValue}`"/>
@@ -464,3 +460,3 @@ ````
 
-Descriptive string in form `"type [duration delay]"` that defines the initial animation of progress circle line filling. `type` is one from predefined animations and the optional `duration` and `delay` are number values. Note that the order is important and that you can only define the `delay` after `duration`. 
+Descriptive string in form `"type [duration delay]"` that defines the initial animation of progress circle line filling. `type` is one from predefined animations and the optional `duration` and `delay` are Number values. Note that the order is important and that you can only define `delay` after `duration`. 
 
@@ -482,3 +478,3 @@ - `type` - is one of the predefined animations: `default | rs | reverse | bounce| loop`
 
-Forces loading state. The component provides an indeterminate loading state for the case that your data is not available immediately. With this property set to `true` you can use the component as the indeterminate progress. 
+Boolean that forces loading state. The component provides an indeterminate loading state for the case that your data is not available immediately. With this property set to `true` you can use the component as the indeterminate progress. 
 
@@ -503,3 +499,3 @@ <br>
 
-Provides a determinate loading state that indicates that your data loading is still in progress but allows to show the **[`progress`](#progress)**. 
+Boolean that provides a determinate loading state that indicates that your data loading is still in progress but allows to show the **[`progress`](#progress)**. 
 
@@ -512,3 +508,3 @@ <br>
 
-Forces no data state. The component provides a no data state for the case that your data is not available. The circle progress is still empty.
+Boolean that forces no data state. The component provides a no data state for the case that your data is not available. The circle progress is still empty.
 
@@ -556,5 +552,5 @@ >❗ The component will take the no data state even if you provide an invalid **[`progress`](#progress)** value
 ###### Example: 📜
-`dash="strict 60 0.5"` - 60 dashes with 0.5 relative spacing
+`<ve-progress dash="strict 60 0.5" />` - 60 dashes with 0.5 relative spacing
 
-`dash="10 10"` - 10 pixels big dashes with 10 pixels spacing, the number of dashes depends on the empty circle circumference
+`<ve-progress dash="10 10" />` - 10 pixels big dashes with 10 pixels spacing, the number of dashes depends on the empty circle circumference
 
@@ -565,3 +561,3 @@ <br>
 
-Boolean value that specifies the type of the circle. If it is set to true, only the half of the circle will be drawn.
+Boolean that specifies the type of the circle. If it is set to true, only the half of the circle will be drawn.
 
@@ -598,3 +594,3 @@ ###### Example: 📜
 
-**Descriptive string**: `dot="size [color]"` - `size` can be just a Number or a percent value like `5%`, the calculation for percent values is similar to **[`thickness`](#thickness)** and depends on the **[`size`](#size)**. `color` is optional and lets you quickly define the color of the dot. The order of properties is important for parsing the String and you can set the `color` only if the `size` is defined.
+**Descriptive string**: `dot="size [color]"` - `size` can be just a Number or a percent value like `5%`, the calculation for percent values is similar to **[`thickness`](#thickness)** and depends on the **[`size`](#size)**. `color` is optional and lets you quickly define the color of the dot. The order of properties is important for parsing the String, and you can set the `color` only if the `size` is defined.
 
@@ -624,3 +620,3 @@ **Object**: `:dot="{ size: Number | String [, any CSS inline style with Vue syntax] }"` - to customize the point, you can define the prop as an Object. `size` is required and can be just a Number or a String to define a percent value. Only defining the prop as an Object you have the possibility to add any styles to the dot you want to, using Vue syntax for defining inline styles, you can even completely break the positioning of the dot, if you need. You cannot override the `height` of the dot since it is important for internal calculation and must be controllable.
 
-Is a Boolean. `reverse` prop flips the circle, and the progress circle fills counterclockwise. Alternative you can just set 
+Is a Boolean. `reverse` prop flips the circle, and the progress circle fills counterclockwise. Alternatively you can just set 
 a negative value for [`progress`](#progress).
@@ -638,3 +634,3 @@
 
-You can specify 2 or more circles as objects in an array as `data`. For each circle you can use almost every available property. It is not necessary to specify all properties, they will be merged with global props and the specified props will overwrite the global. The circles are rendered inside each other.
+You can specify 2 or more circles as Objects in an array as `data`. For each circle you can use almost every available property. It is not necessary to specify all properties, they will be merged with global props, the specified props will overwrite the global. The circles are rendered inside each other.
 
@@ -641,0 +637,0 @@ >❗ Excluded props: **[`lineMode`](#lineMode)**, **[`emptyThickness`](#emptyThickness)**, **[`legend`](#legend)**. These properties will be ignored, if `data` is specified. The legend of this circle is also not shown.

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167801

increased by18.25%

Number of package files

5

increased by25%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

20

increased by17.65%

Number of lines in readme file

697

decreased by-0.57%

No dependency changes