fix(VTextField): use intersect to recalculate elements width

[Djaler]

fixes #9299

Description

Use IntersectionObserver (if it available) to recalculate element width after input becomes visible,

Motivation and Context

Cause they have zero width on mount in hidden state (inside expansion panel, for example)
#9299

How Has This Been Tested?

visually

Markup:

https://codepen.io/djaler/pen/oNNXywM

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and breaking changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)
• I've added new examples to the kitchen (applies to new features and breaking changes in core library)

[Djaler]

@johnleider this is improved version of #9300

[dsseng]

Please create corresponding tests

[johnleider]

@Djaler Could you message me in the community please, https://community.vuetifyjs.com

[TravisBuddy]

Hey @Djaler,
Your changes look good to me!

View build log

TravisBuddy Request Identifier: 35025550-12d9-11ea-b2b3-cdec09be7ce8

[Djaler]

@johnleider I updated a code according to what we discussed. Also, @sh7dm, I added a test to the mixin

[johnleider]

@KaelWD can you look over the mixin for inaccuracies in typescript implementation.

completed

[Djaler]

@johnleider can you check it?

[johnleider]

After reviewing this again, I'm not sure why we are re-rolling up the intersectable functionality. We already have the v-intersect directive. We could essentially just hook into the render function and dynamically add the directive.

[johnleider]

Change to:

// Utilities
import { consoleWarn } '../../util/console'

// Types
import Vue from 'vue'

[Djaler]

@johnleider how can we add directive from mixin?

[KaelWD]

@KaelWD can you look over the mixin for inaccuracies in typescript implementation.

It's alright. Could make the options type safe by being a wrapping function instead of a mixin factory, but that gets pretty complicated.

how can we add directive from mixin?

Yeah I don't think you really can. The mixin could have everything else though and the implementing component would just have to make sure to use the directive somewhere.

EDIT: maybe

mounted () {
  Intersect.inserted(this.$el, options)
}
destroyed () {
  Intersect.unbind(this.$el)
}

[Djaler]

The mixin could have everything else though and the implementing component would just have to make sure to use the directive somewhere.

Do you mean, in implementing component we will have something like

directives: [
          {
            name: 'intersect',
            value: {
              handler: this.onObserve,
            },
          },
        ],

, where onObserve provided by mixin?

[KaelWD]

Yeah. See my edit for another idea.

[Djaler]

mounted () {
  Intersect.inserted(this.$el, options)
}
destroyed () {
  Intersect.unbind(this.$el)
}

Do you mean to get rid of mixin at all?

[KaelWD]

No, the mixin can do that.

[Djaler]

Oh, I did not get it that Intersection.inserted is a way to initialize directive. Yeah, this could work

[Djaler]

@KaelWD @johnleider done

[Djaler]

So what about it, guys?