u2ui 1.0.1 → 1.4.6

package/el/responsive/manifest.json

@@ -0,0 +1,41 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "responsive.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A responsive container that applies different strategies based on available space.",
+            "name": "U2Responsive",
+            "members": [],
+            "events": [{
+                "name": "u2-responsive-strategy-add",
+                "description": "Fired before a strategy is about to be added. Can be prevented.",
+                "detail": "{ strategy: string }"
+            },{
+                "name": "u2-responsive-strategy-remove",
+                "description": "Fired before a strategy is about to be removed. Can be prevented.",
+                "detail": "{ strategy: string }"
+            }],
+            "attributes": [{
+                "name": "strategies",
+                "description": "Space-separated list of strategy names that are applied through CSS states if the container shrinks.",
+                "u2Examples": ["hide-optional break"]
+            }],
+            "cssProperties": [],
+            "slots": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-responsive",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-responsive",
+            "declaration": {
+                "name": "U2Responsive",
+                "module": "responsive.js"
+            }
+        }]
+    }]
+}

package/el/responsive/responsive.css

@@ -0,0 +1,4 @@
+u2-responsive {
+    display: block;
+    overflow-x: auto;
+}

package/el/responsive/responsive.js

@@ -0,0 +1,143 @@
+export default class U2Responsive extends HTMLElement {
+    constructor() {
+        super();
+        this._internals = this.attachInternals();
+        this.currentLevel = 0;
+        this.lastWidth = Infinity;
+        this.criticalWidths = new Map();
+        this.resizeObserver = new ResizeObserver(() => this.updateStrategy());
+    }
+    
+    static observedAttributes = ['mutation'];
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'mutation') setMutationObserver(this, newValue !== null);
+    }
+    connectedCallback() {
+        this.resizeObserver.observe(this);
+        setMutationObserver(this, this.getAttribute('mutation') !== null);
+    }
+    disconnectedCallback() {
+        this.resizeObserver.disconnect();
+        setMutationObserver(this, false);
+    }
+
+    get strategies() { 
+        return this.getAttribute('strategies')?.match(/\S+/g)
+            || ['overflow-1','overflow-2','overflow-3','overflow-4','overflow-5','overflow-6']
+    }
+
+    applyStrategy(type, strategy) {
+        const event = new CustomEvent(`u2-responsive-strategy-${type}`, {
+            detail: { strategy },
+            bubbles: true,
+            cancelable: true
+        });
+        this.dispatchEvent(event) && this._internals.states[type==='add'?'add':'delete'](strategy);
+        // Wait for potential DOM changes //await new Promise(resolve => requestAnimationFrame(resolve));
+    }
+    applyStrategies(level) {
+        const strats = this.strategies;
+        const current = new Set(this._internals.states);
+        const target  = new Set(strats.slice(0, level));
+        for (const s of current) !target .has(s) && this.applyStrategy('remove', s); // Remove strategies
+        for (const s of target ) !current.has(s) && this.applyStrategy('add', s); // Add strategies
+    }
+
+    updateStrategy() {
+        const width = this.clientWidth;
+        const strats = this.strategies;
+         
+        let growing = width > this.lastWidth;
+        this.lastWidth = width;
+
+        // debounce, not test every growing pixel if criticalWidth is known
+        if (growing && this.currentLevel > 0) {
+            const criticalWidth = this.criticalWidths.get(this.currentLevel-1);
+            let margin = 0;
+            if (criticalWidth !=null) {
+                const distanceToCritical = criticalWidth - width;
+                margin = Math.max(0, distanceToCritical / 1);
+            }
+            const growCheck = width > this.lastGrowingCheckAt + margin;
+
+            if (growCheck) {
+                this.lastGrowingCheckAt = width; // reset by trying
+                this.applyStrategies(--this.currentLevel); // try
+            }
+
+        } else {
+            this.lastGrowingCheckAt = width; // reset by shrinking
+        }
+
+        while (this.scrollWidth > this.clientWidth && this.currentLevel < strats.length) { // while it overflows (and has more strategies left)
+            if (!growing) this.criticalWidths.set(this.currentLevel, width);
+            this.applyStrategies(++this.currentLevel);
+        }
+    }
+
+    debug(){
+        const div = document.createElement('div');
+        document.body.appendChild(div);
+
+        setInterval(()=>{
+            const position = this.getBoundingClientRect();
+            div.style.cssText = `background:#999; position:absolute; top:${position.top-20}px; left:${position.left}px; width:${position.width}px; height:7px; font-size:11px`;
+
+            this.strategies.forEach((name, level) => {
+                const expectedWidth = this.criticalWidths.get(level);
+                const id = 'debugMarker'+level;
+                const marker = div.querySelector('#'+id) || document.createElement('div');
+                marker.id = id;
+                marker.style.cssText = `position:absolute; width:2px; height:20px; background:red; white-space:nowrap;`;
+                marker.innerHTML = 
+                    `<div style="position:absolute; left:-20px; bottom:20px; line-height:1.1; background:#fff7; padding:.3em; writing-mode:sideways-lr">
+                        ${name}<br> level: ${level+1}
+                    </div>`;
+
+                if (expectedWidth) {
+                    marker.style.left = expectedWidth+'px';
+                    marker.style.top = '-10px';
+                } else {
+                    marker.style.left = '-20px'; 
+                    marker.style.top = '-120px';
+                }
+                
+                div.append(marker);
+            });
+
+            const tryGrowingAt = this.lastGrowingCheckAt;
+            if (tryGrowingAt) {
+                const marker = div.querySelector('#tryGrowingAt') || document.createElement('div');
+                marker.id = 'tryGrowingAt';
+                marker.style.cssText = `position:absolute; width:2px; height:20px; background:blue; white-space:nowrap; text-aligen:center`;
+                marker.style.left = tryGrowingAt+'px';
+                marker.style.top = '-10px';
+                div.append(marker);
+            }
+
+            
+        },20);
+
+    }
+}
+
+customElements.define('u2-responsive', U2Responsive);
+
+
+
+function setMutationObserver(el, active){
+    if (active) {
+        el.mutationObserver ??= new MutationObserver(() => {
+            el.lastWidth = 0; // Force re-check for shrinking
+            el.lastGrowingCheckAt = null; // Force re-check for growing
+            el.updateStrategy()
+        });
+        el.mutationObserver.observe(el, {  childList: true,  subtree: true,  characterData: true, attributes: true });
+    } else {
+        el.mutationObserver?.disconnect();
+        el.mutationObserver = null;
+    }
+}
+

