@v-miniapp/ui-react 1.0.45 → 1.0.59

package/dist-storybook/assets/use-did-hide-BmABiaUE.js

@@ -0,0 +1,30 @@
+import{j as e}from"./iframe-DfPay7Zl.js";import{useMDXComponents as s}from"./index-DqZh6B0b.js";import{b as o,M as d}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function r(i){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...i.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(o,{title:"Router/useDidHide"}),`
+`,e.jsx(n.h1,{id:"usedidhide",children:"useDidHide"}),`
+`,e.jsxs(n.p,{children:["Hook cho ",e.jsx(n.strong,{children:"lifecycle khi page bị ẩn"}),": gọi callback (nếu truyền) khi navigation rời khỏi page này, và trả về boolean ",e.jsx(n.strong,{children:"didHide"})," cho biết page có đang bị ẩn hay không."]}),`
+`,e.jsxs(n.blockquote,{children:[`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Ghi chú"}),": useDidHide được dùng khi cấu hình ",e.jsx(n.code,{children:"keepAlive"}),". Xem chi tiết tại ",e.jsx(n.a,{href:"?path=/docs/router-router--docs#irouterconfig",children:"IRouterConfig"})]}),`
+`]}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useDidHide } from '@v-miniapp/router'
+`})}),`
+`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useDidHide } from '@v-miniapp/router'
+
+const MyPage = () => {
+  const didHide = useDidHide(() => {
+    console.log('Page is hidden')
+    // Pause timers, cleanup subscriptions, v.v.
+  })
+
+  return <div>Page is {didHide ? 'hidden' : 'visible'}</div>
+}
+`})}),`
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Lưu ý:"})," Callback được gọi khi sự kiện ",e.jsx(n.code,{children:"beforeHistoryChange"})," xảy ra và ",e.jsx(n.code,{children:"nextHistory.location.key"})," khác với location key của page hiện tại (tức user đã navigate sang page khác)."]}),`
+`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
+`,e.jsx(d,{children:"\n| Tham số | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `func` | `() => void` | Callback được gọi khi page bị hide (navigation sang page khác). Optional. |\n"}),`
+`,e.jsx(n.h2,{id:"returns",children:"Returns"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"didHide"}),": ",e.jsx(n.code,{children:"boolean"})," — ",e.jsx(n.code,{children:"true"})," khi page vừa bị ẩn; ",e.jsx(n.code,{children:"false"})," khi page đang hiển thị."]}),`
+`]})]})}function u(i={}){const{wrapper:n}={...s(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(r,{...i})}):r(i)}export{u as default};

package/dist-storybook/assets/use-did-show-CQuySkkT.js

@@ -0,0 +1,30 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as r}from"./index-DqZh6B0b.js";import{b as s,M as t}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function o(i){const e={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"Router/useDidShow"}),`
+`,n.jsx(e.h1,{id:"usedidshow",children:"useDidShow"}),`
+`,n.jsxs(e.p,{children:["Hook cho ",n.jsx(e.strong,{children:"lifecycle khi page được hiển thị"}),": gọi callback (nếu truyền) khi navigation khiến page này trở thành page hiện tại, và trả về boolean ",n.jsx(e.strong,{children:"didShow"})," cho biết page có đang hiển thị hay không."]}),`
+`,n.jsxs(e.blockquote,{children:[`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Ghi chú"}),": useDidShow được dùng khi cấu hình ",n.jsx(e.code,{children:"keepAlive"}),". Xem chi tiết tại ",n.jsx(e.a,{href:"?path=/docs/router-router--docs#irouterconfig",children:"IRouterConfig"})]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useDidShow } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useDidShow } from '@v-miniapp/router'
+
+const MyPage = () => {
+  const didShow = useDidShow(() => {
+    console.log('Page is shown')
+    // Fetch data, track analytics, v.v.
+  })
+
+  return <div>Page is {didShow ? 'visible' : 'hidden'}</div>
+}
+`})}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"Lưu ý:"})," Callback được gọi khi mount và mỗi khi navigation dẫn tới page này được show (sự kiện ",n.jsx(e.code,{children:"beforeHistoryChangeP2"})," với ",n.jsx(e.code,{children:"nextHistory.location.key"})," trùng với location key của page)."]}),`
+`,n.jsx(e.h2,{id:"parameters",children:"Parameters"}),`
+`,n.jsx(t,{children:"\n| Tham số | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `func` | `() => void` | Callback được gọi khi page show (và gọi một lần khi mount). Optional. |\n"}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"didShow"}),": ",n.jsx(e.code,{children:"boolean"})," — ",n.jsx(e.code,{children:"true"})," khi page đang là page hiển thị; ",n.jsx(e.code,{children:"false"})," khi đã bị navigate ra."]}),`
+`]})]})}function u(i={}){const{wrapper:e}={...r(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(o,{...i})}):o(i)}export{u as default};

package/dist-storybook/assets/use-histories-CBm09Lno.js

