Skip to content

Commit 52c960b

Browse files
tmorehousetmorehouse
authored
feat(docs): Allow sub-components to show reference info for slots and events (#2132)
feat(docs): Allow sub-components to show reference info for slots and events
1 parent b62f8f4 commit 52c960b

File tree

66 files changed

+786
-517
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+786
-517
lines changed

‎docs/components/componentdoc.vue

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<b-row
77
tag="header"
88
align-v="center">
9-
<b-col sm="9"><h2><code>{{ tag }}</code></h2></b-col>
9+
<b-col sm="9"><h2 :id="`comp-ref-${componentName}`"><code>{{ tag }}</code></h2></b-col>
1010
<b-col
1111
sm="3"
1212
class="text-sm-right">
@@ -18,8 +18,16 @@
1818
</b-col>
1919
</b-row>
2020

21+
<article v-if="aliases && aliases.length > 0">
22+
<h4 :id="`comp-ref-${componentName}-aliases`">Component aliases</h4>
23+
<p><code>{{ tag }}</code> can also be used via the following aliases:</p>
24+
<ul>
25+
<li v-for="alias in aliases" :key="alias"><code>&lt;{{ kebabCase(alias) }}&gt;</code></li>
26+
</ul>
27+
</article>
28+
2129
<article v-if="props_items && props_items.length > 0">
22-
<h4>Properties</h4>
30+
<h4 :id="`comp-ref-${componentName}-props`">Properties</h4>
2331
<b-table
2432
:items="props_items"
2533
:fields="props_fields"
@@ -35,7 +43,7 @@
3543
</article>
3644

3745
<article v-if="slots && slots.length > 0">
38-
<h4>Slots</h4>
46+
<h4 :id="`comp-ref-${componentName}-slots`">Slots</h4>
3947
<b-table
4048
:items="slots"
4149
:fields="slots_fields"
@@ -45,7 +53,7 @@
4553
</article>
4654

4755
<article v-if="events && events.length > 0">
48-
<h4>Events</h4>
56+
<h4 :id="`comp-ref-${componentName}-events`">Events</h4>
4957
<b-table
5058
:items="events"
5159
:fields="events_fields"
@@ -88,8 +96,15 @@ export default {
8896
events: {
8997
type: Array,
9098
default: () => []
99+
},
100+
aliases: {
101+
type: Array,
102+
default: () => []
91103
}
92104
},
105+
methods: {
106+
kebabCase
107+
},
93108
computed: {
94109
componentOptions () {
95110
const component = Vue.options.components[this.component]

‎docs/components/importdoc.vue

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
v-if="components.length > 0 || directives.length > 0">
55

66
<article v-if="components.length > 0">
7-
<h3>Importing Individual Components</h3>
7+
<h3 id="importing-individual-components">Importing Individual {{ pluginTitle }} Components</h3>
88
<b-table
99
:items="componentImports"
1010
small
@@ -32,7 +32,7 @@
3232
</article>
3333

3434
<article v-if="directives.length > 0">
35-
<h3>Importing Individual Directives</h3>
35+
<h3 id="importing-individual-directives">Importing Individual {{ pluginTitle }} Directives</h3>
3636
<b-table
3737
:items="directiveImports"
3838
small
@@ -62,7 +62,7 @@
6262
</article>
6363

6464
<article class="pb-5">
65-
<h3>Importing {{ pluginTitle }} as a Vue plugin</h3>
65+
<h3 id="importing-as-a-plugin">Importing {{ pluginTitle }} as a Vue plugin</h3>
6666
<p v-if="$route.name === 'docs-components-slug'">
6767
This plugin includes all of the above listed individual
6868
components<span v-if="directives.length"> and directives</span>.
@@ -105,6 +105,7 @@
105105
<script>
106106
import kebabCase from 'lodash/kebabCase'
107107
import startCase from 'lodash/startCase'
108+
108109
export default {
109110
props: {
110111
meta: {}
@@ -133,7 +134,12 @@ export default {
133134
})
134135
},
135136
components () {
136-
return [].concat(this.meta.component, this.meta.components).filter(c => c)
137+
let subcomponents = []
138+
if (this.meta.components) {
139+
// We just want the sub-component name
140+
subcomponents = this.meta.components.map(m => m.component)
141+
}
142+
return [].concat(this.meta.component, subcomponents).filter(c => c)
137143
},
138144
directives () {
139145
return [].concat(this.meta.directive, this.meta.directives).filter(d => d)

‎docs/components/search.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,26 +42,26 @@ function process(readme, section, page) {
4242
}
4343
4444
// Async build the search database
45-
import('~/markdown/intro/README.md').then(readme => {
45+
import('~/markdown/intro/README.md' /* webpackChunkName: "docs/intro" */).then(readme => {
4646
process(readme.default, '', '');
4747
});
4848
Object.keys(_components).forEach(page => {
49-
import('~/../src/components/' + page + '/README.md').then(readme => {
49+
import('~/../src/components/' + page + '/README.md' /* webpackChunkName: "docs/components" */).then(readme => {
5050
process(readme.default, 'components', page);
5151
});
5252
});
5353
Object.keys(_directives).forEach(page => {
54-
import('~/../src/directives/' + page + '/README.md').then(readme => {
54+
import('~/../src/directives/' + page + '/README.md' /* webpackChunkName: "docs/directives" */).then(readme => {
5555
process(readme.default, 'directives', page);
5656
});
5757
});
5858
Object.keys(_reference).forEach(page => {
59-
import('~/markdown/reference/' + page + '/README.md').then(readme => {
59+
import('~/markdown/reference/' + page + '/README.md' /* webpackChunkName: "docs/reference" */).then(readme => {
6060
process(readme.default, 'reference', page);
6161
});
6262
});
6363
Object.keys(_misc).forEach(page => {
64-
import('~/markdown/misc/' + page + '/README.md').then(readme => {
64+
import('~/markdown/misc/' + page + '/README.md' /* webpackChunkName: "docs/misc" */).then(readme => {
6565
process(readme.default, 'misc', page);
6666
});
6767
});

‎docs/components/toc.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,19 @@ import { scrollTo, offsetTop, makeTOC } from '~/utils'
7777
export default {
7878
data () {
7979
return {
80-
readme: ''
80+
readme: '',
81+
meta: null
8182
}
8283
},
8384
computed: {
8485
toc () {
85-
return makeTOC(this.readme)
86+
return makeTOC(this.readme, this.meta)
8687
}
8788
},
8889
mounted () {
89-
this.$root.$on('setTOC', readme => {
90+
this.$root.$on('setTOC', (readme, meta) => {
9091
this.readme = readme
92+
this.meta = meta || null
9193
})
9294
},
9395
methods: {

‎docs/pages/docs/components/_slug.vue

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,31 @@
11
<template>
2-
<div class="container">
3-
<div class="bd-content" v-html="readme" v-play></div>
4-
5-
<componentdoc :component="meta.component" :events="meta.events" :slots="meta.slots"></componentdoc>
6-
7-
<b-card class="my-4">
8-
<small class="font-italic">
9-
Trying to get native browser events working on your component? Use the
10-
<code>.native</code>
11-
modifier to capture browser native events such as:
12-
<code>@click.native="..."</code>,
13-
<code>@mouseover.native="..."</code>, etc. See the the official
14-
<a href="https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components">Vue.js documentation</a>
15-
for more information.
16-
</small>
17-
</b-card>
18-
19-
<componentdoc :component="component" :key="component" v-for="component in meta.components"></componentdoc>
20-
21-
<importdoc :meta="meta"></importdoc>
22-
</div>
2+
<main class="container">
3+
<div class="bd-content" v-html="readme" v-play></div>
4+
5+
<section class="bd-content">
6+
<h2 id="component-reference">{{ startCase(meta.title)}} Component Reference</h2>
7+
8+
<!-- main component reference information -->
9+
<componentdoc :component="meta.component"
10+
:events="meta.events"
11+
:slots="meta.slots"
12+
:aliases="meta.aliases">
13+
</componentdoc>
14+
15+
<!-- sub-component reference information -->
16+
<componentdoc v-for="meta in meta.components"
17+
:key="meta.component"
18+
:component="meta.component"
19+
:events="meta.events"
20+
:slots="meta.slots"
21+
:aliases="meta.aliases">
22+
</componentdoc>
23+
24+
<!-- Component importing information -->
25+
<importdoc :meta="meta"></importdoc>
26+
</section>
27+
28+
</main>
2329
</template>
2430

2531

@@ -28,18 +34,20 @@ import componentdoc from "~/components/componentdoc.vue";
2834
import importdoc from "~/components/importdoc.vue";
2935
import { components as _meta } from "~/content";
3036
import docsMixin from "~/plugins/docs-mixin";
37+
import startCase from 'lodash/startCase'
3138
3239
const getReadMe = name => import('~/../src/components/' + name + '/README.md' /* webpackChunkName: "docs/components" */)
3340
3441
export default {
3542
components: { componentdoc, importdoc },
3643
mixins: [docsMixin],
3744
layout: "docs",
38-
45+
methods: {
46+
startCase
47+
},
3948
validate({ params }) {
4049
return Boolean(_meta[params.slug])
4150
},
42-
4351
async asyncData({ params }) {
4452
const readme = await getReadMe(params.slug)
4553
const meta = _meta[params.slug]

‎docs/pages/docs/directives/_slug.vue

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,40 @@
11
<template>
2-
<div class="container">
3-
<div class="bd-content" v-html="readme" v-play></div>
4-
5-
<importdoc :meta="meta"></importdoc>
6-
</div>
2+
<main class="container">
3+
<div class="bd-content" v-html="readme" v-play></div>
4+
<section class="bd-content">
5+
<h2 id="directive-reference">{{ metaTitle }} Directive Reference</h2>
6+
<importdoc :meta="meta"></importdoc>
7+
</section>
8+
</main>
79
</template>
810

911
<script>
1012
import importdoc from '~/components/importdoc.vue';
1113
import { directives as _meta } from "~/content";
1214
import docsMixin from "~/plugins/docs-mixin";
15+
import startCase from 'lodash/startCase'
1316
1417
const getReadMe = name => import('~/../src/directives/' + name + '/README.md' /* webpackChunkName: "docs/directives" */)
1518
1619
export default {
1720
mixins: [docsMixin],
1821
components: { importdoc },
22+
computed: {
23+
metaTitle () {
24+
return startCase(this.meta.title)
25+
}
26+
},
1927
layout: "docs",
20-
2128
validate({ params }) {
22-
return Boolean(_meta[params.slug])
29+
return Boolean(_meta[params.slug])
2330
},
24-
2531
async asyncData({ params }) {
26-
const readme = await getReadMe(params.slug)
27-
const meta = _meta[params.slug]
28-
29-
return {
30-
readme: readme.default,
31-
meta
32-
}
32+
const readme = await getReadMe(params.slug)
33+
const meta = _meta[params.slug]
34+
return {
35+
readme: readme.default,
36+
meta
37+
}
3338
}
34-
};
39+
}
3540
</script>

‎docs/plugins/docs-mixin.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export default {
2626
clearTimeout(this.scrollTimeout)
2727
this.scrollTimeout = null
2828
this.focusScroll()
29-
this.$root.$emit('setTOC', this.readme)
29+
this.$root.$emit('setTOC', this.readme, this.meta || null)
3030
},
3131

3232
updated () {

0 commit comments

Comments
 (0)