u2ui 1.0.1 → 1.4.6

package/el/input/manifest.json

@@ -0,0 +1,54 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "input.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Enhanced input element with additional functionality",
+            "name": "U2Input",
+            "members": [{
+                "kind": "getter",
+                "name": "value",
+                "description": "Gets the current value of the input"
+            }],
+            "events": [{
+                "name": "update",
+                "description": "Fired when the value changes (only if the name attribute is present)"
+            }],
+            "attributes": [{
+                "name": "type",
+                "description": "The type of input control to display",
+                "u2-type": "string",
+                "u2Examples": ["text", "password", "email", "number"]
+            },{
+                "name": "value",
+                "description": "The current value of the input",
+                "u2-type": "string"
+            }],
+            "slots": [{
+                "name": "start",
+                "description": "Content to display before the input"
+            },{
+                "name": "end",
+                "description": "Content to display after the input"
+            },{
+                "name": "",
+                "description": "Default slot for real-input or fallback-input when JavaScript is disabled"
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-input",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-input",
+            "declaration": {
+                "name": "U2Input",
+                "module": "input.js"
+            }
+        }]
+    }]
+}

package/el/maintitlebar/README.md

@@ -0,0 +1,39 @@
+# <u2-maintitlebar> - element
+Replaces the native browser toolbar in Desktop PWAs.
+
+## Usage
+
+```html
+<u2-maintitlebar>
+    <div class=-title>&lt;u2-maintitlebar&gt; Demo</div>
+    <label>Search <input type=search></label>
+    <button u2-behavior=share style="border:0;background:none;border-radius:0">
+        ➤
+        <u2-tooltip>Share</u2-tooltip>
+    </button>
+</u2-maintitlebar>
+This element replaces the Native Browser Toolbar if installed as Desktop-PWA.
+```
+
+```css
+u2-maintitlebar[hidden] { /* hidden is set by the element itself if not installed as Desktop-PWA */
+    display:flex; /* show it anyway */
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/maintitlebar/maintitlebar.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/maintitlebar/maintitlebar.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/maintitlebar/tests/minimal.html)  
+
+## 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/maintitlebar/maintitlebar.css

@@ -0,0 +1,40 @@
+u2-maintitlebar {
+    display:flex;
+    position: fixed;
+    left: env(titlebar-area-x, 0);
+    top: env(titlebar-area-y, 0);
+    height: env(titlebar-area-height, 50px);
+    width: env(titlebar-area-width, 100%);
+    max-width:100%;
+    background-color: var(--color, canvas);
+    color: var(--color-bg);
+    z-index: 1000;
+    font-size:min(14px, 1rem);
+
+    &[hidden] {
+        display:none;
+    }
+
+    input {
+        padding-block:0;
+    }
+
+    & > * {
+        align-content: center;
+        padding-inline:.6em;
+        line-height:1;
+        &.-title {
+            -webkit-app-region: drag;
+            app-region: drag;
+            flex:1 1 auto;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+    }
+    
+}
+
+html:has(u2-maintitlebar) {
+    padding-top: env(titlebar-area-height, 2em);
+}

package/el/maintitlebar/maintitlebar.js

@@ -0,0 +1,17 @@
+export default class U2Maintitlebar extends HTMLElement {
+    constructor() {
+        super();
+        this._check = this._check.bind(this);
+    }
+    _check() {
+        this.hidden = !navigator.windowControlsOverlay?.visible;
+    }
+    connectedCallback() {
+        this._check();
+        navigator.windowControlsOverlay?.addEventListener('geometrychange', this._check);
+    }
+    disconnectedCallback() {
+        navigator.windowControlsOverlay?.removeEventListener('geometrychange', this._check);
+    }
+}
+customElements.define('u2-maintitlebar', U2Maintitlebar);

package/el/maintitlebar/manifest.json

@@ -0,0 +1,32 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "maintitlebar.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Replaces the native browser toolbar in Desktop PWAs",
+            "name": "U2Maintitlebar",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "hidden",
+                "description": "Set by the element itself when not installed as a Desktop-PWA",
+                "u2-type": "boolean"
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-maintitlebar",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-maintitlebar",
+            "declaration": {
+                "name": "U2Maintitlebar",
+                "module": "maintitlebar.js"
+            }
+        }]
+    }]
+}

package/el/masonry/README.md

@@ -9,40 +9,40 @@ Masonry layout with CSS grid fallback
 ## Usage
 
 ```html
