u2ui 1.0.1 → 1.4.5

package/el/accordion/accordion.js

@@ -1,258 +1,211 @@
-// See https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel
-
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
-
-
-customElements.define('u2-accordion', class extends HTMLElement {
-
-    constructor() {
-        super();
-
-        import('../ico/ico.js');
-
-        let shadowRoot = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
-        shadowRoot.innerHTML = `
-        <style>
-        @import url('${icoCssUrl}');
-        :host {
-            display:block;
-            --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon_name}/baseline.svg';
-        }
-        :host(:active) {
-            xoutline:none !important;
-        }
-        #accordion {
-            display:flex;
-            flex-direction:column;
-            gap:0.5em;
-        }
-        .trigger {
-            display:flex;
-            align-items:baseline;
-            cursor:pointer;
-            padding-inline:1em;
-            padding-block:.5em;
-            background-color:#ddd;
-            background-color:var(--color-light);
-            & .icon {
-                margin-inline-start:auto;
-                display:flex;
-                transition:0.2s;
-
-                & > u2-ico {
-                    --size:1em;
-                }
-                [aria-expanded="true"] > & {
-                    transform:rotate(180deg);
-                }
-            }
-        }
-        .trigger:is(:focus,:active) {
-            xoutline:2px solid blue;
-            outline:--u2-focus-outline;
-        }
-        .title::slotted(*) {
-            margin:0 !important;
-            flex:1 1 auto;
-            font-size:1em;
-        }
-        .content {
-            display:block;
-            padding:1em;
-            background-color: #9999990a;
-
-            overflow:auto;
-            transition:.3s;
-            transition-behavior: allow-discrete;
-        }
-        .content[hidden="until-found"] {
-            content-visibility:visible;
-            xopacity:0;
-            overflow:hidden;
-            block-size:0;
-            max-block-size:0;
-            padding-block:0;
-        }
-        </style>
-        <div id=accordion role=presentation></div>
-        `;
-        this.items = this.shadowRoot.querySelector('#accordion').children;
-
-        this._onClick = this._onClick.bind(this);
-        this._onKeyDown = this._onKeyDown.bind(this);
-
-        this.mutationObserver = new MutationObserver(() => this._build());
-    }
-
-    connectedCallback() {
-        this._build();
-        this.shadowRoot.addEventListener('click', this._onClick);
-        this.shadowRoot.addEventListener('keydown', this._onKeyDown);
-        this.mutationObserver.observe(this, { childList: true });
-    }
-    disconnectedCallback() {
-        this.shadowRoot.removeEventListener('click', this._onClick);
-        this.shadowRoot.removeEventListener('keydown', this._onKeyDown);
-        this.mutationObserver.disconnect();
-    }
-
-    _build() {
-
-        const container = this.shadowRoot.querySelector('#accordion');
-        const icon = this.getAttribute('icon') || 'expand-more';
-
-        let hLevel = 6;
-        // get highest heading level
-        for (let node of this.children) {
-            if (!node.tagName.match(/^H[1-6]$/)) continue;
-            let level = parseInt(node.tagName[1]);
-            if (level < hLevel) hLevel = level;
-        }
-
-
-
-        let index = -1;
-        let activeContent = null;
-        let collectedContents = [];
-        for (let node of this.childNodes) {
-            if (node.tagName === 'H'+hLevel) {
-                activeContent && activeContent.assign(...collectedContents);
-                index++;
-                let panel = container.childNodes[index];
-                if (!panel) {
-                    panel = document.createElement('div');
-                    panel.innerHTML = `
-                        <span class=trigger id=title${index}   role=button part=trigger tabindex=0  aria-controls=content${index} aria-expanded=false>
-                            <slot class=title part=title></slot>
-                            <slot class=icon part=icon>
-                                <u2-ico icon=${icon}>▾</u2-ico>
-                            </slot>
-                        </span>
-                        <slot class=content id=content${index} role=region part=content hidden=until-found aria-hidden=true aria-labelledby=title${index}></slot>
-                    `;
-                    container.appendChild(panel);
-                }
-                const title = panel.querySelector('.title');
-                title.assign(node);
-                activeContent = panel.querySelector('.content');
-                collectedContents = [];
-            } else {
-                if (activeContent) collectedContents.push(node);
-            }
-        }
-        activeContent && activeContent.assign(...collectedContents);
-    }
-
-    // get selected() {
-    //     return this._selected;
-    // }
-
-    // set selected(index) {
-    //     this._selected = index;
-    //     this._selectTab(index);
-    //     this.setAttribute('selected', index);
-    // }
-    // _selectTab(idx = null) { // todo? merge into `set selected()`?
-    //     [...this.items].forEach((panel, i) => {
-    //         let select = i === idx;
-    //         let trigger = panel.querySelector('.trigger');
-    //         //trigger.setAttribute('tabindex', select ? 0 : -1);
-    //         trigger.setAttribute('aria-expanded', select);
-    //         let content = panel.querySelector('.content');
-    //         content.setAttribute('tabindex', select ? 0 : -1);
-    //         if (select) {
-    //             content.removeAttribute('hidden');
-    //         } else {
-    //             content.setAttribute('hidden', 'until-found');
-    //         }
-    //     });
-    // }
-
-
-    _getTargetTriggerFromEvent(event) {
-        const path = event.composedPath();
-        const rootIndex = path.indexOf(this.shadowRoot);
-        if (rootIndex === -1) return;
-        const target = path[rootIndex - 3];
-        if (!target?.classList.contains('trigger')) return;
-        return target;
-    }
-
-    _focusItem(index) {
-        this.items[index]?.querySelector('.trigger').focus();
-        if (this.getAttribute('single') !== null) {
-            this._toggleItem(index, true);
-        }
-    }
-    _toggleItem(index, expand){
-        const panel = this.items[index];
-        const trigger = panel.querySelector('.trigger');
-        const content = panel.querySelector('.content');
-        expand ??= trigger.getAttribute('aria-expanded') !== 'true';
-        trigger.setAttribute('aria-expanded', expand);
-        content.setAttribute('aria-hidden', !expand);
-        if (expand) {
-            content.removeAttribute('hidden');
-            trigger.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'center'
-            });
-            if (this.getAttribute('single') !== null) {
-                [...this.items].forEach((item, i) => { i !== index && this._toggleItem(i, false); });
-            }
-        } else {
-            content.setAttribute('hidden', 'until-found');
-        }
-    }
-
-    _onClick(e) {
-        if (e.ctrlKey || e.altKey || e.metaKey) return;
-        const trigger = this._getTargetTriggerFromEvent(e);
-        if (!trigger) return;
-        const panel = trigger.parentElement;
-        const index = [...panel.parentElement.children].indexOf(panel);
-        // beta, should not be here but in "_selectTab"?
-        // let event = new CustomEvent('u2-activate', { bubbles: true, cancelable: true });
-        // target.dispatchEvent(event);
-        // if (event.defaultPrevented) return;
-        this._toggleItem(index);
-        trigger.focus();
-    }
-    _onKeyDown(e) {
-        if (e.ctrlKey || e.altKey || e.metaKey) return;
-        const trigger = this._getTargetTriggerFromEvent(e);
-        if (!trigger) return;
-        const panel = trigger.parentElement;
-        const idx = [...panel.parentElement.children].indexOf(panel);
-
-        const actions = {
-            ArrowUp: (idx) => this._focusItem(idx - 1),
-            ArrowDown: (idx) => this._focusItem(idx + 1),
-            Home: () => this._focusItem(0),
-            End: () => this._focusItem(this.items.length - 1),
-            Enter: () => this._toggleItem(idx),
-            Space: () => this._toggleItem(idx),
-        };
-        if (actions[e.code]) {
-            e.preventDefault();
-            actions[e.code](idx);
-        }
-    }
-
-    // static observedAttributes = ['selected'];
-    // attributeChangedCallback(name, oldValue, newValue) {
-    //     if (oldValue === newValue) return;
-    //     if (name === 'selected') this.selected = parseInt(newValue);
-    // }
-
-});
-
-
-// // beta, does not work if initial u2-target is already fired
-// // problem: sometimes, on initial load, the event is fired before the listener is added
-// document.addEventListener('u2-target', e => {
-//     let accordion = document.querySelectorAll('u2-accordion > :target');
-//     for (let tab of accordion) tab.click();
-// });
-
+
+const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+
+export default class U2Accordion extends HTMLElement {
+
+    constructor() {
+        super();
+
+        import('../ico/ico.js');
+
+        let shadowRoot = this.attachShadow({ mode: 'open', slotAssignment: 'manual' });
+        shadowRoot.innerHTML = `
+        <style>
+        @import url('${icoCssUrl}');
+        :host {
+            display:block;
+            gap:.5em;
+            --u2-ico-dir:var(--u2-ico-dir-material);
+        }
+        #items {
+            display:flex;
+            flex-direction:column;
+            gap:inherit;
+        }
+        .trigger {
+            display:flex;
+            align-items:baseline;
+            cursor:pointer;
+            padding-inline:1em;
+            padding-block:.5em;
+            background-color:var(--color-light, #ddd);
+        }
+        .icon {
+            margin-inline-start:auto;
+            display:flex;
+            transition:0.2s;
+            --size:1em;
+            & > u2-ico { --size:inherit; }
+            [aria-expanded="true"] > & { transform:rotate(180deg); }
+        }
+        .title::slotted(*) {
+            margin:0 !important;
+            flex:1 1 auto;
+            font-size: inherit !important;
+        }
+        .wrapper {
+            display:grid;
+            grid-template-rows: 1fr;
+            transition: grid-template-rows .3s ease-in-out;
+            min-block-size:0;
+        }
+        .wrapper[hidden="until-found"] {
+            content-visibility:visible;
+            grid-template-rows: 0fr;
+        }
+        .content {
+            padding:1em;
+            display:flow-root;
+        }
+        </style>
+        <div id=items role=presentation></div>
+        `;
+        this.items = this.shadowRoot.querySelector('#items').children;
+        this._onClick = this._onClick.bind(this);
+        this._onKeyDown = this._onKeyDown.bind(this);
+        this.mutationObserver = new MutationObserver(() => this._build());
+
+    }
+
+    connectedCallback() {
+        this._build();
+        this.shadowRoot.addEventListener('click', this._onClick);
+        this.shadowRoot.addEventListener('keydown', this._onKeyDown);
+        this.mutationObserver.observe(this, { childList: true });
+        // this.shadowRoot.addEventListener("beforematch", e => { // not working in firefox properly
+        //     let item = e.target.closest('[part=item]');
+        //     console.dir(e)
+        //     if (!item) return;
+        //     e.preventDefault();
+        //     this._toggleItem([...item.parentElement.children].indexOf(item));
+        // });
+    }
+
+    disconnectedCallback() {
+        this.shadowRoot.removeEventListener('click', this._onClick);
+        this.shadowRoot.removeEventListener('keydown', this._onKeyDown);
+        this.mutationObserver.disconnect();
+    }
+
+    _build() {
+        const container = this.shadowRoot.querySelector('#items');
+        const icon = this.getAttribute('icon') || 'expand-more';
+
+        let hLevel = 6;
+        for (let node of this.children) { // get highest heading level
+            if (!node.tagName.match(/^H[1-6]$/)) continue;
+            hLevel = Math.min(hLevel, parseInt(node.tagName[1]));
+        }
+
+        let index = -1;
+        let activeContent = null;
+        let collectedContents = [];
+        for (let node of this.childNodes) {
+            if (node.tagName === 'H' + hLevel) {
+                activeContent && activeContent.assign(...collectedContents);
+                index++;
+                let item = container.childNodes[index];
+                if (!item) {
+                    item = document.createElement('div');
+                    item.part = 'item';
+                    item.innerHTML = `
+                        <span class=trigger id=title${index} role=button part=trigger tabindex=0 aria-controls=content${index} aria-expanded=false>
+                            <slot class=title part=title></slot>
+                            <slot class=icon part=icon>
+                                <u2-ico icon=${icon}>▾</u2-ico>
+                            </slot>
+                        </span>
+                        <div class=wrapper part=wrapper id=content${index} role=region hidden=until-found aria-hidden=true aria-labelledby=title${index}>
+                            <div style="overflow:hidden">
+                                <slot class=content part=content></slot>
+                            </div>
+                        </div>
+                    `;
+                    // chrome needs this extra <div style="overflow:hidden">
+                    container.appendChild(item);
+                }
+                const title = item.querySelector('.title');
+                title.assign(node);
+                // todo: added again on every _build(); delegate on the shadow root instead
+                item.querySelector('.trigger').addEventListener("mousedown", e => {
+                    if (e.detail === 2) e.preventDefault(); // Doppelklick
+                });
+                activeContent = item.querySelector('.content');
+                collectedContents = [];
+            } else {
+                if (activeContent) collectedContents.push(node);
+            }
+        }
+        while (container.children.length > index + 1) container.lastChild.remove(); // remove excess items
+        activeContent && activeContent.assign(...collectedContents);
+    }
+
+    _getTargetTriggerFromEvent(event) {
+        const path = event.composedPath();
+        const rootIndex = path.indexOf(this.shadowRoot);
+        if (rootIndex === -1) return;
+        const target = path[rootIndex - 3];
+        if (!target?.classList.contains('trigger')) return;
+        return target;
+    }
+
+    _focusItem(index) {
+        const item = this.items[index];
+        if (!item) return;
+        item.querySelector('.trigger').focus();
+        this.hasAttribute('single') && this._toggleItem(index, true);
+    }
+    _toggleItem(index, expand) {
+        const item = this.items[index];
+        const trigger = item.querySelector('.trigger');
+        const wrapper = item.querySelector('.wrapper');
+        expand ??= trigger.ariaExpanded !== 'true';
+        trigger.ariaExpanded = expand;
+        wrapper.ariaHidden = !expand;
+        wrapper.hidden = expand ? false : 'until-found';
+        if (expand) {
+            trigger.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            });
+            if (this.hasAttribute('single')) {
+                [...this.items].forEach((item, i) => { i !== index && this._toggleItem(i, false); });
+            }
+        }
+    }
+
+    _onClick(e) {
+        if (e.ctrlKey || e.altKey || e.metaKey) return;
+        const trigger = this._getTargetTriggerFromEvent(e);
+        if (!trigger) return;
+        const item = trigger.parentElement;
+        const index = [...item.parentElement.children].indexOf(item);
+        this._toggleItem(index);
+        if (e.target.form !== undefined || e.target.isContentEditable) return;
+        trigger.focus();
+    }
+    _onKeyDown(e) {
+        if (e.ctrlKey || e.altKey || e.metaKey) return;
+        if (e.target.form !== undefined || e.target.isContentEditable) return;
+        const trigger = this._getTargetTriggerFromEvent(e);
+        if (!trigger) return;
+        const item = trigger.parentElement;
+        const idx = [...item.parentElement.children].indexOf(item);
+
+        const actions = {
+            ArrowUp: (idx) => this._focusItem(idx - 1),
+            ArrowDown: (idx) => this._focusItem(idx + 1),
+            Home: () => this._focusItem(0),
+            End: () => this._focusItem(this.items.length - 1),
+            Enter: () => this._toggleItem(idx),
+            Space: () => this._toggleItem(idx),
+        };
+        if (actions[e.code]) {
+            e.preventDefault();
+            actions[e.code](idx);
+        }
+    }
+}
+
+customElements.define('u2-accordion', U2Accordion);

