@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

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

@@ -1,33 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QBtnProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 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"];
-        flat?: QBtnProps["flat"];
-        to?: QBtnProps["to"];
-        size?: QBtnProps["size"];
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    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 SvelteComponent<QBtnProps, QBtnEvents, QBtnSlots> {
+export default class QBtn extends SvelteComponentTyped<QBtnProps_, QBtnEvents, QBtnSlots> {
 }

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,15 +1,10 @@
-import { QBtnDocsProps } from "./docs.props";
-export let QBtnDocs = {
+import { QBtnDocsProps, QBtnDocsSnippets } from "./docs.props";
+export const QBtnDocs = {
     name: "QBtn",
     description: "Buttons help users take action, such as sending an email, sharing a document, or liking a comment.",
     docs: {
         props: QBtnDocsProps,
-        slots: [
-            {
-                name: "default",
-                description: "The default slot can be used to display the button's text. This slot doesn't overwrite the label prop but appends to it.",
-            },
-        ],
+        snippets: QBtnDocsSnippets,
         methods: [],
         events: [
             {

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

@@ -1,8 +1,3 @@
-export declare const QBtnDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QBtnDocsProps: ParsedProp[];
+export declare const QBtnDocsSnippets: ParsedSnippet[];

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

@@ -1,90 +1,227 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 0be24e79cccd1bb68f94fa2bcb3fd8ff
 export const QBtnDocsProps = [
     {
-        name: "disable",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "disabled",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Puts the button in a disabled state, making it unclickable.",
         default: "false",
     },
     {
-        name: "flat",
-        type: "boolean",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "variant",
+        type: {
+            name: "QBtnVariantOptions",
+            isClickable: true,
+        },
+        description: "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",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Use flat design for the button, removing its elevation and background-color.",
+        isSnippet: false,
+        name: "filled",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: 'Equivalent to `variant="filled"`. Overwritten by `variant` but overwrites `tonal`, `outlined` and `flat`.',
         default: "false",
     },
     {
-        name: "icon",
-        type: "string",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "tonal",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: 'Equivalent to `variant="tonal"`. Overwritten by `variant` and `filled` but overwrites `outlined` and `flat`.',
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "outlined",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: 'Equivalent to `variant="outlined"`. Overwritten by `variant`, `filled` and `tonal` but overwrites `flat`.',
+        default: "false",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "flat",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: 'Equivalent to `variant="flat"`. Overwritten by any other variant if defined with the `variant` prop or other boolean variant props.',
+        default: "false",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "icon",
+        type: [
+            {
+                name: "MaterialSymbol",
+                isClickable: false,
+            },
+            {
+                name: "`img:${string}`",
+                isClickable: false,
+            },
+        ],
         description: "Name of the leading icon to use for the button.",
         default: "undefined",
     },
     {
-        name: "label",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "label",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
         description: "Text to use for the button.",
         default: "undefined",
     },
     {
-        name: "loading",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "loading",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Puts the button in a loading state, adding a loader as the leading icon.",
         default: "false",
     },
     {
-        name: "outline",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Use outline design for the button, adding a border around it.",
+        isSnippet: false,
+        name: "rectangle",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
     {
-        name: "rectangle",
-        type: "boolean",
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "Use rectangle design for the button, removing the large border-radius.",
+        isSnippet: false,
+        name: "noRipple",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Disable the ripple effect for the button.",
         default: "false",
     },
     {
-        name: "round",
-        type: "boolean",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "rippleColor",
+        type: {
+            name: "string",
+            isClickable: false,
+        },
+        description: "Sets the ripple effect's color for the button.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "round",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Use round design for the button, giving it a circular shape.",
         default: "false",
     },
     {
-        name: "to",
-        type: "string",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "to",
+        type: {
+            name: "string",
+            isClickable: 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",
+        isArray: false,
         optional: true,
-        clickableType: false,
+        isSnippet: false,
+        name: "unelevated",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
         description: "Removes the button's elevation.",
         default: "false",
     },
     {
-        name: "size",
-        type: "QBtnSizeOptions",
+        isArray: false,
         optional: true,
-        clickableType: true,
+        isSnippet: false,
+        name: "size",
+        type: {
+            name: "QBtnSizeOptions",
+            isClickable: true,
+        },
         description: "Size of the button.",
-        default: "md",
+        default: '"md"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "target",
+        type: {
+            name: 'HTMLAnchorAttributes["target"]',
+            isClickable: false,
+        },
+        description: 'For "a" (anchor) tag only, apply the target attribute.',
+        default: "undefined",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "onclick",
+        type: {
+            name: "MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>",
+            isClickable: false,
+        },
+        description: "This event is emitted when the button is clicked.",
+        default: "undefined",
     },
 ];
+export const QBtnDocsSnippets = [];

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

@@ -1,13 +1,35 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
-export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
-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 QBtnVariantOptions = "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.
+     * 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;
+    /**
+     * Equivalent to `variant="filled"`. Overwritten by `variant` but overwrites `tonal`, `outlined` and `flat`.
+     * @default false
+     */
+    filled?: boolean;
+    /**
+     * Equivalent to `variant="tonal"`. Overwritten by `variant` and `filled` but overwrites `outlined` and `flat`.
+     * @default false
+     */
+    tonal?: boolean;
+    /**
+     * Equivalent to `variant="outlined"`. Overwritten by `variant`, `filled` and `tonal` but overwrites `flat`.
+     * @default false
+     */
+    outlined?: boolean;
+    /**
+     * Equivalent to `variant="flat"`. Overwritten by any other variant if defined with the `variant` prop or other boolean variant props.
      * @default false
      */
     flat?: boolean;
@@ -15,7 +37,7 @@ export interface QBtnProps extends NativeProps {
      * 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 +49,20 @@ 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
@@ -53,7 +80,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,38 @@
-<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
+<script lang="ts">
+  import type { QCardProps } from "./props";
+
+  let {
+    fill = false,
+    flat = false,
+    bordered = false,
+    rounded = false,
+    children,
+    ...props
+  }: QCardProps = $props();
+
+  const colorOptions: (typeof fill)[] = ["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,
+    props.class,
+    flat && "q-card--flat",
+    bordered && "q-card--bordered",
+    rounded && "q-card--rounded",
+  ]}
+  data-quaff
+>
+  {@render children?.()}
 </article>

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

@@ -1,26 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QCardProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 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;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        title: {};
-        default: {};
-    };
+    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 SvelteComponent<QCardProps, QCardEvents, QCardSlots> {
+export default class QCard extends SvelteComponentTyped<QCardProps_, QCardEvents, QCardSlots> {
 }

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,26 @@
-<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
-  });
+<script lang="ts">
+  import { useAlign } from "../../composables";
+  import type { QCardActionsProps } from "./props";
+
+  let {
+    align,
+    vertical = false,
+    children,
+    ...props
+  }: QCardActionsProps = $props();
+
+  const alignClass = $derived(useAlign(align));
 </script>
 
-<nav class={classes} {...$$restProps}>
-  <slot />
+<nav
+  {...props}
+  class={[
+    "q-card__actions",
+    alignClass,
+    props.class,
+    vertical && "q-card__actions--vertical",
+  ]}
+  data-quaff
+>
+  {@render children?.()}
 </nav>

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

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

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,18 @@
-<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
-  });
+<script lang="ts">
+  import type { QCardSectionProps } from "./props";
+
+  let { horizontal = false, children, ...props }: QCardSectionProps = $props();
 </script>
 
-<div class={classes} {...$$restProps} on:scroll>
-  <slot />
+<div
+  {...props}
+  class={[
+    "q-card__section",
+    props.class,
+    horizontal && "q-card__section--horizontal",
+  ]}
+  class:row={horizontal}
+  data-quaff
+>
+  {@render children?.()}
 </div>