<script lang="ts" setup>
import { Chrome } from '@ckpack/vue-color'
import { computed } from '#imports'

interface Props {
  modelValue?: any
  mode?: 'hex' | 'hex8' | 'hsl' | 'hsv' | 'rgba'
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => '#00FFFFFF',
  mode: () => 'hex8',
})

const emit = defineEmits(['update:modelValue', 'input'])

const picked = computed({
  get: () => props.modelValue || '#00FFFFFF',
  set: (val) => {
    emit('update:modelValue', val[props.mode] || null)
    emit('input', val[props.mode] || null)
  },
})
</script>

<template>
  <Chrome v-model="picked" />
</template>

<style scoped></style>
