@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/dialog/QDialog.svelte

@@ -1,80 +1,87 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
-import QBtn from "../button/QBtn.svelte";
-import { clickOutsideDialog } from "../../helpers";
-export let value = true, noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
-export { userClasses as class };
-const emit = createEventDispatcher();
-let dialogElement;
-$:
-  canHideOnClickOutside = value === true && persistent !== true;
-$:
-  positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
-$:
-  classes = createClasses([
-    "q-dialog",
-    value && "active",
-    positionClass,
-    modal && "modal",
-    fullscreen && "max",
-    userClasses
-  ]);
-$:
-  value === true ? modal ? dialogElement?.showModal() : dialogElement?.show() : dialogElement?.close();
-export function hide() {
-  if (value === true) {
-    value = false;
+<script lang="ts">
+  let {
+    value = $bindable(false),
+    position = "default",
+    modal = false,
+    fullscreen = false,
+    persistent = false,
+    children,
+    ...props
+  } = $props();
+  let dialogEl;
+  const canHide = $derived(value && !persistent);
+  $effect(() => {
+    if (value) {
+      dialogEl?.[modal ? "showModal" : "show"]();
+      setTimeout(() => {
+        window.addEventListener("click", tryCancel);
+      }, 150);
+    } else {
+      dialogEl?.close();
+      window.removeEventListener("click", tryCancel);
+    }
+  });
+  export function hide() {
+    if (dialogEl.open) {
+      value = false;
+    }
   }
-}
-export function show() {
-  if (value === false) {
-    value = true;
+  export function show() {
+    if (!dialogEl.open) {
+      value = true;
+    }
   }
-}
-export function toggle(e) {
-  value = !value;
-  e.stopPropagation();
-}
-function addAnimation() {
-  if (persistent && value === true) {
-    dialogElement?.classList.add("animating");
-    setTimeout(() => {
-      dialogElement?.classList.remove("animating");
-    }, 150);
+  export function toggle() {
+    if (dialogEl.open) {
+      hide();
+    } else {
+      show();
+    }
   }
-}
-function handleKeyboardHide(e) {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
-    e.preventDefault();
+  function addAnimation() {
+    if (persistent && value) {
+      dialogEl.classList.add("q-dialog--animating");
+      setTimeout(() => {
+        dialogEl.classList.remove("q-dialog--animating");
+      }, 150);
+    }
   }
-}
-function handleClickHide() {
-  if (canHideOnClickOutside) {
-    hide();
-  } else {
-    addAnimation();
+  function handleClickInside(e) {
+    e.stopPropagation();
+  }
+  function onkeydown(e) {
+    if (e.key === "Escape") {
+      tryCancel(e);
+    }
+  }
+  function tryCancel(e) {
+    if (canHide) {
+      hide();
+    } else {
+      addAnimation();
+      e.preventDefault();
+    }
   }
-}
 </script>
 
-{#if noBtn === false}
-  <QBtn {...btnAttrs} on:click={toggle} on:click={(event) => emit("btnClick", event)}>
-    <slot name="button">
-      {btnContent || ""}
-    </slot>
-  </QBtn>
-{/if}
-
 <dialog
-  use:clickOutsideDialog={handleClickHide}
-  class={classes}
-  open={value}
-  {...$$restProps}
-  bind:this={dialogElement}
-  on:cancel={handleKeyboardHide}
+  bind:this={dialogEl}
+  {...props}
+  class="q-dialog{props.class ? ` ${props.class}` : ''}{[
+    'top',
+    'right',
+    'bottom',
+    'left',
+  ].includes(position)
+    ? ` q-dialog--${position}`
+    : ''}"
+  class:q-dialog--active={value}
+  class:q-dialog--fullscreen={fullscreen}
+  class:q-dialog--modal={modal}
+  onclick={handleClickInside}
+  oncancel={tryCancel}
+  {onkeydown}
+  aria-hidden={!value || undefined}
 >
-  <slot />
+  {@render children?.()}
 </dialog>

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -1,37 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type { QDialogProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: boolean | undefined;
-        noBtn?: QDialogProps["noBtn"];
-        btnContent?: QDialogProps["btnContent"];
-        btnAttrs?: QDialogProps["btnAttrs"];
-        position?: QDialogProps["position"];
-        modal?: QDialogProps["modal"];
-        fullscreen?: QDialogProps["fullscreen"];
-        persistent?: QDialogProps["persistent"];
-        class?: string | undefined;
-        hide?: (() => void) | undefined;
-        show?: (() => void) | undefined;
-        toggle?: ((e: MouseEvent) => void) | undefined;
-    };
-    events: {
-        btnClick: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        button: {};
-        default: {};
-    };
-};
-type QDialogProps_ = typeof __propDef.props;
-export { QDialogProps_ as QDialogProps };
-export type QDialogEvents = typeof __propDef.events;
-export type QDialogSlots = typeof __propDef.slots;
-export default class QDialog extends SvelteComponent<QDialogProps, QDialogEvents, QDialogSlots> {
-    get hide(): any;
-    get show(): any;
-    get toggle(): any;
-}
+declare const QDialog: import("svelte").Component<QDialogProps, {
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+}, "value">;
+export default QDialog;

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

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

package/dist/components/dialog/docs.js

@@ -1,5 +1,5 @@
 import { QDialogDocsProps } from "./docs.props";
-export let QDialogDocs = {
+export const QDialogDocs = {
     name: "QDialog",
     description: "Dialogs provide important prompts in a user flow.",
     docs: {

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

@@ -1,11 +1,3 @@
-export declare const QBtnDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
 export declare const QDialogDocsProps: {
     name: string;
     type: string;

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

@@ -1,117 +1,13 @@
-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: "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 a93df4aad7eee70fe7022c2eb26b6ef5
 export const QDialogDocsProps = [
     {
         name: "value",
         type: "boolean",
-        optional: true,
+        optional: false,
         clickableType: false,
         description: "The value indicating whether the dialog is visible or hidden.",
-        default: "false",
-    },
-    {
-        name: "noBtn",
-        type: "boolean",
-        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: "{}",
+        default: "true",
     },
     {
         name: "position",

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;
     /**
      * 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,87 +1,97 @@
-<script>import { navigating } from "$app/stores";
-import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
-import { clickOutside } from "../../helpers";
-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 === void 0 ? isNaN(Number(width)) ? width : `${width}px` : void 0;
-$:
-  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");
-function prepareZIndexClass(context, overlayProp, sideProp) {
-  let drawer = sideProp === "left" ? context.drawerLeft : context.drawerRight;
-  let pos;
-  for (pos of ["top", "bottom"]) {
-    if (!drawer.offset[pos] && overlayProp) {
-      drawer.overlay = true;
-      return "above";
+<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";
+  });
+  export const show = (e) => {
+    if (!value) {
+      value = true;
+      e?.stopPropagation();
     }
-  }
-}
-let drawerType;
-$:
-  drawerType = side === "left" ? "drawerLeft" : "drawerRight";
-$:
-  classes = createClasses([
-    "q-drawer",
-    "surface",
-    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",
-    getBorderRadiusClasses(side, overlay, $ctx),
-    $ctx && prepareZIndexClass($ctx, overlay, side),
-    userClasses
-  ]);
-$:
-  style = createStyles(
-    {
-      [side === "left" ? "--leftDrawerWidth" : "--rightDrawerWidth"]: widthStyle
-    },
-    userStyles
-  );
-function getBorderRadiusClasses(sideProp, overlayProp, context) {
-  let prefix = "border-radius" + (sideProp === "left" ? "__right" : "__left");
+  };
+  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) => {
-    if (!context)
-      return void 0;
-    let appbarEl = pos === "top" ? context["header"] : context["footer"];
-    if (appbarEl && appbarEl.display && !context[drawerType].offset[pos] && !overlayProp)
-      return void 0;
-    return `${prefix}--${pos}`;
+    const appBarEl = pos === "top" ? ctx?.value?.header : ctx?.value?.footer;
+    return overlay || !appBarEl?.display || drawerCtx?.offset[pos];
   };
-  return createClasses([shouldHaveRadius("top"), shouldHaveRadius("bottom")]);
-}
+  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 use:clickOutside={hide} class={classes} {style}>
-  <slot />
+<div
+  {...props}
+  use:clickOutside={() => canHideOnClickOutside && hide()}
+  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}
+>
+  {@render children?.()}
 </div>

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

@@ -1,39 +1,7 @@
-import { SvelteComponent } from "svelte";
 import type { QDrawerProps } from "./props";
-declare const __propDef: {
-    props: {
-        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;
-    };
-    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.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,5 +1,5 @@
 import { QDrawerDocsProps } from "./docs.props";
-export let QDrawerDocs = {
+export const QDrawerDocs = {
     name: "QDrawer",
     description: "Navigation drawers provide ergonomic access to destinations in an app",
     docs: {