chore(docs): clarify note on non-text-like input formatter functions (closes #5518) (#5762)

jacobmllr95 · Hiws · web-flow · commit 4219dcc9538a · 2020-09-11T12:25:46.000+02:00
* chore(docs): clarify note on non-text-like input `formatter` functions

* Update README.md

Co-authored-by: Hiws &lt;hiws@live.dk&gt;
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -25,7 +25,7 @@ A clear and concise description of what the pull request does.
 - [ ] It's submitted to the `dev` branch, **not** the `master` branch
 - [ ] When resolving a specific issue, it's referenced in the PR's title (i.e. `[...] (fixes #xxx[,#xxx])`, where "xxx" is the issue number)
 - [ ] It should address only one issue or feature. If adding multiple features or fixing a bug and adding a new feature, break them into separate PRs if at all possible.
-- [ ] The title should follow the [**Conventional Commits**](https://www.conventionalcommits.org/) naming convention (i.e. `fix(alert): not alerting during SSR render`, `docs(badge): update pill examples`, `chore(docs): fix typo in README`, etc). **This is very important, as the `CHANGELOG` is generated from these messages, and determines the next version type (patch or minor).**
+- [ ] The title should follow the [**Conventional Commits**](https://www.conventionalcommits.org/) naming convention (i.e. `fix(alert): not alerting during SSR render`, `docs(badge): update pill examples`, `chore(docs): fix typo in README`, etc.). **This is very important, as the `CHANGELOG` is generated from these messages, and determines the next version type (patch or minor).**
 
 **If new features/enhancement/fixes are added or changed:**
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1153,7 +1153,7 @@ Read the following migration guide for more details.
 - `b-table`: the `filter` prop will no longer accept a function reference (previously deprecated).
   Instead, pass a function to the `filter-function` prop when using a custom filter function. The
   prop `filter` is only to be used for the filter's _criteria_ (i.e. the search value, search
-  `RegExpr`, etc).
+  `RegExpr`, etc.).
 - `b-table`: passing an object as a `fields` definition will no longer work. Use the _array of
   strings_ or _array of objects_ (or a combination of the two) fields definition format instead.
 - `b-table`: sorting icon SASS variables have been changed to handle the new SVG backgrounds. If you
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -232,7 +232,7 @@ module.exports = {
 
 **Note:** If your project has multiple webpack config files (i.e. `webpack.config.js`,
 `webpack.renderer.config.js`, `webpack.vendor.config.js`, `webpack.server.config.js`,
-`webpack.client.config.js`, etc), you will need to set the appropriate alias in _all_ of them.
+`webpack.client.config.js`, etc.), you will need to set the appropriate alias in _all_ of them.
 
 See the [Vue.js](https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only)
 Guide for full details on setting up aliases for [webpack](https://webpack.js.org/),
diff --git a/docs/markdown/reference/settings/README.md b/docs/markdown/reference/settings/README.md
@@ -55,7 +55,7 @@ The values provided as the config option to `Vue.use` will be merged with the de
 **Note:** When defining custom breakpoints, keep the names short (2 to 3 characters). At least two
 breakpoint names must be defined. The breakpoint names **must** match the breakpoint names defined
 in your custom Bootstrap SCSS. Breakpoint names must not conflict with non-breakpoint prop names
-used on various components (i.e. avoid `to`, `col`, etc)
+used on various components (i.e. avoid `to`, `col`, etc.)
 
 ### Setting config via individual component group plugin imports
 
diff --git a/docs/markdown/reference/theming/README.md b/docs/markdown/reference/theming/README.md
@@ -4,10 +4,10 @@
 > stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.
 
 While BootstrapVue uses Bootstrap's CSS, certain features of BootstrapVue uses custom CSS (i.e.
-stacked tables, etc). Our custom CSS relies on variables defined the Bootstrap v4.x SCSS. The
+stacked tables, etc.). Our custom CSS relies on variables defined the Bootstrap v4.x SCSS. The
 `bootstrap-vue/dist/bootstrap-vue.css` is compiled using the default Bootstrap v4.x variables. By
 using the BootstrapVue source SCSS, you can have your variable overrides (such as breakpoints, theme
-colors, etc) adjust the custom BootstrapVue css generation.
+colors, etc.) adjust the custom BootstrapVue css generation.
 
 For premium dashboards and themes, please refer to the [`Themes section`](/themes) of the
 documentation.
