From b197b47a34de03dc23ec4e266e1db4420537086a Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 22 May 2026 20:22:20 +0000
Subject: [PATCH] feat: add v-model support to SegmentedControl

- Refactor SegmentedControl to <script setup>
- Add v-model support using defineModel
- Maintain backward compatibility with existing props and events
- Update documentation with v-model examples
- Add unit tests for v-model functionality
- Update project version to 3.159.0

Co-authored-by: lucasn4s <17988272+lucasn4s@users.noreply.github.com>
---
 docs/.docgen/components-metadata.json         | 22 ++---
 .../segmented-control.md"                     | 13 ++-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/SegmentedControl.vue           | 95 +++++++++++--------
 src/tests/SegmentedControlVModel.spec.ts      | 64 +++++++++++++
 6 files changed, 143 insertions(+), 57 deletions(-)
 create mode 100644 src/tests/SegmentedControlVModel.spec.ts

diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json
index 00d75c70..118084e2 100644
--- a/docs/.docgen/components-metadata.json
+++ b/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,7 @@
     "events": [
       {
         "name": "click",
-        "type": {
-          "names": [
-            "undefined"
-          ]
-        },
-        "properties": [
-          {
-            "type": {
-              "names": [
-                "undefined"
-              ]
-            },
-            "name": "<anonymous1>"
-          }
-        ]
+        "description": "Evento emitido quando o componente é clicado."
       }
     ],
     "sourceFiles": [
diff --git "a/docs/components/navega\303\247\303\243o/segmented-control.md" "b/docs/components/navega\303\247\303\243o/segmented-control.md"
index 3ec7a87e..72243b50 100644
--- "a/docs/components/navega\303\247\303\243o/segmented-control.md"
+++ "b/docs/components/navega\303\247\303\243o/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({
diff --git a/package-lock.json b/package-lock.json
index 3a5fb6d0..cbaf8ee8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.158.1",
+	"version": "3.159.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@sysvale/cuida",
-			"version": "3.158.1",
+			"version": "3.159.0",
 			"dependencies": {
 				"@popperjs/core": "^2.11.6",
 				"@sysvale/cuida-icons": "^1.18.0",
diff --git a/package.json b/package.json
index 4ab123ab..2b29b19c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.158.2",
+	"version": "3.159.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/SegmentedControl.vue b/src/components/SegmentedControl.vue
index 7cd9d37f..327dc4c1 100644
--- a/src/components/SegmentedControl.vue
+++ b/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,69 @@
 		</button>
 	</div>
 </template>
-<script>
+
+<script setup>
+import { onMounted } 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 componente é clicado.
+	 * @event click
+	 */
+	'click',
+]);
 
-	methods: {
-		handleClick(segment, index) {
-			this.activeSegment = segment;
-			this.$emit('click', this.activeSegment, index);
-		},
-	},
-}
+onMounted(() => {
+	if (!model.value && props.segments.length > 0) {
+		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 +137,4 @@ export default {
 		}
 	}
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/tests/SegmentedControlVModel.spec.ts b/src/tests/SegmentedControlVModel.spec.ts
new file mode 100644
index 00000000..f9dfeafd
--- /dev/null
+++ b/src/tests/SegmentedControlVModel.spec.ts
@@ -0,0 +1,64 @@
+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]);
+	});
+});