ColorPicker Mini

ColorPickerMini.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  type ColorPickerRootProps,
  type ColorPickerRootEmits,
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot v-bind="forwarded">
    <ColorPickerCanvas />
    <ColorPickerSliderHue />
  </ColorPickerRoot>
</template>

With vertical sliders

ColorPickerMiniVertical.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  ColorPickerSliderAlpha,
  type ColorPickerRootProps,
  type ColorPickerRootEmits
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot
    class="flex-row gap-3 w-auto"
    v-bind="forwarded"
  >
    <ColorPickerCanvas />
    <ColorPickerSliderHue orientation="vertical" />
    <ColorPickerSliderAlpha orientation="vertical" />
  </ColorPickerRoot>
</template>

With custom styles

ColorPickerMiniStyled.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  type ColorPickerRootProps,
  type ColorPickerRootEmits
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot
    class="bg-transparent p-0 !shadow-none gap-3 w-auto"
    v-bind="forwarded"
  >
    <ColorPickerCanvas
      :ui="{
        area: 'rounded-lg',
        thumb: 'h-6 w-6 border'
      }"
    />
    <ColorPickerSliderHue :ui="{ thumb: 'border' }" />
  </ColorPickerRoot>
</template>

With vertical sliders and custom styles

ColorPickerMiniVerticalStyled.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  ColorPickerSliderAlpha,
  type ColorPickerRootProps,
  type ColorPickerRootEmits
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot
    class="bg-transparent p-0 !shadow-none flex-row gap-3 w-auto"
    v-bind="forwarded"
  >
    <ColorPickerCanvas
      :ui="{
        area: 'rounded-none',
        thumb: 'border-2'
      }"
    />
    <ColorPickerSliderHue
      orientation="vertical"
      :ui="{
        track: 'rounded-none',
        thumb: 'w-6 h-2 border-4'
      }"
    />
    <ColorPickerSliderAlpha
      orientation="vertical"
      :ui="{
        track: 'rounded-none',
        thumb: 'w-6 h-2 border-4'
      }"
    />
  </ColorPickerRoot>
</template>