u2ui 1.0.1 → 1.4.5

package/el/bytes/bytes.js

@@ -1,97 +1,98 @@
-
-class Bytes 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.value;
-        if (value === null) return this.outEl.innerHTML = '-';
-
-        const digits = this.getAttribute('digits') || 3;
-        const locales = localesFromElement(this);
-        const formatter = new Intl.NumberFormat(locales, {
-            minimumFractionDigits: 0,
-            maximumFractionDigits: 1,
-            maximumSignificantDigits: digits,
-        });
-
-        const {number, compact, unit, space} = convertBytes(value, {useBinaryUnits: false, locale: locales[0]});
-        let html = formatter.formatToParts(number).map(part => `<span part="${part.type}">${part.value}</span>`).join('');
-        if (space !== '') html += `<span part="literal">${space}</span>`;
-        html += `<span part="compact">${compact}</span>`;
-        html += `<span part="unit">${unit}</span>`;
-
-        this.outEl.innerHTML = html;
-    }
-    static observedAttributes = ['digits','value','lang'];
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal) return;
-        this.render();
-    }
-    set value(val) {
-        this.setAttribute('value', val);
-    }
-    get value() {
-        let value = this.getAttribute('value') ?? this.innerHTML;
-        value = value.trim();
-        if (value==='') return null;
-        return parseFloat(value);
-    }
-}
-
-customElements.define('u2-bytes', Bytes);
-
-
-function localesFromElement(el) {
-    let langEl = el.closest('[lang]')||document.documentElement;
-    const locale = langEl.lang || navigator.language;
-    return [locale, ...navigator.languages];
-}
-
-function convertBytes(bytes, options) {
-    const { binary = false } = options;
-
-    const locale = options.locale || 'en';
-    const lang = locale.substring(0, 2);
-    
-    const base = binary ? 1024 : 1000;
-    let compact = binary ?  ["", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi"] : ["", "k", "M", "G", "T", "P", "E", "Z", "Y"];
-    // kyrillisch
-    if (lang === 'ru' || lang === 'uk' || lang === 'be') {
-        compact = binary ? ["", "Ки", "Ми", "Ги", "Ти", "Пи", "Эи", "Зи", "Йи"] : ["", "к", "М", "Г", "Т", "П", "Э", "З", "Й"];
-    }
-
-    const i = Math.floor(Math.log(Math.abs(bytes)) / Math.log(base));
-
-    let unit = 'B';
-    if (i === 0) {
-        unit = 'byte';
-        if (lang === 'de') unit = 'Byte';
-    }
-    if (lang === 'fr') unit = 'o';
-    if (lang === 'ru') unit = 'б';
-    
-    let space = '\u00A0'; // nbsp
-    if (lang === 'fr') space = '\u202f';
-    if (lang === 'jp') space = '';
-    if (lang === 'cn') space = '';
-    if (lang === 'zh') space = '';
-  
-    return {
-        number: bytes / Math.pow(base, i),
-        space: space,
-        compact: compact[i],
-        unit: unit,
-    };
-}
+
+export default class U2Bytes 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.value;
+        if (value === null) return this.outEl.innerHTML = '-';
+        if (isNaN(value)) {
+            console.warn('Invalid number', value, this);
+            this.outEl.innerHTML = 'NaN';
+            return;
+        }
+
+        const digits = this.getAttribute('digits') || 3;
+        const locales = localesFromElement(this);
+        const formatter = new Intl.NumberFormat(locales, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 1,
+            maximumSignificantDigits: digits,
+        });
+
+        const {number, compact, unit, space} = convertBytes(value, {binary: false, locale: locales[0]});
+        let html = formatter.formatToParts(number).map(part => `<span part="${part.type}">${part.value}</span>`).join('');
+        if (space !== '') html += `<span part="literal">${space}</span>`;
+        html += `<span part="compact">${compact}</span>`;
+        html += `<span part="unit">${unit}</span>`;
+
+        this.outEl.innerHTML = html;
+    }
+    static observedAttributes = ['digits','value','lang'];
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal) return;
+        this.render();
+    }
+    set value(val) {
+        this.setAttribute('value', val);
+    }
+    get value() {
+        let value = this.getAttribute('value') ?? this.textContent;
+        value = value.trim();
+        return value === '' ? null : parseFloat(value);
+    }
+}
+
+customElements.define('u2-bytes', U2Bytes);
+
+
+function localesFromElement(el) {
+    let langEl = el.closest('[lang]')||document.documentElement;
+    const locale = langEl.lang || navigator.language;
+    return [locale, ...navigator.languages];
+}
+
+function convertBytes(bytes, options) {
+    const { binary = false } = options;
+
+    const locale = options.locale || 'en';
+    const lang = locale.substring(0, 2);
+    
+    const base = binary ? 1024 : 1000;
+    let compact = binary ?  ["", "Ki", "Mi", "Gi", "Ti", "Pi", "Ei", "Zi", "Yi"] : ["", "k", "M", "G", "T", "P", "E", "Z", "Y"];
+    // kyrillisch
+    if (lang === 'ru' || lang === 'uk' || lang === 'be') {
+        compact = binary ? ["", "Ки", "Ми", "Ги", "Ти", "Пи", "Эи", "Зи", "Йи"] : ["", "к", "М", "Г", "Т", "П", "Э", "З", "Й"];
+    }
+
+    let i = bytes === 0 ? 0 : Math.floor(Math.log(Math.abs(bytes)) / Math.log(base));
+    i = Math.min(Math.max(0, i), compact.length - 1);
+
+    let unit = 'B';
+    if (i === 0) {
+        unit = 'byte';
+        if (lang === 'de') unit = 'Byte';
+    }
+    if (lang === 'fr') unit = 'o';
+    if (lang === 'ru') unit = 'б';
+    
+    const space = lang === 'fr' ? '\u202f' : (lang === 'ja' || lang === 'zh') ? '' : '\u00A0'; // nbsp
+  
+    return {
+        number: bytes / Math.pow(base, i),
+        space: space,
+        compact: compact[i],
+        unit: unit,
+    };
+}

