Skip to content

Commit 310a289

Browse files
ThornWalliThornWalli
committed
fix(components): fix missing v-slot vars
1 parent 1373d40 commit 310a289

File tree

9 files changed

+72
-52
lines changed

9 files changed

+72
-52
lines changed

‎docs/src/components/content-container.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@ Available tags for the root structure.
4949

5050
Can be used to overwrite the level.
5151

52+
## v-slot
53+
54+
### default
55+
56+
| Property | Type | Description |
57+
| -------------- | -------- | ------------------------ |
58+
| `currentTag` | `String` | Get current element tag. |
59+
| `parentLevel` | `Number` | Get parent level. |
60+
| `currentLevel` | `Number` | Get current level. |
61+
5262
## Example
5363

5464
```vue

‎docs/src/components/content-headline.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@ If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
3030

3131
Tag for the element.
3232

33+
## v-slot
34+
35+
### default
36+
37+
| Property | Type | Description |
38+
| -------------- | -------- | ------------------------ |
39+
| `currentTag` | `String` | Get current element tag. |
40+
| `parentLevel` | `Number` | Get parent level. |
41+
| `currentLevel` | `Number` | Get current level. |
42+
3343
## Example
3444

3545
```vue

‎playground/src/components/DebugContainer.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
v-if="isDebug"
66
class="structure-debug"
77
:data-debug-parent-level="parentLevel"
8-
:data-debug-level="currentLevel"
9-
:data-debug-tag="currentTag" />
8+
:data-debug-current-level="currentLevel"
9+
:data-debug-current-tag="currentTag" />
1010
</ContentContainer>
1111
</template>
1212

