@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha16

package/dist/components/avatar/QAvatar.svelte

@@ -1,44 +1,62 @@
 <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 let shape = "circle", size = "md", src = void 0, video = false, userClasses = "";
 export { userClasses as class };
-export { userStyles as style };
 $:
   sizeObj = useSize(size);
-$:
-  shapeClass = createClasses([
-    shape === "circle" && "circle",
-    shape === "rounded" && "round",
-    shape.includes("top") && "top-round",
-    shape.includes("bottom") && "bottom-round",
-    shape.includes("left") && "left-round",
-    shape.includes("right") && "right-round"
-  ]);
-$:
-  classes = createClasses([shapeClass, sizeObj.class], {
-    component: "q-avatar",
-    userClasses
-  });
-$:
-  style = createStyles(
-    {
-      width: sizeObj.style,
-      height: sizeObj.style
-    },
-    userStyles
-  );
 </script>
 
 {#if video === true}
   <!-- svelte-ignore a11y-media-has-caption -->
-  <video class={classes} {style} autoplay loop playsinline {...$$restProps} on:click>
+  <video
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    autoplay
+    loop
+    playsinline
+    {...$$restProps}
+    on:click
+  >
     <source {src} type="video/mp4" />
   </video>
 {:else if src !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <img class={classes} {style} {src} {...$$restProps} on:click />
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <img
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    {src}
+    {...$$restProps}
+    on:click
+  />
 {:else}
-  <div class={classes} {style} {...$$restProps} on:click>
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    class="q-avatar {sizeObj.class ? `q-avatar--${sizeObj.class}` : ''} {userClasses}"
+    class:q-avatar--circle={shape === "circle"}
+    class:q-avatar--round={shape === "rounded"}
+    class:q-avatar--top-round={shape?.includes("top")}
+    class:q-avatar--bottom-round={shape?.includes("bottom")}
+    class:q-avatar--left-round={shape?.includes("left")}
+    class:q-avatar--right-round={shape?.includes("right")}
+    style:width={sizeObj.style}
+    style:height={sizeObj.style}
+    {...$$restProps}
+    on:click
+  >
     <slot />
   </div>
 {/if}

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         src?: QAvatarProps["src"];
         video?: QAvatarProps["video"];
         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";
-export declare let QAvatarDocs: QComponentDocs;
+export declare const QAvatarDocs: QComponentDocs;

package/dist/components/avatar/docs.js

@@ -1,5 +1,5 @@
 import { QAvatarDocsProps } from "./docs.props";
-export let QAvatarDocs = {
+export const QAvatarDocs = {
     name: "QAvatar",
     description: "Avatars can be used in many different ways as with icons or for user profile images/videos, for example. They can have many different shapes, the default one being a circle.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 24254a62ac601e8b6e85a3b74a7b3297
 export const QAvatarDocsProps = [
     {
         name: "shape",

package/dist/components/breadcrumbs/QBreadcrumbs.svelte

@@ -1,18 +1,12 @@
-<script>import { createClasses } from "../../utils";
-import { onMount, setContext } from "svelte";
-export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
+<script>import { onMount, setContext } from "svelte";
+export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = "";
 export { userClasses as class };
 let breadcrumbElement;
 onMount(() => breadcrumbElement.firstChild?.remove());
 setContext("activeColor", activeColor);
 setContext("separator", { type: separator, color: separatorColor, gutter });
-$:
-  classes = createClasses([], {
-    component: "q-breadcrumbs",
-    userClasses
-  });
 </script>
 
-<div class={classes} bind:this={breadcrumbElement}>
+<div class="q-breadcrumbs {userClasses}" bind:this={breadcrumbElement}>
   <slot />
 </div>

package/dist/components/breadcrumbs/QBreadcrumbsEl.svelte

@@ -1,30 +1,20 @@
 <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 let label = "", icon = void 0, tag = "div", to = void 0, href = void 0, activeClass = "q-breadcrumbs__el--active", userClasses = "";
 export { userClasses as class };
 const activeColor = getContext("activeColor");
-const separator = getContext("separator");
+const separator = getContext(
+  "separator"
+);
 $:
   isActive = isRouteActive($Quaff.router, href || to);
 $:
-  classes = createClasses([isActive && activeClass], {
-    component: "q-breadcrumbs",
-    element: "el",
-    quaffClasses: [isActive && `text-${activeColor}`],
-    userClasses
-  });
-$:
-  separatorClasses = createClasses([], {
-    component: "q-breadcrumbs",
-    element: "separator",
-    quaffClasses: [`q-px-${separator.gutter}`]
-  });
+  activeClasses = isActive ? `${activeClass} text-${activeColor}` : "";
 </script>
 
-<div class={separatorClasses}>
+<div class="q-breadcrumbs__separator q-px-{separator.gutter}">
   {#if separator.type.startsWith("icon:")}
     <QIcon name={separator.type.replace("icon:", "")} size="1rem" />
   {:else}
@@ -33,7 +23,7 @@ $:
 </div>
 
 {#if href !== undefined || to !== undefined}
-  <a href={href || to} class={classes}>
+  <a href={href || to} class="q-breadcrumb__el {activeClasses} {userClasses}">
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}
@@ -45,7 +35,7 @@ $:
     </slot>
   </a>
 {:else}
-  <svelte:element this={tag} class={classes}>
+  <svelte:element this={tag} class="q-breadcrumb__el {activeClasses} {userClasses}">
     {#if icon !== undefined}
       <QIcon name={icon} size="1rem" />
     {:else if $$slots.icon}

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

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

package/dist/components/breadcrumbs/docs.js

@@ -1,5 +1,5 @@
 import { QBreadcrumbsDocsProps } from "./docs.props";
-export let QBreadcrumbsDocs = {
+export const QBreadcrumbsDocs = {
     name: "QBreadcrumbs",
     description: "Breadcrumbs are mostly used as a navigation aid. They allow users to keep track of their location within the page.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 0e657b47b135caa98d094a90819b9c4e
 export const QBreadcrumbsDocsProps = [
     {
         name: "separator",

package/dist/components/button/QBtn.svelte

@@ -1,8 +1,8 @@
 <script>import { useSize } from "../../composables";
 import { ripple } from "../../helpers";
-import { createClasses, isActivationKey } from "../../utils";
+import { 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 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 = "";
 export { userClasses as class };
 let qBtn;
 let tag;
@@ -11,20 +11,7 @@ $:
 $:
   sizeObj = useSize(size);
 $:
-  classes = createClasses(
-    [
-      unelevated && "unelevated",
-      rectangle && "rectangle",
-      outline && "outlined",
-      flat && "flat",
-      (!$$slots.default && !label || round) && "round",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-btn",
-      userClasses
-    }
-  );
+  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-btn--${sizeObj.class}` : "";
 function stopIfDisabled(e) {
   if (disable) {
     e.preventDefault();
@@ -42,12 +29,20 @@ function onKeyDown(e) {
 
 <svelte:element
   this={tag}
+  use:ripple={{
+    disable: noRipple || disable,
+    color: flat || outline ? undefined : "var(--on-primary)",
+  }}
   bind:this={qBtn}
-  use:ripple={{ disable: noRipple || disable }}
-  role={tag === "a" ? "button" : undefined}
-  href={to}
-  class={classes}
   aria-disabled={disable || undefined}
+  class="q-btn {sizeClass} {userClasses}"
+  class:q-btn--unelevated={unelevated}
+  class:q-btn--outlined={outline}
+  class:q-btn--flat={flat}
+  class:q-btn--rectangle={rectangle}
+  class:q-btn--round={(!$$slots.default && !label) || round}
+  href={to}
+  role={tag === "a" ? "button" : undefined}
   tabindex={disable ? -1 : 0}
   on:keydown={onKeyDown}
   on:click={stopIfDisabled}

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

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

package/dist/components/button/docs.js

@@ -1,5 +1,5 @@
 import { QBtnDocsProps } from "./docs.props";
-export let QBtnDocs = {
+export const QBtnDocs = {
     name: "QBtn",
     description: "Buttons help users take action, such as sending an email, sharing a document, or liking a comment.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 721c97430442b5c05c756e2473f45aeb
 export const QBtnDocsProps = [
     {
         name: "disable",

package/dist/components/button/index.scss

@@ -84,10 +84,15 @@
     width: 100%;
     height: 100%;
     background-color: var(--on-primary);
+    border-radius: inherit;
+  }
+
+  &:is(&--flat, &--outlined):is(:hover, :focus):not([aria-disabled])::after {
+    background-color: var(--on-primary-container);
   }
 
   &:hover:not([aria-disabled])::after {
-    opacity: 0.08;
+    opacity: 0.12;
   }
 
   &:focus:not([aria-disabled])::after {

package/dist/components/card/QCard.svelte

@@ -1,18 +1,17 @@
-<script>import { createClasses } from "../../utils";
-export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = void 0;
+<script>export let bordered = false, fill = void 0, flat = false, round = false, title = void 0, userClasses = "";
 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],
-    userClasses
-  });
 </script>
 
-<article class={classes} {...$$restProps}>
+<article
+  class="q-card {color} {userClasses}"
+  class:q-card--bordered={bordered}
+  class:q-card--flat={flat}
+  class:q-card--rounded={round}
+  {...$$restProps}
+>
   {#if $$slots.title}
     <slot name="title" />
   {:else if title !== undefined}

package/dist/components/card/QCardActions.svelte

@@ -1,18 +1,14 @@
 <script>import { useAlign } from "../../composables";
-import { createClasses } from "../../utils";
-export let align = void 0, vertical = false, userClasses = void 0;
+export let align = void 0, vertical = false, userClasses = "";
 export { userClasses as class };
 $:
   alignClass = useAlign(align);
-$:
-  classes = createClasses([vertical && "vertical"], {
-    component: "q-card",
-    element: "actions",
-    quaffClasses: [alignClass],
-    userClasses
-  });
 </script>
 
-<nav class={classes} {...$$restProps}>
+<nav
+  class="q-card__actions {alignClass} {userClasses}"
+  class:q-card__actions--vertical={vertical}
+  {...$$restProps}
+>
   <slot />
 </nav>

package/dist/components/card/QCardSection.svelte

@@ -1,14 +1,12 @@
-<script>import { createClasses } from "../../utils";
-export let horizontal = false, userClasses = void 0;
+<script>export let horizontal = false, userClasses = "";
 export { userClasses as class };
-$:
-  classes = createClasses([horizontal && "horizontal"], {
-    component: "q-card",
-    element: "section",
-    userClasses
-  });
 </script>
 
-<div class={classes} {...$$restProps} on:scroll>
+<div
+  class="q-card__section {userClasses}"
+  class:q-card__section--horizontal={horizontal}
+  {...$$restProps}
+  on:scroll
+>
   <slot />
 </div>

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

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

package/dist/components/card/docs.js

@@ -1,5 +1,5 @@
 import { QCardActionsDocsProps, QCardDocsProps, QCardSectionDocsProps } from "./docs.props";
-export let QCardDocs = {
+export const QCardDocs = {
     name: "QCard",
     description: "Cards provide a clean, flexible, and convenient means of displaying a wide variety of content.",
     docs: {
@@ -14,7 +14,7 @@ export let QCardDocs = {
         events: [],
     },
 };
-export let QCardSectionDocs = {
+export const QCardSectionDocs = {
     name: "QCardSection",
     description: "Sections are used to group similar content within a card.",
     docs: {
@@ -29,7 +29,7 @@ export let QCardSectionDocs = {
         events: [],
     },
 };
-export let QCardActionsDocs = {
+export const QCardActionsDocs = {
     name: "QCardActions",
     description: "Actions hold actionable items like buttons within a card.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 2ef1416c81c3c5c723220c0c102649eb
 export const QCardDocsProps = [
     {
         name: "bordered",

package/dist/components/checkbox/QCheckbox.svelte

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

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

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

package/dist/components/checkbox/docs.js

@@ -1,5 +1,5 @@
 import { QCheckboxDocsProps } from "./docs.props";
-export let QCheckboxDocs = {
+export const QCheckboxDocs = {
     name: "QCheckbox",
     description: "Checkboxes allow the user to select one or more items from a set.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 9a5ee048cd1eb382844ca517e4e3e645
 export const QCheckboxDocsProps = [
     {
         name: "value",

package/dist/components/chip/QChip.svelte

@@ -1,8 +1,8 @@
 <script>import { useSize } from "../../composables";
 import { ripple } from "../../helpers";
-import { createClasses, isActivationKey } from "../../utils";
+import { 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 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 = "";
 export { userClasses as class };
 let qChip;
 $:
@@ -11,24 +11,6 @@ $:
   imgRight = iconRight?.startsWith("img:") ? iconRight.slice(4) : void 0;
 $:
   sizeObj = useSize(size);
-$:
-  classes = createClasses(
-    [
-      vertical && "vertical",
-      round && "rounded",
-      (outlined || disable) && "bordered",
-      size !== "md" && sizeObj.class
-    ],
-    {
-      component: "q-chip",
-      userClasses
-    }
-  );
-$:
-  imgClass = createClasses([responsive && "responsive"], {
-    component: "q-chip",
-    element: "img"
-  });
 $:
   tab = disable ? -1 : tabindex ?? 0;
 function stopIfDisabled(e) {
@@ -48,9 +30,17 @@ function onKeyDown(e) {
 
 <a
   bind:this={qChip}
-  use:ripple={{disable: noRipple || disable}}
+  use:ripple={{
+    disable: noRipple || disable,
+    color: outlined ? undefined : "var(--on-secondary)",
+  }}
   aria-disabled={disable || undefined}
-  class={classes}
+  class="q-chip {sizeObj.class && sizeObj.class !== 'md'
+    ? `q-chip--${sizeObj.class}`
+    : ''} {userClasses}"
+  class:q-chip--vertical={vertical}
+  class:q-chip--rounded={round}
+  class:q-chip--bordered={outlined || disable}
   {href}
   tabindex={tab}
   on:keydown={onKeyDown}
@@ -61,7 +51,12 @@ function onKeyDown(e) {
   {#if $$slots.leading}
     <slot name="leading" />
   {:else if img}
-    <img class={imgClass} src={img} alt="{content || 'Slotted'} chip" />
+    <img
+      class="q-chip__img"
+      class:q-chip__img--responsive={responsive}
+      src={img}
+      alt="{content || 'Slotted'} chip"
+    />
   {:else if icon}
     <QIcon name={icon} class="q-chip__icon" />
   {/if}
@@ -74,7 +69,8 @@ function onKeyDown(e) {
     <slot name="trailing" />
   {:else if imgRight}
     <img
-      class="{imgClass} q-chip__img--trailing"
+      class="q-chip__img q-chip__img--trailing"
+      class:q-chip__img--responsive={responsive}
       src={imgRight}
       alt="{content || 'Slotted'} chip"
     />

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

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

package/dist/components/chip/docs.js

@@ -1,5 +1,5 @@
 import { QChipDocsProps } from "./docs.props";
-export let QChipDocs = {
+export const 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: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 64a4b0e1fd969d51711b5f49c74fd317
 export const QChipDocsProps = [
     {
         name: "content",

package/dist/components/codeBlock/QCodeBlock.svelte

@@ -1,5 +1,7 @@
 <script>import Highlight from "svelte-highlight";
+import { HighlightSvelte } 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;
@@ -22,7 +24,7 @@ function setBtn(type) {
   }
 }
 async function copyCode() {
-  await copy(code).catch((_) => {
+  await copy(code).catch(() => {
     setBtn("error");
     setTimeout(() => setBtn("base"), 3e3);
   });
@@ -52,21 +54,15 @@ async function copyCode() {
   {:else if title}
     <h4>{title}</h4>
   {/if}
-  <Highlight language={typescript} {code} />
+  {#if language === "ts"}
+    <Highlight language={typescript} {code} />
+  {:else}
+    <HighlightSvelte {code} />
+  {/if}
 </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

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

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

@@ -1,7 +1,9 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash ef59d69362e560f4bed408a966ab4acc
 export const QCodeBlockDocsProps = [
     {
         name: "language",
-        type: "string",
+        type: '"ts" | "svelte"',
         optional: false,
         clickableType: false,
         description: "Language to use for highlighting.",

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

@@ -3,7 +3,7 @@ export interface QCodeBlockProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Language to use for highlighting.
      */
-    language: string;
+    language: "ts" | "svelte";
     /**
      * Code to highlight.
      */