u2ui 1.0.0 → 1.4.5

package/el/system/system.js

@@ -0,0 +1,84 @@
+
+const baseUrl = import.meta.url.replace('system.js', '');
+
+export default class U2System extends HTMLElement {
+    constructor() {
+        super();
+
+        import('./styler.js');
+        //import('https://cdn.jsdelivr.net/gh/nuxodin/cleanup.js/mod.min.js')
+
+        this.popover = 'auto';
+        this.style.cssText = '';
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+            :host {
+                position:fixed;
+                inset:1rem 1rem auto auto;
+                border:2px solid red;
+                box-shadow: 0 0 1rem #0006;
+                &::backdrop {
+                    xbackground: #0003;
+                }
+            }
+            </style>
+            <button id="demoHtml">Show Demo</button>
+            <u2-system-styler id="styler"></u2-system-styler>
+        `;
+        this.shadowRoot.getElementById('demoHtml').addEventListener('click', () => this.demo());
+    }
+    connectedCallback() {
+
+    }
+
+    async demo() {
+        let demoEl = document.getElementById('u2SystemHtmlDemo');
+        if (!demoEl) {
+            demoEl = document.createElement('div');
+            demoEl.popover = 'manual';
+            demoEl.id = 'u2SystemHtmlDemo';
+            document.body.append(demoEl);
+            demoEl.style = 'inset:1rem; height:fit-content; max-height:calc(100vh - 2rem); width:calc(100vw - 2rem); max-width:60rem';
+            const html = await fetch(baseUrl + 'demoHtml.html').then(res => res.text());
+            
+            demoEl.innerHTML = `
+            <style>
+            #u2SystemHtmlDemo {
+                box-shadow: 0 0 1rem #0006;
+                padding:1rem;
+                border:0;
+                u2-toc ul {
+                    display:flex;
+                    justify-content: center;
+                    a {
+                        padding:1rem;
+                    }
+                }
+            }
+            </style>
+            <u2-toc for="u2SystemHtmlDemo" to="1" style="position:absolute; inset:.3rem .3rem auto .3rem;"></u2-toc>
+            <button u2-behavior="close" style="position:absolute; inset:.3rem .3rem auto auto; margin:0">Close</button>
+            ${html}`;
+        }
+        demoEl.showPopover();
+        this.showPopover();
+        this.shadowRoot.getElementById('styler').showPopover();
+    }    
+
+}
+
+customElements.define('u2-system', U2System);
+
+addEventListener('keydown', (e) => {
+    if (e.target.form !== undefined) return;
+    if (e.target.isContentEditable) return;
+    if (e.ctrlKey || e.altKey || e.metaKey) return;
+    if (e.key !== 's') return;
+
+    if (!document.querySelector('u2-system').matches(':popover-open')) {
+        document.querySelector('u2-system').showPopover();
+    } else {
+        document.querySelector('u2-system').hidePopover();
+    }
+});

package/el/table/README.md

@@ -1,68 +1,80 @@
-# <u2-table> - element
-Enhanced tables (sortable, responsive...)
-
-## Features
-
-- Behavior that you can't cover without css.
-- Responsive (breaks of overflows)
-- Sets the header-cell text as aria-label on each cell
-- Use attribute `data-sortby` to customize the sort order
-
-## Usage
-
-```html
-<u2-table break sortable>
-    <table>
-        <thead>
-            <tr><th> Firstname         <th> Lastname    <th> Age
-        <tbody>
-            <tr><td> Wolfgang Amadeus  <td> Mozart      <td> 46
-            <tr><td> Hans              <td> Muster      <td> 1
-            <tr><td> Fridrich          <td> Langenegger <td> 5
-    </table>
-</u2-table>
-```
-
-```css
-u2-table {
-    white-space:nowrap;
-}
-u2-table[\:overflows][break] td::before {
-    margin-right:auto;
-}
-```
-
-## Install
-
-```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/table/table.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/table/table.min.js" type=module async></script>
-```
-
-## Demos
-
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/table/tests/minimal.html)  
-[test.html](http://gcdn.li/u2ui/u2@main/el/table/tests/test.html)  
-
-## Todo
-
-Make strategies for responsive tables like the following:
-```html
-<u2-table overflow-strategy="break hide-optional vertical-headers">
-```
-If it overflows, the script walks through the strategies in the defined order.
-And sets the state attribute `<u2-table :overflows="strategy1 strategy2 ...">`
-
-In the css there are some predefined or custom rules for the overflow-strategy.
-```css
-u2-table[\:overflows~=hide-optional] :is(td,th).optional {
-    display:none;
-}
-```
-If the table still overflows, the next strategy comes into play.
-
-## 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. ♥
-
+# &lt;u2-table&gt; - element
+Wrap Tables to make them enhanced tables (sortable, responsive...)
+
+## Features
+
+- Behavior that you can't cover without css.
+- Responsive (breaks of overflows)
+- Sets the header-cell text as aria-label on each cell
+- Use attribute `data-sortby` to customize the sort order
+
+## Usage
+
+```html
+<u2-table>
+    <table>
+        <colgroup>
+            <col>
+            <col>
+            <col class="age-col"/>
+        <thead>
+            <tr>
+                <th data-sort-handler> Firstname         
+                <th data-sort-handler> Lastname
+                <th data-sort-handler> Age
+        <tbody>
+            <tr><td> Wolfgang Amadeus  <td> Mozart      <td> 46
+            <tr><td> Hans              <td> Muster      <td> 1
+            <tr><td> Fridrich          <td> Langenegger <td> 5
+    </table>
+</u2-table>
+```
+
+```css
+u2-table {
+    white-space:nowrap;
+}
+.age-col {
+    text-align:right;
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/table/table.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/table/table.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/table/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/table/tests/minimal.html)  
+[multiselect.html](http://gcdn.li/u2ui/u2@main/el/table/tests/multiselect.html)  
+[drag.html](http://gcdn.li/u2ui/u2@main/el/table/tests/drag.html)  
+[autoformat.html](http://gcdn.li/u2ui/u2@main/el/table/tests/autoformat.html)  
+[observer.html](http://gcdn.li/u2ui/u2@main/el/table/tests/observer.html)  
+[columns.api.html](http://gcdn.li/u2ui/u2@main/el/table/tests/columns.api.html)  
+
+## Todo
+
+Make strategies for responsive tables like the following:
+```html
+<u2-table overflow-strategy="break hide-optional vertical-headers">
+```
+If it overflows, the script walks through the strategies in the defined order.
+And sets the state attribute `<u2-table :overflows="strategy1 strategy2 ...">`
+
+In the css there are some predefined or custom rules for the overflow-strategy.
+```css
+u2-table[\:overflows~=hide-optional] :is(td,th).optional {
+    display:none;
+}
+```
+If the table still overflows, the next strategy comes into play.
+
+## 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/table/ext/autoFormatTable.js

@@ -0,0 +1,228 @@
+import { getTableColumns } from "../table.js";
+
+export function autoFormatTable(table) {
+
+    const root = table.shadowRoot || document.documentElement;
+    let style = root.querySelector('style[data-autoformat]');
+    if (!style) {
+        style = document.createElement('style'); // ok, reicht fast immer
+        style.dataset.autoformat = '';
+        root.prepend(style);
+    }
+
+    style.textContent = `
+        /* AUTO-FORMAT STYLES (BETA) */
+        :is(td, th).auto-numeric,
+        :is(td, th).auto-currency {
+            text-align: right;
+            font-variant-numeric: tabular-nums;
+        }
+        
+        th.auto-vertical {
+            writing-mode: vertical-rl;
+            writing-mode: sideways-lr;
+            white-space: nowrap;
+        }
+        
+        td.auto-date {
+            text-align: center;
+            white-space: nowrap;
+        }
+        
+        :is(td, th).auto-boolean {
+            text-align: center;
+            font-size: 1.2em;
+        }
+        
+        td.auto-percentage {
+            text-align: right;
+            font-variant-numeric: tabular-nums;
+        }
+        
+        td.auto-email {
+            word-break: break-all;
+            font-size: 0.9em;
+        }
+        
+        td.auto-url {
+            word-break: break-all;
+            xcolor: #0066cc;
+        }
+        
+        td.auto-long-text {
+            font-size:max(.8em, 12px);
+        }
+    `;
+
+    const firstHeadTr = table.querySelector(':scope > thead > tr');
+    if (firstHeadTr) {
+        for (const th of firstHeadTr.children) {
+            th.setAttribute('data-sort-handler', '');
+            th.tabIndex = '0';
+        }
+    }
+
+    const columns = getTableColumns(table);
+
+    // Analyze and format each column
+    for (const col of columns) {
+        const allCells = col.cells;
+        const bodyCells = allCells.filter(c => c.tagName === 'TD');
+        const headerCell = allCells.find(c => c.tagName === 'TH');
+        
+        if (bodyCells.length === 0) continue;
+        
+        const values = bodyCells.map(c => c.textContent.trim());
+        const nonEmptyValues = values.filter(v => v !== '');
+        
+        if (nonEmptyValues.length === 0) continue;
+
+        // 1. NUMERIC CHECK
+        const allNumeric = nonEmptyValues.every(v => !isNaN(v) && v !== '');
+        if (allNumeric) {
+            allCells.forEach(cell => cell.classList.add('auto-numeric'));
+            
+            // Normalize decimal places
+            const decimals = nonEmptyValues.map(v => (v.split('.')[1] || '').length);
+            const maxDecimals = Math.max(...decimals, 0);
+            
+            if (maxDecimals > 0) {
+                bodyCells.forEach(cell => {
+                    const num = parseFloat(cell.textContent);
+                    if (!isNaN(num)) {
+                        cell.textContent = num.toFixed(maxDecimals);
+                    }
+                });
+            }
+            continue; // Skip other checks if numeric
+        }
+
+        // 2. CURRENCY CHECK (€, $, £, CHF, etc.)
+        const allCurrency = nonEmptyValues.every(v => 
+            /^[€$£¥CHF]*\s*\d+([.,]\d{1,2})?$/.test(v)
+        );
+        if (allCurrency) {
+            bodyCells.forEach(cell => {
+                const text = cell.textContent.trim();
+                const numericValue = text.replace(/[€$£¥CHF\s]/g, '').replace(',', '.');
+                cell.setAttribute('data-sort', parseFloat(numericValue));                    
+                cell.classList.add('auto-currency')
+            });
+            continue;
+        }
+
+        // 3. PERCENTAGE CHECK
+        const allPercentage = nonEmptyValues.every(v => 
+            /^\d+([.,]\d+)?%$/.test(v)
+        );
+        if (allPercentage) {
+            bodyCells.forEach(cell => {
+                cell.setAttribute('data-sort', parseFloat(cell.textContent.trim()));
+            });
+            allCells.forEach(cell => {
+                cell.classList.add('auto-percentage');
+            });
+            continue;
+        }
+
+        // 4. DATE CHECK
+        const allDates = nonEmptyValues.every(v => {
+            const parsed = Date.parse(v);
+            return !isNaN(parsed) && v.length > 5; // Avoid false positives
+        });
+        if (allDates) {
+            bodyCells.forEach(cell => {
+                cell.classList.add('auto-date');
+                const date = new Date(cell.textContent);
+                if (!isNaN(date)) {
+                    cell.setAttribute('data-sort', date.getTime());
+                    cell.textContent = date.toLocaleDateString('de-CH');
+                }
+            });
+            continue;
+        }
+
+        // 5. BOOLEAN CHECK
+        const booleanValues = ['true', 'false', 'yes', 'no', 'ja', 'nein', '✓', '✗', 'x'];
+        const allBoolean = nonEmptyValues.every(v => 
+            booleanValues.includes(v.trim().toLowerCase())
+        );
+        if (allBoolean) {
+            bodyCells.forEach(cell => {
+                cell.classList.add('auto-boolean');
+                const val = cell.textContent.trim().toLowerCase();
+                if (['true', 'yes', 'ja', '✓'].includes(val)) {
+                    cell.textContent = '🟢'; // ✓ ●
+                } else if (['false', 'no', 'nein', '✗', 'x'].includes(val)) {
+                    cell.textContent = '⚪'; // ✗ ○
+                }
+            });
+            continue;
+        }
+
+        // 6. EMAIL CHECK
+        const allEmail = nonEmptyValues.every(v => 
+            /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
+        );
+        if (allEmail) {
+            bodyCells.forEach(cell => cell.classList.add('auto-email'));
+            continue;
+        }
+
+        // 7. URL CHECK
+        const allUrl = nonEmptyValues.every(v => 
+            /^https?:\/\/.+/.test(v)
+        );
+        if (allUrl) {
+            bodyCells.forEach(cell => {
+                cell.classList.add('auto-url');
+                const url = cell.textContent;
+                cell.innerHTML = `<a href="${url}" target="_blank">${url}</a>`;
+            });
+            continue;
+        }
+
+        // 8. LONG TEXT CHECK
+        const avgLength = nonEmptyValues.join('').length / nonEmptyValues.length;
+        if (avgLength > 50) {
+            bodyCells.forEach(cell => cell.classList.add('auto-long-text'));
+        }
+
+        // 9. LONG HEADER CHECK (vertical writing)
+        if (headerCell) {
+            const headerLength = headerCell.textContent.trim().length;
+            const maxContentLength = Math.max(...nonEmptyValues.map(v => v.length));
+            if (headerLength > maxContentLength * 1.5 && headerLength > 15) {
+                headerCell.classList.add('auto-vertical');
+            }
+        }
+    }
+
+    for (const col of columns) {
+        const allCells = col.cells;
+        const bodyCells = allCells.filter(c => c.tagName === 'TD');
+        const headerCell = allCells.find(c => c.tagName === 'TH');
+
+        if (bodyCells.length === 0) continue;
+        
+        const values = bodyCells.map(c => c.textContent.trim());
+        const nonEmptyValues = values.filter(v => v !== '');
+
+        // 8. LONG TEXT CHECK
+        // todo: muss nur schauen ob irgend ein text länger als 50 ist.
+        //const avgLength = nonEmptyValues.join('').length / nonEmptyValues.length;
+        const maxContentLength = Math.max(...nonEmptyValues.map(v => v.length));
+        if (maxContentLength > 50) {
+            bodyCells.forEach(cell => cell.classList.add('auto-long-text'));
+        }
+
+        // 9. LONG HEADER CHECK (vertical writing)
+        if (headerCell) {
+            const headerLength = headerCell.textContent.trim().length;
+            const maxContentLength = Math.max(...nonEmptyValues.map(v => v.length));
+            if (headerLength > maxContentLength * 1.5 && headerLength > 15) {
+                headerCell.classList.add('auto-vertical');
+            }
+        }
+    }
+}    

package/el/table/manifest.json

@@ -1,43 +1,32 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-        {
-            "kind": "javascript-module",
-            "path": "table.js",
-            "declarations": [
-                {
-                    "kind": "class",
-                    "description": "",
-                    "name": "table",
-                    "members": [
-                    ],
-                    "events": [
-                    ],
-                    "attributes": [
-                        {
-                            "name": "sortable",
-                            "description": "If set, the table is sortable, value can be a selector for an element that triggers the sort",
-                            "type": "string"
-                        }
-                    ],
-                    "cssParts": [
-                    ],
-                    "superclass": { "name": "HTMLElement" },
-                    "tagName": "u2-table",
-                    "customElement": true
-                }
-            ],
-            "exports": [
-                {
-                    "kind": "custom-element-definition",
-                    "name": "u2-table",
-                    "declaration": {
-                        "name": "table",
-                        "module": "table.js"
-                    }
-                }
-            ]
-        }
-    ]
-}
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "table.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "",
+            "name": "U2Table",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "sortable",
+                "description": "If set, the table is sortable, value can be a selector for an element that triggers the sort",
+                "type": "string"
+            }],
+            "cssParts": [],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-table",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-table",
+            "declaration": {
+                "name": "U2Table",
+                "module": "table.js"
+            }
+        }]
+    }]
+}

