@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/button/QBtn.svelte

@@ -1,69 +1,112 @@
-<script>import { useSize } from "../../composables";
-import { ripple } from "../../helpers";
-import { isActivationKey } from "../../utils";
-import { QIcon, QCircularProgress } from "../..";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, noRipple = false, flat = false, to = void 0, size = void 0, userClasses = "";
-export { userClasses as class };
-let qBtn;
-let tag;
-$:
-  tag = to !== void 0 ? "a" : "button";
-$:
-  sizeObj = useSize(size);
-$:
-  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-btn--${sizeObj.class}` : "";
-function stopIfDisabled(e) {
-  if (disable) {
+<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();
-    e.stopImmediatePropagation();
+    const click = new MouseEvent("click", { relatedTarget: qBtn });
+    stopIfDisabled(click);
   }
-}
-function onKeyDown(e) {
-  if (!isActivationKey(e))
-    return;
-  e.preventDefault();
-  let click = new MouseEvent("click");
-  qBtn.dispatchEvent(click);
-}
 </script>
 
 <svelte:element
   this={tag}
-  use:ripple={{ disable: noRipple || disable }}
   bind:this={qBtn}
-  aria-disabled={disable || undefined}
-  class="q-btn {sizeClass} {userClasses}"
+  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--outlined={outline}
-  class:q-btn--flat={flat}
   class:q-btn--rectangle={rectangle}
-  class:q-btn--round={(!$$slots.default && !label) || round}
-  href={to}
+  class:q-btn--round={round || (!children && !label)}
+  style:--q-btn-size={qSize.style}
+  style:--ripple-color={color}
+  {target}
   role={tag === "a" ? "button" : undefined}
-  tabindex={disable ? -1 : 0}
-  on:keydown={onKeyDown}
-  on:click={stopIfDisabled}
-  on:click
-  {...$$restProps}
+  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,34 +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"];
-        round?: QBtnProps["round"];
-        rectangle?: QBtnProps["rectangle"];
-        noRipple?: QBtnProps["noRipple"];
-        flat?: QBtnProps["flat"];
-        to?: QBtnProps["to"];
-        size?: QBtnProps["size"];
-        class?: string | null | undefined;
-    };
-    events: {
-        click: MouseEvent;
-    } & {
-        [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";
-export declare let QBtnDocs: QComponentDocs;
+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,8 +1,8 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 721c97430442b5c05c756e2473f45aeb
+// @quaffHash 8658ff9566d68f27112f5c6ff5b97a54
 export const QBtnDocsProps = [
     {
-        name: "disable",
+        name: "disabled",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -10,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",
     },
@@ -41,14 +41,6 @@ export const QBtnDocsProps = [
         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",
@@ -65,6 +57,14 @@ export const QBtnDocsProps = [
         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",
@@ -95,7 +95,7 @@ export const QBtnDocsProps = [
         optional: true,
         clickableType: true,
         description: "Size of the button.",
-        default: "md",
+        default: '"md"',
     },
     {
         name: "target",
@@ -105,4 +105,12 @@ export const QBtnDocsProps = [
         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,22 +1,23 @@
-import type { NativeProps, QuaffSizes } from "../../utils";
-import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
-export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
-export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
+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,11 +28,6 @@ export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * @default false
      */
     loading?: boolean;
-    /**
-     * Use outline design for the button, adding a border around it.
-     * @default false
-     */
-    outline?: boolean;
     /**
      * Use rectangle design for the button, removing the large border-radius.
      * @default false
@@ -42,6 +38,11 @@ export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * @default false
      */
     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
@@ -59,7 +60,7 @@ export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
     unelevated?: boolean;
     /**
      * Size of the button.
-     * @default md
+     * @default "md"
      */
     size?: QBtnSizeOptions;
     /**
@@ -67,4 +68,9 @@ export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * @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,22 +1,31 @@
-<script>export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = "";
-export { userClasses as class };
-const colorOptions = ["primary", "secondary", "tertiary"];
-$:
-  color = !fill ? "surface" : colorOptions.includes(fill) ? `${fill}-container` : "surface-variant";
+<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="q-card {color} {userClasses}"
-  class:q-card--bordered={bordered}
+<article
+  {...props}
+  class="q-card{color ? ` ${color}` : ''}{props.class ? ` ${props.class}` : ''}"
   class:q-card--flat={flat}
-  class:q-card--rounded={round}
-  {...$$restProps}
+  class:q-card--bordered={bordered}
+  class:q-card--rounded={rounded}
 >
-  {#if $$slots.title}
-    <slot name="title" />
-  {:else if title !== undefined}
-    <h5 class="q-card__title">{title}</h5>
-  {/if}
-
-  <slot />
+  {@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 | null | 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,14 +1,17 @@
-<script>import { useAlign } from "../../composables";
-export let align = void 0, vertical = false, userClasses = "";
-export { userClasses as class };
-$:
-  alignClass = useAlign(align);
+<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="q-card__actions {alignClass} {userClasses}"
+  {...props}
+  class="q-card__actions{alignClass ? ` ${alignClass}` : ''}{props.class
+    ? ` ${props.class}`
+    : ''}"
   class:q-card__actions--vertical={vertical}
-  {...$$restProps}
 >
-  <slot />
+  {@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?: QCardActionsProps["vertical"];
-        class?: string | null | 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,12 +1,14 @@
-<script>export let horizontal = false, userClasses = "";
-export { userClasses as class };
+<svelte:options runes={true} />
+
+<script lang="ts">
+  let { horizontal = false, children, ...props } = $props();
 </script>
 
 <div
-  class="q-card__section {userClasses}"
+  {...props}
+  class="q-card__section{props.class ? ` ${props.class}` : ''}"
   class:q-card__section--horizontal={horizontal}
-  {...$$restProps} 
-  on:scroll
-  >
-  <slot />
+  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 | null | 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";
-export declare let QCardDocs: QComponentDocs;
-export declare let QCardSectionDocs: QComponentDocs;
-export declare let QCardActionsDocs: QComponentDocs;
+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: {