framework7 6.3.4 → 7.0.0-beta.3

package/modules/utils/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "framework7/utils",
-  "private": true,
-  "sideEffects": false,
-  "main": "../../cjs/modules/utils/utils.js",
-  "module": "../../esm/modules/utils/utils.js",
-  "jsnext:main": "../../esm/modules/utils/utils.js",
-  "typings": "../../types/modules/utils/utils.d.ts"
-}

package/types/components/accordion/accordion.d.ts

@@ -1,55 +0,0 @@
-import Framework7 from '../app/app-class';
-import { CSSSelector, Framework7Plugin } from '../app/app-class';
-
-export namespace Accordion {
-  interface AppMethods {
-    accordion: {
-      /** open specified accordion item */
-      open(el: HTMLElement | CSSSelector): void;
-
-      /** close specified accordion item */
-      close(el: HTMLElement | CSSSelector): void;
-
-      /** toggle specified accordion item */
-      toggle(el: HTMLElement | CSSSelector): void;
-    };
-  }
-  interface AppParams {}
-  interface DomEvents {
-    /** Event will be triggered right before accordion content starts its opening animation. event.detail.prevent contains function that will prevent accordion from opening when called */
-    'accordion:beforeopen': () => void;
-    /** Event will be triggered when accordion content starts its opening animation */
-    'accordion:open': () => void;
-    /** Event will be triggered after accordion content completes its opening animation */
-    'accordion:opened': () => void;
-    /** Event will be triggered right before accordion content starts its closing animation. event.detail.prevent contains function that will prevent accordion from closing when called */
-    'accordion:beforeclose': () => void;
-    /** Event will be triggered when accordion content starts its closing animation */
-    'accordion:close': () => void;
-    /** Event will be triggered after accordion content completes its closing animation */
-    'accordion:closed': () => void;
-  }
-  interface AppEvents {
-    /** Event will be triggered before accordion content starts its opening animation */
-    accordionBeforeOpen: (el: HTMLElement | CSSSelector, prevent: () => void) => void;
-
-    /** Event will be triggered when accordion content starts its opening animation */
-    accordionOpen: (el: HTMLElement | CSSSelector) => void;
-
-    /** Event will be triggered after accordion content completes its opening animation */
-    accordionOpened: (el: HTMLElement | CSSSelector) => void;
-
-    /** Event will be triggered before accordion content starts its closing animation */
-    accordionBeforeClose: (el: HTMLElement | CSSSelector, prevent: () => void) => void;
-
-    /** Event will be triggered when accordion content starts its closing animation */
-    accordionClose: (el: HTMLElement | CSSSelector) => void;
-
-    /** Event will be triggered after accordion content completes its closing animation */
-    accordionClosed: (el: HTMLElement | CSSSelector) => void;
-  }
-}
-
-declare const AccordionComponent: Framework7Plugin;
-
-export default AccordionComponent;

package/types/components/actions/actions.d.ts

