@xenknight/framework7 0.0.2

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,105 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+import { Dom7Array } from 'dom7';
+
+export namespace Tooltip {
+  interface Parameters {
+    /** Tooltip target element. Tooltip will be shown around this element. HTMLElement or string with CSS selector of tooltip target element */
+    targetEl: HTMLElement | CSSSelector;
+    /** Enables tooltip for all elements matching to targetEl selector (e.g. attaches event handler to document). `targetEl` parameter must be a CSS Selector (string) */
+    delegated?: boolean;
+    /** Tooltip text or HTML content */
+    text: string;
+    /** Additional css class will be added to Tooltip element. Can be used for additional tooltip styling */
+    cssClass?: string;
+    /** Extra offset (in px) to tooltip position */
+    offset?: number;
+    /** How trigger tooltip show/hide, can be "hover" or "click" or "manual" (default "hover") */
+    trigger?: 'hover' | 'click' | 'manual';
+    /** Element to mount Tooltip to. (default app.el) */
+    containerEl?: HTMLElement | CSSSelector;
+    /** Function to render tooltip element, must return full tooltip HTML layout string */
+    render?: (tooltip: Tooltip) => string;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface DomEvents {
+    /** Event will be triggered when Tooltip becomes visible */
+    'tooltip:show': (event: Event) => void;
+    /** Event will be triggered when Tooltip becomes hidden. */
+    'tooltip:hide': (event: Event) => void;
+    /** Event will be triggered right before Tooltip instance will be destroyed */
+    'tooltip:beforedestroy': (event: Event) => void;
+  }
+  interface Events {
+    /** Event will be triggered when Tooltip becomes visible. As an argument event handler receives Tooltip instance */
+    show: (tooltip: Tooltip) => void;
+    /** Event will be triggered when Tooltip becomes hidden. As an argument event handler receives Toolitp instance */
+    hide: (tooltip: Tooltip) => void;
+    /** Event will be triggered right before Tooltip instance will be destroyed. As an argument event handler receives Tooltip instance */
+    beforeDestroy: (tooltip: Tooltip) => void;
+  }
+  interface Tooltip extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Tooltip HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with tooltip HTML element */
+    $el: Dom7Array;
+    /** Tooltip parameters */
+    params: Parameters;
+    /** Tooltip target HTML element */
+    targetEl: HTMLElement;
+    /** Dom7 instance with tooltip target HTML element */
+    $targetEl: Dom7Array;
+    /** Tooltip text/content */
+    text: string;
+    /** Boolean property indicating whether it is opened/visible or not */
+    opened: boolean;
+    /** Show tooltip around targetEl element. If targetEl is not specified, then it will use targetEl passed in parameters on initialization */
+    show(targetEl: HTMLElement | CSSSelector): Tooltip;
+    /** Hide tooltip */
+    hide(): Tooltip;
+    /** Change tooltip text or HTML content to the new one */
+    setText(text: string): Tooltip;
+    /** Change tooltip target HTML element */
+    setTargetEl(targetEl: HTMLElement | CSSSelector): Tooltip;
+    /** Destroys tooltip instance */
+    destroy(): void;
+  }
+  interface AppMethods {
+    tooltip: {
+      /** create Tooltip instance */
+      create(parameters: Parameters): Tooltip;
+      /** destroy Tooltip instance */
+      destroy(targetEl: HTMLElement | CSSSelector): void;
+      /** get Tooltip instance by its target HTML element */
+      get(targetEl: HTMLElement | CSSSelector): Tooltip;
+      /** show Tooltip */
+      show(targetEl: HTMLElement | CSSSelector): Tooltip;
+      /** hide Tooltip */
+      hide(targetEl: HTMLElement | CSSSelector): Tooltip;
+      /** change Tooltip text */
+      setText(targetEl: HTMLElement | CSSSelector, text: string): Tooltip;
+    };
+  }
+  interface AppParams {
+    tooltip?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when Tooltip becomes visible. As an argument event handler receives Tooltip instance */
+    tooltipShow: (tooltip: Tooltip) => void;
+    /** Event will be triggered when Tooltip becomes hidden. As an argument event handler receives Toolitp instance */
+    tooltipHide: (tooltip: Tooltip) => void;
+    /** Event will be triggered right before Tooltip instance will be destroyed. As an argument event handler receives Tooltip instance */
+    tooltipBeforeDestroy: (tooltip: Tooltip) => void;
+  }
+}
+
+declare const TooltipComponent: Framework7Plugin;
+export default TooltipComponent;

