Radial Color Picker - Vue

Overview

Radial Color Picker - Vue

screenshot

Downloads Version License CircleCI Code Coverage

Introduction

Great 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.

This is a flexible and minimalistic color picker. Developed with mobile devices and keyboard usage in mind. Key features:

  • Small size - 4 KB gzipped (JS and CSS combined)
  • Supports touch devices
  • Optimized animations
  • Ease of use
    • Screen reader support.
    • Tab to focus the picker.
    • or arrow key to increase hue. PgUp to go quicker.
    • or arrow key to decrease hue. PgDown to go quicker.
    • Enter to select a color and close the picker or to open it.
    • Mouse ScrollUp to increase and ScrollDown to decrease hue (Opt-in).

Documentation

You can find the documentation on the website. The documentation is divided into several sections:

Ecosystem

The right color picker, but not the framework you're looking for?

Quick Links

Demos

Usage

Color Picker on npm

npm install @radial-color-picker/vue-color-picker

And in your app:

<template>
    <color-picker v-bind="color" @input="onInput"></color-picker>
</template>

<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';

export default {
    components: { ColorPicker },
    data() {
        return {
            color: {
                hue: 50,
                saturation: 100,
                luminosity: 50,
                alpha: 1
            },
        };
    },
    methods: {
        onInput(hue) {
            this.color.hue = hue;
        },
    },
};
</script>

<style>
@import '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
</style>

Change log

Please see Releases for more information on what has changed recently.

Migration

Migration from v3

  1. 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.

  2. With v4 the keyboard shortcuts are better aligned with the suggested keys for any sliders. 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.

  3. 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).

  <color-picker
      :hue="hue"
      @input="updateHue"
-     @change="onColorSelect"
  />

  <color-picker
      :hue="hue"
      @input="updateHue"
+     @change="onColorChange"
+     @select="onColorSelect"
  />

Migration from v2

With v3 the inner circle is now transparent instead of solid white. If you previously relied on that and you prefer to keep the existing behavior you can do that by wrapping the <color-picker> with a <div> and add white background to it. Here's an example how to do that:

<template>
    <div class="wrapper">
        <color-picker :hue="hue" @input="onInput"></color-picker>
    </div>
</template>

<style>
    .wrapper {
        padding: 32px;
        background: #fff;
    }
</style>

Migration from v1

Straight forward - v-model becomes v-bind and you need to add the @input event (which was previously added by the v-model directive implicitly).

<template>
-   <color-picker v-model="color"></color-picker>
+   <color-picker v-bind="color" @input="onInput"></color-picker>
</template>

<script>
import ColorPicker from '@radial-color-picker/vue-color-picker';

export default {
    components: { ColorPicker },
    data() {
        return {
            color: {
                hue: 50,
                saturation: 100,
                luminosity: 50,
                alpha: 1
            },
        };
    },
+   methods: {
+       onInput: function(hue) {
+           this.color.hue = hue;
+       }
+   }
};

Contributing

If 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.

Please see CONTRIBUTING and CODE_OF_CONDUCT for details.

Credits

This component is based on the great work that was done for the AngularJs color picker.

License

The MIT License (MIT). Please see License File for more information.

