u2ui 1.0.1 → 1.4.6

package/el/qrcode/qrcode.js

@@ -1,46 +1,54 @@
-
-customElements.define('u2-qrcode', class extends HTMLElement {
-
-    constructor() {
-        super();
-        let shadowRoot = this.attachShadow({ mode: 'open' });
-        shadowRoot.innerHTML = `
-        <style>
-        #container { display:contents; }
-        #container > * { display:block; }
-        svg { fill:currentColor; }
-        </style>
-        <div id=container></div>
-        `;
-    }
-
-    connectedCallback() {
-        this._redraw();
-    }
-
-    async _redraw() {
-        const container = this.shadowRoot.getElementById('container');
-        const text = this.textContent; // todo: trim() ? can it be harmful?
-        container.setAttribute('aria-label', 'QR-Code: '+text);
-        const {default:{QrCode}} = await import('https://cdn.jsdelivr.net/npm/nayuki-qr-code-generator@1.8.0/index.min.js');
-        const qr0 = QrCode.encodeText(text, QrCode.Ecc.MEDIUM);
-        container.innerHTML = toSvgString(qr0, 4);
-    }
-
-});
-
-function toSvgString(qr) {
-    const border = 0;
-    let parts = [];
-    for (let y = 0; y < qr.size; y++) {
-        for (let x = 0; x < qr.size; x++) {
-            if (qr.getModule(x, y))
-                parts.push(`M${x + border},${y + border}h1v1h-1z`);
-        }
-    }
-    return `
-    <svg viewBox="0 0 ${qr.size + border * 2} ${qr.size + border * 2}">
-        <path d="${parts.join(" ")}"/>
-    </svg>
-    `
+// alternative qr-code writer: https://zxing-js.github.io/library/examples/qr-svg-writer/
+
+export default class U2Qrcode extends HTMLElement {
+
+    constructor() {
+        super();
+        let shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+        <style>
+        :host {
+            width:13rem;
+        }
+        #container { display:contents; }
+        #container > * { display:block; }
+        svg {
+            fill:currentColor;
+            image-rendering: pixelated;
+        }
+        </style>
+        <div id=container></div>
+        `;
+    }
+
+    connectedCallback() {
+        this._redraw();
+    }
+
+    async _redraw() {
+        const container = this.shadowRoot.getElementById('container');
+        const text = this.textContent; // todo: trim() ? can it be harmful?
+        container.ariaLabel = 'QR-Code: '+text;
+        const {default:{QrCode}} = await import('https://cdn.jsdelivr.net/npm/nayuki-qr-code-generator@1.8.0/index.min.js');
+        const qr0 = QrCode.encodeText(text, QrCode.Ecc.MEDIUM);
+        container.innerHTML = toSvgString(qr0, 4);
+    }
+
+}
+customElements.define('u2-qrcode', U2Qrcode);
+
+function toSvgString(qr) {
+    const border = 0;
+    let parts = [];
+    for (let y = 0; y < qr.size; y++) {
+        for (let x = 0; x < qr.size; x++) {
+            if (qr.getModule(x, y))
+                parts.push(`M${x + border},${y + border}h1v1h-1z`);
+        }
+    }
+    return `
+    <svg viewBox="0 0 ${qr.size + border * 2} ${qr.size + border * 2}">
+        <path d="${parts.join(" ")}"/>
+    </svg>
+    `
 }

package/el/rating/README.md

@@ -1,16 +1,5 @@
-## Usage
-
-```html
-Your rating: <u2-rating value="2" max="6" icon="favorite"></u2-rating>
-```
-
-```css
-u2-rating {
-    font-size:2rem;
-    --color-inactive: #ccc;
-    --color-active: var(--color);
-}
-```
+# &lt;u2-rating&gt; - element
+Rating element, form associated
 
 ## Usage
 
@@ -19,24 +8,24 @@ u2-rating {
 ```
 
 ```css
-u2-rating {
-    font-size:2rem;
-    --color-inactive: #ccc;
-    --color-active: #f88;
+u2-rating {
+    font-size:2rem;
+    --color-inactive: #ccc;
+    --color-active: #f88;
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/rating/rating.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/rating/rating.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rating/rating.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/rating/rating.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/rating/tests/minimal.html)  
 [tests.html](http://gcdn.li/u2ui/u2@main/el/rating/tests/tests.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/rating/tests/minimal.html)  
 
 ## About
 

package/el/rating/manifest.json

@@ -1,65 +1,52 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "rating.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "A custom HTML element for displaying QR codes.",
-            "name": "u2rating",
-            "members": [],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "icon",
-                    "description": "The icon of the QR code.",
-                    "u2Examples": ["favorite","thumb-up"]
-                }, {
-                    "name": "value",
-                    "description": "The value of the QR code.",
-                    "u2Examples": ["3","4"]
-                }, {
-                    "name": "max",
-                    "description": "The max of the QR code.",
-                    "u2Examples": ["3","4","5","6","7","8","9","10"]
-                }
-            ],
-            "cssProperties": [
-                {
-                    "name": "--color-inactive",
-                    "description": "The color of the inactive icon.",
-                    "default": "#ccc",
-                    "syntax": "<color>",
-                    "u2Examples": ["#ccc", "black", "white"]
-                },{
-                    "name": "color",
-                    "description": "The color of the active icon.",
-                    "default": "#f00",
-                    "syntax": "<color>",
-                    "u2Examples": ["yellow", "green", "blue"]
-                }
-            ],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-rating",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-rating",
-            "declaration": {
-              "name": "u2rating",
-              "module": "rating.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "rating.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A custom HTML element for displaying QR codes.",
+            "name": "U2Rating",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "icon",
+                "description": "The icon of the QR code.",
+                "u2Examples": ["favorite", "thumb-up"]
+            },{
+                "name": "value",
+                "description": "The value of the QR code.",
+                "u2Examples": ["3", "4"]
+            },{
+                "name": "max",
+                "description": "The max of the QR code.",
+                "u2Examples": ["3", "4", "5", "6", "7", "8", "9", "10"]
+            }],
+            "cssProperties": [{
+                "name": "--color-inactive",
+                "description": "The color of the inactive icon.",
+                "default": "#ccc",
+                "syntax": "<color>",
+                "u2Examples": ["#ccc", "black", "white"]
+            },{
+                "name": "color",
+                "description": "The color of the active icon.",
+                "default": "#f00",
+                "syntax": "<color>",
+                "u2Examples": ["yellow", "green", "blue"]
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-rating",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-rating",
+            "declaration": {
+                "name": "U2Rating",
+                "module": "rating.js"
+            }
+        }]
+    }]
+}

package/el/rating/rating.css

@@ -1,11 +1,11 @@
-
-:where(u2-rating:not(:defined)) {
-    display:inline-block;
-    &::before {
-        content: '★' attr(value, '?') '/' attr(max, '5');
-    }
-}
-:where(u2-rating) {
-    color:#ea1;
-    vertical-align: -.1em;
+
+:where(u2-rating:not(:defined)) {
+    display:inline-block;
+    &::before {
+        content: '★' attr(value, '?') '/' attr(max, '5');
+    }
+}
+:where(u2-rating) {
+    color:#ea1;
+    vertical-align: -.1em;
 }

package/el/rating/rating.js

@@ -1,139 +1,148 @@
-const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
-
-const style = `
-@import url('${icoCssUrl}');
-:host {
-    --u2-ico-dir:'https://cdn.jsdelivr.net/npm/@material-icons/svg@1.0.11/svg/{icon}/baseline.svg';
-    --color-inactive:#ccc;
-    display:inline-block;
-}
-#stars {
-    display:flex;
-    & > * { color:var(--color-inactive); transition:.2s; cursor:pointer; transform-origin:50% 50%; display:block; --size:1.2em; }
-    & > .active { color:inherit; }
-    & > .preview { color:inherit; }
-    & > :is(:hover,:focus) { transform:scale(1.2); outline:none; }
-}
-`;
-
-class rating extends HTMLElement {
-    static formAssociated = true;
-    #value = null;
-    constructor() {
-        super();
-
-        import('../ico/ico.js');
-
-        this.attachShadow({mode: 'open'});
-        this.shadowRoot.innerHTML = `
-            <style>${style}</style>
-            <div id=stars></div>
-            <slot></slot>
-        `;
-        this.starsEl = this.shadowRoot.getElementById('stars');
-        this._internals = this.attachInternals();
-        this._internals.role = 'slider';        
-
-        this.starsEl.addEventListener('mouseenter', ({target})=>{
-            if (!target.matches('#stars > *')) return;
-            const stars = this.#stars();
-            const value = stars.indexOf(target) + 1;
-            stars.forEach((star, i)=>{
-                star.classList.toggle('preview', i < value);
-                star.classList.remove('active');
-            });
-        },true);
-        this.starsEl.addEventListener('mouseleave', ()=>{
-            this.#stars().forEach((star, i)=>{
-                star.classList.remove('preview');
-                star.classList.toggle('active', i < this.value);
-            });
-        });
-        this.shadowRoot.addEventListener('click', ({target})=>{
-            const item = target.closest('#stars > *');
-            if (!item) return;
-            this.value = this.#stars().indexOf(item) + 1;
-        });
-        this.addEventListener('keydown', (e)=>{
-            const value = {
-                ArrowRight: () => Math.min(this.value + 1, this.#stars().length),
-                ArrowLeft: () => Math.max(this.value - 1, 1),
-            }[e.key]?.();
-            this.#stars().forEach(star => star.classList.remove('preview'));
-            if (value!=null) this.value = value;
-        });
-
-    }
-    #stars() {
-        return [...this.starsEl.children];
-    }
-    connectedCallback() {
-        this.render();
-        this.setAttribute('tabindex', '0');
-        this.value = this.getAttribute('value');
-    }
-    render(){
-        const max = parseFloat(this.getAttribute('max')) || 5;
-        const icon = this.getAttribute('icon') ?? 'star';
-
-        this.starsEl.innerHTML = '';
-        for (let i = 0; i < max; i++) {
-            this.starsEl.innerHTML += `<u2-ico icon=${icon}></u2-ico>`;
-        }
-
-        this._internals.ariaLabel = translate('Rating');
-        this._internals.ariaMin = 1;
-        this._internals.ariaMax = max;        
-    }
-    get value() {
-        return this.#value;
-    }
-    set value(value) {
-        this.#stars().forEach((star, i)=>{
-            star.classList.toggle('active', i < value);
-        });
-        //this.starsEl.setAttribute('aria-valuenow', value);
-        this._internals.ariaValueNow = value;
-        this.#value = parseFloat(value);
-        this._internals.setFormValue(value);
-
-        if (this.hasAttribute('required') && !value) {
-            this._internals.setValidity({valueMissing: true}, translate('Please select a rating'));
-        } else {
-            this._internals.setValidity({});
-        }
-    }
-    static observedAttributes = ['value', 'icon', 'max','value'];
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        if (name === 'value') {
-            this.value = newValue;
-        } else {
-            this.render();
-        }
-    }
-}
-
-const texts = {
-    'Rating': {        
-        'en': 'Rating',
-        'es': 'Valoración',
-        'fr': 'Évaluation',
-        'de': 'Bewertung',
-        'it': 'Valutazione',
-    },
-    'Please select a rating': {
-        'en': 'Please select a rating',
-        'es': 'Por favor selecciona una valoración',
-        'fr': 'Veuillez sélectionner une évaluation',
-        'de': 'Bitte wählen Sie eine Bewertung aus',
-        'it': 'Seleziona una valutazione',
-    },
-}
-
-function translate(text) {
-    const lang = navigator.language.substring(0,2) || 'en';
-    return texts[text][lang] ?? texts[text].en;
-}
-
-customElements.define('u2-rating', rating);
+const icoCssUrl = import.meta.resolve('../../el/ico/ico.css');
+
+const style = `
+@import url('${icoCssUrl}');
+:host {
+    --u2-ico-dir: var(--u2-ico-dir-material);
+    --color-inactive:#ccc;
+    display:inline-block;
+    gap:.2em;
+}
+#stars {
+    display:flex;
+    gap:inherit;
+    & > * {
+        color:var(--color-inactive);
+        transition:.2s;
+        cursor:pointer;
+        transform-origin:50% 50%;
+        display:block;
+        --size:1.2em;
+    }
+    & > .active { color:inherit; }
+    & > .preview { color:inherit; }
+    & > :is(:hover,:focus) { transform:scale(1.2); outline:none; }
+}
+`;
+
+export default class U2Rating extends HTMLElement {
+    static formAssociated = true;
+    #value = null;
+    constructor() {
+        super();
+
+        import('../ico/ico.js');
+
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+            <style>${style}</style>
+            <div id=stars></div>
+            <slot></slot>
+        `;
+        this.starsEl = this.shadowRoot.getElementById('stars');
+        this._internals = this.attachInternals();
+        this._internals.role = 'slider';        
+
+        this.starsEl.addEventListener('mouseenter', ({target})=>{
+            if (!target.matches('#stars > *')) return;
+            const stars = this.#stars();
+            const value = stars.indexOf(target) + 1;
+            stars.forEach((star, i)=>{
+                star.classList.toggle('preview', i < value);
+                star.classList.remove('active');
+            });
+        },true);
+        this.starsEl.addEventListener('mouseleave', ()=>{
+            this.#stars().forEach((star, i)=>{
+                star.classList.remove('preview');
+                star.classList.toggle('active', i < this.value);
+            });
+        });
+        this.shadowRoot.addEventListener('click', ({target})=>{
+            const item = target.closest('#stars > *');
+            if (!item) return;
+            this.value = this.#stars().indexOf(item) + 1;
+        });
+        this.addEventListener('keydown', (e)=>{
+            const value = {
+                ArrowRight: () => Math.min(this.value + 1, this.#stars().length),
+                ArrowLeft: () => Math.max(this.value - 1, 1),
+            }[e.key]?.();
+            this.#stars().forEach(star => star.classList.remove('preview'));
+            if (value!=null) this.value = value;
+        });
+
+    }
+    #stars() {
+        return [...this.starsEl.children];
+    }
+    connectedCallback() {
+        this.render();
+        this.setAttribute('tabindex', '0');
+        this.value = this.getAttribute('value');
+    }
+    render(){
+        const max = parseFloat(this.getAttribute('max')) || 5;
+        const icon = this.getAttribute('icon') ?? 'star';
+
+        this.starsEl.innerHTML = '';
+        for (let i = 0; i < max; i++) {
+            this.starsEl.innerHTML += `<u2-ico icon=${icon}></u2-ico>`;
+        }
+
+        this._internals.ariaLabel = translate('Rating');
+        this._internals.ariaMin = 1;
+        this._internals.ariaMax = max;        
+    }
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        this.#stars().forEach((star, i)=>{
+            star.classList.toggle('active', i < value);
+        });
+        this._internals.ariaValueNow = value;
+        this.#value = parseFloat(value);
+        this._internals.setFormValue(value);
+
+        if (this.hasAttribute('required') && !value) {
+            this._internals.setValidity({valueMissing: true}, translate('Please select a rating'));
+        } else {
+            this._internals.setValidity({});
+        }
+    }
+    get form() { return this._internals.form; }
+    static observedAttributes = ['value', 'icon', 'max','value'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'value') {
+            this.value = newValue;
+        } else {
+            this.render();
+        }
+    }
+}
+
+const texts = {
+    'Rating': {        
+        'en': 'Rating',
+        'es': 'Valoración',
+        'fr': 'Évaluation',
+        'de': 'Bewertung',
+        'it': 'Valutazione',
+    },
+    'Please select a rating': {
+        'en': 'Please select a rating',
+        'es': 'Por favor selecciona una valoración',
+        'fr': 'Veuillez sélectionner une évaluation',
+        'de': 'Bitte wählen Sie eine Bewertung aus',
+        'it': 'Seleziona una valutazione',
+    },
+}
+
+function translate(text) {
+    const lang = navigator.language.substring(0,2) || 'en';
+    return texts[text][lang] ?? texts[text].en;
+}
+
+customElements.define('u2-rating', U2Rating);

package/el/responsive/README.md

@@ -0,0 +1,43 @@
+# <u2-responsive> - element
+A Container, where you can define strategies, that are applied through CSS states. `<u2-responsive strategies="hideOptional">`
+
+## Usage
+
+```html
+<u2-responsive strategies="noSmall">
+    This is great<small>- this optional</small>
+</u2-responsive>
+```
+
+```css
+u2-responsive {
+    white-space:nowrap;
+    resize:both;
+    padding:1rem;
+
+    &:state(noSmall) {
+        small {
+            display:none;
+        }
+    }
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/responsive/responsive.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/responsive/responsive.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/responsive/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/responsive/tests/minimal.html)  
+[grid.html](http://gcdn.li/u2ui/u2@main/el/responsive/tests/grid.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. ♥
+