@xenknight/framework7-vue 0.0.2

package/components/page.js

@@ -0,0 +1,331 @@
+import { computed, ref, onMounted, onBeforeUnmount, h } from 'vue';
+import { classNames } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+import f7PageContent from './page-content.js';
+export default {
+  name: 'f7-page',
+  props: {
+    name: String,
+    withSubnavbar: {
+      type: Boolean,
+      default: undefined
+    },
+    subnavbar: {
+      type: Boolean,
+      default: undefined
+    },
+    withNavbarLarge: {
+      type: Boolean,
+      default: undefined
+    },
+    navbarLarge: {
+      type: Boolean,
+      default: undefined
+    },
+    noNavbar: Boolean,
+    noToolbar: Boolean,
+    tabs: Boolean,
+    pageContent: {
+      type: Boolean,
+      default: true
+    },
+    noSwipeback: Boolean,
+    // Page Content Props
+    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: ['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'],
+  setup(props, _ref) {
+    let {
+      emit,
+      slots
+    } = _ref;
+    let hasSubnavbar = false;
+    let hasNavbarLarge = false;
+    let hasNavbarLargeCollapsed = false;
+    let hasCardExpandableOpened = false;
+    let routerPositionClass = '';
+    let routerPageRole = null;
+    let routerPageRoleDetailRoot = false;
+    let routerPageMasterStack = false;
+    const elRef = ref(null);
+
+    // Main Page Events
+    const onPageMounted = page => {
+      if (elRef.value !== page.el) return;
+      emit('page:mounted', page);
+    };
+    const onPageInit = page => {
+      if (elRef.value !== page.el) return;
+      if (typeof props.withSubnavbar === 'undefined' && typeof props.subnavbar === 'undefined') {
+        if (page.$navbarEl && page.$navbarEl.length && page.$navbarEl.find('.subnavbar').length || page.$el.children('.navbar').find('.subnavbar').length) {
+          hasSubnavbar = true;
+        }
+      }
+      if (typeof props.withNavbarLarge === 'undefined' && typeof props.navbarLarge === 'undefined') {
+        if (page.$navbarEl && page.$navbarEl.hasClass('navbar-large')) {
+          hasNavbarLarge = true;
+        }
+      }
+      emit('page:init', page);
+    };
+    const onPageReinit = page => {
+      if (elRef.value !== page.el) return;
+      emit('page:reinit', page);
+    };
+    const onPageBeforeIn = page => {
+      if (elRef.value !== page.el) return;
+      if (!page.swipeBack) {
+        if (page.from === 'next') {
+          routerPositionClass = 'page-next';
+        }
+        if (page.from === 'previous') {
+          routerPositionClass = 'page-previous';
+        }
+      }
+      emit('page:beforein', page);
+    };
+    const onPageBeforeOut = page => {
+      if (elRef.value !== page.el) return;
+      emit('page:beforeout', page);
+    };
+    const onPageAfterOut = page => {
+      if (elRef.value !== page.el) return;
+      if (page.to === 'next') {
+        routerPositionClass = 'page-next';
+      }
+      if (page.to === 'previous') {
+        routerPositionClass = 'page-previous';
+      }
+      emit('page:afterout', page);
+    };
+    const onPageAfterIn = page => {
+      if (elRef.value !== page.el) return;
+      routerPositionClass = 'page-current';
+      emit('page:afterin', page);
+    };
+    const onPageBeforeRemove = page => {
+      if (elRef.value !== page.el) return;
+      emit('page:beforeremove', page);
+    };
+    const onPageBeforeUnmount = page => {
+      if (elRef.value !== page.el) return;
+      emit('page:beforeunmount', page);
+    };
+    const onPagePosition = (pageEl, position) => {
+      if (elRef.value !== pageEl) return;
+      routerPositionClass = `page-${position}`;
+    };
+    const onPageRole = (pageEl, rolesData) => {
+      if (elRef.value !== pageEl) return;
+      routerPageRole = rolesData.role;
+      routerPageRoleDetailRoot = rolesData.detailRoot;
+    };
+    const onPageMasterStack = pageEl => {
+      if (elRef.value !== pageEl) return;
+      routerPageMasterStack = true;
+    };
+    const onPageMasterUnstack = pageEl => {
+      if (elRef.value !== pageEl) return;
+      routerPageMasterStack = false;
+    };
+    const onPageNavbarLargeCollapsed = pageEl => {
+      if (elRef.value !== pageEl) return;
+      hasNavbarLargeCollapsed = true;
+    };
+    const onPageNavbarLargeExpanded = pageEl => {
+      if (elRef.value !== pageEl) return;
+      hasNavbarLargeCollapsed = false;
+    };
+    const onCardOpened = (cardEl, pageEl) => {
+      if (elRef.value !== pageEl) return;
+      hasCardExpandableOpened = true;
+    };
+    const onCardClose = (cardEl, pageEl) => {
+      if (elRef.value !== pageEl) return;
+      hasCardExpandableOpened = false;
+    };
+    const onPageTabShow = pageEl => {
+      if (elRef.value !== pageEl) return;
+      emit('page:tabshow');
+    };
+    const onPageTabHide = pageEl => {
+      if (elRef.value !== pageEl) return;
+      emit('page:tabhide');
+    };
+    const onPtrPullStart = () => {
+      emit('ptr:pullstart');
+    };
+    const onPtrPullMove = () => {
+      emit('ptr:pullmove');
+    };
+    const onPtrPullEnd = () => {
+      emit('ptr:pullend');
+    };
+    const onPtrRefresh = done => {
+      emit('ptr:refresh', done);
+    };
+    const onPtrDone = () => {
+      emit('ptr:done');
+    };
+    const onInfinite = () => {
+      emit('infinite');
+    };
+    onMounted(() => {
+      f7ready(() => {
+        f7.on('pageMounted', onPageMounted);
+        f7.on('pageInit', onPageInit);
+        f7.on('pageReinit', onPageReinit);
+        f7.on('pageBeforeIn', onPageBeforeIn);
+        f7.on('pageBeforeOut', onPageBeforeOut);
+        f7.on('pageAfterOut', onPageAfterOut);
+        f7.on('pageAfterIn', onPageAfterIn);
+        f7.on('pageBeforeRemove', onPageBeforeRemove);
+        f7.on('pageBeforeUnmount', onPageBeforeUnmount);
+        f7.on('pagePosition', onPagePosition);
+        f7.on('pageRole', onPageRole);
+        f7.on('pageMasterStack', onPageMasterStack);
+        f7.on('pageMasterUnstack', onPageMasterUnstack);
+        f7.on('pageNavbarLargeCollapsed', onPageNavbarLargeCollapsed);
+        f7.on('pageNavbarLargeExpanded', onPageNavbarLargeExpanded);
+        f7.on('cardOpened', onCardOpened);
+        f7.on('cardClose', onCardClose);
+        f7.on('pageTabShow', onPageTabShow);
+        f7.on('pageTabHide', onPageTabHide);
+      });
+    });
+    onBeforeUnmount(() => {
+      if (!f7) return;
+      f7.off('pageMounted', onPageMounted);
+      f7.off('pageInit', onPageInit);
+      f7.off('pageReinit', onPageReinit);
+      f7.off('pageBeforeIn', onPageBeforeIn);
+      f7.off('pageBeforeOut', onPageBeforeOut);
+      f7.off('pageAfterOut', onPageAfterOut);
+      f7.off('pageAfterIn', onPageAfterIn);
+      f7.off('pageBeforeRemove', onPageBeforeRemove);
+      f7.off('pageBeforeUnmount', onPageBeforeUnmount);
+      f7.off('pagePosition', onPagePosition);
+      f7.off('pageRole', onPageRole);
+      f7.off('pageMasterStack', onPageMasterStack);
+      f7.off('pageMasterUnstack', onPageMasterUnstack);
+      f7.off('pageNavbarLargeCollapsed', onPageNavbarLargeCollapsed);
+      f7.off('pageNavbarLargeExpanded', onPageNavbarLargeExpanded);
+      f7.off('cardOpened', onCardOpened);
+      f7.off('cardClose', onCardClose);
+      f7.off('pageTabShow', onPageTabShow);
+      f7.off('pageTabHide', onPageTabHide);
+    });
+    const classes = computed(() => classNames('page', routerPositionClass, {
+      tabs: props.tabs,
+      'page-with-subnavbar': props.subnavbar || props.withSubnavbar,
+      'page-with-navbar-large': props.navbarLarge || props.withNavbarLarge,
+      'no-navbar': props.noNavbar,
+      'no-toolbar': props.noToolbar,
+      'no-swipeback': props.noSwipeback,
+      'page-master': routerPageRole === 'master',
+      'page-master-detail': routerPageRole === 'detail',
+      'page-master-detail-root': routerPageRoleDetailRoot === true,
+      'page-master-stacked': routerPageMasterStack === true,
+      'page-with-navbar-large-collapsed': hasNavbarLargeCollapsed === true,
+      'page-with-card-opened': hasCardExpandableOpened === true,
+      'login-screen-page': props.loginScreen
+    }, colorClasses(props)));
+    const fixedTags = 'navbar toolbar tabbar subnavbar searchbar messagebar fab list-index panel'.split(' ').map(tagName => `f7-${tagName}`);
+    return () => {
+      const fixedList = [];
+      const staticList = [];
+      const {
+        static: slotsStatic,
+        fixed: slotsFixed,
+        default: slotsDefault
+      } = slots;
+      let hasSubnavbarComputed = false;
+      let hasNavbarLargeComputed = false;
+      let hasMessages = props.messagesContent;
+      const slotsDefaultRendered = slotsDefault && slotsDefault();
+      if (slotsDefaultRendered) {
+        slotsDefaultRendered.forEach(vnode => {
+          if (typeof vnode === 'undefined') return;
+          const tag = vnode.type && vnode.type.name ? vnode.type.name : vnode.type;
+          let isFixedTag = false;
+          if (!tag) {
+            if (props.pageContent || props.pageContent === '') staticList.push(vnode);
+            return;
+          }
+          if (tag === 'f7-subnavbar') hasSubnavbarComputed = true;
+          if (tag === 'f7-navbar') {
+            if (vnode.props && (vnode.props.large || vnode.props.large === '')) hasNavbarLargeComputed = true;
+          }
+          if (typeof hasMessages === 'undefined' && tag === 'f7-messages') hasMessages = true;
+          if (fixedTags.indexOf(tag) >= 0) {
+            isFixedTag = true;
+          }
+          if (props.pageContent) {
+            if (isFixedTag) fixedList.push(vnode);else staticList.push(vnode);
+          }
+        });
+      }
+      let classesValue = classes.value;
+      if ((hasSubnavbarComputed || hasSubnavbar) && typeof props.subnavbar === 'undefined' && typeof props.withSubnavbar === 'undefined' && classesValue.indexOf('page-with-subnavbar') < 0) {
+        classesValue += ' page-with-subnavbar';
+      }
+      if ((hasNavbarLargeComputed || hasNavbarLarge) && typeof props.navbarLarge === 'undefined' && typeof props.withNavbarLarge === 'undefined' && classesValue.indexOf('page-with-navbar-large') < 0) {
+        classesValue += ' page-with-navbar-large';
+      }
+      if (!props.pageContent) {
+        return h('div', {
+          class: classesValue,
+          ref: elRef,
+          'data-name': props.name
+        }, [slotsFixed && slotsFixed(), slotsStatic && slotsStatic(), slotsDefault && slotsDefaultRendered]);
+      }
+      return h('div', {
+        class: classesValue,
+        ref: elRef,
+        'data-name': props.name
+      }, [fixedList, slotsFixed && slotsFixed(), h(f7PageContent, {
+        ptr: props.ptr,
+        ptrDistance: props.ptrDistance,
+        ptrPreloader: props.ptrPreloader,
+        ptrBottom: props.ptrBottom,
+        ptrMousewheel: props.ptrMousewheel,
+        infinite: props.infinite,
+        infiniteTop: props.infiniteTop,
+        infiniteDistance: props.infiniteDistance,
+        infinitePreloader: props.infinitePreloader,
+        hideBarsOnScroll: props.hideBarsOnScroll,
+        hideNavbarOnScroll: props.hideNavbarOnScroll,
+        hideToolbarOnScroll: props.hideToolbarOnScroll,
+        messagesContent: props.messagesContent || hasMessages,
+        loginScreen: props.loginScreen,
+        onPtrPullStart,
+        onPtrPullMove,
+        onPtrPullEnd,
+        onPtrRefresh,
+        onPtrDone,
+        onInfinite
+      }, () => [slotsStatic && slotsStatic(), staticList])]);
+    };
+  }
+};

package/components/panel.d.ts

@@ -0,0 +1,139 @@
+
+import { ComponentOptionsMixin, DefineComponent, PropType } from 'vue';
+
+
+declare const Panel: DefineComponent<
+  {
+    
+    side: {
+      type: StringConstructor;
+    },
+
+    effect: {
+      type: StringConstructor;
+    },
+
+    cover: {
+      type: BooleanConstructor;
+    },
+
+    reveal: {
+      type: BooleanConstructor;
+    },
+
+    push: {
+      type: BooleanConstructor;
+    },
+
+    floating: {
+      type: BooleanConstructor;
+    },
+
+    left: {
+      type: BooleanConstructor;
+    },
+
+    right: {
+      type: BooleanConstructor;
+    },
+
+    opened: {
+      type: BooleanConstructor;
+    },
+
+    resizable: {
+      type: BooleanConstructor;
+    },
+
+    swipe: {
+      type: BooleanConstructor;
+    },
+
+    swipeNoFollow: {
+      type: BooleanConstructor;
+    },
+
+    swipeOnlyClose: {
+      type: BooleanConstructor;
+    },
+
+    backdrop: {
+      type: BooleanConstructor;
+      default: boolean;
+    },
+
+    backdropEl: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    containerEl: {
+      type: StringConstructor;
+      default: undefined;
+    },
+
+    closeByBackdropClick: {
+      type: BooleanConstructor;
+      default: undefined;
+    },
+
+    visibleBreakpoint: {
+      type: NumberConstructor;
+      default: undefined;
+    },
+
+    collapsedBreakpoint: {
+      type: NumberConstructor;
+      default: undefined;
+    },
+
+    swipeActiveArea: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    swipeThreshold: {
+      type: NumberConstructor;
+      default: number;
+    },
+
+    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,
+  ("panel:open" | "panel:opened" | "panel:close" | "panel:closed" | "click" | "panel:backdropclick" | "panel:swipe" | "panel:swipeopen" | "panel:breakpoint" | "panel:collapsedbreakpoint" | "panel:resize" | "update:opened")[],
+  "panel:open" | "panel:opened" | "panel:close" | "panel:closed" | "click" | "panel:backdropclick" | "panel:swipe" | "panel:swipeopen" | "panel:breakpoint" | "panel:collapsedbreakpoint" | "panel:resize" | "update:opened"
+>;
+
+export default Panel;
+  

package/components/panel.js

@@ -0,0 +1,198 @@
+import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, normalizeClass as _normalizeClass } from "vue";
+const _hoisted_1 = {
+  key: 0,
+  class: "panel-resize-handler"
+};
+function render(_ctx, _cache) {
+  return _openBlock(), _createElementBlock("div", {
+    ref: "elRef",
+    class: _normalizeClass(_ctx.classes)
+  }, [_renderSlot(_ctx.$slots, "default"), _ctx.resizable ? (_openBlock(), _createElementBlock("div", _hoisted_1)) : _createCommentVNode("", true)], 2);
+}
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { classNames, noUndefinedProps } from '../shared/utils.js';
+import { colorClasses, colorProps } from '../shared/mixins.js';
+import { f7ready, f7 } from '../shared/f7.js';
+export default {
+  name: 'f7-panel',
+  render,
+  props: {
+    side: String,
+    effect: String,
+    cover: Boolean,
+    reveal: Boolean,
+    push: Boolean,
+    floating: Boolean,
+    left: Boolean,
+    right: Boolean,
+    opened: Boolean,
+    resizable: Boolean,
+    backdrop: {
+      type: Boolean,
+      default: true
+    },
+    backdropEl: {
+      type: String,
+      default: undefined
+    },
+    containerEl: {
+      type: String,
+      default: undefined
+    },
+    closeByBackdropClick: {
+      type: Boolean,
+      default: undefined
+    },
+    visibleBreakpoint: {
+      type: Number,
+      default: undefined
+    },
+    collapsedBreakpoint: {
+      type: Number,
+      default: undefined
+    },
+    swipe: Boolean,
+    swipeNoFollow: Boolean,
+    swipeOnlyClose: Boolean,
+    swipeActiveArea: {
+      type: Number,
+      default: 0
+    },
+    swipeThreshold: {
+      type: Number,
+      default: 0
+    },
+    ...colorProps
+  },
+  emits: ['panel:open', 'panel:opened', 'panel:close', 'panel:closed', 'click', 'panel:backdropclick', 'panel:swipe', 'panel:swipeopen', 'panel:breakpoint', 'panel:collapsedbreakpoint', 'panel:resize', 'update:opened'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    let f7Panel = null;
+    const elRef = ref(null);
+    let isOpened = false;
+    let isClosing = false;
+    let isCollapsed = false;
+    let isBreakpoint = false;
+    const onOpen = event => {
+      isOpened = true;
+      isClosing = false;
+      emit('panel:open', event);
+      emit('update:opened', true);
+    };
+    const onOpened = event => {
+      emit('panel:opened', event);
+    };
+    const onClose = event => {
+      isOpened = false;
+      isClosing = true;
+      emit('panel:close', event);
+    };
+    const onClosed = event => {
+      isClosing = false;
+      emit('panel:closed', event);
+      emit('update:opened', false);
+    };
+    const onBackdropClick = event => {
+      emit('click', event);
+      emit('panel:backdropclick', event);
+    };
+    const onSwipe = event => {
+      emit('panel:swipe', event);
+    };
+    const onSwipeOpen = event => {
+      emit('panel:swipeopen', event);
+    };
+    const onBreakpoint = event => {
+      isBreakpoint = true;
+      isCollapsed = false;
+      emit('panel:breakpoint', event);
+    };
+    const onCollapsedBreakpoint = event => {
+      isBreakpoint = false;
+      isCollapsed = true;
+      emit('panel:collapsedbreakpoint', event);
+    };
+    const onResize = function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      emit('panel:resize', ...args);
+    };
+    watch(() => props.resizable, newValue => {
+      if (!f7Panel) return;
+      if (newValue) f7Panel.enableResizable();else f7Panel.disableResizable();
+    });
+    watch(() => props.opened, newValue => {
+      if (!f7Panel) return;
+      if (newValue) {
+        f7Panel.open();
+      } else {
+        f7Panel.close();
+      }
+    });
+    onMounted(() => {
+      f7ready(() => {
+        const $ = f7.$;
+        if (!$) return;
+        if ($('.panel-backdrop').length === 0) {
+          $('<div class="panel-backdrop"></div>').insertBefore(elRef.value);
+        }
+        const params = noUndefinedProps({
+          el: elRef.value,
+          resizable: props.resizable,
+          backdrop: props.backdrop,
+          backdropEl: props.backdropEl,
+          containerEl: props.containerEl,
+          closeByBackdropClick: props.containerEl,
+          visibleBreakpoint: props.visibleBreakpoint,
+          collapsedBreakpoint: props.collapsedBreakpoint,
+          swipe: props.swipe,
+          swipeNoFollow: props.swipeNoFollow,
+          swipeOnlyClose: props.swipeOnlyClose,
+          swipeActiveArea: props.swipeActiveArea,
+          swipeThreshold: props.swipeThreshold,
+          on: {
+            open: onOpen,
+            opened: onOpened,
+            close: onClose,
+            closed: onClosed,
+            backdropClick: onBackdropClick,
+            swipe: onSwipe,
+            swipeOpen: onSwipeOpen,
+            collapsedBreakpoint: onCollapsedBreakpoint,
+            breakpoint: onBreakpoint,
+            resize: onResize
+          }
+        });
+        f7Panel = f7.panel.create(params);
+        if (props.opened) {
+          f7Panel.open(false);
+        }
+      });
+    });
+    onBeforeUnmount(() => {
+      if (f7Panel && f7Panel.destroy) {
+        f7Panel.destroy();
+      }
+      f7Panel = null;
+    });
+    const classes = computed(() => {
+      const sideComputed = props.side || (props.left ? 'left' : 'right');
+      const effectComputed = props.effect || (props.reveal ? 'reveal' : props.push ? 'push' : props.floating ? 'floating' : 'cover'); // eslint-disable-line
+      return classNames('panel', {
+        'panel-in': isOpened && !isClosing && !isBreakpoint,
+        'panel-in-breakpoint': isBreakpoint,
+        'panel-in-collapsed': isCollapsed,
+        'panel-resizable': props.resizable,
+        [`panel-${sideComputed}`]: sideComputed,
+        [`panel-${effectComputed}`]: effectComputed
+      }, colorClasses(props));
+    });
+    return {
+      elRef,
+      classes
+    };
+  }
+};