-<u2-masonry style="max-width:19rem; margin:auto; gap:.5rem; --u2-Items-width:4rem;">
-    <div contenteditable>Masonry layout</div>
-    <div contenteditable>item2</div>
-    <div contenteditable>item3</div>
-    <div contenteditable>item4</div>
-    <div contenteditable>item5</div>
-    <div contenteditable>item6</div>
-    <div contenteditable>item7</div>
+<u2-masonry style="max-width:19rem; margin:auto; gap:.5rem; --u2-Items-width:4rem;">
+    <div contenteditable>Masonry layout</div>
+    <div contenteditable>item2</div>
+    <div contenteditable>item3</div>
+    <div contenteditable>item4</div>
+    <div contenteditable>item5</div>
+    <div contenteditable>item6</div>
+    <div contenteditable>item7</div>
 </u2-masonry>
 ```
 
 ```css
-u2-masonry {
-    gap:1rem;
-    column-gap:2rem;
-    --u2-Items-width:8rem;
-}
-u2-masonry > * {
-    border:1px solid black;
-    padding:.5em;
+u2-masonry {
+    gap:1rem;
+    column-gap:2rem;
+    --u2-Items-width:8rem;
+}
+u2-masonry > * {
+    border:1px solid black;
+    padding:.5em;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/masonry/masonry.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/masonry/masonry.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/masonry/masonry.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/masonry/masonry.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/masonry/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/masonry/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/masonry/tests/minimal.html)  
 
 ## About
 

package/el/masonry/manifest.json

@@ -1,60 +1,49 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "masonry.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "Masonry Layout",
-            "name": "u2-masonry",
-            "members": [],
-            "events": [],
-            "attributes": [],
-            "cssProperties": [
-                {
-                    "name": "--u2-Items-width",
-                    "description": "The max-width (if available) of the masonry items",
-                    "syntax": "<length>",
-                    "u2Examples": ["10rem","100px","10%"]
-                },{
-                    "name": "--u2-Gap",
-                    "description": "The gap between the masonry items",
-                    "syntax": "<length>",
-                    "u2Examples": ["1rem","10px","1%"]
-                },{
-                    "name": "--u2-Col-gap",
-                    "description": "The gap between the masonry columns",
-                    "syntax": "<length>",
-                    "u2Examples": ["1rem","10px","1%"]
-                },{
-                    "name": "--u2-Row-gap",
-                    "description": "The gap between the masonry rows",
-                    "syntax": "<length>",
-                    "u2Examples": ["1rem","10px","1%"]
-                }
-            ],
-            "cssParts": [],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-masonry",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-masonry",
-            "declaration": {
-              "name": "u2-masonry",
-              "module": "masonry.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "masonry.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Masonry Layout",
+            "name": "U2Masonry",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--u2-Items-width",
+                "description": "The max-width (if available) of the masonry items",
+                "syntax": "<length>",
+                "u2Examples": ["10rem", "100px", "10%"]
+            },{
+                "name": "--u2-Gap",
+                "description": "The gap between the masonry items",
+                "syntax": "<length>",
+                "u2Examples": ["1rem", "10px", "1%"]
+            },{
+                "name": "--u2-Col-gap",
+                "description": "The gap between the masonry columns",
+                "syntax": "<length>",
+                "u2Examples": ["1rem", "10px", "1%"]
+            },{
+                "name": "--u2-Row-gap",
+                "description": "The gap between the masonry rows",
+                "syntax": "<length>",
+                "u2Examples": ["1rem", "10px", "1%"]
+            }],
+            "cssParts": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-masonry",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-masonry",
+            "declaration": {
+                "name": "U2Masonry",
+                "module": "masonry.js"
+            }
+        }]
+    }]
+}

package/el/masonry/masonry.css

