@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta12

package/dist/components/button/QBtn.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { QCircularProgress, QIcon } from "../..";
-  import { useSize } from "../../composables";
+  import { useColor, useSize } from "../../composables";
   import { ripple } from "../../helpers";
   import { isActivationKey, extractImgSrc, type QEvent } from "../../utils";
   import type { MaterialSymbol } from "material-symbols";
   import type { QBtnProps, QBtnVariantOptions } from "./props";
 
+  type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
+
+  // #region:    --- Props
   let {
     disabled = false,
     variant,
+    color,
     filled = false,
     tonal = false,
     outlined = false,
@@ -25,27 +29,30 @@
     unelevated = false,
     size = "md",
     target,
+    tag,
     onclick,
     children,
     ...props
   }: QBtnProps = $props();
+  // #endregion: --- Props
 
-  let qBtn: HTMLButtonElement | HTMLAnchorElement;
+  // #region:    --- Non-reactive variables
+  let qBtn: HTMLElement;
   let qBtnLabel: HTMLSpanElement;
+  // #endregion: --- Non-reactive variables
 
-  type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
-
-  const tag = $derived(to ? "a" : "button");
+  // #region:    --- Derived values
+  const computedTag = $derived(to ? "a" : tag || "button");
   const qSize = $derived(useSize(size, "q-btn"));
 
   const src = $derived(extractImgSrc(icon));
 
