Champ de couleur

VColorInput est un champ de formulaire qui contient une couleur. On peut la saisir dans n’importe quel format, et la pastille au début du champ ouvre VColorPicker dans un panneau.

Utilisation

vue

Brand colour

Hex, rgb(), hsl() or oklch().

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const color = ref<string | null>('#3b82f6')
</script>

<template>
  <div class="column">
    <VColorInput v-model="color" label="Brand colour" hint="Hex, rgb(), hsl() or oklch()." />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Exemples

Formats

Le champ accepte l’hexadécimal, rgb(), hsl() et oklch(). Entrée ou la sortie du champ réécrit la couleur selon format ; toute autre saisie remet le champ dans son état précédent.

vue

RGB

OKLCH

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const rgb = ref<string | null>('rgb(22 163 74)')
const oklch = ref<string | null>('oklch(62.7% 0.17 149.2)')
</script>

<template>
  <div class="column">
    <VColorInput v-model="rgb" format="rgb" label="RGB" />
    <VColorInput v-model="oklch" format="oklch" label="OKLCH" />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Opacité et nuancier

alpha et swatches sont transmis au sélecteur. La pastille du champ montre l’opacité sur un damier.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const color = ref<string | null>('rgb(14 165 233 / 0.6)')
const swatches = ['#0ea5e9', '#16a34a', '#f59e0b', '#e11d48', '#7c3aed', '#0f172a']
</script>

<template>
  <div class="column">
    <VColorInput v-model="color" format="rgb" alpha :swatches="swatches" label="Background" />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Effaçable

clearable ajoute une croix qui remet la valeur à null.

vue

Highlight

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const color = ref<string | null>('#7c3aed')
</script>

<template>
  <div class="column">
    <VColorInput v-model="color" label="Highlight" placeholder="No colour" clearable />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Validation

VColorInput suit le modèle des champs : error remplace l’aide et est annoncé. Les attributs comme name et required vont au champ de saisie.

vue

Theme colour

Choose a colour for the theme.

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const color = ref<string | null>(null)
</script>

<template>
  <div class="column">
    <VColorInput
      v-model="color"
      label="Theme colour"
      hint="Used for buttons and links."
      :error="color ? undefined : 'Choose a colour for the theme.'"
      required
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Tailles

size fixe la hauteur du champ à 32, 40 ou 48 pixels.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VColorInput } from 'vectis-ui'

const rows = ref(
  (['sm', 'md', 'lg'] as const).map((size) => ({ size, color: '#16a34a' as string | null })),
)
</script>

<template>
  <div class="column">
    <VColorInput
      v-for="row in rows"
      :key="row.size"
      v-model="row.color"
      :size="row.size"
      :label="row.size"
    />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

Lecture seule et désactivé

readonly affiche la couleur sans sélecteur. disabled bloque le champ et la pastille.

vue

Read-only

Disabled

<script setup lang="ts">
import { VColorInput } from 'vectis-ui'
</script>

<template>
  <div class="column">
    <VColorInput model-value="#7c3aed" label="Read-only" readonly />
    <VColorInput model-value="#7c3aed" label="Disabled" disabled />
  </div>
</template>

<style scoped>
.column {
  display: flex;
  flex-direction: column;
  gap: var(--vectis-space-5);
  max-inline-size: 20rem;
}
</style>

API

Props

Prop	Type	Défaut
`format`	`ColorFormat'hex' \| 'rgb' \| 'hsl' \| 'oklch'`	`'hex'`
Écriture de la valeur. Le champ accepte les quatre formats.
`alpha`	`boolean`	`false`
Ajoute une piste d’opacité au sélecteur et écrit l’alpha en dessous de 1.
`swatches`	`ColorSwatch[]`	aucune
Couleurs prédéfinies proposées dans le sélecteur.
`hideEyeDropper`	`boolean`	`false`
Masque la pipette du sélecteur.
`label`	`string`	aucune
Libellé visible. Sans nom visible, fournissez `aria-label` ou `aria-labelledby`.
`hint`	`string`	aucune
Texte d’aide relié par `aria-describedby`.
`error`	`string`	aucune
Message d’erreur affiché à la place de l’aide. Définit `aria-invalid` et est annoncé à son apparition.
`placeholder`	`string`	aucune
Texte indicatif affiché quand le champ est vide.
`size`	`ColorInputSize'sm' \| 'md' \| 'lg'`	`'md'`
Taille du composant.
`compact`	`boolean`	`false`
Réduit la hauteur du contrôle sans changer le texte ni les icônes.
`disabled`	`boolean`	`false`
Désactive l’interaction.
`readonly`	`boolean`	`false`
Empêche la saisie et retire le sélecteur. Le champ reste focalisable.
`invalid`	`boolean`	`false`
Définit `aria-invalid` et le style d’erreur. Ne bloque pas l’envoi du formulaire à lui seul.
`clearable`	`boolean`	`false`
Ajoute un bouton qui vide la valeur.
`clearLabel`	`string`	aucune
Nom accessible du bouton d’effacement. Par défaut, celui du dictionnaire de la bibliothèque.
`pickerButtonLabel`	`string`	aucune
Nom accessible de la pastille qui ouvre le sélecteur. Par défaut, celui du dictionnaire de la bibliothèque.
`placement`	`ColorInputPlacement'bottom' \| 'bottom-start' \| 'bottom-end' \| 'top' \| 'top-start' \| 'top-end'`	`'bottom-start'`
Position préférée du panneau par rapport au champ.
`v-model`	`string \| null`	`null`
Couleur écrite selon `format`, ou `null` quand le champ est vide. Le texte saisi la met à jour sur Entrée ou à la sortie du champ.

Événements

Événement	Type
`clear`	`[]`
La valeur a été effacée ; le modèle est déjà réinitialisé.

Slots

Slot	Type
`value-end`	`{}`
Contenu placé avant le bouton d’effacement.

Types

Types utilisés dans les tables d’API. Importez les types exportés depuis vectis-ui.

export type ColorSwatch = string | { color: string; label: string }

Variables CSS

Token	Valeur
`--vectis-control-size-color-picker-checker`	`0.5rem`