vue-tailwind-color-picker
Vue Tailwind Color Picker
Color picker for vue using Tailwind v2.
Requires Tailwind
Live demo
Installation
$ npm install vue-tailwind-color-picker
Usage
<template>
<vue-tailwind-color-picker v-model="color" :swatches.sync="swatches" :hide-swatches="false" @change="changedColor" @addSwatch="swatchAdded" @deleteSwatch="swatchDeleted" />
</template>
<script>
import VueTailwindColorPicker from 'vue-tailwind-color-picker.vue'
export default {
components: {
VueTailwindColorPicker
},
data() {
return {
color: '#00FF00FF',
swatches: [
'#f94144',
'#f3722c',
'#f8961e',
'#f9c74f',
'#90be6d',
'#43aa8b',
'#577590',
'#22223b',
'#4a4e69',
'#c9ada7'
]
}
},
methods: {
changedColor(color) {
console.warn('Changed Color', color)
},
swatchAdded(color) {
console.log('Swatch Added', color)
},
swatchDeleted(color) {
console.log('Swatch Deleted', color)
}
}
}
</script>
License
Dependencies
@babel/core: ^7.12.10@babel/preset-env: ^7.12.11@rollup/plugin-alias: ^3.1.1@rollup/plugin-babel: ^5.2.2@rollup/plugin-commonjs: ^17.0.0@rollup/plugin-node-resolve: ^11.0.1@rollup/plugin-replace: ^2.3.4@tailwindcss/postcss7-compat: ^2.0.3@vue/cli-plugin-babel: ^4.5.10@vue/cli-service: ^4.5.10autoprefixer: ^9.8.6cross-env: ^7.0.3minimist: ^1.2.5postcss: ^7.0.35rollup: ^2.36.1rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9tailwindcss: npm:@tailwindcss/postcss7-compat@^2.0.3vue: ^2.6.12vue-template-compiler: ^2.6.12