@xenknight/framework7 0.0.2

package/components/list-index/list-index.less

@@ -0,0 +1,130 @@
+/* === Indexed List === */
+@import './list-index-vars.less';
+
+.list-index {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  text-align: center;
+  z-index: 10;
+  width: var(--f7-list-index-width);
+  cursor: pointer;
+  user-select: none;
+  .ltr({
+    right: var(--f7-safe-area-right);
+  });
+  .rtl({
+    left: var(--f7-safe-area-left);
+  });
+  &:before {
+    content: '';
+    position: absolute;
+    width: 20px;
+    top: 0;
+    right: 100%;
+    height: 100%;
+  }
+  ul {
+    color: var(--f7-list-index-text-color, var(--f7-theme-color));
+    font-size: var(--f7-list-index-font-size);
+    font-weight: var(--f7-list-index-font-weight);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
+  li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    position: relative;
+    height: var(--f7-list-index-item-height);
+    line-height: var(--f7-list-index-item-height);
+    flex-shrink: 0;
+    display: block;
+    width: 100%;
+  }
+  .list-index-skip-placeholder {
+    &:after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      border-radius: 50%;
+      width: var(--f7-list-index-skip-dot-size);
+      height: var(--f7-list-index-skip-dot-size);
+      margin-left: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
+      margin-top: calc(-1 * var(--f7-list-index-skip-dot-size) / 2);
+      background: var(--f7-list-index-text-color, var(--f7-theme-color));
+    }
+  }
+  .list-index-label {
+    position: absolute;
+    bottom: 0;
+    right: 100%;
+    text-align: center;
+    background-color: var(--f7-list-index-label-bg-color, var(--f7-theme-color));
+    color: var(--f7-list-index-label-text-color);
+    width: var(--f7-list-index-label-size);
+    height: var(--f7-list-index-label-size);
+    line-height: var(--f7-list-index-label-size);
+    font-size: var(--f7-list-index-label-font-size);
+    font-weight: var(--f7-list-index-label-font-weight);
+  }
+}
+.navbar ~ .page > .list-index,
+.navbars ~ .page > .list-index,
+.navbar ~ .list-index {
+  top: var(--f7-navbar-height);
+}
+
+.navbar ~ .toolbar-top,
+.navbars ~ .toolbar-top,
+.ios .navbar ~ .toolbar-top-ios,
+.ios .navbars ~ .toolbar-top-ios .md .navbar ~ .toolbar-top-md {
+  ~ .list-index {
+    top: calc(var(--f7-navbar-height) + var(--f7-toolbar-height));
+  }
+  &.tabbar-icons {
+    ~ .list-index {
+      top: calc(var(--f7-navbar-height) + var(--f7-tabbar-icons-height));
+    }
+  }
+}
+
+.navbar ~ .subnavbar ~ .list-index,
+.navbars ~ .subnavbar ~ .list-index,
+.page-with-subnavbar .navbar ~ .list-index {
+  top: calc(var(--f7-navbar-height) + var(--f7-subnavbar-height));
+}
+
+.toolbar-bottom,
+.ios .toolbar-bottom-ios,
+.md .toolbar-bottom-md {
+  ~ .page > .list-index,
+  ~ * .page > .list-index,
+  ~ .list-index {
+    bottom: calc(var(--f7-toolbar-height) + var(--f7-safe-area-bottom));
+  }
+  &.tabbar-icons {
+    ~ .page > .list-index,
+    ~ * .page > .list-index,
+    ~ .list-index {
+      bottom: calc(var(--f7-tabbar-icons-height) + var(--f7-safe-area-bottom));
+    }
+  }
+}
+
+.if-ios-theme({
+  @import './list-index-ios.less';
+});
+.if-md-theme({
+  @import './list-index-md.less';
+});

package/components/login-screen/login-screen-class.js

