js-kompo-utils 1.0.33 → 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/components/VlSignaturePad.vue

@@ -15,6 +15,7 @@
                 @touchend="stopDrawing"
             ></canvas>
             <button
+                class="signature-pad-button"
                 type="button"
                 :class="clearButtonClass"
                 @click="clearSignature"
@@ -54,17 +55,14 @@ export default {
             const canvas = this.$refs.canvas
             this.context = canvas.getContext('2d')
 
-            // Fill background
             this.context.fillStyle = this.backgroundColor
             this.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
 
-            // Set drawing style
             this.context.strokeStyle = this.penColor
             this.context.lineWidth = this.penWidth
             this.context.lineCap = 'round'
             this.context.lineJoin = 'round'
 
-            // Load existing signature if any
             if (this.component.value) {
                 this.loadSignature(this.component.value)
             }
@@ -74,7 +72,8 @@ export default {
             const canvas = this.$refs.canvas
             const rect = canvas.getBoundingClientRect()
 
-            // Calculer le ratio entre la taille affichée et la taille réelle du canvas
+            // CSS stretches the canvas past its attribute size, so pointer coordinates
+            // have to be scaled back into canvas space or the ink lands off-cursor.
             const scaleX = canvas.width / rect.width
             const scaleY = canvas.height / rect.height
 
@@ -94,9 +93,19 @@ export default {
         startDrawing(event) {
             event.preventDefault()
             this.isDrawing = true
+
             const coords = this.getCoordinates(event)
             this.lastX = coords.x
             this.lastY = coords.y
+
+            // A click with no movement is a dot, and a signature is full of them.
+            this.context.beginPath()
+            this.context.arc(coords.x, coords.y, this.penWidth / 2, 0, Math.PI * 2)
+            this.context.fillStyle = this.penColor
+            this.context.fill()
+            this.context.fillStyle = this.backgroundColor
+
+            this.isEmpty = false
         },
 
         draw(event) {
@@ -113,12 +122,13 @@ export default {
             this.lastX = coords.x
             this.lastY = coords.y
             this.isEmpty = false
-
-            this.saveSignature()
         },
 
         stopDrawing() {
+            if (!this.isDrawing) return
+
             this.isDrawing = false
+            this.saveSignature()
         },
 
         clearSignature() {
@@ -130,11 +140,11 @@ export default {
         },
 
         saveSignature() {
-            if (!this.isEmpty) {
-                const dataURL = this.$refs.canvas.toDataURL('image/png')
-                this.component.value = dataURL
-                this.$emit('input', dataURL)
-            }
+            if (this.isEmpty) return
+
+            const dataURL = this.$refs.canvas.toDataURL('image/png')
+            this.component.value = dataURL
+            this.$emit('input', dataURL)
         },
 
         loadSignature(dataURL) {
@@ -154,20 +164,29 @@ export default {
 
 <style scoped>
 .signature-pad-container {
+    position: relative;
     display: flex;
     flex-direction: column;
-    gap: 0.75rem;
+    gap: 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.5rem;
+    padding: 2px;
+}
+
+.signature-pad-container:hover {
+    border-color: #9ca3af;
 }
 
 .signature-canvas {
-    border: 1px solid #d1d5db;
-    border-radius: 0.5rem;
     cursor: crosshair;
     touch-action: none;
     display: block;
+    width: 100%;
 }
 
-.signature-canvas:hover {
-    border-color: #9ca3af;
+.signature-pad-button {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
 }
-</style>
+</style>

package/package.json

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