@quaffui/quaff 1.0.0-alpha1 → 1.0.0-alpha2

package/README.md

@@ -2,7 +2,7 @@
 
 Quaff is a component library for Svelte that follows the [Material Design 3](https://m3.material.io/) guidelines. It provides a comprehensive set of UI components designed to create beautiful, consistent, and accessible web applications.
 
-> **⚠️ Early Development Notice:** Quaff is currently in pre-alpha stage (v0.1.0-prealpha). APIs may change significantly between versions, and components might be incomplete or contain bugs. Use in production at your own risk.
+> **⚠️ Early Development Notice:** Quaff is still maturing and not battle-tested yet. Use it in production if you're feeling brave! We welcome contributions and feedback to help shape the library.
 
 ## Overview
 

package/dist/classes/Quaff.svelte.d.ts

@@ -1,5 +1,17 @@
 declare class Quaff {
     version: string;
+    private static readonly breakpointList;
+    readonly breakpoints: {
+        currentWidth: number;
+        current: "xs" | "sm" | "md" | "lg" | "xl";
+        isMoreThan(breakpoint: "xs" | "sm" | "md" | "lg" | "xl", included?: boolean): boolean;
+        isLessThan(breakpoint: "xs" | "sm" | "md" | "lg" | "xl", included?: boolean): boolean;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
     router: import("@sveltejs/kit").Page<Record<string, string>, string | null>;
     protected dark: boolean;
     init(): void;

package/dist/classes/Quaff.svelte.js

@@ -1,8 +1,54 @@
 import { onMount } from "svelte";
+import { innerWidth } from "svelte/reactivity/window";
 import { version } from "../helpers";
 import { page } from "$app/state";
 class Quaff {
     version = version;
+    static breakpointList = {
+        xs: 0,
+        sm: 600,
+        md: 960,
+        lg: 1280,
+        xl: 1920,
+    };
+    breakpoints = $derived.by(() => {
+        const currentWidth = innerWidth.current;
+        let current;
+        if (!currentWidth || currentWidth < 600) {
+            current = "xs";
+        }
+        else if (currentWidth < 960) {
+            current = "sm";
+        }
+        else if (currentWidth < 1280) {
+            current = "md";
+        }
+        else if (currentWidth < 1920) {
+            current = "lg";
+        }
+        else {
+            current = "xl";
+        }
+        return {
+            ...Quaff.breakpointList,
+            currentWidth: currentWidth || 0,
+            current,
+            isMoreThan(breakpoint, included = false) {
+                if (!currentWidth) {
+                    return false;
+                }
+                const breakpointWidth = this[breakpoint];
+                return included ? currentWidth >= breakpointWidth : currentWidth > breakpointWidth;
+            },
+            isLessThan(breakpoint, included = false) {
+                if (!currentWidth) {
+                    return false;
+                }
+                const breakpointWidth = this[breakpoint];
+                return included ? currentWidth <= breakpointWidth : currentWidth < breakpointWidth;
+            },
+        };
+    });
     router = $derived(page);
     dark = $state(false);
     init() {

package/dist/components/card/QCard.scss

@@ -5,6 +5,9 @@
   border-radius: 0.75rem;
   transition: transform var(--speed-3) padding var(--speed-3) border-radius var(--speed-3);
 
+  background-color: var(--surface);
+  color: var(--on-surface);
+
   @include mixins.padding("a-md");
   @include mixins.elevate(1, "bottom");
 
@@ -22,4 +25,23 @@
   &--rounded {
     border-radius: 2rem;
   }
+
+  &--fill {
+    background-color: var(--surface-variant);
+
+    &.q-card--primary {
+      background-color: var(--primary-container);
+      color: var(--on-primary-container);
+    }
+
+    &.q-card--secondary {
+      background-color: var(--secondary-container);
+      color: var(--on-secondary-container);
+    }
+
+    &.q-card--tertiary {
+      background-color: var(--tertiary-container);
+      color: var(--on-tertiary-container);
+    }
+  }
 }

package/dist/components/card/QCard.svelte

@@ -10,14 +10,21 @@
     ...props
   }: QCardProps = $props();
 
-  const colorOptions: (typeof fill)[] = ["primary", "secondary", "tertiary"];
+  type ColorOptions = "primary" | "secondary" | "tertiary";
+
+  const colorOptions: ColorOptions[] = [
+    "primary",
+    "secondary",
+    "tertiary",
+  ] as const;
 
   const color = $derived.by(() => {
     if (fill) {
-      return colorOptions.includes(fill)
-        ? `${fill}-container`
-        : "surface-variant";
+      return fill === true || !colorOptions.includes(fill as ColorOptions)
+        ? "surface-variant"
+        : fill;
     }
+
     return "surface";
   });
 </script>
@@ -26,11 +33,12 @@
   {...props}
   class={[
     "q-card",
-    color,
     props.class,
     flat && "q-card--flat",
     bordered && "q-card--bordered",
     rounded && "q-card--rounded",
+    fill && "q-card--fill",
+    fill && color !== "surface" && `q-card--${color}`,
   ]}
   data-quaff
 >

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -73,12 +73,12 @@
 <div {...props} class="q-code-block" data-quaff>
   {#if copiable}
     <div
-      class="flex justify-between {title
+      class="q-code-block__title-section justify-between {title
         ? 'items-center'
         : 'justify-end'} q-pb-sm"
     >
       {#if title}
-        <h4 class="q-ma-none q-pr-lg">{title}</h4>
+        <h4 class="q-ma-none">{title}</h4>
       {/if}
       <QBtn
         class="border-{btnColor} text-{btnColor}"
@@ -106,11 +106,24 @@
 <style>
   .q-code-block {
     border-radius: inherit;
+  }
+  .q-code-block :global(pre) {
+    text-align: left;
+    padding: 1rem;
+    overflow: auto;
+  }
 
-    :global(pre) {
-      text-align: left;
-      padding: 1rem;
-      overflow: auto;
+  .q-code-block__title-section {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  @media only screen and (max-width: 599px) {
+    :global(.q-dialog:has(.q-code-block__title-section)) {
+      min-width: auto;
+    }
+    .q-code-block__title-section {
+      flex-direction: column;
     }
   }
 </style>

package/dist/components/drawer/QDrawer.scss

@@ -21,6 +21,15 @@
     z-index: 6;
   }
 
+  &__swipearea {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+
+    touch-action: none;
+  }
+
   @each $side in ("left", "right") {
     &.q-drawer--#{$side} {
       #{$side}: 0;
@@ -37,3 +46,10 @@
     transform: translate(0);
   }
 }
+
+@each $side in ("left", "right") {
+  .q-drawer__swipearea--#{$side} {
+    #{$side}: 0;
+    width: 1.25rem;
+  }
+}

package/dist/components/drawer/QDrawer.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { getContext, onDestroy, onMount, untrack } from "svelte";
+  import { getContext, onMount, untrack } from "svelte";
+  import { on } from "svelte/events";
   import { navigating } from "$app/state";
   import { useSize } from "../../composables";
   import { QContext } from "../../classes/QContext.svelte";
@@ -15,11 +16,27 @@
     bordered = false,
     overlay = false,
     persistent = false,
+    noSwipe = false,
+    swipeThreshold = "30%",
     children,
     ...props
   }: QDrawerProps = $props();
 
+  const PEEK_THRESHOLD = 30; // How far the drawer peeks out when cursor is near the edge
+  const TRANSITION = "top 0.3s, bottom 0.3s, transform 0.3s";
+
+  let unlistenClick: () => void;
+  let unlistenPointerdown: () => void;
+  let unlistenPointermove: () => void;
+  let unlistenPointerup: () => void;
+  let unlistenPointercancel: () => void;
+
   let drawerEl = $state<HTMLDivElement>();
+  let swipeAreaEl = $state<HTMLDivElement>();
+
+  let isSwiping = $state(false);
+  let startX = $state(0);
+  let dragOffset = $state(0);
 
   const drawerContext = QContext.get<DrawerContext>(
     QLayoutCtxName.drawer[side],
@@ -61,13 +78,26 @@
 
   onMount(() => {
     setTimeout(() => {
-      if (drawerEl) {
-        drawerEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
-      }
+      drawerEl?.style.setProperty("transition", TRANSITION);
     }, 100);
 
     return () => {
-      window.removeEventListener("click", tryClose);
+      unlistenClick?.();
+      unlistenPointerdown?.();
+
+      if (isSwiping) {
+        unlistenPointermove?.();
+        unlistenPointerup?.();
+        unlistenPointercancel?.();
+
+        resetBodyStyles();
+      }
+
+      drawerContext?.updateEntries({
+        width: 0,
+        takesSpace: false,
+        ready: false,
+      });
     };
   });
 
@@ -80,19 +110,27 @@
   $effect(() => {
     if (value) {
       setTimeout(() => {
-        window.addEventListener("click", tryClose);
+        unlistenClick = on(window, "click", tryClose);
       }, 150);
+
+      untrack(() => {
+        if (!noSwipe && !persistent) {
+          unlistenPointerdown = on(drawerEl!, "pointerdown", handlePointerDown);
+          swipeAreaEl?.style.setProperty("z-index", "-1");
+        }
+      });
     } else {
-      window.removeEventListener("click", tryClose);
-    }
-  });
+      unlistenClick?.();
 
-  onDestroy(() => {
-    drawerContext?.updateEntries({
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    });
+      if (!noSwipe) {
+        unlistenPointerdown = on(
+          swipeAreaEl!,
+          "pointerdown",
+          handlePointerDown,
+        );
+        swipeAreaEl?.style.setProperty("z-index", "10");
+      }
+    }
   });
 
   $effect(() => {
@@ -125,6 +163,158 @@
       hide();
     }
   }
+
+  function handlePointerDown(e: PointerEvent) {
+    if (
+      noSwipe ||
+      !drawerEl ||
+      !swipeAreaEl ||
+      (e.pointerType === "mouse" && e.buttons !== 1) ||
+      (value && persistent)
+    ) {
+      return;
+    }
+
+    const drawerRect = drawerEl.getBoundingClientRect();
+    const y = e.clientY;
+
+    if (y < drawerRect.top || y > drawerRect.bottom) {
+      // Ignore pointer events outside the vertical bounds of the drawer
+      return;
+    }
+
+    let swipeAllowed = false;
+    startX = e.clientX;
+
+    if (!value) {
+      swipeAllowed = true;
+
+      const baseWidth = side === "left" ? -width : width;
+
+      dragOffset =
+        baseWidth + (side === "left" ? PEEK_THRESHOLD : -PEEK_THRESHOLD);
+
+      drawerEl.style.transform = `translateX(${dragOffset}px)`;
+    } else {
+      // If drawer is open, allow swipe from anywhere
+      swipeAllowed = true;
+
+      // No initial dragOffset change or transform needed as it's already open.
+      // dragOffset will be calculated fresh in handlePointerMove.
+    }
+
+    if (!swipeAllowed) {
+      return;
+    }
+
+    isSwiping = true;
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    document.body.style.setProperty("cursor", "grabbing");
+    document.body.style.setProperty("user-select", "none"); // Disable text selection
+
+    drawerEl.style.transition = "none"; // Disable CSS transitions for smooth dragging
+    drawerEl.style.touchAction = "none"; // Disable touch actions
+
+    swipeAreaEl?.style.setProperty("width", "100vw"); // Expand swipe area to full width
+
+    unlistenPointermove = on(
+      e.target as HTMLElement,
+      "pointermove",
+      handlePointerMove,
+    );
+    unlistenPointerup = on(
+      e.target as HTMLElement,
+      "pointerup",
+      handlePointerUp,
+      {
+        passive: true,
+      },
+    );
+    unlistenPointercancel = on(
+      e.target as HTMLElement,
+      "pointercancel",
+      handlePointerUp,
+      {
+        passive: true,
+      },
+    );
+  }
+
+  function handlePointerMove(e: PointerEvent) {
+    if (noSwipe || !drawerEl || !swipeAreaEl || !isSwiping) {
+      return;
+    }
+
+    e.preventDefault();
+
+    let deltaX = e.clientX - startX;
+
+    let newPosition: number;
+    // basePosition is the starting translation before applying the current deltaX.
+    let basePosition: number;
+
+    if (side === "left") {
+      // For a left-side drawer, dragOffset is between -width (fully closed) and 0 (fully open).
+      basePosition = value ? 0 : PEEK_THRESHOLD - width;
+      newPosition = basePosition + deltaX;
+      // Clamp newPosition to be within [-width, 0]
+      dragOffset = Math.max(-width, Math.min(0, newPosition));
+    } else {
+      // For a right-side drawer, dragOffset is between width (fully closed) and 0 (fully open).
+      basePosition = value ? 0 : width - PEEK_THRESHOLD;
+      newPosition = basePosition + deltaX;
+      // Clamp newPosition to be within [0, width]
+      dragOffset = Math.max(0, Math.min(width, newPosition));
+    }
+
+    drawerEl.style.transform = `translateX(${dragOffset}px)`;
+  }
+
+  function handlePointerUp() {
+    if (noSwipe || !drawerEl || !swipeAreaEl || !isSwiping) {
+      return;
+    }
+
+    isSwiping = false;
+
+    resetBodyStyles();
+
+    drawerEl.style.transition = TRANSITION;
+    drawerEl.style.transform = "";
+    drawerEl.style.touchAction = ""; // Re-enable touch actions
+
+    swipeAreaEl?.style.removeProperty("width"); // Reset swipe area width
+
+    const thresholdWidth =
+      (width * parseInt(swipeThreshold.replace("%", ""))) / 100;
+    const realThreshold = value ? width - thresholdWidth : thresholdWidth;
+
+    const swiped = width + (side === "left" ? dragOffset : -dragOffset);
+
+    if (swiped >= realThreshold) {
+      if (!value) {
+        show(); // Snap open
+      }
+    } else {
+      if (value) {
+        hide(); // Snap closed
+      }
+    }
+
+    dragOffset = 0;
+
+    unlistenPointercancel?.();
+    unlistenPointermove?.();
+    unlistenPointerup?.();
+  }
+
+  function resetBodyStyles() {
+    document.body.style.removeProperty("cursor");
+    document.body.style.removeProperty("user-select");
+  }
 </script>
 
 <div
@@ -145,3 +335,11 @@
 >
   {@render children?.()}
 </div>
+
+{#if !noSwipe}
+  <div
+    bind:this={swipeAreaEl}
+    class="q-drawer__swipearea q-drawer__swipearea--{side}"
+    onpointerdown={handlePointerDown}
+  ></div>
+{/if}

package/dist/components/drawer/docs.props.js

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash fe10bae596729ba8564277a0f6b138de
+// @quaffHash 16a53668c0713b9e0ca53dbe17a8a9de
 export const QDrawerDocsProps = [
     {
         isArray: false,
@@ -125,37 +125,25 @@ export const QDrawerDocsProps = [
         isArray: false,
         optional: true,
         isSnippet: false,
-        name: "noSwipeOpen",
+        name: "noSwipe",
         type: {
             name: "boolean",
             isClickable: false,
         },
-        description: "Determines whether swipe gestures can open the drawer. (not supported yet)",
+        description: "Determines whether swipe gestures opening the drawer should be disabled or not.",
         default: "false",
     },
     {
         isArray: false,
         optional: true,
         isSnippet: false,
-        name: "noSwipeClose",
+        name: "swipeThreshold",
         type: {
-            name: "boolean",
-            isClickable: false,
-        },
-        description: "Determines whether swipe gestures can close the drawer. (not supported yet)",
-        default: "false",
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "noSwipeBackdrop",
-        type: {
-            name: "boolean",
+            name: "`${number}%`",
             isClickable: false,
         },
-        description: "Determines whether swipe gestures on the backdrop can close the drawer. (not supported yet)",
-        default: "false",
+        description: "The threshold in percentage of the drawer width that must be swiped for the drawer to snap open/close.\nThis is only applicable if swipe gestures are enabled.",
+        default: '"30%"',
     },
 ];
 export const QDrawerDocsSnippets = [];

package/dist/components/drawer/props.d.ts

@@ -54,18 +54,14 @@ export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement
      */
     persistent?: boolean;
     /**
-     * Determines whether swipe gestures can open the drawer. (not supported yet)
+     * Determines whether swipe gestures opening the drawer should be disabled or not.
      * @default false
      */
-    noSwipeOpen?: boolean;
+    noSwipe?: boolean;
     /**
-     * Determines whether swipe gestures can close the drawer. (not supported yet)
-     * @default false
-     */
-    noSwipeClose?: boolean;
-    /**
-     * Determines whether swipe gestures on the backdrop can close the drawer. (not supported yet)
-     * @default false
+     * The threshold in percentage of the drawer width that must be swiped for the drawer to snap open/close.
+     * This is only applicable if swipe gestures are enabled.
+     * @default "30%"
      */
-    noSwipeBackdrop?: boolean;
+    swipeThreshold?: `${number}%`;
 }

package/dist/components/layout/QLayout.scss

@@ -172,3 +172,13 @@
   height: calc(100% - var(--offset-top) - var(--offset-bottom));
   overflow: auto;
 }
+
+.q-layout > .q-header ~ .q-layout__content {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.q-layout > .q-footer ~ .q-layout__content {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

package/dist/components/layout/QLayout.svelte

@@ -123,16 +123,16 @@
         (layoutEl && !layoutEl.querySelector(".q-footer"))) &&
       (!railbarLeft ||
         leftRailbarCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(".q-railbar--left"))) &&
+        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--left"))) &&
       (!railbarRight ||
         rightRailbarCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(".q-railbar--right"))) &&
+        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--right"))) &&
       (!drawerLeft ||
         leftDrawerCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(".q-drawer--left"))) &&
+        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--left"))) &&
       (!drawerRight ||
         rightDrawerCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(".q-drawer--right"))),
+        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--right"))),
   );
 
   function handleDrawerCtx(ctx: QContext<DrawerContext>) {

package/dist/components/list/QItemSection.scss

@@ -7,6 +7,7 @@
   color: var(--on-surface-variant);
 
   &--headline {
+    max-width: 100%;
     @include mixins.typography("body-large");
     color: var(--on-surface);
   }

package/dist/components/private/QApi.svelte

@@ -222,9 +222,9 @@
       </QTabs>
     </div>
     <QCardSection style="max-height: 416px; overflow-y: auto">
-      <QList separator bordered style="overflow-x:auto">
+      <QList separator bordered>
         {#each QDocument.docs[api[index]] as doc (doc)}
-          <QItem>
+          <QItem style="overflow-x: auto">
             <QItemSection type="content">
               {#snippet headline()}
                 <div