framework7-vue/components/page-content.js

Build full featured iOS & Android apps using Framework7 & Vue

import { resolveComponent as _resolveComponent, createVNode as _createVNode, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createBlock as _createBlock, renderSlot as _renderSlot, normalizeClass as _normalizeClass } from "vue";
const _hoisted_1 = ["data-ptr-distance", "data-ptr-mousewheel", "data-infinite-distance"];
const _hoisted_2 = {
  key: 0,
  class: "ptr-preloader"
};
const _hoisted_3 = {
  key: 3,
  class: "ptr-preloader"
};
function render(_ctx, _cache) {
  const _component_f7_preloader = _resolveComponent("f7-preloader");
  return _openBlock(), _createElementBlock("div", {
    ref: "elRef",
    class: _normalizeClass(_ctx.classes),
    "data-ptr-distance": _ctx.ptrDistance || undefined,
    "data-ptr-mousewheel": _ctx.ptrMousewheel || undefined,
    "data-infinite-distance": _ctx.infiniteDistance || undefined
  }, [_ctx.ptr && _ctx.ptrPreloader && !_ctx.ptrBottom ? (_openBlock(), _createElementBlock("div", _hoisted_2, [_createVNode(_component_f7_preloader), _cache[0] || (_cache[0] = _createElementVNode("div", {
    class: "ptr-arrow"
  }, null, -1))])) : _createCommentVNode("", true), _ctx.infinite && _ctx.infinitePreloader && _ctx.infiniteTop ? (_openBlock(), _createBlock(_component_f7_preloader, {
    key: 1,
    class: "infinite-scroll-preloader"
  })) : _createCommentVNode("", true), _renderSlot(_ctx.$slots, "default"), _ctx.infinite && _ctx.infinitePreloader && !_ctx.infiniteTop ? (_openBlock(), _createBlock(_component_f7_preloader, {
    key: 2,
    class: "infinite-scroll-preloader"
  })) : _createCommentVNode("", true), _ctx.ptr && _ctx.ptrPreloader && _ctx.ptrBottom ? (_openBlock(), _createElementBlock("div", _hoisted_3, [_createVNode(_component_f7_preloader), _cache[1] || (_cache[1] = _createElementVNode("div", {
    class: "ptr-arrow"
  }, null, -1))])) : _createCommentVNode("", true)], 10, _hoisted_1);
}
import { computed, ref, onMounted, onBeforeUnmount } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
import f7Preloader from './preloader.js';
import { useTab } from '../shared/use-tab.js';
import { f7ready, f7 } from '../shared/f7.js';
export default {
  name: 'f7-page-content',
  render,
  components: {
    f7Preloader
  },
  props: {
    tab: Boolean,
    tabActive: Boolean,
    ptr: Boolean,
    ptrDistance: Number,
    ptrPreloader: {
      type: Boolean,
      default: true
    },
    ptrBottom: Boolean,
    ptrMousewheel: Boolean,
    infinite: Boolean,
    infiniteTop: Boolean,
    infiniteDistance: Number,
    infinitePreloader: {
      type: Boolean,
      default: true
    },
    hideBarsOnScroll: Boolean,
    hideNavbarOnScroll: Boolean,
    hideToolbarOnScroll: Boolean,
    messagesContent: Boolean,
    loginScreen: Boolean,
    ...colorProps
  },
  emits: ['ptr:pullstart', 'ptr:pullmove', 'ptr:pullend', 'ptr:refresh', 'ptr:done', 'infinite', 'ptrPullStart', 'ptrPullMove', 'ptrPullEnd', 'ptrRefresh', 'ptrDone', 'tab:hide', 'tab:show'],
  setup(props, {
    emit
  }) {
    const elRef = ref(null);
    const onPtrPullStart = el => {
      if (elRef.value !== el) return;
      emit('ptr:pullstart');
      emit('ptrPullStart');
    };
    const onPtrPullMove = el => {
      if (elRef.value !== el) return;
      emit('ptr:pullmove');
      emit('ptrPullMove');
    };
    const onPtrPullEnd = el => {
      if (elRef.value !== el) return;
      emit('ptr:pullend');
      emit('ptrPullEnd');
    };
    const onPtrRefresh = (el, done) => {
      if (elRef.value !== el) return;
      emit('ptr:refresh', done);
      emit('ptrRefresh', done);
    };
    const onPtrDone = el => {
      if (elRef.value !== el) return;
      emit('ptr:done');
      emit('ptrDone');
    };
    const onInfinite = el => {
      if (elRef.value !== el) return;
      emit('infinite');
    };
    useTab(elRef, emit);
    onMounted(() => {
      f7ready(() => {
        if (props.ptr) {
          f7.on('ptrPullStart', onPtrPullStart);
          f7.on('ptrPullMove', onPtrPullMove);
          f7.on('ptrPullEnd', onPtrPullEnd);
          f7.on('ptrRefresh', onPtrRefresh);
          f7.on('ptrDone', onPtrDone);
        }
        if (props.infinite) {
          f7.on('infinite', onInfinite);
        }
      });
    });
    onBeforeUnmount(() => {
      if (!f7) return;
      f7.off('ptrPullStart', onPtrPullStart);
      f7.off('ptrPullMove', onPtrPullMove);
      f7.off('ptrPullEnd', onPtrPullEnd);
      f7.off('ptrRefresh', onPtrRefresh);
      f7.off('ptrDone', onPtrDone);
      f7.off('infinite', onInfinite);
    });
    const classes = computed(() => classNames('page-content', {
      tab: props.tab,
      'tab-active': props.tabActive,
      'ptr-content': props.ptr,
      'ptr-bottom': props.ptrBottom,
      'infinite-scroll-content': props.infinite,
      'infinite-scroll-top': props.infiniteTop,
      'hide-bars-on-scroll': props.hideBarsOnScroll,
      'hide-navbar-on-scroll': props.hideNavbarOnScroll,
      'hide-toolbar-on-scroll': props.hideToolbarOnScroll,
      'messages-content': props.messagesContent,
      'login-screen-content': props.loginScreen
    }, colorClasses(props)));
    return {
      elRef,
      classes
    };
  }
};