package/el/bytes/manifest.json

@@ -1,95 +1,90 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-    {
-        "kind": "javascript-module",
-        "path": "bytes.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "Displays formatted bytes",
-            "name": "u2-bytes",
-            "members": [
-                {
-                    "kind": "field",
-                    "description": "Set or get the value of the bytes",
-                    "name": "value"
-                }
-            ],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "value",
-                    "description": "The bytes to format"
-                },{
-                    "name": "lang",
-                    "description": "The language to use for formatting the bytes",
-                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
-                },{
-                    "name": "digits",
-                    "description": "The bytes of digits to display after the decimal point",
-                    "u2-type": "bytes"
-                }
-            ],
-            "cssProperties": [],
-            "cssParts": [
-                {
-                    "name": "compact",
-                    "description": "The exponent in 'long' or 'short' form, depending on how compactDisplay (which defaults to short) is specified when notation is set to compact."
-                },{
-                    "name": "decimal",
-                    "description": "The decimal separator string ('.')."
-                },{
-                    "name": "fraction",
-                    "description": "The fraction bytes."
-                },{
-                    "// name": "group",
-                    "description": "The group separator string (',')."
-                },{
-                    "// name": "infinity",
-                    "description": "The Infinity string ('∞')."
-                },{
-                    "name": "integer",
-                    "description": "The integer bytes."
-                },{
-                    "name": "literal",
-                    "description": "Any literal strings or whitespace in the formatted bytes."
-                },{
-                    "name": "minusSign",
-                    "description": "The minus sign string ('-')."
-                },{
-                    "// name": "nan",
-                    "description": "The NaN string ('NaN')."
-                },{
-                    "// name": "plusSign",
-                    "description": "The plus sign string ('+')."
-                },{
-                    "name": "unit",
-                    "description": "The unit string, such as the 'l' or 'litres', depending on how unitDisplay is specified."
-                },{
-                    "// name": "unknown",
-                    "description": "The string for unknown type results."
-                }
-            ],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-bytes",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-bytes",
-            "declaration": {
-              "name": "u2-bytes",
-              "module": "bytes.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "bytes.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Displays formatted bytes",
+            "name": "U2Bytes",
+            "members": [{
+                "kind": "field",
+                "description": "Set or get the value of the bytes",
+                "name": "value"
+            }],
+            "events": [],
+            "attributes": [{
+                "name": "value",
+                "description": "The bytes to format"
+            },{
+                "name": "lang",
+                "description": "The language to use for formatting the bytes",
+                "u2Examples": [
+                    "en-US",
+                    "fr-FR",
+                    "de-DE",
+                    "es-ES",
+                    "it-IT",
+                    "ja-JP",
+                    "ko-KR",
+                    "zh-CN",
+                    "zh-TW"
+                ]
+            },{
+                "name": "digits",
+                "description": "The bytes of digits to display after the decimal point",
+                "u2-type": "bytes"
+            }],
+            "cssProperties": [],
+            "cssParts": [{
+                "name": "compact",
+                "description": "The exponent in 'long' or 'short' form, depending on how compactDisplay (which defaults to short) is specified when notation is set to compact."
+            },{
+                "name": "decimal",
+                "description": "The decimal separator string ('.')."
+            },{
+                "name": "fraction",
+                "description": "The fraction bytes."
+            },{
+                "// name": "group",
+                "description": "The group separator string (',')."
+            },{
+                "// name": "infinity",
+                "description": "The Infinity string ('∞')."
+            },{
+                "name": "integer",
+                "description": "The integer bytes."
+            },{
+                "name": "literal",
+                "description": "Any literal strings or whitespace in the formatted bytes."
+            },{
+                "name": "minusSign",
+                "description": "The minus sign string ('-')."
+            },{
+                "// name": "nan",
+                "description": "The NaN string ('NaN')."
+            },{
+                "// name": "plusSign",
+                "description": "The plus sign string ('+')."
+            },{
+                "name": "unit",
+                "description": "The unit string, such as the 'l' or 'litres', depending on how unitDisplay is specified."
+            },{
+                "// name": "unknown",
+                "description": "The string for unknown type results."
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-bytes",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-bytes",
+            "declaration": {
+                "name": "U2Bytes",
+                "module": "bytes.js"
+            }
+        }]
+    }]
+}

