u2ui 1.0.0 → 1.4.5

package/attr/confirm/confirm.js

@@ -1,90 +1,86 @@
-
-let resentConfirmed = false;
-
-// submit
-// todo: test if it works inside shadow dom
-
-document.addEventListener('submit', e=>{
-    if (resentConfirmed) return; // dont check again
-    const form = e.target;
-    const btn = e.submitter;
-    let element = null;
-    if (form.hasAttribute('u2-confirm')) element = form;
-    if (btn && btn.hasAttribute('u2-confirm')) element = btn;
-    if (!element) return;
-    confirmEvent(e, element, ()=> form.requestSubmit(btn) );
-},true);
-
-// click
-document.addEventListener('click', e=>{
-    if (resentConfirmed) return;
-
-    //const target = e.target;
-    const target = e.composedPath()[0];
-    
-    const element = target.closest('button[u2-confirm]');
-    if (!element) return;
-    if (element.form && element.type==='submit') return; // handled by submit event. What about "reset"?
-    confirmEvent(e, element, ()=> element.click() );
-},true);
-
-async function confirmEvent(e, element, then){
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    const {confirm} = await import('../../js/dialog/dialog.js');
-    const lang = langOf(element);
-    const ok = await confirm({
-        body: getMessage(element, lang),
-        lang,
-    });
-    if (ok) {
-        resentConfirmed = true;
-        then();
-        resentConfirmed = false;
-    }
-}
-
-function getMessage(el, lang) {
-    // get lang of el
-    let msg = el.getAttribute('u2-confirm');
-    if (msg) return msg;
-    msg = sure[lang];
-    if (msg) return msg;
-    console.warn('no translation for lang "'+lang+'" in confirm.js. Please report!');
-    return sure.en;
-}
-
-function langOf(el) {
-    return el.closest('[lang]')?.getAttribute('lang') || navigator.language.substring(0,2) || 'en';
-}
-
-const sure = {
-    en: 'Are you sure?',
-    de: 'Sind Sie sicher?',
-    fr: 'Êtes-vous sûr?',
-    es: '¿Estás seguro?',
-    it: 'Sei sicuro?',
-    pt: 'Tem certeza?',
-    ua: 'Ви впевнені?',
-    ru: 'Вы уверены?',
-    ja: '本気ですか？',
-    ko: '확실합니까?',
-    zh: '你确定吗？',
-    nl: 'Weet je het zeker?',
-};
-
-
-/* TODO: button and link confirm?
-document.addEventListener('click', async e=>{
-    if (resentConfirmed) return;
-    let element = e.target.closest('[u2-confirm]');
-    if (!element) return;
-    if (element.form || element.tagName === 'FORM') {
-        console.log('handled by submit event');
-        return;
-    }
-    confirmEvent(e, element, ()=>
-        element.click()
-    );
-},true);
-*/
+
+let resentConfirmed = false;
+
+// submit
+// todo: test if it works inside shadow dom
+
+document.addEventListener('submit', e=>{
+    if (resentConfirmed) return; // dont check again
+    const form = e.target;
+    const btn = e.submitter;
+    const element = btn?.hasAttribute('u2-confirm') ? btn : form.hasAttribute('u2-confirm') ? form : null;
+    if (!element) return;
+    confirmEvent(e, element, ()=> form.requestSubmit(btn) );
+},true);
+
+// click
+document.addEventListener('click', e=>{
+    if (resentConfirmed) return;
+
+    //const target = e.target;
+    const target = e.composedPath()[0];
+    
+    const element = target.closest('button[u2-confirm]');
+    if (!element) return;
+    if (element.form && element.type==='submit') return; // handled by submit event. What about "reset"?
+    confirmEvent(e, element, ()=> element.click() );
+},true);
+
+async function confirmEvent(e, element, then){
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    const {confirm} = await import('../../js/dialog/dialog.js');
+    const lang = langOf(element);
+    const ok = await confirm({
+        body: getMessage(element, lang),
+        lang,
+    });
+    if (ok) {
+        resentConfirmed = true;
+        then();
+        resentConfirmed = false;
+    }
+}
+
+function getMessage(el, lang) {
+    // get lang of el
+    const msg = el.getAttribute('u2-confirm') || sure[lang];
+    if (msg) return msg;
+    console.warn('no translation for lang "'+lang+'" in confirm.js. Please report!');
+    return sure.en;
+}
+
+function langOf(el) {
+    return el.closest('[lang]')?.getAttribute('lang') || navigator.language.substring(0,2) || 'en';
+}
+
+const sure = {
+    en: 'Are you sure?',
+    de: 'Sind Sie sicher?',
+    fr: 'Êtes-vous sûr?',
+    es: '¿Estás seguro?',
+    it: 'Sei sicuro?',
+    pt: 'Tem certeza?',
+    uk: 'Ви впевнені?',
+    ru: 'Вы уверены?',
+    ja: '本気ですか？',
+    ko: '확실합니까?',
+    zh: '你确定吗？',
+    nl: 'Weet je het zeker?',
+};
+
+
+/* TODO: button and link confirm?
+document.addEventListener('click', async e=>{
+    if (resentConfirmed) return;
+    let element = e.target.closest('[u2-confirm]');
+    if (!element) return;
+    if (element.form || element.tagName === 'FORM') {
+        console.log('handled by submit event');
+        return;
+    }
+    confirmEvent(e, element, ()=>
+        element.click()
+    );
+},true);
+*/

