@quaffui/quaff 0.1.0-prealpha14 → 0.1.0-prealpha16

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

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

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

@@ -1,4 +1,4 @@
-import type { UseRouterLinkProps } from "../../composables/use-router-link";
+import type { UseRouterLinkProps } from "../../composables/useRouterLink";
 import type { QSeparatorProps } from "../separator/props";
 import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
 import type { NativeProps } from "../../utils";

package/dist/components/list/props.js

@@ -1,5 +1,5 @@
 import { NativePropsDefaults } from "../../utils";
-import { UseRouterLinkPropsDefaults } from "../../composables/use-router-link";
+import { UseRouterLinkPropsDefaults } from "../../composables/useRouterLink";
 export const QListPropsDefaults = {
     bordered: false,
     roundedBorders: false,

package/dist/components/private/QApi.svelte

@@ -12,10 +12,10 @@
 } from "../..";
 import { capitalize } from "../../utils";
 import Types from "../../utils/types.json";
-export let QComponentDocs;
-let api = QComponentDocs.map((_doc) => "props");
+export let componentDocs;
+let api = componentDocs.map(() => "props");
 let drawer = Object.fromEntries(
-  QComponentDocs.map((doc) => [
+  componentDocs.map((doc) => [
     doc.name,
     Object.fromEntries(
       doc.docs.props.map((prop) => [prop.name, prop.clickableType ? false : void 0])
@@ -53,7 +53,7 @@ function handleDrawer(QDocument, doc, e) {
 }
 </script>
 
-{#each QComponentDocs as QDocument, index}
+{#each componentDocs as QDocument, index}
   <QCard class="q-px-none q-pb-none q-mt-lg">
     <div slot="title" class="flex justify-between items-center q-px-md">
       <h5 class="no-margin">
@@ -92,7 +92,7 @@ function handleDrawer(QDocument, doc, e) {
                   {#if isProp(doc, index)}
                     {doc.optional ? "?" : ""}
                     {#if doc.clickableType === true}
-                      <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
                       <span
                         class="prop-type clickable"
                         on:click={(e) => isProp(doc, index) && handleDrawer(QDocument, doc, e)}
@@ -113,6 +113,7 @@ function handleDrawer(QDocument, doc, e) {
                 </span>
               </div>
               <div slot="line1" class="q-mt-sm prop-description" style="white-space: normal;">
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                 {@html doc.description}
               </div>
             </QItemSection>
@@ -130,8 +131,14 @@ function handleDrawer(QDocument, doc, e) {
   color: var(--primary);
 }
 
-.q-item {
-  overflow: visible;
+.prop-type {
+  opacity: 0.75;
+}
+.prop-type.clickable {
+  cursor: pointer;
+}
+.prop-type.clickable:hover {
+  opacity: 1;
 }
 
 :global(.q-drawer.api-drawer pre) {

package/dist/components/private/QApi.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
-        QComponentDocs: QComponentDocs[];
+        componentDocs: QComponentDocs[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/private/QDocs.svelte

@@ -1,10 +1,10 @@
 <script>import { Quaff } from "../../stores";
 import { QCard, QCardSection } from "../..";
 import QApi from "./QApi.svelte";
-export let QComponentDocs;
+export let componentDocs;
 $:
   isDark = $Quaff.dark.isActive;
-let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QComponentDocs;
+let principalDocument = Array.isArray(componentDocs) ? componentDocs[0] : componentDocs;
 </script>
 
 <div class="q-docs" style="margin: 1rem">
@@ -39,7 +39,7 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
     </QCard>
   </div>
 
-  <QApi QComponentDocs={Array.isArray(QComponentDocs) ? QComponentDocs : [QComponentDocs]} />
+  <QApi componentDocs={Array.isArray(componentDocs) ? componentDocs : [componentDocs]} />
 
   {#if $$slots.usage}
     <div class="s12 q-pa-md">
@@ -78,16 +78,6 @@ let principalDocument = Array.isArray(QComponentDocs) ? QComponentDocs[0] : QCom
   font-size: 1.75rem;
 }
 
-.prop-type {
-  opacity: 0.75;
-}
-.prop-type.clickable {
-  cursor: pointer;
-}
-.prop-type.clickable:hover {
-  opacity: 1;
-}
-
 .heading-usage {
   display: flex;
   align-items: center;

package/dist/components/private/QDocs.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
-        QComponentDocs: QComponentDocs | QComponentDocs[];
+        componentDocs: QComponentDocs | QComponentDocs[];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/private/QDocsSection.svelte

@@ -1,9 +1,6 @@
-<script>
-  import { QCodeBlock, QDialog } from "../..";
-
-  export let title, snippets;
-
-  let dialog = false;
+<script>import { QCodeBlock, QDialog } from "../..";
+export let title, snippets = void 0;
+let dialog = false;
 </script>
 
 <div style="margin-bottom:48px">
@@ -13,8 +10,9 @@
       <QDialog
         class="snippet-dialog"
         bind:value={dialog}
-        btnAttrs={{ outline: true, round: true, icon: "code" }}
-        on:btnClick={() => (dialog = true)}
+        button
+        buttonProps={{ outline: true, round: true, icon: "code" }}
+        on:buttonClick={() => (dialog = true)}
         modal
       >
         <QCodeBlock code={snippets[title]} language="svelte" {title} copiable />
@@ -23,9 +21,3 @@
   </div>
   <slot />
 </div>
-
-<style>
-  pre {
-    max-height: 400px;
-  }
-</style>

package/dist/components/private/QDocsSection.svelte.d.ts

@@ -1,23 +1,8 @@
-/** @typedef {typeof __propDef.props}  QDocsSectionProps */
-/** @typedef {typeof __propDef.events}  QDocsSectionEvents */
-/** @typedef {typeof __propDef.slots}  QDocsSectionSlots */
-export default class QDocsSection extends SvelteComponent<{
-    title: any;
-    snippets: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type QDocsSectionProps = typeof __propDef.props;
-export type QDocsSectionEvents = typeof __propDef.events;
-export type QDocsSectionSlots = typeof __propDef.slots;
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        title: any;
-        snippets: any;
+        title: string;
+        snippets?: Record<string, string> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -26,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type QDocsSectionProps = typeof __propDef.props;
+export type QDocsSectionEvents = typeof __propDef.events;
+export type QDocsSectionSlots = typeof __propDef.slots;
+export default class QDocsSection extends SvelteComponent<QDocsSectionProps, QDocsSectionEvents, QDocsSectionSlots> {
+}
 export {};

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

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

package/dist/components/progress/docs.js

@@ -1,5 +1,5 @@
 import { QLinearProgressDocsProps } from "./docs.props";
-export let QProgressDocs = {
+export const QProgressDocs = {
     name: "QProgress",
     description: "The QProgress component is used to display a progress bar, indicating the completion status of a task or process.",
     docs: {

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

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

package/dist/components/radio/docs.js

@@ -1,4 +1,4 @@
-export let QRadioDocs = {
+export const QRadioDocs = {
     name: "QRadio",
     description: "Radio buttons allow the user to select one option from a set.",
     docs: {

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

@@ -1,3 +1,5 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 023f166466a04ae52838fa2fcbf5b5f9
 export const QRadioDocsProps = [
     {
         name: "value",
@@ -17,7 +19,7 @@ export const QRadioDocsProps = [
     },
     {
         name: "selected",
-        type: "any",
+        type: "unknown",
         optional: true,
         clickableType: false,
         description: "",

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

@@ -3,7 +3,7 @@ import type { NativeProps } from "../../utils";
 export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;
-    selected?: any;
+    selected?: unknown;
     disable?: boolean;
 }
 export declare const QRadioPropsDefaults: QRadioProps;

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

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

package/dist/components/railbar/docs.js

@@ -1,5 +1,5 @@
 import { QRailbarDocsProps } from "./docs.props";
-export let QRailbarDocs = {
+export const QRailbarDocs = {
     name: "QRailbar",
     description: "Railbars are used to provide navigation between different sections or views within an application.",
     docs: {

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

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

package/dist/components/select/docs.js

@@ -1,4 +1,4 @@
-export let QSelectDocs = {
+export const QSelectDocs = {
     name: "QSelect",
     description: "QSelect is a form component that allows users to choose from multiple options in a dropdown list. It supports single and multiple selection, as well as different visual styles such as filled, outlined, and rounded.",
     docs: {

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

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

package/dist/components/separator/docs.js

@@ -1,5 +1,5 @@
 import { QSeparatorPropsVertical } from "./docs.props";
-export let QSeparatorDocs = {
+export const QSeparatorDocs = {
     name: "QSeparator",
     description: "Separators can be used to create a dividing line or space between elements within a layout, offering visual separation and organization.",
     docs: {

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

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

package/dist/components/table/docs.js

@@ -1,5 +1,5 @@
 import { QTableDocsProps } from "./docs.props";
-export let QTableDocs = {
+export const QTableDocs = {
     name: "QTable",
     description: "Tables allow for a clear presentation of data sets.",
     docs: {

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",