@xenknight/framework7 0.0.2

package/components/sortable/sortable.js

@@ -0,0 +1,286 @@
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+import { getSupport } from '../../shared/get-support.js';
+const Sortable = {
+  init() {
+    const app = this;
+    const document = getDocument();
+    let isTouched;
+    let isMoved;
+    let touchStartY;
+    let touchesDiff;
+    let $sortingEl;
+    let $sortingItems;
+    let $sortableContainer;
+    let sortingElHeight;
+    let minTop;
+    let maxTop;
+    let $insertAfterEl;
+    let $insertBeforeEl;
+    let indexFrom;
+    let $pageEl;
+    let $pageContentEl;
+    let pageHeight;
+    let pageOffset;
+    let sortingElOffsetLocal;
+    let sortingElOffsetTop;
+    let initialScrollTop;
+    let wasTapHold;
+    function handleTouchStart(e, isTapHold) {
+      isMoved = false;
+      isTouched = true;
+      wasTapHold = false;
+      touchStartY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
+      $sortingEl = $(e.target).closest('li').eq(0);
+      indexFrom = $sortingEl.index();
+      $sortableContainer = $sortingEl.parents('.sortable');
+      const $listGroup = $sortingEl.parents('.list-group');
+      if ($listGroup.length && $listGroup.parents($sortableContainer).length) {
+        $sortableContainer = $listGroup;
+      }
+      $sortingItems = $sortableContainer.children('ul').children('li:not(.disallow-sorting):not(.no-sorting)');
+      if (app.panel) app.panel.allowOpen = false;
+      if (app.swipeout) app.swipeout.allow = false;
+      if (isTapHold) {
+        $sortingEl.addClass('sorting');
+        $sortableContainer.addClass('sortable-sorting');
+        wasTapHold = true;
+      }
+    }
+    function handleTouchMove(e) {
+      if (!isTouched || !$sortingEl) return;
+      const pageY = e.type === 'touchmove' ? e.targetTouches[0].pageY : e.pageY;
+      if (!isMoved) {
+        $pageEl = $sortingEl.parents('.page');
+        $pageContentEl = $sortingEl.parents('.page-content');
+        const paddingTop = parseInt($pageContentEl.css('padding-top'), 10);
+        const paddingBottom = parseInt($pageContentEl.css('padding-bottom'), 10);
+        initialScrollTop = $pageContentEl[0].scrollTop;
+        pageOffset = $pageEl.offset().top + paddingTop;
+        pageHeight = $pageEl.height() - paddingTop - paddingBottom;
+        $sortingEl.addClass('sorting');
+        $sortableContainer.addClass('sortable-sorting');
+        sortingElOffsetLocal = $sortingEl[0].offsetTop;
+        minTop = $sortingEl[0].offsetTop;
+        maxTop = $sortingEl.parent().height() - sortingElOffsetLocal - $sortingEl.height();
+        sortingElHeight = $sortingEl[0].offsetHeight;
+        sortingElOffsetTop = $sortingEl.offset().top;
+      }
+      isMoved = true;
+      e.preventDefault();
+      e.f7PreventSwipePanel = true;
+      touchesDiff = pageY - touchStartY;
+      const translateScrollOffset = $pageContentEl[0].scrollTop - initialScrollTop;
+      const translate = Math.min(Math.max(touchesDiff + translateScrollOffset, -minTop), maxTop);
+      $sortingEl.transform(`translate3d(0,${translate}px,0)`);
+      const scrollAddition = 44;
+      let allowScroll = true;
+      if (touchesDiff + translateScrollOffset + scrollAddition < -minTop) {
+        allowScroll = false;
+      }
+      if (touchesDiff + translateScrollOffset - scrollAddition > maxTop) {
+        allowScroll = false;
+      }
+      $insertBeforeEl = undefined;
+      $insertAfterEl = undefined;
+      let scrollDiff;
+      if (allowScroll) {
+        if (sortingElOffsetTop + touchesDiff + sortingElHeight + scrollAddition > pageOffset + pageHeight) {
+          // To Bottom
+          scrollDiff = sortingElOffsetTop + touchesDiff + sortingElHeight + scrollAddition - (pageOffset + pageHeight);
+        }
+        if (sortingElOffsetTop + touchesDiff < pageOffset + scrollAddition) {
+          // To Top
+          scrollDiff = sortingElOffsetTop + touchesDiff - pageOffset - scrollAddition;
+        }
+        if (scrollDiff) {
+          $pageContentEl[0].scrollTop += scrollDiff;
+        }
+      }
+      $sortingItems.each(el => {
+        const $currentEl = $(el);
+        if ($currentEl[0] === $sortingEl[0]) return;
+        const currentElOffset = $currentEl[0].offsetTop;
+        const currentElHeight = $currentEl.height();
+        const sortingElOffset = sortingElOffsetLocal + translate;
+        let currentTranslate;
+        const prevTranslate = $currentEl[0].f7Translate;
+        if (sortingElOffset >= currentElOffset - currentElHeight / 2 && $sortingEl.index() < $currentEl.index()) {
+          currentTranslate = -sortingElHeight;
+          $currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
+          $insertAfterEl = $currentEl;
+          $insertBeforeEl = undefined;
+        } else if (sortingElOffset <= currentElOffset + currentElHeight / 2 && $sortingEl.index() > $currentEl.index()) {
+          currentTranslate = sortingElHeight;
+          $currentEl[0].f7Translate = currentTranslate;
+          $currentEl.transform(`translate3d(0, ${currentTranslate}px,0)`);
+          $insertAfterEl = undefined;
+          if (!$insertBeforeEl) $insertBeforeEl = $currentEl;
+        } else {
+          currentTranslate = undefined;
+          $currentEl.transform('translate3d(0, 0%,0)');
+        }
+        if (prevTranslate !== currentTranslate) {
+          $currentEl.trigger('sortable:move');
+          app.emit('sortableMove', $currentEl[0], $sortableContainer[0]);
+        }
+        $currentEl[0].f7Translate = currentTranslate;
+      });
+    }
+    function handleTouchEnd() {
+      if (!isTouched || !isMoved) {
+        if (isTouched && !isMoved) {
+          if (app.panel) app.panel.allowOpen = true;
+          if (app.swipeout) app.swipeout.allow = true;
+          if (wasTapHold) {
+            $sortingEl.removeClass('sorting');
+            $sortableContainer.removeClass('sortable-sorting');
+          }
+        }
+        isTouched = false;
+        isMoved = false;
+        return;
+      }
+      if (app.panel) app.panel.allowOpen = true;
+      if (app.swipeout) app.swipeout.allow = true;
+      $sortingItems.transform('');
+      $sortingEl.removeClass('sorting');
+      $sortableContainer.removeClass('sortable-sorting');
+      let indexTo;
+      if ($insertAfterEl) indexTo = $insertAfterEl.index();else if ($insertBeforeEl) indexTo = $insertBeforeEl.index();
+      let moveElements = $sortableContainer.dataset().sortableMoveElements;
+      if (typeof moveElements === 'undefined') {
+        moveElements = app.params.sortable.moveElements;
+      }
+      if (moveElements) {
+        if ($insertAfterEl) {
+          $sortingEl.insertAfter($insertAfterEl);
+        }
+        if ($insertBeforeEl) {
+          $sortingEl.insertBefore($insertBeforeEl);
+        }
+      }
+      if (($insertAfterEl || $insertBeforeEl) && $sortableContainer.hasClass('virtual-list')) {
+        indexFrom = $sortingEl[0].f7VirtualListIndex;
+        if (typeof indexFrom === 'undefined') indexFrom = $sortingEl.attr('data-virtual-list-index');
+        if ($insertBeforeEl) {
+          indexTo = $insertBeforeEl[0].f7VirtualListIndex;
+          if (typeof indexTo === 'undefined') indexTo = $insertBeforeEl.attr('data-virtual-list-index');
+        } else {
+          indexTo = $insertAfterEl[0].f7VirtualListIndex;
+          if (typeof indexTo === 'undefined') indexTo = $insertAfterEl.attr('data-virtual-list-index');
+        }
+        if (indexTo !== null) indexTo = parseInt(indexTo, 10);else indexTo = undefined;
+        const virtualList = $sortableContainer[0].f7VirtualList;
+        if (indexFrom) indexFrom = parseInt(indexFrom, 10);
+        if (indexTo) indexTo = parseInt(indexTo, 10);
+        if (virtualList) virtualList.moveItem(indexFrom, indexTo);
+      }
+      if (typeof indexTo !== 'undefined' && !Number.isNaN(indexTo) && indexTo !== indexFrom) {
+        $sortingEl.trigger('sortable:sort', {
+          from: indexFrom,
+          to: indexTo
+        });
+        app.emit('sortableSort', $sortingEl[0], {
+          from: indexFrom,
+          to: indexTo,
+          el: $sortingEl[0]
+        }, $sortableContainer[0]);
+      }
+      $insertBeforeEl = undefined;
+      $insertAfterEl = undefined;
+      isTouched = false;
+      isMoved = false;
+    }
+    const activeListener = getSupport().passiveListener ? {
+      passive: false,
+      capture: false
+    } : false;
+    $(document).on(app.touchEvents.start, '.list.sortable .sortable-handler', handleTouchStart, activeListener);
+    app.on('touchmove:active', handleTouchMove);
+    app.on('touchend:passive', handleTouchEnd);
+    $(document).on('taphold', '.sortable-tap-hold', (e, pointerEvent) => {
+      handleTouchStart(pointerEvent, true);
+    });
+  },
+  enable(el) {
+    if (el === void 0) {
+      el = '.list.sortable';
+    }
+    const app = this;
+    const $el = $(el);
+    if ($el.length === 0) return;
+    $el.addClass('sortable-enabled');
+    $el.trigger('sortable:enable');
+    app.emit('sortableEnable', $el[0]);
+  },
+  disable(el) {
+    if (el === void 0) {
+      el = '.list.sortable';
+    }
+    const app = this;
+    const $el = $(el);
+    if ($el.length === 0) return;
+    $el.removeClass('sortable-enabled');
+    $el.trigger('sortable:disable');
+    app.emit('sortableDisable', $el[0]);
+  },
+  toggle(el) {
+    if (el === void 0) {
+      el = '.list.sortable';
+    }
+    const app = this;
+    const $el = $(el);
+    if ($el.length === 0) return;
+    if ($el.hasClass('sortable-enabled')) {
+      app.sortable.disable($el);
+    } else {
+      app.sortable.enable($el);
+    }
+  }
+};
+export default {
+  name: 'sortable',
+  params: {
+    sortable: {
+      moveElements: true
+    }
+  },
+  create() {
+    const app = this;
+    bindMethods(app, {
+      sortable: Sortable
+    });
+  },
+  on: {
+    init() {
+      const app = this;
+      if (!app.params.sortable) return;
+      app.sortable.init();
+    }
+  },
+  clicks: {
+    '.sortable-enable': function enable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.sortable.enable(data.sortable);
+    },
+    '.sortable-disable': function disable($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.sortable.disable(data.sortable);
+    },
+    '.sortable-toggle': function toggle($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.sortable.toggle(data.sortable);
+    }
+  }
+};

