This started as a bugfix release addressing #23, but was a good occasion to improve the focus styles as well as rework the layout styles with modern CSS features (Safari v14.5+).

Other notable changes include official TypeScript support, updated Nuxt example, CSS-only drag start indication, and cleaned up the internal tools & scripts (goodbye CircleCI, Jest, VuePress, Yarn v1).

Breaking Changes

• Dropped support for component auto-install with app.use(ColorPicker). A rarely used feature that has the inconvenience of forcing a name. The new recommended way to globally install the component is with: app.component('ColorPicker', ColorPicker).
• The DOM tree wasn't changed, but if you had styles that changed anything inside the ColorPicker component then you should double-check if your overrides work the same way and tweak if needed.
• Minimum supported version of iOS Safari is v14.4.

Features

• feat: Modernize and make focus styles more prominent (401407a)

Bugfixes

• fix: Swap faux well border with a real one (480ef7b)
• fix: Allow clicking through the collapsed palette (f910413)

Performance Improvements

• refactor: CSS-only active drag state (b19f48c)

Tests

• tests: Migrate to Vitest (5dfc897)

Docs

• docs: Update recommended way to setup styles (1622aee)
• docs: docs: Update examples (432fc12)
• docs: Use consistent PascalCase self-closing tag (83deb17)
• docs: Migrate to Vitepress (53bfe99)

Others

• chore: Remove global component auto-install registration (a5cc413)
• build: Upgrade codecov action to v4 (860a080)
• build: Migrate to Bun (2a4f62d)
• chore: Upgrade dependencies (f5918dd, 5dfc897, 9e3034a, e692309, 4368692)

Exciting release which brings official Vue 3 support! Other notable changes are the refreshed UI of the disabled state and experimental support for TypeScript. Thanks to the now well supported CSS conic-gradient and Vue 3's more efficient compiler this release comes with a 17.5% size reduction.

Breaking Changes

• Official Vue 3 support and while it is compatible with Vue 2 via @vue/compat it still is a breaking change
• While Nuxt v3 is in Beta the module @radial-color-picker/vue-color-picker/nuxt will be disabled and you'll have to manually add the CSS file and register the component as a regular Vue component.
• Dropping support for iOS Safari v12.2 and MS Edge 18 (the non-Chromium version).

Features

• types: add experimental TS support (b036eab)
• feat: new disabled style (fcfdd8a)
• feat: vue 3 port (290084e)

Performance Improvements

• refactor: remove MS Edge 18 transparency hack (9d4e12d)
• refactor: remove conic-gradient polyfill (6f4f89f, 4cd76de)

Docs

• docs: update vue 3 documentation (36bb1a0)
• docs: update examples (3dd7377, 16b639d)
• docs: port docs to VuePress 2 (7442db1)

Others

• chore: update code of conduct (05e4a0d)
• chore: move contribution docs to dedicated folder (defca5d)
• refactor: manually prefix CSS (89b814a)
• chore: upgrade rotator (5696fb1)
• chore: upgrade prettier (0a88455)
• chore: upgrade dependencies (9996ab5)
• chore: remove unused dependencies (4cc8714)
• build: experimental GH Actions step (3867d55, ad9d0b9)

v4 brings better accessibility out of the box with screen reader support, improved UX with a knob that starts following the mouse cursor as soon as touchdown/mousedown events are dispatched, support for using the color picker as uncontrolled component and an improved event system that closely matches the specs. All of this in the same package size 🎉

See the migration guide for more info.

Features

• Optional hue prop and input event (8af797a)
• Track drag from touchstart/mousedown (a42d243)
• Emit an event on drag stop (d1c4b3a)
• Use standard keyboard shortcuts (c3c1134)
• Add screen reader support (800b27e)

Docs

• Update docs (0a504f6)
• examples: Add uncontrolled component example (2d69dfb)
• examples: Update with-config example (1c798e9)
• examples: Update examples (9fcd7da)

Tests

• Update tests to match new functionality (c036d36)

Others

• npm: Upgrade dependencies (eba7d88)
• npm: Upgrade color-wheel (81d5559)
• npm: Upgrade rotator (b3a1167)
• Temporary disable JS sourcemaps (6ac2fdb)

