diff --git a/docs/src/components/content-container.md b/docs/src/components/content-container.md index 7c6c761..e261129 100644 --- a/docs/src/components/content-container.md +++ b/docs/src/components/content-container.md @@ -49,6 +49,16 @@ Available tags for the root structure. Can be used to overwrite the level. +## v-slot + +### default + +| Property | Type | Description | +| -------------- | -------- | ------------------------ | +| `currentTag` | `String` | Get current element tag. | +| `parentLevel` | `Number` | Get parent level. | +| `currentLevel` | `Number` | Get current level. | + ## Example ```vue diff --git a/docs/src/components/content-headline.md b/docs/src/components/content-headline.md index 82fbf07..48eaa8d 100644 --- a/docs/src/components/content-headline.md +++ b/docs/src/components/content-headline.md @@ -30,6 +30,16 @@ If set, the heading is rendered as an abstract heading. (e.g. ``) Tag for the element. +## v-slot + +### default + +| Property | Type | Description | +| -------------- | -------- | ------------------------ | +| `currentTag` | `String` | Get current element tag. | +| `parentLevel` | `Number` | Get parent level. | +| `currentLevel` | `Number` | Get current level. | + ## Example ```vue diff --git a/playground/src/components/DebugContainer.vue b/playground/src/components/DebugContainer.vue index 3020aa4..3049610 100644 --- a/playground/src/components/DebugContainer.vue +++ b/playground/src/components/DebugContainer.vue @@ -5,14 +5,14 @@ v-if="isDebug" class="structure-debug" :data-debug-parent-level="parentLevel" - :data-debug-level="currentLevel" - :data-debug-tag="currentTag" /> + :data-debug-current-level="currentLevel" + :data-debug-current-tag="currentTag" /> diff --git a/playground/src/components/composable/DebugContainer.vue b/playground/src/components/composable/DebugContainer.vue index 985db62..826f836 100644 --- a/playground/src/components/composable/DebugContainer.vue +++ b/playground/src/components/composable/DebugContainer.vue @@ -6,7 +6,7 @@ class="structure-debug" :data-debug-parent-level="parentLevel" :data-debug-level="currentLevel" - :data-debug-tag="tag" /> + :data-debug-current-tag="currentTag" /> @@ -14,7 +14,7 @@ import { inject, provide } from 'vue'; import useContentContainer from '../../../../src/useContentContainer'; -const { parentLevel, currentLevel, tag } = useContentContainer(); +const { parentLevel, currentLevel, currentTag } = useContentContainer(); const props = defineProps({ debug: { type: Boolean, diff --git a/playground/src/components/composable/DebugHeadline.vue b/playground/src/components/composable/DebugHeadline.vue index 45f94f7..2990efb 100644 --- a/playground/src/components/composable/DebugHeadline.vue +++ b/playground/src/components/composable/DebugHeadline.vue @@ -1,14 +1,14 @@ diff --git a/playground/src/style.css b/playground/src/style.css index 53ca940..3bd425e 100644 --- a/playground/src/style.css +++ b/playground/src/style.css @@ -13,40 +13,40 @@ - [data-debug="headline"] { - position: relative; +[data-debug="headline"] { + position: relative; - & pre { + & pre { + position: absolute; + inset: 0; + z-index: 10000; + margin: 0; + font-family: monospace; + font-weight: normal; + + &::before { position: absolute; inset: 0; + box-sizing: border-box; + pointer-events: none; + content: ''; + border: dotted #333 2px; + } + + &::after { + position: absolute; + right: 0; + bottom: 0; z-index: 10000; - margin: 0; - font-family: monospace; - font-weight: normal; - - &::before { - position: absolute; - inset: 0; - box-sizing: border-box; - pointer-events: none; - content: ''; - border: dotted #333 2px; - } - - &::after { - position: absolute; - right: 0; - bottom: 0; - z-index: 10000; - padding: 5px; - font-size: 13px; - color: white; - letter-spacing: 0.1em; - content: 'H' attr(data-debug-context-level); - background: #333; - } + padding: 5px; + font-size: 13px; + color: white; + letter-spacing: 0.1em; + content: 'H' attr(data-debug-current-level); + background: #333; } } +} @@ -94,44 +94,44 @@ font-weight: bold; color: var(--tag-color-fg); pointer-events: none; - content: attr(data-debug-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-level); + content: attr(data-debug-current-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-level); background: var(--tag-color-bg); } } } -.structure-debug[data-debug-tag='article'] { +.structure-debug[data-debug-current-tag='article'] { --tag-color-fg: var(--color-structure-2-fg); --tag-color-bg: var(--color-structure-2-bg); } -.structure-debug[data-debug-tag='article'] { +.structure-debug[data-debug-current-tag='article'] { --tag-color-fg: var(--color-structure-2-fg); --tag-color-bg: var(--color-structure-2-bg); } -.structure-debug[data-debug-tag='section'] { +.structure-debug[data-debug-current-tag='section'] { --tag-color-fg: var(--color-structure-3-fg); --tag-color-bg: var(--color-structure-3-bg); } -.structure-debug[data-debug-tag='nav'] { +.structure-debug[data-debug-current-tag='nav'] { --tag-color-fg: var(--color-structure-4-fg); --tag-color-bg: var(--color-structure-4-bg); } -.structure-debug[data-debug-tag='main'] { +.structure-debug[data-debug-current-tag='main'] { --tag-color-fg: var(--color-structure-1-fg); --tag-color-bg: var(--color-structure-1-bg); } -.structure-debug[data-debug-tag='div'] { +.structure-debug[data-debug-current-tag='div'] { --tag-color-fg: var(--color-structure-5-fg); --tag-color-bg: var(--color-structure-5-bg); -} \ No newline at end of file +} diff --git a/playground/vite.config.js b/playground/vite.config.js index 4becc3d..51f12b8 100644 --- a/playground/vite.config.js +++ b/playground/vite.config.js @@ -19,7 +19,7 @@ export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), - 'vue-structural-headings': path.resolve(__dirname, '../src') + 'vue-semantic-structure': path.resolve(__dirname, '../src') } } }); diff --git a/src/ContentHeadline.vue b/src/ContentHeadline.vue index bde5961..fd41826 100644 --- a/src/ContentHeadline.vue +++ b/src/ContentHeadline.vue @@ -1,8 +1,8 @@