@@ -1,27 +1,27 @@
-u2-masonry {
-    --u2-Items-width: 10rem;
-    --u2-Gap: 1rem;
-    --u2-Col-gap: var(--u2-Gap);
-    --u2-Row-gap: var(--u2-Gap);
-    display: grid;
-    column-gap: var(--u2-Col-gap);
-    row-gap:    var(--u2-Row-gap);
-    position: relative !important; /* items are placed absolute */
-}
-
-u2-masonry > * {
-    position:relative !important;
-    margin:0 !important;
-    box-sizing:border-box !important;
-}
-
-u2-masonry.-Js > * {
-	position: absolute !important;
-}
-
-u2-masonry:not(:defined) {
-    /* grid-template-columns: repeat(auto-fill, minmax( var(--u2-Items-width), 1fr) ); /* min() not supported everywhere? */
-    grid-template-columns: repeat(auto-fill, minmax( min(var(--u2-Items-width), 100%) , 1fr) );
-    /* grid-auto-flow:dense; /* why */
-	grid-template-rows: masonry; /* native css only fallback (firefox, safari?) */
-}
+u2-masonry {
+    --u2-Items-width: 11rem;
+    --u2-Gap: 1rem;
+    --u2-Col-gap: var(--u2-Gap);
+    --u2-Row-gap: var(--u2-Gap);
+    display: grid;
+    column-gap: var(--u2-Col-gap);
+    row-gap:    var(--u2-Row-gap);
+    position: relative !important; /* items are placed absolute */
+}
+
+u2-masonry > * {
+    position:relative !important;
+    margin:0 !important;
+    box-sizing:border-box !important;
+}
+
+u2-masonry.-Js > * {
+	position: absolute !important;
+}
+
+u2-masonry:not(:defined) {
+    /* grid-template-columns: repeat(auto-fill, minmax( var(--u2-Items-width), 1fr) ); /* min() not supported everywhere? */
+    grid-template-columns: repeat(auto-fill, minmax( min(var(--u2-Items-width), 100%) , 1fr) );
+    /* grid-auto-flow:dense; /* why */
+	/* grid-template-rows: masonry; /* native css only fallback (firefox, safari?) */
+}

package/el/masonry/masonry.js

