Adicionar suporte a v-model ao SegmentedControl

docs/.docgen/components-metadata.json

@@ -10679,13 +10679,15 @@
     ]
   },
   "CdsSegmentedControl": {
-    "displayName": "CdsSegmentedControl",
+    "name": "CdsSegmentedControl",
     "exportName": "default",
+    "displayName": "SegmentedControl",
     "description": "",
     "tags": {},
     "props": [
       {
         "name": "segments",
+        "description": "Array de strings que serão exibidos como opções do componente.",
         "type": {
           "name": "array"
         },
@@ -10696,6 +10698,7 @@
       },
       {
         "name": "withIcon",
+        "description": "Se verdadeiro, exibe ícones no lugar de texto.",
         "type": {
           "name": "boolean"
         },
@@ -10706,6 +10709,7 @@
       },
       {
         "name": "segmentsTooltipText",
+        "description": "Array de strings que serão exibidos como tooltip quando o mouse estiver sobre o ícone.",
         "type": {
           "name": "array"
         },
@@ -10718,21 +10722,11 @@
     "events": [
       {
         "name": "click",
-        "type": {
-          "names": [
-            "undefined"
-          ]
-        },
-        "properties": [
-          {
-            "type": {
-              "names": [
-                "undefined"
-              ]
-            },
-            "name": "<anonymous1>"
-          }
-        ]
+        "description": "Evento emitido quando o usuário clica em algum segmento."
+      },
+      {
+        "name": "update:model-value",
+        "description": "Evento emitido quando o usuário clica em algum segmento."
       }
     ],
     "sourceFiles": [

docs/components/navegação/segmented-control.md

@@ -6,8 +6,18 @@ SegmentedControls são componentes que permitem que o usuário visualize versõe
 
 ## Uso
 
+### Texto
 ```js
 <CdsSegmentedControl
+	v-model="activeSegment"
+	:segments="['Segmento 1', 'Segmento 2', 'Segmento 3']"
+/>
+```
+
+### Ícone
+```js
+<CdsSegmentedControl
+	v-model="activeSegment"
 	:segments="['info-outline', 'copy-outline', 'edit-outline']"
 	:segmentsTooltipText="['info', 'copiar', 'editar']"
 	:withIcon="true"
@@ -48,7 +58,8 @@ import { ref } from 'vue';
 import CdsSegmentedControl from '@/components/SegmentedControl.vue';
 
 const cdsSegmentedControlEvents = [
-	'click'
+	'click',
+	'update:modelValue',
 ];
 
 const args = ref({

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/SegmentedControl.vue

@@ -8,8 +8,8 @@
 			type="button"
 			class="segment-control__button"
 			:class="{
-				'segment-control__button--active': segment === activeSegment,
-				'segment-control__button--inactive': segment !== activeSegment,
+				'segment-control__button--active': segment === model,
+				'segment-control__button--inactive': segment !== model,
 			}"
 			@click="handleClick(segment, index)"
 		>
@@ -28,48 +28,80 @@
 		</button>
 	</div>
 </template>
-<script>
+
+<script setup>
+import { onMounted, watch } from 'vue';
 import CdsIcon from './Icon.vue';
 import CdsTooltip from './Tooltip.vue';
 
-export default {
-	name: 'CdsSegmentedControl',
-	components: {
-		CdsIcon,
-		CdsTooltip,
+defineOptions({ name: 'CdsSegmentedControl' });
+
+/**
+ * Prop utilizada como v-model do componente.
+ */
+const model = defineModel({
+	type: String,
+	default: '',
+});
+
+const props = defineProps({
+	/**
+	 * Array de strings que serão exibidos como opções do componente.
+	 */
+	segments: {
+		type: Array,
+		default: () => [],
 	},
-	props: {
-		segments: {
-			type: Array,
-			default: () => [],
-		},
-		withIcon: {
-			type: Boolean,
-			default: false,
-		},
-		segmentsTooltipText: {
-			type: Array,
-			default: () => [],
-		},
+	/**
+	 * Se verdadeiro, exibe ícones no lugar de texto.
+	 */
+	withIcon: {
+		type: Boolean,
+		default: false,
 	},
-
-	data() {
-		return {
-			activeSegment: '',
-		};
+	/**
+	 * Array de strings que serão exibidos como tooltip quando o mouse estiver sobre o ícone.
+	 */
+	segmentsTooltipText: {
+		type: Array,
+		default: () => [],
 	},
+});
 
-	mounted() {
-		this.activeSegment = this.segments[0];
-	},
+const emit = defineEmits([
+	/**
+	 * Evento emitido quando o usuário clica em algum segmento.
+	 * @event click
+	 */
+	'click',
+	/**
+	 * Evento emitido quando o usuário clica em algum segmento.
+	 * @event update:model-value
+	 */
+	'update:model-value',
+]);
 
-	methods: {
-		handleClick(segment, index) {
-			this.activeSegment = segment;
-			this.$emit('click', this.activeSegment, index);
-		},
-	},
-}
+watch(() => props.segments, (newValue, oldValue) => {
+	if (newValue !== oldValue && newValue.length > 0) {
+		model.value = props.segments.find((v) => v === model.value) ?? props.segments[0]
+	}
+});
+
+onMounted(() => {
+	if (props.segments.length > 0) {
+		model.value = props.segments.find((v) => v === model.value) ?? props.segments[0];
+	}
+});
+
+const handleClick = (segment, index) => {
+	model.value = segment;
+	/**
+	 * Evento emitido quando o componente é clicado.
+	 * @event click
+	 * @type {Event}
+	 */
+	emit('click', segment, index);
+};
 </script>
 
 <style lang="scss">
@@ -116,4 +148,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

src/tests/SegmentedControlVModel.spec.ts

@@ -0,0 +1,128 @@
+import { describe, test, expect } from 'vitest';
+import SegmentedControl from '../components/SegmentedControl.vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+
+describe('SegmentedControl v-model', () => {
+	test('should respect initial modelValue', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+				modelValue: 'Segment 2',
+			},
+		});
+
+		const activeButtons = wrapper.findAll('.segment-control__button--active');
+		expect(activeButtons.length).toBe(1);
+		expect(activeButtons[0].text()).toBe('Segment 2');
+	});
+
+	test('should update modelValue when a segment is clicked', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+				modelValue: 'Segment 1',
+				'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+			},
+		});
+
+		const buttons = wrapper.findAll('.segment-control__button');
+		await buttons[1].trigger('click');
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Segment 2']);
+	});
+
+	test('should default to the first segment if no modelValue is provided', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+			},
+		});
+
+		await nextTick();
+
+		const activeButtons = wrapper.findAll('.segment-control__button--active');
+		expect(activeButtons.length).toBe(1);
+		expect(activeButtons[0].text()).toBe('Segment 1');
+	});
+
+	test('should still emit click event when a segment is clicked', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+				modelValue: 'Segment 1',
+			},
+		});
+
+		const buttons = wrapper.findAll('.segment-control__button');
+		await buttons[1].trigger('click');
+
+		expect(wrapper.emitted('click')).toBeTruthy();
+		expect(wrapper.emitted('click')![0]).toEqual(['Segment 2', 1]);
+	});
+
+	test('should respect initial falsy modelValue (e.g. empty string) if it is a valid segment', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', ''],
+				modelValue: '',
+			},
+		});
+
+		await nextTick();
+
+		const activeButtons = wrapper.findAll('.segment-control__button--active');
+		expect(activeButtons.length).toBe(1);
+		expect(activeButtons[0].text()).toBe('');
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+	});
+
+	test('should NOT emit update:modelValue on mount if initial modelValue is a valid segment', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', 'Segment 2'],
+				modelValue: 'Segment 2',
+			},
+		});
+
+		await nextTick();
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+	});
+
+	test('should NOT emit update:modelValue on mount if initial modelValue is a valid falsy segment', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: ['Segment 1', ''],
+				modelValue: '',
+			},
+		});
+
+		await nextTick();
+
+		expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+	});
+
+	test('should update modelValue to the first segment when segments list is loaded dynamically after mount', async () => {
+		const wrapper = mount(SegmentedControl, {
+			props: {
+				segments: [],
+				modelValue: '',
+				'onUpdate:modelValue': (e) => wrapper.setProps({ modelValue: e }),
+			},
+		});
+
+		expect(wrapper.findAll('.segment-control__button--active').length).toBe(0);
+
+		await wrapper.setProps({ segments: ['Segment A', 'Segment B'] });
+
+		expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+		expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Segment A']);
+
+		const activeButtons = wrapper.findAll('.segment-control__button--active');
+		expect(activeButtons.length).toBe(1);
+		expect(activeButtons[0].text()).toBe('Segment A');
+	});
+});
+