@@ -0,0 +1,30 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as r}from"./index-DqZh6B0b.js";import{b as i}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function t(s){const e={a:"a",code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(i,{title:"Router/useHistories"}),`
+`,n.jsx(e.h1,{id:"usehistories",children:"useHistories"}),`
+`,n.jsxs(e.p,{children:["Hook trả về ",n.jsx(e.strong,{children:"toàn bộ history stack"})," dưới dạng mảng các ",n.jsx(e.code,{children:"IHistory"})," (mỗi entry gồm ",n.jsx(e.code,{children:"action"})," và ",n.jsx(e.code,{children:"location"}),"). Dùng khi cần biết độ sâu stack, kiểm tra có thể back hay không, hoặc hiển thị breadcrumb."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useHistories } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useHistories, useNavigate } from '@v-miniapp/router'
+
+const NavigationBar = () => {
+  const histories = useHistories()
+  const navigate = useNavigate()
+  const canGoBack = histories.length > 1
+
+  return (
+    <header>
+      {canGoBack && (
+        <button onClick={() => navigate(-1)}>Back</button>
+      )}
+      <span>Stack: {histories.length} pages</span>
+    </header>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"histories"}),": ",n.jsx(e.code,{children:"IHistory[]"})," — Mảng các history entry theo thứ tự từ gốc đến hiện tại. Xem thêm ",n.jsx(e.a,{href:"?path=/docs/router-usehistory--docs#returns",children:"usage với useHistory"}),"."]}),`
+`]})]})}function u(s={}){const{wrapper:e}={...r(),...s.components};return e?n.jsx(e,{...s,children:n.jsx(t,{...s})}):t(s)}const l=[];export{l as __namedExportsOrder,u as default};

package/dist-storybook/assets/use-history-7yguNz6O.js

@@ -0,0 +1,33 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as o}from"./index-DqZh6B0b.js";import{b as i,M as s}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function e(r){const t={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...o(),...r.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(i,{title:"Router/useHistory"}),`
+`,n.jsx(t.h1,{id:"usehistory",children:"useHistory"}),`
+`,n.jsxs(t.p,{children:["Hook trả về ",n.jsx(t.strong,{children:"history entry"})," hiện tại: ",n.jsx(t.code,{children:"action"})," (PUSH / REPLACE / POP) và ",n.jsx(t.code,{children:"location"}),". Trong cây render của router, giá trị tương ứng với page/component theo ",n.jsx(t.strong,{children:"LocationKeyContext"})," (entry của page đang hiển thị hoặc entry được context chỉ định)."]}),`
+`,n.jsx(t.h2,{id:"import",children:"Import"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`import { useHistory } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(t.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import { useHistory } from '@v-miniapp/router'
+
+const MyPage = () => {
+  const history = useHistory()
+
+  return (
+    <div>
+      <p>Path: {history.location.pathname}</p>
+      <p>Action: {history.action}</p>
+      <p>Params: {JSON.stringify(history.location.params)}</p>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(t.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(t.ul,{children:[`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"history"}),": ",n.jsx(t.code,{children:"IHistory"})]}),`
+`]}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`type IHistory = {
+  action: IHistoryAction  // 'POP' | 'REPLACE' | 'PUSH'
+  location: ILocation     // { key, pathname, params?, state? }
+}
+`})}),`
+`,n.jsx(s,{children:"\n| Thuộc tính | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `action` | `'PUSH' \\| 'REPLACE' \\| 'POP'` | Cách đi tới entry này: push mới, replace, hay back/forward |\n| `location` | `ILocation` | Pathname, params, state, key của entry |\n"})]})}function l(r={}){const{wrapper:t}={...o(),...r.components};return t?n.jsx(t,{...r,children:n.jsx(e,{...r})}):e(r)}const m=[];export{m as __namedExportsOrder,l as default};

package/dist-storybook/assets/use-language-DPyWMce2.js

