fix(update): replaced vue files

docs/src/components/content-container.md

@@ -18,13 +18,6 @@ The appropriate HTML element for the page structure is determined based on the `
 
 ## Properties
 
-### abstract
-
-- Type: `Boolean`
-- Default: `false`
-
-If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
-
 ### tag
 
 - Type: `String`
@@ -35,7 +28,7 @@ Tag for the element.
 ### rootTags
 
 - Type: `Array`
-- Default: `inject('rootTags', ['main'])`
+- Default: `inject('semanticRelease_rootTags', ['main'])`
 
 Available tags for the root structure.
 
@@ -44,7 +37,7 @@ Available tags for the root structure.
 ### contentTags
 
 - Type: `Array`
-- Default: `inject('contentTags', ['article', 'section'])`
+- Default: `inject('semanticRelease_contentTags', ['article', 'section'])`
 
 Available tags for the content structure.
 
@@ -57,6 +50,13 @@ Available tags for the content structure.
 
 Can be used to overwrite the level.
 
+### debug
+
+- Type: `Boolean`
+- Default: `inject('semanticRelease_debug', false)`
+
+If set, the following attributes are set on the element: `data-current-tag`, `data-current-level` and `data-parent-level`.
+
 ## v-slot
 
 ### default
@@ -85,8 +85,7 @@ Can be used to overwrite the level.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 

docs/src/components/content-headline.md

@@ -20,20 +20,20 @@ The deeper the nesting, the smaller the heading.
 
 ## Properties
 
-### abstract
-
-- Type: `Boolean`
-- Default: `false`
-
-If set, the heading is rendered as an abstract heading. (e.g. `<slot />`)
-
 ### tag
 
 - Type: `String`
 - Default: `null`
 
 Tag for the element.
 
+### debug
+
+- Type: `Boolean`
+- Default: `inject('semanticRelease_debug', false)`
+
+If set, the following attributes are set on the element: `data-current-tag`, `data-current-level` and `data-parent-level`.
+
 ## v-slot
 
 ### default
@@ -62,8 +62,7 @@ Tag for the element.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 

docs/src/composables/use-content-container.md

@@ -34,12 +34,12 @@ const { currentTag } = useContentContainer()
 
 ## Options
 
-| Property      | Type     | Description                               | Default Value            |
-| ------------- | -------- | ----------------------------------------- | ------------------------ |
-| `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`              |
-| `contentTags` | `Array`  | Available tags for the content structure. | `['section', 'article']` |
-| `rootTags`    | `Array`  | Available tags for the root structure.    | `['main', undefined]`    |
-| `level`       | `Number` | Can be used to overwrite the level.       | `undefined`              |
+| Property      | Type     | Description                               | Default Value                                                   |
+| ------------- | -------- | ----------------------------------------- | --------------------------------------------------------------- |
+| `tag`         | `String` | Can be used to overwrite the tag.         | `undefined`                                                     |
+| `contentTags` | `Array`  | Available tags for the content structure. | `inject('semanticRelease_contentTags', ['article', 'section'])` |
+| `rootTags`    | `Array`  | Available tags for the root structure.    | `inject('semanticRelease_rootTags', ['main'])`                  |
+| `level`       | `Number` | Can be used to overwrite the level.       | `undefined`                                                     |
 
 ## Return
 

docs/src/introduction.md

@@ -60,8 +60,7 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentContainer, ContentHeadline } from 'vue-semantic-structure';
 </script>
 ```
 

docs/src/usage.md

@@ -22,7 +22,7 @@ The main structure is in the `<main>` tag, which contains the main components.
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 
@@ -56,7 +56,7 @@ It is recommended to create a separate component that extends the `ContentContai
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 
@@ -76,7 +76,7 @@ In comparison to the basic application, the entire content is enclosed in anothe
 </template>
 
 <script setup>
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 </script>
 ```
 

package.json

@@ -22,9 +22,7 @@
     ".": {
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
-    },
-    "./ContentContainer.vue": "./dist/ContentContainer.vue",
-    "./ContentHeadline.vue": "./dist/ContentHeadline.vue"
+    }
   },
   "main": "./dist/index.cjs",
   "files": [

playground/src/components/DebugArticleContentContainer.vue

@@ -15,7 +15,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 
 const props = defineProps({
   debug: {

playground/src/components/DebugContainer.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import { ContentContainer } from 'vue-semantic-structure';
 
 const props = defineProps({
   debug: {

playground/src/components/DebugHeadline.vue

@@ -7,7 +7,7 @@
 
 <script setup>
 import { inject } from 'vue';
-import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+import { ContentHeadline } from 'vue-semantic-structure';
 
 const debug = inject('debugHeadings', false);
 </script>

src/ContentContainer.js

@@ -0,0 +1,72 @@
+import { h, inject, provide } from 'vue';
+import useContentContainer from './useContentContainer';
+
+const ContentContainer = {
+  name: 'ContentContainer',
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    rootTags: {
+      type: Array,
+      default() {
+        return inject('semanticRelease_rootTags', ['main']);
+      }
+    },
+    contentTags: {
+      type: Array,
+      default() {
+        return inject('semanticRelease_contentTags', ['article', 'section']);
+      }
+    },
+    level: {
+      type: Number,
+      default: undefined
+    },
+    debug: {
+      type: Boolean,
+      default() {
+        return inject('semanticRelease_debug', false);
+      }
+    }
+  },
+
+  setup(props) {
+    const { parentLevel, currentLevel, currentTag } = useContentContainer(props);
+    provide('semanticRelease_debug', props.debug);
+    return { parentLevel, currentLevel, currentTag };
+  },
+
+  render() {
+    const { currentTag, parentLevel, currentLevel } = this;
+    return h(
+      currentTag,
+      {
+        ...this.$attrs,
+        ...getDebugAttrs(this)
+      },
+      {
+        default: () =>
+          this.$slots.default({
+            currentTag,
+            parentLevel,
+            currentLevel
+          })
+      }
+    );
+  }
+};
+
+const getDebugAttrs = context => {
+  if (context.debug) {
+    return {
+      'data-current-tag': context.currentTag,
+      'data-current-level': context.currentLevel,
+      'data-parent-level': context.parentLevel
+    };
+  }
+  return {};
+};
+
+export default ContentContainer;

src/ContentHeadline.js

@@ -0,0 +1,53 @@
+import { h, inject } from 'vue';
+import useContentHeadline from './useContentHeadline';
+
+const ContentHeadline = {
+  name: 'ContentHeadline',
+  props: {
+    tag: {
+      type: String,
+      default: null
+    },
+    debug: {
+      type: Boolean,
+      default() {
+        return inject('semanticRelease_debug', false);
+      }
+    }
+  },
+
+  setup() {
+    const { parentLevel, currentLevel, currentTag } = useContentHeadline();
+    return { parentLevel, currentLevel, currentTag };
+  },
+
+  render() {
+    const { currentTag, currentLevel } = this;
+    return h(
+      currentTag,
+      {
+        ...this.$attrs,
+        ...getDebugAttrs(this)
+      },
+      {
+        default: () =>
+          this.$slots.default({
+            currentTag,
+            currentLevel
+          })
+      }
+    );
+  }
+};
+
+const getDebugAttrs = context => {
+  if (context.debug) {
+    return {
+      'data-current-tag': context.currentTag,
+      'data-current-level': context.currentLevel
+    };
+  }
+  return {};
+};
+
+export default ContentHeadline;