u2ui 1.0.1 → 1.4.6

package/el/carousel/manifest.json

@@ -1,58 +1,44 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "carousel.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "carousel",
-                    "members": [
-                        {
-                            "kind": "method",
-                            "name": "slideTo"
-                        }
-                    ],
-                    "events": [
-                        {
-                            "name": "u2-carousel.slide",
-                            "type": {
-                                "text": "Event"
-                            }
-                        }
-                    ],
-                    "attributes": [
-                        {
-                            "name": "autoplay",
-                            "description": "If specified, the carousel automatically begins to slide.",
-                            "u2-type": "boolean"
-                        },
-                        {
-                            "name": "mode",
-                            "description": "The mode of the carousel. scroll: uses native scroll, fade: uses css opacity, slide: uses css-transform.",
-                            "u2-type": ["slide","fade","scroll"]
-                        }
-                    ],
-                    "superclass": {
-                        "name": "HTMLElement"
-                    },
-                    "tagName": "u2-carousel",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-carousel",
-                    "declaration": {
-                        "name": "MyElement",
-                        "module": "my-project/my-element.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "carousel.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Simple carousel component",
+            "name": "U2Carousel",
+            "members": [{
+                "kind": "method",
+                "name": "slideTo"
+            }],
+            "events": [{
+                "name": "u2-carousel.slide",
+                "description": "Fired when the carousel slides to a new item.",
+                "type": { "text": "Event" }
+            }],
+            "attributes": [{
+                "name": "autoplay",
+                "description": "If specified, the carousel automatically begins to slide.",
+                "u2-type": "boolean"
+            },{
+                "name": "mode",
+                "description": "The mode of the carousel. scroll: uses native scroll, fade: uses css opacity, slide: uses css-transform.",
+                "u2-type": ["slide", "fade", "scroll"]
+            }],
+            "cssProperties": [],
+            "cssParts": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-carousel",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-carousel",
+            "declaration": {
+                "name": "U2Carousel",
+                "module": "carousel.js"
+            }
+        }]
+    }]
+}

package/el/carousel-nav/README.md

@@ -1,37 +1,36 @@
 # <u2-carousel-nav> - element
-null
+Carousel navigation element for u2-carousel. (beta)
 
 ## Usage
 
 ```html
-<u2-carousel-nav></u2-carousel-nav>
-<u2-carousel>
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
+<u2-carousel-nav></u2-carousel-nav>
+<u2-carousel>
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
 </u2-carousel>
 ```
 
 ```css
-u2-carousel-nav > * {
-    transition:.3s;
-}
-u2-carousel-nav > .-active {
-    transform:scale(1.2);
+u2-carousel-nav > * {
+    transition:.3s;
+}
+u2-carousel-nav > .-active {
+    transform:scale(1.2);
 }
 ```
 
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/carousel-nav/carousel-nav.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/minimal.html)  
 [test.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/minimal.html)  
 
 ## About
 

package/el/carousel-nav/carousel-nav.js

