@xenknight/framework7 0.0.2

package/components/range/range.css

@@ -0,0 +1 @@
+:root{--f7-range-scale-step-height:5px;--f7-range-scale-substep-width:1px;--f7-range-scale-substep-height:4px;--f7-range-bar-bg-color:rgba(0, 0, 0, 0.2)}:root .dark,:root.dark{--f7-range-bar-bg-color:rgba(255, 255, 255, 0.2)}.ios{--f7-range-size:28px;--f7-range-bar-size:4px;--f7-range-bar-border-radius:2px;--f7-range-knob-size:28px;--f7-range-knob-color:#fff;--f7-range-knob-box-shadow:0 2px 4px rgba(0, 0, 0, 0.3);--f7-range-label-size:24px;--f7-range-label-text-color:#000;--f7-range-label-bg-color:#fff;--f7-range-label-font-size:12px;--f7-range-label-font-weight:500;--f7-range-label-border-radius:5px;--f7-range-label-padding:0px 2px;--f7-range-scale-text-color:#666;--f7-range-scale-step-width:1px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md{--f7-range-size:20px;--f7-range-bar-size:2px;--f7-range-bar-border-radius:0px;--f7-range-knob-size:12px;--f7-range-knob-box-shadow:none;--f7-range-label-size:26px;--f7-range-label-font-weight:normal;--f7-range-label-font-size:10px;--f7-range-label-border-radius:50%;--f7-range-label-padding:0px;--f7-range-scale-step-width:2px;--f7-range-scale-font-size:12px;--f7-range-scale-font-weight:400;--f7-range-scale-label-offset:4px}.md,.md .dark,.md [class*=color-]{--f7-range-knob-color:var(--f7-theme-color);--f7-range-label-text-color:var(--f7-md-on-primary);--f7-range-label-bg-color:var(--f7-theme-color);--f7-range-scale-text-color:var(--f7-md-on-surface-variant)}.range-slider{display:block;position:relative;align-self:center;cursor:pointer;-webkit-user-select:none;user-select:none}.range-slider input[type=range]{display:none}.range-slider.range-slider-horizontal{width:100%;height:var(--f7-range-size);touch-action:pan-y}.range-slider.range-slider-vertical{height:100%;width:var(--f7-range-size);touch-action:pan-x}.range-bar{position:absolute;overflow:hidden;background:var(--f7-range-bar-bg-color);border-radius:var(--f7-range-bar-border-radius)}.range-slider-vertical .range-bar{left:50%;top:0;height:100%;width:var(--f7-range-bar-size);margin-left:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-slider-horizontal .range-bar{left:0;top:50%;width:100%;height:var(--f7-range-bar-size);margin-top:calc(-1 * var(--f7-range-bar-size)/ 2)}.range-bar-active{position:absolute;background:var(--f7-range-bar-active-bg-color,var(--f7-theme-color))}.range-slider-horizontal .range-bar-active{left:0;top:0;height:100%}.range-slider-vertical .range-bar-active{left:0;bottom:0;width:100%}.range-slider-vertical-reversed .range-bar-active{top:0;bottom:auto}.range-knob-wrap{z-index:20;position:absolute;height:var(--f7-range-knob-size);width:var(--f7-range-knob-size)}.range-slider-horizontal .range-knob-wrap{top:50%;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2);margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);left:0}.range-slider-vertical .range-knob-wrap{left:50%;margin-left:calc(-1 * var(--f7-range-knob-size)/ 2);bottom:0;margin-bottom:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-slider-vertical-reversed .range-knob-wrap{bottom:auto;top:0;margin-bottom:0;margin-top:calc(-1 * var(--f7-range-knob-size)/ 2)}.range-knob{box-sizing:border-box;border-radius:50%;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:var(--f7-range-knob-color,var(--f7-range-knob-bg-color,var(--f7-theme-color)));box-shadow:var(--f7-range-knob-box-shadow)}.range-knob:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.range-knob-label{position:absolute;left:50%;bottom:100%;text-align:center;transition-duration:120ms;transition-property:transform;box-sizing:border-box;transform:translateY(100%) scale(0);height:var(--f7-range-label-size);line-height:var(--f7-range-label-size);min-width:var(--f7-range-label-size);color:var(--f7-range-label-text-color);background-color:var(--f7-range-label-bg-color,var(--f7-theme-color));font-size:var(--f7-range-label-font-size);font-weight:var(--f7-range-label-font-weight);border-radius:var(--f7-range-label-border-radius);padding:var(--f7-range-label-padding)}.range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.range-scale{position:absolute}.range-slider-horizontal .range-scale{top:50%;left:0;width:100%;margin-top:calc(var(--f7-range-bar-size)/ 2)}.range-slider-vertical .range-scale{right:50%;top:0;height:100%;margin-right:calc(var(--f7-range-bar-size)/ 2)}.range-scale-step{position:absolute;box-sizing:border-box;display:flex;font-size:var(--f7-range-scale-font-size);font-weight:var(--f7-range-scale-font-weight);color:var(--f7-range-scale-text-color,var(--f7-range-bar-bg-color));line-height:1}.range-scale-step:before{content:'';position:absolute;background:var(--f7-range-scale-step-bg-color,var(--f7-range-bar-bg-color))}.range-slider-horizontal .range-scale-step{justify-content:center;align-items:flex-start;width:var(--f7-range-scale-step-width);height:var(--f7-range-scale-step-height);padding-top:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));top:0;margin-left:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-horizontal .range-scale-step:before{left:0;top:0;width:100%;height:var(--f7-range-scale-step-height)}.range-slider-horizontal .range-scale-step:first-child{margin-left:0}.range-slider-horizontal .range-scale-step:last-child{margin-left:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step{line-height:1;justify-content:flex-end;align-items:center;height:var(--f7-range-scale-step-width);width:var(--f7-range-scale-step-height);padding-right:calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));right:0;margin-bottom:calc(-1 * var(--f7-range-scale-step-width)/ 2)}.range-slider-vertical .range-scale-step:first-child{margin-bottom:0}.range-slider-vertical .range-scale-step:last-child{margin-bottom:calc(-1 * var(--f7-range-scale-step-width))}.range-slider-vertical .range-scale-step:before{right:0;top:0;height:100%;width:var(--f7-range-scale-step-height)}.range-scale-substep{--f7-range-scale-step-bg-color:var(--f7-range-scale-substep-bg-color, var(--f7-range-bar-bg-color));--f7-range-scale-step-width:var(--f7-range-scale-substep-width);--f7-range-scale-step-height:var(--f7-range-scale-substep-height)}.ios .range-knob-label{margin-bottom:6px;transform:translateX(-50%) translateY(100%) scale(0)}.ios .range-knob-active-state .range-knob-label{transform:translateX(-50%) translateY(0%) scale(1)}.md .range-knob{transition-duration:.2s;transition-property:transform,background-color}.md .range-knob-active-state .range-knob{transform:scale(1.5)}.md .range-slider-min:not(.range-slider-dual) .range-knob{background:#fff!important;border:2px solid var(--f7-range-bar-bg-color)}.md .range-knob-label{width:var(--f7-range-label-size);margin-left:calc(-1 * var(--f7-range-label-size)/ 2);margin-bottom:8px}.md .range-knob-label:before{content:'';left:50%;top:0px;margin-left:calc(-1 * var(--f7-range-label-size)/ 2);position:absolute;z-index:-1;width:var(--f7-range-label-size);height:var(--f7-range-label-size);background:var(--f7-range-label-bg-color,var(--f7-theme-color));transform:rotate(-45deg);border-radius:50% 50% 50% 0}.md .range-knob-active-state .range-knob-label{transform:translateY(0%) scale(1)}.md .range-slider-label .range-knob-active-state .range-knob{transform:scale(0)}

package/components/range/range.d.ts

@@ -0,0 +1,143 @@
+import { Dom7Array } from 'dom7';
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Range {
+  interface Parameters {
+    /** Range Slider element. HTMLElement or string with CSS selector of range slider element */
+    el: HTMLElement | CSSSelector;
+    /** Range Slider input element or CSS selector of input element. If not specified, will try to look for input type="range" inside of range slider element */
+    inputEl?: HTMLElement | CSSSelector;
+    /** Enable dual range slider (default false) */
+    dual?: boolean;
+    /** Minimal step between values (default 1) */
+    step?: number;
+    /** Enables additional label around range slider knob (default false) */
+    label?: boolean;
+    /** Method must return formatted range knob label text. As an argument it receives label value */
+    formatLabel?: (value: number) => string;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Initial value. Number in case of single range, and array of values in case of dual range */
+    value?: number | number[];
+    /** When enabled it is also possible to interact with range slider (change value) on range bar click and swipe (default true) */
+    draggableBar?: boolean;
+    /** Enables vertical range slider (default false) */
+    vertical?: boolean;
+    /** Makes vertical range slider reversed (default false) */
+    verticalReversed?: boolean;
+    /** Enables range slider scale (default false) */
+    scale?: boolean;
+    /** Number of scale steps (default 5) */
+    scaleSteps?: number;
+    /** Number of scale sub steps (each step will be divided by this value) (default 0) */
+    scaleSubSteps?: number;
+    /** Method must return formatted scale value. As an argument it receives currect scale step value. This method will be called as for each scale step. */
+    formatScaleLabel?: (value: number) => string;
+    /** Limit knob position to the size of range bar. By default enabled from iOS theme */
+    limitKnobPosition?: boolean;
+    /** Object with events handlers.. */
+    on?: {
+      [event in keyof Events]?: Events[event];
+    };
+  }
+  interface Range extends Framework7EventsClass<Events> {
+    /** Link to global app instance */
+    app: Framework7;
+    /** Range HTML element */
+    el: HTMLElement;
+    /** Dom7 instance with range HTML element */
+    $el: Dom7Array;
+    /** Range Slider input HTML element */
+    inputEl: HTMLElement;
+    /** Dom7 instance with range slider input HTML element */
+    $inputEl: Dom7Array;
+    /** Range slider width (in px) */
+    rangeWidth: number;
+    /** Range slider height (in px) */
+    rangeHeight: number;
+    /** Boolean property indicating whether it is dual or not */
+    dual: boolean;
+    /** Range min value */
+    min: number;
+    /** Range max value */
+    max: number;
+    /** Range value */
+    value: number | number[];
+    /** Boolean property indicating whether scale is enabled or not */
+    scale: boolean;
+    /** Number of scale steps */
+    scaleSteps: number;
+    /** Number of scale sub steps */
+    scaleSubSteps: number;
+    /** Dom7 instance with generated scale HTML element */
+    $scaleEl: Dom7Array;
+    /** Array where each element represents HTMLElement of created range knob (2 knobs in case of dual slider) */
+    knobs: HTMLElement[];
+    /** Array where each element represent HTMLElement of created range knob label (2 labels in case of dual slider) */
+    labels: HTMLElement[];
+    /** Boolean property indicating whether it is vertical or not */
+    vertical: boolean;
+    /** Boolean property indicating whether it is vertical and reversed or not */
+    verticalReversed: boolean;
+    /** Range parameters */
+    params: Parameters;
+    /** Returns range slider value */
+    getValue(): number | number[];
+    /** Set new range slider value */
+    setValue(value: number | number[]): Range;
+    /** Destroy range slider */
+    destroy(): void;
+  }
+  interface Events {
+    /** Event will be triggered when range value has been changed. As an argument event handler receives range instance */
+    change: (range: Range) => void;
+    /** Event will be triggered on slider knob release after value change. As an argument event handler receives range instance */
+    changed: (range: Range) => void;
+    /** Event will be triggered right before Range slider instance will be destroyed */
+    beforeDestroy: (range: Range) => void;
+  }
+  interface DomEvents {
+    /** Event will be triggered when range value has been changed. As an argument event handler receives range instance */
+    'range:change': () => void;
+    /** Event will be triggered on slider knob release after value change. As an argument event handler receives range instance */
+    'range:changed': () => void;
+    /** Event will be triggered right before Range slider instance will be destroyed */
+    'range:beforedestroy': () => void;
+  }
+
+  interface AppMethods {
+    range: {
+      /** create Range Slider instance */
+      create(parameters: Parameters): Range;
+      /** get Range Slider instance by HTML element */
+      get(el: HTMLElement | CSSSelector | Range): Range;
+      /** get Range Slider value */
+      getValue(el: HTMLElement | CSSSelector | Range): number | number[];
+      /** set new Range Slider value */
+      setValue(el: HTMLElement | CSSSelector | Range, value: number | number[]): void;
+      /** destroy Range Slider instance */
+      destroy(el: HTMLElement | CSSSelector | Range): void;
+    };
+  }
+  interface AppParams {
+    range?: Parameters | undefined;
+  }
+  interface AppEvents {
+    /** Event will be triggered when range value has been changed. As an argument event handler receives range instance */
+    rangeChange: (range: Range) => void;
+    /** Event will be triggered on slider knob release after value change. As an argument event handler receives range instance */
+    rangeChanged: (range: Range) => void;
+    /** Event will be triggered right before Range slider instance will be destroyed */
+    rangeBeforeDestroy: (range: Range) => void;
+  }
+}
+
+declare const RangeComponent: Framework7Plugin;
+
+export default RangeComponent;

package/components/range/range.js

@@ -0,0 +1,75 @@
+import $ from '../../shared/dom7.js';
+import { extend } from '../../shared/utils.js';
+import Range from './range-class.js';
+import ConstructorMethods from '../../shared/constructor-methods.js';
+export default {
+  name: 'range',
+  create() {
+    const app = this;
+    app.range = extend(ConstructorMethods({
+      defaultSelector: '.range-slider',
+      constructor: Range,
+      app,
+      domProp: 'f7Range'
+    }), {
+      getValue(el) {
+        if (el === void 0) {
+          el = '.range-slider';
+        }
+        const range = app.range.get(el);
+        if (range) return range.getValue();
+        return undefined;
+      },
+      setValue(el, value) {
+        if (el === void 0) {
+          el = '.range-slider';
+        }
+        const range = app.range.get(el);
+        if (range) return range.setValue(value);
+        return undefined;
+      }
+    });
+  },
+  static: {
+    Range
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.range-slider-init').each(rangeEl => new Range(app, {
+        el: rangeEl
+      }));
+    },
+    tabBeforeRemove(tabEl) {
+      $(tabEl).find('.range-slider-init').each(rangeEl => {
+        if (rangeEl.f7Range) rangeEl.f7Range.destroy();
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.range-slider-init').each(rangeEl => new Range(app, {
+        el: rangeEl
+      }));
+    },
+    pageBeforeRemove(page) {
+      page.$el.find('.range-slider-init').each(rangeEl => {
+        if (rangeEl.f7Range) rangeEl.f7Range.destroy();
+      });
+    }
+  },
+  vnode: {
+    'range-slider-init': {
+      insert(vnode) {
+        const rangeEl = vnode.elm;
+        const app = this;
+        app.range.create({
+          el: rangeEl
+        });
+      },
+      destroy(vnode) {
+        const rangeEl = vnode.elm;
+        if (rangeEl.f7Range) rangeEl.f7Range.destroy();
+      }
+    }
+  }
+};