1313
<script setup>
1414
import { inject, provide } from 'vue';
15-
import { ContentContainer } from 'vue-structural-headings';
15+
import { ContentContainer } from 'vue-semantic-structure';
1616
1717
const props = defineProps({
1818
debug: {

‎playground/src/components/DebugHeadline.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<ContentHeadline v-slot="{ level }" :data-debug="debug ? 'headline' : undefined">
2+
<ContentHeadline v-slot="{ currentLevel }" :data-debug="debug ? 'headline' : undefined">
33
<slot />
4-
<pre v-if="debug" :data-debug-context-level="level" />
4+
<pre v-if="debug" :data-debug-current-level="currentLevel" />
55
</ContentHeadline>
66
</template>
77

88
<script setup>
99
import { inject } from 'vue';
10-
import { ContentHeadline } from 'vue-structural-headings';
10+
import { ContentHeadline } from 'vue-semantic-structure';
1111
1212
const debug = inject('debugHeadings', false);
1313
</script>

‎playground/src/components/composable/DebugContainer.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@
66
class="structure-debug"
77
:data-debug-parent-level="parentLevel"
88
:data-debug-level="currentLevel"
9-
:data-debug-tag="tag" />
9+
:data-debug-current-tag="currentTag" />
1010
</component>
1111
</template>
1212

1313
<script setup>
1414
import { inject, provide } from 'vue';
1515
import useContentContainer from '../../../../src/useContentContainer';
1616
17-
const { parentLevel, currentLevel, tag } = useContentContainer();
17+
const { parentLevel, currentLevel, currentTag } = useContentContainer();
1818
const props = defineProps({
1919
debug: {
2020
type: Boolean,

‎playground/src/components/composable/DebugHeadline.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<template>
22
<component :is="tag" :data-debug="debug ? 'headline' : undefined">
33
<slot />
4-
<pre v-if="debug" :data-debug-context-level="level" />
4+
<pre v-if="debug" :data-debug-current-level="currentLevel" />
55
</component>
66
</template>
77

88
<script setup>
99
import { inject } from 'vue';
10-
import useCOntentHeadline from '../../../../src/useContentHeadline';
10+
import useContentHeadline from '../../../../src/useContentHeadline';
1111
12-
const { tag, level } = useCOntentHeadline();
12+
const { tag, currentLevel } = useContentHeadline();
1313
const debug = inject('debugHeadings', false);
1414
</script>

‎playground/src/style.css‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,40 +13,40 @@
1313

1414

1515

16-
[data-debug="headline"] {
17-
position: relative;
16+
[data-debug="headline"] {
17+
position: relative;
1818

19-
& pre {
19+
& pre {
20+
position: absolute;
21+
inset: 0;
22+
z-index: 10000;
23+
margin: 0;
24+
font-family: monospace;
25+
font-weight: normal;
26+
27+
&::before {
2028
position: absolute;
2129
inset: 0;
30+
box-sizing: border-box;
31+
pointer-events: none;
32+
content: '';
33+
border: dotted #333 2px;
34+
}
35+
36+
&::after {
37+
position: absolute;
38+
right: 0;
39+
bottom: 0;
2240
z-index: 10000;
23-
margin: 0;
24-
font-family: monospace;
25-
font-weight: normal;
26-
27-
&::before {
28-
position: absolute;
29-
inset: 0;
30-
box-sizing: border-box;
31-
pointer-events: none;
32-
content: '';
33-
border: dotted #333 2px;
34-
}
35-
36-
&::after {
37-
position: absolute;
38-
right: 0;
39-
bottom: 0;
40-
z-index: 10000;
41-
padding: 5px;
42-
font-size: 13px;
43-
color: white;
44-
letter-spacing: 0.1em;
45-
content: 'H' attr(data-debug-context-level);
46-
background: #333;
47-
}
41+
padding: 5px;
42+
font-size: 13px;
43+
color: white;
44+
letter-spacing: 0.1em;
45+
content: 'H' attr(data-debug-current-level);
46+
background: #333;
4847
}
4948
}
49+
}
5050

5151

5252

@@ -94,44 +94,44 @@
9494
font-weight: bold;
9595
color: var(--tag-color-fg);
9696
pointer-events: none;
97-
content: attr(data-debug-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-level);
97+
content: attr(data-debug-current-tag) ' - pLevel: ' attr(data-debug-parent-level) ' - Level: ' attr(data-debug-level);
9898
background: var(--tag-color-bg);
9999
}
100100
}
101101
}
102102

103-
.structure-debug[data-debug-tag='article'] {
103+
.structure-debug[data-debug-current-tag='article'] {
104104
--tag-color-fg: var(--color-structure-2-fg);
105105
--tag-color-bg: var(--color-structure-2-bg);
106106

107107
}
108108

109-
.structure-debug[data-debug-tag='article'] {
109+
.structure-debug[data-debug-current-tag='article'] {
110110
--tag-color-fg: var(--color-structure-2-fg);
111111
--tag-color-bg: var(--color-structure-2-bg);
112112

113113
}
114114

115-
.structure-debug[data-debug-tag='section'] {
115+
.structure-debug[data-debug-current-tag='section'] {
116116
--tag-color-fg: var(--color-structure-3-fg);
117117
--tag-color-bg: var(--color-structure-3-bg);
118118

119119
}
120120

121-
.structure-debug[data-debug-tag='nav'] {
121+
.structure-debug[data-debug-current-tag='nav'] {
122122
--tag-color-fg: var(--color-structure-4-fg);
123123
--tag-color-bg: var(--color-structure-4-bg);
124124

125125
}
126126

127-
.structure-debug[data-debug-tag='main'] {
127+
.structure-debug[data-debug-current-tag='main'] {
128128
--tag-color-fg: var(--color-structure-1-fg);
129129
--tag-color-bg: var(--color-structure-1-bg);
130130

131131
}
132132

133-
.structure-debug[data-debug-tag='div'] {
133+
.structure-debug[data-debug-current-tag='div'] {
134134
--tag-color-fg: var(--color-structure-5-fg);
135135
--tag-color-bg: var(--color-structure-5-bg);
136136

137-
}
137+
}

‎playground/vite.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default defineConfig({
1919
resolve: {
2020
alias: {
2121
'@': path.resolve(__dirname, './src'),
22-
'vue-structural-headings': path.resolve(__dirname, '../src')
22+
'vue-semantic-structure': path.resolve(__dirname, '../src')
2323
}
2424
}
2525
});

‎src/ContentHeadline.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<template>
22
<component v-if="!abstract" :is="currentTag" v-bind="$attrs">
3-
<slot :level="level" :parentLevel="parentLevel" :currentTag="currentTag" />
3+
<slot :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
44
</component>
5-
<slot v-else :currentTag="currentTag" :parentLevel="parentLevel" :level="level" />
5+
<slot v-else :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
66
</template>
77

88
<script>
@@ -23,8 +23,8 @@ export default {
2323
},
2424
2525
setup() {
26-
const { parentLevel, level, currentTag } = useContentHeadline();
27-
return { parentLevel, level, currentTag };
26+
const { parentLevel, currentLevel, currentTag } = useContentHeadline();
27+
return { parentLevel, currentLevel, currentTag };
2828
}
2929
};
3030
</script>

0 commit comments

Comments
 (0)