u2ui 1.0.0

package/el/tooltip/tooltip.css

@@ -0,0 +1,97 @@
+/* Currently, we cannot animate "hide" as after hidePopover() it might not be top-layer, potentially disrupting layouts. */
+u2-tooltip {
+    /* relevant */
+    opacity: 0;
+    visibility:hidden;
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    z-index: 9999;
+    transition-property:opacity, visibility;
+
+    /* hide transition */
+    transition-duration:400ms;
+    transition-delay: 10ms;
+
+    /* customisable */
+    pointer-events: none;
+    padding: .5em .7em;
+    max-width:14rem;
+    background: Canvas;
+    color: CanvasText;
+
+    /* style */
+    font-size:max(12px, .7rem);
+    border-radius:.8em;
+    background: var(--color-text, CanvasText);
+    color: var(--color-bg, Canvas);
+    border:1px solid var(--color-text, CanvasText);
+
+
+    /* popover */
+    margin: 0;
+    overflow: visible;
+    /* display: block; bad, as it is not top-layer */
+    /* */
+}
+
+u2-tooltip[tabindex="-1"] {
+    pointer-events:auto;
+}
+
+u2-tooltip:is(:focus-within, :hover, [open]) { /* :popover-open will not animate */
+    /* show transition */
+    transition-duration:250ms;
+    transition-delay: 160ms;
+    visibility:visible;
+    opacity: 1;
+}
+
+
+/* css only fallback */
+u2-tooltip:not(:defined):not([id]) {
+    :hover > &,
+    :focus > & {
+        left:auto;
+        top:auto;
+        margin: 2rem 0;
+        visibility:visible;
+        opacity: 1;
+    }
+}
+/* */
+
+
+/* arrow:
+u2-tooltip::after {
+    --size:1em;
+    content: "";
+    position:absolute;
+    transform:rotate(45deg);
+    width:var(--size);
+    height:var(--size);
+    background-color: inherit;
+    margin:auto;
+    z-index:-1;
+}
+u2-tooltip[\:position-x="after"]::after {
+    left:calc( var(--size) * -.5);
+}
+u2-tooltip[\:position-x="before"]::after {
+    right:calc( var(--size) * -.5);
+}
+u2-tooltip[\:position-x="center"]::after {
+    right:0;
+    left:0;
+}
+u2-tooltip[\:position-y="after"]::after {
+    top:calc( var(--size) * -.5);
+}
+u2-tooltip[\:position-y="before"]::after {
+    bottom:calc( var(--size) * -.5);
+}
+u2-tooltip[\:position-y="center"]::after {
+    top:0;
+    bottom:0;
+}
+*/

package/el/tooltip/tooltip.js

@@ -0,0 +1,82 @@
+import {Placer} from '../../js/Placer/Placer.js';
+
+let idCounter = 0;
+
+customElements.define('u2-tooltip', class extends HTMLElement {
+    constructor() {
+        super();
+        this.placer = new Placer(this, { x:'center', y:'after', margin:20 });
+    }
+    connectedCallback() {
+        if (!this.id) { // if no id is set, set one an make it the tooltip for its parent
+            this.id = 'u2-tooltip-' + idCounter++;
+            this.parentNode.setAttribute('aria-labelledby', this.id);
+        }
+        this.setAttribute('role', 'tooltip');
+        this.setAttribute('popover','auto');
+    }
+    _showFor(el){
+        let event = new CustomEvent('u2-tooltip-show', {bubbles: true, cancelable: true, detail: {tooltip: this} });
+        el.dispatchEvent(event);
+        if (event.defaultPrevented) return;
+
+        let sEvent = new CustomEvent('u2-show', {bubbles: true, cancelable: true, detail: {target: el} });
+        this.dispatchEvent(sEvent);
+        if (event.defaultPrevented) return;
+
+        return this.showFor(el);
+    }
+    showFor(el){
+        clearTimeout(this.hideTimeout);
+        setTimeout(()=>this.setAttribute('open',''),0); // to make sure the css transition is triggered
+        this.showPopover();
+        this.placer.toElement(el);
+        this.setAttribute(':position-x', this.placer.positionX);
+        this.setAttribute(':position-y', this.placer.positionY);
+    }
+    hide(){
+        this.removeAttribute('open');
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = setTimeout(()=>this.hidePopover(),400); // wait for the css transition to finish
+    }
+    attributeChangedCallback(name, old, value) {
+        if (name === 'position') {
+            if (value === 'top')    this.placer.setOptions({y:'before',x:'center'});
+            if (value === 'bottom') this.placer.setOptions({y:'after',x:'center'});
+            if (value === 'left')   this.placer.setOptions({y:'center',x:'before'});
+            if (value === 'right')  this.placer.setOptions({y:'center',x:'after'});
+        }
+    }
+    static observedAttributes = ['position'];
+});
+
+
+document.addEventListener('mouseenter',function(e){
+    if (e.target.shadowRoot) {
+        e.target.shadowRoot.addEventListener('mouseenter',checkOn,true);
+        e.target.shadowRoot.addEventListener('mouseleave',checkOff,true);
+    }
+},true);
+
+
+document.addEventListener('mouseenter',checkOn,true); // on document: chrome
+addEventListener('focusin',checkOn,true);
+document.addEventListener('mouseleave',checkOff,true);
+addEventListener('focusout',checkOff,true);
+
+
+function checkOn(e){
+    // todo: composedPath() for shadowdom? console.log(e.composedPath())
+    getTooltipForElement(e.target)?._showFor(e.target);
+}
+function checkOff(e){
+    getTooltipForElement(e.target)?.hide();
+}
+function getTooltipForElement(el) {
+    if (!el.getAttribute) return; // if document
+    const id = el.getAttribute('aria-labelledby') || el.getAttribute('aria-describedby');
+    if (!id) return;
+    const tooltip = document.getElementById(id);
+    if (!tooltip || tooltip.tagName !== 'U2-TOOLTIP') return;
+    return tooltip;
+}