Comments
  • Questions

    Questions

    First of all: very nice! My questions:

    1. (How) can I change the inside colour (currently white) of the wheel?
    2. (How) can I influence the minimising/maximising of the wheel when the colour is activated? So can it by default start minimised, and appear by clicking, and/or can I prevent it from minimising at all?
    question 
    opened by FrankX0 12
  • Can't resolve '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css'

    Can't resolve '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css'

    Describe the bug

    After npm install the package i try to test it by copying the code in Github.

    I get this error:

    Can't resolve '~@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css'

    By the way i am using NuxtJS.

    Do i need to configure something in nuxt.config.js?

    When i don't import the css then i get a page full page of colors. I assume that this is contained when the css is correctly imported into the page.

    Desktop (please complete the following information):

    • OS: [e.g. iOS] MACOS
    • Browser [e.g. chrome, safari] Chrome
    • Version [e.g. 22] latest
    opened by tsangaris 3
  • 我想在vue2

    我想在vue2

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    question 
    opened by w934423231 2
  • dependency was not found

    dependency was not found

    • npm i @radial-color-picker/vue-color-picker
    • npm run serve

    [error-msg] This dependency was not found:

    • -!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./src/views/colorPicker.vue?vue&type=style&index=0&id=5e66dd27&lang=css

    • To install it, you can run: npm install --save -!../../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css

    opened by fogdingding 1
  • An error occurred while running on the real mobile terminal

    An error occurred while running on the real mobile terminal

    20:56:20.761 [Vue warn]: Error in mounted hook: "ReferenceError: getComputedStyle is not defined" 20:56:20.824 found in 20:56:20.887 ---> 20:56:20.919     at pages/index/index.vue:1 20:56:20.951 ReferenceError: getComputedStyle is not defined

    needs more info 
    opened by xinmiti 1
  • Background color

    Background color

    Describe the solution you'd like A clear and concise description of what you want to happen. Hi, I would like to be able to change the color of the white space between the middle color and color wheel. I found that there was something posted around a solution but could not get it to work. Therefore I would like to request it'd be made a easy option, let's say a attribute you send with when using the component.

    Describe alternatives you've considered Alternately I would like a more direct and specific guide on how to modify it the current way within the css file.

    opened by abbliseng 1
  • build(deps): Bump lodash.defaultsdeep from 4.6.0 to 4.6.1

    build(deps): Bump lodash.defaultsdeep from 4.6.0 to 4.6.1

    Bumps lodash.defaultsdeep from 4.6.0 to 4.6.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): Bump handlebars from 4.0.12 to 4.5.1

    build(deps): Bump handlebars from 4.0.12 to 4.5.1

    Bumps handlebars from 4.0.12 to 4.5.1.

    Changelog

    Sourced from handlebars's changelog.

    v4.5.1 - October 29th, 2019

    Bugfixs

    • fix: move "eslint-plugin-compat" to devDependencies - 5e9d17f (#1589)

    Compatibility notes:

    • No compatibility issues are to be expected

    Commits

    v4.5.0 - October 28th, 2019

    Features / Improvements

    • Add method Handlebars.parseWithoutProcessing (#1584) - 62ed3c2
    • add guard to if & unless helpers (#1549)
    • show source location for the strict lookup exceptions - feb60f8

    Bugfixes:

    • Use objects for hash value tracking - 7fcf9d2

    Chore:

    • Resolve deprecation warning message from eslint while running eslint (#1586) - 7052e88
    • chore: add eslint-plugin-compat and eslint-plugin-es5 - 088e618

    Compatibility notes:

    • No compatibility issues are to be expected

    Commits

    v4.4.5 - October 20th, 2019

    Bugfixes:

    • Contents of raw-blocks must be matched with non-eager regex-matching - 8d5530e, #1579

    Commits

    v4.4.4 - October 20th, 2019

    Bugfixes:

    • fix: prevent zero length tokens in raw-blocks (#1577, #1578) - f1752fe

    Chore:

    • chore: link to s3 bucket with https, add "npm ci" to build instructions - 0b593bf

    Compatibility notes:

    • no compatibility issues are expected

    Commits

    ... (truncated)
    Commits
    • 7ef8617 v4.5.1
    • b75e3e1 Update release notes
    • 5e9d17f fix: move "eslint-plugin-compat" to devDependencies
    • b24797d v4.5.0
    • a243067 Update release notes
    • 088e618 chore: add eslint-plugin-compat and eslint-plugin-es5
    • 7052e88 Resolve deprecation warning message from eslint while running eslint (#1586)
    • b8913fc Add missing types for the Exception class properties (#1583)
    • 62ed3c2 Add Handlebars.parseWithoutProcessing (#1584)
    • 7fcf9d2 Use objects for hash value tracking
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): Bump lodash.template from 4.4.0 to 4.5.0

    build(deps): Bump lodash.template from 4.4.0 to 4.5.0

    Bumps lodash.template from 4.4.0 to 4.5.0.

    Commits
    • ab73503 Bump to v4.5.0.
    • a4f7d4c Rebuild lodash and docs.
    • cca5ac6 Fix npm-test by removing the call to test-docs.
    • 9f7f9fc Adjust heading order. [ci skip]
    • 6e2fb92 Remove unused baseArity.
    • 4f702e2 Specify utf8 encoding.
    • b188f90 Add fp tests for iteratee shorthands.
    • 7b93dc9 Ensure clone methods clone expando properties of boolean, number, & string ob...
    • 664d66a Make string tests more consistent.
    • d9dc0e6 Add _.invertBy tests.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): Bump eslint-utils from 1.3.1 to 1.4.3

    build(deps): Bump eslint-utils from 1.3.1 to 1.4.3

    Bumps eslint-utils from 1.3.1 to 1.4.3.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): Bump mixin-deep from 1.3.1 to 1.3.2

    build(deps): Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v5.0.1)
  • v5.0.1(Oct 14, 2021)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v4.0.0(May 11, 2020)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v3.0.0(Apr 20, 2020)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Jun 21, 2019)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Jun 17, 2019)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Jun 13, 2019)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Feb 28, 2019)

  • v2.0.0(Jan 8, 2019)

    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)
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.2(Jan 8, 2019)

  • v2.0.0-beta.1(Jan 6, 2019)

  • v1.1.0(Nov 10, 2018)

  • v1.0.1(Jul 28, 2018)

  • v1.0.0(Jul 22, 2018)

    While the release doesn't contain any new features, bugfixes or code improvements the version bump to 1.0.0 highlights the fact that the component is production-ready now. 🎉

    Performance Improvements

    Docs

    • readme: Update links to shorter format (5bed08d)
    • readme: Add code of conduct and contributing (55a6a32)

    Others

    • Upgrade Color Wheel to v1.0.0 (2aaae3a)
    Source code(tar.gz)
    Source code(zip)
  • v0.4.1(May 6, 2018)

  • v0.4.0(May 6, 2018)

    Bugfixes

    • core: Use CSS autoprefixer and tweak browserlist support (3845829)

    Performance Improvements

    • build: Build dist files with rollup which decreases bundle size by 20% (c318a8d)
    • core: Remove duplicate styling on knob when picker is focused/dragging (d2bbcae)

    Docs

    • readme: Add intro, usage, options and faq sections (8981c57)
    • examples: Update examples with new dist file names (79c64c9)

    Others

    • core: Clean up & simplify SASS (d178ba2, 4c7394d, 1668e3b, 3845829)
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(May 1, 2018)

    Bugfixes

    • core: Add default values for missing HSLA properties in v-model (7536a1b)

    Features

    • core: Align props names to existing HTML input attributes (79b60a4)

    Performance Improvements

    • core: Set values directly instead of copying objects with assign (8fa9a79)

    Docs

    • examples Add example with UMD build (2980df6)
    • examples Add example with component config (fcf305c, 798dca1)

    Others

    • Add unpkg field for a "bare" URL pointing to the minified UMD build (2980df6)
    • Simplify component name and align it with dist file name (1c9fe3a)
    Source code(tar.gz)
    Source code(zip)
  • v0.2.0(Apr 29, 2018)

    Performance Improvements

    • Upgrade deps and reduce bundle size (5e19f6c)
    • core: Set values directly instead of copying objects with assign (8fa9a79)

    Docs

    • Add webpack-simple example (6947de9)
    • Add browserify-simple example (ffe5f39)
    Source code(tar.gz)
    Source code(zip)
  • v0.1.1(Apr 22, 2018)

    Features

    • color-selector: Add color selector (cff6732)
    • color-wheel: Add conic gradient (96d2434)
    • core: Add support for keyboard interactions (4bd5f91)
    • core: Add support for mouse scroll interactions (df69663)
    • core: Add v-model to component to support color config (831e110)
    • core: Add vue boilerplate (1e729cc)
    • core: Emit @select event when a color is selected (c91ea3a)
    • rotator: Add module for applying rotation transforms on elements (b4f677f)
    • core: Add support for server-side rendering

    Others

    • Specify vue as peerDependency
    Source code(tar.gz)
    Source code(zip)
