@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

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

@@ -1,16 +1,5 @@
-export declare const QBreadcrumbsDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
-export declare const QBreadcrumbsElDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QBreadcrumbsDocsProps: ParsedProp[];
+export declare const QBreadcrumbsDocsSnippets: ParsedSnippet[];
+export declare const QBreadcrumbsElDocsProps: ParsedProp[];
+export declare const QBreadcrumbsElDocsSnippets: ParsedSnippet[];

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

@@ -1,84 +1,144 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 66c85971b241303d63478c8c8bca6aa0
 export const QBreadcrumbsDocsProps = [
     {
-        name: "separator",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
-        default: "/",
+        isSnippet: false,
+        name: "activeColor",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
+        default: '"primary"',
     },
     {
-        name: "gutter",
-        type: "QBreadcrumbsGutterOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "gutter",
+        type: {
+            name: "QBreadcrumbsGutterOptions",
+            isClickable: true,
+        },
         description: "Space around separators.",
-        default: "sm",
+        default: '"sm"',
     },
     {
-        name: "activeColor",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
-        default: "primary",
+        isSnippet: false,
+        name: "separator",
+        type: [
+            {
+                name: "string",
+                isClickable: false,
+            },
+            {
+                name: "`icon:${MaterialSymbol}`",
+                isClickable: false,
+            },
+            {
+                name: "Snippet",
+                isClickable: false,
+            },
+        ],
+        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
+        default: '"/"',
     },
     {
-        name: "separatorColor",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "separatorColor",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "Color to use for the separators. See <link to colors docs> to see what colors can be used.",
-        default: "outline",
+        default: '"outline"',
     },
 ];
+export const QBreadcrumbsDocsSnippets = [];
 export const QBreadcrumbsElDocsProps = [
     {
-        name: "label",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
-        default: '""',
+        isSnippet: false,
+        name: "activeClass",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Class to apply to the breadcrumb element when the route is active.",
+        default: '"active"',
     },
     {
-        name: "icon",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "icon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "Snippet",
+                isClickable: false,
+            },
+        ],
         description: "Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.",
         default: "undefined",
     },
     {
-        name: "tag",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Tag to use for the breadcrumb element.",
-        default: '"div"',
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
+        default: '""',
     },
     {
-        name: "to",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        isSnippet: false,
+        name: "href",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: 'Also makes the breadcrumb element 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: "href",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: 'Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
-        default: "undefined",
+        isSnippet: false,
+        name: "tag",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Tag to use for the breadcrumb element.",
+        default: '"div"',
     },
     {
-        name: "activeClass",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Class to apply to the breadcrumb element when the route is active.",
-        default: '"active"',
+        isSnippet: false,
+        name: "to",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
+        default: "undefined",
     },
 ];
+export const QBreadcrumbsElDocsSnippets = [];

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

@@ -1,38 +1,50 @@
-import type { NativeProps } from "../../utils/types";
-export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
-export interface QBreadcrumbsProps extends NativeProps {
+import type { MaterialSymbol } from "material-symbols";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type QBreadcrumbsGutterOptions = Exclude<Q.Size, "xs" | "xl">;
+export interface QBreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
-     * @default /
+     * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
+     * @default "primary"
      */
-    separator?: string;
+    activeColor?: string;
     /**
      * Space around separators.
-     * @default sm
+     * @default "sm"
      */
     gutter?: QBreadcrumbsGutterOptions;
     /**
-     * Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.
-     * @default primary
+     * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
+     * @default "/"
      */
-    activeColor?: string;
+    separator?: string | `icon:${MaterialSymbol}` | Snippet;
     /**
      * Color to use for the separators. See <link to colors docs> to see what colors can be used.
-     * @default outline
+     * @default "outline"
      */
     separatorColor?: string;
 }
-export interface QBreadcrumbsElProps extends NativeProps {
+export interface QBreadcrumbsElProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Class to apply to the breadcrumb element when the route is active.
+     * @default "active"
+     */
+    activeClass?: string;
+    /**
+     * Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
+     * @default undefined
+     */
+    icon?: MaterialSymbol | Snippet;
     /**
      * Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.
      * @default ""
      */
     label?: string;
     /**
-     * Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.
+     * Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
      * @default undefined
      */
-    icon?: string;
+    href?: string;
     /**
      * Tag to use for the breadcrumb element.
      * @default "div"
@@ -43,14 +55,4 @@ export interface QBreadcrumbsElProps extends NativeProps {
      * @default undefined
      */
     to?: string;
-    /**
-     * Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")
-     * @default undefined
-     */
-    href?: string;
-    /**
-     * Class to apply to the breadcrumb element when the route is active.
-     * @default "active"
-     */
-    activeClass?: string;
 }

