framework7io/framework7-vue

Deprecated! Build full featured iOS & Android apps using Framework7 & Vue

⛔️ DEPRECATED

This repo is deprecated and not mainted any more. Framework7-Vue development moved to main Framework7 repository. Please, don't open new issues and don't send any PRs to this repository

Framework7 Vue

Framework7 Vue combines power and simplicity of great Vue.js framework with flexibility and UI of Framework7 mobile framework to build mobile apps in even more easy and quick way.

Getting Started

• Installation Guide
• Starter App Templates
• App Layout
• Initialize App
• Navigation Router

framework7-vue's Issues

Duplicate Navbars in Swipable Tabs Page

On the Swipable Tabs page, it ends up that the children arrays of pageEl contain two references to the Navbar (one in fixedList and one in pageContentEl). In React, it only renders the navbar once, but it shows a warning in the console about the duplicate elements. Vue renders it once and shows no warnings. The current plan is to update the reactifyVue code to get rid of duplicate element and avoid the warning, but I thought I'd mention it here to see if it is worth fixing in case a future version of Vue works differently and produces inconsistent results.

Using Framework7 Vue in Framework7 React

@nolimits4web

Rather than manually porting the Vue components to React, I ended up writing an adapter that creates React components that leverage Framework7 Vue rendering logic and maps it to React. Check out the components in this branch to get a feel for what I'm talking about. It turns out that Vue 2.0 with template compilation ends up working very similarly to how React works, aside from some API differences. Just like React, every component is rendered via a createElement function.

The adapter isn't quite complete yet, but as you can see in the kitchen sink, several pages are implemented so far and it is working quite well aside from a few bugs that need fixing. I have Framework7 React using the Framework7 Vue NPM package, compiling it in a Gulp task, then importing the respective Vue components for each React component.

I initially started manually porting the Vue code over to React, but I quickly realized how bad of an idea it would be for long-term maintenance to have two codebases that are almost identical. With the "adapter" approach, as long as the public API of the Vue components don't change (events, tag name, etc.) and only internal component logic changes, it shouldn't require changing the React components in most cases. Some things like the integration with F7 core routing will need to be coded specifically for React, but nearly everything else can be accomplished with the adapter.

The adapter seems to work well for almost everything in Framework7 Vue. However, I have found that React is a bit more strict on things like security and data flow than Vue is. I have run into the following issues so far:

1. React does not accept strings on style attributes (to limit XSS attacks). For example, the Progressbar component is setting translate3d style attribute via a string, and it will not work in React. When the Vue code is modified so that the translate style attribute is specified in object instead of string format, it works just fine in React. I would think that specifying styles in object format would be a best practice in Vue as well because of XSS concerns.

