u2ui 1.0.1 → 1.4.5

package/el/number/number.js

@@ -1,67 +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];
-}
+
+export default 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/out/README.md

@@ -8,22 +8,22 @@ out: <u2-out value="8987.2345" digits="2">8'987.23</u2-out>
 ```
 
 ```css
-u2-out {
-    font-size: 2em;
+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>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/out/out.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/out/out.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/out/tests/minimal.html)  
 
 ## About
 

package/el/out/manifest.json

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

package/el/out/out.css

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

package/el/out/out.js

@@ -1,59 +1,42 @@
-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);
+const itemJsRoot = '../../../../nuxodin/item.js/';
+//import { effect } from '../../../../nuxodin/item.js/item.js';
+
+export default class U2Out extends HTMLElement {
+    connectedCallback() {}
+    async render() {
+        const item = this._item;
+        const {effect} = await import(itemJsRoot+'item.js');
+        effect(async ()=>{
+            this.innerText = item.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);
+        }
+        this._item = item.sub(path);
+        this.render();
+    }
+
+}
+
+customElements.define('u2-out', U2Out);

package/el/pagination/README.md

@@ -0,0 +1,32 @@
+# <u2-pagination> - element
+Page number navigation with customizable URL patterns
+
+## Usage
+
+```html
+<u2-pagination total="3" current="2" href="/page/{page}" onclick="event.preventDefault()"></u2-pagination>
+```
+
+```css
+u2-pagination {
+    margin: 2rem;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/pagination/pagination.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/pagination/pagination.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/pagination/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/pagination/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/pagination/manifest.json

@@ -0,0 +1,47 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "pagination.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Page number navigation with customizable URL patterns",
+            "name": "U2Pagination",
+            "members": [{
+                "kind": "method",
+                "name": "render",
+                "description": "Re-renders the pagination"
+            }],
+            "events": [{
+                "name": "u2-pagination-change",
+                "description": "Fired when a page is selected"
+            }],
+            "attributes": [{
+                "name": "total",
+                "description": "Total number of pages",
+                "u2-type": "number"
+            },{
+                "name": "current",
+                "description": "The current page, auto-detected from the URL if not set",
+                "u2-type": "number"
+            },{
+                "name": "href",
+                "description": "URL pattern, {page} is replaced by the page number",
+                "u2Examples": ["?page={page}", "/page/{page}"]
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-pagination",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-pagination",
+            "declaration": {
+                "name": "U2Pagination",
+                "module": "pagination.js"
+            }
+        }]
+    }]
+}

package/el/pagination/pagination.css

@@ -0,0 +1,27 @@
+u2-pagination nav {
+    & ul {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-wrap: wrap;
+    }
+
+    & a {
+        display: block;
+        padding: calc(var(--gap) / 2) var(--gap);
+        text-decoration: none;
+        color: inherit;
+        text-align: center;
+    }
+
+    & a:hover {
+        background: var(--color-light);
+    }
+
+    & a[aria-current="page"] {
+        font-weight: bold;
+        background: var(--color);
+        color: white;
+    }
+}

package/el/pagination/pagination.js

@@ -0,0 +1,147 @@
+
+export default class U2Pagination extends HTMLElement {
+    connectedCallback() {
+        this.render();
+        this.addEventListener('click', this.#handleClick);
+    }
+
+    #handleClick = e => {
+        const target = e.target.closest('a[data-page]');
+        if (!target) return;
+        const event = new CustomEvent('u2-pagination-change', {
+            detail: { page: +target.dataset.page, previous: this.current },
+            bubbles: true, composed: true, cancelable: true
+        });
+        this.dispatchEvent(event);
+        event.defaultPrevented && e.preventDefault();
+    };
+
+    get href() { return this.getAttribute('href') || '?page={page}'; }
+    get total() { return +this.getAttribute('total') || 1; }
+    get current() { return +this.getAttribute('current') || this.#detectCurrentPage(); }
+
+    #detectCurrentPage() {
+        const currentUrl = window.location.href;
+        for (let page = 1; page <= this.total; page++) {
+            const pageUrl = this.href.replace('{page}', page);
+            const fullUrl = new URL(pageUrl, window.location.href).href;
+            if (currentUrl === fullUrl || currentUrl.startsWith(fullUrl + '#')) {
+                return page;
+            }
+        }
+        return 1;
+    }
+    #calculatePages() {
+        const { total, current } = this;
+        const maxItems = Math.floor((this.clientWidth || 600) / 40) - 2;
+
+        if (maxItems < 5 || total <= maxItems) {
+            return total <= maxItems
+                ? Array.from({ length: total }, (_, i) => i + 1)
+                : this.#getMinimalPages();
+        }
+
+        const sideItems = Math.floor((maxItems - 3) / 2);
+        let start = Math.max(2, current - sideItems);
+        let end = Math.min(total - 1, current + sideItems);
+
+        if (current <= sideItems + 2) {
+            end = Math.min(total - 1, maxItems - 1);
+            start = 2;
+        } else if (current >= total - sideItems - 1) {
+            start = Math.max(2, total - maxItems + 2);
+            end = total - 1;
+        }
+
+        const pages = [1];
+        if (start > 2) pages.push('...');
+        for (let i = start; i <= end; i++) pages.push(i);
+        if (end < total - 1) pages.push('...');
+        if (total > 1) pages.push(total);
+
+        return pages;
+    }
+
+    #getMinimalPages() {
+        const { total, current } = this;
+        const pages = [1];
+        if (current > 2) pages.push('...');
+        if (current !== 1 && current !== total) pages.push(current);
+        if (current < total - 1) pages.push('...');
+        if (total > 1) pages.push(total);
+        return pages;
+    }
+
+    #updateLink(a, page, label, rel) {
+        a.href = this.href.replace('{page}', page);
+        a.innerHTML = label ? `<span aria-hidden="true">${label}</span>` : page;
+        a.dataset.page = page;
+        a.setAttribute('aria-label', rel ? `${rel} page` : `Page ${page}`);
+        rel ? a.setAttribute('rel', rel) : a.removeAttribute('rel');
+        page === this.current ? a.setAttribute('aria-current', 'page') : a.removeAttribute('aria-current');
+    }
+
+    render() {
+        const { current, total } = this;
+        const pages = this.#calculatePages();
+
+        let nav = this.querySelector('nav');
+        if (!nav) {
+            nav = document.createElement('nav');
+            nav.setAttribute('aria-label', 'Pagination');
+            nav.innerHTML = '<ul u2-focusgroup="remember"></ul>';
+            this.append(nav);
+        }
+        
+        const ul = nav.querySelector('ul');
+        const items = [];
+        
+        // Previous
+        if (current > 1) items.push({ type: 'prev', page: current - 1 });
+        
+        // Pages
+        pages.forEach(page => {
+            items.push(page === '...' ? { type: 'dots' } : { type: 'page', page });
+        });
+        
+        // Next
+        if (current < total) items.push({ type: 'next', page: current + 1 });
+        
+        // Update oder erstelle list items
+        const lis = Array.from(ul.children);
+        items.forEach((item, i) => {
+            let li = lis[i];
+            if (!li) {
+                li = document.createElement('li');
+                ul.append(li);
+            }
+            
+            if (item.type === 'dots') {
+                li.innerHTML = '<span aria-hidden="true">…</span>';
+            } else {
+                let a = li.querySelector('a');
+                if (!a) {
+                    a = document.createElement('a');
+                    li.innerHTML = '';
+                    li.append(a);
+                }
+                
+                const label = item.type === 'prev' ? '←' : item.type === 'next' ? '→' : null;
+                this.#updateLink(a, item.page, label, item.type !== 'page' ? item.type : null);
+            }
+        });
+        
+        // Entferne überschüssige items
+        while (ul.children.length > items.length) {
+            ul.lastChild.remove();
+        }
+    }
+
+    static observedAttributes = ['total', 'current', 'href'];
+
+    attributeChangedCallback() {
+        if (this.isConnected) this.render();
+    }
+}
+
+customElements.define('u2-pagination', U2Pagination);

package/el/parallax-bg/README.md

@@ -1,28 +1,48 @@
 # <u2-parallax-bg> - element
-Parallax backgrounds
+Scroll-driven parallax background-layer with dynamic container sizing for full content visibility
 
 ## Features
 
 - fast!
 - easy, declarative API
-- works for dynamic added elements
+- works for dynamically added elements
 - reduced background-container to the reachable area!
 - css only fallback
 - light weight
 
+## Usage
+
+```html
+<div class=u2-parallax-bg-stage style="height:100%">
+    <u2-parallax-bg>
+        <img src="https://raw.githubusercontent.com/u2ui/u2/main/el/parallax-bg/tests/bg.jpg" alt="parallax-bg demo">
+    </u2-parallax-bg>
+</div>
+```
+
+```css
+u2-parallax-bg {
+    --parallax-bg-speed:.7
+}
+u2-parallax-bg div {
+    display:grid;
+    place-items: center;
+}
+```
+
 ## 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>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallax-bg/parallax-bg.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/parallax-bg/parallax-bg.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)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/minimal.html)  
+[demo.html](http://gcdn.li/u2ui/u2@main/el/parallax-bg/tests/demo.html)  
 
 ## Also interesting