framework7 6.3.4 → 7.0.0-beta.3

package/esm/components/form/form.js

@@ -1,330 +0,0 @@
-import { getWindow, getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, serializeObject } from '../../shared/utils'; // Form Data
-
-var FormData = {
-  store: function store(form, data) {
-    var app = this;
-    var window = getWindow();
-    var formId = form;
-    var $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: function get(form) {
-    var app = this;
-    var window = getWindow();
-    var formId = form;
-    var $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: function remove(form) {
-    var app = this;
-    var window = getWindow();
-    var formId = form;
-    var $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
-
-var FormStorage = {
-  init: function init(formEl) {
-    var app = this;
-    var $formEl = $(formEl);
-    var formId = $formEl.attr('id');
-    if (!formId) return;
-    var initialData = app.form.getFormData(formId);
-
-    if (initialData) {
-      app.form.fillFromData($formEl, initialData);
-    }
-
-    function store() {
-      var 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: function destroy(formEl) {
-    var $formEl = $(formEl);
-    $formEl.off('change submit');
-  }
-}; // Form To/From Data
-
-function formToData(formEl) {
-  var app = this;
-  var $formEl = $(formEl).eq(0);
-  if ($formEl.length === 0) return undefined; // Form data
-
-  var data = {}; // Skip input types
-
-  var skipTypes = ['submit', 'image', 'button', 'file'];
-  var skipNames = [];
-  $formEl.find('input, select, textarea').each(function (inputEl) {
-    var $inputEl = $(inputEl);
-
-    if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {
-      return;
-    }
-
-    var name = $inputEl.attr('name');
-    var type = $inputEl.attr('type');
-    var 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(function (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(function (el) {
-            if (el.checked) data[name].push(el.value);
-          });
-          break;
-
-        case 'radio':
-          skipNames.push(name);
-          $formEl.find("input[name=\"" + name + "\"]").each(function (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) {
-  var app = this;
-  var $formEl = $(formEl).eq(0);
-  if (!$formEl.length) return;
-  var data = formData;
-  var formId = $formEl.attr('id');
-
-  if (!data && formId) {
-    data = app.form.getFormData(formId);
-  }
-
-  if (!data) return; // Skip input types
-
-  var skipTypes = ['submit', 'image', 'button', 'file'];
-  var skipNames = [];
-  $formEl.find('input, select, textarea').each(function (inputEl) {
-    var $inputEl = $(inputEl);
-
-    if ($inputEl.hasClass('ignore-store-data') || $inputEl.hasClass('no-store-data')) {
-      return;
-    }
-
-    var name = $inputEl.attr('name');
-    var type = $inputEl.attr('type');
-    var 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(function (el) {
-        var 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(function (el) {
-            var 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(function (el) {
-            var 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() {
-  var app = this;
-  var window = getWindow();
-  var document = getDocument();
-
-  function onSubmitChange(e, fromData) {
-    var $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;
-    var method = ($formEl.attr('method') || 'GET').toUpperCase();
-    var contentType = $formEl.prop('enctype') || $formEl.attr('enctype');
-    var url = $formEl.attr('action');
-    if (!url) return;
-    var data;
-
-    if (method === 'POST') {
-      if (contentType === 'application/x-www-form-urlencoded') {
-        data = app.form.convertToData($formEl[0]);
-      } else {
-        data = new window.FormData($formEl[0]);
-      }
-    } else {
-      data = serializeObject(app.form.convertToData($formEl[0]));
-    }
-
-    app.request({
-      method: method,
-      url: url,
-      contentType: contentType,
-      data: data,
-      beforeSend: function beforeSend(xhr) {
-        $formEl.trigger('formajax:beforesend', {
-          data: data,
-          xhr: xhr
-        });
-        app.emit('formAjaxBeforeSend', $formEl[0], data, xhr);
-      },
-      error: function error(xhr) {
-        $formEl.trigger('formajax:error', {
-          data: data,
-          xhr: xhr
-        });
-        app.emit('formAjaxError', $formEl[0], data, xhr);
-      },
-      complete: function complete(xhr) {
-        $formEl.trigger('formajax:complete', {
-          data: data,
-          xhr: xhr
-        });
-        app.emit('formAjaxComplete', $formEl[0], data, xhr);
-      },
-      success: function success(response, status, xhr) {
-        $formEl.trigger('formajax:success', {
-          data: data,
-          xhr: xhr
-        });
-        app.emit('formAjaxSuccess', $formEl[0], data, xhr);
-      }
-    });
-  }
-
-  $(document).on('submit change', 'form.form-ajax-submit, form.form-ajax-submit-onchange', onSubmitChange);
-}
-
-export default {
-  name: 'form',
-  create: function create() {
-    var 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: function init() {
-      var app = this;
-      initAjaxForm.call(app);
-    },
-    tabBeforeRemove: function tabBeforeRemove(tabEl) {
-      var app = this;
-      $(tabEl).find('.form-store-data').each(function (formEl) {
-        app.form.storage.destroy(formEl);
-      });
-    },
-    tabMounted: function tabMounted(tabEl) {
-      var app = this;
-      $(tabEl).find('.form-store-data').each(function (formEl) {
-        app.form.storage.init(formEl);
-      });
-    },
-    pageBeforeRemove: function pageBeforeRemove(page) {
-      var app = this;
-      page.$el.find('.form-store-data').each(function (formEl) {
-        app.form.storage.destroy(formEl);
-      });
-    },
-    pageInit: function pageInit(page) {
-      var app = this;
-      page.$el.find('.form-store-data').each(function (formEl) {
-        app.form.storage.init(formEl);
-      });
-    }
-  }
-};

package/esm/components/gauge/gauge-class.js

@@ -1,323 +0,0 @@
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-/* eslint no-nested-ternary: off */
-import { getDocument } from 'ssr-window';
-import $ from '../../shared/dom7';
-import { extend, deleteProps } from '../../shared/utils';
-import Framework7Class from '../../shared/class';
-/** @jsx $jsx */
-
-import $jsx from '../../shared/$jsx';
-
-var Gauge = /*#__PURE__*/function (_Framework7Class) {
-  _inheritsLoose(Gauge, _Framework7Class);
-
-  function Gauge(app, params) {
-    var _this;
-
-    if (params === void 0) {
-      params = {};
-    }
-
-    _this = _Framework7Class.call(this, params, [app]) || this;
-
-    var self = _assertThisInitialized(_this);
-
-    var defaults = extend({}, app.params.gauge); // Extend defaults with modules params
-
-    self.useModulesParams(defaults);
-    self.params = extend(defaults, params);
-    var el = self.params.el;
-    if (!el) return self || _assertThisInitialized(_this);
-    var $el = $(el);
-    if ($el.length === 0) return self || _assertThisInitialized(_this);
-    if ($el[0].f7Gauge) return $el[0].f7Gauge || _assertThisInitialized(_this);
-    extend(self, {
-      app: app,
-      $el: $el,
-      el: $el && $el[0]
-    });
-    $el[0].f7Gauge = self; // Install Modules
-
-    self.useModules();
-    self.init();
-    return self || _assertThisInitialized(_this);
-  }
-
-  var _proto = Gauge.prototype;
-
-  _proto.calcRadius = function calcRadius() {
-    var self = this;
-    var _self$params = self.params,
-        size = _self$params.size,
-        borderWidth = _self$params.borderWidth;
-    return size / 2 - borderWidth / 2;
-  };
-
-  _proto.calcBorderLength = function calcBorderLength() {
-    var self = this;
-    var radius = self.calcRadius();
-    return 2 * Math.PI * radius;
-  };
-
-  _proto.render = function render() {
-    var self = this;
-    if (self.params.render) return self.params.render.call(self, self);
-    var _self$params2 = self.params,
-        type = _self$params2.type,
-        value = _self$params2.value,
-        size = _self$params2.size,
-        bgColor = _self$params2.bgColor,
-        borderBgColor = _self$params2.borderBgColor,
-        borderColor = _self$params2.borderColor,
-        borderWidth = _self$params2.borderWidth,
-        valueText = _self$params2.valueText,
-        valueTextColor = _self$params2.valueTextColor,
-        valueFontSize = _self$params2.valueFontSize,
-        valueFontWeight = _self$params2.valueFontWeight,
-        labelText = _self$params2.labelText,
-        labelTextColor = _self$params2.labelTextColor,
-        labelFontSize = _self$params2.labelFontSize,
-        labelFontWeight = _self$params2.labelFontWeight;
-    var semiCircle = type === 'semicircle';
-    var radius = self.calcRadius();
-    var length = self.calcBorderLength();
-    var 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));
-  };
-
-  _proto.update = function update(newParams) {
-    if (newParams === void 0) {
-      newParams = {};
-    }
-
-    var self = this;
-    var document = getDocument();
-    var params = self.params,
-        $svgEl = self.$svgEl;
-    Object.keys(newParams).forEach(function (param) {
-      if (typeof newParams[param] !== 'undefined') {
-        params[param] = newParams[param];
-      }
-    });
-    if ($svgEl.length === 0) return self;
-    var value = params.value,
-        size = params.size,
-        bgColor = params.bgColor,
-        borderBgColor = params.borderBgColor,
-        borderColor = params.borderColor,
-        borderWidth = params.borderWidth,
-        valueText = params.valueText,
-        valueTextColor = params.valueTextColor,
-        valueFontSize = params.valueFontSize,
-        valueFontWeight = params.valueFontWeight,
-        labelText = params.labelText,
-        labelTextColor = params.labelTextColor,
-        labelFontSize = params.labelFontSize,
-        labelFontWeight = params.labelFontWeight;
-    var length = self.calcBorderLength();
-    var progress = Math.max(Math.min(value, 1), 0);
-    var radius = self.calcRadius();
-    var semiCircle = params.type === 'semicircle';
-    var svgAttrs = {
-      width: size + "px",
-      height: (semiCircle ? size / 2 : size) + "px",
-      viewBox: "0 0 " + size + " " + (semiCircle ? size / 2 : size)
-    };
-    Object.keys(svgAttrs).forEach(function (attr) {
-      $svgEl.attr(attr, svgAttrs[attr]);
-    });
-
-    if (semiCircle) {
-      var backAttrs = {
-        d: "M" + (size - borderWidth / 2) + "," + size / 2 + " a1,1 0 0,0 -" + (size - borderWidth) + ",0",
-        stroke: borderBgColor,
-        'stroke-width': borderWidth,
-        fill: bgColor || 'none'
-      };
-      var 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(function (attr) {
-        $svgEl.find('.gauge-back-semi').attr(attr, backAttrs[attr]);
-      });
-      Object.keys(frontAttrs).forEach(function (attr) {
-        $svgEl.find('.gauge-front-semi').attr(attr, frontAttrs[attr]);
-      });
-    } else {
-      var _backAttrs = {
-        stroke: borderBgColor,
-        'stroke-width': borderWidth,
-        fill: bgColor || 'none',
-        cx: size / 2,
-        cy: size / 2,
-        r: radius
-      };
-      var _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(function (attr) {
-        $svgEl.find('.gauge-back-circle').attr(attr, _backAttrs[attr]);
-      });
-      Object.keys(_frontAttrs).forEach(function (attr) {
-        $svgEl.find('.gauge-front-circle').attr(attr, _frontAttrs[attr]);
-      });
-    }
-
-    if (valueText) {
-      if (!$svgEl.find('.gauge-value-text').length) {
-        var textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        textEl.classList.add('gauge-value-text');
-        $svgEl.append(textEl);
-      }
-
-      var 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(function (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) {
-        var _textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-
-        _textEl.classList.add('gauge-label-text');
-
-        $svgEl.append(_textEl);
-      }
-
-      var 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(function (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;
-  };
-
-  _proto.init = function init() {
-    var self = this;
-    var $svgEl = $(self.render()).eq(0);
-    $svgEl.f7Gauge = self;
-    extend(self, {
-      $svgEl: $svgEl,
-      svgEl: $svgEl && $svgEl[0]
-    });
-    self.$el.append($svgEl);
-    return self;
-  };
-
-  _proto.destroy = function destroy() {
-    var 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;
-  };
-
-  return Gauge;
-}(Framework7Class);
-
-export default Gauge;