@vetc-miniapp/ui-react 0.0.25 → 0.0.26

package/dist/bridge.d.ts

@@ -1,9 +1,15 @@
 export interface FlutterInAppWebViewBridge {
     callHandler(handlerName: string, args?: unknown): Promise<unknown>;
 }
+export interface MiniAppBridge {
+    on(event: string, callback: (data: any) => void): void;
+    off(event: string, callback: (data: any) => void): void;
+    _emit?: (event: string, data?: any) => void;
+}
 declare global {
     interface Window {
         flutter_inappwebview?: FlutterInAppWebViewBridge;
+        MiniApp?: MiniAppBridge;
     }
 }
 export declare const isBrowser: boolean;

package/dist/components/app.d.ts

@@ -1,6 +1,17 @@
-export declare function initRouter(config: any): void;
-export declare function getCurrentPage(): any;
-export declare function setCurrentPath(path: any): void;
+import React from "react";
+interface PageConfig {
+    pathname: string;
+    Component: React.ComponentType<any>;
+    [key: string]: any;
+}
+interface AppConfig {
+    pages: PageConfig[];
+    [key: string]: any;
+}
+export declare function initRouter(config: AppConfig): void;
+export declare function getCurrentPage(): PageConfig | undefined;
+export declare function setCurrentPath(path: string): void;
 export declare function App({ config }: {
-    config: any;
+    config: AppConfig;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/app.js

@@ -4,7 +4,7 @@ import { callHost } from "../bridge";
 let routeMap = new Map();
 let currentPath = "/";
 export function initRouter(config) {
-    routeMap = new Map(config.pages.map(p => [p.pathname, p]));
+    routeMap = new Map(config.pages.map((p) => [p.pathname, p]));
 }
 export function getCurrentPage() {
     return routeMap.get(currentPath);
@@ -19,10 +19,10 @@ export function App({ config }) {
         const rawPath = window.location.pathname || "/";
         const path = rawPath.replace("/miniapp", "") || "/";
         setCurrentPath(path);
-        let current = getCurrentPage();
+        let current = getCurrentPage() ?? null;
         if (!current) {
             setCurrentPath("/");
-            current = getCurrentPage();
+            current = getCurrentPage() ?? null;
         }
         setPage(current);
         callHost("registerAppConfig", { config });

package/dist/components/dialog/Dialog.d.ts

@@ -15,5 +15,5 @@ export interface DialogProps {
     /** Close dialog when clicking outside (default: true) */
     maskClosable?: boolean;
 }
-export declare function Dialog({ open, image, title, description, okText, cancelText, okDisabled, okLoading, okDanger, onOk, onCancel, maskClosable, }: DialogProps): React.ReactPortal;
+export declare function Dialog({ open, image, title, description, okText, cancelText, okDisabled, okLoading, okDanger, onOk, onCancel, maskClosable, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/components/dialog/Dialog.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { Button } from '../button';
@@ -13,39 +13,39 @@ export function Dialog({ open, image, title, description, okText = 'Xác nhận'
     if (!open)
         return null;
     const hasContent = title || description;
-    return createPortal(_jsx("div", { style: {
-            position: 'fixed',
-            inset: 0,
-            backgroundColor: 'var(--vetc-dialog-overlay)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 1000,
-            padding: '0 var(--vetc-space-24)',
-        }, onClick: maskClosable ? onCancel : undefined, children: _jsxs("div", { style: {
-                width: '100%',
-                maxWidth: 'var(--vetc-dialog-width)',
-                backgroundColor: 'var(--vetc-dialog-bg)',
-                borderRadius: 'var(--vetc-dialog-radius)',
-                overflow: 'hidden',
-                boxShadow: 'var(--vetc-shadow-lg)',
-                fontFamily: 'var(--vetc-font-family)',
-            }, onClick: e => e.stopPropagation(), children: [image && (_jsx("div", { style: { width: '100%', height: 'var(--vetc-dialog-image-height)', overflow: 'hidden', flexShrink: 0 }, children: _jsx("img", { src: image, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) })), hasContent && (_jsxs("div", { style: { padding: 'var(--vetc-dialog-padding)' }, children: [title && (_jsx("div", { style: {
-                                fontSize: 'var(--vetc-dialog-title-size)',
-                                fontWeight: 'var(--vetc-dialog-title-weight)',
-                                color: 'var(--vetc-color-text-primary)',
-                                lineHeight: 'var(--vetc-line-height-relaxed)',
-                                marginBottom: description ? 'var(--vetc-space-8)' : 0,
-                            }, children: title })), description && (_jsx("div", { style: {
-                                fontSize: 'var(--vetc-dialog-desc-size)',
-                                color: 'var(--vetc-dialog-desc-color)',
-                                lineHeight: 'var(--vetc-line-height-relaxed)',
-                            }, children: description }))] })), _jsxs("div", { style: {
-                        display: 'flex',
-                        gap: 'var(--vetc-dialog-btn-gap)',
-                        padding: hasContent
-                            ? `0 var(--vetc-dialog-padding) var(--vetc-dialog-padding)`
-                            : 'var(--vetc-dialog-padding)',
-                    }, children: [onCancel && (_jsx(Button, { block: true, style: "outlined", variant: "neutral", onClick: onCancel, children: cancelText })), _jsx(Button, { block: true, style: okDanger ? 'danger' : 'filled', loading: okLoading, disabled: okDisabled, onClick: onOk, children: okText })] })] }) }), document.body);
+    return _jsx(_Fragment, { children: createPortal(_jsx("div", { style: {
+                position: 'fixed',
+                inset: 0,
+                backgroundColor: 'var(--vetc-dialog-overlay)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                zIndex: 1000,
+                padding: '0 var(--vetc-space-24)',
+            }, onClick: maskClosable ? onCancel : undefined, children: _jsxs("div", { style: {
+                    width: '100%',
+                    maxWidth: 'var(--vetc-dialog-width)',
+                    backgroundColor: 'var(--vetc-dialog-bg)',
+                    borderRadius: 'var(--vetc-dialog-radius)',
+                    overflow: 'hidden',
+                    boxShadow: 'var(--vetc-shadow-lg)',
+                    fontFamily: 'var(--vetc-font-family)',
+                }, onClick: e => e.stopPropagation(), children: [image && (_jsx("div", { style: { width: '100%', height: 'var(--vetc-dialog-image-height)', overflow: 'hidden', flexShrink: 0 }, children: _jsx("img", { src: image, alt: "", style: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' } }) })), hasContent && (_jsxs("div", { style: { padding: 'var(--vetc-dialog-padding)' }, children: [title && (_jsx("div", { style: {
+                                    fontSize: 'var(--vetc-dialog-title-size)',
+                                    fontWeight: 'var(--vetc-dialog-title-weight)',
+                                    color: 'var(--vetc-color-text-primary)',
+                                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                                    marginBottom: description ? 'var(--vetc-space-8)' : 0,
+                                }, children: title })), description && (_jsx("div", { style: {
+                                    fontSize: 'var(--vetc-dialog-desc-size)',
+                                    color: 'var(--vetc-dialog-desc-color)',
+                                    lineHeight: 'var(--vetc-line-height-relaxed)',
+                                }, children: description }))] })), _jsxs("div", { style: {
+                            display: 'flex',
+                            gap: 'var(--vetc-dialog-btn-gap)',
+                            padding: hasContent
+                                ? `0 var(--vetc-dialog-padding) var(--vetc-dialog-padding)`
+                                : 'var(--vetc-dialog-padding)',
+                        }, children: [onCancel && (_jsx(Button, { block: true, style: "outlined", variant: "neutral", onClick: onCancel, children: cancelText })), _jsx(Button, { block: true, style: okDanger ? 'danger' : 'filled', loading: okLoading, disabled: okDisabled, onClick: onOk, children: okText })] })] }) }), document.body) });
 }
 export default Dialog;

package/dist/hooks/use-app-pause.d.ts

@@ -1,6 +1,4 @@
 /**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
+ * useAppPause — trigger khi Native App đi vào background.
  */
 export declare function useAppPause(callback: () => void): void;

package/dist/hooks/use-app-pause.js

@@ -1,18 +1,16 @@
 import { useEffect, useRef } from "react";
 /**
- * useAppPause
- *
- * Trigger khi Native App đi vào background.
+ * useAppPause — trigger khi Native App đi vào background.
  */
 export function useAppPause(callback) {
     const savedCallback = useRef(callback);
-    // giữ callback luôn mới nhất
     useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = () => {
             try {
                 savedCallback.current?.();
@@ -21,9 +19,7 @@ export function useAppPause(callback) {
                 console.error("[useAppPause error]", err);
             }
         };
-        window.MiniApp.on("appPause", handler);
-        return () => {
-            window.MiniApp.off("appPause", handler);
-        };
+        bridge.on("appPause", handler);
+        return () => bridge.off("appPause", handler);
     }, []);
 }

package/dist/hooks/use-app-resume.d.ts

@@ -1,6 +1,4 @@
 /**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
+ * useAppResume — trigger khi Native App quay lại foreground.
  */
 export declare function useAppResume(callback: () => void): void;

package/dist/hooks/use-app-resume.js

@@ -1,8 +1,6 @@
 import { useEffect, useRef } from "react";
 /**
- * useAppResume
- *
- * Trigger khi Native App quay lại foreground.
+ * useAppResume — trigger khi Native App quay lại foreground.
  */
 export function useAppResume(callback) {
     const savedCallback = useRef(callback);
@@ -12,6 +10,7 @@ export function useAppResume(callback) {
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = () => {
             try {
                 savedCallback.current?.();
@@ -20,9 +19,7 @@ export function useAppResume(callback) {
                 console.error("[useAppResume error]", err);
             }
         };
-        window.MiniApp.on("appResume", handler);
-        return () => {
-            window.MiniApp.off("appResume", handler);
-        };
+        bridge.on("appResume", handler);
+        return () => bridge.off("appResume", handler);
     }, []);
 }

package/dist/hooks/use-did-hide.js

@@ -8,14 +8,13 @@ export function useDidHide(route, callback) {
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = (data) => {
             if (data?.route === route) {
                 saved.current?.(data);
             }
         };
-        window.MiniApp.on("didHide", handler);
-        return () => {
-            window.MiniApp.off("didHide", handler);
-        };
+        bridge.on("didHide", handler);
+        return () => bridge.off("didHide", handler);
     }, [route]);
 }

package/dist/hooks/use-did-show.js

@@ -8,14 +8,13 @@ export function useDidShow(route, callback) {
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = (data) => {
             if (data?.route === route) {
                 saved.current?.(data);
             }
         };
-        window.MiniApp.on("didShow", handler);
-        return () => {
-            window.MiniApp.off("didShow", handler);
-        };
+        bridge.on("didShow", handler);
+        return () => bridge.off("didShow", handler);
     }, [route]);
 }