package/el/calendar/README.md

@@ -0,0 +1,64 @@
+# <u2-calendar> - element  (BETA)
+Calendar / month view component, use `<u2-calendaritem>` as children
+
+> Status: BETA — experimental. API and markup may change.
+
+## Features
+
+- month view
+- lightweight layout and styling
+- supports `u2-calendaritem` children with `start` and `end` attributes
+- events rendered as colored bars spanning multiple days
+- performat and responsive using css grid
+
+## Usage
+
+```js
+u2Calendaritem2.addEventListener('click',()=>{
+  alert('Demo 2 clicked')
+})
+```
+
+```html
+<u2-calendar date="2025-10-01">
+    <u2-calendaritem start="2025-10-09">Demo</u2-calendaritem>
+    <u2-calendaritem start="2025-10-19" end="2025-10-23" id="u2Calendaritem2">Demo 2</u2-calendaritem>
+</u2-calendar>
+  
+```
+
+```css
+u2-calendar {
+  font-size:10px;
+}
+u2-calendaritem {
+  background-color:var(--color, orange);
+  &:hover {
+    background-color:var(--color-dark, red);
+  }
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/calendar/calendar.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/calendar/calendar.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/calendar/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/calendar/tests/minimal.html)  
+
+## Todo
+
+- expose public API for navigating months (prev/next)
+- accessibility improvements
+- add more examples and docs
+
+## 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/calendar/calendar.css

@@ -0,0 +1,36 @@
+u2-calendar {
+    overflow:auto;
+    max-height:90vh;
+    &::part(drop-target) {
+        outline: 2px dashed var(--color, #2196f3);
+        z-index: 1;
+    }
+}
+u2-calendaritem {
+    &[draggable="true"] {
+        cursor: move;
+    }
+    &:focus {
+        outline: 2px dotted var(--color-text, #000);
+    }
+}
+
+
+/* not defined */
+u2-calendar:not(:defined) {
+    display:block;
+}
+u2-calendaritem:not(:defined) {
+    display:block;
+    padding:.2em .9em;
+    margin:.2em 0;
+    color: #fff;
+    
+    &::after {
+        content: attr(start) " - " attr(end);
+        display:block;
+        font-size: .8em;
+    }
+}
+
+