docs(update): added types

Author: ThornWalli

docs/src/components/content-container.md

@@ -18,6 +18,16 @@ The appropriate HTML element for the page structure is determined based on the `
 
 ## Properties
 
+```ts
+type Props = {
+  tag?: string;
+  rootTags?: string[];
+  contentTags?: string[];
+  level?: number;
+  debug?: boolean;
+};
+```
+
 ### tag
 
 - Type: `String`
@@ -27,7 +37,7 @@ Tag for the element.
 
 ### rootTags
 
-- Type: `Array`
+- Type: `Array<String>`
 - Default: `inject('semanticStructure_rootTags', ['main'])`
 
 Available tags for the root structure.
@@ -36,7 +46,7 @@ Available tags for the root structure.
 
 ### contentTags
 
-- Type: `Array`
+- Type: `Array<String>`
 - Default: `inject('semanticStructure_contentTags', ['article', 'section'])`
 
 Available tags for the content structure.

docs/src/components/content-headline.md

@@ -20,6 +20,13 @@ The deeper the nesting, the smaller the heading.
 
 ## Properties
 
+```ts
+type Props = {
+  tag: string;
+  debug: boolean;
+};
+```
+
 ### tag
 
 - Type: `String`

docs/src/composables/use-content-container.md

@@ -34,6 +34,15 @@ const { currentTag } = useContentContainer();
 
 ## Options
 
+```ts
+type Options = {
+  tag?: string | undefined;
+  contentTags?: Array<string>;
+  rootTags?: Array<string>;
+  level?: number;
+};
+```
+
 | Property      | Type     | Description                               | Default Value                                                   |
 | ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- |
 | `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`                                                     |
@@ -43,8 +52,16 @@ const { currentTag } = useContentContainer();
 
 ## Return
 
-| Property       | Type     | Description           |
-| -------------- | -------- | --------------------- |
-| `currentTag`   | `String` | Get current html tag. |
-| `parentLevel`  | `Number` | Get parent level.     |
-| `currentLevel` | `Number` | Get current level.    |
+```ts
+type Return = {
+  parentLevel: ComputedRef<number>;
+  currentLevel: ComputedRef<number>;
+  currentTag: ComputedRef<string>;
+};
+```
+
+| Property       | Type                   | Description           |
+| -------------- | ---------------------- | --------------------- |
+| `parentLevel`  | `ComputedRef<Number>;` | Get parent level.     |
+| `currentLevel` | `ComputedRef<Number>`  | Get current level.    |
+| `currentTag`   | `ComputedRef<String>`  | Get current html tag. |

docs/src/composables/use-content-headline.md

@@ -35,13 +35,28 @@ const { currentTag } = useContentHeadline();
 
 ## Options
 
-| Property | Type     | Description         | Default Value |
-| -------- | -------- | ------------------- | ------------- |
-| `tag`    | `String` | Tag for the element | `undefined`   |
+```ts
+type Options = {
+  tag?: string | undefined;
+};
+```
+
+| Property | Type                  | Description         | Default Value |
+| -------- | --------------------- | ------------------- | ------------- |
+| `tag`    | `String`\|`undefined` | Tag for the element | `undefined`   |
 
 ## Return
 
-| Property       | Type     | Description           |
-| -------------- | -------- | --------------------- |
-| `currentTag`   | `String` | Get current html tag. |
-| `currentLevel` | `Number` | Get current level.    |
+```ts
+type Return = {
+  parentLevel: ComputedRef<number>;
+  currentLevel: ComputedRef<number>;
+  currentTag: ComputedRef<string>;
+};
+```
+
+| Property       | Type                   | Description           |
+| -------------- | ---------------------- | --------------------- |
+| `parentLevel`  | `ComputedRef<Number>;` | Get parent level.     |
+| `currentLevel` | `ComputedRef<Number>`  | Get current level.    |
+| `currentTag`   | `ComputedRef<String>`  | Get current html tag. |

src/useContentContainer.ts

@@ -8,7 +8,7 @@ export type Options = {
 };
 
 export type Result = {
-  parentLevel: number;
+  parentLevel: ComputedRef<number>;
   currentLevel: ComputedRef<number>;
   currentTag: ComputedRef<string>;
 };
@@ -22,14 +22,14 @@ export default function useContentContainer({ tag, contentTags, rootTags, level
   provide('semanticStructure_rootTags', rootTags);
   provide('semanticStructure_contentTags', contentTags);
 
-  const parentLevel = inject('semanticStructure_parentLevel', 0);
-  const currentLevel = computed(() => (level !== undefined ? level : parentLevel + 1));
+  const parentLevel = computed(() => inject('semanticStructure_parentLevel', 0));
+  const currentLevel = computed(() => (level !== undefined ? level : parentLevel.value + 1));
   const currentTag = computed(() => {
     if (tag) {
       return tag;
     }
-    if (Number(parentLevel) in rootTags) {
-      return rootTags[Number(parentLevel)];
+    if (Number(parentLevel.value) in rootTags) {
+      return rootTags[Number(parentLevel.value)];
     }
     return contentTags[currentLevel.value % contentTags.length];
   });

src/useContentHeadline.ts

@@ -4,17 +4,17 @@ export type Options = {
   tag?: string | undefined;
 };
 
-export type Result = {
-  parentLevel: number;
+export type Return = {
+  parentLevel: ComputedRef<number>;
   currentLevel: ComputedRef<number>;
   currentTag: ComputedRef<string>;
 };
 
-export default function useContentHeadline({ tag }: Options = {}): Result {
-  const parentLevel = inject('semanticStructure_parentLevel', 1) + 1;
+export default function useContentHeadline({ tag }: Options = {}): Return {
+  const parentLevel = computed(() => inject('semanticStructure_parentLevel', 1) + 1);
   const rootLevel = inject('semanticStructure_rootLevel', 1);
 
-  const currentLevel = computed(() => getMax(parentLevel - rootLevel));
+  const currentLevel = computed(() => getMax(parentLevel.value - rootLevel));
   const currentTag = computed(() => tag || `h${currentLevel.value}`);
 
   return {