@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta12

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -1,21 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        hide?: () => void;
-        show?: () => void;
-        toggle?: () => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QDialogProps_ = typeof __propDef.props;
-export { QDialogProps_ as QDialogProps };
-export type QDialogEvents = typeof __propDef.events;
-export type QDialogSlots = typeof __propDef.slots;
-export default class QDialog extends SvelteComponentTyped<QDialogProps_, QDialogEvents, QDialogSlots> {
-    get hide(): () => void;
-    get show(): () => void;
-    get toggle(): () => void;
-}
+import type { QDialogProps } from "./props";
+declare const QDialog: import("svelte").Component<QDialogProps, {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+}, "value">;
+type QDialog = ReturnType<typeof QDialog>;
+export default QDialog;

package/dist/components/drawer/QDrawer.scss

@@ -34,11 +34,11 @@
     &.q-drawer--#{$side} {
       #{$side}: 0;
       width: var(--#{$side}-drawer-width);
-      transform: translate(if($side == "left", -100%, 100%));
+      transform: translate(if(sass($side == "left"): -100%; else: 100%));
     }
 
     &:not(.q-drawer--#{$side}).q-drawer--bordered {
-      @include mixins.border(var(--outline), $side);
+      @include mixins.border($position: $side);
     }
   }
 

package/dist/components/drawer/QDrawer.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-  import { getContext, onMount, untrack } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { on } from "svelte/events";
+  import { innerWidth } from "svelte/reactivity/window";
   import { navigating } from "$app/state";
   import { useSize } from "../../composables";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { QLayoutProps } from "../layout/props";
-  import type { DrawerContext } from "../layout/QLayout.svelte";
-  import type { QDrawerProps } from "./props";
+  import { leftDrawerCtx, rightDrawerCtx } from "../layout/QLayout.svelte";
 
+  // #region:    --- Props
   let {
     value = $bindable(false),
     side = "left",
     width = 300,
+    breakpoint = 1023,
+    behavior = "default",
     bordered = false,
     overlay = false,
     persistent = false,
@@ -21,86 +21,101 @@
     children,
     ...props
   }: QDrawerProps = $props();
+  // #endregion: --- Props
+  import type { QDrawerProps } from "./props";
 
+  // #region:    --- Non-reactive variables
   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 clickTimer: ReturnType<typeof setTimeout> | undefined;
+  let removeWindowClickListener: (() => void) | undefined;
+  let removePointerdownListener: (() => void) | undefined;
+  let removePointermoveListener: (() => void) | undefined;
+  let removePointerupListener: (() => void) | undefined;
+  let removePointercancelListener: (() => void) | undefined;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Reactive variables
   let drawerEl = $state<HTMLDivElement>();
   let swipeAreaEl = $state<HTMLDivElement>();
 
   let isSwiping = $state(false);
   let startX = $state(0);
   let dragOffset = $state(0);
+  // #endregion: --- Reactive variables
 
-  const drawerContext = QContext.get<DrawerContext>(
-    QLayoutCtxName.drawer[side],
-  );
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
+  // #region:    --- Derived values
+  const drawerCtxToUse = $derived(
+    side === "left" ? leftDrawerCtx : rightDrawerCtx,
   );
+  const drawerContext = $derived(drawerCtxToUse.get());
 
   const canHideOnClickOutside = $derived((value && !persistent) || overlay);
 
   const hideOnRouteChange = $derived(!persistent || overlay);
 
+  const isBelowBreakpoint = $derived.by(() => {
+    if (behavior === "mobile") {
+      return true;
+    }
+
+    if (behavior === "desktop") {
+      return false;
+    }
+
+    const currentWidth = innerWidth.current;
+    return currentWidth ? currentWidth <= breakpoint : false;
+  });
+
+  const canSwipe = $derived(!noSwipe && isBelowBreakpoint);
+
   const offsetTop = $derived.by(() => {
     const charPos = side === "left" ? 0 : 2;
-    return layoutView?.value.charAt(charPos) === "h";
+    return drawerContext?.view.charAt(charPos) === "h";
   });
   const offsetBottom = $derived.by(() => {
     const charPos = side === "left" ? 8 : 10;
-    return layoutView?.value.charAt(charPos) === "f";
+    return drawerContext?.view.charAt(charPos) === "f";
   });
 
-  export const show = (e?: MouseEvent) => {
-    if (!value) {
-      value = true;
-      e?.stopPropagation();
-    }
-  };
+  const widthStyle = $derived(!drawerContext ? useSize(width).style : null);
 
-  export const hide = () => {
-    if (value) {
-      value = false;
-    }
-  };
+  const drawerWidthStyle = $derived(
+    widthStyle === null ? "" : `--${side}-drawer-width: ${widthStyle};`,
+  );
 
