u2ui 1.0.1 → 1.4.6

package/attr/selectable/SelectionManager.js

@@ -0,0 +1,171 @@
+export class SelectionManager {
+    constructor(container, config = {}) {
+        this.container = container;
+        this.config = {
+            preferSingle: false,
+            ...config
+        };
+        this.last = null; // Last focused item
+        this.anchor = null; // Anchor for Range-Selection
+
+        container.addEventListener('click', this);
+        container.addEventListener('keydown', this);
+
+        const items = this.items();
+        let firstTabIndex0 = null;
+        let firstSelected = null;
+        for (const item of items) {
+            if (item.tabIndex === 0) {
+                firstTabIndex0 = item;
+                break;
+            }
+            if (item.ariaSelected === 'true') firstSelected ??= item;
+        }
+        const focusable = firstTabIndex0 || firstSelected || items[0];
+        if (focusable) {
+            focusable.tabIndex = 0;
+            this.last = this.anchor = focusable;
+        }
+    }
+
+    destroy() {
+        this.container.removeEventListener('click', this);
+        this.container.removeEventListener('keydown', this);
+    }
+
+    items() {
+        return getOwnItems(this.container);
+    }
+
+    get multi() { return this.container.ariaMultiSelectable === 'true'; }
+
+    handleEvent(e) { this['on' + e.type](e); }
+
+    onclick(e) {
+        const items = this.items();
+        const item = e.composedPath().find(el => items.includes(el));
+        if (!item) return;
+
+        if (this.multi) {
+            if (e.shiftKey && this.anchor) {
+                this.clear();
+                this.range(this.anchor, item);
+            } else if (e.ctrlKey || e.metaKey) {
+                this.toggle(item);
+            } else {
+                this.config.preferSingle ? this.only(item) : this.toggle(item);
+            }
+        } else {
+            this.only(item);
+        }
+
+        this.focus(item);        
+    }
+
+    onkeydown(e) {
+        const items = this.items();
+        const current = e.composedPath().find(el => items.includes(el));
+
+        const idx = items.indexOf(current);
+
+        const nav = {
+            ArrowDown: () => items[Math.min(idx + 1, items.length - 1)],
+            ArrowRight: () => items[Math.min(idx + 1, items.length - 1)],
+            ArrowUp: () => items[Math.max(idx - 1, 0)],
+            ArrowLeft: () => items[Math.max(idx - 1, 0)],
+            Home: () => items[0],
+            End: () => items[items.length - 1]
+        }[e.key];
+
+        if (nav && !e.altKey) {
+            const next = nav();
+            e.preventDefault();
+            this.focus(next);
+
+            if (this.multi) {
+                if (e.shiftKey) {
+                    this.clear();
+                    this.range(this.anchor || current, next);
+                }
+            } else {
+                this.only(next);
+            }
+        }
+
+        if (e.key === 'a' && this.multi && (e.ctrlKey || e.metaKey)) {
+            e.preventDefault();
+            items.forEach(el => this.add(el));
+        }
+
+        if (!current) return;
+
+        if (e.key === ' ') {
+            e.preventDefault();
+            if (this.multi) {
+                if (e.shiftKey) {
+                    this.clear();
+                    this.range(this.anchor || items[0], current);
+                } else {
+                    this.toggle(current);
+                }
+            } else {
+                this.only(current);
+            }
+        }
+
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.only(current);
+        }
+
+    }
+
+    focus(item) {
+        if (this.last) this.last.tabIndex = -1;
+        item.tabIndex = 0;
+        item.focus();
+        this.last = item;
+    }
+
+    range(from, to) {
+        const items = this.items();
+        const [a, b] = [items.indexOf(from), items.indexOf(to)].sort((x, y) => x - y);
+        items.slice(a, b + 1).forEach(el => this.add(el));
+    }
+
+    only(item) { this.clear(); this.add(item); this.anchor = item; }
+
+    toggle(item) { item.ariaSelected === 'true' ? this.remove(item) : this.add(item); this.anchor = item; }
+
+    clear(){ this.items().forEach(el => this.remove(el)); }
+
+    add(item) { item.ariaSelected = 'true'; }
+
+    remove(item) { item.ariaSelected = 'false'; }
+}
+
+
+
+const roleMap = {
+    listbox: ['option'],
+    grid: ['row', 'gridcell'],
+    treegrid: ['row', 'gridcell'],
+    tree: ['treeitem'],
+    tablist: ['tab']
+};
+function getOwnItems(container) {
+    const validRoles = roleMap[container.role];
+    if (!validRoles) return [];
+    const items = [];
+    function scan(root) {
+        for (const node of root.children) {
+            if (node.ariaHidden === 'true') continue;
+            const role = node.role;
+            if (role && validRoles.includes(role)) items.push(node);
+            if (role && roleMap[role]) continue;
+            scan(node.shadowRoot || node);
+        }
+    }
+    scan(container);
+    return items;
+}

