[Feature request] Border only for white (or other colors)

[hmaesta]

It would be great if there is an option to add border just for some color (mainly because of white).

Something like:

<swatches v-model="input" :colors="colors" :show-border-for="borderedColors" />

export default {
    data() {
        return {
            colors: [ '#000000', '#333333', '#999999', '#CCCCCC', '#EEEEEE', '#F4F4F4', '#FFFFFF' ],
            borderedColors: [ '#EEEEEE', '#F4F4F4', '#FFFFFF' ]
        }
    }
}

---

Temporary workaround

Right now I just need to add border for white, so I set it as my last color and apply border with SCSS.

.vue-swatches {
    .vue-swatches__container {
        .vue-swatches__wrapper {
            .vue-swatches__swatch {
                &:last-child {
                    box-shadow: inset #CCC 0 0 0 1px;
                }
            }
        }
    }

I also set border for the trigger, for when user select white (but appears to all colors, since it's not possible to "detect" with CSS when it's white).

.vue-swatches {
    .vue-swatches__trigger {
        box-shadow: inset #CCC 0 0 0 1px;
    }
}

Thank you for the great component!

[saintplay]

This definitely will be possible with the object syntax coming in 2.0.

export default {
    data() {
        return {
            colors: [
                '#000000',
                '#333333',
                '#999999',
                '#CCCCCC',
                { color: '#EEEEEE', border: true },
                { color: '#F4F4F4', border: true },
                { color: '#FFFFFF', border: true }
            ]
        }
    }
}

[saintplay]

Vue Swatches 2 is finally out, it have support for swatch objects.
You can check it here https://github.com/saintplay/vue-swatches/releases/tag/v2.0.0