@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/vi/dictionary/enumeration.md

@@ -83,7 +83,10 @@ Trong ví dụ này, `enu` ánh xạ các điều kiện khác nhau tới nội
 
 ## Sử dụng Enumeration với React Intlayer
 
-Để sử dụng phép liệt kê trong một component React, bạn có thể tận dụng hook `useIntlayer` từ package `react-intlayer`. Hook này sẽ lấy nội dung chính xác dựa trên ID được chỉ định. Dưới đây là ví dụ về cách sử dụng:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+To use enumeration in a React component, you can leverage the `useIntlayer` hook from the `react-intlayer` package. This hook retrieves the correct content based on the specified ID. Here's an example of how to use it:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -96,32 +99,449 @@ const CarComponent: FC = () => {
     <div>
       <p>
         {
-          numberOfCar(0) // Kết quả: Không có xe
+          numberOfCar(0) // Output: No cars
         }
       </p>
       <p>
         {
-          numberOfCar(6) // Kết quả: Một vài chiếc xe
+          numberOfCar(6) // Output: Some cars
         }
       </p>
       <p>
         {
-          numberOfCar(20) // Kết quả: Nhiều chiếc xe
+          numberOfCar(20) // Output: Many cars
         }
       </p>
       <p>
         {
-          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+          numberOfCar(0.01) // Output: Fallback value
         }
       </p>
+    </div>
+  );
+};
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use enumeration in Next.js Client Components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use enumeration in Vue components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { numberOfCar } = useIntlayer("car_count");
+</script>
+
+<template>
+  <div>
+    <p>{{ numberOfCar(6) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use enumeration in Svelte components, retrieve it via the `useIntlayer` hook. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("car_count");
+</script>
+
+<div>
+  <p>{$content.numberOfCar(6)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use enumeration in Preact components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use enumeration in SolidJS components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const CarComponent: Component = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>{numberOfCar(6)}</p>
+    </div>
+  );
+};
+
+export default CarComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use enumeration in Angular components, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-car",
+  template: `
+    <div>
+      <p>{{ content().numberOfCar(6) }}</p>
+    </div>
+  `,
+})
+export class CarComponent {
+  content = useIntlayer("car_count");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use enumeration with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("car_count").onChange((newContent) => {
+  document.getElementById("cars")!.textContent = newContent.numberOfCar(6);
+});
+
+// Initial render
+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>
         {
-          numberOfCar(20) // Kết quả: Nhiều xe
+          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:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { enu, insert, type Dictionary } from "intlayer";
+
+const rankingContent = {
+  key: "ranking_component",
+  content: {
+    ordinal: enu({
+      1: insert("{{count}}st place"),
+      2: insert("{{count}}nd place"),
+      3: insert("{{count}}rd place"),
+      fallback: insert("{{count}}th place"),
+    }),
+  },
+} satisfies Dictionary;
+
+export default rankingContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "ranking_component",
+  "content": {
+    "ordinal": {
+      "nodeType": "enumeration",
+      "enumeration": {
+        "1": {
+          "nodeType": "insertion",
+          "insertion": "{{count}}st place"
+        },
+        "2": {
+          "nodeType": "insertion",
+          "insertion": "{{count}}nd place"
+        },
+        "3": {
+          "nodeType": "insertion",
+          "insertion": "{{count}}rd place"
+        },
+        "fallback": {
+          "nodeType": "insertion",
+          "insertion": "{{count}}th place"
+        }
+      }
+    }
+  }
+}
+```
+
+### 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>
         {
-          numberOfCar(0.01) // Kết quả: Giá trị dự phòng
+          ordinal(lastDigit)({ count }) // e.g., "5th place" for count=5
         }
       </p>
     </div>
@@ -129,14 +549,171 @@ const CarComponent: FC = () => {
 };
 ```
 
-Trong ví dụ này, component tự động điều chỉnh kết quả hiển thị dựa trên số lượng xe. Nội dung chính xác được chọn tự động, tùy thuộc vào phạm vi được chỉ định.
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
 
-## Tài nguyên bổ sung
+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:
 
-Để 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:
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
 
-- [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)
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
 
-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.
+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>
+## Additional Resources
+
+For more detailed information on configuration and usage, refer to the following resources:
+
+- [Intlayer CLI Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md)
+- [React Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_create_react_app.md)
+- [Next Intlayer Documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_with_nextjs_15.md)
+
+These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.