@newlogic-digital/ui 3.0.4 → 3.1.0

package/src/scripts/Libraries/Tippy.js

@@ -0,0 +1,118 @@
+import { loadStimulus, importStyle } from '../Utils/Functions/+.js'
+import cdn from '../Utils/cdn.js'
+
+export default class LibTippy {
+    async init(element, options, template) {
+        const tippy = (await import('tippy.js')).default
+        const { roundArrow } = await import('tippy.js')
+
+        await importStyle(cdn.tippy)
+
+        if (typeof element._tippy !== 'undefined') {
+            return false
+        }
+
+        if (this.type.includes('dropdown')) {
+            this.options.placement = 'bottom-end'
+            this.options.arrow = false
+            this.options.maxWidth = 'none'
+        }
+
+        if (this.type.includes('arrow')) {
+            options.arrow = roundArrow
+        }
+
+        if (!template.startsWith('/')) {
+            if (template !== '') {
+                options.content = document.querySelector('#' + template).innerHTML
+            } else {
+                options.content = `
+                  <div class="ui-dropdown">
+                    <div class="wrp_dropdown_body">
+                      ${element.getAttribute('aria-label')}
+                    </div>
+                  </div>
+                `
+            }
+        }
+
+        if (typeof element.dataset.libTippySlot !== 'undefined') {
+            for (const [key, value] of Object.entries(JSON.parse(element.dataset.libTippySlot))) {
+                options.content = options.content.replaceAll(`{${key}}`, value).replaceAll(`%7B${key}%7B`, value)
+            }
+        }
+
+        tippy(element, options)
+    }
+
+    constructor(element, attributes = ['tooltip', '']) {
+        const self = this
+
+        this.options = {
+            content: '',
+            placement: 'bottom',
+            trigger: 'mouseenter focus',
+            interactive: true,
+            appendTo: 'parent',
+            arrow: false,
+            theme: 'light-border',
+            animation: 'scale',
+            inertia: true,
+            allowHTML: true,
+            onShow: (instance) => {
+                let name = this.template
+
+                if (this.type.includes('-full')) {
+                    instance.popper.classList.add('is-full')
+                    document.documentElement.classList.add('m:is-body-overlay')
+                }
+
+                if (typeof name === 'undefined') {
+                    name = this.type
+                }
+
+                instance.popper.querySelector('.tippy-box').setAttribute('data-name', name)
+
+                loadStimulus(instance.popper.querySelector('.tippy-content'))
+            },
+            onHide: () => {
+                if (this.type.includes('-full')) {
+                    setTimeout(() => document.documentElement.classList.remove('m:is-body-overlay'), 50)
+                }
+            }
+        }
+
+        this.type = attributes[0]
+        this.template = attributes[1]
+
+        if (this.type.includes('dropdown')) {
+            this.options.trigger = 'click'
+        }
+
+        if (typeof element.dataset.tippyTrigger !== 'undefined') {
+            this.options.trigger = element.dataset.tippyTrigger
+        }
+
+        this.options.showOnCreate = true
+
+        this.options.trigger !== 'manual' && this.options.trigger.split(' ').forEach(event => {
+            element.addEventListener(event, async function e() {
+                if (self.template.startsWith('/') && self.options.content === '') {
+                    element.style.cursor = 'wait'
+
+                    fetch(self.template, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(response => {
+                        return response.json()
+                    }).then(async(data) => {
+                        self.options.content = data.content
+                        element.style.cursor = ''
+                        await self.init(element, self.options, self.template)
+                        element.removeEventListener(event, e)
+                    })
+                } else {
+                    await self.init(element, self.options, self.template)
+                    element.removeEventListener(event, e)
+                }
+            })
+        })
+    }
+}

package/src/scripts/Ui/+.js

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

package/src/scripts/Ui/Checkbox.js

@@ -0,0 +1,19 @@
+import { LibStimulus, Controller } from '../Libraries/Stimulus.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')
+        }
+    }
+
+    connect() {
+        const input = this.element.querySelector('input:not([type="hidden"])')
+
+        input.addEventListener('change', () => this.validate(input))
+    }
+})

package/src/scripts/Ui/Input.js