Owner
Radial Color Picker
Home of the UI component Radial Color Picker and its different implementations in some of the more popular frameworks
Radial Color Picker
Vue Color Picker using native input type color.

Lightweight color picker that uses the native HTML element input type color.

David Custódio 14 Sep 21, 2022
:art: Vue Color Pickers for Sketch, Photoshop, Chrome & more http://vue-color.surge.sh

vue-color Color Pickers for Sketch, Photoshop, Chrome & more with Vue.js(vue2.0). Live demo Installation NPM $ npm install vue-color CommonJS var Phot

Don 2.4k Dec 29, 2022
🎨 A natural color picker component for Vue.js

Color picker for Vue.js A Vue.js color picker component designed for humans. Installation npm i --save-dev vue-color-picker-board Browser Include the

Shlomi Nissan 11 Nov 24, 2022
🎨 A Color picker component. Built from the bottom to work with Vue.js.

Verte A Complete Vue.js Color Picker Component Features Multiple Color Models support: RGB, HSL, and HEX. SSR Friendly. Small file size, only 7kb gzip

Baianat 159 Dec 26, 2022
🎨 Lightweight color picker for Vue 3

?? Lightweight color picker for Vue 3

Anish George 141 Jan 2, 2023
Accessible color picker component for Vue.js

