js-kompo-utils 1.0.36 → 1.0.38

package/components/VlInternationalPhoneInput.vue

@@ -297,10 +297,11 @@ export default {
     mounted() {
         // Close dropdown when clicking outside
         document.addEventListener('click', this.handleClickOutside)
-        
-        // Set initial value
-        // this.component.value = this.phoneValue
-        
+
+        // `component` is not guaranteed to be bound when data() runs — see phoneValue's `?.` — and
+        // a country read as undefined there would send us asking an IP service we don't need.
+        this.selectedCountryCode = this.selectedCountryCode || this.$_config('country') || this.$_config('defaultCountry')
+
         // A stored number always decides its own country; an empty field may ask the IP.
         if (this.phoneValue) {
             this.autoDetectCountryFromPhone(this.phoneValue)

package/orchestrator/KompoJsBuilder.js

@@ -1,3 +1,5 @@
+import { installGlobalLoading } from './loading/globalLoading.js';
+
 export class KompoJsConfigBuilder {
     components = {};
     bootstrapCallback = null;
@@ -13,6 +15,7 @@ export class KompoJsConfigBuilder {
     appSelector = '#app';
     includeBroadcasting = false;
     echoBroadcasterConfig = null;
+    includeGlobalLoading = true;
 
     beforeStepCallbacks = {};
     afterStepCallbacks = {};
@@ -138,6 +141,16 @@ export class KompoJsConfigBuilder {
         return this;
     }
 
+    withGlobalLoading() {
+        this.includeGlobalLoading = true;
+        return this;
+    }
+
+    withoutGlobalLoading() {
+        this.includeGlobalLoading = false;
+        return this;
+    }
+
     withBroadcasting(config) {
         this.includeBroadcasting = true;
         this.echoBroadcasterConfig = {
@@ -231,6 +244,8 @@ export class KompoJsInitializer {
 
         this._callStep('bootVue');
 
+        this._callStep('bootGlobalLoadingIfRequired');
+
         this._callStep('decorateWindow');
 
         this._callStep('bootCkEditorIfRequired');
@@ -311,6 +326,12 @@ export class KompoJsInitializer {
         }
     }
 
+    bootGlobalLoadingIfRequired() {
+        if (this.config.includeGlobalLoading) {
+            installGlobalLoading(this.window, this.window.document);
+        }
+    }
+
     decorateWindow() {
         for (const [key, value] of Object.entries(this.config.windowUtilsObject)) {
             if (!this.window.utils) {

package/orchestrator/loading/globalLoading.js

@@ -0,0 +1,80 @@
+const HOST_ID = 'vl-global-loading'
+const HOST_CLASS = 'vlGlobalLoading'
+const LEGACY_ID = 'vl-spinner'
+const LEGACY_KEY = '__legacy__'
+const DEFAULT_WATCHDOG_MS = 20000
+
+/**
+ * Ref-counted full-screen loading, owned by us.
+ * Writes only .vlGlobalLoading — .vlPanelLoading stays vue-kompo's (->withLoadingIn).
+ */
+export function installGlobalLoading(win, doc, options = {}) {
+    if (!win || !win._kompo || win._kompo.loading) return
+
+    const watchdogMs = options.watchdogMs || DEFAULT_WATCHDOG_MS
+    const keys = new Map()
+    let seq = 0
+
+    const host = () => doc.getElementById(HOST_ID)
+
+    // kompo::scripts emits the <script> tags BEFORE @includeIf('kompo.scripts'),
+    // so neither the host nor #vl-spinner exists yet when we install. Resolve
+    // both lazily on every render instead of once at install time.
+    const hideLegacySpinner = () => {
+        const el = doc.getElementById(LEGACY_ID)
+        if (el) el.style.display = 'none'
+    }
+
+    const render = () => {
+        hideLegacySpinner()
+        const el = host()
+        if (!el) return
+        if (keys.size) el.classList.add(HOST_CLASS)
+        else el.classList.remove(HOST_CLASS)
+    }
+
+    const end = (key) => {
+        if (!keys.has(key)) return
+        clearTimeout(keys.get(key))
+        keys.delete(key)
+        render()
+    }
+
+    const begin = (key, timeoutMs) => {
+        const k = key || `k${++seq}`
+        if (keys.has(k)) clearTimeout(keys.get(k))
+        keys.set(k, setTimeout(() => end(k), timeoutMs || watchdogMs))
+        render()
+        return k
+    }
+
+    const clear = () => {
+        keys.forEach(t => clearTimeout(t))
+        keys.clear()
+        render()
+    }
+
+    win._kompo.loading = { begin, end, clear, active: () => keys.size > 0 }
+
+    // Route TurboClick / Layout / $k.loading through the same host, ref-counted.
+    // Layout.$_state fires toggleSpinner('none') on unrelated state writes, so a
+    // legacy hide must only drop the legacy slot, never keys opened by begin().
+    const rawToggle = win._kompo.toggleSpinner
+    win._kompo.toggleSpinner = function (display) {
+        if (display === 'block') begin(LEGACY_KEY)
+        else end(LEGACY_KEY)
+    }
+    win._kompo.toggleSpinnerRaw = rawToggle
+
+    // ->submit() never reaches applyLoadingPanel (Action.js submitFormAction),
+    // so tear down on the form lifecycle events instead.
+    const bus = win.Vue && win.Vue.prototype && win.Vue.prototype.$kompo
+    if (bus) {
+        const onSuccess = bus.vlSubmitSuccess
+        const onError = bus.vlSubmitError
+        bus.vlSubmitSuccess = function (...args) { clear(); return onSuccess.apply(this, args) }
+        bus.vlSubmitError = function (...args) { clear(); return onError.apply(this, args) }
+    }
+
+    render()
+}

package/package.json

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