package/attr/selectable/manifest.json

@@ -0,0 +1,33 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "selectable.js",
+        "declarations": [{
+            "description": "Makes a container with selectable items",
+            "name": "u2-selectable",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-selectable",
+                "description": "Selector of selectable items (default: direct children)",
+                "u2Examples": ["", ".item"]
+            },{
+                "name": "aria-multiselectable",
+                "description": "Allows selecting multiple items",
+                "u2-type": "boolean"
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-selectable"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-selectable",
+            "declaration": {
+                "name": "u2-selectable",
+                "module": "selectable.js"
+            }
+        }]
+    }]
+}

package/attr/selectable/selectable.js

@@ -0,0 +1,28 @@
+import { SelectionManager } from './SelectionManager.js';
+
+
+const managers = new WeakMap();
+
+function create(el) {
+    el.role ||= 'listbox';
+    el.querySelectorAll(el.getAttribute('u2-selectable') || ':scope > *').forEach(item => {
+        item.role ||= 'option';
+        item.ariaSelected ||= 'false';
+    });
+    const manager = new SelectionManager(el);
+    managers.set(el, manager);
+    return manager;
+}
+
+function destroy(el) {
+    const manager = managers.get(el);
+    manager.destroy();
+    managers.delete(el);
+}
+
+function init(el) {
+    return managers.get(el) ?? create(el);
+}
+
+import { SelectorObserver } from '../../js/SelectorObserver/SelectorObserver.js';
+new SelectorObserver({ on: init, off: destroy }).observe('[u2-selectable]');

package/attr/skin/README.md

@@ -1,5 +1,5 @@
 # [u2-skin] - attribute
-Change the skin of a widget
+Scoped theme. `[u2-skin=myskin] { --color: red }` — derived tokens recalculate automatically. Sets `background-color: var(--color-bg)` and `color: var(--color-text)`.
 
 - Recalculates css color-variables
 - Sets the background and the text color
@@ -7,35 +7,34 @@ Change the skin of a widget
 ## Usage
 
 ```html
-<div u2-skin="invert" style="padding:1rem">
-    <h3>Inverted</h3>
-    <button>button</button>
-</div>
-<br>
-<div u2-skin="theme" style="padding:1rem">
-    <h3>Theme-color as background</h3>
-    <button>button</button>
+<div u2-skin="invert" style="padding:1rem">
+    <h4>Inverted</h4>
+    <button>button</button>
+</div>
+<div u2-skin="theme" style="padding:1rem">
+    <h4>Theme-color as background</h4>
+    <button>button</button>
 </div>
 ```
 
 ```css
-[u2-skin=pink] {
-    --hsl-h: 330;
-    --hsl-s: 90%;
-    --hsl-l: 70%;        
+[u2-skin=pink] {
+    --hsl-h: 330;
+    --hsl-s: 90%;
+    --hsl-l: 70%;        
 }
 ```
 
 ## Install
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/skin/skin.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/skin/skin.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/attr/skin/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/attr/skin/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/skin/tests/minimal.html)  
 
 ## Description
 
@@ -47,7 +46,7 @@ Custom skins can easily be added.
 Just change `--hsl-h` for example:
     
 ```css
-[skin=pink] {
+[u2-skin=pink] {
     --hsl-h: 330;
 }
 ```

package/attr/skin/manifest.json

@@ -0,0 +1,40 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "path": "skin.css",
+        "declarations": [{
+            "description": "Scoped theme — recalculates color variables and sets background/text color",
+            "name": "u2-skin",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-skin",
+                "description": "Name of the skin to apply",
+                "u2Examples": ["invert", "theme", "pink"]
+            }],
+            "cssProperties": [{
+                "name": "--color",
+                "description": "Primary color the skin derives all tokens from",
+                "syntax": "<color>"
+            },{
+                "name": "--color-bg",
+                "description": "Background color applied by the skin",
+                "syntax": "<color>"
+            },{
+                "name": "--color-text",
+                "description": "Text color applied by the skin",
+                "syntax": "<color>"
+            }],
+            "attributeName": "u2-skin"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-skin",
+            "declaration": {
+                "name": "u2-skin",
+                "module": "skin.css"
+            }
+        }]
+    }]
+}

