@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

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

@@ -1,16 +1,16 @@
 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 +18,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "vertical",
         type: "true",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -50,7 +50,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "textAlign",
         type: '"top" | "middle" | "bottom"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -59,16 +59,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 +76,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "vertical",
         type: "false",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -92,7 +92,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -108,7 +108,7 @@ export const QSeparatorPropsHorizontal = [
     {
         name: "textAlign",
         type: '"left" | "center" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -118,7 +118,7 @@ export const QListDocsProps = [
     {
         name: "bordered",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -126,7 +126,7 @@ export const QListDocsProps = [
     {
         name: "roundedBorders",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -134,7 +134,7 @@ export const QListDocsProps = [
     {
         name: "dense",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -142,7 +142,7 @@ export const QListDocsProps = [
     {
         name: "separator",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -150,7 +150,7 @@ export const QListDocsProps = [
     {
         name: "separatorOptions",
         type: 'QSeparatorProps["textAlign"]\n  };',
-        optional: false,
+        optional: true,
         clickableType: true,
         description: "",
         default: "",
@@ -158,7 +158,7 @@ export const QListDocsProps = [
     {
         name: "padding",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -176,7 +176,7 @@ export const QItemDocsProps = [
     {
         name: "tag",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -184,7 +184,7 @@ export const QItemDocsProps = [
     {
         name: "active",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -192,7 +192,7 @@ export const QItemDocsProps = [
     {
         name: "clickable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -200,25 +200,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

@@ -5,11 +5,15 @@
   justify-content: center;
   width: 100%;
 
-  &.rounded-borders {
+  &--bordered {
+    @include border;
+  }
+
+  &--rounded {
     border-radius: 0.25rem;
   }
 
-  &.dense {
+  &--dense {
     min-height: 32px;
     padding-block: 0;
 
@@ -43,10 +47,29 @@
     width: 40px;
   }
 
-  &.wave {
+  &.q-link {
     padding: 8px 24px 8px 16px;
 
-    &.multiline {
+    &:is(:hover, :focus):not([aria-disabled])::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--on-surface);
+      border-radius: inherit;
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
+    }
+
+    &.q-item--multiline {
       padding-block: 12px;
     }
 
@@ -55,7 +78,7 @@
     }
   }
 
-  &.multiline {
+  &--multiline {
     padding-block: 12px;
 
     &

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

@@ -1,7 +1,8 @@
-import { type NativeProps } from "../../utils/types";
+import type { UseRouterLinkProps } from "../../composables/use-router-link";
 import type { QSeparatorProps } from "../separator/props";
-import { type UseRouterLinkProps } from "../../composables/use-router-link";
-export interface QListProps extends NativeProps {
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
+export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
     bordered?: boolean;
     roundedBorders?: boolean;
     dense?: boolean;
@@ -18,16 +19,18 @@ export interface QListProps extends NativeProps {
     tag?: string;
 }
 export declare const QListPropsDefaults: QListProps;
-export interface QItemProps extends UseRouterLinkProps, NativeProps {
+export interface QItemProps extends UseRouterLinkProps, NativeProps, HTMLAttributes<HTMLElement> {
     tag?: string;
     active?: boolean;
     clickable?: boolean;
     dense?: boolean;
-    tabindex?: string | number;
+    noRipple?: boolean;
+    tabindex?: HTMLAttributes<HTMLElement>["tabindex"];
+    target?: HTMLAnchorAttributes["target"];
 }
 export declare const QItemPropsDefaults: QItemProps;
 export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
-export interface QItemSectionProps extends NativeProps {
+export interface QItemSectionProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     type?: QItemSectionTypes;
 }
 export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/list/props.js

@@ -1,5 +1,5 @@
-import { NativePropsDefaults } from "../../utils/types";
-import { UseRouterLinkPropsDefaults, } from "../../composables/use-router-link";
+import { NativePropsDefaults } from "../../utils";
+import { UseRouterLinkPropsDefaults } from "../../composables/use-router-link";
 export const QListPropsDefaults = {
     bordered: false,
     roundedBorders: 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;
 

package/dist/components/progress/QCircularProgress.svelte

@@ -1,6 +1,5 @@
-<script>import { useSize } from "../../composables/use-size";
-import { createClasses } from "../../utils/props";
-import { isNumber } from "../../utils/types";
+<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 { userClasses as class };
 $:
@@ -8,12 +7,18 @@ $:
 $:
   classes = createClasses([indeterminate && "indeterminate"], {
     component: "q-circular-progress",
-    quaffClasses: [color && `${color}-text`],
+    quaffClasses: [color && `text-${color}`],
     userClasses
   });
 </script>
 
-<svg class={classes} height={spinnerSize.style} width={spinnerSize.style} viewBox="25 25 50 50">
+<svg
+  class={classes}
+  height={spinnerSize.style}
+  width={spinnerSize.style}
+  viewBox="25 25 50 50"
+  {...$$restProps}
+>
   <circle
     class="path"
     cx="50"

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

@@ -2,12 +2,13 @@ import { SvelteComponent } from "svelte";
 import type { QCircularProgressProps } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         value?: number | undefined;
         indeterminate?: QCircularProgressProps["indeterminate"];
         size?: QCircularProgressProps["size"];
         color?: QCircularProgressProps["color"];
         thickness?: QCircularProgressProps["thickness"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/progress/QLinearProgress.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses, createStyles } from "../../utils/props";
+<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 };
 $:

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

@@ -6,8 +6,8 @@ declare const __propDef: {
         value?: number | undefined;
         from?: QLinearProgressProps["from"];
         rounded?: QLinearProgressProps["rounded"];
-        class?: string | undefined;
-        style?: string | undefined;
+        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

@@ -5,23 +5,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 +31,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 +55,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/props.d.ts

@@ -1,5 +1,6 @@
-import type { NativeProps, CssValue } from "../../utils/types";
-export interface QLinearProgressProps extends NativeProps {
+import type { NativeProps, CssValue } from "../../utils";
+import type { HTMLAttributes, SVGAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * @default 0
      */
@@ -13,7 +14,7 @@ export interface QLinearProgressProps extends NativeProps {
      */
     rounded?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps {
+export interface QCircularProgressProps extends NativeProps, SVGAttributes<SVGSVGElement> {
     /**
      * @default 0
      */

package/dist/components/radio/QRadio.svelte

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 export let value = "", label = "", selected = void 0, disable = false, userClasses = "";
 export { userClasses as class };
 $:

package/dist/components/radio/QRadio.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         label?: QRadioProps["label"];
         selected?: QRadioProps["selected"];
         disable?: QRadioProps["disable"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -10,7 +10,7 @@ export const QRadioDocsProps = [
     {
         name: "label",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -18,7 +18,7 @@ export const QRadioDocsProps = [
     {
         name: "selected",
         type: "any",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +26,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,6 @@
-import type { NativeProps } from "../../utils/types";
-export interface QRadioProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+import type { NativeProps } from "../../utils";
+export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
     label?: string;
     selected?: any;

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/QRailbar.svelte.d.ts

@@ -5,8 +5,8 @@ declare const __propDef: {
         width?: QRailbarProps["width"];
         side?: QRailbarProps["side"];
         bordered?: QRailbarProps["bordered"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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;

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

@@ -1,26 +1,26 @@
 export const QRailbarDocsProps = [
     {
         name: "width",
-        type: "number | string",
-        optional: false,
+        type: "CssValue | number",
+        optional: true,
         clickableType: true,
         description: "",
-        default: "",
+        default: "88px",
     },
     {
         name: "side",
         type: '"left" | "right"',
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "left",
     },
     {
         name: "bordered",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
-        default: "",
+        default: "false",
     },
 ];