Skip to content

Commit c6abfd0

Browse files
tmorehousetmorehouse
authored
fix(docs): fix issue with table docs page (closes #2939) (#2940)
1 parent 03276c4 commit c6abfd0

File tree

7 files changed

+134
-114
lines changed

7 files changed

+134
-114
lines changed

‎docs/components/componentdoc.vue

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,19 @@
3434
head-variant="default"
3535
striped
3636
>
37-
<template slot="prop" slot-scope="{ value }">
38-
<code>{{ value }}</code>
37+
<template slot="prop" slot-scope="{ value, item }">
38+
<code class="text-nowrap">{{ value }}</code>
39+
<b-badge v-if="item.required" variant="info">Required</b-badge>
40+
<b-badge v-else-if="item.deprecated" variant="danger">Deprecated</b-badge>
41+
<b-badge v-else-if="item.deprecation" variant="warning">Deprecation</b-badge>
3942
</template>
4043
<template slot="row-details" slot-scope="{ item }">
41-
<b-badge variant="warning">
42-
{{ typeof item.deprecated === 'string' ? 'deprecation' : 'deprecated' }}
43-
</b-badge>
44-
<!-- If deprecated is a string, show the string value -->
45-
<small v-if="typeof item.deprecated === 'string'">{{ item.deprecated }}</small>
44+
<p v-if="typeof item.deprecated === 'string'" class="mb-1 small">
45+
{{ item.deprecated }}
46+
</p>
47+
<p v-if="typeof item.deprecation === 'string'" class="mb-1 small">
48+
{{ item.deprecation }}
49+
</p>
4650
</template>
4751
<template slot="defaultValue" slot-scope="{ value }">
4852
<code v-if="value">{{ value }}</code>
@@ -80,7 +84,11 @@
8084
small
8185
head-variant="default"
8286
striped
83-
></b-table>
87+
>
88+
<template slot="name" slot-scope="{ value }">
89+
<code class="text-nowrap">{{ value }}</code>
90+
</template>
91+
</b-table>
8492
</article>
8593

8694
<article v-if="events && events.length > 0">
@@ -94,13 +102,16 @@
94102
head-variant="default"
95103
striped
96104
>
105+
<template slot="event" slot-scope="{ value }">
106+
<code class="text-nowrap">{{ value }}</code>
107+
</template>
97108
<template slot="args" slot-scope="{ value, item }">
98109
<div
99110
v-for="arg in value"
100111
:key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
101112
>
102113
<template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
103-
<span v-html="arg.description"></span>
114+
<span>{{ arg.description }}</span>
104115
</div>
105116
</template>
106117
</b-table>
@@ -121,13 +132,18 @@
121132
head-variant="default"
122133
striped
123134
>
135+
<template slot="event" slot-scope="{ value }">
136+
<code class="text-nowrap">{{ value }}</code>
137+
</template>
124138
<template slot="args" slot-scope="{ value, item }">
125139
<div
126140
v-for="arg in value"
127141
:key="`event-${item.event}-${arg.arg ? arg.arg : 'none'}`"
128142
>
129-
<template v-if="arg.arg"><code>{{ arg.arg }}</code> - </template>
130-
<span v-html="arg.description"></span>
143+
<template v-if="arg.arg">
144+
<code>{{ arg.arg }}</code>
145+
<span v-if="arg.description"> - {{ arg.description }}</span>
146+
</template>
131147
</div>
132148
</template>
133149
</b-table>
@@ -203,22 +219,11 @@ export default {
203219
return this.componentOptions.props || {}
204220
},
205221
propsFields() {
206-
const props = this.componentProps
207-
const hasRequired = Object.keys(props).some(p => props[p].required)
208-
209-
const fields = [
222+
return [
210223
{ key: 'prop', label: 'Property' },
211224
{ key: 'type', label: 'Type' },
212225
{ key: 'defaultValue', label: 'Default Value' }
213226
]
214-
215-
// Add the required column if there are required field(s)
216-
if (hasRequired) {
217-
// Insert required field after prop name
218-
fields.splice(1, 0, { key: 'required', label: 'Required' })
219-
}
220-
221-
return fields
222227
},
223228
eventsFields() {
224229
return [
@@ -267,19 +272,15 @@ export default {
267272
}
268273
defaultVal = (defaultVal || '').replace(/"/g, "'")
269274
270-
// Requied prop?
271-
const required = p.required ? 'Yes' : ''
272-
// Deprecation?
273-
const deprecated = p.deprecated || false
274-
275275
return {
276276
prop: kebabCase(prop),
277277
type,
278-
required,
279278
typeClass,
280279
defaultValue: defaultVal,
281-
deprecated,
282-
_showDetails: !!deprecated
280+
required: p.required || false,
281+
deprecated: p.deprecated || false,
282+
deprecation: p.deprecation || false,
283+
_showDetails: typeof p.deprecated === 'string' || typeof p.deprecation === 'string'
283284
}
284285
})
285286
},

‎docs/components/importdoc.vue

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@
1010
</anchored-heading>
1111

1212
<b-table :items="componentImports" small head-variant="default" striped>
13-
<template slot="component" slot-scope="field">
14-
<code>{{ field.value }}</code>
13+
<template slot="component" slot-scope="{ value }">
14+
<code class="text-nowrap">{{ value }}</code>
1515
</template>
16-
<template slot="importPath" slot-scope="field">
17-
<code>{{ field.value }}</code>
16+
<template slot="importPath" slot-scope="{ value }">
17+
<code>{{ value }}</code>
1818
</template>
1919
</b-table>
2020

2121
<p><strong>Example:</strong></p>
2222

23-
<pre class="hljs js text-monospace p-2"><code v-html="componentImportCode"></code></pre>
23+
<pre class="hljs js text-monospace p-2">{{ componentImportCode }}</pre>
2424
</article>
2525
</template>
2626

@@ -31,17 +31,17 @@
3131
</anchored-heading>
3232

3333
<b-table :items="directiveImports" small head-variant="default" striped>
34-
<template slot="directive" slot-scope="field">
35-
<code>{{ field.value }}</code>
34+
<template slot="directive" slot-scope="{ value }">
35+
<code class="text-nowrap">{{ value }}</code>
3636
</template>
37-
<template slot="importPath" slot-scope="field">
38-
<code>{{ field.value }}</code>
37+
<template slot="importPath" slot-scope="{ value }">
38+
<code>{{ value }}</code>
3939
</template>
4040
</b-table>
4141

4242
<p><strong>Example:</strong></p>
4343

44-
<pre class="hljs js text-monospace p-2"><code v-html="directiveImportCode"></code></pre>
44+
<pre class="hljs js text-monospace p-2">{{ directiveImportCode }}</pre>
4545
</article>
4646
</template>
4747

@@ -59,7 +59,7 @@
5959
This plugin includes all of the above listed individual directives.
6060
</p>
6161

62-
<pre class="hljs js text-monospace p-2"><code v-html="pluginImportCode"></code></pre>
62+
<pre class="hljs js text-monospace p-2">{{ pluginImportCode }}</pre>
6363

6464
<template v-if="meta.plugins && meta.plugins.length > 0">
6565
<p>This plugin also automatically includes the following plugins:</p>
@@ -71,6 +71,16 @@
7171
</section>
7272
</template>
7373

74+
<style scoped>
75+
h1,
76+
h2,
77+
h3,
78+
h4,
79+
h5 {
80+
padding: 20px 0;
81+
}
82+
</style>
83+
7484
<script>
7585
import hljs from 'highlightjs'
7686
import kebabCase from 'lodash/kebabCase'

‎docs/components/search.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
<b-form-input
44
id="bd-search-input"
55
v-model="search"
6+
type="search"
67
placeholder="Search keywords..."
8+
aria-label="Search site"
79
></b-form-input>
810
<button
911
v-b-toggle.bd-docs-nav
@@ -38,6 +40,7 @@
3840
v-for="(results, section, idx) in results"
3941
:key="section"
4042
:class="idx > 0 ? 'mt-2' : ''"
43+
role="group"
4144
>
4245
<h6 class="bd-text-purple my-1" v-html="section"></h6>
4346
<div v-for="t in results" :key="t.href" class="my-1">

‎docs/components/toc.vue

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,52 @@
11
<template>
2-
<nav
3-
v-if="toc.toc && toc.toc.length > 0"
4-
aria-label="Page table of contents"
5-
>
6-
<b-nav v-b-scrollspy.72 vertical class="m-toc section-nav">
7-
<b-nav-item
8-
v-if="toc.title && toc.top"
9-
:href="toc.top"
10-
class="toc-entry font-weight-bold mb-2"
11-
@click="scrollIntoView($event, toc.top)"
12-
>
13-
<span v-html="toc.title"></span>
14-
</b-nav-item>
15-
16-
<template v-for="(h2, index) in toc.toc">
17-
<b-nav
18-
v-if="isArray(h2) && h2.length > 0"
19-
:key="index"
20-
vertical
21-
class="mb-1"
2+
<div>
3+
<nav
4+
v-if="toc.toc && toc.toc.length > 0"
5+
aria-label="Page table of contents"
6+
>
7+
<b-nav v-b-scrollspy.72 vertical class="m-toc section-nav">
8+
<b-nav-item
9+
v-if="toc.title && toc.top"
10+
:href="toc.top"
11+
class="toc-entry font-weight-bold mb-2"
12+
@click="scrollIntoView($event, toc.top)"
2213
>
23-
<b-nav-item
24-
v-for="h3 in h2"
25-
:key="h3.href"
14+
<span v-html="toc.title"></span>
15+
</b-nav-item>
16+
17+
<template v-for="(h2, index) in toc.toc">
18+
<b-nav
19+
v-if="isArray(h2) && h2.length > 0"
20+
:key="index"
2621
vertical
27-
pills
28-
:href="h3.href"
29-
class="toc-entry toc-h3 mb-2"
30-
@click="scrollIntoView($event, h3.href)"
22+
class="mb-1"
3123
>
32-
<span v-html="h3.label"></span>
33-
</b-nav-item>
34-
</b-nav>
24+
<b-nav-item
25+
v-for="h3 in h2"
26+
:key="h3.href"
27+
vertical
28+
pills
29+
:href="h3.href"
30+
class="toc-entry toc-h3 mb-2"
31+
@click="scrollIntoView($event, h3.href)"
32+
>
33+
<span v-html="h3.label"></span>
34+
</b-nav-item>
35+
</b-nav>
3536

36-
<b-nav-item
37-
v-else
38-
:key="h2.href"
39-
:href="h2.href"
40-
class="toc-entry toc-h2 mb-2"
41-
@click="scrollIntoView($event, h2.href)"
42-
>
43-
<span v-html="h2.label"></span>
44-
</b-nav-item>
45-
</template>
46-
</b-nav>
47-
</nav>
37+
<b-nav-item
38+
v-else
39+
:key="h2.href"
40+
:href="h2.href"
41+
class="toc-entry toc-h2 mb-2"
42+
@click="scrollIntoView($event, h2.href)"
43+
>
44+
<span v-html="h2.label"></span>
45+
</b-nav-item>
46+
</template>
47+
</b-nav>
48+
</nav>
49+
</div>
4850
</template>
4951

5052
<style scoped>

‎docs/plugins/docs-mixin.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,9 @@ export default {
2727
clearTimeout(this.scrollTimeout)
2828
this.scrollTimeout = null
2929
this.focusScroll()
30-
this.$root.$emit('setTOC', this.readme, this.meta || null)
30+
this.$nextTick(() => {
31+
this.$root.$emit('setTOC', this.readme || '', this.meta || null)
32+
})
3133
},
3234

3335
updated() {

0 commit comments

Comments
 (0)