From 2c4a134152ae6df1a4f4cf8e84cddbfd642f657d Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Wed, 23 Jul 2025 11:04:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feature:=20emit=20handled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/checkbox/VCheckbox.vue | 31 ++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/checkbox/VCheckbox.vue b/src/components/checkbox/VCheckbox.vue
index 92a173a..1c1cfc2 100644
--- a/src/components/checkbox/VCheckbox.vue
+++ b/src/components/checkbox/VCheckbox.vue
@@ -3,7 +3,7 @@ import Checkbox from 'primevue/checkbox';
 import VLabel from '../label/VLabel.vue';
 import VHint from '../hint/VHint.vue';
 import type IVCheckBox from './IVCheckbox.type';
-import { useId, computed } from 'vue';
+import { useId, computed, watch, ref } from 'vue';
 
 const props = withDefaults(defineProps<IVCheckBox>(), {
   id: () => useId(),
@@ -16,7 +16,6 @@ const props = withDefaults(defineProps<IVCheckBox>(), {
   readonlyOpacity: 0.75,
 });
 
-
 const size = computed(() => props.small ? 'small' : undefined)
 const message = computed(() => props.errorMessage || props.validMessage)
 
@@ -33,6 +32,26 @@ const labelState = computed(() => {
   else if((!!props.validMessage || props.type === 'success') && !props.disabled) return 'success';
   else return 'default';
 })
+
+const emit = defineEmits([
+  'update:modelValue',
+  'value-change',
+  'change',
+  'focus',
+  'blur'
+])
+
+const localModelValue = ref(props.modelValue);
+watch(() => props.modelValue, (newVal) => {
+    if(localModelValue.value !== newVal){
+        localModelValue.value = newVal;
+    }
+})
+watch(localModelValue, (newVal) => {
+    if(props.modelValue !== newVal){
+        emit('update:modelValue', newVal);
+    }
+});
 </script>
 
 <template>
@@ -51,14 +70,20 @@ const labelState = computed(() => {
       v-bind="$attrs"
       :disabled="disabled"
       :label="props.label"
-      :model-value="modelValue"
       :binary="binary"
+      :aria-label="props.label"
       :class="['p-checkbox', {
         'checked-disabled': props.modelValue && disabled,
         'unchecked-disabled': !props.modelValue && disabled,
         'error': (!!props.errorMessage || type === 'error') && !disabled,
         'success': (!!props.validMessage || type === 'success') && !disabled,
       }]"
+      v-model:model-value="localModelValue"
+      @update:model-value="emit('update:modelValue', $event)"
+      @change="emit('change', $event)"
+      @blur="emit('blur', $event)"
+      @focus="emit('focus', $event)"
+      @value-change="emit('value-change', $event)"
     />
     <VLabel
       :for="props.id"