vue-materialize colopicker.js

export default {
    name: 'color-picker',
    template: /*html*/ `

    <div class="row" style="margin-bottom:0;">
        <div 
            class="input-field col s12"
            @click="openColorPicker">
            <i class="material-icons prefix">color</i>
            <input 
                type="text"
                disabled
                v-model="color" />
            <span class="highlight"></span>
            <span class="bar"></span>
            <label>{{title}}</label>
            <input 
                ref="colorInput"
                type="color" 
                style="visibility:hidden;"
                v-model="color"
                @input="$emit('colorSelected',color)" />
        </div>
    </div>
    `,
    props: ['title', 'default'],
    data() {
        return { color: this.default || '#fff' };
    },
    methods: {
        openColorPicker() {
            this.$refs.colorInput.focus();
            this.$refs.colorInput.click();
        },
    },
};