@@ -0,0 +1,46 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as s}from"./index-DqZh6B0b.js";import{b as t,M as i}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function a(g){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...s(),...g.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(t,{title:"Locale/useLanguage"}),`
+`,n.jsx(e.h1,{id:"uselanguage",children:"useLanguage"}),`
+`,n.jsxs(e.p,{children:["Hook trả về ",n.jsx(e.strong,{children:"ngôn ngữ hiện tại"}),", ",n.jsx(e.strong,{children:"ngôn ngữ system"})," và function ",n.jsx(e.strong,{children:"setLanguage"})," để đổi ngôn ngữ. Component dùng hook này sẽ ",n.jsx(e.strong,{children:"re-render"})," khi ngôn ngữ thay đổi."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useLanguage } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`type IUseLanguageResult = {
+  language: IAppLanguage    // Ngôn ngữ đang dùng ('vi' | 'en' | 'system' | custom)
+  systemLanguage: ILang     // Ngôn ngữ từ system/URL (khi language === 'system')
+  setLanguage: (language: ILang) => void
+}
+`})}),`
+`,n.jsx(i,{children:"\n| Thuộc tính | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `language` | `IAppLanguage` | Ngôn ngữ hiện tại; `'system'` nghĩa là đang dùng `systemLanguage` |\n| `systemLanguage` | `ILang` | Ngôn ngữ từ URL (`langCode`) hoặc system |\n| `setLanguage` | `(language: ILang) => void` | Đặt ngôn ngữ hiện tại (type-safe nếu đã declare `ICustomLocales`) |\n"}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.h3,{id:"hiển-thị-và-đổi-ngôn-ngữ",children:"Hiển thị và đổi ngôn ngữ"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useLanguage } from '@v-miniapp/ui-react'
+
+function LanguageSwitcher() {
+  const { language, setLanguage } = useLanguage()
+
+  return (
+    <div>
+      <p>Current: {language}</p>
+      <button onClick={() => setLanguage('vi')}>Tiếng Việt</button>
+      <button onClick={() => setLanguage('en')}>English</button>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h3,{id:"dùng-systemlanguage-khi-language--system",children:"Dùng systemLanguage khi language === 'system'"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`function DebugLanguage() {
+  const { language, systemLanguage } = useLanguage()
+
+  return (
+    <p>
+      App language: {language}
+      {language === 'system' && \` (resolved: \${systemLanguage})\`}
+    </p>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"type-safety",children:"Type safety"}),`
+`,n.jsxs(e.p,{children:["Sau khi khai báo ",n.jsx(e.code,{children:"ICustomLocales.language"})," (ví dụ ",n.jsx(e.code,{children:"'vi' | 'en' | 'jp'"}),"), ",n.jsx(e.code,{children:"setLanguage()"})," chỉ chấp nhận các giá trị đó; TypeScript báo lỗi nếu truyền language khác."]})]})}function h(g={}){const{wrapper:e}={...s(),...g.components};return e?n.jsx(e,{...g,children:n.jsx(a,{...g})}):a(g)}export{h as default};

package/dist-storybook/assets/use-load-more-KlDJZhj2.js

@@ -0,0 +1,42 @@
+import{j as e}from"./iframe-DfPay7Zl.js";import{useMDXComponents as r}from"./index-DqZh6B0b.js";import{b as s,M as o}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function t(i){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...i.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(s,{title:"UI React/useLoadMore"}),`
+`,e.jsx(n.h1,{id:"useloadmore",children:"useLoadMore"}),`
+`,e.jsxs(n.p,{children:["Hook đăng ký ",e.jsx(n.strong,{children:"handler load more"})," (onEndReached) cho ",e.jsx(n.strong,{children:"page hiện tại"}),". Khi user scroll tới cuối vùng scroll (hoặc trigger tương đương từ page layout), handler được gọi. Dùng cho infinite list."]}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { useLoadMore } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { useLoadMore } from '@v-miniapp/ui-react'
+
+const InfiniteListPage = () => {
+  const [page, setPage] = useState(1)
+  const [items, setItems] = useState([])
+
+  useLoadMore(() => {
+    setPage((p) => p + 1)
+  })
+
+  useEffect(() => {
+    fetchPage(page).then((data) => setItems((prev) => [...prev, ...data]))
+  }, [page])
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+`})}),`
+`,e.jsx(n.h2,{id:"signature",children:"Signature"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`function useLoadMore(onEndReached: () => void): void
+`})}),`
+`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
+`,e.jsx(o,{children:"\n| Tham số | Kiểu | Bắt buộc | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `onEndReached` | `() => void` | ✓ | Function gọi khi scroll tới cuối (load thêm dữ liệu). |\n"}),`
+`,e.jsx(n.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:["Chỉ áp dụng cho ",e.jsx(n.strong,{children:"page hiện tại"}),". Mỗi page cần gọi ",e.jsx(n.code,{children:"useLoadMore"})," riêng nếu muốn load more."]}),`
+`,e.jsxs(n.li,{children:["Kết hợp với ",e.jsx(n.strong,{children:"onEndReachedThreshold"})," để xác định khi nào “tới cuối”."]}),`
+`]})]})}function u(i={}){const{wrapper:n}={...r(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(t,{...i})}):t(i)}export{u as default};

package/dist-storybook/assets/use-location-C7kE1yla.js

@@ -0,0 +1,39 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as i}from"./index-DqZh6B0b.js";import{b as r,M as s}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function o(e){const t={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...i(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(r,{title:"Router/useLocation"}),`
+`,n.jsx(t.h1,{id:"uselocation",children:"useLocation"}),`
+`,n.jsxs(t.p,{children:["Hook trả về ",n.jsx(t.strong,{children:"location"})," hiện tại của page (pathname, params, state, key). Giá trị lấy từ ",n.jsx(t.code,{children:"useHistory().location"}),"; phụ thuộc context (location key) nên đúng với page/component đang render."]}),`
+`,n.jsx(t.h2,{id:"import",children:"Import"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`import { useLocation } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(t.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import { useLocation } from '@v-miniapp/router'
+
+const DetailPage = () => {
+  const location = useLocation()
+
+  if (!location) return null
+
+  const id = location.params?.id
+  const from = location.state?.from
+
+  return (
+    <div>
+      Path: {location.pathname}
+      {id && <p>ID: {id}</p>}
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(t.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(t.ul,{children:[`
+`,n.jsxs(t.li,{children:[n.jsx(t.strong,{children:"location"}),": ",n.jsx(t.code,{children:"ILocation"})]}),`
+`]}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`type ILocation = {
+  key: string
+  pathname: string
+  params?: Record<string, string>
+  state?: any
+}
+`})}),`
+`,n.jsx(s,{children:"\n| Thuộc tính | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `key` | `string` | Key duy nhất cho entry trong history |\n| `pathname` | `string` | Đường dẫn hiện tại |\n| `params` | `Record&lt;string, string&gt;` | Query params từ navigate options |\n| `state` | `any` | State từ navigate options |\n"})]})}function h(e={}){const{wrapper:t}={...i(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(o,{...e})}):o(e)}export{h as default};

