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 @@
-
+
-
+