@xenknight/framework7-vue 0.0.2

package/shared/components-router.js

@@ -0,0 +1,203 @@
+/* eslint no-underscore-dangle: "off" */
+import { f7events, f7routers } from './f7.js';
+import { extend, getComponentId } from './utils.js';
+import { routerOpenIn } from './router-open-in.js';
+const getChildrenArray = el => {
+  const arr = [];
+  for (let i = 0; i < el.children.length; i += 1) {
+    arr.push(el.children[i]);
+  }
+  return arr;
+};
+const hasSameChildren = (childrenBefore, childrenAfter) => {
+  if (childrenBefore.length !== childrenAfter.length) return false;
+  const set = new Set([...childrenBefore, ...childrenAfter]);
+  if (set.size === childrenBefore.length) return true;
+  return false;
+};
+export default {
+  proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
+    pageComponentLoader(_ref) {
+      let {
+        routerEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _ref;
+      const router = this;
+      const routerId = router.id;
+      const el = routerEl;
+      let viewRouter;
+      f7routers.views.forEach(data => {
+        if (data.el && data.el === routerEl || data.routerId && data.routerId === routerId) {
+          viewRouter = data;
+        }
+      });
+      if (!viewRouter) {
+        reject();
+        return;
+      }
+      const pageData = {
+        component,
+        id: getComponentId(),
+        props: extend({
+          f7route: options.route,
+          f7router: router
+        }, options.route.params, options.props || {})
+      };
+      let resolved;
+      const childrenBefore = getChildrenArray(el);
+      function onDidUpdate(componentRouterData) {
+        if (componentRouterData !== viewRouter || resolved) return;
+        const childrenAfter = getChildrenArray(el);
+        if (hasSameChildren(childrenBefore, childrenAfter)) return;
+        f7events.off('viewRouterDidUpdate', onDidUpdate);
+        const pageEl = el.children[el.children.length - 1];
+        pageData.el = pageEl;
+        resolve(pageEl);
+        resolved = true;
+      }
+      f7events.on('viewRouterDidUpdate', onDidUpdate);
+      viewRouter.pages.push(pageData);
+      viewRouter.setPages(viewRouter.pages);
+    },
+    removePage($pageEl) {
+      if (!$pageEl) return;
+      const router = this;
+      let f7Page;
+      if ('length' in $pageEl && $pageEl[0]) f7Page = $pageEl[0].f7Page;else f7Page = $pageEl.f7Page;
+      if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) {
+        router.app.$($pageEl).remove();
+        return;
+      }
+      let viewRouter;
+      f7routers.views.forEach(data => {
+        if (data.el && data.el === router.el) {
+          viewRouter = data;
+        }
+      });
+      let pageEl;
+      if ('length' in $pageEl) {
+        // Dom7
+        if ($pageEl.length === 0) return;
+        pageEl = $pageEl[0];
+      } else {
+        pageEl = $pageEl;
+      }
+      if (!pageEl) return;
+      let pageComponentFound;
+      viewRouter.pages.forEach((page, index) => {
+        if (page.el === pageEl) {
+          pageComponentFound = true;
+          viewRouter.pages.splice(index, 1);
+          viewRouter.setPages(viewRouter.pages);
+        }
+      });
+      if (!pageComponentFound) {
+        pageEl.parentNode.removeChild(pageEl);
+      }
+    },
+    tabComponentLoader(_temp) {
+      let {
+        tabEl,
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp === void 0 ? {} : _temp;
+      const router = this;
+      if (!tabEl) reject();
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
+        if (tabData.el && tabData.el === tabEl) {
+          tabRouter = tabData;
+        }
+      });
+      if (!tabRouter) {
+        reject();
+        return;
+      }
+      const id = getComponentId();
+      const tabContent = {
+        id,
+        component,
+        props: extend({
+          f7route: options.route,
+          f7router: router
+        }, options.route.route && options.route.route.tab && options.route.route.tab.options && options.route.route.tab.options.props || {}, options.route.params, options.props || {})
+      };
+      let resolved;
+      function onDidUpdate(componentRouterData) {
+        if (componentRouterData !== tabRouter || resolved) return;
+        f7events.off('tabRouterDidUpdate', onDidUpdate);
+        const tabContentEl = tabEl.children[0];
+        resolve(tabContentEl);
+        resolved = true;
+      }
+      f7events.on('tabRouterDidUpdate', onDidUpdate);
+      tabRouter.setTabContent(tabContent);
+    },
+    removeTabContent(tabEl) {
+      if (!tabEl) return;
+      let tabRouter;
+      f7routers.tabs.forEach(tabData => {
+        if (tabData.el && tabData.el === tabEl) {
+          tabRouter = tabData;
+        }
+      });
+      if (!tabRouter) {
+        tabEl.innerHTML = ''; // eslint-disable-line
+        return;
+      }
+      tabRouter.setTabContent(null);
+    },
+    modalComponentLoader(_temp2) {
+      let {
+        component,
+        options,
+        resolve,
+        reject
+      } = _temp2 === void 0 ? {} : _temp2;
+      const router = this;
+      const modalsRouter = f7routers.modals;
+      if (!modalsRouter) {
+        reject();
+        return;
+      }
+      const modalData = {
+        component,
+        id: getComponentId(),
+        props: extend({
+          f7route: options.route,
+          f7router: router
+        }, options.route.params, options.props || {})
+      };
+      let resolved;
+      function onDidUpdate() {
+        if (resolved) return;
+        f7events.off('modalsRouterDidUpdate', onDidUpdate);
+        const modalEl = modalsRouter.el.children[modalsRouter.el.children.length - 1];
+        modalData.el = modalEl;
+        resolve(modalEl);
+        resolved = true;
+      }
+      f7events.on('modalsRouterDidUpdate', onDidUpdate);
+      modalsRouter.modals.push(modalData);
+      modalsRouter.setModals(modalsRouter.modals);
+    },
+    removeModal(modalEl) {
+      const modalsRouter = f7routers.modals;
+      if (!modalsRouter) return;
+      let modalDataToRemove;
+      modalsRouter.modals.forEach(modalData => {
+        if (modalData.el === modalEl) modalDataToRemove = modalData;
+      });
+      modalsRouter.modals.splice(modalsRouter.modals.indexOf(modalDataToRemove), 1);
+      modalsRouter.setModals(modalsRouter.modals);
+    }
+  }
+};