package/el/tree1/README.md

@@ -0,0 +1,111 @@
+# <u2-tree1> - element
+Treeview component
+
+## Features
+
+- Keyboard navigation
+- Focus on the next item that starts with the pressed key
+- Expand/collapse events
+- Lazy loading of children
+
+## Usage
+
+```html
+<div style="height:100%">
+    <u2-tree1 aria-expanded=true>root
+        <u2-tree1>Folder 1
+            <u2-tree1>File 1.1</u2-tree1>
+        </u2-tree1>
+        <u2-tree1 aria-expanded="true">Folder 3
+            <u2-tree1>File 3.1</u2-tree1>
+            <u2-tree1>File 3.2</u2-tree1>
+        </u2-tree1>
+    </u2-tree1>
+</div>
+```
+
+```css
+u2-tree1::part(row):hover {
+    background:#00000004;
+}
+u2-tree1[aria-selected=true]::part(row) {
+    background:#00000008;
+}
+u2-tree1::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
+```
+
+### Attributes
+
+#### aria-expanded
+This will initialy expand the tree:
+```<u2-tree1 aria-expanded="true">...</u2-tree1>```
+
+This is either not expandable or like aria-expanded="false" if it has children.
+`<u2-tree1></u2-tree1>
+
+#### aria-live
+`<u2-tree1 aria-live></u2-tree1>`
+This indicates, that the node has to be loaded.  
+The `u2-tree1-collapse` event will get a property `event.load(asyncFn)` to load their children.
+
+### Events
+
+#### expand / collapse
+```js
+treeElement.addEventListener('u2-tree1-expand', (e) => {
+    e.load && e.load(promise);
+});
+treeElement.addEventListener('u2-tree1-collapse', (e) => {...});
+```
+
+#### select
+```js
+treeElement.addEventListener('u2-tree1-select', (e) => { ... });
+```
+
+### CSS
+
+| Selector | Description |
+|:----|:-----|
+| u2-tree1::part(row) | The row of the tree-item |
+| u2-tree1[aria-selected=true] | Item when selected |
+| u2-tree1:focus | Item has focus |
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tree1/tree1.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tree1/tree1.min.js" type=module async></script>
+```
+
+## Demos
+
+[animated.html](http://gcdn.li/u2ui/u2@main/el/tree1/tests/animated.html)  
+[custom.html](http://gcdn.li/u2ui/u2@main/el/tree1/tests/custom.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/tree1/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/tree1/tests/test.html)  
+
+## Todo
+
+Ask me if you need it!
+- Add support for multiple selection
+- Drag and drop
+
+## 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/tree1/manifest.json

@@ -0,0 +1,78 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "tree.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "tree",
+                    "members": [],
+                    "events": [
+                        {
+                            "name": "u2-tree1-expand",
+                            "type": {
+                                "text": "Event"
+                            }
+                        },
+                        {
+                            "name": "u2-tree1-collapse",
+                            "type": {
+                                "text": "Event"
+                            }
+                        },
+                        {
+                            "name": "u2-tree1-select",
+                            "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": "tree",
+                        "module": "tree.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/tree1/tests/animated.html

@@ -0,0 +1,134 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <title>Test</title>
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+    <!-- <script src="../../u2/auto.js" type=module async></script> -->
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <script src="../../../el/code/code.js" type=module async></script>
+    <link  href="../../../el/code/code.css" rel=stylesheet>
+    <script src="../../../el/tooltip/tooltip.js" type=module async></script>
+    <link  href="../../../el/tooltip/tooltip.css" rel=stylesheet>
+    <script src="../../../el/ico/ico.js" type=module async></script>
+    <link  href="../../../el/ico/ico.css" rel=stylesheet>
+
+    <style>
+        body {
+            place-content: initial;
+            --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+        }
+    </style>
+
+    <script src="../tree1.js" type=module async></script>
+    <link href="../tree1.css" rel=stylesheet>
+
+<body>
+
+<section id=demo class=main>
+    
+    <u2-tree1 aria-expanded=true>root
+        <u2-tree1 aria-expanded=true>Folder 2
+
+            <u2-tree1>File 2.1</u2-tree1>
+            <u2-tree1>Folder 2.2
+                <u2-tree1>
+                    <u2-ico slot=icon icon=home>x</u2-ico>
+                    Home
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=star>x</u2-ico>
+                    Star
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=search>x</u2-ico>
+                    Search
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=accessible>x</u2-ico>
+                    Accessible
+                </u2-tree1>
+                <u2-tree1>
+                    <u2-ico slot=icon icon=alarm>x</u2-ico>
+                    Alarm
+                </u2-tree1>
+            </u2-tree1>
+
+            <u2-tree1>
+                <input type=checkbox slot=icon id="check1">
+                Checkbox
+                <u2-tree1>
+                    <input type=checkbox slot=icon id="check2">
+                    Checkbox
+                </u2-tree1>
+                <u2-tree1>
+                    <input type=checkbox slot=icon id="check3">
+                    Checkbox
+                </u2-tree1>
+            </u2-tree1>
+
+        </u2-tree1>
+
+    </u2-tree1>
+
+</section>
+
+<u2-code trim>
+    <script type=module class=main>
+    document.addEventListener('u2-tree1-expand', event => {
+        const childrenEl = event.target.shadowRoot.querySelector('[part=children]');
+        childrenEl.style.setProperty('--js-scroll-height', childrenEl.scrollHeight + 'px');
+    });
+    </script>
+</u2-code>
+
+<u2-code editable trim>
+<style class="main">
+    @keyframes u2-children-open {
+        0% {
+            max-height:0;
+            overflow:hidden;
+        }
+        99.9% {
+            max-height:calc(var(--js-scroll-height, 100vh) + 3rem);
+            overflow:hidden;
+        }
+        100% {
+            max-height:none;
+            overflow:visible;
+        }
+    }
+    @keyframes u2-children-close {
+        0% {
+            max-height:none;
+            overflow:visible;
+        }
+        0.1% {
+            max-height:calc(var(--js-scroll-height, 100vh) + 3rem);
+            overflow:hidden;
+        }
+        100% {
+            max-height:0;
+            overflow:hidden;
+        }
+    }
+    u2-tree1::part(children) {
+        display:block;
+        max-height:0;
+        overflow:hidden;
+        animation: u2-children-close .2s;
+    }
+    u2-tree1[aria-expanded=true]::part(children) {
+        max-height:none;
+        overflow:visible;
+        animation: u2-children-open .3s;
+    }
+</style>
+</u2-code>
+
+
+

package/el/tree1/tests/custom.html

@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+    <title>Test</title>
+
+    <script src="../../u2/auto.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/base/full.css">
+    <link rel=stylesheet href="../../../css/classless/variables.css">
+    <link rel=stylesheet href="../../../css/classless/classless.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <style>
+    body {
+        place-content: initial;
+        --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
+    }
+    </style>
+
+    <link rel=stylesheet href="../tree1.css">
+
+    <script type=module>
+        import {tree} from '../tree1.js';
+        customElements.define('u2-tree2', class extends tree {});
+    </script>
+
+<body>
+
+<section>
+
+    <style>
+    u2-tree2::part(row):focus {
+        outline:1px dotted black;
+    }
+    u2-tree2[aria-selected=true]::part(row) {
+        background:#00000008;
+    }
+    </style>
+
+
+    <u2-tree2 aria-expanded=true>root
+        <u2-tree2>Folder 2
+            <u2-tree2>File 2.1</u2-tree2>
+            <u2-tree2>File 2.2</u2-tree2>
+        </u2-tree2>
+    </u2-tree2>
+
+</section>

package/el/tree1/tests/minimal.html

@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset="utf-8">
+    <meta name=viewport content="width=device-width">
+    <script src="../../../u2/tests/test-init.js" type=module async></script>
+
+    <link rel=stylesheet href="../../../css/classless/full.css">
+    <link rel=stylesheet href="../../../css/classless/aria.css">
+    <link rel=stylesheet href="../../../css/classless/simple.css">
+
+    <script src="../tree1.js" type=module async></script>
+    <link rel=stylesheet href="../tree1.css">
+
+<body>
+
+<section class=main>
+
+    <div style="height:100%">
+        <u2-tree1 aria-expanded=true>root
+            <u2-tree1>Folder 1
+                <u2-tree1>File 1.1</u2-tree1>
+            </u2-tree1>
+            <u2-tree1 aria-expanded="true">Folder 3
+                <u2-tree1>File 3.1</u2-tree1>
+                <u2-tree1>File 3.2</u2-tree1>
+            </u2-tree1>
+        </u2-tree1>
+    </div>
+
+</section>
+
+
+<style class=main>
+    u2-tree1::part(row):hover {
+        background:#00000004;
+    }
+    u2-tree1[aria-selected=true]::part(row) {
+        background:#00000008;
+    }
+    u2-tree1::part(row):focus {
+        outline:1px dotted;
+    }
+</style>