u2ui 1.0.1 → 1.4.5

package/el/tree1/README.md

@@ -1,111 +0,0 @@
-# <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

@@ -1,78 +0,0 @@
-{
-    "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

@@ -1,134 +0,0 @@
-<!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

@@ -1,51 +0,0 @@
-<!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

@@ -1,44 +0,0 @@
-<!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>

package/el/tree1/tests/test.html

@@ -1,260 +0,0 @@
-<!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>
-                    <u2-tooltip tabindex=-1 style="padding:0">
-                        <table>
-                            <tr>
-                                <td>ID:
-                                <td>22
-                            <tr>
-                                <td>Module:
-                                <td>cms.cont.text
-                            <tr>
-                                <td>Name:
-                                <td>Text
-                        </table>
-                    </u2-tooltip>
-                    Alarm
-                </u2-tree1>
-            </u2-tree1>
-            <u2-tree1 draggable="true">
-                <u2-ico slot=icon icon=drag_indicator>x</u2-ico>
-                <label>
-                    Draggable
-                    <input placeholder="same baseline">
-                </label>
-                <button>clickable</button>
-            </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 aria-expanded=false aria-live=off>
-            Folder 3 (dynamic)
-        </u2-tree1>
-    </u2-tree1>
-
-</section>
-
-<section>
-
-    <u2-code element=demo editable trim> </u2-code>
-
-    <u2-code trim editable>
-    <style class=main>
-    u2-tree1::part(row) {
-        border-radius:.3rem;
-    }
-    u2-tree1:focus::part(row) {
-        outline:.1rem solid var(--color);
-        background:transparent;
-    }
-    u2-tree1[aria-selected=true]::part(row) {
-        background:#00000008;
-    }
-    u2-tree1::part(row):hover {
-        background:#00000004;
-    }
-    u2-tree1[aria-grabbed=true] {
-        transition:.2s .2s;
-        opacity:.4;
-        outline-width:0 !important;
-    }
-    </style>
-    </u2-code>
-
-    <u2-code trim>
-    <script type=module class=main>
-    /* load dynamic items */
-    document.addEventListener('u2-tree1-expand', event => {
-        const treeItem = event.target;
-        
-        // if load is present, it requires a (async) function that loads the items
-        // (indicated by `aria-expanded=false` and `aria-live=off`)
-        //event.load?.(loadItems(treeItem)); zzz
-        event.load?.(loadItems);
-    });
-    const loadItems = async (item) => {
-        await delay(600);
-        item.innerHTML += '<u2-tree1><span slot=icon>🖼</span>Dynamic File 1</u2-tree1>';
-        item.innerHTML += '<u2-tree1><span slot=icon>📄</span>Document</u2-tree1>';
-        item.innerHTML += '<u2-tree1 aria-expanded=false aria-live=off>Folder</u2-tree1>';
-    }
-    </script>
-    </u2-code>
-
-    <script>
-        delay = function(ms) {
-            return new Promise(resolve => setTimeout(resolve, ms));
-        }
-    </script>
-
-</section>
-
-
-
-<script type=module>
-/* drag & drop experiment */
-
-const dropPositionIndicator = document.createElement('div');
-dropPositionIndicator.innerHTML = '➔';
-dropPositionIndicator.style.display = 'none';
-dropPositionIndicator.style.position = 'absolute';
-dropPositionIndicator.style.pointerEvents = 'none';
-dropPositionIndicator.style.zIndex = 1000;
-dropPositionIndicator.style.fontSize = '1.2rem';
-dropPositionIndicator.style.transform = 'translate(0, -50%)';
-document.body.appendChild(dropPositionIndicator);
-
-let dragSrcEl = null;
-
-const dragAndDropHandler = {
-    handleEvent(event) {
-        if (event.type !== 'dragstart' && !dragSrcEl) return;
-        if (!this['on' + event.type]) return
-        const target = event.target;
-        const closest = target.closest('u2-tree1');
-        if (!closest) return;
-        this['on' + event.type]({closest, target, event});
-    },
-    ondragstart({target, event}) {
-        if (target.tagName !== 'U2-TREE1') return;
-        dragSrcEl = target;
-        dragSrcEl.setAttribute('aria-grabbed', 'true'); // deprecated, but currently the best markup?
-        event.dataTransfer.effectAllowed = 'move'; // needed?
-    },
-    ondragover({closest, event}) {
-        event.preventDefault();
-
-        this.currentParent = closest;
-        this.currentNext = null;
-
-        const oHeight = closest.offsetHeight;
-        if (event.offsetY < oHeight * .2) {
-            this.currentParent = closest.parentNode;
-            this.currentNext = closest;
-        }
-        if (event.offsetY > oHeight * .7) {
-            this.currentParent = closest.parentNode;
-            this.currentNext = closest.nextElementSibling;
-        }
-        if (this.currentParent === closest && !this.expandTimer) {
-            this.resetExpandTimer(this.currentParent);
-        }
-
-        // indicator
-        let x = closest.shadowRoot.querySelector('[name=icon]').getBoundingClientRect().left - 50;
-        let y;
-        if (this.currentNext) {
-            y = this.currentNext.offsetTop;
-        } else {
-            y = closest.offsetTop + closest.offsetHeight / 2;
-        }
-        dropPositionIndicator.style.display = 'block';
-        dropPositionIndicator.style.top = y + 'px';
-        dropPositionIndicator.style.left = x + 'px';
-    },
-    ondragleave({closest}) {
-        this.resetExpandTimer();
-        closest.style.borderColor = 'transparent';
-    },
-    ondrop({closest, event}) {
-        event.stopPropagation();
-        event.preventDefault();
-        if (dragSrcEl !== closest) {
-            if (this.currentParent && dragSrcEl !== this.currentNext) {
-                if (this.currentNext) {
-                    this.currentParent.insertBefore(dragSrcEl, this.currentNext);
-                } else {
-                    this.currentParent.appendChild(dragSrcEl);
-                }
-            }
-            closest.toggleExpand(true);
-        }
-        closest.style.border = '';
-    },
-    ondragend() {
-        dropPositionIndicator.style.display = 'none';
-        dragSrcEl.removeAttribute('aria-grabbed');
-        dragSrcEl = null;
-    },
-    resetExpandTimer(item) {
-        clearTimeout(this.expandTimer);
-        this.expandTimer = null;
-        if (item) {
-            this.expandTimer = setTimeout(()=>{
-                this.expandTimer = null;
-                this.currentParent.toggleExpand(true);
-            }, 500);
-        }
-    },
-};
-['dragstart', 'dragover', 'dragenter','dragleave', 'drop', 'dragend'].forEach(eventType => {
-    document.addEventListener(eventType, dragAndDropHandler, false);
-});
-</script>
-