package/components/sortable/sortable.less

@@ -0,0 +1,133 @@
+/* === Sortable === */
+@import './sortable-vars.less';
+
+.sortable {
+  .sortable-handler {
+    width: var(--f7-sortable-handler-width);
+    height: 100%;
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    opacity: 0;
+    pointer-events: none;
+    cursor: move;
+    transition-duration: 300ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    &:after {
+      .core-icons-font();
+      transition-duration: 300ms;
+      transform: translateX(10px);
+      color: var(--f7-sortable-handler-color);
+      overflow: hidden;
+      height: 20px;
+      width: 18px;
+    }
+    .ltr({
+      right: var(--f7-safe-area-right);
+    });
+    .rtl({
+      left: var(--f7-safe-area-left);
+    });
+  }
+  li.sorting {
+    z-index: 50;
+    background: var(--f7-sortable-sorting-item-bg-color);
+    transition-duration: 0ms;
+    box-shadow: var(--f7-sortable-sorting-item-box-shadow);
+    .item-inner {
+      .hairline-remove(bottom);
+    }
+  }
+}
+.sortable-opposite {
+  .sortable-handler {
+    .ltr({
+      left: var(--f7-safe-area-right);
+      right: auto;
+    });
+    .rtl({
+      right: var(--f7-safe-area-left);
+      left: auto;
+    });
+    &:after {
+      transform: translateX(-10px);
+    }
+  }
+}
+.sortable:not(.sortable-opposite) .item-inner,
+.sortable-opposite .item-content,
+.sortable.simple-list li,
+.sortable-opposite.links-list li a {
+  transition-duration: 300ms;
+  transition-property: all;
+}
+.sortable-sorting li {
+  transition-duration: 300ms;
+}
+.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) {
+  .sortable-handler {
+    pointer-events: auto;
+    touch-action: none;
+    opacity: 1;
+    &:after {
+      transform: translateX(0px);
+    }
+  }
+}
+.sortable-enabled {
+  &:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-inner,
+  &:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-link .item-title-row,
+  &:not(.sortable-opposite).links-list li:not(.no-sorting):not(.disallow-sorting) > a {
+    &:before {
+      display: none;
+    }
+  }
+}
+.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) .item-inner,
+.sortable-enabled:not(.sortable-opposite)
+  li:not(.no-sorting):not(.disallow-sorting)
+  .item-link
+  .item-inner,
+.sortable-enabled:not(.sortable-opposite)
+  li:not(.no-sorting):not(.disallow-sorting)
+  .item-link.no-chevron
+  .item-inner,
+.sortable-enabled.no-chevron:not(.sortable-opposite)
+  li:not(.no-sorting):not(.disallow-sorting)
+  .item-link
+  .item-inner,
+.sortable-enabled :not(.sortable-opposite).no-chevron .item-link .item-inner,
+.no-chevron
+  .sortable-enabled:not(.sortable-opposite)
+  li:not(.no-sorting):not(.disallow-sorting)
+  .item-link
+  .item-inner,
+.simple-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting),
+.links-list.sortable-enabled:not(.sortable-opposite) li:not(.no-sorting):not(.disallow-sorting) a {
+  .ltr({
+    padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
+  });
+  .rtl({
+    padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
+  });
+}
+.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) .item-content,
+.simple-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting),
+.links-list.sortable-opposite.sortable-enabled li:not(.no-sorting):not(.disallow-sorting) a {
+  .ltr({
+    padding-left: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
+  });
+  .rtl({
+    padding-right: calc(var(--f7-sortable-handler-width) + var(--f7-safe-area-right));
+  });
+}
+
+.if-ios-theme({
+  @import './sortable-ios.less';
+});
+.if-md-theme({
+  @import './sortable-md.less';
+});

