@quaffui/quaff 0.1.0-prealpha

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

@@ -0,0 +1,44 @@
+import type { UseAlignProps } from "../../composables/use-align";
+import type { NativeProps } from "../../utils/types";
+export type QCardFillColors = "primary" | "secondary" | "tertiary";
+export interface QCardProps extends NativeProps {
+    /**
+     * Puts a border around the card.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Defines the fill color of the card.
+     * @default undefined
+     */
+    fill?: boolean | QCardFillColors;
+    /**
+     * Makes the card flat, removing its elevation.
+     * @default false
+     */
+    flat?: boolean;
+    /**
+     * Adds rounded corners to the card.
+     * @default false
+     */
+    round?: boolean;
+    /**
+     * Sets the title of the card.
+     * @default undefined
+     */
+    title?: string;
+}
+export interface QCardSectionProps extends NativeProps {
+    /**
+     * Lays out the section content horizontally.
+     * @default false
+     */
+    horizontal?: boolean;
+}
+export interface QCardActionsProps extends UseAlignProps, NativeProps {
+    /**
+     * Lays out the action items vertically.
+     * @default false
+     */
+    vertical: boolean;
+}

package/dist/components/card/props.js

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

package/dist/components/checkbox/QCheckbox.svelte

@@ -0,0 +1,14 @@
+<script>import { createClasses } from "../../utils/props";
+export let value = false, label = "", disable = false, userClasses = void 0;
+export { userClasses as class };
+$:
+  classes = createClasses([disable && "disabled"], {
+    component: "q-checkbox",
+    userClasses
+  });
+</script>
+
+<label class={classes} {...$$restProps}>
+  <input type="checkbox" bind:checked={value} disabled={disable} />
+  <span>{label}</span>
+</label>

package/dist/components/checkbox/QCheckbox.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QCheckboxProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: boolean | undefined;
+        label?: QCheckboxProps["label"];
+        disable?: QCheckboxProps["disable"];
+        class?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QCheckboxProps = typeof __propDef.props;
+export type QCheckboxEvents = typeof __propDef.events;
+export type QCheckboxSlots = typeof __propDef.slots;
+export default class QCheckbox extends SvelteComponentTyped<QCheckboxProps, QCheckboxEvents, QCheckboxSlots> {
+}
+export {};

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

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

package/dist/components/checkbox/docs.js

@@ -0,0 +1,17 @@
+import { QCheckboxDocsProps } from "./docs.props";
+export let QCheckboxDocs = {
+    name: "QCheckbox",
+    description: "Checkboxes allow the user to select one or more items from a set.",
+    docs: {
+        props: QCheckboxDocsProps,
+        slots: [],
+        methods: [],
+        events: [
+            {
+                name: "change",
+                type: "(e: Event) => void",
+                description: "Emitted when the checkbox is checked or unchecked.",
+            },
+        ],
+    },
+};

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

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

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

@@ -0,0 +1,26 @@
+export const QCheckboxDocsProps = [
+    {
+        name: "value",
+        type: "boolean",
+        optional: false,
+        clickableType: false,
+        description: "Controls the checked state of the checkbox.",
+        default: "",
+    },
+    {
+        name: "label",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "Sets the label for the checkbox.",
+        default: "undefined",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts the checkbox in a disabled state, making it unclickable.",
+        default: "false",
+    },
+];

package/dist/components/checkbox/index.scss

@@ -0,0 +1,3 @@
+.q-checkbox {
+  @include selection(checkbox);
+}

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

@@ -0,0 +1,17 @@
+import type { NativeProps } from "../../utils/types";
+export interface QCheckboxProps extends NativeProps {
+    /**
+     * Controls the checked state of the checkbox.
+     */
+    value: boolean;
+    /**
+     * Sets the label for the checkbox.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * Puts the checkbox in a disabled state, making it unclickable.
+     * @default false
+     */
+    disable?: boolean;
+}

package/dist/components/checkbox/props.js

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

