@quaffui/quaff 0.1.0-prealpha12 → 0.1.0-prealpha15

package/dist/components/list/QList.svelte

@@ -1,22 +1,21 @@
-<script>import { createClasses } from "../../utils/props";
-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/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QListDocs: QComponentDocs;

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

@@ -1,16 +1,18 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 19dd7fe617657229e8599e139a0a55a7
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "QuaffSizes",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +20,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "vertical",
         type: "true",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +52,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "textAlign",
         type: '"top" | "middle" | "bottom"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -59,16 +61,16 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: '"none" | "sm" | "md" | "lg"',
-        optional: false,
-        clickableType: false,
+        type: "QuaffSizes",
+        optional: true,
+        clickableType: true,
         description: "",
         default: "",
     },
     {
         name: "inset",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -76,7 +78,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "vertical",
         type: "false",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -92,7 +94,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -108,7 +110,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "textAlign",
         type: '"left" | "center" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -118,7 +120,7 @@ export const QListDocsProps = [
     {
         name: "bordered",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -126,7 +128,7 @@ export const QListDocsProps = [
     {
         name: "roundedBorders",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -134,7 +136,7 @@ export const QListDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -142,7 +144,7 @@ export const QListDocsProps = [
     {
         name: "separator",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -150,7 +152,7 @@ export const QListDocsProps = [
     {
         name: "separatorOptions",
         type: 'QSeparatorProps["textAlign"]\n  };',
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "",
         default: "",
@@ -158,7 +160,7 @@ export const QListDocsProps = [
     {
         name: "padding",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -176,7 +178,7 @@ export const QItemDocsProps = [
     {
         name: "tag",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -184,7 +186,7 @@ export const QItemDocsProps = [
     {
         name: "active",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -192,7 +194,7 @@ export const QItemDocsProps = [
     {
         name: "clickable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -200,25 +202,41 @@ export const QItemDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
     {
-        name: "tabindex",
-        type: "string | number",
-        optional: false,
+        name: "noRipple",
+        type: "boolean",
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
     },
+    {
+        name: "tabindex",
+        type: 'HTMLAttributes<HTMLElement>["tabindex"]',
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "target",
+        type: 'HTMLAnchorAttributes["target"]',
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];
 export const QItemSectionDocsProps = [
     {
         name: "type",
         type: "QItemSectionTypes",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "",
         default: "",

package/dist/components/list/index.scss

@@ -58,6 +58,7 @@
       width: 100%;
       height: 100%;
       background-color: var(--on-surface);
+      border-radius: inherit;
     }
 
     &:hover:not([aria-disabled])::after {

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

@@ -1,7 +1,7 @@
-import { type NativeProps } from "../../utils/types";
 import type { UseRouterLinkProps } from "../../composables/use-router-link";
 import type { QSeparatorProps } from "../separator/props";
 import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
 export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
     bordered?: boolean;
     roundedBorders?: boolean;

package/dist/components/list/props.js

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

package/dist/components/private/QApi.svelte

@@ -1,5 +1,4 @@
-<script>import { capitalize } from "../../utils/string";
-import {
+<script>import {
   QCard,
   QIcon,
   QTabs,
@@ -11,6 +10,7 @@ import {
   QDrawer,
   QCodeBlock
 } from "../..";
+import { capitalize } from "../../utils";
 import Types from "../../utils/types.json";
 export let QComponentDocs;
 let api = QComponentDocs.map((_doc) => "props");

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { QComponentDocs } from "../../utils/types";
+import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
         QComponentDocs: QComponentDocs[];

package/dist/components/private/QDocs.svelte

@@ -1,5 +1,5 @@
-<script>import { QCard, QCardSection } from "../..";
-import { Quaff } from "../../stores/Quaff";
+<script>import { Quaff } from "../../stores";
+import { QCard, QCardSection } from "../..";
 import QApi from "./QApi.svelte";
 export let QComponentDocs;
 $:

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { QComponentDocs } from "../../utils/types";
+import type { QComponentDocs } from "../../utils";
 declare const __propDef: {
     props: {
         QComponentDocs: QComponentDocs | QComponentDocs[];

package/dist/components/private/QDocsSection.svelte

@@ -1,6 +1,5 @@
 <script>
-  import { QDialog } from "../..";
-  import QCodeBlock from "../codeBlock/QCodeBlock.svelte";
+  import { QCodeBlock, QDialog } from "../..";
 
   export let title, snippets;
 
@@ -15,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,27 +1,28 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses } from "../../utils/props";
-import { isNumber } from "../../utils/types";
-export let value = 0, indeterminate = false, size = "2em", color = void 0, thickness = 5, userClasses = void 0;
+<script>import { useSize } from "../../composables";
+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 && `${color}-text`],
-    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"
@@ -29,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/props";
-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/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QProgressDocs: QComponentDocs;

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",
@@ -5,23 +7,23 @@ export const QLinearProgressDocsProps = [
         optional: false,
         clickableType: false,
         description: "",
-        default: "",
+        default: "0",
     },
     {
         name: "from",
         type: '"left" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "left",
     },
     {
         name: "rounded",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];
 export const QCircularProgressDocsProps = [
@@ -31,23 +33,23 @@ export const QCircularProgressDocsProps = [
         optional: false,
         clickableType: false,
         description: "",
-        default: "",
+        default: "0",
     },
     {
         name: "indeterminate",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
     {
         name: "size",
-        type: "string | number",
-        optional: false,
-        clickableType: false,
+        type: "CssValue | number",
+        optional: true,
+        clickableType: true,
         description: "",
-        default: "",
+        default: "2em",
     },
     {
         name: "color",
@@ -55,14 +57,14 @@ export const QCircularProgressDocsProps = [
         optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "undefined",
     },
     {
         name: "thickness",
         type: "number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "5",
     },
 ];

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/progress/props.d.ts

@@ -1,4 +1,4 @@
-import type { NativeProps, CssValue } from "../../utils/types";
+import type { NativeProps, CssValue } from "../../utils";
 import type { HTMLAttributes, SVGAttributes } from "svelte/elements";
 export interface QLinearProgressProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**

package/dist/components/radio/QRadio.svelte

@@ -1,14 +1,8 @@
-<script>import { createClasses } from "../../utils/props";
-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/types";
+import type { QComponentDocs } from "../../utils";
 export declare let QRadioDocs: QComponentDocs;

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",
@@ -10,7 +12,7 @@ export const QRadioDocsProps = [
     {
         name: "label",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +20,7 @@ export const QRadioDocsProps = [
     {
         name: "selected",
         type: "any",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +28,7 @@ export const QRadioDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

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

@@ -1,5 +1,5 @@
-import type { NativeProps } from "../../utils/types";
 import type { HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
 export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;

package/dist/components/radio/props.js

@@ -1,4 +1,4 @@
-import { NativePropsDefaults } from "../../utils/types";
+import { NativePropsDefaults } from "../../utils";
 export const QRadioPropsDefaults = {
     value: "",
     label: "",

package/dist/components/railbar/QRailbar.svelte

@@ -1,6 +1,6 @@
-<script>import { getContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import { useSize } from "../../composables/use-size";
+<script>import { useSize } from "../../composables";
+import { createClasses, createStyles } from "../../utils";
+import { getContext } from "svelte";
 import { derived } from "svelte/store";
 export let width = 88, side = "left", bordered = false, userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };

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

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