@@ -149,7 +149,7 @@ 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).
+breakpoints, etc.).
 
 **Via app main entry point:**
 
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -163,7 +163,7 @@ module.exports = {
     // https://zeit.co/docs/v2/build-step#system-environment-variables
     // - `true` if on Zeit Now (dev or PR)
     VERCEL_NOW: process.env.VERCEL_GITHUB_DEPLOYMENT,
-    // - The branch name used for the deploy (i.e. `dev`, `master`, `patch-1`, etc)
+    // - The branch name used for the deploy (i.e. `dev`, `master`, `patch-1`, etc.)
     VERCEL_BRANCH: process.env.VERCEL_GITHUB_COMMIT_REF,
     // - The Commit SHA hash
     VERCEL_COMMIT_SHA: process.env.VERCEL_GITHUB_COMMIT_SHA,
diff --git a/scripts/build.sh b/scripts/build.sh
@@ -38,7 +38,7 @@ echo ''
 
 echo 'Minify JS...'
 # We instruct terser to preserve our `Bv*Event` class names and
-# safe types (i.e. `Element`, etc) when mangling top level names
+# safe types (i.e. `Element`, etc.) when mangling top level names
 terser dist/bootstrap-vue.js \
        --compress typeofs=false \
        --mangle reserved=['BvEvent','BvModalEvent','Element','HTMLElement','SVGElement'] \
diff --git a/src/components/aspect/README.md b/src/components/aspect/README.md
@@ -62,4 +62,4 @@ The width will always be 100% of the available width in the parent element/compo
 
 ## See also
 
-- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)
+- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc.)
diff --git a/src/components/avatar/README.md b/src/components/avatar/README.md
@@ -552,7 +552,7 @@ between `0` and `1`, where `0` means no overlap and `1` means 100% overlap.
 
 Use the `aria-label` prop to provide an accessible, screen reader friendly, label for your avatar.
 If you have a badge, it is recommended to add inforation to your aria-label regarding the badge