package/attr/confirm/manifest.json

@@ -1,43 +1,43 @@
-{
-    "schemaVersion": "1.0.0",
-    "readme": "README.md",
-    "modules": [
-    {
-        "kind": "javascript-module",
-        "path": "confirm.js",
-        "declarations": [
-          {
-            "// kind": "class",
-            "description": "Show confirm dialog before click triggers or form submission",
-            "name": "u2-confirm",
-            "members": [],
-            "events": [],
-            "attributes": [
-                {
-                    "name": "u2-confirm",
-                    "description": "If set to true, the confirm will be shown before click triggers or the associated form is submitted. Its value may be a string to be used as the message to show in the confirm dialog. The attribute works for buttons and form-elements.",
-                    "u2Examples": ["", "Are you sure you want to delete this item?"]
-                },{
-                    "name": "lang",
-                    "description": "The language to use for internationalization",
-                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
-                }
-            ],
-            "cssProperties": [],
-            "attributeName": "u2-confirm"
-          }
-        ],
-        "exports": [
-          {
-            "kind": "custom-attribute-definition",
-            "name": "u2-confirm",
-            "declaration": {
-              "name": "u2-confirm",
-              "module": "confirm.js"
-            }
-          }
-        ]
-      }
-    ]
-  }
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+    {
+        "kind": "javascript-module",
+        "path": "confirm.js",
+        "declarations": [
+          {
+            "// kind": "class",
+            "description": "Show confirm dialog before click triggers or form submission",
+            "name": "u2-confirm",
+            "members": [],
+            "events": [],
+            "attributes": [
+                {
+                    "name": "u2-confirm",
+                    "description": "If set to true, the confirm will be shown before click triggers or the associated form is submitted. Its value may be a string to be used as the message to show in the confirm dialog. The attribute works for buttons and form-elements.",
+                    "u2Examples": ["", "Are you sure you want to delete this item?"]
+                },{
+                    "name": "lang",
+                    "description": "The language to use for internationalization",
+                    "u2Examples": ["en-US","fr-FR","de-DE","es-ES","it-IT","ja-JP","ko-KR","zh-CN","zh-TW"]
+                }
+            ],
+            "cssProperties": [],
+            "attributeName": "u2-confirm"
+          }
+        ],
+        "exports": [
+          {
+            "kind": "custom-attribute-definition",
+            "name": "u2-confirm",
+            "declaration": {
+              "name": "u2-confirm",
+              "module": "confirm.js"
+            }
+          }
+        ]
+      }
+    ]
+  }
   

package/attr/disableif/README.md

