js-kompo-utils 1.0.34 → 1.0.36

package/components/VlInternationalPhoneInput.vue

@@ -56,6 +56,7 @@
             <input
                 ref="phoneInput"
                 class="phone-input"
+                :class="{ 'has-extension': showExtension }"
                 :value="formattedValue"
                 v-bind="$_attributes"
                 v-on="$_events"
@@ -64,6 +65,44 @@
                 @focus="onPhoneFocus"
                 @blur="onPhoneBlur"
             />
+
+            <!-- Extension ("poste"), opt-in via ->withExtension(). Collapsed until asked for,
+                 so the common case stays a single field. -->
+            <button
+                v-if="showExtension && !extensionOpen"
+                type="button"
+                class="phone-extension-toggle"
+                :title="extensionLabel"
+                :disabled="$_attributes.disabled"
+                @click="openExtension"
+            >
+                <span class="phone-extension-plus">+</span>
+                <span class="phone-extension-toggle-label">{{ extensionLabel }}</span>
+            </button>
+
+            <div v-else-if="showExtension" class="phone-extension-wrap">
+                <span class="phone-extension-prefix">{{ extensionLabel }}</span>
+                <input
+                    ref="extensionInput"
+                    class="phone-extension-input"
+                    type="text"
+                    inputmode="numeric"
+                    autocomplete="off"
+                    :value="extensionValue"
+                    :placeholder="extensionPlaceholder"
+                    :disabled="$_attributes.disabled"
+                    :readonly="$_attributes.readonly"
+                    @input="onExtensionInput"
+                    @keydown.esc="closeExtension"
+                />
+                <button
+                    type="button"
+                    class="phone-extension-clear"
+                    :title="extensionClearLabel"
+                    :disabled="$_attributes.disabled"
+                    @click="closeExtension"
+                >×</button>
+            </div>
         </div>
     </vl-form-field>
 </template>
@@ -96,6 +135,11 @@ export default {
             
             // Geolocation state
             isDetectingCountry: false,
+
+            // Optional extension ("poste"), submitted as `<name>_ext`. Starts open only
+            // when there is one to show, so an empty field stays a single box.
+            extensionValue: this.normalizeExtension(this.$_config('extensionValue')),
+            extensionOpen: this.normalizeExtension(this.$_config('extensionValue')) !== '',
         }
     },
     
