Custom colopicker example

Fieldtype.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  data() {
    return {
      loading: true,
      open: false,
      colors: ['#F64272', '#F6648B', '#F493A7', '#F891A6', '#FFCCD5', '']
    }
  },
  template: `<div>
  <div class="uk-flex">
    <span :style="{backgroundColor: model.color}" @click="open = !open" class="uk-button uk-margin-small-right">
      <i style="background-color: rgba(255,255,255,0.7); padding: 2px 5px; border-radius: 50%;" class="uk-icon-caret-down"></i>
    </span>
    <input class="uk-width-1-1" v-model="model.color" @focus="open = true" type="text" />
  </div>
  <div v-show="open" style="box-shadow: 4px 0px 8px 0px rgba(0,0,0,0.2); border-radius: 3px; padding: 5px; border: 1px solid #CCC; line-height: 0; display: inline-block;"
       class="uk-margin-small-top">
    <swatches v-model="model.color" :colors="colors" @input="open = false" inline />
  </div>
</div>`,
  methods: {
    initWith() {
      return {
        plugin: 'official-colorpicker',
        color: ''
      }
    },
    loadCss() {
      var newEl = document.createElement('link')
      newEl.rel = 'stylesheet'
      newEl.type = 'text/css'
      newEl.href = 'https://unpkg.com/vue-swatches/dist/vue-swatches.min.css'
      document.body.appendChild(newEl)
    },
    pluginCreated() {
      this.loadCss()
    }
  },
  components: {
    swatches: (resolve) => {
      var script = document.createElement('script')
      var prior = document.getElementsByTagName('script')[0]
  
      script.async = 1
      script.onload = script.onreadystatechange = function( _, isAbort ) {
        if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState) ) {
          script.onload = script.onreadystatechange = null
          script = undefined
  
          if(!isAbort) { resolve(VueSwatches) }
        }
      }
  
      script.src = 'https://unpkg.com/vue-swatches'
      prior.parentNode.insertBefore(script, prior)
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}