untemps / svelte-palette Goto Github PK
View Code? Open in Web Editor NEWSvelte component to display a customisable color picker
Home Page: https://svelte-palette.vercel.app
Svelte component to display a customisable color picker
Home Page: https://svelte-palette.vercel.app
Add a way to set the number of columns to display in the palette.
Colors are currently defined with a hexa-string through the colors
prop.
For some specific use cases, it might be useful to assign a name to each color slot.
For the technical part, this means that the colors props should change to accept an array of colors as an object:
[
{ name: 'Foo', value: '#ff0000' },
{ name: 'Bar', value: '#ff0000' },
{ name: 'Gag', value: '#ff0000' }
]
For some backward compatibility purposes, the legacy color format should still be supported.
In addition, when using the color input, a new field should allow to name the new color.
The color name must be exposed by the color slot slot API to be used for customization.
Issues to address:
Add a way to toggle from the original palette to a compacted version with a restricted selection of colors and minimal spaces.
Th API should allow to choose the colors that are part of the compacted palette.
No clue where to embed the toggling control. May be at the very first position of the slot list or into the footer.
Current component values are not fully passed to slots. That means we cannot use them in custom renderings.
Slot List:
selectedColor
selectedColor
color
, selectedColor
, transition
, isCompact
selectedColor
, inputType
We may take advantage of this issue to do few more things:
Slots are currently deleted checking the value of the selected slot. That means if several slots have the same value, each of them is removed.
Instead it would be better to reference slots by color and delete the slot a the selected index only.
Hi Vincent,
Thanks for the great lib, it saved me a few days of work.
I have this error when automatically deploying on Vercel (through git push). I don't have issues when compiling locally, I'm not sure about the cause of it as I can't reproduce it, and I can't access the generated files by Vercel. So I thought, you might have some ideas:
import { extractByIndices } from "@untemps/utils/array/extractByIndices";
^^^^^^^^^^^^^^^^
SyntaxError: Named export 'extractByIndices' not found. The requested module '@untemps/utils/array/extractByIndices' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@untemps/utils/array/extractByIndices';
const { extractByIndices } = pkg;
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
It might be convenient to implement an alternative way to delete a color slot.
The palette displays a tooltip on slot hover when allowDeletion
is set to true so far. However, we may propose a deletionMode
prop, with two values: tooltip
and drop
, in replacement of allowDeletion
, which, when set, allows to delete a slot the way we defined it.
API proposal:
`deletionMode`: "tooltip" | "drop" | "none" (default)
Need declaration file for types
Could not find a declaration file for module '@untemps/svelte-palette'. 'C:/drewbitt/GitHub/project/node_modules/.pnpm/@[email protected]/node_modules/@untemps/svelte-palette/dist/index.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/untemps__svelte-palette` if it exists or add a new declaration (.d.ts) file containing `declare module '@untemps/svelte-palette';`ts(7016)
Add a settings section to customize the kind of features we went for the palette.
We may embed some of the configuration parameters we've got in the demo app :
The access to the settings section may be set behind a prop flag showSettings
For some use cases, it would be nice to set a prop limiting the number of columns to be displayed.
This would be applicable when numColumns
is lower or equal to 0 only, because, in this case, adding a slot of color always creates a new column. If maxColumns
is set, slots would wrap on an additional row when the limit is reached.
Hey im trying to use this for my project but i cant figure out how to change the background color of the component any help?
The JS EyeDropper API is still experimental yet available on some browsers (Chrome, Edge and Opera).
We should propose a new button to open an EyeDropper and allow the user to select a color. This color would be inserted in the input. The user then would have to click the Add button to create a new slot in the palette.
If the API is not available, the button would not be displayed.
As the input is involved in the process, we should add the EyeDropper button inside the PaletteInput
component. Embedding the button in a PaletteEyeDropper
component and exporting it would allow to use it without the input.
API PaletteEyeDropper
component proposal:
add: (color) => {}
Event dispatched when a color is selectedbuttonAriaLabel: string
Aria label of the buttonGitHub Actions runs deprecated packages as they're based on Node 16 which is deprecated itself:
We should upgrade those packages to the last version (v4 for all).
The component uses a internal util function to resolve classnames based on condition checks.
The @untemps/utils package contains such a function. We can replace the internal one by the one included in the external package.
To reproduce:
In dev mode, uncheck the Preselect color
option. If displayed, the empty slot should be selected.
Then click a slot. The slot should not be selected. Click it one more time, it should work.
Sometimes, it would be useful to split the slots of colors into groups, to create collections for instance.
The colors
prop could be set with an array of specific object, like so:
const colors = [
{ name: 'Yellows', colors: ['#ff0', '#0f0', '#0ff'] }
]
Expected issues:
compactColorIndices
is not relevant for groups of colors: what indices of are they?When containing several slots with the same color and updating the allowDuplicates
prop to false, duplicated slots are preserved.
We should remove them to be consistent.
Hello, can you update the dependencies to use Svelte 4 please.
Thanks
We may propose a new prop to the Palette and PaletteInput components : inputType
with two values text
or color
.
The value of the prop would be directly passed down to the HTML input component.
We may have to amend the style of the input depending of the value.
We may also hide the slot on the left side of the input if inputType === 'color'
since in most browsers the selected color is displayed within the input.
The eyedropper tool may be hidden as well.
Add a way to define the animation to apply when slots are rendered into the DOM.
Seems like the exported bundle does not allowed to use the lib into a SvelteKit application.
To reproduce:
Instantiate the component with allowDeletion: true
and contentClassName: null
. The deletion tooltip should be displayed when hovering a slot.
Then update the component with contentClassName: [custom class]
and allowDeletion: false
(in that order). The tooltip should be displaed when hovering a slot as well even though it should not be.
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.