package/shared/f7.js

@@ -0,0 +1,71 @@
+/* eslint-disable import/no-mutable-exports */
+import Framework7 from '@xenknight/framework7/lite';
+import { extend, unsetRouterIds } from './utils.js';
+let f7;
+let f7events;
+const theme = {};
+const f7routers = {
+  views: [],
+  tabs: [],
+  modals: null
+};
+const setTheme = () => {
+  if (!f7) return;
+  theme.ios = f7.theme === 'ios';
+  theme.md = f7.theme === 'md';
+};
+const cleanup = () => {
+  unsetRouterIds();
+  delete theme.ios;
+  delete theme.md;
+  f7routers.views = [];
+  f7routers.tabs = [];
+  f7routers.modals = null;
+};
+const f7initEvents = () => {
+  f7events = new Framework7.Events();
+};
+const f7init = function (rootEl, params, init) {
+  if (params === void 0) {
+    params = {};
+  }
+  if (init === void 0) {
+    init = true;
+  }
+  const f7Params = extend({}, params, {
+    el: rootEl,
+    init
+  });
+  if (typeof params.store !== 'undefined') f7Params.store = params.store;
+  if (!f7Params.routes) f7Params.routes = [];
+  if (f7Params.userAgent && (f7Params.theme === 'auto' || !f7Params.theme)) {
+    const device = Framework7.getDevice({
+      userAgent: f7Params.userAgent
+    }, true);
+    theme.ios = !!device.ios;
+    theme.md = !theme.ios;
+  }
+  // eslint-disable-next-line
+  if (f7 && typeof window !== 'undefined') return;
+  // eslint-disable-next-line
+  if (typeof window === 'undefined') cleanup();
+  const instance = new Framework7(f7Params);
+  f7 = instance;
+  setTheme();
+  if (instance.initialized) {
+    f7 = instance;
+    f7events.emit('ready', f7);
+  } else {
+    instance.on('init', () => {
+      f7 = instance;
+      f7events.emit('ready', f7);
+    });
+  }
+};
+const f7ready = callback => {
+  if (!callback) return;
+  if (f7 && f7.initialized) callback(f7);else {
+    f7events.once('ready', callback);
+  }
+};
+export { f7, theme, f7ready, f7events, f7init, f7routers, f7initEvents, setTheme };