-purpose or content (i.g. `'3 messages'`, `'online'`, etc)).
+purpose or content (i.g. `'3 messages'`, `'online'`, etc.).
 
 While the `click` event is emitted regardless if the `button`, `href`, or `to` props are set, it is
 highly recommended to use the `button` prop when the click event should trigger an action (or use
diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js
@@ -257,7 +257,7 @@ export const BCalendar = Vue.extend({
       // `short` is typically a 3 letter abbreviation,
       // `narrow` is typically a single letter
       // `long` is the full week day name
-      // Although some locales may override this (i.e `ar`, etc)
+      // Although some locales may override this (i.e `ar`, etc.)
       default: STR_SHORT,
       validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
     }
diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md
@@ -99,7 +99,7 @@ named slot `first`.
 
 If both `html` and `text` are provided, `html` will take precedence. Only basic/native HTML is
 supported in the `html` field (components will not work). Note that not all browsers will render
-inline html (i.e. `<i>`, `<strong>`, etc) inside `<option>` elements of a `<select>`.
+inline html (i.e. `<i>`, `<strong>`, etc.) inside `<option>` elements of a `<select>`.
 
 <p class="alert alert-danger">
   <strong>Be cautious</strong> of placing user supplied content in the <code>html</code> field,
diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js
@@ -263,7 +263,7 @@ const propsMixin = {
       // `short` is typically a 3 letter abbreviation,
       // `narrow` is typically a single letter
       // `long` is the full week day name
-      // Although some locales may override this (i.e `ar`, etc)
+      // Although some locales may override this (i.e `ar`, etc.)
       default: STR_SHORT,
       validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)
     },
diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -93,15 +93,15 @@ rendered and a console warning will be issued.
   Use the `number` or `trim` props instead.
 - Older version of Firefox may not support `readonly` for `range` type inputs.
 - Input types that do not support `min`, `max` and `step` (i.e. `text`, `password`, `tel`, `email`,
-  `url`, etc) will silently ignore these values (although they will still be rendered on the input
+  `url`, etc.) will silently ignore these values (although they will still be rendered on the input
   markup) if values are provided.
 
 **Caveats with predictive text entry and IME composition entry:**
 
 - When using predictive text auto-suggested words, the `v-model` will not update until the
   auto-suggested word is selected (or a space is typed). If an auto suggested word is not selected,
   the v-model will update with the current _displayed text_ of the input when the input is blurred.
-- When using IME composition (ie. Chinese, Japanese, etc), the `v-model` will not update until the
+- When using IME composition (ie. Chinese, Japanese, etc.), the `v-model` will not update until the
   IME composition is completed.
 
 ### Range type input
@@ -404,9 +404,10 @@ Formatting does not occur if a `formatter` is not provided.
 <!-- b-form-input-formatter.vue -->
 ```
 
-**Note:** When using a non-text-like input (i.e. `color`, `range`, `date`, `number`, `email` etc),
-ensure that your formatter function returns the value in the expected format for the input type. The
-formatter **must** return the value as a _string_.
+**Note:** When using a non-text-like input (i.e. `color`, `range`, `date`, `number`, `email` etc.),
+ensure that your formatter function returns the value in the expected format (`date` ->
+'2000-06-01', `color` -> '#ff0000', etc.) for the input type. The formatter **must** return the
+value as a _string_.
 
 **Note:** With non-lazy formatting, if the cursor is not at the end of the input value, the cursor
 may jump to the end _after_ a character is typed. You can use the provided event object and the
diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md
@@ -140,7 +140,7 @@ To have them appear _above_ the inputs generated by `options`, place them in the
 
 If both `html` and `text` are provided, `html` will take precedence. Only basic/native HTML is
 supported in the `html` field (components will not work). Note that not all browsers will render
-inline html (i.e. `<i>`, `<strong>`, etc) inside `<option>` elements of a `<select>`.
+inline html (i.e. `<i>`, `<strong>`, etc.) inside `<option>` elements of a `<select>`.
 
 <p class="alert alert-danger">
   <strong>Be cautious</strong> of placing user supplied content in the <code>html</code> field,
diff --git a/src/components/form-select/README.md b/src/components/form-select/README.md
@@ -153,7 +153,7 @@ options specified by the `options` prop, use the named slot `first`.
 
 If both `html` and `text` are provided, `html` will take precedence. Only basic/native HTML is
 supported in the `html` field (components will not work). Note that not all browsers will render
-inline html (i.e. `<i>`, `<strong>`, etc) inside `<option>` elements of a `<select>`.
+inline html (i.e. `<i>`, `<strong>`, etc.) inside `<option>` elements of a `<select>`.
 
 <p class="alert alert-danger">
   <strong>Be cautious</strong> of placing user supplied content in the <code>html</code> field,
diff --git a/src/components/form-tags/README.md b/src/components/form-tags/README.md
@@ -44,7 +44,7 @@ enable adding a tag on the input's `change` event via the `add-on-change` prop.
 
 ## Tag creation using separators
 
-To auto create tags when a separator character is typed (i.e. <kbd>Space</kbd>, <kbd>,</kbd>, etc),
+To auto create tags when a separator character is typed (i.e. <kbd>Space</kbd>, <kbd>,</kbd>, etc.),
 set the `separator` prop to the character that will trigger the tag to be added. If multiple
 separator characters are needed, then include them as a single string (i.e. `' ,;'`), or an array of
 characters (i.e. `[' ', ',', ';']`), which will trigger a new tag to be added when <kbd>Space</kbd>,
diff --git a/src/components/form-timepicker/README.md b/src/components/form-timepicker/README.md
@@ -267,7 +267,7 @@ Internationalization of the time interface is provided via
 [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
 and
 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat),
-except for the labels applied to elements of the time control (aria-labels, selected status, etc).
+except for the labels applied to elements of the time control (aria-labels, selected status, etc.).
 You must provide your own translations for these labels. The available locales will be browser
 dependent (not all browsers support all locales).
 
diff --git a/src/components/jumbotron/README.md b/src/components/jumbotron/README.md
@@ -80,7 +80,7 @@ other appropriate element by setting the `tag` prop to the desired element tag n
 ## Variants
 
 Control the overall background variant with the `bg-variant` prop ( set to `info`, `danger`,
-`warning`, `light`, `dark`, etc), the border variant with the `border-variant` prop, and the text
+`warning`, `light`, `dark`, etc.), the border variant with the `border-variant` prop, and the text
 variant with `text-variant` prop. All three props default to `null`, which will instruct the
 jumbotron to use the default styling.
 
diff --git a/src/components/modal/modal.spec.js b/src/components/modal/modal.spec.js
@@ -40,7 +40,7 @@ describe('modal', () => {
       expect(wrapper.vm).toBeDefined()
       await waitNT(wrapper.vm)
 
-      // Main outer wrapper (has z-index, etc)... The stacker <div>
+      // Main outer wrapper (has z-index, etc.)... The stacker <div>
       expect(wrapper.element.tagName).toBe('DIV')
       expect(wrapper.classes().length).toBe(0)
       expect(wrapper.element.style.position).toEqual('absolute')
@@ -120,7 +120,7 @@ describe('modal', () => {
       expect(wrapper.vm).toBeDefined()
       await waitRAF()
 
-      // Main outer wrapper (has z-index, etc)... The stacker <div>
+      // Main outer wrapper (has z-index, etc.)... The stacker <div>
       expect(wrapper.element.tagName).toBe('DIV')
       expect(wrapper.classes().length).toBe(0)
       expect(wrapper.element.style.position).toEqual('absolute')
@@ -205,7 +205,7 @@ describe('modal', () => {
       await waitNT(wrapper.vm)
       await waitRAF()
 
-      // Main outer wrapper (has z-index, etc)... The stacker <div>
+      // Main outer wrapper (has z-index, etc.)... The stacker <div>
       expect(wrapper.element.tagName).toBe('DIV')
       expect(wrapper.classes().length).toBe(0)
       expect(wrapper.element.style.position).toEqual('absolute')
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -29,7 +29,7 @@ Things to know when using popover component:
 - Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning.
 - Popovers require BootstrapVue's custom SCSS/CSS in order to function correctly, and for variants.
 - Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
-  complex components (like input groups, button groups, etc). You can use `container` to optionally
+  complex components (like input groups, button groups, etc.). You can use `container` to optionally
   specify a different element to append the rendered popover to.
 - Triggering popovers on hidden elements will not work.
 - Popovers for `disabled` elements must be triggered on a wrapper element.
diff --git a/src/components/progress/README.md b/src/components/progress/README.md
@@ -169,7 +169,7 @@ classes.
 ```
 
 The height of the progress bar can be controlled with the `height` prop. The height value should be
-a standard CSS dimension (`px`, `rem`, `em`, etc). The default height is `1rem`.
+a standard CSS dimension (`px`, `rem`, `em`, etc.). The default height is `1rem`.
 
 ```html
 <template>
diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
@@ -146,7 +146,7 @@ overrides.
 ### Width
 
 By default the width of `<b-sidebar>` is set to `320px` (100% on 'xs' screens). Simply provide a
-value via the `width` prop (i.e. `'180px'`, `'20em'`, etc) to override this default. The max width
+value via the `width` prop (i.e. `'180px'`, `'20em'`, etc.) to override this default. The max width
 is set to `100%` via CSS.
 
 ### Padding
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -182,7 +182,7 @@ Fields can be a simple array, for defining the order of the columns, and which c
 ### Fields as an array of objects
 
 Fields can be a an array of objects, providing additional control over the fields (such as sorting,
-formatting, etc). Only columns (keys) that appear in the fields array will be shown:
+formatting, etc.). Only columns (keys) that appear in the fields array will be shown:
 
 **Example: Using array of objects fields definition**
 
@@ -1306,7 +1306,7 @@ available horizontal space.
 - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents the
   borders on the sticky header from "sticking" to the header, and hence the borders will scroll when
   the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table (note
-  that this may cause double width borders when using features such as `bordered`, etc).
+  that this may cause double width borders when using features such as `bordered`, etc.).
 - The sticky header feature uses CSS style `position: sticky` to position the headings. Internet
   Explorer does not support `position: sticky`, hence for IE 11 the table headings will scroll with
   the table body.
@@ -1401,7 +1401,7 @@ set.
 - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any
   borders on the sticky columns from "sticking" to the column, and hence those borders will scroll
   when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table
-  (note that this may cause double width borders when using features such as `bordered`, etc).
+  (note that this may cause double width borders when using features such as `bordered`, etc.).
 - BootstrapVue's custom CSS is required in order to support sticky columns.
 - The sticky column feature uses CSS style `position: sticky` to position the column cells. Internet
   Explorer does not support `position: sticky`, hence for IE 11 the sticky column will scroll with
@@ -2514,7 +2514,7 @@ sticky. See below for more information on using [sticky columns](#simple-tables-
 
 Since `b-table-simple` is just a wrapper component, of which you will need to render content inside,
 it does not provide any of the advanced features of `<b-table>` (i.e. row events, head events,
-sorting, pagination, filtering, foot-clone, items, fields, etc).
+sorting, pagination, filtering, foot-clone, items, fields, etc.).
 
 ```html
 <div>
@@ -2782,7 +2782,7 @@ markup. Components `<b-table>` and `<b-table-lite>` use these helper components
 
 In the [Simple tables](#simple-tables) example, we are using the helper components `<b-thead>`,
 `<b-tbody>`, `<b-tr>`, `<b-th>`, `<b-tr>` and `<b-tfoot>`. While you can use regular table child
-elements (i.e. `<tbody>`, `<tr>`, `<td>`, etc) within `<b-table-simple>`, and the named slots
+elements (i.e. `<tbody>`, `<tr>`, `<td>`, etc.) within `<b-table-simple>`, and the named slots
 `top-row`, `bottom-row`, and `thead-top`, it is recommended to use these BootstrapVue table `<b-t*>`
 helper components. Note that there are no helper components for `<caption>`, `<colgroup>` or
 `<col>`, so you may these three HTML5 elements directly in `<b-table-simple>`.
diff --git a/src/components/time/README.md b/src/components/time/README.md
@@ -240,7 +240,7 @@ Internationalization of the time interface is provided via
 [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
 and
 [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat),
-except for the labels applied to elements of the time control (aria-labels, selected status, etc).
+except for the labels applied to elements of the time control (aria-labels, selected status, etc.).
 You must provide your own translations for these labels. The available locales will be browser
 dependent (not all browsers support all locales).
 
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -28,7 +28,7 @@ Things to know when using tooltip component:
 - Tooltips require BootstrapVue's custom SCSS/CSS in order to function correctly, and for variants.
 - Triggering tooltips on hidden elements will not work.
 - Specify `container` as `null` (default, appends to `<body>`) to avoid rendering problems in more
-  complex components (like input groups, button groups, etc). You can use container to optionally
+  complex components (like input groups, button groups, etc.). You can use container to optionally
   specify a different element to append the rendered tooltip to.
 - Tooltips for `disabled` elements must be triggered on a wrapper element.
 - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
diff --git a/src/directives/popover/README.md b/src/directives/popover/README.md
diff --git a/src/directives/tooltip/README.md b/src/directives/tooltip/README.md
diff --git a/src/utils/number.js b/src/utils/number.js
diff --git a/src/utils/observe-dom.js b/src/utils/observe-dom.js

Original file line number	Diff line number	Diff line change
`@@ -62,4 +62,4 @@ The width will always be 100% of the available width in the parent element/compo`
`62`	`62`
`63`	`63`	`## See also`
`64`	`64`
`65`		-- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc)
	`65`	+- [`<b-embed>` component](/docs/components/embed) for responsive embeds (videos, iframes, etc.)
Original file line number	Diff line number	Diff line change
`@@ -257,7 +257,7 @@ export const BCalendar = Vue.extend({`
`257`	`257`	// `short` is typically a 3 letter abbreviation,
`258`	`258`	// `narrow` is typically a single letter
`259`	`259`	// `long` is the full week day name
`260`		- // Although some locales may override this (i.e `ar`, etc)
	`260`	+ // Although some locales may override this (i.e `ar`, etc.)
`261`	`261`	`default: STR_SHORT,`
`262`	`262`	`validator: value => arrayIncludes([STR_LONG, STR_SHORT, STR_NARROW], value)`
`263`	`263`	`}`