anish2690 / vue-color-kit Goto Github PK

Reproduction

When you change the transparent of color, rgba changed with alpha value but the hex is not changed.

Steps to reproduce the behavior

Input rgba value to rgba(255, 255, 255, 0.5)

Expected behavior

Hex value should be #FFFFFF80

Actual behavior

Hex value is #FFFFFF

Additional information

You could try directly on demo page.

Reproduction

Normal project example to reproduce but using vue3

Steps to reproduce the behavior

Just pick any color in any canvas

Actual behavior

Show this error in console on file runtime-dom.esm-bundler.js:1427
Unable to preventDefault inside passive event listener invocation

We were working on a graphic editor somewhat like Canva, and we rely upon this package a lot.
We use blur event in vue to close the color-picker when someone clicks outside the modal. And as expected, it works fine just fine except in one single condition.

Issue

• If we click/type within the input fields (HEX and RGBA) and then click outside to close the modal, the blur event won't get triggered, unless we click within the modal somewhere else to regain the focus and then click outside to close it.

<ColorPicker
  :color="color"
  @changeColor="changeColor"
  theme="dark"
  class="colorpicker-box"
  @blur="close"
  :colors-default="[
    'null',
    '#FFFFFF',
    '#FF1900',
    '#F47365',
    '#FFB243',
    '#FFE623',
    '#6EFF2A',
    '#1BC7B1',
    '#00BEFF',
    '#2E81FF',
    '#5D61FF',
    '#FF89CF',
    '#FC3CAD',
    '#BF3DCE',
    '#8E00A7',
    'rgba(0,0,0,0)',
  ]"
/>

What problem is this solving

Depending on the design requirement, it might be a good idea to add an apply and cancel control on the color picker.

There is no documentation on how to do this.

Proposed solution

Is there someone that knows how to do it? We may want this in the doc.

Describe alternatives you've considered

Looked for others colour picker libraries, didn't find my happiness.

No changes, simply use the component. It seems to be including the padding as part of the inner content width, and therefor it doesn't look proper?

The width prop is not working either, even tho a PR exists to add it, it's not actually present. So maybe it doesn't exist anymore?

Nice work on this! Can you make Box.vue and either Colors.vue optional? It would be nice to slim it down when necessary.

引入之后样式是这样的

For example try entering #000

The selector-circle (slide) in the saturation part should stay at the same x,y coordinates when shifting the hue.
Look at how photoshop or the native webkit color picker works.

In your color picker it jumps the selected color to the top most right corner.
This can be solved by only altering the hue value of the selected color in ColorPicker's selectHue(color: any).
You could do Object.assign(this, { r, g, b, h }); and ignore the s and v values,

It is impossible to set corner colors such #ffffff #000000 or rgb(255,0,0) by moving the cursor over the saturation selector.
You get colors near them, but not exactly those. For example for black I am getting rgba(1, 0, 1, 1) instead of rgba(0, 0, 0, 1)

Reproduction

<script lang="ts" setup>
import { ColorPicker } from 'vue-color-kit';
import 'vue-color-kit/dist/vue-color-kit.css';

const changeColor = (color: { hex: string }) => {
  console.log(color);
};
</script>

<template>
  <div>
    <ColorPicker :colors-default="colors" theme="light" :color="model" @changeColor="changeColor" />
  </div>
</template>

Expected behavior

When typing 0 it was expected to the colose shows the color, but nothing happens.

Actual behavior

Nothing happens when typing 0

Additional information

is it possible to make a gradient color picker?

tks.

as title
thank you

Reproduction

If possible, provide a boiled down editable reproduction using a service like JSFiddle, Codepen or CodeSandbox. A failing unit test is even better! Otherwise provide as much information as possible to reproduce the problem.
If no reproduction is provided and the information is not enough to reproduce the problem, we won't be able to give it a look

Steps to reproduce the behavior

Expected behavior

A clear and concise description of what you expected to happen.

Actual behavior

A clear and concise description of what actually happens.

Additional information

Add any other context about the problem here.

@anish2690 CDN URL for the rest of us that do not use npm?

Still insist on using vue2 notation