From 4aeef50883b8b59a9767a92d546df1b953943cca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Fri, 11 Oct 2019 23:22:32 +0200 Subject: [PATCH 01/77] chore: prettify and correct typos (#4239) --- CHANGELOG.md | 12 ++++++------ docs/markdown/intro/README.md | 2 +- docs/markdown/reference/theming/README.md | 8 ++++---- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef8ee6bc4e2..f49a764018a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -48,15 +48,15 @@ Released: 2019-10-05 - **b-form-file:** fix prop type checking for `value` prop ([#4168](https://github.com/bootstrap-vue/bootstrap-vue/issues/4168)) ([a8e2e56](https://github.com/bootstrap-vue/bootstrap-vue/commit/a8e2e56)) -- **b-nav-item-dropdown:** focus-out handling when new focus comes from another `dropdown-toggle` (closes - [#4113](https://github.com/bootstrap-vue/bootstrap-vue/issues/4113)) +- **b-nav-item-dropdown:** focus-out handling when new focus comes from another `dropdown-toggle` + (closes [#4113](https://github.com/bootstrap-vue/bootstrap-vue/issues/4113)) ([#4139](https://github.com/bootstrap-vue/bootstrap-vue/issues/4139)) ([9c37875](https://github.com/bootstrap-vue/bootstrap-vue/commit/9c37875)) - **b-table:** minor code optimizations to filter debouncing ([#4167](https://github.com/bootstrap-vue/bootstrap-vue/issues/4167)) ([018eef1](https://github.com/bootstrap-vue/bootstrap-vue/commit/018eef1)) -- **b-table, b-table-lite, b-table-simple:** disable sticky header max-height on printers / print media - ([#4147](https://github.com/bootstrap-vue/bootstrap-vue/issues/4147)) +- **b-table, b-table-lite, b-table-simple:** disable sticky header max-height on printers / print + media ([#4147](https://github.com/bootstrap-vue/bootstrap-vue/issues/4147)) ([24c62c5](https://github.com/bootstrap-vue/bootstrap-vue/commit/24c62c5)) - **b-tooltip, b-popover:** add `SVGElement` as acceptable prop type (closes [#4173](https://github.com/bootstrap-vue/bootstrap-vue/issues/4173)) @@ -86,8 +86,8 @@ Released: 2019-10-05 [#3647](https://github.com/bootstrap-vue/bootstrap-vue/issues/3647)) ([#4161](https://github.com/bootstrap-vue/bootstrap-vue/issues/4161)) ([fdd2a83](https://github.com/bootstrap-vue/bootstrap-vue/commit/fdd2a83)) -- add quick links (page table of contents) to docs pages for small screens, and add table of contents to - section index pages (instead of a redirect to first child page) +- add quick links (page table of contents) to docs pages for small screens, and add table of + contents to section index pages (instead of a redirect to first child page) ([#4145](https://github.com/bootstrap-vue/bootstrap-vue/issues/4145)) ([22268aa](https://github.com/bootstrap-vue/bootstrap-vue/commit/22268aa)) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index df4ba17bad7..773157aa748 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -179,7 +179,7 @@ module bundlers documentation. **Notes**: - Webpack configuration to load CSS files - ([official guide](https://webpack.js.org/guides/asset-management/#loading-css)). + ([official guide](https://webpack.js.org/guides/asset-management/#loading-css)) - Webpack Loader for SASS/SCSS files ([official guide](https://webpack.js.org/loaders/sass-loader/)) - Parcel CSS ([official guide](https://parceljs.org/css.html)) - Parcel SCSS ([official guide](https://parceljs.org/scss.html)) diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md index 587f7c43da9..452b15c598c 100644 --- a/docs/markdown/reference/theming/README.md +++ b/docs/markdown/reference/theming/README.md @@ -144,13 +144,13 @@ your project, which you can include in your main app `app.vue` file: ``` -The `custom-vars.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's SCSS, -will include your Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, breakpoints, -etc). +The `custom-vars.scss` file, which needs to be loaded before Bootstrap's SCSS and BootstrapVue's +SCSS, will include your Bootstrap v4 variable overrides (i.e. colors, shadows, font sizes, +breakpoints, etc). **Via app main entry point:** -Create an SCSS file with your custom theme variables which also impoerts Bootstrap and BootstrapVue's +Create an SCSS file with your custom theme variables which also imports Bootstrap and BootstrapVue's SCSS: ```scss From 677480035f34ee735d0aa3ac98323aea2cbad732 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Fri, 11 Oct 2019 18:31:35 -0300 Subject: [PATCH 02/77] fix(b-nav-form, b-nav-text): ensure these sub-components have `
  • ` as root element for accessibility (#4100) --- src/components/nav/README.md | 45 ++++++++++++++++++++ src/components/nav/nav-form.js | 27 ++++++++++-- src/components/nav/nav-form.spec.js | 65 +++++++++++++++++++++++++++-- src/components/nav/nav-text.js | 9 +--- src/components/nav/nav-text.spec.js | 17 +------- src/components/navbar/README.md | 13 +++--- 6 files changed, 142 insertions(+), 34 deletions(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index ed233b193ea..2e446b254a2 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -23,6 +23,13 @@ types of navigation components. It includes some style overrides (for working wi padding for larger hit areas, and basic disabled styling. No active states are included in the base nav. +`` supports teh following child components: + +- `` for actionable links (or router-links) +- `` for dropdowns +- `` for plain text content +- `` for inline forms + ## Link appearance Two style variations are supported: `tabs` and `pills`, which support `active` state styling. These @@ -215,6 +222,44 @@ shown. When there are a large number of dropdowns rendered on the same page, per impacted due to larger overall memory utilization. You can instruct `` to render the menu contents only when it is shown by setting the `lazy` prop to true. +## Nav text content + +Use the `` child component to place plain text content into the nav: + +```html +
    + + Link 1 + Link 2 + Plain text + +
    + + +``` + +## Nav inline forms + +Use the `` child component to place an _inline_ form into the nav: + +```html +
    + + Link 1 + Link 2 + + + Ok + + +
    + + +``` + +Refer to the [`` inline](/docs/components/form#inline-form) documentation for additional +details on placing form controls. + ## Tabbed local content support See the [``](/docs/components/tabs) component for creating tabbable panes of local content diff --git a/src/components/nav/nav-form.js b/src/components/nav/nav-form.js index 8f1b2814d65..045d03891c6 100644 --- a/src/components/nav/nav-form.js +++ b/src/components/nav/nav-form.js @@ -3,14 +3,35 @@ import { mergeData } from 'vue-functional-data-merge' import { omit } from '../../utils/object' import { BForm, props as BFormProps } from '../form/form' -export const props = omit(BFormProps, ['inline']) +export const props = { + ...omit(BFormProps, ['inline']), + formClass: { + type: [String, Array, Object], + default: null + } +} // @vue/component export const BNavForm = /*#__PURE__*/ Vue.extend({ name: 'BNavForm', functional: true, props, - render(h, { props, data, children }) { - return h(BForm, mergeData(data, { props: { ...props, inline: true } }), children) + render(h, { props, data, children, listeners = {} }) { + const attrs = data.attrs + // The following data properties are cleared out + // as they will be passed to BForm directly + data.attrs = {} + data.on = {} + const $form = h( + BForm, + { + class: props.formClass, + props: { ...props, inline: true }, + attrs, + on: listeners + }, + children + ) + return h('li', mergeData(data, { staticClass: 'form-inline' }), [$form]) } }) diff --git a/src/components/nav/nav-form.spec.js b/src/components/nav/nav-form.spec.js index d582f6e293b..bedb03b289f 100644 --- a/src/components/nav/nav-form.spec.js +++ b/src/components/nav/nav-form.spec.js @@ -5,9 +5,14 @@ describe('nav > nav-form', () => { it('has expected default structure', async () => { const wrapper = mount(BNavForm) - expect(wrapper.is('form')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('form-inline') expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.classes().length).toBe(1) expect(wrapper.text()).toEqual('') }) @@ -18,9 +23,63 @@ describe('nav > nav-form', () => { } }) - expect(wrapper.is('form')).toBe(true) + expect(wrapper.is('li')).toBe(true) + expect(wrapper.classes()).toContain('form-inline') + expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + }) + + it('applies ID to form when prop ID is set', async () => { + const wrapper = mount(BNavForm, { + propsData: { + id: 'baz' + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('li')).toBe(true) + expect(wrapper.classes()).toContain('form-inline') + expect(wrapper.classes().length).toBe(1) + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + expect($form.attributes('id')).toEqual('baz') + }) + + it('listeners are bound to form element', async () => { + const onSubmit = jest.fn() + const wrapper = mount(BNavForm, { + propsData: { + id: 'baz' + }, + listeners: { + submit: onSubmit + }, + slots: { + default: 'foobar' + } + }) + + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('form-inline') expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('foobar') + + const $form = wrapper.find('form') + expect($form.exists()).toBe(true) + expect($form.classes()).toContain('form-inline') + expect($form.text()).toEqual('foobar') + + expect(onSubmit).not.toHaveBeenCalled() + + $form.trigger('submit') + expect(onSubmit).toHaveBeenCalled() }) }) diff --git a/src/components/nav/nav-text.js b/src/components/nav/nav-text.js index 5882c482d48..f75aae55aff 100644 --- a/src/components/nav/nav-text.js +++ b/src/components/nav/nav-text.js @@ -1,12 +1,7 @@ import Vue from '../../utils/vue' import { mergeData } from 'vue-functional-data-merge' -export const props = { - tag: { - type: String, - default: 'span' - } -} +export const props = {} // @vue/component export const BNavText = /*#__PURE__*/ Vue.extend({ @@ -14,6 +9,6 @@ export const BNavText = /*#__PURE__*/ Vue.extend({ functional: true, props, render(h, { props, data, children }) { - return h(props.tag, mergeData(data, { staticClass: 'navbar-text' }), children) + return h('li', mergeData(data, { staticClass: 'navbar-text' }), children) } }) diff --git a/src/components/nav/nav-text.spec.js b/src/components/nav/nav-text.spec.js index 576a2a79ff8..ccb916bc5e2 100644 --- a/src/components/nav/nav-text.spec.js +++ b/src/components/nav/nav-text.spec.js @@ -5,20 +5,7 @@ describe('nav > nav-text', () => { it('has expected default structure', async () => { const wrapper = mount(BNavText) - expect(wrapper.is('span')).toBe(true) - expect(wrapper.classes()).toContain('navbar-text') - expect(wrapper.classes().length).toBe(1) - expect(wrapper.text()).toEqual('') - }) - - it('renders custom root element when prop tag is set', async () => { - const wrapper = mount(BNavText, { - propsData: { - tag: 'div' - } - }) - - expect(wrapper.is('div')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('navbar-text') expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toEqual('') @@ -31,7 +18,7 @@ describe('nav > nav-text', () => { } }) - expect(wrapper.is('span')).toBe(true) + expect(wrapper.is('li')).toBe(true) expect(wrapper.classes()).toContain('navbar-text') expect(wrapper.classes().length).toBe(1) expect(wrapper.text()).toEqual('foobar') diff --git a/src/components/navbar/README.md b/src/components/navbar/README.md index f45f0f9faad..1693244e73d 100644 --- a/src/components/navbar/README.md +++ b/src/components/navbar/README.md @@ -80,13 +80,14 @@ Navbars come with built-in support for a handful of sub-components. Choose from needed: - `` for your company, product, or project name. -- `` for a full-height and lightweight navigation (including support for dropdowns). -- `` for link (and router-link) action items -- `` for navbar dropdown menus -- `` for adding vertically centered strings of text. -- `` for any form controls and actions. - `` for use with the `` component. - `` for grouping and hiding navbar contents by a parent breakpoint. +- `` for a full-height and lightweight navigation (including support for dropdowns). + The following sub-components inside `` are supported: + - `` for link (and router-link) action items + - `` for nav dropdown menus + - `` for adding vertically centered strings of text. + - `` for any form controls and actions. ### `` @@ -153,7 +154,7 @@ Navbar navigation links build on the `` parent component and requi navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned. -`` supports the following components: +`` supports the following child components: - `` for link (and router-link) action items - `` for adding vertically centered strings of text. From 0224bd93ad04c7cc67df44d14f6f66c648675453 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Sat, 12 Oct 2019 01:15:27 -0300 Subject: [PATCH 03/77] core(docs): fix broken link in table docs --- src/components/table/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/table/README.md b/src/components/table/README.md index 48b5935068f..c15172bf752 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -242,7 +242,7 @@ The following field properties are recognized: | `class` | String or Array | Class name (or array of class names) to add to `` **and** `` in the column. | | `formatter` | String or Function | A formatter callback function or name of a method in your component, can be used instead of (or in conjunction with) scoped field slots. The formatter will be called with the syntax `formatter(value, key, item)`. Refer to [Custom Data Rendering](#custom-data-rendering) for more details. | | `sortable` | Boolean | Enable sorting on this column. Refer to the [Sorting](#sorting) Section for more details. | -| `sortDirection` | String | Set the initial sort direction on this column when it becomes sorted. Refer to the [Change initial sort direction](#Change-initial-sort-direction) Section for more details. | +| `sortDirection` | String | Set the initial sort direction on this column when it becomes sorted. Refer to the [Change initial sort direction](#change-initial-sort-direction) Section for more details. | | `sortByFormatted` | Boolean or Function | Sort the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value for sorting purposes only. Refer to the [Sorting](#sorting) Section for more details. | | `filterByFormatted` | Boolean or Function | Filter the column by the result of the field's `formatter` callback function when set to `true`. Default is `false`. Boolean has no effect if the field does not have a `formatter`. Optionally accepts a formatter function _reference_ to format the value for filtering purposes only. Refer to the [Filtering](#filtering) section for more details. | | `tdClass` | String or Array or Function | Class name (or array of class names) to add to `` data `` cells in the column. If custom classes per cell are required, a callback function can be specified instead. The function will be called as `tdClass(value, key, item)` and it must return an `Array` or `String`. | From e558acc8d5c48e772a8db7d19ed869ab8b6bf22c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 14 Oct 2019 16:30:45 +0200 Subject: [PATCH 04/77] chore(deps): update all non-major dependencies (#4241) --- package.json | 4 ++-- yarn.lock | 20 ++++++++++---------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 62f61672623..594f7a75d32 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "@nuxtjs/google-analytics": "^2.2.0", "@nuxtjs/pwa": "^3.0.0-beta.19", "@vue/test-utils": "^1.0.0-beta.29", - "autoprefixer": "^9.6.4", + "autoprefixer": "^9.6.5", "babel-core": "^7.0.0-bridge.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", @@ -104,7 +104,7 @@ "eslint-config-standard": "^14.1.0", "eslint-config-vue": "^2.0.2", "eslint-plugin-import": "^2.18.2", - "eslint-plugin-jest": "^22.17.0", + "eslint-plugin-jest": "^22.19.0", "eslint-plugin-markdown": "^1.0.0", "eslint-plugin-node": "^10.0.0", "eslint-plugin-prettier": "^3.1.1", diff --git a/yarn.lock b/yarn.lock index f2ef5b0d7a1..00d836d3626 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2211,13 +2211,13 @@ autoprefixer@^9.6.1: postcss "^7.0.17" postcss-value-parser "^4.0.0" -autoprefixer@^9.6.4: - version "9.6.4" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.4.tgz#e6453be47af316b2923eaeaed87860f52ad4b7eb" - integrity sha512-Koz2cJU9dKOxG8P1f8uVaBntOv9lP4yz9ffWvWaicv9gHBPhpQB22nGijwd8gqW9CNT+UdkbQOQNLVI8jN1ZfQ== +autoprefixer@^9.6.5: + version "9.6.5" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.5.tgz#98f4afe7e93cccf323287515d426019619775e5e" + integrity sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g== dependencies: browserslist "^4.7.0" - caniuse-lite "^1.0.30000998" + caniuse-lite "^1.0.30000999" chalk "^2.4.2" normalize-range "^0.1.2" num2fraction "^1.2.2" @@ -2966,7 +2966,7 @@ caniuse-lite@^1.0.30000984: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000989.tgz#b9193e293ccf7e4426c5245134b8f2a56c0ac4b9" integrity sha512-vrMcvSuMz16YY6GSVZ0dWDTJP8jqk3iFQ/Aq5iqblPwxSVVZI+zxDyTX0VPqtQsDnfdrBDcsmhgTEOh5R8Lbpw== -caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30000998: +caniuse-lite@^1.0.30000989: version "1.0.30000998" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000998.tgz#7227a8046841e7d01e156ae7227a504d065f6744" integrity sha512-8Tj5sPZR9kMHeDD9SZXIVr5m9ofufLLCG2Y4QwQrH18GIwG+kCc+zYdlR036ZRkuKjVVetyxeAgGA1xF7XdmzQ== @@ -4734,10 +4734,10 @@ eslint-plugin-import@^2.18.2: read-pkg-up "^2.0.0" resolve "^1.11.0" -eslint-plugin-jest@^22.17.0: - version "22.17.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.17.0.tgz#dc170ec8369cd1bff9c5dd8589344e3f73c88cf6" - integrity sha512-WT4DP4RoGBhIQjv+5D0FM20fAdAUstfYAf/mkufLNTojsfgzc5/IYW22cIg/Q4QBavAZsROQlqppiWDpFZDS8Q== +eslint-plugin-jest@^22.19.0: + version "22.19.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-22.19.0.tgz#0cf90946a8c927d40a2c64458c89bb635d0f2a0b" + integrity sha512-4zUc3rh36ds0SXdl2LywT4YWA3zRe8sfLhz8bPp8qQPIKvynTTkNGwmSCMpl5d9QiZE2JxSinGF+WD8yU+O0Lg== dependencies: "@typescript-eslint/experimental-utils" "^1.13.0" From 694dad722837aa3df5aa2679b87cccb73da8c455 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 14 Oct 2019 17:12:29 +0200 Subject: [PATCH 05/77] docs: correct typo (#4252) --- src/components/nav/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 2e446b254a2..379dcc6deb2 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -23,7 +23,7 @@ types of navigation components. It includes some style overrides (for working wi padding for larger hit areas, and basic disabled styling. No active states are included in the base nav. -`` supports teh following child components: +`` supports the following child components: - `` for actionable links (or router-links) - `` for dropdowns From d4932982f56fd98eddce2b0cb59d4e5cdee91838 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Mon, 14 Oct 2019 19:43:49 -0300 Subject: [PATCH 06/77] chore(docs): add missing table docs for cell scope property `fields` (#4246) --- docs/components/componentdoc.vue | 68 ++++++++++++++++++++++++++----- src/components/table/README.md | 1 + src/components/table/package.json | 52 +++++++++++++++-------- 3 files changed, 94 insertions(+), 27 deletions(-) diff --git a/docs/components/componentdoc.vue b/docs/components/componentdoc.vue index f4185d05b7e..552b4eaa177 100644 --- a/docs/components/componentdoc.vue +++ b/docs/components/componentdoc.vue @@ -3,7 +3,7 @@ - {{ tag }} + {{ tag }} + +
    - + Component aliases

    {{ tag }} can also be used via the following aliases:

    @@ -40,7 +74,7 @@
    - + Properties
    - + v-model
    - + Slots -