package/shared/get-router-initial-component.js

@@ -0,0 +1,35 @@
+import { getComponentId } from './utils.js';
+export const getRouterInitialComponent = (router, initialComponent) => {
+  let initialComponentData;
+  const {
+    initialUrl
+  } = router.getInitialUrl();
+  const initialRoute = router.findMatchingRoute(initialUrl);
+  let routeProps = {};
+  if (initialRoute && initialRoute.route && initialRoute.route.options) {
+    routeProps = initialRoute.route.options.props;
+  }
+  const isMasterRoute = route => {
+    if (route.master === true) return true;
+    if (typeof route.master === 'function') return route.master(router.app);
+    return false;
+  };
+  if (initialRoute && initialRoute.route && (initialRoute.route.component || initialRoute.route.asyncComponent) && !isMasterRoute(initialRoute.route)) {
+    initialComponentData = {
+      component: initialRoute.route.component || initialRoute.route.asyncComponent,
+      initialComponent,
+      id: getComponentId(),
+      isAsync: !!initialRoute.route.asyncComponent,
+      props: {
+        f7route: initialRoute,
+        f7router: router,
+        ...routeProps,
+        ...initialRoute.params
+      }
+    };
+  }
+  return {
+    initialPage: initialComponentData,
+    initialRoute
+  };
+};

package/shared/mixins.js

