u2ui 1.0.0

package/el/time/time.js

@@ -0,0 +1,168 @@
+
+class Time extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `<time><span id=out></span><slot id=fallback></slot></time>`;
+        this._timeEl = this.shadowRoot.querySelector('time');
+        this._outEl = this.shadowRoot.getElementById('out');
+        this._fallbackEl = this.shadowRoot.getElementById('fallback');
+    }
+    connectedCallback() {
+        this.reset();
+    }
+    disconnectedCallback() {
+        clearTimeout(this.__timer);
+    }
+    static  observedAttributes = ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'];
+    attributeChangedCallback(name, old, value) {
+        if (old === value) return;
+        this.reset();
+    }
+    reset() {
+        this.__type = this.getAttribute('type') || 'relative';
+        let show = this.getAttribute('type') || this.innerHTML === '';
+        if (!show) return;
+
+
+        
+        const string = this.getAttribute('datetime');
+
+        // const datetimeRegex = /^(\d{4})(?:-(\d{2})(?:-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{1,3}))?)?(Z|([-+]\d{2}:?\d{2}))?)?)?)?$/;
+        // const match = string.match(datetimeRegex);
+        // if (match) {
+        //     this._representation = 'datetime';
+        // } else if (string.match(/^\d{2}:\d{2}(:\d{2}(\.\d{1,3})?)?$/)) {
+        //     this._representation = 'time';
+        //     this._
+        // } else if (string.match(/^\d{4}-\d{2}$/)) {
+        //     this._representation = 'yearless-date';
+        // } else if (string.match(/^P/)) {
+        //     this._representation = 'duration'; // eg PT4H18M3S
+        // }
+
+
+        let date = string.match(/^-?\d{5,}$/) ? Number(string) : Date.parse(string);
+
+        date = new Date(date);
+        this.__date = date;
+        this.__lang = langFromElement(this) || 'default';
+        this.render();
+    }
+    render() {
+        let content = '';
+        let title = '';
+
+        let date = this.__date;
+        const valid = !isNaN(date);
+        if (valid) {
+            const relativeData = types['relative'](this, date);
+            const absoluteData = types['date'](this, date);
+            content = this.__type === 'relative' ? relativeData.show : absoluteData.show;
+            title = this.__type === 'relative' ? absoluteData.show : relativeData.show;
+            clearTimeout(this.__timer);
+            if (relativeData.nextUpdateIn < 2 * 60 * 60 * 1000) {
+                this.__timer = setTimeout(() => this.render(), relativeData.nextUpdateIn + 100);
+            }
+        }
+        this._timeEl.setAttribute('datetime', this.getAttribute('datetime'));
+        this._timeEl.setAttribute('title', title);
+        if (content !== this._outEl.innerHTML) this._outEl.innerHTML = content;
+        this._fallbackEl.hidden = valid;
+    }
+}
+
+
+const types = {
+    relative(el, date) {
+        const mode = el.getAttribute('mode') || 'long';
+        const rtf = new Intl.RelativeTimeFormat(el.__lang, {
+            //localeMatcher: , // 'best fit', 'lookup'
+            numeric: 'auto', // always, auto
+            style: mode // long, narrow, short
+        });
+        const now = Date.now();
+        const elapsed = date - now;
+        const { unit, rounded, nextUpdateIn } = elapsedToUnit(elapsed);
+        return {
+            show:rtf.format(rounded, unit),
+            nextUpdateIn
+        };
+    },
+    date(el, date) {
+        const options = {};
+        for (let [key, opts] of Object.entries(defaults)) {
+            const val = el.getAttribute(key);
+            if (val === null) {
+                if (opts.showAnyway) options[key] = opts.default;
+                continue;
+            }
+            else if (val === '' || val === 'true') options[key] = opts.default;
+            else if (val === 'none') options[key] = undefined;
+            else options[key] = val;
+        }
+        if (options.second && !options.minute) options.minute = options.second;
+        if (options.minute && !options.hour) options.hour = options.minute;
+        
+        const formatter = new Intl.DateTimeFormat(el.__lang, options);
+        // let html = '';
+        // for (const part of formatter.formatToParts(date)) {
+        //     html += `<span part="${part.type}">${part.value}</span>`;
+        // }
+
+        return {
+            //html: formatter.formatToParts(date).map(part => `<span part="${part.type}">${part.value}</span>`).join(''),
+            show: formatter.format(date),
+        }
+    },
+}
+
+function langFromElement(el) {
+    let langEl = el.closest('[lang]')||document.documentElement;
+    // todo: for tables i should check col and colgroup
+    // https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
+
+    // let list = navigator.languages;
+    // try {
+    //     list = Intl.getCanonicalLocales(lang);
+    // } catch (e) {}
+    // Intl.NumberFormat(list).format();
+    return langEl.lang || navigator.language;
+}
+
+function elapsedToUnit(elapsed, min = 'second') {
+    for (let unit in units)
+        if (Math.abs(elapsed) > units[unit] || unit === min) {
+            const rounded = Math.round(elapsed / units[unit]);
+            const nextUpdateIn = units[unit] - (elapsed % units[unit]);
+            return {
+                unit,
+                rounded,
+                nextUpdateIn
+            };
+        }
+}
+
+const defaults = {
+    weekday: { default: 'short', showAnyway: 1 },      // "narrow", "short", "long".
+    //era:                                             // "narrow", "short", "long".
+    year: { default: 'numeric', showAnyway: 1 },       // "numeric", "2-digit".
+    month: { default: 'short', showAnyway: 1 },        // "numeric", "2-digit", "narrow", "short", "long".
+    day: { default: 'numeric', showAnyway: 1 },        // "numeric", "2-digit".
+    hour: { default: 'numeric', showAnyway: 0 },       // "numeric", "2-digit".
+    minute: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
+    second: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
+    timeZoneName: { default: 'short', showAnyway: 0 }, // "short", "long".
+};
+
+const units = {
+    year: 24 * 60 * 60 * 1000 * 365,
+    month: 24 * 60 * 60 * 1000 * 365 / 12,
+    day: 24 * 60 * 60 * 1000,
+    hour: 60 * 60 * 1000,
+    minute: 60 * 1000,
+    second: 1000
+}
+
+
+customElements.define('u2-time', Time);

