Skip to content

Commit

Permalink
feat(docs): auto-detect settings props in component reference (#5761)
Browse files Browse the repository at this point in the history
  • Loading branch information
jacobmllr95 authored Sep 11, 2020
1 parent 38eea23 commit 0ddb2e0
Show file tree
Hide file tree
Showing 37 changed files with 11 additions and 172 deletions.
3 changes: 1 addition & 2 deletions docs/common-props.json
Original file line number Diff line number Diff line change
Expand Up @@ -239,7 +239,6 @@
},
"routerComponentName": {
"description": "<b-link> prop: BootstrapVue auto detects between `<router-link>` and `<nuxt-link>`. In cases where you want to use a 3rd party link component based on `<router-link>`, set this prop to the component name. e.g. set it to 'g-link' if you are using Gridsome (note only `<router-link>` specific props are passed to the component)",
"version": "2.15.0",
"settings": true
"version": "2.15.0"
}
}
23 changes: 10 additions & 13 deletions docs/components/componentdoc.vue
Original file line number Diff line number Diff line change
Expand Up @@ -320,8 +320,8 @@ ul.component-ref-mini-toc:empty {

<script>
import Vue from 'vue'
// Fallback descriptions for common props (mainly router-link props)
import commonProps from '../common-props.json'
import { defaultConfig } from '../content'
import { kebabCase } from '../utils'
import AnchoredHeading from './anchored-heading'
Expand Down Expand Up @@ -448,10 +448,15 @@ export default {
propsItems() {
const props = this.componentProps
const propsMetaObj = this.componentPropsMetaObj
const componentSettings = defaultConfig[this.componentOptions.name] || {}
return Object.keys(props).map(prop => {
const p = props[prop]
const meta = propsMetaObj[prop] || {}
const meta = {
// Fallback descriptions for common props
...(commonProps[prop] || {}),
...(propsMetaObj[prop] || {})
}
// Describe type
let type = p.type
Expand All @@ -475,24 +480,16 @@ export default {
? ''
: String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
const fallbackMeta = commonProps[prop] || {}
const description =
typeof meta.description === 'undefined' ? fallbackMeta.description : meta.description
// TODO:
// Can we auto-detect this by doing a lookup in the
// default settings or determine if the prop default
// value came from the settings?
const settings = meta.settings || false
const version = typeof meta.version === 'undefined' ? fallbackMeta.version : meta.version
const settings = Object.prototype.hasOwnProperty.call(componentSettings, prop)
return {
prop: kebabCase(prop),
type,
defaultValue,
required: p.required || false,
description: description || '',
description: meta.description || '',
version: meta.version || '',
settings,
version,
xss: /[a-z]Html$/.test(prop),
isVModel: this.componentVModel && this.componentVModel.prop === prop,
deprecated: p.deprecated || false,
Expand Down
2 changes: 0 additions & 2 deletions src/components/alert/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"props": [
{
"prop": "variant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
Expand All @@ -19,7 +18,6 @@
},
{
"prop": "dismissLabel",
"settings": true,
"description": "Value for the 'aria-label' attribute on the dismiss button"
},
{
Expand Down
2 changes: 0 additions & 2 deletions src/components/avatar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
"props": [
{
"prop": "variant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
Expand Down Expand Up @@ -60,7 +59,6 @@
{
"prop": "badgeVariant",
"version": "2.12.0",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the badge"
},
{
Expand Down
1 change: 0 additions & 1 deletion src/components/badge/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
"props": [
{
"prop": "variant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
Expand Down
5 changes: 0 additions & 5 deletions src/components/button/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,10 @@
"props": [
{
"prop": "size",
"settings": true,
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
},
{
"prop": "variant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
Expand Down Expand Up @@ -64,18 +62,15 @@
"props": [
{
"prop": "content",
"settings": true,
"version": "2.3.0",
"description": "The content of the close button"
},
{
"prop": "textVariant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the text"
},
{
"prop": "ariaLabel",
"settings": true,
"description": "Sets the value of 'aria-label' attribute on the rendered element"
}
],
Expand Down
16 changes: 0 additions & 16 deletions src/components/calendar/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,15 @@
},
{
"prop": "selectedVariant",
"settings": true,
"description": "Theme color variant to use for the selected date button"
},
{
"prop": "todayVariant",
"settings": true,
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
},
{
"prop": "navButtonVariant",
"version": "2.17.0",
"settings": true,
"description": "Theme color variant to use for the navigation buttons"
},
{
Expand Down Expand Up @@ -112,68 +109,55 @@
{
"prop": "labelPrevDecade",
"version": "2.11.0",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the optional `Previous Decade` navigation button"
},
{
"prop": "labelPrevYear",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Previous Year` navigation button"
},
{
"prop": "labelPrevMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Previous Month` navigation button"
},
{
"prop": "labelCurrentMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Current Month` navigation button"
},
{
"prop": "labelNextMonth",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Next Month` navigation button"
},
{
"prop": "labelNextYear",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the `Next Year` navigation button"
},
{
"prop": "labelNextDecade",
"version": "2.11.0",
"settings": true,
"description": "Value of the `aria-label` and `title` attributes on the optional `Next Decade` navigation button"
},
{
"prop": "labelSelected",
"settings": true,
"description": "Value of the `aria-label` attribute set on the calendar grid date button that is selected"
},
{
"prop": "labelToday",
"settings": true,
"description": "Value of the `aria-label` attribute for the calendar grid date button to signify that the date is today's date"
},
{
"prop": "labelNoDateSelected",
"settings": true,
"description": "Label to use when no date is currently selected"
},
{
"prop": "labelCalendar",
"settings": true,
"description": "Value of the `aria-label` and `role-description` attributes applied to the calendar grid"
},
{
"prop": "labelNav",
"settings": true,
"description": "Value of the `aria-label` attribute on to the calendar navigation button wrapper"
},
{
"prop": "labelHelp",
"settings": true,
"description": "Help text that appears at the bottom of the calendar grid"
},
{
Expand Down
1 change: 0 additions & 1 deletion src/components/card/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@
},
{
"prop": "subTitleTextVariant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the sub title text"
}
]
Expand Down
4 changes: 0 additions & 4 deletions src/components/carousel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,18 @@
},
{
"prop": "labelPrev",
"settings": true,
"description": "Sets the 'aria-label' value for the previous slide control"
},
{
"prop": "labelNext",
"settings": true,
"description": "Sets the 'aria-label' value for the next slide control"
},
{
"prop": "labelGotoSlide",
"settings": true,
"description": "Sets the prefix for the 'aria-label' on the slide indicator controls. Will be suffixed with the slide number (1 indexed)"
},
{
"prop": "labelIndicators",
"settings": true,
"description": "Sets the 'aria-label' on the indicator controls wrapper"
},
{
Expand Down
4 changes: 0 additions & 4 deletions src/components/dropdown/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,10 @@
"props": [
{
"prop": "size",
"settings": true,
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
},
{
"prop": "variant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the component"
},
{
Expand Down Expand Up @@ -63,7 +61,6 @@
},
{
"prop": "toggleText",
"settings": true,
"description": "ARIA label (sr-only) to set on the toggle when in split mode"
},
{
Expand Down Expand Up @@ -101,7 +98,6 @@
},
{
"prop": "splitVariant",
"settings": true,
"description": "Applies one of the Bootstrap theme color variants to the split button. Defaults to the 'variant' prop value"
},
{
Expand Down
2 changes: 0 additions & 2 deletions src/components/form-checkbox/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"props": [
{
"prop": "size",
"settings": true,
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
},
{
Expand Down Expand Up @@ -98,7 +97,6 @@
},
{
"prop": "size",
"settings": true,
"description": "Set the size of the component's appearance. 'sm', 'md' (default), or 'lg'"
},
{
Expand Down
Loading

0 comments on commit 0ddb2e0

Please sign in to comment.