@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

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

@@ -1,156 +1,65 @@
-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: "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",
-    },
-];
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c7e68dd893416b7e3508993a5828962d
 export const QDialogDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "value",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "The value indicating whether the dialog is visible or hidden.",
         default: "true",
     },
     {
-        name: "noBtn",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Wether the dialog should have a trigger button or not.",
-        default: "false",
-    },
-    {
-        name: "btnContent",
-        type: "string",
-        optional: true,
-        clickableType: false,
-        description: "The content to be displayed on the dialog button.",
-        default: "undefined",
-    },
-    {
-        name: "btnAttrs",
-        type: "QBtnProps",
-        optional: true,
-        clickableType: false,
-        description: "Additional attributes for the dialog button.",
-        default: "{}",
-    },
-    {
+        isSnippet: false,
         name: "position",
-        type: "QDialogPositionOptions",
-        optional: true,
-        clickableType: true,
+        type: {
+            name: "QDialogPositionOptions",
+            isClickable: true,
+        },
         description: "The position of the dialog relative to the viewport.",
         default: '"default"',
     },
     {
-        name: "modal",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "modal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the dialog is displayed as a modal or not.",
         default: "false",
     },
     {
-        name: "fullscreen",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "fullscreen",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Determines whether the dialog is displayed in fullscreen mode.",
         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 dialog remains persistent, not closing on click outside.",
         default: "false",
     },
 ];
+export const QDialogDocsSnippets = [];

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

