u2ui 1.0.0

package/el/number/manifest.json

@@ -0,0 +1,121 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "number.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "Displays formatted numbers",
+            "name": "u2-number",
+            "members": [
+                {
+                    "kind": "field",
+                    "description": "Set or get the value of the number",
+                    "name": "value"
+                }
+            ],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "value",
+                    "description": "The number to format"
+                },{
+                    "name": "lang",
+                    "description": "The language to use for formatting the number",
+                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
+                },{
+                    "name": "digits",
+                    "description": "The number of digits to display after the decimal point",
+                    "u2-type": "number"
+                },{
+                    "name": "unit",
+                    "description": "The unit of measure to use when displaying the number",
+                    "u2-type": ["acre","bit","byte","celsius","centimeter","day","degree","fahrenheit","fluid-ounce","foot","gallon","gigabit","gigabyte","gram","hectare","hour","inch","kilobit","kilobyte","kilogram","kilometer","liter","megabit","megabyte","meter","microsecond","mile","mile-scandinavian","milliliter","millimeter","millisecond","minute","month","nanosecond","ounce","percent","petabyte","pound","second","stone","terabit","terabyte","week","yard","year"]
+                },{
+                    "name": "currency",
+                    "description": "Display the number as a currency. Formated based on the currency locale."
+                },{
+                    "name": "percent",
+                    "description": "Display the number as a percentage.",
+                    "u2-type": "boolean"
+                }
+            ],
+            "cssProperties": [],
+            "cssParts": [
+                {
+                    "// name": "compact",
+                    "description": "The exponent in 'long' or 'short' form, depending on how compactDisplay (which defaults to short) is specified when notation is set to compact."
+                },{
+                    "name": "currency",
+                    "description": "The currency string, such as the symbols '$' and '€' or the name 'Dollar', 'Euro', depending on how currencyDisplay is specified."
+                },{
+                    "name": "decimal",
+                    "description": "The decimal separator string ('.')."
+                },{
+                    "// name": "exponentInteger",
+                    "description": "The exponent integer value, when notation is set to scientific or engineering."
+                },{
+                    "// name": "exponentMinusSign",
+                    "description": "The exponent minus sign string ('-')."
+                },{
+                    "// name": "exponentSeparator",
+                    "description": "The exponent separator, when notation is set to scientific or engineering."
+                },{
+                    "name": "fraction",
+                    "description": "The fraction number."
+                },{
+                    "name": "group",
+                    "description": "The group separator string (',')."
+                },{
+                    "// name": "infinity",
+                    "description": "The Infinity string ('∞')."
+                },{
+                    "name": "integer",
+                    "description": "The integer number."
+                },{
+                    "name": "literal",
+                    "description": "Any literal strings or whitespace in the formatted number."
+                },{
+                    "name": "minusSign",
+                    "description": "The minus sign string ('-')."
+                },{
+                    "name": "nan",
+                    "description": "The NaN string ('NaN')."
+                },{
+                    "name": "plusSign",
+                    "description": "The plus sign string ('+')."
+                },{
+                    "name": "percentSign",
+                    "description": "The percent sign string ('%')."
+                },{
+                    "name": "unit",
+                    "description": "The unit string, such as the 'l' or 'litres', depending on how unitDisplay is specified."
+                },{
+                    "// name": "unknown",
+                    "description": "The string for unknown type results."
+                }
+            ],
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-number",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-number",
+            "declaration": {
+              "name": "u2-number",
+              "module": "number.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/el/number/number.css

@@ -0,0 +1,6 @@
+u2-number {
+    text-align:right; /* if block */
+    /* only as child of a table-cell? (would probably be confusing) */
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+}

package/el/number/number.js

@@ -0,0 +1,67 @@
+
+class U2Number extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.outEl = this.shadowRoot;
+        this.observer = new MutationObserver(mutations => this.render());
+    }
+    connectedCallback() {
+        this.render();
+        this.observer.observe(this, {childList: true, characterData: true});
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    render() {
+        let value = this.hasAttribute('value') ? this.getAttribute('value') : this.innerHTML;
+        value = value.trim();
+        if (value==='') return this.outEl.innerHTML = '-';
+        value = parseFloat(value);
+
+        const digits = this.getAttribute('digits') ?? undefined;
+        const unit = this.getAttribute('unit') ?? undefined;
+        const currency = this.getAttribute('currency') ?? undefined;
+        const percent = this.hasAttribute('percent');
+
+        const options = {
+            minimumFractionDigits: digits,
+            maximumFractionDigits: digits,
+            unit,
+            currency,
+        };
+        if (unit) options.style = 'unit';
+        if (currency) options.style = 'currency';
+        if (percent) options.style = 'percent';
+
+        const locales = localesFromElement(this);
+        const formatter = new Intl.NumberFormat(locales, options);
+
+        let html = '';
+        for (const part of formatter.formatToParts(value)) {
+            html += `<span part="${part.type}">${part.value}</span>`;
+        }
+
+        this.outEl.innerHTML = html;
+    }
+    static observedAttributes = ['value', 'lang', 'digits', 'unit', 'currency', 'percent'];
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+    set value(val) {
+        this.setAttribute('value', val);
+    }
+    get value() {
+        return this.getAttribute('value');
+    }
+}
+
+customElements.define('u2-number', U2Number);
+
+function localesFromElement(el) {
+    let langEl = el.closest('[lang]')||document.documentElement;
+    const locale = langEl.lang || navigator.language;
+    return [locale, ...navigator.languages];
+}

