baianat / verte Goto Github PK

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.

Describe the bug
When verte picker is inside a div which have scrollbar it's trigger close and gone every time I scroll by dragging scrollbar.

To Reproduce
Steps to reproduce the behavior:

1. Place verte within a div which have scrollbar (overflow: auto)
2. Click on verte guide to open the picker
3. Scroll the parent div by dragging scrollbar
4. See color picker is close

Expected behavior
Opened color picker should remain open while it's within a div with scrollbar and the div is scroll.

Demo
See Here

Desktop (please complete the following information):

• Windows 10
• Chrome

Describe the bug
If a verte color picker component is mounted and then destroyed, any resizing of the window will trigger the errror:

Uncaught TypeError: Cannot set property 'value' of undefined at eval
(/node_modules/verte/dist/verte.js:1005)

This is because the resize event listener which is created inside the initEvents() method is not removed when the component is destroyed.

The number of errors triggered on each resize event multiplies by the number of color pickers on a route and the number of times the route is navigated away from.

Is your feature request related to a problem? Please describe.

• unless I'm missing something, there's no way to hide the panel immediately upon picking a color
• the user has to take the extra step of closing the panel with the x or clicking away after picking a color

Describe the solution you'd like

• a smoother user experience would be to allow the checkmark submit button to hide the panel

Describe the bug
The selector circle and track selectors leave the bounds of the color picker.

To Reproduce
Steps to reproduce the behavior:

1. Go to docs -> RGB Sliders
2. Click on any predefined color
3. The track selectors are off the picker

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox Developer
• Version: 70.0b13

Additional context

