✨ feature: emit handled

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"