package/el/accordion/manifest.json

@@ -1,57 +1,44 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "accordion.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "accordion",
-                    "members": [
-                    ],
-                    "events": [
-                    ],
-                    "attributes": [
-                        {
-                            "name": "single",
-                            "description": "If true, only one panel can be open at a time and it will be opened by focus",
-                            "u2-type": "boolean"
-                        }
-                    ],
-                    "cssParts": [
-                        {
-                            "name": "trigger",
-                            "description": "The header of the panel"
-                        }, {
-                            "name": "title",
-                            "description": "The title inside the header of the panel"
-                        },{
-                            "name": "icon",
-                            "description": "The icon inside the header of the panel"
-                        },{
-                            "name": "content",
-                            "description": "The content of the panel"
-                        }
-
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-accordion",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-accordion",
-                    "declaration": {
-                        "name": "accordion",
-                        "module": "accordion.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "accordion.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A custom HTML element for creating an accordion component.",
+            "name": "U2Accordion",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "single",
+                "description": "If true, only one panel can be open at a time and it will be opened by focus",
+                "u2-type": "boolean"
+            }],
+            "cssParts": [{
+                "name": "trigger",
+                "description": "The header of the panel"
+            },{
+                "name": "title",
+                "description": "The title inside the header of the panel"
+            },{
+                "name": "icon",
+                "description": "The icon inside the header of the panel"
+            },{
+                "name": "content",
+                "description": "The content of the panel"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-accordion",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-accordion",
+            "declaration": {
+                "name": "U2Accordion",
+                "module": "accordion.js"
+            }
+        }]
+    }]
+}