package/el/rte/README.md

@@ -4,31 +4,31 @@
 ## Usage
 
 ```html
-<u2-rte style="--u2-rte-toolbar:Bold Italic">
-    <strong>RTE</strong>
-    <br>
-    <i>(Rich Text Editor)</i>
+<u2-rte style="--u2-rte-toolbar:Bold Italic">
+    <strong>RTE</strong>
+    <br>
+    <i>(Rich Text Editor)</i>
 </u2-rte>
 ```
 
 ```css
-u2-rte {
-    --u2-rte:true;
-    --u2-rte-toolbar:Bold Italic;
+u2-rte {
+    --u2-rte:true;
+    --u2-rte-toolbar:Bold Italic;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/rte/rte.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/rte/rte.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rte/rte.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rte/rte.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/rte/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/rte/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/rte/tests/minimal.html)  
 
 ## About
 

package/el/rte/manifest.json

@@ -0,0 +1,33 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "rte.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "\"Rich\" Rich Text Editor (alpha)",
+            "name": "U2Rte",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--u2-rte-toolbar",
+                "description": "Space separated list of toolbar commands",
+                "syntax": "*"
+            },{
+                "name": "--u2-rte",
+                "description": "Marks regions as rich-text editable",
+                "syntax": "*"
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-rte",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-rte",
+            "declaration": { "name": "U2Rte", "module": "rte.js" }
+        }]
+    }]
+}

package/el/rte/rte.css

@@ -1,9 +1,9 @@
-u2-rte {
-    display:block;
-    border:1px solid var(--color-line, #ccc);
-}
-
-u2-rte > textarea {
-    display:block;
-    width:100%;
-}
+u2-rte {
+    display:block;
+    border:1px solid var(--color-line, #ccc);
+}
+
+u2-rte > textarea {
+    display:block;
+    width:100%;
+}

package/el/rte/rte.js

@@ -1,56 +1,56 @@
-
-import '../../js/rte/rte.js';
-
-class rte extends HTMLElement {
-    constructor() {
-        super();
-        let shadowRoot = this.attachShadow({mode:'open'});
-        shadowRoot.innerHTML =
-        `<style>
-        :host {
-            display:block;
-            --u2-rte:true;
-        }
-        #editor {
-            --u2-rte:true;
-            padding:1px; /* to avoid margin collapse */
-        }
-        </style>
-        <div id=editor contenteditable></div>
-        `;
-        //this.setAttribute('contenteditable', true);
-        this.editor = this.shadowRoot.getElementById('editor');
-
-        this.editor.addEventListener('input', (event)=>{
-            const html = this.editor.innerHTML;
-            const value = html;
-            if (this.textarea) {
-                this.textarea.value = value;
-            } else {
-                this.innerHTML = value;
-            }
-        });
-
-    }
-    connectedCallback() {
-        if (this.children.length === 1 && this.children[0].tagName === 'TEXTAREA') {
-            this.textarea = this.children[0];
-        }
-        let sourceValue = this.textarea ? this.textarea.value : this.innerHTML;
-        this.editor.innerHTML = sourceValue;
-        
-        this._internals = this.attachInternals();
-        this._internals.role = 'textbox';
-    }
-}
-
-customElements.define('u2-rte', rte);
-
-
-// import Showdown from 'https://cdn.skypack.dev/showdown';
-// const converter = new Showdown.Converter();
-// converter.setOption('tables', true);
-// this.editor.innerHTML = converter.makeHtml(sourceValue);
-
-// import TurndownService from 'https://cdn.skypack.dev/turndown@7.1.1';
-// value = new TurndownService().turndown(html);
+
+import '../../js/rte/rte.js';
+
+export default class U2Rte extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode:'open'});
+        shadowRoot.innerHTML =
+        `<style>
+        :host {
+            display:block;
+            --u2-rte:true;
+        }
+        #editor {
+            --u2-rte:true;
+            padding:1px; /* to avoid margin collapse */
+        }
+        </style>
+        <div id=editor contenteditable></div>
+        `;
+        //this.setAttribute('contenteditable', true);
+        this.editor = this.shadowRoot.getElementById('editor');
+
+        this.editor.addEventListener('input', (event)=>{
+            const html = this.editor.innerHTML;
+            const value = html;
+            if (this.textarea) {
+                this.textarea.value = value;
+            } else {
+                this.innerHTML = value;
+            }
+        });
+
+    }
+    connectedCallback() {
+        if (this.children.length === 1 && this.children[0].tagName === 'TEXTAREA') {
+            this.textarea = this.children[0];
+        }
+        let sourceValue = this.textarea ? this.textarea.value : this.innerHTML;
+        this.editor.innerHTML = sourceValue;
+        
+        this._internals = this.attachInternals();
+        this._internals.role = 'textbox';
+    }
+}
+
+customElements.define('u2-rte', U2Rte);
+
+
+// import Showdown from 'https://cdn.skypack.dev/showdown';
+// const converter = new Showdown.Converter();
+// converter.setOption('tables', true);
+// this.editor.innerHTML = converter.makeHtml(sourceValue);
+
+// import TurndownService from 'https://cdn.skypack.dev/turndown@7.1.1';
+// value = new TurndownService().turndown(html);

package/el/skeleton/README.md

@@ -14,14 +14,14 @@ Display a skeleton of the element. This is useful for showing the user where the
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/skeleton/skeleton.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/skeleton/skeleton.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/skeleton/skeleton.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/skeleton/skeleton.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/skeleton/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/skeleton/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/skeleton/tests/minimal.html)  
 
 ## About
 

package/el/skeleton/manifest.json

@@ -1,51 +1,37 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "skeleton.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "skeleton",
-                    "members": [
-                    ],
-                    "events": [
-                    ],
-                    "attributes": [
-                        {
-                            "name": "template",
-                            "description": "The template to render. eg: 'h2 p p table(3x4) button'",
-                            "u2Examples": ["h2 p p table(3x4) button", "p img p"]
-                        }
-                    ],
-                    "slots": [
-                    ],
-                    "cssProperties": [
-                        {
-                            "name": "--u2-skeleton-color",
-                            "description": "The color of the skeleton",
-                            "u2Examples": ["#f0f0f0", "#fee", "#eef"]
-                        }
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-skeleton",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-skeleton",
-                    "declaration": {
-                        "name": "skeleton",
-                        "module": "skeleton.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
-
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "skeleton.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Skeleton",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "template",
+                "description": "The template to render. eg: 'h2 p p table(3x4) button'",
+                "u2Examples": ["h2 p p table(3x4) button", "p img p"]
+            }],
+            "slots": [],
+            "cssProperties": [{
+                "name": "--u2-skeleton-color",
+                "description": "The color of the skeleton",
+                "u2Examples": ["#f0f0f0", "#fee", "#eef"]
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-skeleton",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-skeleton",
+            "declaration": {
+                "name": "U2Skeleton",
+                "module": "skeleton.js"
+            }
+        }]
+    }]
+}

package/el/skeleton/skeleton.css

@@ -1,61 +1,68 @@
-:is(u2-skeleton, #strong) {
-    display:block;
-    opacity:1 !important;
-    --u2-skeleton-color: #f0f0f0;
-    color: var(--u2-skeleton-color);
-
-    --darker: color-mix(in srgb, var(--u2-skeleton-color), black 5%);
-    --lighter: color-mix(in srgb, var(--u2-skeleton-color), white 20%);
-    --bg: repeating-linear-gradient(45deg, var(--darker), var(--lighter), var(--darker) 50%) 0% 0% / 100px 100px repeat fixed;
-    --animation: skeleton-bg 17s linear infinite;
-
-
-    & span, :is(p,td,th,button,h1,h2,h3,h4,h5,h6):empty::before {
-        content: "text text";
-        display:inline;
-        -webkit-box-decoration-break: clone;
-        box-decoration-break: clone;
-
-        background: var(--bg);
-        animation: var(--animation);
-
-        color: transparent;
-    }
-    & :is(h1,h2,h3,h4,h5,h6):empty::before {
-        content: "Lorem ipsum dolor sit amet";
-    }
-    & p:empty::before {
-        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis auctor, lacinia nunc nec, ultricies nunc.";
-    }
-    & :is(th, td):empty::before {
-        content: "Some text";
-    }
-    & button:empty::before {
-        content: "Button";
-        background: var(--bg);
-        animation: var(--animation);
-    }
-    & img {
-        border:0;
-        width: 20em;
-        aspect-ratio: 3/2;
-        background: var(--bg);
-        animation: var(--animation);
-    }
-    & button {
-        background: var(--bg);
-        animation: var(--animation);
-        border: 0;
-    }
-
-}
-
-
-@keyframes skeleton-bg {
-    0% {
-      background-position: 0% 0%;
-    }
-    100% {
-      background-position: 100% 0%;
-    }
+:is(u2-skeleton, #strong) {
+    display:block;
+    opacity:1 !important;
+
+    /*
+    --u2-skeleton-color: #f0f0f0;
+    --darker: color-mix(in srgb, var(--u2-skeleton-color), black 5%);
+    --lighter: color-mix(in srgb, var(--u2-skeleton-color), white 20%);
+    --bg: repeating-linear-gradient(45deg, var(--darker), var(--lighter), var(--darker) 50%) 0% 0% / 100px 100px repeat fixed;
+    */
+
+    --darker: #e6e6e6;
+    --lighter: #f7f7f7;
+    --bg: repeating-linear-gradient(45deg, var(--darker), var(--lighter), var(--darker) 50%) 0% 0% / 100px 100px repeat;
+
+    --animation: skeleton-bg 1s linear infinite;
+
+    & span, :is(p,td,th,button,h1,h2,h3,h4,h5,h6):empty::before {
+        content: "text text";
+        display:inline;
+        -webkit-box-decoration-break: clone;
+        box-decoration-break: clone;
+        background: var(--bg);
+        animation: var(--animation);
+        color: transparent;
+    }
+    & :is(h1,h2,h3,h4,h5,h6):empty::before {
+        content: "Lorem ipsum dolor sit amet";
+    }
+
+    & p:empty::before { content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis auctor, lacinia nunc nec, ultricies nunc."; }
+    & p:nth-of-type(2n):empty::before { content: "Cras facilisis velit at dui dapibus, quis fermentum urna scelerisque. Sed euismod, sapien eget luctus gravida, lectus justo tincidunt erat."; }
+    & p:nth-of-type(3n):empty::before { content: "Integer dictum, purus in varius pharetra, ipsum nisi posuere enim, vitae cursus nisi justo vitae justo."; }
+
+    & :is(td):empty::before { content: "Lorem ipsum"; }
+    & :is(td):nth-of-type(2n):empty::before { content: "Cars facilisis"; }
+    & :is(td):nth-of-type(3n):empty::before { content: "Integer dictum"; }
+
+    & img {
+        border:0;
+        width: 20em;
+        aspect-ratio: 3/2;
+        background: var(--bg);
+        animation: var(--animation);
+    }
+    & button {
+        background: var(--bg);
+        animation: var(--animation);
+        border: 0;
+        margin-left: .5rem;
+    }
+    & button:empty::before {
+        content: "Button";
+    }
+
+}
+
+/*
+@keyframes skeleton-bg {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 100% 0%; }
+}
+    */
+
+@keyframes skeleton-bg {
+    0% { background-position: 0% 0%; }
+    100% { background-position: 100px 0%; }
 }