@quaffui/quaff 0.1.0-prealpha8 → 0.1.0-prealpha9

package/dist/helpers/ripple.js

@@ -0,0 +1,75 @@
+const triggerEvents = ["pointerdown", "touchstart", "keydown"];
+const cancelEvents = ["mouseleave", "dragleave", "touchmove", "touchcancel", "pointerup", "keyup"];
+export function ripple(el, options = {}) {
+    function addClasses(center) {
+        let shouldBeCentered = center || options.center;
+        if (!el.classList.contains("q-ripple--effect")) {
+            el.classList.add("q-ripple--effect");
+        }
+        if (!shouldBeCentered && el.classList.contains("q-ripple--center")) {
+            el.classList.remove("q-ripple--center");
+        }
+        shouldBeCentered && el.classList.add("q-ripple--center");
+    }
+    function setOptions(options) {
+        if (options.duration && options.duration < 0) {
+            options.duration = undefined;
+        }
+        if (options.color) {
+            el.style.setProperty("--ripple-color", options.color);
+        }
+        if (options.duration) {
+            el.style.setProperty("--ripple-duration", `${options.duration}ms`);
+        }
+    }
+    addClasses();
+    setOptions(options);
+    function createRipple(e, center) {
+        if (el.hasAttribute("aria-disabled"))
+            return;
+        if (e instanceof KeyboardEvent) {
+            if (!["Enter", "Space"].includes(e.code) || e.repeat) {
+                return;
+            }
+            e.preventDefault();
+            const click = new PointerEvent("pointerdown");
+            createRipple(click, true);
+            return;
+        }
+        addClasses(center);
+        const rect = el.getBoundingClientRect();
+        const clientX = e instanceof TouchEvent ? e.touches[0].clientX : e.clientX;
+        const clientY = e instanceof TouchEvent ? e.touches[0].clientY : e.clientY;
+        const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
+        const y = clientY - rect.top > el.offsetHeight / 2 ? 0 : el.offsetHeight;
+        const radius = Math.hypot(x - (clientX - rect.left), y - (clientY - rect.top));
+        const ripple = document.createElement("div");
+        ripple.classList.add("q-ripple");
+        ripple.style.left = `${clientX - rect.left - radius}px`;
+        ripple.style.top = `${clientY - rect.top - radius}px`;
+        ripple.style.width = ripple.style.height = `${radius * 2}px`;
+        el.appendChild(ripple);
+        function removeRipple() {
+            if (ripple === null)
+                return;
+            ripple.style.opacity = "0";
+            setTimeout(() => {
+                ripple.remove();
+            }, options.duration || 1000);
+            cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
+        }
+        cancelEvents.forEach((event) => el.addEventListener(event, removeRipple));
+    }
+    triggerEvents.forEach((event) => el.addEventListener(event, createRipple, { passive: event === "touchstart" }));
+    return {
+        destroy() {
+            triggerEvents.forEach((event) => {
+                el.removeEventListener(event, createRipple);
+            });
+        },
+        update(newOptions) {
+            options = newOptions;
+            setOptions(newOptions);
+        },
+    };
+}

package/dist/helpers/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.1.0-prealpha8";
+declare const _default: "0.1.0-prealpha9";
 export default _default;

package/dist/helpers/version.js

@@ -1 +1 @@
-export default "0.1.0-prealpha8";
+export default "0.1.0-prealpha9";

package/dist/utils/dom.d.ts

@@ -0,0 +1,8 @@
+import type { Direction } from "./events";
+export declare function getParentElement(el: HTMLElement): HTMLElement;
+export declare function getAllChildren(el: HTMLElement): HTMLElement[];
+export declare function isFocusable(el: HTMLElement): boolean;
+export declare function getFocusableChildren<T extends HTMLElement>(el: T): T[];
+export declare function getClosestFocusableChild(el: HTMLElement): HTMLElement;
+export declare function getClosestFocusableSibling<T extends HTMLElement>(el: T, direction: Direction): HTMLElement;
+export declare function getClosestFocusableBlock(el: HTMLElement, direction: Direction): HTMLElement;

package/dist/utils/dom.js