2. React strongly discourages using innerHTML as strings to prevent XSS attacks. It requires using the "dangerouslySetInnerHTML" prop in React. There are several Vue components that are using domProps.innerHTML. I currently have this kind of working (you'll notice a bug on the cards kitchen sink page where an element rendered like this is missing), but I would prefer not to support it.

3. React is pretty strict about having a uni-directional data flow from parent components to child components via props and doesn't allow children access parent data. Vue, on the other hand, has $parent. I can probably get $parent working in the adapter, but it hasn't been very easy to do. The uni-directional data flow seems like a good idea in Vue too.

With all of this in mind, here are a couple of questions for you:

1. How do you feel about avoiding things like style strings, domProps, and $parent in the Vue version? Would you be willing to change components already using these, or at least accept pull requests?

2. How do you feel about this "adapter" approach? Any feedback or concerns?

3. What are your thoughts about tests? It would be great to have at least some unit tests in both libraries to prevent regressions and ensure the libraries stay in sync. React has libraries like Enzyme to do unit tests that ensure that different combinations of props render the correct output. I don't see anything like that that supports Vue 2, but maybe you know of a library. Another option is to do Selenium tests with BrowserStack or Sauce Labs (I think both are free for open source projects). I have always found Selenium tests to be brittle and slow, but maybe a limited number of tests running on the kitchen sinks or something would be good.

4. I saw you published docs for F7 Vue on the F7 website. Will you be adding the docs to GitHub so I can create docs for React? Are you open to adding the React docs to the F7 website once F7 React is stable and the docs are complete?

searchbar input zoom bug.

When clicking into the search searchbar input box in the kitchen sink. the text gets zoomed in and the input box overflows the screen.

1. before focus
   
2. after focus
   

i tested on an iphone 5c, ios 10.1 and 10.2 and in the ios simulator 10.1.
it works correct in chrome and safari desktop on mac os.

When i use the searchbar component standalone it does not happen. So feel free to close this, if it is only within the kitchen sink example.

Swipeable tabs do not have class page-content

Swipeable tabs need class page-content for proper display, but neither it's not done automatically nor is there any option. Workaround: <f7-tab class="page-content" ... works well.

<template>
  <f7-page no-page-content with-subnavbar>
    <f7-navbar title="Tabs" back-link="Back" sliding>
      <f7-subnavbar>
        <f7-buttons>
          <f7-button tab-link="#tab1" active>Tab 1</f7-button>
          <f7-button tab-link="#tab2">Tab 2</f7-button>
          <f7-button tab-link="#tab3">Tab 3</f7-button>
        </f7-buttons>
      </f7-subnavbar>
    </f7-navbar>
    <f7-tabs swipeable>
      <f7-tab id="tab1" active>
      ...

Using f7-views

When I used f7-views in the template, the chrome browser gotta crushed :( (can not operate the webpage and even can not close the browser)
Totally having no idea, plz help ~

v-model does not update switch

Similar to the input issue, v-model does not update the view after value change.

<f7-list-item>
  <f7-label>Switch</f7-label>
  <f7-input v-model="switchbox" name="switchbox" type="switch"></f7-input>
</f7-list-item>

module.exports = {
  data: function () {
    return {
      switchbox: ''
    }
  },
  mounted: function () {
    setTimeout(function() {
      this.switchbox = 'yes'
    }.bind(this), 3000)
  }
}

['yes'], 1 or true results in error, only string and number are allowed

select result not show in smart-selector with dynamic options

code:

<f7-list-item smart-select smart-select-back-on-select title="test">
        <select v-model="type">
          <option v-for="(v,i) in types" :value="i">{{v}}</option>
        </select>
</f7-list-item>

    data: function () {
      return {
        type: 0,
        types:{},
      }
    }
    
    mounted(){
        setTimeout(() => {this.types = ['1','2','3']},3000)
    }

Import from npm package is broken

The main value in package.json no longer reflects the path to the library, so it can't be imported using import Framework7Vue from 'framework7-vue'.

Kitchen Sink swiper missing pagination bullets

@bencompton and I are in the process of building a react version of the vue components and our own kitchen sink to mimic yours to keep the two in sync. Upon implementing the swiper component I noticed ours is displaying the pagination bullets for bottom two swiper components. The Framework7-Vue kitchen sink does not display these bullets. After reviewing the code in framework7 and stepping through everything it seems to me like these should be showing since you are passing in the pagination flag to the swiper component. You can view our working example in our kitchen sink here:

kitchen sink

preroute callback leaves orphaned components in tree

Same is when using router methods directly.

How do you get router from vue instance anyway? I patched view.vue onF7Init method by adding this on the bottom to be able to use it:

this.$root.router = self.f7View.router

Thank you!

about built-in router

I suggest replacing the built-in "router" with "vue-router"

error

install vue-cli
and then:

vue webpack demo
...

cd demo
npm install

and then add webpack config config:

module.exports = {
  ...
  resolve: {
    alias: {
        'framework7vue': path.resolve(__dirname, '../src/f7lib/framework7-vue.js')
    }
  }
}

in my main.js

import Vue from 'vue'
import Vuef7 from 'framework7vue'

Vue.ues(Vuef7)

npm run dev

here throw an Error

---

TypeError: undefined is not an object (evaluating 'window.Framework7.prototype')

// Protos
    var $$ = window.Dom7;
    Vue.prototype.Dom7 = $$;
    Vue.prototype.$$ = $$;
    Vue.prototype.Template7 = window.Template7;
    Vue.prototype.$t7 = window.Template7;
this line 🔴    Vue.prototype.$device = window.Framework7.prototype.device;  

kitchen-sink modals popup show only the first click

kitchen-sink/modals/popup
1.click popup button -> popup opened
2.click close button on the top right -> popup closed
3.click popup button -> popup opened a second and automatically closed (only overlay is showing)
4.click at overly -> overlay gone
5.click popup button -> nothing happened (the style=display:none)

** same problem for action button **

@click does not work in virtual list

click event do not fire in virtual list template

<!-- Templte 7 Virtual List Item Template -->
<t7-template>
  <f7-list-item @click="showDetail()" media-item link="#" :title="'{{title}}'" :subtitle="'{{subtitle}}' "></f7-list-item>
</t7-template>

fiddle here: https://jsfiddle.net/qqj5j303/2/

thanks for your wonderful work.

v-model does not update select

Similar to the input issue, v-model does not update the view after value change.

<f7-input v-model="gender" name="gender" type="select">
  <option value="male">Male</option>
  <option value="female">Female</option>
</f7-input>

module.exports = {
  data: function () {
    return {
      gender: 'male'
    }
  },
  mounted: function () {
    setTimeout(function() {
      this.gender = 'female'
    }.bind(this), 3000)
  }
}

How to trigger route change with javascript code

In the kitchensink example, route changes are achived with link attribute or "back" class name.

For example:

How can I force a route change using javascript code?

I searched source code and saw this.$emit to trigger event. However I can't find where these events are received and route gets changed in Framework7-Vue code base.

Virtual lists in popup can't initialize before search

Hello,

I trying to make virtual list in popup, but i can't initialize virtual list before search.
Fiddle: https://jsfiddle.net/k2z8jo9x/

Direct media lists are not performing for mobile. I trying to make phone code list with country flag and name (~180 list items). Like that: https://vgy.me/GZIoe7.png

Tabbar with labels not applying the tabbar-label class

While building the tabbar with labels example for our React kitchen sink I noticed in the Vue kitchen sink the font was not appearing the same as ours. After some digging it looks like the tabbar-label class is not getting applied to that span element due to it evaluating isTabbarLabel incorrectly in the link component code. I think this might be similar to the issue you fixed this morning for me in the swiper component with the props having various types in.

In the Link mixin there is a prop called tabLink that can be boolean or string. It is evaluating as an empty string when stepping through the code (line 10 of the link.vue), so I suspect it just needs a change in the link component code to handle this. Once I set it to true manually it works perfect.

v-model binds to value instead of checked with f7-input of type switch

I'm new to using Framework7 so I apologize if this isn't a bug but something I'm misunderstanding, but it seems when you use v-model for an f7-input of type switch the v-model binds to the value of the input element instead of the checked attribute so when you flick the switch there is no response.

Example Template:

<div id='app'>
  <f7-input type="switch" v-model="toggle"></f7-input>
  <div v-show="toggle === true">
    Toggle is true
  </div>
  <div v-show="toggle === false">
    Toggle is false
  </div>
</div>

Example Javascript:

new Vue({
  el: '#app',
  data: {
    toggle: true
  }
})

This will set the checkbox input value to true and false instead of checked.

Uncaught TypeError: Cannot set property 'isRootInsert' of undefined

i directly downloaded as zip file from github. extracted to directory. used
npm i
after that
npm run dev
build succeed, but in page this ss comes:
https://vgy.me/UORDhu.png

Uncaught TypeError: Cannot set property 'isRootInsert' of undefined

so it is not working.

Incompatible with Vue >=2.1.5 (Uncaught TypeError: _vm._h is not a function)

See conversation here: https://forum.vuejs.org/t/typeerror--vm--h-is-not-a-function-after-updating-vuejs-2-1-5-from-2-1/4032/7

Vue v2.1.5 renamed some internal variables, which causes distributables compiled with <=2.1.4 to be incompatible with Vue >=2.1.5.

I'd do it myself but npm run dist throws an exception for me when trying to transform view.vue; not sure what's up with that and I haven't had time to dig deeper.

Feedback

Framework7 + vue it would be amazing！！！
this is vue + vuex + vue-router + vue-loader ?

statusbar-overlay is not handled correctly in fullscreen mode

1. The f7-statusbar shouldn't be nested in the app div. Because the app div has a class ".framework7-root", and its position is relative. Therefore, if the f7-statusbar nsted in the app div, it will start at the top 20px, rather than 0px.

# http://framework7.io/vue/statusbar.html
<div id="app">
  <!-- Should be placed as the first child in the app root -->
  <f7-statusbar></f7-statusbar>
  ...
</div>

2. For the kitchen-sink example, I set to true, and move the f7-statusbar right after the body. But the login screen is still wrong because:

html.with-statusbar-overlay {
    .login-screen, .popup.tablet-fullscreen {
        height: ~"-webkit-calc(100% - 20px)";
        height: ~"calc(100% - 20px)";
        top: 20px;
    }
}

Again, the login screen is inside the app div, since the app begin at 20px, and it's position is relative, that extra 20px to the login-screen will cause a 40px top offset.

Below is a diff file how I get the issue of 2:

diff --git a/kitchen-sink/app.js b/kitchen-sink/app.js
index 963fce7..3cbcc2a 100644
--- a/kitchen-sink/app.js
+++ b/kitchen-sink/app.js
@@ -19,6 +19,7 @@ var app = new Vue({
       root: '#app', //Should be same as app el
       animateNavBackIcon: true,
       routes: Routes,
+      statusbarOverlay: true
     },
     // Custom App Data
     data: function () {
diff --git a/kitchen-sink/index.html b/kitchen-sink/index.html
index 8f8ee5f..077bdf5 100644
--- a/kitchen-sink/index.html
+++ b/kitchen-sink/index.html
@@ -9,9 +9,8 @@
   <link rel="stylesheet" href="framework7/framework7.ios.colors.min.css">
 </head>
 <body>
-
+  <div class="statusbar-overlay"></div>
   <div id="app">
-    <f7-statusbar></f7-statusbar>
     <f7-panel left reveal layout="dark" theme="pink">
       <f7-view navbar-fixed>
         <f7-pages>

store-data attribute missing for f7-list component

Correct me if I am wrong, but to enable form storage the f7-list component needs the attribute store-data.

Workaround: add class="store-data" to f7-list component.

npm run dev error

When I run 'npm run dev' I get the following error:

C:\f7vue\node_modules\cross-env\dist\index.js:58
var envVars = Object.assign({}, process.env);
^
TypeError: Object function Object() { [native code] } has no method 'assign'
at getCommandArgsAndEnvVars (C:\f7vue\node_modules\cross-env\dist\index.js:58:24)
at crossEnv (C:\f7vue\node_modules\cross-env\dist\index.js:22:35)
at Object. (C:\f7vue\node_modules\cross-env\bin\cross-env.js:3:19)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3

npm ERR! [email protected] dev: cross-env NODE_ENV=development webpack-dev-server --content-base kitchen-sink/ --open --inline --hot
npm ERR! Exit status 8

The tab component no 'id' props

hi, when i use the tab component, it cant set a id props. like this:

<f7-tabs>
    <f7-tab active>Tab1</f7-tab>
</f7-tabs>

i want add a id props:

<f7-tabs>
    <f7-tab tab1 active>Tab1</f7-tab>
    <!-- <div id="tab1" class="tab active">Tab1</div> -->
    <f7-tab tab2 active>Tab2</f7-tab>
</f7-tabs>

help @nolimits4web

Input with v-model fires update twice

In I have the following template

<f7-list>
  <f7-list-item>
    <f7-input type="text" :placeholder="text.placeholder" v-model="input"></f7-input>
  </f7-list-item>
</f7-list>

... and script

module.exports = {
  data: function() {
    return {
      input: ''
    },
   updated: function() {
      this.$nextTick(function() {
        if (this.$el.f7PageData) { 
          let dataStr = JSON.stringify(this.$data)
          console.warn('updated', dataStr)
        }
      }.bind(this)) 
    }
  }
}

Now, if I type into the input, updated() is fired twice - first with input data, then with initial / empty data - what do I wrong?

Property "view" in f7-list-button has no render

I try this

<f7-list>
  <f7-list-button view="#view3" href="/about/">Button 1</f7-list-button>
  <f7-list-button href="/about/">Button 2</f7-list-button>
</f7-list>

result was like

<div class="list-block">
  <ul>
     <li><a href="/about/" class="item-link list-button close-popover">Button 1</a></li>
    <li><a href="/about/" class="item-link list-button close-popover">Button 2</a></li>
  </ul>
</div>

it seem what data-view="#view3" lost

Vue key for list elements

Referring to Vue key parameter documentation, it should be incorporated within v-for loops, mainly used in list elements. Is there any way to add key element in v-for loops? data-key will be accepted, but key not so far.

V-Model doesn't update the view

Happy new Year Vladimir!

I have some trouble with v-model on an input field (Windows 7, Google Chrome)

After entering some text and click on "Save", the input value is updated in the DOM (empty string), but the updated value is not shown in the Browser.

Page component:

<template>

  <f7-page>
  
    <!-- Navbar and backlink -->
    <f7-navbar title="LocalStorage ToDo" back-link="Back" sliding></f7-navbar>
    
    <!-- Input field for new todo -->    
    <f7-list inset>    
      <f7-list-item>
        <div slot="inner-start"><f7-input type="text" placeholder="What is to do?" v-model="newTodo"></f7-input></div>
        <span slot="after" v-show="newTodo"><f7-link @click="saveTodo">Save</f7-link></span>
      </f7-list-item>      
    </f7-list>
    
  </f7-page>
  
</template>
<script>
  module.exports = {
  
    // Return data as a function
    data: function() {
      return {
        newTodo: ''
      }
    },
    
    // Methods
    methods: {
    
      // Save new todo
      saveTodo: function(e) {
        if (this.newTodo != '') {          
          this.$f7.alert(this.newTodo)
          this.newTodo = ''          
        }
      }
      
    }
    
  }
</script>

First page load for routing should be without animation

Routing works fine, but if I activate "pushState: true" and reload a sub page, the initial page load is animated. In my point of view this initial page load should be done without any animation.

Tiny suggestions/corrections for kitchen-sink

I noticed in a typo in index.html

  <link rel="stylesheet" href="framework7/framework7.min.ios.css">
  <link rel="stylesheet" href="framework7/framework7.min.ios.colors.css">

this should be:

<link rel="stylesheet" href="framework7/framework7.ios.min.css">
<link rel="stylesheet" href="framework7/framework7.ios.colors.min.css">

The min is at the wrong position :-)

how can i add click listener on virtual list

i add this code

<f7-list 
        id="search-list"
        class="searchbar-found"
        media-list
        virtual 
        inset 
        :virtual-items="mysub"
        :virtual-height="63"
        :virtual-search-all="searchAll"
        >
        <t7-template>
          <f7-list-item @click="onItemClick" media-item link="#" :title="'{{Username}}'" :subtitle="'left:{{Chips}}'">
          </f7-list-item>
        </t7-template>
      </f7-list>

try to handle each item's click,but it seems not work,it is version 0.5.7 i used

There is no cordova - framework7 - vue - webpack combination template

Hello,

So much people using framework7 with cordova, but framework7 not directly targeting cordova.

When developing mobile app with html, most time going to cordova plugin tests and merging things together. So i think we need to add cordova into templates too. I'll work on it.

Thank you for your extreme efford Vladimir. You are my super hero!

edit: I am so close to complete cordova, webpack, vue, framework7 template...

about this.$emit('tab:show', e);

hi @nolimits4web , in tab.vue component , i see the @tab:show="onTabShow" ，but i don't know much about it. When does @tab:show event trigger?

message-content padding-bottom reset to 0 when page has .no-tabbar class.

When enter the messages screen from a tabbar page, and also set the messages page to have a class of ".no-tabbar", the padding-bottom: 44px for the .messagebar~.page-content will be reset to 0px.

.page.no-tabbar .page-content, .page.no-toolbar .page-content {
    padding-bottom: 0;
}

.messagebar~.page-content {
    padding-bottom: 44px;
}

[How?] Handle overlays/modals in Vue way

So the question is, how do you think to make it better to handle open/close/create modal/overlay components (like popups, date pickers, pickers, modals, popover, )etc. in a Vue-way? What is the best practise with it

in framework7.vue.js line 252

what is the mean? in src/framework7.vue.js line 252. like this code:

// Route
if (self.$parent && self.$parent.$parent && self.$parent.$parent.$route) self.$route = self.$parent.$parent.$route;

@nolimits4web

customSearch is not working in SearchBar

I was able to use custom search in SearchBar in version 0.5. In version 0.7, this feature is broken.

    <app-search cancel-link="Cancel" search-list="#search-list"
      :customSearch="true"
      @searchbar:search="onSearch"
      @searchbar:enable="onEnable"
      @searchbar:disable="onDisable"
      @searchbar:clear="onClear">
    </app-search>

Popup not working after second open

Hello Framework7 community,

What i did:

1. git clone https://github.com/nolimits4web/Framework7-Vue.git
2. cd Framework7-Vue
3. npm i
4. npm run dev
5. Press Modals
6. Press Popup
7. Press Close
8. Press Popup again
9. Press Close
10. Press Popup again (and it's not working anymore)

There is a problem inside f7-vue-webpack template too. Close button not working: framework7io/framework7-template-vue-webpack#7

So there is a some problems in popup component i think.

popover covered by modal-overlay

When put a popover in f7-page element(a components), It will covered by modal-overlay.
It must be put in index.html?

Improve README

In particular:

• This library is installable using npm, but the docs only describe manually copying the JS file in dist;
• There aren't any "getting started" instructions
  • Is there an example/starter project we could link to for someone to use as a starting point?
  • Just a blurb explaining to go to kitchen-sink for usage examples and to src/components to see the props of each component would be helpful
• The way routing works could use explaining

Initial url does not load

Hello Vladimir,

To load at the beginning the last URL from localStorage, I pass the url value to the Vue view object like this:
<f7-view main :url="initialURL" :dynamic-navbar="true">
In the data object I define the value from the localStorage:
initialURL: localStorage.url ? '/' + localStorage.url : '/'
But there is nothing happen, so it seems it's overridden by the initial route function.
What's the best way to define the initial route by myself?

My workaround is to deactive pushState and then to load the page manually from root element after init:
this.$f7.getCurrentView().router.load({url: localStorage.url, animatePages: false});
But with pushState that will result in black pages.

Many thank in advance,

Dennis

Icons are to big in general

Minor issue - icons are displayed to big within text blocks.

<f7-block inner inset>
  <f7-icon f7="info" /> All the following examples and the side panels are in English only.
</f7-block>

error in framework7-vue.js

with in strict mode

hide-bars-on-scroll

hi,i copy the code of page "bars-hide" in to a new project from kitchen-sink,just use tag,and nav bar did not hide when i scroll the page,is this a bug?

List item events not working inside virtual list

Hello,

I tried to add @click event to f7-list-item inside of t7-template and virtual list and it's not worked.
Note: Searchbar not working in fiddle, but working on my local.
You can check from: https://jsfiddle.net/ungnjpz8/3/

When i add @click event to normal list-item (not inside of virtual list and t7-template) it works.

So problem related with virtual list or t7-template. I don't know how i can check t7-template or virtual list without t7-template.

Material design

Material design doesn't work for me but I cannot figure out why. I use Safari and Chrome on a MacBook and I notice the following deviations:

• hamburger icon is IOS style and left menu doesn't show the left panel
• floating action button doesn't appear

It looks like the material design is not properly initialised.

iOS theme works fine.

Framework7 - Vue - Webpack Cordova Template

Hello Vladimir and Framework7 community;

I made cordova template for framework7 - vue - webpack combination. Please check at: https://github.com/centrual/cordova-template-framework7-vue-webpack

Sample Installation: cordova create test_dir --template cordova-template-framework7-vue-webpack

Commands: You can use any cordova commands. Examples:

  cordova platform (add|rm) (android|ios|browser)
  cordova (run|build|prepare) (android|ios|browser) [-- --live-reload]

Have a great day!

Typo Errors

on Framework7-Vue/src/components/searchbar.vue

blue: self.onBlur
must change to
blur: self.onBlur