@quaffui/quaff 0.1.0-prealpha10 → 0.1.0-prealpha12

package/dist/components/list/QItem.svelte

@@ -4,10 +4,11 @@ import { createClasses } from "../../utils/props";
 import { getContext, setContext } from "svelte";
 import { Quaff } from "../../stores/Quaff";
 import { writable } from "svelte/store";
-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, userClasses = void 0;
+import { ripple } from "../../helpers/ripple";
+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 { userClasses as class };
-let hasMultiplLines = writable(false);
-setContext("hasMultipleLines", hasMultiplLines);
+let hasMultipleLines = writable(false);
+setContext("hasMultipleLines", hasMultipleLines);
 $:
   ({ hasLink, linkAttributes, linkClasses } = useRouterLink({
     href,
@@ -19,23 +20,25 @@ $:
 $:
   separatorOptions = getContext("separator");
 $:
-  isActionable = clickable === true || hasLink === true || tag === "label";
+  isActionable = clickable || hasLink || tag === "label";
 $:
-  isClickable = disable !== true && isActionable === true;
+  isClickable = isActionable && !disable;
 $:
   isActive = isRouteActive($Quaff.router, to);
 $:
-  classes = createClasses([
-    "q-item flex items-center",
-    $hasMultiplLines && "multiline",
-    dense && "dense",
-    hasLink && active && "q-item--active",
-    hasLink && active && activeClass,
-    isActive && "active",
-    isClickable && "wave",
-    linkClasses,
-    userClasses
-  ]);
+  classes = createClasses(
+    [
+      $hasMultipleLines && "multiline",
+      dense && "dense",
+      (isActive || hasLink && active) && activeClass,
+      (isActive || hasLink && active) && "active"
+    ],
+    {
+      component: "q-item",
+      quaffClasses: [linkClasses],
+      userClasses
+    }
+  );
 $:
   attributes = {
     class: classes,
@@ -50,11 +53,11 @@ $:
 {/if}
 {#if linkAttributes.href !== undefined}
   <!-- svelte-ignore a11y-missing-attribute -->
-  <a {...attributes} {...linkAttributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+  <a use:ripple={{ disable: !isClickable || noRipple }} {...attributes} {...linkAttributes}>
     <slot />
   </a>
 {:else}
-  <div {...attributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
+  <svelte:element this={tag} {...attributes}>
     <slot />
-  </div>
+  </svelte:element>
 {/if}

package/dist/components/list/QItem.svelte.d.ts

@@ -3,23 +3,20 @@ import type { QItemProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        tag?: string | undefined;
-        active?: boolean | undefined;
-        clickable?: boolean | undefined;
-        dense?: boolean | undefined;
-        tabindex?: string | number | undefined;
+        tag?: QItemProps["tag"];
+        active?: QItemProps["active"];
+        clickable?: QItemProps["clickable"];
+        dense?: QItemProps["dense"];
+        tabindex?: QItemProps["tabindex"];
         href?: QItemProps["href"];
         to?: QItemProps["to"];
-        disable?: boolean | undefined;
+        disable?: QItemProps["disable"];
         activeClass?: QItemProps["activeClass"];
-        replace?: boolean | undefined;
-        class?: string | undefined;
+        replace?: QItemProps["replace"];
+        noRipple?: QItemProps["noRipple"];
+        class?: string | null | undefined;
     };
     events: {
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/components/list/QItemSection.svelte

@@ -9,33 +9,37 @@ $:
     $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
   }
 $:
-  classes = createClasses([`q-item__section `, `q-item__section--${type}`, userClasses]);
+  classes = createClasses([type], {
+    component: "q-item__section",
+    userClasses
+  });
 </script>
 
 <div class={classes} {...$$restProps}>
   {#if type === "content"}
-    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean) === false}
+    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].every(Boolean) === false}
       <slot />
-    {/if}
-    {#if $$slots.headline}
-      <div class="body-large on-surface-text">
-        <slot name="headline" />
-      </div>
-    {/if}
-    <div class="body-medium on-surface-variant-text">
-      {#if $$slots.line1}
-        <slot name="line1" />
+    {:else}
+      {#if $$slots.headline}
+        <div class="body-large on-surface-text">
+          <slot name="headline" />
+        </div>
       {/if}
-    </div>
-    {#if $$slots.line2}
       <div class="body-medium on-surface-variant-text">
-        <slot name="line2" />
-      </div>
-    {/if}
-    {#if $$slots.line3}
-      <div class="body-medium on-surface-variant-text">
-        <slot name="line3" />
+        {#if $$slots.line1}
+          <slot name="line1" />
+        {/if}
       </div>
+      {#if $$slots.line2}
+        <div class="body-medium on-surface-variant-text">
+          <slot name="line2" />
+        </div>
+      {/if}
+      {#if $$slots.line3}
+        <div class="body-medium on-surface-variant-text">
+          <slot name="line3" />
+        </div>
+      {/if}
     {/if}
   {:else if type === "trailingText"}
     <div class="label-small on-surface-variant-text">

package/dist/components/list/QItemSection.svelte.d.ts

@@ -3,8 +3,8 @@ import type { QItemSectionProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        type?: import("./props").QItemSectionTypes | undefined;
-        class?: string | undefined;
+        type?: QItemSectionProps["type"];
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/list/QList.svelte

@@ -1,5 +1,4 @@
-<script>import { setIndex } from "../../composables/use-index";
-import { createClasses } from "../../utils/props";
+<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;
 export { userClasses as class };
@@ -8,14 +7,14 @@ onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.re
 $:
   setContext("separator", separator === true ? separatorOptions : void 0);
 $:
-  classes = createClasses([
-    "q-list",
-    bordered && "border",
-    dense && "dense",
-    padding && "q-py-sm",
-    roundedBorders && "rounded-borders",
-    userClasses
-  ]);
+  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>

package/dist/components/list/QList.svelte.d.ts

@@ -3,21 +3,14 @@ import type { QListProps } from "./props";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        bordered?: boolean | undefined;
-        roundedBorders?: boolean | undefined;
-        dense?: boolean | undefined;
-        separator?: boolean | undefined;
-        separatorOptions?: {
-            spacing?: "sm" | "md" | "lg" | "none" | undefined;
-            inset?: boolean | undefined;
-            color?: string | undefined;
-            size?: string | undefined;
-            text?: string | undefined;
-            textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
-        } | undefined;
-        padding?: boolean | undefined;
+        bordered?: QListProps["bordered"];
+        roundedBorders?: QListProps["roundedBorders"];
+        dense?: QListProps["dense"];
+        separator?: QListProps["separator"];
+        separatorOptions?: QListProps["separatorOptions"];
+        padding?: QListProps["padding"];
         tag?: QListProps["tag"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         scroll: Event;

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,28 @@
     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);
+    }
+
+    &:hover:not([aria-disabled])::after {
+      opacity: 0.08;
+    }
+
+    &:focus:not([aria-disabled])::after {
+      opacity: 0.16;
+    }
+
+    &.q-item--multiline {
       padding-block: 12px;
     }
 
@@ -55,7 +77,7 @@
     }
   }
 
-  &.multiline {
+  &--multiline {
     padding-block: 12px;
 
     &

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

@@ -1,12 +1,13 @@
 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 {
-    bordered: boolean;
-    roundedBorders: boolean;
-    dense: boolean;
-    separator: boolean;
-    separatorOptions: {
+import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
+export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
+    bordered?: boolean;
+    roundedBorders?: boolean;
+    dense?: boolean;
+    separator?: boolean;
+    separatorOptions?: {
         spacing?: QSeparatorProps["spacing"];
         inset?: QSeparatorProps["inset"];
         color?: QSeparatorProps["color"];
@@ -14,20 +15,22 @@ export interface QListProps extends NativeProps {
         text?: QSeparatorProps["text"];
         textAlign?: QSeparatorProps["textAlign"];
     };
-    padding: boolean;
+    padding?: boolean;
     tag?: string;
 }
 export declare const QListPropsDefaults: QListProps;
-export interface QItemProps extends UseRouterLinkProps, NativeProps {
-    tag: string;
-    active: boolean;
-    clickable: boolean;
-    dense: boolean;
-    tabindex: string | number;
+export interface QItemProps extends UseRouterLinkProps, NativeProps, HTMLAttributes<HTMLElement> {
+    tag?: string;
+    active?: boolean;
+    clickable?: boolean;
+    dense?: boolean;
+    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 {
-    type: QItemSectionTypes;
+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 { UseRouterLinkPropsDefaults } from "../../composables/use-router-link";
 export const QListPropsDefaults = {
     bordered: false,
     roundedBorders: false,

package/dist/components/progress/QCircularProgress.svelte

@@ -13,7 +13,13 @@ $:
   });
 </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?: boolean | undefined;
-        size?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
+        indeterminate?: QCircularProgressProps["indeterminate"];
+        size?: QCircularProgressProps["size"];
         color?: QCircularProgressProps["color"];
-        thickness?: number | undefined;
-        class?: string | undefined;
+        thickness?: QCircularProgressProps["thickness"];
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -4,10 +4,10 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         value?: number | undefined;
-        from?: "left" | "right" | undefined;
-        rounded?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        from?: QLinearProgressProps["from"];
+        rounded?: QLinearProgressProps["rounded"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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 { HTMLAttributes, SVGAttributes } from "svelte/elements";
+export interface QLinearProgressProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * @default 0
      */
@@ -7,13 +8,13 @@ export interface QLinearProgressProps extends NativeProps {
     /**
      * @default left
      */
-    from: "left" | "right";
+    from?: "left" | "right";
     /**
      * @default false
      */
-    rounded: boolean;
+    rounded?: boolean;
 }
-export interface QCircularProgressProps extends NativeProps {
+export interface QCircularProgressProps extends NativeProps, SVGAttributes<SVGSVGElement> {
     /**
      * @default 0
      */
@@ -21,11 +22,11 @@ export interface QCircularProgressProps extends NativeProps {
     /**
      * @default false
      */
-    indeterminate: boolean;
+    indeterminate?: boolean;
     /**
      * @default 2em
      */
-    size: CssValue | number;
+    size?: CssValue | number;
     /**
      * @default undefined
      */
@@ -33,5 +34,5 @@ export interface QCircularProgressProps extends NativeProps {
     /**
      * @default 5
      */
-    thickness: number;
+    thickness?: number;
 }

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

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

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

@@ -1,8 +1,9 @@
 import type { NativeProps } from "../../utils/types";
-export interface QRadioProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRadioProps extends NativeProps, HTMLAttributes<HTMLLabelElement> {
     value: string;
-    label: string;
-    selected: any;
-    disable: boolean;
+    label?: string;
+    selected?: any;
+    disable?: boolean;
 }
 export declare const QRadioPropsDefaults: QRadioProps;

package/dist/components/railbar/QRailbar.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponent } from "svelte";
 import type { QRailbarProps } from "./props";
 declare const __propDef: {
     props: {
-        width?: number | `${number}px` | `${number}%` | `${number}em` | `${number}ex` | `${number}ch` | `${number}rem` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | undefined;
-        side?: "left" | "right" | undefined;
-        bordered?: boolean | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        width?: QRailbarProps["width"];
+        side?: QRailbarProps["side"];
+        bordered?: QRailbarProps["bordered"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,15 +1,16 @@
 import type { NativeProps, CssValue } from "../../utils/types";
-export interface QRailbarProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export interface QRailbarProps extends NativeProps, HTMLAttributes<HTMLElement> {
     /**
      * @default 88px
      */
-    width: CssValue | number;
+    width?: CssValue | number;
     /**
      * @default left
      */
-    side: "left" | "right";
+    side?: "left" | "right";
     /**
      * @default false
      */
-    bordered: boolean;
+    bordered?: boolean;
 }

package/dist/components/select/QSelect.svelte

@@ -7,7 +7,7 @@ export let options, multiple = false, bordered = false, dense = false, disable =
 export { userClasses as class };
 let active = false;
 $:
-  active = value?.length > 0;
+  active = typeof value === "number" || value?.length > 0;
 $:
   hasBorder = bordered || rounded || outlined;
 $:
@@ -89,7 +89,9 @@ function select(evt, option) {
   if (multiple) {
     const hasItem = value.some((entry) => entry === optionValue);
     if (hasItem) {
-      value = value.filter((val) => val !== optionValue);
+      value = value.filter(
+        (val) => val !== optionValue
+      );
     } else {
       value = [...value, optionValue];
     }

package/dist/components/select/QSelect.svelte.d.ts

@@ -7,16 +7,16 @@ declare const __propDef: {
         multiple?: QSelectProps["multiple"];
         bordered?: QSelectProps["bordered"];
         dense?: QSelectProps["dense"];
-        disable?: boolean | undefined;
-        error?: boolean | undefined;
+        disable?: QSelectProps["disable"];
+        error?: QSelectProps["error"];
         errorMessage?: QSelectProps["errorMessage"];
-        filled?: boolean | undefined;
+        filled?: QSelectProps["filled"];
         hint?: QSelectProps["hint"];
         label?: QSelectProps["label"];
         outlined?: QSelectProps["outlined"];
         rounded?: QSelectProps["rounded"];
         value: QSelectProps["value"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,18 +1,22 @@
-import { type NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils/types";
+import type { HTMLAttributes } from "svelte/elements";
 export type QSelectOption = string | {
     label: string;
     value: string;
 };
-export interface QSelectProps extends NativeProps {
-    value: string | string[] | number | number[];
+export type QSelectValue = QSelectSingleValue | QSelectMultipleValue;
+export type QSelectSingleValue = string | number;
+export type QSelectMultipleValue = QSelectSingleValue[];
+export interface QSelectProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+    value: QSelectValue;
     multiple?: boolean;
     options: QSelectOption[];
     bordered?: boolean;
     dense?: boolean;
-    disable: boolean;
-    error: boolean;
+    disable?: boolean;
+    error?: boolean;
     errorMessage?: string;
-    filled: boolean;
+    filled?: boolean;
     hint?: string;
     label?: string;
     outlined?: boolean;

package/dist/components/select/props.js

@@ -1,4 +1,3 @@
-import "$utils/types";
 export const QSelectPropsDefaults = {
     bordered: false,
     dense: false,

package/dist/components/separator/QSeparator.svelte

@@ -41,7 +41,7 @@ $:
 </script>
 
 {#if text !== undefined}
-  <div class="q-separator__wrapper" style={containerStyle}>
+  <div class="q-separator__wrapper" style={containerStyle} {...$$restProps}>
     {#if (vertical === true && textAlign !== "top") || (vertical === false && textAlign !== "left")}
       <hr class={classes} {style} aria-orientation={orientationClass} />
     {/if}
@@ -51,7 +51,7 @@ $:
     {/if}
   </div>
 {:else}
-  <div class="q-separator__wrapper" style={containerStyle}>
+  <div class="q-separator__wrapper" style={containerStyle} {...$$restProps}>
     <hr class={classes} {style} aria-orientation={orientationClass} />
   </div>
 {/if}

package/dist/components/separator/QSeparator.svelte.d.ts

@@ -2,15 +2,16 @@ import { SvelteComponent } from "svelte";
 import type { QSeparatorProps } from "./props";
 declare const __propDef: {
     props: {
-        spacing?: "sm" | "md" | "lg" | "none" | undefined;
-        inset?: boolean | undefined;
-        vertical?: boolean | undefined;
+        [x: string]: any;
+        spacing?: QSeparatorProps["spacing"];
+        inset?: QSeparatorProps["inset"];
+        vertical?: QSeparatorProps["vertical"];
         color?: QSeparatorProps["color"];
-        size?: string | undefined;
+        size?: QSeparatorProps["size"];
         text?: QSeparatorProps["text"];
-        textAlign?: "top" | "bottom" | "left" | "right" | "center" | "middle" | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
+        textAlign?: QSeparatorProps["textAlign"];
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;