@@ -1,27 +1,12 @@
-import type { NativeProps } from "../../utils/types";
-import type { QBtnProps } from "../button/props";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";
-export interface QDialogProps extends NativeProps {
+export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElement> {
     /**
      * The value indicating whether the dialog is visible or hidden.
      * @default true
      */
-    value: boolean;
-    /**
-     * Wether the dialog should have a trigger button or not.
-     * @default false
-     */
-    noBtn?: boolean;
-    /**
-     * The content to be displayed on the dialog button.
-     * @default undefined
-     */
-    btnContent?: string;
-    /**
-     * Additional attributes for the dialog button.
-     * @default {}
-     */
-    btnAttrs?: QBtnProps;
+    value?: boolean;
     /**
      * The position of the dialog relative to the viewport.
      * @default "default"

package/dist/components/drawer/QDrawer.scss

@@ -0,0 +1,39 @@
+@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;
+
+  &.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,99 +1,147 @@
-<script>import { navigating } from "$app/stores";
-import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
-import { clickOutside } from "../../helpers";
-import { useSize } from "../../composables/use-size";
-import { derived } from "svelte/store";
-export let value = true, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  canHideOnClickOutside = value === true && persistent === false || overlay === true;
-$:
-  belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
-  1300 <= breakpoint;
-$:
-  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 && canHideOnClickOutside === 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
-    }
+<script lang="ts">
+  import { getContext, onDestroy, onMount, untrack } from "svelte";
+  import { navigating } from "$app/state";
+  import { useSize } from "../../composables";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { QLayoutCtxName } from "../../utils";
+  import type { QLayoutProps } from "../layout/props";
+  import type { DrawerContext } from "../layout/QLayout.svelte";
+  import type { QDrawerProps } from "./props";
+
+  let {
+    value = $bindable(false),
+    side = "left",
+    width = 300,
+    bordered = false,
+    overlay = false,
+    persistent = false,
+    children,
+    ...props
+  }: QDrawerProps = $props();
+
+  let drawerEl = $state<HTMLDivElement>();
+
+  const drawerContext = QContext.get<DrawerContext>(
+    QLayoutCtxName.drawer[side],
   );
-$:
-  style = createStyles(
-    {
-      [side === "left" ? "--leftDrawerWidth" : "--rightDrawerWidth"]: widthStyle
-    },
-    userStyles
+  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
+    QLayoutCtxName.view,
   );
-$:
-  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"
-      }
-    );
+
+  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?: MouseEvent) => {
+    if (!value) {
+      value = true;
+      e?.stopPropagation();
+    }
+  };
+
+  export const hide = () => {
+    if (value) {
+      value = false;
+    }
+  };
+
+  export const toggle = (e?: MouseEvent) => {
+    value = !value;
+    e?.stopPropagation();
+  };
+
+  onMount(() => {
+    setTimeout(() => {
+      if (drawerEl) {
+        drawerEl.style.transition = "top 0.3s, bottom 0.3s, transform 0.3s";
       }
+    }, 100);
+
+    return () => {
+      window.removeEventListener("click", tryClose);
+    };
+  });
+
+  $effect(() => {
+    if (navigating.type && hideOnRouteChange) {
+      hide();
+    }
+  });
+
+  $effect(() => {
+    if (value) {
+      setTimeout(() => {
+        window.addEventListener("click", tryClose);
+      }, 150);
+    } else {
+      window.removeEventListener("click", tryClose);
     }
   });
+
+  onDestroy(() => {
+    drawerContext?.updateEntries({
+      width: 0,
+      takesSpace: false,
+      ready: false,
+    });
+  });
+
+  $effect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    [value, overlay, width];
+
+    untrack(() =>
+      drawerContext?.updateEntries({
+        takesSpace: !!value && !overlay,
+        width,
+        ready: true,
+      }),
+    );
+  });
+
+  const widthStyle = $derived(!drawerContext ? useSize(width).style : null);
+
+  const drawerWidthStyle = $derived(
+    widthStyle === null ? "" : `--${side}-drawer-width: ${widthStyle};`,
+  );
+
+  const style = $derived(`${drawerWidthStyle}${props.style ?? ""}`);
+
+  function tryClose(e: MouseEvent) {
+    const isTargetDrawer = e.target === drawerEl;
+    const isTargetInsideDrawer = drawerEl?.contains(e.target as Node);
+
+    if (canHideOnClickOutside && !isTargetDrawer && !isTargetInsideDrawer) {
+      e.stopPropagation();
+      hide();
+    }
+  }
 </script>
 
-<div use:clickOutside={hide} class={classes} {style} {...$$restProps}>
-  <slot />
+<div
+  bind:this={drawerEl}
+  {...props}
+  class={[
+    "q-drawer",
+    props.class,
+    `q-drawer--${side}`,
+    value && "q-drawer--active",
+    overlay && "q-drawer--overlay",
+    bordered && "q-drawer--bordered",
+    offsetTop && "q-drawer--offset-top",
+    offsetBottom && "q-drawer--offset-bottom",
+  ]}
+  {style}
+  data-quaff
+>
+  {@render children?.()}
 </div>

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

@@ -1,40 +1,21 @@
-import { SvelteComponent } from "svelte";
-import type { QDrawerProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        value?: QDrawerProps["value"];
-        side?: QDrawerProps["side"];
-        width?: QDrawerProps["width"];
-        breakpoint?: QDrawerProps["breakpoint"];
-        showIfAbove?: QDrawerProps["showIfAbove"];
-        behavior?: QDrawerProps["behavior"];
-        bordered?: QDrawerProps["bordered"];
-        elevated?: QDrawerProps["elevated"];
-        overlay?: QDrawerProps["overlay"];
-        persistent?: QDrawerProps["persistent"];
-        noSwipeOpen?: QDrawerProps["noSwipeOpen"];
-        noSwipeClose?: QDrawerProps["noSwipeClose"];
-        noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
-        class?: string | undefined;
-        style?: string | undefined;
-        show?: ((e?: MouseEvent) => void) | undefined;
-        hide?: (() => void) | undefined;
-        toggle?: ((e?: MouseEvent) => void) | undefined;
+        show?: (e?: MouseEvent) => void;
+        hide?: () => void;
+        toggle?: (e?: MouseEvent) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 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;
+export default class QDrawer extends SvelteComponentTyped<QDrawerProps_, QDrawerEvents, QDrawerSlots> {
+    get show(): (e?: MouseEvent) => void;
+    get hide(): () => void;
+    get toggle(): (e?: MouseEvent) => void;
 }

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

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

package/dist/components/drawer/docs.js

@@ -1,10 +1,10 @@
-import { QDrawerDocsProps } from "./docs.props";
-export let QDrawerDocs = {
+import { QDrawerDocsProps, QDrawerDocsSnippets } from "./docs.props";
+export const QDrawerDocs = {
     name: "QDrawer",
     description: "Navigation drawers provide ergonomic access to destinations in an app",
     docs: {
         props: QDrawerDocsProps,
-        slots: [],
+        snippets: QDrawerDocsSnippets,
         methods: [],
         events: [],
     },

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

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