@v-miniapp/ui-react 1.0.45 → 1.0.59

package/dist-storybook/assets/MOBILE_BEHAVIOURS-DZ6alKTX.js

@@ -1,177 +0,0 @@
-import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as h}from"./index-CgMRTj-o.js";import{b as r,M as s}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function t(i){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...h(),...i.components};return n.jsxs(n.Fragment,{children:[`
-`,`
-`,n.jsx(r,{title:"App Framework/Mobile Behaviours"}),`
-`,n.jsx(e.h1,{id:"mobile-behaviours",children:"Mobile Behaviours"}),`
-`,n.jsxs(e.p,{children:["Component ",n.jsx(e.code,{children:"App"})," đã tích hợp sẵn nhiều behaviours giống native app để mang lại trải nghiệm mobile tự nhiên và mượt mà."]}),`
-`,n.jsx(e.h2,{id:"tổng-quan",children:"Tổng quan"}),`
-`,n.jsxs(e.p,{children:["Các behaviours sau đã được implement sẵn trong ",n.jsx(e.code,{children:"App"}),":"]}),`
-`,n.jsxs(e.ol,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Swipe Navigation"})," - Swipe từ cạnh màn hình để navigate back/forward"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Pull to Refresh"})," - Kéo xuống để refresh page"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Keep Alive"})," - Giữ state và scroll position của page khi navigate. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Scroll Restoration"})," - Tự động khôi phục scroll position khi navigate back"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Page Stacking"})," - Stack các pages giống native app với keep-alive"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Animation"})," - Animation chuyển trang giữa các pages. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-animation--docs",children:"Animation Config"})]}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"1-swipe-navigation",children:"1. Swipe Navigation"}),`
-`,n.jsx(e.p,{children:"Swipe navigation cho phép user swipe từ cạnh màn hình để navigate back/forward, giống như native app iOS/Android."}),`
-`,n.jsx(e.h3,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Phát hiện gesture"}),": Hệ thống phát hiện swipe gesture từ cạnh trái hoặc phải màn hình"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Tự động tắt animation"}),": Khi phát hiện swipe gesture, animation chuyển trang sẽ tự động bị tắt để tránh conflict với gesture animation tự nhiên"]}),`
-`]}),`
-`,n.jsx(e.h3,{id:"lưu-ý",children:"Lưu ý"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsx(e.li,{children:"Swipe navigation hoạt động tự động, không cần config"}),`
-`,n.jsx(e.li,{children:"Chỉ hoạt động trên mobile/touch devices"}),`
-`,n.jsxs(e.li,{children:["Animation sẽ tự động tắt khi swipe để tránh conflict. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-animation--docs",children:"Animation Config"})]}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"2-pull-to-refresh",children:"2. Pull to Refresh"}),`
-`,n.jsx(e.p,{children:"Pull to Refresh cho phép user kéo xuống để refresh page, giống như native app."}),`
-`,n.jsx(e.h3,{id:"cách-sử-dụng",children:"Cách sử dụng"}),`
-`,n.jsxs(e.h4,{id:"sử-dụng-hook-usepulltorefresh",children:["Sử dụng Hook ",n.jsx(e.code,{children:"usePullToRefresh"})]}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { usePullToRefresh } from '@v-miniapp/ui-react'
-
-const MyPage: FC = () => {
-  const handleRefresh = async () => {
-    // Fetch data mới
-    await fetchData()
-  }
-
-  usePullToRefresh(handleRefresh)
-
-  return <div>Page content</div>
-}
-`})}),`
-`,n.jsx(e.h4,{id:"sử-dụng-page-layout-config",children:"Sử dụng Page Layout Config"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      pageLayout: {
-        pullToRefresh: {
-          onRefresh: async () => {
-            // Fetch data mới
-            await fetchData()
-          },
-          pullingText: 'Kéo xuống để làm mới',
-          canReleaseText: 'Thả để làm mới',
-          refreshingText: 'Đang tải...',
-          completeText: 'Làm mới thành công',
-        },
-      },
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h3,{id:"options",children:"Options"}),`
-`,n.jsx(s,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `onRefresh` | `() => Promise<unknown> \\| unknown` | - | Function được gọi khi refresh. Phải return Promise |\n| `pullingText` | `ReactNode` | `'Kéo xuống để làm mới'` | Text hiển thị khi đang kéo |\n| `canReleaseText` | `ReactNode` | `'Thả để làm mới'` | Text hiển thị khi đã đủ threshold |\n| `refreshingText` | `ReactNode` | `'Đang tải...'` | Text hiển thị khi đang refresh |\n| `completeText` | `ReactNode` | `'Làm mới thành công'` | Text hiển thị sau khi refresh xong |\n| `completeDelay` | `number` | `500` | Delay (ms) trước khi reset sau khi complete |\n| `headHeight` | `number` | `40` | Chiều cao của refresh head (px) |\n| `threshold` | `number` | `60` | Khoảng cách kéo tối thiểu để trigger refresh (px) |\n| `disabled` | `boolean` | `false` | Tắt pull to refresh |\n| `renderText` | `(status: IPullToRefreshStatus) => ReactNode` | - | Custom render function cho text theo status |\n"}),`
-`,n.jsx(e.h3,{id:"các-trạng-thái",children:"Các trạng thái"}),`
-`,n.jsx(s,{children:"\n| Trạng thái | Mô tả |\n| :--- | :--- |\n| `pulling` | User đang kéo xuống nhưng chưa đủ threshold |\n| `canRelease` | User đã kéo đủ threshold, có thể thả để refresh |\n| `refreshing` | Đang thực hiện refresh (đang chạy `onRefresh`) |\n| `complete` | Refresh hoàn thành |\n"}),`
-`,n.jsx(e.h3,{id:"lưu-ý-1",children:"Lưu ý"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:["Pull to refresh chỉ hoạt động khi scroll ở ",n.jsx(e.strong,{children:"top"})," (scrollTop = 0)"]}),`
-`,n.jsxs(e.li,{children:["Sử dụng ",n.jsx(e.strong,{children:"rubberband effect"})," để tạo cảm giác tự nhiên khi kéo quá threshold"]}),`
-`,n.jsx(e.li,{children:"Tự động prevent default scroll behavior khi đang pull"}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"3-keep-alive",children:"3. Keep Alive"}),`
-`,n.jsx(e.p,{children:"Keep Alive giữ các pages trong DOM (ẩn) thay vì unmount khi navigate, giúp giữ state và scroll position."}),`
-`,n.jsx(e.h3,{id:"cách-hoạt-động-1",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Giữ trong DOM"}),": Pages được ẩn (",n.jsx(e.code,{children:"display: none"}),") nhưng vẫn trong DOM"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Freeze"}),": Sử dụng ",n.jsx(e.code,{children:"react-freeze"})," để prevent re-render cho pages không hiển thị"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Giới hạn"}),": Chỉ giữ tối đa ",n.jsx(e.code,{children:"maxStack"})," pages trong DOM"]}),`
-`]}),`
-`,n.jsx(e.h3,{id:"cấu-hình",children:"Cấu hình"}),`
-`,n.jsxs(e.p,{children:["Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`,n.jsx(e.h3,{id:"lợi-ích",children:"Lợi ích"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Giữ state"}),": Component state không bị mất khi navigate"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Giữ scroll position"}),": Scroll position được giữ nguyên (kết hợp với scroll restoration)"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Form data"}),": Form data không bị mất khi navigate back"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Performance"}),": Không cần re-render khi navigate back/forward"]}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"4-scroll-restoration",children:"4. Scroll Restoration"}),`
-`,n.jsx(e.p,{children:"Scroll Restoration tự động khôi phục scroll position khi navigate back đến page đã từng visit."}),`
-`,n.jsx(e.h3,{id:"cách-hoạt-động-2",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Lưu scroll position"}),": Khi navigate đi, scroll position được lưu vào cache với key là ",n.jsx(e.code,{children:"location.key"})]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Khôi phục scroll"}),": Khi navigate back, scroll position được khôi phục từ cache"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Manual management"}),": Sử dụng ",n.jsx(e.code,{children:"window.history.scrollRestoration = 'manual'"})," để tắt auto scroll restoration của browser"]}),`
-`]}),`
-`,n.jsx(e.h3,{id:"cấu-hình-1",children:"Cấu hình"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pages: [
-    {
-      pathname: '/list',
-      Component: ListPage,
-      pageLayout: {
-        scrollRestoration: true,  // Bật scroll restoration cho page này
-      },
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h3,{id:"lưu-ý-2",children:"Lưu ý"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:["Scroll restoration chỉ hoạt động khi ",n.jsx(e.code,{children:"scrollRestoration: true"})," trong page layout config"]}),`
-`,n.jsxs(e.li,{children:["Scroll position được lưu theo ",n.jsx(e.code,{children:"location.key"})," (unique cho mỗi lần visit)"]}),`
-`,n.jsxs(e.li,{children:["Kết hợp với Keep Alive để đạt hiệu quả tốt nhất. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"5-page-stacking",children:"5. Page Stacking"}),`
-`,n.jsx(e.p,{children:"Page Stacking là cơ chế stack các pages giống native app, cho phép navigate back/forward qua history stack."}),`
-`,n.jsx(e.h3,{id:"cách-hoạt-động-3",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"History Stack"}),": Mỗi lần navigate tạo một entry mới trong history stack"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Stack Management"}),": Pages được stack và quản lý theo thứ tự LIFO (Last In First Out)"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Keep Alive Integration"}),": Pages trong stack được keep-alive để giữ state. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`]}),`
-`,n.jsx(e.h3,{id:"ví-dụ",children:"Ví dụ"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`// User navigate: Home → List → Detail
-// History stack: [Home, List, Detail]
-// Current page: Detail
-
-// User navigate back
-navigate(-1)  // → List
-// History stack: [Home, List, Detail]
-// Current page: List (từ stack)
-
-// User navigate back lần nữa
-navigate(-1)  // → Home
-// History stack: [Home, List, Detail]
-// Current page: Home (từ stack)
-`})}),`
-`,n.jsx(e.h3,{id:"lưu-ý-3",children:"Lưu ý"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:["Pages trong stack được keep-alive (nếu enabled). Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`,n.jsx(e.li,{children:"Scroll position được restore khi navigate back (nếu scrollRestoration enabled)"}),`
-`,n.jsxs(e.li,{children:["Stack size bị giới hạn bởi ",n.jsx(e.code,{children:"keepAlive.maxStack"})]}),`
-`]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"6-animation",children:"6. Animation"}),`
-`,n.jsx(e.p,{children:"Animation chuyển trang giữa các pages, hỗ trợ các loại animation như slide, fade."}),`
-`,n.jsx(e.h3,{id:"cách-hoạt-động-4",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"View Transition API"}),": Sử dụng View Transition API của browser để tạo animation mượt mà"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Tự động tắt khi swipe"}),": Animation tự động tắt khi phát hiện swipe gesture để tránh conflict"]}),`
-`]}),`
-`,n.jsx(e.h3,{id:"cấu-hình-2",children:"Cấu hình"}),`
-`,n.jsxs(e.p,{children:["Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-animation--docs",children:"Animation Config"})]}),`
-`,n.jsx(e.hr,{}),`
-`,n.jsx(e.h2,{id:"tổng-kết",children:"Tổng kết"}),`
-`,n.jsx(e.p,{children:"Các mobile behaviours trên giúp Mini App có trải nghiệm giống native app:"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Swipe Navigation"}),": Navigate tự nhiên bằng gesture"]}),`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Pull to Refresh"}),": Refresh page bằng gesture kéo xuống"]}),`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Keep Alive"}),": Giữ state và scroll position. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})]}),`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Scroll Restoration"}),": Tự động khôi phục scroll position"]}),`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Page Stacking"}),": Stack pages giống native app"]}),`
-`,n.jsxs(e.li,{children:["✅ ",n.jsx(e.strong,{children:"Animation"}),": Animation chuyển trang mượt mà. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-animation--docs",children:"Animation Config"})]}),`
-`]}),`
-`,n.jsxs(e.p,{children:["Tất cả các behaviours này đã được tích hợp sẵn trong component ",n.jsx(e.code,{children:"App"}),", bạn chỉ cần config và sử dụng!"]})]})}function g(i={}){const{wrapper:e}={...h(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(t,{...i})}):t(i)}export{g as default};

package/dist-storybook/assets/PAGE_LAYOUT-BuOpN-1Y.js

@@ -1,192 +0,0 @@
-import{j as n}from"./iframe-CQAwSt4E.js";import{useMDXComponents as t}from"./index-CgMRTj-o.js";import{b as s,M as r}from"./blocks-BuaOUtiH.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";function o(a){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...a.components};return n.jsxs(n.Fragment,{children:[`
-`,`
-`,n.jsx(s,{title:"App Framework/Page Layout"}),`
-`,n.jsx(e.h1,{id:"page-layout",children:"Page Layout"}),`
-`,n.jsx(e.p,{children:"Page Layout config cho phép bạn cấu hình layout cho các pages với các thuộc tính như spacing, safe area offsets, pull-to-refresh, và scroll restoration."}),`
-`,n.jsx(e.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IAppPageLayoutState = IPageBaseProps & {
-  hidden?: boolean
-  scrollRestoration?: boolean
-}
-
-type IPageBaseProps = {
-  hasSpacing?: boolean
-  headerOffset?: boolean
-  safeAreaTopOffset?: boolean
-  safeAreaBottomOffset?: boolean
-  contentClassName?: string
-  pullToRefresh?: IPullToRefreshBasProps
-  onEndReached?: () => void
-  onEndReachedThreshold?: number
-  id?: string
-  className?: string
-  style?: React.CSSProperties
-}
-`})}),`
-`,n.jsx(e.h2,{id:"thuộc-tính",children:"Thuộc tính"}),`
-`,n.jsx(r,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `hidden` | `boolean` | `false` | Không render page layout wrapper (chỉ render children trực tiếp) |\n| `scrollRestoration` | `boolean` | `true` | Giữ scroll position khi navigate (kết hợp với keep-alive) |\n| `hasSpacing` | `boolean` | `true` | Thêm padding cho content |\n| `headerOffset` | `boolean` | `false` | Thêm offset cho header |\n| `safeAreaTopOffset` | `boolean` | `true` | Thêm safe area top inset padding |\n| `safeAreaBottomOffset` | `boolean` | `true` | Thêm safe area bottom inset padding |\n| `contentClassName` | `string` | - | CSS class name cho content wrapper |\n| `pullToRefresh` | `IPullToRefreshBasProps` | - | Cấu hình pull-to-refresh |\n| `onEndReached` | `() => void` | - | Callback khi scroll đến cuối page |\n| `onEndReachedThreshold` | `number` | `50` | Khoảng cách (px) từ cuối để trigger `onEndReached` |\n| `className` | `string` | - | CSS class name cho page wrapper |\n| `style` | `React.CSSProperties` | - | Inline styles cho page wrapper |\n| `id` | `string` | - | HTML id cho page wrapper |\n"}),`
-`,n.jsx(e.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
-`,n.jsxs(e.ol,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Page Layout Wrapper"}),": Mỗi page được wrap bởi ",n.jsx(e.code,{children:"PageLayout"})," component, cung cấp các tính năng như safe area, spacing, và scroll restoration"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Scroll Restoration"}),": Khi ",n.jsx(e.code,{children:"scrollRestoration: true"})," và keep-alive enabled, scroll position sẽ được giữ khi navigate back/forward"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Safe Area"}),": Tự động thêm padding cho safe area top/bottom (quan trọng trên iOS với notch)"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Hidden"}),": Khi ",n.jsx(e.code,{children:"hidden: true"}),", page layout wrapper sẽ không render, chỉ render children trực tiếp"]}),`
-`]}),`
-`,n.jsx(e.h2,{id:"cấu-hình",children:"Cấu hình"}),`
-`,n.jsx(e.h3,{id:"app-level-config",children:"App-level Config"}),`
-`,n.jsx(e.p,{children:"Cấu hình page layout mặc định cho tất cả pages:"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pageLayout: {
-    hasSpacing: true,
-    safeAreaTopOffset: true,
-    safeAreaBottomOffset: true,
-    scrollRestoration: true,
-    contentClassName: 'p-4',
-  },
-  pages: [
-    // Tất cả pages sẽ dùng config này
-  ],
-}
-`})}),`
-`,n.jsx(e.h3,{id:"page-level-config",children:"Page-level Config"}),`
-`,n.jsx(e.p,{children:"Override page layout cho từng page:"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pageLayout: {
-    hasSpacing: true,
-    scrollRestoration: true,
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Page này dùng app-level config
-    },
-    {
-      pathname: '/detail',
-      Component: DetailPage,
-      // Override page layout cho page này
-      pageLayout: {
-        hasSpacing: false, // Không có spacing
-        contentClassName: 'p-0', // Không có padding
-        scrollRestoration: false, // Reset scroll khi vào page này
-      },
-    },
-    {
-      pathname: '/fullscreen',
-      Component: FullscreenPage,
-      // Ẩn page layout wrapper
-      pageLayout: {
-        hidden: true, // Không wrap với PageLayout
-      },
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"ví-dụ-với-pull-to-refresh",children:"Ví dụ với Pull-to-Refresh"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pageLayout: {
-    pullToRefresh: {
-      onRefresh: async () => {
-        // Refresh data
-        await fetchData()
-      },
-      pullingText: 'Kéo xuống để làm mới',
-      canReleaseText: 'Thả ra để làm mới',
-      refreshingText: 'Đang làm mới...',
-      completeText: 'Hoàn thành',
-    },
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"ví-dụ-với-infinite-scroll",children:"Ví dụ với Infinite Scroll"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pageLayout: {
-    onEndReached: () => {
-      // Load more data
-      loadMore()
-    },
-    onEndReachedThreshold: 100, // Trigger khi còn 100px từ cuối
-  },
-  pages: [
-    {
-      pathname: '/list',
-      Component: ListPage,
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"ví-dụ-với-custom-styling",children:"Ví dụ với Custom Styling"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  pageLayout: {
-    contentClassName: 'bg-gray-50 min-h-screen',
-    className: 'custom-page-wrapper',
-    style: {
-      backgroundColor: '#f5f5f5',
-    },
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      // Override với custom styling
-      pageLayout: {
-        contentClassName: 'bg-white p-6',
-      },
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"scroll-restoration-với-keep-alive",children:"Scroll Restoration với Keep-Alive"}),`
-`,n.jsx(e.p,{children:"Khi kết hợp với keep-alive, scroll restoration sẽ giữ scroll position:"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  keepAlive: {
-    enable: true,
-  },
-  pageLayout: {
-    scrollRestoration: true, // Giữ scroll position
-  },
-  pages: [
-    {
-      pathname: '/list',
-      Component: ListPage,
-      // Khi navigate back, scroll position sẽ được giữ
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"safe-area-offsets",children:"Safe Area Offsets"}),`
-`,n.jsx(e.p,{children:"Safe area offsets tự động điều chỉnh dựa trên navigation bar và bottom tab bar:"}),`
-`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
-  navigationBar: {
-    hidden: false, // Navigation bar hiển thị
-  },
-  bottomTabBar: {
-    items: [{ id: 'home', name: 'Home', path: '/home' }],
-  },
-  pageLayout: {
-    // safeAreaTopOffset tự động = true khi navigationBar.hidden = false
-    // safeAreaBottomOffset tự động = false khi bottomTabBar hiển thị
-  },
-  pages: [
-    {
-      pathname: '/home',
-      Component: HomePage,
-      bottomTabBarId: 'home',
-    },
-  ],
-}
-`})}),`
-`,n.jsx(e.h2,{id:"lưu-ý",children:"Lưu ý"}),`
-`,n.jsxs(e.ul,{children:[`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Scroll Restoration"}),": Chỉ hoạt động tốt khi kết hợp với keep-alive. Khi ",n.jsx(e.code,{children:"scrollRestoration: false"}),", scroll sẽ reset về top khi navigate"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Safe Area"}),": Safe area offsets tự động điều chỉnh dựa trên navigation bar và bottom tab bar visibility"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Hidden"}),": Khi ",n.jsx(e.code,{children:"hidden: true"}),", tất cả các tính năng của page layout (safe area, spacing, scroll restoration) sẽ không hoạt động"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Content ClassName"}),": ",n.jsx(e.code,{children:"contentClassName"})," được áp dụng cho content wrapper bên trong page, không phải page wrapper"]}),`
-`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Pull-to-Refresh"}),": Pull-to-refresh chỉ hoạt động khi page có thể scroll"]}),`
-`]})]})}function g(a={}){const{wrapper:e}={...t(),...a.components};return e?n.jsx(e,{...a,children:n.jsx(o,{...a})}):o(a)}export{g as default};