@@ -114,6 +158,22 @@ export default {
         placeholder() {
             return this.$_config('placeholder') || 'Phone number'
         },
+
+        showExtension() {
+            return !!this.$_config('withExtension')
+        },
+
+        extensionLabel() {
+            return this.$_config('extensionLabel') || 'ext'
+        },
+
+        extensionPlaceholder() {
+            return this.$_config('extensionPlaceholder') || '000'
+        },
+
+        extensionClearLabel() {
+            return this.$_config('extensionClearLabel') || 'Remove'
+        },
         
         inputGroupClass() {
             const baseClass = 'vlInputGroup rounded-lg flex items-stretch'
@@ -121,6 +181,14 @@ export default {
             return `${baseClass} ${errorClass}`
         },
         
+        // An explicit country() is a hard setting. Otherwise the IP lookup runs when it is turned
+        // on — its result wins over defaultCountry — or when there is no default to start from.
+        shouldDetectByIp() {
+            if (this.$_config('country')) return false
+
+            return !!this.$_config('detectCountryByIp') || !this.selectedCountryCode
+        },
+
         // Current country info
         currentCountry() {
             const country = this.countries.find(c => c.code === this.selectedCountryCode)
@@ -212,6 +280,13 @@ export default {
             }
         },
         
+        // Kompo swaps `component` in place on a refresh without re-running data(), which is why
+        // the number re-syncs above. The extension has to follow or it keeps the stale prefill.
+        'component.config.extensionValue'(newValue) {
+            this.extensionValue = this.normalizeExtension(newValue)
+            this.extensionOpen = this.extensionOpen || this.extensionValue !== ''
+        },
+
         selectedCountryCode(newCode, oldCode) {
             if (newCode !== oldCode && this.phoneValue) {
                 this.reformatWithCountry(newCode)
@@ -226,10 +301,10 @@ export default {
         // Set initial value
         // this.component.value = this.phoneValue
         
-        // Auto-detect country if no explicit country is set and no phone value exists
+        // A stored number always decides its own country; an empty field may ask the IP.
         if (this.phoneValue) {
             this.autoDetectCountryFromPhone(this.phoneValue)
-        } else if (!this.selectedCountryCode) {
+        } else if (this.shouldDetectByIp) {
             this.detectCountryByLocation()
         }
     },
@@ -239,6 +314,42 @@ export default {
     },
     
     methods: {
+        // The extension is not part of the number, so it rides alongside it as its own
+        // key instead of being folded into the value the way E.164 cannot carry it.
+        $_fill(jsonFormData) {
+            jsonFormData[this.$_name] = (this.$_value === null || this.$_value === undefined) ? '' : this.$_value
+
+            if (this.showExtension) {
+                jsonFormData[this.$_name + '_ext'] = this.extensionValue || ''
+            }
+        },
+
+        // `|| ''` would swallow a "0" extension, and the column is a string.
+        normalizeExtension(value) {
+            return (value === null || value === undefined) ? '' : String(value)
+        },
+
+        onExtensionInput(event) {
+            this.extensionValue = event.target.value.replace(/[^0-9#*]/g, '')
+
+            if (event.target.value !== this.extensionValue) {
+                event.target.value = this.extensionValue
+            }
+        },
+
+        openExtension() {
+            this.extensionOpen = true
+
+            this.$nextTick(() => this.$refs.extensionInput?.focus())
+        },
+
+        // Collapsing clears the value: the empty companion still posts, so the stored
+        // extension is removed rather than silently kept.
+        closeExtension() {
+            this.extensionValue = ''
+            this.extensionOpen = false
+        },
+
         // Country selection methods
         toggleDropdown() {
             this.isDropdownOpen = !this.isDropdownOpen
@@ -569,40 +680,25 @@ export default {
             }
         },
         
+        // Free, keyless, https + CORS. http:// providers are mixed content on an https page and
+        // never resolve, and a provider answering without a code (ipapi.co rate-limits often) has
+        // to fall through to the next one instead of ending the chain.
         async getCountryFromIP() {
-            // Try ipapi.co first (free, reliable)
-            try {
-                const response = await fetch('https://ipapi.co/json/', {
-                    timeout: 5000
-                })
-                const data = await response.json()
-                return data.country_code
-            } catch (error) {
-                console.warn('ipapi.co failed:', error)
-            }
-            
-            // Fallback to ip-api.com
-            try {
-                const response = await fetch('http://ip-api.com/json/', {
-                    timeout: 5000
-                })
-                const data = await response.json()
-                return data.countryCode
-            } catch (error) {
-                console.warn('ip-api.com failed:', error)
-            }
-            
-            // Fallback to ipinfo.io
-            try {
-                const response = await fetch('https://ipinfo.io/json', {
-                    timeout: 5000
-                })
-                const data = await response.json()
-                return data.country
-            } catch (error) {
-                console.warn('ipinfo.io failed:', error)
+            const providers = [
+                ['https://get.geojs.io/v1/ip/country.json', data => data.country],
+                ['https://ipwho.is/', data => data.success && data.country_code],
+                ['https://ipapi.co/json/', data => data.country_code],
+            ]
+
+            for (const [url, readCountry] of providers) {
+                try {
+                    const code = readCountry(await (await fetch(url)).json())
+                    if (code) return code
+                } catch (error) {
+                    console.warn(`${url} failed:`, error)
+                }
             }
-            
+
             return null
         },
         
@@ -922,4 +1018,100 @@ export default {
     color: #6b7280;
     cursor: not-allowed;
 }
+
+.phone-input.has-extension {
+    border-radius: 0;
+}
+
+/* Collapsed state: a quiet pill closing the group's right edge. */
+.phone-extension-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    flex: none;
+    padding: 0 0.7rem;
+    margin-left: -1px;
+    border: 1px solid #d1d5db;
+    border-radius: 0 0.5rem 0.5rem 0;
+    background-color: transparent;
+    color: #6b7280;
+    font-size: 0.8125rem;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.phone-extension-toggle:hover:not(:disabled) {
+    color: #3b82f6;
+    background-color: #f3f4f6;
+}
+
+.phone-extension-toggle:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.phone-extension-plus {
+    font-size: 0.95rem;
+    line-height: 1;
+}
+
+/* Expanded state: label + field + dismiss, sharing one bordered cell. */
+.phone-extension-wrap {
+    display: flex;
+    align-items: center;
+    flex: none;
+    margin-left: -1px;
+    padding-left: 0.6rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0 0.5rem 0.5rem 0;
+}
+
+.phone-extension-wrap:focus-within {
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 1px #3b82f6;
+    z-index: 1;
+}
+
+.phone-extension-prefix {
+    color: #9ca3af;
+    font-size: 0.8125rem;
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+.phone-extension-input {
+    width: 3.75rem;
+    min-width: 0;
+    padding: 0.5rem 0.25rem;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    font-size: 1rem;
+}
+
+.phone-extension-input:disabled {
+    color: #6b7280;
+    cursor: not-allowed;
+}
+
+.phone-extension-clear {
+    padding: 0 0.55rem 0 0.15rem;
+    border: none;
+    background-color: transparent;
+    color: #9ca3af;
+    font-size: 1.05rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.phone-extension-clear:hover:not(:disabled) {
+    color: #ef4444;
+}
+
+.phone-extension-clear:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
 </style> 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-kompo-utils",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "description": "",
   "main": "app.js",
   "scripts": {