u2ui 1.0.1 → 1.4.6

package/el/skeleton/skeleton.js

@@ -1,72 +1,71 @@
-
-class skeleton extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.render();
-        this.inert = true;
-    }
-    render() {
-        const template = this.getAttribute('template');
-        requestAnimationFrame(() => {
-            this.innerHTML = templateToHtml(template)
-        });
-    }
-    static get observedAttributes() {
-        return ['template'];
-    }
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this.render();
-    }
-}
-
-customElements.define('u2-skeleton', skeleton);
-
-
-
-
-
-function templateToHtml(template) {
-    let placeholderHTML = '';
-    const elements = template.split(' ');
-    elements.forEach(element => {
-        let [tagName, options] = element.split('(');
-        options = options ? options.slice(0, -1) : '';
-
-        if (tagName === '-') {
-            placeholderHTML += '<span style="flex-grow:1;"><s hidden></s></span>';
-        } else if (tagName === 'table') {
-            const [rows, cols] = options.split('x');
-            placeholderHTML += '<table>';
-            for (let i = 0; i < parseInt(rows); i++) {
-                placeholderHTML += '<tr>';
-                for (let j = 0; j < parseInt(cols); j++) {
-                    placeholderHTML += '<td></td>';
-                }
-                placeholderHTML += '</tr>';
-            }
-            placeholderHTML += '</table>';
-        } else {
-            placeholderHTML += `<${tagName}></${tagName}>`;
-        }
-
-    });
-
-    placeholderHTML += '';
-    return placeholderHTML;
-}
-
-
-
-
-// usage:
-// <u2-skeleton>
-// h2
-// img p
-// p
-// p
-// table(4,6)
-// - button button
-// </u2-skeleton>
+
+export default class U2Skeleton extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.render();
+        this.inert = true;
+    }
+    render() {
+        const template = this.getAttribute('template');
+        if (template == null) return;
+        requestAnimationFrame(() => {
+            this.innerHTML = templateToHtml(template)
+        });
+    }
+    static observedAttributes = ['template'];
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        this.render();
+    }
+}
+
+customElements.define('u2-skeleton', U2Skeleton);
+
+
+
+
+
+function templateToHtml(template) {
+    let placeholderHTML = '';
+    const elements = template.split(' ');
+    elements.forEach(element => {
+        let [tagName, options] = element.split('(');
+        options = options ? options.slice(0, -1) : '';
+
+        if (tagName === '-') {
+            placeholderHTML += '<span style="flex-grow:1;"><s hidden></s></span>';
+        } else if (tagName === 'table') {
+            const [rows, cols] = options.split('x');
+            placeholderHTML += '<table>';
+            for (let i = 0; i < parseInt(rows); i++) {
+                placeholderHTML += '<tr>';
+                for (let j = 0; j < parseInt(cols); j++) {
+                    placeholderHTML += '<td></td>';
+                }
+                placeholderHTML += '</tr>';
+            }
+            placeholderHTML += '</table>';
+        } else {
+            placeholderHTML += `<${tagName}></${tagName}>`;
+        }
+
+    });
+
+    placeholderHTML += '';
+    return placeholderHTML;
+}
+
+
+
+
+// usage:
+// <u2-skeleton>
+// h2
+// img p
+// p
+// p
+// table(4x6)
+// - button button
+// </u2-skeleton>

package/el/splitpanel/README.md

@@ -1,36 +1,56 @@
 # <u2-splitpanel> - element
-A splitpanel is a container that can be split horizontally or vertically. It is a simple container that can be used to split the screen into two or more parts.
+A container that can be split horizontally or vertically. Parts are resizable by dragging the dividers.
 
 ## Usage
 
 ```html
-<u2-splitpanel style="height:100%">
-    <div>splitpanel</div>
-    <u2-splitpanel vertical>
-        <div>splitpanel</div>
-        <div>splitpanel</div>
-    </u2-splitpanel>
+<u2-splitpanel style="height:100%">
+    <div>splitpanel</div>
+    <u2-splitpanel vertical>
+        <div>splitpanel</div>
+        <div>splitpanel</div>
+    </u2-splitpanel>
 </u2-splitpanel>
 ```
 
 ```css
-u2-splitpanel > :not(u2-splitpanel) {
-    padding:1rem;
-    background: #f8f8f8;
+u2-splitpanel > :not(u2-splitpanel) {
+    padding:1rem;
+    background: #f8f8f8;
 }
 ```
 
