Skip to content

Commit 0e5842c

Browse files
mcibiquemcibique
committed
Initial commit
0 parents  commit 0e5842c

18 files changed

+20993
-0
lines changed

‎.editorconfig

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
root = true
2+
3+
[*]
4+
end_of_line = lf
5+
insert_final_newline = true
6+
charset = utf-8
7+
indent_style = space
8+
indent_size = 2

‎.eslintrc.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = {
2+
extends: ["semistandard", "plugin:vue/recommended"],
3+
rules: {
4+
semi: "error",
5+
quotes: ["error", "double"],
6+
"no-unused-expressions": "off",
7+
"comma-dangle": ["error", "always-multiline"],
8+
"prefer-const": "off",
9+
"vue/require-default-prop": "off",
10+
},
11+
};

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
coverage

‎.npmignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
coverage
2+
tests
3+
src/**/*.spec.js
4+
src/**/*.snap
5+
6+
.editorconfig
7+
.eslintrc.js
8+
jest.config.js

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 M Cibique
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
# Vue headings
2+
3+
Automated heading ranks for HTML document outline using vue.js. Contains 2 components that will automatically generate proper `<h1>`-`<h6>` elements based on the section structure of your HTML document.
4+
5+
Each `document-heading` inside of root `document-section` will become `h1`. If you nest two `document-section` components, each `document-heading` inside will become `<h2>`, etc.
6+
7+
Useful for dynamically setting headings in re-usable components when you don't know where your component will be placed in the DOM.
8+
9+
Consider you have an accordion component rendering this:
10+
11+
```html
12+
<ul>
13+
<li>
14+
<h4>Heading 1</h4>
15+
... content ...
16+
</li>
17+
<li>
18+
<h4>Heading 2</h4>
19+
... content ...
20+
</li>
21+
<li>
22+
<h4>Heading 3</h4>
23+
... content ...
24+
</li>
25+
</ul>
26+
```
27+
28+
Is `<h4>` the right heading here? If there are no `<h3>` elements on the page, those should be `<h3>`s instead!
29+
30+
Replace the `<h4>` with `<document-heading>` component and it will automatically generate that for you based on number of `<document-section>`s it is nested in.
31+
32+
## Installation
33+
34+
```sh
35+
npm install vue-headings --save
36+
```
37+
38+
or
39+
40+
```sh
41+
yarn add vue-headings
42+
```
43+
44+
`vue-headings` requires vue.js v2.
45+
46+
## Usage
47+
48+
### Basic example
49+
50+
```html
51+
// my-component.vue
52+
53+
<template>
54+
<document-section>
55+
<document-heading>My Heading</document-heading>
56+
57+
<document-section>
58+
<document-heading>My Child Heading</document-heading>
59+
<p>Lorem ipsum ...</p>
60+
61+
<document-heading>My Child Heading</document-heading>
62+
<p>Lorem ipsum ...</p>
63+
64+
<document-heading>My Child Heading</document-heading>
65+
<p>Lorem ipsum ...</p>
66+
67+
<document-section>
68+
<document-heading>My Grand Child Heading</document-heading>
69+
<p>Lorem ipsum ...</p>
70+
71+
<document-heading>My Grand Child Heading</document-heading>
72+
<p>Lorem ipsum ...</p>
73+
</document-section>
74+
</document-section>
75+
</document-section>
76+
</template>
77+
```
78+
79+
```js
80+
import { DocumentSection, DocumentHeading } from 'vue-headings';
81+
82+
export default {
83+
name: 'MyComponent',
84+
components: { DocumentSection, DocumentHeading },
85+
}
86+
```
87+
88+
Renders following document structure:
89+
90+
```html
91+
<section>
92+
<h1>My Heading</h1>
93+
94+
<section>
95+
<h2>My Child Heading</h2>
96+
<p>Lorem ipsum ...</p>
97+
98+
<h2>My Child Heading</h2>
99+
<p>Lorem ipsum ...</p>
100+
101+
<h2>My Child Heading</h2>
102+
<p>Lorem ipsum ...</p>
103+
104+
<section>
105+
<h3>My Grand Child Heading</h3>
106+
<p>Lorem ipsum ...</p>
107+
108+
<h3>My Grand Child Heading</h3>
109+
<p>Lorem ipsum ...</p>
110+
</section>
111+
</section>
112+
</section>
113+
```
114+
115+
### Custom section tag
116+
117+
If you don't like `<section>` element, you can pass any other tag into the `tag` prop:
118+
119+
```html
120+
<document-section tag="main">
121+
<document-section tag="nav">
122+
...
123+
</document-section>
124+
<document-section tag="footer">
125+
...
126+
</document-section>
127+
</document-section>
128+
```
129+
130+
### Custom section level
131+
132+
You can adjust the current level of section by passing custom level via prop:
133+
134+
```html
135+
<document-section level="2"> <!-- This section would normally be level 1 -->
136+
<document-section><!-- This section will have level 3 (parent + 1) -->
137+
<document-heading>H3</document-heading>
138+
</document-section>
139+
<document-section level="1"><!-- ignores the parent and sets the level to 1 -->
140+
<document-heading>H1</document-heading>
141+
</document-section>
142+
</document-section>
143+
```
144+
145+
### Relative section level
146+
147+
You can set the current level of the section relatively to it's parent section.
148+
149+
```html
150+
<document-section level="4">
151+
<document-section level="+2"><!-- This section will have level 6 (parent + 2) -->
152+
<document-heading>H6</document-heading>
153+
</document-section>
154+
<document-section level="-2"><!-- This section will have level 2 (parent - 2) -->
155+
<document-heading>H2</document-heading>
156+
</document-section>
157+
</document-section>
158+
```
159+
160+
### Custom heading level
161+
162+
You can adjust the current level of heading by passing custom level via prop:
163+
164+
```html
165+
<document-section>
166+
<document-section>
167+
<document-heading level="5">H5</document-heading> <!-- ignores the parent level and use level 5 -->
168+
</document-section>
169+
<document-section>
170+
<document-heading level="1">H1</document-heading><!-- ignores the parent and sets the level to 1 -->
171+
</document-section>
172+
</document-section>
173+
```
174+
175+
### Relative heading level
176+
177+
You can set the current level of the heading relatively to it's parent section.
178+
179+
```html
180+
<document-section level="4">
181+
<document-heading level="-2">H2</document-heading><!-- This heading will have level 2 (parent - 2) -->
182+
<document-section level="2">
183+
<document-heading level="+3">H5</document-heading><!-- This heading will have level 5 (parent + 3) -->
184+
</document-section>
185+
</document-section>
186+
```
187+
188+
### Heading rank overflow
189+
190+
Heading level cannot reach level lower than 1 and greater than 6. If calculated level is lower than one, it will become 1. If calculated level is greater than 6, it will become 6.
191+
192+
```html
193+
<document-section level="100">
194+
<document-heading>H6</document-heading>
195+
<document-heading level="-200">H1</document-heading>
196+
<document-heading level="+100">H6</document-heading>
197+
</document-section>
198+
```

