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

package/docs/de/dictionary/enumeration.md

@@ -27,8 +27,191 @@ author: aymericzip
 
 ## Wie Enumeration funktioniert
 
-In Intlayer wird die Enumeration durch die Funktion `enu` realisiert, die bestimmte Schlüssel ihren entsprechenden Inhalten zuordnet. Diese Schlüssel können numerische Werte, Bereiche oder benutzerdefinierte Bezeichner darstellen. Bei Verwendung mit React Intlayer oder Next Intlayer wird der passende Inhalt automatisch basierend auf der Anwendungslokalisierung und den definierten Regeln ausgewählt.
+<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";
+import { useIntlayer } from "react-intlayer";
+
+const CarComponent: FC = () => {
+  const { numberOfCar } = useIntlayer("car_count");
+
+  return (
+    <div>
+      <p>
+        {
+          numberOfCar(0) // Output: No cars
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(6) // Output: Some cars
+        }
+      </p>
+      <p>
+        {
+          numberOfCar(20) // Output: Many cars
+        }
+      </p>
+      <p>
+        {
+          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>
 ## Einrichtung der Enumeration
 
 Um eine Enumeration in Ihrem Intlayer-Projekt einzurichten, müssen Sie ein Inhaltsmodul erstellen, das Enumeration-Definitionen enthält. Hier ist ein Beispiel für eine einfache Enumeration der Anzahl von Autos:
@@ -83,7 +266,10 @@ In diesem Beispiel ordnet `enu` verschiedene Bedingungen spezifischen Inhalten z
 
 ## Verwendung von Enumeration mit React Intlayer
 
-Um Enumeration in einer React-Komponente zu verwenden, können Sie den `useIntlayer`-Hook aus dem `react-intlayer`-Paket nutzen. Dieser Hook ruft den korrekten Inhalt basierend auf der angegebenen ID ab. Hier ist ein Beispiel, wie man ihn verwendet:
+<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,22 +282,22 @@ const CarComponent: FC = () => {
     <div>
       <p>
         {
-          numberOfCar(0) // Ausgabe: Keine Autos
+          numberOfCar(0) // Output: No cars
         }
       </p>
       <p>
         {
-          numberOfCar(6) // Ausgabe: Einige Autos
+          numberOfCar(6) // Output: Some cars
         }
       </p>
       <p>
         {
-          numberOfCar(20) // Ausgabe: Viele Autos
+          numberOfCar(20) // Output: Many cars
         }
       </p>
       <p>
         {
-          numberOfCar(0.01) // Ausgabe: Fallback-Wert
+          numberOfCar(0.01) // Output: Fallback value
         }
       </p>
     </div>
@@ -119,14 +305,399 @@ const CarComponent: FC = () => {
 };
 ```
 
-In diesem Beispiel passt die Komponente ihre Ausgabe dynamisch basierend auf der Anzahl der Autos an. Der korrekte Inhalt wird automatisch ausgewählt, abhängig vom angegebenen Bereich.
+  </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>
+
+## 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>
+        {
+          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,
+});
+```
 
-## Zusätzliche Ressourcen
+  </Tab>
+</Tabs>
+## Additional Resources
 
-Für detailliertere Informationen zur Konfiguration und Nutzung verweisen wir auf die folgenden Ressourcen:
+For more detailed information on configuration and usage, refer to the following resources:
 
-- [Intlayer CLI Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md)
-- [React Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_create_react_app.md)
-- [Next Intlayer Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_nextjs_15.md)
+- [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)
 
-Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Nutzung von Intlayer in verschiedenen Umgebungen und mit unterschiedlichen Frameworks.
+These resources provide further insights into the setup and usage of Intlayer in different environments and with various frameworks.