package/components/tooltip/tooltip.js

@@ -0,0 +1,129 @@
+import $ from '../../shared/dom7.js';
+import Tooltip from './tooltip-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'tooltip',
+  static: {
+    Tooltip
+  },
+  create() {
+    const app = this;
+    app.tooltip = ConstructorMethods({
+      defaultSelector: '.tooltip',
+      constructor: Tooltip,
+      app,
+      domProp: 'f7Tooltip'
+    });
+    app.tooltip.show = function show(el) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.show($el[0]);
+      return tooltip;
+    };
+    app.tooltip.hide = function hide(el) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.hide();
+      return tooltip;
+    };
+    app.tooltip.setText = function text(el, newText) {
+      const $el = $(el);
+      if ($el.length === 0) return undefined;
+      const tooltip = $el[0].f7Tooltip;
+      if (!tooltip) return undefined;
+      tooltip.setText(newText);
+      return tooltip;
+    };
+  },
+  params: {
+    tooltip: {
+      targetEl: null,
+      delegated: false,
+      text: null,
+      cssClass: null,
+      render: null,
+      offset: 0,
+      trigger: 'hover',
+      containerEl: undefined
+    }
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.tooltip-init').each(el => {
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      });
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.tooltip-init').each(el => {
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.tooltip-init').each(el => {
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.tooltip-init').each(el => {
+          const text = $(el).attr('data-tooltip');
+          if (!text) return;
+          app.tooltip.create({
+            targetEl: el,
+            text
+          });
+        });
+      }
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.tooltip-init').each(el => {
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      });
+      if (app.theme === 'ios' && page.view && page.view.router.dynamicNavbar && page.$navbarEl && page.$navbarEl.length > 0) {
+        page.$navbarEl.find('.tooltip-init').each(el => {
+          if (el.f7Tooltip) el.f7Tooltip.destroy();
+        });
+      }
+    }
+  },
+  vnode: {
+    'tooltip-init': {
+      insert(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        const text = $(el).attr('data-tooltip');
+        if (!text) return;
+        app.tooltip.create({
+          targetEl: el,
+          text
+        });
+      },
+      update(vnode) {
+        const el = vnode.elm;
+        if (!el.f7Tooltip) return;
+        if (vnode && vnode.data && vnode.data.attrs && vnode.data.attrs['data-tooltip']) {
+          el.f7Tooltip.setText(vnode.data.attrs['data-tooltip']);
+        }
+      },
+      destroy(vnode) {
+        const el = vnode.elm;
+        if (el.f7Tooltip) el.f7Tooltip.destroy();
+      }
+    }
+  }
+};

package/components/tooltip/tooltip.less

@@ -0,0 +1,39 @@
+/* === Tooltip === */
+@import './tooltip-vars.less';
+
+.tooltip {
+  position: absolute;
+  z-index: 20000;
+  background: var(--f7-tooltip-bg-color);
+  border-radius: var(--f7-tooltip-border-radius);
+  padding: var(--f7-tooltip-padding);
+  color: var(--f7-tooltip-text-color);
+  font-size: var(--f7-tooltip-font-size);
+  font-weight: var(--f7-tooltip-font-weight);
+  box-sizing: border-box;
+  line-height: 1.2;
+  opacity: 0;
+  transform: scale(0.9);
+  transition-duration: 150ms;
+  transition-property: opacity, transform;
+  z-index: 99000;
+  &.tooltip-in {
+    transform: scale(1);
+    opacity: 1;
+  }
+  &.tooltip-out {
+    opacity: 0;
+    transform: scale(1);
+  }
+  .device-desktop & {
+    font-size: var(--f7-tooltip-desktop-font-size);
+    padding: var(--f7-tooltip-desktop-padding);
+  }
+}
+
+.if-ios-theme({
+  @import './tooltip-ios.less';
+});
+.if-md-theme({
+  @import './tooltip-md.less';
+});