@@ -0,0 +1,233 @@
+import { isStringProp } from './utils.js';
+export function colorClasses(props) {
+  const {
+    color,
+    textColor,
+    bgColor,
+    borderColor,
+    rippleColor,
+    dark
+  } = props;
+  return {
+    dark,
+    [`color-${color}`]: color,
+    [`text-color-${textColor}`]: textColor,
+    [`bg-color-${bgColor}`]: bgColor,
+    [`border-color-${borderColor}`]: borderColor,
+    [`ripple-color-${rippleColor}`]: rippleColor
+  };
+}
+export const colorProps = {
+  color: String,
+  colorTheme: String,
+  textColor: String,
+  bgColor: String,
+  borderColor: String,
+  rippleColor: String,
+  dark: Boolean
+};
+export const iconProps = {
+  icon: String,
+  iconMaterial: String,
+  iconF7: String,
+  iconIos: String,
+  iconMd: String,
+  iconColor: String,
+  iconSize: [String, Number],
+  iconBadge: [String, Number],
+  iconBadgeColor: String
+};
+export const routerProps = {
+  back: Boolean,
+  external: Boolean,
+  force: Boolean,
+  animate: {
+    type: Boolean,
+    default: undefined
+  },
+  ignoreCache: Boolean,
+  reloadCurrent: Boolean,
+  reloadAll: Boolean,
+  reloadPrevious: Boolean,
+  reloadDetail: {
+    type: Boolean,
+    default: undefined
+  },
+  routeTabId: String,
+  view: String,
+  routeProps: Object,
+  preventRouter: Boolean,
+  transition: String,
+  openIn: String
+};
+export function routerAttrs(props) {
+  const {
+    force,
+    reloadCurrent,
+    reloadPrevious,
+    reloadAll,
+    reloadDetail,
+    animate,
+    ignoreCache,
+    routeTabId,
+    view,
+    transition,
+    openIn
+  } = props;
+  let dataAnimate;
+  if ('animate' in props && typeof animate !== 'undefined') {
+    dataAnimate = animate.toString();
+  }
+  let dataReloadDetail;
+  if ('reloadDetail' in props && typeof reloadDetail !== 'undefined') {
+    dataReloadDetail = reloadDetail.toString();
+  }
+  return {
+    'data-force': force || undefined,
+    'data-reload-current': reloadCurrent || undefined,
+    'data-reload-all': reloadAll || undefined,
+    'data-reload-previous': reloadPrevious || undefined,
+    'data-reload-detail': dataReloadDetail,
+    'data-animate': dataAnimate,
+    'data-ignore-cache': ignoreCache || undefined,
+    'data-route-tab-id': routeTabId || undefined,
+    'data-view': isStringProp(view) ? view : undefined,
+    'data-transition': isStringProp(transition) ? transition : undefined,
+    'data-open-in': isStringProp(openIn) ? openIn : undefined
+  };
+}
+export function routerClasses(props) {
+  const {
+    back,
+    linkBack,
+    external,
+    preventRouter
+  } = props;
+  return {
+    back: back || linkBack,
+    external,
+    'prevent-router': preventRouter
+  };
+}
+export const actionsProps = {
+  searchbarEnable: [Boolean, String],
+  searchbarDisable: [Boolean, String],
+  searchbarClear: [Boolean, String],
+  searchbarToggle: [Boolean, String],
+  // Panel
+  panelOpen: [Boolean, String],
+  panelClose: [Boolean, String],
+  panelToggle: [Boolean, String],
+  // Popup
+  popupOpen: [Boolean, String],
+  popupClose: [Boolean, String],
+  // Actions
+  actionsOpen: [Boolean, String],
+  actionsClose: [Boolean, String],
+  // Popover
+  popoverOpen: [Boolean, String],
+  popoverClose: [Boolean, String],
+  // Login Screen
+  loginScreenOpen: [Boolean, String],
+  loginScreenClose: [Boolean, String],
+  // Picker
+  sheetOpen: [Boolean, String],
+  sheetClose: [Boolean, String],
+  // Sortable
+  sortableEnable: [Boolean, String],
+  sortableDisable: [Boolean, String],
+  sortableToggle: [Boolean, String],
+  // Card
+  cardOpen: [Boolean, String],
+  cardPreventOpen: [Boolean, String],
+  cardClose: [Boolean, String]
+};
+export function actionsAttrs(props) {
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsOpen,
+    actionsClose,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardClose
+  } = props;
+  return {
+    'data-searchbar': isStringProp(searchbarEnable) && searchbarEnable || isStringProp(searchbarDisable) && searchbarDisable || isStringProp(searchbarClear) && searchbarClear || isStringProp(searchbarToggle) && searchbarToggle || undefined,
+    'data-panel': isStringProp(panelOpen) && panelOpen || isStringProp(panelClose) && panelClose || isStringProp(panelToggle) && panelToggle || undefined,
+    'data-popup': isStringProp(popupOpen) && popupOpen || isStringProp(popupClose) && popupClose || undefined,
+    'data-actions': isStringProp(actionsOpen) && actionsOpen || isStringProp(actionsClose) && actionsClose || undefined,
+    'data-popover': isStringProp(popoverOpen) && popoverOpen || isStringProp(popoverClose) && popoverClose || undefined,
+    'data-sheet': isStringProp(sheetOpen) && sheetOpen || isStringProp(sheetClose) && sheetClose || undefined,
+    'data-login-screen': isStringProp(loginScreenOpen) && loginScreenOpen || isStringProp(loginScreenClose) && loginScreenClose || undefined,
+    'data-sortable': isStringProp(sortableEnable) && sortableEnable || isStringProp(sortableDisable) && sortableDisable || isStringProp(sortableToggle) && sortableToggle || undefined,
+    'data-card': isStringProp(cardOpen) && cardOpen || isStringProp(cardClose) && cardClose || undefined
+  };
+}
+export function actionsClasses(props) {
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsClose,
+    actionsOpen,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardPreventOpen,
+    cardClose
+  } = props;
+  return {
+    'searchbar-enable': searchbarEnable || searchbarEnable === '',
+    'searchbar-disable': searchbarDisable || searchbarDisable === '',
+    'searchbar-clear': searchbarClear || searchbarClear === '',
+    'searchbar-toggle': searchbarToggle || searchbarToggle === '',
+    'panel-close': panelClose || panelClose === '',
+    'panel-open': panelOpen || panelOpen === '',
+    'panel-toggle': panelToggle || panelToggle === '',
+    'popup-close': popupClose || popupClose === '',
+    'popup-open': popupOpen || popupOpen === '',
+    'actions-close': actionsClose || actionsClose === '',
+    'actions-open': actionsOpen || actionsOpen === '',
+    'popover-close': popoverClose || popoverClose === '',
+    'popover-open': popoverOpen || popoverOpen === '',
+    'sheet-close': sheetClose || sheetClose === '',
+    'sheet-open': sheetOpen || sheetOpen === '',
+    'login-screen-close': loginScreenClose || loginScreenClose === '',
+    'login-screen-open': loginScreenOpen || loginScreenOpen === '',
+    'sortable-enable': sortableEnable || sortableEnable === '',
+    'sortable-disable': sortableDisable || sortableDisable === '',
+    'sortable-toggle': sortableToggle || sortableToggle === '',
+    'card-close': cardClose || cardClose === '',
+    'card-open': cardOpen || cardOpen === '',
+    'card-prevent-open': cardPreventOpen || cardPreventOpen === ''
+  };
+}

