@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha15

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/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/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.props.js

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 587610290cf9d959dd89496d6b94a98e
 export const QIconDocsProps = [
     {
         name: "size",

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.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,12 @@ $:
   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,21 @@
-<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.props.js

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 19dd7fe617657229e8599e139a0a55a7
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",

package/dist/components/private/QDocsSection.svelte

@@ -14,7 +14,7 @@
         class="snippet-dialog"
         bind:value={dialog}
         btnAttrs={{ outline: true, round: true, icon: "code" }}
-        on:btnClick={() => (dialog = true)}
+        on:buttonClick={() => (dialog = true)}
         modal
       >
         <QCodeBlock code={snippets[title]} language="svelte" {title} copiable />

package/dist/components/progress/QCircularProgress.svelte

@@ -1,26 +1,28 @@
 <script>import { useSize } from "../../composables";
-import { createClasses } from "../../utils";
-export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
+export let value = 0, indeterminate = false, size = "2rem", color = void 0, thickness = 5, userClasses = void 0;
 export { userClasses as class };
 $:
   spinnerSize = useSize(size);
+const circumference = 2 * Math.PI * 20;
 $:
-  classes = createClasses([indeterminate && "indeterminate"], {
-    component: "q-circular-progress",
-    quaffClasses: [color && `text-${color}`],
-    userClasses
-  });
+  progressOffset = (100 - value) / 100 * circumference;
 </script>
 
 <svg
-  class={classes}
+  class="q-circular-progress {color ? `text-${color}` : ''} {userClasses}"
+  class:q-circular-progress--indeterminate={indeterminate}
   height={spinnerSize.style}
   width={spinnerSize.style}
   viewBox="25 25 50 50"
+  style="transform: rotate3d(0, 0, 1, -90deg);"
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin={0}
+  aria-valuemax={100}
   {...$$restProps}
 >
   <circle
-    class="path"
+    class="q-circular-progress__path"
     cx="50"
     cy="50"
     r="20"
@@ -28,5 +30,7 @@ $:
     stroke="currentColor"
     stroke-width={thickness}
     stroke-miterlimit="10"
+    stroke-dasharray={circumference}
+    stroke-dashoffset={progressOffset}
   />
 </svg>

package/dist/components/progress/QLinearProgress.svelte

@@ -1,26 +1,20 @@
-<script>import { createClasses, createStyles } from "../../utils";
-export let value = 0, from = "left", rounded = false, userClasses = void 0, userStyles = void 0;
-export { userClasses as class, userStyles as style };
-$:
-  roundedStyle = {
-    borderRadius: rounded ? "12px" : "0"
-  };
-$:
-  containerClasses = createClasses(["small-space", "border"], {
-    component: "q-linear-progress",
-    userClasses
-  });
-$:
-  progressClasses = createClasses([from], {
-    component: "q-linear-progress",
-    element: "progress"
-  });
-$:
-  containerStyle = createStyles(roundedStyle, userStyles);
-$:
-  progressStyle = from === "right" ? `clip-path: polygon(100% 0%, 100% 100%, ${100 - value}% 100%, ${100 - value}% 0%);` : `clip-path: polygon(0% 0%, 0% 100%, ${value}% 100%, ${value}% 0%);`;
+<script>export let value = 0, from = "left", rounded = false, userClasses = "";
+export { userClasses as class };
 </script>
 
-<div class={containerClasses} style={containerStyle} {...$$restProps}>
-  <div class={progressClasses} style={progressStyle} />
+<div
+  class="q-linear-progress {userClasses}"
+  class:q-linear-progress--rounded={rounded}
+  class:q-linear-progress--right={from === "right"}
+  role="progressbar"
+  aria-valuenow={value}
+  aria-valuemin={0}
+  aria-valuemax={100}
+  {...$$restProps}
+>
+  <div
+    class="q-linear-progress__progress"
+    class:q-linear-progress__progress--right={from === "right"}
+    style="--progress:{value}%"
+  />
 </div>

package/dist/components/progress/QLinearProgress.svelte.d.ts

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

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

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

package/dist/components/progress/index.scss

@@ -3,15 +3,28 @@
   height: 1rem;
   @include border;
 
+  &--rounded {
+    border-radius: 0.75rem;
+  }
+
   &__progress {
     position: absolute;
-    background-color: var(--active);
+    background-color: var(--primary);
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     transition: var(--speed4) clip-path;
-    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
+    clip-path: polygon(0% 0%, 0% 100%, var(--progress) 100%, var(--progress) 0%);
+  }
+
+  &--right &__progress {
+    clip-path: polygon(
+      100% 0%,
+      100% 100%,
+      calc(100% - var(--progress)) 100%,
+      calc(100% - var(--progress)) 0%
+    );
   }
 }
 
@@ -19,11 +32,15 @@
 .q-circular-progress {
   vertical-align: middle;
 
+  .q-circular-progress__path {
+    transition: stroke-dashoffset 0.3s ease;
+  }
+
   &--indeterminate {
     animation: q-spin 2s linear infinite;
     transform-origin: center center;
 
-    & .path {
+    .q-circular-progress__path {
       stroke-dasharray: 1, 200;
       stroke-dashoffset: 0;
       animation: q-load 1.5s ease-in-out infinite;

package/dist/components/radio/QRadio.svelte

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

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

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

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 59d32044c3aee07fb108f91f740e8e1a
 export const QRailbarDocsProps = [
     {
         name: "width",

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

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

package/dist/components/separator/QSeparator.svelte

@@ -1,58 +1,52 @@
 <script>import { useSize } from "../../composables";
-import { createStyles, createClasses } from "../../utils";
-export let spacing = "none", inset = false, vertical = false, color = void 0, size = void 0, text = void 0, textAlign = vertical === true ? "middle" : "center", userClasses = void 0;
+export let spacing = "none", inset = false, vertical = false, color = void 0, size = void 0, text = void 0, textAlign = vertical ? "middle" : "center", userClasses = void 0;
 export { userClasses as class };
 let orientation;
 $:
   orientation = vertical ? "vertical" : "horizontal";
 $:
-  spacingClass = useSize(spacing).class;
+  spacingClass = useSize(spacing).class || "";
 $:
-  classes = createClasses([
-    vertical && "vertical",
-    `spacing-${spacingClass}`
-  ], {
-    component: "q-separator",
-    quaffClasses: [
-      color && `bg-${color}`
-    ]
-  });
+  colorClass = color ? `bg-${color}` : "";
 </script>
 
 {#if text}
-<div
-  class="q-separator__wrapper {userClasses || ''}"
-  class:q-separator--vertical__wrapper={vertical}
-  class:q-separator--inset__wrapper={inset}
-  {...$$restProps}
->
-  {#if (vertical === true && textAlign !== "top") || (vertical === false && textAlign !== "left")}
-    <hr
-      class={classes}
-      style:--q-separator--size={size}
-      aria-orientation={orientation}
-    />
-  {/if}
-  <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
-  {#if (vertical === true && textAlign !== "bottom") || (vertical === false && textAlign !== "right")}
+  <div
+    class="q-separator__wrapper {userClasses || ''}"
+    class:q-separator--vertical__wrapper={vertical}
+    class:q-separator--inset__wrapper={inset}
+    {...$$restProps}
+  >
+    {#if (vertical && textAlign !== "top") || (!vertical && textAlign !== "left")}
+      <hr
+        class="q-separator {spacingClass} {colorClass}"
+        class:q-separator--vertical={vertical}
+        style:--q-separator--size={size}
+        aria-orientation={orientation}
+      />
+    {/if}
+    <div class={vertical ? "q-py-sm" : "q-px-sm"}>{text}</div>
+    {#if (vertical && textAlign !== "bottom") || (!vertical && textAlign !== "right")}
+      <hr
+        class="q-separator {spacingClass} {colorClass}"
+        class:q-separator--vertical={vertical}
+        style:--q-separator--size={size}
+        aria-orientation={orientation}
+      />
+    {/if}
+  </div>
+{:else}
+  <div
+    class="q-separator__wrapper {userClasses || ''}"
+    class:q-separator--vertical__wrapper={vertical}
+    class:q-separator--inset__wrapper={inset}
+    {...$$restProps}
+  >
     <hr
-      class={classes}
+      class="q-separator {spacingClass} {colorClass}"
+      class:q-separator--vertical={vertical}
       style:--q-separator--size={size}
       aria-orientation={orientation}
     />
-  {/if}
-</div>
-{:else}
-<div
-  class="q-separator__wrapper {userClasses || ''}"
-  class:q-separator--vertical__wrapper={vertical}
-  class:q-separator--inset__wrapper={inset}
-  {...$$restProps}
->
-  <hr
-    class={classes}
-    style:--q-separator--size={size}
-    aria-orientation={orientation}
-  />
-</div>
-{/if}
+  </div>
+{/if}

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

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

package/dist/components/table/QTable.svelte

@@ -1,5 +1,4 @@
-<script>import { createClasses } from "../../utils";
-import { QIcon, QSelect, QBtn } from "../..";
+<script>import { QIcon, QSelect, QBtn } from "../..";
 export let columns = [], rows = [], flat = void 0, bordered = void 0, dense = false, userClasses = "";
 export { userClasses as class };
 function getField(fieldRaw, row) {
@@ -11,17 +10,6 @@ let rowsPerPageOptions = [5, 10, 25, 50].map((e) => ({
   label: e.toString(),
   value: e.toString()
 }));
-$:
-  classes = createClasses([], {
-    component: "q-table",
-    userClasses
-  });
-$:
-  classesTable = createClasses([flat && "flat", bordered && "bordered", dense && "dense"], {
-    component: "q-table",
-    element: "table",
-    userClasses
-  });
 let sort = null;
 let rowsSorted = rows;
 let rowsPaginated = [];
@@ -86,8 +74,13 @@ function setSort(column) {
 }
 </script>
 
-<div class={classes} {...$$restProps}>
-  <table class={classesTable}>
+<div class="q-table" {...$$restProps}>
+  <table
+    class="q-table__table {userClasses}"
+    class:q-table--flat={flat}
+    class:q-table--bordered={bordered}
+    class:q-table--dense={dense}
+  >
     <thead>
       <tr>
         {#each columns as column}

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 45c443accd2682faeefb3243e9ba5116
 export const QTableDocsProps = [
     {
         name: "columns",

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 448513ccbdd5582cec72c379c9659fc0
 export const QTabsDocsProps = [
     {
         name: "value",
@@ -28,7 +30,7 @@ export const QTabDocsProps = [
     {
         name: "name",
         type: "string",
-        optional: true,
+        optional: false,
         clickableType: false,
         description: "",
         default: "",