u2ui 1.0.1 → 1.4.5

package/el/textfit/manifest.json

@@ -1,45 +1,33 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "textfit.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "textfit",
-                    "members": [
-                    ],
-                    "events": [
-                    ],
-                    "attributes": [
-                    ],
-                    "cssProperties": [
-                        {
-                            "name": "--js-font-size",
-                            "syntax": "<length>",
-                            "description": "Read only! The optimal font-size. This var can be used like this: font-size: clamp(14px, var(--js-font-size), 24px);"
-                        }
-                    ],
-                    "cssParts": [
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-textfit",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-textfit",
-                    "declaration": {
-                        "name": "textfit",
-                        "module": "textfit.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "textfit.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Textfit",
+            "members": [],
+            "events": [],
+            "attributes": [],
+            "cssProperties": [{
+                "name": "--js-font-size",
+                "syntax": "<length>",
+                "description": "Read only! The optimal font-size. This var can be used like this: font-size: clamp(14px, var(--js-font-size), 24px);"
+            }],
+            "cssParts": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-textfit",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-textfit",
+            "declaration": {
+                "name": "U2Textfit",
+                "module": "textfit.js"
+            }
+        }]
+    }]
+}

package/el/textfit/textfit.css

@@ -1,6 +1,6 @@
-u2-textfit {
-    display:block;
-    white-space:nowrap;
-    font-size:var(--js-font-size);
-    font-size: clamp(11px, var(--js-font-size), 400px);
+u2-textfit {
+    display:block;
+    white-space:nowrap;
+    font-size:var(--js-font-size);
+    font-size: clamp(11px, var(--js-font-size), 400px);
 }

package/el/textfit/textfit.js

@@ -1,80 +1,80 @@
-const throttle = (func, ms) => {
-    let timeOut;
-    return (...args) => {
-        if (timeOut) return;
-        timeOut = setTimeout(()=>{
-            requestAnimationFrame(()=>{
-                func(...args);
-                timeOut = null;
-            });
-        }, ms);
-    }
-}
-
-class textfit extends HTMLElement {
-    constructor() {
-        super();
-        let shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-        <style>
-        :host {
-            isolation:isolate;
-            contain: inline-size;
-            display:block;
-            max-width: 100%;
-        }
-        slot {
-            display:block;
-        }
-        </style>
-        <slot></slot>
-        `;
-        this.slotEl = shadowRoot.querySelector('slot');
-
-        this.render = throttle(this.render.bind(this), 20);
-        //this.render = this.render.bind(this);
-
-        this.addEventListener('input',this.render); // contenteditable
-        addEventListener('load',this.render); // e.g. font switch
-        this._rObserver = new ResizeObserver(this.render);  // todo? render can in turn trigger the observer, should we intercept that?
-    }
-
-    connectedCallback() {
-        this.render();
-        this._rObserver && this._rObserver.observe(this);
-    }
-    disconnectedCallback() {
-        removeEventListener('load',this.render); // e.g. font switch
-        this._rObserver.disconnect(this);
-    }
-
-    render(e){
-        const style = getComputedStyle(this);
-        const font   = style.getPropertyValue('font-family');
-        const weight = style.getPropertyValue('font-weight');
-        const fStyle = style.getPropertyValue('font-style');
-        const canvas = document.createElement('canvas');
-        const c2d = canvas.getContext('2d');
-        c2d.direction = 'ltr';
-        c2d.font = fStyle + ' ' + weight + ' 100px ' + font;
-        const text = this.innerText;
-        const measure = c2d.measureText(text);
-        const left  = measure.actualBoundingBoxLeft;
-        const right = measure.actualBoundingBoxRight;
-        //const ascent = measure.actualBoundingBoxAscent;
-        //const descent = measure.actualBoundingBoxDescent;
-
-//this.style.fontSize = '1px';
-        const space = this.clientWidth; // how wide is the content, with the smallest font-size possible
-//this.style.fontSize = '';
-
-        this.slotEl.style.marginLeft = left/100 + 'em';
-
-        const widthAt100px = right + left;
-        let fs = (space / widthAt100px) * 100;
-
-        this.style.setProperty('--js-font-size', fs+'px');
-    }
-}
-
-customElements.define('u2-textfit', textfit);
+const throttle = (func, ms) => {
+    let timeOut;
+    return (...args) => {
+        if (timeOut) return;
+        timeOut = setTimeout(()=>{
+            requestAnimationFrame(()=>{
+                func(...args);
+                timeOut = null;
+            });
+        }, ms);
+    }
+}
+
+export default class U2Textfit extends HTMLElement {
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+        <style>
+        :host {
+            isolation:isolate;
+            contain: inline-size;
+            display:block;
+            max-width: 100%;
+        }
+        slot {
+            display:block;
+        }
+        </style>
+        <slot></slot>
+        `;
+        this.slotEl = shadowRoot.querySelector('slot');
+
+        this.render = throttle(this.render.bind(this), 20);
+        //this.render = this.render.bind(this);
+
+        this.addEventListener('input',this.render); // contenteditable
+        this._rObserver = new ResizeObserver(this.render);  // todo? render can in turn trigger the observer, should we intercept that?
+    }
+
+    connectedCallback() {
+        addEventListener('load',this.render); // e.g. font switch
+        this.render();
+        this._rObserver && this._rObserver.observe(this);
+    }
+    disconnectedCallback() {
+        removeEventListener('load',this.render); // e.g. font switch
+        this._rObserver.disconnect(this);
+    }
+
+    render(e){
+        const style = getComputedStyle(this);
+        const font   = style.getPropertyValue('font-family');
+        const weight = style.getPropertyValue('font-weight');
+        const fStyle = style.getPropertyValue('font-style');
+        const canvas = document.createElement('canvas');
+        const c2d = canvas.getContext('2d');
+        c2d.direction = 'ltr';
+        c2d.font = fStyle + ' ' + weight + ' 100px ' + font;
+        const text = this.innerText;
+        const measure = c2d.measureText(text);
+        const left  = measure.actualBoundingBoxLeft;
+        const right = measure.actualBoundingBoxRight;
+        //const ascent = measure.actualBoundingBoxAscent;
+        //const descent = measure.actualBoundingBoxDescent;
+
+//this.style.fontSize = '1px';
+        const space = this.clientWidth; // how wide is the content, with the smallest font-size possible
+//this.style.fontSize = '';
+
+        this.slotEl.style.marginLeft = left/100 + 'em';
+
+        const widthAt100px = right + left;
+        let fs = (space / widthAt100px) * 100;
+
+        this.style.setProperty('--js-font-size', fs+'px');
+    }
+}
+
+customElements.define('u2-textfit', U2Textfit);

package/el/time/README.md

@@ -9,25 +9,26 @@ The better time-element, e.g. live changing relative dates
 ## Usage
 
 ```html
-<u2-time datetime="2013-04-01T18:02" type=relative lang=de>1. April 2013 18:02</u2-time>.
+<u2-time datetime="2013-04-01T18:02" type=relative lang=de>
+    1. April 2013 18:02
+</u2-time>.
 ```
 
 ```css
-u2-time {
+u2-time {
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/time/time.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/time/time.min.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/time/time.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/time/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/time/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/time/tests/minimal.html)  
 
 ## Attributes
 

package/el/time/manifest.json

@@ -1,118 +1,79 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "time.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "A better time-element, e.g. live changing relative dates",
-            "name": "u2-time",
-            "members": [
-              {
-                "kind": "method",
-                "name": "render",
-                "description": "Render the time element"
-              },
-              {
-                "kind": "method",
-                "name": "reset",
-                "description": "Reset the time element"
-              },
-              {
-                "kind": "method",
-                "name": "attributeChanged",
-                "description": "Handle attribute changes"
-              },
-              {
-                "kind": "method",
-                "name": "connected",
-                "description": "Handle element connection"
-              },
-              {
-                "kind": "method",
-                "name": "disconnected",
-                "description": "Handle element disconnection"
-              }
-            ],
-            "events": [],
-            "attributes": [
-              {
-                "name": "datetime",
-                "description": "The date and time to display, in ISO 8601 format"
-              },
-              {
-                "name": "lang",
-                "description": "The language to use for formatting the date and time",
-                "u2Examples": ["de-CH","de","fr-CA","ja-JP","zh-Hans-CN"]
-              },
-              {
-                "name": "type",
-                "description": "The type of display to use, either 'date' or 'relative'",
-                "u2-type": ["date","relative"]
-              },
-              {
-                "name": "weekday",
-                "description": "The format to use for the weekday, either 'narrow', 'short', 'long', or 'none'",
-                "u2-type": ["narrow","short","long","none"]
-              },
-              {
-                "name": "year",
-                "description": "The format to use for the year, either 'numeric', '2-digit', or 'none'",
-                "u2-type": ["numeric","2-digit","none"]
-              },
-              {
-                "name": "month",
-                "description": "The format to use for the month, either 'numeric', '2-digit', 'narrow', 'short', 'long', or 'none'",
-                "u2-type": ["numeric","2-digit","narrow","short","long","none"]
-              },
-              {
-                "name": "day",
-                "description": "The format to use for the day, either 'numeric', '2-digit', or 'none'",
-                "u2-type": ["numeric","2-digit","none"]
-              },
-              {
-                "name": "hour",
-                "description": "The format to use for the hour, either 'numeric', '2-digit', or 'none'",
-                "u2-type": ["numeric","2-digit","none"]
-              },
-              {
-                "name": "minute",
-                "description": "The format to use for the minute, either 'numeric', '2-digit', or 'none'",
-                "u2-type": ["numeric","2-digit","none"]
-              },
-              {
-                "name": "second",
-                "description": "The format to use for the second, either 'numeric', '2-digit', or 'none'",
-                "u2-type": ["numeric","2-digit","none"]
-              },
-              {
-                "name": "mode",
-                "description": "The mode to use for the relative type, either 'narrow', 'short', or 'long'",
-                "u2-type": ["narrow","short","long"]
-              }
-            ],
-            "cssProperties": [],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-time",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-time",
-            "declaration": {
-              "name": "u2-time",
-              "module": "time.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "time.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A better time-element, e.g. live changing relative dates",
+            "name": "U2Time",
+            "members": [{
+                "kind": "method",
+                "name": "render",
+                "description": "Render the time element"
+            },{
+                "kind": "method",
+                "name": "reset",
+                "description": "Reset the time element"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "datetime",
+                "description": "The date and time to display, in ISO 8601 format"
+            },{
+                "name": "lang",
+                "description": "The language to use for formatting the date and time",
+                "u2Examples": ["de-CH", "de", "fr-CA", "ja-JP", "zh-Hans-CN"]
+            },{
+                "name": "type",
+                "description": "The type of display to use, either 'date' or 'relative'",
+                "u2-type": ["date", "relative"]
+            },{
+                "name": "weekday",
+                "description": "The format to use for the weekday, either 'narrow', 'short', 'long', or 'none'",
+                "u2-type": ["narrow", "short", "long", "none"]
+            },{
+                "name": "year",
+                "description": "The format to use for the year, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric", "2-digit", "none"]
+            },{
+                "name": "month",
+                "description": "The format to use for the month, either 'numeric', '2-digit', 'narrow', 'short', 'long', or 'none'",
+                "u2-type": ["numeric", "2-digit", "narrow", "short", "long", "none"]
+            },{
+                "name": "day",
+                "description": "The format to use for the day, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric", "2-digit", "none"]
+            },{
+                "name": "hour",
+                "description": "The format to use for the hour, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric", "2-digit", "none"]
+            },{
+                "name": "minute",
+                "description": "The format to use for the minute, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric", "2-digit", "none"]
+            },{
+                "name": "second",
+                "description": "The format to use for the second, either 'numeric', '2-digit', or 'none'",
+                "u2-type": ["numeric", "2-digit", "none"]
+            },{
+                "name": "mode",
+                "description": "The mode to use for the relative type, either 'narrow', 'short', or 'long'",
+                "u2-type": ["narrow", "short", "long"]
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-time",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-time",
+            "declaration": {
+                "name": "U2Time",
+                "module": "time.js"
+            }
+        }]
+    }]
+}