package/components/touch-ripple/touch-ripple-class.js

@@ -0,0 +1,85 @@
+import $ from '../../shared/dom7.js';
+export default class TouchRipple {
+  constructor(app, $el, x, y) {
+    const ripple = this;
+    if (!$el) return undefined;
+    const {
+      left,
+      top,
+      width,
+      height
+    } = $el[0].getBoundingClientRect();
+    const center = {
+      x: x - left,
+      y: y - top
+    };
+    let diameter = Math.max((height ** 2 + width ** 2) ** 0.5, 48);
+    let isInset = false;
+    const insetElements = app.params.touch.touchRippleInsetElements || '';
+    if (insetElements && $el.is(insetElements)) {
+      isInset = true;
+    }
+    if (isInset) {
+      diameter = Math.max(Math.min(width, height), 48);
+    }
+    if (!isInset && $el.css('overflow') === 'hidden') {
+      const distanceFromCenter = ((center.x - width / 2) ** 2 + (center.y - height / 2) ** 2) ** 0.5;
+      const scale = (diameter / 2 + distanceFromCenter) / (diameter / 2);
+      ripple.rippleTransform = `translate3d(0px, 0px, 0) scale(${scale * 2})`;
+    } else {
+      // prettier-ignore
+      ripple.rippleTransform = `translate3d(${-center.x + width / 2}px, ${-center.y + height / 2}px, 0) scale(1)`;
+    }
+    if (isInset) {
+      $el.addClass('ripple-inset');
+    }
+    ripple.$rippleWaveEl = $(`<div class="ripple-wave${isInset ? ' ripple-wave-inset' : ''}" style="width: ${diameter}px; height: ${diameter}px; margin-top:-${diameter / 2}px; margin-left:-${diameter / 2}px; left:${center.x}px; top:${center.y}px; --f7-ripple-transform: ${ripple.rippleTransform}"></div>`);
+    $el.prepend(ripple.$rippleWaveEl);
+    ripple.$rippleWaveEl.animationEnd(() => {
+      if (!ripple.$rippleWaveEl) return;
+      if (ripple.$rippleWaveEl.hasClass('ripple-wave-out')) return;
+      ripple.$rippleWaveEl.addClass('ripple-wave-in');
+      if (ripple.shouldBeRemoved) {
+        ripple.out();
+      }
+    });
+    return ripple;
+  }
+  destroy() {
+    let ripple = this;
+    if (ripple.$rippleWaveEl) {
+      ripple.$rippleWaveEl.remove();
+    }
+    Object.keys(ripple).forEach(key => {
+      ripple[key] = null;
+      delete ripple[key];
+    });
+    ripple = null;
+  }
+  out() {
+    const ripple = this;
+    const {
+      $rippleWaveEl
+    } = this;
+    clearTimeout(ripple.removeTimeout);
+    $rippleWaveEl.addClass('ripple-wave-out');
+    ripple.removeTimeout = setTimeout(() => {
+      ripple.destroy();
+    }, 300);
+    $rippleWaveEl.animationEnd(() => {
+      clearTimeout(ripple.removeTimeout);
+      ripple.destroy();
+    });
+  }
+  remove() {
+    const ripple = this;
+    if (ripple.shouldBeRemoved) return;
+    ripple.removeTimeout = setTimeout(() => {
+      ripple.destroy();
+    }, 400);
+    ripple.shouldBeRemoved = true;
+    if (ripple.$rippleWaveEl.hasClass('ripple-wave-in')) {
+      ripple.out();
+    }
+  }
+}

package/components/touch-ripple/touch-ripple-ios.less

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

package/components/touch-ripple/touch-ripple-md.less

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