@@ -1,74 +1,74 @@
-
-const style = document.createElement('style');
-style.innerHTML = `
-u2-carousel-nav {
-	display:flex;
-	justify-content:center;
-	margin:.5rem;
-}
-u2-carousel-nav > * {
-	width:1.2rem;
-	height:1.2rem;
-	margin:.2rem;
-	border-radius:100%;
-	background-color:#0003;
-	cursor:pointer;
-
-	display:flex;
-	font-size:.5rem;
-	padding-bottom:.035rem;
-	color:transparent;
-	justify-content:center;
-	align-items:center;
-	opacity:.3;
-}
-u2-carousel-nav > :hover {
-	opacity:.6;
-}
-u2-carousel-nav > .-active {
-	opacity:1;
-}
-`
-document.head.prepend(style);
-
-function refSlideshows(el) {
-	const grp = el.getAttribute('sync-group');
-	if (grp) {
-		const slides = [];
-		document.body.c1FindAll('u2-carousel[sync-group="'+grp+'"]').forEach(function(ssEl){
-			slides.push(ssEl);
-		});
-		return slides;
-	} else {
-		return [el.parentNode.querySelector('u2-carousel')];
-	}
-}
-
-class u2CarouselNav extends HTMLElement {
-	constructor() {
-		super();
-	}
-
-	connectedCallback() {
-		customElements.whenDefined('u2-carousel').then(()=>{
-			const SS = refSlideshows(this)[0];
-
-			const items = SS._items();
-
-			if (items.length < 2) this.style.display = 'none';
-
-			items.forEach((item, index)=>{
-				const button = document.createElement('span');
-				button.addEventListener('click',()=>SS.slideTo(index));
-				button.innerHTML = index+1;
-				this.append(button);
-			});
-			SS.addEventListener('u2-carousel.slide', e=>{
-				Array.from(this.children).forEach((button, index)=>{
-					button.classList.toggle('-active', e.detail.index === index);
-				});
-			});
-		})
-	}
-}
-customElements.define('u2-carousel-nav', u2CarouselNav)
+
+const style = document.createElement('style');
+style.innerHTML = `
+u2-carousel-nav {
+	display:flex;
+	justify-content:center;
+	margin:.5rem;
+	gap:.5rem;
+}
+u2-carousel-nav > * {
+	width:1.2rem;
+	height:1.2rem;
+	border-radius:99rem;
+	background-color:#0003;
+	cursor:pointer;
+
+	display:flex;
+	font-size:.5rem;
+	padding-block-end:.035rem;
+	color:transparent;
+	justify-content:center;
+	align-items:center;
+	opacity:.3;
+}
+u2-carousel-nav > :hover {
+	opacity:.6;
+}
+u2-carousel-nav > .-active {
+	opacity:1;
+}
+`
+document.head.prepend(style);
+
+function refSlideshows(el) {
+	const grp = el.getAttribute('sync-group');
+	if (grp) {
+		const slides = [];
+		document.body.c1FindAll('u2-carousel[sync-group="'+grp+'"]').forEach(function(ssEl){
+			slides.push(ssEl);
+		});
+		return slides;
+	} else {
+		return [el.parentNode.querySelector('u2-carousel')];
+	}
+}
+
+export default class U2CarouselNav extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		customElements.whenDefined('u2-carousel').then(()=>{
+			const SS = refSlideshows(this)[0];
+
+			const items = SS._items();
+
+			if (items.length < 2) this.style.display = 'none';
+
+			items.forEach((item, index)=>{
+				const button = document.createElement('span');
+				button.addEventListener('click',()=>SS.slideTo(index));
+				button.innerHTML = index+1;
+				this.append(button);
+			});
+			SS.addEventListener('u2-carousel.slide', e=>{
+				Array.from(this.children).forEach((button, index)=>{
+					button.classList.toggle('-active', e.detail.index === index);
+				});
+			});
+		})
+	}
+}
+customElements.define('u2-carousel-nav', U2CarouselNav)

package/el/carousel-nav/manifest.json

@@ -0,0 +1,31 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "carousel-nav.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Carousel navigation element for u2-carousel. (beta)",
+            "name": "U2CarouselNav",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "sync-group",
+                "description": "Syncs with all u2-carousel elements sharing the same sync-group value"
+            }],
+            "cssProperties": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-carousel-nav",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-carousel-nav",
+            "declaration": {
+                "name": "U2CarouselNav",
+                "module": "carousel-nav.js"
+            }
+        }]
+    }]
+}

package/el/chart/README.md