@@ -0,0 +1,37 @@
+# [u2-disableif] - attribute
+Disable form-elements (like inputs, buttons, fieldsets) based on a condition
+
+## Usage
+
+```html
+<form>
+    <label>
+        <input type=checkbox name="isClient"> Already Client?
+    </label>
+    <input u2-disableif="!isClient" placeholder="Client number" >
+</form>
+```
+
+```css
+[u2-disableif][disabled] {
+    opacity: .3;
+    xbackground: #ccc;
+}
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/disableif/disableif.js" type=module async></script>
+```
+
+## Demos
+
+[test.html](http://gcdn.li/u2ui/u2@main/attr/disableif/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/disableif/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. ♥
+

package/attr/disableif/disableif.js

@@ -0,0 +1,59 @@
+import { SelectorObserver } from '../../js/SelectorObserver/SelectorObserver.js';
+
+function checkCondition(el) {
+    const condition = el.getAttribute('u2-disableif');
+
+    const match = condition.match(/^(!?)([^=!<>]*)(=|!=|>|<)?([^=!<>]*)$/);
+    if (match) {
+        let [_, not, field, operator, value] = match;
+        if (not) {
+            if (operator) console.warn(`u2-disableif: "!" operator is not supported with other operators`, { el, field, operator, value });
+            operator = '=';
+        }
+        const target = el.form.elements[field];
+        if (!target) {
+            console.warn(`u2-disableif: field "${field}" not found`, { el, field, operator, value });
+            return;
+        }
+        let stringTargetValue = target.value;
+        if (target.type === 'checkbox') stringTargetValue = target.checked ? target.value : '';
+
+        const numericTargetValue = parseFloat(stringTargetValue);
+        const numericConditionValue = parseFloat(value);
+
+        let conditionMet = false;
+        switch (operator) {
+            case undefined:
+                conditionMet = !!stringTargetValue;
+                break;
+            case '=':
+                conditionMet = stringTargetValue === value;
+                break;
+            case '!=':
+                conditionMet = stringTargetValue !== value;
+                break;
+            case '>':
+                conditionMet = numericTargetValue > numericConditionValue;
+                break;
+            case '<':
+                conditionMet = numericTargetValue < numericConditionValue;
+                break;
+        }
+        el.disabled = conditionMet;
+    }
+}
+
+
+new SelectorObserver({
+    on: (el) => {
+        checkCondition(el);
+        // wait for custom-element-inputs
+        // queueMicrotask(()=>checkCondition(el));
+        requestAnimationFrame(()=>checkCondition(el));
+        //setTimeout(()=>checkCondition(el));
+        const form = el.form;
+        el.form.addEventListener('input', () => checkCondition(el));
+    },
+    off: (el) => {
+    }
+}).observe('[u2-disableif]');

package/attr/disableif/manifest.json

@@ -0,0 +1,38 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [
+        {
+            "kind": "javascript-module",
+            "path": "disableif.js",
+            "declarations": [
+                {
+                    "kind": "class",
+                    "description": "Disables an element if a condition is met",
+                    "name": "u2-disableif",
+                    "members": [],
+                    "events": [],
+                    "attributes": [
+                        {
+                            "name": "u2-disableif",
+                            "description": "Condition to disable the element",
+                            "u2Examples": ["true", "false"]
+                        }
+                    ],
+                    "cssProperties": [],
+                    "attributeName": "u2-disableif"
+                }
+            ],
+            "exports": [
+                {
+                    "kind": "custom-attribute-definition",
+                    "name": "u2-disableif",
+                    "declaration": {
+                        "name": "u2-disableif",
+                        "module": "disableif.js"
+                    }
+                }
+            ]
+        }
+    ]
+}

package/attr/draghandle/README.md

@@ -1,37 +1,37 @@
 # [u2-draghandle] - attribute
-Define a drag handle-element for an element that uses the draggable attribute.
+Defines a handle element to drag a `draggable=false` container.
 
 ## Usage
 
 ```html
-<article draggable="false">
-    <u2-ico u2-draghandle>
-        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"></path></svg>
-    </u2-ico>
-    <h2>This is a draggable article.</h2>
-    <p>
-        It is draggable, but only by its drag handle.
-    </p>
+<article draggable="false">
+    <u2-ico u2-draghandle>
+        <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2s.9-2 2-2s2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"></path></svg>
+    </u2-ico>
+    <p>
+        This is draggable, by the drag handle.
+    </p>
 </article>
 ```
 
 ```css
-[draggable="false"] {
-    border: .5rem solid #eee;
-}
-[draggable="true"] {
-    border: .5rem solid var(--color, #4caf50);
+[draggable="false"] {
+    border: .5rem solid #eee;
+}
+[draggable="true"] {
+    border: .5rem solid var(--color, #4caf50);
 }
 ```
 
 ## Install
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/attr/draghandle/draghandle.min.js" type=module async></script>
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/draghandle/draghandle.js" type=module async></script>
 ```
 
 ## Demos
 
+[shadowdom.html](http://gcdn.li/u2ui/u2@main/attr/draghandle/tests/shadowdom.html)  
 [minimal.html](http://gcdn.li/u2ui/u2@main/attr/draghandle/tests/minimal.html)  
 
 ## About

package/attr/draghandle/draghandle.js

@@ -1,42 +1,24 @@
-import 'https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js';
-
-const css = `
-[u2-draghandle] {
-    cursor: grab;
-    touch-action: none; /* needed? probably yes */
-}
-`;
-document.head.insertAdjacentHTML('afterbegin', `<style>${css}</style>`);
-
-
-const root = document;
-// root.addEventListener("pointerdown",(e)=>{
-//    root.releasePointerCapture(e.pointerId);
-// })
-root.addEventListener('pointerenter', e => {
-    if (!e.target.matches) return // document
-    if (!e.target.matches('[u2-draghandle]')) return;
-    const draggable = e.target.closest('[draggable]');
-    if (!draggable) console.warn('u2-draghandle: no draggable parent found');
-    if (draggable.getAttribute('draggable') === 'true') console.warn('u2-draghandle: draggable-attribute should be empty or false, but was true');
-    draggable.setAttribute('draggable', true);
-},true);
-root.addEventListener('pointerleave', e => {
-    if (!e.target.matches) return // document
-    if (!e.target.matches('[u2-draghandle]')) return;
-    e.target.closest('[draggable]').setAttribute('draggable', 'false');
-},true);
-
-// desktop only
-// addEventListener('mouseenter', e => {
-//     if (!e.target.matches('[u2-draghandle]')) return;
-//     const draggable = e.target.closest('[draggable]');
-//     if (!draggable) console.warn('u2-draghandle: no draggable parent found');
-//     if (draggable.getAttribute('draggable') === 'true') console.warn('u2-draghandle: draggable-attribute should be empty or false, but was true');
-//     draggable.setAttribute('draggable', true);
-// },true);
-
-// addEventListener('mouseleave', e => {
-//     if (!e.target.matches('[u2-draghandle]')) return;
-//     e.target.closest('[draggable]').setAttribute('draggable', 'false');
-// },true);
+import 'https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js';
+
+const css = `
+[u2-draghandle] {
+    cursor: grab;
+    touch-action: none; /* needed? probably yes */
+}
+`;
+document.head.insertAdjacentHTML('afterbegin', `<style>${css}</style>`);
+
+
+// pointermove statt pointerover/-out: Bewegungen INNERHALB eines Shadow-Roots erzeugen für einen
+// document-Listener keine over/out-Events (target & relatedTarget retargeten beide auf den Host ->
+// gleicher Knoten -> Event wird unterdrückt). pointermove feuert dagegen kontinuierlich, und
+// composedPath()[0] liefert das echte Element unter dem Zeiger – auch im Shadow-DOM.
+let activeDraggable = null;
+document.addEventListener('pointermove', e => {
+    const handle = e.composedPath()[0]?.closest?.('[u2-draghandle]');
+    const draggable = handle ? handle.closest('[draggable]') : null;
+    if (draggable === activeDraggable) return; // kein Wechsel -> nichts tun
+    activeDraggable?.setAttribute('draggable', 'false');
+    activeDraggable = draggable;
+    draggable?.setAttribute('draggable', 'true');
+}, true);

package/attr/draghandle/manifest.json

@@ -0,0 +1,30 @@
+{
+    "schemaVersion": "1.0.0",
+    "readme": "README.md",
+    "modules": [{
+        "kind": "javascript-module",
+        "path": "draghandle.js",
+        "declarations": [{
+            "kind": "class",
+            "description": "Provides a handle to drag elements",
+            "name": "u2-draghandle",
+            "members": [],
+            "events": [],
+            "attributes": [{
+                "name": "u2-draghandle",
+                "description": "Enables the drag handle on the element",
+                "u2Examples": ["", "true", "false"]
+            }],
+            "cssProperties": [],
+            "attributeName": "u2-draghandle"
+        }],
+        "exports": [{
+            "kind": "custom-attribute-definition",
+            "name": "u2-draghandle",
+            "declaration": {
+                "name": "u2-draghandle",
+                "module": "draghandle.js"
+            }
+        }]
+    }]
+}

package/attr/dropzone/README.md

@@ -0,0 +1,32 @@
+# [u2-dropzone] - attribute
+Dropzone for draggable elements. <div u2-dropzone=":scope selektor">
+
+## Usage
+
+```html
+<div u2-dropzone>
+    <div draggable="true">item 1</div>
+    <div draggable="true">item 2</div>
+    <div draggable="true">item 3</div>
+</div>
+```
+
+## Install
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@main/attr/dropzone/dropzone.js" type=module async></script>
+```
+
+## Demos
+
+[shadowdom.html](http://gcdn.li/u2ui/u2@main/attr/dropzone/tests/shadowdom.html)  
+[board.html](http://gcdn.li/u2ui/u2@main/attr/dropzone/tests/board.html)  
+[test.html](http://gcdn.li/u2ui/u2@main/attr/dropzone/tests/test.html)  
+[minimal.html](http://gcdn.li/u2ui/u2@main/attr/dropzone/tests/minimal.html)  
+[strategies.html](http://gcdn.li/u2ui/u2@main/attr/dropzone/tests/strategies.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. ♥
+