package/components/touch-ripple/touch-ripple-vars.less

@@ -0,0 +1,8 @@
+:root {
+  --f7-touch-ripple-black: rgba(0, 0, 0, 0.1);
+  --f7-touch-ripple-white: rgba(255, 255, 255, 0.15);
+  --f7-touch-ripple-color: var(--f7-touch-ripple-black);
+}
+.dark {
+  --f7-touch-ripple-color: var(--f7-touch-ripple-white);
+}

package/components/touch-ripple/touch-ripple.d.ts

@@ -0,0 +1,25 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace TouchRipple {
+  interface TouchRipple {
+    $rippleWaveEl: Dom7Array;
+    rippleTransform: string;
+    removing: boolean;
+    remove(): void;
+  }
+  interface AppMethods {
+    touchRipple: {
+      create($el: Dom7Array, x: number, y: number): TouchRipple;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const TouchRippleComponent: Framework7Plugin;
+export default TouchRippleComponent;

package/components/touch-ripple/touch-ripple.js

@@ -0,0 +1,18 @@
+import TouchRipple from './touch-ripple-class.js';
+export default {
+  name: 'touch-ripple',
+  static: {
+    TouchRipple
+  },
+  create() {
+    const app = this;
+    app.touchRipple = {
+      create() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return new TouchRipple(...args);
+      }
+    };
+  }
+};

package/components/touch-ripple/touch-ripple.less

@@ -0,0 +1,114 @@
+/* === Touch Ripple === */
+@import './touch-ripple-vars.less';
+// Ripple Elements
+.ripple,
+.fab a,
+.link,
+.item-link,
+.list-button,
+.button,
+.dialog-button,
+.tab-link,
+.radio,
+.checkbox,
+.actions-button,
+.speed-dial-buttons a {
+  -webkit-user-select: none;
+  user-select: none;
+}
+// Ripple
+.ripple-wave {
+  left: 0;
+  top: 0;
+  position: absolute !important;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: -1;
+  padding: 0;
+  margin: 0;
+  font-size: 0;
+  transform: translate3d(0px, 0px, 0) scale(0);
+
+  background-color: var(--f7-touch-ripple-color);
+  animation: touch-ripple-in 200ms forwards;
+
+  &.ripple-wave-inset {
+    background-image: none;
+    background-color: var(--f7-touch-ripple-color);
+  }
+  &.ripple-wave-out {
+    transform: var(--f7-ripple-transform);
+    animation: touch-ripple-out 250ms forwards !important;
+  }
+}
+.item-link,
+.list label.item-content,
+.list-button,
+.links-list a,
+.button,
+button,
+.dialog-button,
+.tab-link,
+.item-radio,
+.item-checkbox,
+.actions-button,
+.fab a,
+.stepper-button,
+.stepper-button-minus,
+.stepper-button-plus,
+.list.accordion-list .accordion-item-toggle,
+.photo-browser .toolbar .link,
+.ripple-blur {
+  .ripple-wave {
+    animation: touch-ripple-in-blurred 250ms forwards;
+    background-image: radial-gradient(
+      closest-side circle at 50% 50%,
+      var(--f7-touch-ripple-color) 50%,
+      rgba(255, 255, 255, 0)
+    );
+    background-color: transparent;
+  }
+}
+.checkbox,
+.radio,
+.data-table .sortable-cell {
+  .ripple-wave {
+    z-index: 0;
+  }
+}
+
+[class*='ripple-color-'] {
+  --f7-touch-ripple-color: var(--f7-theme-color-ripple-color);
+}
+
+@keyframes touch-ripple-in-blurred {
+  from {
+    transform: translate3d(0px, 0px, 0) scale(0.5);
+  }
+  to {
+    transform: var(--f7-ripple-transform);
+  }
+}
+@keyframes touch-ripple-in {
+  from {
+    transform: translate3d(0px, 0px, 0) scale(0);
+  }
+  to {
+    transform: var(--f7-ripple-transform);
+  }
+}
+
+@keyframes touch-ripple-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.if-ios-theme({
+  @import './touch-ripple-ios.less';
+});
+.if-md-theme({
+  @import './touch-ripple-md.less';
+});

package/components/treeview/treeview-ios.less

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

package/components/treeview/treeview-md.less

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

package/components/treeview/treeview-rtl.css

@@ -0,0 +1 @@
+:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-right:var(--f7-treeview-item-padding-left);padding-left:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-right:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-right:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-left:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-right:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-left:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(-90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-right:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}

package/components/treeview/treeview-vars.less

@@ -0,0 +1,38 @@
+:root {
+  --f7-treeview-item-height: 34px;
+  --f7-treeview-item-padding-left: 16px;
+  --f7-treeview-item-padding-right: 16px;
+  --f7-treeview-toggle-size: 24px;
+  --f7-treeview-children-offset: 29px;
+  --f7-treeview-label-font-weight: 400;
+  --f7-treeview-label-text-color: inherit;
+  --f7-treeview-icon-size: 24px;
+
+  /*
+  --f7-treeview-selectable-selected-bg-color: rgba(var(--f7-theme-color-rgb), 0.2);
+  */
+  .light-vars({
+    --f7-treeview-toggle-color: rgba(0,0,0,0.5);
+    --f7-treeview-toggle-hover-bg-color: rgba(0,0,0,0.1);
+    --f7-treeview-toggle-pressed-bg-color: rgba(0,0,0,0.15);
+    --f7-treeview-icon-color: rgba(0,0,0,0.5);
+    --f7-treeview-selectable-hover-bg-color: rgba(0,0,0,0.1);
+    --f7-treeview-link-hover-bg-color: rgba(0,0,0,0.1);
+    --f7-treeview-link-pressed-bg-color: rgba(0,0,0,0.15);
+  });
+  .dark-vars({
+    --f7-treeview-toggle-color: rgba(255,255,255,0.5);
+    --f7-treeview-toggle-hover-bg-color: rgba(255,255,255,0.03);
+    --f7-treeview-toggle-pressed-bg-color: rgba(255,255,255,0.1);
+    --f7-treeview-icon-color: rgba(255,255,255,0.75);
+    --f7-treeview-selectable-hover-bg-color: rgba(255,255,255,0.03);
+    --f7-treeview-link-hover-bg-color: rgba(255,255,255,0.03);
+    --f7-treeview-link-pressed-bg-color: rgba(255,255,255,0.11);
+  });
+}
+.ios-vars({
+  --f7-treeview-label-font-size: 17px;
+});
+.md-vars({
+  --f7-treeview-label-font-size: 16px;
+});

package/components/treeview/treeview.css

@@ -0,0 +1 @@
+:root{--f7-treeview-item-height:34px;--f7-treeview-item-padding-left:16px;--f7-treeview-item-padding-right:16px;--f7-treeview-toggle-size:24px;--f7-treeview-children-offset:29px;--f7-treeview-label-font-weight:400;--f7-treeview-label-text-color:inherit;--f7-treeview-icon-size:24px;--f7-treeview-toggle-color:rgba(0, 0, 0, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-toggle-pressed-bg-color:rgba(0, 0, 0, 0.15);--f7-treeview-icon-color:rgba(0, 0, 0, 0.5);--f7-treeview-selectable-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-hover-bg-color:rgba(0, 0, 0, 0.1);--f7-treeview-link-pressed-bg-color:rgba(0, 0, 0, 0.15)}:root .dark,:root.dark{--f7-treeview-toggle-color:rgba(255, 255, 255, 0.5);--f7-treeview-toggle-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-toggle-pressed-bg-color:rgba(255, 255, 255, 0.1);--f7-treeview-icon-color:rgba(255, 255, 255, 0.75);--f7-treeview-selectable-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-hover-bg-color:rgba(255, 255, 255, 0.03);--f7-treeview-link-pressed-bg-color:rgba(255, 255, 255, 0.11)}.ios{--f7-treeview-label-font-size:17px}.md{--f7-treeview-label-font-size:16px}.treeview-item-root{padding-left:var(--f7-treeview-item-padding-left);padding-right:var(--f7-treeview-item-padding-right);min-height:var(--f7-treeview-item-height);display:flex;align-items:center;justify-content:flex-start}.treeview-item-content{display:flex;justify-content:flex-start;align-items:center}.treeview-item-content>.f7-icons,.treeview-item-content>.material-icons,.treeview-item-content>i{font-size:var(--f7-treeview-icon-size);color:var(--f7-treeview-icon-color)}.treeview-item-content:first-child{margin-left:calc(var(--f7-treeview-toggle-size) + 5px)}.treeview-item-content>*+*{margin-left:5px}.treeview-item-label{font-size:var(--f7-treeview-label-font-size);font-weight:var(--f7-treeview-label-font-weight);color:var(--f7-treeview-label-text-color)}.treeview-toggle{width:var(--f7-treeview-toggle-size);height:var(--f7-treeview-toggle-size);cursor:pointer;border-radius:4px;background-color:rgba(0,0,0,0);transition-duration:.2s;position:relative;margin-right:5px}.treeview-toggle.active-state{background-color:var(--f7-treeview-toggle-pressed-bg-color)}.treeview-toggle:after{transition-duration:.2s;content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translate(-50%,-50%);border-left:6px solid var(--f7-treeview-toggle-color)}.treeview-toggle-hidden{opacity:0;pointer-events:none;visibility:hidden}.treeview-preloader{--f7-preloader-size:var(--f7-treeview-toggle-size);margin-right:calc(-1 * var(--f7-treeview-toggle-size))}.treeview-item-children{display:none}.treeview-item-opened>.treeview-item-children{display:block}.treeview-item-opened>.treeview-item-root .treeview-toggle:after{transform:translate(-50%,-50%) rotate(90deg)}a.treeview-item-root{color:var(--f7-treeview-label-text-color)}.treeview-item-selectable.treeview-item-root,.treeview-item-selectable>.treeview-item-root{cursor:pointer;transition-duration:150ms}a.treeview-item-root{transition-duration:150ms}a.treeview-item-root.active-state{background:var(--f7-treeview-link-pressed-bg-color)}.treeview-item-toggle.treeview-item-root,.treeview-item-toggle>.treeview-item-root{cursor:pointer}.treeview-item-selected.treeview-item-root,.treeview-item-selected>.treeview-item-root{background:var(--f7-treeview-selectable-selected-bg-color,rgba(var(--f7-theme-color-rgb),.2))}.treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 1)}.treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 2)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 3)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 4)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 5)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 6)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 7)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 8)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 9)}.treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item .treeview-item-root{padding-left:calc(var(--f7-treeview-item-padding-left) + var(--f7-treeview-children-offset) * 10)}

