@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

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

@@ -1,111 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 4086c9cbacac3999316434c5d965375c
-export const QBtnDocsProps = [
-    {
-        name: "disable",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Puts the button in a disabled state, making it unclickable.",
-        default: "false",
-    },
-    {
-        name: "flat",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use flat design for the button, removing its elevation and background-color.",
-        default: "false",
-    },
-    {
-        name: "icon",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "Name of the leading icon to use for the button.",
-        default: "undefined",
-    },
-    {
-        name: "label",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "Text to use for the button.",
-        default: "undefined",
-    },
-    {
-        name: "loading",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Puts the button in a loading state, adding a loader as the leading icon.",
-        default: "false",
-    },
-    {
-        name: "outline",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use outline design for the button, adding a border around it.",
-        default: "false",
-    },
-    {
-        name: "rectangle",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use rectangle design for the button, removing the large border-radius.",
-        default: "false",
-    },
-    {
-        name: "noRipple",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Disable the ripple effect for the button.",
-        default: "false",
-    },
-    {
-        name: "round",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Use round design for the button, giving it a circular shape.",
-        default: "false",
-    },
-    {
-        name: "to",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: 'Makes the button navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").',
-        default: "undefined",
-    },
-    {
-        name: "unelevated",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Removes the button's elevation.",
-        default: "false",
-    },
-    {
-        name: "size",
-        type: "QBtnSizeOptions",
-        optional: true,
-        clickableType: true,
-        description: "Size of the button.",
-        default: "md",
-    },
-    {
-        name: "target",
-        type: 'HTMLAnchorAttributes["target"]',
-        optional: true,
-        clickableType: true,
-        description: 'For "a" (anchor) tag only, apply the target attribute.',
-        default: "undefined",
-    },
-];
+// @quaffHash a93df4aad7eee70fe7022c2eb26b6ef5
 export const QDialogDocsProps = [
     {
         name: "value",
@@ -115,30 +9,6 @@ export const QDialogDocsProps = [
         description: "The value indicating whether the dialog is visible or hidden.",
         default: "true",
     },
-    {
-        name: "button",
-        type: "boolean",
-        optional: true,
-        clickableType: false,
-        description: "Wether the dialog should have a trigger button or not.",
-        default: "false",
-    },
-    {
-        name: "buttonLabel",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: 'The label of the trigger button. Requires "button" to be set.',
-        default: "undefined",
-    },
-    {
-        name: "buttonProps",
-        type: "QBtnProps",
-        optional: true,
-        clickableType: false,
-        description: "Additional attributes for the dialog button.",
-        default: "{}",
-    },
     {
         name: "position",
         type: "QDialogPositionOptions",

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

@@ -1,6 +1,5 @@
 import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
-import type { QBtnProps } from "../button/props";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
 export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElement> {
     /**
@@ -8,21 +7,6 @@ export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElem
      * @default true
      */
     value: boolean;
-    /**
-     * Wether the dialog should have a trigger button or not.
-     * @default false
-     */
-    button?: boolean;
-    /**
-     * The label of the trigger button. Requires "button" to be set.
-     * @default undefined
-     */
-    buttonLabel?: string;
-    /**
-     * Additional attributes for the dialog button.
-     * @default {}
-     */
-    buttonProps?: QBtnProps;
     /**
      * The position of the dialog relative to the viewport.
      * @default "default"

package/dist/components/drawer/QDrawer.scss

@@ -0,0 +1,45 @@
+@use "$css/mixins";
+@use "$css/variables";
+
+.q-drawer {
+  z-index: 4;
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+
+  height: auto;
+  @include mixins.padding("a-sm");
+
+  background-color: var(--surface);
+  color: var(--on-surface);
+
+  overflow: auto;
+
+  transition:
+    border-radius variables.$speed3,
+    transform variables.$speed3,
+    top variables.$speed3,
+    bottom variables.$speed3;
+
+  &.q-drawer--overlay {
+    z-index: 6;
+  }
+
+  @each $side in ("left", "right") {
+    &.q-drawer--#{$side} {
+      #{$side}: 0;
+      width: var(--#{$side}-drawer-width);
+      transform: translate(if($side == "left", -100%, 100%));
+    }
+
+    &:not(.q-drawer--#{$side}).q-drawer--bordered {
+      @include mixins.border(var(--outline), $side);
+    }
+  }
+
+  &.q-drawer--active {
+    transform: translate(0);
+  }
+}

package/dist/components/drawer/QDrawer.svelte

@@ -1,101 +1,97 @@
-<script>import { navigating } from "$app/stores";
-import { useSize } from "../../composables";
-import { clickOutside } from "../../helpers";
-import { createClasses, createStyles } from "../../utils";
-import { getContext } from "svelte";
-import { derived } from "svelte/store";
-export let value = false, side = "left", width = 300, bordered = false, overlay = false, persistent = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  canHideOnClickOutside = value === true && persistent === false || overlay === true;
-$:
-  widthStyle = !$ctx && useSize(width).style;
-$:
-  hideOnRouteChange = persistent !== true || overlay === true;
-export const show = (e) => {
-  if (value !== true) {
-    value = true;
-    e && e.stopPropagation();
-  }
-};
-export const hide = () => {
-  if (value === true) {
-    value = false;
-  }
-};
-export const toggle = (e) => {
-  value = !value;
-  e && e.stopPropagation();
-};
-$:
-  if ($navigating && hideOnRouteChange) {
-    hide();
-  }
-let ctx = getContext("layout");
-let drawerType;
-$:
-  drawerType = side === "left" ? "drawerLeft" : "drawerRight";
-$:
-  classes = createClasses(
-    [
-      side,
-      value && "active",
-      overlay && "overlay",
-      bordered && "bordered",
-      $ctx && $ctx[drawerType].offset.top && "offset-top",
-      $ctx && $ctx[drawerType].offset.bottom && "offset-bottom",
-      $ctx && $ctx[drawerType].fixed && "fixed",
-      $borderRadiusClasses,
-      $zIndexClass
-    ],
-    {
-      component: "q-drawer",
-      userClasses
-    }
-  );
-$:
-  style = createStyles(
-    {
-      [side === "left" ? "--leftDrawerWidth" : "--rightDrawerWidth"]: widthStyle
-    },
-    userStyles
-  );
-$:
-  borderRadiusClasses = ctx && // No border radius if this isn't a layout drawer
-  derived(ctx, (context) => {
-    const borderSide = side === "left" ? "right" : "left";
-    const shouldHaveRadius = (pos) => {
-      let appBarEl = pos === "top" ? context["header"] : context["footer"];
-      return overlay || !appBarEl?.display || context[drawerType].offset[pos];
-    };
-    return createClasses(
-      [
-        shouldHaveRadius("top") && `top-${borderSide}-radius`,
-        shouldHaveRadius("bottom") && `bottom-${borderSide}-radius`
-      ],
-      {
-        component: "q-drawer"
-      }
-    );
+<script lang="ts">
+  import { getContext, onDestroy, untrack } from "svelte";
+  import { navigating } from "$app/stores";
+  import { useSize } from "../../composables";
+  import { clickOutside } from "../../helpers";
+  import QContext from "../../classes/QContext.svelte";
+  let {
+    value = $bindable(false),
+    side = "left",
+    width = 300,
+    bordered = false,
+    overlay = false,
+    persistent = false,
+    children,
+    ...props
+  } = $props();
+  const drawerContext = QContext.get(`QDrawer-${side}`);
+  const layoutView = getContext("view");
+  const ctx = QContext.get("layout");
+  const drawerType = $derived(side === "left" ? "drawerLeft" : "drawerRight");
+  const drawerCtx = $derived(ctx?.value?.[drawerType]);
+  const canHideOnClickOutside = $derived((value && !persistent) || overlay);
+  const hideOnRouteChange = $derived(!persistent || overlay);
+  const offsetTop = $derived.by(() => {
+    const charPos = side === "left" ? 0 : 2;
+    return layoutView?.value.charAt(charPos) === "h";
+  });
+  const offsetBottom = $derived.by(() => {
+    const charPos = side === "left" ? 8 : 10;
+    return layoutView?.value.charAt(charPos) === "f";
   });
-$:
-  zIndexClass = ctx && derived(ctx, (context) => {
-    const drawer = side === "left" ? context.drawerLeft : context.drawerRight;
-    let pos;
-    for (pos of ["top", "bottom"]) {
-      if (!drawer.offset[pos] && overlay) {
-        drawer.overlay = true;
-        return "above";
-      }
+  export const show = (e) => {
+    if (!value) {
+      value = true;
+      e?.stopPropagation();
+    }
+  };
+  export const hide = () => {
+    if (value) {
+      value = false;
     }
+  };
+  export const toggle = (e) => {
+    value = !value;
+    e?.stopPropagation();
+  };
+  $effect(() => {
+    if ($navigating && hideOnRouteChange) {
+      hide();
+    }
+  });
+  onDestroy(() => {
+    drawerContext?.updateEntries({
+      width: 0,
+      takesSpace: false,
+    });
   });
+  $effect(() => {
+    [value, overlay, width];
+    untrack(() =>
+      drawerContext?.updateEntries({
+        takesSpace: !!value && !overlay,
+        width,
+      }),
+    );
+  });
+  const shouldHaveRadius = (pos) => {
+    const appBarEl = pos === "top" ? ctx?.value?.header : ctx?.value?.footer;
+    return overlay || !appBarEl?.display || drawerCtx?.offset[pos];
+  };
+  const widthStyle = $derived(!ctx ? useSize(width).style : null);
+  const drawerWidthStyle = $derived(
+    widthStyle === null ? "" : `--${side}-drawer-width: ${widthStyle};`,
+  );
+  const style = $derived(`${drawerWidthStyle}${props.style ?? ""}`);
 </script>
 
 <div
+  {...props}
   use:clickOutside={() => canHideOnClickOutside && hide()}
-  class={classes}
+  class="q-drawer{props.class ? ` ${props.class}` : ''} q-drawer--{side}"
+  class:q-drawer--active={value}
+  class:q-drawer--overlay={overlay}
+  class:q-drawer--bordered={bordered}
+  class:q-drawer--offset-top={offsetTop}
+  class:q-drawer--offset-bottom={offsetBottom}
+  class:q-drawer--fixed={drawerCtx?.fixed}
+  class:q-drawer--top-left-radius={side === "right" && shouldHaveRadius("top")}
+  class:q-drawer--bottom-left-radius={side === "right" &&
+    shouldHaveRadius("bottom")}
+  class:q-drawer--top-right-radius={side === "left" && shouldHaveRadius("top")}
+  class:q-drawer--bottom-right-radius={side === "left" &&
+    shouldHaveRadius("bottom")}
   {style}
-  {...$$restProps}
 >
-  <slot />
+  {@render children?.()}
 </div>

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -1,33 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type { QDrawerProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: QDrawerProps["value"];
-        side?: QDrawerProps["side"];
-        width?: QDrawerProps["width"];
-        bordered?: QDrawerProps["bordered"];
-        overlay?: QDrawerProps["overlay"];
-        persistent?: QDrawerProps["persistent"];
-        class?: string | null | undefined;
-        style?: string | null | undefined;
-        show?: ((e?: MouseEvent) => void) | undefined;
-        hide?: (() => void) | undefined;
-        toggle?: ((e?: MouseEvent) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QDrawerProps_ = typeof __propDef.props;
-export { QDrawerProps_ as QDrawerProps };
-export type QDrawerEvents = typeof __propDef.events;
-export type QDrawerSlots = typeof __propDef.slots;
-export default class QDrawer extends SvelteComponent<QDrawerProps, QDrawerEvents, QDrawerSlots> {
-    get show(): any;
-    get hide(): any;
-    get toggle(): any;
-}
+declare const QDrawer: import("svelte").Component<QDrawerProps, {
+    show: (e?: MouseEvent) => void;
+    hide: () => void;
+    toggle: (e?: MouseEvent) => void;
+}, "value">;
+export default QDrawer;

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 26351a76f5e5bdaa4daf1a4319e1d206
+// @quaffHash f39265baa2de427fc47e65c2f0088cb9
 export const QDrawerDocsProps = [
     {
         name: "value",
@@ -19,9 +19,9 @@ export const QDrawerDocsProps = [
     },
     {
         name: "width",
-        type: "number | CssValue",
+        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,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";
@@ -17,7 +17,7 @@ export interface QDrawerProps extends NativeProps, HTMLAttributes<HTMLDivElement
      * 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

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,30 +1,69 @@
-<script>import { useSize } from "../../composables";
-import { createClasses, createStyles } from "../../utils";
-import { getContext } from "svelte";
-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, 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,
   );
-$:
-  style = createStyles(
-    {
-      height: !ctx && useSize(height).style
-    },
-    userStyles
+  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>
 
 {#if value}
-  <footer class={classes} {style}>
-    <nav>
-      <slot />
-    </nav>
+  <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"];
-        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;