package/shared/modal-state-classes.js

@@ -0,0 +1,10 @@
+export const modalStateClasses = function (_temp) {
+  let {
+    isOpened,
+    isClosing
+  } = _temp === void 0 ? {} : _temp;
+  return {
+    'modal-in': isOpened && !isClosing,
+    'modal-out': isClosing
+  };
+};

package/shared/plugin.js

@@ -0,0 +1,37 @@
+import Framework7 from '@xenknight/framework7/lite';
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
+const Framework7Vue = {
+  name: 'vuePlugin',
+  installed: false,
+  install(params) {
+    if (params === void 0) {
+      params = {};
+    }
+    if (Framework7Vue.installed) return;
+    Framework7Vue.installed = true;
+    f7initEvents();
+    const {
+      theme: paramsTheme,
+      userAgent
+    } = params;
+    if (paramsTheme === 'md') theme.md = true;
+    if (paramsTheme === 'ios') theme.ios = true;
+
+    // eslint-disable-next-line
+    const needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
+    if (needThemeCalc && (!paramsTheme || paramsTheme === 'auto')) {
+      const device = Framework7.getDevice({
+        userAgent
+      }, true);
+      theme.ios = !!device.ios;
+      theme.md = !theme.ios;
+    }
+    f7ready(() => {
+      setTheme();
+    });
+    Framework7.Router.use(componentsRouter);
+  }
+};
+export { f7ready, f7, theme };
+export default Framework7Vue;

package/shared/router-open-in.js

@@ -0,0 +1,105 @@
+import { h } from 'vue';
+import Popup from '../components/popup.js';
+import View from '../components/view.js';
+import LoginScreen from '../components/login-screen.js';
+import Sheet from '../components/sheet.js';
+import Popover from '../components/popover.js';
+import Panel from '../components/panel.js';
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: {
+        ...options,
+        openIn: undefined
+      }
+    }
+  };
+  const params = {
+    ...options
+  };
+  if (options.openIn === 'popup') {
+    params.component = {
+      setup() {
+        return () => h(Popup, {
+          class: 'popup-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+    };
+    navigateOptions.route.popup = params;
+  }
+  if (options.openIn === 'loginScreen') {
+    params.component = {
+      setup() {
+        return () => h(LoginScreen, {
+          class: 'login-screen-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+    };
+    navigateOptions.route.loginScreen = params;
+  }
+  if (options.openIn === 'sheet') {
+    params.component = {
+      setup() {
+        return () => h(Sheet, {
+          class: 'sheet-modal-router-open-in',
+          'data-url': url
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+    };
+    navigateOptions.route.sheet = params;
+  }
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    params.component = {
+      setup() {
+        return () => h(Popover, {
+          class: 'popover-router-open-in',
+          'data-url': url,
+          targetEl: options.clickedEl || options.targetEl
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+    };
+    navigateOptions.route.popover = params;
+  }
+  if (options.openIn.indexOf('panel') >= 0) {
+    const parts = options.openIn.split(':');
+    const side = parts[1] || 'left';
+    const effect = parts[2] || 'cover';
+    params.component = {
+      setup() {
+        return () => h(Panel, {
+          class: 'panel-router-open-in',
+          'data-url': url,
+          side,
+          effect
+        }, [h(View, {
+          linksView: router.view.selector,
+          url,
+          ignoreOpenIn: true
+        })]);
+      }
+    };
+    navigateOptions.route.panel = params;
+  }
+  return router.navigate(navigateOptions);
+};