@xenknight/framework7 0.0.2

package/components/form/form.d.ts

@@ -0,0 +1,64 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Form {
+  interface DomEvents {
+    /** Event will be triggered on form when calling app.form.convertToData */
+    'form:todata': () => void;
+    /** Event will be triggered on form when calling app.form.fillFromData */
+    'form:fromdata': () => void;
+
+    /** Event will be triggered right after for data saved */
+    'form:storedata': () => void;
+
+    /** Event will be triggered after successful Ajax request */
+    'formajax:success': () => void;
+    /** Event will be triggered after Ajax request completed */
+    'formajax:complete': () => void;
+    /** Event will be triggered right before Ajax request */
+    'formajax:beforesend': () => void;
+    /** Event will be triggered on Ajax request error */
+    'formajax:error': () => void;
+  }
+  interface AppMethods {
+    form: {
+      /** convert form fields values to data object */
+      convertToData(form: HTMLElement | CSSSelector): object;
+
+      /** fill up form according to data object */
+      fillFromData(form: HTMLElement | CSSSelector, data: object): void;
+
+      /** get form data for the form with specified id attribute */
+      getFormData(formId: string): object;
+      /** store form data for the form with specified id attribute */
+      storeFormData(formId: string, data: object): void;
+      /** remove form data for the form with specified id attribute */
+      removeFormData(formId: string): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {
+    /** Event will be triggered on form when calling app.form.convertToData */
+    formToData: (form: HTMLElement, data: object) => void;
+    /** Event will be triggered on form when calling app.form.fillFromData  */
+    formFromData: (form: HTMLElement, data: object) => void;
+
+    /** Event will be triggered right after for data saved */
+    formStoreData: (form: HTMLElement, data: object) => void;
+
+    /** Event will be triggered right after for data saved */
+    formAjaxSuccess: (form: HTMLElement, data: object, response: Response) => void;
+    /** Event will be triggered right after for data saved */
+    formAjaxComplete: (form: HTMLElement, data: object, response: Response) => void;
+    /** Event will be triggered right after for data saved */
+    formAjaxBeforeSend: (form: HTMLElement, data: object) => void;
+    /** Event will be triggered right after for data saved */
+    formAjaxError: (form: HTMLElement, data: object, error: any) => void;
+  }
+}
+declare const FormComponent: Framework7Plugin;
+
+export default FormComponent;

package/components/form/form.js

@@ -0,0 +1,311 @@
+import { getWindow, getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, serializeObject } from '../../shared/utils.js';
+
+// Form Data
+const FormData = {
+  store(form, data) {
+    const app = this;
+    const window = getWindow();
+    let formId = form;
+    const $formEl = $(form);
+    if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {
+      formId = $formEl.attr('id');
+    }
+    // Store form data in app.formsData
+    app.form.data[`form-${formId}`] = data;
+
+    // Store form data in local storage also
+    window.localStorage[`f7form-${formId}`] = JSON.stringify(data);
+  },
+  get(form) {
+    const app = this;
+    const window = getWindow();
+    let formId = form;
+    const $formEl = $(form);
+    if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {
+      formId = $formEl.attr('id');
+    }
+    if (window.localStorage[`f7form-${formId}`]) {
+      return JSON.parse(window.localStorage[`f7form-${formId}`]);
+    }
+    if (app.form.data[`form-${formId}`]) {
+      return app.form.data[`form-${formId}`];
+    }
+    return undefined;
+  },
+  remove(form) {
+    const app = this;
+    const window = getWindow();
+    let formId = form;
+    const $formEl = $(form);
+    if ($formEl.length && $formEl.is('form') && $formEl.attr('id')) {
+      formId = $formEl.attr('id');
+    }
+
+    // Delete form data from app.formsData
+    if (app.form.data[`form-${formId}`]) {
+      app.form.data[`form-${formId}`] = '';
+      delete app.form.data[`form-${formId}`];
+    }
+
+    // Delete form data from local storage also
+    if (window.localStorage[`f7form-${formId}`]) {
+      window.localStorage[`f7form-${formId}`] = '';
+      window.localStorage.removeItem(`f7form-${formId}`);
+    }
+  }
+};
+
+// Form Storage
+const FormStorage = {
+  init(formEl) {
+    const app = this;
+    const $formEl = $(formEl);
+    const formId = $formEl.attr('id');
+    if (!formId) return;
+    const initialData = app.form.getFormData(formId);
+    if (initialData) {
+      app.form.fillFromData($formEl, initialData);
+    }
+    function store() {
+      const data = app.form.convertToData($formEl);
+      if (!data) return;
+      app.form.storeFormData(formId, data);
+      $formEl.trigger('form:storedata', data);
+      app.emit('formStoreData', $formEl[0], data);
+    }
+    $formEl.on('change submit', store);
+  },
+  destroy(formEl) {
+    const $formEl = $(formEl);
+    $formEl.off('change submit');
+  }
+};
+
+// Form To/From Data
+function formToData(formEl) {
+  const app = this;
+  const $formEl = $(formEl).eq(0);
+  if ($formEl.length === 0) return undefined;
+
+  // Form data
+  const data = {};
+
+  // Skip input types
+  const skipTypes = ['submit', 'image', 'button', 'file'];
+  const skipNames = [];
+  $formEl.find('input, select, textarea').each(inputEl => {
+    const $inputEl = $(inputEl);
+    if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {
+      return;
+    }
+    const name = $inputEl.attr('name');
+    const type = $inputEl.attr('type');
+    const tag = inputEl.nodeName.toLowerCase();
+    if (skipTypes.indexOf(type) >= 0) return;
+    if (skipNames.indexOf(name) >= 0 || !name) return;
+    if (tag === 'select' && $inputEl.prop('multiple')) {
+      skipNames.push(name);
+      data[name] = [];
+      $formEl.find(`select[name="${name}"] option`).each(el => {
+        if (el.selected) data[name].push(el.value);
+      });
+    } else {
+      switch (type) {
+        case 'checkbox':
+          skipNames.push(name);
+          data[name] = [];
+          $formEl.find(`input[name="${name}"]`).each(el => {
+            if (el.checked) data[name].push(el.value);
+          });
+          break;
+        case 'radio':
+          skipNames.push(name);
+          $formEl.find(`input[name="${name}"]`).each(el => {
+            if (el.checked) data[name] = el.value;
+          });
+          break;
+        default:
+          data[name] = $inputEl.val();
+          break;
+      }
+    }
+  });
+  $formEl.trigger('form:todata', data);
+  app.emit('formToData', $formEl[0], data);
+  return data;
+}
+function formFromData(formEl, formData) {
+  const app = this;
+  const $formEl = $(formEl).eq(0);
+  if (!$formEl.length) return;
+  let data = formData;
+  const formId = $formEl.attr('id');
+  if (!data && formId) {
+    data = app.form.getFormData(formId);
+  }
+  if (!data) return;
+
+  // Skip input types
+  const skipTypes = ['submit', 'image', 'button', 'file'];
+  const skipNames = [];
+  $formEl.find('input, select, textarea').each(inputEl => {
+    const $inputEl = $(inputEl);
+    if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {
+      return;
+    }
+    const name = $inputEl.attr('name');
+    const type = $inputEl.attr('type');
+    const tag = inputEl.nodeName.toLowerCase();
+    if (typeof data[name] === 'undefined' || data[name] === null) return;
+    if (skipTypes.indexOf(type) >= 0) return;
+    if (skipNames.indexOf(name) >= 0 || !name) return;
+    if (tag === 'select' && $inputEl.prop('multiple')) {
+      skipNames.push(name);
+      $formEl.find(`select[name="${name}"] option`).each(el => {
+        const selectEl = el;
+        if (data[name].indexOf(el.value) >= 0) selectEl.selected = true;else selectEl.selected = false;
+      });
+    } else {
+      switch (type) {
+        case 'checkbox':
+          skipNames.push(name);
+          $formEl.find(`input[name="${name}"]`).each(el => {
+            const checkboxEl = el;
+            if (data[name].indexOf(el.value) >= 0) checkboxEl.checked = true;else checkboxEl.checked = false;
+          });
+          break;
+        case 'radio':
+          skipNames.push(name);
+          $formEl.find(`input[name="${name}"]`).each(el => {
+            const radioEl = el;
+            if (data[name] === el.value) radioEl.checked = true;else radioEl.checked = false;
+          });
+          break;
+        default:
+          $inputEl.val(data[name]);
+          break;
+      }
+    }
+    if (tag === 'select' || tag === 'input' || tag === 'textarea') {
+      $inputEl.trigger('change', 'fromdata');
+    }
+  });
+  $formEl.trigger('form:fromdata', data);
+  app.emit('formFromData', $formEl[0], data);
+}
+function initAjaxForm() {
+  const app = this;
+  const window = getWindow();
+  const document = getDocument();
+  function onSubmitChange(e, fromData) {
+    const $formEl = $(this);
+    if (e.type === 'change' && !$formEl.hasClass('form-ajax-submit-onchange')) return;
+    if (e.type === 'submit') e.preventDefault();
+    if (e.type === 'change' && fromData === 'fromdata') return;
+    const method = ($formEl.attr('method') || 'GET').toUpperCase();
+    const contentType = $formEl.attr('enctype') || $formEl.prop('enctype');
+    let url = $formEl.attr('action');
+    if (!url) return;
+    let data;
+    if (method === 'POST') {
+      if (contentType === 'application/x-www-form-urlencoded' || contentType === 'application/json') {
+        data = app.form.convertToData($formEl[0]);
+        if (contentType === 'application/json') {
+          data = JSON.stringify(data);
+        }
+      } else {
+        data = new window.FormData($formEl[0]);
+      }
+    } else {
+      data = serializeObject(app.form.convertToData($formEl[0]));
+      if (url.includes('?')) {
+        url += `&${data}`;
+      } else {
+        url += `?${data}`;
+      }
+    }
+    $formEl.trigger('formajax:beforesend', {
+      data
+    });
+    app.emit('formAjaxBeforeSend', $formEl[0], data);
+    fetch(url, {
+      method,
+      headers: {
+        'Content-Type': contentType || 'application/x-www-form-urlencoded'
+      },
+      ...(method === 'POST' || method === 'PUT' ? {
+        body: data
+      } : {})
+    }).then(response => {
+      $formEl.trigger('formajax:complete', {
+        data,
+        response
+      });
+      app.emit('formAjaxComplete', $formEl[0], data, response);
+      $formEl.trigger('formajax:success', {
+        data,
+        response
+      });
+      app.emit('formAjaxSuccess', $formEl[0], data, response);
+    }).catch(error => {
+      $formEl.trigger('formajax:error', {
+        data,
+        error
+      });
+      app.emit('formAjaxError', $formEl[0], data, error);
+    });
+  }
+  $(document).on('submit change', 'form.form-ajax-submit, form.form-ajax-submit-onchange', onSubmitChange);
+}
+export default {
+  name: 'form',
+  create() {
+    const app = this;
+    extend(app, {
+      form: {
+        data: {},
+        storeFormData: FormData.store.bind(app),
+        getFormData: FormData.get.bind(app),
+        removeFormData: FormData.remove.bind(app),
+        convertToData: formToData.bind(app),
+        fillFromData: formFromData.bind(app),
+        storage: {
+          init: FormStorage.init.bind(app),
+          destroy: FormStorage.destroy.bind(app)
+        }
+      }
+    });
+  },
+  on: {
+    init() {
+      const app = this;
+      initAjaxForm.call(app);
+    },
+    tabBeforeRemove(tabEl) {
+      const app = this;
+      $(tabEl).find('.form-store-data').each(formEl => {
+        app.form.storage.destroy(formEl);
+      });
+    },
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.form-store-data').each(formEl => {
+        app.form.storage.init(formEl);
+      });
+    },
+    pageBeforeRemove(page) {
+      const app = this;
+      page.$el.find('.form-store-data').each(formEl => {
+        app.form.storage.destroy(formEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.form-store-data').each(formEl => {
+        app.form.storage.init(formEl);
+      });
+    }
+  }
+};

