framework7 7.0.8 → 8.0.0-beta.1

package/components/fab/fab.js

@@ -32,7 +32,6 @@ const Fab = {
     const scaleY = target.height / fab.height;
     let borderRadius = Math.ceil(parseInt(target.borderRadius, 10) / Math.max(scaleX, scaleY));
     if (borderRadius > 0) borderRadius += 2;
-
     $fabEl[0].f7FabMorphResizeHandler = function resizeHandler() {
       $fabEl.transition(0).transform('');
       $targetEl.transition(0);
@@ -46,7 +45,6 @@ const Fab = {
       const scaleYNew = target.height / fab.height;
       $fabEl.transform(`translate3d(${-diffXNew}px, ${-diffYNew}px, 0) scale(${scaleXNew}, ${scaleYNew})`);
     };
-
     $targetEl.css('opacity', 0).transform(`scale(${1 / scaleX}, ${1 / scaleY})`);
     $fabEl.addClass('fab-opened').css('z-index', target.zIndex - 1).transform(`translate3d(${-diffX}px, ${-diffY}px, 0)`);
     $fabEl.transitionEnd(() => {
@@ -56,13 +54,11 @@ const Fab = {
         $fabEl.transform(`translate3d(${-diffX}px, ${-diffY}px, 0) scale(${scaleX}, ${scaleY})`).css('border-radius', `${borderRadius}px`).css('box-shadow', 'none').css('opacity', '0');
       });
       app.on('resize', $fabEl[0].f7FabMorphResizeHandler);
-
       if ($targetEl.parents('.page-content').length > 0) {
         $targetEl.parents('.page-content').on('scroll', $fabEl[0].f7FabMorphResizeHandler);
       }
     });
   },
-
   morphClose(fabEl) {
     const app = this;
     const $fabEl = $(fabEl);
@@ -79,11 +75,9 @@ const Fab = {
     const scaleX = target.width / fab.width;
     const scaleY = target.height / fab.height;
     app.off('resize', $fabEl[0].f7FabMorphResizeHandler);
-
     if ($targetEl.parents('.page-content').length > 0) {
       $targetEl.parents('.page-content').off('scroll', $fabEl[0].f7FabMorphResizeHandler);
     }
-
     $targetEl.css('opacity', 0).transform(`scale(${1 / scaleX}, ${1 / scaleY})`);
     $fabEl.transition('').css('box-shadow', '').css('border-radius', '').css('opacity', '1').transform(`translate3d(${-diffX}px, ${-diffY}px, 0)`);
     $fabEl.transitionEnd(() => {
@@ -95,7 +89,6 @@ const Fab = {
       });
     });
   },
-
   open(fabEl, targetEl) {
     const app = this;
     const $fabEl = $(fabEl).eq(0);
@@ -103,29 +96,23 @@ const Fab = {
     if (!$fabEl.length) return;
     if ($fabEl.hasClass('fab-opened')) return;
     if (!$buttonsEl.length && !$fabEl.hasClass('fab-morph')) return;
-
     if (app.fab.openedEl) {
       if (app.fab.openedEl === $fabEl[0]) return;
       app.fab.close(app.fab.openedEl);
     }
-
     app.fab.openedEl = $fabEl[0];
-
     if ($fabEl.hasClass('fab-morph')) {
       app.fab.morphOpen($fabEl, targetEl || $fabEl.attr('data-morph-to'));
     } else {
       $fabEl.addClass('fab-opened');
     }
-
     $fabEl.siblings('.fab-backdrop').addClass('backdrop-in');
     $fabEl.trigger('fab:open');
   },
-
   close(fabEl) {
     if (fabEl === void 0) {
       fabEl = '.fab-opened';
     }
-
     const app = this;
     const $fabEl = $(fabEl).eq(0);
     const $buttonsEl = $fabEl.find('.fab-buttons');
@@ -133,27 +120,22 @@ const Fab = {
     if (!$fabEl.hasClass('fab-opened')) return;
     if (!$buttonsEl.length && !$fabEl.hasClass('fab-morph')) return;
     app.fab.openedEl = null;
-
     if ($fabEl.hasClass('fab-morph')) {
       app.fab.morphClose($fabEl);
     } else {
       $fabEl.removeClass('fab-opened');
     }
-
     $fabEl.siblings('.fab-backdrop').removeClass('backdrop-in');
     $fabEl.trigger('fab:close');
   },
-
   toggle(fabEl) {
     const app = this;
     const $fabEl = $(fabEl);
     if (!$fabEl.hasClass('fab-opened')) app.fab.open(fabEl);else app.fab.close(fabEl);
   }
-
 };
 export default {
   name: 'fab',
-
   create() {
     const app = this;
     bindMethods(app, {
@@ -163,7 +145,6 @@ export default {
       }
     });
   },
-
   clicks: {
     '.fab > a': function open($clickedEl) {
       const app = this;
@@ -173,7 +154,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.fab.open(data.fab);
     },
@@ -181,7 +161,6 @@ export default {
       if (data === void 0) {
         data = {};
       }
-
       const app = this;
       app.fab.close(data.fab);
     },

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);
       });
     }
-
   }
 };