package/dist/hooks/use-listener-scan-qr.d.ts

@@ -3,19 +3,8 @@ type ScanQrResult = {
     type?: string;
     [key: string]: any;
 };
-type MiniAppBridge = {
-    on: (event: string, callback: (data: any) => void) => void;
-    off: (event: string, callback: (data: any) => void) => void;
-};
-declare global {
-    interface Window {
-        MiniApp?: MiniAppBridge;
-    }
-}
 /**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
+ * useListenerScanQr — lắng nghe kết quả scan QR từ Native.
  */
 export declare function useListenerScanQr(callback: (data: ScanQrResult) => void): void;
 export {};

package/dist/hooks/use-listener-scan-qr.js

@@ -1,18 +1,16 @@
 import { useEffect, useRef } from "react";
 /**
- * useListenerScanQr
- *
- * Lắng nghe kết quả scan QR từ Native
+ * useListenerScanQr — lắng nghe kết quả scan QR từ Native.
  */
 export function useListenerScanQr(callback) {
     const savedCallback = useRef(callback);
-    // luôn giữ callback mới nhất
     useEffect(() => {
         savedCallback.current = callback;
     }, [callback]);
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = (data) => {
             try {
                 savedCallback.current?.(data);
@@ -21,9 +19,7 @@ export function useListenerScanQr(callback) {
                 console.error("[useListenerScanQr error]", err);
             }
         };
-        window.MiniApp.on("scanQrResult", handler);
-        return () => {
-            window.MiniApp.off("scanQrResult", handler);
-        };
+        bridge.on("scanQrResult", handler);
+        return () => bridge.off("scanQrResult", handler);
     }, []);
 }

package/dist/hooks/use-tap-app-bar.js

@@ -8,14 +8,13 @@ export function useTapAppBar(route, callback) {
     useEffect(() => {
         if (typeof window === "undefined" || !window.MiniApp)
             return;
+        const bridge = window.MiniApp;
         const handler = (data) => {
             if (data?.route === route) {
                 saved.current?.(data);
             }
         };
-        window.MiniApp.on("onTapAppBar", handler);
-        return () => {
-            window.MiniApp.off("onTapAppBar", handler);
-        };
+        bridge.on("onTapAppBar", handler);
+        return () => bridge.off("onTapAppBar", handler);
     }, [route]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vetc-miniapp/ui-react",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "MiniApp Platform UI React",
   "main": "dist/index.js",
   "module": "dist/index.js",