@v-miniapp/ui-react 1.0.41 → 1.0.47

package/dist-storybook/assets/ANIMATION-DLCDVwPI.js

@@ -0,0 +1,99 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as o}from"./index-7xlKHfV2.js";import{b as s,M as t}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function a(e){const i={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"App Framework/Animation"}),`
+`,n.jsx(i.h1,{id:"animation",children:"Animation"}),`
+`,n.jsx(i.p,{children:"Animation config cho phép bạn cấu hình animation chuyển trang giữa các pages."}),`
+`,n.jsx(i.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-typescript",children:`type IAppAnimationState = {
+  type?: INavigationAnimationType
+}
+
+type INavigationAnimationType =
+  | 'none'
+  | 'slide_up'
+  | 'slide_left'
+  | 'fade_in'
+`})}),`
+`,n.jsx(i.h2,{id:"thuộc-tính",children:"Thuộc tính"}),`
+`,n.jsx(t,{children:"\n| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `type` | `'none' | 'slide_up' | 'slide_left' | 'fade_in'` | - | Loại animation chuyển trang |\n"}),`
+`,n.jsx(i.h2,{id:"animation-types",children:"Animation Types"}),`
+`,n.jsx(t,{children:"\n| Type | Mô tả |\n| :--- | :--- |\n| `none` | Không có animation |\n| `slide_up` | Slide từ dưới lên trên |\n| `slide_left` | Slide từ phải sang trái |\n| `fade_in` | Fade in/out |\n"}),`
+`,n.jsx(i.h2,{id:"cấu-hình",children:"Cấu hình"}),`
+`,n.jsx(i.h3,{id:"app-level-config",children:"App-level Config"}),`
+`,n.jsx(i.p,{children:"Cấu hình animation mặc định cho tất cả pages:"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  animation: {
+    type: 'slide_left', // Animation mặc định
+  },
+  pages: [
+    // Tất cả pages sẽ dùng slide_left animation
+  ],
+}
+`})}),`
+`,n.jsx(i.h3,{id:"page-level-config",children:"Page-level Config"}),`
+`,n.jsx(i.p,{children:"Override animation cho từng page cụ thể:"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  animation: {
+    type: 'slide_left', // App-level: mặc định
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Page này dùng app-level config (slide_left)
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      // Override animation cho page này
+      animation: {
+        type: 'fade_in',
+      },
+    },
+    {
+      pathname: '/detail',
+      Component: DetailPage,
+      // Tắt animation cho page này
+      animation: {
+        type: 'none',
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(i.h2,{id:"navigate-với-animation",children:"Navigate với Animation"}),`
+`,n.jsx(i.p,{children:"Bạn cũng có thể override animation khi navigate:"}),`
+`,n.jsx(i.pre,{children:n.jsx(i.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+// Navigate với animation tùy chỉnh
+navigate('/detail', {
+  animation: {
+    type: 'fade_in',
+  },
+})
+
+// Navigate back với animation
+navigate(-1, {
+  animation: {
+    type: 'none', // Tắt animation khi back
+  },
+})
+`})}),`
+`,n.jsx(i.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:["Animation sử dụng ",n.jsx(i.strong,{children:"View Transition API"})," của browser (nếu có)"]}),`
+`,n.jsx(i.li,{children:"Nếu browser không hỗ trợ View Transition API, sẽ không có animation"}),`
+`,n.jsxs(i.li,{children:["Animation duration mặc định: ",n.jsx(i.strong,{children:"0.25s"})]}),`
+`,n.jsxs(i.li,{children:["Animation direction tự động điều chỉnh dựa trên navigation action:",`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"PUSH/REPLACE"}),": Forward animation"]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"POP"}),": Back animation (reverse)"]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(i.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(i.ul,{children:[`
+`,n.jsxs(i.li,{children:["Animation chỉ hoạt động khi browser hỗ trợ ",n.jsx(i.code,{children:"document.startViewTransition"})]}),`
+`,n.jsxs(i.li,{children:[n.jsx(i.strong,{children:"Swipe navigation sẽ tự động tắt animation"}),": Khi user swipe từ cạnh màn hình để navigate (gesture navigation giống native app), animation sẽ tự động bị tắt để tránh conflict với gesture animation tự nhiên. Hệ thống phát hiện swipe gesture và tạm thời tắt animation trong 500ms."]}),`
+`,n.jsx(i.li,{children:"Animation có thể bị override bởi page-level config hoặc navigate options"}),`
+`]})]})}function g(e={}){const{wrapper:i}={...o(),...e.components};return i?n.jsx(i,{...e,children:n.jsx(a,{...e})}):a(e)}export{g as default};

