@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

package/dist/components/avatar/QAvatar.svelte

@@ -1,5 +1,5 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses, createStyles } from "../../utils/props";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
 export let shape = "circle", size = "md", src = void 0, video = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class };
 export { userStyles as style };

package/dist/components/avatar/QAvatar.svelte.d.ts

@@ -7,8 +7,8 @@ declare const __propDef: {
         size?: QAvatarProps["size"];
         src?: QAvatarProps["src"];
         video?: QAvatarProps["video"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

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

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

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

@@ -1,7 +1,8 @@
-import type { QuaffSizes, CssValue, NativeProps } from "../../utils/types";
+import type { QuaffSizes, CssValue, NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QAvatarShapeOptions = "circle" | "rounded" | "top-round" | "left-round" | "right-round" | "bottom-round" | "top-left-round" | "top-right-round" | "bottom-left-round" | "bottom-right-round";
 export type QAvatarSizeOptions = QuaffSizes | CssValue | number;
-export interface QAvatarProps extends NativeProps {
+export interface QAvatarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Shape of the avatar.
      * @default circle

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 import { onMount, setContext } from "svelte";
 export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
 export { userClasses as class };

package/dist/components/breadcrumbs/QBreadcrumbs.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         gutter?: QBreadcrumbsProps["gutter"];
         activeColor?: QBreadcrumbsProps["activeColor"];
         separatorColor?: QBreadcrumbsProps["separatorColor"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,8 +1,8 @@
-<script>import { getContext } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { createClasses } from "../../utils/props";
-import { isRouteActive } from "../../composables/use-router-link";
+<script>import { isRouteActive } from "../../composables";
 import { Quaff } from "../../stores/Quaff";
+import { createClasses } from "../../utils";
+import { getContext } from "svelte";
+import { QIcon } from "../..";
 export let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "active", userClasses = void 0;
 export { userClasses as class };
 const activeColor = getContext("activeColor");
@@ -13,7 +13,7 @@ $:
   classes = createClasses([isActive && activeClass], {
     component: "q-breadcrumbs",
     element: "el",
-    quaffClasses: [isActive && `${activeColor}-text`],
+    quaffClasses: [isActive && `text-${activeColor}`],
     userClasses
   });
 $:

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte.d.ts

@@ -8,7 +8,7 @@ declare const __propDef: {
         to?: QBreadcrumbsElProps["to"];
         href?: QBreadcrumbsElProps["href"];
         activeClass?: QBreadcrumbsElProps["activeClass"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -1,6 +1,7 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QBreadcrumbsGutterOptions = "none" | "sm" | "md" | "lg";
-export interface QBreadcrumbsProps extends NativeProps {
+export interface QBreadcrumbsProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.
      * @default /
@@ -22,7 +23,7 @@ export interface QBreadcrumbsProps extends NativeProps {
      */
     separatorColor?: string;
 }
-export interface QBreadcrumbsElProps extends NativeProps {
+export interface QBreadcrumbsElProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.
      * @default ""

package/dist/components/button/QBtn.svelte

@@ -1,11 +1,8 @@
-<script>import { createClasses } from "../../utils/props";
-import { createEventDispatcher, onMount } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import QCircularProgress from "../progress/QCircularProgress.svelte";
-import { useSize } from "../../composables/use-size";
-import { isActivationKey } from "../../utils/events";
-import { ripple } from "../../helpers/ripple";
-export let icon = void 0, label = void 0, disable = false, loading = false, unelevated = false, outline = false, round = false, rectangle = false, flat = false, to = void 0, size = void 0, userClasses = void 0;
+<script>import { useSize } from "../../composables";
+import { ripple } from "../../helpers";
+import { createClasses, 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 = void 0;
 export { userClasses as class };
 let qBtn;
 let tag;
@@ -28,6 +25,12 @@ $:
       userClasses
     }
   );
+function stopIfDisabled(e) {
+  if (disable) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
 function onKeyDown(e) {
   if (!isActivationKey(e))
     return;
@@ -40,14 +43,15 @@ function onKeyDown(e) {
 <svelte:element
   this={tag}
   bind:this={qBtn}
-  use:ripple
+  use:ripple={{ disable: noRipple || disable }}
   role={tag === "a" ? "button" : undefined}
   href={to}
   class={classes}
   aria-disabled={disable || undefined}
   tabindex={disable ? -1 : 0}
-  on:click
   on:keydown={onKeyDown}
+  on:click={stopIfDisabled}
+  on:click
   {...$$restProps}
 >
   {#if icon && !loading}

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

@@ -11,10 +11,11 @@ declare const __propDef: {
         outline?: QBtnProps["outline"];
         round?: QBtnProps["round"];
         rectangle?: QBtnProps["rectangle"];
+        noRipple?: QBtnProps["noRipple"];
         flat?: QBtnProps["flat"];
         to?: QBtnProps["to"];
         size?: QBtnProps["size"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

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

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

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

@@ -55,6 +55,14 @@ export const QBtnDocsProps = [
         description: "Use rectangle design for the button, removing the large border-radius.",
         default: "false",
     },
+    {
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Disable the ripple effect for the button.",
+        default: "false",
+    },
     {
         name: "round",
         type: "boolean",
@@ -87,4 +95,12 @@ export const QBtnDocsProps = [
         description: "Size of the button.",
         default: "md",
     },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: 'For "a" (anchor) tag only, apply the target attribute.',
+        default: "undefined",
+    },
 ];

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

@@ -1,6 +1,7 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { NativeProps, QuaffSizes } from "../../utils";
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
 export type QBtnSizeOptions = Exclude<QuaffSizes, "xs">;
-export interface QBtnProps extends NativeProps {
+export interface QBtnProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Puts the button in a disabled state, making it unclickable.
      * @default false
@@ -36,6 +37,11 @@ export interface QBtnProps extends NativeProps {
      * @default false
      */
     rectangle?: boolean;
+    /**
+     * Disable the ripple effect for the button.
+     * @default false
+     */
+    noRipple?: boolean;
     /**
      * Use round design for the button, giving it a circular shape.
      * @default false
@@ -56,4 +62,9 @@ export interface QBtnProps extends NativeProps {
      * @default md
      */
     size?: QBtnSizeOptions;
+    /**
+     * For "a" (anchor) tag only, apply the target attribute.
+     * @default undefined
+     */
+    target?: HTMLAnchorAttributes["target"];
 }

package/dist/components/card/QCard.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 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"];
@@ -7,7 +7,7 @@ $:
 $:
   classes = createClasses([bordered && "bordered", flat && "flat", round && "rounded"], {
     component: "q-card",
-    quaffClasses: [`${color} on-${color}-text`],
+    quaffClasses: [color],
     userClasses
   });
 </script>

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

@@ -8,7 +8,7 @@ declare const __propDef: {
         flat?: QCardProps["flat"];
         round?: QCardProps["round"];
         title?: QCardProps["title"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/card/QCardActions.svelte

@@ -1,5 +1,5 @@
-<script>import useAlign from "../../composables/use-align";
-import { createClasses } from "../../utils/props";
+<script>import { useAlign } from "../../composables";
+import { createClasses } from "../../utils";
 export let align = void 0, vertical = false, userClasses = void 0;
 export { userClasses as class };
 $:

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

@@ -5,7 +5,7 @@ declare const __propDef: {
         [x: string]: any;
         align?: QCardActionsProps["align"];
         vertical?: QCardActionsProps["vertical"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/card/QCardSection.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let horizontal = false, userClasses = void 0;
 export { userClasses as class };
 $:

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         horizontal?: QCardSectionProps["horizontal"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         scroll: Event;

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

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

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

@@ -54,7 +54,7 @@ export const QCardActionsDocsProps = [
     {
         name: "vertical",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "Lays out the action items vertically.",
         default: "false",

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

@@ -1,7 +1,8 @@
-import type { UseAlignProps } from "../../composables/use-align";
-import type { NativeProps } from "../../utils/types";
+import type { UseAlignProps } from "../../composables";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QCardFillColors = "primary" | "secondary" | "tertiary";
-export interface QCardProps extends NativeProps {
+export interface QCardProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Puts a border around the card.
      * @default false
@@ -28,14 +29,14 @@ export interface QCardProps extends NativeProps {
      */
     title?: string;
 }
-export interface QCardSectionProps extends NativeProps {
+export interface QCardSectionProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Lays out the section content horizontally.
      * @default false
      */
     horizontal?: boolean;
 }
-export interface QCardActionsProps extends UseAlignProps, NativeProps {
+export interface QCardActionsProps extends UseAlignProps, NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * Lays out the action items vertically.
      * @default false

package/dist/components/checkbox/QCheckbox.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let value = false, label = "", disable = false, userClasses = void 0;
 export { userClasses as class };
 $:

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         value?: boolean | undefined;
         label?: QCheckboxProps["label"];
         disable?: QCheckboxProps["disable"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

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

@@ -1,5 +1,6 @@
-import type { NativeProps } from "../../utils/types";
-export interface QCheckboxProps extends NativeProps {
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QCheckboxProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     /**
      * Controls the checked state of the checkbox.
      */

package/dist/components/chip/QChip.svelte

@@ -1,11 +1,10 @@
-<script>import { activationHandler } from "../../helpers/activationHandler";
-import { createClasses } from "../../utils/props";
-import { createEventDispatcher } from "svelte";
-import QIcon from "../icon/QIcon.svelte";
-import { useSize } from "../../composables/use-size";
-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;
+<script>import { useSize } from "../../composables";
+import { ripple } from "../../helpers";
+import { createClasses, isActivationKey } from "../../utils";
+import { QIcon } from "../..";
+export let content = void 0, icon = void 0, iconRight = void 0, disable = false, responsive = false, vertical = false, round = false, outlined = false, noRipple = false, size = "md", tabindex = void 0, href = void 0, userClasses = void 0;
 export { userClasses as class };
-const emit = createEventDispatcher();
+let qChip;
 $:
   img = icon?.startsWith("img:") ? icon.slice(4) : void 0;
 $:
@@ -32,15 +31,32 @@ $:
   });
 $:
   tab = disable ? -1 : tabindex ?? 0;
+function stopIfDisabled(e) {
+  if (disable) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
+function onKeyDown(e) {
+  if (!isActivationKey(e))
+    return;
+  e.preventDefault();
+  let click = new MouseEvent("click");
+  qChip.dispatchEvent(click);
+}
 </script>
 
 <a
-  use:activationHandler={{ disable, callback: (e) => emit("activated", e) }}
-  {href}
+  bind:this={qChip}
+  use:ripple={{disable: noRipple || disable}}
+  aria-disabled={disable || undefined}
   class={classes}
+  {href}
   tabindex={tab}
+  on:keydown={onKeyDown}
+  on:click={stopIfDisabled}
+  on:click
   {...$$restProps}
-  aria-disabled={disable || undefined}
 >
   {#if $$slots.leading}
     <slot name="leading" />

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

@@ -11,13 +11,14 @@ declare const __propDef: {
         vertical?: QChipProps["vertical"];
         round?: QChipProps["round"];
         outlined?: QChipProps["outlined"];
+        noRipple?: QChipProps["noRipple"];
         size?: QChipProps["size"];
         tabindex?: QChipProps["tabindex"];
         href?: QChipProps["href"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
-        activated: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

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

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

@@ -63,6 +63,14 @@ export const QChipDocsProps = [
         description: "Use outline design for the chip, adding a border around it.",
         default: "false",
     },
+    {
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
+        clickableType: false,
+        description: "Disable the ripple effect for the chip.",
+        default: "false",
+    },
     {
         name: "size",
         type: "QChipSizeOptions",

package/dist/components/chip/index.scss

@@ -21,7 +21,6 @@
   cursor: pointer;
   border: none;
 
-  @extend .ripple;
   @extend .no-select;
   @include padding("x", "md");
   @include margin("x");
@@ -77,6 +76,24 @@
       border-color: var(--on-surface);
     }
   }
+
+  &:is(:hover, :focus):not([aria-disabled])::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--on-primary);
+  }
+
+  &:hover:not([aria-disabled])::after {
+    opacity: 0.08;
+  }
+
+  &:focus:not([aria-disabled])::after {
+    opacity: 0.16;
+  }
 }
 
 // QChip icons

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

@@ -1,6 +1,7 @@
-import type { NativeProps, QuaffSizes } from "../../utils/types";
+import type { QuaffSizes, NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QChipSizeOptions = Exclude<QuaffSizes, "xs" | "xl">;
-export interface QChipProps extends NativeProps {
+export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElement> {
     /**
      * The content inside the chip. Will overwrite the default slot.
      * @default undefined
@@ -41,6 +42,11 @@ export interface QChipProps extends NativeProps {
      * @default false
      */
     outlined?: boolean;
+    /**
+     * Disable the ripple effect for the chip.
+     * @default false
+     */
+    noRipple?: boolean;
     /**
      * Size of the chip.
      * @default small

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,34 +1,36 @@
 <script>import Highlight from "svelte-highlight";
 import typescript from "svelte-highlight/languages/typescript";
-import "svelte-highlight/styles/material.css";
+import { copy } from "../../utils";
 import { QBtn } from "../..";
 export let language, code = "/* No code found */", title = void 0, copiable = void 0;
 let btnContent = "Copy";
 let btnColor = "primary";
-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(() => {
+function setBtn(type) {
+  switch (type) {
+    case "error":
+      btnContent = "Error while copying...";
+      btnColor = "error";
+      break;
+    case "success":
+      btnContent = "Copied!";
+      btnColor = "green";
+      break;
+    default:
       btnContent = "Copy";
       btnColor = "primary";
-    }, 3e3);
+      break;
   }
 }
+async function copyCode() {
+  await copy(code).catch((_) => {
+    setBtn("error");
+    setTimeout(() => setBtn("base"), 3e3);
+  });
+  setBtn("success");
+  setTimeout(() => {
+    setBtn("base");
+  }, 3e3);
+}
 </script>
 
 <div class="q-code-block">
@@ -38,7 +40,7 @@ async function copyCode() {
         <h4 class="q-ma-none q-pr-lg">{title}</h4>
       {/if}
       <QBtn
-        class="{btnColor}-border {btnColor}-text"
+        class="border-{btnColor} text-{btnColor}"
         size="sm"
         icon="content_copy"
         outline

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

@@ -1,5 +1,4 @@
 import { SvelteComponent } from "svelte";
-import "svelte-highlight/styles/material.css";
 import type { QCodeBlockProps } from "./props";
 declare const __propDef: {
     props: {

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

@@ -1,4 +1,5 @@
-export interface QCodeBlockProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QCodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Language to use for highlighting.
      */

package/dist/components/dialog/QDialog.svelte

@@ -1,7 +1,7 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { clickOutsideDialog } from "../../helpers";
+import { createClasses } from "../../utils";
 import { createEventDispatcher, onMount } from "svelte";
-import QBtn from "../button/QBtn.svelte";
-import { clickOutsideDialog } from "../../helpers";
+import { QBtn } from "../..";
 export let noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
 export { userClasses as class };
 const emit = createEventDispatcher();

package/dist/components/dialog/QDialog.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
         modal?: QDialogProps["modal"];
         fullscreen?: QDialogProps["fullscreen"];
         persistent?: QDialogProps["persistent"];
-        class?: string | undefined;
+        class?: string | null | undefined;
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         toggle?: ((e: MouseEvent) => void) | undefined;

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

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