@@ -0,0 +1,38 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Modal from '../modal/modal-class.js';
+class LoginScreen extends Modal {
+  constructor(app, params) {
+    const extendedParams = extend({
+      on: {}
+    }, params);
+
+    // Extends with open/close Modal methods;
+    super(app, extendedParams);
+    const loginScreen = this;
+    loginScreen.params = extendedParams;
+
+    // Find Element
+    let $el;
+    if (!loginScreen.params.el) {
+      $el = $(loginScreen.params.content).filter(node => node.nodeType === 1).eq(0);
+    } else {
+      $el = $(loginScreen.params.el).eq(0);
+    }
+    if ($el && $el.length > 0 && $el[0].f7Modal) {
+      return $el[0].f7Modal;
+    }
+    if ($el.length === 0) {
+      return loginScreen.destroy();
+    }
+    extend(loginScreen, {
+      app,
+      $el,
+      el: $el[0],
+      type: 'loginScreen'
+    });
+    $el[0].f7Modal = loginScreen;
+    return loginScreen;
+  }
+}
+export default LoginScreen;

package/components/login-screen/login-screen-ios.less

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

package/components/login-screen/login-screen-md.less

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

package/components/login-screen/login-screen-rtl.css

@@ -0,0 +1 @@
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);transition-timing-function:var(--f7-login-screen-transition-timing-function);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}

package/components/login-screen/login-screen-vars.less

@@ -0,0 +1,33 @@
+:root {
+  --f7-login-screen-blocks-max-width: 480px;
+  --f7-login-screen-title-text-align: center;
+  --f7-login-screen-title-text-color: inherit;
+  --f7-login-screen-title-letter-spacing: 0;
+}
+.ios-vars({
+  --f7-login-screen-blocks-margin-vertical: 25px;
+  --f7-login-screen-transition-timing-function: initial;
+  --f7-login-screen-transition-duration: 400ms;
+  --f7-login-screen-title-font-weight: 600;
+  --f7-login-screen-title-font-size: 28px;
+  .light-vars({
+    --f7-login-screen-content-bg-color: #fff;
+    --f7-login-screen-bg-color: #fff;
+  });
+  .dark-vars({
+    --f7-login-screen-bg-color: #000;
+    --f7-login-screen-content-bg-color: #000;
+  });
+});
+.md-vars({
+  --f7-login-screen-transition-duration: 600ms;
+  --f7-login-screen-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
+  --f7-login-screen-blocks-margin-vertical: 24px;
+  --f7-login-screen-title-font-weight: 400;
+  --f7-login-screen-title-font-size: 28px;
+});
+
+.md-color-vars({
+  --f7-login-screen-content-bg-color: var(--f7-md-surface);
+  --f7-login-screen-bg-color: var(--f7-md-surface);
+});

package/components/login-screen/login-screen.css