package/components/treeview/treeview.d.ts

@@ -0,0 +1,42 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Treeview {
+  interface AppMethods {
+    treeview: {
+      /** open specified treeview item */
+      open(el: HTMLElement | CSSSelector): void;
+
+      /** close specified treeview item */
+      close(el: HTMLElement | CSSSelector): void;
+
+      /** toggle specified treeview item */
+      toggle(el: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface DomEvents {
+    /** Event will be triggered on Treeview item open */
+    'treeview:open': () => void;
+    /** Event will be triggered on Treeview item close */
+    'treeview:close': () => void;
+    /** Event will be triggered on first open of Treeview item with treeview-load-children class. In event.detail it contains function to hide loading preloader. */
+    'treeview:loadchildren': () => void;
+  }
+  interface AppEvents {
+    /** Event will be triggered on treeview item open */
+    treeviewOpen: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered on treeview item close */
+    treeviewClose: (el: HTMLElement | CSSSelector) => void;
+
+    /** Event will be triggered when treeview item with "treeview-load-children" class opened. It will also show preloader instead of toggle element */
+    treeviewLoadChildren: (el: HTMLElement | CSSSelector, done: () => void) => void;
+  }
+}
+
+declare const TreeviewComponent: Framework7Plugin;
+export default TreeviewComponent;