package/dist/components/button/QBtn.scss

@@ -0,0 +1,136 @@
+@use "$css/mixins";
+@use "$css/variables";
+@use "$css/disabled";
+
+@layer q-btn {
+  .q-btn {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    margin: 0 0.5rem;
+    padding: 0 1.5rem;
+
+    box-sizing: content-box;
+    border: none;
+    outline: inherit;
+
+    background-color: transparent;
+    color: var(--ripple-color);
+
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: normal;
+
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+
+    transition:
+      variables.$speed3 transform,
+      variables.$speed3 border-radius,
+      variables.$speed3 padding;
+
+    @include mixins.btn-image;
+
+    $sizeMap: (
+      "sm": -1,
+      "md": 0,
+      "lg": 1,
+      "xl": 2,
+    );
+    @each $size, $val in $sizeMap {
+      &--#{$size} {
+        $dim: 2.5rem + 0.5 * $val;
+        height: $dim;
+        min-width: $dim;
+
+        border-radius: 1.25rem + 0.25 * $val;
+
+        font-size: 1rem + 0.125 * $val;
+
+        &.q-btn--round {
+          width: $dim;
+        }
+      }
+    }
+
+    &:not([aria-disabled]):hover::after {
+      @include mixins.overlay(var(--ripple-color), 0.08);
+    }
+
+    &:not([aria-disabled]):focus::after {
+      @include mixins.overlay(var(--ripple-color), 0.1);
+    }
+
+    &--elevated {
+      &:not(.q-btn--unelevated, [aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+
+      background-color: var(--surface-container-low);
+
+      // Surface tint overlay
+      &::before {
+        @include mixins.overlay(var(--surface-tint), 0.12);
+      }
+    }
+
+    &--filled {
+      background-color: var(--primary);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+    }
+
+    &--tonal {
+      background-color: var(--secondary-container);
+
+      &:hover:not([aria-disabled]) {
+        @include mixins.elevate(1, "bottom");
+      }
+    }
+
+    &--outlined {
+      outline: solid 0.0625rem var(--outline);
+
+      &:not([aria-disabled]):focus {
+        outline-color: var(--primary);
+      }
+    }
+
+    &--round {
+      border-radius: 50%;
+      padding: 0;
+    }
+
+    &--rectangle {
+      border-radius: 0.5rem;
+    }
+  }
+
+  .q-btn:not(.q-btn--round) > :is(.q-icon, .q-btn__img, .q-circular-progress) {
+    margin-left: -0.5rem;
+    margin-right: 0.5rem;
+    --size: 1.5rem;
+  }
+}
+
+// Disabled
+@layer q-btn--disabled {
+  .q-btn[aria-disabled] {
+    @include disabled.base();
+
+    &:not(.q-btn--outlined, .q-btn--flat) {
+      background-color: disabled.rest-color();
+    }
+
+    &.q-btn--outlined {
+      outline-color: disabled.rest-color();
+    }
+  }
+}

package/dist/components/button/QBtn.svelte

@@ -1,73 +1,177 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher, onMount } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { useSize } from "../../composables/use-size";
-import { isActivationKey } from "../../utils/events";
-import { ripple } from "../../helpers/ripple";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
-export { userClasses as class };
-let qBtn;
-let tag;
-$:
-  tag = to !== void 0 ? "a" : "button";
-$:
-  sizeObj = useSize(size);
-$:
-  classes = createClasses(
-    [
-      unelevated && "unelevated",
-      rectangle && "rectangle",
-      outline && "outlined",
-      flat && "flat",
-      (!$$slots.default && !label || round) && "round",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-btn",
-      userClasses
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { QCircularProgress, QIcon } from "../..";
+  import { 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";
+
+  let {
+    disabled = false,
+    variant,
+    filled = false,
+    tonal = false,
+    outlined = false,
+    flat = false,
+    icon,
+    label,
+    loading = false,
+    rectangle = false,
+    noRipple = false,
+    rippleColor,
+    round = false,
+    to,
+    unelevated = false,
+    size = "md",
+    target,
+    onclick,
+    children,
+    ...props
+  }: QBtnProps = $props();
+
+  let qBtn: HTMLButtonElement | HTMLAnchorElement;
+  let qBtnLabel: HTMLSpanElement;
+
+  type QBtnMouseEvent = QEvent<MouseEvent, typeof qBtn>;
+
+  const tag = $derived(to ? "a" : "button");
+  const qSize = $derived(useSize(size, "q-btn"));
+
+  const src = $derived(extractImgSrc(icon));
+
+  const variants: Partial<Record<QBtnVariantOptions, boolean>> = {
+    filled,
+    tonal,
+    outlined,
+    flat,
+  };
+
+  const boolVariant = $derived(
+    (Object.keys(variants) as QBtnVariantOptions[]).find(
+      (key) => variants[key],
+    ),
+  );
+
+  const finalVariant = $derived<QBtnVariantOptions>(
+    variant || boolVariant || "elevated",
+  );
+
+  const color = $derived.by(() => {
+    if (disabled) {
+      return undefined;
     }
+
+    if (finalVariant === "filled") {
+      return "on-primary";
+    }
+
+    if (finalVariant === "tonal") {
+      return "on-secondary-container";
+    }
+
+    return "primary";
+  });
+
+  const colorVar = $derived(color && `var(--${color})`);
+
+  const rippleColorVar = $derived(
+    rippleColor ? `var(--${rippleColor}, ${rippleColor})` : colorVar,
   );
-function onKeyDown(e) {
-  if (!isActivationKey(e))
-    return;
-  e.preventDefault();
-  let click = new MouseEvent("click");
-  qBtn.dispatchEvent(click);
-}
+
+  function stopIfDisabled(e: QBtnMouseEvent) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    onclick?.(e);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      qBtn?.blur();
+      return;
+    }
+
+    if (!isActivationKey(e)) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const click = new MouseEvent("click", {
+      relatedTarget: qBtn,
+    }) 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");
+    }
+  });
 </script>
 
 <svelte:element
   this={tag}
   bind:this={qBtn}
