@newlogic-digital/ui 3.2.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">
@@ -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,6 +1,6 @@
 {
   "name": "@newlogic-digital/ui",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "type": "module",
   "main": "vite.config.js",
   "author": "New Logic Studio s.r.o.",
@@ -10,7 +10,9 @@
     "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",
@@ -19,20 +21,26 @@
   },
   "dependencies": {
     "@simonwep/pickr": "^1.8.2",
-    "@hotwired/stimulus": "3.1.0",
-    "swup": "2.0.19",
+    "@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": "^1.0.0",
-    "vituum": "^0.0.28",
+    "@newlogic-digital/core": "^1.0.10",
+    "@types/grecaptcha": "^3.0.4",
+    "vituum": "^0.0.35",
     "eslint-config-standard": "^17.0.0",
-    "stylelint-config-standard": "^28.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": ">=16.0.0",

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/data/main.json

@@ -1,4 +1,5 @@
 {
+  "lang": "en",
   "template": "templates/Layout/Main.twig",
   "prefetch": [
     "https://cdn.jsdelivr.net",
@@ -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/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/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

@@ -1,33 +1,27 @@
-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()
+        }
 
-        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/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/Stimulus.js

@@ -1,40 +1,10 @@
-import { Application, Controller as DefaultController } from '@hotwired/stimulus'
+import { Application, Controller } from '@hotwired/stimulus'
 import loadStimulus from '../Utils/Functions/loadStimulus.js'
 
 const LibStimulus = new Application(document.documentElement)
 
 const getController = (element, identifier) => LibStimulus.getControllerForElementAndIdentifier(element, identifier)
 
-class Controller extends DefaultController {
-    getValue(value) {
-        return this[`${value}Value`]
-    }
-
-    setValue(type, value) {
-        this[`${type}Value`] = value
-    }
-
-    hasValue(value) {
-        return this.data.has(`${value}Value`)
-    }
-
-    getClass(value) {
-        return this.data.get(`${value}Class`)
-    }
-
-    queryTarget(target) {
-        return this.targets.find(target)
-    }
-
-    queryTargetAll(targets) {
-        return this.targets.findAll(targets)
-    }
-
-    hasTarget(target) {
-        return this.targets.has(target)
-    }
-}
-
 LibStimulus.start().then(() => loadStimulus(document.body))
 
 window.LibStimulus = { default: LibStimulus, Controller, loadStimulus }

package/src/scripts/Libraries/Swup.js

@@ -10,7 +10,7 @@ const LibSwup = new Swup({
     linkSelector: `:is(a[href^="${window.location.origin}"], a[href^="/"]):not([data-no-swup], [data-naja], [target="_blank"])`
 })
 
-LibSwup.on('clickLink', async() => {
+LibSwup.on('clickLink', async({ target }) => {
     document.body.classList.remove('overflow-hidden')
 
     if (document.querySelector('.lib-drawer[data-state~="active"]') !== null) {
@@ -20,6 +20,10 @@ LibSwup.on('clickLink', async() => {
     if (document.querySelector('.lib-dialog') !== null) {
         await LibDialog.hide()
     }
+
+    if (window.location.href === target.closest('a').href) {
+        document.documentElement.scroll({ top: 0 })
+    }
 })
 
 LibSwup.on('animationOutDone', () => {

package/src/scripts/Libraries/Tabs.js

@@ -1,13 +1,13 @@
 export default function LibTabs(element) {
     element.querySelector('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach((selector, index) => {
-        selector.addEventListener('click', e => {
-            e.preventDefault()
+        selector.addEventListener('click', () => {
+            arguments[0].preventDefault()
 
-            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(elm => elm._removeDataValue('state', 'active'))
+            selector.closest('[data-lib-tabs-nav]').querySelectorAll('[data-lib-tabs-item="nav"]').forEach(element => element._removeDataValue('state', 'active'))
             selector._addDataValue('state', 'active')
 
-            ;[...element.querySelector('[data-lib-tabs-area]').children].forEach(elm => {
-                elm._removeDataValue('state', 'active')
+            ;[...element.querySelector('[data-lib-tabs-area]').children].forEach(element => {
+                element._removeDataValue('state', 'active')
             })
 
             element.querySelector('[data-lib-tabs-area]').children[index]._addDataValue('state', 'active')

package/src/scripts/Libraries/Tippy.js

@@ -27,7 +27,7 @@ export default class LibTippy {
                 options.content = document.querySelector('#' + template).innerHTML
             } else {
                 options.content = `
-                  <div class="ui-dropdown">
+                  <div class="c-dropdown">
                     <div class="wrp_dropdown_body">
                       ${element.getAttribute('aria-label')}
                     </div>
@@ -99,12 +99,14 @@ export default class LibTippy {
             element.addEventListener(event, async function e() {
                 if (self.template.startsWith('/') && self.options.content === '') {
                     element.style.cursor = 'wait'
+                    element._addDataValue('state', 'loading')
 
                     fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
                         return response.json()
                     }).then(async(data) => {
                         self.options.content = data.content
                         element.style.cursor = ''
+                        element._removeDataValue('state', 'loading')
                         await self.init(element, self.options, self.template)
                         element.removeEventListener(event, e)
                     })

package/src/scripts/Ui/+.js

@@ -1,5 +1,4 @@
 import './Checkbox.js'
 import './Input.js'
-import './Radio.js'
 import './Select.js'
 import './Text.js'

package/src/scripts/Ui/Checkbox.js

@@ -1,19 +1,10 @@
 import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { checkValidity } from '../Utils/Functions/+.js'
 
-LibStimulus.register('ui-checkbox', class extends Controller {
-    validate(element) {
-        element.parentNode._removeDataValue('state', 'valid invalid')
-
-        if (element.checkValidity()) {
-            element.parentNode._addDataValue('state', 'valid')
-        } else {
-            element.parentNode._addDataValue('state', 'invalid')
-        }
-    }
-
+['ui-checkbox', 'ui-radio'].forEach(identifier => LibStimulus.register(identifier, class extends Controller {
     connect() {
         const input = this.element.querySelector('input:not([type="hidden"])')
 
-        input.addEventListener('change', () => this.validate(input))
+        input.addEventListener('change', () => checkValidity(this.element))
     }
-})
+}))