@xenknight/framework7 0.0.2

package/less/vars.less

@@ -0,0 +1,7 @@
+@breakpoints: {
+  xsmall: 480px;
+  small: 568px;
+  medium: 768px;
+  large: 1024px;
+  xlarge: 1200px;
+};

package/modules/clicks/clicks.d.ts

@@ -0,0 +1,19 @@
+import Framework7, { Framework7Plugin } from '../../components/app/app-class';
+
+export namespace Clicks {
+  interface AppMethods {}
+  interface AppParams {
+    /** Object with clicks-module related parameters */
+    clicks?:
+      | {
+          /** CSS selector for links that should be treated as external and shouldn't be handled by Framework7. For example such '.external' value will match to links like <a href="somepage.html" class="external"> (with class "external") (default '.external') */
+          externalLinks?: string;
+        }
+      | undefined;
+  }
+  interface AppEvents {}
+}
+
+declare const ClicksModule: Framework7Plugin;
+
+export default ClicksModule;

package/modules/clicks/clicks.js

@@ -0,0 +1,94 @@
+import { getWindow } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import ViewClass from '../../components/view/view-class.js';
+function initClicks(app) {
+  function handleClicks(e) {
+    const window = getWindow();
+    const $clickedEl = $(e.target);
+    const $clickedLinkEl = $clickedEl.closest('a');
+    const isLink = $clickedLinkEl.length > 0;
+    const url = isLink && $clickedLinkEl.attr('href');
+
+    // Check if link is external
+    if (isLink) {
+      if ($clickedLinkEl.is(app.params.clicks.externalLinks) ||
+      // eslint-disable-next-line
+      url && url.indexOf('javascript:') >= 0) {
+        const target = $clickedLinkEl.attr('target');
+        if (url && window.cordova && window.cordova.InAppBrowser && (target === '_system' || target === '_blank')) {
+          e.preventDefault();
+          window.cordova.InAppBrowser.open(url, target);
+        } else if (url && window.Capacitor && window.Capacitor.Plugins && window.Capacitor.Plugins.Browser && (target === '_system' || target === '_blank')) {
+          e.preventDefault();
+          window.Capacitor.Plugins.Browser.open({
+            url
+          });
+        }
+        return;
+      }
+    }
+
+    // Modules Clicks
+    Object.keys(app.modules).forEach(moduleName => {
+      const moduleClicks = app.modules[moduleName].clicks;
+      if (!moduleClicks) return;
+      if (e.preventF7Router) return;
+      Object.keys(moduleClicks).forEach(clickSelector => {
+        const matchingClickedElement = $clickedEl.closest(clickSelector).eq(0);
+        if (matchingClickedElement.length > 0) {
+          moduleClicks[clickSelector].call(app, matchingClickedElement, matchingClickedElement.dataset(), e);
+        }
+      });
+    });
+
+    // Load Page
+    let clickedLinkData = {};
+    if (isLink) {
+      e.preventDefault();
+      clickedLinkData = $clickedLinkEl.dataset();
+    }
+    clickedLinkData.clickedEl = $clickedLinkEl[0];
+
+    // Prevent Router
+    if (e.preventF7Router) return;
+    if ($clickedLinkEl.hasClass('prevent-router') || $clickedLinkEl.hasClass('router-prevent')) return;
+    const validUrl = url && url.length > 0 && url[0] !== '#';
+    if (validUrl || $clickedLinkEl.hasClass('back')) {
+      let view;
+      if (clickedLinkData.view && clickedLinkData.view === 'current') {
+        view = app.views.current;
+      } else if (clickedLinkData.view) {
+        view = $(clickedLinkData.view)[0].f7View;
+      } else {
+        view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View;
+        if (view && view.params.linksView && (!$clickedLinkEl.hasClass('back') || $clickedLinkEl.hasClass('back') && view.router.history.length === 1)) {
+          if (typeof view.params.linksView === 'string') view = $(view.params.linksView)[0].f7View;else if (view.params.linksView instanceof ViewClass) view = view.params.linksView;
+        }
+      }
+      if (!view) {
+        if (app.views.main) view = app.views.main;
+      }
+      if (!view || !view.router) return;
+      if ($clickedLinkEl[0].f7RouteProps) {
+        clickedLinkData.props = $clickedLinkEl[0].f7RouteProps;
+      }
+      if ($clickedLinkEl.hasClass('back')) view.router.back(url, clickedLinkData);else view.router.navigate(url, clickedLinkData);
+    }
+  }
+  app.on('click', handleClicks);
+}
+export default {
+  name: 'clicks',
+  params: {
+    clicks: {
+      // External Links
+      externalLinks: '.external'
+    }
+  },
+  on: {
+    init() {
+      const app = this;
+      initClicks(app);
+    }
+  }
+};