package/el/number/tests/minimal.html

@@ -0,0 +1,25 @@
+<!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="../number.js" type=module async></script>
+    <link href="../number.css" rel=stylesheet>
+
+<body>
+
+<section class="main">
+    Number: <u2-number value="8987.2345" digits="2">8'987.23</u2-number>
+</section>
+
+<style class="main">
+u2-number {
+    font-size: 2em;
+}
+</style>

package/el/number/tests/test.html

@@ -0,0 +1,138 @@
+<!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>
+    <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="../number.js" type=module async></script>
+    <link href="../number.css" rel=stylesheet>
+
+<body>
+
+<section>
+
+    <figure style="padding:1rem; background:var(--color-light); font-size:1.5rem">
+        Number: &nbsp; <u2-number id=testSet currency="EUR">4000.500 Euro</u2-number>
+    </figure>
+
+    <script type=module>
+    attrForm.oninput = function({target}) {
+        // these attributes are mutually exclusive
+        const styles = ['unit', 'currency', 'percent'];
+        if (styles.includes(target.name)) {
+            for (let style of styles) {
+                if (target.name === style) continue;
+                attrForm.elements[style].value = '';
+            }
+        }
+        
+        for (let [key, value] of new FormData(attrForm)) {
+            if (key === 'inner') {
+                testSet.innerHTML = value;
+                continue;
+            }
+            if (value.trim() === '') {
+                testSet.removeAttribute(key);
+            } else {
+                testSet.setAttribute(key, value.trim());
+            }
+        }
+    }
+    </script>
+
+    <div class="u2-table -Fields -Flex">
+        <strong>
+            <span>
+                <span>Attribute</span>
+                <span>Value</span>
+            </span>
+        </strong>  
+        <form id=attrForm>
+            <label>
+                <span>value</span>
+                <input name=value>
+            </label>
+            <label>
+                <div>
+                    innerHTML* <br>
+                </div>
+                <input name=inner value="4000.500 Euro">
+            </label>
+            <label>
+                <span>lang</span>
+                <select name=lang>
+                    <option value="">
+                    <option>de
+                    <option>en
+                    <option>es
+                    <option>it
+                    <option>fr
+                </select>
+            </label>
+            <label>
+                <span>digits</span>
+                <select name=digits>
+                    <option>
+                    <option>0
+                    <option>1
+                    <option>2
+                    <option>3
+                    <option>4
+                    <option>5
+                    <option>6
+                </select>
+            </label>
+            <label>
+                <span>currency</span>
+                <select name=currency>
+                    <option>
+                    <option>CHF
+                    <option selected>EUR
+                    <option>USD
+                    <option>GBP
+                    <option>JPY
+                </select>
+            </label>
+            <label>
+                <span>unit</span>
+                <select name=unit>
+                    <option>
+                    <option>kilometer-per-hour
+                    <option>meter-per-second
+                    <option>mile-per-hour
+                    <option>foot-per-second
+                </select>
+            </label>
+            <label>
+                <span>percent</span>
+                <select name=percent>
+                    <option>
+                    <option>percent
+                </select>
+            </label>
+        </form>
+    </div>  
+
+    <br><br>
+
+    <small>* innerHTML is evaluated as value if value-attribute is not present, else its simply a fallback for when no javascript is available</small>
+
+
+    <style>
+    label {
+        display:block;
+        gap:1rem;
+    }
+    u2-number {
+        font-size:2em;
+    }
+    </style>
+</section>
+

package/el/out/README.md