@@ -0,0 +1 @@
+:root{--f7-login-screen-blocks-max-width:480px;--f7-login-screen-title-text-align:center;--f7-login-screen-title-text-color:inherit;--f7-login-screen-title-letter-spacing:0}.ios{--f7-login-screen-blocks-margin-vertical:25px;--f7-login-screen-transition-timing-function:initial;--f7-login-screen-transition-duration:400ms;--f7-login-screen-title-font-weight:600;--f7-login-screen-title-font-size:28px;--f7-login-screen-content-bg-color:#fff;--f7-login-screen-bg-color:#fff}.ios .dark,.ios.dark{--f7-login-screen-bg-color:#000;--f7-login-screen-content-bg-color:#000}.md{--f7-login-screen-transition-duration:600ms;--f7-login-screen-transition-timing-function:cubic-bezier(0, 1, 0.2, 1);--f7-login-screen-blocks-margin-vertical:24px;--f7-login-screen-title-font-weight:400;--f7-login-screen-title-font-size:28px}.md,.md .dark,.md [class*=color-]{--f7-login-screen-content-bg-color:var(--f7-md-surface);--f7-login-screen-bg-color:var(--f7-md-surface)}.login-screen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;box-sizing:border-box;transition-property:transform;transform:translate3d(0,100vh,0);background:var(--f7-login-screen-bg-color);transition-timing-function:var(--f7-login-screen-transition-timing-function);z-index:11000}.login-screen.modal-in,.login-screen.modal-out{transition-duration:var(--f7-login-screen-transition-duration)}.login-screen.not-animated{transition-duration:0s}.login-screen.modal-in{display:block;transform:translate3d(0,0,0)}.login-screen.modal-out{transform:translate3d(0,100%,0)}.login-screen .page,.login-screen-content,.login-screen-page{background:var(--f7-login-screen-content-bg-color)}.login-screen-content .block,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .list,.login-screen-page .login-screen-title{margin:var(--f7-login-screen-blocks-margin-vertical) auto}.login-screen-content .block,.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-content .list,.login-screen-content .login-screen-title,.login-screen-page .block,.login-screen-page .block-footer,.login-screen-page .block-header,.login-screen-page .list,.login-screen-page .login-screen-title{max-width:var(--f7-login-screen-blocks-max-width)}.login-screen-content .list ul,.login-screen-page .list ul{background:0 0}.login-screen-content .list ul:after,.login-screen-content .list ul:before,.login-screen-page .list ul:after,.login-screen-page .list ul:before{display:none!important}.login-screen-content .block-footer,.login-screen-content .block-header,.login-screen-page .block-footer,.login-screen-page .block-header{text-align:center;margin-left:auto;margin-right:auto}.login-screen-title{text-align:var(--f7-login-screen-title-text-align);font-size:var(--f7-login-screen-title-font-size);font-weight:var(--f7-login-screen-title-font-weight);color:var(--f7-login-screen-title-text-color);letter-spacing:var(--f7-login-screen-title-letter-spacing)}.login-screen-page,.login-screen>.page,.login-screen>.view>.page{display:flex;flex-direction:column}.login-screen-page .login-screen-content,.login-screen-page .page-content,.login-screen>.page .login-screen-content,.login-screen>.page .page-content,.login-screen>.view>.page .login-screen-content,.login-screen>.view>.page .page-content{margin-top:auto;margin-bottom:auto;height:auto;max-height:100%;width:100%}.dark .login-screen-content .block-strong,.dark .login-screen-content .list ul,.dark .login-screen-page .block-strong,.dark .login-screen-page .list ul,.dark.login-screen-page .block-strong,.dark.login-screen-page .list ul{background-color:transparent}

package/components/login-screen/login-screen.d.ts

@@ -0,0 +1,99 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace LoginScreen {
+  interface LoginScreen extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Login Screen HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with login screen HTML element */
+    $el: Dom7Array;
+    /** Login Screen parameters */
+    params: Parameters;
+    /** Boolean prop indicating whether login screen is opened or not */
+    opened: boolean;
+
+    /** Open login screen. Where */
+    open(animate?: boolean): LoginScreen;
+    /** Close login screen. Where */
+    close(animate?: boolean): LoginScreen;
+    /** Destroy login screen */
+    destroy(): void;
+  }
+
+  interface Parameters {
+    /**  */
+    el?: HTMLElement | CSSSelector;
+    /**  */
+    content?: string;
+    /** true */
+    animate?: boolean;
+    /** Element to mount modal to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+
+  interface Events {
+    /** Event will be triggered when LoginScreen starts its opening animation. As an argument event handler receives loginScreen instance */
+    open: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered after LoginScreen completes its opening animation. As an argument event handler receives loginScreen instance */
+    opened: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered when LoginScreen starts its closing animation. As an argument event handler receives loginScreen instance */
+    close: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered after LoginScreen completes its closing animation. As an argument event handler receives loginScreen instance */
+    closed: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered right before LoginScreen instance will be destroyed. As an argument event handler receives loginScreen instance */
+    beforeDestroy: (loginScreen: LoginScreen) => void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when LoginScreen starts its opening animation */
+    'loginscreen:open': () => void;
+    /** Event will be triggered after LoginScreen completes its opening animation */
+    'loginscreen:opened': () => void;
+    /** Event will be triggered when LoginScreen starts its closing animation */
+    'loginscreen:close': () => void;
+    /** Event will be triggered after LoginScreen completes its closing animation */
+    'loginscreen:closed': () => void;
+  }
+  interface AppMethods {
+    loginScreen: {
+      /** create LoginScreen instance */
+      create(parameters: Parameters): LoginScreen;
+      /** destroy LoginScreen instance */
+      destroy(el: HTMLElement | CSSSelector | LoginScreen): void;
+      /** get LoginScreen instance by HTML element */
+      get(el?: HTMLElement | CSSSelector): LoginScreen;
+      /** open LoginScreen */
+      open(el?: HTMLElement | CSSSelector, animate?: boolean): LoginScreen;
+      /** closes LoginScreen */
+      close(el?: HTMLElement | CSSSelector, animate?: boolean): LoginScreen;
+    };
+  }
+  interface AppParams {
+    loginScreen?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when LoginScreen starts its opening animation. As an argument event handler receives loginScreen instance */
+    loginScreenOpen: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered after LoginScreen completes its opening animation. As an argument event handler receives loginScreen instance */
+    loginScreenOpened: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered when LoginScreen starts its closing animation. As an argument event handler receives loginScreen instance */
+    loginScreenClose: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered after LoginScreen completes its closing animation. As an argument event handler receives loginScreen instance */
+    loginScreenClosed: (loginScreen: LoginScreen) => void;
+    /** Event will be triggered right before LoginScreen instance will be destroyed. As an argument event handler receives loginScreen instance */
+    loginScreenBeforeDestroy: (loginScreen: LoginScreen) => void;
+  }
+}
+
+declare const LoginScreenComponent: Framework7Plugin;
+
+export default LoginScreenComponent;