package/components/statusbar/statusbar-ios.less

@@ -0,0 +1,2 @@
+.ios {
+}

package/components/statusbar/statusbar-md.less

@@ -0,0 +1,2 @@
+.md {
+}

package/components/statusbar/statusbar.d.ts

@@ -0,0 +1,54 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Statusbar {
+  interface AppParams {
+    /** Statusbar parameters */
+    statusbar?:
+      | {
+          /** Enables statusbar handling by Framework7. Disable it if you don't want Framework7 to handle statusbar behavior */
+          enabled?: boolean;
+          /** If enabled, then click on statusbar overlay will scroll top page content to the top.This functionality is only available when app is running under cordova/capacitor environment with installed cordova-plugin-statusbar */
+          scrollTopOnClick?: boolean;
+          /** Hex string (#RRGGBB) with background color when app running under iOS device. If passed then it will override CSS value */
+          iosBackgroundColor?: string;
+          /** Makes the statusbar overlay or not overlay the WebView. This functionality is only available when app is running on iOS device under cordova/capacitor environment with installed cordova-plugin-statusbar*/
+          iosOverlaysWebView?: boolean;
+          /** Statusbar text color. Can be white or black. This functionality is only available when app is running on iOS under cordova/capacitor environment with installed cordova-plugin-statusbar */
+          iosTextColor?: string;
+          /** Hex string (#RRGGBB) with background color when app running on Android device. If passed then it will override CSS value */
+          androidBackgroundColor?: string;
+          /** Makes the statusbar overlay or not overlay the WebView. This functionality is only available when app is running on Android and under cordova/capacitor environment with installed cordova-plugin-statusbar
+           */
+          androidOverlaysWebView?: boolean;
+          /** Statusbar text color. Can be white or black. This functionality is only available when app is running on Android and under cordova/capacitor environment with installed cordova-plugin-statusbar */
+          androidTextColor?: string;
+        }
+      | undefined;
+  }
+
+  interface AppMethods {
+    /** Statusbar methods and properties */
+    statusbar: {
+      /** Hide statusbar. In webapp it just hides statusbar overlay, but in cordova app it will hide statusbar at all. Hiding device statusbar is available when app is running under cordova/capacitor environment with installed cordova-plugin-statusbar */
+      hide(): void;
+      /** Show statusbar */
+      show(): void;
+      /** Makes the statusbar overlay or not overlay the WebView. This functionality is only available when app is running under cordova/capacitor environment with installed cordova-plugin-statusbar */
+      overlaysWebView(overlays: boolean): void;
+      /** "Set/change statusbar text color. "color" can be white or black. This functionality is only available when app is running under cordova/capacitor environment with installed cordova-plugin-statusbar" */
+      setTextColor(color: string): void;
+      /** Set/change statusbar background colorhex - string - Hex string (#RRGGBB) with background color */
+      setBackgroundColor(hex: string): void;
+      /** Returns Promise resolved with "true" if system statusbar is visible and false when it is not visible. This functionality is only available when app is running under cordova/capacitor/capacitor environment with installed cordova-plugin-statusbar */
+      isVisible(): Promise<boolean>;
+    };
+  }
+  interface AppEvents {}
+}
+
+declare const StatusbarComponent: Framework7Plugin;
+export default StatusbarComponent;

