Codecov Report

Merging #3229 into dev will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##              dev    #3229      +/-   ##
==========================================
+ Coverage   99.16%   99.16%   +<.01%     
==========================================
  Files         214      214              
  Lines        3961     3967       +6     
  Branches     1161     1161              
==========================================
+ Hits         3928     3934       +6     
  Misses         26       26              
  Partials        7        7

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 63c4361...1f68bca. Read the comment docs.

This should probably be made to work for both the directive and the component versions (using the same BTooltip key in the config for both directive and component versions). As well, there should be a similar option for popovers (using the BPopover as they key).

Hi, I will add support for the components now. Since the popover and tooltip use a Mixin, It will be best to implement in the mixin toolpop or in each component?

@AlanRezende The prop boundary is defined in the mixin at https://github.com/AlanRezende/bootstrap-vue/blob/dev/src/mixins/toolpop.js#L62-L67

But the Miin is shared between BTooltip and BPopover, so in order to get the config value default unique for each, the individual components will need to have their own boundary prop defined (and then remove the boundary from the Mixin props.

That was what I figured out and didi exactly what you describe. But I have a problem.

With the directives all works fine, I`m using nuxt to set new values in config.

With the components, not so much, if in dev I set new values in my dev config and rebuild all, it updates, but if I set in nuxt config nothing changes.

Is there some aditional code to make the directives work with the given configs?

Ah, that is because the default value is being evaluated when the modal is loaded, not at runtime.

I'll suggest a fix in a few moments.

EDIT: wrong train of thought for me.

Could you provide an example of your nuxt config you are using?

For the components, make sure you are using:

    boundary: {
      // String: scrollParent, window, or viewport
      // Element: element reference
      type: [String, HTMLElement],
      default: () => getComponentConfig(...)
    },

and also include the HTMLElement polyfil (needed for SSR, as Node doesn't support HTMLElement) at the top:

import { HTMLElement } from '../utils/safe-types'

All working now wi the nuxt config:

bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false, // Or `bvCSS: false`
    config: {
      BTooltip: {
        boundary: 'window'
      },
      BPopover: {
        boundary: 'window'
      }
    }
  },

Care to explain why on component I had to use () => getComponentConfig(...) while in directive getComponentConfig(...) worked fine?

is it better to always use () => getComponentConfig(...)?

In the directives, the config is generated on demand in the bind function

For props, if you didn't use hte () => ... nomenclature, the result of getComponentConfig runs (is evaluated) immediately when the module is loaded/imported. Setting the default to a function allows it to be evaluated lazily on first use of the component, to ensure the config is loaded before the component definition is evaluated. (as prop defaults can be the result of a function)

Since in the directive version everything is wrapped in functions, we didn't need to use () => ..., as they are lazy evaluated on first use.

I can confirm boundaryPadding is working based on config values (nuxt config used)

Do we need to change anything else?

I think we are good to go for a merge.