package/el/time/time.old.uhtml.js

@@ -0,0 +1,129 @@
+import 'https://unpkg.com/uce@1.16.5/new.js';
+const { define, html } = customElements.get('uce-lib');
+
+const types = {
+    relative(el, date) {
+        const mode = el.getAttribute('mode') || 'long';
+        const rtf = new Intl.RelativeTimeFormat(el.__lang, {
+            //localeMatcher: , // 'best fit', 'lookup'
+            numeric: 'auto', // always, auto
+            style: mode // long, narrow, short
+        });
+        const now = Date.now();
+        const elapsed = date - now;
+        const { unit, rounded } = elapsedToUnit(elapsed);
+        return {
+            show:rtf.format(rounded, unit),
+        }
+    },
+    date(el, date) {
+        const defaults = {
+            weekday: { default: 'short', showAnyway: 1 },      // "narrow", "short", "long".
+            //era:                                             // "narrow", "short", "long".
+            year: { default: 'numeric', showAnyway: 1 },       // "numeric", "2-digit".
+            month: { default: 'short', showAnyway: 1 },        // "numeric", "2-digit", "narrow", "short", "long".
+            day: { default: 'numeric', showAnyway: 1 },        // "numeric", "2-digit".
+            hour: { default: 'numeric', showAnyway: 0 },       // "numeric", "2-digit".
+            minute: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
+            second: { default: 'numeric', showAnyway: 0 },     // "numeric", "2-digit".
+            timeZoneName: { default: 'short', showAnyway: 0 }, // "short", "long".
+        };
+        const options = {};
+        for (let [key, opts] of Object.entries(defaults)) {
+            const val = el.getAttribute(key);
+            if (val === null) {
+                if (opts.showAnyway) options[key] = opts.default;
+                continue;
+            }
+            else if (val === '' || val === 'true') options[key] = opts.default;
+            else if (val === 'none') options[key] = undefined;
+            else options[key] = val;
+        }
+        return {
+            show: new Intl.DateTimeFormat(el.__lang, options).format(date)
+        }
+    },
+}
+
+function langFromElement(el) {
+    let langEl = el.closest('[lang]')||document.documentElement;
+    // todo: for tables i should check col and colgroup
+    // https://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html#alignment-inheritance
+
+    // let list = navigator.languages;
+    // try {
+    //     list = Intl.getCanonicalLocales(lang);
+    // } catch (e) {}
+    // Intl.NumberFormat(list).format();
+    return langEl.lang || navigator.language;
+}
+
+function elapsedToUnit(elapsed, min = 'second') {
+    for (let unit in units)
+        if (Math.abs(elapsed) > units[unit] || unit === min) {
+            let rounded = Math.round(elapsed / units[unit]);
+            return {
+                unit,
+                rounded,
+            };
+        }
+}
+const units = {
+    year: 24 * 60 * 60 * 1000 * 365,
+    month: 24 * 60 * 60 * 1000 * 365 / 12,
+    day: 24 * 60 * 60 * 1000,
+    hour: 60 * 60 * 1000,
+    minute: 60 * 1000,
+    second: 1000
+}
+
+
+define('u2-time', {
+    attachShadow: { mode: 'open' },
+
+    render() {
+        let content = '';
+        let title = undefined;
+
+        let date = this.__date;
+
+        const valid = !isNaN(date);
+        if (valid) {
+            let fn = types[this.__type];
+            if (!fn) { console.warn('type ' + this.__type + ' is not supported'); return; }
+            let {show} = fn(this, date);
+            content = show;
+            if (this.__type === 'relative') {
+                title = types['date'](this, date).show;// provide a title-attribute if it is relative
+                clearInterval(this.__timer);
+                this.__timer = setTimeout(() => this.render(), 1000); // todo: evaluate exact next tic, challange!
+            }
+        }
+        this.html`<time datetime="${this.props.datetime}" title="${title}">${content}<slot hidden="${valid}"/></time>`;
+    },
+    reset() {
+        this.__type = this.props.type || 'relative';
+        let show = this.props.type || this.innerHTML === '';
+        if (!show) return;
+
+        let date = this.props.datetime;
+        date = date.match(/^-?[0-9.]+$/) ? Number(date) : Date.parse(date);
+        date = new Date(date);
+        this.__date = date;
+
+        this.__lang = langFromElement(this) || 'default';
+        this.render();
+    },
+    observedAttributes: ['datetime', 'lang', 'type', 'weekday', 'year', 'month', 'day', 'hour', 'minute', 'second', 'mode'],
+
+    attributeChanged(name, old, value) {
+        if (!this.realConnected) return;
+        if (old === value) return;
+        this.reset();
+    },
+    connected() {
+        this.realConnected = true;
+        this.reset();
+    },
+    disconnected() { clearInterval(this.__timer); },
+});

