@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/vi/dictionary/enumeration.md

@@ -269,205 +269,6 @@ document.getElementById("cars")!.textContent = content.numberOfCar(6);
   </Tab>
 </Tabs>
 
-## Tài nguyên bổ sung
-
-Để biết thêm thông tin chi tiết về cấu hình và cách sử dụng, hãy tham khảo các tài nguyên sau:
-
-- [Tài liệu CLI Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/index.md)
-- [Tài liệu React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_create_react_app.md)
-- [Tài liệu Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_nextjs_15.md)
-
-Những tài nguyên này cung cấp thêm những hiểu biết sâu sắc về cách thiết lập và sử dụng Intlayer trong các môi trường khác nhau và với các framework đa dạng.
-
-### Using Ordinal Enumeration
-
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use this in a React component, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  // Get the last digit to determine the correct suffix
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>
-        {
-          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
-        }
-      </p>
-    </div>
-  );
-};
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
-To use this in Next.js Client Components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use this in Vue components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-defineProps<{ count: number }>();
-
-const { ordinal } = useIntlayer("ranking_component");
-</script>
-
-<template>
-  <div>
-    <p>{{ ordinal(Math.abs(count) % 10)({ count }) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use this in Svelte components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-export let count: number;
-
-const content = useIntlayer("ranking_component");
-$: lastDigit = Math.abs(count) % 10;
-</script>
-
-<div>
-  <p>{$content.ordinal(lastDigit)({ count })}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use this in Preact components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const RankingComponent: FC<{ count: number }> = ({ count }) => {
-  const { ordinal } = useIntlayer("ranking_component");
-  const lastDigit = Math.abs(count) % 10;
-
-  return (
-    <div>
-      <p>{ordinal(lastDigit)({ count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Solid" value="solid">
-
-To use this in SolidJS components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
-
-const RankingComponent: Component<{ count: number }> = (props) => {
-  const { ordinal } = useIntlayer("ranking_component");
-
-  return (
-    <div>
-      <p>{ordinal(Math.abs(props.count) % 10)({ count: props.count })}</p>
-    </div>
-  );
-};
-
-export default RankingComponent;
-```
-
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use this in Angular components, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component, Input } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-ranking",
-  template: `
-    <div>
-      <p>{{ content().ordinal(lastDigit())({ count }) }}</p>
-    </div>
-  `,
-})
-export class RankingComponent {
-  @Input() count!: number;
-
-  content = useIntlayer("ranking_component");
-
-  lastDigit() {
-    return Math.abs(this.count) % 10;
-  }
-}
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use this with `vanilla-intlayer`, call the enumeration with the last digit of the number to get the correct suffix, then pass the full count as the insertion value:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("ranking_component");
-const lastDigit = Math.abs(5) % 10;
-
-document.getElementById("ranking")!.textContent = content.ordinal(lastDigit)({
-  count: 5,
-});
-```
-
-  </Tab>
-</Tabs>
-
 ## Combining Enumeration with Insert for Ordinal Numbers
 
 A common use case is displaying ordinal numbers (1st, 2nd, 3rd, etc.). You can combine `enu` with `insert` to create dynamic ordinal content:

package/docs/vi/dictionary/insertion.md

@@ -114,8 +114,6 @@ Khi tích hợp với React Intlayer hoặc Next Intlayer, bạn chỉ cần cun
 
 ## Sử dụng Nội dung Chèn với React Intlayer
 
-## Sử dụng Nội dung Chèn với React Intlayer
-
 Để sử dụng nội dung chèn trong một component React, hãy import và sử dụng hook `useIntlayer` từ package `react-intlayer`. Hook này lấy nội dung theo key được chỉ định và cho phép bạn truyền vào một đối tượng ánh xạ mỗi placeholder trong nội dung với giá trị bạn muốn hiển thị.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}

package/docs/vi/dictionary/nesting.md

@@ -29,6 +29,45 @@ author: aymericzip
 
 Trong Intlayer, lồng nội dung được thực hiện thông qua hàm `nest`, cho phép bạn tham chiếu và tái sử dụng nội dung từ một từ điển khác. Thay vì sao chép nội dung, bạn có thể trỏ đến một module nội dung hiện có bằng khóa của nó.
 
+## Thiết lập Nesting
+
+Để thiết lập nesting trong dự án Intlayer của bạn, trước tiên bạn định nghĩa nội dung cơ sở mà bạn muốn tái sử dụng. Sau đó, trong một module nội dung riêng biệt, bạn sử dụng hàm `nest` để import nội dung đó.
+
+### Từ điển cơ bản
+
+Dưới đây là một ví dụ về một từ điển cơ bản để lồng vào một từ điển khác:
+
+```typescript fileName="firstDictionary.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { type Dictionary } from "intlayer";
+
+const firstDictionary = {
+  key: "key_of_my_first_dictionary",
+  content: {
+    content: "content",
+    subContent: {
+      contentNumber: 0,
+      contentString: "string",
+    },
+  },
+} satisfies Dictionary;
+
+export default firstDictionary;
+```
+
+```json fileName="firstDictionary.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "key_of_my_first_dictionary",
+  "content": {
+    "content": "content",
+    "subContent": {
+      "contentNumber": 0,
+      "contentString": "string"
+    }
+  }
+}
+```
+
 ## Thiết lập lồng nội dung
 
 <Tabs group="framework">

package/docs/vi/dictionary/translation.md

@@ -259,64 +259,3 @@ document.getElementById("welcome-message")!.textContent = String(
 
   </Tab>
 </Tabs>
-
-## Đối tượng Nội dung Tùy chỉnh
-
-`intlayer` hỗ trợ các đối tượng nội dung tùy chỉnh cho việc dịch, cho phép bạn định nghĩa các cấu trúc phức tạp hơn trong khi vẫn đảm bảo an toàn kiểu. Dưới đây là một ví dụ với một đối tượng tùy chỉnh:
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-interface ICustomContent {
-  title: string;
-  content: string;
-}
-
-const customContent = {
-  key: "custom_content",
-  content: {
-    profileText: t<ICustomContent>({
-      en: {
-        title: "Page Title",
-        content: "Page Content",
-      },
-      fr: {
-        title: "Titre de la Page",
-        content: "Contenu de la Page",
-      },
-      es: {
-        title: "Título de la Página",
-        content: "Contenido de la Página",
-      },
-    }),
-  },
-} satisfies Dictionary;
-
-export default customContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "custom_content",
-  "content": {
-    "profileText": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        },
-        "fr": {
-          "title": "Titre de la Page",
-          "content": "Contenu de la Page"
-        },
-        "es": {
-          "title": "Tiêu đề Trang",
-          "content": "Nội dung Trang"
-        }
-      }
-    }
-  }
-}
-```

package/docs/vi/formatters.md

@@ -53,6 +53,8 @@ author: aymericzip
 
 Intlayer cung cấp một bộ helper nhẹ xây dựng trên các API `Intl` gốc, cùng với một wrapper `Intl` được lưu trong bộ nhớ đệm để tránh việc tạo lại các bộ định dạng nặng nhiều lần. Các tiện ích này hoàn toàn nhận biết locale và có thể được sử dụng từ package chính `intlayer`.
 
+## React Formatters
+
 ### Import
 
 ```ts
@@ -80,6 +82,61 @@ import {
 
 Nếu bạn sử dụng React, các hook cũng có sẵn; xem `react-intlayer/format`.
 
+### Các Hook Có Sẵn
+
+Tất cả các hook tự động sử dụng locale từ `IntlayerProvider` hoặc `IntlayerServerProvider`.
+
+| Hook                | Description                         | Example Output                |
+| ------------------- | ----------------------------------- | ----------------------------- |
+| `useNumber()`       | Định dạng số với phân nhóm          | `"123,456.789"`               |
+| `useCurrency()`     | Định dạng giá trị tiền tệ           | `"€1,234.50"`                 |
+| `usePercentage()`   | Định dạng phần trăm                 | `"25%"`                       |
+| `useDate()`         | Định dạng ngày và giờ               | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Định dạng thời gian tương đối       | `"in 3 days"`                 |
+| `useUnit()`         | Định dạng giá trị với đơn vị        | `"5 kilometers"`              |
+| `useCompact()`      | Định dạng số ở dạng ký hiệu compact | `"1.2K"`                      |
+| `useList()`         | Định dạng mảng dưới dạng danh sách  | `"apple, banana, and orange"` |
+| `useIntl()`         | Lấy object `Intl` được gắn locale   | Full `Intl` API access        |
+
+### Ví dụ Hoàn chỉnh
+
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
+      <p>{unit(5, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
+```
+
 ## Intl được lưu trong bộ nhớ đệm
 
 `Intl` được xuất ra là một wrapper mỏng, được lưu trong bộ nhớ đệm quanh `Intl` toàn cục. Nó ghi nhớ các thể hiện của `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, và `PluralRules`, giúp tránh việc xây dựng lại cùng một bộ định dạng nhiều lần.
@@ -134,6 +191,61 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Các Composables Có Sẵn
+
+Tất cả các composables trả về computed refs tự động sử dụng locale từ `IntlayerProvider` được inject.
+
+| Composable          | Mô tả                                | Ví dụ Output                  |
+| ------------------- | ------------------------------------ | ----------------------------- |
+| `useNumber()`       | Định dạng số với nhóm                | `"123,456.789"`               |
+| `useCurrency()`     | Định dạng giá trị tiền tệ            | `"€1,234.50"`                 |
+| `usePercentage()`   | Định dạng phần trăm                  | `"25%"`                       |
+| `useDate()`         | Định dạng ngày và giờ                | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Định dạng thời gian tương đối        | `"in 3 days"`                 |
+| `useUnit()`         | Định dạng giá trị với đơn vị         | `"5 kilometers"`              |
+| `useCompact()`      | Định dạng số ở ký hiệu compact       | `"1.2K"`                      |
+| `useList()`         | Định dạng mảng dưới dạng danh sách   | `"apple, banana, and orange"` |
+| `useIntl()`         | Lấy đối tượng `Intl` liên kết locale | Full `Intl` API access        |
+
+### Ví Dụ Hoàn Chỉnh
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `Intl.Collator`
 
 Dùng để so sánh và sắp xếp chuỗi theo ngữ cảnh địa phương:
@@ -150,6 +262,10 @@ const words = ["äpfel", "zebra", "100", "20"];
 words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
+## Vanilla JS / Node.js Formatters
+
+Đối với các ngữ cảnh không sử dụng framework, hãy import các formatter trực tiếp từ `intlayer`. Lưu ý rằng bạn phải truyền locale theo cách thủ công.
+
 ### `Intl.PluralRules`
 
 Dùng để xác định các dạng số nhiều trong các locale khác nhau:
@@ -303,6 +419,8 @@ const content = getTranslation(
 - **locale**: Locale mục tiêu (mặc định là locale cấu hình sẵn)
 - **fallback**: Có fallback về locale mặc định hay không (mặc định là true)
 
+### Các tính năng Intl bổ sung
+
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Lấy và chuyển đổi nội dung từ một từ điển theo key:
@@ -594,3 +712,9 @@ import {
 ```
 
 > Các composable đó sẽ lấy locale từ `IntlayerProvider` được inject vào
+
+## Ghi chú
+
+- Tất cả các helper chấp nhận `string` inputs; chúng được chuyển đổi nội bộ thành numbers hoặc dates.
+- Locale mặc định là `internationalization.defaultLocale` được cấu hình của bạn nếu không được cung cấp.
+- Các tiện ích này là thin wrappers; để định dạng nâng cao, hãy sử dụng các tùy chọn `Intl` tiêu chuẩn.