@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

package/dist/components/header/QHeader.svelte

@@ -1,28 +1,95 @@
-<script>import { createClasses } from "../../utils/props";
-import { getContext } from "svelte";
-import QToolbar from "../toolbar/QToolbar.svelte";
-export let inset = false, elevate = false, border = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
-$:
-  if ($ctx === void 0) {
-    console.warn("QHeader should be used inside QLayout");
+<script lang="ts">
+  import { getContext, onMount, untrack } from "svelte";
+  import { QScrollObserver } from "../..";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { QLayoutCtxName } from "../../utils";
+  import type { AppbarContext } from "../layout/QLayout.svelte";
+  import type { QLayoutProps } from "../layout/props";
+  import type { QHeaderProps } from "./props";
+
+  let {
+    elevated = false,
+    inset = false,
+    reveal = false,
+    revealOffset = 250,
+    height = 64,
+    bordered = false, // Added bordered here for explicitness, though it's in props
+    children,
+    ...props
+  }: QHeaderProps = $props();
+
+  const uid = $props.id();
+
+  let headerEl = $state<HTMLElement>();
+
+  const headerContext = QContext.get<AppbarContext>(QLayoutCtxName.header);
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    QLayoutCtxName.view,
+  );
+  if (!headerContext || !layoutView) {
+    throw new Error("QHeader should be used inside QLayout");
   }
-$:
-  classes = createClasses([$ctx?.header?.fixed && "fixed"], {
-    component: "q-header",
-    userClasses
+
+  const scroll = $derived(
+    reveal
+      ? new QScrollObserver(`.q-header--${uid} ~ .q-layout__content`)
+      : undefined,
+  );
+  const offset = $derived(scroll ? scroll.position - height : undefined);
+  // Collapse the header `${reavealOffset}px` below the top of layout content when scrolling down
+  const collapsed = $derived(
+    reveal && scroll?.direction === "down" && offset! - revealOffset > 0,
+  );
+
+  const leftOffset = () => layoutView.value.charAt(0) === "l";
+  const rightOffset = () => layoutView.value.charAt(2) === "r";
+
+  $effect.pre(() => {
+    untrack(() => headerContext).updateEntries({
+      height,
+      collapsed,
+      ready: true,
+    });
   });
-$:
-  if ($ctx?.header !== void 0) {
-    if (userStyles?.includes("display: none")) {
-      $ctx.header.display = false;
-    } else {
-      $ctx.header.display = true;
+
+  onMount(() => {
+    if (headerContext) {
+      setTimeout(() => {
+        if (headerEl) {
+          headerEl.style.transition = "all 0.3s";
+        }
+      }, 100);
     }
-  }
+
+    return () => {
+      if (headerContext && headerEl) {
+        headerEl.style.transition = "none";
+        headerContext.updateEntries({
+          height: 0,
+          collapsed: false,
+          ready: false,
+        });
+      }
+    };
+  });
 </script>
 
-<QToolbar {inset} {elevate} {border} class={classes} role="header" {...$$restProps}>
-  <slot />
-</QToolbar>
+<header
+  bind:this={headerEl}
+  {...props}
+  class={[
+    "q-header",
+    props.class,
+    `q-header--${uid}`,
+    elevated && "q-header--elevated",
+    bordered && "q-header--bordered",
+    collapsed && "q-header--collapsed",
+    leftOffset() && "q-header--offset-left",
+    rightOffset() && "q-header--offset-right",
+    inset && "q-header--inset",
+  ]}
+  style:--header-height="{height}px"
+  data-quaff
+>
+  {@render children?.()}
+</header>

package/dist/components/header/QHeader.svelte.d.ts

@@ -1,24 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QHeaderProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inset?: QHeaderProps["inset"];
-        elevate?: QHeaderProps["elevate"];
-        border?: QHeaderProps["border"];
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QHeaderProps_ = typeof __propDef.props;
 export { QHeaderProps_ as QHeaderProps };
 export type QHeaderEvents = typeof __propDef.events;
 export type QHeaderSlots = typeof __propDef.slots;
-export default class QHeader extends SvelteComponent<QHeaderProps, QHeaderEvents, QHeaderSlots> {
+export default class QHeader extends SvelteComponentTyped<QHeaderProps_, QHeaderEvents, QHeaderSlots> {
 }

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

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

package/dist/components/header/docs.js

@@ -0,0 +1,11 @@
+import { QHeaderDocsProps, QHeaderDocsSnippets } from "./docs.props";
+export const QHeaderDocs = {
+    name: "QHeader",
+    description: "QHeader is a component used for the top section of a QLayout, typically containing a QToolbarTitle for titles, navigation, and actions. It can be configured to be elevated, bordered, reveal on scroll, and have a custom height.",
+    docs: {
+        props: QHeaderDocsProps,
+        snippets: QHeaderDocsSnippets,
+        methods: [],
+        events: [],
+    },
+};

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

@@ -0,0 +1,7 @@
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QToolbarDocsProps: ParsedProp[];
+export declare const QToolbarDocsSnippets: ParsedSnippet[];
+export declare const QToolbarTitleDocsProps: ParsedProp[];
+export declare const QToolbarTitleDocsSnippets: ParsedSnippet[];
+export declare const QHeaderDocsProps: ParsedProp[];
+export declare const QHeaderDocsSnippets: ParsedSnippet[];

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

@@ -0,0 +1,131 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 719f80792087363e59f5ade9eb0fd396
+export const QToolbarDocsProps = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "inset",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds horizontal padding to the toolbar content.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "border",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a border to the toolbar to separate it from the main content.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "elevate",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Adds a shadow to the toolbar to make it appear elevated.",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "height",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Height of the toolbar in pixels.",
+        default: "64",
+    },
+];
+export const QToolbarDocsSnippets = [];
+export const QToolbarTitleDocsProps = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "shrink",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Allows the title to shrink when there isn't enough space in the toolbar.",
+        default: "false",
+    },
+];
+export const QToolbarTitleDocsSnippets = [];
+export const QHeaderDocsProps = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "elevated",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "bordered",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "height",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "",
+        default: "64",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "reveal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "",
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "revealOffset",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "",
+        default: "250",
+    },
+];
+export const QHeaderDocsSnippets = [];

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