package/dist-storybook/assets/APP_FRAMEWORK-B9Mrudgl.js

@@ -0,0 +1,197 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as o}from"./index-7xlKHfV2.js";import{b as c,M as a}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function i(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...t.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(c,{title:"App Framework/General"}),`
+`,n.jsx(e.h1,{id:"app-framework",children:"App Framework"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"App"})," là một bộ khung (framework) để xây dựng một Mini App hoàn chỉnh với rất nhiều function hỗ trợ sẵn cho routing, các behaviour trên mobile, và các tính năng native app như pull-to-refresh, swipe navigation, page stacking với keep-alive. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-mobile-behaviours--docs",children:"Mobile Behaviours"}),"."]}),`
+`,n.jsx(e.h2,{id:"tính-năng-global",children:"Tính năng Global"}),`
+`,n.jsxs(e.p,{children:["Component ",n.jsx(e.code,{children:"App"})," đã được tích hợp sẵn các tính năng global sau:"]}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Error Boundary"}),": Bọc toàn bộ ứng dụng với ",n.jsx(e.code,{children:"ErrorBoundary"})," để catch và xử lý lỗi một cách graceful"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Toast Provider"}),": Tích hợp sẵn ",n.jsx(e.code,{children:"ToastProvider"})," để hiển thị toast notifications toàn cục"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Navigation Analytics"}),": Tự động track analytics cho navigation và page title changes"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Multi-language (i18n)"}),": Locale module quản lý đa ngôn ngữ với TypeScript type safety, hỗ trợ custom locale keys và custom language codes. Có thể sử dụng độc lập hoặc tích hợp sẵn với App component. Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/app-framework-locale--docs",children:"Locale Module"})]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { App, type IAppConfig } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"props",children:"Props"}),`
+`,n.jsx(a,{children:"\n| Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mặc định | Mô tả |\n| :--- | :--- | :--- | :--- | :--- |\n| `config` | `IAppConfig` hoặc `() => IAppConfig` | ✓ | - | Cấu hình cho toàn bộ ứng dụng |\n| `localesConfig` | `ILocalesConfig` | ✕ | - | Cấu hình locale (multi-language). Xem chi tiết tại [Locale Module](?path=/docs/app-framework-locale--docs) |\n| `className` | `string` | ✕ | - | CSS class name cho component |\n| `...props` | `ComponentPropsWithRef<'div'>` | ✕ | - | Các props HTML div khác |\n"}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"app-config-iappconfig",children:"App Config (IAppConfig)"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"IAppConfig"})," là cấu hình chính cho component ",n.jsx(e.code,{children:"App"}),", định nghĩa toàn bộ cấu trúc và hành vi của ứng dụng."]}),`
+`,n.jsx(e.h3,{id:"cấu-trúc",children:"Cấu trúc"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IAppConfig = {
+  pages: IPageConfig[] // Danh sách các pages
+  theme?: IThemeConfig // Cấu hình theme mode
+} & IAppState // App-level config
+`})}),`
+`,n.jsx(e.h3,{id:"bảng-thuộc-tính",children:"Bảng thuộc tính"}),`
+`,n.jsx(a,{children:"\n| Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `pages` | `IPageConfig[]` | ✓ | Mảng các page config định nghĩa routing cho ứng dụng |\n| `theme` | `IThemeConfig` | ✕ | Cấu hình theme mode. Xem chi tiết tại [Theme Mode Config](?path=/docs/app-framework-theme-mode--docs) |\n| `animation` | `IAppAnimationState` | ✕ | Cấu hình animation chuyển trang mặc định. Xem chi tiết tại [Animation Config](?path=/docs/app-framework-animation--docs) |\n| `navigationBar` | `IAppNavigationBarState` | ✕ | Cấu hình navigation bar mặc định. Bao gồm tất cả props của [NavigationBar Component](../?path=/docs/components-navigationbar--docs) và thêm thuộc tính `hidden` để không render navigation bar (không có trong DOM). |\n| `bottomTabBar` | `IAppBottomTabBarState` | ✕ | Cấu hình bottom tab bar. Xem chi tiết tại [Bottom Tab Bar Config](?path=/docs/app-framework-bottom-tab-bar--docs) |\n| `keepAlive` | `IAppKeepAliveState` | ✕ | Cấu hình keep-alive (giữ state của page khi navigate). Xem chi tiết tại [Keep Alive Config](?path=/docs/app-framework-keep-alive--docs) |\n| `pageLayout` | `IAppPageLayoutState` | ✕ | Cấu hình page layout mặc định. Xem chi tiết tại [Page Layout Config](?path=/docs/app-framework-page-layout--docs) |\n"}),`
+`,n.jsx(e.h3,{id:"iappstate-app-level-config",children:"IAppState (App-level Config)"}),`
+`,n.jsxs(e.p,{children:["Các thuộc tính trong ",n.jsx(e.code,{children:"IAppState"})," được áp dụng ",n.jsx(e.strong,{children:"mặc định cho tất cả pages"}),". Chi tiết về từng config sẽ được mô tả trong các tài liệu riêng:"]}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"animation"})}),": Animation chuyển trang mặc định giữa các pages"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"navigationBar"})}),": Navigation bar mặc định. Bao gồm tất cả props của ",n.jsx(e.a,{href:"../?path=/docs/components-navigationbar--docs",children:"NavigationBar Component"})," và thêm thuộc tính ",n.jsx(e.code,{children:"hidden"})," để không render navigation bar (không có trong DOM)."]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"bottomTabBar"})}),": Bottom tab bar config"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"keepAlive"})}),": Keep-alive config (giữ state của page khi navigate)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"pageLayout"})}),": Page layout mặc định"]}),`
+`]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"page-config-ipageconfig",children:"Page Config (IPageConfig)"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.code,{children:"IPageConfig"})," định nghĩa cấu hình cho từng page trong ứng dụng."]}),`
+`,n.jsx(e.h3,{id:"cấu-trúc-1",children:"Cấu trúc"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IPageConfig = {
+  pathname: string // Đường dẫn của page
+  Component: ComponentType // React component của page
+  Layouts?: IPageLayout[] // Mảng các layout wrapper (optional). Xem chi tiết bên dưới
+  bottomTabBarId?: string // ID của bottom tab bar item tương ứng (optional)
+} & IPageState // Page-level config (có thể override app-level)
+`})}),`
+`,n.jsx(e.h3,{id:"bảng-thuộc-tính-1",children:"Bảng thuộc tính"}),`
+`,n.jsx(a,{children:"\n| Thuộc tính | Kiểu dữ liệu | Bắt buộc | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `pathname` | `string` | ✓ | Đường dẫn của page (e.g., `/`, `/about`, `/detail`). **Lưu ý:** Không hỗ trợ dynamic pathname như `/:id`, chỉ hỗ trợ exact match |\n| `Component` | `ComponentType` | ✓ | React component của page |\n| `Layouts` | `IPageLayout[]` | ✕ | Mảng các layout wrapper cho page. Xem chi tiết bên dưới |\n| `bottomTabBarId` | `string` | ✕ | ID của bottom tab bar item tương ứng. Bottom tab bar chỉ hiển thị khi page có `bottomTabBarId` khớp với một item trong `bottomTabBar.items` |\n| `animation` | `IAppAnimationState` | ✕ | Override animation chuyển trang cho page này. Xem chi tiết tại [Animation Config](?path=/docs/app-framework-animation--docs) |\n| `navigationBar` | `IAppNavigationBarState` | ✕ | Override navigation bar cho page này. Bao gồm tất cả props của [NavigationBar Component](../?path=/docs/components-navigationbar--docs) và thêm thuộc tính `hidden` để không render navigation bar (không có trong DOM). |\n| `bottomTabBar` | `IAppBottomTabBarState` | ✕ | Override bottom tab bar config cho page này. Xem chi tiết tại [Bottom Tab Bar Config](?path=/docs/app-framework-bottom-tab-bar--docs) |\n| `keepAlive` | `boolean` hoặc `IAppKeepAliveState` | ✕ | Override keep-alive cho page này (giữ state khi navigate). Xem chi tiết tại [Keep Alive Config](?path=/docs/app-framework-keep-alive--docs) |\n| `pageLayout` | `IAppPageLayoutState` | ✕ | Override page layout cho page này. Xem chi tiết tại [Page Layout Config](?path=/docs/app-framework-page-layout--docs) |\n"}),`
+`,n.jsx(e.h3,{id:"layouts",children:"Layouts"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Layouts"})," là mảng các React component wrapper cho page, cho phép bạn wrap page với các layout components như Header, Sidebar, Auth wrapper, etc."]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Đặc điểm:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Chỉ có ở page-level"}),": ",n.jsx(e.code,{children:"Layouts"})," chỉ được khai báo trong ",n.jsx(e.code,{children:"IPageConfig"}),", ",n.jsx(e.strong,{children:"không có"})," ở app-level config. Mỗi page có thể có Layouts riêng."]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Không bị override"}),": Vì không có app-level Layouts, nên Layouts của page không bị override, mỗi page hoàn toàn độc lập."]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Wrap chồng nhau"}),": Layouts được wrap theo thứ tự trong array, phần tử ",n.jsx(e.strong,{children:"cuối cùng"})," trong array sẽ wrap ở ",n.jsx(e.strong,{children:"ngoài cùng"}),"."]}),`
+`]}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Ví dụ:"})}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { FC, PropsWithChildren } from 'react'
+
+const AuthLayout: FC<PropsWithChildren> = ({ children }) => {
+  return <div className="auth-layout">{children}</div>
+}
+
+const HeaderLayout: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <div className="header-layout">
+      <header>Header</header>
+      {children}
+    </div>
+  )
+}
+
+const appConfig: IAppConfig = {
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Layouts: [AuthLayout, HeaderLayout]
+      // Kết quả render: <AuthLayout><HeaderLayout><HomePage /></HeaderLayout></AuthLayout>
+      // HeaderLayout wrap HomePage, AuthLayout wrap HeaderLayout
+      Layouts: [AuthLayout, HeaderLayout],
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      // Page này chỉ có HeaderLayout, không có AuthLayout
+      Layouts: [HeaderLayout],
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Thứ tự wrap:"})}),`
+`,n.jsxs(e.p,{children:["Với ",n.jsx(e.code,{children:"Layouts: [LayoutA, LayoutB, LayoutC]"}),", kết quả render sẽ là:"]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`<LayoutA>
+  <LayoutB>
+    <LayoutC>
+      <Component />
+    </LayoutC>
+  </LayoutB>
+</LayoutA>
+`})}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Lưu ý quan trọng:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Wrap từng màn hình"}),": Layouts phải wrap từng page riêng biệt, không hỗ trợ nested routes hoặc group layout cho nhiều pages. Mỗi page phải có Layouts riêng của nó."]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Không group Layout"}),": Không thể định nghĩa Layouts ở app-level để áp dụng cho nhiều pages. Layouts chỉ có thể được khai báo trong ",n.jsx(e.code,{children:"IPageConfig"})," của từng page."]}),`
+`]}),`
+`,n.jsx(e.h3,{id:"ipagestate-page-level-config",children:"IPageState (Page-level Config)"}),`
+`,n.jsxs(e.p,{children:["Các thuộc tính trong ",n.jsx(e.code,{children:"IPageState"})," có thể ",n.jsx(e.strong,{children:"override app-level config"}),". Chi tiết về từng config sẽ được mô tả trong các tài liệu riêng:"]}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"animation"})}),": Override animation chuyển trang cho page này"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"navigationBar"})}),": Override navigation bar cho page này. Bao gồm tất cả props của ",n.jsx(e.a,{href:"../?path=/docs/components-navigationbar--docs",children:"NavigationBar Component"})," và thêm thuộc tính ",n.jsx(e.code,{children:"hidden"})," để không render navigation bar (không có trong DOM)."]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"bottomTabBar"})}),": Override bottom tab bar config cho page này"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"keepAlive"})}),": Override keep-alive cho page này (giữ state khi navigate)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.code,{children:"pageLayout"})}),": Override page layout cho page này"]}),`
+`]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"cơ-chế-override-app-level--page-level",children:"Cơ chế Override (App-level → Page-level)"}),`
+`,n.jsxs(e.p,{children:["Component ",n.jsx(e.code,{children:"App"})," sử dụng hệ thống ",n.jsx(e.strong,{children:"2 tầng config"})," với cơ chế ",n.jsx(e.strong,{children:"deep merge"}),":"]}),`
+`,n.jsxs(e.ol,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"App-level config"})," (",n.jsx(e.code,{children:"IAppState"}),"): Được định nghĩa ở root của ",n.jsx(e.code,{children:"IAppConfig"}),", áp dụng mặc định cho tất cả pages"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Page-level config"})," (",n.jsx(e.code,{children:"IPageState"}),"): Được định nghĩa trong từng ",n.jsx(e.code,{children:"IPageConfig"}),", có thể override app-level config"]}),`
+`]}),`
+`,n.jsx(e.h3,{id:"thứ-tự-ưu-tiên",children:"Thứ tự ưu tiên"}),`
+`,n.jsx(e.p,{children:"Hệ thống merge config theo thứ tự:"}),`
+`,n.jsxs(e.ol,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Default values"})," (nếu có)"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"App-level config"})," (",n.jsx(e.code,{children:"IAppState"}),")"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"Page-level config"})," (",n.jsx(e.code,{children:"IPageState"}),") - ",n.jsx(e.strong,{children:"Có thể override hoàn toàn app-level config"})]}),`
+`]}),`
+`,n.jsx(e.h3,{id:"ví-dụ-override",children:"Ví dụ Override"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  // App-level config: áp dụng mặc định cho tất cả pages
+  navigationBar: {
+    theme: 'inverse',
+    transparent: 'none',
+    divider: false,
+  },
+  pageLayout: {
+    contentClassName: 'p-4 bg-alias-layer-01',
+  },
+  // Animation chuyển trang mặc định cho tất cả pages
+  animation: {
+    type: 'slide_left',
+  },
+
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      // Page này sẽ dùng app-level config (theme: 'inverse', transparent: 'none', divider: false)
+      navigationBar: {
+        title: 'Trang chủ',
+        // Chỉ override title, các config khác giữ từ app-level
+      },
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      // Override navigation bar cho page này
+      navigationBar: {
+        title: 'Cài đặt',
+        theme: 'default', // Override theme từ app-level
+        // transparent: 'none', divider: false vẫn từ app-level
+      },
+      // Override page layout
+      pageLayout: {
+        contentClassName: 'p-0', // Override className, các config khác giữ nguyên
+      },
+      // Override animation chuyển trang cho page này
+      animation: {
+        type: 'fade_in', // Override animation type
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(e.h3,{id:"deep-merge",children:"Deep Merge"}),`
+`,n.jsx(e.p,{children:"Config được merge sâu (deep merge), nghĩa là bạn chỉ cần override các properties cần thay đổi, các properties khác sẽ giữ nguyên từ app-level config."}),`
+`,n.jsx(e.p,{children:n.jsx(e.strong,{children:"Ví dụ:"})}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:["App-level: ",n.jsx(e.code,{children:"navigationBar: { theme: 'inverse', transparent: 'none', divider: false }"})]}),`
+`,n.jsxs(e.li,{children:["Page-level: ",n.jsx(e.code,{children:"navigationBar: { title: 'Home' }"})]}),`
+`,n.jsxs(e.li,{children:["Kết quả: ",n.jsx(e.code,{children:"navigationBar: { title: 'Home', theme: 'inverse', transparent: 'none', divider: false }"})]}),`
+`]}),`
+`,n.jsx(e.hr,{}),`
+`,n.jsx(e.h2,{id:"các-config-chi-tiết",children:"Các Config chi tiết"}),`
+`,n.jsx(e.p,{children:"Chi tiết về các config sau sẽ được mô tả trong các tài liệu riêng:"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.a,{href:"?path=/docs/app-framework-animation--docs",children:"Animation Config"})}),": Cấu hình animation chuyển trang giữa các pages (",n.jsx(e.code,{children:"animation"}),")"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.a,{href:"?path=/docs/app-framework-bottom-tab-bar--docs",children:"Bottom Tab Bar Config"})}),": Cấu hình bottom tab bar (",n.jsx(e.code,{children:"bottomTabBar"}),")"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.a,{href:"?path=/docs/app-framework-keep-alive--docs",children:"Keep Alive Config"})}),": Cấu hình keep-alive (giữ state của page khi navigate) (",n.jsx(e.code,{children:"keepAlive"}),")"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.a,{href:"?path=/docs/app-framework-page-layout--docs",children:"Page Layout Config"})}),": Cấu hình page layout (",n.jsx(e.code,{children:"pageLayout"}),")"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:n.jsx(e.a,{href:"?path=/docs/app-framework-theme-mode--docs",children:"Theme Mode Config"})}),": Cấu hình theme mode (",n.jsx(e.code,{children:"theme"}),")"]}),`
+`]})]})}function p(t={}){const{wrapper:e}={...o(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(i,{...t})}):i(t)}export{p as default};

package/dist-storybook/assets/BOTTOM_TAB_BAR-Bgfy-nnv.js

@@ -0,0 +1,175 @@
+import{j as n}from"./iframe-CLEfhyJc.js";import{useMDXComponents as o}from"./index-7xlKHfV2.js";import{b as a,M as r}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";function i(e){const t={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(a,{title:"App Framework/Bottom Tab Bar"}),`
+`,n.jsx(t.h1,{id:"bottom-tab-bar",children:"Bottom Tab Bar"}),`
+`,n.jsx(t.p,{children:"Bottom Tab Bar config cho phép bạn cấu hình thanh điều hướng ở cuối màn hình với các tab items."}),`
+`,n.jsx(t.h2,{id:"cấu-trúc",children:"Cấu trúc"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`type IAppBottomTabBarState = Partial<
+  Omit<IBottomTabBarProps, 'activeId' | 'items'>
+> & {
+  items: Array<
+    IBottomTabBarItem & { path: string; params?: Record<string, string> }
+  >
+  hidden?: boolean
+}
+
+type IBottomTabBarItem = {
+  id: string
+  name: string
+  icon?: IIconProps | ReactNode
+  activeIcon?: IIconProps | ReactNode
+}
+`})}),`
+`,n.jsx(t.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| `items` | <code>Array&lt;IBottomTabBarItem &amp; {<br/>&nbsp;&nbsp;path: string;<br/>&nbsp;&nbsp;params?: Record&lt;string, string&gt;<br/>}&gt;</code> | - | Mảng tab items (mỗi item có `id`, `name`, `path`) |\n| `hidden` | `boolean` | `false` | Không render bottom tab bar (không có trong DOM) |\n| `indicator` | `boolean` | `true` | Hiển thị indicator bar cho tab active |\n| `setCssVariable` | `boolean` | - | Set CSS variable `--vsf-bottom-tab-bar-height` |\n| `bgColor` | `IColor` | - | Màu nền của tab bar |\n| `color` | `IColor` | - | Màu text và icon cho các tab không active |\n| `activeColor` | `IColor` | - | Màu text và icon cho tab active |\n| `safeAreaBottomOffset` | `boolean` | `true` | Thêm safe area bottom inset padding |\n| `onItemClick` | `(item, index) => void` | - | Callback khi click vào tab item |\n| `className` | `string` | - | CSS class name tùy chỉnh |\n| `...props` | `ComponentProps<'div'>` | - | Tất cả props HTML div chuẩn |\n"}),`
+`,n.jsx(t.h2,{id:"cách-hoạt-động",children:"Cách hoạt động"}),`
+`,n.jsxs(t.ol,{children:[`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Items với path"}),": Mỗi item trong ",n.jsx(t.code,{children:"items"})," phải có ",n.jsx(t.code,{children:"path"})," để navigate khi click"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Page linking"}),": Page phải có ",n.jsx(t.code,{children:"bottomTabBarId"})," khớp với ",n.jsx(t.code,{children:"id"})," của item để bottom tab bar hiển thị"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Active state"}),": Tab bar tự động highlight tab có ",n.jsx(t.code,{children:"id"})," khớp với ",n.jsx(t.code,{children:"bottomTabBarId"})," của page hiện tại"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Navigation"}),": Khi click vào tab, sẽ navigate đến ",n.jsx(t.code,{children:"path"})," của item đó"]}),`
+`]}),`
+`,n.jsx(t.h2,{id:"cấu-hình",children:"Cấu hình"}),`
+`,n.jsx(t.h3,{id:"app-level-config",children:"App-level Config"}),`
+`,n.jsx(t.p,{children:"Cấu hình bottom tab bar mặc định:"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import { HomeIcon, SettingsIcon } from '@ant-design/icons'
+
+const appConfig: IAppConfig = {
+  bottomTabBar: {
+    items: [
+      {
+        id: 'home',
+        name: 'Trang chủ',
+        icon: <HomeIcon />,
+        path: '/home',
+      },
+      {
+        id: 'settings',
+        name: 'Cài đặt',
+        icon: <SettingsIcon />,
+        path: '/settings',
+      },
+    ],
+    indicator: true,
+    safeAreaBottomOffset: true,
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      bottomTabBarId: 'home', // Link với bottom tab bar item
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      bottomTabBarId: 'settings',
+    },
+  ],
+}
+`})}),`
+`,n.jsx(t.h3,{id:"page-level-config",children:"Page-level Config"}),`
+`,n.jsx(t.p,{children:"Override bottom tab bar cho từng page:"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  bottomTabBar: {
+    items: [
+      { id: 'home', name: 'Home', path: '/home' },
+      { id: 'settings', name: 'Settings', path: '/settings' },
+    ],
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      bottomTabBarId: 'home',
+      // Override bottom tab bar cho page này
+      bottomTabBar: {
+        hidden: false,
+        indicator: false, // Tắt indicator cho page này
+      },
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      bottomTabBarId: 'settings',
+      // Ẩn bottom tab bar cho page này
+      bottomTabBar: {
+        hidden: true,
+      },
+    },
+  ],
+}
+`})}),`
+`,n.jsx(t.h2,{id:"ví-dụ-với-icons",children:"Ví dụ với Icons"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import {
+  HomeOutlined,
+  HomeFilled,
+  SettingOutlined,
+  SettingFilled,
+} from '@ant-design/icons'
+
+const appConfig: IAppConfig = {
+  bottomTabBar: {
+    items: [
+      {
+        id: 'home',
+        name: 'Trang chủ',
+        icon: <HomeOutlined />, // Icon khi không active
+        activeIcon: <HomeFilled />, // Icon khi active
+        path: '/home',
+      },
+      {
+        id: 'settings',
+        name: 'Cài đặt',
+        icon: <SettingOutlined />,
+        activeIcon: <SettingFilled />,
+        path: '/settings',
+      },
+    ],
+  },
+  pages: [
+    {
+      pathname: '/home',
+      Component: HomePage,
+      bottomTabBarId: 'home',
+    },
+    {
+      pathname: '/settings',
+      Component: SettingsPage,
+      bottomTabBarId: 'settings',
+    },
+  ],
+}
+`})}),`
+`,n.jsx(t.h2,{id:"ví-dụ-với-styling",children:"Ví dụ với Styling"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`const appConfig: IAppConfig = {
+  bottomTabBar: {
+    items: [
+      { id: 'home', name: 'Home', path: '/home' },
+      { id: 'settings', name: 'Settings', path: '/settings' },
+    ],
+    bgColor: '#ffffff',
+    color: '#666666',
+    activeColor: '#1890ff',
+    indicator: true,
+  },
+  pages: [
+    // ...
+  ],
+}
+`})}),`
+`,n.jsx(t.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(t.ul,{children:[`
+`,n.jsxs(t.li,{children:[n.jsxs(t.strong,{children:["Bottom tab bar chỉ hiển thị khi page có ",n.jsx(t.code,{children:"bottomTabBarId"})]}),": Nếu page không có ",n.jsx(t.code,{children:"bottomTabBarId"})," hoặc ",n.jsx(t.code,{children:"bottomTabBarId"})," không khớp với bất kỳ item nào, bottom tab bar sẽ không hiển thị"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Path matching"}),": ",n.jsx(t.code,{children:"path"})," trong item phải khớp với ",n.jsx(t.code,{children:"pathname"})," của page để navigation hoạt động đúng"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Params"}),": Bạn có thể thêm ",n.jsx(t.code,{children:"params"})," vào item để truyền query parameters khi navigate:",`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`{
+  id: 'detail',
+  name: 'Detail',
+  path: '/detail',
+  params: { id: '123' }, // Navigate đến /detail?id=123
+}
+`})}),`
+`]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Hidden"}),": Khi ",n.jsx(t.code,{children:"hidden: true"}),", bottom tab bar sẽ không được render (không có trong DOM)"]}),`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"Safe Area"}),": ",n.jsx(t.code,{children:"safeAreaBottomOffset"})," tự động thêm padding cho safe area bottom (quan trọng trên iOS)"]}),`
+`]})]})}function l(e={}){const{wrapper:t}={...o(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(i,{...e})}):i(e)}export{l as default};