From 8486a4dfc114da66abd6ee9c2b25d0d20d69fca6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Tue, 13 Aug 2019 12:18:03 +0200 Subject: [PATCH 1/3] feat(docs): remove new/enhances bages --- docs/markdown/intro/README.md | 57 +------ docs/markdown/misc/settings/README.md | 6 - .../reference/accessibility/meta.json | 3 +- docs/markdown/reference/images/README.md | 5 +- .../reference/starter-templates/README.md | 20 --- src/components/button/README.md | 4 - src/components/dropdown/README.md | 15 +- src/components/form-checkbox/README.md | 6 - src/components/form-checkbox/package.json | 1 - src/components/form-file/README.md | 4 - src/components/form-file/package.json | 1 - src/components/form-input/README.md | 2 - src/components/form-radio/README.md | 4 - src/components/form-radio/package.json | 1 - src/components/form-select/README.md | 2 - src/components/form-textarea/README.md | 2 - src/components/input-group/README.md | 4 - src/components/input-group/package.json | 1 - src/components/modal/README.md | 19 +-- src/components/modal/package.json | 1 - src/components/nav/README.md | 8 - src/components/nav/package.json | 1 - src/components/popover/README.md | 2 - src/components/popover/package.json | 1 - src/components/table/README.md | 143 +++++++----------- src/components/table/package.json | 1 - src/components/tabs/README.md | 6 - src/components/tabs/package.json | 1 - src/components/tooltip/README.md | 2 - src/components/tooltip/package.json | 1 - src/directives/popover/README.md | 2 - src/directives/popover/package.json | 1 - src/directives/tooltip/README.md | 2 - src/directives/tooltip/package.json | 1 - 34 files changed, 70 insertions(+), 260 deletions(-) diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md index 8152c7283a1..3897c174f52 100644 --- a/docs/markdown/intro/README.md +++ b/docs/markdown/intro/README.md @@ -193,8 +193,6 @@ Guide for full details on setting up aliases for [webpack](https://webpack.js.or ## Tree shaking with module bundlers -SIMPLIFIED in 2.0.0-rc.20 - When using a module bundler you can optionally import only specific components groups (plugins), components and/or directives. @@ -208,8 +206,6 @@ components and/or directives. ### Component groups and directives as Vue plugins -CHANGED in 2.0.0-rc.22 - You can import component groups and directives as Vue plugins by importing from the `bootstrap-vue`: @@ -256,8 +252,6 @@ single `import` statement for optimal tree shaking. ### Individual components and directives -CHANGED in 2.0.0-rc.22 - If you would like to only pull in a specific component or set of components, you can do this by directly importing those components. @@ -304,8 +298,6 @@ object property shorthand (components only). ### Using BootstrapVue source code for smaller bundles -For advanced users - When using module bundlers, they will usually default to using the `esm/` modular build, which has been pre-transpiled by Babel for our [supported browsers](https://github.com/bootstrap-vue/bootstrap-vue/blob/master/.browserslistrc). @@ -439,14 +431,11 @@ import 'custom.scss' ### `transformAssetUrls` with Nuxt.js -NEW in v2.0.0-rc.22 The BootstrapVue Nuxt plugin module -will automatically add in the BootstrapVue specific [`transformAssetUrls`](/docs/reference/images) -image `src` prop configuration for you. +The BootstrapVue Nuxt plugin module will automatically add in the BootstrapVue specific +[`transformAssetUrls`](/docs/reference/images) image `src` prop configuration for you. ### Tree shaking with Nuxt.js -ENHANCED in 2.0.0-rc.20 - If you wish to reduce your production bundle size because you only use a subset of the available BootstrapVue plugins, you can configure the list of BootstrapVue `componentPlugins` or `directivePlugins` you want to globally install in your Nuxt.js project. @@ -469,18 +458,17 @@ module.exports = { } ``` -NEW in 2.0.0-rc.20 There are two additional helper -plugins for providing the `$bvModal` and `$bvToast` injections (if you are not using the -`ModalPlugin` or `ToastPlugin` plugins) that are available in the `componentPlugins` option: +There are two additional helper plugins for providing the `$bvModal` and `$bvToast` injections (if +you are not using the `ModalPlugin` or `ToastPlugin` plugins) that are available in the +`componentPlugins` option: - `BVModalPlugin` - provides the injection `$bvModal` for generating [message boxes](/docs/components/modal#modal-message-boxes). - `BVToastPlugin` - provides the injection `$bvToast` for generating [on demand toasts](/docs/components/toast#toasts-on-demand). -NEW in 2.0.0-rc.20 You can also optionally import -individual components and/or directives, by configuring the list of BootstrapVue `components` or -`directives` you want to globally install in your Nuxt.js project. +You can also optionally import individual components and/or directives, by configuring the list of +BootstrapVue `components` or `directives` you want to globally install in your Nuxt.js project. ```js module.exports = { @@ -540,37 +528,6 @@ pre-transpiled versions, while setting it to `false` will always use `src/`. By `usePretranspiled` is enabled in development mode only. You should not need to use this option as the default is most optimal for performance. -## Vue CLI 2 - -DEPRECATED Use [Vue CLI 3](#vue-cli-3) instead. - -BootstrapVue has two Vue CLI templates available: - -- [webpack-simple](https://github.com/bootstrap-vue/webpack-simple): Quick scaffold for a proof of - concept or small app -- [webpack](https://github.com/bootstrap-vue/webpack): Larger, production ready template with more - options - -```bash -# Ensure Vue CLI is installed and up to date -npm install -g vue-cli - -# Initialize a BootstrapVue project in the directory 'my-project' -vue init bootstrap-vue/webpack-simple my-project - -# Change into the directory -cd my-project - -# Install dependencies -npm install - -# Fire up the dev server with HMR -npm run dev -``` - -You can repeat the commands above replacing `bootstrap-vue/webpack-simple` with -`bootstrap-vue/webpack` for the webpack template. - ## Vue CLI 3 Unlike V2, Vue CLI 3 doesn't use templates. diff --git a/docs/markdown/misc/settings/README.md b/docs/markdown/misc/settings/README.md index c1ac11e655c..b16d3516e39 100644 --- a/docs/markdown/misc/settings/README.md +++ b/docs/markdown/misc/settings/README.md @@ -1,7 +1,5 @@ # Settings -NEW in 2.0.0-rc.16 - > BootstrapVue provides a few options for customizing component default values, and more. ## Configuring defaults @@ -22,16 +20,12 @@ stored under the `formControls` property, while component specific defaults are defined in the default configuration can be overridden. Attempting to set a config property that is not defined in the default will generate a console warning. -The `formControls` entry was introduced in v2.0.0-rc.28. - ```json {{ defaultConfig }} ``` ### Setting new configuration values -ENHANCED in v2.0.0-rc.22 - When you `Vue.use(BootstrapVue)`, you can optionally pass a configuration object which specifies new values to replace the default values. For example if you wish to define new breakpoint names (which will generate appropriate properties on components such as `` and ``), so that diff --git a/docs/markdown/reference/accessibility/meta.json b/docs/markdown/reference/accessibility/meta.json index e23077b4310..e05bdb6e578 100644 --- a/docs/markdown/reference/accessibility/meta.json +++ b/docs/markdown/reference/accessibility/meta.json @@ -1,5 +1,4 @@ { "title": "Accessibility", - "description": "A brief overview of BootstrapVue's features and limitations for the creation of accessible content.", - "new": true + "description": "A brief overview of BootstrapVue's features and limitations for the creation of accessible content." } diff --git a/docs/markdown/reference/images/README.md b/docs/markdown/reference/images/README.md index 55213a422c4..5472cfaacf1 100644 --- a/docs/markdown/reference/images/README.md +++ b/docs/markdown/reference/images/README.md @@ -117,9 +117,8 @@ module.exports = { } ``` -NEW in v2.0.0-rc.22 If using the -[BootstrapVue Nuxt](/docs#nuxtjs-module) module with Nuxt.js, the plugin module will automatically -add in the BootstrapVue specific `transformAssetUrls` configuration for you. +If using the [BootstrapVue Nuxt](/docs#nuxtjs-module) module with Nuxt.js, the plugin module will +automatically add in the BootstrapVue specific `transformAssetUrls` configuration for you. ## Using `require` to resolve image paths diff --git a/docs/markdown/reference/starter-templates/README.md b/docs/markdown/reference/starter-templates/README.md index cf7217a6b58..25afc1ba153 100644 --- a/docs/markdown/reference/starter-templates/README.md +++ b/docs/markdown/reference/starter-templates/README.md @@ -81,26 +81,6 @@ tags to load the required JavaScript and CSS in your page. ``` -## Vue CLI 2 - -DEPRECATED - -### `webpack-simple` example - -Starter template: https://github.com/bootstrap-vue/webpack-simple - -Note: you may need to adjust the template package.json file to use the latest BootstrapVue version - -Coming soon! - -### `webpack` example - -Starter template: https://github.com/bootstrap-vue/webpack - -Note: you may need to adjust the template package.json file to use the latest BootstrapVue version - -Coming soon! - ## Vue CLI 3 Vue CLI 3 is the newest way to create Vue apps. diff --git a/src/components/button/README.md b/src/components/button/README.md index 999266fa55e..289d871b06b 100644 --- a/src/components/button/README.md +++ b/src/components/button/README.md @@ -131,8 +131,6 @@ prop. ## Pill style -NEW in 2.0.0-rc.20 - Prefer buttons with a more rounded-pill style? Just set the prop `pill` to true. ```html @@ -152,8 +150,6 @@ This prop adds the Bootstrap v4.3 utility class `.rounded-pill` on the rendered ## Squared style -NEW in 2.0.0-rc.22 - Prefer buttons with a more square corner style? Just set the prop `squared` to true. ```html diff --git a/src/components/dropdown/README.md b/src/components/dropdown/README.md index a40dbb4d7ff..0c6acd40b41 100644 --- a/src/components/dropdown/README.md +++ b/src/components/dropdown/README.md @@ -199,8 +199,6 @@ router link `to` value via the `split-to` prop, while maintaining the look of a ### Split button type -NEW in 2.0.0-rc.27 - The split button defaults to a button `type` of `'button'`. You can specify an alternate type via the `split-button-type` prop. Supported values are: `'button'`, `'submit'` and `'reset'`. @@ -337,8 +335,6 @@ to `true`. This is useful when the dropdown is to be displayed as an icon. ## Lazy dropdown -NEW in 2.0.0-rc.26 - By default, `` renders the menu contents in the DOM even when the menu is not shown. When there are a large number of dropdowns rendered on the same page, performance could be impacted due to larger overall memory utilization. You can instruct `` to render the menu @@ -592,8 +588,6 @@ the full list of events. ## Optionally scoped default slot -NEW in 2.0.0-rc.20 - The default slot is optionally scoped with the following scope available: | Property or Method | Description | @@ -656,11 +650,10 @@ form controls within the menu. ## Implementation notes -NEW in 2.0.0-rc.19 The dropdown menu is rendered with -semantic `
    ` and `
  • ` elements for accessibility reasons. The `.dropdown-menu` is the `
      ` -element, while dropdown items (items, buttons, text, form, headers, and dividers) are wrapped in an -`
    • ` element. If creating custom items to place inside the dropdown menu, ensure they are wrapped -with a plain `
    • `. +The dropdown menu is rendered with semantic `
        ` and `
      • ` elements for accessibility reasons. +The `.dropdown-menu` is the `
          ` element, while dropdown items (items, buttons, text, form, +headers, and dividers) are wrapped in an `
        • ` element. If creating custom items to place inside +the dropdown menu, ensure they are wrapped with a plain `
        • `. On touch-enabled devices, opening a `` adds empty (noop) `mouseover` handlers to the immediate children of the `` element. This admittedly ugly hack is necessary to work around a diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md index df77732589e..e0cdc3724c3 100644 --- a/src/components/form-checkbox/README.md +++ b/src/components/form-checkbox/README.md @@ -169,8 +169,6 @@ or if using individual checkboxes not inside a ``, set th ## Control sizing -NEW in 2.0.0-rc.28 - Use the `size` prop to control the size of the checkbox. The default size is medium. Supported size values are `sm` (small) and `lg` (large). @@ -406,8 +404,6 @@ Render groups of checkboxes with the look of a switches by setting the prop `swi ### Switch sizing -NEW in 2.0.0-rc.28 - Use the `size` prop to control the size of the switch. The default size is medium. Supported size values are `sm` (small) and `lg` (large). @@ -547,8 +543,6 @@ the group. ## Autofocus -NEW in 2.0.0-rc.21 - When the `autofocus` prop is set on ``, the input will be auto-focused when it is inserted into the document, or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the input. diff --git a/src/components/form-checkbox/package.json b/src/components/form-checkbox/package.json index 489cc0678b1..78fee753a87 100644 --- a/src/components/form-checkbox/package.json +++ b/src/components/form-checkbox/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Form Checkbox", - "enhanced": true, "description": "Custom checkbox input and checkbox group to replace the browser default checkbox input, built on top of semantic and accessible markup. Optionally supports switch styling.", "components": [ { diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index 7bfdb166f35..d913ce147b4 100644 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -106,8 +106,6 @@ customizing its appearance. ### Control sizing -NEW in 2.0.0-rc.28 - Use the `size` prop to control the visual size of the input. The default size is considered `md` (medium). Optional sizes are `lg` (large) and `sm` (small). These sizes line up with the sizes available on other form controls. @@ -237,8 +235,6 @@ To apply one of the contextual state icons on `NEW in 2.0.0-rc.21 - When the `autofocus` prop is set on ``, the input will be auto-focused when it is inserted into the document or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the input. diff --git a/src/components/form-file/package.json b/src/components/form-file/package.json index 2783daa42d4..760895bd0d3 100644 --- a/src/components/form-file/package.json +++ b/src/components/form-file/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Form File", - "enhanced": true, "description": "Customized, cross-browser consistent, file input control that supports single file, multiple files, and directory upload.", "components": [ { diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md index 44b1e1b003c..e8487c79acb 100644 --- a/src/components/form-input/README.md +++ b/src/components/form-input/README.md @@ -482,8 +482,6 @@ Emulation of the `.lazy` modifier is _not_ supported (listen for `change` or `bl ## Autofocus -NEW in 2.0.0-rc.21 - When the `autofocus` prop is set, the input will be auto-focused when it is inserted into the document, or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the input. diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md index 823cd89724c..d2d069324aa 100644 --- a/src/components/form-radio/README.md +++ b/src/components/form-radio/README.md @@ -195,8 +195,6 @@ render them inline. ## Control sizing -NEW in 2.0.0-rc.28 - Use the `size` prop to control the size of the radio. The default size is medium. Supported size values are `sm` (small) and `lg` (large). @@ -350,8 +348,6 @@ group. ## Autofocus -NEW in 2.0.0-rc.21 - When the `autofocus` prop is set on ``, the input will be auto-focused when it is inserted into the document or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the input. diff --git a/src/components/form-radio/package.json b/src/components/form-radio/package.json index 6248cfa8571..d38e2bcb4bc 100644 --- a/src/components/form-radio/package.json +++ b/src/components/form-radio/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Form Radio", - "enhanced": true, "description": "Cross browser consistent radio inputs and radio groups, using Bootstrap's custom radio input to replace the browser default radio input.", "components": [ { diff --git a/src/components/form-select/README.md b/src/components/form-select/README.md index f204fce7c01..77ecdbfb679 100644 --- a/src/components/form-select/README.md +++ b/src/components/form-select/README.md @@ -373,8 +373,6 @@ control the select width, place the input inside standard Bootstrap grid column. ## Autofocus -NEW in 2.0.0-rc.21 - When the `autofocus` prop is set on ``, the select will be auto-focused when it is inserted into the document or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the select. diff --git a/src/components/form-textarea/README.md b/src/components/form-textarea/README.md index b08afdf117d..ac82fbdba70 100644 --- a/src/components/form-textarea/README.md +++ b/src/components/form-textarea/README.md @@ -299,8 +299,6 @@ Emulation of the `.lazy` modifier is _not_ supported (listen for `change` or `bl ## Autofocus -NEW in 2.0.0-rc.21 - When the `autofocus` prop is set, the textarea will be auto-focused when it is inserted into the document, or re-activated when inside a Vue `` component. Note that this prop **does not** set the `autofocus` attribute on the textarea. diff --git a/src/components/input-group/README.md b/src/components/input-group/README.md index 8ec5c90339e..05f46662dce 100644 --- a/src/components/input-group/README.md +++ b/src/components/input-group/README.md @@ -151,8 +151,6 @@ classes applied. ### Custom radio, checkbox, and switch addons -NEW in 2.0.0-rc.28 - Using `` and `` components as addons, using Bootstrap [utility classes](/docs/reference/utility-classes) for additional styling to get them to "fit" in the addon: @@ -277,8 +275,6 @@ To control width, place the input inside standard Bootstrap grid column. ### Sizing custom radio, checkbox and switch addons -NEW in 2.0.0-rc.28 - If using `` or `` as addons, additional utility classes may be required to make everything fit correctly, depending on the size chosen: diff --git a/src/components/input-group/package.json b/src/components/input-group/package.json index 883786f0df0..429f193d6dd 100644 --- a/src/components/input-group/package.json +++ b/src/components/input-group/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Input Group", - "enhanced": true, "description": "Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.", "components": [ { diff --git a/src/components/modal/README.md b/src/components/modal/README.md index a1503424b7b..2aadcf156d4 100644 --- a/src/components/modal/README.md +++ b/src/components/modal/README.md @@ -37,11 +37,10 @@ via the `modal-header` slot, and override the footer completely via the `modal-f present. Also, if you use the `modal-header` slot, the default header `X` close button will not be present, nor can you use the `modal-title` slot. -CHANGED in 2.0.0-rc.20 Modals will not render their -content in the document until they are shown (lazily rendered). Modals, when visible, are rendered -**appended to the `` element**. The placement of the `` component will not affect -layout, as it always renders as a placeholder comment node (``). You can revert to the -behaviour of previous BootstrapVue versions via the use of the +Modals will not render their content in the document until they are shown (lazily rendered). Modals, +when visible, are rendered **appended to the `` element**. The placement of the `` +component will not affect layout, as it always renders as a placeholder comment node (``). +You can revert to the behaviour of previous BootstrapVue versions via the use of the [`static` prop](#lazy-loading-and-static-modals). ## Toggle modal visibility @@ -75,8 +74,6 @@ See the [Accessibility](#accessibility) section below for details. ### Using `this.$bvModal.show()` and `this.$bvModal.hide()` instance methods -NEW in 2.0.0-rc.19 - When BootstrapVue is installed as a plugin, or the `ModalPlugin` plugin is used, BoostrapVue will inject a `$bvModal` object into every Vue instance (components, apps). `this.$bvModal` exposes several methods, of which two are for showing and hiding modals: @@ -381,8 +378,6 @@ are appended by specifying a container ID (refer to tooltip and popover docs for ## Lazy loading and static modals -NEW in 2.0.0-rc.20 - By default, modals will not render their content in the document until they are shown (lazily rendered). Modals that, when visible, are rendered appended to the `` element. The `` component will not affect layout, as they render as a placeholder comment node (``) in the @@ -638,8 +633,6 @@ To disable both **Cancel** and **OK** buttons at the same time, simply set the ` ### Custom rendering with slots -ENHANCED in 2.0.0-rc.19 - `` provides several named slots (of which some are optionally scoped) that you can use to customize the content of various sections of the modal. @@ -741,8 +734,6 @@ component. This will hide the modal before another modal is shown. ## Modal message boxes -NEW in 2.0.0-rc.19 - BootstrapVue provides a few built in Message Box methods on the exposed `this.$bvModal` object. These methods provide a way to generate simple OK and Confirm style modal messages, from anywhere in your app without having to explicitly place a `` component in your pages. @@ -948,8 +939,6 @@ emitted. ### ARIA attributes -ENHANCED in 2.0.0-rc.27 - The `aria-labelledby` and `aria-describedby` attributes will appear on the modal automatically in most cases. diff --git a/src/components/modal/package.json b/src/components/modal/package.json index 4b31a94db0f..f19600d1898 100644 --- a/src/components/modal/package.json +++ b/src/components/modal/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Modal", - "enhanced": true, "description": "Modals are streamlined, but flexible dialog prompts powered by JavaScript and CSS. They support a number of use cases from user notification to completely custom content and feature a handful of helpful sub-components, sizes, variants, accessibility, and more.", "plugins": [ "BVModalPlugin" diff --git a/src/components/nav/README.md b/src/components/nav/README.md index 991ffd5915b..09848508703 100644 --- a/src/components/nav/README.md +++ b/src/components/nav/README.md @@ -81,8 +81,6 @@ Make the nav smaller by setting the `small` prop. ## Fill and justify -NEW in 2.0.0-rc19 - Force your `` content to extend the full available width. ### Fill @@ -123,8 +121,6 @@ nav links, but unlike `fill` above, every `` will be the same width. ## Alignment -NEW in 2.0.0-rc19 - To align your `` components, use the `align` prop. Available values are `left`, `center` and `right`. @@ -206,8 +202,6 @@ Refer to [``](/docs/components/dropdown) for a list of supported sub ### Optionally scoped default slot -NEW in 2.0.0-rc.20 - The dropdown default slot is optionally scoped with the following scope available: | Property or Method | Description | @@ -216,8 +210,6 @@ The dropdown default slot is optionally scoped with the following scope availabl ### Lazy dropdown -NEW in 2.0.0-rc.26 - By default, `` renders the menu contents in the DOM even when the menu is not shown. When there are a large number of dropdowns rendered on the same page, performance could be impacted due to larger overall memory utilization. You can instruct `` to diff --git a/src/components/nav/package.json b/src/components/nav/package.json index fa50c379290..8ae50a016aa 100644 --- a/src/components/nav/package.json +++ b/src/components/nav/package.json @@ -3,7 +3,6 @@ "version": "1.0.0", "meta": { "title": "Nav", - "enhanced": true, "description": "Navigation components that share general markup and styles, from the base class to the active and disabled states. Swap modifier props to switch between each style.", "plugins": [ "DropdownPlugin" diff --git a/src/components/popover/README.md b/src/components/popover/README.md index 9571948aea9..f6bf35bc7ee 100644 --- a/src/components/popover/README.md +++ b/src/components/popover/README.md @@ -269,8 +269,6 @@ The special `blur` trigger **must** be used in combination with the `click` trig ### Variants and custom class -NEW in 2.0.0-rc.26 - BootstrapVue's popovers support contextual color variants via our custom CSS, via the `variant` prop: diff --git a/src/components/popover/package.json b/src/components/popover/package.json index 4142de9aa40..ef13ceecd84 100644 --- a/src/components/popover/package.json +++ b/src/components/popover/package.json @@ -4,7 +4,6 @@ "meta": { "title": "Popover", "description": "The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the component or v-b-popover directive", - "enhanced": true, "directives": [ "VBPopover" ], diff --git a/src/components/table/README.md b/src/components/table/README.md index aa5b82ecc0c..9ef25a461e4 100644 --- a/src/components/table/README.md +++ b/src/components/table/README.md @@ -314,25 +314,25 @@ typically be in the order they were defined in the object, although **field orde The following field properties are recognized: -| Property | Type | Description | -| ------------------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `key` | String | The key for selecting data from the record in the items array. Required when setting the `fields` via an array of objects. | -| `label` | String | Appears in the columns table header (and footer if `foot-clone` is set). Defaults to the field's key (in humanized format) if not provided. It's possible to use empty labels by assigning an empty string `""` but be sure you also set `headerTitle` to provide non-sighted users a hint about the column contents. | -| `headerTitle` | String | Text to place on the fields header `` attribute `title`. Defaults to no `title` attribute. | -| `headerAbbr` | String | Text to place on the fields header `` attribute `abbr`. Set this to the unabbreviated version of the label (or title) if label (or title) is an abbreviation. Defaults to no `abbr` attribute. | -| `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. 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. | -| `sortByFormatted` | Boolean | NEW in 2.0.0-rc.28 Sort the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. Refer to the [Sorting](#sorting) Section for more details. | -| `filterByFormatted` | Boolean | NEW in 2.0.0-rc.28 Filter the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. 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. | -| `thClass` | String or Array | Class name (or array of class names) to add to this field's ``/`` heading `` cell. | -| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table ``/`` field ``. | -| `variant` | String | Apply contextual class to all the `` **and** `` in the column - `active`, `success`, `info`, `warning`, `danger`. These variants map to classes `thead-${variant}` (in the header), `table-${variant}` (in the body), or `bg-${variant}` (when the prop `dark` is set). | -| `tdAttr` | Object or Function | JavaScript object representing additional attributes to apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. | -| `isRowHeader` | Boolean | When set to `true`, the field's item data cell will be rendered with `` rather than the default of ``. | -| `stickyColumn` | Boolean | NEW in 2.0.0-rc.28 When set to `true`, and the table in in [responsive](#responsive-tables) mode or has [sticky headers](#sticky-headers), will cause the column to become fixed to the left when the table's horizontal scrollbar is scrolled. See [Sticky columns](#sticky-columns) for more details | +| Property | Type | Description | +| ------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `key` | String | The key for selecting data from the record in the items array. Required when setting the `fields` via an array of objects. | +| `label` | String | Appears in the columns table header (and footer if `foot-clone` is set). Defaults to the field's key (in humanized format) if not provided. It's possible to use empty labels by assigning an empty string `""` but be sure you also set `headerTitle` to provide non-sighted users a hint about the column contents. | +| `headerTitle` | String | Text to place on the fields header `` attribute `title`. Defaults to no `title` attribute. | +| `headerAbbr` | String | Text to place on the fields header `` attribute `abbr`. Set this to the unabbreviated version of the label (or title) if label (or title) is an abbreviation. Defaults to no `abbr` attribute. | +| `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. 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. | +| `sortByFormatted` | Boolean | Sort the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. Refer to the [Sorting](#sorting) Section for more details. | +| `filterByFormatted` | Boolean | Filter the column by the result of the field's `formatter` callback function. Default is `false`. Has no effect if the field does not have a `formatter`. 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. | +| `thClass` | String or Array | Class name (or array of class names) to add to this field's ``/`` heading `` cell. | +| `thStyle` | Object | JavaScript object representing CSS styles you would like to apply to the table ``/`` field ``. | +| `variant` | String | Apply contextual class to all the `` **and** `` in the column - `active`, `success`, `info`, `warning`, `danger`. These variants map to classes `thead-${variant}` (in the header), `table-${variant}` (in the body), or `bg-${variant}` (when the prop `dark` is set). | +| `tdAttr` | Object or Function | JavaScript object representing additional attributes to apply to the `` field `` cell. If custom attributes per cell are required, a callback function can be specified instead. | +| `isRowHeader` | Boolean | When set to `true`, the field's item data cell will be rendered with `` rather than the default of ``. | +| `stickyColumn` | Boolean | When set to `true`, and the table in in [responsive](#responsive-tables) mode or has [sticky headers](#sticky-headers), will cause the column to become fixed to the left when the table's horizontal scrollbar is scrolled. See [Sticky columns](#sticky-columns) for more details | **Notes:** @@ -407,25 +407,25 @@ details. `` provides several props to alter the style of the table: -| prop | Type | Description | -| ------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `striped` | Boolean | Add zebra-striping to the table rows within the `` | -| `bordered` | Boolean | For borders on all sides of the table and cells. | -| `borderless` | Boolean | removes inner borders from table. | -| `outlined` | Boolean | For a thin border on all sides of the table. Has no effect if `bordered` is set. | -| `small` | Boolean | To make tables more compact by cutting cell padding in half. | -| `hover` | Boolean | To enable a hover highlighting state on table rows within a `` | -| `dark` | Boolean | Invert the colors — with light text on dark backgrounds (equivalent to Bootstrap v4 class `.table-dark`) | -| `fixed` | Boolean | Generate a table with equal fixed-width columns (`table-layout: fixed;`) | -| `responsive` | Boolean or String | Generate a responsive table to make it scroll horizontally. Set to `true` for an always responsive table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table responsive (horizontally scroll) only on screens smaller than the breakpoint. See [Responsive tables](#responsive-tables) below for details. | -| `sticky-header` | Boolean or String | NEW in 2.0.0-rc.28 Generates a vertically scrollable table with sticky headers. Set to `true` to enable sticky headers (default table max-height of `300px`), or set it to a string containing a height (with CSS units) to specify a maximum height other than `300px`. See the [Sticky header](#sticky-headers) section below for details. | -| `stacked` | Boolean or String | Generate a responsive stacked table. Set to `true` for an always stacked table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table visually stacked only on screens smaller than the breakpoint. See [Stacked tables](#stacked-tables) below for details. | -| `caption-top` | Boolean | If the table has a caption, and this prop is set to `true`, the caption will be visually placed above the table. If `false` (the default), the caption will be visually placed below the table. | -| `table-variant` | String | NEW in 2.0.0-rc.28 Give the table an overall theme color variant. | -| `head-variant` | String | Use `'light'` or `'dark'` to make table header appear light or dark gray, respectively | -| `foot-variant` | String | Use `'light'` or `'dark'` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set | -| `foot-clone` | Boolean | Turns on the table footer, and defaults with the same contents a the table header | -| `no-footer-sorting` | Boolean | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details. | +| prop | Type | Description | +| ------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `striped` | Boolean | Add zebra-striping to the table rows within the `` | +| `bordered` | Boolean | For borders on all sides of the table and cells. | +| `borderless` | Boolean | removes inner borders from table. | +| `outlined` | Boolean | For a thin border on all sides of the table. Has no effect if `bordered` is set. | +| `small` | Boolean | To make tables more compact by cutting cell padding in half. | +| `hover` | Boolean | To enable a hover highlighting state on table rows within a `` | +| `dark` | Boolean | Invert the colors — with light text on dark backgrounds (equivalent to Bootstrap v4 class `.table-dark`) | +| `fixed` | Boolean | Generate a table with equal fixed-width columns (`table-layout: fixed;`) | +| `responsive` | Boolean or String | Generate a responsive table to make it scroll horizontally. Set to `true` for an always responsive table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table responsive (horizontally scroll) only on screens smaller than the breakpoint. See [Responsive tables](#responsive-tables) below for details. | +| `sticky-header` | Boolean or String | Generates a vertically scrollable table with sticky headers. Set to `true` to enable sticky headers (default table max-height of `300px`), or set it to a string containing a height (with CSS units) to specify a maximum height other than `300px`. See the [Sticky header](#sticky-headers) section below for details. | +| `stacked` | Boolean or String | Generate a responsive stacked table. Set to `true` for an always stacked table, or set it to one of the breakpoints `'sm'`, `'md'`, `'lg'`, or `'xl'` to make the table visually stacked only on screens smaller than the breakpoint. See [Stacked tables](#stacked-tables) below for details. | +| `caption-top` | Boolean | If the table has a caption, and this prop is set to `true`, the caption will be visually placed above the table. If `false` (the default), the caption will be visually placed below the table. | +| `table-variant` | String | Give the table an overall theme color variant. | +| `head-variant` | String | Use `'light'` or `'dark'` to make table header appear light or dark gray, respectively | +| `foot-variant` | String | Use `'light'` or `'dark'` to make table footer appear light or dark gray, respectively. If not set, `head-variant` will be used. Has no effect if `foot-clone` is not set | +| `foot-clone` | Boolean | Turns on the table footer, and defaults with the same contents a the table header | +| `no-footer-sorting` | Boolean | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details. | **Note:** table style options `fixed`, `stacked`, and `caption-top`, and the table sorting feature, requires BootstrapVue's custom CSS. @@ -876,21 +876,13 @@ function. ### Scoped field slots -CHANGED in 2.0.0-rc.28 - Scoped field slots give you greater control over how the record data appears. If you want to add an extra field which does not exist in the records, just add it to the `fields` array, And then reference the field(s) in the scoped slot(s). Scoped field slots use the following naming syntax: `'[' + field key + ']'`. -NEW in 2.0.0-rc.28 You can use the default _fall-back_ -scoped slot `'[]'` to format any cells that do not have an explicit scoped slot provided. - -DEPRECATION in 2.0.0-rc.28 Versions prior to -`2.0.0-rc.28` did not surround the field key with square brackets, which could cause slot name -collisions (i.e. if you had a field key `default`). Using the old field slot names has been -deprecated in favour of the new bracketed syntax, and support will be removed in a future release. -Users are encouraged to switch to the new bracketed syntax. +You can use the default _fall-back_ scoped slot `'[]'` to format any cells that do not have an +explicit scoped slot provided. **Example: Custom data rendering with scoped slots** @@ -1088,8 +1080,6 @@ formatted value as a string (HTML strings are not supported) ## Header and Footer custom rendering via scoped slots -CHANGED in 2.0.0-rc.28 - It is also possible to provide custom rendering for the tables `thead` and `tfoot` elements. Note by default the table footer is not rendered unless `foot-clone` is set to `true`. @@ -1098,14 +1088,8 @@ Scoped slots for the header and footer cells uses a special naming convention of not provided, but a `'HEAD[...]'` slot is provided, then the footer will use the `'HEAD[...]'` slot content. -NEW in 2.0.0-rc.28 You can use a default _fall-back_ -scoped slot `'HEAD[]'` or `'FOOT[]'` to format any header or footer cells that do not have an -explicit scoped slot provided. - -DEPRECATION in 2.0.0-rc.28 Versions prior to -`2.0.0-rc.28` used slot names `'HEAD_'` and `'FOOT_'`. Using the old slot names has been -deprecated in favour of the new bracketed syntax, and support will be removed in a future release. -Users are encouraged to switch to the new bracketed syntax. +You can use a default _fall-back_ scoped slot `'HEAD[]'` or `'FOOT[]'` to format any header or +footer cells that do not have an explicit scoped slot provided. ```html From 6b78accf0d7fbfd466e4e07adf52bfea4338f15d Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 23:26:38 -0300 Subject: [PATCH 3/3] Update README.md --- docs/markdown/reference/size-props/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/markdown/reference/size-props/README.md b/docs/markdown/reference/size-props/README.md index 53db6871252..98be462a173 100644 --- a/docs/markdown/reference/size-props/README.md +++ b/docs/markdown/reference/size-props/README.md @@ -39,10 +39,10 @@ values as you need to generate different utilities here. ```html
          -
          Width 25%
          -
          Width 50%
          -
          Width 75%
          -
          Width 100%
          +
          Width 25%
          +
          Width 50%
          +
          Width 75%
          +
          Width 100%