Describe the bug
If you enter a hex color but are missing the hash (#) the color picker won't select your color.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/DaveZ123/full/YzEPmxP
2. Click on the text box
3. Enter "ffffff"
4. Click the check mark
5. See that the color picker does not update

Expected behavior
The color picker should handle hex values that don't start with "#"

Demo
https://codepen.io/DaveZ123/full/YzEPmxP

Desktop (please complete the following information):

• All devices

https://baianat.github.io/verte/examples.html
First screen - this is the lowest picker position, #000000 - it's okay.
Second screen - the topmost picker position, it should be #ffffff like on the button above (white), but the picker gives #ff7777 (pink)

Describe the bug
Color in color picker initially not displaying. See screenshot:

To Reproduce
This actually only happens when you have the color picker in a component that is not initially rendered. In my case I wanted the color picker in a sidebar component, that only renders when it has to.

I could only work around by something like this:

mounted() {
    setTimeout(() => { this.keyUsedOnVerte = someInt }, 1500);
}

Desktop (please complete the following information):

• OS: macOS
• Browser chrome

Trying to drag the slider dots on mobile devices has no effect:

• On Android/Chrome dragging the dots does nothing
• On iPad/Safari dragging the dots scrolls the page

On iPad/Safari I can't even get the slider__track to respond to touch events - I can't change the hue at all without using the text input.

Everything works fine except one;

As shown in picture, after selecting the color i'm pressing the "tick" button but it's not closing.
Help.

Please I'm just curious, when is Vue 3 support coming?
I feel stuck choosing to use Vue 3 instead of 2. There aren't much OSS work on Vue 3 out there yet. I'm just tired having to do everything myself because there's mostly no Vue 3 support yet.

in verte/dist/verte.js:1193, verte/dist/verte.js:1658, verte/dist/verte.js:2483 it says component.__file = "/mnt/c/Users/Abdelrahman/Projects/verte/src/components/Verte.vue";

Describe the bug
Alpha value resets when select color from picker, or change hue from slider.

To Reproduce
Steps to reproduce the behavior:

1. change alpha using slider, to be any value rather than 1
2. select another color form picker square/wheel

Expected behavior
The alpha value remains the same as I selected it.

Desktop:

• OS: Windows 10
• Browser Chrome, Safari, Edge

in the API documentation, in the API table, the model row is duplicated

Fabulous project. I really like your circular picker. Why doesn't the rest of the world do it your way?

Oops. Pilot feebleness. I am having difficulty getting the dist version to work from vanilla import verte. The white circle will not appear. Too bad for me, but the picker works well enough w/o the feedback circle for me to keep using verte anyway. So thanks for verte again. I do not expect my bug to be very high on your priorities. Excuse me. Wow. nice. your other projects look quite interesting.

When draggable==true, it is not obvious which bits of the background are draggable. Using cursor: grab on the draggable bits would help.

Also, you could make more of the background draggable by changing some of the padding to margin on .verte__controller and .verte__recent.

It was discussed before but thread was closed by bot.
Maybe we can go back to that issue.

I'm using Verte in system where background color can be set but when provided as null it's treated as transparent. I'd like to use Verte here.
On one hand adding "alpha" slider cause too much confusion within non technical users.
On the other hand forcing "black" is not a perfect solution as well.

How about prop allow-null that will simply return null instead of #000 when no color is provided?

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.

I need in some cases to send null value instead of default hex color #000, is that possible?

I tried this way:
<verte picker="square" v-model="hexColor" model="hex" :value="null" menuPosition="top">
...

data: function () {
    return { hexColor:null}
  },

but I always get #000000 instead of null.

Thanks for any reply or suggestion.

@abdelrahman3d

There are a lot of cases where a Color Picker can be partially hidden if it's located in the element with overflow: hidden:

Sandbox: https://codesandbox.io/s/5zy1m0809n

Solution
It can be fixed by appendPickerTo: '#element' option and position recalculation in relation to it.

Alternatives
position: fixed; + position recalculation can be also an option.

Hey guys,

Really great library, thanks for this!

Just letting you know that under 0.0.9 the color picker UI in "square" mode is invisible. By UI I mean the color gradient picker element. Reverting to 0.0.8 fixes it.

Is your feature request related to a problem? Please describe.
Importing into a TS project complained about a lack of type definitions

Describe the solution you'd like
a verte.d.ts file included in the project.

Is your feature request related to a problem? Please describe.
When using the color picker on dynamic setting where the value can be any valid color value (hex, rgb,rgba etc), the picker breaks and sets black as initial color.

Describe the solution you'd like
I expect the input value to be auto detected then converted to whatever you set the output value, so if the initial value is #ff0000 and the output model is rgba, it should convert #ff0000 to rgba value. Also, if value is empty, the output will be empty until an actual change has been performed.

Describe alternatives you've considered
Manually converting the value before passing it to verte.

See this video https://take.ms/UGtZ9 , hex result not correct!

How to change the position of the gradient, so that it was like for example in Photoshop? I attach a screenshot of their color selection — https://take.ms/oDgPw. The current gradient is completely inconvenient, since the user wants to select a contrasting color simply by moving the cursor to the upper right corner.
Thank

Hey guys

When scrolling hard upper left on the picker canvas it's impossible to select #ffffff, #fefefe is the closest match:

I found the enableAlpha prop in the source code but it's not mentioned in the docs.

Describe the bug
When the configured model is anything but RGB The sliders still operate as if the model was still RGB. causing them to have no effect on the current color.

The random colors still work fine, and the underlying RGB object is correctly synced. The HSL is not.

To Reproduce
Steps to reproduce the behavior:

1. Register the verte component
2. Pass model="hsl" to the props and bind the value to a data prop.

<verte display="vertical" v-model="color" model="hsl"></verte>
displayed color: {{ color }}

Expected behavior
The bound color should be displayed in HSL format or the configured model format.

Demo

https://codesandbox.io/s/v622j3lqy

Cannot set property 'value' of undefined
Uncaught TypeError: Cannot set property 'value' of undefined at eval (verte.esm.js?36fc:1072) eval @ verte.esm.js?36fc:1072 requestAnimationFrame (async) updateValue @ verte.esm.js?36fc:1059 eval @ verte.esm.js?36fc:1098 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 Vue.$nextTick @ vue.common.dev.js?4650:3520 beforeMount @ vuetify.js?ce5b:37200 invokeWithErrorHandling @ vue.common.dev.js?4650:1859 callHook @ vue.common.dev.js?4650:4216 mountComponent @ vue.common.dev.js?4650:4040 Vue.$mount @ vue.common.dev.js?4650:9040 Vue.$mount @ vue.common.dev.js?4650:11940 init @ vue.common.dev.js?4650:3121 createComponent @ vue.common.dev.js?4650:5969 createElm @ vue.common.dev.js?4650:5916 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 patch @ vue.common.dev.js?4650:6466 Vue._update @ vue.common.dev.js?4650:3942 updateComponent @ vue.common.dev.js?4650:4063 get @ vue.common.dev.js?4650:4474 Watcher @ vue.common.dev.js?4650:4463 mountComponent @ vue.common.dev.js?4650:4070 Vue.$mount @ vue.common.dev.js?4650:9040 Vue.$mount @ vue.common.dev.js?4650:11940 init @ vue.common.dev.js?4650:3121 createComponent @ vue.common.dev.js?4650:5969 createElm @ vue.common.dev.js?4650:5916 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 createChildren @ vue.common.dev.js?4650:6044 createElm @ vue.common.dev.js?4650:5945 patch @ vue.common.dev.js?4650:6505 Vue._update @ vue.common.dev.js?4650:3945 updateComponent @ vue.common.dev.js?4650:4063 get @ vue.common.dev.js?4650:4474 run @ vue.common.dev.js?4650:4549 flushSchedulerQueue @ vue.common.dev.js?4650:4307 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 queueWatcher @ vue.common.dev.js?4650:4399 update @ vue.common.dev.js?4650:4539 notify @ vue.common.dev.js?4650:741 reactiveSetter @ vue.common.dev.js?4650:1066 proxySetter @ vue.common.dev.js?4650:4626 updateItem @ vuetify.js?ce5b:17646 eval @ vuetify.js?ce5b:17660 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 Vue.$nextTick @ vue.common.dev.js?4650:3520 updateItemsState @ vuetify.js?ce5b:17652 run @ vue.common.dev.js?4650:4563 flushSchedulerQueue @ vue.common.dev.js?4650:4307 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 queueWatcher @ vue.common.dev.js?4650:4399 update @ vue.common.dev.js?4650:4539 notify @ vue.common.dev.js?4650:741 reactiveSetter @ vue.common.dev.js?4650:1066 proxySetter @ vue.common.dev.js?4650:4626 set @ vuetify.js?ce5b:38473 updateSingle @ vuetify.js?ce5b:17698 updateInternalValue @ vuetify.js?ce5b:17664 updateMandatory @ vuetify.js?ce5b:17677 eval @ vuetify.js?ce5b:17654 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 Vue.$nextTick @ vue.common.dev.js?4650:3520 onRouteChange @ vuetify.js?ce5b:38882 run @ vue.common.dev.js?4650:4563 flushSchedulerQueue @ vue.common.dev.js?4650:4307 eval @ vue.common.dev.js?4650:1985 flushCallbacks @ vue.common.dev.js?4650:1911 Promise.then (async) timerFunc @ vue.common.dev.js?4650:1938 nextTick @ vue.common.dev.js?4650:1995 queueWatcher @ vue.common.dev.js?4650:4399 update @ vue.common.dev.js?4650:4539 notify @ vue.common.dev.js?4650:741 reactiveSetter @ vue.common.dev.js?4650:1066 SET_LOADING @ index.js?9b91:162 wrappedMutationHandler @ vuex.esm.js?2f62:840 commitIterator @ vuex.esm.js?2f62:462 eval @ vuex.esm.js?2f62:461 _withCommit @ vuex.esm.js?2f62:620 commit @ vuex.esm.js?2f62:460 boundCommit @ vuex.esm.js?2f62:405 _callee$ @ index.js?9b91:75 tryCatch @ DesignBank.common.js?6161:16706 invoke @ DesignBank.common.js?6161:16935 prototype. @ DesignBank.common.js?6161:16758 asyncGeneratorStep @ m5Ha:38 _next @ m5Ha:40 eval @ m5Ha:40 eval @ m5Ha:40 setLoading @ index.js?9b91:74 wrappedActionHandler @ vuex.esm.js?2f62:847 dispatch @ vuex.esm.js?2f62:512 boundDispatch @ vuex.esm.js?2f62:402 _callee2$ @ beforeEach.js?92df:17 tryCatch @ DesignBank.common.js?6161:16706 invoke @ DesignBank.common.js?6161:16935 prototype. @ DesignBank.common.js?6161:16758 asyncGeneratorStep @ kt+k:6 _next @ kt+k:8 eval @ kt+k:8 eval @ kt+k:8 startLoading @ beforeEach.js?92df:16 iterator @ vue-router.esm.js?8c4f:2252 step @ vue-router.esm.js?8c4f:1898 eval @ vue-router.esm.js?8c4f:1899 eval @ vue-router.esm.js?8c4f:2274 _callee$ @ beforeEach.js?92df:12 tryCatch @ DesignBank.common.js?6161:16706 invoke @ DesignBank.common.js?6161:16935 prototype. @ DesignBank.common.js?6161:16758 asyncGeneratorStep @ kt+k:6 _next @ kt+k:8 eval @ kt+k:8 eval @ kt+k:8 maintenance @ beforeEach.js?92df:6 iterator @ vue-router.esm.js?8c4f:2252 step @ vue-router.esm.js?8c4f:1898 step @ vue-router.esm.js?8c4f:1902 runQueue @ vue-router.esm.js?8c4f:1906 confirmTransition @ vue-router.esm.js?8c4f:2282 transitionTo @ vue-router.esm.js?8c4f:2152 push @ vue-router.esm.js?8c4f:2519 push @ vue-router.esm.js?8c4f:2953 push @ router.js?a11d:27 handler @ vue-router.esm.js?8c4f:1102 invokeWithErrorHandling @ vue.common.dev.js?4650:1859 invoker @ vue.common.dev.js?4650:2184 original._wrapper @ vue.common.dev.js?4650:7543 Show 80 more frames sentry.js?ef25:41 An error occurred. Message: Uncaught TypeError: Cannot set property 'value' of undefined Source: webpack-internal:///Nvws Line: 1073 Column: 34

Expected behavior
If this.$refs.input is available then only set the current value to it.

**Desktop **

• OS: [e.g. centOS]
• Browser [chrome]
• Version [0.12]

The reason I like Verte compared to other color pickers is the history. However, the history isn't shared between multiple instances of the component on the same page; and the history is forgotten if the component is used on different routes or opened conditionally with v-if instead of v-show (e.g. inside a modal popup in the centre of the page, which is how I have worked around #12)

Firstly, I think the history should be cached inside the component so the same history persists when the component is destroyed & recreated. Plus the initial history would then be shared between multiple instances on the same page. However, this wouldn't fix the problem of sharing updates to the history between multiple instances on the same page.

A better (additional) solution would be to accept the history as a prop:

• Then the developer can store each user's history in their database or localStorage (which I would like to do).
• If the prop is null or an empty list then the history should be hidden making the component smaller.
• The history prop would have to accept values according to the model prop.
• Making the history a prop would also fix the problem of sharing updates to the history between multiple instances on the same page, since it's reactive.

I don't think it's obvious to the user how to close the component without clicking on the 'tick' button. Clicking the background might not be obvious to many users. Plus I think the 'tick' button is too faint (as well as the rgb/hsl/hex button).

I suggest adding a close button next to the tick which closes the popup and also emits an input event with the original color.

Hi,

I'm trying to select something like this color in Hax: #43a0fddad and I want to validate that entered color code. Having already tried to find the props from docs but no luck. Also, tried something like this:

console.log(this.$refs.menu.selectColor(this.checkoutThemeColor, ''));

to validate color code but seems not worked!! Can anyone please help me to validate the color?

Thank you!

When clicking outside the component to close it, if you accidentally click on a button then that button's click event is fired.

To Reproduce
Steps to reproduce the behavior:

1. Open the component in display="vertical' mode with a button somewhere else on the page.
2. Click on the other button.
3. The component closes but the other button's click event also fires.

Expected behavior
Clicking outside a dialogue/popup to close it should not cause any other events.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
1- Place the verte component inside a form element:

<form>
  <verte></verte>
</form>

2- Click on the pick button and it will submit the form.

Expected behavior
The default guide button should not submit any forms containing the verte component. This makes picking the colors impossible in such forms.

Additional context
This issue is caused by the button element used within the verte component, the button element should have a type="button" attribute to prevent treating the color indication button as a submit button.

Describe the bug

Hey guys, I'm having problems with integrating verte into my application. First of all, let me say that it looks like a really lean lib that matches my needs exactly, so good job with that!

Here you see a screenshot of how the color picker currently looks like. Obviously, it doesn't render correctly (missing css?):

To Reproduce/ how my code looks like

my .vue file:

<template>
 <section>
... some other components
    <verte
        :picker="'wheel'"
        :model="'hex'"
        :value="colors">
    </verte>
 </section>
</template>

and

<script lang="ts">
...
import verte from 'verte'
...
export default {
  components: {
     someOtherComponents,
     verte
  }
}

Any suggestions on what I'm doing wrong? Is a css importing missing in the docu maybe?

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version: 69

Describe the bug
Widgets with a set black color (or without a set value) the first time you click in the color selection canvas, the value does not change.

It appears on examples page.

To Reproduce
Steps to reproduce the behavior:

1. Go to examples page in docs
2. Click on any widget with set black color (or withour a set value)
3. Click on color choose canvas
4. See is value not change

Expected behavior
Value is change

Desktop (please complete the following information):

• OS: Ubuntu
• Browsers: Firefox, Chrome
• Version: ^0.0.12

Describe the bug
When using model="hex" on the verte component, the component becomes unusable, the output color is incorrectly formatted (the alpha portion). And the sliders disappear.

To Reproduce

1. Use model="hex" on the verte component.
2. The sliders disappear, no way to modify the color.

Expected behavior

It should use the RGB sliders. And the output color should be in a correctly formatted hex value.

Additional context

The Hex color formatting issue can be tracked in this issue: baianat/color-fns#3

The sliders and color updates are implementation issues in verte.

Clicking on slider__track doesn't take drag offset into account.

Steps to reproduce the behavior:

1. Open the component with draggable=true
2. Drag the slider component slightly to the left (edited)
3. Click on the slider to change the hue
4. The hue is positioned offset by the amount you dragged.

Vertical offset is also ignored.

Only tested on Linux/Chrome so far.

If the component is inserted near the edge of a page, then when it opens it will be partially off the page causing the page to gain horizontal and possibly vertical scroll bars.

Steps to reproduce

1. Add the component with draggable=true near the edge of the screen, e.g. in a div with style="float: right"
2. Open the component
3. The page will get a horizontal scroll bar.

Expected behavior
The component should prevent itself openening outside the near the edge of the page (or container?)

It would also be nice (particularly on mobile devices) to have a prop to force the component to open in the center of the page.

Only tested on Linux/Chrome so far.

not able to disable color picker

Trying to set the initial value to have an alpha and its throwing an error.

Thanks!

Describe the bug
Passing a recentColors prop as an array of colors doesn't set the initial recent color palette.

I'm guessing in Verte.vue#L197:

\\ this:
      return initStore();
\\ needs to be:
      return initStore(Vue, {recentColors: this.recentColors});

edit: Added Vue as first parameter to initStore().

Incorrect pallete colors

Steps to reproduce the behavior:

1. See demo here https://baianat.github.io/verte/examples.html#widget
2. Pick color at top side
3. From above we see white color, and on an output another turns out.

Expected
Given I am using hex colors and set enableAlpha to true, when I drag the alpha slider, then the hex values should change and incorporate an alpha value to them.

Actual
The hex values do not incorporate the alpha value even when I set alpha to 0. If I attach a v-model to the component, then it looks like I am getting values like #FFFFFF.34 when I slide the alpha component, but they are overwritten by #FFFFFF without the alpha value.

Hey guys,

would it be possible to get a array of rgb values back? Right now you'll get a String like rgb(0, 0, 0).

To process this, i've got to use regular expressions to build an array:
https://regex101.com/r/4Uasyz/2

Let me know, what you think about this.

Best wishes
Christian

Master branch is not up to date with npm.
Can you please bump version ?