@@ -1,15 +1,23 @@
-import type { NativeProps } from "../../utils/types";
-export interface QHeaderProps extends NativeProps {
+import type { QToolbarProps } from "../toolbar/props";
+export interface QHeaderProps extends QToolbarProps {
     /**
      * @default false
      */
-    inset?: boolean;
+    elevated?: boolean;
     /**
      * @default false
      */
-    elevate?: boolean;
+    bordered?: boolean;
+    /**
+     * @default 64
+     */
+    height?: number;
     /**
      * @default false
      */
-    border?: boolean;
+    reveal?: boolean;
+    /**
+     * @default 250
+     */
+    revealOffset?: number;
 }

package/dist/components/icon/{index.scss → QIcon.scss}

@@ -1,8 +1,7 @@
 .q-icon {
-  --font: "Material Symbols Outlined";
   --size: 1.5rem;
   overflow: visible;
-  font-family: var(--font);
+  font-family: var(--font, "Material Symbols Outlined");
   font-weight: normal;
   font-style: normal;
   font-size: var(--size);
@@ -18,7 +17,6 @@
   -webkit-font-smoothing: antialiased;
   vertical-align: middle;
   text-align: center;
-  overflow: hidden;
   width: var(--size);
   min-width: var(--size);
   height: var(--size);
@@ -65,7 +63,7 @@
     padding: inherit;
   }
 
-  &.filled
+  &--filled
   // we might need these selectors later:
   // a.row:is(:hover, :focus) > i,
   // .transparent:is(:hover, :focus) > i

package/dist/components/icon/QIcon.svelte

@@ -1,38 +1,54 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-import { sizes } from "../../composables/use-size";
-import { useSize } from "../../composables/use-size";
-export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  sizeObj = useSize(size);
-$:
-  classes = createClasses([type, filled && "filled", sizeObj.class], {
-    component: "q-icon",
-    userClasses,
-    quaffClasses: [color && `text-${color}`]
-  });
-$:
-  style = createStyles(
-    {
-      "--size": sizeObj.style
-    },
-    userStyles
+<script lang="ts">
+  import { useSize } from "../../composables";
+  import type { QIconProps } from "./props";
+
+  let {
+    size = "md",
+    name,
+    type = "outlined",
+    filled = false,
+    svg,
+    img,
+    imgAttributes = {},
+    color,
+    children,
+    ...props
+  }: QIconProps = $props();
+
+  const qSize = $derived(useSize(size, "q-icon"));
+
+  const parsedColor = $derived(
+    color && `var(--${color.replace("#", "")}, ${color})`,
   );
-$:
-  imgAttrs = {
+
+  const imgAttrs = $derived({
     alt: "Quaff Image Icon",
-    ...imgAttributes
-  };
+    ...imgAttributes,
+  });
+
+  const typeClass = $derived(`q-icon--${type}`);
 </script>
 
-<i class={classes} {style}>
+<i
+  {...props}
+  class={[
+    "q-icon",
+    typeClass,
+    qSize.class,
+    props.class,
+    filled && "q-icon--filled",
+  ]}
+  style:--size={qSize.style}
+  style:color={parsedColor}
+  data-quaff
+>
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}
-    <!-- svelte-ignore a11y-missing-attribute -->
     <img src={img} {...imgAttrs} />
-  {:else if svg !== undefined}
-    <slot />
+  {:else if svg}
+    {@html svg}
+  {:else}
+    {@render children?.()}
   {/if}
 </i>

package/dist/components/icon/QIcon.svelte.d.ts

@@ -1,28 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QIconProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        size?: import("./props").QIconSizeOptions | undefined;
-        name?: QIconProps["name"];
-        type?: import("./props").QIconTypeOptions | undefined;
-        filled?: boolean | undefined;
-        svg?: QIconProps["svg"];
-        img?: QIconProps["img"];
-        imgAttributes?: Record<string, any> | undefined;
-        color?: QIconProps["color"];
-        class?: string | undefined;
-        style?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QIconProps_ = typeof __propDef.props;
 export { QIconProps_ as QIconProps };
 export type QIconEvents = typeof __propDef.events;
 export type QIconSlots = typeof __propDef.slots;
-export default class QIcon extends SvelteComponent<QIconProps, QIconEvents, QIconSlots> {
+export default class QIcon extends SvelteComponentTyped<QIconProps_, QIconEvents, QIconSlots> {
 }

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

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

package/dist/components/icon/docs.js

@@ -1,10 +1,10 @@
-import { QIconDocsProps } from "./docs.props";
-export let QIconDocs = {
+import { QIconDocsProps, QIconDocsSnippets } from "./docs.props";
+export const QIconDocs = {
     name: "QIcon",
     description: "This component allows you to insert icons within elements of the page. Supported cions are Material Symbols icons.",
     docs: {
         props: QIconDocsProps,
-        slots: [],
+        snippets: QIconDocsSnippets,
         methods: [],
         events: [],
     },

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

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

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

@@ -1,66 +1,107 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash d7b1dd5d93ae1a1c6c37dc11798972e5
 export const QIconDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "size",
-        type: "QIconSizeOptions",
-        optional: false,
-        clickableType: true,
+        type: {
+            name: "QIconSizeOptions",
+            isClickable: true,
+        },
         description: 'The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "md",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "type",
-        type: "QIconTypeOptions",
-        optional: false,
-        clickableType: true,
+        type: {
+            name: "QIconTypeOptions",
+            isClickable: true,
+        },
         description: "The type of the icon.",
         default: "outlined",
     },
     {
-        name: "name",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "name",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "`img:${string}`",
+                isClickable: false,
+            },
+        ],
         description: "The name of the Material Symbols icon.",
         default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "filled",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the icon should be filled.",
         default: "false",
     },
     {
-        name: "svg",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "svg",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "The SVG content for the icon.",
         default: "undefined",
     },
     {
-        name: "img",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "img",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "The image source for the icon.",
         default: "undefined",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "imgAttributes",
-        type: "Record<string, any>",
-        optional: false,
-        clickableType: true,
+        type: {
+            name: "HTMLImgAttributes",
+            isClickable: false,
+        },
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",
     },
     {
-        name: "color",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "color",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "The color of the icon.",
         default: "undefined",
     },
 ];
+export const QIconDocsSnippets = [];