@zap-wunschlachen/wl-shared-components 1.0.51 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/components/PhoneInput/PhoneInput.vue

@@ -19,13 +19,13 @@
     hide-details
     :aria-invalid="state === ValidationState.ERROR"
     :countryIconMode="'svg'"
-    @update:model-value="(value) => emit('update:phone', value)"
+    @update:model-value="onPhoneUpdate"
     data-testid="root"
   />
 </template>
 
 <script setup lang="ts">
-import { defineProps, PropType, ref, nextTick, computed, inject } from 'vue';
+import { PropType, ref, nextTick, computed, inject } from 'vue';
 import { VPhoneInput } from 'v-phone-input';
 import './PhoneInput.css'
 import { siteColors } from "../../utils/index";
@@ -87,10 +87,21 @@ const props = defineProps({
 
 const emit = defineEmits<{
   (e: 'update:phone', value: string): void
+  (e: 'update:valid', isValid: boolean): void
 }>();
 
 const inputRef = ref(null)
 
+// Handle phone input updates
+const onPhoneUpdate = (value: string) => {
+  emit('update:phone', value);
+  // Check validity after the VPhoneInput has processed the value
+  nextTick(() => {
+    const valid = inputRef.value?.isValid ?? false;
+    emit('update:valid', valid);
+  });
+};
+
 const getNativeInput = () => {
   return inputRef.value?.phoneInputRef?.$el?.querySelector('input');
 }
@@ -113,10 +124,14 @@ const focus = () => {
   });
 };
 
+// Computed property to expose isValid from VPhoneInput
+const isValid = computed(() => inputRef.value?.isValid ?? false);
+
 defineExpose({
   blur,
   select,
-  focus
+  focus,
+  isValid
 });
 
 </script>