feat: adiciona slot append em checkbox e checkboxgroup

docs/components/forms/checkbox-group.md

@@ -3,21 +3,27 @@
 CheckboxGroups são componentes de formulário que permitem seleções binárias e múltiplas.
 
 ---
+
 <br>
 
 ## Quando usar:
+
 - Quando precisar de um componente de formulário para seleções binárias com várias opções.
 
 <br>
 
 ## Quando não usar:
-- Quando for preciso que o efeito da interação com o Checkbox seja imediato. Checkboxes devem ser usados sempre em conjunto com um botão de submissão. Para contornar casos como esse, use Switches.
 
+- Quando for preciso que o efeito da interação com o Checkbox seja imediato. Checkboxes devem ser usados sempre em conjunto com um botão de submissão. Para contornar casos como esse, use Switches.
 
 ---
 
 ## Uso
 
+### Customização com Slot de Escopo (Scoped Slot)
+O `CheckboxGroup` expõe um único slot com escopo chamado `#append`. Ele permite customizar a área à direita de cada checkbox individual do grupo usando o objeto `option` atual.
+
+#### Exemplo 1: Exibindo um elemento padrão em todas as opções
 ```js
 <CdsCheckboxGroup
 	v-model="value"
@@ -39,7 +45,46 @@ CheckboxGroups são componentes de formulário que permitem seleções binárias
 		},
 	]"
 	:disabled="false"
-/>
+>
+	<template #append="{ option }">
+		<CdsBadge
+			variant="red"
+			size="md"
+		>
+			Badge
+		</CdsBadge>
+	</template>
+</CdsCheckboxGroup>
+```
+
+#### Exemplo 2: Renderização condicional para opções específicas
+Para customizar de forma exclusiva apenas determinados checkboxes, você pode utilizar a renderização condicional baseada na propriedade `option.value`:
+
+```js
+<CdsCheckboxGroup
+	v-model="value"
+	label="CheckboxGroup"
+	:options="[
+		{
+			label: 'Teste 1',
+			value: 'test-1',
+		},
+		{
+			label: 'Teste 2',
+			value: 'test-2',
+		},
+	]"
+>
+	<template #append="{ option }">
+		<span v-if="option.value === 'test-1'">
+			Texto exclusivo 1
+		</span>
+
+		<span v-if="option.value === 'test-2'">
+			Texto exclusivo 2
+		</span>
+	</template>
+</CdsCheckboxGroup>
 ```
 
 ---
@@ -70,6 +115,14 @@ CheckboxGroups são componentes de formulário que permitem seleções binárias
 />
 <br>
 
+## Slots
+
+<APITable
+	name="CdsCheckboxGroup"
+	section="slots"
+/>
+<br>
+
 <script setup>
 	import { ref } from 'vue';
 import CdsCheckboxGroup from '@/components/CheckboxGroup.vue';

docs/components/forms/checkbox.md

@@ -58,6 +58,13 @@ Checkboxes são componentes de formulário que permitem seleções binárias e m
 	section="events"
 />
 
+## Slots
+
+<APITable
+	name="CdsCheckbox"
+	section="slots"
+/>
+
 ---
 
 <script setup>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.158.4",
+	"version": "3.159.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/Checkbox.vue

@@ -32,6 +32,16 @@
 		>
 			{{ label }}
 		</label>
+
+		<div
+			v-if="$slots.append"
+			class="cds-checkbox__append"
+		>
+			<!-- @slot Slot para renderizar elementos adicionais à direita da etiqueta do checkbox. -->
+			<slot
+				name="append"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -253,5 +263,9 @@ export default {
 			color: tokens.$n-800;
 		}
 	}
+
+	.cds-checkbox__append {
+		margin-left: auto;
+	}
 }
 </style>

src/components/CheckboxGroup.vue

@@ -21,7 +21,18 @@
 				:label="option.label"
 				:disabled="disabled"
 				:variant="variant"
-			/>
+			>
+				<template
+					v-if="$slots.append"
+					#append
+				>
+					<!-- @slot Slot com escopo para renderizar elementos adicionais à direita de cada checkbox do grupo. -->
+					<slot
+						name="append"
+						:option="option"
+					/>
+				</template>
+			</CdsCheckbox>
 		</div>
 		<div
 			v-if="isInvalid && !disabled"
