🌐 AI搜索 & 代理 主页
Skip to content

Commit cbe2490

Browse files
jacobmllr95jacobmllr95
committed
Improve component and importdocs
- Use bordered tables - Show property badges on new line - Add badge when property is available in settings - Improve property type displaying - Corretly show `null`, `undefined` and `''` default values
1 parent 97ad7cd commit cbe2490

File tree

36 files changed

+348
-20
lines changed

36 files changed

+348
-20
lines changed

‎docs/components/componentdoc.vue‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
target="_blank"
1313
href="https://vuejs.org/v2/guide/render-function.html#Functional-Components"
1414
>
15-
Functional Component
15+
Functional component
1616
</b-badge>
1717
</b-col>
1818
<b-col sm="3" class="text-sm-right">
@@ -57,7 +57,7 @@
5757
<li v-if="rootEventListeners && rootEventListeners.length > 0">
5858
<a :href="`#comp-ref-${componentName}-rootEventListeners`">
5959
<code class="notranslate" translate="no">{{ tag }}</code>
60-
<code class="notranslate" translate="no">$root</code> Event Listeners
60+
<code class="notranslate" translate="no">$root</code> Event listeners
6161
</a>
6262
</li>
6363
</ul>
@@ -91,17 +91,22 @@
9191
table-class="bv-docs-table"
9292
responsive="sm"
9393
sort-icon-left
94+
bordered
9495
striped
9596
>
9697
<template v-slot:cell(prop)="{ value, item }">
97-
<code class="text-nowrap notranslate" translate="no">{{ value }}</code>
98+
<code class="text-nowrap notranslate" translate="no">{{ value }}</code><br>
9899
<b-badge v-if="item.required" variant="info">Required</b-badge>
100+
<b-badge v-if="item.settings" variant="dark">Settings</b-badge>
99101
<b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge>
100102
<b-badge v-if="item.isVModel" variant="primary">v-model</b-badge>
101103
<b-badge v-if="item.xss" variant="warning">Use with caution</b-badge>
102104
<b-badge v-if="item.deprecated" variant="danger">Deprecated</b-badge>
103105
<b-badge v-else-if="item.deprecation" variant="warning">Deprecation</b-badge>
104106
</template>
107+
<template v-slot:cell(type)="{ value }">
108+
<span v-html="value"></span>
109+
</template>
105110
<template v-slot:cell(defaultValue)="{ value }">
106111
<code v-if="value" class="word-wrap-normal notranslate" translate="no">{{ value }}</code>
107112
</template>
@@ -142,13 +147,14 @@
142147

143148
<article v-if="componentVModel" class="bd-content">
144149
<anchored-heading :id="`comp-ref-${componentName}-v-model`" level="4" class="mb-3">
145-
v-model
150+
<code class="notranslate" translate="no">v-model</code>
146151
</anchored-heading>
147152
<b-table-lite
148153
:items="[componentVModel]"
149154
:fields="[{ key: 'prop', label: 'Property' }, 'event']"
150155
table-class="bv-docs-table"
151156
responsive="sm"
157+
bordered
152158
striped
153159
>
154160
<template v-slot:cell(prop)="{ value }">
@@ -171,6 +177,7 @@
171177
table-class="bv-docs-table"
172178
responsive="sm"
173179
sort-icon-left
180+
bordered
174181
striped
175182
>
176183
<template v-slot:cell(name)="{ value, item }">
@@ -197,6 +204,7 @@
197204
primary-key="prop"
198205
class="mb-0"
199206
head-variant="dark"
207+
bordered
200208
striped
201209
small
202210
caption-top
@@ -236,6 +244,7 @@
236244
primary-key="event"
237245
table-class="bv-docs-table"
238246
responsive="sm"
247+
bordered
239248
striped
240249
>
241250
<template v-slot:cell(event)="{ value, item }">
@@ -257,7 +266,7 @@
257266