@@ -0,0 +1,46 @@
+# <u2-chart> - element
+Renders a chart from html like `<table>` or `<dl>` elements. `<u2-chart type="pie"><table>...`
+
+## Usage
+
+```html
+<u2-chart type="pie">
+    <dl>
+        <dt>Apples</dt>
+        <dd>10 pieces</dd>
+
+        <dt>Bananas</dt>
+        <dd>12 pieces</dd>
+
+        <dt>Oranges</dt>
+        <dd>8 pieces</dd>
+    </dl>
+</u2-chart>
+```
+
+```css
+u2-chart {
+    max-width:20rem;
+    margin:auto;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/chart/chart.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/chart/chart.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/chart/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/chart/tests/minimal.html)  
+[changeAttributes.html](http://gcdn.li/u2ui/u2@main/el/chart/tests/changeAttributes.html)  
+[engines.html](http://gcdn.li/u2ui/u2@main/el/chart/tests/engines.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. ♥
+

package/el/chart/chart.css

@@ -0,0 +1,7 @@
+u2-chart {
+    display: block;
+    position:relative;
+}
+u2-chart:not(:defined) {
+    overflow:auto;
+}

package/el/chart/chart.js

@@ -0,0 +1,188 @@
+// Dependencies: u2/tools/promiseElementById.js
+
+export default class U2Chart extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML =
+            `<style>
+            .chart-container {
+                width: 100%;
+                display:block;
+                &:not([height]) { aspect-ratio: 2; }
+            }
+            :host([type="pie"]) .chart-container:not([height]) { aspect-ratio: 1; }
+            canvas { width: 100%; height: 100%; }
+            svg { display:block; }
+            </style>
+            <div class="chart-container"></div>`;
+        this.container = this.shadowRoot.querySelector('.chart-container');
+        this.chart = null; // Initialisiere die Chart-Instanz
+    }
+    connectedCallback() {
+        this._requestBuild();
+    }
+
+    static observedAttributes = ['for', 'type', 'flip-axis', 'axis-labels', 'grid', 'engine', 'renderer'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (name === 'for') {
+            this._forPromise = import('../../u2/tools/promiseElementById.js').then(({ promiseElementById }) => {
+                return promiseElementById(this.getAttribute('for'));
+            });
+        }
+        this._requestBuild(); // every change in attributes should trigger a rebuild
+    }
+
+    async _extractdata() {
+        const target = this.hasAttribute('for') ? await this._forPromise : this.querySelector(':scope > table, :scope > dl');
+        if (target) {
+            if (target.tagName === 'TABLE') return extractTableData(target);
+            if (target.tagName === 'DL') return extractDLData(target);
+        }
+    }
+    _requestBuild() {
+        if (this._buildRequested) return;
+        this._buildRequested = true;
+        requestAnimationFrame(() => {
+            this._buildRequested = false;
+            this._build();
+        });
+    }
+    async _build() {
+        if (this.engineInstance) {
+            this.engineInstance.destroy();
+            this.engineInstance = null;
+        }
+
+        this.container.innerHTML = ''; // Clear container
+
+        let { rows, cols, data } = await this._extractdata();
+        if (!data) { console.error('No data found'); return; }
+
+        const type = this.getAttribute('type') || 'line';
+        const engine = this.getAttribute('engine') || 'chart.js';
+        const renderer = this.getAttribute('renderer');
+
+        const options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: { ticks: {}, grid: {}, border: {}, beginAtZero: true },
+                x: { ticks: {}, grid: {}, border: {} }
+            }
+        };
+
+        if (type === 'pie' || type === 'doughnut') {
+            options.scales = undefined;
+        }
+
+        const { hue, saturation, lightness } = getHSLofElement(this);
+
+        function getColor(i) {
+            return `hsl(${hue + i * 30}, ${saturation}, ${lightness})`;
+        }
+
+        if (this.hasAttribute('flip-axis')) {
+            [rows, cols] = [cols, rows];
+            data = data[0].map((_, i) => data.map(row => row[i]));
+        }
+
+        const attr_axisLabels = this.getAttribute('axis-labels')
+        if (attr_axisLabels != null) {
+            if (attr_axisLabels === 'false') {
+                options.scales.x.ticks.display = false;
+                options.scales.y.ticks.display = false;
+            }
+        }
+        const attr_grid = this.getAttribute('grid')
+        if (attr_grid != null) {
+            if (attr_grid === 'false') {
+                options.scales.x.grid.display = false;
+                options.scales.y.grid.display = false;
+                options.scales.x.border.display = false;
+                options.scales.y.border.display = false;
+            }
+        }
+
+        try {
+            const engineModule = await import(`./engines/${engine}.js`);
+            this.engineInstance = await engineModule.render(this.container, { rows, cols, data }, {
+                type,
+                options,
+                getColor,
+                renderer
+            });
+        } catch (e) {
+            console.error(`Failed to load engine ${engine}`, e);
+        }
+    }
+    disconnectedCallback() {
+        if (this.engineInstance) {
+            this.engineInstance.destroy();
+            this.engineInstance = null;
+        }
+    }
+}
+
+
+
+function extractTableData(table) {
+    const trs = [...table.querySelectorAll('tbody tr')];
+    let headTr = table.querySelector('thead tr');
+
+    if (!headTr) {
+        const firstRowCells = table.querySelectorAll('tbody tr:nth-child(1) th');
+        const secondRowCells = table.querySelectorAll('tbody tr:nth-child(2) th');
+        if (firstRowCells.length !== secondRowCells.length) {
+            headTr = table.querySelector('tbody tr');
+            trs.shift();
+        }
+    }
+
+    const hasRowHeaders = trs[0].firstElementChild.tagName === 'TH';
+
+    let rowHeaders = [];
+    let colHeaders = [];
+
+    const data = trs.map(row => {
+        const cells = [...row.children];
+        if (hasRowHeaders) {
+            rowHeaders.push(cells.shift().textContent.trim());
+        } else {
+            rowHeaders.push('Row ' + (rowHeaders.length + 1));
+        }
+        return cells.map(cell => parseFloat(cell.textContent.trim()));
+    });
+
+    if (headTr) {
+        colHeaders = [...headTr.children].map(cell => cell.textContent.trim());
+        if (hasRowHeaders) colHeaders.shift();
+    } else {
+        colHeaders = Array.from({ length: data[0].length }, (_, i) => 'Col ' + (i + 1));
+    }
+
+    return { cols: colHeaders, rows: rowHeaders, data };
+}
+
+
+function extractDLData(dl) {
+    let dts = [...dl.querySelectorAll('dt')];
+    let dds = [...dl.querySelectorAll('dd')];
+    let rows = dts.map(dt => dt.textContent.trim());
+    let cols = [''];
+    let data = dds.map(dd => [parseFloat(dd.textContent.trim())]);
+    return { cols, rows, data };
+}
+
+
+function getHSLofElement(el) {
+    const style = getComputedStyle(el);
+    const hue = parseFloat(style.getPropertyValue('--hsl-h') || 200);
+    const saturation = style.getPropertyValue('--hsl-s') || '50%';
+    const lightness = style.getPropertyValue('--hsl-l') || '50%';
+    return { hue, saturation, lightness };
+}
+
+
+customElements.define('u2-chart', U2Chart);