‎babel.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
"@vue/app",
4+
],
5+
};

‎jest.config.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
module.exports = {
2+
moduleFileExtensions: [
3+
"js",
4+
"jsx",
5+
"json",
6+
"vue",
7+
],
8+
transform: {
9+
"^.+\\.vue$": "vue-jest",
10+
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
11+
"^.+\\.jsx?$": "babel-jest",
12+
},
13+
transformIgnorePatterns: [
14+
"/node_modules/",
15+
],
16+
snapshotSerializers: [
17+
"jest-serializer-vue",
18+
],
19+
testMatch: [
20+
"<rootDir>/src/**/*.spec.(js|jsx|ts|tsx)",
21+
],
22+
testURL: "http://localhost/",
23+
watchPlugins: [
24+
"jest-watch-typeahead/filename",
25+
"jest-watch-typeahead/testname",
26+
],
27+
setupFilesAfterEnv: [
28+
"<rootDir>/tests/setup.js",
29+
],
30+
collectCoverage: true,
31+
collectCoverageFrom: [
32+
"src/**/*.{js,vue}",
33+
],
34+
coverageThreshold: {
35+
global: {
36+
branches: 100,
37+
functions: 100,
38+
lines: 100,
39+
statements: 100,
40+
},
41+
},
42+
clearMocks: true,
43+
};

0 commit comments

Comments
 (0)