@quaffui/quaff 1.0.0-alpha2 → 1.0.0-beta12

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

@@ -0,0 +1,319 @@
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { goto } from "$app/navigation";
+  import { QBtn, QIcon, QItem, QItemSection } from "..";
+  import { isActivationKey, type QEvent } from "../../utils";
+  import type { QExpansionItemProps } from "./props";
+
+  // #region:    --- Props
+  let {
+    value = $bindable(false),
+    label,
+    icon,
+    caption,
+    expandIcon = "keyboard_arrow_down",
+    expandedIcon,
+    defaultOpened = false,
+    dense = false,
+    duration = 300,
+    hideExpandIcon = false,
+    toggleAriaLabel = "Open details",
+    expandIconToggle = false,
+    to,
+    href,
+    name,
+    noRotateExpandIcon = false,
+    disabled = false,
+    noRipple = false,
+    summary,
+    children,
+    onExpandIconClick,
+    ...props
+  }: QExpansionItemProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Non-reactive variables
+  const id = $props.id();
+  const contentId = `q-expansion-item__content-${id}`;
+  const summaryId = `q-expansion-item__summary-${id}`;
+  const supportDetailsContent =
+    typeof CSS !== "undefined" &&
+    CSS.supports("selector(details::details-content)");
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
+  let detailsEl = $state<HTMLDetailsElement>();
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Derived values
+  const summaryAttributes = $derived(
+    !supportDetailsContent
+      ? {
+          id: summaryId,
+          "aria-expanded": value,
+          "aria-controls": contentId,
+        }
+      : {},
+  );
+
+  const contentAttributes = $derived(
+    !supportDetailsContent
+      ? {
+          id: contentId,
+          role: "region",
+          "aria-labelledby": summaryId,
+        }
+      : {},
+  );
+
+  const iconAttributes = $derived({
+    [expandIconToggle ? "icon" : "name"]:
+      expandedIcon && value ? expandedIcon : expandIcon,
+    flat: expandIconToggle || undefined,
+    "aria-label": toggleAriaLabel,
+  });
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
+  $effect.pre(() => {
+    if (defaultOpened) {
+      show();
+    }
+  });
+
+  $effect(() => {
+    if (supportDetailsContent || !name || !value) {
+      return;
+    }
+
+    // If the browser does not support details content, we need to manually
+    // handle the group open state of the details elements
+    const parent = detailsEl?.parentElement;
+
+    if (!parent) {
+      return;
+    }
+
+    const group = parent.querySelectorAll("details[open]");
+    group.forEach((item) => {
+      if (item !== detailsEl) {
+        item.removeAttribute("open");
+      }
+    });
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Methods
+  export function toggle() {
+    value = !value;
+  }
+
+  export function show() {
+    value = true;
+  }
+
+  export function hide() {
+    value = false;
+  }
+  // #endregion: --- Methods
+
+  // #region:    --- Functions
+  function preventAndStop<T extends Event>(e: T) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function onclick(e: QEvent<MouseEvent, HTMLElement>) {
+    if (disabled) {
+      preventAndStop(e);
+      return;
+    }
+
+    props.onclick?.(e);
+  }
+
+  function onIconClick(e: QEvent<MouseEvent, HTMLElement>) {
+    if (disabled) {
+      preventAndStop(e);
+      return;
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    toggle();
+    onExpandIconClick?.(e);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (disabled) {
+      preventAndStop(e);
+      return;
+    }
+
+    if (e.key === "Escape") {
+      detailsEl?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e)) {
+      return;
+    }
+
+    if (to || href) {
+      preventAndStop(e);
+      goto((to || href) as string);
+      return;
+    }
+
+    if (expandIconToggle) {
+      // If expandIconToggle is true, we don't want to toggle the expansion item
+      // as the icon should do it
+      return;
+    }
+
+    e.preventDefault();
+    toggle();
+  }
+
+  function onIconKeydown(e: KeyboardEvent) {
+    if (disabled) {
+      preventAndStop(e);
+      return;
+    }
+
+    if (e.key === "Escape") {
+      (e.target as HTMLElement)?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e) || !expandIconToggle) {
+      return;
+    }
+
+    preventAndStop(e);
+
+    const clickEvent = new MouseEvent("click", {
+      relatedTarget: e.target as HTMLElement,
+    }) as QEvent<MouseEvent, HTMLElement>;
+    onIconClick(clickEvent);
+  }
+  // #endregion: --- Functions
+</script>
+
+{#snippet labelSnippet()}
+  {label}
+{/snippet}
+
+{#snippet captionSnippet()}
+  {caption}
+{/snippet}
+
+{#snippet content()}
+  {#if value}
+    <div
+      class="q-expansion-item__content"
+      {...contentAttributes}
+      transition:slide={{ duration }}
+    >
+      {@render children?.()}
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  bind:this={detailsEl}
+  bind:open={value}
+  {...props}
+  {name}
+  aria-disabled={disabled || undefined}
+  class={["q-expansion-item", value && "q-expansion-item--expanded"]}
+  style:--duration="{duration}ms"
+>
+  <summary
+    tabindex={-1}
+    {...summaryAttributes}
+    onmousedown={disabled ? preventAndStop : undefined}
+  >
+    {#if summary}
+      <QItem
+        {dense}
+        {to}
+        {href}
+        {disabled}
+        noRipple={expandIconToggle || noRipple}
+        clickable={!expandIconToggle}
+        {onclick}
+        {onkeydown}
+      >
+        {@render summary({ expanded: value, show, hide, toggle })}
+      </QItem>
+    {:else}
+      <QItem
+        {dense}
+        {to}
+        {href}
+        {disabled}
+        noRipple={expandIconToggle || noRipple}
+        clickable={!expandIconToggle}
+        {onclick}
+        {onkeydown}
+      >
+        {#if icon}
+          <QItemSection type="icon">
+            <QIcon name={icon} />
+          </QItemSection>
+        {/if}
+
+        {#if label || caption}
+          <QItemSection
+            headline={label ? labelSnippet : undefined}
+            line1={caption ? captionSnippet : undefined}
+          />
+        {/if}
+
+        {#if !hideExpandIcon}
+          <QItemSection type="trailingIcon">
+            {#if expandIconToggle}
+              <QBtn
+                class={[
+                  "q-expansion-item__toggle-icon",
+                  value &&
+                    !expandedIcon &&
+                    !noRotateExpandIcon &&
+                    "q-expansion-item__toggle-icon--rotate",
+                ]}
+                {...iconAttributes}
+                {disabled}
+                color="on-surface"
+                tag="div"
+                tabindex={0}
+                onclick={onIconClick}
+                onkeydowncapture={onIconKeydown}
+              />
+            {:else}
+              <QIcon
+                class={[
+                  "q-expansion-item__toggle-icon",
+                  value &&
+                    !expandedIcon &&
+                    !noRotateExpandIcon &&
+                    "q-expansion-item__toggle-icon--rotate",
+                ]}
+                {...iconAttributes}
+              />
+            {/if}
+          </QItemSection>
+        {/if}
+      </QItem>
+    {/if}
+  </summary>
+
+  {#if supportDetailsContent}
+    {@render content()}
+  {/if}
+</details>
+
+{#if !supportDetailsContent}
+  {@render content()}
+{/if}

package/dist/components/expansion-item/QExpansionItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QExpansionItemProps } from "./props";
+declare const QExpansionItem: import("svelte").Component<QExpansionItemProps, {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+}, "value">;
+type QExpansionItem = ReturnType<typeof QExpansionItem>;
+export default QExpansionItem;

package/dist/components/expansion-item/docs.d.ts

@@ -0,0 +1,2 @@
+import type { QComponentDocs } from "../../utils";
+export declare const QExpansionItemDocs: QComponentDocs;

package/dist/components/expansion-item/docs.js

@@ -0,0 +1,17 @@
+import { QExpansionItemDocsProps, QExpansionItemDocsSnippets } from "./docs.props";
+export const QExpansionItemDocs = {
+    name: "QExpansionItem",
+    description: "The QExpansionItem component allows users to create expandable/collapsible sections within a list or a card.",
+    docs: {
+        props: QExpansionItemDocsProps,
+        snippets: QExpansionItemDocsSnippets,
+        methods: [],
+        events: [
+            {
+                name: "click",
+                type: "(e: MouseEvent) => void",
+                description: "Emitted when the user clicks on the expansion item.",
+            },
+        ],
+    },
+};

package/dist/components/expansion-item/props.d.ts

@@ -0,0 +1,129 @@
+import { MaterialSymbol } from "material-symbols";
+import { Snippet } from "svelte";
+import { HTMLDetailsAttributes, MouseEventHandler } from "svelte/elements";
+export interface QExpansionItemProps extends HTMLDetailsAttributes {
+    /**
+     * The value of the expansion item, used to define the expansion state of the item.
+     */
+    value?: boolean;
+    /**
+     * The label of the expansion item, displayed in the header.
+     */
+    label?: string;
+    /**
+     * The icon to display in the header of the expansion item.
+     */
+    icon?: MaterialSymbol;
+    /**
+     * The caption, displayed below the label in the header.
+     */
+    caption?: string;
+    /**
+     * The icon to use as the toggle icon for the expansion item.
+     * If not provided, a chevron icon will be used.
+     *
+     * @default "chevron_down"
+     */
+    expandIcon?: MaterialSymbol;
+    /**
+     * The icon to use as the collapse icon for the expanded item.
+     * If not provided, the expandIcon will be rotated 180 degrees when the item is expanded.
+     */
+    expandedIcon?: MaterialSymbol;
+    /**
+     * Whether the expansion item is initially expanded.
+     *
+     * @default false
+     */
+    defaultOpened?: boolean;
+    /**
+     * Use the dense style for the expansion item, reducing its height.
+     *
+     * @default false
+     */
+    dense?: boolean;
+    /**
+     * Duration for the expansion animation in milliseconds.
+     *
+     * @default 300
+     */
+    duration?: number;
+    /**
+     * Whether to hide the expand icon.
+     *
+     * @default false
+     */
+    hideExpandIcon?: boolean;
+    /**
+     * Register the expansion item into a group, closing other items in the group when this one is opened.
+     * This is often called "accordion" behavior. This name is used to identify the group of items
+     * and should thus be unique.
+     */
+    name?: string;
+    /**
+     * The aria-label for the toggle button of the expansion item for accessibility.
+     *
+     * @default "Open details"
+     */
+    toggleAriaLabel?: string;
+    /**
+     * Makes the toggle icon the trigger for the expansion item instead of the whole header.
+     * This is useful when using the expansion item as link, so the icon allows to expand/collapse the item
+     * while the header changes the route.
+     *
+     * @default false
+     */
+    expandIconToggle?: boolean;
+    /**
+     * Make the expansion item navigational, allowing it to be used as a link.
+     * It can be used interchangeably with the `href` prop.
+     * If both `href` and `to` are provided, the `to` prop will take precedence.
+     */
+    to?: string;
+    /**
+     * The URL to navigate to when the expansion item is clicked.
+     * It can be used interchangeably with the `to` prop.
+     * If both `href` and `to` are provided, the `to` prop will take precedence.
+     */
+    href?: string;
+    /**
+     * Prevents the rotation of the expand icon when the item is expanded.
+     * This is useful when using a custom icon that does not need to be rotated.
+     *
+     * @default false
+     */
+    noRotateExpandIcon?: boolean;
+    /**
+     * Whether the expansion item is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Disables the ripple effect on the expansion item.
+     * This is useful when the item is used as a link and you want to prevent the ripple effect.
+     *
+     * @default false
+     */
+    noRipple?: boolean;
+    /**
+     * The summary snippet, to override the default header.
+     * As the header uses QItem, you can easily use QItemSection components to customize the header layout.
+     */
+    summary?: Snippet<[
+        {
+            expanded: boolean;
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }
+    ]>;
+    /**
+     * Event triggered when the expansion icon is clicked.
+     */
+    onExpandIconClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * Event triggered when the expansion item is clicked.
+     */
+    onclick?: MouseEventHandler<HTMLElement>;
+}

package/dist/components/expansion-item/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/footer/QFooter.scss

@@ -22,7 +22,7 @@
   background-color: var(--surface);
 
   &.q-footer--bordered {
-    @include mixins.border(var(--outline), "top");
+    @include mixins.border($position: "top");
   }
 
   &.q-footer--collapsed {

package/dist/components/footer/QFooter.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
-  import { getContext, onMount, untrack } from "svelte";
-  import { QScrollObserver } from "../..";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { QLayoutProps } from "../layout/props";
-  import type { AppbarContext } from "../layout/QLayout.svelte";
+  import { onMount } from "svelte";
+  import { useRevealScrollObserver } from "../../composables";
+  import { footerCtx } from "../layout/QLayout.svelte";
   import type { QFooterProps } from "./props";
 
-  let footerEl = $state<HTMLElement>();
-
+  // #region:    --- Props
   let {
     value = $bindable(true),
     bordered = false,
@@ -18,44 +14,51 @@
     children,
     ...props
   }: QFooterProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   const uid = $props.id();
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
+  let footerEl = $state<HTMLElement>();
+  let contentScrollHeight = $state(0);
 
-  const footerContext = QContext.get<AppbarContext>(QLayoutCtxName.footer);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
+  const footerContext = footerCtx.assertGet(
+    "QFooter should be used inside QLayout",
   );
+  // #endregion: --- Reactive variables
 
-  if (!footerContext || !layoutView) {
-    throw new Error("QFooter should be used inside QLayout");
-  }
+  // #region:    --- Derived values
+  const revealObserver = useRevealScrollObserver("footer", uid, () => reveal);
+  const revealScroll = $derived(revealObserver.scroll);
 
-  const scroll = $derived(
-    reveal
-      ? new QScrollObserver(`.q-footer--${uid} ~ .q-layout__content`)
-      : undefined,
+  const offset = $derived(
+    revealScroll ? revealScroll.position + height : undefined,
   );
-  let contentScrollHeight = $state(0);
 
-  const offset = $derived(scroll ? scroll.position + height : undefined);
-  // Collapse the footer `${reavealOffset}px` above the bottom of layout content when scrolling up
+  // Collapse the footer `${revealOffset}px` above the bottom of layout content when scrolling up
   const collapsed = $derived(
     reveal &&
-      scroll?.direction === "up" &&
+      revealScroll?.direction === "up" &&
       offset! + revealOffset < contentScrollHeight,
   );
 
-  const leftOffset = () => layoutView.value.charAt(8) === "l";
-  const rightOffset = () => layoutView.value.charAt(10) === "r";
+  const leftOffset = $derived(footerContext.view.charAt(8) === "l");
+  const rightOffset = $derived(footerContext.view.charAt(10) === "r");
+  // #endregion: --- Derived values
 
+  // #region:    --- Effects
   $effect.pre(() => {
-    untrack(() => footerContext).updateEntries({
+    footerCtx.updateEntries({
       height,
       collapsed,
       ready: true,
     });
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Lifecycle
   onMount(() => {
     // Calculating the layout content's height
     const content = document.querySelector(
@@ -73,13 +76,14 @@
     }, 100);
 
     return () => {
-      footerContext.updateEntries({
+      footerCtx.updateEntries({
         height: 0,
         collapsed: false,
         ready: false,
       });
     };
   });
+  // #endregion: --- Lifecycle
 </script>
 
 {#if value}
@@ -92,8 +96,8 @@
       `q-footer--${uid}`,
       collapsed && "q-footer--collapsed",
       bordered && "q-footer--bordered",
-      leftOffset() && "q-footer--offset-left",
-      rightOffset() && "q-footer--offset-right",
+      leftOffset && "q-footer--offset-left",
+      rightOffset && "q-footer--offset-right",
     ]}
     style:--footer-height="{height}px"
     data-quaff

package/dist/components/footer/QFooter.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QFooterProps_ = typeof __propDef.props;
-export { QFooterProps_ as QFooterProps };
-export type QFooterEvents = typeof __propDef.events;
-export type QFooterSlots = typeof __propDef.slots;
-export default class QFooter extends SvelteComponentTyped<QFooterProps_, QFooterEvents, QFooterSlots> {
-}
+import type { QFooterProps } from "./props";
+declare const QFooter: import("svelte").Component<QFooterProps, {}, "value">;
+type QFooter = ReturnType<typeof QFooter>;
+export default QFooter;

package/dist/components/header/QHeader.scss

@@ -30,7 +30,7 @@
   }
 
   &.q-header--bordered {
-    @include mixins.border(var(--outline), "bottom");
+    @include mixins.border($position: "bottom");
   }
 
   &.q-header--dense {