@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,106 +1,149 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 16a53668c0713b9e0ca53dbe17a8a9de
 export const QDrawerDocsProps = [
     {
-        name: "value",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "The value indicating whether the drawer is visible or hidden.",
         default: "true",
     },
     {
-        name: "side",
-        type: "QDrawerSideOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "side",
+        type: {
+            name: "QDrawerSideOptions",
+            isClickable: true,
+        },
         description: "The side of the layout where the drawer is positioned.",
         default: '"left"',
     },
     {
-        name: "width",
-        type: "number | string",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "width",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
         description: 'The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.',
         default: "300",
     },
     {
-        name: "breakpoint",
-        type: "number",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "breakpoint",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
         description: "The breakpoint at which the drawer behavior changes. (not supported yet)",
         default: "1023",
     },
     {
-        name: "showIfAbove",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "showIfAbove",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the drawer should be shown if the viewport width is above the specified breakpoint. (not supported yet)",
         default: "false",
     },
     {
-        name: "behavior",
-        type: "QDrawerBehaviorOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "behavior",
+        type: {
+            name: "QDrawerBehaviorOptions",
+            isClickable: true,
+        },
         description: "The behavior of the drawer based on the viewport width. (not supported yet)",
         default: '"default"',
     },
     {
-        name: "bordered",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "bordered",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the drawer has a border around it.",
         default: "false",
     },
     {
-        name: "elevated",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "elevated",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the drawer has an elevated effect. (not supported yet)",
         default: "false",
     },
     {
-        name: "overlay",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "overlay",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the wrawer should behave like an overlay (opening above the content) or not (pushing the content while opening).",
         default: "false",
     },
     {
-        name: "persistent",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "persistent",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the drawer remains persistent, not closing on click outside.",
         default: "false",
     },
     {
-        name: "noSwipeOpen",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Determines whether swipe gestures can open the drawer. (not supported yet)",
-        default: "false",
-    },
-    {
-        name: "noSwipeClose",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Determines whether swipe gestures can close the drawer. (not supported yet)",
+        isSnippet: false,
+        name: "noSwipe",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Determines whether swipe gestures opening the drawer should be disabled or not.",
         default: "false",
     },
     {
-        name: "noSwipeBackdrop",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Determines whether swipe gestures on the backdrop can close the drawer. (not supported yet)",
-        default: "false",
+        isSnippet: false,
+        name: "swipeThreshold",
+        type: {
+            name: "`${number}%`",
+            isClickable: 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

@@ -1,7 +1,8 @@
-import type { CssValue, NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
-export interface QDrawerProps extends NativeProps {
+export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * The value indicating whether the drawer is visible or hidden.
      * @default true
@@ -16,7 +17,7 @@ export interface QDrawerProps extends NativeProps {
      * The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.
      * @default 300
      */
-    width?: number | CssValue;
+    width?: number;
     /**
      * The breakpoint at which the drawer behavior changes. (not supported yet)
      * @default 1023
@@ -53,18 +54,14 @@ export interface QDrawerProps extends NativeProps {
      */
     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/footer/QFooter.scss

@@ -0,0 +1,42 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-footer {
+  z-index: 4;
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  @include mixins.toolbarDisplay;
+
+  @include mixins.padding("x-md");
+
+  min-height: unset;
+  height: var(--footer-height);
+  width: auto;
+
+  border-radius: 0;
+
+  background-color: var(--surface);
+
+  &.q-footer--bordered {
+    @include mixins.border(var(--outline), "top");
+  }
+
+  &.q-footer--collapsed {
+    translate: 0 calc(1.5 * var(--footer-height));
+  }
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+  }
+
+  @each $side in ("left", "right") {
+    &.q-footer--offset-#{$side} {
+      #{$side}: var(--offset-#{$side}, 0);
+    }
+  }
+}

package/dist/components/footer/QFooter.svelte

@@ -1,28 +1,103 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
-export let value = true, border = false, elevate = false, height = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
-$:
-  classes = createClasses(
-    [border && "bordered", elevate && "elevated", $ctx?.footer?.fixed && "fixed"],
-    {
-      component: "q-footer",
-      userClasses
-    }
+<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 type { QFooterProps } from "./props";
+
+  let footerEl = $state<HTMLElement>();
+
+  let {
+    value = $bindable(true),
+    bordered = false,
+    reveal = false,
+    revealOffset = 250,
+    height = 80,
+    children,
+    ...props
+  }: QFooterProps = $props();
+
+  const uid = $props.id();
+
+  const footerContext = QContext.get<AppbarContext>(QLayoutCtxName.footer);
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    QLayoutCtxName.view,
+  );
+
+  if (!footerContext || !layoutView) {
+    throw new Error("QFooter should be used inside QLayout");
+  }
+
+  const scroll = $derived(
+    reveal
+      ? new QScrollObserver(`.q-footer--${uid} ~ .q-layout__content`)
+      : undefined,
   );
-$:
-  style = createStyles(
-    {
-      height: !ctx && useSize(height).style
-    },
-    userStyles
+  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
+  const collapsed = $derived(
+    reveal &&
+      scroll?.direction === "up" &&
+      offset! + revealOffset < contentScrollHeight,
   );
+
+  const leftOffset = () => layoutView.value.charAt(8) === "l";
+  const rightOffset = () => layoutView.value.charAt(10) === "r";
+
+  $effect.pre(() => {
+    untrack(() => footerContext).updateEntries({
+      height,
+      collapsed,
+      ready: true,
+    });
+  });
+
+  onMount(() => {
+    // Calculating the layout content's height
+    const content = document.querySelector(
+      `.q-footer--${uid} ~ .q-layout__content`,
+    );
+
+    contentScrollHeight = content
+      ? content.scrollHeight - content.clientHeight
+      : 0;
+
+    setTimeout(() => {
+      if (footerEl) {
+        footerEl.style.transition = "all 0.3s";
+      }
+    }, 100);
+
+    return () => {
+      footerContext.updateEntries({
+        height: 0,
+        collapsed: false,
+        ready: false,
+      });
+    };
+  });
 </script>
 
-<footer class={classes} {style}>
-  <nav>
-    <slot />
-  </nav>
-</footer>
+{#if value}
+  <footer
+    bind:this={footerEl}
+    {...props}
+    class={[
+      "q-footer",
+      props.class,
+      `q-footer--${uid}`,
+      collapsed && "q-footer--collapsed",
+      bordered && "q-footer--bordered",
+      leftOffset() && "q-footer--offset-left",
+      rightOffset() && "q-footer--offset-right",
+    ]}
+    style:--footer-height="{height}px"
+    data-quaff
+  >
+    {@render children?.()}
+  </footer>
+{/if}

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

@@ -1,24 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QFooterProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        value?: QFooterProps["value"];
-        border?: QFooterProps["border"];
-        elevate?: QFooterProps["elevate"];
-        height?: QFooterProps["height"];
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    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 SvelteComponent<QFooterProps, QFooterEvents, QFooterSlots> {
+export default class QFooter extends SvelteComponentTyped<QFooterProps_, QFooterEvents, QFooterSlots> {
 }

package/dist/components/footer/docs.d.ts

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

package/dist/components/footer/docs.js

@@ -1,10 +1,10 @@
-import { QFooterDocsProps } from "./docs.props";
-export let QFooterDocs = {
+import { QFooterDocsProps, QFooterDocsSnippets } from "./docs.props";
+export const QFooterDocs = {
     name: "QFooter",
     description: "Footers can be used to display navigation and key actions at the bottom of the screen.",
     docs: {
         props: QFooterDocsProps,
-        slots: [],
+        snippets: QFooterDocsSnippets,
         methods: [],
         events: [],
     },

package/dist/components/footer/docs.props.d.ts

@@ -1,8 +1,3 @@
-export declare const QFooterDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QFooterDocsProps: ParsedProp[];
+export declare const QFooterDocsSnippets: ParsedSnippet[];

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

@@ -1,34 +1,65 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash faec9d4b1cc03892cbb958c8040bec8c
 export const QFooterDocsProps = [
     {
-        name: "value",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "The value indicating whether the footer is visible or hidden. (not supported yet)",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "The value indicating whether the footer is visible or hidden.",
         default: "true",
     },
     {
-        name: "bordered",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Determines whether the footer has a border around it. (not supported yet)",
+        isSnippet: false,
+        name: "bordered",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Determines whether the footer has a top border.",
         default: "false",
     },
     {
-        name: "elevated",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Determines whether the footer has an elevated effect. (not supported yet)",
+        isSnippet: false,
+        name: "reveal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Determines whether the footer should hide on scroll.",
         default: "false",
     },
     {
-        name: "height",
-        type: "string | number",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)',
+        isSnippet: false,
+        name: "revealOffset",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "The offset in pixels to trigger the reveal effect. The footer will be hidden when the scroll position is greater than this value.",
+        default: "250",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "height",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: 'The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (specified CSS units are not supported yet)',
         default: "undefined",
     },
 ];
+export const QFooterDocsSnippets = [];

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

@@ -1,23 +1,29 @@
-import type { CssValue, NativeProps } from "../../utils/types";
-export interface QFooterProps extends NativeProps {
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
-     * The value indicating whether the footer is visible or hidden. (not supported yet)
+     * The value indicating whether the footer is visible or hidden.
      * @default true
      */
     value?: boolean;
     /**
-     * Determines whether the footer has a border around it. (not supported yet)
+     * Determines whether the footer has a top border.
      * @default false
      */
-    border?: boolean;
+    bordered?: boolean;
     /**
-     * Determines whether the footer has an elevated effect. (not supported yet)
+     * Determines whether the footer should hide on scroll.
      * @default false
      */
-    elevate?: boolean;
+    reveal?: boolean;
     /**
-     * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)
+     * The offset in pixels to trigger the reveal effect. The footer will be hidden when the scroll position is greater than this value.
+     * @default 250
+     */
+    revealOffset?: number;
+    /**
+     * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (specified CSS units are not supported yet)
      * @default undefined
      */
-    height?: number | CssValue;
+    height?: number;
 }

package/dist/components/header/QHeader.scss

@@ -0,0 +1,53 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-header {
+  z-index: 4;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+
+  @include mixins.toolbarDisplay;
+
+  min-height: unset;
+  height: var(--header-height);
+  width: auto;
+
+  @include mixins.padding("x-md");
+
+  border-radius: 0;
+
+  background-color: var(--surface);
+
+  &--inset {
+    padding-left: 3.625rem;
+  }
+
+  &.q-header--elevated {
+    @include mixins.elevate(1);
+  }
+
+  &.q-header--bordered {
+    @include mixins.border(var(--outline), "bottom");
+  }
+
+  &.q-header--dense {
+    --header-height: 3rem;
+  }
+
+  &.q-header--prominent {
+    --header-height: 7rem;
+  }
+
+  &.q-header--collapsed {
+    translate: 0 calc(-1.5 * var(--header-height));
+  }
+
+  @each $side in ("left", "right") {
+    &.q-header--offset-#{$side} {
+      #{$side}: var(--offset-#{$side}, 0);
+    }
+  }
+}