@quaffui/quaff 0.1.0-prealpha12 → 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/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,4 +1,4 @@
-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;

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/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/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,4 +1,4 @@
-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, HTMLAttributes<HTMLDivElement> {

package/dist/components/button/QBtn.svelte

@@ -1,10 +1,7 @@
-<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";
+<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;
@@ -28,6 +25,12 @@ $:
       userClasses
     }
   );
+function stopIfDisabled(e) {
+  if (disable) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+}
 function onKeyDown(e) {
   if (!isActivationKey(e))
     return;
@@ -46,8 +49,9 @@ function onKeyDown(e) {
   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/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,4 +1,4 @@
-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, HTMLAttributes<HTMLElement> {

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/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/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/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,5 +1,5 @@
-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, HTMLAttributes<HTMLElement> {

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/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,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QCheckboxProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     /**

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 | 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,4 +1,4 @@
-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, HTMLAttributes<HTMLAnchorElement> {
@@ -42,6 +42,11 @@ export interface QChipProps extends NativeProps, HTMLAttributes<HTMLAnchorElemen
      * @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/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/docs.d.ts

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

package/dist/components/dialog/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,6 +95,14 @@ 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",
+    },
 ];
 export const QDialogDocsProps = [
     {

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

@@ -1,4 +1,4 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 import type { QBtnProps } from "../button/props";
 export type QDialogPositionOptions = "default" | "top" | "right" | "bottom" | "left";

package/dist/components/drawer/QDrawer.svelte

@@ -1,8 +1,8 @@
 <script>import { navigating } from "$app/stores";
-import { createClasses, createStyles } from "../../utils/props";
-import { getContext } from "svelte";
+import { useSize } from "../../composables";
 import { clickOutside } from "../../helpers";
-import { useSize } from "../../composables/use-size";
+import { createClasses, createStyles } from "../../utils";
+import { getContext } from "svelte";
 import { derived } from "svelte/store";
 export let value = false, side = "left", width = 300, breakpoint = 1023, showIfAbove = false, behavior = "default", bordered = false, elevated = false, overlay = false, persistent = false, noSwipeOpen = false, noSwipeClose = false, noSwipeBackdrop = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };

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

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

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

@@ -17,7 +17,7 @@ export const QDrawerDocsProps = [
     },
     {
         name: "width",
-        type: "number | string",
+        type: "number | CssValue",
         optional: true,
         clickableType: true,
         description: 'The width of the drawer. Can be specified with a CSS unit. If no unit is specified, "px" will be used.',

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export type QDrawerSideOptions = "left" | "right";
 export type QDrawerBehaviorOptions = "default" | "desktop" | "mobile";

package/dist/components/footer/QFooter.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
+import { getContext } from "svelte";
 export let value = true, border = false, elevate = false, height = void 0, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");

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

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

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

@@ -8,7 +8,7 @@ export const QFooterDocsProps = [
         default: "true",
     },
     {
-        name: "bordered",
+        name: "border",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -16,7 +16,7 @@ export const QFooterDocsProps = [
         default: "false",
     },
     {
-        name: "elevated",
+        name: "elevate",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -25,9 +25,9 @@ export const QFooterDocsProps = [
     },
     {
         name: "height",
-        type: "string | number",
+        type: "number | CssValue",
         optional: true,
-        clickableType: false,
+        clickableType: true,
         description: 'The height of the footer. Can be specified with a CSS unit. If not specified, "px" will be used. (not supported yet)',
         default: "undefined",
     },

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

@@ -1,4 +1,4 @@
-import type { CssValue, NativeProps } from "../../utils/types";
+import type { CssValue, NativeProps } from "../../utils";
 import type { HTMLAttributes } from "svelte/elements";
 export interface QFooterProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**

package/dist/components/header/QHeader.svelte

@@ -1,6 +1,6 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 import { getContext } from "svelte";
-import QToolbar from "../toolbar/QToolbar.svelte";
+import { QToolbar } from "../..";
 export let inset = false, elevate = false, border = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 let ctx = getContext("layout");

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

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