@newlogic-digital/ui 3.1.0 → 3.3.0

package/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "extends": "standard",
+  "rules": {
+    "indent": ["error", 4],
+    "no-new": "off",
+    "space-before-function-paren": ["error", "never"],
+    "import/extensions": ["error", "ignorePackages"]
+  },
+  "env": {
+    "browser": true
+  },
+  "ignorePatterns": ["**/+.js"]
+}

package/.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-no-unknown": [true, {"ignoreAtRules": ["layer", "tailwind"]}],
+    "selector-list-comma-newline-after": "always-multi-line",
+    "string-quotes": "double",
+    "comment-empty-line-before": ["always", {"except": ["first-nested"], "ignore": ["stylelint-commands"], "ignoreComments": ["/^clean-css/"]}],
+    "length-zero-no-unit": [true, {"ignore": ["custom-properties"]}],
+    "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
+    "alpha-value-notation": "number",
+    "property-no-vendor-prefix": [true, { "ignoreProperties": "appearance" }],
+    "number-max-precision": [4, { "ignoreProperties": "letter-spacing" }],
+    "max-line-length": 140,
+    "selector-class-pattern": null,
+    "import-notation": "string"
+  },
+  "ignoreFiles": ["**/+.css", "src/styles/Utils/normalize.css"]
+}

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">
@@ -23,8 +23,9 @@ Newlogic UI is component framework with easy syntax. Modern approach of CSS prop
 Javascript implementation is mainly intended for use on backend rendered websites and applications such as with PHP
 
 ## ⚙️ Under the hood
