framework7-vue
Version:
Build full featured iOS & Android apps using Framework7 & Vue
1,390 lines (1,325 loc) • 109 kB
JavaScript
/**
* Framework7 Vue 0.6.2
* Build full featured iOS & Android apps using Framework7 & Vue
* http://www.framework7.io/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: December 17, 2016
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Framework7Vue = factory());
}(this, (function () {
var StatusBar = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"statusbar-overlay"})},
staticRenderFns: [],};
var Panel = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"panel",class:_vm.classesObject,style:({'display': _vm.opened ? 'block' : ''}),on:{"open":_vm.onOpen,"opened":_vm.onOpened,"close":_vm.onClose,"closed":_vm.onClosed}},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'side': String,
'effect': String,
'cover': Boolean,
'reveal': Boolean,
'left': Boolean,
'right': Boolean,
'theme': String,
'layout': String,
'opened': Boolean
},
computed: {
classesObject: function () {
var self = this;
var side = self.side || (self.left ? 'left' : 'right');
var effect = self.effect || (self.reveal ? 'reveal' : 'cover');
var co = {};
co['panel-' + side] = true;
co['panel-' + effect] = true;
if (self.layout) { co['layout-' + self.layout] = true; }
if (self.theme) { co['theme-' + self.theme] = true; }
co['active'] = self.opened;
return co;
}
},
watch: {
opened: function (opened) {
var self = this;
if (!self.$f7) { return; }
var side = self.side || (self.left ? 'left' : 'right');
if (opened) {
self.$f7.openPanel(side);
}
else {
self.$f7.closePanel(side);
}
}
},
mounted: function () {
var self = this;
var $$ = self.$$;
if (!$$) { return; }
var side = self.side || (self.left ? 'left' : 'right');
var effect = self.effect || (self.reveal ? 'reveal' : 'cover');
if (self.opened) {
$$('body').addClass('with-panel-' + side + '-' + effect);
}
},
methods: {
onOpen: function (event) {
this.$emit('open', event);
},
onOpened: function (event) {
this.$emit('opened', event);
},
onClose: function (event) {
this.$emit('open', event);
},
onClosed: function (event) {
this.$emit('closed', event);
},
onF7Init: function () {
var $$ = this.$$;
if (!$$) { return; }
if ($$('.panel-overlay').length === 0) {
$$('<div class="panel-overlay"></div>').insertBefore(this.$el);
}
}
}
};
var Views = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"views",class:_vm.classObject},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'navbar-fixed': Boolean,
'navbar-through': Boolean,
'toolbar-fixed': Boolean,
'toolbar-through': Boolean,
'tabbar-fixed': Boolean,
'tabbar-through': Boolean,
'tabbar-labels-fixed': Boolean,
'tabbar-labels-through': Boolean,
'tabs': Boolean,
'theme': String,
'layout': String
},
computed: {
classObject: function () {
var co = {
'tabs': this.tabs,
'navbar-fixed': this.navbarFixed || this.navbarThrough && this.$theme.material,
'navbar-through': this.navbarThrough,
'toolbar-fixed': this.toolbarFixed,
'toolbar-through': this.toolbarThrough,
'tabbar-fixed': this.tabbarFixed,
'tabbar-through': this.tabbarThrough,
'tabbar-labels-fixed': this.tabbarLabelsFixed,
'tabbar-labels-through': this.tabbarLabesThrough
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
}
};
var View = {
render: function (c) {
var hasNavbar, hasPages, pagesEl, navbarEl, self = this;
if (self.$slots.default) {
for (var i = 0; i < self.$slots.default.length; i++) {
var child = self.$slots.default[i];
if (child.tag && child.tag.indexOf('navbar') >= 0) { hasNavbar = true; }
if (child.tag && child.tag.indexOf('pages') >= 0) { hasPages = true; }
}
}
if (!hasPages) { pagesEl = c('f7-pages'); }
if (!hasNavbar && !self.$theme.material && self.dynamicNavbar) {
navbarEl = c('f7-navbar');
}
return c('div', {class: self.classesObject}, [navbarEl, pagesEl, self.$slots.default]);
},
beforeDestroy: function () {
var self = this;
if (self.f7View && self.f7View.destroy) { self.f7View.destroy(); }
},
props: {
'main': Boolean,
'navbar-fixed': Boolean,
'navbar-through': Boolean,
'toolbar-fixed': Boolean,
'toolbar-through': Boolean,
'tabbar-fixed': Boolean,
'tabbar-through': Boolean,
'tabbar-labels-fixed': Boolean,
'tabbar-labels-through': Boolean,
'tab': Boolean,
'active': Boolean,
'dynamic-navbar': Boolean,
'dom-cache': Boolean,
'links-view': [String, Object],
'reload-pages': Boolean,
'unique-history': Boolean,
'unique-history-ignore-get-parameters': Boolean,
'allow-duplicate-urls': Boolean,
'swipe-back-page': Boolean,
'swipe-back-page-animate-shadow': Boolean,
'swipe-back-page-animate-opacity': Boolean,
'swipe-back-page-active-area': Boolean,
'swipe-back-page-threshold': Boolean,
'animate-pages': Boolean,
'preload-previous-page': Boolean,
'params': Object,
'url': String,
'init': {
type: Boolean,
default: true
},
'theme': String,
'layout': String
},
computed: {
classesObject: function () {
var co = {
'view': true,
'view-main': this.main,
'active': this.active,
'tab': this.tab,
'navbar-fixed': this.navbarFixed || this.navbarThrough && this.$theme.material,
'navbar-through': this.navbarThrough,
'toolbar-fixed': this.toolbarFixed,
'toolbar-through': this.toolbarThrough,
'tabbar-fixed': this.tabbarFixed,
'tabbar-through': this.tabbarThrough,
'tabbar-labels-fixed': this.tabbarLabelsFixed,
'tabbar-labels-through': this.tabbarLabesThrough,
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
},
},
methods: {
onF7Init: function (f7) {
var self = this;
if (!self.init) { return; }
var propsData = self.$options.propsData;
var params = self.params || {
url: self.url,
dynamicNavbar: propsData.dynamicNavbar,
domCache: typeof propsData.domCache === 'undefined' ? true : propsData.domCache,
linksView: propsData.linksView,
reloadPages: propsData.reloadPages,
uniqueHistory: propsData.uniqueHistory,
uniqueHistoryIgnoreGetParameters: propsData.uniqueHistoryIgnoreGetParameters,
allowDuplicateUrls: propsData.allowDuplicateUrls,
swipeBackPage: propsData.swipeBackPage,
swipeBackPageAnimateShadow: propsData.swipeBackPageAnimateShadow,
swipeBackPageAnimateOpacity: propsData.swipeBackPageAnimateOpacity,
swipeBackPageActiveArea: propsData.swipeBackPageActiveArea,
swipeBackPageThreshold: propsData.swipeBackPageThreshold,
animatePages: propsData.animatePages,
preloadPreviousPage: propsData.preloadPreviousPage,
};
self.f7View = f7.addView(self.$el, params);
if(self.f7View && self.f7View.pagesContainer.querySelectorAll('.page').length === 0) {
self.f7View.router.load({url: self.url, reload: true});
}
},
onSwipeBackMove: function (event) {
this.$emit('swipeBackMove', event, event.detail);
},
onSwipeBackBeforeChange: function (event) {
this.$emit('swipeBackBeforeChange', event, event.detail);
},
onSwipeBackAfterChange: function (event) {
this.$emit('swipeBackAfterChange', event, event.detail);
},
onSwipeBackBeforeReset: function (event) {
this.$emit('swipeBackBeforeReset', event, event.detail);
},
onSwipeBackAfterReset: function (event) {
this.$emit('swipeBackAfterReset', event, event.detail);
}
}
};
var Pages = {
render: function (c) {
var self = this;
var pages = [];
for (var pageId in self.pages) {
var page = self.pages[pageId];
pages.push(c(page.component, {tag: 'component'}));
}
return c('div',
{
staticClass:"pages",
ref: 'pages',
on: {
pageBeforeRemove: self.onPageBeforeRemove
}
},
[
self.$slots.default,
pages
]
)
},
props: {
'navbar-fixed': Boolean,
'navbar-through': Boolean,
'toolbar-fixed': Boolean,
'toolbar-through': Boolean,
'tabbar-fixed': Boolean,
'tabbar-through': Boolean,
'tabbar-labels-fixed': Boolean,
'tabbar-labels-through': Boolean,
'theme': String,
'layout': String
},
data: function () {
return {
pages: {}
}
},
computed: {
classesObject: function () {
var co = {
'navbar-fixed': this.navbarFixed || this.navbarThrough && this.$theme.material,
'navbar-through': this.navbarThrough,
'toolbar-fixed': this.toolbarFixed,
'toolbar-through': this.toolbarThrough,
'tabbar-fixed': this.tabbarFixed,
'tabbar-through': this.tabbarThrough,
'tabbar-labels-fixed': this.tabbarLabelsFixed,
'tabbar-labels-through': this.tabbarLabesThrough
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
},
methods: {
onPageBeforeRemove: function (e) {
var this$1 = this;
var idToRemove;
for (var id in this$1.pages) {
if (e.target === this$1.pages[id].pageElement) {
idToRemove = id;
break;
}
}
if (idToRemove) { this.$set(this.pages, idToRemove, {}); }
}
}
};
var Page = {
render: function (c) {
var pageEl, pageContentEl, ptrEl, infiniteEl, fixedList = [], staticList = [];
var self = this;
if (self.pullToRefresh && (self.ptrLayer && self.pullToRefreshLayer)) {
ptrEl = c('div', {class: {'pull-to-refresh-layer': true}} ,[
c('div', {class: {'preloader': true}}),
c('div', {class: {'pull-to-refresh-arrow': true}})
]);
}
if (self.infiniteScroll && self.infiniteScrollPreloader) {
infiniteEl = c('div', {class: {'infinite-scroll-preloader': true}} ,[
c('div', {class: {'preloader': true}})
]);
}
var fixedTags = ('navbar toolbar tabbar subnavbar searchbar messagebar fab speed-dial floating-button').split(' ');
var tag, child, withSubnavbar, withMessages, withSearchbar;
if (self.$slots.default) {
for (var i = 0; i < self.$slots.default.length; i++) {
child = self.$slots.default[i];
tag = child.tag;
if (!tag) {
staticList.push(child);
continue;
}
var isFixed = false;
if (tag.indexOf('messages') >= 0) { withMessages = true; }
if (tag.indexOf('subnavbar') >= 0) { withSubnavbar = true; }
if (tag.indexOf('searchbar') >= 0) { withSearchbar = true; }
for (var j = 0; j < fixedTags.length; j++) {
if (tag.indexOf(fixedTags[j]) >= 0) {
isFixed = true;
}
}
if (isFixed) { fixedList.push(child); }
else { staticList.push(child); }
}
}
if (fixedList.length > 0 && withSearchbar) {
fixedList.push(c('div', {class:{'searchbar-overlay': true}}));
}
if (withMessages) { self.classesObjectPageContent['messages-content'] = true; }
if (!self.noPageContent) {
pageContentEl = c('div', {
staticClass: 'page-content',
class: self.classesObjectPageContent,
attrs: {
'data-ptr-distance': self.pullToRefreshDistance || self.ptrDistance,
'data-distance': self.infiniteScrollDistance
},
on: {
pullstart: self.onPullstart,
pullmove: self.onPullmove,
pullend: self.onPullend,
refresh: self.onRefresh,
refreshdone: self.onRefreshdone,
infinite: self.onInfinite
},
}, (self.infiniteScroll === 'top' ? [ptrEl, infiniteEl, self.$slots.static, staticList] : [ptrEl, self.$slots.static, staticList, infiniteEl]));
}
else {
pageContentEl = [self.$slots.default];
}
fixedList.push(self.$slots.fixed);
if (withSubnavbar) { self.classesObjectPage['with-subnavbar'] = true; }
pageEl = c('div', {
staticClass: 'page',
class: self.classesObjectPage,
attrs: {
'data-page': self.name
},
on: {
pageBeforeInit: self.onPageBeforeInit,
pageInit: self.onPageInit,
pageReinit: self.onPageReinit,
pageBeforeAnimation: self.onPageBeforeAnimation,
pageAfterAnimation: self.onPageAfterAnimation,
pageBeforeRemove: self.onPageBeforeRemove,
pageBack: self.onPageBack,
pageAfterBack: self.onPageAfterBack
}
}, [fixedList, pageContentEl]);
return pageEl;
},
props: {
'name': String,
'cached': Boolean,
'navbar-fixed': Boolean,
'navbar-through': Boolean,
'toolbar-fixed': Boolean,
'toolbar-through': Boolean,
'tabbar-fixed': Boolean,
'tabbar-through': Boolean,
'tabbar-labels-fixed': Boolean,
'tabbar-labels-through': Boolean,
'with-subnavbar': Boolean,
'subnavbar': Boolean,
'no-navbar': Boolean,
'no-toolbar': Boolean,
'no-tabbar': Boolean,
'pull-to-refresh': Boolean,
'pull-to-refresh-distance': Number,
'ptr-distance': Number,
'pull-to-refresh-layer': {
type: Boolean,
default: true
},
'ptr-layer': {
type: Boolean,
default: true
},
'infinite-scroll': [Boolean, String],
'infinite-scroll-distance': Number,
'infinite-scroll-preloader': {
type: Boolean,
default: true
},
'hide-bars-on-scroll': Boolean,
'hide-navbar-on-scroll': Boolean,
'hide-toolbar-on-scroll': Boolean,
'hide-tabbar-on-scroll': Boolean,
'messages': Boolean,
'tabs': Boolean,
'no-page-content': Boolean,
'login-screen': Boolean,
'theme': String,
'layout': String,
'no-swipeback': Boolean
},
computed: {
classesObjectPage: function () {
var co = {
'cached': this.cached,
'navbar-fixed': this.navbarFixed || this.navbarThrough && this.$theme.material,
'navbar-through': this.navbarThrough,
'toolbar-fixed': this.toolbarFixed,
'toolbar-through': this.toolbarThrough,
'tabbar-fixed': this.tabbarFixed,
'tabbar-through': this.tabbarThrough,
'tabbar-labels-fixed': this.tabbarLabelsFixed,
'tabbar-labels-through': this.tabbarLabesThrough,
'with-subnavbar': this.subnavbar || this.withSubnavbar,
'no-navbar': this.noNavbar,
'no-toolbar': this.noToolbar,
'no-tabbar': this.noTabbar,
'tabs': this.tabs,
'no-swipeback': this.noSwipeBack
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
},
classesObjectPageContent: function () {
return {
'pull-to-refresh-content': this.pullToRefresh,
'infinite-scroll': this.infiniteScroll,
'infinite-scroll-top': this.infiniteScroll === 'top',
'hide-bars-on-scroll': this.hideBarsOnScroll,
'hide-navbar-on-scroll': this.hideNavbarOnScroll,
'hide-toolbar-on-scroll': this.hideToolbarOnScroll,
'hide-tabbar-on-scroll': this.hideTabbarOnScroll,
'messages-content': this.messages,
'login-screen-content': this.loginScreen
}
}
},
methods: {
onPullstart: function (event) {
this.$emit('pullstart', event);
},
onPullmove: function (event) {
this.$emit('pullmove', event);
},
onPullend: function (event) {
this.$emit('pullend', event);
},
onRefresh: function (event) {
this.$emit('refresh', event, event.detail.done);
},
onRefreshdone: function (event) {
this.$emit('refreshdone', event);
},
onInfinite: function (event) {
this.$emit('infinite', event);
},
onPageBeforeInit: function (event) {
this.f7PageData = event.detail.page;
this.$emit('pageBeforeInit', event, event.detail.page);
},
onPageInit: function (event) {
this.$emit('pageInit', event, event.detail.page);
},
onPageReinit: function (event) {
this.$emit('pageReinit', event, event.detail.page);
},
onPageBeforeAnimation: function (event) {
this.$emit('pageBeforeAnimation', event, event.detail.page);
},
onPageAfterAnimation: function (event) {
this.$emit('pageAfterAnimation', event, event.detail.page);
},
onPageBeforeRemove: function (event) {
this.$emit('pageBeforeRemove', event, event.detail.page);
},
onPageBack: function (event) {
this.$emit('pageBack', event, event.detail.page);
},
onPageAfterBack: function (event) {
this.$emit('pageAfterBack', event, event.detail.page);
}
}
};
var PageContent = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"page-content",class:_vm.classesObject},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'tab': Boolean,
'active': Boolean
},
computed: {
classesObject: function () {
var self = this;
return {
'tab': self.tab,
'active': self.active
}
}
}
};
var Navbar = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"navbar",class:_vm.classesObject},[_vm._t("before-inner"),_vm._v(" "),_c('div',{staticClass:"navbar-inner"},[(_vm.backLink)?_c('f7-nav-left',{attrs:{"back-link":_vm.backLink,"sliding":_vm.sliding}}):_vm._e(),_vm._v(" "),(_vm.title)?_c('f7-nav-center',{attrs:{"title":_vm.title,"sliding":_vm.sliding}}):_vm._e(),_vm._v(" "),_vm._t("default")],true),_vm._v(" "),_vm._t("after-inner")],true)},
staticRenderFns: [],
updated: function () {
var self = this;
self.$nextTick(function () {
self.$f7.sizeNavbars();
});
},
props: {
backLink: [Boolean, String],
sliding: Boolean,
title: String,
theme: String,
layout: String
},
computed: {
classesObject: function () {
var co = {};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
}
};
var NavCenter = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"center",class:{sliding:_vm.sliding}},[_vm._t("default",[_vm._v(_vm._s(_vm.title))])],true)},
staticRenderFns: [],
props: {
sliding: Boolean,
title: String
}
};
var NavLeft = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"left",class:{sliding:_vm.sliding}},[(_vm.backLink)?_c('f7-link',{class:{'icon-only': (_vm.backLink === true || _vm.backLink && _vm.$theme.material)},attrs:{"href":"#","back":"","icon":"icon-back","text":_vm.backLink !== true && !_vm.$theme.material ? _vm.backLink : undefined}}):_vm._e(),_vm._v(" "),_vm._t("default")],true)},
staticRenderFns: [],
props: {
backLink: [Boolean, String],
sliding: Boolean
}
};
var NavRight = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"right",class:{sliding:_vm.sliding}},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
sliding: Boolean
}
};
var Subnavbar = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"subnavbar",class:_vm.sliding ? 'sliding' : false},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
sliding: Boolean
}
};
var Toolbar = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"toolbar",class:_vm.classesObject},[_vm._t("before-inner"),_vm._v(" "),_c('div',{staticClass:"toolbar-inner"},[_vm._t("default")],true),_vm._v(" "),_vm._t("after-inner")],true)},
staticRenderFns: [],
props: {
bottom: Boolean,
tabbar: Boolean,
labels: Boolean,
scrollable: Boolean,
theme: String,
layout: String
},
computed: {
classesObject: function () {
var co = {
'toolbar-bottom': this.bottom,
'tabbar': this.tabbar,
'tabbar-labels': this.labels,
'tabbar-scrollabel': this.scrollable,
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
}
};
var Card = {
render: function (c) {
var self = this;
var headerEl, contentEl, contentChildEl, footerEl;
if (self.title) {
headerEl = c('f7-card-header', {domProps: {innerHTML: self.title}});
}
if (self.content) {
contentChildEl = c('div', {domProps: {innerHTML: self.content}});
contentEl = c('f7-card-content', {}, [contentChildEl]);
}
if (self.footer) {
footerEl = c('f7-card-footer', {domProps: {innerHTML: self.footer}});
}
return c('div', {staticClass: 'card'}, [headerEl, contentEl, footerEl, self.$slots.default]);
},
props: ['title', 'content', 'footer']
};
var CardHeader = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"card-header"},[_vm._t("default")],true)},
staticRenderFns: [],};
var CardFooter = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"card-footer"},[_vm._t("default")],true)},
staticRenderFns: [],};
var CardContent = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"card-content"},[_c('div',{staticClass:"card-content-inner"},[_vm._t("default")],true)])},
staticRenderFns: [],};
var ContentBlock = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"content-block",class:_vm.classesObject},[(_vm.inner)?_c('div',{staticClass:"content-block-inner"},[_vm._t("default")],true):_vm._t("default"),_vm._v(" ")],true)},
staticRenderFns: [],
props: {
'inset': Boolean,
'inner': Boolean,
'tabs': Boolean,
'tab': Boolean,
'active': Boolean,
'no-hairlines': Boolean,
'no-hairlines-between': Boolean,
},
computed: {
classesObject: function () {
var self = this;
return {
'inset': self.inset,
'tabs': self.tabs,
'tab': self.tab,
'active': self.active,
'no-hairlines': self.noHairlines,
'no-hairlines-between': self.noHairlinesBetween,
}
}
}
};
var ContentBlockTitle = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"content-block-title"},[_vm._t("default")],true)},
staticRenderFns: [],};
var Badge = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('span',{staticClass:"badge",class:_vm.color ? 'color-' + _vm.color : ''},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'color': String
}
};
var Icon = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('i',{staticClass:"icon",class:_vm.classesObject,style:({'font-size':_vm.sizeComputed})},[_vm._v(_vm._s(_vm.iconTextComputed)),_vm._t("default")],true)},
staticRenderFns: [],
props: {
'color': String,
'material': String, //Material Icons
'f7': String, //Framework7 Icons
'ion': String, //Ionicons
'fa': String, //Font Awesome
'icon': String, //Custom
'if-material': String,
'if-ios': String,
'size': [String, Number]
},
computed: {
sizeComputed: function () {
var self = this;
var size = self.size;
if (typeof size === 'number' || parseFloat(size) === size * 1) {
size = size + 'px';
}
return size;
},
iconTextComputed: function () {
var self = this;
var text = self.material || self.f7;
if (self.ifMaterial && self.$theme.material && (self.ifMaterial.indexOf('material:')>=0 || self.ifMaterial.indexOf('f7:')>=0)) {
text = self.ifMaterial.split(':')[1];
}
else if (self.ifIos && self.$theme.ios && (self.ifIos.indexOf('material:')>=0 || self.ifIos.indexOf('f7:')>=0)) {
text = self.ifIos.split(':')[1];
}
return text;
},
classesObject: function () {
var co = {};
var self = this;
if (self.ifMaterial || self.ifIos) {
var parts = self[self.$theme.material ? 'ifMaterial' : 'ifIos'].split(':');
var prop = parts[0];
var value = parts[1];
if (prop === 'material' || prop === 'fa' || prop === 'f7') {
co['fa'] = prop === 'fa';
co['material-icons'] = prop === 'material';
co['f7-icons'] = prop === 'f7';
}
if (prop === 'fa' || prop === 'ion') {
co[prop + '-' + value] = true;
}
if (prop === 'icon') {
co[value] = true;
}
}
else {
co = {
'material-icons': this.material,
'f7-icons': this.f7,
'fa': this.fa
};
if (this.ion) { co['ion-' + this.ion] = true; }
if (this.fa) { co['fa-' + this.fa] = true; }
if (this.icon) { co[this.icon] = true; }
}
if (this.color) { co['color-' + this.color] = true; }
return co;
}
}
};
var List = {
beforeDestroy: function () {
var self = this;
if (!(self.virtual && self.virtualInit && self.f7VirtualList)) { return; }
if (self.f7VirtualList.destroy) { self.f7VirtualList.destroy(); }
},
watch: {
virtualItems: function () {
// Items Updated
var self = this;
if (!(self.virtual && self.virtualInit && self.f7VirtualList)) { return; }
self.f7VirtualList.replaceAllItems(self.virtualItems);
},
},
render: function (c) {
var blockEl, blockChildren;
var self = this;
blockChildren = self.grouped ? self.$slots.default : c('ul', {}, self.$slots.default);
var outOfList = [], ulSlots = [];
if (self.$slots.default) {
for (var i = 0; i < self.$slots.default.length; i++) {
var tag = self.$slots.default[i].tag;
if (tag && !(tag == 'li' || tag.indexOf('list-item')>=0 || tag.indexOf('list-button')>=0)) {
outOfList.push(self.$slots.default[i]);
}
else {
ulSlots.push(self.$slots.default[i]);
}
}
}
blockEl = c(
self.form ? 'form' : 'div',
{
staticClass: 'list-block',
'class': {
'inset': self.inset,
'media-list': self.mediaList,
'sortable': self.sortable,
'accordion-list': self.accordion,
'contacts-block': self.contacts,
'virtual-list': self.virtual,
'tab': self.tab,
'active': self.active,
'no-hairlines': self.noHairlines,
'no-hairlines-between': self.noHairlinesBetween
},
on: {
open: self.onOpen,
close: self.onClose,
sort: self.onSort
}
},
[
ulSlots.length > 0 ? [c('ul', {}, ulSlots), outOfList] : outOfList
]
);
return blockEl;
},
props: {
'inset': Boolean,
'media-list': Boolean,
'grouped': Boolean,
'sortable': Boolean,
'form': Boolean,
'label': String,
'accordion': Boolean,
'contacts': Boolean,
'no-hairlines': Boolean,
'no-hairlines-between': Boolean,
// Tab
'tab': Boolean,
'active': Boolean,
// Virtual List
'virtual': Boolean,
'virtual-init': {
type: Boolean,
default: true
},
'virtual-items': [Array, Object],
'virtual-height': [Number, Function],
'virtual-rows-before': Number,
'virtual-rows-after': Number,
'virtual-cols': {
type: Number,
default: 1
},
'virtual-cache': {
type: Boolean,
default: true
},
'virtual-filtered-only': {
type: Boolean,
default: false
},
'virtual-search-by-item': Function,
'virtual-search-all': Function,
'virtual-render-item': Function
},
methods: {
onOpen: function (event) {
this.$emit('open', event);
},
onClose: function (event) {
this.$emit('close', event);
},
onSort: function (event) {
this.$emit('sort', event, event.detail);
},
onF7Init: function (f7) {
var self = this;
// Init Virtual List
if (!(self.virtual && self.virtualInit)) { return; }
var $$ = self.$$;
var template = $$(self.$el).find('script').html();
if (!template && !self.virtualRenderItem) { return; }
if (template) { template = self.$t7.compile(template); }
self.f7VirtualList = f7.virtualList(self.$el, {
items: self.virtualItems || [],
template: template,
height: self.virtualHeight || undefined,
cols: self.virtualCols,
rowsBefore: self.virtualRowsBefore || undefined,
rowsAfter: self.virtualRowsAfter || undefined,
showFilteredItemsOnly: self.virtualFilteredOnly,
searchByItem: self.virtualSearchByItem,
searchAll: self.virtualSearchAll,
renderItem: self.virtualRenderItem,
onItemBeforeInsert: function (list, item) {
self.$emit('virtualItemBeforeInsert', list, item);
},
onBeforeClear: function (list, fragment) {
self.$emit('virtualBeforeClear', list, fragment);
},
onItemsBeforeInsert: function (list, fragment) {
self.$emit('virtualItemsBeforeInsert', list, fragment);
},
onItemsAfterInsert: function (list, fragment) {
self.$emit('virtualItemsAfterInsert', list, fragment);
},
});
}
}
};
var ListGroup = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"list-block-group"},[_c('ul',[_vm._t("default")],true)])},
staticRenderFns: [],
props: {
'media-list': Boolean,
'media-list-computed': Boolean,
'sortable': Boolean,
'sortable-computed': Boolean
},
computed: {
sortableComputed: function () {
return this.sortable || this.$parent.sortable;
},
mediaListComputed: function () {
return this.mediaList || this.$parent.mediaList;
}
},
data: function () {
return {};
}
};
var ListItem = {
render: function (c) {
var liChildren, linkEl, itemContentEl;
var self = this;
// Item Content
itemContentEl = c('f7-list-item-content', {
props: {
'title': self.title,
'text': self.text,
'media': self.media,
'subtitle': self.subtitle,
'after': self.after,
'badge': self.badge,
'badge-color': self.badgeColor,
'media-list': self.mediaListComputed,
'accordion-item': self.accordionItem,
'checkbox': self.checkbox,
'checked': self.checked,
'radio': self.radio,
'name': self.name,
'value': self.value,
'readonly': self.readonly,
'required': self.required,
'disabled': self.disabled
},
on: (self.link || self.accordionItem || self.smartSelect) ? {} : {click: self.onClick, change: self.onChange}
}, [self.$slots['content-start'], self.$slots.content, self.$slots['media-start'], self.$slots.media, self.$slots['inner-start'], self.$slots.inner, self.$slots['after-start'], self.$slots.after, self.$slots.default]);
// Link
if (self.link || self.accordionItem || self.smartSelect) {
linkEl = c('a', {
attrs: {
href: self.link === true || self.accordionItem || self.smartSelect ? '#' : self.link,
'data-searchbar': self.smartSelectSearchbar,
'data-searchbar-paceholder': self.smartSelectSearchbarPlaceholder,
'data-searchbar-cancel': self.smartSelectSearchbarCancel,
'data-page-title': self.smartSelectPageTitle,
'data-back-text': self.smartSelectBackText,
'data-back-on-select': self.smartSelectBackOnSelect,
'data-virtual-list': self.smartSelectVirtualList,
'data-virtual-list-height': self.smartSelectVirtualListHeight,
'data-open-in': self.smartSelectOpenIn,
'data-navbar-theme': self.smartSelectNavbarTheme,
'data-form-theme': self.smartSelectFormTheme,
'data-view': typeof self.linkView === 'string' ? self.linkView : false,
'data-panel': typeof self.linkOpenPanel === 'string' ? self.linkOpenPanel : false,
'data-popup': typeof self.linkOpenPopup === 'string' ? self.linkOpenPopup : false,
'data-popover': typeof self.linkOpenPopover === 'string' ? self.linkOpenPopover : false,
'data-picker': typeof self.linkOpenPicker === 'string' ? self.linkOpenPicker : false,
'data-login-screen': typeof self.linkOpenLoginScreen === 'string' ? self.linkOpenLoginScreen : false,
'data-sortable': typeof self.linkOpenSortable === 'string' ? self.linkOpenSortable : (typeof self.linkToggleSortable === 'string' ? self.linkToggleSortable : false),
'data-force': self.linkForce,
'data-reload': self.linkReload,
'data-animate-pages': self.linkAnimatePages,
'data-ignore-cache': self.linkIgnoreCache,
'data-page-name': typeof self.linkPageName === 'string' ? self.linkPageName : false,
'data-template': typeof self.linkTemplate === 'string' ? self.linkTemplate : false,
},
'class': {
'item-link': true,
'external': self.linkExternal,
'back': self.linkBack,
'no-fastclick': self.linkNoFastclick,
'smart-select': self.smartSelect,
'close-panel': self.linkClosePanel,
'open-panel': self.linkOpenPanel,
'close-popup': self.linkClosePopup,
'open-popup': self.linkOpenPopup,
'close-popover': self.linkClosePopover,
'open-popover': self.linkOpenPopover,
'close-picker': self.linkClosePicker,
'open-picker': self.linkOpenPicker,
'close-login-screen': self.linkCloseLoginScreen,
'open-login-screen': self.linkOpenLoginScreen,
'close-sortable': self.linkCloseSortable,
'open-sortable': self.linkOpenSortable,
'toggle-sortable': self.linkToggleSortable,
},
on: {
click: self.onClick
}
}, [itemContentEl]);
}
if (self.dividerOrGroupTitle) {
liChildren = [c('span', self.$slots.default || self.title)];
}
else {
var linkItemEl = (self.link || self.smartSelect || self.accordionItem) ? linkEl : itemContentEl;
if (self.swipeout) {
liChildren = [c('div', {'class':{'swipeout-content': true}}, [linkItemEl])];
}
else {
liChildren = [linkItemEl];
}
if (self.sortableComputed) {
liChildren.push(c('div', {'class': {'sortable-handler': true}}));
}
if (self.swipeout || self.accordionItem) {
liChildren.push(self.$slots.default);
}
liChildren.unshift(self.$slots['root-start']);
liChildren.push(self.$slots.root);
}
return c(
'li',
{
'class': {
'item-divider' : self.divider,
'list-group-title': self.groupTitle,
'swipeout': self.swipeout,
'accordion-item': self.accordionItem
},
on: {
open: self.onOpen,
opened: self.onOpened,
close: self.onClose,
closed: self.onClosed,
delete: self.onDelete,
deleted: self.onDeleted,
swipeout: self.onSwipeout
}
},
liChildren
)
},
props: {
'title': [String, Number],
'text': [String, Number],
'media': String,
'subtitle': [String, Number],
// Link Props
'link': [String, Boolean],
'link-external': Boolean,
'link-back': Boolean,
'link-no-fastclick': Boolean,
'link-force': Boolean,
'link-reload': Boolean,
'link-animate-pages': Boolean,
'link-ignore-cache': Boolean,
'link-page-name': String,
'link-template': String,
'link-view': String,
'link-open-panel': [String, Boolean],
'link-close-panel': Boolean,
'link-open-popup': [String, Boolean],
'link-close-popup': Boolean,
'link-open-popover': [String, Boolean],
'link-close-popover': Boolean,
'link-open-login-screen': [String, Boolean],
'link-close-login-screen': Boolean,
'link-open-picker': [String, Boolean],
'link-close-picker': Boolean,
'after': [String, Number],
'badge': [String, Number],
'badge-color': String,
'media-item': Boolean,
'media-list-item': Boolean,
'media-list': Boolean,
'media-list-computed': Boolean,
'divider': Boolean,
'group-title': Boolean,
'divider-or-group-title': Boolean,
'swipeout': Boolean,
'sortable': Boolean,
'sortable-computed': Boolean,
'accordion-item': Boolean,
// Smart Select
'smart-select': Boolean,
'smart-select-searchbar': Boolean,
'smart-select-searchbar-paceholder': String,
'smart-select-searchbar-cancel': String,
'smart-select-page-title': String,
'smart-select-back-text': String,
'smart-select-back-on-select': Boolean,
'smart-select-virtual-list': Boolean,
'smart-select-virtual-list-height': Number,
'smart-select-open-in': String, //popup or picker or page
'smart-select-navbar-theme': String,
'smart-select-form-theme': String,
// Inputs
'checkbox': Boolean,
'checked': Boolean,
'radio': Boolean,
'name': String,
'value': [String, Number],
'readonly': Boolean,
'required': Boolean,
'disabled': Boolean
},
computed: {
dividerOrGroupTitle: function () {
return this.divider || this.groupTitle;
},
sortableComputed: function () {
return this.sortable || this.$parent.sortable || this.$parent.sortableComputed;
},
mediaListComputed: function () {
return this.mediaList || this.mediaItem || this.$parent.mediaList || this.$parent.mediaListComputed;
}
},
methods: {
onClick: function (event) {
this.$emit('click', event);
},
onDeleted: function (event) {
this.$emit('deleted', event);
},
onDelete: function (event) {
this.$emit('delete', event);
},
onClose: function (event) {
this.$emit('close', event);
},
onClosed: function (event) {
this.$emit('closed', event);
},
onOpen: function (event) {
this.$emit('open', event);
},
onOpened: function (event) {
this.$emit('opened', event);
},
onSwipeout: function (event) {
this.$emit('swipeout', event);
},
onChange: function (event) {
this.$emit('change', event);
}
}
};
var ListItemContent = {
render: function (c) {
var titleEl, afterWrapEl, afterEl, badgeEl, innerEl, titleRowEl, subtitleEl, textEl, mediaEl, inputEl, inputIconEl;
var self = this;
var slotsContentStart = [],
slotsContent = [],
slotsInnerStart = [],
slotsInner = [],
slotsAfterStart = [],
slotsAfter = [],
slotsMediaStart = [],
slotsMedia = [];
if (self.$slots.default && self.$slots.default.length > 0) {
for (var i = 0; i < self.$slots.default.length; i++) {
var slotName = self.$slots.default[i].data ? self.$slots.default[i].data.slot : undefined;
if (slotName && slotName === 'content-start') { slotsContentStart.push(self.$slots.default[i]); }
if (slotName && slotName === 'content') { slotsContent.push(self.$slots.default[i]); }
if (slotName && slotName === 'after-start') { slotsAfterStart.push(self.$slots.default[i]); }
if (slotName && slotName === 'after') { slotsAfter.push(self.$slots.default[i]); }
if (slotName && slotName === 'media-start') { slotsMediaStart.push(self.$slots.default[i]); }
if (slotName && slotName === 'media') { slotsMedia.push(self.$slots.default[i]); }
if (slotName && slotName === 'inner-start') { slotsInnerStart.push(self.$slots.default[i]); }
if (!slotName || slotName && slotName === 'inner') { slotsInner.push(self.$slots.default[i]); }
}
}
// Input
if (self.radio || self.checkbox) {
inputEl = c('input', {
attrs: {
value: self.value,
name: self.name,
checked: self.checked,
readonly: self.readonly,
disabled: self.disabled,
required: self.required,
type: self.radio ? 'radio' : 'checkbox'
},
on: {
change: self.onChange
}
});
}
// Media
if (self.media || self.checkbox || self.radio && self.$theme.material || slotsMediaStart.length || slotsMedia.length) {
if (self.checkbox || self.radio && self.$theme.material) {
if (self.media) {
inputIconEl = '<i class="icon icon-form-' +(self.radio ? 'radio' : 'checkbox')+ '"></i>';
mediaEl = c('div', {'class': {'item-media': true}, domProps: {innerHTML: inputIconEl + (self.media ? self.media : '')}});
}
else {
var iconClasses = {'icon': true};
iconClasses['icon-form-' + (self.radio ? 'radio' : 'checkbox')] = true;
inputIconEl = c('i', {'class': iconClasses});
mediaEl = c('div', {'class': {'item-media': true}}, [slotsMediaStart, inputIconEl, slotsMedia]);
}
}
else {
if (self.media) { mediaEl = c('div', {staticClass: 'item-media', domProps: {innerHTML: self.media}}); }
else { mediaEl = c('div', {staticClass: 'item-media'}, [slotsMediaStart, slotsMedia]); }
}
}
// Inner Elements
if (self.title) {
titleEl = c('div', {staticClass: 'item-title', domProps: {innerHTML: self.title}}, [self.title]);
}
if (self.subtitle) {
subtitleEl = c('div', {staticClass: 'item-subtitle', domProps: {innerHTML: self.subtitle}}, [self.subtitle]);
}
if (self.text) {
textEl = c('div', {staticClass: 'item-text', domProps: {innerHTML: self.text}});
}
if (self.after || self.badge || slotsAfter.length) {
if (self.after) {
afterEl = c('span', {domProps: {innerHTML: self.after}});
}
if (self.badge) {
badgeEl = c('f7-badge', {props: {color: self.badgeColor}}, [self.badge]);
}
afterWrapEl = c('div', {staticClass: 'item-after'}, [slotsAfterStart, afterEl, badgeEl, slotsAfter]);
}
if (self.mediaList) {
titleRowEl = c('div', {staticClass: 'item-title-row'}, [titleEl, afterWrapEl]);
}
innerEl = c('div', {staticClass: 'item-inner'}, self.mediaList ? [slotsInnerStart, titleRowEl, subtitleEl, textEl, slotsInner] : [slotsInnerStart, titleEl, afterWrapEl, slotsInner]);
// Finalize
return c((self.checkbox || self.radio) ? 'label': 'div', {staticClass: 'item-content', 'class': {'label-checkbox': self.checkbox, 'label-radio': self.radio}, on: {click: self.onClick}}, [slotsContentStart, inputEl, mediaEl, innerEl, slotsContent]);
},
props: {
'title': [String, Number],
'text': [String, Number],
'media': String,
'subtitle': [String, Number],
'after': [String, Number],
'badge': [String, Number],
'badge-color': String,
'media-list': Boolean,
'checkbox': Boolean,
'checked': Boolean,
'radio': Boolean,
'name': String,
'value': [String, Number],
'readonly': Boolean,
'required': Boolean,
'disabled': Boolean
},
data: function () {
return {};
},
methods: {
onClick: function (event) {
this.$emit('click', event);
},
onChange: function (event) {
this.$emit('change', event);
}
}
};
var ListItemSwipeoutActions = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{class:'swipeout-actions-' + _vm.sideComputed},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'left': Boolean,
'right': Boolean,
'side': String,
'sideComputed': String
},
computed: {
sideComputed: function () {
if (!this.side) {
if (this.left) { return 'left'; }
if (this.right) { return 'right'; }
return 'right';
}
return this.side;
}
},
data: function () {
return {};
}
};
var ListItemSwipeoutButton = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('a',{class:_vm.classObject,attrs:{"href":"#"},on:{"click":_vm.onClick}},[_vm._t("default")],true)},
staticRenderFns: [],
props: {
'overswipe': Boolean,
'close': Boolean,
'delete': Boolean,
'color': String,
'bg': String
},
computed: {
classObject: function () {
var co = {
'swipeout-overswipe': this.overswipe,
'swipeout-delete': this.delete,
'swipeout-close': this.close
};
if (this.color) { co['bg-' + this.color] = true; }
if (this.bg) { co['bg-' + this.bg] = true; }
return co;
}
},
data: function () {
return {};
},
methods: {
onClick: function (event) {
this.$emit('click', event);
}
}
};
var ListButton = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('li',[(_vm.title)?_c('a',{staticClass:"item-link list-button",class:_vm.classesObject,attrs:{"href":(typeof _vm.link !== 'string' ? '#' : _vm.link),"data-panel":typeof _vm.openPanel === 'string' ? _vm.openPanel : false,"data-popup":typeof _vm.openPopup === 'string' ? _vm.openPopup : false,"data-popover":typeof _vm.openPopover === 'string' ? _vm.openPopover : false,"data-picker":typeof _vm.openPicker === 'string' ? _vm.openPicker : false,"data-login-screen":typeof _vm.openLoginScreen === 'string' ? _vm.openLoginScreen : false,"data-sortable":typeof _vm.openSortable === 'string' ? _vm.openSortable : (typeof _vm.toggleSortable === 'string' ? _vm.toggleSortable : false),"data-tab":typeof _vm.tabLink === 'string' ? _vm.tabLink : false},domProps:{"innerHTML":_vm._s(_vm.title)},on:{"click":_vm.onClick}}):_c('a',{staticClass:"item-link list-button",class:_vm.classesObject,attrs:{"href":(typeof _vm.link !== 'string' ? '#' : _vm.link),"data-panel":typeof _vm.openPanel === 'string' ? _vm.openPanel : false,"data-popup":typeof _vm.openPopup === 'string' ? _vm.openPopup : false,"data-popover":typeof _vm.openPopover === 'string' ? _vm.openPopover : false,"data-picker":typeof _vm.openPicker === 'string' ? _vm.openPicker : false,"data-login-screen":typeof _vm.openLoginScreen === 'string' ? _vm.openLoginScreen : false,"data-sortable":typeof _vm.openSortable === 'string' ? _vm.openSortable : (typeof _vm.toggleSortable === 'string' ? _vm.toggleSortable : false),"data-tab":typeof _vm.tabLink === 'string' ? _vm.t