package/components/range/range.less

@@ -0,0 +1,235 @@
+/* === Range Slider === */
+@import './range-vars.less';
+
+.range-slider {
+  display: block;
+  position: relative;
+  align-self: center;
+  cursor: pointer;
+  user-select: none;
+  input[type='range'] {
+    display: none;
+  }
+  &.range-slider-horizontal {
+    width: 100%;
+    height: var(--f7-range-size);
+    touch-action: pan-y;
+  }
+  &.range-slider-vertical {
+    height: 100%;
+    width: var(--f7-range-size);
+    touch-action: pan-x;
+  }
+}
+.range-bar {
+  position: absolute;
+  overflow: hidden;
+  background: var(--f7-range-bar-bg-color);
+  border-radius: var(--f7-range-bar-border-radius);
+
+  .range-slider-vertical & {
+    left: 50%;
+    top: 0;
+    height: 100%;
+    width: var(--f7-range-bar-size);
+    margin-left: calc(-1 * var(--f7-range-bar-size) / 2);
+  }
+  .range-slider-horizontal & {
+    left: 0;
+    top: 50%;
+    width: 100%;
+    height: var(--f7-range-bar-size);
+    margin-top: calc(-1 * var(--f7-range-bar-size) / 2);
+  }
+}
+.range-bar-active {
+  position: absolute;
+  background: var(--f7-range-bar-active-bg-color, var(--f7-theme-color));
+  .range-slider-horizontal & {
+    .ltr({ left: 0; });
+    .rtl({ right: 0; });
+    top: 0;
+    height: 100%;
+  }
+  .range-slider-vertical & {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+  .range-slider-vertical-reversed & {
+    top: 0;
+    bottom: auto;
+  }
+}
+.range-knob-wrap {
+  z-index: 20;
+  position: absolute;
+  height: var(--f7-range-knob-size);
+  width: var(--f7-range-knob-size);
+
+  .range-slider-horizontal & {
+    top: 50%;
+    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+    .ltr({
+      margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+      left: 0;
+    });
+    .rtl({
+      margin-right: calc(-1 * var(--f7-range-knob-size) / 2);
+      right: 0;
+    });
+  }
+  .range-slider-vertical & {
+    left: 50%;
+    margin-left: calc(-1 * var(--f7-range-knob-size) / 2);
+    bottom: 0;
+    margin-bottom: calc(-1 * var(--f7-range-knob-size) / 2);
+  }
+  .range-slider-vertical-reversed & {
+    bottom: auto;
+    top: 0;
+    margin-bottom: 0;
+    margin-top: calc(-1 * var(--f7-range-knob-size) / 2);
+  }
+}
+.range-knob {
+  box-sizing: border-box;
+  border-radius: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: var(--f7-range-knob-color, var(--f7-range-knob-bg-color, var(--f7-theme-color)));
+  box-shadow: var(--f7-range-knob-box-shadow);
+  &:after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 44px;
+    height: 44px;
+    margin-left: -22px;
+    margin-top: -22px;
+  }
+}
+.range-knob-label {
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  text-align: center;
+  transition-duration: 120ms;
+  transition-property: transform;
+  box-sizing: border-box;
+  transform: translateY(100%) scale(0);
+  height: var(--f7-range-label-size);
+  line-height: var(--f7-range-label-size);
+  min-width: var(--f7-range-label-size);
+  color: var(--f7-range-label-text-color);
+  background-color: var(--f7-range-label-bg-color, var(--f7-theme-color));
+  font-size: var(--f7-range-label-font-size);
+  font-weight: var(--f7-range-label-font-weight);
+  border-radius: var(--f7-range-label-border-radius);
+  padding: var(--f7-range-label-padding);
+}
+.range-knob-active-state .range-knob-label {
+  transform: translateY(0%) scale(1);
+}
+.range-scale {
+  position: absolute;
+  .range-slider-horizontal & {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    margin-top: calc(var(--f7-range-bar-size) / 2);
+  }
+  .range-slider-vertical & {
+    right: 50%;
+    top: 0;
+    height: 100%;
+    margin-right: calc(var(--f7-range-bar-size) / 2);
+  }
+}
+.range-scale-step {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  font-size: var(--f7-range-scale-font-size);
+  font-weight: var(--f7-range-scale-font-weight);
+  color: var(--f7-range-scale-text-color, var(--f7-range-bar-bg-color));
+  line-height: 1;
+  &:before {
+    content: '';
+    position: absolute;
+    background: var(--f7-range-scale-step-bg-color, var(--f7-range-bar-bg-color));
+  }
+  .range-slider-horizontal & {
+    justify-content: center;
+    align-items: flex-start;
+    width: var(--f7-range-scale-step-width);
+    height: var(--f7-range-scale-step-height);
+    padding-top: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
+    top: 0;
+    &:before {
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: var(--f7-range-scale-step-height);
+    }
+    .ltr({
+      margin-left: calc(-1 * var(--f7-range-scale-step-width) / 2);
+      &:first-child {
+        margin-left: 0;
+      }
+      &:last-child {
+        margin-left: calc(-1 * var(--f7-range-scale-step-width));
+      }
+    });
+    .rtl({
+      margin-right: calc(-1 * var(--f7-range-scale-step-width) / 2);
+      &:first-child {
+        margin-right: 0;
+      }
+      &:last-child {
+        margin-right: calc(-1 * var(--f7-range-scale-step-width));
+      }
+    });
+  }
+  .range-slider-vertical & {
+    line-height: 1;
+    justify-content: flex-end;
+    align-items: center;
+    height: var(--f7-range-scale-step-width);
+    width: var(--f7-range-scale-step-height);
+    padding-right: calc(var(--f7-range-scale-step-height) + var(--f7-range-scale-label-offset));
+    right: 0;
+    margin-bottom: calc(-1 * var(--f7-range-scale-step-width) / 2);
+    &:first-child {
+      margin-bottom: 0;
+    }
+    &:last-child {
+      margin-bottom: calc(-1 * var(--f7-range-scale-step-width));
+    }
+    &:before {
+      right: 0;
+      top: 0;
+      height: 100%;
+      width: var(--f7-range-scale-step-height);
+    }
+  }
+}
+.range-scale-substep {
+  --f7-range-scale-step-bg-color: var(
+    --f7-range-scale-substep-bg-color,
+    var(--f7-range-bar-bg-color)
+  );
+  --f7-range-scale-step-width: var(--f7-range-scale-substep-width);
+  --f7-range-scale-step-height: var(--f7-range-scale-substep-height);
+}
+.if-ios-theme({
+  @import './range-ios.less';
+});
+.if-md-theme({
+  @import './range-md.less';
+});