feat(ColorPicker): implement component (#2670)

Co-authored-by: Benjamin Canac <[email protected]>

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

package.json

@@ -85,9 +85,11 @@
     "@tailwindcss/postcss": "4.0.0-beta.5",
     "@tailwindcss/vite": "4.0.0-beta.5",
     "@tanstack/vue-table": "^8.20.5",
+    "@types/color": "^4.2.0",
     "@unhead/vue": "^1.11.13",
     "@vueuse/core": "^12.0.0",
     "@vueuse/integrations": "^12.0.0",
+    "color": "^4.2.3",
     "consola": "^3.2.3",
     "defu": "^6.1.4",
     "embla-carousel-auto-height": "^8.5.1",

playground/app/app.vue

@@ -29,6 +29,7 @@ const components = [
   'checkbox',
   'chip',
   'collapsible',
+  'color-picker',
   'context-menu',
   'command-palette',
   'drawer',

playground/app/pages/components/color-picker.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const colorHex = ref('#9C27B0')
+</script>
+
+<template>
+  <div class="flex flex-col gap-5">
+    <div class="flex items-center gap-2">
+      <span :style="{ backgroundColor: colorHex }" class="inline-flex w-5 h-5 rounded" />
+      <code class="font-mono">{{ colorHex }}</code>
+    </div>
+    <USeparator />
+    <div class="flex justify-between gap-2">
+      <UButton @click="colorHex = '#9C27B0'">
+        Purple
+      </UButton>
+      <UButton @click="colorHex = '#8BC34A'">
+        Lime
+      </UButton>
+      <UButton @click="colorHex = '#FF6347'">
+        Tomato
+      </UButton>
+    </div>
+    <USeparator />
+    <UColorPicker v-model="colorHex" @update:model-value="() => console.log('model update')" />
+  </div>
+</template>