Can't get it to work with Vaadin 22 - build-frontend fails. Worked fine in

Directory Color Picker Field for Flow
1

Can’t get it to work with Vaadin 22 - build-frontend fails. Worked fine in Vaadin 14 for us.

2

You need to make a small change to the frontend JS.

Edit line 2 of node_modules/@appreciated/color-picker/theme/lumo/components/color-picker-responsive-canvas-styles.js

It should be changed to read:
import '@vaadin/vaadin-button/theme/lumo/vaadin-button.js';

3

Thanks for the feedback!
Would it be possible for you to supply a new version with this change as local modifications won’t be possible in our deployment process…?

4

Unfortunately I don’t have access to the Github repository, and my attempts to contact the original developer have been unsuccessful.

5

You can update your webpack.config.js and add this:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');

mergedConfig = merge(flowDefaults, {

});
// hack for color picker
mergedConfig.resolve.alias['@vaadin/vaadin-button/theme/lumo/vaadin-button-styles.js']
 = '@vaadin/button/theme/lumo/vaadin-button-styles.js';
module.exports = mergedConfig;

It’s working in Vaadin 23, I didn’t test it in Vaadin 22

6

This seems to get it compiling and mostly working (in Vaadin 23 flow) but doesn’t work properly. Issues I still see:

  1. clicking on select or cancel no longer hides the color selector popup, though it does update the field on select. I’m guessing that this is a side effect of JC’s hack above.
  2. I’ve been unable to get resizing of the popup to work reliably. Adding the resize attribute enables dragging it but: a) if the position of the popup couldn’t be placed as desired (e.g. too low on the visible screen) vertical resize seems to result in a strange inverted behavior: e.g. dragging upward shrinks the popup by moving the top edge downward. b) horizontal resize doesn’t change the internal component layout (I can fix this with some styling, but still, it seems this should be built in).

Edit: forking and rebuilding for vaadin 23 results in the same bad behavior. Note that the basic fix referenced by JC was merged to the npm color-picker module in https://github.com/Juchar/color-picker/commit/6c98bdd5bf8b3604a4d45ec1ef4d941782f90f7d#comments but hasn’t been released as of yet.

See https://github.com/mthome/color-picker-field-flow/commit/452252b713b81c56995422797bf0e0ee00c415ef for my trivial v23 port