Framework7 5.3.0 Released!

[nolimits4web]

5.3.0 update arrived, here is what is new:

• Core
  • Card
    • Increased default z-index for expandable card
  • Dialog
    • Added support for backdrop parameter to be able to disable backdrop
  • Sheet
    • New sheet.setSwipeStep() method to update swipe step position if content was modified manually
  • Tooltip
    • New offset parameter to add extra offset to tooltip position
  • Touch
    • New touch.activeStateOnMouseMove boolean app parameter. If enabled it will not remove “active state” from clicked elements on mouse move
  • Router Component
    • Fixed issue with parsing CSS media queries in scoped styles
    • Now it is possible to use whole app layout as a component
      • Main app component can be specified in app component or componentUrl parameter
      • app.rootComponent now refers to main app component instance
      • If main app component is used, then $root in components refers to main app component instance
  • Minor fixes

Main new feature is that in Core version it is now possible to use app layout as component too https://framework7.io/docs/router-component.html#main-app-component

[Tim]

Wow, good work @nolimits4web !!! Please note that with this great type of updates, you are really pushing our expectations for the rest of 2020 sky high

If I understand the new app root component correctly, is this a very nice replacement for manually hiding/showing views for logged in/not logged in?

I usually have two root views, one view for first startup when the user is not logged in yet, and one tabbed view which I manually show when the user is logged in successfully. Although this approach works, it always felt as a dirty way to make things work.

Having a root app element to replace this manual way would be very cool!

[nolimits4web]

If I understand the new app root component correctly, is this a very nice replacement for manually hiding/showing views for logged in/not logged in?

Exactly, it was possible in F7-Vue/React since the beginning and now it is possible with Core version too

[Momo]

Thats awesome! Have been waiting for that, and instantly tryed it out.
on thing i noticed which didnt work well for me is using that in combination of tabs views but maybe i just have to figure out why it doesn’t work, I am using a swipeable tabs view

[nolimits4web]

What doesn’t work, do you mean swipeable tabs swiping doesn’t work?

[Momo]

This is how my app component file looks like:

    {{#if loggedIn}}
    <div class="views tabs safe-areas tabs-swipeable-wrap swiper-container" >
        <div class="swiper-wrapper tabs">
            <div id="view-recs" class="view view-recs tab swiper-slide" data-url="/recs/"></div>
            <div id="view-main" class="view view-main view-init tab tab-active swiper-slide" data-url="/"></div>
            <div id="view-settings" class="view view-settings tab swiper-slide" data-url="/settings/"></div>
        </div>
    </div>
    {{else}}
    <div class="login-screen modal-in">
        <div class="view view-init" data-url="/start/"></div>
    </div>
    {{/if}}

Once logged in i can’t switch between views

[Momo]

Nevermind i made it work through initating the swiper after like that:

            self.$setState({ loggedIn: true }).then(function () {  
                const viewsSwiper = app.swiper.create('.views', {
                    initialSlide: 1,
                    resistance : true,
                    resistanceRatio : 0,
                    noSwipingClass: 'views-no-swiping',
                    on: {
                        slideChange() {
                            const swiper = this;
                            const id = swiper.slides.eq(swiper.activeIndex).attr('id');
                            app.tab.show(`#${id}`);
                        }
                    }
                });
                app.on('tabShow', (tabEl) => {
                    if (self.$(tabEl).hasClass('view')) {
                        viewsSwiper.slideTo(self.$(tabEl).index());
                    }
                });
            })

[tsalira]

Bravo @nolimits4web. Your speed is incredible!

Beginning of 2019, I began writing a detailed up-to-date F7 tutorial, then I got busy. I came back a couple of weeks later, and you had made some breaking changes, my tutorial was “old”. I managed to catch up and update the tutorial, then again got busy again. Came back 6 weeks later and it was “old” again!

Now I have to catch up with the app component. I haven’t come across such an evolving technology. Keep up the good work!

[Badulesia]

Hello
You forgot to write 2020 instead of 2019 on the frontpage

[Tim]

@nolimits4web Regarding the brand new app root component, what is the best location for storing global app data? I usually have some global (window) vars like login status, which I really would like to add to the correct place. Should I add these to app.data, or put them in app root view component data? Or is it just a developers preference?

[nolimits4web]

If you use app main component, then i will recommend NOT to use app.data and app.methods parameters. Put them to root component instead, and you can reference them from other components via $root, from anywhere else they will be accessible in app.rootComponent. For more global things, like when you need to reference something outside the app or when app is not yet initialized then i would go with global window. vars

[Tim]

@nolimits4web The docs say: “Also note that main app component will be mounted (added to DOM) BEFORE app initialization process finished.”

I currently try to load the main app component from a file using the new app parameter:

var app = new Framework7({
  ...
  componentUrl: './components/app.html',
  ...
});

While this works in browser environment, when run on iOS the console shows an error, and I think it is because Framework7 tries to fetch the app root component by XHR, before deviceready-event has fired and cordova-plugin-wkwebview-file-xhr is loaded:

I think I can confirm my thoughts, because when I run the var app = new Framework7(...) with the same parameters manually through the console after deviceready, everything works fine. And as expected, I don’t see the XHR request in the network inspector right now, as it is intercepted by the wkwebview XHR plugin.

Currently, I worked around this by wrapping the whole new Framework7(...) in a event handler which fires on deviceready.

[nolimits4web]

Makes sense, will move component loading to deviceready handler, thanks!

[Endreu]

estava com esse erro ontem mesmo, e para testar desinstalei o plugin cordova-plugin-wkwebview, e então funcionou corretamente.

[vg0x01]

Can you please elaborate more on setSwipeSet() or possibly show an example? I am getting the error: TypeError: sheet.setSwipeSet() is not a function. Is it meant to be setSwipeStep? Possibly a typo.

[nolimits4web]

Look at docs, typo here, it is setSwipeStep()

[vg0x01]

Docs also showing typo, sorry!