framework7 7.1.5 → 8.0.0-beta.2

package/components/fab/fab.less

@@ -91,7 +91,7 @@
   width: var(--f7-fab-size);
   height: var(--f7-fab-size);
   box-shadow: var(--f7-fab-box-shadow);
-  border-radius: calc(var(--f7-fab-size) / 2);
+  border-radius: var(--f7-fab-border-radius);
   position: relative;
   transition-duration: 300ms;
   display: flex;
@@ -121,7 +121,7 @@
 
 .fab-buttons {
   a {
-    border-radius: calc(var(--f7-fab-button-size) / 2);
+    border-radius: var(--f7-fab-border-radius);
     width: var(--f7-fab-button-size);
     height: var(--f7-fab-button-size);
   }
@@ -275,7 +275,7 @@
 }
 // Morph
 .fab-morph {
-  border-radius: calc(var(--f7-fab-size) / 2);
+  border-radius: var(--f7-fab-border-radius);
   background: var(--f7-fab-bg-color, var(--f7-theme-color));
   box-shadow: var(--f7-fab-box-shadow);
   > a {
@@ -321,7 +321,7 @@
   padding: var(--f7-fab-extended-text-padding);
   font-weight: var(--f7-fab-extended-text-font-weight);
   letter-spacing: var(--f7-fab-extended-text-letter-spacing);
-  text-transform: uppercase;
+  text-transform: var(--f7-fab-extended-text-transform);
 }
 // Labels
 .fab-label-button {
@@ -409,45 +409,45 @@
 .md .toolbar-bottom-md ~ .fab-right-bottom {
   margin-bottom: var(--f7-toolbar-height);
 }
-.tabbar-labels.toolbar-bottom ~ * .fab-left-bottom,
-.tabbar-labels.toolbar-bottom ~ * .fab-center-bottom,
-.tabbar-labels.toolbar-bottom ~ * .fab-right-bottom,
-.tabbar-labels.toolbar-bottom ~ .fab-left-bottom,
-.tabbar-labels.toolbar-bottom ~ .fab-center-bottom,
-.tabbar-labels.toolbar-bottom ~ .fab-right-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-left-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-center-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ * .fab-right-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-left-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-center-bottom,
-.ios .tabbar-labels.toolbar-bottom-ios ~ .fab-right-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ * .fab-left-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ * .fab-center-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ * .fab-right-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ .fab-left-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ .fab-center-bottom,
-.md .tabbar-labels.toolbar-bottom-md ~ .fab-right-bottom {
-  margin-bottom: var(--f7-tabbar-labels-height);
-}
-.tabbar-labels.toolbar-top ~ * .fab-left-bottom,
-.tabbar-labels.toolbar-top ~ * .fab-center-bottom,
-.tabbar-labels.toolbar-top ~ * .fab-right-bottom,
-.tabbar-labels.toolbar-top ~ .fab-left-bottom,
-.tabbar-labels.toolbar-top ~ .fab-center-bottom,
-.tabbar-labels.toolbar-top ~ .fab-right-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ * .fab-left-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ * .fab-center-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ * .fab-right-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ .fab-left-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ .fab-center-bottom,
-.ios .tabbar-labels.toolbar-top-ios ~ .fab-right-bottom,
-.md .tabbar-labels.toolbar-top-md ~ * .fab-left-bottom,
-.md .tabbar-labels.toolbar-top-md ~ * .fab-center-bottom,
-.md .tabbar-labels.toolbar-top-md ~ * .fab-right-bottom,
-.md .tabbar-labels.toolbar-top-md ~ .fab-left-bottom,
-.md .tabbar-labels.toolbar-top-md ~ .fab-center-bottom,
-.md .tabbar-labels.toolbar-top-md ~ .fab-right-bottom {
-  margin-top: var(--f7-tabbar-labels-height);
+.tabbar-icons.toolbar-bottom ~ * .fab-left-bottom,
+.tabbar-icons.toolbar-bottom ~ * .fab-center-bottom,
+.tabbar-icons.toolbar-bottom ~ * .fab-right-bottom,
+.tabbar-icons.toolbar-bottom ~ .fab-left-bottom,
+.tabbar-icons.toolbar-bottom ~ .fab-center-bottom,
+.tabbar-icons.toolbar-bottom ~ .fab-right-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ * .fab-left-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ * .fab-center-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ * .fab-right-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ .fab-left-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ .fab-center-bottom,
+.ios .tabbar-icons.toolbar-bottom-ios ~ .fab-right-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ * .fab-left-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ * .fab-center-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ * .fab-right-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ .fab-left-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ .fab-center-bottom,
+.md .tabbar-icons.toolbar-bottom-md ~ .fab-right-bottom {
+  margin-bottom: var(--f7-tabbar-icons-height);
+}
+.tabbar-icons.toolbar-top ~ * .fab-left-bottom,
+.tabbar-icons.toolbar-top ~ * .fab-center-bottom,
+.tabbar-icons.toolbar-top ~ * .fab-right-bottom,
+.tabbar-icons.toolbar-top ~ .fab-left-bottom,
+.tabbar-icons.toolbar-top ~ .fab-center-bottom,
+.tabbar-icons.toolbar-top ~ .fab-right-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ * .fab-left-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ * .fab-center-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ * .fab-right-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ .fab-left-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ .fab-center-bottom,
+.ios .tabbar-icons.toolbar-top-ios ~ .fab-right-bottom,
+.md .tabbar-icons.toolbar-top-md ~ * .fab-left-bottom,
+.md .tabbar-icons.toolbar-top-md ~ * .fab-center-bottom,
+.md .tabbar-icons.toolbar-top-md ~ * .fab-right-bottom,
+.md .tabbar-icons.toolbar-top-md ~ .fab-left-bottom,
+.md .tabbar-icons.toolbar-top-md ~ .fab-center-bottom,
+.md .tabbar-icons.toolbar-top-md ~ .fab-right-bottom {
+  margin-top: var(--f7-tabbar-icons-height);
 }
 
 .messagebar ~ * .fab-left-bottom,
@@ -474,9 +474,9 @@
       );
     }
   }