+## API
+
+### Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `vertical` | boolean | Split vertically (top/bottom) instead of horizontally (left/right) |
+
+### Parts
+
+| Part | Description |
+|------|-------------|
+| `divider` | The draggable separator between panels. |
+
+### CSS Custom Properties
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--size` | `0.3em` | Width/height of the divider |
+
 ## Install
 
 ```html
-<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/splitpanel/splitpanel.min.css" rel=stylesheet>
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/splitpanel/splitpanel.min.js" type=module async></script>
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/splitpanel/splitpanel.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/splitpanel/splitpanel.js" type=module async></script>
 ```
 
 ## Demos
 
-[minimal.html](http://gcdn.li/u2ui/u2@main/el/splitpanel/tests/minimal.html)  
 [tests.html](http://gcdn.li/u2ui/u2@main/el/splitpanel/tests/tests.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/splitpanel/tests/minimal.html)  
 
 ## About
 

package/el/splitpanel/manifest.json

@@ -1,49 +1,36 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-      {
-        "kind": "javascript-module",
-        "path": "splitpanel.js",
-        "declarations": [
-          {
-            "kind": "class",
-            "description": "A container that splits its children horizontally or vertically and makes them resizable.",
-            "name": "u2splitpanel",
-            "members": [],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "vertical",
-                    "u2-type": "boolean",
-                    "description": "If true, the children are split vertically."
-                }
-            ],
-            "cssProperties": [],
-            "cssParts": [
-                {
-                    "name": "divider",
-                    "description": "The divider between the children. The width (horizontal) or height (vertical) can be set using `--size`."
-                }
-            ],
-            "superclass": {
-              "name": "HTMLElement"
-            },
-            "tagName": "u2-splitpanel",
-            "customElement": true
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-element-definition",
-            "name": "u2-splitpanel",
-            "declaration": {
-              "name": "u2splitpanel",
-              "module": "splitpanel.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
-  
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "splitpanel.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "A container that splits its children horizontally or vertically and makes them resizable.",
+            "name": "U2Splitpanel",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "vertical",
+                "u2-type": "boolean",
+                "description": "If true, the children are split vertically."
+            }],
+            "cssProperties": [],
+            "cssParts": [{
+                "name": "divider",
+                "description": "The divider between the children. The width (horizontal) or height (vertical) can be set using `--size`."
+            }],
+            "superclass": { "name": "HTMLElement" },
+            "tagName": "u2-splitpanel",
+            "customElement": true
+        }],
+        "exports": [{
+            "kind": "custom-element-definition",
+            "name": "u2-splitpanel",
+            "declaration": {
+                "name": "U2Splitpanel",
+                "module": "splitpanel.js"
+            }
+        }]
+    }]
+}

package/el/splitpanel/splitpanel.css

@@ -1,17 +1,20 @@
-u2-splitpanel {
-    display:flex;
-    contain: strict; /* performance? */
-}
-u2-splitpanel > * {
-    overflow: auto;
-    flex:1 1 auto;
-    resize: horizontal;
-    position:relative;
-}
-u2-splitpanel[vertical] {
-    flex-direction: column;
-    & > * { resize: vertical; }
-}
-u2-splitpanel:defined > * {
-    resize: none !important;
-}
+u2-splitpanel {
+    display:flex;
+    contain: strict; /* performance? */
+}
+u2-splitpanel > * {
+    overflow: auto;
+    flex:1 1 auto;
+    resize: horizontal;
+    position:relative;
+}
+u2-splitpanel[vertical] {
+    flex-direction: column;
+    & > * { resize: vertical; }
+}
+u2-splitpanel > :not(u2-splitpanel) {
+    padding:1rem;
+}
+u2-splitpanel:defined > * {
+    resize: none !important;
+}

package/el/splitpanel/splitpanel.js

@@ -1,116 +1,117 @@
-
-class splitpanel extends HTMLElement {
-    constructor() {
-        super();
-
-        this.attachShadow({mode: 'open'});
-        this.shadowRoot.innerHTML = `
-            <style>
-            #slots {
-                display: contents;
-            }
-            #slots > :is(:first-child, :last-child) {
-                display: none;
-            }
-            [role=separator] {
-                display:flex;
-                align-items:center;
-                justify-content:center;
-                position:relative;
-                --size: .3em;
-                min-height: var(--size);
-                min-width: var(--size);
-                flex: 0 0 auto;
-                background: #ccc;
-                cursor: col-resize;
-                z-index:1;
-                touch-action: none;
-            }
-            [role=separator]:hover {
-                z-index:2;
-            }
-            :host([vertical]) [role=separator] {
-                cursor: row-resize;
-            }
-            </style>
-            <div id=slots></div>
-        `;
-        this.slotsEl = this.shadowRoot.getElementById('slots');
-
-        this.shadowRoot.addEventListener('pointerdown', (event) => {
-            if (!event.target.part.contains('divider')) return;
-            this.isDragging = true;
-            this.draggingDivider = event.target;
-            this.draggingDivider.setPointerCapture(event.pointerId);
-            this.previousPanel = this.draggingDivider.previousElementSibling.assignedNodes()[0];
-            this.nextPanel = this.draggingDivider.nextElementSibling.assignedNodes()[0];
-
-            // set flex-basis for all children
-            const children = [...this.children];
-            let total = 0;
-            children.forEach((child) => {
-                const size = this.hasAttribute('vertical') ? child.clientHeight : child.clientWidth;
-                total += size;
-                requestAnimationFrame(() => {
-                    child.style.flexBasis = `${size / total * 100}%`;
-                });
-            });
-        });
-
-
-        this.shadowRoot.addEventListener('pointermove', (event) => {
-            if (!this.isDragging) return;
-            const rect = this.getBoundingClientRect();
-            const position = this.hasAttribute('vertical') ? event.clientY - rect.top : event.clientX - rect.left;
-            const previousSize = this.hasAttribute('vertical') ? this.previousPanel.clientHeight : this.previousPanel.clientWidth;
-            const nextSize = this.hasAttribute('vertical') ? this.nextPanel.clientHeight : this.nextPanel.clientWidth;
-            const totalSize = previousSize + nextSize;
-            const totalPercentage = parseFloat(this.previousPanel.style.flexBasis) + parseFloat(this.nextPanel.style.flexBasis);
-        
-            const newPreviousSize = position - (this.previousPanel.getBoundingClientRect()[this.hasAttribute('vertical') ? 'top' : 'left'] - rect[this.hasAttribute('vertical') ? 'top' : 'left']);
-            const newNextSize = totalSize - newPreviousSize;
-
-            const prevPercent = newPreviousSize / totalSize * totalPercentage;
-            const nextPercent = newNextSize / totalSize * totalPercentage;
-
-            this.previousPanel.style.flexBasis = `${prevPercent.toFixed(2)}%`;
-            this.nextPanel.style.flexBasis = `${nextPercent.toFixed(2)}%`;
-        
-        });
-        this.shadowRoot.addEventListener('pointerup', () => {
-            this.isDragging = false;
-        });
-        this.shadowRoot.addEventListener('lostpointercapture', () => {
-            this.isDragging = false;
-        });
-
-
-        this.observer = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    this.assignChildren();
-                }
-            });
-        });        
-    }
-    
-    connectedCallback() {
-        // create a slot for each child and direct that child to the slot
-        this.assignChildren();
-        this.observer.observe(this, {childList: true});
-    }
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-    assignChildren() {
-        let html = '<div role="separator" part="divider" class="divider-0"></div>';
-        [...this.children].forEach((child, index) => {
-            const nr = index + 1;
-            child.slot = nr;
-            html += `<slot name="${nr}"></slot><div role="separator" part="divider" class="divider-${nr}"></div>`;
-        });
-        this.slotsEl.innerHTML = html;
-    }
-}
-
-customElements.define('u2-splitpanel', splitpanel);
+
+export default class U2Splitpanel extends HTMLElement {
+    constructor() {
+        super();
+
+        this.attachShadow({mode: 'open'});
+        this.shadowRoot.innerHTML = `
+            <style>
+            #slots {
+                display: contents;
+            }
+            #slots > :is(:first-child, :last-child) {
+                display: none;
+            }
+            [role=separator] {
+                display:flex;
+                align-items:center;
+                justify-content:center;
+                position:relative;
+                --size: .3em;
+                min-height: var(--size);
+                min-width: var(--size);
+                flex: 0 0 auto;
+                background: currentColor;
+                cursor: col-resize;
+                z-index:1;
+                touch-action: none;
+            }
+            [role=separator]::after {
+                display:flex;
+                justify-content:center;
+                align-items:center;
+                margin:-20rem;
+            }
+            [role=separator]:hover {
+                z-index:2;
+            }
+            :host([vertical]) [role=separator] {
+                cursor: row-resize;
+            }
+            </style>
+            <div id=slots></div>
+        `;
+        this.slotsEl = this.shadowRoot.getElementById('slots');
+
+        this.shadowRoot.addEventListener('pointerdown', (event) => {
+            if (!event.target.part.contains('divider')) return;
+            this.isDragging = true;
+            this.draggingDivider = event.target;
+            this.draggingDivider.setPointerCapture(event.pointerId);
+            this.previousPanel = this.draggingDivider.previousElementSibling.assignedNodes()[0];
+            this.nextPanel = this.draggingDivider.nextElementSibling.assignedNodes()[0];
+
+            // set flex-basis for all children
+            const children = [...this.children];
+            let total = 0;
+            children.forEach((child) => {
+                const size = this.hasAttribute('vertical') ? child.clientHeight : child.clientWidth;
+                total += size;
+                requestAnimationFrame(() => {
+                    child.style.flexBasis = `${size / total * 100}%`;
+                });
+            });
+        });
+
+
+        this.shadowRoot.addEventListener('pointermove', (event) => {
+            if (!this.isDragging) return;
+            const rect = this.getBoundingClientRect();
+            const position = this.hasAttribute('vertical') ? event.clientY - rect.top : event.clientX - rect.left;
+            const previousSize = this.hasAttribute('vertical') ? this.previousPanel.clientHeight : this.previousPanel.clientWidth;
+            const nextSize = this.hasAttribute('vertical') ? this.nextPanel.clientHeight : this.nextPanel.clientWidth;
+            const totalSize = previousSize + nextSize;
+            const totalPercentage = parseFloat(this.previousPanel.style.flexBasis) + parseFloat(this.nextPanel.style.flexBasis);
+        
+            const newPreviousSize = position - (this.previousPanel.getBoundingClientRect()[this.hasAttribute('vertical') ? 'top' : 'left'] - rect[this.hasAttribute('vertical') ? 'top' : 'left']);
+            const newNextSize = totalSize - newPreviousSize;
+
+            const prevPercent = newPreviousSize / totalSize * totalPercentage;
+            const nextPercent = newNextSize / totalSize * totalPercentage;
+
+            this.previousPanel.style.flexBasis = `${prevPercent.toFixed(2)}%`;
+            this.nextPanel.style.flexBasis = `${nextPercent.toFixed(2)}%`;
+        
+        });
+        //this.shadowRoot.addEventListener('pointerup', () => this.isDragging = false ); not needed?
+        this.shadowRoot.addEventListener('lostpointercapture', () => this.isDragging = false );
+
+        this.observer = new MutationObserver(mutations => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'childList') {
+                    this.assignChildren();
+                }
+            });
+        });        
+    }
+    
+    connectedCallback() {
+        // create a slot for each child and direct that child to the slot
+        this.assignChildren();
+        this.observer.observe(this, {childList: true});
+    }
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+    assignChildren() {
+        let html = '<div role="separator" part="divider" class="divider-0"></div>';
+        [...this.children].forEach((child, index) => {
+            const nr = index + 1;
+            child.slot = nr;
+            html += `<slot name="${nr}"></slot><div role="separator" part="divider" class="divider-${nr}"></div>`;
+        });
+        this.slotsEl.innerHTML = html;
+    }
+}
+
+customElements.define('u2-splitpanel', U2Splitpanel);

package/el/spot/README.md

@@ -0,0 +1,36 @@
+# <u2-spot> - element
+Visual indicator tracking elements by selector
+
+## Usage
+
+```html
+<u2-spot target=":scope > h6" active=":hover"></u2-spot>
+<h5>Target:</h5>
+<h6>By hover me</h6>
+<h6>Or hover me</h6>
+```
+
+```css
+u2-spot {
+    transition-duration: 0.5s;
+    background:var(--color-light);
+}
+```
+
+## Install
+
+```html
+<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/spot/spot.css" rel=stylesheet>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/el/spot/spot.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/el/spot/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/el/spot/tests/minimal.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. ♥
+