diff --git a/build.config.js b/build.config.js index a6f1833..a82bb3a 100644 --- a/build.config.js +++ b/build.config.js @@ -3,18 +3,14 @@ import { defineBuildConfig } from 'unbuild'; export default defineBuildConfig({ entries: [ { - input: './src', builder: 'mkdist', - pattern: ['**/*.vue'], - addRelativeDeclarationExtensions: true, - ext: 'js', - esbuild: { - jsxImportSource: 'vue', - jsx: 'automatic', - jsxFactory: 'h' - } + input: './src', + pattern: ['**/*.ts'], + declaration: false, + format: 'cjs', + loaders: ['js'], + ext: 'cjs' }, - { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'cjs', loaders: ['js'], ext: 'cjs' }, { builder: 'mkdist', input: './src', pattern: ['**/*.ts'], format: 'esm', loaders: ['js'], ext: 'js' } ], declaration: true, diff --git a/docs/src/components/content-container.md b/docs/src/components/content-container.md index 3e28750..16cbcac 100644 --- a/docs/src/components/content-container.md +++ b/docs/src/components/content-container.md @@ -16,18 +16,27 @@ With each nested `ContentContainer` the element structure becomes one level deep The appropriate HTML element for the page structure is determined based on the `level`. (e.g. `main`, `article`, `section`) -## Properties +## Type ```ts -type ContentContainerProps = { + +declare interface ContentContainerProps { tag?: string; rootTags?: string[]; contentTags?: string[]; level?: number; debug?: boolean; -}; +} + +declare interface ContentContainerContext extends ContentContainerProps { + parentLevel: number; + currentLevel: number; + currentTag: string; +} ``` +## Properties + ### tag - Type: `String` diff --git a/docs/src/components/content-headline.md b/docs/src/components/content-headline.md index 248c6f1..4ca99a7 100644 --- a/docs/src/components/content-headline.md +++ b/docs/src/components/content-headline.md @@ -18,13 +18,19 @@ The level of the heading is taken from the `ContentContainer`. The deeper the nesting, the smaller the heading. -## Properties +## Type ```ts -type ContentHeadlineProps = { +declare interface ContentHeadlineProps { tag: string; debug: boolean; -}; +} + +declare interface ContentHeadlineContext extends ContentHeadlineProps { + parentLevel: number; + currentLevel: number; + currentTag: string; +} ``` ### tag diff --git a/docs/src/composables/use-content-container.md b/docs/src/composables/use-content-container.md index bfa58fc..88dc75b 100644 --- a/docs/src/composables/use-content-container.md +++ b/docs/src/composables/use-content-container.md @@ -32,17 +32,27 @@ const { currentTag } = useContentContainer(); ``` -## Options +## Type ```ts -type ContentContainerOptions = { - tag?: string | undefined; +function useContentContainer(options?: ContentContainerOptions): ContentContainerReturn; + +declare interface ContentContainerOptions { + tag?: string; contentTags?: Array; rootTags?: Array; level?: number; -}; +} + +declare interface ContentContainerReturn { + parentLevel: ComputedRef; + currentLevel: ComputedRef; + currentTag: ComputedRef; +} ``` +## Options + | Property | Type | Description | Default Value | | ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- | | `tag` | `String` | Can be used to overwrite the tag. | `undefined` | @@ -50,15 +60,7 @@ type ContentContainerOptions = { | `rootTags` | `Array` | Available tags for the root structure. | `inject('semanticStructure_rootTags', ['main'])` | | `level` | `Number` | Can be used to overwrite the level. | `undefined` | -## Return - -```ts -type ContentContainerReturn = { - parentLevel: ComputedRef; - currentLevel: ComputedRef; - currentTag: ComputedRef; -}; -``` +## Result | Property | Type | Description | | -------------- | ---------------------- | --------------------- | diff --git a/docs/src/composables/use-content-headline.md b/docs/src/composables/use-content-headline.md index da212ff..149b10e 100644 --- a/docs/src/composables/use-content-headline.md +++ b/docs/src/composables/use-content-headline.md @@ -33,28 +33,30 @@ const { currentTag } = useContentHeadline(); ``` -## Options +## Type ```ts -type ContentHeadlineOptions = { - tag?: string | undefined; -}; -``` +function useContentHeadline(options?: ContentHeadlineOptions): ContentHeadlineReturn; -| Property | Type | Description | Default Value | -| -------- | --------------------- | ------------------- | ------------- | -| `tag` | `String`\|`undefined` | Tag for the element | `undefined` | - -## Return +declare interface ContentHeadlineOptions { + tag?: string; +} -```ts -type ContentHeadlineReturn = { +declare interface ContentHeadlineReturn { parentLevel: ComputedRef; currentLevel: ComputedRef; currentTag: ComputedRef; -}; +} ``` +## Options + +| Property | Type | Description | Default Value | +| -------- | --------------------- | ------------------- | ------------- | +| `tag` | `String`\|`undefined` | Tag for the element | `undefined` | + +## Result + | Property | Type | Description | | -------------- | ---------------------- | --------------------- | | `parentLevel` | `ComputedRef;` | Get parent level. | diff --git a/package.json b/package.json index 416bb27..03edc93 100644 --- a/package.json +++ b/package.json @@ -21,11 +21,13 @@ "type": "module", "exports": { ".": { + "types": "./dist/index.d.ts", "import": "./dist/index.js", "require": "./dist/index.cjs" } }, "main": "./dist/index.cjs", + "types": "./dist/index.d.ts", "files": [ "dist" ], diff --git a/src/ContentContainer.ts b/src/ContentContainer.ts index 8d4c85d..02c201a 100644 --- a/src/ContentContainer.ts +++ b/src/ContentContainer.ts @@ -1,19 +1,19 @@ import { defineComponent, h, inject, provide, type ComponentOptions } from 'vue'; import useContentContainer from './useContentContainer'; -export type ContentContainerProps = { +export interface ContentContainerProps { tag?: string; rootTags?: string[]; contentTags?: string[]; level?: number; debug?: boolean; -}; +} -export type ContentContainerContext = ContentContainerProps & { +export interface ContentContainerContext extends ContentContainerProps { parentLevel: number; currentLevel: number; currentTag: string; -}; +} const ContentContainer = defineComponent({ name: 'ContentContainer', diff --git a/src/ContentHeadline.ts b/src/ContentHeadline.ts index 59427e1..bf6c65a 100644 --- a/src/ContentHeadline.ts +++ b/src/ContentHeadline.ts @@ -1,16 +1,16 @@ import { defineComponent, h, inject, type ComponentOptions } from 'vue'; import useContentHeadline from './useContentHeadline'; -export type ContentHeadlineProps = { +export interface ContentHeadlineProps { tag: string; debug: boolean; -}; +} -export type ContentHeadlineContext = ContentHeadlineProps & { +export interface ContentHeadlineContext extends ContentHeadlineProps { parentLevel: number; currentLevel: number; currentTag: string; -}; +} const ContentHeadline = defineComponent({ name: 'ContentHeadline', diff --git a/src/index.ts b/src/index.ts index 1d6d2c7..efaee2b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,11 @@ export { default as ContentContainer } from './ContentContainer'; export { default as ContentHeadline } from './ContentHeadline'; +export type { ContentHeadlineProps, ContentHeadlineContext } from './ContentHeadline'; +export type { ContentContainerProps, ContentContainerContext } from './ContentContainer'; + export { default as useContentContainer } from './useContentContainer'; export { default as useContentHeadline } from './useContentHeadline'; + +export type { ContentContainerOptions, ContentContainerReturn } from './useContentContainer'; +export type { ContentHeadlineOptions, ContentHeadlineReturn } from './useContentHeadline'; diff --git a/src/useContentContainer.ts b/src/useContentContainer.ts index a1a54b4..ccf491f 100644 --- a/src/useContentContainer.ts +++ b/src/useContentContainer.ts @@ -1,24 +1,24 @@ import { provide, inject, computed, type ComputedRef } from 'vue'; -export type ContentContainerOptions = { +export interface ContentContainerOptions { tag?: string | undefined; rootTags?: string[]; contentTags?: string[]; level?: number; -}; +} -export type ContentContainerResult = { +export interface ContentContainerReturn { parentLevel: ComputedRef; currentLevel: ComputedRef; currentTag: ComputedRef; -}; +} export default function useContentContainer({ tag, contentTags, rootTags, level -}: ContentContainerOptions = {}): ContentContainerResult { +}: ContentContainerOptions = {}): ContentContainerReturn { tag = tag || undefined; rootTags = rootTags || inject('semanticStructure_rootTags', ['main']); contentTags = contentTags || inject('semanticStructure_contentTags', ['article', 'section']); diff --git a/src/useContentHeadline.ts b/src/useContentHeadline.ts index c551ae7..532fa22 100644 --- a/src/useContentHeadline.ts +++ b/src/useContentHeadline.ts @@ -1,14 +1,14 @@ import { inject, computed, type ComputedRef } from 'vue'; -export type ContentHeadlineOptions = { +export interface ContentHeadlineOptions { tag?: string | undefined; -}; +} -export type ContentHeadlineReturn = { +export interface ContentHeadlineReturn { parentLevel: ComputedRef; currentLevel: ComputedRef; currentTag: ComputedRef; -}; +} export default function useContentHeadline({ tag }: ContentHeadlineOptions = {}): ContentHeadlineReturn { const parentLevel = computed(() => inject('semanticStructure_parentLevel', 1) + 1); diff --git a/vitest.config.js b/vitest.config.ts similarity index 100% rename from vitest.config.js rename to vitest.config.ts