-  export const toggle = (e?: MouseEvent) => {
-    value = !value;
-    e?.stopPropagation();
-  };
+  const style = $derived(`${drawerWidthStyle}${props.style ?? ""}`);
+  // #endregion: --- Derived values
 
+  // #region:    --- Lifecycle
   onMount(() => {
     setTimeout(() => {
       drawerEl?.style.setProperty("transition", TRANSITION);
     }, 100);
 
     return () => {
-      unlistenClick?.();
-      unlistenPointerdown?.();
+      clearClickListener();
+      clearPointerdownListener();
 
       if (isSwiping) {
-        unlistenPointermove?.();
-        unlistenPointerup?.();
-        unlistenPointercancel?.();
+        removePointermoveListener?.();
+        removePointerupListener?.();
+        removePointercancelListener?.();
 
         resetBodyStyles();
       }
 
-      drawerContext?.updateEntries({
-        width: 0,
+      drawerCtxToUse.updateEntries({
         takesSpace: false,
+        width: 0,
         ready: false,
       });
     };
   });
+  // #endregion: --- Lifecycle
 
+  // #region:    --- Effects
   $effect(() => {
     if (navigating.type && hideOnRouteChange) {
       hide();
@@ -108,52 +123,69 @@
   });
 
   $effect(() => {
+    clearClickListener();
+    clearPointerdownListener();
+
     if (value) {
-      setTimeout(() => {
-        unlistenClick = on(window, "click", tryClose);
+      clickTimer = setTimeout(() => {
+        removeWindowClickListener = on(window, "click", tryClose);
+        clickTimer = undefined;
       }, 150);
 
       untrack(() => {
-        if (!noSwipe && !persistent) {
-          unlistenPointerdown = on(drawerEl!, "pointerdown", handlePointerDown);
+        if (canSwipe && !persistent) {
+          addPointerdownListener(drawerEl);
           swipeAreaEl?.style.setProperty("z-index", "-1");
         }
       });
     } else {
-      unlistenClick?.();
-
-      if (!noSwipe) {
-        unlistenPointerdown = on(
-          swipeAreaEl!,
-          "pointerdown",
-          handlePointerDown,
-        );
+      if (canSwipe) {
+        addPointerdownListener(swipeAreaEl);
         swipeAreaEl?.style.setProperty("z-index", "10");
       }
     }
+
+    return () => {
+      clearClickListener();
+      clearPointerdownListener();
+    };
   });
 
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     [value, overlay, width];
 
-    untrack(() =>
-      drawerContext?.updateEntries({
+    untrack(() => {
+      drawerCtxToUse.updateEntries({
         takesSpace: !!value && !overlay,
         width,
         ready: true,
-      }),
-    );
+      });
+    });
   });
+  // #endregion: --- Effects
 
-  const widthStyle = $derived(!drawerContext ? useSize(width).style : null);
+  // #region:    --- Methods
+  export const show = (e?: MouseEvent) => {
+    if (!value) {
+      value = true;
+      e?.stopPropagation();
+    }
+  };
 
-  const drawerWidthStyle = $derived(
-    widthStyle === null ? "" : `--${side}-drawer-width: ${widthStyle};`,
-  );
+  export const hide = () => {
+    if (value) {
+      value = false;
+    }
+  };
 
-  const style = $derived(`${drawerWidthStyle}${props.style ?? ""}`);
+  export const toggle = (e?: MouseEvent) => {
+    value = !value;
+    e?.stopPropagation();
+  };
+  // #endregion: --- Methods
 
+  // #region:    --- Functions
   function tryClose(e: MouseEvent) {
     const isTargetDrawer = e.target === drawerEl;
     const isTargetInsideDrawer = drawerEl?.contains(e.target as Node);
@@ -164,9 +196,31 @@
     }
   }
 
+  function clearClickListener() {
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+      clickTimer = undefined;
+    }
+
+    removeWindowClickListener?.();
+    removeWindowClickListener = undefined;
+  }
+
+  function clearPointerdownListener() {
+    removePointerdownListener?.();
+    removePointerdownListener = undefined;
+  }
+
+  function addPointerdownListener(target?: HTMLElement) {
+    if (target) {
+      removePointerdownListener = on(target, "pointerdown", handlePointerDown);
+    }
+  }
+
   function handlePointerDown(e: PointerEvent) {
     if (
       noSwipe ||
+      !isBelowBreakpoint ||
       !drawerEl ||
       !swipeAreaEl ||
       (e.pointerType === "mouse" && e.buttons !== 1) ||
@@ -183,7 +237,7 @@
       return;
     }
 
-    let swipeAllowed = false;
+    let swipeAllowed;
     startX = e.clientX;
 
     if (!value) {
@@ -220,12 +274,12 @@
 
     swipeAreaEl?.style.setProperty("width", "100vw"); // Expand swipe area to full width
 
-    unlistenPointermove = on(
+    removePointermoveListener = on(
       e.target as HTMLElement,
       "pointermove",
       handlePointerMove,
     );
-    unlistenPointerup = on(
+    removePointerupListener = on(
       e.target as HTMLElement,
       "pointerup",
       handlePointerUp,
@@ -233,7 +287,7 @@
         passive: true,
       },
     );
-    unlistenPointercancel = on(
+    removePointercancelListener = on(
       e.target as HTMLElement,
       "pointercancel",
       handlePointerUp,
@@ -306,15 +360,16 @@
 
     dragOffset = 0;
 
-    unlistenPointercancel?.();
-    unlistenPointermove?.();
-    unlistenPointerup?.();
+    removePointercancelListener?.();
+    removePointermoveListener?.();
+    removePointerupListener?.();
   }
 
   function resetBodyStyles() {
     document.body.style.removeProperty("cursor");
     document.body.style.removeProperty("user-select");
   }
+  // #endregion: --- Functions
 </script>
 
 <div
@@ -336,7 +391,7 @@
   {@render children?.()}
 </div>
 
-{#if !noSwipe}
+{#if canSwipe}
   <div
     bind:this={swipeAreaEl}
     class="q-drawer__swipearea q-drawer__swipearea--{side}"

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -1,21 +1,8 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        show?: (e?: MouseEvent) => void;
-        hide?: () => void;
-        toggle?: (e?: MouseEvent) => void;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QDrawerProps_ = typeof __propDef.props;
-export { QDrawerProps_ as QDrawerProps };
-export type QDrawerEvents = typeof __propDef.events;
-export type QDrawerSlots = typeof __propDef.slots;
-export default class QDrawer extends SvelteComponentTyped<QDrawerProps_, QDrawerEvents, QDrawerSlots> {
-    get show(): (e?: MouseEvent) => void;
-    get hide(): () => void;
-    get toggle(): (e?: MouseEvent) => void;
-}
+import type { QDrawerProps } from "./props";
+declare const QDrawer: import("svelte").Component<QDrawerProps, {
+    show: (e?: MouseEvent) => void;
+    hide: () => void;
+    toggle: (e?: MouseEvent) => void;
+}, "value">;
+type QDrawer = ReturnType<typeof QDrawer>;
+export default QDrawer;

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

@@ -19,7 +19,7 @@ export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement
      */
     width?: number;
     /**
-     * The breakpoint at which the drawer behavior changes. (not supported yet)
+     * The viewport width below which swipe gestures are enabled.
      * @default 1023
      */
     breakpoint?: number;
@@ -29,7 +29,7 @@ export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement
      */
     showIfAbove?: boolean;
     /**
-     * The behavior of the drawer based on the viewport width. (not supported yet)
+     * Controls swipe behavior: "default" follows the breakpoint, "mobile" enables swiping and "desktop" disables it.
      * @default "default"
      */
     behavior?: QDrawerBehaviorOptions;
@@ -44,7 +44,7 @@ export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement
      */
     elevated?: boolean;
     /**
-     * Determines whether the wrawer should behave like an overlay (opening above the content) or not (pushing the content while opening).
+     * Determines whether the drawer should behave like an overlay (opening above the content) or not (pushing the content while opening).
      * @default false
      */
     overlay?: boolean;

package/dist/components/expansion-item/QExpansionItem.scss

@@ -0,0 +1,59 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-expansion-item {
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  border-radius: 0;
+
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &[aria-disabled] :is(.q-item__section, .q-item__section *) {
+    color: unset;
+  }
+
+  & summary::marker,
+  & summary::-webkit-details-marker {
+    display: none;
+    content: "";
+  }
+
+  &::details-content {
+    transition: content-visibility var(--duration) allow-discrete;
+  }
+
+  &__toggle-icon {
+    margin: 0;
+    z-index: 1;
+
+    &:is(.q-btn) {
+      margin-right: -0.5rem;
+    }
+
+    &:not(.q-btn),
+    &.q-btn .q-icon {
+      transition: rotate var(--duration);
+    }
+
+    &--rotate:not(.q-btn),
+    &--rotate.q-btn .q-icon {
+      rotate: 180deg;
+    }
+  }
+
+  &__content {
+    @include mixins.padding("x-md", "y-sm");
+    width: 100%;
+    overflow: hidden;
+  }
+}