package/el/table/table.css

@@ -1,59 +1,4 @@
-u2-table {
-    display:block;
-    overflow: auto;
-}
-u2-table[\:overflows][break] > table {
-    display: block;
-}
-u2-table[\:overflows][break] > table > thead {
-    display:none;
-}
-u2-table[\:overflows][break] > table > * { /* group */
-    display: block;
-}
-u2-table[\:overflows][break] > table > * > * { /* row */
-    display: block;
-}
-u2-table[\:overflows][break] > table > * > * > * { /* cell */
-    display: flex;
-    /* justify-content: space-between;*/
-    gap: 0 1rem;
-    padding: .2rem 0;
-    padding-right:0;
-}
-u2-table[\:overflows][break] > table > * > * > *::before { /* cell */
-    content: attr(aria-label);
-    display: block;
-    font-weight: bold;
-}
-
-
-
-/* trs in a grid *
-u2-table[\:overflows][break] tbody {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min-content, 15rem));
-  grid-gap: 1rem;
-}
-/* */
-
-
-/*
-left right using table
-
-u2-table[broken] > table {
-    display:table;
-}
-u2-table[broken] > table > * { /* group * /
-    display:contents;
-}
-u2-table[broken] > table > * > tr {
-    display:table-row-group;
-}
-u2-table[broken] > table > * > tr > * { /* cell * /
-    display: table-row;
-}
-u2-table[broken] > table > * > * > ::before {
-    display:table-cell;
-}
-*/
+u2-table {
+    display:block;
+    /* overflow: auto; sticky will not work on body-scroll */
+}