@newlogic-digital/ui 3.2.0 → 3.4.2

package/README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://ui.newlogic.cz/" target="_blank" rel="noopener noreferrer">
-    <img width="180" src="https://ui.devlogic.cz/assets/favicons/android-chrome-192x192.png" alt="Logo">
+    <img width="180" src="https://ui.newlogic.cz/favicons/android-chrome-192x192.png" alt="Logo">
   </a>
 </p>
 <p align="center">
@@ -74,9 +74,5 @@ import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
 
 Each Vituum project has to have config via `vite.config.js`, docs - [vituum.dev](https://vituum.dev)
 
-## 📌 Future plans
-- support for new modern web features `:has`, `<dialog>`
-- performance optimization
-
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,38 +1,45 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.2.0",
+  "version": "3.4.2",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
   "description": "Lightweight, modern and modular CSS framework with the best principles",
   "license": "GNU GPLv3",
   "scripts": {
+    "postinstall": "rm -rf node_modules/typed-query-selector",
     "dev": "vite",
     "preview": "vite preview",
-    "build": "vituum build",
-    "build:headless": "vituum headless",
+    "build": "vite build --mode development",
+    "build-production": "vite build",
+    "build-emails": "vite build --mode emails",
+    "emails": "vituum emails",
     "cleanup": "vituum cleanup",
     "eslint": "eslint 'src/scripts/**/*.js'",
-    "eslint:fix": "eslint 'src/scripts/**/*.js' --fix",
+    "eslint-fix": "eslint 'src/scripts/**/*.js' --fix",
     "stylelint": "stylelint 'src/styles/**/*.css'",
-    "stylelint:fix": "stylelint 'src/styles/**/*.css' --fix"
+    "stylelint-fix": "stylelint 'src/styles/**/*.css' --fix"
   },
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "3.1.0",
-    "swup": "2.0.19",
+    "@hotwired/stimulus": "^3.2.1",
+    "winduum": "^0.1.18",
+    "swup": "^3.1.1",
+    "naja": "^2.5.0",
     "tippy.js": "^6.3.7",
-    "vanillajs-datepicker": "^1.2.0"
+    "vanillajs-datepicker": "^1.3.3",
+    "css-has-pseudo": "^5.0.2"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "^1.0.0",
-    "vituum": "^0.0.28",
-    "eslint-config-standard": "^17.0.0",
-    "stylelint-config-standard": "^28.0.0"
+    "@newlogic-digital/core": "^2.0.0",
+    "@types/grecaptcha": "^3.0.4",
+    "eslint-config-standard": "^17.1.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-stylistic": "^0.4.2",
+    "postcss-custom-selectors": "^7.1.3"
   },
   "files": [
-    "src",
-    "gulpfile.js"
+    "src"
   ],
   "engines": {
     "node": ">=16.0.0",

package/src/data/main.json

@@ -1,5 +1,5 @@
 {
-  "template": "templates/Layout/Main.twig",
+  "lang": "en",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
@@ -31,6 +31,10 @@
       {
         "name": "Documentation",
         "url": "/ui"
+      },
+      {
+        "name": "Icons",
+        "url": "/ui-icons"
       }
     ]
   },

package/src/emails/{email.css → styles/email.css}