package/dist/components/chip/QChip.svelte

@@ -0,0 +1,62 @@
+<script>import { activationHandler } from "../../helpers/activationHandler";
+import { createClasses } from "../../utils/props";
+import { createEventDispatcher } from "svelte";
+import QIcon from "../icon/QIcon.svelte";
+export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
+export { userClasses as class };
+const emit = createEventDispatcher();
+$:
+  img = icon?.startsWith("img:") ? icon.slice(4) : void 0;
+$:
+  imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
+$:
+  sizeClass = ["sm", "lg"].includes(size) ? size : void 0;
+$:
+  classes = createClasses(
+    [vertical && "vertical", round && "rounded", (outlined || disable) && "bordered", sizeClass],
+    {
+      component: "q-chip",
+      userClasses
+    }
+  );
+$:
+  imgClass = createClasses([responsive && "responsive"], {
+    component: "q-chip",
+    element: "img"
+  });
+$:
+  tab = disable ? -1 : tabindex ?? 0;
+</script>
+
+<a
+  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
+  {href}
+  class={classes}
+  tabindex={tab}
+  {...$$restProps}
+  aria-disabled={disable || undefined}
+>
+  {#if $$slots.leading}
+    <slot name="leading" />
+  {:else if img}
+    <img class={imgClass} src={img} alt="{content || 'Slotted'} chip" />
+  {:else if icon}
+    <QIcon name={icon} class="q-chip__icon" />
+  {/if}
+  {#if content}
+    {content}
+  {:else}
+    <slot />
+  {/if}
+  {#if $$slots.trailing}
+    <slot name="trailing" />
+  {:else if imgRight}
+    <img
+      class="{imgClass} q-chip__img--trailing"
+      src={imgRight}
+      alt="{content || 'Slotted'} chip"
+    />
+  {:else if iconRight}
+    <QIcon name={iconRight} class="q-chip__icon" />
+  {/if}
+</a>

package/dist/components/chip/QChip.svelte.d.ts

@@ -0,0 +1,35 @@
+import { SvelteComponentTyped } from "svelte";
+import type { QChipProps } from "./props";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        content?: QChipProps["content"];
+        icon?: QChipProps["icon"];
+        iconRight?: QChipProps["iconRight"];
+        disable?: QChipProps["disable"];
+        responsive?: QChipProps["responsive"];
+        vertical?: QChipProps["vertical"];
+        round?: QChipProps["round"];
+        outlined?: QChipProps["outlined"];
+        size?: QChipProps["size"];
+        tabindex?: QChipProps["tabindex"];
+        href?: QChipProps["href"];
+        class?: string | undefined;
+    };
+    events: {
+        activated: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        leading: {};
+        default: {};
+        trailing: {};
+    };
+};
+export type QChipProps = typeof __propDef.props;
+export type QChipEvents = typeof __propDef.events;
+export type QChipSlots = typeof __propDef.slots;
+export default class QChip extends SvelteComponentTyped<QChipProps, QChipEvents, QChipSlots> {
+}
+export {};

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

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

package/dist/components/chip/docs.js

@@ -0,0 +1,30 @@
+import { QChipDocsProps } from "./docs.props";
+export let QChipDocs = {
+    name: "QChip",
+    description: "Chips help people enter information, make selections, filter content, or trigger actions. They represent options in a specific context, unlike buttons, which are persistent.",
+    docs: {
+        props: QChipDocsProps,
+        slots: [
+            {
+                name: "default",
+                description: 'The default slot for the chip\'s content. Is overwritten by the "content" prop',
+            },
+            {
+                name: "leading",
+                description: "Slot for content to display at the start of the chip. Use with an icon or a media.",
+            },
+            {
+                name: "trailing",
+                description: "Slot for content to display at the end of the chip. Use with an icon or a media.",
+            },
+        ],
+        methods: [],
+        events: [
+            {
+                name: "click",
+                type: "(e: MouseEvent) => void",
+                description: "Emitted when the user clicks on the chip.",
+            },
+        ],
+    },
+};

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

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

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

@@ -0,0 +1,90 @@
+export const QChipDocsProps = [
+    {
+        name: "content",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: "The content inside the chip. Will overwrite the default slot.",
+        default: "undefined",
+    },
+    {
+        name: "icon",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.',
+        default: "undefined",
+    },
+    {
+        name: "iconRight",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Name of the trailing icon to use for the chip. If starts with "img:", will be used as an image src instead.',
+        default: "undefined",
+    },
+    {
+        name: "disable",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Puts the chip in a disabled state, making it unclickable.",
+        default: "false",
+    },
+    {
+        name: "responsive",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Makes leading and trailing images responsive, making them take more space.",
+        default: "false",
+    },
+    {
+        name: "vertical",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "If true, the chip will display its content vertically.",
+        default: "false",
+    },
+    {
+        name: "round",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use round design for the chip, adding a large border-radius to it.",
+        default: "false",
+    },
+    {
+        name: "outlined",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Use outline design for the chip, adding a border around it.",
+        default: "false",
+    },
+    {
+        name: "size",
+        type: '"small" | "medium" | "large"',
+        optional: true,
+        clickableType: false,
+        description: "Size of the chip.",
+        default: "small",
+    },
+    {
+        name: "tabindex",
+        type: "string | number",
+        optional: true,
+        clickableType: false,
+        description: "Tabindex of the chip.",
+        default: "undefined",
+    },
+    {
+        name: "href",
+        type: "string",
+        optional: true,
+        clickableType: false,
+        description: 'Makes the chip navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id").',
+        default: "undefined",
+    },
+];

package/dist/components/chip/index.scss

@@ -0,0 +1,83 @@
+// QChip
+.q-chip {
+  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;
+  background-color: var(--secondary);
+  color: var(--on-secondary);
+  text-transform: none;
+  border-radius: 0.5em;
+  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  line-height: normal;
+  text-decoration: none;
+  cursor: pointer;
+  border: none;
+
+  @extend .ripple;
+  @extend .no-select;
+  @include padding("x", "md");
+  @include margin("x");
+  @include gap("md");
+  @include btn-image("chip");
+
+  &.q-chip--sm {
+    height: 2rem;
+    min-width: 2rem;
+  }
+
+  &.q-chip--lg {
+    height: 3rem;
+    min-width: 3rem;
+  }
+
+  &.q-chip--bordered {
+    @include transparent($ripple: true);
+    @include border(var(--secondary));
+    color: var(--secondary);
+  }
+
+  &.q-chip--rounded {
+    border-radius: 1.25rem;
+
+    &.q-chip--sm {
+      border-radius: 1rem;
+    }
+
+    &.q-chip--lg {
+      border-radius: 1.5rem;
+    }
+  }
+
+  &.q-chip--filled {
+    background-color: var(--secondary-container);
+    color: var(--on-secondary-container);
+    border: none;
+  }
+
+  &.q-chip--vertical {
+    flex-direction: column;
+    height: auto;
+    max-height: none;
+
+    @include padding("y");
+    @include gap("xs");
+  }
+
+  &.q-chip[aria-disabled="true"] {
+    @extend .disabled;
+    &.q-chip--bordered {
+      border-color: var(--on-surface);
+    }
+  }
+}
+
+// QChip icons
+.q-chip > .q-icon {
+  --size: 1.25rem;
+  margin-inline: -0.5rem;
+}

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

@@ -0,0 +1,59 @@
+import type { NativeProps } from "../../utils/types";
+export type QChipSizeOptions = "sm" | "md" | "lg";
+export interface QChipProps extends NativeProps {
+    /**
+     * The content inside the chip. Will overwrite the default slot.
+     * @default undefined
+     */
+    content?: string;
+    /**
+     * Name of the leading icon to use for the chip. If starts with "img:", will be used as an image src instead.
+     * @default undefined
+     */
+    icon?: string;
+    /**
+     * Name of the trailing icon to use for the chip. If starts with "img:", will be used as an image src instead.
+     * @default undefined
+     */
+    iconRight?: string;
+    /**
+     * Puts the chip in a disabled state, making it unclickable.
+     * @default false
+     */
+    disable?: boolean;
+    /**
+     * Makes leading and trailing images responsive, making them take more space.
+     * @default false
+     */
+    responsive?: boolean;
+    /**
+     * If true, the chip will display its content vertically.
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * Use round design for the chip, adding a large border-radius to it.
+     * @default false
+     */
+    round?: boolean;
+    /**
+     * Use outline design for the chip, adding a border around it.
+     * @default false
+     */
+    outlined?: boolean;
+    /**
+     * Size of the chip.
+     * @default small
+     */
+    size?: QChipSizeOptions;
+    /**
+     * Tabindex of the chip.
+     * @default undefined
+     */
+    tabindex?: number;
+    /**
+     * Makes the chip 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;
+}

package/dist/components/chip/props.js

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

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -0,0 +1,71 @@
+<script>import Prism from "prismjs";
+import "prismjs/themes/prism-twilight.css";
+import "prismjs/components/prism-typescript";
+import "prism-svelte";
+import { QBtn } from "../..";
+export let language, code = "/* No code found */", title = void 0, copiable = void 0;
+let btnContent = "Copy";
+let btnColor = "primary";
+$:
+  highlighted = Prism.highlight(code, Prism.languages[language], language);
+async function copyCode() {
+  try {
+    if (navigator.clipboard.write) {
+      let blob = new Blob([code], { type: "text/plain" });
+      let item = new ClipboardItem({ "text/plain": blob });
+      await navigator.clipboard.write([item]);
+    } else {
+      await navigator.clipboard.writeText(code);
+    }
+    btnContent = "Copied!";
+    btnColor = "green";
+    setTimeout(() => {
+      btnContent = "Copy";
+      btnColor = "primary";
+    }, 3e3);
+  } catch (e) {
+    btnContent = "Error while copying...";
+    btnColor = "error";
+    setTimeout(() => {
+      btnContent = "Copy";
+      btnColor = "primary";
+    }, 3e3);
+  }
+}
+</script>
+
+<div class="q-code-block">
+  {#if copiable}
+    <div class="flex between-align middle-align q-pb-sm">
+      <h4 class="q-ma-none q-pr-lg">{title}</h4>
+      <QBtn
+        class="{btnColor}-border {btnColor}-text"
+        size="sm"
+        icon="content_copy"
+        outline
+        on:click={copyCode}
+      >
+        {btnContent}
+      </QBtn>
+    </div>
+  {:else if title}
+    <h4>{title}</h4>
+  {/if}
+  <pre class="language-svelte"><code>{@html highlighted}</code></pre>
+</div>
+
+<style>
+  .q-code-block {
+    border-radius: 0.5em;
+  }
+
+  pre {
+    max-height: 400px;
+    height: 100%;
+    margin: 0;
+  }
+
+  code {
+    white-space: pre-wrap;
+  }
+</style>

package/dist/components/codeBlock/QCodeBlock.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import "prismjs/themes/prism-twilight.css";
+import "prismjs/components/prism-typescript";
+import "prism-svelte";
+import type { QCodeBlockProps } from "./props";
+declare const __propDef: {
+    props: {
+        language: QCodeBlockProps["language"];
+        code?: QCodeBlockProps["code"];
+        title?: QCodeBlockProps["title"];
+        copiable?: QCodeBlockProps["copiable"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type QCodeBlockProps = typeof __propDef.props;
+export type QCodeBlockEvents = typeof __propDef.events;
+export type QCodeBlockSlots = typeof __propDef.slots;
+export default class QCodeBlock extends SvelteComponentTyped<QCodeBlockProps, QCodeBlockEvents, QCodeBlockSlots> {
+}
+export {};

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

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