baianat / verte

🎨 A Color picker component. Built from the bottom to work with Vue.js.
https://baianat.github.io/verte/
MIT License
181 stars 42 forks source link

feat: improve recent colors #20

Closed logaretm closed 5 years ago

logaretm commented 5 years ago

This PR implements a Vue based store to manage shared values among verte instances, like recentColors.

The recent colors have been extracted to an external state, and exposed as a computed prop on the verte instance.

This PR also adds the ability to define initial recent colors to start with, instead of random colors and offers a callback for when those colors change to allow developers to persist colors to an external storage like localStorage.

// example on a persisted recent colors using localStorage
Vue.use(Verte, {
  recentColors: JSON.parse(localStorage.getItem('colors')),
  onRecentColorsChange (colors) {
    localStorage.setItem('colors', JSON.stringify(colors));
  }
})

This means Verte can be used as a Vue plugin which will initialize the store values and install the component globally.

The only downside, that it makes initializing a different recent list for each component not possible at this moment.

codecov-io commented 5 years ago

Codecov Report

Merging #20 into master will increase coverage by 2.01%. The diff coverage is 61.53%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master      #20      +/-   ##
==========================================
+ Coverage    30.8%   32.82%   +2.01%     
==========================================
  Files           5        6       +1     
  Lines         383      393      +10     
  Branches       64       66       +2     
==========================================
+ Hits          118      129      +11     
+ Misses        257      253       -4     
- Partials        8       11       +3
Impacted Files Coverage Δ
src/store.js 61.11% <61.11%> (ø)
src/components/Verte.vue 32.53% <62.5%> (+2.85%) :arrow_up:

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 89c1b65...7c98da1. Read the comment docs.