@@ -1,4 +1,4 @@
-@import "../styles/Utils/theme/main.css";
+@import "../../styles/Utils/theme/main.css";
 
 :root {
   --width: 660px;

package/src/emails/templates/Content.twig

@@ -0,0 +1,16 @@
+<tr class="nlm_content">
+    <td>
+        <table class="elm_inner_container">
+            <tr>
+                <td>
+                    <br />
+                    <div class="elm_content_heading">Thanks for your email:</div>
+                    <br />
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae est dui. Vestibulum vehicula in mi in interdum. Aliquam quis tempor nibh. Duis tincidunt vel purus tincidunt iaculis. In bibendum leo justo, et elementum justo dapibus et. Aliquam eu elementum magna. Fusce egestas urna ac venenatis auctor. Phasellus felis leo, suscipit non est sit amet, lobortis pellentesque urna. Ut enim leo, posuere eget mauris vel, egestas pellentesque metus. Curabitur ut est ut orci blandit suscipit. Morbi lacinia sapien luctus lectus maximus, vitae gravida lectus aliquet. Vestibulum ut placerat diam. Fusce dapibus tincidunt justo, sed venenatis nisl porttitor vitae.</p>
+                    <br />
+                    <div class="elm_content_info"><a href="https://www.example.com"><span>www.example.com</span></a></div>
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

package/src/emails/templates/Header.twig

@@ -0,0 +1,14 @@
+<tr class="elm_header">
+    <td>
+        <table class="elm_inner_container">
+            <tr>
+                <td>
+                    <br />
+                    <a href="#"><img src="https://via.placeholder.com/160x60" width="160" alt="" style="width: 160px" /></a>
+                    <br />
+                    <br />
+                </td>
+            </tr>
+        </table>
+    </td>
+</tr>

package/src/emails/templates/Layout.twig

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Email Template</title>
+    <!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style type="text/css">
+      @import '/src/emails/styles/email.css';
+    </style>
+</head>
+<body>
+<table class="elm_container_wrapper">
+    <tr>
+        <td>
+            <table class="elm_container">
+                <block name="body" with="locals"></block>
+            </table>
+        </td>
+    </tr>
+</table>
+</body>
+</html>

package/src/scripts/Components/CookieConsent.js

@@ -35,7 +35,6 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
         }, 500)
     }
 })
