vue-ellipse-progress

What's Changed

• chore: update issue templates by @setaman in https://github.com/setaman/vue-ellipse-progress/pull/154
• Changed plugin export for non-plugin-version by @pngcsgta in https://github.com/setaman/vue-ellipse-progress/pull/153

New Contributors

• @pngcsgta made their first contribution in https://github.com/setaman/vue-ellipse-progress/pull/153

Full Changelog: https://github.com/setaman/vue-ellipse-progress/compare/v1.3.0...v1.3.1

What's Changed

• fix: initial animation/transition on Safari by @setaman in https://github.com/setaman/vue-ellipse-progress/pull/211

Full Changelog: https://github.com/setaman/vue-ellipse-progress/compare/v2.1.1...v2.1.2

See CHANGELOG.md for more details!

🚧 Fixes

• Fix legendHeight setter in mount #170

📜 Misc

• Bump development dependencies and Vue version to 3.2.33 #175
• Add commitlint and husky #171

See a CHANGELOG.md for more details!

✅ New Features

• Smooth legend transition between states 885fbda
• loader now supports duration property to control animation duration 561859c

🚧 Fixes

• apply transition properly to loader circle 9d6e4ee
• correctly apply dash property #147

Vue 3 compatible release with new features, fixes, a lot of internal code refactorings and usability improvements. Following the current state of the Vue 3 ecosystem, the v2 is released under the next tag and will become latest with the next minor release. Until then, this version lives in the v2-dev branch. The release contains several breaking changes, introduces new options to provide more customization possibilities and makes with 150+ new tests the code base more reliable.

npm i vue-ellipse-progress@next
docs
changelog

⚠️ Breaking Changes and migration

• build with Vue 3, release is not compatible wit Vue 2.6 and down. The initialization process has changed

  You have to import and initialize the component in Vue 3 manner:

  import { createApp } from "vue";
  import veProgress from "vue-ellipse-progress";
  createApp(App).use(veProgress);
  

  Please note that the default plugin name has changed and you use the component like follows:

  <ve-progress />
  

  You will find more details in the installation guide

• removed legendValue option, it is legend now

  The option legendValue just has to be renamed in legend. The old usage of legend must be renamed to hideLegend. The following
  code from v1:

  <vue-ellipse-progress :legend="true" :legendValue="123.56" />
  

  should look like follows:

  <ve-progress :hideLegend="false" :legend="123.56" />
  

• old legend option renamed to hideLegend

  Just rename legend to hideLegend. Also note that you have to revert the Boolean value

• lineMode default mode normal renamed to center

• slot legend-value renamed to legend

✅ New features

• added options linePosition, emptyLinePosition, loader

• improved simple legend formatting with legend

• improved animated counter properties that can be used in legendFormatter and default slot

• component can be imported directly, no more restricted to the usage as a plugin

Fixes

• Loader circle fixes (#99)
• Fixes #100 (#101)

A well tested Vue 3 compatible beta release with stable interface. This release introduces new features, patches, some breaking changes and a lot of internal code improvements. All previous releases are not compatible with this version. The stable v2 version is a few tests away and is actually only blocked by the vue-test-utils@beta issues. Furthermore I need to ensure the backward compatibility with Vue 2.6.

At this point this version is feature complete and no more breaking changes will be introduced. Please read the documentation to learn more details about changes. Below is an overview of important breaking changes. A detailed upgrade guide will be available later.

• Component is build with Vue 3

• Component initialization changed due to Vue 3 specifics, also changed the usage over CDN

• Options changes: legendValue, legend, lineMode

• Slots usage changed

The release contains important fixes concerning compatibility with IOS ans MacOS and adds the possibility to format the legend of the circle.

Features

• legendFormatter (#80)
• default scoped slot (#80)
• Smooth transitions between circle states

Fixes

• Dot reimlemented to work on IOS/MacOS (#82)
• Fixes animations on IOS/MacOS (#86)

Improvements

• Tests extended
• Documentation corrections and updates
• Dot and Animation internals rewritten completely
• All dependencies updated to latest versions

After the request in #73 reverse mode was added

Features

• reverse

  The reverse property lets the progress circle fill counterclockwise:

  <vue-ellipse-progress reverse />
  

• progress now accepts also negative values in the range [-100, 100]

• added support for usage over CDN

Fixes and Improvements

• Tests extended
• Small CSS and JS refactoring
• Documentation corrections (#77) and updates
• Added contribution guide and PRs template!
• All dependencies updated to latest versions

This release replaces count-up.js with own implementation. The library is now dependency-free!

Fixes and Improvements

• Replaced count-up.js (#67)
• Better legendValue decimals handling and , as delimiter (#67)
• Documentation improvements
• All dependencies updated to latest versions

This is an important update to the previous version. This version adds dot feature and several important fixes, some of which are listed below. A lot of time has been invested in testing and improvements.

Features

• adds dot

  The dot property lets you define a point indicator at the end of the progress line:

  dot="10 white"
  

Fixes and Improvements

• Adds 100 new tests (#63)
• Refactors internal CSS classes structure (#60 )
• Significantly reduces the amount of by the plugin injected CSS on a site (0ee796e)
• Documentation improvements
• Includes many important fixes (2d56b3e, edc1d51, 500d12e, 61e4e2d, 41d45f3, 0c0e621 )
• Several code rafactorings, optimizations, props custom validators improvements
• All dependencies updated to latest versions

This release contains all features I wanted to see in the first major version and introduces breaking changes to previous versions. The next major update is planned with the release of Vue 3.0.

New features can be added if I need them. But currently I am satisfied with the available capabilities of the library.

Breaking Changes

• Descriptive Interface (#43)

  After using the library for some time, I decided to simplify the interface with descriptive strings. Instead of
  specifying objects that are verbose for some props, they can be described using a string with a predefined
  structure.

  We take animation prop as example. In previous version we specified it as follows:

  :animation="{ type: 'rs', duration: 1000, delay: 500 }"
  

  🔥 Now we can just describe the animation config with a string:

  animation="rs 1000 500"
  animation="rs 1000"
  animation="rs"
  

Features and Fixes

• Multiple circles in one with data prop (#36)
• Determinate loading state with determinate prop (#37)
• Usage documentation improvements (#45, #47, #50)
• Custom plugin name can now be defined: Vue.use(VueEllipseProgress, "my-name")
• Unit test and corresponding fixes (#49, #52)
• Several code rafactorings, optimizations, improvements
• Update all dependencies to latest versions

Contains the most recent features. Supposed for testing.

• demo
• Multiple circles in one (#36)
• Determinate loading state (#37)
• Fixes
• code optimization

Applies fixes to bugs observed during the unit test.
Will be incompatible with the first major version.

Pre-release, stable but not recommended for production!