package/components/form/form.less

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

package/components/gauge/gauge-class.js

@@ -0,0 +1,298 @@
+/* eslint no-nested-ternary: off */
+import { getDocument } from 'ssr-window';
+import $ from '../../shared/dom7.js';
+import { extend, deleteProps } from '../../shared/utils.js';
+import Framework7Class from '../../shared/class.js';
+/** @jsx $jsx */
+import $jsx from '../../shared/$jsx.js';
+class Gauge extends Framework7Class {
+  constructor(app, params) {
+    if (params === void 0) {
+      params = {};
+    }
+    super(params, [app]);
+    const self = this;
+    const defaults = extend({}, app.params.gauge);
+
+    // Extend defaults with modules params
+    self.useModulesParams(defaults);
+    self.params = extend(defaults, params);
+    const {
+      el
+    } = self.params;
+    if (!el) return self;
+    const $el = $(el);
+    if ($el.length === 0) return self;
+    if ($el[0].f7Gauge) return $el[0].f7Gauge;
+    extend(self, {
+      app,
+      $el,
+      el: $el && $el[0]
+    });
+    $el[0].f7Gauge = self;
+
+    // Install Modules
+    self.useModules();
+    self.init();
+    return self;
+  }
+  calcRadius() {
+    const self = this;
+    const {
+      size,
+      borderWidth
+    } = self.params;
+    return size / 2 - borderWidth / 2;
+  }
+  calcBorderLength() {
+    const self = this;
+    const radius = self.calcRadius();
+    return 2 * Math.PI * radius;
+  }
+  render() {
+    const self = this;
+    if (self.params.render) return self.params.render.call(self, self);
+    const {
+      type,
+      value,
+      size,
+      bgColor,
+      borderBgColor,
+      borderColor,
+      borderWidth,
+      valueText,
+      valueTextColor,
+      valueFontSize,
+      valueFontWeight,
+      labelText,
+      labelTextColor,
+      labelFontSize,
+      labelFontWeight
+    } = self.params;
+    const semiCircle = type === 'semicircle';
+    const radius = self.calcRadius();
+    const length = self.calcBorderLength();
+    const progress = Math.max(Math.min(value, 1), 0);
+    return $jsx("svg", {
+      class: "gauge-svg",
+      width: `${size}px`,
+      height: `${semiCircle ? size / 2 : size}px`,
+      viewBox: `0 0 ${size} ${semiCircle ? size / 2 : size}`
+    }, semiCircle && $jsx("path", {
+      class: "gauge-back-semi",
+      d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+      stroke: borderBgColor,
+      "stroke-width": borderWidth,
+      fill: bgColor || 'none'
+    }), semiCircle && $jsx("path", {
+      class: "gauge-front-semi",
+      d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+      stroke: borderColor,
+      "stroke-width": borderWidth,
+      "stroke-dasharray": length / 2,
+      "stroke-dashoffset": length / 2 * (1 + progress),
+      fill: borderBgColor ? 'none' : bgColor || 'none'
+    }), !semiCircle && borderBgColor && $jsx("circle", {
+      class: "gauge-back-circle",
+      stroke: borderBgColor,
+      "stroke-width": borderWidth,
+      fill: bgColor || 'none',
+      cx: size / 2,
+      cy: size / 2,
+      r: radius
+    }), !semiCircle && $jsx("circle", {
+      class: "gauge-front-circle",
+      transform: `rotate(-90 ${size / 2} ${size / 2})`,
+      stroke: borderColor,
+      "stroke-width": borderWidth,
+      "stroke-dasharray": length,
+      "stroke-dashoffset": length * (1 - progress),
+      fill: borderBgColor ? 'none' : bgColor || 'none',
+      cx: size / 2,
+      cy: size / 2,
+      r: radius
+    }), valueText && $jsx("text", {
+      class: "gauge-value-text",
+      x: "50%",
+      y: semiCircle ? '100%' : '50%',
+      "font-weight": valueFontWeight,
+      "font-size": valueFontSize,
+      fill: valueTextColor,
+      dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
+      "text-anchor": "middle",
+      "dominant-baseline": !semiCircle && 'middle'
+    }, valueText), labelText && $jsx("text", {
+      class: "gauge-label-text",
+      x: "50%",
+      y: semiCircle ? '100%' : '50%',
+      "font-weight": labelFontWeight,
+      "font-size": labelFontSize,
+      fill: labelTextColor,
+      dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
+      "text-anchor": "middle",
+      "dominant-baseline": !semiCircle && 'middle'
+    }, labelText));
+  }
+  update(newParams) {
+    if (newParams === void 0) {
+      newParams = {};
+    }
+    const self = this;
+    const document = getDocument();
+    const {
+      params,
+      $svgEl
+    } = self;
+    Object.keys(newParams).forEach(param => {
+      if (typeof newParams[param] !== 'undefined') {
+        params[param] = newParams[param];
+      }
+    });
+    if ($svgEl.length === 0) return self;
+    const {
+      value,
+      size,
+      bgColor,
+      borderBgColor,
+      borderColor,
+      borderWidth,
+      valueText,
+      valueTextColor,
+      valueFontSize,
+      valueFontWeight,
+      labelText,
+      labelTextColor,
+      labelFontSize,
+      labelFontWeight
+    } = params;
+    const length = self.calcBorderLength();
+    const progress = Math.max(Math.min(value, 1), 0);
+    const radius = self.calcRadius();
+    const semiCircle = params.type === 'semicircle';
+    const svgAttrs = {
+      width: `${size}px`,
+      height: `${semiCircle ? size / 2 : size}px`,
+      viewBox: `0 0 ${size} ${semiCircle ? size / 2 : size}`
+    };
+    Object.keys(svgAttrs).forEach(attr => {
+      $svgEl.attr(attr, svgAttrs[attr]);
+    });
+    if (semiCircle) {
+      const backAttrs = {
+        d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+        stroke: borderBgColor,
+        'stroke-width': borderWidth,
+        fill: bgColor || 'none'
+      };
+      const frontAttrs = {
+        d: `M${size - borderWidth / 2},${size / 2} a1,1 0 0,0 -${size - borderWidth},0`,
+        stroke: borderColor,
+        'stroke-width': borderWidth,
+        'stroke-dasharray': length / 2,
+        'stroke-dashoffset': length / 2 * (1 + progress),
+        fill: borderBgColor ? 'none' : bgColor || 'none'
+      };
+      Object.keys(backAttrs).forEach(attr => {
+        $svgEl.find('.gauge-back-semi').attr(attr, backAttrs[attr]);
+      });
+      Object.keys(frontAttrs).forEach(attr => {
+        $svgEl.find('.gauge-front-semi').attr(attr, frontAttrs[attr]);
+      });
+    } else {
+      const backAttrs = {
+        stroke: borderBgColor,
+        'stroke-width': borderWidth,
+        fill: bgColor || 'none',
+        cx: size / 2,
+        cy: size / 2,
+        r: radius
+      };
+      const frontAttrs = {
+        transform: `rotate(-90 ${size / 2} ${size / 2})`,
+        stroke: borderColor,
+        'stroke-width': borderWidth,
+        'stroke-dasharray': length,
+        'stroke-dashoffset': length * (1 - progress),
+        fill: borderBgColor ? 'none' : bgColor || 'none',
+        cx: size / 2,
+        cy: size / 2,
+        r: radius
+      };
+      Object.keys(backAttrs).forEach(attr => {
+        $svgEl.find('.gauge-back-circle').attr(attr, backAttrs[attr]);
+      });
+      Object.keys(frontAttrs).forEach(attr => {
+        $svgEl.find('.gauge-front-circle').attr(attr, frontAttrs[attr]);
+      });
+    }
+    if (valueText) {
+      if (!$svgEl.find('.gauge-value-text').length) {
+        const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        textEl.classList.add('gauge-value-text');
+        $svgEl.append(textEl);
+      }
+      const textAttrs = {
+        x: '50%',
+        y: semiCircle ? '100%' : '50%',
+        'font-weight': valueFontWeight,
+        'font-size': valueFontSize,
+        fill: valueTextColor,
+        dy: semiCircle ? labelText ? -labelFontSize - 15 : -5 : 0,
+        'text-anchor': 'middle',
+        'dominant-baseline': !semiCircle && 'middle'
+      };
+      Object.keys(textAttrs).forEach(attr => {
+        $svgEl.find('.gauge-value-text').attr(attr, textAttrs[attr]);
+      });
+      $svgEl.find('.gauge-value-text').text(valueText);
+    } else {
+      $svgEl.find('.gauge-value-text').remove();
+    }
+    if (labelText) {
+      if (!$svgEl.find('.gauge-label-text').length) {
+        const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        textEl.classList.add('gauge-label-text');
+        $svgEl.append(textEl);
+      }
+      const labelAttrs = {
+        x: '50%',
+        y: semiCircle ? '100%' : '50%',
+        'font-weight': labelFontWeight,
+        'font-size': labelFontSize,
+        fill: labelTextColor,
+        dy: semiCircle ? -5 : valueText ? valueFontSize / 2 + 10 : 0,
+        'text-anchor': 'middle',
+        'dominant-baseline': !semiCircle && 'middle'
+      };
+      Object.keys(labelAttrs).forEach(attr => {
+        $svgEl.find('.gauge-label-text').attr(attr, labelAttrs[attr]);
+      });
+      $svgEl.find('.gauge-label-text').text(labelText);
+    } else {
+      $svgEl.find('.gauge-label-text').remove();
+    }
+    return self;
+  }
+  init() {
+    const self = this;
+    const $svgEl = $(self.render()).eq(0);
+    $svgEl.f7Gauge = self;
+    extend(self, {
+      $svgEl,
+      svgEl: $svgEl && $svgEl[0]
+    });
+    self.$el.append($svgEl);
+    return self;
+  }
+  destroy() {
+    const self = this;
+    if (!self.$el || self.destroyed) return;
+    self.$el.trigger('gauge:beforedestroy');
+    self.emit('local::beforeDestroy gaugeBeforeDestroy', self);
+    self.$svgEl.remove();
+    delete self.$el[0].f7Gauge;
+    deleteProps(self);
+    self.destroyed = true;
+  }
+}
+export default Gauge;

package/components/gauge/gauge-ios.less

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

package/components/gauge/gauge-md.less

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

package/components/gauge/gauge-rtl.css

@@ -0,0 +1 @@
+.gauge{position:relative;text-align:center;margin-left:auto;margin-right:auto;display:inline-block}.gauge svg,.gauge-svg{max-width:100%;height:auto}.gauge svg circle,.gauge svg path,.gauge-svg circle,.gauge-svg path{transition-duration:.4s}

package/components/gauge/gauge.css

@@ -0,0 +1 @@
+.gauge{position:relative;text-align:center;margin-left:auto;margin-right:auto;display:inline-block}.gauge svg,.gauge-svg{max-width:100%;height:auto}.gauge svg circle,.gauge svg path,.gauge-svg circle,.gauge-svg path{transition-duration:.4s}