ColorPicker

ColorPickers permitem aos usuários escolherem cores de modo visual.

---

Quando usar:

• Use o ColorPicker em cenários em que o usuário precisa escolher uma cor dentre um conjunto de cores disponíveis.
• Use o ColorPicker em conjunto com inputs caso queira que o usuário visualize o valor HEX da cor escolhida.
• Em caso de poucas opções de cor dê preferência ao ColorPicker no modo inline.

Obs:

• O ColorPicker não permite ao usuário escolher qualquer cor, apenas cores disponíveis no Cuida.
• O modo como você estrutura o array (matriz) da prop swatch importa na renderização do componente. Ex.: se você tiver 3 linhas na matriz o ColorPicker renderizará 3 linhas de cores.
• O ColorPicker emite a cor selecionada como uma string contendo o HEX da cor.

---

Uso

<CdsColorPicker
	v-model="color"
	label="Cor"
	:swatch="[
		[
			'$gp-400',
			'$ts-400',
			'$bn-400',
			'$in-400',
			'$vr-400',
		],
		[
			'$pp-400',
			'$rc-400',
			'$og-400',
			'$al-400',
			'$n-400',
		],
	]"
	:inline="true"
/>

---

Preview

Inline

Cor

⚠️ Div usada como demo. Não faz parte do ColorPicker.

Mostrar log

⚡Nenhum evento foi disparado

Com popover

⚠️ Div usada como demo. Não faz parte do ColorPicker.

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
* modelValue (required)	string		--	Guarda a cor selecionada no Color Picker.
label	string	'Label'	--	Especifica a label do ColorPicker.
inline	boolean	false	--	Quando true passa a mostrar as opções de cores fora do popover.
popoverHeight	number	190	--	Especifica a altura do popover. ⚠️ Quando a prop inline estiver ativa essa prop não surte efeito.
swatch	array	[]	--	Conjunto de cores a serem renderizadas no ColorPicker. A prop espera um Array de Array de tokens de cor. Ex.: tokens.$gp-400

Eventos

Nome	Descrição
@update:modelValue	**Implementa v-model**. Evento utilizado para emitir a *cor* selecionada. A cor é emitida como uma string no formato HEX.
@update:colorVariant	Evento utilizado para emitir a *variante* da cor selecionada. A variante é emitida como uma string. ⚠️ Importante: a variante emitida só irá mudar se a cor mudar. A mudança de shade dentro da mesma cor não altera a variante. Ex.: tokens.$gp-400 e tokens.$gp-600 emitirão a mesta variante, a saber, "green".

---