@quaffui/quaff 0.1.0-prealpha

package/dist/components/button/QBtn.svelte

@@ -0,0 +1,59 @@
+<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
+    }
+  );
+</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}
+>
+  {#if icon && !loading}
+    {#if icon.startsWith("img:")}
+      <img
+        src={icon.replace("img:", "")}
+        class="q-btn__img q-btn__img--responsive"
+        alt="{label || 'Slotted'} button"
+      />
+    {:else}
+      <QIcon name={icon} class="q-btn__icon" />
+    {/if}
+  {/if}
+
+  {#if loading}
+    <QCircularProgress indeterminate class="q-btn__loader" />
+  {/if}
+
+  {#if label}
+    <span>{label}</span>
+  {/if}
+  <slot />
+</svelte:element>

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

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QBtnProps = typeof __propDef.props;
+export type QBtnEvents = typeof __propDef.events;
+export type QBtnSlots = typeof __propDef.slots;
+export default class QBtn extends SvelteComponentTyped<QBtnProps, QBtnEvents, QBtnSlots> {
+}
+export {};

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

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

package/dist/components/button/docs.js

@@ -0,0 +1,22 @@
+import { QBtnDocsProps } from "./docs.props";
+export let 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.",
+            },
+        ],
+        methods: [],
+        events: [
+            {
+                name: "click",
+                type: "(e: MouseEvent) => void",
+                description: "Emitted when the user clicks on the button.",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,8 @@
+export declare const QBtnDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,82 @@
+export const QBtnDocsProps = [
+    {
+        name: "disable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts the button in a disabled state, making it unclickable.",
+        default: "false",
+    },
+    {
+        name: "flat",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use flat design for the button, removing its elevation and background-color.",
+        default: "false",
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Name of the leading icon to use for the button.",
+        default: "undefined",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Text to use for the button.",
+        default: "undefined",
+    },
+    {
+        name: "loading",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        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",
+        optional: true,
+        clickableType: false,
+        description: "Use rectangle design for the button, removing the large border-radius.",
+        default: "false",
+    },
+    {
+        name: "to",
+        type: "string",
+        optional: true,
+        clickableType: 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",
+        optional: true,
+        clickableType: false,
+        description: "Removes the button's elevation.",
+        default: "false",
+    },
+    {
+        name: "size",
+        type: "QBtnSizeOptions",
+        optional: true,
+        clickableType: true,
+        description: "Size of the button.",
+        default: "md",
+    },
+];

package/dist/components/button/index.scss

@@ -0,0 +1,78 @@
+.q-btn {
+  position: relative;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  font-family: inherit;
+  outline: inherit;
+  box-sizing: content-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  min-width: 2.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--on-primary);
+  padding: 0 1.5rem;
+  background-color: var(--primary);
+  margin: 0 0.5rem;
+  border-radius: 1.25rem;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  user-select: none;
+  gap: 1rem;
+  line-height: normal;
+  @extend .elevate-sm-bottom;
+  @extend .ripple;
+
+  $sizeMap: (
+    "sm": -1,
+    "lg": 1,
+    "xl": 2,
+  );
+
+  @each $size, $val in $sizeMap {
+    &.q-btn--#{$size} {
+      height: 2.5rem + 0.5 * $val;
+      min-width: 2.5rem + 0.5 * $val;
+      border-radius: 1.25rem + 0.25 * $val;
+      font-size: 1rem + 0.125 * $val;
+    }
+  }
+
+  &.q-btn[aria-disabled] {
+    @extend .disabled;
+  }
+
+  &.q-btn--outlined {
+    @include transparent($ripple: true);
+    @include border(var(--primary));
+    color: var(--primary);
+  }
+
+  &.q-btn--unelevated {
+    @extend .elevate-none;
+  }
+
+  &.q-btn--flat {
+    @include transparent($ripple: true);
+    @extend .elevate-none;
+  }
+
+  &.q-btn--rectangle {
+    border-radius: 0.5rem;
+  }
+
+  &.q-btn--circle {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    padding: 0;
+  }
+
+  & > :is(.q-icon, .q-circular-progress) {
+    margin: 0 -0.5rem;
+  }
+
+  @include btn-image;
+}

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

@@ -0,0 +1,54 @@
+import type { NativeProps } from "$utils/types";
+export type QBtnSizeOptions = "sm" | "md" | "lg" | "xl";
+export interface QBtnProps extends NativeProps {
+    /**
+     * Puts the button in a disabled state, making it unclickable.
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * Use flat design for the button, removing its elevation and background-color.
+     * @default false
+     */
+    flat?: boolean;
+    /**
+     * Name of the leading icon to use for the button.
+     * @default undefined
+     */
+    icon?: string;
+    /**
+     * Text to use for the button.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Puts the button in a loading state, adding a loader as the leading icon.
+     * @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
+     */
+    rectangle?: 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
+     */
+    to?: string;
+    /**
+     * Removes the button's elevation.
+     * @default false
+     */
+    unelevated?: boolean;
+    /**
+     * Size of the button.
+     * @default md
+     */
+    size?: QBtnSizeOptions;
+}

package/dist/components/button/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/card/QCard.svelte

@@ -0,0 +1,23 @@
+<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>
+
+<article class={classes} {...$$restProps}>
+  {#if $$slots.title}
+    <slot name="title" />
+  {:else if title !== undefined}
+    <h5 class="q-card__title">{title}</h5>
+  {/if}
+
+  <slot />
+</article>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QCardProps = typeof __propDef.props;
+export type QCardEvents = typeof __propDef.events;
+export type QCardSlots = typeof __propDef.slots;
+export default class QCard extends SvelteComponentTyped<QCardProps, QCardEvents, QCardSlots> {
+}
+export {};

package/dist/components/card/QCardActions.svelte

@@ -0,0 +1,18 @@
+<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>
+
+<nav class={classes} {...$$restProps}>
+  <slot />
+</nav>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QCardActionsProps = typeof __propDef.props;
+export type QCardActionsEvents = typeof __propDef.events;
+export type QCardActionsSlots = typeof __propDef.slots;
+export default class QCardActions extends SvelteComponentTyped<QCardActionsProps, QCardActionsEvents, QCardActionsSlots> {
+}
+export {};

package/dist/components/card/QCardSection.svelte

@@ -0,0 +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
+  });
+</script>
+
+<div class={classes} {...$$restProps} on:scroll>
+  <slot />
+</div>

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } 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: {};
+    };
+};
+export type QCardSectionProps = typeof __propDef.props;
+export type QCardSectionEvents = typeof __propDef.events;
+export type QCardSectionSlots = typeof __propDef.slots;
+export default class QCardSection extends SvelteComponentTyped<QCardSectionProps, QCardSectionEvents, QCardSectionSlots> {
+}
+export {};

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

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

