8000 feat(config): improved defaults handling (closes #4507, #5138, #5291,… · bootstrap-vue/bootstrap-vue@7ea0cc4 · GitHub
[go: up one dir, main page]
Skip to content

Commit 7ea0cc4

Browse files
Hiwsjacobmllr95
Hiws
and
jacobmllr95
authored
feat(config): improved defaults handling (closes #4507, #5138, #5291, #5459, #5958) (#5981)
* specify support of sidebar + array * Initial Concept * remove test code * Remove `config-default.js` * Update componentdoc.vue * Update bootstrap-vue.js * feat(config): code improvements * fix: fallback config handling for date/time components * update calendar.js * feat(config): make all props configurable [WIP] * Update aspect.js * Update avatar-group.js * Update avatar.js * Update form-datepicker.js * fix(config): default value handling in `makePropsConfigurable()` * Update config.spec.js * Update config.js * Update componentdoc.vue * Apply `makePropsConfigurable` to all components * Update object.js * Update object.js * fix linting errors * Revert "fix linting errors" This reverts commit 786886f. * Update form-input.js * Update form-spinbutton.js * fix(form-file): `fileNameFormatter` prop handling * fix: property `validator` context * Update form-tags.js * Update pagination-nav.js * Update toast.js * Update button.js * Update calendar.js * Update bv-modal.js * Update form-size.js * Update mixin-selectable.js * Update mixin-tfoot.js * Update mixin-thead.js * Update bv-toast.js * Update popover.js * Update tooltip.js * Update tbody.js * Update td.js * Update tfoot.js * Update thead.js * Update tr.js * Update pagination.js * Update button-group.js * Update button.js * Update form-datepicker.js * Update form-timepicker.js * Update time.js * Update button-toolbar.js * Update calendar.js * Update form-file.js * Update form-rating.js * Update mixin-options.js * Update form-spinbutton.js * Update form-tags.js * Update nav-item.js * Update mixin-busy.js * Update mixin-caption.js * Update mixin-empty.js * Update mixin-filtering.js * Update mixin-items.js * Update mixin-pagination.js * Update mixin-provider.js * Update mixin-sorting.js * Update mixin-stacked.js * Update mixin-table-renderer.js * Update mixin-tbody-row.js * Update icon.js * Update iconstack.js * Update card.js * Update dropdown.js * Update form-options.js * Update form-radio-check-group.js * Update form-radio-check.js * Update form-text.js * Update form.js * Update mixin-filtering.js * Update pagination.js * Update form-text.js * Update modal.js * chore: remove redundant istanbul ignores * fix: add back some istanbul ignore * fix(config): ensure props from mixins are configurabel via component config * fix: resuse `form-plain` mixin everywhere * feat: improve form control mixins * Update README.md * Update componentdoc.vue * Update SECURITY.md * Update README.md * Update breadcrumb.js * fix: size prop default value * Update input-group.js * fix(config): `makePropsConfigurable()` usage without key * Update config.js * Update config.js * Update button-close.js * Update toaster.js * Update calendar.js * Update carousel.js * Update dropdown.js * Update dropdown.spec.js * Update img-lazy.js * Update config.spec.js * Update avatar.js * feat: further improve shared form props usage Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent 84366bf commit 7ea0cc4

File tree

164 files changed

+4999
-5121
lines changed

Some content is hidden

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

164 files changed

+4999
-5121
lines changed

‎SECURITY.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,11 @@
1010

1111
## Reporting a Vulnerability
1212

13-
The BootstrapVue team takes security issues very seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
13+
The BootstrapVue team takes security issues very seriously. We appreciate your efforts to
14+
responsibly disclose your findings, and will make every effort to acknowledge your contributions.
1415

15-
To report a security issue, email [bootstrapvue.js@gmail.com](mailto:security@bootstrapvue.js@gmail.com) and include the word "SECURITY" in the subject line.
16+
To report a security issue, email
17+
[bootstrapvue.js@gmail.com](mailto:security@bootstrapvue.js@gmail.com) and include the word
18+
"SECURITY" in the subject line.
1619

1720
We'll endeavor to respond quickly, and will keep you updated throughout the process.

‎docs/components/componentdoc.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,11 @@
8585
<anchored-heading :id="`comp-ref-${componentName}-props`" level="4" class="mb-3">
8686
Properties
8787
</anchored-heading>
88+
89+
<p>
90+
All property default values are <b-link href="/docs/reference/settings">globally configurable</b-link>.
91+
</p>
92+
8893
<b-table
8994
:items="propsItems"
9095
:fields="propsFields"
@@ -98,7 +103,6 @@
98103
<template #cell(prop)="{ value, item }">
99104
<code class="text-nowrap notranslate" translate="no">{{ value }}</code><br>
100105
<b-badge v-if="item.required" variant="info">Required</b-badge>
101-
<b-badge v-if="item.settings" variant="dark" href="/docs/reference/settings" title="Configurable in settings">Settings</b-badge>
102106
<b-badge v-if="item.version" variant="secondary">v{{ item.version }}+</b-badge>
103107
<b-badge v-if="item.isVModel" variant="primary">v-model</b-badge>
104108
<b-badge v-if="item.xss" variant="warning">Use with caution</b-badge>
@@ -298,7 +302,6 @@
298302
<script>
299303
import Vue from 'vue'
300304
import commonProps from '../common-props.json'
301-
import { defaultConfig } from '../content'
302305
import { getComponentName, getCleanComponentName, kebabCase } from '../utils'
303306
import AnchoredHeading from './anchored-heading'
304307
@@ -425,7 +428,6 @@ export default {
425428
propsItems() {
426429
const props = this.componentProps
427430
const propsMetaObj = this.componentPropsMetaObj
428-
const componentSettings = defaultConfig[this.componentOptions.name] || {}
429431
430432
return Object.keys(props).map(prop => {
431433
const p = props[prop]
@@ -457,16 +459,13 @@ export default {
457459
? ''
458460
: String(JSON.stringify(defaultValue, undefined, 1)).replace(/"/g, "'")
459461
460-
const settings = Object.prototype.hasOwnProperty.call(componentSettings, prop)
461-
462462
return {
463463
prop: kebabCase(prop),
464464
type,
465465
defaultValue,
466466
required: p.required || false,
467467
description: meta.description || '',
468468
version: meta.version || '',
469-
settings,
470469
xss: /[a-z]Html$/.test(prop),
471470
isVModel: this.componentVModel && this.componentVModel.prop === prop,
472471
deprecated: p.deprecated || false,

‎docs/content.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { importAll, parseVersion, parseFullVersion } from '~/utils'
22
import { version, dependencies, devDependencies, description } from '~/../package.json'
3-
import DEFAULT_CONFIG from '~/../src/utils/config-defaults'
43

54
const componentsContext = require.context('~/../src/components/', true, /package.json/)
65
export const components = importAll(componentsContext)
@@ -92,7 +91,6 @@ export const vueVersion = parseVersion(devDependencies.vue)
9291
export const vueVersionMinor = vueVersion.replace(minorRE, '$1')
9392
export const vueVersionMajor = vueVersion.replace(majorRE, '$1')
9493

95-
export const defaultConfig = DEFAULT_CONFIG
9694
export const bvDescription = description
9795

9896
export { version }

‎docs/markdown/reference/settings/README.md

Lines changed: 76 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,76 @@ Note that it is not possible to change the defaults when using BootstrapVue via
1414

1515
### Default configuration
1616

17-
Default breakpoint names are stored in the `breakpoints` property, default form control size is
18-
stored under the `formControls` property, while component specific defaults are keyed by their
19-
<samp>PascalCase</samp> name with the props as <samp>camelCase</samp> properties. Only properties
20-
defined in the default configuration can be overridden. Attempting to set a config property that is
21-
not defined in the default will generate a console warning.
17+
Default breakpoint names are stored in the `breakpoints` property and all other shared component
18+
configurations (like `formControls`) are listed below.
19+
20+
Component specific defaults are keyed by their `PascalCase` name with the props as `camelCase`
21+
properties.
2222

2323
```json
24-
{{ defaultConfig }}
24+
{
25+
// Breakpoint configuration
26+
"breakpoints": ["xs", "sm", "md", "lg", "xl"],
27+
28+
// Shared component configuration
29+
"formControls": {
30+
"disabled": undefined,
31+
"required": false,
32+
"form": undefined,
33+
"autofocus": false,
34+
"plain": false,
35+
"size": undefined
36+
},
37+
"formOptionControls": {
38+
"options": [],
39+
"valueField": "value",
40+
"textField": "text",
41+
"htmlField": "html",
42+
"disabledField": "disabled"
43+
},
44+
"formRadioCheckGroups": {
45+
"validated": false,
46+
"ariaInvalid": false,
47+
"stacked": false,
48+
"buttons": false,
49+
"buttonVariant": undefined,
50+
"plain": false
51+
},
52+
"formRadioCheckControls": {
53+
"value": undefined,
54+
"checked": undefined,
55+
"inline": false,
56+
"button": false,
57+
"buttonVariant": undefined,
58+
"ariaLabel": undefined,
59+
"ariaLabelledby": undefined,
60+
"plain": false
61+
},
62+
"formState": {
63+
"state": null
64+
},
65+
"formTextControls": {
66+
"value": "",
67+
"ariaInvalid": false,
68+
"readonly": false,
69+
"plaintext": false,
70+
"autocomplete": undefined,
71+
"placeholder": undefined,
72+
"formatter": undefined,
73+
"lazyFormatter": false,
74+
"trim": false,
75+
"number": false,
76+
"lazy": false,
77+
"debounce": 0
78+
},
79+
80+
// Component configuration
81+
"BAlert": {
82+
"variant": "info"
83+
// ...
84+
}
85+
// ...
86+
}
2587
```
2688

2789
### Setting new configuration values
@@ -30,11 +92,12 @@ When you `Vue.use(BootstrapVue)`, you can optionally pass a configuration object
3092
values to replace the default values. For example if you wish to define new breakpoint names (which
3193
will generate appropriate properties on components such as `<b-col>` and `<b-form-group>`), so that
3294
the new breakpoints are `['aa', 'bb', 'cc', 'dd']` then `<b-col>` will now have `bb`, `cc`, and `dd`
33-
props instead of `sm`, `md`, `lg` and `xl` props (Similar for the `label-cols-{breakpoint}` and
34-
`label-align-{breakpoint}`props on `<b-form-group>`):
95+
props instead of `sm`, `md`, `lg` and `xl` props (similar for the `label-cols-{breakpoint}` and
96+
`label-align-{breakpoint}` props on `<b-form-group>`):
3597

3698
```js
3799
import BootstrapVue from 'bootstrap-vue'
100+
38101
Vue.use(BootstrapVue, {
39102
breakpoints: [`xs`, 'sm', 'md', 'lg', 'xl', 'xxl']
40103
})
@@ -44,6 +107,7 @@ Or if changing the default variants for `<b-button>` and `<b-alert>`:
44107

45108
```js
46109
import BootstrapVue from 'bootstrap-vue'
110+
47111
Vue.use(BootstrapVue, {
48112
BAlert: { variant: 'danger' },
49113
BButton: { variant: 'primary' }
@@ -72,7 +136,6 @@ and subsequent changes to the breakpoints will **not** be reflected.
72136
<!-- eslint-disable import/first, import/no-duplicates -->
73137

74138
```js
75-
// Component group plugins
76139
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
77140

78141
// Supply configs via each plugin as it is `Vue.use()`'d
@@ -86,7 +149,6 @@ Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })
86149
<!-- eslint-disable import/first, import/no-duplicates -->
87150

88151
```js
89-
// Component group plugins
90152
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
91153

92154
// Supply complete config to first `Vue.use()`'d plugin
@@ -104,7 +166,6 @@ Vue.use(ButtonPlugin)
104166
<!-- eslint-disable import/first, import/no-duplicates -->
105167

106168
```js
107-
// BootstrapVue configuration helper plugin and Component group plugins
108169
import { BVConfigPlugin, LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue'
109170

110171
// Supply complete config to the BVConfigPlugin helper plugin
@@ -125,7 +186,6 @@ Vue.use(ButtonPlugin)
125186
<!-- eslint-disable import/first, import/no-duplicates -->
126187

127188
```js
128-
// Import BootstrapVue configuration helper plugin and Individual components
129189
import { BVConfigPlugin, BAlert, BButton, BRow, BCol } from 'bootstrap-vue'
130190

131191
// Supply complete config to the BVConfig helper plugin
@@ -161,12 +221,12 @@ in **Example 3** and **Example 4** above. The `BVConfigPlugin` plugin should be
161221
entry point of your app, and **before** any `Vue.use()` of component plugins or `Vue.component()` or
162222
individual components.
163223

164-
### Setting the config via Nuxt.js BootstrapVue plugin
224+
### Setting the config via Nuxt.js module
165225

166-
Refer to the [Getting Started](/docs/#nuxtjs-plugin-module) documentation for information on passing
167-
the config object to the Nuxt.js plugin module.
226+
Refer to the [Getting Started](/docs/#nuxtjs-module) documentation for information on passing the
227+
config object to the BootstrapVue Nuxt.js module.
168228

169-
## Disabling BootstrapVue console warnings
229+
## Disabling console warnings
170230

171231
BootstrapVue will warn (via `console.warn()`) when you try and use a deprecated prop, or pass an
172232
invalid value to certain props. These warnings are provided to help you ensure that your application

‎docs/pages/docs/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
bootstrapVersion,
99
bootstrapVersionMajor,
1010
bootstrapVersionMinor,
11-
defaultConfig,
1211
nuxtVersion,
1312
nuxtVersionMajor,
1413
nuxtVersionMinor,
@@ -45,7 +44,6 @@ export default {
4544
bootstrapVersionMinor,
4645
bootstrapVersionMajor,
4746
bootstrapIconsCount,
48-
defaultConfig,
4947
nuxtVersion,
5048
nuxtVersionMinor,
5149
nuxtVersionMajor,

‎docs/pages/docs/reference/_slug.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import hljs from '~/utils/hljs'
21
import MainDocs from '~/components/main-docs'
32
import docsMixin from '~/plugins/docs-mixin'
4-
import { reference as referenceMeta, defaultConfig } from '~/content'
3+
import { reference as referenceMeta } from '~/content'
54

65
const getReadmeData = name => {
76
try {
@@ -11,8 +10,6 @@ const getReadmeData = name => {
1110
}
1211
}
1312

14-
const replacer = (key, value) => (typeof value === 'undefined' ? null : value)
15-
1613
// @vue/component
1714
export default {
1815
name: 'BDVReference',
@@ -25,11 +22,8 @@ export default {
2522
const name = params.slug
2623
const meta = referenceMeta[name]
2724
const readmeData = (await getReadmeData(name)).default
28-
let { titleLead = '', body = '', baseTOC = {}, loadError = false } = readmeData
29-
body = body.replace(
30-
'{{ defaultConfig }}',
31-
hljs.highlight('json', JSON.stringify(defaultConfig || {}, replacer, 2)).value
32-
)
25+
const { titleLead = '', body = '', baseTOC = {}, loadError = false } = readmeData
26+
3327
return { meta, titleLead, body, baseTOC, loadError }
3428
},
3529
render(h) {

‎src/components/alert/alert.js

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Vue from '../../vue'
22
import { NAME_ALERT } from '../../constants/components'
3-
import { getComponentConfig } from '../../utils/config'
3+
import { makePropsConfigurable } from '../../utils/config'
44
import { requestAF } from '../../utils/dom'
55
import { isBoolean, isNumeric } from '../../utils/inspect'
66
import { toInteger } from '../../utils/number'
@@ -37,28 +37,31 @@ export const BAlert = /*#__PURE__*/ Vue.extend({
3737
prop: 'show',
3838
event: 'input'
3939
},
40-
props: {
41-
variant: {
42-
type: String,
43-
default: () => getComponentConfig(NAME_ALERT, 'variant')
44-
},
45-
dismissible: {
46-
type: Boolean,
47-
default: false
48-
},
49-
dismissLabel: {
50-
type: String,
51-
default: () => getComponentConfig(NAME_ALERT, 'dismissLabel')
52-
},
53-
show: {
54-
type: [Boolean, Number, String],
55-
default: false
40+
props: makePropsConfigurable(
41+
{
42+
variant: {
43+
type: String,
44+
default: 'info'
45+
},
46+
dismissible: {
47+
type: Boolean,
48+
default: false
49+
},
50+
dismissLabel: {
51+
type: String,
52+
default: 'Close'
53+
},
54+
show: {
55+
type: [Boolean, Number, String],
56+
default: false
57+
},
58+
fade: {
59+
type: Boolean,
60+
default: false
61+
}
5662
},
57-
fade: {
58-
type: Boolean,
59-
default: false
60-
}
61-
},
63+
NAME_ALERT
64+
),
6265
data() {
6366
return {
6467
countDown: 0,

‎src/components/aspect/aspect.js

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Vue from '../../vue'
22
import { NAME_ASPECT } from '../../constants/components'
33
import { RX_ASPECT, RX_ASPECT_SEPARATOR } from '../../constants/regex'
4+
import { makePropsConfigurable } from '../../utils/config'
45
import { mathAbs } from '../../utils/math'
56
import { toFloat } from '../../utils/number'
67
import normalizeSlotMixin from '../../mixins/normalize-slot'
@@ -12,18 +13,21 @@ const CLASS_NAME = 'b-aspect'
1213
export const BAspect = /*#__PURE__*/ Vue.extend({
1314
name: NAME_ASPECT,
1415
mixins: [normalizeSlotMixin],
15-
props: {
16-
aspect: {
17-
// Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
18-
// Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
19-
type: [Number, String],
20-
default: '1:1'
16+
props: makePropsConfigurable(
17+
{
18+
aspect: {
19+
// Accepts a number (i.e. `16 / 9`, `1`, `4 / 3`)
20+
// Or a string (i.e. '16/9', '16:9', '4:3' '1:1')
21+
type: [Number, String],
22+
default: '1:1'
23+
},
24+
tag: {
25+
type: String,
26+
default: 'div'
27+
}
2128
},
22-
tag: {
23-
type: String,
24-
default: 'div'
25-
}
26-
},
29+
NAME_ASPECT
30+
),
2731
computed: {
2832
padding() {
2933
const aspect = this.aspect

0 commit comments

Comments
 (0)
0