js-kompo-utils 1.0.34 → 1.0.35

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'
@@ -212,6 +272,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)
@@ -239,6 +306,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
@@ -922,4 +1025,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.35",
   "description": "",
   "main": "app.js",
   "scripts": {