package/dist/components/card/docs.js

@@ -0,0 +1,46 @@
+import { QCardActionsDocsProps, QCardDocsProps, QCardSectionDocsProps } from "./docs.props";
+export let QCardDocs = {
+    name: "QCard",
+    description: "Cards provide a clean, flexible, and convenient means of displaying a wide variety of content.",
+    docs: {
+        props: QCardDocsProps,
+        slots: [
+            {
+                name: "default",
+                description: "Use this slot to add content to the card.",
+            },
+        ],
+        methods: [],
+        events: [],
+    },
+};
+export let QCardSectionDocs = {
+    name: "QCardSection",
+    description: "Sections are used to group similar content within a card.",
+    docs: {
+        props: QCardSectionDocsProps,
+        slots: [
+            {
+                name: "default",
+                description: "Use this slot to add content to the card section.",
+            },
+        ],
+        methods: [],
+        events: [],
+    },
+};
+export let QCardActionsDocs = {
+    name: "QCardActions",
+    description: "Actions hold actionable items like buttons within a card.",
+    docs: {
+        props: QCardActionsDocsProps,
+        slots: [
+            {
+                name: "default",
+                description: "Use this slot to add action items to the card.",
+            },
+        ],
+        methods: [],
+        events: [],
+    },
+};

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

@@ -0,0 +1,24 @@
+export declare const QCardDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QCardSectionDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];
+export declare const QCardActionsDocsProps: {
+    name: string;
+    type: string;
+    optional: boolean;
+    clickableType: boolean;
+    description: string;
+    default: string;
+}[];

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

@@ -0,0 +1,62 @@
+export const QCardDocsProps = [
+    {
+        name: "bordered",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts a border around the card.",
+        default: "false",
+    },
+    {
+        name: "fill",
+        type: "string | boolean",
+        optional: true,
+        clickableType: false,
+        description: "Defines the fill color of the card.",
+        default: "undefined",
+    },
+    {
+        name: "flat",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Makes the card flat, removing its elevation.",
+        default: "false",
+    },
+    {
+        name: "round",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Adds rounded corners to the card.",
+        default: "false",
+    },
+    {
+        name: "title",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Sets the title of the card.",
+        default: "undefined",
+    },
+];
+export const QCardSectionDocsProps = [
+    {
+        name: "horizontal",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Lays out the section content horizontally.",
+        default: "false",
+    },
+];
+export const QCardActionsDocsProps = [
+    {
+        name: "vertical",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "Lays out the action items vertically.",
+        default: "false",
+    },
+];

package/dist/components/card/index.scss

@@ -0,0 +1,53 @@
+// QCard
+.q-card {
+  display: block;
+  border-radius: 0.75rem;
+  transition: var(--speed-3) transform, var(--speed-3) padding, var(--speed-3) border-radius;
+  @include padding("a", "md");
+  @extend .elevate-sm-bottom;
+
+  &.q-card--bordered {
+    box-sizing: border-box;
+    @include border();
+    @extend .elevate-none;
+  }
+
+  &.q-card--flat {
+    @extend .elevate-none;
+  }
+
+  &.q-card--rounded {
+    border-radius: 2rem;
+  }
+
+  & > .q-card__title {
+    @include margin("b");
+  }
+}
+
+// QCardSection
+.q-card > .q-card__section {
+  @include padding;
+
+  &.q-card__section--horizontal {
+    @extend .row;
+    border-radius: 0;
+
+    &:not(.q-card__title + .q-card__section) {
+      @include margin("t");
+    }
+  }
+}
+
+// QCardActions
+.q-card > .q-card__actions {
+  display: flex;
+
+  &.q-card__actions--vertical {
+    flex-direction: column;
+  }
+
+  &:not(.q-card__title + .q-card__actions) {
+    @include margin("t");
+  }
+}