package/el/tooltip/README.md

@@ -0,0 +1,48 @@
+# <u2-tooltip> - element
+Tooltips
+
+## Features
+
+- [x] hover or focus
+- [x] if it has `tabindex="-1"`, it will not disappear when hovered
+- [x] position: top, right, bottom, left
+- [x] will stay inside the viewport
+- [x] event "u2-tooltip-show" when shown
+
+## Usage
+
+```html
+<button>
+    Tooltip
+    <u2-tooltip>now you see me</u2-tooltip>
+</button>
+```
+
+```css
+u2-tooltip {
+    pointer-events:auto;
+    background:#a09;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tooltip/tooltip.min.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/tooltip/tooltip.min.js" type=module async></script>
+```
+
+## Demos
+
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/minimal.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/el/tooltip/tests/test.html)  
+
+## Todo
+
+- popover when supported by browsers.
+
+## 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/tooltip/manifest.json

@@ -0,0 +1,69 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "tooltip.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "",
+                    "name": "tooltip",
+                    "members": [
+                    ],
+                    "events": [
+                        {
+                            "name": "u2-show",
+                            "type": {
+                                "text": "Event"
+                            }
+                        }
+                    ],
+                    "attributes": [
+                        {
+                            "name": "position",
+                            "description": "Position of the tooltip, will flip if there is not enough space",
+                            "u2-type": ["top", "bottom", "left", "right"]
+                        },{
+                            "name": "tabindex",
+                            "description": "Tabindex to make the tooltip focusable",
+                            "u2-type": "number"
+                        },{
+                            "name": "id",
+                            "description": "Other Elements can use this id to reference the Tooltip, if not set the Tooltip refers to its parent Element"
+                        },{
+                            "name": "open",
+                            "description": "Deprecated! It is just used to animate show and open. When animating popovers is supported, this will be removed.",
+                            "u2-type": "boolean",
+                            "deprecated": true
+                        },{
+                            "name": ":position-x",
+                            "description": "Read Only! Deprecated! Real position of the tooltip in x direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
+                            "u2-type": ["after", "before", "center"],
+                            "deprecated": true
+                        },{
+                            "name": ":position-y",
+                            "description": "Read Only! Deprecated! Real position of the tooltip in y direction used for arrow-styling. When custom states or anchore positionin arive this will be removed.",
+                            "u2-type": ["after", "before", "center"],
+                            "deprecated": true
+                        }
+                    ],
+                    "superclass": { "name": "HTMLElement" },
+                    "tagName": "u2-tooltip",
+                    "customElement": true
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-element-definition",
+                    "name": "u2-tooltip",
+                    "declaration": {
+                        "name": "tooltip",
+                        "module": "tooltip.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/el/tooltip/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>
+
+    <script src="../tooltip.js" type=module async></script>
+    <link rel=stylesheet href="../tooltip.css">
+
+<body>
+
+<section class="main">
+    <button>
+        Tooltip
+        <u2-tooltip>now you see me</u2-tooltip>
+    </button>
+</section>
+
+<style class="main">
+u2-tooltip {
+    pointer-events:auto;
+    background:#a09;
+}
+</style>

package/el/tooltip/tests/test.html

@@ -0,0 +1,178 @@
+<!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>
+
+    <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="../../../el/code/code.js" type=module async></script>
+    <link rel=stylesheet href="../../../el/code/code.css">
+
+    <script src="../tooltip.js" type=module async></script>
+    <link rel=stylesheet href="../tooltip.css">
+
+    <style>
+        button {
+            margin:.2rem;
+        }
+    </style>
+
+<body>
+
+<section>
+
+    <button>
+        focusable
+        <u2-tooltip tabindex=-1>Click on me and i will not disappear</u2-tooltip>
+    </button>
+
+    <button aria-labelledby=shared>shared1</button>
+    <button aria-labelledby=shared>shared2</button>
+    <u2-tooltip id=shared>Same tooltip for multiple elements</u2-tooltip>
+
+    <button>
+        <u2-tooltip>Saved the file</u2-tooltip>
+        save
+        <div aria-labelledby="nested1"" id="nested" style="background:black; display:inline">
+            <u2-tooltip>Nested test</u2-tooltip>
+            nested
+        </div>
+    </button>
+
+    <button>
+        ritch
+        <u2-tooltip tabindex="-1">
+            Super duper
+            <a href="#">more</a>
+        </u2-tooltip>
+    </button>
+
+    <button>
+        <u2-tooltip>
+            Longer text, Lorem Ispsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur consectetur, nisi nisl tincidunt nisi, eget porta nisl nisl euismod nisi.
+        </u2-tooltip>
+        long text
+    </button>
+
+    <hr>
+
+
+    <button style="margin-inline:auto; display:block">
+        position=top
+        <u2-tooltip position="top">Tooltip</u2-tooltip>
+    </button>
+    <button style="margin-inline:auto; display:block">
+        position=left
+        <u2-tooltip position="left">Tooltip</u2-tooltip>
+    </button>
+    <button style="margin-inline:auto; display:block">
+        position=right
+        <u2-tooltip position="right">Tooltip</u2-tooltip>
+    </button>
+    <button style="margin-inline:auto; display:block">
+        position=bottom
+        <u2-tooltip position="bottom">Tooltip</u2-tooltip>
+    </button>
+
+
+    <button style="position:absolute; bottom:2rem; left:2rem">
+        Tooltip should stay in viewport
+        <u2-tooltip>
+            Does it?
+        </u2-tooltip>
+    </button>
+
+    <br><br>
+
+    <label>
+        label
+        <input aria-labelledby="ttinp" value="input">
+        <u2-tooltip id="ttinp">Tooltip using aria-labelledby</u2-tooltip>
+    </label>
+
+    <br><br>
+
+    <ul>
+        <li><span aria-labelledby="dyn">Apple</span>
+        <li><span aria-labelledby="dyn">Banana</span>
+        <li><span aria-labelledby="dyn">Orange</span>
+    </ul>
+    <u2-tooltip id=dyn></u2-tooltip>
+    <script>
+        dyn.addEventListener('u2-show', function(e) {
+            dyn.innerHTML = `This is a great ${e.detail.target.innerText}`;
+        });
+    </script>
+
+
+    <u2-code editable trim>
+        <style>
+        u2-tooltip {
+            font-size:max(12px, .7rem);
+            --line-height: 1.4em;
+            padding:.5rem;
+            background:var(--color-text);
+            color:var(--color-bg);
+            border-radius:.3rem;
+        }
+        u2-tooltip a {
+            color:var(--color-light);
+        }
+
+
+        /* arrow */
+        u2-tooltip::after {
+            --size:1em;
+            content: "";
+            position:absolute;
+            transform:rotate(45deg);
+            width:var(--size);
+            height:var(--size);
+            background-color: inherit;
+            margin:auto;
+            z-index:-1;
+        }
+        u2-tooltip[\:position-x="after"]::after {
+            left:calc( var(--size) * -.5);
+        }
+        u2-tooltip[\:position-x="before"]::after {
+            right:calc( var(--size) * -.5);
+        }
+        u2-tooltip[\:position-x="center"]::after {
+            right:0;
+            left:0;
+        }
+        u2-tooltip[\:position-y="after"]::after {
+            top:calc( var(--size) * -.5);
+        }
+        u2-tooltip[\:position-y="before"]::after {
+            bottom:calc( var(--size) * -.5);
+        }
+        u2-tooltip[\:position-y="center"]::after {
+            top:0;
+            bottom:0;
+        }
+        </style>
+    </u2-code>
+
+
+    <button onclick="dialog1.showModal()">
+        Show dialog
+    </button>
+    <dialog id="dialog1">
+       <h1>Dialog</h1>
+        <button>
+            focus or hover me
+            <u2-tooltip position=right>Test if tooltip works inside dialog</u2-tooltip>
+        </button>
+        <br>
+        If tooltips are not using popover attribute,<br>
+        they can not be over dialog. <br>
+    </dialog>
+
+</section>