package/components/login-screen/login-screen.js

@@ -0,0 +1,32 @@
+import LoginScreen from './login-screen-class.js';
+import ModalMethods from '../../shared/modal-methods.js';
+export default {
+  name: 'loginScreen',
+  static: {
+    LoginScreen
+  },
+  create() {
+    const app = this;
+    app.loginScreen = ModalMethods({
+      app,
+      constructor: LoginScreen,
+      defaultSelector: '.login-screen.modal-in'
+    });
+  },
+  clicks: {
+    '.login-screen-open': function openLoginScreen($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.loginScreen.open(data.loginScreen, data.animate, $clickedEl);
+    },
+    '.login-screen-close': function closeLoginScreen($clickedEl, data) {
+      if (data === void 0) {
+        data = {};
+      }
+      const app = this;
+      app.loginScreen.close(data.loginScreen, data.animate, $clickedEl);
+    }
+  }
+};

package/components/login-screen/login-screen.less

@@ -0,0 +1,100 @@
+/* === Login Screen === */
+@import './login-screen-vars.less';
+
+.login-screen {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  box-sizing: border-box;
+  transition-property: transform;
+  transform: translate3d(0, 100vh, 0);
+  background: var(--f7-login-screen-bg-color);
+  transition-timing-function: var(--f7-login-screen-transition-timing-function);
+  z-index: 11000;
+  &.modal-in,
+  &.modal-out {
+    transition-duration: var(--f7-login-screen-transition-duration);
+  }
+  &.not-animated {
+    transition-duration: 0ms;
+  }
+  &.modal-in {
+    display: block;
+    transform: translate3d(0, 0, 0);
+  }
+  &.modal-out {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+.login-screen-content,
+.login-screen-page,
+.login-screen .page {
+  background: var(--f7-login-screen-content-bg-color);
+}
+.login-screen-content,
+.login-screen-page {
+  .login-screen-title,
+  .list,
+  .block {
+    margin: var(--f7-login-screen-blocks-margin-vertical) auto;
+  }
+  .login-screen-title,
+  .list,
+  .block,
+  .block-footer,
+  .block-header {
+    max-width: var(--f7-login-screen-blocks-max-width);
+  }
+  .list ul {
+    .hairline-remove-top-bottom();
+    background: none;
+  }
+  .block-footer,
+  .block-header {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+.login-screen-title {
+  text-align: var(--f7-login-screen-title-text-align);
+  font-size: var(--f7-login-screen-title-font-size);
+  font-weight: var(--f7-login-screen-title-font-weight);
+  color: var(--f7-login-screen-title-text-color);
+  letter-spacing: var(--f7-login-screen-title-letter-spacing);
+}
+.login-screen-page,
+.login-screen > .view > .page,
+.login-screen > .page {
+  display: flex;
+  flex-direction: column;
+  .page-content,
+  .login-screen-content {
+    margin-top: auto;
+    margin-bottom: auto;
+    height: auto;
+    max-height: 100%;
+    width: 100%;
+  }
+}
+
+.dark {
+  .login-screen-content .list ul,
+  .login-screen-content .block-strong,
+  .login-screen-page .list ul,
+  .login-screen-page .block-strong,
+  &.login-screen-page .list ul,
+  &.login-screen-page .block-strong {
+    background-color: transparent;
+  }
+}
+
+.if-ios-theme({
+  @import './login-screen-ios.less';
+});
+.if-md-theme({
+  @import './login-screen-md.less';
+});