@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha16

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.d.ts

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

package/dist/components/dialog/docs.js

@@ -1,5 +1,5 @@
 import { QDialogDocsProps } from "./docs.props";
-export let QDialogDocs = {
+export const QDialogDocs = {
     name: "QDialog",
     description: "Dialogs provide important prompts in a user flow.",
     docs: {

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);
   }
 

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

@@ -12,17 +12,17 @@ export interface QDialogProps extends NativeProps, HTMLAttributes<HTMLDialogElem
      * Wether the dialog should have a trigger button or not.
      * @default false
      */
-    noBtn?: boolean;
+    button?: boolean;
     /**
-     * The content to be displayed on the dialog button.
+     * The label of the trigger button. Requires "button" to be set.
      * @default undefined
      */
-    btnContent?: string;
+    buttonLabel?: string;
     /**
      * Additional attributes for the dialog button.
      * @default {}
      */
-    btnAttrs?: QBtnProps;
+    buttonProps?: QBtnProps;
     /**
      * The position of the dialog relative to the viewport.
      * @default "default"

package/dist/components/drawer/QDrawer.svelte

@@ -4,13 +4,10 @@ import { clickOutside } from "../../helpers";
 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 let value = false, side = "left", width = 300, bordered = false, overlay = false, persistent = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
   canHideOnClickOutside = value === true && persistent === false || overlay === true;
-$:
-  belowBreakpoint = behavior === "mobile" === true || behavior !== "desktop" && /** TODO: Get Layout width */
-  1300 <= breakpoint;
 $:
   widthStyle = !$ctx && useSize(width).style;
 $:

package/dist/components/drawer/QDrawer.svelte.d.ts

@@ -6,16 +6,9 @@ declare const __propDef: {
         value?: QDrawerProps["value"];
         side?: QDrawerProps["side"];
         width?: QDrawerProps["width"];
-        breakpoint?: QDrawerProps["breakpoint"];
-        showIfAbove?: QDrawerProps["showIfAbove"];
-        behavior?: QDrawerProps["behavior"];
         bordered?: QDrawerProps["bordered"];
-        elevated?: QDrawerProps["elevated"];
         overlay?: QDrawerProps["overlay"];
         persistent?: QDrawerProps["persistent"];
-        noSwipeOpen?: QDrawerProps["noSwipeOpen"];
-        noSwipeClose?: QDrawerProps["noSwipeClose"];
-        noSwipeBackdrop?: QDrawerProps["noSwipeBackdrop"];
         class?: string | null | undefined;
         style?: string | null | undefined;
         show?: ((e?: MouseEvent) => void) | undefined;

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

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

package/dist/components/drawer/docs.js

@@ -1,5 +1,5 @@
 import { QDrawerDocsProps } from "./docs.props";
-export let QDrawerDocs = {
+export const QDrawerDocs = {
     name: "QDrawer",
     description: "Navigation drawers provide ergonomic access to destinations in an app",
     docs: {

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

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

package/dist/components/footer/QFooter.svelte

@@ -21,8 +21,10 @@ $:
   );
 </script>
 
-<footer class={classes} {style}>
-  <nav>
-    <slot />
-  </nav>
-</footer>
+{#if value}
+  <footer class={classes} {style}>
+    <nav>
+      <slot />
+    </nav>
+  </footer>
+{/if}

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

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

package/dist/components/footer/docs.js

@@ -1,5 +1,5 @@
 import { QFooterDocsProps } from "./docs.props";
-export let QFooterDocs = {
+export const QFooterDocs = {
     name: "QFooter",
     description: "Footers can be used to display navigation and key actions at the bottom of the screen.",
     docs: {

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 921eb52eb977e8c823f9b2c8af39279f
 export const QToolbarDocsProps = [
     {
         name: "inset",

package/dist/components/icon/QIcon.svelte

@@ -1,22 +1,10 @@
 <script>import { useSize } from "../../composables";
-import { createClasses, createStyles } from "../../utils";
-export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
+export let size = "md", name = void 0, type = "outlined", filled = false, svg = void 0, img = void 0, imgAttributes = {}, color = void 0, userClasses = "";
+export { userClasses as class };
 $:
   sizeObj = useSize(size);
 $:
-  classes = createClasses([type, filled && "filled", sizeObj.class], {
-    component: "q-icon",
-    userClasses,
-    quaffClasses: [color && `text-${color}`]
-  });
-$:
-  style = createStyles(
-    {
-      "--size": sizeObj.style
-    },
-    userStyles
-  );
+  sizeClass = sizeObj.class && sizeObj.class !== "md" ? `q-icon--${sizeObj.class}` : "";
 $:
   imgAttrs = {
     alt: "Quaff Image Icon",
@@ -24,7 +12,12 @@ $:
   };
 </script>
 
-<i class={classes} {style} {...$$restProps}>
+<i
+  class="q-icon q-icon--{type} {sizeClass} {color ? `text-${color}` : ''} {userClasses}"
+  class:q-icon--filled={filled}
+  style:--size={sizeObj.style}
+  {...$$restProps}
+>
   {#if name !== undefined}
     {name}
   {:else if img !== undefined}

package/dist/components/icon/QIcon.svelte.d.ts

@@ -12,7 +12,6 @@ declare const __propDef: {
         imgAttributes?: QIconProps["imgAttributes"];
         color?: QIconProps["color"];
         class?: string | null | undefined;
-        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

package/dist/components/icon/docs.js

@@ -1,5 +1,5 @@
 import { QIconDocsProps } from "./docs.props";
-export let QIconDocs = {
+export const QIconDocs = {
     name: "QIcon",
     description: "This component allows you to insert icons within elements of the page. Supported cions are Material Symbols icons.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 3f17452783c0d6c46d1ec71661554ebd
 export const QIconDocsProps = [
     {
         name: "size",
@@ -49,9 +51,9 @@ export const QIconDocsProps = [
     },
     {
         name: "imgAttributes",
-        type: "Record<string, any>",
+        type: "HTMLImgAttributes",
         optional: true,
-        clickableType: true,
+        clickableType: false,
         description: 'Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.',
         default: "{}",
     },

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

@@ -1,5 +1,5 @@
 import type { CssValue, NativeProps, QuaffSizes } from "../../utils";
-import type { HTMLAttributes } from "svelte/elements";
+import type { HTMLAttributes, HTMLImgAttributes } from "svelte/elements";
 export type QIconSizeOptions = QuaffSizes | CssValue | number;
 export type QIconTypeOptions = "outlined" | "sharp" | "rounded";
 export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
@@ -37,7 +37,7 @@ export interface QIconProps extends NativeProps, HTMLAttributes<HTMLElement> {
      * Additional attributes for the image element when using the `img` prop, as for example the "alt" attribute.
      * @default {}
      */
-    imgAttributes?: Record<string, any>;
+    imgAttributes?: HTMLImgAttributes;
     /**
      * The color of the icon.
      * @default undefined

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

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

package/dist/components/input/docs.js

@@ -1,4 +1,4 @@
-export let QInputDocs = {
+export const QInputDocs = {
     name: "QInput",
     description: "QInput is a form component that allows users to input text. It supports different visual styles such as filled, outlined, and rounded, and it can also display hint text and custom error messages.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 901937b41d79099a96a3713827911b68
 export const QInputDocsProps = [
     {
         name: "dense",

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

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

package/dist/components/layout/docs.js

@@ -1,5 +1,5 @@
 import { QLayoutDocsProps } from "./docs.props";
-export let QLayoutDocs = {
+export const QLayoutDocs = {
     name: "QLayout",
     description: "The QLayout component is designed to be the skeleton of the entire page, with navigational elements such as header, railbars, drawers and footer. This component is not mandatory but it really helps structure the page.",
     docs: {

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

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

package/dist/components/list/QItem.svelte

@@ -1,11 +1,10 @@
 <script>import { useRouterLink, isRouteActive } from "../../composables";
 import { ripple } from "../../helpers";
 import { Quaff } from "../../stores/Quaff";
-import { createClasses } from "../../utils";
 import { setContext, getContext } from "svelte";
 import { writable } from "svelte/store";
 import { QSeparator } from "../..";
-export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = void 0, replace = false, noRipple = false, userClasses = void 0;
+export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = "", replace = false, noRipple = false, userClasses = "";
 export { userClasses as class };
 let hasMultipleLines = writable(false);
 setContext("hasMultipleLines", hasMultipleLines);
@@ -25,27 +24,6 @@ $:
   isClickable = isActionable && !disable;
 $:
   isActive = isRouteActive($Quaff.router, to);
-$:
-  classes = createClasses(
-    [
-      $hasMultipleLines && "multiline",
-      dense && "dense",
-      (isActive || hasLink && active) && activeClass,
-      (isActive || hasLink && active) && "active"
-    ],
-    {
-      component: "q-item",
-      quaffClasses: [linkClasses],
-      userClasses
-    }
-  );
-$:
-  attributes = {
-    class: classes,
-    tabindex: isClickable == true ? Number(tabindex) || 0 : void 0,
-    "aria-disabled": isActionable === true && disable === true ? true : void 0,
-    ...$$restProps
-  };
 </script>
 
 {#if separatorOptions !== undefined}
@@ -53,11 +31,33 @@ $:
 {/if}
 {#if linkAttributes.href !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <a use:ripple={{ disable: !isClickable || noRipple }} {...attributes} {...linkAttributes}>
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <a
+    use:ripple={{ disable: !isClickable || noRipple }}
+    class="q-item {linkClasses} {userClasses}"
+    class:q-item--active={isActive || (hasLink && active)}
+    class:q-item--multiline={$hasMultipleLines}
+    class:q-item--dense={dense}
+    class:{activeClass}={isActive || (hasLink && active)}
+    tabindex={isClickable ? Number(tabindex) || 0 : -1}
+    aria-disabled={(isActionable && disable) || undefined}
+    {...linkAttributes}
+    {...$$restProps}
+  >
     <slot />
   </a>
 {:else}
-  <svelte:element this={tag} {...attributes}>
+  <svelte:element
+    this={tag}
+    class="q-item {userClasses}"
+    class:q-item--active={isActive || (hasLink && active)}
+    class:q-item--multiline={$hasMultipleLines}
+    class:q-item--dense={dense}
+    class:{activeClass}={isActive || (hasLink && active)}
+    tabindex={isClickable ? Number(tabindex) || 0 : -1}
+    aria-disabled={(isActionable && disable) || undefined}
+    {...$$restProps}
+  >
     <slot />
   </svelte:element>
 {/if}

package/dist/components/list/QItemSection.svelte

@@ -1,6 +1,5 @@
-<script>import { createClasses } from "../../utils";
-import { getContext } from "svelte";
-export let type = "content", userClasses = void 0;
+<script>import { getContext } from "svelte";
+export let type = "content", userClasses = "";
 export { userClasses as class };
 $:
   ctx = getContext("hasMultipleLines");
@@ -8,14 +7,9 @@ $:
   if (type === "content") {
     $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
   }
-$:
-  classes = createClasses([type], {
-    component: "q-item__section",
-    userClasses
-  });
 </script>
 
-<div class={classes} {...$$restProps}>
+<div class="q-item__section q-item__section--{type} {userClasses}" {...$$restProps}>
   {#if type === "content"}
     {#if ![$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean)}
       <slot />

package/dist/components/list/QList.svelte

@@ -1,22 +1,22 @@
-<script>import { createClasses } from "../../utils";
-import { onMount, setContext } from "svelte";
-export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = void 0;
+<script>import { onMount, setContext } from "svelte";
+export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = "";
 export { userClasses as class };
 let listElement;
 onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.remove());
 $:
   setContext("separator", separator === true ? separatorOptions : void 0);
-$:
-  classes = createClasses(
-    [bordered && "bordered", dense && "dense", roundedBorders && "rounded"],
-    {
-      component: "q-list",
-      quaffClasses: [padding && "q-py-sm"],
-      userClasses
-    }
-  );
 </script>
 
-<svelte:element this={tag} class={classes} {...$$restProps} bind:this={listElement} on:scroll>
+<svelte:element
+  this={tag}
+  class="q-list {userClasses}"
+  class:q-list--bordered={bordered}
+  class:q-list--rounded={roundedBorders}
+  class:q-list--dense={dense}
+  class:q-py-sm={padding}
+  {...$$restProps}
+  bind:this={listElement}
+  on:scroll
+>
   <slot />
 </svelte:element>

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

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

package/dist/components/list/docs.js

@@ -1,5 +1,5 @@
 import { QListDocsProps } from "./docs.props";
-export let QListDocs = {
+export const QListDocs = {
     name: "QList",
     description: "The QList component is used to display a list of items with options for adding text, icons and actions.",
     docs: {