package/dist-storybook/assets/use-navigate-BpIyvtwc.js

@@ -0,0 +1,36 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as r}from"./index-DqZh6B0b.js";import{b as s,M as a}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function i(t){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...t.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(s,{title:"Router/useNavigate"}),`
+`,n.jsx(e.h1,{id:"usenavigate",children:"useNavigate"}),`
+`,n.jsxs(e.p,{children:["Hook trả về function ",n.jsx(e.strong,{children:"navigate"})," để điều hướng giữa các pages: bằng ",n.jsx(e.strong,{children:"pathname"})," hoặc bằng ",n.jsx(e.strong,{children:"delta"})," (back/forward)."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigate } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(e.h2,{id:"sử-dụng",children:"Sử dụng"}),`
+`,n.jsx(e.h3,{id:"navigate-bằng-pathname",children:"Navigate bằng pathname"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+navigate('/settings')
+navigate('/detail', { params: { id: '123' }, state: { from: 'home' } })
+navigate('/home', { replace: true })
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"navigate"}),": Function với type ",n.jsx(e.code,{children:"INavigate"}),":",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(pathname: string, options?: INavigatePathnameOptions): void"})," — đi tới pathname"]}),`
+`,n.jsxs(e.li,{children:[n.jsx(e.code,{children:"navigate(delta: number, options?: INavigateDeltaOptions): void"})," — back/forward trong history stack"]}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.h3,{id:"navigate-back--forward",children:"Navigate back / forward"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`const navigate = useNavigate()
+
+navigate(-1)  // Back 1 page
+navigate(1)   // Forward 1 page
+navigate(-1, { animation: { type: 'none' } })
+`})}),`
+`,n.jsx(e.h2,{id:"inavigatepathnameoptions",children:"INavigatePathnameOptions"}),`
+`,n.jsx(a,{children:"\n| Option | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `replace` | `boolean` | `true`: thay thế entry hiện tại thay vì push mới |\n| `params` | `Record<string, string>` | Query params (xuất hiện trên URL) |\n| `state` | `any` | State gửi kèm (không lên URL), lưu trong history |\n| Các thuộc tính `IRouterPageState` | - | Override animation, keepAlive, Layouts, v.v. cho page đích |\n"}),`
+`,n.jsx(e.h2,{id:"inavigatedeltaoptions",children:"INavigateDeltaOptions"}),`
+`,n.jsx(a,{children:"\n| Option | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `animation` | `IAnimationState` | Override animation cho lần navigate này. `type` (`'none'`, `'slide_up'`, `'slide_left'`, `'fade_in'`) |\n"})]})}function l(t={}){const{wrapper:e}={...r(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(i,{...t})}):i(t)}export{l as default};

package/dist-storybook/assets/use-navigation-bar-guzwhM_u.js

@@ -0,0 +1,42 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as i}from"./index-DqZh6B0b.js";import{b as r,M as o}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function e(t){const a={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...i(),...t.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(r,{title:"UI React/useNavigationBar"}),`
+`,n.jsx(a.h1,{id:"usenavigationbar",children:"useNavigationBar"}),`
+`,n.jsxs(a.p,{children:["Hook trả về ",n.jsx(a.strong,{children:"state"})," navigation bar đã merge (app + page hiện tại) và các function để ",n.jsx(a.strong,{children:"cập nhật"})," / ",n.jsx(a.strong,{children:"ẩn"})," / ",n.jsx(a.strong,{children:"reset"})," cho page hoặc cho app. Dùng khi cần đọc hoặc thay đổi title, backIcon, hidden, … của navigation bar từ trong component."]}),`
+`,n.jsx(a.h2,{id:"import",children:"Import"}),`
+`,n.jsx(a.pre,{children:n.jsx(a.code,{className:"language-typescript",children:`import { useNavigationBar } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(a.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(a.h3,{id:"đổi-title-cho-page-hiện-tại",children:"Đổi title cho page hiện tại"}),`
+`,n.jsx(a.pre,{children:n.jsx(a.code,{className:"language-tsx",children:`import { useNavigationBar } from '@v-miniapp/ui-react'
+
+const DetailPage = () => {
+  const { setPageNavigationBar } = useNavigationBar()
+
+  const handleSelect = (item) => {
+    setPageNavigationBar({ title: item.name })
+  }
+
+  return <div>...</div>
+}
+`})}),`
+`,n.jsx(a.h3,{id:"ẩn-navigation-bar-trên-một-page",children:"Ẩn navigation bar trên một page"}),`
+`,n.jsx(a.pre,{children:n.jsx(a.code,{className:"language-tsx",children:`const { removePageNavigationBar } = useNavigationBar()
+
+useEffect(() => {
+  removePageNavigationBar()
+  return () => resetPageNavigationBar()
+}, [])
+`})}),`
+`,n.jsx(a.h3,{id:"đọc-state-để-render-tùy-biến",children:"Đọc state để render tùy biến"}),`
+`,n.jsx(a.pre,{children:n.jsx(a.code,{className:"language-tsx",children:`const { state } = useNavigationBar()
+
+return (
+  <div>
+    <p>Title: {state.title}</p>
+    <p>Hidden: {state.hidden ? 'Yes' : 'No'}</p>
+  </div>
+)
+`})}),`
+`,n.jsx(a.h2,{id:"returns",children:"Returns"}),`
+`,n.jsx(o,{children:"\n| Thuộc tính | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `state` | `IPageNavigationBarState` (merged) | State đã merge: default (divider, transparent) + app + page. Dùng để render NavigationBar. |\n| `pageState` | `object` | State navigation bar riêng của page hiện tại (theo `location.key`). |\n| `appState` | `object` | State navigation bar mặc định của app. |\n| `setPageNavigationBar` | `(state: Partial<IPageNavigationBarState>) => void` | Cập nhật navigation bar cho **page hiện tại**. |\n| `setAppNavigationBar` | `(state: Partial<IAppNavigationBarState>) => void` | Cập nhật navigation bar **mặc định** cho toàn app. |\n| `removePageNavigationBar` | `() => void` | Ẩn navigation bar cho page hiện tại (`hidden: true`). |\n| `removeAppNavigationBar` | `() => void` | Ẩn navigation bar mặc định của app. |\n| `resetPageNavigationBar` | `() => void` | Reset navigation bar của page hiện tại về config từ `IPageConfig`. |\n| `resetAppNavigationBar` | `() => void` | Reset navigation bar app về config từ `IAppConfig`. |\n"})]})}function d(t={}){const{wrapper:a}={...i(),...t.components};return a?n.jsx(a,{...t,children:n.jsx(e,{...t})}):e(t)}export{d as default};

