@quaffui/quaff 0.1.0-prealpha11 → 0.1.0-prealpha14

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

@@ -1,12 +1,4 @@
 export const QInputDocsProps = [
-    {
-        name: "bordered",
-        type: "boolean",
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
-    },
     {
         name: "dense",
         type: "boolean",
@@ -18,7 +10,7 @@ export const QInputDocsProps = [
     {
         name: "disable",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -26,7 +18,7 @@ export const QInputDocsProps = [
     {
         name: "error",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -42,7 +34,7 @@ export const QInputDocsProps = [
     {
         name: "filled",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -66,7 +58,7 @@ export const QInputDocsProps = [
     {
         name: "outlined",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -74,7 +66,7 @@ export const QInputDocsProps = [
     {
         name: "rounded",
         type: "boolean",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",

package/dist/components/input/index.scss

@@ -1,3 +1 @@
-.q-input {
-  @include field;
-}
+@import "$css/shared/q-field.scss";

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

@@ -1,6 +1,6 @@
-import type { NativeProps } from "../../utils/types";
-export interface QInputProps extends NativeProps {
-    bordered?: boolean;
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
+export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     dense?: boolean;
     disable?: boolean;
     error?: boolean;
@@ -13,7 +13,6 @@ export interface QInputProps extends NativeProps {
     value: string;
 }
 export declare const QInputPropsDefaults: {
-    bordered: boolean;
     dense: boolean;
     disable: boolean;
     error: boolean;

package/dist/components/input/props.js

@@ -1,5 +1,4 @@
 export const QInputPropsDefaults = {
-    bordered: false,
     dense: false,
     disable: false,
     error: false,

package/dist/components/layout/QLayout.svelte

@@ -1,10 +1,10 @@
-<script context="module"></script>
-
-<script>import { setContext } from "svelte";
-import { createClasses, createStyles } from "../../utils/props";
-import ContextReseter from "../private/ContextReseter.svelte";
+<script context="module">import { createStyles, createClasses } from "../../utils";
+import { setContext } from "svelte";
 import { writable } from "svelte/store";
-export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
+import ContextReseter from "../private/ContextReseter.svelte";
+</script>
+
+<script>export let view = "hhh lpr fff", headerHeight = "64px", footerHeight = "80px", leftDrawerWidth = "300px", rightDrawerWidth = "300px", leftRailbarWidth = "88px", rightRailbarWidth = "88px", userClasses = void 0, userStyles = void 0;
 export { userClasses as class, userStyles as style };
 $:
   style = createStyles(
@@ -63,7 +63,7 @@ $:
 setContext("layout", ctx);
 </script>
 
-<div class={classes} {style} on:scroll on:resize>
+<div class={classes} {style} {...$$restProps} on:scroll on:resize>
   {#if $$slots.railbarLeft}
     <slot name="railbarLeft" />
   {/if}

package/dist/components/layout/QLayout.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponent } from "svelte";
+import type { QLayoutProps } from "./props";
+import type { Readable } from "svelte/store";
 export interface DrawerContext {
     offset: {
         top: boolean;
@@ -19,10 +21,9 @@ export type LayoutContext = Readable<{
     drawerLeft: DrawerContext;
     drawerRight: DrawerContext;
 }>;
-import type { QLayoutProps } from "./props";
-import type { Readable } from "svelte/store";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         view?: QLayoutProps["view"];
         headerHeight?: QLayoutProps["headerHeight"];
         footerHeight?: QLayoutProps["footerHeight"];
@@ -30,8 +31,8 @@ declare const __propDef: {
         rightDrawerWidth?: QLayoutProps["rightDrawerWidth"];
         leftRailbarWidth?: QLayoutProps["leftRailbarWidth"];
         rightRailbarWidth?: QLayoutProps["rightDrawerWidth"];
-        class?: string | undefined;
-        style?: string | undefined;
+        class?: string | null | undefined;
+        style?: string | null | undefined;
     };
     events: {
         scroll: Event;

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

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

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

@@ -2,7 +2,7 @@ export const QLayoutDocsProps = [
     {
         name: "view",
         type: "QLayoutViewOptions",
-        optional: false,
+        optional: true,
         clickableType: true,
         description: 'The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.\nSee <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar\'s explanation on the view prop</a>.',
         default: '"hhh lpr fff"',
@@ -10,7 +10,7 @@ export const QLayoutDocsProps = [
     {
         name: "headerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "64px",
@@ -18,7 +18,7 @@ export const QLayoutDocsProps = [
     {
         name: "footerHeight",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "80px",
@@ -26,7 +26,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -34,7 +34,7 @@ export const QLayoutDocsProps = [
     {
         name: "rightDrawerWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "300px",
@@ -42,7 +42,7 @@ export const QLayoutDocsProps = [
     {
         name: "leftRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",
@@ -50,7 +50,7 @@ export const QLayoutDocsProps = [
     {
         name: "rightRailbarWidth",
         type: "string | number",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",

package/dist/components/layout/index.scss

@@ -117,6 +117,10 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
     }
   }
 
+  & > .q-list {
+    gap: 0.5rem;
+  }
+
   & > .q-list > .q-item {
     flex-direction: column;
     border-radius: 2rem;
@@ -125,7 +129,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
     padding: 0 8px;
     gap: 0.25em;
 
-    &.wave::after {
+    &.q-link::after {
       all: unset;
     }
 
@@ -135,13 +139,13 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
 
     & > i {
       transition: var(--speed1) padding linear;
-      padding-inline: 0.25em;
+      padding: 0.25rem;
     }
 
-    &:is(:hover, :focus, .active) > i {
+    &:is(:hover, :focus, &--active) > i {
       background-color: var(--secondary-container);
       color: var(--on-secondary-container);
-      padding: 0 1rem;
+      padding-inline: 1.5rem;
       font-variation-settings:
         "FILL" 1,
         "wght" 400,
@@ -171,6 +175,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
 
   & .q-list > .q-item.q-link {
     border-radius: 2rem;
+    overflow: hidden;
 
     &::before {
       content: "";
@@ -189,7 +194,7 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
       transition-timing-function: linear;
     }
 
-    &.active {
+    &.q-item--active {
       color: var(--on-secondary-container);
 
       &::before {
@@ -197,11 +202,6 @@ $contentSlot: ":not(.q-header, .q-footer, .q-railbar, .q-drawer)";
         transform: scaleX(1);
       }
     }
-
-    &:hover {
-      background-color: var(--on-surface-variant-2);
-      font-variation-settings: "GRAD" 50;
-    }
   }
 }
 

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

@@ -1,6 +1,7 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { HTMLAttributes } from "svelte/elements";
 export type QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "L"}${"p"}${"r" | "R"} ${"l" | "f"}${"f" | "F"}${"r" | "f"}`;
-export interface QLayoutProps extends NativeProps {
+export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
     /**
      * The layout view configuration, which defines how layout components (header, railbars, drawers, footer) should be displayed on screen.
      * See <a href="https://quasar.dev/layout/layout/#understanding-the-view-prop" target="_blank">Quasar's explanation on the view prop</a>.

package/dist/components/list/QItem.svelte

@@ -1,13 +1,14 @@
-<script>import QSeparator from "../separator/QSeparator.svelte";
-import useRouterLink, { isRouteActive } from "../../composables/use-router-link";
-import { createClasses } from "../../utils/props";
-import { getContext, setContext } from "svelte";
+<script>import { useRouterLink, isRouteActive } from "../../composables";
+import { ripple } from "../../helpers";
 import { Quaff } from "../../stores/Quaff";
+import { createClasses } from "../../utils";
+import { setContext, getContext } from "svelte";
 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 { QSeparator } from "../..";
+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

@@ -10,16 +10,13 @@ declare const __propDef: {
         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

@@ -1,4 +1,4 @@
-<script>import { createClasses } from "../../utils/props";
+<script>import { createClasses } from "../../utils";
 import { getContext } from "svelte";
 export let type = "content", userClasses = void 0;
 export { userClasses as class };
@@ -9,36 +9,40 @@ $:
     $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].some(Boolean)}
       <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 text-on-surface">
+          <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" />
+      <div class="body-medium text-on-surface-variant">
+        {#if $$slots.line1}
+          <slot name="line1" />
+        {/if}
       </div>
+      {#if $$slots.line2}
+        <div class="body-medium text-on-surface-variant">
+          <slot name="line2" />
+        </div>
+      {/if}
+      {#if $$slots.line3}
+        <div class="body-medium text-on-surface-variant">
+          <slot name="line3" />
+        </div>
+      {/if}
     {/if}
   {:else if type === "trailingText"}
-    <div class="label-small on-surface-variant-text">
+    <div class="label-small text-on-surface-variant">
       <slot />
     </div>
   {:else}

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

@@ -4,7 +4,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         type?: QItemSectionProps["type"];
-        class?: string | undefined;
+        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";
 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

@@ -10,7 +10,7 @@ declare const __propDef: {
         separatorOptions?: QListProps["separatorOptions"];
         padding?: QListProps["padding"];
         tag?: QListProps["tag"];
-        class?: string | undefined;
+        class?: string | null | undefined;
     };
     events: {
         scroll: Event;

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;