@@ -33,10 +44,10 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed, watch } from 'vue';
-import CdsCheckbox from './Checkbox.vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import variantClassResolver from '../utils/methods/variantClassResolver';
 import variantValidator from '../utils/validators/variant';
+import CdsCheckbox from './Checkbox.vue';
 
 defineOptions({ name: 'CdsCheckboxGroup' });
 

src/tests/Checkbox.spec.ts

@@ -7,10 +7,26 @@ describe('Checkbox', () => {
 		const wrapper = mount(Checkbox, {
 			props: {
 				modelValue: false,
-				label: 'checkbox test'
+				label: 'checkbox test',
 			},
 		});
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('renders append slot content', () => {
+		const wrapper = mount(Checkbox, {
+			props: {
+				modelValue: false,
+				label: 'checkbox test',
+			},
+			slots: {
+				append: '<span class="test-append">append content</span>',
+			},
+		});
+
+		expect(wrapper.find('.test-append').exists()).toBe(true);
+		expect(wrapper.find('.test-append').text()).toBe('append content');
+	});
 });
+

src/tests/CheckboxGroup.spec.ts

@@ -51,4 +51,69 @@ describe('CheckboxGroup', () => {
 		expect(checkboxArray.length).toBe(2);
 		expect(checkedCheckbox?.vm.modelValue).toBeTruthy();
 	});
+
+	test('renders custom content dynamically using scoped slot and option value', async () => {
+		const wrapper = mount(CheckboxGroup, {
+			props: {
+				modelValue: [],
+				label: 'Checkbox Group Test',
+				options: [
+					{
+						value: 'test-1',
+						label: 'Teste 1',
+					},
+					{
+						value: 'test-2',
+						label: 'Teste 2',
+					},
+				],
+			},
+			slots: {
+				append: `
+					<template #append="{ option }">
+						<span v-if="option.value === 'test-1'" class="custom-append-1">Append 1</span>
+					</template>
+				`,
+			},
+		});
+
+		const appendElement = wrapper.find('.custom-append-1');
+		expect(appendElement.exists()).toBe(true);
+		expect(appendElement.text()).toBe('Append 1');
+
+		const checkboxArray = wrapper.findAllComponents(CheckboxItem);
+		expect(checkboxArray.at(1)?.find('.custom-append-1').exists()).toBe(false);
+	});
+
+	test('renders scoped general append slot for all checkboxes', async () => {
+		const wrapper = mount(CheckboxGroup, {
+			props: {
+				modelValue: [],
+				label: 'Checkbox Group Test',
+				options: [
+					{
+						value: 'test-1',
+						label: 'Teste 1',
+					},
+					{
+						value: 'test-2',
+						label: 'Teste 2',
+					},
+				],
+			},
+			slots: {
+				append: `
+					<template #append="{ option }">
+						<span class="custom-append-generic">{{ option.value }}-suffix</span>
+					</template>
+				`,
+			},
+		});
+
+		const appendElements = wrapper.findAll('.custom-append-generic');
+		expect(appendElements.length).toBe(2);
+		expect(appendElements.at(0)?.text()).toBe('test-1-suffix');
+		expect(appendElements.at(1)?.text()).toBe('test-2-suffix');
+	});
 });
+

src/tests/__snapshots__/Checkbox.spec.ts.snap

@@ -3,5 +3,6 @@
 exports[`Checkbox > renders correctly 1`] = `
 "<div data-v-75623c80="" class="cds-checkbox__container">
   <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="cds-checkbox-option-input" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="cds-checkbox-option-input" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="cds-checkbox-option-input">checkbox test</label>
+  <!--v-if-->
 </div>"
 `;

src/tests/__snapshots__/CheckboxGroup.spec.ts.snap

@@ -7,11 +7,13 @@ exports[`CheckboxGroup > renders correctly 1`] = `
   <div data-v-5505c754="" class="checkbox__item">
     <div data-v-75623c80="" data-v-5505c754="" class="cds-checkbox__container" id="test-1">
       <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="test-1" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="test-1" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="test-1">Teste 1</label>
+      <!--v-if-->
     </div>
   </div>
   <div data-v-5505c754="" class="checkbox__item">
     <div data-v-75623c80="" data-v-5505c754="" class="cds-checkbox__container" id="test-2">
       <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="test-2" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="test-2" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="test-2">Teste 2</label>
+      <!--v-if-->
     </div>
   </div>
   <!--v-if-->