feat(ColorPicker): implement component (#2670)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app/components/content/examples/color-picker/ColorPickerChooserExample.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const color = ref('#00C16A')
+
+const chip = computed(() => ({ backgroundColor: color.value }))
+</script>
+
+<template>
+  <UPopover>
+    <UButton label="Choose color" color="neutral" variant="outline">
+      <template #leading>
+        <span :style="chip" class="size-3 rounded-full" />
+      </template>
+    </UButton>
+
+    <template #content>
+      <UColorPicker v-model="color" class="p-2" />
+    </template>
+  </UPopover>
+</template>

docs/content.config.ts

@@ -39,7 +39,7 @@ export const collections = {
     type: 'page',
     source: [{
       include: '**/*'
-    }, pro!],
+    }, pro!].filter(Boolean),
     schema
   })
 }

docs/content/3.components/color-picker.md

@@ -0,0 +1,150 @@
+---
+title: ColorPicker
+description: A component to select a color.
+links:
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/tree/v3/src/runtime/components/ColorPicker.vue
+navigation.badge: New
+---
+
+## Usage
+
+Use the `v-model` directive to control the value of the ColorPicker.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: '#00C16A'
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+ignore:
+  - defaultValue
+props:
+  defaultValue: '#00BCD4'
+---
+::
+
+### RGB Format
+
+Use the `format` prop to set `rgb` value of the ColorPicker.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - format
+external:
+  - modelValue
+props:
+  format: rgb
+  modelValue: 'rgb(0, 193, 106)'
+---
+::
+
+### HSL Format
+
+Use the `format` prop to set `hsl` value of the ColorPicker.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - format
+external:
+  - modelValue
+props:
+  format: hsl
+  modelValue: 'hsl(153, 100%, 37.8%)'
+---
+::
+
+### HWB Format
+
+Use the `format` prop to set `hwb` value of the ColorPicker.
+
+::component-code
+---
+ignore:
+  - modelValue
+  - format
+external:
+  - modelValue
+props:
+  format: hwb
+  modelValue: 'hwb(150, 0%, 24%)'
+---
+::
+
+### Throttle
+
+Use the `throttle` prop to set the throttle value of the ColorPicker.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  throttle: 100
+  modelValue: '#00C16A'
+---
+::
+
+### Size
+
+Use the `size` prop to set the size of the ColorPicker.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the ColorPicker.
+
+::component-code
+---
+props:
+  disabled: true
+---
+::
+
+## Examples
+
+### As a Color chooser
+
+Use a [Button](/components/button) and a [Popover](/components/popover) component to create a color chooser.
+
+::component-example
+---
+name: 'color-picker-chooser-example'
+---
+::
+
+## API
+
+### Props
+
+:component-props
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme