@swiftwc/ui 0.0.0-dev.13 → 0.0.0-dev.15

package/generated/components/tab-bar.js

@@ -25,9 +25,9 @@ export class TabBar extends DialogBase {
         }), el).on());
         // })
     }
-    static #handleClick = async (event) => {
-        console.debug(`${TabBar.name} ⚡️ ${event?.type}`);
-        if ('DIALOG' === event.target.tagName && 'tab-bar' === event.target.getAttribute('is'))
-            event?.target?.close?.();
+    static #handleClick = async (evt) => {
+        console.debug(`${TabBar.name} ⚡️ ${evt?.type}`);
+        if ('DIALOG' === evt.target.tagName && 'tab-bar' === evt.target.getAttribute('is'))
+            evt?.target?.close?.();
     };
 }

package/generated/components/tab-item.js

@@ -41,11 +41,14 @@ export class TabItem extends ButtonBase {
     };
     static #handleTabRevealOrSwap = async (btn, evt) => {
         console.debug(`${TabItem.name} ⚡️ ${evt?.type}`);
-        if (evt.detail?.tag !== btn.value)
+        const tv = btn?.closest('tab-view');
+        if (!tv)
             return;
+        // if (evt.detail?.tag !== btn.value) return
         // await Snapshot.waitReady
-        const isSelected = 'tabreveal' === evt?.type;
-        btn.ariaSelected = `${isSelected}`;
+        const isSelected = tv.selectedTab.map(({ id }) => id).includes(btn.value); //'tabreveal' === evt?.type
+        if (`${isSelected}` !== btn.ariaSelected)
+            btn.ariaSelected = `${isSelected}`;
         if (!isSelected)
             return;
         setTimeout(() => {

package/generated/components/tool-bar-item.js

@@ -6,8 +6,8 @@ export class ToolBarItem extends HTMLElement {
     }
     connectedCallback() {
         console.debug(`${ToolBarItem.name} ⚡️ connect`);
-        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (event) => {
-            if (event.target.closest('menu-view[open]'))
+        CleanupRegistry.register(this, onoff(touchGlass(this, (t) => t.closest('tool-bar-item-group') ?? t, (evt) => {
+            if (evt.target.closest('menu-view[open]'))
                 return false;
             return true;
         }), this).on());

package/generated/css/index.css

@@ -338,6 +338,7 @@
 @layer sw-base {
   :root {
     interpolate-size: allow-keywords;
+    touch-action: manipulation;
   }
   *,
   *::before,

package/generated/internal/utils/list-active.js

@@ -1,28 +1,73 @@
-function onClick(event) {
-    const el = event.target.closest('button,summary');
+const touchList = new WeakMap();
+function onDown(evt) {
+    const el = evt.target.closest('button,summary');
     if (!el)
         return;
+    touchList.set(el, setTimeout(() => {
+        if (!touchList.has(el))
+            return;
+        el.classList.add('active');
+    }, 70));
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
+    el.closest('scroll-view')?.addEventListener('scroll', onScroll, { once: true, passive: true });
+}
+function onOver(evt) {
+    const el = evt.target.closest('button,summary');
+    if (!el)
+        return;
+    if (0 === evt.buttons)
+        return;
     el.classList.add('active');
-    el.addEventListener('pointerleave', onCancel);
+    el.removeEventListener('pointerover', onOver);
+    el.addEventListener('pointerleave', onLeave, { once: true, passive: true });
 }
-function onCancel(event) {
-    const el = event.target.closest('button,summary');
+function onLeave(evt) {
+    const el = evt.target.closest('button,summary');
     if (!el)
         return;
-    self.requestAnimationFrame(() => {
-        el.removeEventListener('pointerleave', onCancel);
+    el.addEventListener('pointerover', onOver, { once: true, passive: true });
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onCancel(evt) {
+    const el = evt.target.closest('button,summary');
+    if (!el)
+        return;
+    // self.requestAnimationFrame(() => {
+    el.removeEventListener('pointerleave', onLeave);
+    el.removeEventListener('pointerover', onOver);
+    el.closest('scroll-view')?.removeEventListener('scroll', onScroll);
+    el.classList.remove('active');
+    if (touchList.has(el))
+        clearTimeout(touchList.get(el));
+    touchList.delete(el);
+    // })
+}
+function onScroll(evt) {
+    for (const el of evt.target.querySelectorAll('button,summary')) {
         el.classList.remove('active');
-    });
+        if (touchList.has(el))
+            clearTimeout(touchList.get(el));
+        touchList.delete(el);
+        el.removeEventListener('pointerleave', onLeave);
+        el.removeEventListener('pointerover', onOver);
+    }
 }
-const makePointerDownHandler = (target) => {
-    return onClick;
+const makePointerdownHandler = (target) => {
+    return onDown;
 }, makePointerCancelHandler = (target) => {
     return onCancel;
 };
 export default function (t) {
-    const onListener = makePointerDownHandler(t), offListener = makePointerCancelHandler(t);
+    const downListener = makePointerdownHandler(t), offListener = makePointerCancelHandler(t);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
         { types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
     ];
 }

package/generated/internal/utils/touch-glass.js

@@ -1,19 +1,19 @@
-const makePointerDownHandler = (target, targetCallback, checkCallback) => {
+const makePointerdownHandler = (target, targetCallback, checkCallback) => {
     return function (evt) {
         // if (event.pointerType !== 'touch')  return
         if (!checkCallback(evt))
             return;
         targetCallback(target).toggleAttribute('touch-glass', true);
     };
-}, makePointerCancelHandler = (target, targetCallback) => {
+}, makePointercancelHandler = (target, targetCallback) => {
     return function (evt) {
         targetCallback(target).toggleAttribute('touch-glass', false);
     };
 };
 export default function (t, targetCallback, checkCallback) {
-    const onListener = makePointerDownHandler(t, targetCallback, checkCallback), offListener = makePointerCancelHandler(t, targetCallback);
+    const downListener = makePointerdownHandler(t, targetCallback, checkCallback), cancelListener = makePointercancelHandler(t, targetCallback);
     return [
-        { types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
-        { types: 'pointerup pointercancel pointerleave', listener: offListener, addOptions: { passive: true } },
+        { types: 'pointerdown', listener: downListener, addOptions: { passive: true } },
+        { types: 'pointerup pointercancel pointerleave', listener: cancelListener, addOptions: { passive: true } },
     ];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.13",
+  "version": "0.0.0-dev.15",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -43,6 +43,10 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
+    "./events": {
+      "types": "./generated/events/index.d.ts",
+      "default": "./generated/events/index.js"
+    },
     "./css": "./generated/css/index.css",
     "./scss": "./scss/index.scss",
     "./scss/*": "./scss/*.scss",

package/scss/base/_reboot.scss

@@ -11,6 +11,8 @@
 
   :root {
     interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
   }
 
   *,