-  use:ripple
-  role={tag === "a" ? "button" : undefined}
+  use:ripple={{
+    disabled: noRipple || disabled,
+    color: rippleColorVar,
+  }}
+  {...props}
+  class={[
+    "q-btn",
+    qSize.class,
+    props.class,
+    `q-btn--${finalVariant}`,
+    unelevated && "q-btn--unelevated",
+    rectangle && "q-btn--rectangle",
+    (round || (!children && !label)) && "q-btn--round",
+  ]}
+  style:--q-btn-size={qSize.style}
+  style:--ripple-color={colorVar}
+  {target}
   href={to}
-  class={classes}
-  aria-disabled={disable || undefined}
-  tabindex={disable ? -1 : 0}
-  on:click
-  on:keydown={onKeyDown}
-  {...$$restProps}
+  role={tag === "a" ? "button" : undefined}
+  aria-disabled={disabled || undefined}
+  tabindex={disabled ? -1 : 0}
+  {onkeydown}
+  onclick={stopIfDisabled}
+  data-quaff
 >
   {#if icon && !loading}
-    {#if icon.startsWith("img:")}
+    {#if src}
       <img
-        src={icon.replace("img:", "")}
+        {src}
+        alt="q-btn leading icon"
         class="q-btn__img q-btn__img--responsive"
-        alt="{label || 'Slotted'} button"
       />
     {:else}
-      <QIcon name={icon} class="q-btn__icon" />
+      <QIcon name={icon as MaterialSymbol} {color} class="q-btn__icon" {size} />
     {/if}
   {/if}
 
   {#if loading}
-    <QCircularProgress indeterminate class="q-btn__loader" />
+    <QCircularProgress
+      indeterminate
+      trackColor="transparent"
+      {color}
+      size="1.5em"
+      class="q-btn__loader"
+    />
   {/if}
 
-  {#if label}
-    <span>{label}</span>
-  {/if}
-  <slot />
+  <span bind:this={qBtnLabel} class="q-btn__label">
+    {#if label}
+      {label}
+    {/if}
+
+    {@render children?.()}
+  </span>
 </svelte:element>