vue-accessible-color-picker An accessible Vue.js color picker component. Links: demo npmjs.com/package/vue-accessible-color-picker on BundlePhobia git

Philipp Rudloff 69 Dec 28, 2022
A Nice Color Gradient Picker with Vue

Vue Color Gradient Picker Table of Contents Installation Examples Demos Installation To install, you can use npm or yarn: $ npm install vue-color-grad

Arthur Hayrapetyan 42 Dec 14, 2022
Color picker for vue using Tailwind v2

Vue Tailwind Color Picker Color picker for vue using Tailwind v2. Requires Tailwind Live demo Installation $ npm install vue-tailwind-color-picker $ y

null 15 Jun 21, 2022
A color picker vue component

A color picker vue component

Benny Schudel 0 Feb 8, 2021
Color picker Vue.js component

vue-colorpicker Color picker Vue.js component.

Jamena McInteer 3 Jul 13, 2018
Cordelia Vue - a VueJS plugin that allows you to add a rich color picker into your web pages

Color picker for web and mobile browsers. Vue plugin version of Cordelia Color Picker library.

Cevad Tokatlı 2 Aug 29, 2018
Vue color picker

Vue color picker Iro color picker for Vue. Demo See demo here Install npm install vue-iro-color-picker --save Usage import ColorPicker from 'vue-iro-

iro.js 10 Sep 6, 2021
Color Picker app, created by tauri.

Color Picker 取色器 ✨ 特性 一键取色并复制到剪贴板 保留历史取色记录 自定义颜色值类型(如:HEX, RGB 等) 自定义取色快捷键(默认:F2) 颜色值去重 历史记录:左键单击显示颜色值,左键双击复制颜色值到剪贴板,右键单击删除颜色 可隐藏界面取色 软件安装包小,占用内存少 ??

Hunlongyu 27 Sep 30, 2022
Color picker chrome-style only

one-colorpicker A Chrome-style ColorPicker Install $ npm install one-colorpicker Quick Start import {ColorPicker, ColorPanel} from 'one-colorpicker'

null 13 Sep 20, 2022
Color Picker base on Vue2.x

Color Picker base on Vue2.x

阿多 2 Nov 15, 2020
A Vue3.x based color picker component with gradient bar control.

a Vue3.x based color picker component. English | 中文 Features Supports 3 CSS background color modes: solid, linear-gradient and radial-gradient. Suppor

null 7 Dec 3, 2022
(vue3.0) 🎨 Vue Color Pickers for Sketch, Photoshop, Chrome & more

?? Vue Color Pickers for Sketch, Photoshop, Chrome & more

ckpack 106 Dec 28, 2022
Lightweight color shader/blender/converter plugin implemented for Vue 2.

Vue Color Blender/Shader/Converter Lightweight color shader/blender/converter plugin implemented for Vue 2. Disclaimer The algoritmn used in this plug

Arthur Vasconcelos 6 Feb 3, 2022
⚡ A resistor color practice website develop by Vue.js

ResiColor ⚡ A resistor color practice website develop by Vue.js ScreenShots Project setup $ yarn install Compiles and hot-reloads for development $ y

William Chang 7 Jul 29, 2022