Partial import

[henrikekblad]

Nice to see that someone picks up on material adapter! Great job!

I just need the tabs component in my project. Are there any plans to support partial/selective import?

[pgbross]

Thank you for your interest. The vue-material-adapter package is simply a wrapper for its sibling packages for convenience. The individual packages are available to use needed.

For example I have a project where all I use is the <mdc-snackbar/> eg.:

import Vue from 'vue';
import snackbar from '@mcwv/snackbar/index';

function main() {
  Vue.use(snackbar);

  // more stuff...
}

You can either install the vue-material-adapter so that all the packages are present on your development machine npm i vue-material-adapter or you can cherry pick and install just the exact packages you may need, npm i @mcwv/snackbar.

One thing to note just now is that the @mcwv/tabs package includes tab, tabscroller, tabindicator in the one package, but the underlying material-components-web library has them as separate packages and it is my intention to more closely follow how that library and other libraries that use it, such as material-components-web-react, in a future release.

[henrikekblad]

Thanks!

Ended up copying your whole tabs folder into our project as I needed to make some modifications. The index-based event doesn't make much sense to me. Added a new event, emitted directly from the tab. Also needed to change some sass variables based on our dynamic theme colors.

The only thing I don't understand is why the tab-indicator animation isn't working? Have you gotten it to work? Any hints?

Thanks, and keep up the good work.

[henrikekblad]

I've spent a couple of hours trying to find out why the sliding animation isn't working for the tabs:

Found this: https://github.com/material-components/material-components-web/blob/master/packages/mdc-tab-indicator/sliding-foundation.ts#L47

Which does not work very well with Vue. It seems that the transform style is overwritten before the virtual DOM is updated in the browser. I cannot come up with any clever scheme to overcome this.

When looking at how the react team solved it:

https://github.com/material-components/material-components-web-react/blob/rc0.12.0/packages/tab-indicator/index.tsx

The only difference I found was that they did an forceUpdate() when adding/removing classes. I did try to do something similar in Vue, but that didn't make any difference.

[henrikekblad]

Ok, got it working. Ended up doing like these guys: https://github.com/material-components/material-components-web/issues/4255

Moved parts of the adapter code into mdc-tab-indicator.js

methods: {
            activate(previousIndicatorClientRect) {
                // this.foundation.activate(previousIndicatorClientRect);
                if (!previousIndicatorClientRect) {
                    this.foundation.adapter_.addClass(
                        MDCTabIndicatorFoundation.cssClasses.ACTIVE
                    );
                    return;
                }

                const currentClientRect = this.computeContentClientRect();
                const widthDelta =
                    previousIndicatorClientRect.width / currentClientRect.width;
                const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
                requestAnimationFrame(() => {
                    this.foundation.adapter_.addClass(
                        MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION
                    );
                    this.foundation.adapter_.setContentStyleProperty(
                        'transform',
                        `translateX(${xPosition}px) scaleX(${widthDelta})`
                    );
                    requestAnimationFrame(() => {
                        this.foundation.adapter_.removeClass(
                            MDCTabIndicatorFoundation.cssClasses.NO_TRANSITION
                        );
                        this.foundation.adapter_.addClass(
                            MDCTabIndicatorFoundation.cssClasses.ACTIVE
                        );
                        this.foundation.adapter_.setContentStyleProperty('transform', '');
                    });
                });
            },
}

[pgbross]

@henrikekblad Many thanks, I have incorporated that fix into the next version of vue-material-adapter.