258267
<article v-if="rootEventListeners && rootEventListeners.length > 0" class="bd-content">
259268
<anchored-heading :id="`comp-ref-${componentName}-rootEventListeners`" level="4" class="mb-3">
260-
<code class="notranslate" translate="no">$root</code> Event Listeners
269+
<code class="notranslate" translate="no">$root</code> event listeners
261270
</anchored-heading>
262271
<p>
263272
You can control <code class="notranslate" translate="no">{{ tag }}</code> by emitting the
@@ -269,6 +278,7 @@
269278
primary-key="event"
270279
table-class="bv-docs-table"
271280
responsive="sm"
281+
bordered
272282
striped
273283
>
274284
<template v-slot:cell(event)="{ value, item }">
@@ -456,26 +466,22 @@ export default {
456466
457467
// Describe type
458468
let type = p.type
469+
let types = []
459470
if (Array.isArray(type)) {
460-
type = type.map(t => t.name).join(' or ')
461-
} else if (typeof type === 'undefined') {
462-
type = 'Any'
471+
types = type.map(type => type.name)
463472
} else {
464-
type = type.name
473+
types = type && type.name ? [type.name] : ['Any']
465474
}
475+
type = types
476+
.map(type => `<code class="notranslate" translate="no">${type}</code>`)
477+
.join(' or ')
466478
467479
// Default value
468-
let defaultVal = p.default
469-
if (defaultVal instanceof Function && !Array.isArray(defaultVal)) {
470-
defaultVal = defaultVal()
471-
}
472-
if (typeof defaultVal === 'undefined' || defaultVal === null) {
473-
defaultVal = ''
474-
}
475-
defaultVal = JSON.stringify(defaultVal, undefined, 1).replace(/"/g, "'")
476-
if (defaultVal === "''") {
477-
defaultVal = ''
480+
let defaultValue = p.default
481+
if (defaultValue instanceof Function && !Array.isArray(defaultValue)) {
482+
defaultValue = defaultValue()
478483
}
484+
defaultValue = String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
479485
480486
const fallbackMeta = commonProps[prop] || {}
481487
const description =
@@ -485,9 +491,10 @@ export default {
485491
return {
486492
prop: kebabCase(prop),
487493
type,
488-
defaultValue: defaultVal,
494+
defaultValue,
489495
required: p.required || false,
490496
description: description || '',
497+
settings: meta.settings || false,
491498
version,
492499
xss: /[a-z]Html$/.test(prop),
493500
isVModel: this.componentVModel && this.componentVModel.prop === prop,

‎docs/components/importdoc.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
table-class="bv-docs-table"
2020
responsive="sm"
2121
head-variant="default"
22+
bordered
2223
striped
2324
>
2425
<template v-slot:cell(component)="{ value }">
@@ -53,6 +54,7 @@
5354
table-class="bv-docs-table"
5455
responsive="sm"
5556
head-variant="default"
57+
bordered
5658
striped
5759
>
5860
<template v-slot:cell(directive)="{ value }">
@@ -92,6 +94,7 @@
9294
responsive="sm"
9395
head-variant="default"
9496
caption-top
97+
bordered
9598
striped
9699
>
97100
<template v-slot:cell(namedExport)="{ value }">

‎src/components/alert/package.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,18 @@
88
{
99
"component": "BAlert",
1010
"props": [
11+
{
12+
"prop": "variant",
13+
"settings": true,
14+
"description": "Applies one of the Bootstrap theme color variants to the component"
15+
},
1116
{
1217
"prop": "dismissible",
1318
"description": "When set, enables the dismiss close button"
1419
},
1520
{
1621
"prop": "dismissLabel",
22+
"settings": true,
1723
"description": "Value for the 'aria-label' attribute on the dismiss button"
1824
},
1925
{

‎src/components/avatar/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
{
1111
"component": "BAvatar",
1212
"props": [
13+
{
14+
"prop": "variant",
15+
"settings": true,
16+
"description": "Applies one of the Bootstrap theme color variants to the component"
17+
},
1318
{
1419
"prop": "text",
1520
"description": "Text to place in the avatar"

‎src/components/badge/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@
88
{
99
"component": "BBadge",
1010
"props": [
11+
{
12+
"prop": "variant",
13+
"settings": true,
14+
"description": "Applies one of the Bootstrap theme color variants to the component"
15+
},
1116
{
1217
"prop": "pill",
1318
"description": "When set to 'true', renders the badge in pill style"

‎src/components/button/package.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@
1111
"BBtn"
1212
],
1313
"props": [
14+
{
15+
"prop": "size",
16+
"settings": true,
17+
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
18+
},
19+
{
20+
"prop": "variant",
21+
"settings": true,
22+
"description": "Applies one of the Bootstrap theme color variants to the component"
23+
},
1424
{
1525
"prop": "block",
1626
"description": "Renders a 100% width button (expands to the width of its parent container)"
@@ -54,8 +64,19 @@
5464
"props": [
5565
{
5666
"prop": "content",
67+
"settings": true,
5768
"version": "2.3.0",
5869
"description": "The content of the close button"
70+
},
71+
{
72+
"prop": "textVariant",
73+
"settings": true,
74+
"description": "Applies one of the Bootstrap theme color variants to the text"
75+
},
76+
{
77+
"prop": "ariaLabel",
78+
"settings": true,
79+
"description": "Sets the value of 'aria-label' attribute on the rendered element"
5980
}
6081
],
6182
"events": [

‎src/components/calendar/package.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,46 +99,57 @@
9999
},
100100
{
101101
"prop": "labelPrevYear",
102+
"settings": true,
102103
"description": "Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button"
103104
},
104105
{
105106
"prop": "labelPrevMonth",
107+
"settings": true,
106108
"description": "Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button"
107109
},
108110
{
109111
"prop": "labelCurrentMonth",
112+
"settings": true,
110113
"description": "Value of the `aria-label` and `title` attributes on the `Current Month` navigation button"
111114
},
112115
{
113116
"prop": "labelNextMonth",
117+
"settings": true,
114118
"description": "Value of the `aria-label` and `title` attributes on the `Next Month` navigation button"
115119
},
116120
{
117121
"prop": "labelNextYear",
122+
"settings": true,
118123
"description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
119124
},
120125
{
121126
"prop": "labelSelected",
127+
"settings": true,
122128
"description": "Value of the `aria-label` attribute set on the calendar grid date button that is selected"
123129
},
124130
{
125131
"prop": "labelToday",
132+
"settings": true,
126133
"description": "Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date"
127134
},
128135
{
129136
"prop": "labelNoDateSelected",
137+
"settings": true,
130138
"description": "Label to use when no date is currently selected"
131139
},
132140
{
133141
"prop": "labelCalendar",
142+
"settings": true,
134143
"description": "Value of the `aria-label` and `role-description` attributes applied to the calendar grid"
135144
},
136145
{
137146
"prop": "labelNav",
147+
"settings": true,
138148
"description": "Value of the `aria-label` attribute on to the calendar navigation button wrapper"
139149
},
140150
{
141151
"prop": "labelHelp",
152+
"settings": true,
142153
"description": "Help text that appears at the bottom of the calendar grid"
143154
},
144155
{

‎src/components/card/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,11 @@
119119
{
120120
"prop": "right",
121121
"description": "Set if the image will be placed at the end (right) of the card. Synonym for the 'right' prop"
122+
},
123+
{
124+
"prop": "subTitleTextVariant",
125+
"settings": true,
126+
"description": "Applies one of the Bootstrap theme color variants to the sub title text"
122127
}
123128
]
124129
},

‎src/components/carousel/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,18 +56,22 @@
5656
},
5757
{
5858
"prop": "labelPrev",
59+
"settings": true,
5960
"description": "Sets the 'aria-label' value for the previous slide control"
6061
},
6162
{
6263
"prop": "labelNext",
64+
"settings": true,
6365
"description": "Sets the 'aria-label' value for the next slide control"
6466
},
6567
{
6668
"prop": "labelGotoSlide",
69+
"settings": true,
6770
"description": "Sets the prefix for the 'aria-label' on the slide indicator controls. Will be suffixed with the slide number (1 indexed)"
6871
},
6972
{
7073
"prop": "labelIndicators",
74+
"settings": true,
7175
"description": "Sets the 'aria-label' on the indicator controls wrapper"
7276
},
7377
{

‎src/components/dropdown/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,16 @@
1111
"BDd"
1212
],
1313
"props": [
14+
{
15+
"prop": "size",
16+
"settings": true,
17+
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
18+
},
19+
{
20+
"prop": "variant",
21+
"settings": true,
22+
"description": "Applies one of the Bootstrap theme color variants to the component"
23+
},
1424
{
1525
"prop": "text",
1626
"description": "Text to place in the toggle button, or in the split button is split mode"
@@ -53,6 +63,7 @@
5363
},
5464
{
5565
"prop": "toggleText",
66+
"settings": true,
5667
"description": "ARIA label (sr-only) to set on the toggle when in split mode"
5768
},
5869
{
@@ -90,6 +101,7 @@
90101
},
91102
{
92103
"prop": "splitVariant",
104+
"settings": true,
93105
"description": "Applies one of the Bootstrap theme color variants to the split button. Defaults to the 'variant' prop value"
94106
},
95107
{

0 commit comments

Comments
 (0)