outl1ne / nova-color-field Goto Github PK
View Code? Open in Web Editor NEWA Laravel Nova package that adds a color picker to Nova's arsenal of fields.
License: MIT License
A Laravel Nova package that adds a color picker to Nova's arsenal of fields.
License: MIT License
Hi,
I'm using your field into my Nova visual Form Builder.
https://github.com/operativeit/nova-form-designer
As I need to work directly with the .vue component normally I've got an handler @input or @change but it looks that your component ignore them ?
Which vue event is fired when field is updated?
Can you give me an hand?
Regards
It seems that the lastest release of Nova 4 (4.26.0) added a compact()
method to Field
which Color
extends to.
This leads to the following error while trying to render the Color field
Declaration of Outl1ne\\NovaColorField\\Color::compact() must be compatible with Laravel\\Nova\\Fields\\Field::compact(bool $compact = true)
would be nice if the background on the preview field was checkered (opacity style).
this would make it easier to see the applied opacity
like displayed on
https://v1.tailwindcss.com/docs/background-color#class-reference
<td class="w-24 bg-checkered" style="background-color:transparent"></td>
ref: https://stackoverflow.com/questions/35361986/css-gradient-checkerboard-pattern
check and correct please
Hey @Tarpsvo
Great work you did with this colour picker!
Is there currently an option to hide the suggestions completely? I want to use it as a manual input field showing the colours after saving the form.
Best regards
Sebastian
Hi,
after updating to 1.1 I see an error TypeError: t is undefined
and the field stops working.
Any idea what that could be?
Hi there.
I am having issues using the alpha channel in either hex8
or rgba
mode using version 1.2.2
of the package. Not sure if the problem is also present in v2 and Nova 4.
Using Color::make('hex8')->chrome()->displayAs('hex8')->saveAs('hex8')
- picked example color #6657aa94
#6657aa94
background-color: rgba(102, 87, 170, 0.58);
instead of style="background-color: #6657aa94;
Actual | Expected |
---|---|
Note it would be nice if the main color (the square) also is updated with the proper color after the picker is closed (or even while the color picker is open).
Let me know what do you think. I could work on those fixes and enhancements this weekend maybe.
How can I clear the color value? If empty the field fills again with previous color...is there a way to allow empty value?
Friendly reminder that Laravel Nova V4 released today. Upgrade guide.
Color::make('Color', 'color')->help('Test')
Help text is not displayed. See:
I cannot seem to get it working under Nova 4. Is it supported? I could really use it in my project.
On the latest version of nova the field doesn't seem to work properly.
I tried different types, but all seem to give the same errors:
It only affects the adding of a new color, the detail field and edit field work fine.
For now the workaround seems to just give the field a default value:
Color::make('Color')->default(function () { return '#fff'; }),
TypeError: Cannot read property 'h' of undefined
TypeError: Cannot read property 'hex' of undefined
Nova 3.29.0
PHP 8
I would like to load pallete of tailwind colors into swatches tool but it does not work. Only mode where I can load my pallete is "simple". Is there any workaround to use this field and customize swatch mode?
Hi there.
There are issues using the alpha channel in rgba
mode with version 1.2.2
of the package.
Using Color::make('rgba')->chrome()->displayAs('rgba')->saveAs('rgba')
and picked example color
rgba(51, 84, 151, 0.43)
{"r":51,"g":84,"b":151,"a":0.43137254901960786}
json
value as string {"r":51,"g":84,"b":151,"a":0.43137254901960786}
instead as rgba
value like it really should rgba
color at all, it always loads black using background-color: rgb(0,0,0) instead of rgba(51, 84, 151, 0.43) When using the chrome picker, it always defaults to the hex mode/ux of the picker. It would be nice if we can control that with the displayAs()
method is used. For example when having displayAs('rgba')
chained on the field, when the picker is first opened it should default to the rgba
ux/styles of the picker instead of hex
.
Even better we can use that to automatically set the format which should be used to store the value.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.