-  + .toolbar-top.tabbar-labels,
-  .ios & + .toolbar-top-ios.tabbar-labels,
-  .md & + .toolbar-top-ios.tabbar-labels {
+  + .toolbar-top.tabbar-icons,
+  .ios & + .toolbar-top-ios.tabbar-icons,
+  .md & + .toolbar-top-ios.tabbar-icons {
     ~ * .fab-left-top,
     ~ * .fab-center-top,
     ~ * .fab-right-top,
@@ -484,7 +484,7 @@
     ~ .fab-center-top,
     ~ .fab-right-top {
       margin-top: calc(
-        var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top)
+        var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top)
       );
     }
   }
@@ -503,8 +503,8 @@
       );
     }
   }
-  + .toolbar-top.tabbar-labels,
-  .ios & + .toolbar-top-ios.tabbar-labels {
+  + .toolbar-top.tabbar-icons,
+  .ios & + .toolbar-top-ios.tabbar-icons {
     ~ * .fab-left-top,
     ~ * .fab-center-top,
     ~ * .fab-right-top,
@@ -512,7 +512,7 @@
     ~ .fab-center-top,
     ~ .fab-right-top {
       margin-top: calc(
-        var(--f7-tabbar-labels-height) + var(--f7-navbar-height) + var(--f7-safe-area-top)
+        var(--f7-tabbar-icons-height) + var(--f7-navbar-height) + var(--f7-safe-area-top)
       );
     }
   }
@@ -524,6 +524,3 @@
 .if-md-theme({
   @import './fab-md.less';
 });
-.if-aurora-theme({
-  @import './fab-aurora.less';
-});

package/components/form/form.d.ts

@@ -50,13 +50,13 @@ export namespace Form {
     formStoreData: (form: HTMLElement, data: object) => void;
 
     /** Event will be triggered right after for data saved */
-    formAjaxSuccess: (form: HTMLElement, data: object, xhr: XMLHttpRequest) => void;
+    formAjaxSuccess: (form: HTMLElement, data: object, response: Response) => void;
     /** Event will be triggered right after for data saved */
-    formAjaxComplete: (form: HTMLElement, data: object, xhr: XMLHttpRequest) => void;
+    formAjaxComplete: (form: HTMLElement, data: object, response: Response) => void;
     /** Event will be triggered right after for data saved */
-    formAjaxBeforeSend: (form: HTMLElement, data: object, xhr: XMLHttpRequest) => void;
+    formAjaxBeforeSend: (form: HTMLElement, data: object) => void;
     /** Event will be triggered right after for data saved */
-    formAjaxError: (form: HTMLElement, data: object, xhr: XMLHttpRequest) => void;
+    formAjaxError: (form: HTMLElement, data: object, error: any) => void;
   }
 }
 declare const FormComponent: Framework7Plugin;

package/components/form/form.js

@@ -1,70 +1,63 @@
 import { getWindow, getDocument } from 'ssr-window';
 import $ from '../../shared/dom7.js';
-import { extend, serializeObject } from '../../shared/utils.js'; // Form Data
+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
+    }
+    // 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
-
+    }
 
+    // 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
-
+    }
 
+    // Delete form data from local storage also
     if (window.localStorage[`f7form-${formId}`]) {
       window.localStorage[`f7form-${formId}`] = '';
       window.localStorage.removeItem(`f7form-${formId}`);
     }
   }
