@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

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

@@ -1,24 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QFooterProps } from "./props";
-declare const __propDef: {
-    props: {
-        value?: QFooterProps["value"];
-        border?: QFooterProps["border"];
-        elevate?: QFooterProps["elevate"];
-        height?: QFooterProps["height"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QFooter: import("svelte").Component<QFooterProps, {}, "value">;
+export default QFooter;

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

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

package/dist/components/footer/docs.js

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

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash c4c13f38059522fc7b5db2ae14765e9f
+// @quaffHash b53713bcb971afb18ef3d69602e8f218
 export const QFooterDocsProps = [
     {
         name: "value",
@@ -10,7 +10,7 @@ export const QFooterDocsProps = [
         default: "true",
     },
     {
-        name: "border",
+        name: "bordered",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -18,18 +18,26 @@ export const QFooterDocsProps = [
         default: "false",
     },
     {
-        name: "elevate",
+        name: "reveal",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Determines whether the footer has an elevated effect. (not supported yet)",
+        description: "",
         default: "false",
     },
+    {
+        name: "revealOffset",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "250",
+    },
     {
         name: "height",
-        type: "number | CssValue",
+        type: "number",
         optional: true,
-        clickableType: 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)',
         default: "undefined",
     },

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
@@ -10,15 +10,18 @@ export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * Determines whether the footer has a border around it. (not supported yet)
      * @default false
      */
-    border?: boolean;
+    bordered?: boolean;
     /**
-     * Determines whether the footer has an elevated effect. (not supported yet)
      * @default false
      */
-    elevate?: boolean;
+    reveal?: boolean;
+    /**
+     * @default 250
+     */
+    revealOffset?: number;
     /**
      * The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)
      * @default undefined
      */
-    height?: number | CssValue;
+    height?: number;
 }

package/dist/components/header/QHeader.scss

@@ -0,0 +1,54 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-header {
+  z-index: 4;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+
+  min-height: unset;
+  height: var(--header-height);
+  width: auto;
+
+  border-radius: 0;
+
+  background-color: var(--surface);
+
+  transition: all variables.$speed3;
+
+  &.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));
+  }
+
+  & > nav {
+    height: 100%;
+    min-height: unset;
+
+    @include mixins.padding("x-md");
+  }
+
+  @each $side in ("left", "right") {
+    &.q-header--offset-#{$side} {
+      #{$side}: var(--offset-#{$side}, 0);
+    }
+  }
+}

package/dist/components/header/QHeader.svelte

@@ -1,28 +1,56 @@
-<script>import { createClasses } from "../../utils";
-import { getContext } from "svelte";
-import { QToolbar } from "../..";
-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, onDestroy, untrack } from "svelte";
+  import QToolbar from "../toolbar/QToolbar.svelte";
+  import QContext from "../../classes/QContext.svelte";
+  import QScrollObserver from "../../classes/QScrollObserver.svelte";
+  const headerIdentifier = Date.now();
+  let {
+    elevated = false,
+    inset = false,
+    reveal = false,
+    revealOffset = 250,
+    height = 64,
+    children,
+    ...props
+  } = $props();
+  const headerContext = QContext.get("QHeader");
+  const layoutView = getContext("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--${headerIdentifier} ~ .q-layout__content`,
+        )
+      : void 0,
+  );
+  const offset = $derived(scroll ? scroll.position - height : void 0);
+  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 });
+  });
+  onDestroy(() => {
+    untrack(() => headerContext).updateEntries({ height: 0, collapsed: false });
   });
-$:
-  if ($ctx?.header !== void 0) {
-    if (userStyles?.includes("display: none")) {
-      $ctx.header.display = false;
-    } else {
-      $ctx.header.display = true;
-    }
-  }
 </script>
 
-<QToolbar {inset} {elevate} {border} class={classes} role="header" {...$$restProps}>
-  <slot />
-</QToolbar>
+<header
+  {...props}
+  class="q-header{props.class
+    ? ` ${props.class}`
+    : ''} q-header--{headerIdentifier}{elevated
+    ? ` q-header--elevated`
+    : ''}{collapsed ? ` q-header--collapsed` : ''}{leftOffset()
+    ? ` q-header--offset-left`
+    : ''}{rightOffset() ? ` q-header--offset-right` : ''}"
+  style:--header-height="{height}px"
+>
+  <QToolbar {inset}>
+    {@render children?.()}
+  </QToolbar>
+</header>

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

