@xenknight/framework7-vue 0.0.2

package/components/page-content.d.ts

@@ -0,0 +1,113 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const PageContent: DefineComponent<
+  {
+    
+    tab: {
+      type: BooleanConstructor;
+    },
+
+    tabActive: {
+      type: BooleanConstructor;
+    },
+
+    ptr: {
+      type: BooleanConstructor;
+    },
+
+    ptrDistance: {
+      type: NumberConstructor;
+    },
+
+    ptrBottom: {
+      type: BooleanConstructor;
+    },
+
+    ptrMousewheel: {
+      type: BooleanConstructor;
+    },
+
+    infinite: {
+      type: BooleanConstructor;
+    },
+
+    infiniteTop: {
+      type: BooleanConstructor;
+    },
+
+    infiniteDistance: {
+      type: NumberConstructor;
+    },
+
+    hideBarsOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    hideNavbarOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    hideToolbarOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    messagesContent: {
+      type: BooleanConstructor;
+    },
+
+    loginScreen: {
+      type: BooleanConstructor;
+    },
+
+    ptrPreloader: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    infinitePreloader: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("ptr:pullstart" | "ptr:pullmove" | "ptr:pullend" | "ptr:refresh" | "ptr:done" | "infinite" | "ptrPullStart" | "ptrPullMove" | "ptrPullEnd" | "ptrRefresh" | "ptrDone" | "tab:hide" | "tab:show")[],
+  "ptr:pullstart" | "ptr:pullmove" | "ptr:pullend" | "ptr:refresh" | "ptr:done" | "infinite" | "ptrPullStart" | "ptrPullMove" | "ptrPullEnd" | "ptrRefresh" | "ptrDone" | "tab:hide" | "tab:show"
+>;
+
+export default PageContent;
+  

package/components/page-content.js

@@ -0,0 +1,147 @@
+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 = /*#__PURE__*/_createElementVNode("div", {
+  class: "ptr-arrow"
+}, null, -1);
+const _hoisted_4 = {
+  key: 3,
+  class: "ptr-preloader"
+};
+const _hoisted_5 = /*#__PURE__*/_createElementVNode("div", {
+  class: "ptr-arrow"
+}, null, -1);
+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), _hoisted_3])) : _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_4, [_createVNode(_component_f7_preloader), _hoisted_5])) : _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, _ref) {
+    let {
+      emit
+    } = _ref;
+    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
+    };
+  }
+};

package/components/page.d.ts

@@ -0,0 +1,150 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Page: DefineComponent<
+  {
+    
+    name: {
+      type: StringConstructor;
+    },
+
+    noNavbar: {
+      type: BooleanConstructor;
+    },
+
+    noToolbar: {
+      type: BooleanConstructor;
+    },
+
+    tabs: {
+      type: BooleanConstructor;
+    },
+
+    noSwipeback: {
+      type: BooleanConstructor;
+    },
+
+    ptr: {
+      type: BooleanConstructor;
+    },
+
+    ptrDistance: {
+      type: NumberConstructor;
+    },
+
+    ptrBottom: {
+      type: BooleanConstructor;
+    },
+
+    ptrMousewheel: {
+      type: BooleanConstructor;
+    },
+
+    infinite: {
+      type: BooleanConstructor;
+    },
+
+    infiniteTop: {
+      type: BooleanConstructor;
+    },
+
+    infiniteDistance: {
+      type: NumberConstructor;
+    },
+
+    hideBarsOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    hideNavbarOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    hideToolbarOnScroll: {
+      type: BooleanConstructor;
+    },
+
+    messagesContent: {
+      type: BooleanConstructor;
+    },
+
+    loginScreen: {
+      type: BooleanConstructor;
+    },
+
+    withSubnavbar: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    subnavbar: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    withNavbarLarge: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    navbarLarge: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    pageContent: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    ptrPreloader: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    infinitePreloader: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    color: {
+      type: StringConstructor;
+    },
+
+    colorTheme: {
+      type: StringConstructor;
+    },
+
+    textColor: {
+      type: StringConstructor;
+    },
+
+    bgColor: {
+      type: StringConstructor;
+    },
+
+    borderColor: {
+      type: StringConstructor;
+    },
+
+    rippleColor: {
+      type: StringConstructor;
+    },
+
+    dark: {
+      type: BooleanConstructor;
+    }
+  },
+  () => JSX.Element,
+  unknown,
+  {},
+  {},
+  ComponentOptionsMixin,
+  ComponentOptionsMixin,
+  ("page:mounted" | "page:init" | "page:reinit" | "page:beforein" | "page:beforeout" | "page:afterout" | "page:afterin" | "page:beforeremove" | "page:beforeunmount" | "page:tabshow" | "page:tabhide" | "ptr:pullstart" | "ptr:pullmove" | "ptr:pullend" | "ptr:refresh" | "ptr:done" | "infinite")[],
+  "page:mounted" | "page:init" | "page:reinit" | "page:beforein" | "page:beforeout" | "page:afterout" | "page:afterin" | "page:beforeremove" | "page:beforeunmount" | "page:tabshow" | "page:tabhide" | "ptr:pullstart" | "ptr:pullmove" | "ptr:pullend" | "ptr:refresh" | "ptr:done" | "infinite"
+>;
+
+export default Page;
+