@@ -1,92 +1,93 @@
-
-
-class masonry extends HTMLElement{    
-    constructor(){
-        super();
-        this.classList.add('-Js');
-        this.rObserver = new ResizeObserver(() => this.render());
-    }
-    connectedCallback(){
-        this.render();
-        this.rObserver.observe(this);
-    }
-    disconnectedCallback(){
-        this.rObserver.unobserve(this);
-    }
-    render(){
-        const widthContainer = this.clientWidth;
-        if (!widthContainer) return;
-        let minWidth = cssLengthToPixelsStyle(this, '--u2-Items-width') || 200;
-        const rowGap = cssLengthToPixelsStyle(this, 'row-gap') ?? 0;
-        const columnGap = cssLengthToPixelsStyle(this, 'column-gap') ?? 0;
-
-        minWidth = Math.min(widthContainer, minWidth);
-    
-        const columns = Math.floor((widthContainer + columnGap) / (minWidth + columnGap));
-        const columnWidth = (widthContainer - columnGap * (columns - 1)) / columns;
-        const columnHeights = [];
-        for (let i = 0; i < columns; i++){
-            columnHeights[i] = [i, 0];
-        }
-
-        requestAnimationFrame(() => { // todo: prevent reflow: set all widths first
-            for (const current of this.children){
-                if (current.offsetParent === null) continue;
-                current.style.width = columnWidth + 'px';
-                current.style.left = columnHeights[0][0] * (columnWidth + columnGap) + 'px';
-                current.style.top  = columnHeights[0][1] + 'px';
-                columnHeights[0][1] += current.offsetHeight + rowGap;
-                columnHeights.sort(sortByHeight);
-                this.rObserver.observe(current); // performance ok?
-            }
-            this.style.height = columnHeights[columns - 1][1] - rowGap + 'px';
-        });
-    }    
-}
-
-customElements.define('u2-masonry', masonry);
-
-
-function sortByHeight(a, b){
-    return a[1] - b[1] || a[0] - b[0];
-}
-
-
-/* helper */
-function cssLengthToPixelsStyle(element, property) {
-    const length = getComputedStyle(element).getPropertyValue(property);
-    return cssLengthToPixels(length, element);
-}
-function cssLengthToPixels(length, element) {
-    if (length === undefined) return undefined;
-    length = length.trim();
-    const value = parseFloat(length);
-    const unit = length.match(/\D+$/)[0];
-    switch (unit) {
-        case '':
-        case 'px':
-            return value;
-        case 'em':
-            const fontSize = parseFloat(getComputedStyle(element).fontSize);
-            return value * fontSize;
-        case 'rem':
-            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-            return value * rootFontSize;
-        case '%':
-            const parentSize = parseFloat(getComputedStyle(element.parentNode).width);
-            return (value / 100) * parentSize;
-        case 'vh':
-            return value * (innerHeight / 100);
-        case 'vw':
-            return value * (innerWidth / 100);
-        case 'vmin':
-            return value * (Math.min(innerHeight, innerWidth) / 100);
-        case 'vmax':
-            return value * (Math.max(innerHeight, innerWidth) / 100);
-        case 'pt':
-            return value * 96 / 72;
-        default:
-            console.error('Unsupported length unit:', unit);
-            return NaN;
-    }
-}
+
+
+export default class U2Masonry extends HTMLElement{    
+    constructor(){
+        super();
+        this.classList.add('-Js');
+        this.rObserver = new ResizeObserver(() => this.render());
+    }
+    connectedCallback(){
+        this.render();
+        this.rObserver.observe(this);
+    }
+    disconnectedCallback(){
+        this.rObserver.unobserve(this);
+    }
+    render(){
+        const widthContainer = this.clientWidth;
+        if (!widthContainer) return;
+        let minWidth = cssLengthToPixelsStyle(this, '--u2-Items-width') || 200;
+        const rowGap = cssLengthToPixelsStyle(this, 'row-gap') ?? 0;
+        const columnGap = cssLengthToPixelsStyle(this, 'column-gap') ?? 0;
+
+        minWidth = Math.min(widthContainer, minWidth);
+    
+        const columns = Math.floor((widthContainer + columnGap) / (minWidth + columnGap));
+        const columnWidth = (widthContainer - columnGap * (columns - 1)) / columns;
+        const columnHeights = [];
+        for (let i = 0; i < columns; i++){
+            columnHeights[i] = [i, 0];
+        }
+
+        requestAnimationFrame(() => { // todo: prevent reflow: set all widths first
+            for (const current of this.children){
+                if (current.offsetParent === null) continue;
+                current.style.width = columnWidth + 'px';
+                current.style.left = columnHeights[0][0] * (columnWidth + columnGap) + 'px';
+                current.style.top  = columnHeights[0][1] + 'px';
+                columnHeights[0][1] += current.offsetHeight + rowGap;
+                columnHeights.sort(sortByHeight);
+                this.rObserver.observe(current); // performance ok?
+            }
+            this.style.height = columnHeights[columns - 1][1] - rowGap + 'px';
+        });
+    }    
+}
+
+customElements.define('u2-masonry', U2Masonry);
+
+
+function sortByHeight(a, b){
+    return a[1] - b[1] || a[0] - b[0];
+}
+
+
+/* helper */
+/* todo: similiar code in styler.js (unitToPx) and variable-styler.js */
+function cssLengthToPixelsStyle(element, property) {
+    const length = getComputedStyle(element).getPropertyValue(property);
+    return cssLengthToPixels(length, element);
+}
+function cssLengthToPixels(length, element) {
+    if (length === undefined) return undefined;
+    length = length.trim();
+    const value = parseFloat(length);
+    const unit = length.match(/\D+$/)?.[0] || '';
+    switch (unit) {
+        case '':
+        case 'px':
+            return value;
+        case 'em':
+            const fontSize = parseFloat(getComputedStyle(element).fontSize);
+            return value * fontSize;
+        case 'rem':
+            const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+            return value * rootFontSize;
+        case '%':
+            const parentSize = parseFloat(getComputedStyle(element.parentNode).width);
+            return (value / 100) * parentSize;
+        case 'vh':
+            return value * (innerHeight / 100);
+        case 'vw':
+            return value * (innerWidth / 100);
+        case 'vmin':
+            return value * (Math.min(innerHeight, innerWidth) / 100);
+        case 'vmax':
+            return value * (Math.max(innerHeight, innerWidth) / 100);
+        case 'pt':
+            return value * 96 / 72;
+        default:
+            console.error('Unsupported length unit:', unit);
+            return NaN;
+    }
+}

package/el/menubutton/README.md

@@ -0,0 +1,39 @@
+# <u2-menubutton> - element
+Buttons with options
+
+## Usage
+
+```html
+<u2-menubutton>
+    <button>more...</button>
+    <menu>
+        <li><button>Do this</button>
+        <li><button>Do that other thing</button>
+    </menu>
+</u2-menubutton>
+```
+
+```css
+u2-menubutton menu {
+    box-shadow:var(--shadow);
+    border:none;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/menubutton/menubutton.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/menubutton/menubutton.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/menubutton/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/menubutton/tests/minimal.html)  
+
+## 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. ♥
+