fix(components): fix missing v-slot vars

basics · Sep 23, 2024 · 310a289 · 310a289
1 parent 1373d40
commit 310a289
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 52 deletions.
diff --git 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
@@ -30,6 +30,16 @@ If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
 
 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
@@ -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" />
   </ContentContainer>
 </template>
 
 <script setup>
 import { inject, provide } from 'vue';
-import { ContentContainer } from 'vue-structural-headings';
+import { ContentContainer } from 'vue-semantic-structure';
 
 const props = defineProps({
   debug: {

diff --git a/playground/src/components/DebugHeadline.vue b/playground/src/components/DebugHeadline.vue
@@ -1,13 +1,13 @@
 <template>
-  <ContentHeadline v-slot="{ level }" :data-debug="debug ? 'headline' : undefined">
+  <ContentHeadline v-slot="{ currentLevel }" :data-debug="debug ? 'headline' : undefined">
     <slot />
-    <pre v-if="debug" :data-debug-context-level="level" />
+    <pre v-if="debug" :data-debug-current-level="currentLevel" />
   </ContentHeadline>
 </template>
 
 <script setup>
 import { inject } from 'vue';
-import { ContentHeadline } from 'vue-structural-headings';
+import { ContentHeadline } from 'vue-semantic-structure';
 
 const debug = inject('debugHeadings', false);
 </script>
diff --git a/playground/src/components/composable/DebugContainer.vue b/playground/src/components/composable/DebugContainer.vue
@@ -6,15 +6,15 @@
       class="structure-debug"
       :data-debug-parent-level="parentLevel"
       :data-debug-level="currentLevel"
-      :data-debug-tag="tag" />
+      :data-debug-current-tag="currentTag" />
   </component>
 </template>
 
 <script setup>
 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
@@ -1,14 +1,14 @@
 <template>
   <component :is="tag" :data-debug="debug ? 'headline' : undefined">
     <slot />
-    <pre v-if="debug" :data-debug-context-level="level" />
+    <pre v-if="debug" :data-debug-current-level="currentLevel" />
   </component>
 </template>
 
 <script setup>
 import { inject } from 'vue';
-import useCOntentHeadline from '../../../../src/useContentHeadline';
+import useContentHeadline from '../../../../src/useContentHeadline';
 
-const { tag, level } = useCOntentHeadline();
+const { tag, currentLevel } = useContentHeadline();
 const debug = inject('debugHeadings', false);
 </script>
diff --git 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);
 
-}
+}
diff --git 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
@@ -1,8 +1,8 @@
 <template>
   <component v-if="!abstract" :is="currentTag" v-bind="$attrs">
-    <slot :level="level" :parentLevel="parentLevel" :currentTag="currentTag" />
+    <slot :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
   </component>
-  <slot v-else :currentTag="currentTag" :parentLevel="parentLevel" :level="level" />
+  <slot v-else :currentTag="currentTag" :parentLevel="parentLevel" :currentLevel="currentLevel" />
 </template>
 
 <script>
@@ -23,8 +23,8 @@ export default {
   },
 
   setup() {
-    const { parentLevel, level, currentTag } = useContentHeadline();
-    return { parentLevel, level, currentTag };
+    const { parentLevel, currentLevel, currentTag } = useContentHeadline();
+    return { parentLevel, currentLevel, currentTag };
   }
 };
 </script>