@quaffui/quaff 0.1.0-prealpha10 → 0.1.0-prealpha12

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

@@ -1,21 +1,22 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 interface QSeparatorPropsVertical extends NativeProps {
-    spacing: "none" | "sm" | "md" | "lg";
-    inset: boolean;
-    vertical: true;
+    spacing?: "none" | "sm" | "md" | "lg";
+    inset?: boolean;
+    vertical?: true;
     color?: string;
     size: string;
     text?: string;
-    textAlign: "top" | "middle" | "bottom";
+    textAlign?: "top" | "middle" | "bottom";
 }
-interface QSeparatorPropsHorizontal extends NativeProps {
-    spacing: "none" | "sm" | "md" | "lg";
-    inset: boolean;
-    vertical: false;
+interface QSeparatorPropsHorizontal extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    spacing?: "none" | "sm" | "md" | "lg";
+    inset?: boolean;
+    vertical?: false;
     color?: string;
-    size: string;
+    size?: string;
     text?: string;
-    textAlign: "left" | "center" | "right";
+    textAlign?: "left" | "center" | "right";
 }
 export type QSeparatorProps = QSeparatorPropsHorizontal | QSeparatorPropsVertical;
 export declare const QSeparatorPropsDefaults: QSeparatorProps;

package/dist/components/table/QTable.svelte

@@ -88,7 +88,7 @@ function setSort(column) {
 }
 </script>
 
-<div class={classes}>
+<div class={classes} {...$$restProps}>
   <table class={classesTable}>
     <thead>
       <tr>

package/dist/components/table/QTable.svelte.d.ts

@@ -3,12 +3,13 @@ import type { QTableProps } from "./props";
 import type { QTableColumn, QTableRow } from "./props";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         columns?: QTableColumn[] | undefined;
         rows?: QTableRow[] | undefined;
         flat?: QTableProps["flat"];
         bordered?: QTableProps["bordered"];