@@ -0,0 +1,71 @@
+export function getParentElement(el) {
+    let parent = el.parentNode;
+    while (parent && parent.nodeType !== 1) {
+        parent = parent.parentNode;
+    }
+    return parent;
+}
+export function getAllChildren(el) {
+    return Array.from(el.querySelectorAll("*"));
+}
+// Focus utils
+const focusableElements = ':is(a, button, input, [tabindex]:not([tabindex="-1"])):not([disabled], [aria-disabled="true"])';
+export function isFocusable(el) {
+    return (el.offsetWidth > 0 &&
+        el.offsetHeight > 0 &&
+        (el.style.opacity === "" || +el.style.opacity > 0) &&
+        el.style.display !== "none" &&
+        el.tabIndex >= 0);
+}
+export function getFocusableChildren(el) {
+    return Array.from(el.querySelectorAll(focusableElements));
+}
+export function getClosestFocusableChild(el) {
+    let children = Array.from(el.querySelectorAll(focusableElements));
+    const focusableChildren = children.filter(isFocusable);
+    return focusableChildren[0] || null;
+}
+export function getClosestFocusableSibling(el, direction) {
+    const parent = getParentElement(el);
+    const allSiblings = Array.from(parent.childNodes);
+    let filtered = allSiblings.filter(isFocusable);
+    const indexOfEl = filtered.indexOf(el);
+    if (direction === "next") {
+        const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i + 1 === filtered.length ? filtered[0] : filtered[i + 1];
+        }
+        return filtered[i];
+    }
+    else {
+        const i = indexOfEl - 1 === -1 ? filtered.length - 1 : indexOfEl - 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i - 1 === -1 ? filtered.at(-1) : filtered[i - 1];
+        }
+        return filtered[i];
+    }
+}
+export function getClosestFocusableBlock(el, direction) {
+    let parent = getParentElement(el);
+    let parentFocusableChildren = getFocusableChildren(parent);
+    function getNextFocusableBlock(parentBlock) {
+        const grandParent = getParentElement(parentBlock);
+        const grandParentChildren = getAllChildren(grandParent);
+        const indexOfEl = grandParentChildren.indexOf(el);
+        const sliced = direction === "next"
+            ? grandParentChildren.slice(indexOfEl)
+            : grandParentChildren.slice(0, indexOfEl);
+        const filtered = sliced.filter((element) => isFocusable(element) && !parentFocusableChildren.includes(element));
+        if (!filtered.length) {
+            return getNextFocusableBlock(grandParent);
+        }
+        return direction === "next" ? filtered[0] : filtered.at(-1);
+    }
+    let targetBlock = getNextFocusableBlock(parent);
+    if (targetBlock.hasAttribute("aria-current")) {
+        targetBlock = getClosestFocusableSibling(targetBlock, direction);
+    }
+    return targetBlock;
+}

package/dist/utils/events.d.ts

@@ -0,0 +1,13 @@
+export type Direction = "previous" | "next";
+export declare function isActivationKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Enter" | "Space";
+};
+export declare function isArrowKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+};
+export declare function isTabKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Tab";
+};
+export declare function getDirection(e: KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+}): Direction;

package/dist/utils/events.js

@@ -0,0 +1,13 @@
+// Keyboard events
+export function isActivationKey(e) {
+    return e.code === "Enter" || e.code === "Space";
+}
+export function isArrowKey(e) {
+    return e.code.startsWith("Arrow");
+}
+export function isTabKey(e) {
+    return e.code === "Tab";
+}
+export function getDirection(e) {
+    return ["ArrowDown", "ArrowRight"].includes(e.code) ? "next" : "previous";
+}

package/dist/utils/props.d.ts

@@ -1,4 +1,4 @@
-export declare function createStyles(styleObj: Record<string, string | number | null | undefined>, userStyles?: string): string | null;
+export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string): string | null;
 interface CreateClassesOptions {
     component?: string;
     element?: string;

package/dist/utils/props.js

@@ -3,7 +3,7 @@ export function createStyles(styleObj, userStyles) {
     const stylesArray = Object.entries(styleObj);
     const toJoin = [];
     for (let [styleName, styleVal] of stylesArray) {
-        if (styleVal === undefined || styleVal === null) {
+        if (styleVal === undefined || styleVal === null || styleVal === false) {
             continue;
         }
         styleName = convertCase(styleName, "camel", "kebab");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha8",
+  "version": "0.1.0-prealpha9",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",