From 5f3ba9e7a22c236f7f8023a99dc0116e1b382dc8 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Thu, 31 Oct 2019 13:08:19 -0300 Subject: [PATCH] fix(v-b-visible): fix type error in `componentUpdated` hook + minor docs update/fixes (#4327) --- src/components/table/helpers/mixin-items.js | 3 +- .../table/helpers/mixin-provider.js | 3 +- .../table/helpers/normalize-fields.js | 6 +- src/directives/visible/README.md | 147 +++++++++++++++--- src/directives/visible/visible.js | 13 +- src/utils/copy-props.js | 3 +- src/utils/object.js | 15 +- 7 files changed, 157 insertions(+), 33 deletions(-) diff --git a/src/components/table/helpers/mixin-items.js b/src/components/table/helpers/mixin-items.js index 8b98cba518b..0449fe52d96 100644 --- a/src/components/table/helpers/mixin-items.js +++ b/src/components/table/helpers/mixin-items.js @@ -1,5 +1,6 @@ import looseEqual from '../../../utils/loose-equal' import { isArray, isFunction, isNull, isString, isUndefined } from '../../../utils/inspect' +import { clone } from '../../../utils/object' import normalizeFields from './normalize-fields' export default { @@ -50,7 +51,7 @@ export default { const parent = this.$parent return this.computedFields.reduce((obj, f) => { // We use object spread here so we don't mutate the original field object - obj[f.key] = { ...f } + obj[f.key] = clone(f) if (f.formatter) { // Normalize formatter to a function ref or `undefined` let formatter = f.formatter diff --git a/src/components/table/helpers/mixin-provider.js b/src/components/table/helpers/mixin-provider.js index 6340e8cb35a..6a037487381 100644 --- a/src/components/table/helpers/mixin-provider.js +++ b/src/components/table/helpers/mixin-provider.js @@ -1,6 +1,7 @@ import looseEqual from '../../../utils/loose-equal' import warn from '../../../utils/warn' import { isArray, isFunction, isPromise } from '../../../utils/inspect' +import { clone } from '../../../utils/object' import listenOnRootMixin from '../../../mixins/listen-on-root' export default { @@ -62,7 +63,7 @@ export default { ctx.perPage = this.perPage ctx.currentPage = this.currentPage } - return { ...ctx } + return clone(ctx) } }, watch: { diff --git a/src/components/table/helpers/normalize-fields.js b/src/components/table/helpers/normalize-fields.js index 525c822ab39..03fb47a24eb 100644 --- a/src/components/table/helpers/normalize-fields.js +++ b/src/components/table/helpers/normalize-fields.js @@ -1,6 +1,6 @@ import startCase from '../../../utils/startcase' import { isArray, isFunction, isObject, isString } from '../../../utils/inspect' -import { keys } from '../../../utils/object' +import { clone, keys } from '../../../utils/object' import { IGNORED_FIELD_KEYS } from './constants' // Private function to massage field entry into common object format @@ -13,7 +13,7 @@ const processField = (key, value) => { // Formatter shortcut field = { key: key, formatter: value } } else if (isObject(value)) { - field = { ...value } + field = clone(value) field.key = field.key || key } else if (value !== false) { // Fallback to just key @@ -35,7 +35,7 @@ const normalizeFields = (origFields, items) => { fields.push({ key: f, label: startCase(f) }) } else if (isObject(f) && f.key && isString(f.key)) { // Full object definition. We use assign so that we don't mutate the original - fields.push({ ...f }) + fields.push(clone(f)) } else if (isObject(f) && keys(f).length === 1) { // Shortcut object (i.e. { 'foo_bar': 'This is Foo Bar' } const key = keys(f)[0] diff --git a/src/directives/visible/README.md b/src/directives/visible/README.md index 70fb655462e..76bf36a7f6a 100644 --- a/src/directives/visible/README.md +++ b/src/directives/visible/README.md @@ -1,26 +1,30 @@ # Visible -> The `v-b-visible` directive allows you to react when an element becomes visible in the viewport. +> `v-b-visible` is a lightweight directive that allows you to react when an element becomes visible +> in the viewport and/or when it moves out of the viewport (or is no longer visible). The `v-b-visible` directive was added in version `2.1.0`. ## Overview - `v-b-visible` will call your callback method with a boolean value indicating if the element is - visible (intersecting) with the viewport. + visible (intersecting with the viewport) or not. - The directive can be placed on almost any element or component. -- Changes in visibility cqn also be detected (such as `display: none`), as long as the element is - within (or partially within) the viewport, or within the optional offset. -- Several BootstrapVue components use `v-b-visible`, such as ``. +- Changes in visibility can also be detected (such as `display: none`), as long as the element is + within (or partially within) the viewport, or within the optional offset. Note: transitioning to a + non-visible state due to `v-if="false"` _cannot_ be detected. +- Internally, BootstrapVue uses this directive in several components, such as ``. - The `v-b-visible` directive requires browser support of [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). For older browsers that do not support `IntersectionObserver`, you will need to use a [polyfill](/docs/#js). +- If `IntersectionObserver` support is not detected, then `v-b-visible` will assume the element is + _always visible_, and will call the callback once with the argument set to `true`. ## Directive syntax and usage ```html -
content
+
content
``` Where `callback` is required: @@ -28,22 +32,26 @@ Where `callback` is required: - A function reference that will be called whenever visibility changes. The callback is passed a single boolean argument. `true` indicates that the element is intersecting (partially or entirely visible) in the viewport, or `false` if the element is not visible/intersecting with the viewport. - The callback will be called each time the element's visibility changes (except when hte `once` + The callback will be called each time the element's visibility changes (except when the `once` modifier is used. See below for details) -Where `[mod]` can be (all optional): +Where `[mod1]` or `[mod2]` can be (all optional): -- A positive number representing the offset (margin) in pixels _away_ from the edge of the viewport - to determine when the element is considered in (or just about to be in) the viewport. The value - adds a margin around the view port. The default value is `0`. -- The keyword `once`. When this modifier is present, the callback will be called once (with the - argument of `true` indicating the element is intersecting/visible) when the element is - intersecting with the viewport. Note the callback may be called prior to this with an argument of - `false` signifying the element is not intersecting/visible. +- A positive integer number representing the offset (margin) in pixels _away_ from the edge of the + _viewport_ to determine when the element is considered in (or just about to be in) the viewport. + The value adds a margin around the viewport. The default value is `0`. +- The keyword `once`. When this modifier is present, the callback will be called only once the first + time the element is visible (with the argument of `true` indicating the element is + intersecting/visible). Note the callback _may be_ called prior to this with an argument of `false` + signifying the element is not intersecting/visible. -### Usage examples +The order of the modifiers is not important. -Basic: +### Usage syntax examples + +In all use cases, the callback function is required. + +#### Basic (no modifiers) ```html