@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

package/dist/components/button/QBtn.svelte

@@ -1,59 +1,112 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { activationHandler } from "../../helpers/activationHandler";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
-export { userClasses as class };
-const emit = createEventDispatcher();
-let tag;
-$:
-  tag = to !== void 0 ? "a" : "div";
-$:
-  classes = createClasses(
-    [
-      unelevated && "unelevated",
-      rectangle && "rectangle",
-      outline && "outlined",
-      flat && "flat",
-      !$$slots.default && !label && "circle",
-      size && size !== "md" && size
-    ],
-    {
-      component: "q-btn",
-      userClasses
-    }
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import QCircularProgress from "../progress/QCircularProgress.svelte";
+  import { useSize } from "../../composables/useSize";
+  import { ripple } from "../../helpers";
+  import { isActivationKey } from "../../utils";
+  import { extractImgSrc } from "../../utils/string";
+  import QIcon from "../icon/QIcon.svelte";
+  let {
+    disabled = false,
+    design = "elevated",
+    icon,
+    label,
+    loading = false,
+    rectangle = false,
+    noRipple = false,
+    rippleColor,
+    round = false,
+    to,
+    unelevated = false,
+    size = "md",
+    target,
+    onclick,
+    children,
+    ...props
+  } = $props();
+  let qBtn;
+  const tag = $derived(to ? "a" : "button");
+  const qSize = $derived(useSize(size, "q-btn"));
+  const src = $derived(extractImgSrc(icon));
+  const color = $derived(
+    `var(--${design === "filled" ? "on-primary" : design === "tonal" ? "on-secondary-container" : "primary"})`,
+  );
+  const rippleColorVar = $derived(
+    rippleColor ? `var(--${rippleColor}, ${rippleColor})` : color,
   );
+  function stopIfDisabled(e) {
+    if (disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+    onclick?.(e);
+  }
+  function onkeydown(e) {
+    if (e.key === "Escape") {
+      qBtn?.blur();
+      return;
+    }
+    if (!isActivationKey(e)) {
+      return;
+    }
+    e.preventDefault();
+    const click = new MouseEvent("click", { relatedTarget: qBtn });
+    stopIfDisabled(click);
+  }
 </script>
 
 <svelte:element
   this={tag}
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
-  role="button"
-  href={to}
-  class={classes}
-  aria-disabled={disable || undefined}
-  tabindex={disable ? -1 : 0}
-  {...$$restProps}
+  bind:this={qBtn}
+  use:ripple={{
+    disabled: noRipple || disabled,
+    color: rippleColorVar,
+  }}
+  {...props}
+  class="q-btn{qSize.class ? ` ${qSize.class}` : ''}{props.class
+    ? ` ${props.class}`
+    : ''} q-btn--{design}"
+  class:q-btn--unelevated={unelevated}
+  class:q-btn--rectangle={rectangle}
+  class:q-btn--round={round || (!children && !label)}
+  style:--q-btn-size={qSize.style}
+  style:--ripple-color={color}
+  {target}
+  role={tag === "a" ? "button" : undefined}
+  aria-disabled={disabled || undefined}
+  tabindex={disabled ? -1 : 0}
+  {onkeydown}
+  onclick={stopIfDisabled}
 >
   {#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" />
     {/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 class="q-btn__label">
+    {#if label}
+      {label}
+    {:else}
+      {@render children?.()}
+    {/if}
+  </span>
 </svelte:element>

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

@@ -1,32 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QBtnProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        icon?: QBtnProps["icon"];
-        label?: QBtnProps["label"];
-        disable?: QBtnProps["disable"];
-        loading?: QBtnProps["loading"];
-        unelevated?: QBtnProps["unelevated"];
-        outline?: QBtnProps["outline"];
-        rectangle?: QBtnProps["rectangle"];
-        flat?: QBtnProps["flat"];
-        to?: QBtnProps["to"];
-        size?: QBtnProps["size"];
-        class?: string | undefined;
-    };
-    events: {
-        activated: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 SvelteComponent<QBtnProps, QBtnEvents, QBtnSlots> {
-}
+declare const QBtn: import("svelte").Component<QBtnProps, {}, "">;
+export default QBtn;

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

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

package/dist/components/button/docs.js

@@ -1,5 +1,5 @@
 import { QBtnDocsProps } from "./docs.props";
-export let QBtnDocs = {
+export const QBtnDocs = {
     name: "QBtn",
     description: "Buttons help users take action, such as sending an email, sharing a document, or liking a comment.",
     docs: {

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

@@ -1,6 +1,8 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 8658ff9566d68f27112f5c6ff5b97a54
 export const QBtnDocsProps = [
     {
-        name: "disable",
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -8,18 +10,18 @@ export const QBtnDocsProps = [
         default: "false",
     },
     {
-        name: "flat",
-        type: "boolean",
+        name: "design",
+        type: "QBtnDesignOptions",
         optional: true,
-        clickableType: false,
-        description: "Use flat design for the button, removing its elevation and background-color.",
-        default: "false",
+        clickableType: true,
+        description: "Choose the design for the button.",
+        default: '"elevated"',
     },
     {
         name: "icon",
-        type: "string",
+        type: "MaterialSymbol | `img:${string}`",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: "Name of the leading icon to use for the button.",
         default: "undefined",
     },
@@ -40,19 +42,35 @@ export const QBtnDocsProps = [
         default: "false",
     },
     {
-        name: "outline",
+        name: "rectangle",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use outline design for the button, adding a border around it.",
+        description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
     {
-        name: "rectangle",
+        name: "noRipple",
         type: "boolean",
         optional: true,
         clickableType: false,
-        description: "Use rectangle design for the button, removing the large border-radius.",
+        description: "Disable the ripple effect for the button.",
+        default: "false",
+    },
+    {
+        name: "rippleColor",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Sets the ripple effect's color for the button.",
+        default: "undefined",
+    },
+    {
+        name: "round",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use round design for the button, giving it a circular shape.",
         default: "false",
     },
     {
@@ -77,6 +95,22 @@ export const QBtnDocsProps = [
         optional: true,
         clickableType: true,
         description: "Size of the button.",
-        default: "md",
+        default: '"md"',
+    },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: 'For "a" (anchor) tag only, apply the target attribute.',
+        default: "undefined",
+    },
+    {
+        name: "onclick",
+        type: "MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>",
+        optional: true,
+        clickableType: true,
+        description: "This event is emitted when the button is clicked.",
+        default: "undefined",
     },
 ];

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

@@ -1,21 +1,23 @@
-import type { NativeProps } from "$utils/types";
-export type QBtnSizeOptions = "sm" | "md" | "lg" | "xl";
-export interface QBtnProps extends NativeProps {
+import type { MaterialSymbol } from "material-symbols";
+import type { HTMLAttributes, HTMLAnchorAttributes, MouseEventHandler } from "svelte/elements";
+export type QBtnSizeOptions = Exclude<Q.Size, "xs">;
+export type QBtnDesignOptions = "elevated" | "filled" | "tonal" | "outlined" | "flat";
+export interface QBtnProps extends HTMLAttributes<HTMLButtonElement> {
     /**
      * Puts the button in a disabled state, making it unclickable.
      * @default false
      */
-    disable?: boolean;
+    disabled?: boolean;
     /**
-     * Use flat design for the button, removing its elevation and background-color.
-     * @default false
+     * Choose the design for the button.
+     * @default "elevated"
      */
-    flat?: boolean;
+    design?: QBtnDesignOptions;
     /**
      * Name of the leading icon to use for the button.
      * @default undefined
      */
-    icon?: string;
+    icon?: MaterialSymbol | `img:${string}`;
     /**
      * Text to use for the button.
      * @default undefined
@@ -27,15 +29,25 @@ export interface QBtnProps extends NativeProps {
      */
     loading?: boolean;
     /**
-     * Use outline design for the button, adding a border around it.
+     * Use rectangle design for the button, removing the large border-radius.
      * @default false
      */
-    outline?: boolean;
+    rectangle?: boolean;
     /**
-     * Use rectangle design for the button, removing the large border-radius.
+     * Disable the ripple effect for the button.
      * @default false
      */
-    rectangle?: boolean;
+    noRipple?: boolean;
+    /**
+     * Sets the ripple effect's color for the button.
+     * @default undefined
+     */
+    rippleColor?: string;
+    /**
+     * Use round design for the button, giving it a circular shape.
+     * @default false
+     */
+    round?: boolean;
     /**
      * 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
@@ -48,7 +60,17 @@ export interface QBtnProps extends NativeProps {
     unelevated?: boolean;
     /**
      * Size of the button.
-     * @default md
+     * @default "md"
      */
     size?: QBtnSizeOptions;
+    /**
+     * For "a" (anchor) tag only, apply the target attribute.
+     * @default undefined
+     */
+    target?: HTMLAnchorAttributes["target"];
+    /**
+     * This event is emitted when the button is clicked.
+     * @default undefined
+     */
+    onclick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }

package/dist/components/card/QCard.scss

@@ -0,0 +1,25 @@
+@use "$css/mixins";
+
+.q-card {
+  display: block;
+  border-radius: 0.75rem;
+  transition: transform var(--speed-3) padding var(--speed-3) border-radius var(--speed-3);
+
+  @include mixins.padding("a-md");
+  @include mixins.elevate(1, "bottom");
+
+  &--bordered {
+    box-sizing: border-box;
+    box-shadow: none;
+
+    @include mixins.border;
+  }
+
+  &--flat {
+    box-shadow: none;
+  }
+
+  &--rounded {
+    border-radius: 2rem;
+  }
+}

package/dist/components/card/QCard.svelte

@@ -1,23 +1,31 @@
-<script>import { createClasses } from "$utils/props";
-export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = void 0;
-export { userClasses as class };
-const colorOptions = ["primary", "secondary", "tertiary"];
-$:
-  color = !fill ? "surface" : colorOptions.includes(fill) ? `${fill}-container` : "surface-variant";
-$:
-  classes = createClasses([bordered && "bordered", flat && "flat", round && "rounded"], {
-    component: "q-card",
-    quaffClasses: [`${color} on-${color}-text`],
-    userClasses
+<svelte:options runes={true} />
+
+<script lang="ts">
+  let {
+    fill = false,
+    flat = false,
+    bordered = false,
+    rounded = false,
+    children,
+    ...props
+  } = $props();
+  const colorOptions = ["primary", "secondary", "tertiary"];
+  const color = $derived.by(() => {
+    if (fill) {
+      return colorOptions.includes(fill)
+        ? `${fill}-container`
+        : "surface-variant";
+    }
+    return "surface";
   });
 </script>
 
-<article class={classes} {...$$restProps}>
-  {#if $$slots.title}
-    <slot name="title" />
-  {:else if title !== undefined}
-    <h5 class="q-card__title">{title}</h5>
-  {/if}
-
-  <slot />
+<article
+  {...props}
+  class="q-card{color ? ` ${color}` : ''}{props.class ? ` ${props.class}` : ''}"
+  class:q-card--flat={flat}
+  class:q-card--bordered={bordered}
+  class:q-card--rounded={rounded}
+>
+  {@render children?.()}
 </article>

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

@@ -1,26 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCardProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        bordered?: QCardProps["bordered"];
-        fill?: QCardProps["fill"];
-        flat?: QCardProps["flat"];
-        round?: QCardProps["round"];
-        title?: QCardProps["title"];
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        title: {};
-        default: {};
-    };
-};
-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 SvelteComponent<QCardProps, QCardEvents, QCardSlots> {
-}
+declare const QCard: import("svelte").Component<QCardProps, {}, "">;
+export default QCard;

package/dist/components/card/QCardActions.scss

@@ -0,0 +1,10 @@
+@use "$css/mixins";
+
+.q-card__actions {
+  display: flex;
+  @include mixins.margin("t-sm");
+
+  &--vertical {
+    flex-direction: column;
+  }
+}

package/dist/components/card/QCardActions.svelte

@@ -1,18 +1,17 @@
-<script>import useAlign from "../../composables/use-align";
-import { createClasses } from "$utils/props";
-export let align = void 0, vertical = false, userClasses = void 0;
-export { userClasses as class };
-$:
-  alignClass = useAlign(align);
-$:
-  classes = createClasses([vertical && "vertical"], {
-    component: "q-card",
-    element: "actions",
-    quaffClasses: [alignClass],
-    userClasses
-  });
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { useAlign } from "../../composables/useAlign";
+  let { align, vertical = false, children, ...props } = $props();
+  const alignClass = $derived(useAlign(align));
 </script>
 
-<nav class={classes} {...$$restProps}>
-  <slot />
+<nav
+  {...props}
+  class="q-card__actions{alignClass ? ` ${alignClass}` : ''}{props.class
+    ? ` ${props.class}`
+    : ''}"
+  class:q-card__actions--vertical={vertical}
+>
+  {@render children?.()}
 </nav>

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

@@ -1,22 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCardActionsProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        align?: QCardActionsProps["align"];
-        vertical?: boolean | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 SvelteComponent<QCardActionsProps, QCardActionsEvents, QCardActionsSlots> {
-}
+declare const QCardActions: import("svelte").Component<QCardActionsProps, {}, "">;
+export default QCardActions;

package/dist/components/card/QCardSection.scss

@@ -0,0 +1,10 @@
+@use "$css/mixins";
+
+.q-card__section {
+  @include mixins.padding("a-sm");
+
+  &--horizontal {
+    border-radius: 0;
+    @include mixins.margin("t-sm");
+  }
+}

package/dist/components/card/QCardSection.svelte

@@ -1,14 +1,14 @@
-<script>import { createClasses } from "$utils/props";
-export let horizontal = false, userClasses = void 0;
-export { userClasses as class };
-$:
-  classes = createClasses([horizontal && "horizontal"], {
-    component: "q-card",
-    element: "section",
-    userClasses
-  });
+<svelte:options runes={true} />
+
+<script lang="ts">
+  let { horizontal = false, children, ...props } = $props();
 </script>
 
-<div class={classes} {...$$restProps} on:scroll>
-  <slot />
+<div
+  {...props}
+  class="q-card__section{props.class ? ` ${props.class}` : ''}"
+  class:q-card__section--horizontal={horizontal}
+  class:row={horizontal}
+>
+  {@render children?.()}
 </div>

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

@@ -1,23 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QCardSectionProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        horizontal?: QCardSectionProps["horizontal"];
-        class?: string | undefined;
-    };
-    events: {
-        scroll: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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 SvelteComponent<QCardSectionProps, QCardSectionEvents, QCardSectionSlots> {
-}
+declare const QCardSection: import("svelte").Component<QCardSectionProps, {}, "">;
+export default QCardSection;

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

@@ -1,4 +1,4 @@
-import type { QComponentDocs } from "../../utils/types";
-export declare let QCardDocs: QComponentDocs;
-export declare let QCardSectionDocs: QComponentDocs;
-export declare let QCardActionsDocs: QComponentDocs;
+import type { QComponentDocs } from "../../utils";
+export declare const QCardDocs: QComponentDocs;
+export declare const QCardSectionDocs: QComponentDocs;
+export declare const QCardActionsDocs: QComponentDocs;

package/dist/components/card/docs.js

@@ -1,5 +1,5 @@
 import { QCardActionsDocsProps, QCardDocsProps, QCardSectionDocsProps } from "./docs.props";
-export let QCardDocs = {
+export const QCardDocs = {
     name: "QCard",
     description: "Cards provide a clean, flexible, and convenient means of displaying a wide variety of content.",
     docs: {
@@ -14,7 +14,7 @@ export let QCardDocs = {
         events: [],
     },
 };
-export let QCardSectionDocs = {
+export const QCardSectionDocs = {
     name: "QCardSection",
     description: "Sections are used to group similar content within a card.",
     docs: {
@@ -29,7 +29,7 @@ export let QCardSectionDocs = {
         events: [],
     },
 };
-export let QCardActionsDocs = {
+export const QCardActionsDocs = {
     name: "QCardActions",
     description: "Actions hold actionable items like buttons within a card.",
     docs: {