package/components/statusbar/statusbar.js

@@ -0,0 +1,190 @@
+import { getWindow } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+import { getDevice } from '../../shared/get-device.js';
+const isCapacitor = () => {
+  const window = getWindow();
+  return window.Capacitor && window.Capacitor.isNative && window.Capacitor.Plugins && window.Capacitor.Plugins.StatusBar;
+};
+const Statusbar = {
+  hide() {
+    const window = getWindow();
+    const device = getDevice();
+    if (device.cordova && window.StatusBar) {
+      window.StatusBar.hide();
+    }
+    if (isCapacitor()) {
+      window.Capacitor.Plugins.StatusBar.hide();
+    }
+  },
+  show() {
+    const window = getWindow();
+    const device = getDevice();
+    if (device.cordova && window.StatusBar) {
+      window.StatusBar.show();
+    }
+    if (isCapacitor()) {
+      window.Capacitor.Plugins.StatusBar.show();
+    }
+  },
+  onClick() {
+    const app = this;
+    let pageContent;
+    if ($('.popup.modal-in').length > 0) {
+      // Check for opened popup
+      pageContent = $('.popup.modal-in').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content');
+    } else if ($('.panel.panel-in').length > 0) {
+      // Check for opened panel
+      pageContent = $('.panel.panel-in').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content');
+    } else if ($('.views > .view.tab-active').length > 0) {
+      // View in tab bar app layout
+      pageContent = $('.views > .view.tab-active').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content');
+    } else if ($('.views').length > 0) {
+      pageContent = $('.views').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content');
+    } else {
+      pageContent = app.$el.children('.view').find('.page:not(.page-previous):not(.page-next):not(.cached)').find('.page-content');
+    }
+    if (pageContent && pageContent.length > 0) {
+      // Check for tab
+      if (pageContent.hasClass('tab')) {
+        pageContent = pageContent.parent('.tabs').children('.page-content.tab-active');
+      }
+      if (pageContent.length > 0) pageContent.scrollTop(0, 300);
+    }
+  },
+  setTextColor(color) {
+    const window = getWindow();
+    const device = getDevice();
+    if (device.cordova && window.StatusBar) {
+      if (color === 'white') {
+        window.StatusBar.styleLightContent();
+      } else {
+        window.StatusBar.styleDefault();
+      }
+    }
+    if (isCapacitor()) {
+      if (color === 'white') {
+        window.Capacitor.Plugins.StatusBar.setStyle({
+          style: 'DARK'
+        });
+      } else {
+        window.Capacitor.Plugins.StatusBar.setStyle({
+          style: 'LIGHT'
+        });
+      }
+    }
+  },
+  setBackgroundColor(color) {
+    const window = getWindow();
+    const device = getDevice();
+    if (device.cordova && window.StatusBar) {
+      window.StatusBar.backgroundColorByHexString(color);
+    }
+    if (isCapacitor()) {
+      window.Capacitor.Plugins.StatusBar.setBackgroundColor({
+        color
+      });
+    }
+  },
+  isVisible() {
+    const window = getWindow();
+    const device = getDevice();
+    return new Promise(resolve => {
+      if (device.cordova && window.StatusBar) {
+        resolve(window.StatusBar.isVisible);
+      }
+      if (isCapacitor()) {
+        window.Capacitor.Plugins.StatusBar.getInfo().then(info => {
+          resolve(info.visible);
+        });
+      }
+      resolve(false);
+    });
+  },
+  overlaysWebView(overlays) {
+    if (overlays === void 0) {
+      overlays = true;
+    }
+    const window = getWindow();
+    const device = getDevice();
+    if (device.cordova && window.StatusBar) {
+      window.StatusBar.overlaysWebView(overlays);
+    }
+    if (isCapacitor()) {
+      window.Capacitor.Plugins.StatusBar.setOverlaysWebView({
+        overlay: overlays
+      });
+    }
+  },
+  init() {
+    const app = this;
+    const window = getWindow();
+    const device = getDevice();
+    const params = app.params.statusbar;
+    if (!params.enabled) return;
+    const isCordova = device.cordova && window.StatusBar;
+    const isCap = isCapacitor();
+    if (isCordova || isCap) {
+      if (params.scrollTopOnClick) {
+        $(window).on('statusTap', Statusbar.onClick.bind(app));
+      }
+      if (device.ios) {
+        if (params.iosOverlaysWebView) {
+          Statusbar.overlaysWebView(true);
+        } else {
+          Statusbar.overlaysWebView(false);
+        }
+        if (params.iosTextColor === 'white') {
+          Statusbar.setTextColor('white');
+        } else {
+          Statusbar.setTextColor('black');
+        }
+      }
+      if (device.android) {
+        if (params.androidOverlaysWebView) {
+          Statusbar.overlaysWebView(true);
+        } else {
+          Statusbar.overlaysWebView(false);
+        }
+        if (params.androidTextColor === 'white') {
+          Statusbar.setTextColor('white');
+        } else {
+          Statusbar.setTextColor('black');
+        }
+      }
+    }
+    if (params.iosBackgroundColor && device.ios) {
+      Statusbar.setBackgroundColor(params.iosBackgroundColor);
+    }
+    if (params.androidBackgroundColor && device.android) {
+      Statusbar.setBackgroundColor(params.androidBackgroundColor);
+    }
+  }
+};
+export default {
+  name: 'statusbar',
+  params: {
+    statusbar: {
+      enabled: true,
+      scrollTopOnClick: true,
+      iosOverlaysWebView: true,
+      iosTextColor: 'black',
+      iosBackgroundColor: null,
+      androidOverlaysWebView: false,
+      androidTextColor: 'black',
+      androidBackgroundColor: null
+    }
+  },
+  create() {
+    const app = this;
+    bindMethods(app, {
+      statusbar: Statusbar
+    });
+  },
+  on: {
+    init() {
+      const app = this;
+      Statusbar.init.call(app);
+    }
+  }
+};

package/components/statusbar/statusbar.less

@@ -0,0 +1,7 @@
+/* === Statusbar === */
+.if-ios-theme({
+  @import './statusbar-ios.less';
+});
+.if-md-theme({
+  @import './statusbar-md.less';
+});