<script setup>
import { ref, computed } from 'vue'
import useStyle from '../hooks/useStyle'

defineOptions({
  name: 'VColorPicker'
})

const root = ref(null)

const props = defineProps({
  field: {
    type: Object,
    required: true
  }
})

const model = defineModel({ type: String })

const { style } = useStyle(props)

const width = computed(() => {
  return style.value.width ? style.value.width : 'auto'
})

defineExpose({
  root,
  get color() {
    return root.value.color
  },
  show() {
    root.value.show()
  },
  hide() {
    root.value.hide()
  },
  focus() {
    root.value.focus()
  },
  blur() {
    root.value.blur()
  }
})
</script>

<template>
  <el-color-picker ref="root" v-model="model" v-bind="field"> </el-color-picker>
</template>

<style>
.el-color-picker {
  width: v-bind(width);
}
</style>