framework7io / framework7-vue Goto Github PK
View Code? Open in Web Editor NEWDeprecated! Build full featured iOS & Android apps using Framework7 & Vue
Home Page: http://framework7.io/vue/
License: MIT License
Deprecated! Build full featured iOS & Android apps using Framework7 & Vue
Home Page: http://framework7.io/vue/
License: MIT License
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 :-)
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
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 **
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.
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?
@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:
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.
with in strict mode
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>
...
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.
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.
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)
}
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)
}
}
When clicking into the search searchbar input box in the kitchen sink. the text gets zoomed in and the input box overflows the screen.
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.
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...
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?
Framework7 + vue it would be amazing!!!
this is vue + vuex + vue-router + vue-loader ?
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 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:
It looks like the material design is not properly initialised.
iOS theme works fine.
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
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.
on Framework7-Vue/src/components/searchbar.vue
blue: self.onBlur
must change to
blur: self.onBlur
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;
}
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'
.
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>
When put a popover in f7-page element(a components), It will covered by modal-overlay.
It must be put in index.html
?
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
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:
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.
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.
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:
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?
How do you feel about this "adapter" approach? Any feedback or concerns?
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.
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?
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.
I suggest replacing the built-in "router" with "vue-router"
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 ~
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?
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.
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
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
In particular:
npm
, but the docs only describe manually copying the JS file in dist
;kitchen-sink
for usage examples and to src/components
to see the props of each component would be helpfulReferring 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.
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
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
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!
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.
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;
# 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>
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>
Hello Framework7 community,
What i did:
git clone https://github.com/nolimits4web/Framework7-Vue.git
cd Framework7-Vue
npm i
npm run dev
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.
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!
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>
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;
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.