Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@radial-color-picker/vue-color-picker
Advanced tools
Readme
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:
You can find the documentation on the website. The documentation is divided into several sections:
The right color picker, but not the framework you're looking for?
Color Picker on npm
npm install @radial-color-picker/vue-color-picker
And in your app:
<template>
<ColorPicker v-bind="color" @input="onInput" />
</template>
<script>
import { reactive } from 'vue';
import ColorPicker from '@radial-color-picker/vue-color-picker';
import '@radial-color-picker/vue-color-picker/dist/vue-color-picker.min.css';
export default {
components: { ColorPicker },
setup() {
const color = reactive({
hue: 50,
saturation: 100,
luminosity: 50,
alpha: 1,
});
return {
color,
onInput(hue) {
color.hue = hue;
},
};
},
};
</script>
Please see Releases for more information on what has changed recently.
@vue/compat
If your app isn't ready to upgrade to Vue 3 you can slowly transition via @vue/compat
and the instructions provided there. 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.
[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:
configureCompat({ ATTR_FALSE_VALUE: false })
Details: https://v3.vuejs.org/guide/migration/attribute-coercion.html at <ColorPicker> at <App>
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.
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.
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"
/>
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.
This component is based on the great work that was done for the AngularJs color picker.
The MIT License (MIT). Please see License File for more information.
FAQs
Radial Color Picker - Vue
The npm package @radial-color-picker/vue-color-picker receives a total of 311 weekly downloads. As such, @radial-color-picker/vue-color-picker popularity was classified as not popular.
We found that @radial-color-picker/vue-color-picker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.