u2ui 1.0.1 → 1.4.5

package/el/tree/README.md

@@ -0,0 +1,133 @@
+# <u2-tree> - element
+Treeview component `<u2-tree>Folder <u2-tree>File</u2-tree> </u2-tree>`
+
+## Features
+
+- Keyboard navigation
+- Focus on the next item that starts with the pressed key
+- Expand/collapse events
+- Lazy loading of children
+- Drag and drop (opt-in, loaded on demand via the `draggable` attribute)
+
+## Usage
+
+```html
+<u2-tree aria-expanded=true>root
+    <u2-tree>Folder 1
+        <u2-tree>File 1.1</u2-tree>
+    </u2-tree>
+    <u2-tree aria-expanded="true">Folder 3
+        <u2-tree>File 3.1</u2-tree>
+        <u2-tree>File 3.2</u2-tree>
+    </u2-tree>
+</u2-tree>
+```
+
+```css
+u2-tree::part(row):hover {
+    background:#00000004;
+}
+u2-tree[aria-selected=true]::part(row) {
+    background:#00000008;
+}
+u2-tree::part(row):focus {
+    outline:1px dotted;
+}
+```
+
+## API
+
+### Javascript
+
+```js
+el.select(); // selects the element
+el.toggleExpand(true/false/undefined); // undefined toggles
+el.path(); // returns path to element
+el.root(); // returns root element of the tree-item
+el.next(); // next sibling treeitem (skips slotted icon/label)
+el.prev(); // previous sibling treeitem
+```
+
+### Keyboard
+
+Expand/collapse is on the arrow keys (WAI-ARIA tree pattern): `ArrowRight` expands,
+`ArrowLeft` collapses. `Enter` and `Space` just select the focused node.
+
+### Attributes
+
+#### aria-expanded
+This will initialy expand the tree:
+```<u2-tree aria-expanded="true">...</u2-tree>```
+
+This is either not expandable or like aria-expanded="false" if it has children.
+`<u2-tree></u2-tree>
+
+#### aria-live
+`<u2-tree aria-live></u2-tree>`
+This indicates, that the node has to be loaded.  
+The `u2-tree-collapse` event will get a property `event.load(asyncFn)` to load their children.
+
+### Events
+
+#### expand / collapse
+```js
+treeElement.addEventListener('u2-tree-expand', (e) => {
+    e.load && e.load(promise);
+});
+treeElement.addEventListener('u2-tree-collapse', (e) => {...});
+```
+
+#### select
+```js
+treeElement.addEventListener('u2-tree-select', (e) => { ... });
+```
+
+#### drag and drop
+Set `draggable` on the nodes you want movable — this loads the DnD extension on demand.
+Two cancelable events fire with `detail = { source, parent, next, region }` (`region`: `before` | `after` | `into`):
+```js
+// decide where dropping is allowed; preventDefault() forbids it (hides the marker)
+treeElement.addEventListener('u2-tree-dragover', (e) => {
+    if (notAllowed(e.detail)) e.preventDefault();
+});
+// commit on release; preventDefault() to move it yourself (e.g. server-first)
+treeElement.addEventListener('u2-tree-drop', (e) => {
+    e.preventDefault();
+    save(e.detail).then(() => e.detail.parent.insertBefore(e.detail.source, e.detail.next));
+});
+```
+
+### CSS
+
+| Selector | Description |
+|:----|:-----|
+| u2-tree::part(row) | The row of the tree-item |
+| u2-tree[aria-selected=true] | Item when selected |
+| u2-tree:focus | Item has focus |
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tree/tree.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/tree/tree.js" type=module async></script>
+```
+
+## Demos
+
+[dnd-shadow.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/dnd-shadow.html)  
+[custom.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/custom.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/test.html)  
+[animated.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/animated.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/minimal.html)  
+[dnd.html](http://gcdn.li/u2ui/u2@main/el/tree/tests/dnd.html)  
+
+## Todo
+
+Ask me if you need it!
+- Add support for multiple selection
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/el/tree/ext/dnd.js

@@ -0,0 +1,53 @@
+// u2-tree DnD — minimal. Drag state from js/drag/drag.js, marker from js/drag/indicateDrop.js.
+// Draggable via the `draggable` HTML attribute. Region (before/after/into) from the pointer Y.
+// Two events, detail {source, parent, next, region}:
+//   u2-tree-dragover  decides WHETHER a drop is allowed here. preventDefault() = forbid (hides marker, no drop).
+//   u2-tree-drop      commit on release. preventDefault() = app moves it itself (e.g. server-first) instead of auto-move.
+import { dragged } from '../../../js/drag/drag.js';
+import { indicateDrop } from '../../../js/drag/indicateDrop.js';
+
+let over = null, region = '', allowed = true, expandTimer;
+const clear = () => (clearTimeout(expandTimer), indicateDrop(null), over = null, region = '');
+
+const place = (target, reg) => reg === 'into'
+    ? { parent: target, next: null }
+    : { parent: target.parentNode, next: reg === 'before' ? target : target.nextElementSibling };
+
+const ask = (type, target) => target.dispatchEvent(new CustomEvent(type, {
+    bubbles: true, cancelable: true,
+    detail: { source: dragged, ...place(target, region), region },
+}));
+
+document.addEventListener('dragover', e => {
+    if (!dragged) return;
+    // composedPath() durchquert Shadow-Grenzen; e.target wäre auf den Shadow-Host retargetiert.
+    const target = e.composedPath().find(n => n.localName === dragged.localName);
+    if (!target || dragged.contains(target)) return clear();
+    const row = target.shadowRoot.querySelector('[part=row]');
+    const r = row.getBoundingClientRect();
+    const rel = (e.clientY - r.top) / r.height;
+    const reg = rel < .25 ? 'before' : rel > .75 ? 'after' : 'into';
+
+    if (target !== over || reg !== region) {
+        over = target; region = reg;
+        allowed = ask('u2-tree-dragover', target);
+        clearTimeout(expandTimer);
+        if (reg === 'into')
+            expandTimer = setTimeout(() => target.isExpanded() || target.toggleExpand(true), allowed ? 650 : 1300);
+    }
+    if (!allowed) return indicateDrop(null);
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    indicateDrop(region, row, { box: 'content' });
+});
+
+document.addEventListener('drop', () => {
+    if (over && allowed && ask('u2-tree-drop', over)) {
+        const { parent, next } = place(over, region);
+        parent.insertBefore(dragged, next);
+        region === 'into' && parent.toggleExpand?.(true);
+    }
+    clear();
+});
+
+document.addEventListener('dragend', clear);

package/el/tree/ext/item.js

@@ -0,0 +1,35 @@
+/**
+ * Item.js integration for u2-tree
+ * This module is loaded on-demand when tree.itemjs is set
+ */
+export async function applyItemjs(treeElement, item, { render = null } = {}) {
+    if (!item) return;
+    treeElement.textContent = item.key || '';
+    syncTreeItem(treeElement, item, render);
+    item.addEventListener('changeIn', ({add, remove}) => {
+        if (add || remove) syncTreeItem(treeElement, item, render);
+    });
+}
+
+function createTreeItem(item, render) {
+    const treeItem = document.createElement('u2-tree');
+    treeItem.dataset.key = item.key || '';
+    treeItem.textContent = item.key || '';
+    render?.(treeItem, item);
+    return treeItem;
+}
+
+function syncTreeItem(treeElement, item, render) {
+    const subItems = item.items() ?? [];
+    const subItemKeys = new Set(subItems.map(i => i.key));
+
+    // remove stale children
+    [...treeElement.querySelectorAll(':scope > u2-tree')]
+        .forEach(child => !subItemKeys.has(child.dataset.key) && child.remove());
+
+    // add new & sync all
+    subItems.forEach(subItem => {
+        const child = treeElement.querySelector(`:scope > u2-tree[data-key="${subItem.key}"]`) ?? treeElement.appendChild(createTreeItem(subItem, render));
+        syncTreeItem(child, subItem, render);
+    });
+}

package/el/tree/manifest.json

@@ -0,0 +1,61 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "tree.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Tree",
+            "members": [],
+            "events": [{
+                "name": "u2-tree-expand",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-tree-collapse",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-tree-select",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-tree-dragover",
+                "type": { "text": "Event" }
+            },{
+                "name": "u2-tree-drop",
+                "type": { "text": "Event" }
+            }],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--indent",
+                "syntax": "<length>",
+                "description": "The indentation of the tree items"
+            }],
+            "cssParts": [{
+                "name": "row",
+                "description": "The Item of the tree"
+            },{
+                "name": "content",
+                "description": "The content of the tree mainly the text. Its display:contents by default!"
+            },{
+                "name": "children",
+                "description": "The children of the tree. Its display:contents by default!"
+            }],
+            "slots": [{
+                "name": "icon",
+                "description": "The icon of the tree item"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-tree",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-tree",
+            "declaration": {
+                "name": "U2Tree",
+                "module": "tree.js"
+            }
+        }]
+    }]
+}