package/dist-storybook/assets/use-navigation-type-DOndDqQH.js

@@ -0,0 +1,27 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as t}from"./index-DqZh6B0b.js";import{b as o,M as s}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function r(i){const e={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...i.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(o,{title:"Router/useNavigationType"}),`
+`,n.jsx(e.h1,{id:"usenavigationtype",children:"useNavigationType"}),`
+`,n.jsxs(e.p,{children:["Hook trả về ",n.jsx(e.strong,{children:"action"})," của history entry hiện tại: cách user đã tới page này — ",n.jsx(e.strong,{children:"PUSH"})," (navigate mới), ",n.jsx(e.strong,{children:"REPLACE"})," (thay thế), hay ",n.jsx(e.strong,{children:"POP"})," (back/forward). Tương đương ",n.jsx(e.code,{children:"useHistory().action"}),"."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useNavigationType } from '@v-miniapp/router'
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useNavigationType } from '@v-miniapp/router'
+
+const MyPage = () => {
+  const action = useNavigationType()
+
+  return (
+    <div>
+      <p>You arrived via: {action}</p>
+      {action === 'POP' && <p>You used back/forward</p>}
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"action"}),": ",n.jsx(e.code,{children:"IHistoryAction"})," — ",n.jsx(e.code,{children:"'PUSH' | 'REPLACE' | 'POP'"})]}),`
+`]}),`
+`,n.jsx(s,{children:"\n| Giá trị | Ý nghĩa |\n| :--- | :--- |\n| `'PUSH'` | Đi tới page mới (push vào stack) |\n| `'REPLACE'` | Thay thế entry hiện tại (navigate với `replace: true`) |\n| `'POP'` | Back hoặc forward trong stack |\n"})]})}function l(i={}){const{wrapper:e}={...t(),...i.components};return e?n.jsx(e,{...i,children:n.jsx(r,{...i})}):r(i)}export{l as default};

package/dist-storybook/assets/use-page-layout-dO6ylI1b.js