package/attr/skin/skin.css

@@ -1,51 +1,50 @@
-
-[u2-skin] {
-    color: var(--color-text);
-    background-color: var(--color-bg);
-
-    ::selection {
-        color: var(--color-bg);
-        background-color: var(--color-text);
-    }
-}
-
-
-
-[u2-skin=invert] {
-    --color-light: var(--color-init-dark);
-    --color-dark: var(--color-init-light);
-
-    --color-bg: var(--color-init-text);
-    --color-text: var(--color-init-bg);
-    --color-area: var(--color-light);
-
-    :has(>&)  {
-        --color-init: var(--color);
-        --color-init-light: var(--color-light);
-        --color-init-dark: var(--color-dark);
-    
-        --color-init-bg: var(--color-bg);
-        --color-init-text: var(--color-text);
-    }
-    [u2-skin]:has(>&) {
-        outline: 10px dotted red !important; /* invert can not be child of skin; */
-    }
-        
-}
-
-[u2-skin=theme] {
-    --color: var(--color-init-text);
-    --color-bg: var(--color-init);
-    --color-text: var(--color-init-bg);
-    :has(>&)  {
-        --color-init: var(--color);    
-        --color-init-bg: var(--color-bg);
-        --color-init-text: var(--color-text);
-    }
-}
-
-
-/*
-contrast text color by background lightness *
-https://jsfiddle.net/gqm0wvcn/4/
+
+[u2-skin] {
+    color: var(--color-text);
+    background-color: var(--color-bg);
+
+    ::selection {
+        color: var(--color-bg);
+        background-color: var(--color-text);
+    }
+}
+
+
+
+[u2-skin=invert] {
+    --color-light: var(--color-init-dark);
+    --color-dark: var(--color-init-light);
+
+    --color-bg: var(--color-init-text);
+    --color-text: var(--color-init-bg);
+    --color-area: var(--color-light);
+
+    :has(>&)  {
+        --color-init: var(--color);
+        --color-init-light: var(--color-light);
+        --color-init-dark: var(--color-dark);
+    
+        --color-init-bg: var(--color-bg);
+        --color-init-text: var(--color-text);
+    }
+    [u2-skin]:has(>&) {
+        outline: 10px dotted red !important; /* invert can not be child of skin; */
+    }   
+}
+
+[u2-skin=theme] {
+    --color: var(--color-init-text);
+    --color-bg: var(--color-init);
+    --color-text: var(--color-init-bg);
+    :has(>&)  {
+        --color-init: var(--color);    
+        --color-init-bg: var(--color-bg);
+        --color-init-text: var(--color-text);
+    }
+}
+
+
+/*
+contrast text color by background lightness *
+https://jsfiddle.net/gqm0wvcn/4/
 */

package/attr/store/README.md