-
 LibStimulus.register('c-form-cookieconsent', class extends Controller {
     connect() {
         const selector = this.element

package/src/scripts/Layout/Header.js

@@ -1,18 +1,30 @@
 import { LibStimulus, Controller, getController } from '../Libraries/Stimulus.js'
 
-LibStimulus.register('l-header', class extends Controller {
-    connect() {
-        if (document.querySelector('#l-nav') === null) {
-            this.element.insertAdjacentHTML('afterend', '<div id="l-nav" class="lib-drawer" data-lib-drawer-target="nav" data-action="scroll->lib-drawer#scroll"><div class="wrp_nav"><div class="wrp_nav_head"></div><div class="wrp_nav_body"></div></div></div>')
+LibStimulus.register('l-header',
+    /** @property {LibDrawer} libDrawerOutlet */
+    class extends Controller {
+        connect() {
+            if (document.querySelector('#l-nav') === null) {
+                this.element.insertAdjacentHTML('afterend', `
+                    <div id="l-nav" class="lib-drawer" data-lib-drawer-target="nav" data-action="scroll->lib-drawer#scroll" inert aria-hidden="true">
+                        <div class="wrp_nav">
+                            <div class="wrp_nav_head"></div>
+                            <div class="wrp_nav_body"></div>
+                        </div>
+                    </div>
+                `)
 
-            getController(document.body, 'lib-drawer').init()
+                /** @type {LibDrawer} */
+                const LibDrawer = getController(document.body, 'lib-drawer')
+                LibDrawer.init()
 
-            const layoutNav = document.querySelector('#l-nav')
-            const logo = this.element.querySelector('.elm_header_logo').outerHTML
-            const nav = this.element.querySelector('.elm_header_nav').outerHTML
+                const layoutNav = document.querySelector('#l-nav')
+                const logo = this.element.querySelector('.elm_header_logo').outerHTML
+                const nav = this.element.querySelector('.elm_header_nav').outerHTML
 
-            layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
-            layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+                layoutNav.querySelector('.wrp_nav_head').insertAdjacentHTML('beforeend', logo)
+                layoutNav.querySelector('.wrp_nav_body').insertAdjacentHTML('beforeend', nav)
+            }
         }
     }
-})
+)

package/src/scripts/Layout/Main.js

@@ -1,27 +1,18 @@
-import { LibStimulus, Controller, loadStimulus } from '../Libraries/Stimulus.js'
-import { importScript } from '../Utils/Functions/+.js'
-import LibRipple from '../Libraries/Ripple.js'
+import { showRipple } from 'winduum/src/libraries/ripple.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
 import LibAnchor from '../Libraries/Anchor.js'
-import LibDialog from '../Libraries/Dialog.js'
 import LibTippy from '../Libraries/Tippy.js'
 import LibTabs from '../Libraries/Tabs.js'
 import LibNativeSlider from '../Libraries/NativeSlider.js'
-import cdn from '../Utils/cdn.js'
 
 LibStimulus.register('lib', class extends Controller {
-    connect() {
-        if (!('scrollBehavior' in document.documentElement.style)) {
-            importScript(cdn.seamless).then(() => window.seamless.polyfill())
-        }
-    }
-
     ripple(e) {
-        LibRipple(e)
+        showRipple(e)
     }
 
-    anchor(e) {
-        e.preventDefault()
-        LibAnchor.action(e.currentTarget)
+    anchor({ currentTarget }) {
+        arguments[0].preventDefault()
+        LibAnchor.action(currentTarget)
     }
 
     darkMode() {
@@ -35,30 +26,6 @@ LibStimulus.register('lib', class extends Controller {
     }
 })
 
-LibStimulus.register('lib-dialog', class extends Controller {
-    async connect() {
-        if (this.element.getAttribute('data-lib-dialog-open')) {
-            const url = this.element.getAttribute('data-action-url')
-
-            if (url) {
-                await LibDialog.action(this.element, url, () => loadStimulus(document.querySelector('.lib-dialog')))
-            } else {
-                await LibDialog.show(document.querySelector(this.element.getAttribute('data-lib-dialog-open')).innerHTML, () => loadStimulus(document.querySelector('.lib-dialog')))
-            }
-        }
-    }
-
-    async show({ currentTarget }) {
-        const url = currentTarget.getAttribute('data-action-url')
-
-        await LibDialog.action(currentTarget, url)
-    }
-
-    async hide() {
-        await LibDialog.hide()
-    }
-})
-
 LibStimulus.register('lib-tabs', class extends Controller {
     connect() {
         LibTabs(this.element)

package/src/scripts/Libraries/+.js

@@ -1,8 +1,9 @@
 export { default as Anchor } from './Anchor.js'
 export { default as CookieConsent } from './CookieConsent.js'
-export { default as Dialog } from './Dialog.js'
+import './Dialog.js'
 import './Drawer.js'
 import './Form.js'
+import './Naja.js'
 export { default as NativeSlider } from './NativeSlider.js'
 import './ReCaptcha.js'
 export { default as Ripple } from './Ripple.js'

package/src/scripts/Libraries/Dialog.js

@@ -1,75 +1,45 @@
-import { loadStimulus } from './Stimulus.js'
+import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
+import { insertDialog, closeDialog, fetchDialog, dialogSelector } from 'winduum/src/libraries/dialog.js'
 
-const LibDialog = {
-    show: async(content) => {
-        return new Promise(resolve => {
-            if (document.querySelector('.lib-dialog > [class^="c-dialog"]') !== null) {
-                document.querySelector('.lib-dialog > [class^="c-dialog"]').remove()
-            }
-
-            if (document.querySelector('.lib-dialog') === null) {
-                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog"></div>')
-            }
-
-            document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
-            document.querySelector('.lib-dialog').style.display = 'flex'
-
-            function outerHeight(el) {
-                return el.offsetHeight + parseInt(getComputedStyle(el).marginTop) + parseInt(getComputedStyle(el).marginBottom)
-            }
-
-            if (outerHeight(document.querySelector('.lib-dialog > [class^="c-dialog"]')) > window.innerHeight) {
-                const offset = window.innerWidth - document.body.clientWidth
-
-                document.documentElement.style.paddingRight = `${offset}px`
-                document.documentElement.classList.add('overflow-hidden')
+LibStimulus.register('lib-dialog', class extends Controller {
+    static values = {
+        open: String,
+        url: String
+    }
 
-                if (document.querySelector('#l-header') !== null) {
-                    document.querySelector('#l-header').style.right = `${offset}px`
-                }
+    async connect() {
+        if (this.hasOpenValue) {
+            if (this.hasUrlValue) {
+                await fetchDialog({
+                    url: this.urlValue, insertOptions: { remove: true }
+                })
+            } else {
+                await insertDialog(document.querySelector(this.openValue).innerHTML, {
+                    remove: true
+                })
             }
 
-            loadStimulus(document.querySelector('.lib-dialog'))
+            loadStimulus(dialogSelector('.lib-dialog'))
+        }
+    }
 
-            resolve()
+    async show({ currentTarget, params }) {
+        currentTarget._addDataValue('state', 'loading')
+        currentTarget.classList.add('cursor-wait')
 
-            document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
-                if (e.target.classList.contains('lib-dialog')) {
-                    document.documentElement.addEventListener('mouseup', function e() {
-                        LibDialog.hide()
-                        document.documentElement.removeEventListener('mouseup', e)
-                    })
-                }
-            }, true)
-        })
-    },
-    hide: async() => {
-        return new Promise(resolve => {
-            if (document.querySelector('.lib-dialog') !== null) {
-                document.querySelector('.lib-dialog')._addDataValue('state', 'hiding')
+        await fetchDialog({
+            url: params.url,
+            insertOptions: {
+                remove: params.remove ?? true,
+                append: params.append ?? false
             }
+        }).then(() => loadStimulus(dialogSelector('.lib-dialog')))
 
-            setTimeout(() => {
-                if (document.querySelector('.lib-dialog') !== null) {
-                    document.querySelector('.lib-dialog').style.display = 'none'
-                    document.documentElement.classList.remove('overflow-hidden')
-
-                    if (document.querySelector('#l-header') !== null) {
-                        document.querySelector('#l-header').style.right = ''
-                    }
-
-                    document.querySelector('.lib-dialog').remove()
-                }
-
-                resolve()
-            }, 300)
-        })
-    },
-    action: async(element, url) => {
-        fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
-            LibDialog.show(dialog)
-        })
+        currentTarget._removeDataValue('state', 'loading')
+        currentTarget.classList.remove('cursor-wait')
     }
-}
 
-export default LibDialog
+    async hide({ params }) {
+        await closeDialog({ remove: params.remove ?? false })
+    }
+})

package/src/scripts/Libraries/Drawer.js

@@ -1,38 +1,44 @@
 import { LibStimulus, Controller } from './Stimulus.js'
 
-LibStimulus.register('lib-drawer', class extends Controller {
+LibStimulus.register('lib-drawer', class LibDrawer extends Controller {
+    static targets = ['nav']
+
     init() {
-        setTimeout(() => this.queryTarget('nav').classList.add('is-transition'), 50)
-        this.queryTarget('nav').addEventListener('click', ({ target }) => {
-            if (target === this.queryTarget('nav')) {
+        setTimeout(() => this.navTarget.classList.add('is-transition'), 50)
+        this.navTarget.addEventListener('click', ({ target }) => {
+            if (target === this.navTarget) {
                 this.hide()
             }
         })
     }
 
     show() {
-        this.queryTarget('nav').scrollLeft = 0
-        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '1')
-        this.queryTarget('nav').classList.add('is-opacity')
-        this.queryTarget('nav')._addDataValue('state', 'active')
+        this.navTarget.scrollLeft = 0
+        this.navTarget.style.setProperty('--lib-drawer-opacity', '1')
+        this.navTarget.classList.add('is-opacity')
+        this.navTarget._addDataValue('state', 'active')
+        this.navTarget.setAttribute('aria-hidden', 'false')
+        this.navTarget.removeAttribute('inert')
         document.documentElement.classList.add('overflow-hidden')
     }
 
     hide() {
-        this.queryTarget('nav')._removeDataValue('state', 'active')
-        this.queryTarget('nav').classList.add('is-opacity')
-        this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', '0')
+        this.navTarget.setAttribute('inert', '')
+        this.navTarget.setAttribute('aria-hidden', 'true')
+        this.navTarget._removeDataValue('state', 'active')
+        this.navTarget.classList.add('is-opacity')
+        this.navTarget.style.setProperty('--lib-drawer-opacity', '0')
         document.documentElement.classList.remove('overflow-hidden')
     }
 
     scroll({ target }) {
         if (target.scrollLeft > 1) {
-            this.queryTarget('nav').classList.remove('is-opacity')
-            this.queryTarget('nav').style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.queryTarget('nav').children[0].clientWidth) - 1)}`)
+            this.navTarget.classList.remove('is-opacity')
+            this.navTarget.style.setProperty('--lib-drawer-opacity', `${Math.abs((target.scrollLeft / this.navTarget.children[0].clientWidth) - 1)}`)
         }
 
-        if (target.scrollLeft === this.queryTarget('nav').children[0].clientWidth) {
-            this.queryTarget('nav')._removeDataValue('state', 'active')
+        if (target.scrollLeft === this.navTarget.children[0].clientWidth) {
+            this.navTarget._removeDataValue('state', 'active')
             document.documentElement.classList.remove('overflow-hidden')
         }
     }

package/src/scripts/Libraries/Form.js

@@ -1,33 +1,29 @@
-import { LibStimulus, Controller, getController } from './Stimulus.js'
+import { LibStimulus, Controller } from './Stimulus.js'
+import { checkValidity } from '../Utils/Functions/+.js'
 
 LibStimulus.register('lib-form', class extends Controller {
     connect() {
         this.element.setAttribute('novalidate', '')
-        this.element.addEventListener('submit', e => this.validate(this.element, e))
+        this.element.addEventListener('submit', e => this.validation(e))
     }
 
-    validate(element, e) {
-        if (element.reportValidity() === false) {
+    validation(e) {
+        if (this.element.checkValidity() === false) {
             e.preventDefault()
             e.stopPropagation()
-        }
 
-        element.querySelectorAll('.ui-input').forEach(element => {
-            getController(element, 'ui-input').validate(element, true)
-        })
+            this.element.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
+            this.element.querySelector(':invalid').focus()
+        } else {
+            this.element.querySelector('[type="submit"]')._addDataValue('state', 'loading')
+        }
 
-        element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
-            getController(select.parentNode, 'ui-select').validate(select.parentNode, select)
+        this.element.querySelectorAll('.ui-input, [data-controller="ui-checkbox"], [data-controller="ui-radio"]').forEach(element => {
+            checkValidity(element, { message: true })
         })
 
-        element.querySelectorAll('[data-controller="ui-checkbox"] input:not([type="hidden"])').forEach(input => {
-            input.parentNode._removeDataValue('state', 'valid invalid')
-
-            if (input.checkValidity()) {
-                input.parentNode._addDataValue('state', 'valid')
-            } else {
-                input.parentNode._addDataValue('state', 'invalid')
-            }
+        this.element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
+            checkValidity(select.closest('.ui-select'), { message: true })
         })
     }
 

package/src/scripts/Libraries/Naja.js

@@ -0,0 +1,35 @@
+import naja from 'naja'
+import { Controller, LibStimulus, loadStimulus } from './Stimulus.js'
+
+LibStimulus.register('lib-naja', class extends Controller {
+    async connect() {
+        naja.uiHandler.addEventListener('interaction', ({ detail }) => {
+            const element = detail.element
+
+            detail.options.target = element
+
+            element.dispatchEvent(new CustomEvent('naja-interaction', { bubbles: true, cancelable: true }))
+
+            if (element?.form && !element.form.reportValidity()) {
+                arguments[0].preventDefault()
+            }
+        })
+
+        naja.snippetHandler.addEventListener('afterUpdate', ({ detail }) => {
+            detail?.options.target.dispatchEvent(new CustomEvent('naja-afterUpdate', { bubbles: true, cancelable: true }))
+
+            loadStimulus(document.body, false)
+        })
+
+        naja.uiHandler.selector = '[data-naja]'
+        naja.initialize({
+            history: false
+        })
+    }
+
+    async fetch({ currentTarget }) {
+        arguments[0].preventDefault()
+
+        await naja.makeRequest('GET', currentTarget.dataset.actionUrl, null, { history: false })
+    }
+})

package/src/scripts/Libraries/NativeSlider.js

@@ -49,8 +49,9 @@ export default function LibNativeSlider(selector, parent) {
         }
     }
 
+    self.counterMax = parseInt(((selector.scrollWidth - selector.clientWidth) / selector.children[0].clientWidth + 1).toFixed(0))
+
     if (self.ref.counterMax !== null) {
-        self.counterMax = parseInt(((selector.scrollWidth - selector.clientWidth) / selector.children[0].clientWidth + 1).toFixed(0))
         self.ref.counterMax.textContent = self.counterMax
     }
 
@@ -126,7 +127,7 @@ export default function LibNativeSlider(selector, parent) {
     if (!isNaN(parseInt(selector.getAttribute('data-lib-ns')))) {
         setInterval(() => {
             if (!self.paused) {
-                if (selector.scrollLeft <= selector.children[0].clientWidth) {
+                if (selector.scrollLeft < selector.children[0].clientWidth * (selector.children.length - 1)) {
                     selector.scroll({ left: selector.scrollLeft + selector.children[0].clientWidth, behavior: self.behavior })
                 } else {
                     selector.scroll({ left: 0, behavior: self.behavior })

package/src/scripts/Libraries/ReCaptcha.js

@@ -1,16 +1,22 @@
 import { LibStimulus, Controller } from './Stimulus.js'
+import naja from 'naja'
 import importScript from '../Utils/Functions/importScript.js'
 import cdn from '../Utils/cdn.js'
 
 LibStimulus.register('lib-recaptcha', class extends Controller {
+    static values = {
+        api: String,
+        action: String
+    }
+
     connect() {
-        importScript(cdn.recaptcha.replace('{apikey}', this.data.get('api')))
+        importScript(cdn.recaptcha.replace('{apikey}', this.apiValue))
     }
 
     async execute() {
         return new Promise(resolve => {
             window.grecaptcha.enterprise.ready(() => {
-                window.grecaptcha.enterprise.execute(this.data.get('api'), { action: this.data.get('action') ? this.data.get('action') : 'form' }).then(token => {
+                window.grecaptcha.enterprise.execute(this.apiValue, { action: this.actionValue ?? 'form' }).then(token => {
                     this.element.querySelector('[name="gtoken"]').value = token
                     resolve()
                 })
@@ -18,10 +24,24 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         })
     }
 
-    async submit(e) {
-        e.preventDefault()
+    async submit() {
+        if (this.element.reportValidity() === false) {
+            return false
+        }
+
+        arguments[0].preventDefault()
 
         await this.execute()
         this.element.submit()
     }
+
+    async submitFetch() {
+        if (this.element.reportValidity() === false) {
+            return false
+        }
+
+        arguments[0].preventDefault()
+        await this.execute()
+        await naja.makeRequest(this.element.method, this.element.action, new FormData(this.element), { history: 'replace' })
+    }
 })