package/el/tree/tree.css

@@ -0,0 +1,18 @@
+u2-tree { display:block; }
+u2-tree::part(row) {
+    white-space: nowrap;
+    cursor:pointer;
+}
+u2-tree::part(row):focus { outline:1px dotted black; }
+u2-tree[aria-selected=true]::part(row) { background:#00000008; }
+u2-tree[draggable]::part(row) { cursor:grab; }
+u2-tree.\:dragging { opacity:.3; }  /* class set by js/drag/drag.js on the drag source */
+
+u2-tree:not(:defined) {
+    padding-block-start:.2em;
+    display:list-item;
+    list-style-position: inside;
+    > u2-tree {
+        padding-inline-start:1.2em;
+    }
+}

package/el/tree/tree.js

@@ -0,0 +1,236 @@
+let css = `
+:host { display:block; }
+:host([role=tree]) { --indent:1rem; }
+:host(:not([aria-expanded=true])) [part=children] { display:none; }
+:host([aria-expanded=true]) .arrow::after { content:'▾' }
+:host(:not([aria-expanded])) .arrow { opacity:0; }
+:host([aria-expanded=true][aria-busy=true]) .arrow::after {
+    content:'◠'; /* ◝↻⭮⍉🔾◠◡◕◖◝ */
+    font-weight:bold;
+    animation: spinner .5s linear infinite;
+    line-height:1;
+    font-size:.8em;
+}
+[part=row] {
+    display: flex;
+    align-items: center;
+    padding-inline-start: calc( var(--indent) * (var(--level) - 1) );
+    min-height: 1.8em;
+    gap: .3em;
+}
+.arrow {
+    font-weight:normal !important;
+    min-width:1.1em;
+    text-align:center;
+}
+.arrow::after { content:'▸'; display:inline-block; }
+@keyframes spinner { to { transform:rotate(360deg) } }
+[name=icon] {
+    display:flex;
+    align-items: center;
+    justify-content:center;
+    min-inline-size:1.7em;
+    font-weight:400;
+    align-self:stretch;
+}
+`;
+const styleSheet = new CSSStyleSheet();
+styleSheet.replaceSync(css);
+
+
+export default class U2Tree extends HTMLElement {
+
+    static observedAttributes = ['draggable'];
+    attributeChangedCallback() { U2Tree.dnd ??= import('./ext/dnd.js'); }  // load DnD lazily once draggable appears
+
+    constructor() {
+        super();
+        const shadow = this.attachShadow({mode: 'open', delegatesFocus: true});
+        shadow.adoptedStyleSheets = [styleSheet];
+        shadow.innerHTML = `
+        <div part=row tabindex=-1>
+            <span class=arrow></span>
+            <slot name=icon part=icon>📁</slot>
+            <slot part=content></slot>
+        </div>
+        <slot part=children name=children role=group></slot>`
+
+        this.row = shadow.querySelector('[part=row]');
+
+        this.addEventListener('click',e=>{
+            if (e.target !== this) return;
+            if (!getSelection()?.isCollapsed) return;
+            this.toggleExpand();
+            this.activeElement = this;
+            this._select();
+        });
+        this.addEventListener('keydown',e=>{
+            if (e.target !== this) return;
+            let fn = {
+                ArrowUp:    ()=> this.prevFocusable()?.setFocus?.(),
+                ArrowDown:  ()=> this.nextFocusable()?.setFocus(),
+                ArrowRight: ()=> !this.isExpanded() ? this.toggleExpand(true) : this.nextFocusable()?.setFocus(),
+                ArrowLeft:  ()=> this.isExpanded() ? this.toggleExpand(false) : this.parentNode.setFocus?.(),
+                Enter:      ()=> this._select(), // expand/collapse is on Arrow keys (WAI-ARIA); Enter just selects
+                ' ':        ()=> this._select(),
+                Home:       ()=> this.root().setFocus(),
+            }[e.key];
+            // focus next where text starts with the key pressed
+            const isChar = /^.$/u.test(e.key);
+            if (isChar) {
+                let current = this.nextFocusable() || this.root();
+                while (current && current !== this) {
+                    let text = current.shadowRoot.querySelector('[part=content]').assignedNodes().map(item=>item.textContent).join(' ').trim().toLowerCase();
+                    if (text.startsWith(e.key)) {
+                        current.setFocus();
+                        break;
+                    }
+                    current = current.nextFocusable() || this.root();
+                }
+            }
+            if (fn) { fn(); e.preventDefault(); }
+        });
+
+        this.addEventListener('mousedown', e => e.detail >= 2 && e.preventDefault() );  // prevent dbl-click selection
+
+        this.childrenObserver = new MutationObserver(mutations => this._markup())
+
+    }
+    connectedCallback() {
+        this.childrenObserver.observe(this, {childList: true});
+        this._markup();
+    }
+    disconnectedCallback() {
+        this.childrenObserver.disconnect();
+    }
+    _markup(){
+        // own level
+        const root = this.root();
+        const myLevel = root === this ? 1 : parseInt(this.parentNode.getAttribute('aria-level')) + 1;
+        this.ariaLevel = myLevel; // todo: internals?
+        this.style.setProperty('--level', myLevel);
+
+        // slot subnodes
+        for (const child of this.children) {
+            child.tagName === this.tagName && child.setAttribute('slot', 'children');
+        }
+        this.role = root === this ? 'tree' : 'treeitem';
+
+        // make it selectable if its the root and no other is selected
+        if (root === this && !root._activeElement) this.row.tabIndex = 0;
+
+        // if (this.getAttribute('icon')) {
+        //     this.shadowRoot.querySelector('[part=icon]').innerHTML = '<u2-ico inline icon="' + this.getAttribute('icon') + '"></u2-ico>';
+        // }
+
+        // expandability follows children; lazy nodes (aria-live) keep the arrow despite 0 children
+        if (!this.ariaLive) {
+            this.items().length
+                ? this.hasAttribute('aria-expanded') || this.setAttribute('aria-expanded', 'false')
+                : this.removeAttribute('aria-expanded');
+        }
+    }
+    items(){
+        return this.shadowRoot.querySelector('[part=children]').assignedElements();
+    }
+    next(){ // next sibling treeitem (skips slotted icon/label)
+        let n = this.nextElementSibling;
+        while (n && n.tagName !== this.tagName) n = n.nextElementSibling;
+        return n;
+    }
+    prev(){ // previous sibling treeitem (skips slotted icon/label)
+        let n = this.previousElementSibling;
+        while (n && n.tagName !== this.tagName) n = n.previousElementSibling;
+        return n;
+    }
+    nextFocusable(){ // next visible row: first child, else next item, else nearest ancestor's next item
+        if (this.isExpanded() && this.items().length) return this.items()[0];
+        let item = this;
+        while (item?.tagName === this.tagName) {
+            const next = item.next();
+            if (next) return next;
+            item = item.parentNode;
+        }
+        return null;
+    }
+    prevFocusable(){ // previous visible row: previous item (its last child if expanded), else parent
+        let prev = this.prev();
+        if (prev?.isExpanded()) prev = prev.items().at(-1);
+        return prev || this.parentNode;
+    }
+    isExpanded() {
+        return this.ariaExpanded === 'true';
+    }
+    isExpandable() {
+        const attr = this.ariaExpanded;
+        return attr === 'true' || attr === 'false' || this.items().length;
+    }
+    toggleExpand(doit) {
+        if (!this.isExpandable()) return;
+        doit ??= !this.isExpanded();
+
+        const event = new CustomEvent(doit?'u2-tree-expand':'u2-tree-collapse', {bubbles: true});
+
+        if (this.ariaLive && this.ariaBusy !== 'true') {
+
+            event.load = callback=>{
+                const promise = callback(this);
+                this.ariaBusy = true;
+                promise.then(data => {
+                    this.ariaLive = null;
+                    this.ariaBusy = null;
+                    setTimeout(()=>{ // make unexpandable if no children
+                        !this.items().length && this.removeAttribute('aria-expanded');
+                    },100);
+                }).catch(data=>{
+                    this.ariaBusy = null; // allow retry
+                    console.warn('todo: u2-tree: failed to load', data);
+                });
+            }
+
+        }
+        this.dispatchEvent(event);
+        this.ariaExpanded = doit?'true':'false';
+    }
+
+    select(){
+        let old = this.root()._selected;
+        if (old) old.ariaSelected = false;
+        this.ariaSelected = true;
+        this.root()._selected = this;
+    }
+    _select(){ // like selected but also fires event
+        const event = new CustomEvent('u2-tree-select', {bubbles: true});
+        this.dispatchEvent(event);
+        this.select();
+    }
+
+    get activeElement(){
+        return this.root()._activeElement;
+    }
+    set activeElement(el){
+        const old = this.root()._activeElement;
+        if (old) old.row.tabIndex = -1;
+        el.row.tabIndex = 0;
+        el.row.focus();
+        this.root()._activeElement = el;
+    }
+    setFocus() {
+        this.activeElement = this;
+    }
+    root(){
+        return this.isRoot() ? this : this.parentNode.root();
+    }
+    isRoot(){
+        return this.parentNode?.tagName !== this.tagName;
+    }
+    path(){
+        return this.isRoot() ? [this] : this.parentNode.path().concat(this);
+    }
+
+    bindItem(item,options={}) {
+        import('./ext/item.js').then(({applyItemjs}) => applyItemjs(this, item, options));
+    }
+}
+
+customElements.define('u2-tree', U2Tree);

package/el/typewriter/README.md

@@ -4,17 +4,17 @@ Simple typewriter element
 ## Usage
 
 ```html
-<h2>
-    <u2-typewriter autoplay loop>Typewriter</h2></u2-typewriter>
-</h2>
+<h4>
+    <u2-typewriter autoplay loop>Typewriter</u2-typewriter>
+</h4>
 ```
 
 ```css
-u2-typewriter {
-    --u2-typewriter-speed:100;
-}
-u2-typewriter h2 .-Caret {
-    color:hotpink;
+u2-typewriter {
+    --u2-typewriter-speed:100;
+}
+u2-typewriter h2 .-Caret {
+    color:hotpink;
 }
 ```
 
@@ -46,14 +46,14 @@ u2-typewriter .-Caret { ... } /* the caret (It moves and is in the active char e
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/typewriter/typewriter.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/typewriter/typewriter.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/typewriter/typewriter.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/typewriter/typewriter.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/typewriter/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/typewriter/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/typewriter/tests/minimal.html)  
 
 ## About