@@ -1,158 +0,0 @@
-import { Dom7Array } from 'dom7';
-import Framework7, { CSSSelector, Framework7EventsClass, Framework7Plugin } from '../app/app-class';
-
-export namespace Actions {
-  interface Actions extends Framework7EventsClass<Events> {
-    /** Link to global app instance */
-    app: Framework7;
-    /** Action sheet HTML element */
-    el: HTMLElement;
-    /** Dom7 instance with action sheet HTML element */
-    $el: Dom7Array;
-    /** Backdrop HTML element */
-    backdropEl: HTMLElement;
-    /** Dom7 instance with backdrop HTML element */
-    $backdropEl: Dom7Array;
-    /** Action sheet instance parameters */
-    params: Parameters;
-    /** Boolean prop indicating whether action sheet is opened or not */
-    opened: boolean;
-
-    /** Open action sheet. Where animate - boolean (by default true) - defines whether it should be opened with animation */
-    open(animate?: boolean): void;
-    /** Close action sheet. Where animate - boolean (by default true) - defines whether it should be closed with animation */
-    close(animate?: boolean): void;
-    /** Destroy action sheet */
-    destroy(): void;
-  }
-
-  interface Button {
-    /** String with Button's text (could be HTML string) */
-    text: string;
-    /** HTML string of icon */
-    icon?: string;
-    /** Enables bold button text */
-    bold?: boolean;
-    /** Button color, one of default colors */
-    color?: string;
-    /** Button background color, one of default colors */
-    bg?: string;
-    /** If enabled then it will be rendered as label instead of button */
-    label?: boolean;
-    /** Defines whether the button is disabled or not. */
-    disabled?: boolean;
-    /** If enabled then button click will close Action Sheet */
-    close?: boolean;
-    /** Callback function that will be executed after click on this button */
-    onClick?: (actions: Actions, e: unknown) => void;
-  }
-
-  interface Parameters {
-    /** Action Sheet element. Can be useful if you already have Action Sheet element in your HTML and want to create new instance using this element*/
-    el?: HTMLElement | CSSSelector;
-    /** Full Action Sheet HTML content string. Can be useful if you want to create Action Sheet element with custom HTML*/
-    content?: string;
-    /** Enables Action Sheet backdrop (dark semi transparent layer behind)*/
-    backdrop?: boolean;
-    /** Backdrop element to share across instances */
-    backdropEl?: HTMLElement | CSSSelector;
-    /** Custom css class added to Actions Sheet element */
-    cssClass?: string;
-    /** When enabled, action sheet will be closed on backdrop click*/
-    closeByBackdropClick?: boolean;
-    /** When enabled, action sheet will be closed on when click outside of it*/
-    closeByOutsideClick?: boolean;
-    /** When enabled, action sheet will be closed on ESC keyboard key press (default false) */
-    closeOnEscape?: boolean;
-    /** Whether the Action Sheet should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods*/
-    animate?: boolean;
-    /** Action sheet groups/buttons. In this case Actions layout will be generated dynamically based on passed groups and buttons. In case of groups it should array where each item represent array with buttons for group.*/
-    buttons?: Button[] | Button[][];
-    /** Enables grid buttons layout*/
-    grid?: boolean;
-    /** When enabled, action sheet will be converted to Popover on large screens.*/
-    convertToPopover?: boolean;
-    /** When enabled, action sheet will be always converted to Popover.*/
-    forceToPopover?: boolean;
-    /** HTML element or string CSS selector of target element. Required when conversion to popover is in use*/
-    targetEl?: HTMLElement | CSSSelector;
-    /** Virtual target element horizontal offset from left side of the screen. Required when conversion to popover is in use without using real target element (targetEl)*/
-    targetX?: number;
-    /** Virtual target element vertical offset from top of the screen. Required when conversion to popover is in use without using real target element (targetEl)*/
-    targetY?: number;
-    /** Virtual target element width (in px). Required when conversion to popover is in use without using real target element (targetEl)*/
-    targetWidth?: number;
-    /** Virtual target element height (in px). Required when conversion to popover is in use without using real target element (targetEl)*/
-    targetHeight?: number;
-    /** Element to mount modal to. (default app.el) */
-    containerEl?: HTMLElement | CSSSelector;
-    /** Callback function that will be executed after click on the Action Sheet button*/
-    onClick?: (actions: Actions, e: unknown) => void;
-    /** Custom function to render Action Sheet. Must return Action Sheet html*/
-    render?: () => string;
-    /** Custom function to render Popover when conversion to popover is in use. Must return Popover html*/
-    renderPopover?: () => string;
-    /** Object with event handlers */
-    on?: {
-      [event in keyof Events]?: Events[event];
-    };
-  }
-
-  interface Events {
-    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
-    open: (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
-    opened: (actions: Actions) => void;
-    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
-    close: (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
-    closed: (actions: Actions) => void;
-    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
-    beforeDestroy: (actions: Actions) => void;
-  }
-
-  interface DomEvents {
-    /** Event will be triggered when Action Sheet starts its opening animation */
-    'actions:open': (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its opening animation */
-    'actions:opened': (actions: Actions) => void;
-    /** Event will be triggered when Action Sheet starts its closing animation */
-    'actions:close': (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its closing animation */
-    'actions:closed': (actions: Actions) => void;
-  }
-
-  interface AppMethods {
-    actions: {
-      /** create Action Sheet instance */
-      create(parameters: Parameters): Actions;
-      /** destroy Action Sheet instance */
-      destroy(el: HTMLElement | CSSSelector | Actions): void;
-      /** get Action Sheet instance by HTML element */
-      get(el?: HTMLElement | CSSSelector): Actions;
-      /** opens Action Sheet */
-      open(el?: HTMLElement | CSSSelector, animate?: boolean): Actions;
-      /** closes Action Sheet */
-      close(el?: HTMLElement | CSSSelector, animate?: boolean): Actions;
-    };
-  }
-  interface AppParams {
-    actions?: Parameters | undefined;
-  }
-  interface AppEvents {
-    /** Event will be triggered when Action Sheet starts its opening animation. As an argument event handler receives action sheet instance */
-    actionsOpen: (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its opening animation. As an argument event handler receives action sheet instance */
-    actionsOpened: (actions: Actions) => void;
-    /** Event will be triggered when Action Sheet starts its closing animation. As an argument event handler receives action sheet instance */
-    actionsClose: (actions: Actions) => void;
-    /** Event will be triggered after Action Sheet completes its closing animation. As an argument event handler receives action sheet instance */
-    actionsClosed: (actions: Actions) => void;
-    /** Event will be triggered right before Action Sheet instance will be destroyed. As an argument event handler receives action sheet instance */
-    actionsBeforeDestroy: (actions: Actions) => void;
-  }
-}
-
-declare const ActionsComponent: Framework7Plugin;
-
-export default ActionsComponent;

package/types/components/app/app-class.d.ts

@@ -1,196 +0,0 @@
-import { Dom7, Dom7Array } from 'dom7';
-import { Router } from '../../modules/router/router';
-import { DeviceParams, Device } from '../../shared/get-device';
-import { Support } from '../../shared/get-support';
-import { Request } from '../../shared/request';
-import { Utils } from '../../shared/utils';
-import { ComponentClass, ComponentFunction as Component } from '../../modules/component/component';
-import { StoreObject, StoreParameters } from '../../modules/store/store';
-
-// Css Selector string is an option on many F7 methods
-// Giving this alias makes the typename show in the intellisense
-// instead of just `string`.
-export interface CSSSelector extends String {}
-
-export interface Framework7Class<Events> {
-  /** Add event handler */
-  on<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Add event handler that will be removed after it was fired */
-  once<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Remove event handler */
-  off<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Remove all handlers for specified event */
-  off<E extends keyof Events>(event: E): void;
-  /** Fire event on instance */
-  emit<E extends keyof Events>(event: E, ...args: any[]): void;
-}
-
-export interface Framework7EventsClass<Events> {
-  /** Add event handler */
-  on<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Add event handler that will be removed after it was fired */
-  once<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Remove event handler */
-  off<E extends keyof Events>(event: E, handler: Events[E]): void;
-  /** Remove all handlers for specified event */
-  off<E extends keyof Events>(event: E): void;
-  /** Fire event on instance */
-  emit<E extends keyof Events>(event: E, ...args: any[]): void;
-}
-
-export interface Framework7Parameters {
-  /** App root element. If you main app layout is not a direct child of the <body> then it is required to specify root element here. (default body) */
-  el?: string;
-  /** App bundle id.. (default io.framework7.testapp) */
-  id?: string | 'io.framework7.testapp';
-  /** App name. Can be used by other components, e.g. as the default title for Dialog component.. (default Framework7) */
-  name?: string;
-  /** App version. Can be used by other components.. (default 1.0.0) */
-  version?: string;
-  /** App theme. Can be ios, md, aurora or auto. In case of auto it will use iOS theme for iOS devices, Aurora theme for desktop device running in Electron environment, and MD theme for all other devices.. (default auto) */
-  theme?: string;
-  /** App language. Can be used by other components. By default equal to the current browser/webview language (i.e. navigator.language).. */
-  language?: string;
-  /** Array with default routes to all views.. (default []) */
-  routes?: Router.RouteParameters[];
-  /** Enables auto dark theme */
-  autoDarkTheme?: boolean;
-  /** Lazy modules path */
-  lazyModulesPath?: string;
-  /** By default Framework7 will be initialized automatically when you call new Framework7(). If you want to prevent this behavior you can disable it with this option and then initialize it manually with init() when you need it.. (default true) */
-  init?: boolean;
-  /** If automatic initialization is enabled with init: true parameter and app is running under cordova environment then it will be initialized on deviceready event.. (default true) */
-  initOnDeviceReady?: boolean;
-  /** Enable translucent effect (blur background) on navigation bars for iOS theme (on iOS devices) (by default enabled) */
-  iosTranslucentBars?: boolean;
-  /** Enable translucent effect (blur background) on modals (Dialog, Popover, Actions) for iOS theme (on iOS devices) (by default enabled) */
-  iosTranslucentModals?: boolean;
-  /** userAgent string. Required for browser/device detection when rendered on server-side */
-  userAgent?: string;
-  /** Required for current route detection when rendered on server-side */
-  url?: string;
-  /** Object with events handlers.. (default {}) */
-  on?: {
-    [event in keyof Framework7Events]?: Framework7Events[event];
-  };
-}
-
-export interface Framework7Plugin {
-  /** Module Name */
-  name: string;
-  /** Install callback
-  It will be executed right after component is installed
-  Context of this callback points to Class where it was installed */
-  install: () => void;
-  /** Create callback
-  It will be executed in the very beginning of class initilization (when we create new instance of the class) */
-  create(instance: Framework7): () => void;
-  /** Object with default class/plugin parameters */
-  params?: {
-    [plugin_name: string]: {
-      [param: string]: any;
-    };
-  };
-  /** proto object extends Class prototype */
-  proto?: {
-    [name: string]: any;
-  };
-  /** Extend Class with static props and methods, e.g. Class.myMethod */
-  static?: {
-    [name: string]: any;
-  };
-  /** Initialized instance Props & Methods */
-  instance?: {
-    [name: string]: any;
-  };
-  /** Event handlers */
-  on?: {
-    [event: string]: (...params: any[]) => void;
-  };
-  /** Handle clicks - prop name means CSS selector of element to add click handler */
-  clicks?: {
-    [selector: string]: ($clickedEl: HTMLElement, data: any) => void;
-  };
-}
-
-export interface Framework7Events {
-  /** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
-  init: () => void;
-  /** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkTheme` enabled */
-  darkThemeChange: (isDark: boolean) => void;
-  /** Event will be fired when app goes online */
-  online: () => void;
-  /** Event will be fired when app goes offline */
-  offline: () => void;
-  /** Event will be fired on network state change */
-  connection: (isOnline: boolean) => void;
-}
-
-interface Framework7 extends Framework7Class<Framework7Events> {
-  /** App ID passed in parameters */
-  id: string;
-  /** App name passed in parameters */
-  name: string;
-  /** App version */
-  version: string;
-  /** App routes */
-  routes: Router.RouteParameters[];
-  /** App language */
-  language: string;
-  /** App root HTML element */
-  el: HTMLElement;
-  /** Dom7 instance with app root element */
-  $el: Dom7Array;
-  /** Boolean property indicating app is in RTL layout or not */
-  rtl: boolean;
-  /** Current app theme. Can be md, ios or aurora */
-  theme: string;
-  /** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
-  darkTheme: boolean;
-  /** Object with app root data passed on intialization */
-  data: any;
-  /** Object with app root methods */
-  methods: { [name: string]: () => any };
-  /** Boolean property indicating app is initialized or not */
-  initialized: boolean;
-  /** Boolean property indication app connection state. (`true` if online) */
-  online: boolean;
-  /** Dom7 alias */
-  $: Dom7;
-  /** App parameters */
-  params: Framework7Parameters;
-  /** Enables auto dark theme detection */
-  enableAutoDarkTheme(): void;
-  /** Disables auto dark theme detection */
-  disableAutoDarkTheme(): void;
-  /** Initialize app. In case you disabled auto initialization with init: false parameter */
-  init(): void;
-  /** Load module */
-  loadModule(module: string | Function | Framework7Plugin): Promise<any>;
-  /** Load modules */
-  loadModules(modules: any[]): Promise<any>;
-}
-interface Events extends Framework7EventsClass<Framework7Events> {}
-
-declare class Framework7 implements Framework7 {
-  constructor(parameters?: Framework7Parameters);
-
-  static use(plugin: Framework7Plugin): void;
-  static use(plugins: Framework7Plugin[]): void;
-  static getDevice: (overrides?: DeviceParams) => Device;
-  static getSupport: () => Support;
-  static device: Device;
-  static support: Support;
-  static request: Request;
-  static utils: Utils;
-  static Events: Events;
-  static Component: ComponentClass;
-  /** Register custom component */
-  static registerComponent(tagName: string, component: Component): void;
-  /** Unregister custom component */
-  static unregisterComponent(tagName: string): void;
-  /** Create new store */
-  createStore: (storeParameters: StoreParameters) => StoreObject;
-}
-
-export default Framework7;

package/types/components/appbar/appbar.d.ts

@@ -1,10 +0,0 @@
-import Framework7, { CSSSelector, Framework7EventsClass, Framework7Plugin } from '../app/app-class';
-
-export namespace Appbar {
-  interface AppMethods {}
-  interface AppParams {}
-  interface AppEvents {}
-}
-
-declare const AppbarComponent: Framework7Plugin;
-export default AppbarComponent;

package/types/components/area-chart/area-chart.d.ts

@@ -1,124 +0,0 @@
-import { Dom7Array } from 'dom7';
-import Framework7, { CSSSelector, Framework7EventsClass, Framework7Plugin } from '../app/app-class';
-
-export namespace AreaChart {
-  interface AreaChart extends Framework7EventsClass<Events> {
-    /** Link to global app instance */
-    app: Framework7;
-    /** Area chart HTML element */
-    el: HTMLElement;
-    /** Dom7 instance with chart HTML element */
-    $el: Dom7Array;
-    /** Area chart generated SVH HTML element */
-    svgEl: HTMLElement;
-    /** Dom7 instance with generated SVH HTML element */
-    $svgEl: Dom7Array;
-    /** Area chart parameters */
-    params: Parameters;
-
-    /** Update/rerender chart SVG element according to passed parameters. It accepts object with same parameters required for chart initialization. You can pass only parameters that needs to be updated */
-    update(parameters: Parameters): AreaChart;
-    /** Destroys chart instance */
-    destroy(): void;
-  }
-
-  interface Dataset {
-    /** Dataset value */
-    values: number[];
-    /** Dataset HEX color */
-    color?: string;
-    /** Dataset label */
-    label?: any;
-  }
-
-  interface Parameters {
-    /** Area chart element. HTMLElement or string with CSS selector of chart element. Generated SVG will be inserted into this element. */
-    el: HTMLElement | CSSSelector;
-    /** Enables lines chart (instead of area chart) */
-    lineChart: boolean;
-    /** Chart data sets */
-    datasets: Dataset[];
-    /** Enables chart horizontal (X) axis */
-    axis: boolean;
-    /** Chart horizontal (X) axis labels. Should have same amount of items as dataset values */
-    axisLabels: any[];
-    /** Enables tooltip on hover */
-    tooltip: boolean;
-    /** Enables chart legend */
-    legend: boolean;
-    /** When enabled it will toggle data sets on legend items click */
-    toggleDatasets: boolean;
-    /** Generated SVG image width (in px). (default 640) */
-    width: number;
-    /** Generated SVG image height (in px). (default 320) */
-    height: number;
-    /** Max numbers of axis labels (ticks) to be visible on axis. (default 8) */
-    maxAxisLabels: number;
-    /** Custom render function to format axis label text */
-    formatAxisLabel: (this: AreaChart, label: any) => string;
-    /** Custom render function to format legend label text */
-    formatLegendLabel: (this: AreaChart, label: any) => string;
-    /** Custom render function that must return tooltip's HTML content */
-    formatTooltip?: (
-      this: AreaChart,
-      data: {
-        index: number;
-        total: number;
-        datasets: {
-          color?: string;
-          label: any;
-          value: number;
-        }[];
-      },
-    ) => string;
-    /** Custom render function to format axis label text in Tooltip */
-    formatTooltipAxisLabel: (this: AreaChart, label: any) => string;
-    /** Custom render function to format total value text in Tooltip */
-    formatTooltipTotal: (this: AreaChart, total: number) => string;
-    /** Custom render function to format dataset text in Tooltip */
-    formatTooltipDataset: (this: AreaChart, label: string, value: number, color: string) => string;
-    /** Object with events handlers.. */
-    on?: {
-      [event in keyof Events]?: Events[event];
-    };
-  }
-
-  interface Events {
-    /** Event will be triggered (when tooltip enabled) on chart hover */
-    select: (areaChart: AreaChart, index: number | null) => void;
-    /** Event will be triggered right before Area chart instance will be destroyed. As an argument event handler receives Area chart instance */
-    beforeDestroy: (areaChart: AreaChart) => void;
-  }
-
-  interface DomEvents {
-    /** Event will be triggered (when tooltip enabled) on chart hover */
-    'areachart:select': () => void;
-    /** Event will be triggered right before Area chart instance will be destroyed */
-    'areachart:beforedestroy': () => void;
-  }
-  interface AppMethods {
-    areaChart: {
-      /** create Area chart instance */
-      create(parameters: Parameters): AreaChart;
-      /** destroy Area chart instance */
-      destroy(el: HTMLElement | CSSSelector | AreaChart): void;
-      /** get Area chart instance by HTML element */
-      get(el: HTMLElement | CSSSelector): AreaChart;
-      /** update/rerender Area chart SVG according to passed parameters */
-      update(parameters: Parameters): AreaChart;
-    };
-  }
-  interface AppParams {
-    areaChart?: Parameters | undefined;
-  }
-  interface AppEvents {
-    /** Event will be triggered (when tooltip enabled) on chart hover */
-    areaChartSelect: (areaChart: AreaChart, index: number | null) => void;
-    /** Event will be triggered right before AreaChart instance will be destroyed. As an argument event handler receives Area chart instance */
-    areaChartBeforeDestroy: (areaChart: AreaChart) => void;
-  }
-}
-
-declare const AreaChartComponent: Framework7Plugin;
-
-export default AreaChartComponent;