` component has several props and events. [See the \"with-config\" example](./examples/with-config) which uses all options.\n\n### Props\n\n| Name | Type | Default | Description |\n|--------------|---------|----------------|-------------|\n| hue | Number | `0` | A number between `0-359`. **Required**. |\n| saturation | Number | `100` | A number between `0-100` |\n| luminosity | Number | `50` | A number between `0-100` |\n| alpha | Number | `1` | A number between `0-1` |\n| disabled | Boolean | `false` | A boolean to disable UI interactions |\n| variant | String | `collapsible` | Use `persistent` to prevent collapsing/closing |\n| mouse-scroll | Boolean | `false` | Use wheel (scroll) event to rotate. |\n| step | Number | `2` | Amount of degrees to rotate the picker with keyboard and/or wheel. |\n| initially-collapsed | Boolean | `false` | Hides the palette initially |\n\n### Events\n\n| Name | Description |\n|----------|-------------|\n| `input` | Emitted every time the color changes (i.e. rotation of the wheel). |\n| `change` | Emitted when the user dismisses the color picker (i.e. interacting with the middle color well). |\n\n[Back To Top](#quick-links)\n\n## First Asked Questions\n\n\n What's the browser support?
\n The last two versions of major browsers (Chrome, Safari, Firefox, Edge) are supported though it will probably work in other browsers, webviews and runtimes as well.
\n \n\n\n How to select other shades of the solid colors?
\n We suggest to add a custom slider for saturation and luminosity or use <input type=\"range\">.
\n \n\n\n Why HSL?
\n Regular HEX color format is limitting (no alpha channel) and browser support for HSLA is great. It's also sometimes more intuitive to work with HSLA notation since hue and angles map 1:1. Primary red color is at 0º, primary green is at 120º and gold for example sits somewhere in between. When a user rotates the wheel the hue is updated respectively. The saturation, luminosity and alpha props are display-only values - you can only change the hue.\n
\n \n The value of an <input> element of type \"color\" is a 7-character string specifying an RGB color in hexadecimal format. In addition, colors with an alpha channel are not supported; specifying a color in 9-character hexadecimal notation (e.g. #009900aa) will also result in the color being set to \"#000000\".\n Setting The Value of input of type color - MDN
\n
\n \n\n\n Why exactly input/change events?
\n \n Event names are based on the HTML <input type=\"color\">\n
\n \n As is the case with other <input> types, there are two events that can be used to detect changes to the color value: input and change. input is fired on the <input> element every time the color changes. The change event is fired when the user dismisses the color picker.\n Tracking color change of input of type color - MDN
\n
\n \n\n\n Why does Google Chrome throw a [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. warning in the console?
\n touchmove is used with preventDefault() to block scrolling on mobile while rotating the color knob. Even the Web Incubator Community Group acknowledges that in some cases a passive event listener can't be used.
\n \n\n\n Why is the scroll-to-rotate functionality not turned on by default?
\n It's another non-passive event that could potentially introduce jank on scroll. To rotate the color knob, but stay on the same scrolling position the wheel event is blocked with preventDefault(). Thus, if you really want this feature for your users you'll have to explicitly add :mouse-scroll=\"true\".
\n \n\n
\n\n[Back To Top](#quick-links)\n\n## Change log\n\nPlease see [Releases][link-releases] for more information on what has changed recently.\n\n[Back To Top](#quick-links)\n\n## Migration from v1\n\nStraight forward - `v-model` becomes `v-bind` and you need to add the `@input` event (which was previously added by the `v-model` directive implicitly).\n\n```diff\n\n- \n+ \n\n\n\n\n\n```\n\n## Change log\n\nPlease see [Releases][link-releases] for more information on what has changed recently.\n\n## Vue 3 and `@vue/compat`\n\nIf your app isn't ready to upgrade to Vue 3 you can slowly transition via `@vue/compat` and the [instructions provided there](https://www.npmjs.com/package/@vue/compat). Once you're done you might notice a warning message - `ATTR_FALSE_VALUE`. This is intended behavior and you can optionally silence the warning with `configureCompat({ ATTR_FALSE_VALUE: false })`. When using Vue 3 without the compat layer the warning will go away too.\n\n\n Details
\n \n[Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute \"aria-disabled\" with v-bind value `false` will
render aria-disabled=\"false\" instead of removing it in Vue 3. To remove the attribute, use `null` or
`undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with:
\nconfigureCompat({ ATTR_FALSE_VALUE: false })
\nDetails: https://v3.vuejs.org/guide/migration/attribute-coercion.html\nat <ColorPicker>\nat <App>
\n \n\n## Migration\n\n### Migration from v3\n\n1. Double-click to move the knob to the current position of the pointer is gone since this is now the default behavior as soon as the clicks on the palette. If you had a tooltip or a help section in your app that described the shortcut you should remove it.\n\n2. With v4 the keyboard shortcuts are better aligned with the suggested keys for any [sliders](https://www.w3.org/TR/wai-aria-practices/#slider). This means that the Shift/Ctrl + ↑/→/Shift/Ctrl + ↓/← non-standard key combos are replaced by the simpler PageDown and PageUp. If you had a tooltip or a help section in your app that described the shortcut keys you should update it.\n\n3. The `@change` event is now emitted when the user changes the color (knob drop, click on the palette, keyboard interaction, scroll) and a `@select` event is emitted when interacting with the color well (middle selector).\n\n```diff\n \n\n \n```\n\n## Contributing\n\nIf you're interested in the project you can help out with feature requests, bugfixes, documentation improvements or any other helpful contributions. You can use the issue list of this repo for bug reports and feature requests and as well as for questions and support.\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) and [CODE_OF_CONDUCT](.github/CODE_OF_CONDUCT.md) for details.\n\n## Credits\n\n- [Rosen Kanev][link-author]\n- [Dennis Dierkes](https://github.com/deen13)\n- [All Contributors][link-contributors]\n\nThis component is based on the great work that was done for the [AngularJs color picker][link-angularjs-color-picker].\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n[link-react-color-picker]: https://github.com/radial-color-picker/react-color-picker\n[link-vue-color-picker]: https://github.com/radial-color-picker/vue-color-picker\n[link-angular-color-picker]: https://github.com/radial-color-picker/angular-color-picker\n[link-angularjs-color-picker]: https://github.com/talamaska/angular-radial-color-picker\n[link-author]: https://github.com/rkunev\n[link-contributors]: ../../contributors\n[link-releases]: ../../releases\n","readmeFilename":"README.md","gitHead":"18b1f7f538498cf4cd2ddb8f6f8020baf72d6e24","bugs":{"url":"https://github.com/radial-color-picker/vue-color-picker/issues"},"_id":"@radial-color-picker/vue-color-picker@5.0.0","_nodeVersion":"16.5.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-D+//8GolRmKgDHC4S1tXWRpldkvoW77EpQqFs01nIBFefFsEfJO6z7CnlH6NDWlSCprkU+Bng9Xj5h65QEgJoA==","shasum":"8027bf2ccbcb40b03fbd1f903a435ad4e81edc3b","tarball":"https://registry.npmjs.org/@radial-color-picker/vue-color-picker/-/vue-color-picker-5.0.0.tgz","fileCount":13,"unpackedSize":94629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCUNLCRA9TVsSAnZWagAACzAP/iFxfn0ChcKJ0Z5ufxZ9\nqnDtFZ/xz+Ihp4QvM0AWmmcM76V8QbfAqQB7ibKmX5Ub5nu0uqi3KvKm4sYm\n1FSfZw7x//8bEsvlxgwDueVifpGWGVjZCe1jbiUTDbzvRYqIxI4ueIHNwHHM\nHkhEP5DWxXjyVjqlAZNhW58zAOLjMXqxoga9KldwNfvlMrFPiOF5ptEK5Ito\neiO1qa8Ati/M6mULLhGa2j6noqBg87mS7zrPdV6N2nVyn5Ul8WEMFOh7qEp3\neiAw5eUlEJvmVYqiWf5fTdUGGtCmVaQjvZZT6trQRKqk0pwTXVaaziZhVyrL\nmvlkkhTQtFghzcjNVFTDIWtIN887QwYldWzhEIVvj7oZQQBrFIRV5XoNlTXC\nVjks3/G322QQ4iB6/V2u2qBvFEjjPWjQPWnQpNALoeo5YBo14N6Lma4UfiYE\n2XTFHbuNe659k0snoLfJaxpL2oKd3UuZPcjxe+FaJxd7Rl7K2M45LUcOn3eo\nfgt39CPQl6JJFHxTvo3gJLKAC6IkpJlhHmQrEvt7hP/QSRhWT3+8G+V44Nsn\nPBV6tiODFGUIGLOK4gPjicP8jTeCWT+WC7yprybf3SCu7sI5VncKdZRmwn4u\nJ+9zrG7KA97T6RDS5IHAXLSGXvitmZuA1ZTWOyI3X+z18cl6A1tQoGFfJcRo\nL6Tm\r\n=2JCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDYsC2uMfeA5WOfuzK8iD9sg2/Xj2kHwFAF5m+hRHKqQIhAL0QOApZURWRyTxVFS7OxpxR3Tx5DGQO9cjPRyCHyVjv"}]},"_npmUser":{"name":"rkunev","email":"rkunev@gmail.com"},"directories":{},"maintainers":[{"name":"zlatip","email":"zlati.pehlivanov@gmail.com"},{"name":"rkunev","email":"rkunev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-color-picker_5.0.0_1627997003404_0.18369923112397757"},"_hasShrinkwrap":false},"5.0.1":{"name":"@radial-color-picker/vue-color-picker","version":"5.0.1","description":"Radial Color Picker - Vue","author":{"name":"Rosen Kanev","email":"rkunev@gmail.com"},"scripts":{"start":"vite","build":"node scripts/build.js","test":"jest --watch","test:ci":"jest -i --ci -b","lint":"eslint --ext .js,vue src","prepublishOnly":"yarn build","docs:dev":"vuepress dev docs","docs:build":"vuepress build docs","prepare":"husky install"},"main":"dist/vue-color-picker.cjs.js","module":"dist/vue-color-picker.es.js","unpkg":"dist/vue-color-picker.umd.min.js","types":"index.d.ts","dependencies":{"@radial-color-picker/rotator":"3.0.2"},"devDependencies":{"@babel/core":"7.14.8","@size-limit/file":"5.0.2","@vitejs/plugin-vue":"1.3.0","@vue/babel-preset-app":"4.3.1","@vue/compiler-sfc":"3.1.5","@vue/test-utils":"2.0.0-rc.11","babel-jest":"26.6.3","chalk":"4.1.2","cliui":"7.0.4","eslint":"7.32.0","eslint-plugin-vue":"7.15.0","fs-extra":"10.0.0","husky":"7.0.1","jest":"26.6.3","lint-staged":"11.1.1","prettier":"2.3.2","size-limit":"5.0.2","vite":"2.4.4","vue":"3.1.5","vue-jest":"5.0.0-alpha.10","vuepress":"2.0.0-beta.22"},"peerDependencies":{"vue":"^3.0.0"},"contributors":[{"name":"Dennis Dierkes","email":"dierkes@smartsquare.de"}],"homepage":"https://radial-color-picker.github.io/vue-color-picker/","keywords":["vue","radial color picker","color picker","color-picker","vue-color-picker","hue picker","nuxt","nuxt module"],"license":"MIT","lint-staged":{"*.{js,vue}":["yarn eslint","yarn prettier --write"]},"size-limit":[{"path":"./dist/vue-color-picker.umd.min.js","limit":"2.8 kB"},{"path":"./dist/vue-color-picker.min.css","limit":"1.4 kB"}],"repository":{"type":"git","url":"git+https://github.com/radial-color-picker/vue-color-picker.git"},"gitHead":"0c492667ccbaeaf2c2b5f7b1062d43de4a68e2f1","bugs":{"url":"https://github.com/radial-color-picker/vue-color-picker/issues"},"_id":"@radial-color-picker/vue-color-picker@5.0.1","_nodeVersion":"16.5.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-ExTbaDdac00RqxCPcfWKj2UrtBbzwph0HRVQKKgj94aCkWz8vedme+65v97cZUCdxOvxh0BANGgi6RD6H966Zw==","shasum":"13194552df9d6df31aedc64ec9be1f16562f2b8c","tarball":"https://registry.npmjs.org/@radial-color-picker/vue-color-picker/-/vue-color-picker-5.0.1.tgz","fileCount":11,"unpackedSize":93482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2X4WCRA9TVsSAnZWagAAB6wQAJ6Yc+AWi1CxednM4mvX\nAb88DjtiLC/oACa1c5HHjyHv2TOXCbMAuZBAEMVabLO8wLSy+84gz2jgyaK9\nbmYmrjWeEQArz/eXo9ACgE5L7p1T8izWmLBp41SSDkJ2nEzgHITXTGYnZwAW\n46VpGvGev7q1/1YmR3rFq0cl9lKO6I/49oIUGsmzO+d4JgpN3z4W6iF+FQdD\nX//BQJT18hUPzKriLXyZNywFJWdyMqSZKI9xAddhSmSNyOkuOfKsbQ0HWQRj\n7ohG4HTE2cYNd5tfIld8X8tHwRY+u0Pt/4eOY11MHpojscYVLytrXGK3bMUh\nHcAlgKc4mrlfjnn/n9bc3cVRF++Xn/B+RImUuqjT8XR5ndQ5NlHIGPJxJ0/w\ngFKTCBUx0ItvRoxtRcflx3pJX1PByYaOl+45PUNWYMMF8Y/2r7ug3Bz1FwGu\nXnFYy3dNjL9eVxYz6VmwGxOqL2zX4W7vTOWZ3TGPVAQBVnvX34hJZCKd4QX5\nmMyTq008hgwcR2sdYm59ZTMNFnqKlwc7pVLE4jRdMYPtWGmc7yfrzjzoO/Q+\ngY+qBA0ex1Vr3+uk4LfELBZA3KI9SK5jl51JGqqIdgvy0MVGbDaoGmZm84Pr\nOkCJHIxY3+oPuHADRwko6YNqrMLCIXyLu7us1BSAVmyD6ZEW5MvdTBiTEB8I\n4Cg5\r\n=lyom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeYHg61z0C7V2OUTXNx84PC3TWcKaqvV3vnrOpzGk69wIhAN4XEdZkHb+gs/e3heoZvs4lC50d1vn210T0s5wR0bLn"}]},"_npmUser":{"name":"rkunev","email":"rkunev@gmail.com"},"directories":{},"maintainers":[{"name":"zlatip","email":"zlati.pehlivanov@gmail.com"},{"name":"rkunev","email":"rkunev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-color-picker_5.0.1_1634201166396_0.24905849896821963"},"_hasShrinkwrap":false},"6.0.0-beta.0":{"name":"@radial-color-picker/vue-color-picker","version":"6.0.0-beta.0","description":"Radial Color Picker - Vue","author":{"name":"Rosen Kanev","email":"rkunev@gmail.com"},"scripts":{"start":"vite","build":"node scripts/build.js","test":"vitest","test:ci":"vitest run --coverage --no-file-parallelism --bail 1","lint":"eslint --ext .js,vue src","prepublishOnly":"bun run build","docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs","prepare":"husky"},"main":"dist/vue-color-picker.cjs.js","module":"dist/vue-color-picker.es.js","unpkg":"dist/vue-color-picker.umd.min.js","types":"index.d.ts","dependencies":{"@radial-color-picker/rotator":"3.0.2"},"devDependencies":{"@size-limit/file":"11.0.2","@vitejs/plugin-vue":"5.0.4","@vitest/coverage-v8":"1.3.1","@vue/compiler-sfc":"3.4.21","@vue/test-utils":"2.4.4","chalk":"4.1.2","cliui":"7.0.4","eslint":"8.57.0","eslint-plugin-vue":"9.22.0","fs-extra":"10.0.0","husky":"9.0.11","jsdom":"24.0.0","lint-staged":"15.2.2","prettier":"3.2.5","size-limit":"11.0.2","vite":"5.1.4","vitepress":"1.0.0-rc.44","vitest":"1.3.1","vue":"3.4.21"},"peerDependencies":{"vue":"^3.0.0"},"contributors":[{"name":"Dennis Dierkes","email":"dierkes@smartsquare.de"}],"homepage":"https://radial-color-picker.github.io/vue-color-picker/","keywords":["vue","radial color picker","color picker","color-picker","vue-color-picker","hue picker","nuxt","nuxt module"],"license":"MIT","lint-staged":{"*.{js,vue}":["bun run eslint","bun run prettier --write"]},"size-limit":[{"path":"./dist/vue-color-picker.umd.min.js","gzip":true,"limit":"2.4 kB"},{"path":"./dist/vue-color-picker.min.css","gzip":true,"limit":"1 kB"}],"repository":{"type":"git","url":"git+https://github.com/radial-color-picker/vue-color-picker.git"},"gitHead":"77f2564e37184c4c2eb5948a59ace207c896c54a","bugs":{"url":"https://github.com/radial-color-picker/vue-color-picker/issues"},"_id":"@radial-color-picker/vue-color-picker@6.0.0-beta.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-EM/IitD8TC6tpsOQ3NqzxjP1gqcGZcihzhnKsjHNP2p3g6TppZVenD/4vjDuizgT4weC6Fkcpe+4cLlYCmbKWQ==","shasum":"e680a3f41dfa58af4683004b5345e04806f55233","tarball":"https://registry.npmjs.org/@radial-color-picker/vue-color-picker/-/vue-color-picker-6.0.0-beta.0.tgz","fileCount":11,"unpackedSize":85564,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzo7BdiBY1q1kL2AkYXlqIerhvVYN5riyf6oDaHbuzSAIhAIfX8H2P1vwfq6c0lY3GtRd3whFgdDVe90d72knfWLWX"}]},"_npmUser":{"name":"rkunev","email":"rkunev@gmail.com"},"directories":{},"maintainers":[{"name":"zlatip","email":"zlati.pehlivanov@gmail.com"},{"name":"rkunev","email":"rkunev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-color-picker_6.0.0-beta.0_1710947053626_0.1902341880293812"},"_hasShrinkwrap":false},"6.0.0":{"name":"@radial-color-picker/vue-color-picker","version":"6.0.0","description":"Radial Color Picker - Vue","author":{"name":"Rosen Kanev","email":"rkunev@gmail.com"},"scripts":{"start":"vite","build":"node scripts/build.js","test":"vitest","test:ci":"vitest run --coverage --no-file-parallelism --bail 1","lint":"eslint --ext .js,vue src","prepublishOnly":"bun run build","docs:dev":"vitepress dev docs","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs","prepare":"husky"},"main":"dist/vue-color-picker.cjs.js","module":"dist/vue-color-picker.es.js","unpkg":"dist/vue-color-picker.umd.min.js","types":"index.d.ts","dependencies":{"@radial-color-picker/rotator":"3.0.2"},"devDependencies":{"@size-limit/file":"11.0.2","@vitejs/plugin-vue":"5.0.4","@vitest/coverage-v8":"1.3.1","@vue/compiler-sfc":"3.4.21","@vue/test-utils":"2.4.4","chalk":"4.1.2","cliui":"7.0.4","eslint":"8.57.0","eslint-plugin-vue":"9.22.0","fs-extra":"10.0.0","husky":"9.0.11","jsdom":"24.0.0","lint-staged":"15.2.2","prettier":"3.2.5","size-limit":"11.0.2","vite":"5.1.4","vitepress":"1.0.0-rc.44","vitest":"1.3.1","vue":"3.4.21"},"peerDependencies":{"vue":"^3.0.0"},"contributors":[{"name":"Dennis Dierkes","email":"dierkes@smartsquare.de"}],"homepage":"https://radial-color-picker.github.io/vue-color-picker/","keywords":["vue","radial color picker","color picker","color-picker","vue-color-picker","hue picker","nuxt","nuxt module"],"license":"MIT","lint-staged":{"*.{js,vue}":["bun run eslint","bun run prettier --write"]},"size-limit":[{"path":"./dist/vue-color-picker.umd.min.js","gzip":true,"limit":"2.4 kB"},{"path":"./dist/vue-color-picker.min.css","gzip":true,"limit":"1 kB"}],"repository":{"type":"git","url":"git+https://github.com/radial-color-picker/vue-color-picker.git"},"gitHead":"76d7732df988effe04b8da6fe53b8aba934f7aa5","bugs":{"url":"https://github.com/radial-color-picker/vue-color-picker/issues"},"_id":"@radial-color-picker/vue-color-picker@6.0.0","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-mYITvZq7P37xrTfSjl0pDMSGlxo6nDawc8NdxGgHJhrvnPQsbLar0i/wJRK6A94NsDucJxHJdE5nbsajkVewwg==","shasum":"9888fc73964ab1a57cd74eeb48d64984919fb1fc","tarball":"https://registry.npmjs.org/@radial-color-picker/vue-color-picker/-/vue-color-picker-6.0.0.tgz","fileCount":11,"unpackedSize":85538,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMIC7dgvPPQsRBVfFftnGftoon/8DmBk0fEH21XpJ3BQIhAIX8Z9EaJo7koqhNa9td3gEbTnFit5G7HFcP18J2QZet"}]},"_npmUser":{"name":"rkunev","email":"rkunev@gmail.com"},"directories":{},"maintainers":[{"name":"zlatip","email":"zlati.pehlivanov@gmail.com"},{"name":"rkunev","email":"rkunev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-color-picker_6.0.0_1710948624214_0.2423123602270938"},"_hasShrinkwrap":false}},"time":{"created":"2018-04-22T13:15:35.992Z","0.1.0":"2018-04-22T13:15:36.163Z","modified":"2024-03-20T15:30:24.852Z","0.1.1":"2018-04-22T13:20:29.176Z","0.2.0":"2018-04-29T20:11:54.354Z","0.3.0":"2018-05-01T15:32:00.503Z","0.4.0":"2018-05-06T12:03:18.541Z","0.4.1":"2018-05-06T12:25:24.893Z","0.4.2":"2018-05-06T13:13:12.192Z","1.0.0":"2018-07-22T18:33:45.189Z","1.0.1":"2018-07-28T09:57:37.216Z","1.1.0":"2018-11-10T15:37:40.928Z","2.0.0-beta.1":"2019-01-06T19:06:41.137Z","2.0.0-beta.2":"2019-01-08T12:14:29.730Z","2.0.0":"2019-01-08T14:04:02.845Z","2.1.0":"2019-02-28T19:55:13.725Z","2.2.0":"2019-06-13T13:23:28.968Z","2.2.1":"2019-06-17T10:56:08.162Z","2.3.0-beta.0":"2019-06-20T16:13:35.815Z","2.3.0":"2019-06-21T13:58:41.081Z","3.0.0":"2020-04-20T13:55:36.103Z","4.0.0":"2020-05-11T20:17:28.524Z","5.0.0":"2021-08-03T13:23:23.552Z","5.0.1":"2021-10-14T08:46:06.684Z","6.0.0-beta.0":"2024-03-20T15:04:13.780Z","6.0.0":"2024-03-20T15:30:24.394Z"},"maintainers":[{"name":"zlatip","email":"zlati.pehlivanov@gmail.com"},{"name":"rkunev","email":"rkunev@gmail.com"}],"description":"Radial Color Picker - Vue","homepage":"https://radial-color-picker.github.io/vue-color-picker/","repository":{"type":"git","url":"git+https://github.com/radial-color-picker/vue-color-picker.git"},"author":{"name":"Rosen Kanev","email":"rkunev@gmail.com"},"license":"MIT","readme":"## Radial Color Picker - Vue\n\n![\"screenshot\"](\"https://raw.githubusercontent.com/radial-color-picker/vue-color-picker/HEAD/screenshots/thumbnail.png\")
\n\n\n \n ![\"Downloads\"](\"https://img.shields.io/npm/dm/@radial-color-picker/vue-color-picker.svg\")
\n \n \n ![\"Version\"](\"https://img.shields.io/npm/v/@radial-color-picker/vue-color-picker.svg\")
\n \n \n ![\"License\"](\"https://img.shields.io/npm/l/@radial-color-picker/vue-color-picker.svg\")
\n \n \n ![\"Code](\"https://codecov.io/gh/radial-color-picker/vue-color-picker/branch/main/graph/badge.svg\")
\n \n
\n\n## Introduction\n\nGreat UX starts with two basic principles - ease of use and simplicity. Selecting a color should be as easy as moving a slider, clicking a checkbox or pressing a key just like other basic form elements behave.\n\nThis is a flexible and minimalistic color picker. Developed with mobile devices and keyboard usage in mind. Key features:\n\n- Small size - 3.3 KB gzipped (JS and CSS combined)\n- Supports touch devices\n- Optimized animations\n- Ease of use\n - Screen reader support.\n - Tab to focus the picker.\n - ↑ or → arrow key to increase hue. PgUp to go quicker.\n - ↓ or ← arrow key to decrease hue. PgDown to go quicker.\n - Enter to select a color and close the picker or to open it.\n - Mouse ScrollUp to increase and ScrollDown to decrease hue (Opt-in).\n- TypeScript support\n\n## Documentation\n\nYou can find the documentation on the [website](https://radial-color-picker.github.io/vue-color-picker/).\nThe documentation is divided into several sections:\n\n- [Getting Started](https://radial-color-picker.github.io/vue-color-picker/guide/getting-started.html)\n- [Examples](https://radial-color-picker.github.io/vue-color-picker/examples.html)\n- [Config Reference](https://radial-color-picker.github.io/vue-color-picker/api.html)\n- [First Asked Questions](https://radial-color-picker.github.io/vue-color-picker/guide/faq.html)\n\n## Ecosystem\n\nThe right color picker, but not the framework you're looking for?\n\n- [Vue][link-vue-color-picker] - you're here!\n- [React][link-react-color-picker]\n- [AngularJs][link-angularjs-color-picker]\n- [Angular][link-angular-color-picker]\n\n## Demos\n\n- Basic Example - [Codepen](https://codepen.io/rkunev/pen/zjEmwV/)\n- Other Examples in the [docs](https://radial-color-picker.github.io/vue-color-picker/examples.html)\n\n## Usage\n\nColor Picker on [npm](https://www.npmjs.com/package/@radial-color-picker/vue-color-picker)\n\n```bash\nnpm install @radial-color-picker/vue-color-picker\n```\n\nAnd in your app:\n\n```vue\n\n \n\n\n\n```\n\n## Change log\n\nPlease see [Releases][link-releases] for more information on what has changed recently.\n\n## Vue 3 and `@vue/compat`\n\nIf your app isn't ready to upgrade to Vue 3 you can slowly transition via `@vue/compat` and the [instructions provided there](https://www.npmjs.com/package/@vue/compat). Once you're done you might notice a warning message - `ATTR_FALSE_VALUE`. This is intended behavior and you can optionally silence the warning with `configureCompat({ ATTR_FALSE_VALUE: false })`. When using Vue 3 without the compat layer the warning will go away too.\n\n\n Details
\n \n[Vue warn]: (deprecation ATTR_FALSE_VALUE) Attribute \"aria-disabled\" with v-bind value `false` will
render aria-disabled=\"false\" instead of removing it in Vue 3. To remove the attribute, use `null` or
`undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with:
\nconfigureCompat({ ATTR_FALSE_VALUE: false })
\nDetails: https://v3.vuejs.org/guide/migration/attribute-coercion.html\nat <ColorPicker>\nat <App>
\n \n\n## Migration\n\n### Migration from v3\n\n1. Double-click to move the knob to the current position of the pointer is gone since this is now the default behavior as soon as the clicks on the palette. If you had a tooltip or a help section in your app that described the shortcut you should remove it.\n\n2. With v4 the keyboard shortcuts are better aligned with the suggested keys for any [sliders](https://www.w3.org/TR/wai-aria-practices/#slider). This means that the Shift/Ctrl + ↑/→/Shift/Ctrl + ↓/← non-standard key combos are replaced by the simpler PageDown and PageUp. If you had a tooltip or a help section in your app that described the shortcut keys you should update it.\n\n3. The `@change` event is now emitted when the user changes the color (knob drop, click on the palette, keyboard interaction, scroll) and a `@select` event is emitted when interacting with the color well (middle selector).\n\n```diff\n \n\n \n```\n\n## Contributing\n\nIf you're interested in the project you can help out with feature requests, bugfixes, documentation improvements or any other helpful contributions. You can use the issue list of this repo for bug reports and feature requests and as well as for questions and support.\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) and [CODE_OF_CONDUCT](.github/CODE_OF_CONDUCT.md) for details.\n\n## Credits\n\n- [Rosen Kanev][link-author]\n- [Dennis Dierkes](https://github.com/deen13)\n- [All Contributors][link-contributors]\n\nThis component is based on the great work that was done for the [AngularJs color picker][link-angularjs-color-picker].\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE) for more information.\n\n[link-react-color-picker]: https://github.com/radial-color-picker/react-color-picker\n[link-vue-color-picker]: https://github.com/radial-color-picker/vue-color-picker\n[link-angular-color-picker]: https://github.com/radial-color-picker/angular-color-picker\n[link-angularjs-color-picker]: https://github.com/talamaska/angular-radial-color-picker\n[link-author]: https://github.com/rkunev\n[link-contributors]: ../../contributors\n[link-releases]: ../../releases","readmeFilename":"README.md","keywords":["vue","radial color picker","color picker","color-picker","vue-color-picker","hue picker","nuxt","nuxt module"],"contributors":[{"name":"Dennis Dierkes","email":"dierkes@smartsquare.de"}],"bugs":{"url":"https://github.com/radial-color-picker/vue-color-picker/issues"}}![\"CircleCI\"](\"https://circleci.com/gh/radial-color-picker/vue-color-picker.svg?style=shield\")
\n \n \n ![\"Code](\"https://codecov.io/gh/radial-color-picker/vue-color-picker/branch/master/graph/badge.svg\"){kind=icon}
\n \n