@citizenplane/pimp 9.7.3 → 9.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.7.3",
+  "version": "9.7.5",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpTelInput.vue

@@ -16,7 +16,9 @@
         placeholder="Enter your phone number"
         valid-characters-only
         @close="focusOnInput"
+        @country-changed="handleCountryChanged"
         @open="handleDropdownOpen"
+        @validate="handleOnValidate"
       >
         <template #arrow-icon>
           <cp-icon class="cpTelInput__arrow" size="20" type="chevron-down" />
@@ -73,6 +75,22 @@ const props = withDefaults(defineProps<Props>(), {
   size: Sizes.MD,
 })
 
+const emit = defineEmits<Emits>()
+
+type PhoneObject = {
+  country: string
+  countryCode: string
+  formatted: string
+  nationalNumber: string
+  possible: boolean
+  valid: boolean
+}
+
+interface Emits {
+  (e: 'countryChanged', countryCode: string): void
+  (e: 'validate', phoneObject: PhoneObject): void
+}
+
 const inputModel = defineModel<string>()
 const telInputRef = ref<HTMLInputElement | null>(null)
 
@@ -128,6 +146,14 @@ const handleDropdownOpen = async () => {
 
   setTimeout(() => searchBox.focus(), 1)
 }
+
+const handleCountryChanged = (country: { iso2: string }) => {
+  emit('countryChanged', country?.iso2 || '')
+}
+
+const handleOnValidate = (phoneObject: PhoneObject) => {
+  emit('validate', phoneObject)
+}
 </script>
 
 <style lang="scss">