@@ -1,228 +1,257 @@
-import cdn from "../Utils/cdn.js";
-import {LibStimulus, Controller} from "../Libraries/Stimulus.js";
-import {importStyle} from "../Utils/Functions/+.js";
+import cdn from '../Utils/cdn.js'
+import { LibStimulus, Controller } from '../Libraries/Stimulus.js'
+import { importStyle } from '../Utils/Functions/+.js'
 
-LibStimulus.register("ui-input", class extends Controller {
-    connect() {
-        let element = this.element;
+LibStimulus.register('ui-input', class extends Controller {
+    async connect() {
+        const element = this.element
 
-        this.validateInput(element, false);
+        this.validate(element, false)
 
-        element.addEventListener("change", () => {
-            this.validateInput(element, true);
-        });
-
-        this.typeNumber(element);
+        element.addEventListener('change', () => {
+            this.validate(element, true)
+        })
 
-        this.typeTime(element);
+        this.typeNumber(element)
 
-        this.typeDatetime(element);
+        this.typeFile(element)
 
-        this.typeColor(element);
+        await this.typeDatetime(element)
 
-        this.typeFile(element);
+        await this.typeColor(element)
     }
 
-    validateInput(element, validate) {
-        let input = element.querySelectorAll("input, textarea");
+    validate(element, validate) {
+        const input = element.querySelectorAll('input, textarea')
+
+        input.forEach(input => {
+            let validationMessage = input.validationMessage
+
+            if (typeof input.dataset.validationMessage !== 'undefined') {
+                validationMessage = input.dataset.validationMessage
+            }
 
-        [...input].map((input) => {
             if (input.outerHTML.match(/(data-novalidate|readonly|hidden|data-state="invalid")/) === null && validate) {
-                element.removeAttribute("data-state");
+                element._removeDataValue('state', 'valid invalid active')
+
+                if (element.querySelector('[class^="icon"][class*="valid"]') !== null) {
+                    element.querySelector('[class^="icon"][class*="valid"]').remove()
+                }
 
                 if (input.checkValidity()) {
-                    element._addDataValue("state", "valid");
+                    element._addDataValue('state', 'valid')
                 } else {
-                    element._addDataValue("state", "invalid");
+                    element._addDataValue('state', 'invalid')
+
+                    if (element.querySelector('[class^="icon"][class*="valid"]') === null) {
+                        const icon = element.querySelector('.icon-r')
+                        const elm = icon || element
+                        const where = icon ? 'afterend' : 'beforeend'
+
+                        elm.insertAdjacentHTML(where, `<div class="icon-r icon-invalid text-error lib-hint-top lib-hint-error" tabindex="0" aria-label="${validationMessage}"><svg><use href="#icon-exclamation-circle"></use></svg></div>`)
+                    }
                 }
             }
 
-            if (input.value !== "") {
-                element._addDataValue("state", "active");
+            if (input.value !== '') {
+                element._addDataValue('state', 'active')
             }
         })
     }
 
     typeNumber(element) {
-        if (element.querySelector(`[type="number"]`) !== null) {
-            if (element.querySelector(".icon") === null) {
-                element.insertAdjacentHTML("beforeend", `<span class="icon icon-angle-down" data-action="minus"></span><span class="icon icon-angle-up" data-action="plus"></span>`);
+        if (element.querySelector('[type="number"]') !== null) {
+            if (element.querySelector('.icon') === null) {
+                element.insertAdjacentHTML('beforeend', '<span class="icon icon-angle-down" data-action="minus"></span><span class="icon icon-angle-up" data-action="plus"></span>')
             }
 
-            element.querySelector(`[type="number"]`).addEventListener("keydown", (e) => {
+            element.querySelector('[type="number"]').addEventListener('keydown', e => {
                 if ([46, 8, 9, 27, 13, 190].indexOf(e.keyCode) !== -1 || e.keyCode === 16 || (e.keyCode === 65 && e.ctrlKey === true) || (e.keyCode >= 35 && e.keyCode <= 39)) {
-                    return;
+                    return
                 }
 
                 if (((e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
-                    e.preventDefault();
+                    e.preventDefault()
                 }
-            });
+            })
 
-            element.querySelector(`[data-action="plus"]`).addEventListener("click", () => {
-                let input = this.element.querySelector("input"),
-                    num = parseInt(input.value) + parseInt(input.getAttribute('data-step'));
+            element.querySelector('[data-action="plus"]').addEventListener('click', () => {
+                const input = this.element.querySelector('input')
+                const num = parseInt(input.value === '' ? 0 : input.value) + parseInt(input.step)
 
-                if (num <= input.getAttribute('max')) {
-                    input.value = num;
-                    input.dispatchEvent(new Event('change', { 'bubbles': true }));
+                if (num <= input.max) {
+                    input.value = num
+                    input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
-            });
+            })
 
-            element.querySelector(`[data-action="minus"]`).addEventListener("click", () => {
-                let input = this.element.querySelector("input"),
-                    num = parseInt(input.value) - parseInt(input.getAttribute('data-step'));
+            element.querySelector('[data-action="minus"]').addEventListener('click', () => {
+                const input = this.element.querySelector('input')
+                const num = parseInt(input.value) - parseInt(input.step)
 
-                if (num >= input.getAttribute('min')) {
-                    input.value = num;
-                    input.dispatchEvent(new Event('change', { 'bubbles': true }));
+                if (num >= input.min) {
+                    input.value = num
+                    input.dispatchEvent(new Event('change', { bubbles: true }))
                 }
-            });
+            })
         }
     }
 
     async typeDatetime(element) {
-        let date = element.querySelector(`[type^="date"]`);
+        const date = element.querySelector('[type^="date"]')
 
-        if (date !== null && !document.documentElement.classList.contains("mobile")) {
-            const lang = await import(`/* @vite-ignore */https://cdn.esm.sh/v41/vanillajs-datepicker/locales/${document.documentElement.lang === "en" ? "cs" : document.documentElement.lang}.js`);
-            const { Datepicker } = await import("vanillajs-datepicker");
+        if (date !== null && !document.documentElement.classList.contains('mobile')) {
+            const lang = await import(`/* @vite-ignore */https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.2.0/js/i18n/locales/${document.documentElement.lang === 'en' ? 'cs' : document.documentElement.lang}.min.js`)
+            const { Datepicker } = await import('vanillajs-datepicker')
+
+            await importStyle(cdn.datepicker)
 
             Object.assign(Datepicker.locales, lang.default)
 
-            let datetime = date.getAttribute("type") === "datetime-local";
-            let required = date.getAttribute("required") !== null;
-            let placeholder = date.getAttribute("placeholder") !== null;
-            let currentDate, currentTime = null;
+            const datetime = date.getAttribute('type') === 'datetime-local'
+            const required = date.getAttribute('required') !== null
+            const placeholder = date.getAttribute('placeholder') !== null
+            let currentDate; let currentTime = null
 
-            date.setAttribute("type", "hidden");
-            element.insertAdjacentHTML("beforeend", `<input type="text" inputmode="none" ${required ? 'required': ''} ${placeholder ? 'placeholder': ''}>`);
-            element.querySelector(`[type="text"]`).addEventListener("keydown", (e) => e.preventDefault());
+            date.setAttribute('type', 'hidden')
+            element.insertAdjacentHTML('beforeend', `<input type="text" inputmode="none" ${required ? 'required' : ''} ${placeholder ? `placeholder="${date.getAttribute('placeholder')}"` : ''}>`)
 
-            let hidden = element.querySelector(`[type="hidden"]`);
+            const hidden = element.querySelector('[type="hidden"]')
 
-            if (datetime && hidden.value.indexOf(":") !== -1) {
-                hidden.setAttribute("data-time", hidden.value.substr(hidden.value.indexOf(":") - 2, hidden.value.length))
+            if (datetime && hidden.value.indexOf(':') !== -1) {
+                hidden.setAttribute('data-time', hidden.value.substr(hidden.value.indexOf(':') - 2, hidden.value.length))
             }
 
-            let datepicker = new Datepicker(element.querySelector(`[type="text"]`), Object.assign({
-                autohide: true,
+            const datepicker = new Datepicker(element.querySelector('[type="text"]'), Object.assign({
+                autohide: !datetime,
                 language: document.documentElement.lang,
-                minDate: Datepicker.parseDate(hidden.getAttribute("min"),"yyyy-mm-dd"),
-                maxDate: Datepicker.parseDate(hidden.getAttribute("max"),"yyyy-mm-dd")
-            }, JSON.parse(element.getAttribute("data-lib-datepicker"))));
-
-            datepicker.setDate(Datepicker.parseDate(hidden.value,"yyyy-mm-dd"));
+                format: 'dd.mm.yyyy',
+                clearBtn: true,
+                todayBtn: true,
+                todayBtnMode: 1,
+                minDate: Datepicker.parseDate(hidden.getAttribute('min'), 'yyyy-mm-dd'),
+                maxDate: Datepicker.parseDate(hidden.getAttribute('max'), 'yyyy-mm-dd')
+            }, JSON.parse(element.getAttribute('data-lib-datepicker'))))
+            datepicker.setDate(Datepicker.parseDate(hidden.value, 'yyyy-mm-dd'))
 
             if (datetime && hidden.value) {
-                element.insertAdjacentHTML("afterbegin", `<span class="input" ${placeholder ? 'placeholder': ''}>${datepicker.getDate("dd.mm.yyyy") + " " + hidden.dataset.time}</span>`);
+                element.insertAdjacentHTML('afterbegin', `<span class="input" ${placeholder ? 'placeholder' : ''}><span>${datepicker.getDate('dd.mm.yyyy') + '</span>&nbsp;' + hidden.dataset.time}</span>`)
+            }
+
+            if (datetime) {
+                datepicker.element.addEventListener('keydown', e => {
+                    if (e.key === 'Backspace' || e.key === 'Delete') {
+                        datepicker.setDate({ clear: true })
+                    } else {
+                        e.preventDefault()
+                    }
+                })
             }
 
-            datepicker.element.addEventListener("changeDate", () => {
-                if (typeof hidden.dataset.time !== "undefined") {
-                    hidden.value = datepicker.getDate("yyyy-mm-dd") + "T" + hidden.dataset.time;
+            datepicker.element.addEventListener('changeDate', () => {
+                if (typeof hidden.dataset.time !== 'undefined') {
+                    if (typeof datepicker.getDate('yyyy-mm-dd') !== 'undefined') {
+                        hidden.value = datepicker.getDate('yyyy-mm-dd') + 'T' + hidden.dataset.time
 
-                    let value = datepicker.getDate("dd.mm.yyyy") + " " + hidden.dataset.time;
+                        const value = '<span>' + datepicker.getDate('dd.mm.yyyy') + '</span>&nbsp;' + hidden.dataset.time
 
-                    if (element.querySelector('.input') === null) {
-                        element.insertAdjacentHTML("afterbegin", `<span class="input" ${placeholder ? 'placeholder': ''}>${value}</span>`);
+                        if (element.querySelector('.input') === null) {
+                            element.insertAdjacentHTML('afterbegin', `<span class="input" ${placeholder ? 'placeholder' : ''}>${value}</span>`)
+                        } else {
+                            element.querySelector('.input').innerHTML = value
+                        }
                     } else {
-                        element.querySelector('.input').textContent = value;
+                        hidden.value = ''
+                        element.querySelector('.input').textContent = ''
                     }
+                } else if (datepicker.getDate()) {
+                    hidden.value = datepicker.getDate('yyyy-mm-dd')
                 } else {
-                    hidden.value = datepicker.getDate("yyyy-mm-dd");
+                    hidden.value = ''
                 }
 
-                hidden.dispatchEvent(new Event('change', { 'bubbles': true }));
-            });
+                hidden.dispatchEvent(new Event('change', { bubbles: true }))
+            })
 
-            datepicker.element.addEventListener("show", (element) => {
-                let footer = element.detail.datepicker.picker.element.querySelector(".datepicker-footer");
-                currentDate = datepicker.getDate("yyyy-mm-dd");
+            datepicker.element.addEventListener('show', element => {
+                const footer = element.detail.datepicker.picker.element.querySelector('.datepicker-footer')
+                currentDate = datepicker.getDate('yyyy-mm-dd')
 
-                    this.element._addDataValue("state", "active");
+                this.element._addDataValue('state', 'active')
 
                 if (footer.querySelector('[type="time"]') === null && datetime) {
-                    let time = hidden.dataset.time;
+                    let time = hidden.dataset.time
 
-                    if (typeof time === "undefined") {
-                        time = new Date().toLocaleTimeString("de", {hour: "2-digit", minute: "2-digit"});
-                        hidden.setAttribute("data-time", time);
+                    if (typeof time === 'undefined') {
+                        time = new Date().toLocaleTimeString('de', { hour: '2-digit', minute: '2-digit' })
+                        hidden.setAttribute('data-time', time)
                     }
 
-                    currentTime = time;
+                    currentTime = time
 
-                    footer.insertAdjacentHTML("beforeend", `<div class="datepicker-time"><input type="time" value="${time}" aria-label="Text"></div>`);
+                    footer.querySelector('.datepicker-controls').insertAdjacentHTML('beforeend', `<input type="time" value="${time}" aria-label="Text"><button type="button" data-ok class="button ok-btn" style="width: auto;">Ok</button>`)
 
-                    this.typeTime(footer);
+                    footer.querySelector('[type="time"]').addEventListener('change', e => {
+                        hidden.setAttribute('data-time', e.target.value)
+                    })
 
-                    footer.querySelector(`[type="time"]`).addEventListener("change", (e) => {
-                        hidden.setAttribute("data-time", e.target.value);
-                    });
+                    footer.querySelector('[type="time"]').addEventListener('mousedown', e =>
+                        e.stopPropagation()
+                    )
 
-                    footer.querySelector(`[type="time"]`).addEventListener("click", (e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        e.target.focus();
-                    });
-                } else if (datetime) {
-                    currentTime = hidden.dataset.time;
-                }
-            });
+                    footer.querySelector('[type="time"]').addEventListener('blur', e => {
+                        e.stopPropagation()
+                        e.preventDefault()
+                        datepicker.element.focus()
+                    })
 
-            datepicker.element.addEventListener("hide", (element) => {
+                    footer.querySelector('[data-ok]').addEventListener('click', e => {
+                        if (hidden.value === '') {
+                            footer.querySelector('.today-btn').click()
+                        }
 
-                    if (hidden.value === "") {
-                        this.element._removeDataValue("state", "active");
-                    }
+                        datepicker.element.focus()
+                        datepicker.hide()
+                    })
+                } else if (datetime) {
+                    currentTime = hidden.dataset.time
+                }
+            })
 
-                if (datetime) {
-                    element.detail.datepicker.picker.element.querySelector(`[type="time"]`).dispatchEvent(new Event('change', { 'bubbles': true }));
+            datepicker.element.addEventListener('hide', element => {
+                if (hidden.value === '') {
+                    this.element._removeDataValue('state', 'active')
+                } else {
+                    if (datetime) {
+                        element.detail.datepicker.picker.element.querySelector('[type="time"]').dispatchEvent(new Event('change', { bubbles: true }))
 
-                    if (currentDate === datepicker.getDate("yyyy-mm-dd") && currentTime.toString() !== hidden.dataset.time.toString()) {
-                        datepicker.element.dispatchEvent(new Event('changeDate', { 'bubbles': true }));
+                        if (currentDate !== datepicker.getDate('yyyy-mm-dd') || currentTime.toString() !== hidden.dataset.time.toString()) {
+                            datepicker.element.dispatchEvent(new Event('changeDate', { bubbles: true }))
+                        }
                     }
                 }
-            });
-        }
-    }
-
-    async typeTime(element) {
-        if (element.querySelector(`[type="time"]`) !== null && element.querySelector(`[type="time"]`).type !== "time") {
-            const Cleave = (await import("cleave.js")).default;
-
-            element.querySelector('[type="time"]').setAttribute("placeholder", "--:--");
-            element.querySelector('[type="time"]').classList.add("polyfill");
-
-            if (element.querySelector("label") !== null) {
-                element.querySelector('[type="time"]').classList.add("is-label");
-            }
-
-            new Cleave(element.querySelector('[type="time"]'), {
-                time: true,
-                timePattern: ['h', 'm']
-            });
+            })
         }
     }
 
     async typeColor(element) {
-        if (element.querySelector(`[type="color"]`) !== null) {
-            element.setAttribute("data-type", "color");
-            element.querySelector(`[type="color"]`).setAttribute("inputmode", "none");
-            element.querySelector(`[type="color"]`).setAttribute("type", "text");
-            element.insertAdjacentHTML("afterbegin", `<span class="color"></span>`);
+        if (element.querySelector('[type="color"]') !== null) {
+            element.setAttribute('data-type', 'color')
+            element.querySelector('[type="color"]').setAttribute('inputmode', 'none')
+            element.querySelector('[type="color"]').setAttribute('type', 'text')
+            element.insertAdjacentHTML('afterbegin', '<span class="color"></span>')
 
-            importStyle(cdn.pickr_css);
+            await importStyle(cdn.pickr_css)
 
-            let Pickr = (await import("@simonwep/pickr")).default;
+            let Pickr = (await import('@simonwep/pickr')).default
 
-            if (typeof Pickr.default !== "undefined") {
+            if (typeof Pickr.default !== 'undefined') {
                 Pickr = Pickr.default
             }
 
-            let input = element.querySelector("input");
-            input.setAttribute("maxlength", "9");
-            input.setAttribute("pattern", "^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$");
+            const input = element.querySelector('input')
+            input.setAttribute('maxlength', '9')
+            input.setAttribute('pattern', '^#?([a-fA-F0-9]{8}|[a-fA-F0-9]{6}|[a-fA-F0-9]{3})$')
 
             const pickr = new Pickr({
                 el: input,
@@ -240,39 +269,37 @@ LibStimulus.register("ui-input", class extends Controller {
                     }
                 }
             }).on('init', pickr => {
-                pickr.setColor(input.value);
+                pickr.setColor(input.value)
             }).on('change', color => {
-                input.value = color.toHEXA().toString();
-                element.querySelector(".color").style["background-color"] = color.toHEXA().toString();
+                input.value = color.toHEXA().toString()
+                element.querySelector('.color').style['background-color'] = color.toHEXA().toString()
             }).on('hide', pickr => {
-                pickr.applyColor();
-                input.dispatchEvent(new Event('change', { 'bubbles': true }));
+                pickr.applyColor()
+                input.dispatchEvent(new Event('change', { bubbles: true }))
             })
 
-            input.addEventListener("change", (e) => {
-                pickr.setColor(e.target.value);
+            input.addEventListener('change', e => {
+                pickr.setColor(e.target.value)
             })
-
         }
     }
 
     typeFile(element) {
-        if (element.querySelector(`[type="file"]`) !== null) {
-            element.setAttribute("data-type", "file");
-            element.insertAdjacentHTML("beforeend", `<span class="icon icon-paper-clip">${element.querySelector("input").title}</span><span data-placeholder="${element.querySelector("input").placeholder}"></span>`);
-            element.querySelector("input").addEventListener("change", (e) => {
-                let placeholder = element.querySelector("span:not(.icon)");
-
-                if (e.target.getAttribute("multiple") === null) {
-                    placeholder.removeAttribute("data-placeholder");
-                    placeholder.textContent = e.target.value.replace(/.*(\/|\\)/, '');
+        if (element.querySelector('[type="file"]') !== null) {
+            element.setAttribute('data-type', 'file')
+            element.insertAdjacentHTML('beforeend', `<span class="icon icon-paper-clip">${element.querySelector('input').title}</span><span data-placeholder="${element.querySelector('input').placeholder}"></span>`)
+            element.querySelector('input').addEventListener('change', e => {
+                const placeholder = element.querySelector('span:not(.icon)')
+
+                if (e.target.getAttribute('multiple') === null) {
+                    placeholder.removeAttribute('data-placeholder')
+                    placeholder.textContent = e.target.value.replace(/.*(\/|\\)/, '')
                 } else {
-                    let files = e.target.files;
-                    placeholder.removeAttribute("data-placeholder");
-                    placeholder.textContent = `${Object.keys(files).length} soubory`;
-
+                    const files = e.target.files
+                    placeholder.removeAttribute('data-placeholder')
+                    placeholder.textContent = Object.keys(files).length === 1 ? e.target.value.replace(/.*(\/|\\)/, '') : `${Object.keys(files).length} soubory`
                 }
-            });
+            })
         }
     }
-});
+})

package/src/scripts/Ui/Radio.js

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