-        dense?: boolean | undefined;
-        class?: string | undefined;
+        dense?: QTableProps["dense"];
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,4 +1,5 @@
 import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTableColumn = {
     name: string;
     required?: boolean;
@@ -16,7 +17,7 @@ export type QTableSort = {
     columnField: string | ((row: QTableRow) => string);
     type: "asc" | "desc";
 } | null;
-export interface QTableProps extends NativeProps {
+export interface QTableProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * Column definitions of the table.
      * @default []
@@ -41,5 +42,5 @@ export interface QTableProps extends NativeProps {
      * Shows the Table in dense mode (takes up less space).
      * @default false
      */
-    dense: boolean;
+    dense?: boolean;
 }

package/dist/components/tabs/QTab.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         name?: QTabProps["name"];
         to?: QTabProps["to"];
         icon?: QTabProps["icon"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/tabs/QTabs.svelte.d.ts

@@ -3,10 +3,10 @@ import type { QTabsProps } from "./props";
 declare const __propDef: {
     props: {
         value?: QTabsProps["value"];
-        variant?: import("./props").QTabsVariants | undefined;
-        round?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        variant?: QTabsProps["variant"];
+        round?: QTabsProps["round"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tabs/index.scss

@@ -7,7 +7,7 @@
   overflow: auto;
   scroll-behavior: smooth;
   border-radius: 0;
-  border-bottom: solid 0.0625rem var(--outline);
+  border-bottom: solid 0.0625rem var(--outline-4);
   &::-webkit-scrollbar {
     display: none;
   }
@@ -26,6 +26,7 @@
     border-radius: 0;
     gap: 0;
     overflow: hidden;
+    @include padding("x", "md");
 
     & .q-tab__icon {
       margin-right: 0.25rem;
@@ -62,7 +63,7 @@
     width: fit-content;
     align-items: stretch;
     border-bottom: unset;
-    border-right: solid 0.0625rem var(--outline);
+    border-right: solid 0.0625rem var(--outline-4);
 
     & > .q-tab {
       @include padding("x", "md");

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

@@ -1,12 +1,13 @@
 import { type NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QTabsVariants = "primary" | "secondary" | "vertical";
-export interface QTabsProps extends NativeProps {
+export interface QTabsProps extends NativeProps, HTMLAttributes<HTMLElement> {
     value?: string;
-    variant: QTabsVariants;
-    round: boolean;
+    variant?: QTabsVariants;
+    round?: boolean;
 }
 export declare const QTabsPropsDefaults: QTabsProps;
-export interface QTabProps extends NativeProps {
+export interface QTabProps extends NativeProps, HTMLAttributes<HTMLElement> {
     name?: string;
     to?: string;
     icon?: string;

package/dist/components/toggle/QToggle.svelte

@@ -18,7 +18,15 @@ function toggle() {
 }
 </script>
 
-<div on:click={toggle} class={classes} aria-disabled={disable} {...$$restProps}>
+<div
+  on:click={toggle}
+  class={classes}
+  aria-disabled={disable}
+  role="switch"
+  aria-checked={value}
+  tabindex="0"
+  {...$$restProps}
+>
   <label class={classesInner}>
     <input bind:checked={value} type="checkbox" disabled={disable} />
     <span>

package/dist/components/toggle/QToggle.svelte.d.ts

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

package/dist/components/toolbar/QToolbar.svelte.d.ts

@@ -3,12 +3,12 @@ import type { QToolbarProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        inset?: boolean | undefined;
-        border?: boolean | undefined;
-        elevate?: boolean | undefined;
-        height?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        inset?: QToolbarProps["inset"];
+        border?: QToolbarProps["border"];
+        elevate?: QToolbarProps["elevate"];
+        height?: QToolbarProps["height"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/toolbar/QToolbarTitle.svelte.d.ts

@@ -3,9 +3,9 @@ import type { QToolbarTitleProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        shrink?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        shrink?: QToolbarTitleProps["shrink"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,25 +1,26 @@
 import type { NativeProps, CssValue } from "../../utils/types";
-export interface QToolbarProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QToolbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * @default false
      */
-    inset: boolean;
+    inset?: boolean;
     /**
      * @default false
      */
-    border: boolean;
+    border?: boolean;
     /**
      * @default false
      */
-    elevate: boolean;
+    elevate?: boolean;
     /**
      * @default 64px
      */
-    height: CssValue | number;
+    height?: CssValue | number;
 }
-export interface QToolbarTitleProps extends NativeProps {
+export interface QToolbarTitleProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * @default false
      */
-    shrink: boolean;
+    shrink?: boolean;
 }

package/dist/components/tooltip/QTooltip.svelte.d.ts

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: QTooltipProps["value"];
-        position?: "top" | "bottom" | "left" | "right" | undefined;
-        class?: string | undefined;
+        position?: QTooltipProps["position"];
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,6 +1,7 @@
 import type { NativeProps } from "../../utils/types";
-export interface QTooltipProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QTooltipProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     value?: boolean;
-    position: "top" | "right" | "bottom" | "left";
+    position?: "top" | "right" | "bottom" | "left";
 }
 export declare const QTooltipPropsDefaults: QTooltipProps;

package/dist/composables/use-router-link.d.ts

@@ -2,9 +2,9 @@ import type { Page } from "@sveltejs/kit";
 export interface UseRouterLinkProps {
     href?: string;
     to?: string;
-    disable: boolean;
+    disable?: boolean;
     activeClass?: string;
-    replace: boolean;
+    replace?: boolean;
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
 export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;

package/dist/composables/use-router-link.js

@@ -12,11 +12,11 @@ export function isRouteActive(router, to) {
         : router.url.pathname.slice(0, (to || "").length) === to;
 }
 export default function (props) {
-    const hasLink = props.to !== undefined || props.href !== undefined;
+    const hasLink = [props.to, props.href].some((entry) => typeof entry !== "undefined");
     const linkClasses = createClasses([hasLink && "q-link", props.disable && "disable"]);
     const linkAttributes = {
         href: props.to || props.href,
-        "data-sveltkit-reload": props.replace === true ? "" : undefined,
+        "data-sveltkit-reload": props.replace ? "" : undefined,
     };
     return {
         hasLink,