@ozura/elements 1.3.1-next.70 → 1.3.1-next.72

package/dist/server/vue/index.d.ts

@@ -219,6 +219,26 @@ export interface UseOzElementsReturn {
      * Clears all mounted element fields without destroying the vault.
      */
     reset: () => void;
+    /**
+     * `true` when every mounted field has reported `complete && valid`.
+     * Use this to gate the pay button without wiring individual `@change`
+     * listeners — reacts in real time as the customer fills in fields.
+     *
+     * @example
+     * const { ready, isComplete, createToken } = useOzElements();
+     * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
+     */
+    isComplete: ComputedRef<boolean>;
+    /**
+     * `true` while `createToken()` or `createBankToken()` is in progress,
+     * including the transparent wax-key refresh phase. Use this to keep the
+     * pay button disabled and prevent double-submission.
+     *
+     * @example
+     * const { isTokenizing, createToken } = useOzElements();
+     * // <button :disabled="isTokenizing" @click="createToken()">Pay</button>
+     */
+    isTokenizing: ComputedRef<boolean>;
 }
 /**
  * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.

package/dist/types/vue/index.d.ts

@@ -219,6 +219,26 @@ export interface UseOzElementsReturn {
      * Clears all mounted element fields without destroying the vault.
      */
     reset: () => void;
+    /**
+     * `true` when every mounted field has reported `complete && valid`.
+     * Use this to gate the pay button without wiring individual `@change`
+     * listeners — reacts in real time as the customer fills in fields.
+     *
+     * @example
+     * const { ready, isComplete, createToken } = useOzElements();
+     * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
+     */
+    isComplete: ComputedRef<boolean>;
+    /**
+     * `true` while `createToken()` or `createBankToken()` is in progress,
+     * including the transparent wax-key refresh phase. Use this to keep the
+     * pay button disabled and prevent double-submission.
+     *
+     * @example
+     * const { isTokenizing, createToken } = useOzElements();
+     * // <button :disabled="isTokenizing" @click="createToken()">Pay</button>
+     */
+    isTokenizing: ComputedRef<boolean>;
 }
 /**
  * Returns createToken, createBankToken, ready, initError, tokenizeCount, and reset.

package/dist/vue/index.cjs.js

@@ -2322,6 +2322,8 @@ const OzElements = vue.defineComponent({
         const mountedCount = vue.ref(0);
         const readyCount = vue.ref(0);
         const tokenizeCount = vue.ref(0);
+        const changeTick = vue.ref(0);
+        const notifyChange = () => { changeTick.value++; };
         const notifyMount = () => { mountedCount.value++; };
         let readyEmitted = false;
         const notifyReady = () => {
@@ -2347,10 +2349,12 @@ const OzElements = vue.defineComponent({
             mountedCount,
             readyCount,
             tokenizeCount,
+            changeTick,
             notifyMount,
             notifyReady,
             notifyUnmount,
             notifyTokenize,
+            notifyChange,
         });
         let createdVault = null;
         let abortController = null;
@@ -2419,7 +2423,7 @@ function useOzElements() {
     if (!ctx) {
         throw new Error('[OzVault] useOzElements() must be called inside <OzElements>');
     }
-    const { vault, initError, mountedCount, readyCount, tokenizeCount, notifyTokenize } = ctx;
+    const { vault, initError, mountedCount, readyCount, tokenizeCount, changeTick, notifyTokenize, notifyChange } = ctx;
     const ready = vue.computed(() => vault.value !== null &&
         vault.value.isReady &&
         mountedCount.value > 0 &&
@@ -2428,20 +2432,42 @@ function useOzElements() {
         if (!vault.value) {
             throw new Error('[OzVault] vault is not ready — wait for ready before calling createToken()');
         }
-        const result = await vault.value.createToken(options);
-        notifyTokenize();
-        return result;
+        // Start the call so vault._tokenizing flips synchronously, then bump changeTick
+        // so `isTokenizing` recomputes as `true`; bump again on settle. (vault.isTokenizing
+        // is a plain getter — nothing else would recompute the computed while in flight.)
+        const promise = vault.value.createToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
     };
     const createBankToken = async (options) => {
         if (!vault.value) {
             throw new Error('[OzVault] vault is not ready — wait for ready before calling createBankToken()');
         }
-        const result = await vault.value.createBankToken(options);
-        notifyTokenize();
-        return result;
+        const promise = vault.value.createBankToken(options);
+        notifyChange();
+        try {
+            const result = await promise;
+            notifyTokenize();
+            return result;
+        }
+        finally {
+            notifyChange();
+        }
     };
     const reset = () => { var _a; (_a = vault.value) === null || _a === void 0 ? void 0 : _a.reset(); };
-    return { createToken, createBankToken, ready, initError, tokenizeCount, reset };
+    // `void changeTick.value` registers a reactive dependency so these recompute when
+    // notifyChange() fires (field change / tokenize start-stop). vault.isComplete and
+    // vault.isTokenizing read non-reactive internal Maps/flags that Vue cannot track.
+    const isComplete = vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isComplete) !== null && _b !== void 0 ? _b : false; });
+    const isTokenizing = vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isTokenizing) !== null && _b !== void 0 ? _b : false; });
+    return { createToken, createBankToken, ready, initError, tokenizeCount, reset, isComplete, isTokenizing };
 }
 function createFieldComponent(displayName, mountElement) {
     return vue.defineComponent({
@@ -2457,7 +2483,7 @@ function createFieldComponent(displayName, mountElement) {
             if (!ctx) {
                 throw new Error('[OzVault] useOzElements() must be called inside <OzElements>');
             }
-            const { vault, notifyMount, notifyReady, notifyUnmount } = ctx;
+            const { vault, notifyMount, notifyReady, notifyUnmount, notifyChange } = ctx;
             const containerRef = vue.ref(null);
             let element = null;
             let notifyMountCalled = false;
@@ -2472,7 +2498,7 @@ function createFieldComponent(displayName, mountElement) {
                 notifyMountCalled = true;
                 notifyMount();
                 element.on('ready', () => notifyReady());
-                element.on('change', (e) => emit('change', e));
+                element.on('change', (e) => { emit('change', e); notifyChange(); });
                 element.on('focus', () => emit('focus'));
                 element.on('blur', () => emit('blur'));
                 element.mount(containerRef.value);