@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha15

package/dist/components/avatar/QAvatar.svelte

@@ -1,44 +1,52 @@
 <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.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,13 @@
 <script>import { createClasses } from "../../utils";
 import { onMount, setContext } from "svelte";
-export let separator = "/", gutter = "sm", activeColor = "primary", separatorColor = "outline", userClasses = void 0;
+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,18 @@
 <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");
 $:
   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 +21,9 @@ $:
 </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,9 @@ $:
     </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.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,17 @@ function onKeyDown(e) {
 
 <svelte:element
   this={tag}
-  bind:this={qBtn}
   use:ripple={{ disable: noRipple || disable }}
-  role={tag === "a" ? "button" : undefined}
-  href={to}
-  class={classes}
+  bind:this={qBtn}
   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.props.js

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

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.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,12 @@
-<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.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,14 @@ function onKeyDown(e) {
 
 <a
   bind:this={qChip}
-  use:ripple={{disable: noRipple || disable}}
+  use:ripple={{ disable: noRipple || disable }}
   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 +48,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 +66,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.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/docs.props.js

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash c12fedd812ba1e4b4a732b44d9624532
 export const QCodeBlockDocsProps = [
     {
         name: "language",

package/dist/components/dialog/QDialog.svelte

@@ -1,61 +1,41 @@
 <script>import { clickOutsideDialog } from "../../helpers";
-import { createClasses } from "../../utils";
-import { createEventDispatcher, onMount } from "svelte";
+import { createEventDispatcher } from "svelte";
 import { QBtn } from "../..";
-export let noBtn = false, btnContent = void 0, btnAttrs = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = void 0;
+export let button = false, buttonLabel = void 0, buttonProps = {}, position = "default", modal = false, fullscreen = false, persistent = false, userClasses = "", value = false;
 export { userClasses as class };
 const emit = createEventDispatcher();
 let dialogElement;
-let opened = false;
-onMount(() => {
-  opened = dialogElement.open;
-  dialogElement.style.display = opened ? "block" : "none";
-});
+const ANIMATION_DURATION = 300;
 $:
-  canHideOnClickOutside = opened && persistent !== true;
-$:
-  positionClass = ["top", "right", "bottom", "left"].includes(position) ? position : void 0;
-$:
-  classes = createClasses(
-    [opened && "active", positionClass, modal && "modal", fullscreen && "max"],
-    {
-      component: "q-dialog",
-      userClasses
+  if (dialogElement) {
+    if (value) {
+      dialogElement.style.visibility = "visible";
+      modal ? dialogElement.showModal() : dialogElement.show();
+    } else {
+      dialogElement.close();
+      setTimeout(() => {
+        dialogElement.style.visibility = "hidden";
+      }, ANIMATION_DURATION);
     }
-  );
-export function hide() {
-  if (dialogElement && dialogElement.open) {
-    dialogElement.close();
-    opened = false;
-    setTimeout(() => {
-      dialogElement.style.display = "none";
-    }, 250);
   }
+$:
+  canHideOnClickOutside = value && !persistent;
+export function hide() {
+  value = false;
 }
 export function show() {
-  if (dialogElement && !dialogElement.open) {
-    modal ? dialogElement.showModal() : dialogElement.show();
-    opened = true;
-    dialogElement.style.display = "block";
-  }
+  value = true;
 }
 export function toggle(e) {
-  if (dialogElement) {
-    opened = !opened;
-    if (dialogElement.open) {
-      hide();
-    } else {
-      show();
-    }
-  }
-  e.stopPropagation();
+  value = !value;
+  e?.stopPropagation();
 }
 function addAnimation() {
-  if (persistent && opened) {
+  if (persistent && value) {
     dialogElement?.classList.add("animating");
     setTimeout(() => {
       dialogElement?.classList.remove("animating");
-    }, 150);
+    }, ANIMATION_DURATION);
   }
 }
 function handleKeyboardHide(e) {
@@ -75,17 +55,28 @@ function handleClickHide() {
 }
 </script>
 
-{#if noBtn === false}
-  <QBtn {...btnAttrs} on:click={toggle} on:click={(event) => emit("btnClick", event)}>
-    <slot name="button">
-      {btnContent || ""}
-    </slot>
+{#if button}
+  <QBtn
+    {...buttonProps}
+    label={buttonLabel}
+    on:click={toggle}
+    on:click={(event) => emit("buttonClick", event)}
+  >
+    <slot name="button" />
   </QBtn>
 {/if}
 
 <dialog
   use:clickOutsideDialog={handleClickHide}
-  class={classes}
+  class="q-dialog {userClasses}"
+  class:q-dialog--active={value}
+  class:q-dialog--top={position === "top"}
+  class:q-dialog--right={position === "right"}
+  class:q-dialog--bottom={position === "bottom"}
+  class:q-dialog--left={position === "left"}
+  class:q-dialog--modal={modal}
+  class:q-dialog--fullscreen={fullscreen}
+  class:q-dialog--persistent={persistent}
   {...$$restProps}
   bind:this={dialogElement}
   on:cancel={handleKeyboardHide}

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

@@ -3,20 +3,21 @@ import type { QDialogProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        noBtn?: QDialogProps["noBtn"];
-        btnContent?: QDialogProps["btnContent"];
-        btnAttrs?: QDialogProps["btnAttrs"];
+        button?: QDialogProps["button"];
+        buttonLabel?: QDialogProps["buttonLabel"];
+        buttonProps?: QDialogProps["buttonProps"];
         position?: QDialogProps["position"];
         modal?: QDialogProps["modal"];
         fullscreen?: QDialogProps["fullscreen"];
         persistent?: QDialogProps["persistent"];
         class?: string | null | undefined;
+        value?: boolean | undefined;
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
-        toggle?: ((e: MouseEvent) => void) | undefined;
+        toggle?: ((e?: MouseEvent) => void) | undefined;
     };
     events: {
-        btnClick: CustomEvent<any>;
+        buttonClick: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 4086c9cbacac3999316434c5d965375c
 export const QBtnDocsProps = [
     {
         name: "disable",
@@ -114,7 +116,7 @@ export const QDialogDocsProps = [
         default: "true",
     },
     {
-        name: "noBtn",
+        name: "button",
         type: "boolean",
         optional: true,
         clickableType: false,
@@ -122,15 +124,15 @@ export const QDialogDocsProps = [
         default: "false",
     },
     {
-        name: "btnContent",
+        name: "buttonLabel",
         type: "string",
         optional: true,
         clickableType: false,
-        description: "The content to be displayed on the dialog button.",
+        description: 'The label of the trigger button. Requires "button" to be set.',
         default: "undefined",
     },
     {
-        name: "btnAttrs",
+        name: "buttonProps",
         type: "QBtnProps",
         optional: true,
         clickableType: false,

package/dist/components/dialog/index.scss

@@ -21,6 +21,7 @@
     0s background-color;
   transform: translate(-50%, -4rem);
   animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transform-origin: top left;
 
   &:is(&--active, [open]) {
     opacity: 1;
@@ -29,7 +30,7 @@
   }
 
   &::backdrop {
-    display: none;
+    visibility: hidden;
   }
 
   &:not(&--left, &--right, &--top, &--bottom) {
@@ -57,7 +58,7 @@
     transform: translate(-50%, 0);
   }
 
-  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--max) {
+  &:is(&--active, [open]):is(&--left, &--right, &--top, &--bottom, &--fullscreen) {
     transform: translate(0, 0);
   }
 
@@ -111,7 +112,7 @@
     transform: translateY(100%);
   }
 
-  &--max {
+  &--fullscreen {
     top: 0;
     left: 0;
     right: auto;
@@ -152,7 +153,7 @@
   }
 
   &--modal::backdrop {
-    display: block;
+    visibility: visible;
     background-color: rgba(0, 0, 0, 0.5);
   }