+};
 
-}; // Form Storage
-
+// Form Storage
 const FormStorage = {
   init(formEl) {
     const app = this;
@@ -72,11 +65,9 @@ const FormStorage = {
     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;
@@ -84,39 +75,36 @@ const FormStorage = {
       $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
-
+// Form To/From Data
 function formToData(formEl) {
   const app = this;
   const $formEl = $(formEl).eq(0);
-  if ($formEl.length === 0) return undefined; // Form data
+  if ($formEl.length === 0) return undefined;
 
-  const data = {}; // Skip input types
+  // 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] = [];
@@ -132,14 +120,12 @@ function formToData(formEl) {
             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;
@@ -150,36 +136,31 @@ function formToData(formEl) {
   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;
 
-  if (!data) return; // Skip input types
-
+  // 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 => {
@@ -195,7 +176,6 @@ function formFromData(formEl, formData) {
             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 => {
@@ -203,13 +183,11 @@ function formFromData(formEl, formData) {
             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');
     }
@@ -217,80 +195,72 @@ function formFromData(formEl, formData) {
   $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.prop('enctype') || $formEl.attr('enctype');
-    const url = $formEl.attr('action');
+    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') {
+      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}`;
+      }
     }
-
-    app.request({
+    $formEl.trigger('formajax:beforesend', {
+      data
+    });
+    app.emit('formAjaxBeforeSend', $formEl[0], data);
+    fetch(url, {
       method,
-      url,
-      contentType,
-      data,
-
-      beforeSend(xhr) {
-        $formEl.trigger('formajax:beforesend', {
-          data,
-          xhr
-        });
-        app.emit('formAjaxBeforeSend', $formEl[0], data, xhr);
-      },
-
-      error(xhr) {
-        $formEl.trigger('formajax:error', {
-          data,
-          xhr
-        });
-        app.emit('formAjaxError', $formEl[0], data, xhr);
-      },
-
-      complete(xhr) {
-        $formEl.trigger('formajax:complete', {
-          data,
-          xhr
-        });
-        app.emit('formAjaxComplete', $formEl[0], data, xhr);
+      headers: {
+        'Content-Type': contentType || 'application/x-www-form-urlencoded'
       },
-
-      success(response, status, xhr) {
-        $formEl.trigger('formajax:success', {
-          data,
-          xhr
-        });
-        app.emit('formAjaxSuccess', $formEl[0], data, xhr);
-      }
-
+      ...(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, {
@@ -308,40 +278,34 @@ export default {
       }
     });
   },
-
   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

@@ -5,6 +5,3 @@
 .if-md-theme({
   @import './form-md.less';
 });
-.if-aurora-theme({
-  @import './form-aurora.less';
-});

package/components/gauge/gauge-class.js

@@ -4,19 +4,17 @@ 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
+    const defaults = extend({}, app.params.gauge);
 
+    // Extend defaults with modules params
     self.useModulesParams(defaults);
     self.params = extend(defaults, params);
     const {
@@ -31,13 +29,13 @@ class Gauge extends Framework7Class {
       $el,
       el: $el && $el[0]
     });
-    $el[0].f7Gauge = self; // Install Modules
+    $el[0].f7Gauge = self;
 
+    // Install Modules
     self.useModules();
     self.init();
     return self;
   }
-
   calcRadius() {
     const self = this;
     const {
@@ -46,13 +44,11 @@ class Gauge extends Framework7Class {
     } = 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);
@@ -137,12 +133,10 @@ class Gauge extends Framework7Class {
       "dominant-baseline": !semiCircle && 'middle'
     }, labelText));
   }
-
   update(newParams) {
     if (newParams === void 0) {
       newParams = {};
     }
-
     const self = this;
     const document = getDocument();
     const {
@@ -183,7 +177,6 @@ class Gauge extends Framework7Class {
     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`,
@@ -232,14 +225,12 @@ class Gauge extends Framework7Class {
         $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%',
@@ -257,14 +248,12 @@ class Gauge extends Framework7Class {
     } 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%',
@@ -282,10 +271,8 @@ class Gauge extends Framework7Class {
     } else {
       $svgEl.find('.gauge-label-text').remove();
     }
-
     return self;
   }
-
   init() {
     const self = this;
     const $svgEl = $(self.render()).eq(0);
@@ -297,7 +284,6 @@ class Gauge extends Framework7Class {
     self.$el.append($svgEl);
     return self;
   }
-
   destroy() {
     const self = this;
     if (!self.$el || self.destroyed) return;
@@ -308,7 +294,5 @@ class Gauge extends Framework7Class {
     deleteProps(self);
     self.destroyed = true;
   }
-
 }
-
 export default Gauge;