@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash f39265baa2de427fc47e65c2f0088cb9
 export const QDrawerDocsProps = [
     {
         name: "value",
@@ -17,9 +19,9 @@ export const QDrawerDocsProps = [
     },
     {
         name: "width",
-        type: "number | string",
+        type: "number",
         optional: true,
-        clickableType: true,
+        clickableType: 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",
     },

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

@@ -1,7 +1,8 @@
-import type { 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 | string;
+    width?: number;
     /**
      * The breakpoint at which the drawer behavior changes. (not supported yet)
      * @default 1023

package/dist/components/footer/QFooter.scss

@@ -0,0 +1,42 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-footer {
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 4;
+
+  @include mixins.padding("x-md");
+
+  min-height: unset;
+  height: var(--footer-height);
+  width: auto;
+
+  border-radius: 0;
+
+  background-color: var(--surface);
+
+  transition: all variables.$speed3;
+
+  &.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,14 +1,69 @@
-<script>import { getContext } from "svelte";
-import { createClasses } from "../../utils/props";
-export let value = true, bordered = false, elevated = false, height = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-let ctx = getContext("layout");
-$:
-  classes = createClasses(["q-footer", $ctx && $ctx.footer.fixed && "fixed", userClasses]);
+<script lang="ts">
+  import { getContext, onDestroy, onMount, untrack } from "svelte";
+  import QContext from "../../classes/QContext.svelte";
+  import QScrollObserver from "../../classes/QScrollObserver.svelte";
+  import QToolbar from "../toolbar/QToolbar.svelte";
+  const footerIdentifier = Date.now();
+  let {
+    value = $bindable(true),
+    bordered = false,
+    reveal = false,
+    revealOffset = 250,
+    height = 80,
+    children,
+    ...props
+  } = $props();
+  const footerContext = QContext.get("QFooter");
+  const layoutView = getContext("view");
+  if (!footerContext || !layoutView) {
+    throw new Error("QFooter should be used inside QLayout");
+  }
+  const scroll = $derived(
+    reveal
+      ? new QScrollObserver(
+          `.q-footer--${footerIdentifier} ~ .q-layout__content`,
+        )
+      : void 0,
+  );
+  let contentScrollHeight = $state(0);
+  const offset = $derived(scroll ? scroll.position + height : void 0);
+  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 });
+  });
+  onMount(() => {
+    const content = document.querySelector(
+      `.q-footer--${footerIdentifier} ~ .q-layout__content`,
+    );
+    contentScrollHeight = content
+      ? content.scrollHeight - content.clientHeight
+      : 0;
+  });
+  onDestroy(() => {
+    untrack(() => footerContext).updateEntries({ height: 0, collapsed: false });
+  });
 </script>
 
-<footer class={classes} style={userStyles}>
-  <nav>
-    <slot />
-  </nav>
-</footer>
+{#if value}
+  <footer
+    {...props}
+    class="q-footer{props.class
+      ? ` ${props.class}`
+      : ''} q-footer--{footerIdentifier}"
+    class:q-footer--collapsed={collapsed}
+    class:q-footer--bordered={bordered}
+    class:q-footer--offset-left={leftOffset()}
+    class:q-footer--offset-right={rightOffset()}
+    style:--footer-height="{height}px"
+  >
+    <QToolbar>
+      {@render children?.()}
+    </QToolbar>
+  </footer>
+{/if}

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"];
-        bordered?: QFooterProps["bordered"];
-        elevated?: QFooterProps["elevated"];
-        height?: QFooterProps["height"];
-        class?: string | undefined;
-        style?: string | 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/types";
-export declare let QFooterDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+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,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash b53713bcb971afb18ef3d69602e8f218
 export const QFooterDocsProps = [
     {
         name: "value",
@@ -16,16 +18,24 @@ export const QFooterDocsProps = [
         default: "false",
     },
     {
-        name: "elevated",
+        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: "string | number",
+        type: "number",
         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)',

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

@@ -1,5 +1,6 @@
-import type { 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)
      * @default true
@@ -11,13 +12,16 @@ export interface QFooterProps extends NativeProps {
      */
     bordered?: boolean;
     /**
-     * Determines whether the footer has an elevated effect. (not supported yet)
      * @default false
      */
-    elevated?: 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?: string | number;
+    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

@@ -0,0 +1,56 @@
+<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");
+  }
+  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 });
+  });
+</script>
+
+<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

@@ -0,0 +1,3 @@
+import type { QHeaderProps } from "./props";
+declare const QHeader: import("svelte").Component<QHeaderProps, {}, "">;
+export default QHeader;

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

@@ -0,0 +1,24 @@
+export declare const QToolbarDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QToolbarTitleDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QHeaderDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,88 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 719f80792087363e59f5ade9eb0fd396
+export const QToolbarDocsProps = [
+    {
+        name: "inset",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "border",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "elevate",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "height",
+        type: "number",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "64",
+    },
+];
+export const QToolbarTitleDocsProps = [
+    {
+        name: "shrink",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+];
+export const QHeaderDocsProps = [
+    {
+        name: "elevated",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "",
+        default: "false",
+    },
+    {
+        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

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

package/dist/components/header/props.js

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

package/dist/components/icon/QIcon.scss

@@ -0,0 +1,73 @@
+.q-icon {
+  --size: 1.5rem;
+  overflow: visible;
+  font-family: var(--font, "Material Symbols Outlined");
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--size);
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+  vertical-align: middle;
+  text-align: center;
+  width: var(--size);
+  min-width: var(--size);
+  height: var(--size);
+  min-height: var(--size);
+  box-sizing: content-box;
+  line-height: normal;
+
+  &--outlined {
+    --font: "Material Symbols Outlined";
+  }
+
+  &--rounded {
+    --font: "Material Symbols Rounded";
+  }
+
+  &--sharp {
+    --font: "Material Symbols Sharp";
+  }
+
+  &--xs {
+    --size: 1rem;
+  }
+
+  &--sm {
+    --size: 1.25rem;
+  }
+
+  &--lg {
+    --size: 1.75rem;
+  }
+
+  &--xl {
+    --size: 2rem;
+  }
+
+  > :is(img, svg) {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    border-radius: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding: inherit;
+  }
+
+  &--filled
+  // we might need these selectors later:
+  // a.row:is(:hover, :focus) > i,
+  // .transparent:is(:hover, :focus) > i
+  {
+    font-variation-settings: "FILL" 1;
+  }
+}

package/dist/components/icon/QIcon.svelte

@@ -1,40 +1,42 @@
-<script>import useSize from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-export let size = "md", name = void 0, type = "outlined", fill = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  sizeStyle = useSize(size) === null ? isNumber(size) ? `${size}px` : size : void 0;
-$:
-  classes = createClasses([
-    "q-icon",
-    `q-icon__${type}`,
-    fill && "fill",
-    useSize(size),
-    color && `${color}-text`,
-    userClasses
-  ]);
-$:
-  style = createStyles(
-    {
-      "---size": sizeStyle
-    },
-    userStyles
-  );
-$:
-  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={classes} {style}>
+<i
+  {...props}
+  class="q-icon{typeClass ? ` ${typeClass}` : ''}{color
+    ? ' ' + `text-${color}`
+    : ''}{qSize.class ? ` ${qSize.class}` : ''}{props.class
+    ? ` ${props.class}`
+    : ''}"
+  class:q-icon--filled={filled}
+  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>