@@ -0,0 +1,32 @@
+# <u2-out> - element
+Output variables (beta)
+
+## Usage
+
+```html
+out: <u2-out value="8987.2345" digits="2">8'987.23</u2-out>
+```
+
+```css
+u2-out {
+    font-size: 2em;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/out/out.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/out/out.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/out/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/out/tests/test.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/out/manifest.json

@@ -0,0 +1,38 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+      {
+        "kind": "javascript-module",
+        "path": "out.js",
+        "declarations": [
+          {
+            "kind": "class",
+            "description": "Displays formatted outs",
+            "name": "u2-out",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [],
+            "cssParts": [],
+            "superclass": {
+              "name": "HTMLElement"
+            },
+            "tagName": "u2-out",
+            "customElement": true
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-element-definition",
+            "name": "u2-out",
+            "declaration": {
+              "name": "u2-out",
+              "module": "out.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
+  

package/el/out/out.css

@@ -0,0 +1,2 @@
+u2-out {
+}

package/el/out/out.js

@@ -0,0 +1,59 @@
+const itemJsRoot = '../../../../nuxodin/item.js/';
+import { AsyncItem } from '../../../../nuxodin/item.js/tools/AsyncItem.js';
+import { effect } from '../../../../nuxodin/item.js/item.js';
+
+
+class Out extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.outEl = this.shadowRoot;
+    }
+    connectedCallback() {}
+    async render() {
+        const value = await this._item.get();
+        effect(async ()=>{
+            this._item.get(); // just to register the signal
+            this.outEl.innerHTML = value;
+        });
+    }
+    static observedAttributes = ['item'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'item') {
+            this._setPath(newValue);
+        }
+    }
+    async _setPath(string) {
+        let item = null;
+
+        const path = string.trim().split('.');
+        const first = path.shift();
+        switch (first) {
+            case 'localStorage':
+                item = (await import(itemJsRoot+'drivers/LocalStorage.js')).getStore();
+                break;
+                case 'cookie':
+                    item = (await import(itemJsRoot+'drivers/Cookie.js')).cookies();
+                    break;
+            case 'navigator':
+                item = (await import(itemJsRoot+'drivers/navigator.js')).store();
+                break;
+            default:
+                throw new Error('Unknown item: '+first);
+        }
+
+        path.forEach( key => {
+            item = item.item(key);
+        });
+        this._item = item;
+        this.render();
+    }
+
+}
+
+const localStorage = (await import(itemJsRoot+'drivers/LocalStorage.js')).getStore();
+
+
+
+customElements.define('u2-out', Out);

package/el/out/tests/minimal.html

@@ -0,0 +1,25 @@
+<!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="../out.js" type=module async></script>
+    <link href="../out.css" rel=stylesheet>
+
+<body>
+
+<section class="main">
+    out: <u2-out value="8987.2345" digits="2">8'987.23</u2-out>
+</section>
+
+<style class="main">
+u2-out {
+    font-size: 2em;
+}
+</style>

package/el/out/tests/test.html

@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<html lang=en>
+<head>
+    <meta charset=utf-8>
+    <meta name=viewport content="width=device-width">
+    <title>tests</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="../out.js" type=module async></script>
+    <link href="../out.css" rel=stylesheet>
+
+<body>
+
+<section>
+
+    <figure style="padding:1rem; background:out(--color-light); font-size:1.5rem">
+        <h2>localStorage.random</h2>
+        <u2-out item="localStorage.random"></u2-out>
+    </figure>
+
+    <figure style="padding:1rem; background:out(--color-light); font-size:1.5rem">
+        <h2>navigator.online</h2>
+        <u2-out item="navigator.online"></u2-out>
+    </figure>
+
+    <figure style="padding:1rem; background:out(--color-light); font-size:1.5rem">
+        <h2>navigator.geolocation.latitude</h2>
+        <u2-out item="navigator.geolocation.latitude"></u2-out>
+    </figure>
+

package/el/parallax-bg/README.md

@@ -0,0 +1,36 @@
+# <u2-parallax-bg> - element
+Parallax backgrounds
+
+## Features
+
+- fast!
+- easy, declarative API
+- works for dynamic added elements
+- reduced background-container to the reachable area!
+- css only fallback
+- light weight
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/parallax-bg/parallax-bg.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/parallax-bg/parallax-bg.min.js" type=module async></script>
+```
+
+## Demos
+
+[demo.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/demo.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/test.html)  
+[visible.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/visible.html)  
+
+## Also interesting
+
+Parallax scrolling Elements (not Backgrounds)
+https://github.com/u2ui/parallax.attr
+
+## 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/parallax-bg/parallax-bg.css

@@ -0,0 +1,13 @@
+.u2-parallax-bg-stage {
+    position:relative;
+    display: flow-root; /* prevent margin collapse on inner element */
+    z-index:0; /* needed? else the parallax-element will go behinde everithing with a stackingcontext? */
+}
+
+u2-parallax-bg {
+    position:absolute;
+    inset: -.4px; /* ugly strange 1px space see demo */
+    z-index:-1;
+    will-change:transform;
+    background-size:cover;
+}