-* **[Newlogic Core](https://core.newlogic.cz/)** - set of tools that can be used to create modern web applications
-* **[ESM](https://tailwindcss.com/)** - completely written in modern JS syntax - ES8+, ES module, etc.
+* **[Vituum](https://vituum.dev/)** - a small wrapper around Vite, adds support of template engines and more
+* **[Newlogic Core](https://github.com/newlogic-digital/core)** - integration for Vituum, adds pre-defined config of integrations and more
+* **[ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)** - completely written in modern JS syntax - ES8+, ES module, etc.
 * **[PostCSS](https://postcss.org/)** - completely written in modern CSS syntax - nesting, variables, etc.
 * **[Tailwind CSS](https://tailwindcss.com/)** - rich utility classes for everything
 * **[Stimulus](https://stimulus.hotwire.dev/)** - a modest JavaScript framework for the HTML you already have
@@ -32,49 +33,46 @@ Javascript implementation is mainly intended for use on backend rendered website
 * **Easy syntax** - .ui-btn (ui elements), .c-component (components), .c-section (sections) etc.
 
 
-The core of the Newlogic UI is Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.
+The core of the Newlogic UI is Vituum with Newlogic Core, which compiles modern JS and CSS syntax and contains other tools for web development. Source code can be used with any other tools or even different environment than NodeJS, eg. Deno and is written in W3C standards and should be runnable in current or future version of browsers. The framework is modular, and you can really use only what is needed for your project.
 
-## 🪄 Instalation
+## 🪄 Get started
 
-Creating a new project (using Newlogic Core)
+Creating a new project (using Vituum)
 ```sh
 $ git clone --depth 1 https://github.com/newlogic-digital/ui.git newlogic-ui-project
 $ cd newlogic-ui-project && npm i
 ```
 ```sh
-$ npx gulp serve
+$ vite
 ```
 or
 ```sh
-$ npx gulp production
+$ vituum build
 ```
 ___
 Or in any other environment
 ```sh
-$ npm i @newlogic-newlogic/ui
+$ npm i @newlogic-digital/ui
 ```
 
 ```css
 /* main.css or individual modules */
-@import "node_modules/@newlogic/ui/src/styles/main.css"
+@import "node_modules/@newlogic-digital/ui/src/styles/main.css"
 ```
 
 ```js
 /* main.js or individual modules */
-import "node_modules/@newlogic/ui/src/scripts/main.js"
+import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
 ```
 
 ### Requirements
 
-- [Node.js LTS (14.x)](https://nodejs.org/en/download/)
-- [NPM (7.x)](https://www.npmjs.com/package/npm) or [Yarn (2.x)](https://yarnpkg.com/)
+- [Node.js LTS (16.x)](https://nodejs.org/en/download/)
+- [NPM (7.x)](https://www.npmjs.com/package/npm) or any other package manager
 
 ### Config
 
-Each Newlogic Core project has to have config via `gulpfile.js`, docs - [core.newlogic.cz](https://core.newlogic.cz/)
-
-## 📌 Future plans
-- performance optimization
+Each Vituum project has to have config via `vite.config.js`, docs - [vituum.dev](https://vituum.dev)
 
 ## Licence
 GNU GPLv3

package/package.json

@@ -1,36 +1,50 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.1.0",
+  "version": "3.3.0",
   "type": "module",
-  "main": "gulpfile.js",
+  "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": {
-    "utils:eslint": "eslint 'src/scripts/**/*.js' --fix",
-    "utils:stylelint": "stylelint 'src/styles/**/*.css' --fix"
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "vituum build",
+    "build:emails": "vituum build && vituum emails",
+    "build:headless": "vituum headless",
+    "emails": "vituum emails",
+    "cleanup": "vituum cleanup",
+    "eslint": "eslint 'src/scripts/**/*.js'",
+    "eslint:fix": "eslint 'src/scripts/**/*.js' --fix",
+    "stylelint": "stylelint 'src/styles/**/*.css'",
+    "stylelint:fix": "stylelint 'src/styles/**/*.css' --fix"
   },
-  "imports": {},
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "3.0.1",
-    "swup": "2.0.14",
+    "@hotwired/stimulus": "^3.1.1",
+    "swup": "^2.0.19",
     "tippy.js": "^6.3.7",
-    "vanillajs-datepicker": "^1.2.0"
+    "vanillajs-datepicker": "^1.2.0",
+    "css-has-pseudo": "^4.0.1"
   },
   "devDependencies": {
-    "@newlogic-digital/core": "~0.9.5",
-    "eslint-config-standard": "^16.0.3",
-    "stylelint-config-standard": "^24.0.0"
+    "@newlogic-digital/core": "^1.0.10",
+    "@types/grecaptcha": "^3.0.4",
+    "vituum": "^0.0.35",
+    "eslint-config-standard": "^17.0.0",
+    "stylelint-config-standard": "^29.0.0"
   },
   "files": [
     "src",
-    "gulpfile.js"
+    "tailwind.config.cjs",
+    "vite.config.js",
+    ".eslintrc",
+    ".stylelintrc",
+    "public/sw.js"
   ],
   "engines": {
-    "node": ">=14.0.0",
-    "npm": ">=7.10.0",
-    "yarn": ">=2.3.0"
+    "node": ">=16.0.0",
+    "npm": ">=7.10.0"
   },
   "repository": {
     "type": "git",

package/public/sw.js

@@ -0,0 +1,30 @@
+const offlineUrl = '/offline'
+
+self.addEventListener('install', function(event) {
+    const offlineRequest = new Request(offlineUrl)
+
+    event.waitUntil(
+        fetch(offlineRequest).then(function(response) {
+            return caches.open('offline').then(function(cache) {
+                console.log('[oninstall] Cached offline page', response.url)
+                return cache.put(offlineRequest, response)
+            })
+        })
+    )
+})
+
+self.addEventListener('fetch', function(event) {
+    const request = event.request
+
+    if (request.url.match(/\.(css|jpg|jpeg|png|gif|js|woff|woff2|ttf|svg|mp4|webp)$/) || request.url.indexOf(request.referrer) !== 0) {
+    } else if (request.method === 'GET') {
+        event.respondWith(
+            fetch(request).catch(function(error) {
+                console.log('[onfetch] Failed. Serving cached offline fallback ' + error)
+                return caches.open('offline').then(function(cache) {
+                    return cache.match(offlineUrl)
+                })
+            })
+        )
+    }
+})

package/src/{main.json → data/main.json}

@@ -1,4 +1,6 @@
 {
+  "lang": "en",
+  "template": "templates/Layout/Main.twig",
   "prefetch": [
     "https://cdn.jsdelivr.net",
     "https://fonts.gstatic.com",
@@ -21,7 +23,6 @@
     }
   },
   "layout": {
-    "template": "Layout/Main.twig",
     "cookies": false,
     "nav": [
       {
@@ -31,6 +32,10 @@
       {
         "name": "Documentation",
         "url": "/ui"
+      },
+      {
+        "name": "Icons",
+        "url": "/ui-icons"
       }
     ]
   },

package/src/emails/email.prod.html

@@ -0,0 +1,6 @@
+<extends src="templates/Layout.twig">
+    <block name="body">
+        <include src="templates/Header.twig"></include>
+        <include src="templates/Content.twig"></include>
+    </block>
+</extends>

package/src/emails/email.twig.html

@@ -0,0 +1,6 @@
+<extends src="templates/Layout.twig">
+    <block name="body">
+        <include src="templates/Header.twig"></include>
+        <include src="templates/Content.twig"></include>
+    </block>
+</extends>

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 '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/+.js

@@ -1,2 +1 @@
 import './CookieConsent.js'
-import './Form.js'

package/src/scripts/Components/CookieConsent.js

@@ -9,23 +9,20 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
             return
         }
 
-        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
+        if (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now()) {
             setTimeout(() => {
                 selector._addDataValue('state', 'active')
                 selector.classList.add('is-animate')
             }, 1500)
         }
 
-        selector._hasDataValue('type', 'closable') &&
-        selector.addEventListener('click', e => {
-            if (e.target.closest('.c-cookieconsent > .wrp') === null) {
-                this.hide([])
-            }
-        })
-
         selector.querySelector('[data-lib-cookieconsent-approve]').addEventListener('click', () => {
             this.hide(['performance', 'marketing'])
         })
+
+        selector.querySelector('[data-lib-cookieconsent-decline]').addEventListener('click', () => {
+            this.hide([])
+        })
     }
 
     hide(type) {
@@ -42,10 +39,13 @@ LibStimulus.register('c-cookieconsent', class extends Controller {
 LibStimulus.register('c-form-cookieconsent', class extends Controller {
     connect() {
         const selector = this.element
-        const type = localStorage.getItem('lib-cookieconsent')
+        const type = LibCookieConsent.getItem('lib-cookieconsent')
+        const modal = document.querySelector('.c-cookieconsent')
 
-        document.querySelector('.c-cookieconsent').classList.remove('is-animate')
-        document.querySelector('.c-cookieconsent')._removeDataValue('state', 'active')
+        if (modal) {
+            modal.classList.remove('is-animate')
+            modal._removeDataValue('state', 'active')
+        }
 
         if (type !== null) {
             this.element.querySelectorAll('input:not([disabled])').forEach(input => {
@@ -74,9 +74,11 @@ LibStimulus.register('c-form-cookieconsent', class extends Controller {
     }
 
     disconnect() {
-        if (localStorage.getItem('lib-cookieconsent') === null || parseInt(localStorage.getItem('lib-cookieconsent-expire')) < Date.now()) {
-            document.querySelector('.c-cookieconsent')._addDataValue('state', 'active')
-            document.querySelector('.c-cookieconsent').classList.add('is-animate')
+        const modal = document.querySelector('.c-cookieconsent')
+
+        if (modal && (LibCookieConsent.getItem('lib-cookieconsent') === null || parseInt(LibCookieConsent.getItem('lib-cookieconsent-expire')) < Date.now())) {
+            modal._addDataValue('state', 'active')
+            modal.classList.add('is-animate')
         }
     }
 })

package/src/scripts/Layout/Main.js

@@ -19,9 +19,9 @@ LibStimulus.register('lib', class extends Controller {
         LibRipple(e)
     }
 
-    anchor(e) {
-        e.preventDefault()
-        LibAnchor.action(e.currentTarget)
+    anchor({ currentTarget }) {
+        arguments[0].preventDefault()
+        LibAnchor.action(currentTarget)
     }
 
     darkMode() {

package/src/scripts/Libraries/+.js

@@ -2,10 +2,11 @@ export { default as Anchor } from './Anchor.js'
 export { default as CookieConsent } from './CookieConsent.js'
 export { default as Dialog } from './Dialog.js'
 import './Drawer.js'
-import './Fetch.js'
+import './Form.js'
 export { default as NativeSlider } from './NativeSlider.js'
 import './ReCaptcha.js'
 export { default as Ripple } from './Ripple.js'
+import './Script.js'
 import './Stimulus.js'
 export { default as Swup } from './Swup.js'
 export { default as Tabs } from './Tabs.js'

package/src/scripts/Libraries/CookieConsent.js

@@ -1,19 +1,25 @@
 const LibCookieConsent = {
+    setItem: (key, value) => {
+        localStorage.setItem(key, value)
+    },
+    getItem: (key) => {
+        return localStorage.getItem(key)
+    },
     init: () => {
-        const type = localStorage.getItem('lib-cookieconsent')
+        const type = LibCookieConsent.getItem('lib-cookieconsent')
 
         if (type !== null) {
             JSON.parse(type).forEach(type => LibCookieConsent.append(type))
         }
     },
     set: (type) => {
-        localStorage.setItem('lib-cookieconsent', JSON.stringify(type))
-        localStorage.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
+        LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify(type))
+        LibCookieConsent.setItem('lib-cookieconsent-expire', (Date.now() + 31556926 * 1000).toString())
 
         if (type.length > 0) {
             type.forEach(type => LibCookieConsent.append(type))
         } else {
-            localStorage.setItem('lib-cookieconsent', JSON.stringify([]))
+            LibCookieConsent.setItem('lib-cookieconsent', JSON.stringify([]))
             LibCookieConsent.remove()
         }
     },

package/src/scripts/Libraries/Dialog.js

@@ -8,7 +8,7 @@ const LibDialog = {
             }
 
             if (document.querySelector('.lib-dialog') === null) {
-                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog"></div>')
+                document.body.insertAdjacentHTML('beforeend', '<div class="lib-dialog" tabindex="0"></div>')
             }
 
             document.querySelector('.lib-dialog').insertAdjacentHTML('beforeend', content)
@@ -31,6 +31,8 @@ const LibDialog = {
 
             loadStimulus(document.querySelector('.lib-dialog'))
 
+            document.querySelector('.lib-dialog').focus()
+
             resolve()
 
             document.querySelector('.lib-dialog').addEventListener('mousedown', e => {
@@ -66,8 +68,13 @@ const LibDialog = {
         })
     },
     action: async(element, url) => {
+        element._addDataValue('state', 'loading')
+        element.classList.add('cursor-wait')
+
         fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => response.json()).then(({ dialog }) => {
             LibDialog.show(dialog)
+            element._removeDataValue('state', 'loading')
+            element.classList.remove('cursor-wait')
         })
     }
 }

package/src/scripts/Libraries/Drawer.js

@@ -1,38 +1,40 @@
 import { LibStimulus, Controller } from './Stimulus.js'
 
 LibStimulus.register('lib-drawer', class 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')
         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._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

@@ -0,0 +1,31 @@
+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.validation(e))
+    }
+
+    validation(e) {
+        if (this.element.checkValidity() === false) {
+            e.preventDefault()
+            e.stopPropagation()
+
+            this.element.querySelector(':invalid').scrollIntoView({ behavior: 'smooth', block: 'center' })
+            this.element.querySelector(':invalid').focus()
+        }
+
+        this.element.querySelectorAll('.ui-input, [data-controller="ui-checkbox"], [data-controller="ui-radio"]').forEach(element => {
+            checkValidity(element, { message: true })
+        })
+
+        this.element.querySelectorAll('.ui-select:not([data-state*="active"]) select[required]').forEach(select => {
+            checkValidity(select.closest('.ui-select'), { message: true })
+        })
+    }
+
+    submitForm({ currentTarget }) {
+        currentTarget.form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+    }
+})

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
     }
 

package/src/scripts/Libraries/ReCaptcha.js

@@ -3,14 +3,19 @@ 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,8 +23,8 @@ LibStimulus.register('lib-recaptcha', class extends Controller {
         })
     }
 
-    async submit(e) {
-        e.preventDefault()
+    async submit() {
+        arguments[0].preventDefault()
 
         await this.execute()
         this.element.submit()

package/src/scripts/Libraries/Script.js

@@ -0,0 +1,19 @@
+import { LibStimulus, Controller } from './Stimulus.js'
+
+LibStimulus.register('lib-script', class extends Controller {
+    connect() {
+        const element = this.element
+        const script = document.createElement('script')
+
+        ;[...element.attributes].forEach(attribute => {
+            if (attribute.specified && !attribute.name.includes('type') && !attribute.name.includes('data-controller')) {
+                script.setAttribute(attribute.name, attribute.value)
+            }
+        })
+
+        script.innerHTML = element.innerHTML
+
+        element.parentElement.appendChild(script)
+        element.remove()
+    }
+})