-  const variants: Partial<Record<QBtnVariantOptions, boolean>> = {
+  const variants: Partial<Record<QBtnVariantOptions, boolean>> = $derived({
     filled,
     tonal,
     outlined,
     flat,
-  };
+  });
 
   const boolVariant = $derived(
     (Object.keys(variants) as QBtnVariantOptions[]).find(
@@ -57,11 +64,15 @@
     variant || boolVariant || "elevated",
   );
 
-  const color = $derived.by(() => {
+  const computedColor = $derived.by(() => {
     if (disabled) {
       return undefined;
     }
 
+    if (color) {
+      return color;
+    }
+
     if (finalVariant === "filled") {
       return "on-primary";
     }
@@ -73,12 +84,25 @@
     return "primary";
   });
 
-  const colorVar = $derived(color && `var(--${color})`);
+  const colorVar = $derived(computedColor && `var(--${computedColor})`);
 
   const rippleColorVar = $derived(
-    rippleColor ? `var(--${rippleColor}, ${rippleColor})` : colorVar,
+    rippleColor ? useColor(rippleColor) : colorVar,
   );
+  // #endregion: --- Derived values
 
+  // #region:    --- Lifecycle
+  onMount(() => {
+    const { width, height } = qBtnLabel.getBoundingClientRect();
+
+    // This is required for buttons with no label and with a tooltip to be round
+    if (width === 0 && height === 0) {
+      qBtn.classList.add("q-btn--round");
+    }
+  });
+  // #endregion: --- Lifecycle
+
+  // #region:    --- Functions
   function stopIfDisabled(e: QBtnMouseEvent) {
     if (disabled) {
       e.preventDefault();
@@ -106,19 +130,11 @@
     }) as QBtnMouseEvent;
     stopIfDisabled(click);
   }
-
-  onMount(() => {
-    const { width, height } = qBtnLabel.getBoundingClientRect();
-
-    // This is required for buttons with no label and with a tooltip to be round
-    if (width === 0 && height === 0) {
-      qBtn.classList.add("q-btn--round");
-    }
-  });
+  // #endregion: --- Functions
 </script>
 
 <svelte:element
-  this={tag}
+  this={computedTag}
   bind:this={qBtn}
   use:ripple={{
     disabled: noRipple || disabled,
@@ -138,9 +154,9 @@
   style:--ripple-color={colorVar}
   {target}
   href={to}
-  role={tag === "a" ? "button" : undefined}
+  role={computedTag === "a" ? "button" : undefined}
   aria-disabled={disabled || undefined}
-  tabindex={disabled ? -1 : 0}
+  tabindex={disabled ? -1 : props.tabindex || 0}
   {onkeydown}
   onclick={stopIfDisabled}
   data-quaff

package/dist/components/button/QBtn.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QBtnProps_ = typeof __propDef.props;
-export { QBtnProps_ as QBtnProps };
-export type QBtnEvents = typeof __propDef.events;
-export type QBtnSlots = typeof __propDef.slots;
-export default class QBtn extends SvelteComponentTyped<QBtnProps_, QBtnEvents, QBtnSlots> {
-}
+import type { QBtnProps } from "./props";
+declare const QBtn: import("svelte").Component<QBtnProps, {}, "">;
+type QBtn = ReturnType<typeof QBtn>;
+export default QBtn;

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

@@ -8,9 +8,12 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Sets the color of the button. If a color is specified, it overwrites all other color variants defined with boolean attributes.
+     */
+    color?: string;
     /**
      * Choose the variant for the button. If a variant is specified, it overwrites all other variants defined with boolean attributes. If no variant is specified using this prop or boolean props, the `elevated` variant will be used.
-     * @default undefined
      */
     variant?: QBtnVariantOptions;
     /**
@@ -88,9 +91,13 @@ export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
      * @default undefined
      */
     target?: HTMLAnchorAttributes["target"];
+    /**
+     * The tag to use for the button. If not specified, a button element will be used or, if `to` is specified, an anchor tag will be used.
+     */
+    tag?: keyof HTMLElementTagNameMap;
     /**
      * This event is emitted when the button is clicked.
      * @default undefined
      */
-    onclick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    onclick?: MouseEventHandler<HTMLElement>;
 }

package/dist/components/card/QCard.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  import type { QCardProps } from "./props";
+  import type { QCardProps, QCardFillColors } from "./props";
 
+  // #region:    --- Props
   let {
     fill = false,
     flat = false,
@@ -9,24 +10,27 @@
     children,
     ...props
   }: QCardProps = $props();
+  // #endregion: --- Props
 
-  type ColorOptions = "primary" | "secondary" | "tertiary";
-
-  const colorOptions: ColorOptions[] = [
+  // #region:    --- Non-reactive variables
+  const colorOptions: QCardFillColors[] = [
     "primary",
     "secondary",
     "tertiary",
   ] as const;
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Derived values
   const color = $derived.by(() => {
     if (fill) {
-      return fill === true || !colorOptions.includes(fill as ColorOptions)
+      return fill === true || !colorOptions.includes(fill as QCardFillColors)
         ? "surface-variant"
         : fill;
     }
 
     return "surface";
   });
+  // #endregion: --- Derived values
 </script>
 
 <article

package/dist/components/card/QCard.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCardProps_ = typeof __propDef.props;
-export { QCardProps_ as QCardProps };
-export type QCardEvents = typeof __propDef.events;
-export type QCardSlots = typeof __propDef.slots;
-export default class QCard extends SvelteComponentTyped<QCardProps_, QCardEvents, QCardSlots> {
-}
+import type { QCardProps } from "./props";
+declare const QCard: import("svelte").Component<QCardProps, {}, "">;
+type QCard = ReturnType<typeof QCard>;
+export default QCard;

package/dist/components/card/QCardActions.svelte

@@ -2,14 +2,18 @@
   import { useAlign } from "../../composables";
   import type { QCardActionsProps } from "./props";
 
+  // #region:    --- Props
   let {
     align,
     vertical = false,
     children,
     ...props
   }: QCardActionsProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const alignClass = $derived(useAlign(align));
+  // #endregion: --- Derived values
 </script>
 
 <nav

package/dist/components/card/QCardActions.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCardActionsProps_ = typeof __propDef.props;
-export { QCardActionsProps_ as QCardActionsProps };
-export type QCardActionsEvents = typeof __propDef.events;
-export type QCardActionsSlots = typeof __propDef.slots;
-export default class QCardActions extends SvelteComponentTyped<QCardActionsProps_, QCardActionsEvents, QCardActionsSlots> {
-}
+import type { QCardActionsProps } from "./props";
+declare const QCardActions: import("svelte").Component<QCardActionsProps, {}, "">;
+type QCardActions = ReturnType<typeof QCardActions>;
+export default QCardActions;

package/dist/components/card/QCardSection.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { QCardSectionProps } from "./props";
 
+  // #region:    --- Props
   let { horizontal = false, children, ...props }: QCardSectionProps = $props();
+  // #endregion: --- Props
 </script>
 
 <div

package/dist/components/card/QCardSection.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCardSectionProps_ = typeof __propDef.props;
-export { QCardSectionProps_ as QCardSectionProps };
-export type QCardSectionEvents = typeof __propDef.events;
-export type QCardSectionSlots = typeof __propDef.slots;
-export default class QCardSection extends SvelteComponentTyped<QCardSectionProps_, QCardSectionEvents, QCardSectionSlots> {
-}
+import type { QCardSectionProps } from "./props";
+declare const QCardSection: import("svelte").Component<QCardSectionProps, {}, "">;
+type QCardSection = ReturnType<typeof QCardSection>;
+export default QCardSection;

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
   import type { QCheckboxProps } from "./props";
 
+  // #region:    --- Props
   let {
     value = $bindable(),
     label = "",
-    disable = false,
+    disabled = false,
     ...props
   }: QCheckboxProps = $props();
+  // #endregion: --- Props
 </script>
 
 <label
   {...props}
-  class={["q-checkbox", props.class, disable && "q-checkbox--disabled"]}
-  aria-disabled={disable || undefined}
+  class={["q-checkbox", props.class, disabled && "q-checkbox--disabled"]}
+  aria-disabled={disabled || undefined}
   data-quaff
 >
-  <input type="checkbox" bind:checked={value} disabled={disable} />
+  <input type="checkbox" bind:checked={value} {disabled} />
   <span>{label}</span>
 </label>

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCheckboxProps_ = typeof __propDef.props;
-export { QCheckboxProps_ as QCheckboxProps };
-export type QCheckboxEvents = typeof __propDef.events;
-export type QCheckboxSlots = typeof __propDef.slots;
-export default class QCheckbox extends SvelteComponentTyped<QCheckboxProps_, QCheckboxEvents, QCheckboxSlots> {
-}
+import type { QCheckboxProps } from "./props";
+declare const QCheckbox: import("svelte").Component<QCheckboxProps, {}, "value">;
+type QCheckbox = ReturnType<typeof QCheckbox>;
+export default QCheckbox;

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

@@ -13,5 +13,5 @@ export interface QCheckboxProps extends HTMLAttributes<HTMLLabelElement> {
      * Puts the checkbox in a disabled state, making it unclickable.
      * @default false
      */
-    disable?: boolean;
+    disabled?: boolean;
 }

package/dist/components/chip/QChip.scss

@@ -19,6 +19,8 @@
     cursor: pointer;
     user-select: none;
 
+    isolation: isolate;
+
     @include mixins.typography(label-large);
 
     &::before {
@@ -77,7 +79,7 @@
     }
 
     &.q-chip--outlined {
-      outline: 1px solid var(--outline);
+      outline: 1px solid var(--outline-variant);
 
       &:focus:not([aria-disabled]) {
         outline-color: var(--secondary);

package/dist/components/chip/QChip.svelte

@@ -7,23 +7,43 @@
 
   type QChipMouseEvent = QEvent<MouseEvent, HTMLElement>;
 
+  // #region:    --- Props
   let {
     kind = "assist",
+    selected = $bindable(kind === "filter" ? false : undefined),
     label,
     icon,
     trailingIcon,
     disabled = false,
     elevated,
     noRipple = false,
-    selected = $bindable(kind === "filter" ? false : undefined),
     size = "sm",
     onTrailingIconClick,
     children,
     ...props
   }: QChipProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   let qChip: HTMLDivElement;
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Derived values
+  const trailing = $derived(
+    (kind === "assist" || kind === "suggestion") && trailingIcon
+      ? undefined
+      : trailingIcon,
+  );
+
+  const tabindex = disabled ? -1 : props.tabindex || 0;
+  const role = $derived(
+    ["assist", "filter"].includes(kind) ? "button" : undefined,
+  );
+
+  const avatar = $derived(extractImgSrc(icon));
+  // #endregion: --- Derived values
 
+  // #region:    --- Effects
   $effect.pre(() => {
     if (selected !== undefined && kind !== "filter") {
       throw new Error(
@@ -37,20 +57,9 @@
       );
     }
   });
+  // #endregion: --- Effects
 
-  const trailing = $derived(
-    (kind === "assist" || kind === "suggestion") && trailingIcon
-      ? undefined
-      : trailingIcon,
-  );
-
-  const tabindex = disabled ? -1 : props.tabindex || 0;
-  const role = $derived(
-    ["assist", "filter"].includes(kind) ? "button" : undefined,
-  );
-
-  const avatar = $derived(extractImgSrc(icon));
-
+  // #region:    --- Functions
   function stopIfDisabled(e: QChipMouseEvent, iconClick = false) {
     if (disabled) {
       e.preventDefault();
@@ -87,6 +96,7 @@
     }) as QChipMouseEvent;
     stopIfDisabled(click);
   }
+  // #endregion: --- Functions
 </script>
 
 <div

package/dist/components/chip/QChip.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QChipProps_ = typeof __propDef.props;
-export { QChipProps_ as QChipProps };
-export type QChipEvents = typeof __propDef.events;
-export type QChipSlots = typeof __propDef.slots;
-export default class QChip extends SvelteComponentTyped<QChipProps_, QChipEvents, QChipSlots> {
-}
+import type { QChipProps } from "./props";
+declare const QChip: import("svelte").Component<QChipProps, {}, "selected">;
+type QChip = ReturnType<typeof QChip>;
+export default QChip;

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -3,6 +3,7 @@
   import { copy } from "../../utils";
   import type { QCodeBlockProps } from "./props";
 
+  // #region:    --- Props
   let {
     language,
     lightTheme = "github-light-default",
@@ -12,12 +13,16 @@
     copiable,
     ...props
   }: QCodeBlockProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let btnContent = $state("Copy");
   let btnColor = $state("primary");
 
   let html = $state("");
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Effects
   $effect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     Quaff.darkMode.isActive;
@@ -25,7 +30,9 @@
     // This is required to have the html updated when the code changes
     getHtml(code);
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Functions
   function setBtn(type: "base" | "error" | "success") {
     switch (type) {
       case "error":
@@ -68,6 +75,7 @@
       html = `<pre>${code}</pre>`;
     }
   }
+  // #endregion: --- Functions
 </script>
 
 <div {...props} class="q-code-block" data-quaff>

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QCodeBlockProps_ = typeof __propDef.props;
-export { QCodeBlockProps_ as QCodeBlockProps };
-export type QCodeBlockEvents = typeof __propDef.events;
-export type QCodeBlockSlots = typeof __propDef.slots;
-export default class QCodeBlock extends SvelteComponentTyped<QCodeBlockProps_, QCodeBlockEvents, QCodeBlockSlots> {
-}
+import type { QCodeBlockProps } from "./props";
+declare const QCodeBlock: import("svelte").Component<QCodeBlockProps, {}, "">;
+type QCodeBlock = ReturnType<typeof QCodeBlock>;
+export default QCodeBlock;

package/dist/components/dialog/QDialog.scss

@@ -19,6 +19,11 @@
   max-height: 80%;
   overflow-x: hidden;
   overflow-y: auto;
+
+  &:has([data-quaff-overlay-root] > [data-quaff-overlay])[open] {
+    overflow: visible;
+  }
+
   transition:
     variables.$speed3 all,
     0s background-color;
@@ -157,6 +162,18 @@
   &--animating {
     animation: shake 0.15s;
   }
+
+  &__overlay-root {
+    position: absolute;
+    inset: 0;
+    overflow: visible;
+    z-index: 10001;
+    pointer-events: none;
+
+    > * {
+      pointer-events: auto;
+    }
+  }
 }
 
 @keyframes shake {

package/dist/components/dialog/QDialog.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { on } from "svelte/events";
   import type { QDialogProps } from "./props";
 
+  // #region:    --- Props
   let {
     value = $bindable(false),
     position = "default",
@@ -10,25 +12,39 @@
     children,
     ...props
   }: QDialogProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let dialogEl = $state<HTMLDialogElement>();
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Derived values
   const canHide = $derived(value && !persistent);
+  // #endregion: --- Derived values
 
+  // #region:    --- Effects
   $effect(() => {
-    if (value) {
-      dialogEl?.[modal ? "showModal" : "show"]();
-
-      setTimeout(() => {
-        window.addEventListener("click", tryCancel);
-      }, 150);
-    } else {
+    if (!value) {
       dialogEl?.close();
-
-      window.removeEventListener("click", tryCancel);
+      return;
     }
+
+    dialogEl?.[modal ? "showModal" : "show"]();
+
+    let removeClickListener: (() => void) | undefined;
+
+    const timeoutId = setTimeout(() => {
+      removeClickListener = on(window, "click", tryCancel);
+    }, 150);
+
+    return () => {
+      clearTimeout(timeoutId);
+      removeClickListener?.();
+    };
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Methods
   export function hide() {
     if (dialogEl?.open) {
       value = false;
@@ -48,7 +64,9 @@
       show();
     }
   }
+  // #endregion: --- Methods
 
+  // #region:    --- Functions
   function addAnimation() {
     if (persistent && value) {
       dialogEl?.classList.add("q-dialog--animating");
@@ -70,6 +88,11 @@
   }
 
   function tryCancel(e: Event) {
+    const target = e.target;
+    if (target instanceof Element && target.closest("[data-quaff-overlay]")) {
+      return;
+    }
+
     if (canHide) {
       hide();
     } else {
@@ -77,6 +100,7 @@
       e.preventDefault();
     }
   }
+  // #endregion: --- Functions
 </script>
 
 <dialog
@@ -98,4 +122,5 @@
   data-quaff
 >
   {@render children?.()}
+  <div class="q-dialog__overlay-root" data-quaff-overlay-root></div>
 </dialog>