@@ -0,0 +1,41 @@
+# [u2-store] - attribute
+Persists form/input values using localStorage (form[id] / input[name] as keys)
+
+## Features
+
+Automatically saves and restores form and input values using the browser's storage.  
+
+- Works with any form or individual input elements
+- Persists values across page reloads
+- Handles both form-scoped and global input storage
+- Works with custom-elements that support `value` and `name` properties
+- Lightweight
+
+Warnings:
+- forms need an `id` attribute!
+- inputs need a `name` attribute **and** no `value` attribute!
+- sessionStorage is used by default, localStorage needs a privacy-policy cookie "u2-cookiebanner" with a value like `{functional:true}`
+
+## Usage
+
+```html
+<input name=username u2-store>
+<p>Enter text and refresh the page to see it persist.</p>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/store/store.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/store/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/store/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/attr/store/manifest.json

@@ -0,0 +1,28 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "store.js",
+        "declarations": [{
+            "description": "Persists form/input values using localStorage or sessionStorage",
+            "name": "u2-store",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-store",
+                "description": "Enables persistence on a form (needs id) or input (needs name, no value)"
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-store"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-store",
+            "declaration": {
+                "name": "u2-store",
+                "module": "store.js"
+            }
+        }]
+    }]
+}

package/attr/store/store.js

@@ -0,0 +1,62 @@
+import { SelectorObserver } from '../../js/SelectorObserver/SelectorObserver.js';
+
+let store = sessionStorage;
+const readStore = key => JSON.parse(store.getItem(key) || '{}');
+
+Promise.resolve(globalThis.cookieStore?.get("u2-cookiebanner")) // cookieStore is not everywhere available
+    .then(data => JSON.parse(data?.value??'{}'))
+    .then(data=> {if (data.functional) store = localStorage; })
+    .finally(() => elObserver.observe('[u2-store]'));
+
+document.addEventListener('input', e => {
+    const target = e.target;
+    const name = target.name;
+    const form = target.form;
+    const isCheckbox = target.type === 'checkbox';
+    const value = isCheckbox ? target.checked : target.value;
+    // save in form-store
+    if (form && form.hasAttribute('u2-store')) {
+        const formId = form.id || '_noid_';
+        const key = 'u2-store-form-' + formId;
+        const data = readStore(key);
+        data[name] = value;
+        store.setItem(key, JSON.stringify(data));
+    }
+    // and/or save in global-store
+    if (target.hasAttribute('u2-store')) {
+        const key = 'u2-store-input';
+        const data = readStore(key);
+        data[name] = value;
+        store.setItem(key, JSON.stringify(data));
+    }
+});
+
+const elObserver = new SelectorObserver({
+    on: (el) => {
+        if (el.tagName === 'FORM' && el.id) { // form-store
+            const formId = el.id;
+            const data = readStore('u2-store-form-' + formId);
+            for (let input of el.elements) {
+                if (!input.name) continue;
+                if (input.hasAttribute('value') && input.type !== 'checkbox') continue;
+                if (data[input.name] == null) continue;
+                if (input.type === 'checkbox') {
+                    input.checked = data[input.name];
+                } else {
+                    input.setAttribute('value', data[input.name]); // marks the element so it won't be overwritten by the global-input-store
+                    input.value = data[input.name];
+                }
+            }
+        } else { // global-store
+            const data = readStore('u2-store-input');
+            if (el.hasAttribute('value')) return;
+            if (data[el.name] == null) return;
+            if (el.type === 'checkbox') {
+                el.checked = data[el.name];
+            } else {
+                el.value = data[el.name];
+            }
+        }
+    },
+    off: (el) => {}
+});

package/class/badge/README.md

@@ -10,13 +10,13 @@ Rendering badges
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/class/badge/badge.min.css" rel=stylesheet>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/class/badge/badge.css" rel=stylesheet>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/class/badge/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/class/badge/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/class/badge/tests/minimal.html)  
 
 ## About
 

package/class/badge/badge.css

@@ -1,35 +1,35 @@
-.u2-badge {
-    background-color:var(--color-dark, CanvasText);
-    color:var(--color-bg, Canvas);
-
-    display:inline-flex;
-    border-radius:1em;
-    line-height: var(--line-height);
-    --line-height:1.1;
-    font-weight:normal;
-
-    min-width:  1.6em;
-    min-height: 1.6em;
-    padding-inline: .6em;
-    padding-block: .2em .25em;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-
-    box-sizing: border-box;
-
-    /*
-	box-decoration-break:clone; /* not needed for inline-flex * /
-    vertical-align:middle;
-    margin-bottom:-.1em;
-    margin-top:-.1em;
-    transform: scale(0.99999999);
-    */
-}
-
-.u2-badge:empty {
-    min-width:  .6em;
-    min-height: .6em;
-    padding:0;
-    /* margin-left:-.1em; */
+.u2-badge {
+    background-color:var(--color-dark, CanvasText);
+    color:var(--color-bg, Canvas);
+
+    display:inline-flex;
+    border-radius:1em;
+    line-height: var(--line-height);
+    --line-height:1.1;
+    font-weight:normal;
+
+    min-width:  1.6em;
+    min-height: 1.6em;
+    padding-inline: .6em;
+    padding-block: .2em .25em;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    box-sizing: border-box;
+
+    /*
+	box-decoration-break:clone; /* not needed for inline-flex * /
+    vertical-align:middle;
+    margin-bottom:-.1em;
+    margin-top:-.1em;
+    transform: scale(0.99999999);
+    */
+}
+
+.u2-badge:empty {
+    min-width:  .6em;
+    min-height: .6em;
+    padding:0;
+    /* margin-left:-.1em; */
 }