A commonly requested feature (#2, #16) to make the inner circle transparent is now officially supported. Check out the migration guide from v2 to v3 section if you want to keep the old behavior with a solid white background.

Features

• Transparent inner circle (bd2b766)

Docs

• examples: Update examples (d931ad1)
• Add migration guide to v3 (b94e357)

Others

• build: Upgrade node image to v12 (425fea3)
• npm: Upgrade packages (845ac89)

Official server side rendering support! Less jumpy layout during client hydration and easier Nuxt.js installation. Other notable changes are the support for globally installing the component with Vue.use(ColorPicker) and the brand new documentation.

Features

• Add support for nuxt module (f08b87e, 4e581fc)
• Add support for installing the component globally (c735f8d)

Bugfixes

• Initialize knob position on created hook (fd2eac3)
• Remove debug ColorPicker config while developing (01238c1)

Tests

• Simplify testing for conic-gradient fallback (06576f8)

Docs

• examples: Update Nuxt examples (5103a2f)
• Add docs for globally installing the component (d485725)
• Add official documenation website (2d1e7dc, 2a2eab7)

Others

• npm: Update keywords and links (d0128e7)
• build: Automate docs deploy (dade5c6)
• build: Refactor build scripts (bcedb0f)
• build: Remove redundant babel preset (e99ac4f)
• Use JS config files for better future compat (5358354)
• Upgrade deps (4bba056)
• Use conditional template event (e301c9b)
• build: Add bundlesize to CI (ce49f57)

Bugfixes

• Update unpkg path (7ce6a31)

Docs

• readme: Prefer dash-cased prop names over camelCased ones (a36a6d6)
• readme: Use downloads/month metric (fa9e4c0)

Others

• build: Remove unused bili config file (4fcfa24)

Just a maintenance release - updated dependencies, upgraded build system, incompatible props validation warning is now logged only in development and integration with Codecov for displaying the code coverage.

Tests

• Store code coverage in CircleCI build artifacts and integrate with Codecov (f62327f, be196aa, 924a05f)

Others

• build: Show warnings for incorrect params only in development mode (45155c0)
• build: Replace bili with vanilla rollup (e873824)
• Upgrade dependencies (db12899, 9ce8bd6)
• Bump minimimum required version of vue to latest patch version of 2.5.x (f43ef75)
• Add ESLint and Prettier (02a75c6)

Features

• Add collapsed property to hide the palette initially (7b17de3, #5)

Notable changes in this release are a new microanimation when dragging/rotating, support for uninterrupted dragging when mouse cursor leaves the element, disable & variant props, performance improvements in the form of less event listeners and drawing the color wheel with CSS in browsers that support it, automated CI builds with unit & integration tests and everything is packaged in roughly the same size (~3.5 KB gzipped) as v1.0 did 🎉

Features

• Add support for disabling the color picker (afab218)
• core: Unwrap color object prop to separate hue, saturation, luminosity and alpha props (4d2eefe)
• rotator: Allow uninterrupted dragging when cursor leaves the element (c1f6680)
• core: Use scale instead of shadows when user is dragging (02cdeba)

Bugfixes

• core: Prevent FOUC in browsers that support CSS Images Module L4 (9c0837e)
• rotator: Update @radial-color-picker/rotator Init dragging only when the main mouse button is pressed (68dde1f)
• Correctly clear Rotator instance when working with multiple color pickers (196884b)
• Correctly restore palette when closing animation is interrupted by second click (84a8aa3)
• Prevent dragging while closing the picker (1bf9644)

Performance Improvements

• Reuse press animationend event for resetting ripple (39196b3)
• Simplify transition system when closing the picker (226abdb)
• Remove unused selector transitions (0ede133)
• Use native CSS for drawing color wheel where supported (21deee4)
• Replace SASS with CSS for smaller bundle size (1f6d4fb)

Tests

• Add tests for component methods (e3a8059)
• Add tests for setup, props change and component destroy (de2e55f)
• Setup unit tests with Jest (d195ede)

Docs

• examples: Update examples (0861ac3)
• readme: Add migration guide from v1 and update props & events tables (9869746)
• readme: Add browser support section in FAQ (eddeb47)
• readme: Add CircleCI (build status) badge (6cd5a93)

Others

• build: Extend browser support and move browserlist to an rc file (5543b10)
• Add EditorConfig file (40c735f)
• Run CircleCI against master branch (23f5e84)
• build: Always build the package before publishing to NPM (bdad0dd)
• Upgrade dependencies to latest version (df02b44)
• Simplify detecting disabled state (b83d1f7)
• Listen for transitionend on the transitioned element instead of relying on event bubbling (3ab94f2)
• Remove unused devDependency (6329743)
• build: Upgrade to rollup-plugin-vue@4 (693c875)
• Setup CircleCI (c53dc22)
• refactor: Align event names with the standard input events (2709b1f)
• refactor: Use the standard name 'well' for the middle selector (2220de1)