@@ -0,0 +1,37 @@
+import{j as e}from"./iframe-DfPay7Zl.js";import{useMDXComponents as o}from"./index-DqZh6B0b.js";import{b as s,M as r}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function n(t){const a={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...o(),...t.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(s,{title:"UI React/usePageLayout"}),`
+`,e.jsx(a.h1,{id:"usepagelayout",children:"usePageLayout"}),`
+`,e.jsxs(a.p,{children:["Hook trả về ",e.jsx(a.strong,{children:"state"})," page layout đã merge (app + page hiện tại) và các function để ",e.jsx(a.strong,{children:"cập nhật"})," / ",e.jsx(a.strong,{children:"ẩn"})," / ",e.jsx(a.strong,{children:"reset"})," cho page hoặc app. State gồm scrollRestoration, pullToRefresh, onEndReached, contentClassName, hidden. Dùng khi cần đọc hoặc thay đổi layout (pull-to-refresh, load more, class) từ trong component."]}),`
+`,e.jsx(a.h2,{id:"import",children:"Import"}),`
+`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-typescript",children:`import { usePageLayout } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(a.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(a.h3,{id:"cập-nhật-pull-to-refresh--load-more-cho-page",children:"Cập nhật pull-to-refresh / load more cho page"}),`
+`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-tsx",children:`import { usePageLayout } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  const { setPagePageLayout } = usePageLayout()
+
+  useEffect(() => {
+    setPagePageLayout({
+      pullToRefresh: { onRefresh: async () => await fetchData() },
+      onEndReached: () => loadMore(),
+    })
+  }, [])
+
+  return <div>...</div>
+}
+`})}),`
+`,e.jsx(a.h3,{id:"đổi-contentclassname-cho-page",children:"Đổi contentClassName cho page"}),`
+`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-tsx",children:`const { setPagePageLayout } = usePageLayout()
+
+setPagePageLayout({ contentClassName: 'p-4 bg-gray-100' })
+`})}),`
+`,e.jsx(a.h3,{id:"reset-về-config-ban-đầu",children:"Reset về config ban đầu"}),`
+`,e.jsx(a.pre,{children:e.jsx(a.code,{className:"language-tsx",children:`const { resetPagePageLayout } = usePageLayout()
+
+resetPagePageLayout()
+`})}),`
+`,e.jsx(a.h2,{id:"returns",children:"Returns"}),`
+`,e.jsx(r,{children:"\n| Thuộc tính | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `state` | merged | State đã merge: default (scrollRestoration: true) + app + page. |\n| `pageState` | `object` | State page layout riêng của page hiện tại. |\n| `appState` | `object` | State page layout mặc định của app. |\n| `setPagePageLayout` | `(state: Partial<IPagePageState>) => void` | Cập nhật page layout cho **page hiện tại** (pullToRefresh, onEndReached, contentClassName, …). |\n| `setAppPageLayout` | `(state: Partial<IAppPageState>) => void` | Cập nhật page layout **mặc định** cho app. |\n| `removePagePageLayout` | `() => void` | Ẩn page layout cho page hiện tại (`hidden: true`). |\n| `removeAppPageLayout` | `() => void` | Ẩn page layout mặc định của app. |\n| `resetPagePageLayout` | `() => void` | Reset page layout của page về config từ `IPageConfig`. |\n| `resetAppPageLayout` | `() => void` | Reset page layout app về config từ `IAppConfig`. |\n"})]})}function l(t={}){const{wrapper:a}={...o(),...t.components};return a?e.jsx(a,{...t,children:e.jsx(n,{...t})}):n(t)}export{l as default};

package/dist-storybook/assets/use-page-scroll-CCG2d2Gb.js

@@ -0,0 +1,42 @@
+import{j as e}from"./iframe-DfPay7Zl.js";import{useMDXComponents as l}from"./index-DqZh6B0b.js";import{b as o,M as s}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function r(t){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...l(),...t.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(o,{title:"UI React/usePageScroll"}),`
+`,e.jsx(n.h1,{id:"usepagescroll",children:"usePageScroll"}),`
+`,e.jsxs(n.p,{children:["Hook đăng ký ",e.jsx(n.strong,{children:"callback"})," khi page scroll. Callback nhận element đang scroll và event; có thể dùng options ",e.jsx(n.strong,{children:"throttle"})," để giảm tần suất gọi."]}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { usePageScroll } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"signature",children:"Signature"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`function usePageScroll(
+  callback: (target: HTMLDivElement, event: Event) => void,
+  options?: IPageScrollOptions
+): void
+`})}),`
+`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
+`,e.jsx(s,{children:"\n| Tham số | Kiểu | Mô tả |\n| :--- | :--- | :--- |\n| `callback` | `(target, event) => void` | Gọi khi scroll. `target`: element scroll, `event`: scroll event. |\n| `options` | `IPageScrollOptions` | `{ wait? (ms), leading?, trailing? }`. |\n"}),`
+`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { usePageScroll } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  usePageScroll((target, event) => {
+    console.log('Scroll:', target.scrollTop)
+  }, {
+    wait: 200,
+    trailing: true,
+  })
+
+  return <div>Nội dung scroll</div>
+}
+`})}),`
+`,e.jsx(n.h3,{id:"scroll-đến-cuối-để-load-thêm",children:"Scroll đến cuối để load thêm"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`usePageScroll(
+  (target) => {
+    const { scrollTop, scrollHeight, clientHeight } = target
+    if (scrollTop + clientHeight >= scrollHeight - 10) loadMore()
+  },
+  {
+    wait: 100,
+    trailing: true
+  }
+)
+`})})]})}function h(t={}){const{wrapper:n}={...l(),...t.components};return n?e.jsx(n,{...t,children:e.jsx(r,{...t})}):r(t)}export{h as default};

package/dist-storybook/assets/use-pull-to-refresh-lhumDu1H.js

@@ -0,0 +1,38 @@
+import{j as e}from"./iframe-DfPay7Zl.js";import{useMDXComponents as t}from"./index-DqZh6B0b.js";import{b as i,M as o}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function s(r){const n={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...t(),...r.components};return e.jsxs(e.Fragment,{children:[`
+`,`
+`,e.jsx(i,{title:"UI React/usePullToRefresh"}),`
+`,e.jsx(n.h1,{id:"usepulltorefresh",children:"usePullToRefresh"}),`
+`,e.jsxs(n.p,{children:["Hook đăng ký ",e.jsx(n.strong,{children:"handler pull-to-refresh"})," cho ",e.jsx(n.strong,{children:"page hiện tại"}),". Khi user kéo xuống để refresh, handler được gọi. Handler có thể trả về Promise (async) hoặc void."]}),`
+`,e.jsx(n.h2,{id:"import",children:"Import"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`import { usePullToRefresh } from '@v-miniapp/ui-react'
+`})}),`
+`,e.jsx(n.h2,{id:"usage",children:"Usage"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-tsx",children:`import { usePullToRefresh } from '@v-miniapp/ui-react'
+
+const ListPage = () => {
+  const [items, setItems] = useState([])
+
+  usePullToRefresh(async () => {
+    const data = await fetchList()
+    setItems(data)
+  })
+
+  return (
+    <ul>
+      {items.map((item) => (
+        <li key={item.id}>{item.name}</li>
+      ))}
+    </ul>
+  )
+}
+`})}),`
+`,e.jsx(n.h2,{id:"signature",children:"Signature"}),`
+`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-typescript",children:`function usePullToRefresh(onRefresh: () => Promise<unknown> | unknown): void
+`})}),`
+`,e.jsx(n.h2,{id:"parameters",children:"Parameters"}),`
+`,e.jsx(o,{children:"\n| Tham số | Kiểu | Bắt buộc | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `onRefresh` | `() => Promise ` | ✓ | Function gọi khi user pull-to-refresh. Có thể async (trả về Promise) hoặc sync. |\n"}),`
+`,e.jsx(n.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,e.jsxs(n.ul,{children:[`
+`,e.jsxs(n.li,{children:["Chỉ áp dụng cho ",e.jsx(n.strong,{children:"page hiện tại"})," (theo location). Khi navigate sang page khác, page đó cần gọi ",e.jsx(n.code,{children:"usePullToRefresh"})," riêng nếu muốn pull-to-refresh."]}),`
+`,e.jsx(n.li,{children:"Handler được lưu trong ref nên có thể truyền function mới mỗi render mà không cần dependency array phức tạp."}),`
+`]})]})}function d(r={}){const{wrapper:n}={...t(),...r.components};return n?e.jsx(n,{...r,children:e.jsx(s,{...r})}):s(r)}export{d as default};

package/dist-storybook/assets/use-settings-changed-Bt58DJ-c.js

@@ -0,0 +1,30 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as s}from"./index-DqZh6B0b.js";import{b as r,M as h}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function i(e){const t={code:"code",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...e.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(r,{title:"UI React/useSettingsChanged"}),`
+`,n.jsx(t.h1,{id:"usesettingschanged",children:"useSettingsChanged"}),`
+`,n.jsxs(t.p,{children:["Hook đăng ký ",n.jsx(t.strong,{children:"callback"})," khi ",n.jsx(t.strong,{children:"settings"})," của app thay đổi (từ native hoặc môi trường V-MiniApp). Callback nhận object ",n.jsx(t.strong,{children:"settings"})," (theme, language, v.v.). Dùng để đồng bộ UI với cài đặt người dùng hoặc native."]}),`
+`,n.jsx(t.h2,{id:"import",children:"Import"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`import { useSettingsChanged } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(t.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-tsx",children:`import { useSettingsChanged } from '@v-miniapp/ui-react'
+
+const MyPage = () => {
+  useSettingsChanged((settings) => {
+    console.log('Settings changed:', settings)
+    // Cập nhật theme, language, v.v. theo settings
+  })
+
+  return <div>...</div>
+}
+`})}),`
+`,n.jsx(t.h2,{id:"signature",children:"Signature"}),`
+`,n.jsx(t.pre,{children:n.jsx(t.code,{className:"language-typescript",children:`function useSettingsChanged(onSettingsChanged: (settings: ISettings) => void): void
+`})}),`
+`,n.jsx(t.h2,{id:"parameters",children:"Parameters"}),`
+`,n.jsx(h,{children:"\n| Tham số | Kiểu | Bắt buộc | Mô tả |\n| :--- | :--- | :--- | :--- |\n| `onSettingsChanged` | `(settings: ISettings) => void` | ✓ | Gọi khi settings thay đổi. `settings`: object chứa cài đặt (cấu trúc tùy môi trường). |\n"}),`
+`,n.jsx(t.h2,{id:"lưu-ý",children:"Lưu ý"}),`
+`,n.jsxs(t.ul,{children:[`
+`,n.jsxs(t.li,{children:["Thời điểm và nội dung ",n.jsx(t.strong,{children:"settings"})," phụ thuộc vào môi trường V-MiniApp / native (event hoặc API từ host)."]}),`
+`,n.jsx(t.li,{children:"Dùng khi cần phản ứng với thay đổi theme (dark/light), ngôn ngữ, hoặc cài đặt khác từ phía app host."}),`
+`]})]})}function l(e={}){const{wrapper:t}={...s(),...e.components};return t?n.jsx(t,{...e,children:n.jsx(i,{...e})}):i(e)}export{l as default};

package/dist-storybook/assets/use-translate-Jhz6jTXo.js

@@ -0,0 +1,59 @@
+import{j as n}from"./iframe-DfPay7Zl.js";import{useMDXComponents as s}from"./index-DqZh6B0b.js";import{b as i}from"./blocks-DKR3P4qW.js";import"./preload-helper-PPVm8Dsz.js";import"./index-cMNObl2z.js";function r(t){const e={code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...s(),...t.components};return n.jsxs(n.Fragment,{children:[`
+`,`
+`,n.jsx(i,{title:"Locale/useTranslate"}),`
+`,n.jsx(e.h1,{id:"usetranslate",children:"useTranslate"}),`
+`,n.jsxs(e.p,{children:["Hook trả về function ",n.jsx(e.strong,{children:"translate"})," để lấy bản dịch theo key. Component dùng hook này sẽ ",n.jsx(e.strong,{children:"re-render"})," khi ngôn ngữ thay đổi (reactive)."]}),`
+`,n.jsx(e.h2,{id:"import",children:"Import"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-typescript",children:`import { useTranslate } from '@v-miniapp/ui-react'
+`})}),`
+`,n.jsx(e.h2,{id:"returns",children:"Returns"}),`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsxs(e.li,{children:[n.jsx(e.strong,{children:"translate"}),": Function với signature:",`
+`,n.jsxs(e.ul,{children:[`
+`,n.jsx(e.li,{children:n.jsx(e.code,{children:"(key: IResourceKey, params?: ITemplateParams, lang?: ILang) => string"})}),`
+`,n.jsx(e.li,{children:"Trả về chuỗi bản dịch; nếu thiếu key hoặc locale thì fallback về key."}),`
+`]}),`
+`]}),`
+`]}),`
+`,n.jsx(e.h2,{id:"reactivity",children:"Reactivity"}),`
+`,n.jsxs(e.p,{children:[n.jsx(e.strong,{children:"useTranslate"})," có reactivity. Khi gọi ",n.jsx(e.code,{children:"setLanguage()"})," (hoặc ",n.jsx(e.code,{children:"useLanguage().setLanguage"}),"), mọi component đang dùng ",n.jsx(e.code,{children:"useTranslate()"})," sẽ re-render và hiển thị đúng ngôn ngữ mới."]}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`// ✅ Đúng: dùng hook trong component → re-render khi đổi ngôn ngữ
+function Title() {
+  const t = useTranslate()
+  return <h1>{t('app.title')}</h1>
+}
+
+// ❌ Sai: dùng t() trong component → không re-render khi đổi ngôn ngữ
+function Title() {
+  const title = t('app.title')
+  return <h1>{title}</h1>
+}
+`})}),`
+`,n.jsx(e.h2,{id:"usage",children:"Usage"}),`
+`,n.jsx(e.h3,{id:"cơ-bản",children:"Cơ bản"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`import { useTranslate } from '@v-miniapp/ui-react'
+
+function Welcome() {
+  const t = useTranslate()
+  return <h1>{t('app.title')}</h1>
+}
+`})}),`
+`,n.jsx(e.h3,{id:"với-template-params",children:"Với template params"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`function Greeting({ name }: { name: string }) {
+  const t = useTranslate()
+  return <p>{t('user.greeting', { name })}</p>
+}
+`})}),`
+`,n.jsx(e.h3,{id:"dịch-theo-ngôn-ngữ-chỉ-định-không-đổi-ngôn-ngữ-app",children:"Dịch theo ngôn ngữ chỉ định (không đổi ngôn ngữ app)"}),`
+`,n.jsx(e.pre,{children:n.jsx(e.code,{className:"language-tsx",children:`function Compare() {
+  const t = useTranslate()
+  return (
+    <div>
+      <span>{t('app.title', undefined, 'vi')}</span>
+      <span>{t('app.title', undefined, 'en')}</span>
+    </div>
+  )
+}
+`})}),`
+`,n.jsx(e.h2,{id:"type-safety",children:"Type safety"}),`
+`,n.jsxs(e.p,{children:["Khi đã khai báo ",n.jsx(e.code,{children:"ICustomLocales"})," (module augmentation), ",n.jsx(e.code,{children:"key"})," sẽ được gợi ý và kiểm tra theo các key trong resource."]})]})}function d(t={}){const{wrapper:e}={...s(),...t.components};return e?n.jsx(e,{...t,children:n.jsx(r,{...t})}):r(t)}export{d as default};