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

package/package.json

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

package/src/components/DateInput/DateInput.vue

@@ -79,6 +79,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (event: "update:modelValue", value: string | null): void;
+  (event: "update:valid", isValid: boolean): void;
 }>();
 
 const { t } = useI18n();
@@ -118,6 +119,11 @@ onUnmounted(() => {
 
 const isDefaultLayout = computed(() => props.layout === "default")
 
+// Emit validity changes when inputState changes
+watch(inputState, (newState) => {
+  emit('update:valid', newState === 'success');
+});
+
 // Error messages for invalid input
 const invalidCharMessage = computed(() => t('wl.date_input.invalid_char', 'Dieses Zeichen ist nicht erlaubt'));
 const formatErrorMessage = computed(() => t('wl.date_input.format_error', 'Das Datum muss im Format TT.MM.JJJJ sein'));
@@ -323,10 +329,14 @@ function onNativeDateChange(e: Event) {
   }
 }
 
+// Computed property to expose isValid
+const isValid = computed(() => inputState.value === 'success');
+
 defineExpose({
   focus: () => inputRef.value?.focus?.(),
   blur: () => inputRef.value?.blur?.(),
-  select: () => inputRef.value?.select?.()
+  select: () => inputRef.value?.select?.(),
+  isValid
 })
 </script>
 

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>