@@ -1,24 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QHeaderProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        inset?: QHeaderProps["inset"];
-        elevate?: QHeaderProps["elevate"];
-        border?: QHeaderProps["border"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QHeader: import("svelte").Component<QHeaderProps, {}, "">;
+export default QHeader;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 921eb52eb977e8c823f9b2c8af39279f
+// @quaffHash 719f80792087363e59f5ade9eb0fd396
 export const QToolbarDocsProps = [
     {
         name: "inset",
@@ -27,11 +27,11 @@ export const QToolbarDocsProps = [
     },
     {
         name: "height",
-        type: "CssValue | number",
+        type: "number",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: "",
-        default: "64px",
+        default: "64",
     },
 ];
 export const QToolbarTitleDocsProps = [
@@ -46,7 +46,7 @@ export const QToolbarTitleDocsProps = [
 ];
 export const QHeaderDocsProps = [
     {
-        name: "inset",
+        name: "elevated",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -54,7 +54,7 @@ export const QHeaderDocsProps = [
         default: "false",
     },
     {
-        name: "elevate",
+        name: "bordered",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -62,11 +62,27 @@ export const QHeaderDocsProps = [
         default: "false",
     },
     {
-        name: "border",
+        name: "height",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "64",
+    },
+    {
+        name: "reveal",
         type: "boolean",
         optional: true,
         clickableType: false,
         description: "",
         default: "false",
     },
+    {
+        name: "revealOffset",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "250",
+    },
 ];

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

@@ -3,13 +3,21 @@ 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,29 +1,42 @@
-<script>import { useSize } from "../../composables";
-export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = "";
-export { userClasses as class };
-$:
-  sizeObj = useSize(size);
-$:
-  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-icon--${sizeObj.class}` : "";
-$:
-  imgAttrs = {
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { useSize } from "../../composables/useSize";
+  let {
+    size = "md",
+    name,
+    type = "outlined",
+    filled = false,
+    svg,
+    img,
+    imgAttributes = {},
+    color,
+    children,
+    ...props
+  } = $props();
+  const qSize = $derived(useSize(size, "q-icon"));
+  const imgAttrs = $derived({
     alt: "Quaff Image Icon",
-    ...imgAttributes
-  };
+    ...imgAttributes,
+  });
+  const typeClass = $derived(`q-icon--${type}`);
 </script>
 
 <i
-  class="q-icon q-icon--{type} {sizeClass} {color ? `text-${color}` : ''} {userClasses}"
+  {...props}
+  class="q-icon{typeClass ? ` ${typeClass}` : ''}{color
+    ? ' ' + `text-${color}`
+    : ''}{qSize.class ? ` ${qSize.class}` : ''}{props.class
+    ? ` ${props.class}`
+    : ''}"
   class:q-icon--filled={filled}
-  style:--size={sizeObj.style}
-  {...$$restProps}
+  style:--size={qSize.style}
 >
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}
-    <!-- svelte-ignore a11y-missing-attribute -->
     <img src={img} {...imgAttrs} />
   {:else if svg !== undefined}
-    <slot />
+    {@render children?.()}
   {/if}
 </i>

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

@@ -1,28 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QIconProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        size?: QIconProps["size"];
-        name?: QIconProps["name"];
-        type?: QIconProps["type"];
-        filled?: QIconProps["filled"];
-        svg?: QIconProps["svg"];
-        img?: QIconProps["img"];
-        imgAttributes?: QIconProps["imgAttributes"];
-        color?: QIconProps["color"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QIcon: import("svelte").Component<QIconProps, {}, "">;
+export default QIcon;

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

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

package/dist/components/icon/docs.js

@@ -1,5 +1,5 @@
 import { QIconDocsProps } from "./docs.props";
-export let QIconDocs = {
+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: {

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 587610290cf9d959dd89496d6b94a98e
+// @quaffHash d7b1dd5d93ae1a1c6c37dc11798972e5
 export const QIconDocsProps = [
     {
         name: "size",
@@ -19,9 +19,9 @@ export const QIconDocsProps = [
     },
     {
         name: "name",
-        type: "string",
+        type: "MaterialSymbol | `img:${string}`",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "The name of the Material Symbols icon.",
         default: "undefined",
     },
@@ -51,9 +51,9 @@ export const QIconDocsProps = [
     },
     {
         name: "imgAttributes",
-        type: "Record<string, any>",
+        type: "HTMLImgAttributes",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",
     },

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

@@ -1,8 +1,8 @@
-import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
-import type { HTMLAttributes } from "svelte/elements";
-export type QIconSizeOptions = QuaffSizes | CssValue | number;
+import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
+import type { MaterialSymbol } from "material-symbols";
+export type QIconSizeOptions = Q.Size | Q.CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
-export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QIconProps extends HTMLAttributes<HTMLElement> {
     /**
      * The size of the icon. Can be specified with CSS units. If no unit is specified, "px" will be used.
      * @default md
@@ -17,7 +17,7 @@ export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * The name of the Material Symbols icon.
      * @default undefined
      */
-    name?: string;
+    name?: MaterialSymbol | `img:${string}`;
     /**
      * Determines whether the icon should be filled.
      * @default false
@@ -37,7 +37,7 @@ export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes?: Record<string, any>;
+    imgAttributes?: HTMLImgAttributes;
     /**
      * The color of the icon.
      * @default undefined

package/dist/components/index.d.ts

@@ -25,8 +25,8 @@ import QSeparator from "./separator/QSeparator.svelte";
 import QTabs from "./tabs/QTabs.svelte";
 import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
-import QToggle from "./toggle/QToggle.svelte";
+import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -25,8 +25,8 @@ import QSeparator from "./separator/QSeparator.svelte";
 import QTabs from "./tabs/QTabs.svelte";
 import QTab from "./tabs/QTab.svelte";
 import QTable from "./table/QTable.svelte";
-import QToggle from "./toggle/QToggle.svelte";
+import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QToggle, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };