framework7-vue
Version:
Build full featured iOS & Android apps using Framework7 & Vue
1,438 lines (1,375 loc) • 139 kB
JavaScript
/**
* Framework7 Vue 0.7.8
* Build full featured iOS & Android apps using Framework7 & Vue
* http://www.framework7.io/vue/
*
* Copyright 2017, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: January 31, 2017
*/
(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,on:{"panel:open":_vm.onOpen,"panel:opened":_vm.onOpened,"panel:close":_vm.onClose,"panel:closed":_vm.onClosed}},[_vm._t("default")],2)},
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;
if (self.opened) {
self.$el.style.display = 'block';
}
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('panel:open', event);
},
onOpened: function (event) {
this.$emit('panel:opened', event);
},
onClose: function (event) {
this.$emit('panel:open', event);
},
onClosed: function (event) {
this.$emit('panel:closed', event);
},
onF7Init: function () {
var $$ = this.$$;
if (!$$) { return; }
if ($$('.panel-overlay').length === 0) {
$$('<div class="panel-overlay"></div>').insertBefore(this.$el);
}
},
open: function () {
var self = this;
if (!self.$f7) { return; }
var side = self.side || (self.left ? 'left' : 'right');
self.$f7.openPanel(side);
},
close: function () {
var self = this;
if (!self.$f7) { return; }
var side = self.side || (self.left ? 'left' : 'right');
self.$f7.closePanel(side);
}
}
};
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")],2)},
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.tabbarLabelsThrough
};
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,
on: {
'swipeback:move': self.onSwipeBackMove,
'swipeback:beforechange': self.onSwipeBackBeforeChange,
'swipeback:afterchange': self.onSwipeBackAfterChange,
'swipeback:beforereset': self.onSwipeBackBeforeReset,
'swipeback:afterreset': self.onSwipeBackAfterReset,
'tab:show': self.onTabShow,
'tab:hide': self.onTabHide
}
},
[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,
'name': String,
'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 || {
name: self.name,
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('swipeback:move', event, event.detail);
},
onSwipeBackBeforeChange: function (event) {
this.$emit('swipeback:beforechange', event, event.detail);
},
onSwipeBackAfterChange: function (event) {
this.$emit('swipeback:afterchange', event, event.detail);
},
onSwipeBackBeforeReset: function (event) {
this.$emit('swipeback:beforereset', event, event.detail);
},
onSwipeBackAfterReset: function (event) {
this.$emit('swipeback:afterreset', event, event.detail);
},
onTabShow: function (e) {
this.$emit('tab:show', e);
},
onTabHide: function (e) {
this.$emit('tab:hide', e);
}
}
};
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: {
'page:beforeremove': 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.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;
var i, j;
if (self.$slots.default) {
for (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 (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: {
'ptr:pullstart': self.onPtrPullstart,
'ptr:pullmove': self.onPtrPullmove,
'ptr:pullend': self.onPtrPullend,
'ptr:refresh': self.onPtrRefresh,
'ptr:done': self.onPtrRefreshdone,
'infinite': self.onInfinite
},
}, (self.infiniteScroll === 'top' ? [ptrEl, infiniteEl, self.$slots.static, staticList] : [ptrEl, self.$slots.static, staticList, infiniteEl]));
}
else {
pageContentEl = [];
if (self.$slots.default && fixedList.length > 0) {
for (i = 0; i < self.$slots.default.length; i++) {
if (fixedList.indexOf(self.$slots.default[i]) < 0) {
pageContentEl.push(self.$slots.default[i]);
}
}
}
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: {
'page:beforeinit': self.onPageBeforeInit,
'page:init': self.onPageInit,
'page:reinit': self.onPageReinit,
'page:beforeanimation': self.onPageBeforeAnimation,
'page:afteranimation': self.onPageAfterAnimation,
'page:beforeremove': self.onPageBeforeRemove,
'page:back': self.onPageBack,
'page:afterback': 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.tabbarLabelsThrough,
'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 || 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: {
onPtrPullstart: function (event) {
this.$emit('ptr:pullstart', event);
},
onPtrPullmove: function (event) {
this.$emit('ptr:pullmove', event);
},
onPtrPullend: function (event) {
this.$emit('ptr:pullend', event);
},
onPtrRefresh: function (event) {
this.$emit('ptr:refresh', event, event.detail.done);
},
onPtrRefreshdone: function (event) {
this.$emit('ptr:done', event);
},
onInfinite: function (event) {
this.$emit('infinite', event);
},
onPageBeforeInit: function (event) {
this.f7PageData = event.detail.page;
this.$emit('page:beforeinit', event, event.detail.page);
},
onPageInit: function (event) {
this.$emit('page:init', event, event.detail.page);
},
onPageReinit: function (event) {
this.$emit('page:reinit', event, event.detail.page);
},
onPageBeforeAnimation: function (event) {
this.$emit('page:beforeanimation', event, event.detail.page);
},
onPageAfterAnimation: function (event) {
this.$emit('page:afteranimation', event, event.detail.page);
},
onPageBeforeRemove: function (event) {
this.$emit('page:beforeremove', event, event.detail.page);
},
onPageBack: function (event) {
this.$emit('page:back', event, event.detail.page);
},
onPageAfterBack: function (event) {
this.$emit('page:afterback', 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,on:{"tab:show":_vm.onTabShow,"tab:hide":_vm.onTabHide}},[_vm._t("default")],2)},
staticRenderFns: [],
props: {
'tab': Boolean,
'active': Boolean
},
computed: {
classesObject: function () {
var self = this;
return {
'tab': self.tab,
'active': self.active
}
}
},
methods: {
onTabShow: function (e) {
this.$emit('tab:show', e);
},
onTabHide: function (e) {
this.$emit('tab:hide', e);
}
}
};
var Navbar = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"navbar",class:_vm.classesObject,on:{"navbar:beforeinit":_vm.onBeforeInit,"navbar:init":_vm.onInit,"navbar:reinit":_vm.onReinit,"navbar:beforeremove":_vm.onBeforeRemove}},[_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,"back-link-href":_vm.backLinkUrl || _vm.backLinkHref}}):_vm._e(),_vm._v(" "),(_vm.title)?_c('f7-nav-center',{attrs:{"title":_vm.title,"sliding":_vm.sliding}}):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),_vm._t("after-inner")],2)},
staticRenderFns: [],
updated: function () {
var self = this;
self.$nextTick(function () {
self.$f7.sizeNavbars();
});
},
props: {
backLink: [Boolean, String],
backLinkUrl: String,
backLinkHref: String,
sliding: Boolean,
title: String,
theme: String,
layout: String,
hidden: Boolean
},
computed: {
classesObject: function () {
var co = {
'navbar-hidden': this.hidden
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
},
methods: {
hide: function () {
if (!this.$f7) { return; }
return this.$f7.hideNavbar(this.$el);
},
show: function () {
if (!this.$f7) { return; }
return this.$f7.showNavbar(this.$el);
},
size: function () {
if (!this.$f7 || this.$theme.material) { return; }
return this.$f7.sizeNavbars();
},
onBeforeInit: function (e) {
this.$emit('navbar:beforeinit', e);
},
onInit: function (e) {
this.$emit('navbar:init', e);
},
onReinit: function (e) {
this.$emit('navbar:reinit', e);
},
onBeforeRemove: function (e) {
this.$emit('navbar:beforeremove', e);
}
}
};
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))])],2)},
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":_vm.backLinkUrl || _vm.backLinkHref || '#',"back":"","icon":"icon-back","text":_vm.backLink !== true && !_vm.$theme.material ? _vm.backLink : undefined}}):_vm._e(),_vm._v(" "),_vm._t("default")],2)},
staticRenderFns: [],
props: {
backLink: [Boolean, String],
backLinkUrl: String,
backLinkHref: 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")],2)},
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")],2)},
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")],2),_vm._v(" "),_vm._t("after-inner")],2)},
staticRenderFns: [],
props: {
bottom: Boolean,
tabbar: Boolean,
labels: Boolean,
scrollable: Boolean,
theme: String,
layout: String,
hidden: Boolean
},
computed: {
classesObject: function () {
var co = {
'toolbar-bottom': this.bottom,
'tabbar': this.tabbar,
'tabbar-labels': this.labels,
'tabbar-scrollable': this.scrollable,
'toolbar-hidden': this.hidden
};
if (this.theme) { co['theme-' + this.theme] = true; }
if (this.layout) { co['layout-' + this.layout] = true; }
return co;
}
},
methods: {
hide: function () {
if (!this.$f7) { return; }
return this.$f7.hideToolbar(this.$el);
},
show: function () {
if (!this.$f7) { return; }
return this.$f7.showToolbar(this.$el);
}
}
};
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', {props: {inner: self.inner}}, [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': [String, Number],
'content': [String, Number],
'footer': [String, Number],
'inner': {
type: Boolean,
default: true
}
}
};
var CardHeader = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"card-header"},[_vm._t("default")],2)},
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")],2)},
staticRenderFns: [],};
var CardContent = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"card-content"},[(_vm.inner)?_c('div',{staticClass:"card-content-inner"},[_vm._t("default")],2):_vm._t("default")],2)},
staticRenderFns: [],
props: {
inner: {
type: Boolean,
default: true
}
}
};
var ContentBlock = {
render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._c;return _c('div',{staticClass:"content-block",class:_vm.classesObject,on:{"tab:show":_vm.onTabShow,"tab:hide":_vm.onTabHide}},[(_vm.inner)?_c('div',{staticClass:"content-block-inner"},[_vm._t("default")],2):_vm._t("default")],2)},
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,
}
}
},
methods: {
onTabShow: function (e) {
this.$emit('tab:show', e);
},
onTabHide: function (e) {
this.$emit('tab:hide', e);
}
}
};
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")],2)},
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")],2)},
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")],2)},
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,
'store-data': self.storeData
},
on: {
'sortable:open': self.onSortableOpen,
'sortable:close': self.onSortableClose,
'sortable:sort': self.onSortableSort,
'tab:show': self.onTabShow,
'tab:hide': self.onTabHide
}
},
[
ulSlots.length > 0 ? [c('ul', {}, ulSlots), outOfList] : outOfList
]
);
return blockEl;
},
props: {
'inset': Boolean,
'media-list': Boolean,
'grouped': Boolean,
'sortable': Boolean,
'label': String,
'accordion': Boolean,
'contacts': Boolean,
'no-hairlines': Boolean,
'no-hairlines-between': Boolean,
// Tab
'tab': Boolean,
'active': Boolean,
// Form
'form': Boolean,
'store-data': 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: {
onSortableOpen: function (event) {
this.$emit('sortable:open', event);
},
onSortableClose: function (event) {
this.$emit('sortable:close', event);
},
onSortableSort: function (event) {
this.$emit('sortable:sort', event, event.detail);
},
onTabShow: function (e) {
this.$emit('tab:show', e);
},
onTabHide: function (e) {
this.$emit('tab:hide', e);
},
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('virtual:itembeforeinsert', list, item);
},
onBeforeClear: function (list, fragment) {
self.$emit('virtual:beforeclear', list, fragment);
},
onItemsBeforeInsert: function (list, fragment) {
self.$emit('virtual:itemsbeforeinsert', list, fragment);
},
onItemsAfterInsert: function (list, fragment) {
self.$emit('virtual:itemsafterinsert', 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")],2)])},
staticRenderFns: [],
props: {
'media-list': Boolean,
'sortable': 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;
function trustyBoolean(b) {
if (b || b === '') { return true; }
return false;
}
function trustyString(s) {
if (typeof s === 'string' && s !== '') { return true; }
return false;
}
// 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.checkedComputed,
'radio': self.radio,
'name': self.name,
'value': self.valueComputed,
'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.swipeout || self.accordionItem ? [] : 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,
'target': self.linkTarget,
'data-searchbar': self.smartSelectSearchbar,
'data-searchbar-placeholder': 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': trustyString(self.linkView) ? self.linkView : false,
'data-panel': trustyString(self.linkOpenPanel) ? self.linkOpenPanel : false,
'data-popup': trustyString(self.linkOpenPopup) ? self.linkOpenPopup : false,
'data-popover': trustyString(self.linkOpenPopover) ? self.linkOpenPopover : false,
'data-picker': trustyString(self.linkOpenPicker) ? self.linkOpenPicker : false,
'data-login-screen': trustyString(self.linkOpenLoginScreen) ? self.linkOpenLoginScreen : false,
'data-sortable': trustyString(self.linkOpenSortable) ? self.linkOpenSortable : (trustyString(self.linkToggleSortable) ? 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': trustyBoolean(self.linkClosePanel),
'open-panel': self.linkOpenPanel || self.linkOpenPanel === '',
'close-popup': trustyBoolean(self.linkClosePopup),
'open-popup': self.linkOpenPopup || self.linkOpenPopup === '',
'close-popover': trustyBoolean(self.linkClosePopover),
'open-popover': self.linkOpenPopover || self.linkOpenPopover === '',
'close-picker': trustyBoolean(self.linkClosePicker),
'open-picker': self.linkOpenPicker || self.linkOpenPicker === '',
'close-login-screen': trustyBoolean(self.linkCloseLoginScreen),
'open-login-screen': self.linkOpenLoginScreen || self.linkOpenLoginScreen === '',
'close-sortable': trustyBoolean(self.linkCloseSortable),
'open-sortable': self.linkOpenSortable || self.linkOpenSortable === '',
'toggle-sortable': self.linkToggleSortable || 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: {
'swipeout:open': self.onSwipeoutOpen,
'swipeout:opened': self.onSwipeoutOpened,
'swipeout:close': self.onSwipeoutClose,
'swipeout:closed': self.onSwipeoutClosed,
'swipeout:delete': self.onSwipeoutDelete,
'swipeout:deleted': self.onSwipeoutDeleted,
'swipeout': self.onSwipeout,
'accordion:open': self.onAccOpen,
'accordion:opened': self.onAccOpened,
'accordion:close': self.onAccClose,
'accordion:closed': self.onAccClosed,
}
},
liChildren
)
},
props: {
'title': [String, Number],
'text': [String, Number],
'media': String,
'subtitle': [String, Number],
// Link Props
'link': [Boolean, String],
'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-target': String,
'link-view': String,
'link-open-panel': [Boolean, String],
'link-close-panel': [Boolean, String],
'link-open-popup': [Boolean, String],
'link-close-popup': [Boolean, String],
'link-open-popover': [Boolean, String],
'link-close-popover': [Boolean, String],
'link-open-login-screen': [Boolean, String],
'link-close-login-screen': [Boolean, String],
'link-open-picker': [Boolean, String],
'link-close-picker': [Boolean, String],
'after': [String, Number],
'badge': [String, Number],
'badge-color': String,
'media-item': Boolean,
'media-list-item': Boolean,
'media-list': Boolean,
'divider': Boolean,
'group-title': Boolean,
'swipeout': Boolean,
'sortable': Boolean,
'accordion-item': Boolean,
// Smart Select
'smart-select': Boolean,
'smart-select-searchbar': Boolean,
'smart-select-searchbar-placeholder': 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, Boolean, Array],
'input-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;
},
hasCheckboxModel: function () {
var self = this;
return self.checkbox && (typeof self.value === 'boolean' || Array.isArray(self.value));
},
hasRadioModel: function () {
var self = this;
return self.radio && typeof self.inputValue !== 'undefined';
},
valueComputed: function () {
var self = this;
if (self.inputValue) { return self.inputValue; }
else if (self.hasCheckboxModel) { return undefined; }
else { return self.value; }
},
checkedComputed: function () {
var self = this;
if (self.hasCheckboxModel) {
if (self.inputValue && Array.isArray(self.value)) {
return self.value.indexOf(self.inputValue) >= 0;
}
return self.value;
}
else if (self.hasRadioModel) {
return self.value === self.inputValue;
}
else { return self.checked; }
}
},
methods: {
onClick: function (event) {
this.$emit('click', event);
},
onSwipeoutDeleted: function (event) {
this.$emit('swipeout:deleted', event);
},
onSwipeoutDelete: function (event) {
this.$emit('swipeout:delete', event);
},
onSwipeoutClose: function (event) {
this.$emit('swipeout:close', event);
},
onSwipeoutClosed: function (event) {
this.$emit('swipeout:closed', event);
},
onSwipeoutOpen: function (event) {
this.$emit('swipeout:open', event);
},
onSwipeoutOpened: function (event) {
this.$emit('swipeout:opened', event);
},
onSwipeout: function (event) {
this.$emit('swipeout', event);
},
onAccClose: function (event) {
this.$emit('accordion:close', event);
},
onAccClosed: function (event) {
this.$emit('accordion:closed', event);
},
onAccOpen: function (event) {
this.$emit('accordion:open', event);
},
onAccOpened: function (event) {
this.$emit('accordion:opened', event);
},
onChange: function (event) {
var self = this;
if (self.hasCheckboxModel) {
if (Array.isArray(self.value)) {
if (event.target.checked) { self.value.push(event.target.value); }
else { self.value.splice(self.value.indexOf(event.target.value), 1); }
self.$emit('change', event);
}
else {
self.$emit('input', event.target.checked);
}
}
else if (self.hasRadioModel) {
self.$emit('input', event.target.value);
}
else {
self.$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 && slotN