package/modules/component/$h.js

@@ -0,0 +1,15 @@
+import htm from 'htm';
+import { flattenArray } from '../../shared/utils.js';
+const ignoreChildren = [false, null, '', undefined];
+const h = function (type, props) {
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments[_key];
+  }
+  return {
+    type,
+    props: props || {},
+    children: flattenArray(children.filter(child => ignoreChildren.indexOf(child) < 0))
+  };
+};
+const $h = htm.bind(h);
+export default $h;

package/modules/component/$jsx.js

@@ -0,0 +1,17 @@
+import { flattenArray } from '../../shared/utils.js';
+const ignoreChildren = [false, null, '', undefined];
+const $jsx = function (type, props) {
+  for (var _len = arguments.length, children = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    children[_key - 2] = arguments[_key];
+  }
+  const flatChildren = flattenArray((children || []).filter(child => ignoreChildren.indexOf(child) < 0));
+  if (type === 'Fragment') {
+    return flatChildren;
+  }
+  return {
+    type,
+    props: props || {},
+    children: flatChildren
+  };
+};
+export default $jsx;

package/modules/component/component-class.js

@@ -0,0 +1,517 @@
+/* eslint no-underscore-dangle: "off" */
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import $h from './$h.js';
+import { id as generateId, merge, eventNameToColonCase, deleteProps } from '../../shared/utils.js';
+import vdom from './vdom.js';
+import patch from './patch.js';
+import $jsx from './$jsx.js';
+
+/* eslint-disable no-shadow */
+/* eslint-disable no-return-assign */
+/* eslint-disable no-plusplus */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-sequences */
+const types = [{
+  name: 'array',
+  init: i => i,
+  type: i => [i].find(Array.isArray),
+  update: (i, o) => [o].filter(Array.isArray).find(() => (i.length = 0, i.push(...o))),
+  insert: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), 0, ...[o].flat());
+  },
+  replace: function (i, x, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.splice(Math.max(x, 0), Math.min(++x, 1), ...[o].flat());
+  },
+  append: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.push(...[o].flat());
+  },
+  prepend: function (i, o) {
+    if (o === void 0) {
+      o = [];
+    }
+    return i.unshift(...[o].flat());
+  },
+  swap: (i, a, b) => {
+    [i[a], i[b]] = [i[b], i[a]];
+  },
+  fromTo: function (i, a, b) {
+    if (b === void 0) {
+      b = a;
+    }
+    return i.splice(Math.max(b, 0), 0, ...i.splice(Math.max(a, 0), 1));
+  },
+  remove: function (i, o, a) {
+    if (a === void 0) {
+      a = i.map((_, x) => x);
+    }
+    return [o].flat().filter(i => a.includes(i)).sort((a, b) => b - a).forEach(x => i.splice(x, 1));
+  },
+  clear: i => i.length = 0
+}, {
+  name: 'object',
+  init: i => i,
+  type: i => [i].filter(i => [i !== null, i !== undefined].every(i => i)).find(i => Object.getPrototypeOf(i) === Object.prototype),
+  update: (i, o) => Object.assign(i, o),
+  insert: () => {},
+  replace: () => {},
+  append: () => {},
+  prepend: () => {},
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: (i, o) => [o].flat().forEach(k => delete i[k]),
+  clear: i => Object.keys(i).forEach(k => delete i[k])
+}, {
+  name: 'atoms',
+  type: () => true,
+  init: function (i, o) {
+    if (o === void 0) {
+      o = {};
+    }
+    return Object.defineProperty(o, 'value', {
+      get: () => i,
+      set: v => {
+        // eslint-disable-next-line
+        i = v;
+      }
+    }), o;
+  },
+  update: function (i, v) {
+    if (v === void 0) {
+      v = i.value;
+    }
+    i.value = v;
+  },
+  insert: () => ({}),
+  // N/A
+  replace: () => ({}),
+  // N/A
+  append: () => ({}),
+  // N/A
+  prepend: () => ({}),
+  // N/A
+  swap: () => ({}),
+  // N/A
+  fromTo: () => ({}),
+  // N/A
+  remove: () => ({}),
+  // N/A
+  clear: i => {
+    i.value = undefined;
+  }
+}];
+
+/* eslint-enable no-shadow */
+/* eslint-enable no-return-assign */
+/* eslint-enable no-plusplus */
+/* eslint-enable no-param-reassign */
+/* eslint-enable no-sequences */
+
+class Component {
+  constructor(app, component, props, _temp) {
+    if (props === void 0) {
+      props = {};
+    }
+    let {
+      el,
+      context,
+      children
+    } = _temp === void 0 ? {} : _temp;
+    const document = getDocument();
+    merge(this, {
+      f7: app,
+      props: props || {},
+      context: context || {},
+      id: component.id || generateId(),
+      children: children || [],
+      theme: {
+        ios: app.theme === 'ios',
+        md: app.theme === 'md'
+      },
+      style: component.style,
+      __updateQueue: [],
+      __eventHandlers: [],
+      __onceEventHandlers: [],
+      __onBeforeMount: [],
+      __onMounted: [],
+      __onBeforeUpdate: [],
+      __onUpdated: [],
+      __onBeforeUnmount: [],
+      __onUnmounted: []
+    });
+    const createComponent = () => {
+      return component(this.props, this.getComponentContext(true));
+    };
+    const getRenderFuncion = componentResult => new Promise((resolve, reject) => {
+      if (typeof componentResult === 'function') {
+        resolve(componentResult);
+      } else if (componentResult instanceof Promise) {
+        componentResult.then(render => {
+          resolve(render);
+        }).catch(err => {
+          reject(err);
+        });
+      } else {
+        reject(new Error('Framework7: Component render function is not a "function" type. Didn\'t you forget to "return $render"?'));
+      }
+    });
+    return new Promise((resolve, reject) => {
+      const componentResult = createComponent();
+      getRenderFuncion(componentResult).then(render => {
+        this.renderFunction = render;
+        const tree = this.render();
+        if (el) {
+          this.vnode = vdom(tree, this, true);
+          if (this.style) {
+            this.styleEl = document.createElement('style');
+            this.styleEl.innerHTML = this.style;
+          }
+          this.el = el;
+          patch(this.el, this.vnode);
+          this.el = this.vnode.elm;
+          this.$el = $(this.el);
+          this.attachEvents();
+          this.el.f7Component = this;
+          this.mount();
+          resolve(this);
+          return;
+        }
+        // Make Dom
+        if (tree) {
+          this.vnode = vdom(tree, this, true);
+          this.el = document.createElement(this.vnode.sel || 'div');
+          patch(this.el, this.vnode);
+          this.$el = $(this.el);
+        }
+        if (this.style) {
+          this.styleEl = document.createElement('style');
+          this.styleEl.innerHTML = this.style;
+        }
+        this.attachEvents();
+        if (this.el) {
+          this.el.f7Component = this;
+        }
+        resolve(this);
+      }).catch(err => {
+        reject(err);
+      });
+    });
+  }
+  on(eventName, handler) {
+    if (!this.__eventHandlers) return;
+    this.__eventHandlers.push({
+      eventName,
+      handler
+    });
+  }
+  once(eventName, handler) {
+    if (!this.__eventHandlers) return;
+    this.__onceEventHandlers.push({
+      eventName,
+      handler
+    });
+  }
+  getComponentRef() {
+    const self = this;
+    return initialValue => {
+      let value = initialValue;
+      const obj = {};
+      Object.defineProperty(obj, 'value', {
+        get() {
+          return value;
+        },
+        set(v) {
+          value = v;
+          self.update();
+        }
+      });
+      return obj;
+    };
+  }
+  getComponentStore() {
+    const {
+      state,
+      _gettersPlain,
+      dispatch
+    } = this.f7.store;
+    const $store = {
+      state,
+      dispatch
+    };
+    $store.getters = new Proxy(_gettersPlain, {
+      get: (target, prop) => {
+        const obj = target[prop];
+        const callback = v => {
+          obj.value = v;
+          this.update();
+        };
+        obj.onUpdated(callback);
+        return obj;
+      }
+    });
+    return $store;
+  }
+
+  /* eslint-disable no-sequences */
+  getUseState() {
+    var _this = this;
+    return o => {
+      const obj = [o].reduce(function (t, _i, _x, _a, i) {
+        if (i === void 0) {
+          i = t.init(_i);
+        }
+        return {
+          state: i,
+          update: v => (t.update(i, v), _this.update()),
+          remove: v => (t.remove(i, v), _this.update()),
+          clear: () => (t.clear(i), _this.update()),
+          insert: (x, v) => (t.insert(i, x, v), _this.update()),
+          replace: (x, v) => (t.replace(i, x, v), _this.update()),
+          append: v => (t.append(i, v), _this.update()),
+          prepend: v => (t.prepend(i, v), _this.update()),
+          swap: (a, b) => (t.swap(i, a, b), _this.update()),
+          fromTo: (a, b) => (t.fromTo(i, a, b), _this.update()),
+          method: function (f) {
+            if (f === void 0) {
+              f = () => ({});
+            }
+            return f(i), _this.update();
+          },
+          async: function (f) {
+            if (f === void 0) {
+              f = () => Promise.reject(i);
+            }
+            return f(i).then(() => _this.update());
+          }
+        };
+      }, types.find(i => i.type(o)));
+      obj.length = 12;
+      obj[Symbol.iterator] = function Iterate() {
+        const values = Object.values(this);
+        values.splice(values.indexOf(12), 1);
+        let index = 0;
+        return {
+          next() {
+            if (index < values.length) {
+              const val = values[index];
+              index += 1;
+              return {
+                value: val,
+                done: false
+              };
+            }
+            return {
+              done: true
+            };
+          }
+        };
+      };
+      return obj;
+    };
+  }
+  /* eslint-enable no-sequences */
+
+  getComponentContext(includeHooks) {
+    const ctx = {
+      $f7route: this.context.f7route,
+      $f7router: this.context.f7router,
+      $h,
+      $,
+      $id: this.id,
+      $f7: this.f7,
+      $f7ready: this.f7ready.bind(this),
+      $theme: this.theme,
+      $tick: this.tick.bind(this),
+      $update: this.update.bind(this),
+      $emit: this.emit.bind(this),
+      $store: this.getComponentStore(),
+      $ref: this.getComponentRef(),
+      $el: {},
+      $useState: this.getUseState()
+    };
+    Object.defineProperty(ctx.$el, 'value', {
+      get: () => {
+        return this.$el;
+      }
+    });
+    if (includeHooks) Object.assign(ctx, {
+      $on: this.on.bind(this),
+      $once: this.once.bind(this),
+      $onBeforeMount: handler => this.__onBeforeMount.push(handler),
+      $onMounted: handler => this.__onMounted.push(handler),
+      $onBeforeUpdate: handler => this.__onBeforeUpdate.push(handler),
+      $onUpdated: handler => this.__onUpdated.push(handler),
+      $onBeforeUnmount: handler => this.__onBeforeUnmount.push(handler),
+      $onUnmounted: handler => this.__onUnmounted.push(handler)
+    });
+    return ctx;
+  }
+  render() {
+    return this.renderFunction(this.getComponentContext());
+  }
+  emit(name, data) {
+    if (!this.el) return;
+    this.$el.trigger(name, data);
+  }
+  attachEvents() {
+    const {
+      $el
+    } = this;
+    if (!this.__eventHandlers) return;
+    this.__eventHandlers.forEach(_ref => {
+      let {
+        eventName,
+        handler
+      } = _ref;
+      $el.on(eventNameToColonCase(eventName), handler);
+    });
+    this.__onceEventHandlers.forEach(_ref2 => {
+      let {
+        eventName,
+        handler
+      } = _ref2;
+      $el.once(eventNameToColonCase(eventName), handler);
+    });
+  }
+  detachEvents() {
+    const {
+      $el
+    } = this;
+    if (!this.__eventHandlers) return;
+    this.__eventHandlers.forEach(_ref3 => {
+      let {
+        eventName,
+        handler
+      } = _ref3;
+      $el.on(eventNameToColonCase(eventName), handler);
+    });
+    this.__onceEventHandlers.forEach(_ref4 => {
+      let {
+        eventName,
+        handler
+      } = _ref4;
+      $el.once(eventNameToColonCase(eventName), handler);
+    });
+  }
+  startUpdateQueue() {
+    const window = getWindow();
+    if (this.__requestAnimationFrameId) return;
+    const update = () => {
+      this.hook('onBeforeUpdate');
+      const tree = this.render();
+
+      // Make Dom
+      if (tree) {
+        const newVNode = vdom(tree, this, false);
+        this.vnode = patch(this.vnode, newVNode);
+      }
+    };
+    this.__requestAnimationFrameId = window.requestAnimationFrame(() => {
+      if (this.__updateIsPending) update();
+      let resolvers = [...this.__updateQueue];
+      this.__updateQueue = [];
+      this.__updateIsPending = false;
+      window.cancelAnimationFrame(this.__requestAnimationFrameId);
+      delete this.__requestAnimationFrameId;
+      delete this.__updateIsPending;
+      resolvers.forEach(resolver => resolver());
+      resolvers = [];
+    });
+  }
+  tick(callback) {
+    return new Promise(resolve => {
+      function resolver() {
+        resolve();
+        if (callback) callback();
+      }
+      this.__updateQueue.push(resolver);
+      this.startUpdateQueue();
+    });
+  }
+  update(callback) {
+    if (this.__destroyed) return new Promise(() => {});
+    return new Promise(resolve => {
+      const resolver = () => {
+        resolve();
+        if (callback) callback();
+      };
+      this.__updateIsPending = true;
+      this.__updateQueue.push(resolver);
+      this.startUpdateQueue();
+    });
+  }
+  setState(callback) {
+    return this.update(callback);
+  }
+  f7ready(callback) {
+    if (this.f7.initialized) {
+      callback(this.f7);
+      return;
+    }
+    this.f7.once('init', () => {
+      callback(this.f7);
+    });
+  }
+  mount(mountMethod) {
+    this.hook('onBeforeMount', this.$el);
+    if (this.styleEl) $('head').append(this.styleEl);
+    if (mountMethod) mountMethod(this.el);
+    this.hook('onMounted', this.$el);
+  }
+  destroy() {
+    if (this.__destroyed) return;
+    const window = getWindow();
+    this.hook('onBeforeUnmount');
+    if (this.styleEl) $(this.styleEl).remove();
+    this.detachEvents();
+    this.hook('onUnmounted');
+    // Delete component instance
+    if (this.el && this.el.f7Component) {
+      this.el.f7Component = null;
+      delete this.el.f7Component;
+    }
+    // Patch with empty node
+    if (this.vnode) {
+      this.vnode = patch(this.vnode, {
+        sel: this.vnode.sel,
+        data: {}
+      });
+    }
+    // Clear update queue
+    window.cancelAnimationFrame(this.__requestAnimationFrameId);
+    this.__updateQueue = [];
+    this.__eventHandlers = [];
+    this.__onceEventHandlers = [];
+    this.__onBeforeMount = [];
+    this.__onMounted = [];
+    this.__onBeforeUpdate = [];
+    this.__onUpdated = [];
+    this.__onBeforeUnmount = [];
+    this.__onUnmounted = [];
+    // Delete all props
+    deleteProps(this);
+    this.__destroyed = true;
+  }
+  hook(name) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    if (this.__destroyed) return;
+    this[`__${name}`].forEach(handler => {
+      handler(...args);
+    });
+  }
+}
+Component.$jsx = $jsx;
+export default Component;