@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

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

@@ -1,58 +1,81 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 483d3c6d4e3fdcc88bb745de61c33b29
 export const QLayoutDocsProps = [
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "view",
-        type: "QLayoutViewOptions",
-        optional: false,
-        clickableType: true,
+        type: {
+            name: "QLayoutViewOptions",
+            isClickable: 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"',
     },
+];
+export const QLayoutDocsSnippets = [
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "content",
+        type: [],
+        description: "Main area of the layout where the content will be displayed, meaning everything besides the layout components (header, railbars, drawers, footer).\nIt overrides the default children snippet.",
+        default: "undefined",
+    },
     {
-        name: "headerHeight",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "railbarLeft",
+        type: [],
+        description: "The railbar on the left side of the layout.",
+        default: "undefined",
     },
     {
-        name: "footerHeight",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "railbarRight",
+        type: [],
+        description: "The railbar on the right side of the layout.",
+        default: "undefined",
     },
     {
-        name: "leftDrawerWidth",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "drawerLeft",
+        type: [],
+        description: "The drawer on the left side of the layout.",
+        default: "undefined",
     },
     {
-        name: "rightDrawerWidth",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "drawerRight",
+        type: [],
+        description: "The drawer on the right side of the layout.",
+        default: "undefined",
     },
     {
-        name: "leftRailbarWidth",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "header",
+        type: [],
+        description: "The header of the layout.",
+        default: "undefined",
     },
     {
-        name: "rightRailbarWidth",
-        type: "string | number",
-        optional: false,
-        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",
+        isArray: false,
+        optional: true,
+        isSnippet: true,
+        name: "footer",
+        type: [],
+        description: "The footer of the layout.",
+        default: "undefined",
     },
 ];

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

@@ -1,41 +1,49 @@
-import type { NativeProps } from "../../utils/types";
+import type { NativeProps } from "../../utils";
+import type { Snippet } from "svelte";
+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>.
      * @default "hhh lpr fff"
      */
-    view: QLayoutViewOptions;
+    view?: QLayoutViewOptions;
     /**
-     * The height of the header. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 64px
+     * Main area of the layout where the content will be displayed, meaning everything besides the layout components (header, railbars, drawers, footer).
+     * It overrides the default children snippet.
+     * @default undefined
      */
-    headerHeight: string | number;
+    content?: Snippet;
     /**
-     * The height of the footer. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 80px
+     * The railbar on the left side of the layout.
+     * @default undefined
      */
-    footerHeight: string | number;
+    railbarLeft?: Snippet;
     /**
-     * The width of the left drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 300px
+     * The railbar on the right side of the layout.
+     * @default undefined
      */
-    leftDrawerWidth: string | number;
+    railbarRight?: Snippet;
     /**
-     * The width of the right drawer. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 300px
+     * The drawer on the left side of the layout.
+     * @default undefined
      */
-    rightDrawerWidth: string | number;
+    drawerLeft?: Snippet;
     /**
-     * The width of the left railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 88px
+     * The drawer on the right side of the layout.
+     * @default undefined
      */
-    leftRailbarWidth: string | number;
+    drawerRight?: Snippet;
     /**
-     * The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.
-     * @default 88px
+     * The header of the layout.
+     * @default undefined
      */
-    rightRailbarWidth: string | number;
+    header?: Snippet;
+    /**
+     * The footer of the layout.
+     * @default undefined
+     */
+    footer?: Snippet;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";

package/dist/components/list/QItem.scss

@@ -0,0 +1,69 @@
+@use "$css/mixins";
+
+.q-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+
+  min-width: 100%;
+  max-width: 100%;
+  min-height: 3.5rem;
+  margin-top: 0 !important;
+  margin: 0;
+  padding: 0.5rem 1.5rem 0.5rem 1rem;
+  gap: 1rem;
+
+  &--clickable {
+    cursor: pointer;
+  }
+
+  &--dense {
+    min-height: 2rem;
+  }
+
+  &:is(.q-link, &--clickable:not(label)) {
+    padding: 0.5rem 1.5rem 0.5rem 1rem;
+
+    &: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;
+    }
+
+    &.multiline {
+      padding-block: 0.75rem;
+    }
+
+    &::after {
+      background-image: radial-gradient(circle, rgb(150 150 150 / 0.2) 1%, transparent 1%);
+    }
+  }
+
+  &--multiline {
+    padding-block: 0.75rem;
+
+    & > .q-item__section:is(.avatar, .icon, .thumbnail, .trailingIcon, .trailingText) {
+      align-self: start;
+    }
+
+    > .q-item__section.video {
+      margin-left: -1rem !important;
+      padding-block: 0;
+    }
+  }
+}

package/dist/components/list/QItem.svelte

@@ -1,60 +1,108 @@
-<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";
-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;
-export { userClasses as class };
-let hasMultiplLines = writable(false);
-setContext("hasMultipleLines", hasMultiplLines);
-$:
-  ({ hasLink, linkAttributes, linkClasses } = useRouterLink({
+<script lang="ts">
+  import { getContext, setContext } from "svelte";
+  import { ripple } from "../../helpers";
+  import { QContext } from "../../classes/QContext.svelte";
+  import {
+    getRouterInfo,
+    isRouteActive,
+    QItemCtxName,
+    QListCtxName,
+  } from "../../utils";
+  import QSeparator from "../separator/QSeparator.svelte";
+  import type { QItemProps, QListProps } from "./props";
+
+  let {
+    tag = "div",
+    active = false,
+    clickable = false,
+    dense = false,
+    tabindex = 0,
     href,
     to,
-    disable,
-    activeClass,
-    replace
-  }));
-$:
-  separatorOptions = getContext("separator");
-$:
-  isActionable = clickable === true || hasLink === true || tag === "label";
-$:
-  isClickable = disable !== true && isActionable === true;
-$:
-  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
-  ]);
-$:
-  attributes = {
-    class: classes,
-    tabindex: isClickable == true ? Number(tabindex) || 0 : void 0,
-    "aria-disabled": isActionable === true && disable === true ? true : void 0,
-    ...$$restProps
-  };
+    disabled = false,
+    activeClass = "active",
+    replace = false,
+    noRipple = false,
+    children,
+    ...props
+  }: QItemProps = $props();
+
+  const routerInfo = $derived(
+    getRouterInfo({
+      href,
+      to,
+      disabled,
+      activeClass,
+      replace,
+    }),
+  );
+
+  const listActiveClass = getContext<() => string>(QListCtxName.activeClass);
+
+  const activeClassToUse = $derived(
+    activeClass === "active" ? listActiveClass() || activeClass : activeClass,
+  );
+
+  setContext(QItemCtxName.activeClass, () => active && activeClassToUse);
+
+  const multiline = new QContext(QItemCtxName.multiline, false);
+
+  const separatorOptions = getContext<
+    QListProps["separatorOptions"] | undefined
+  >(QListCtxName.separator);
+
+  const isActionable = $derived(
+    clickable || routerInfo.hasLink || tag === "label",
+  );
+  const isClickable = $derived(isActionable && !disabled);
+
+  const isActive = $derived(isRouteActive(to || href) || active);
 </script>
 
-{#if separatorOptions !== undefined}
+{#if separatorOptions}
   <QSeparator {...separatorOptions} />
 {/if}
-{#if linkAttributes.href !== undefined}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a {...attributes} {...linkAttributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
-    <slot />
+
+{#if routerInfo.linkAttributes.href}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <a
+    use:ripple={{ disabled: !isClickable || noRipple }}
+    {...props}
+    class={[
+      "q-item",
+      routerInfo.linkClasses,
+      isActive && activeClassToUse,
+      props.class,
+      multiline.value && "q-item--multiline",
+      dense && "q-item--dense",
+      isActive && "q-item--active",
+      clickable && "q-item--clickable",
+    ]}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
+    {...routerInfo.linkAttributes}
+    data-quaff
+  >
+    {@render children?.()}
   </a>
 {:else}
-  <div {...attributes} {...$$restProps} on:mouseenter on:mouseleave on:click>
-    <slot />
-  </div>
+  <svelte:element
+    this={tag}
+    {...props}
+    class={[
+      "q-item",
+      routerInfo.linkClasses,
+      isActive && activeClassToUse,
+      props.class,
+      multiline.value && "q-item--multiline",
+      dense && "q-item--dense",
+      isActive && "q-item--active",
+      clickable && "q-item--clickable",
+    ]}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
+    data-quaff
+  >
+    {@render children?.()}
+  </svelte:element>
 {/if}

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

@@ -1,34 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QItemProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        tag?: string | undefined;
-        active?: boolean | undefined;
-        clickable?: boolean | undefined;
-        dense?: boolean | undefined;
-        tabindex?: string | number | undefined;
-        href?: QItemProps["href"];
-        to?: QItemProps["to"];
-        disable?: boolean | undefined;
-        activeClass?: QItemProps["activeClass"];
-        replace?: boolean | undefined;
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        click: MouseEvent;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 type QItemProps_ = typeof __propDef.props;
 export { QItemProps_ as QItemProps };
 export type QItemEvents = typeof __propDef.events;
 export type QItemSlots = typeof __propDef.slots;
-export default class QItem extends SvelteComponent<QItemProps, QItemEvents, QItemSlots> {
+export default class QItem extends SvelteComponentTyped<QItemProps_, QItemEvents, QItemSlots> {
 }

package/dist/components/list/QItemSection.scss

@@ -0,0 +1,60 @@
+@use "$css/mixins";
+
+.q-item__section {
+  display: flex;
+
+  @include mixins.typography("body-medium");
+  color: var(--on-surface-variant);
+
+  &--headline {
+    max-width: 100%;
+    @include mixins.typography("body-large");
+    color: var(--on-surface);
+  }
+
+  &--trailing {
+    @include mixins.typography("label-small");
+  }
+
+  &--video {
+    margin-left: -1rem;
+    padding-block: 0.25rem;
+
+    & video {
+      width: auto;
+      height: 4rem;
+      object-fit: cover;
+      object-position: center;
+    }
+  }
+
+  & .q-avatar {
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+  &--icon {
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+
+  &--thumbnail img {
+    width: 3.5rem;
+    height: 3.5rem;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  &--content {
+    flex-direction: column;
+    flex: 10000 1 0;
+    justify-content: center;
+    align-items: start;
+  }
+
+  &--toggle {
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    width: 3.25rem;
+  }
+}

package/dist/components/list/QItemSection.svelte

@@ -1,47 +1,73 @@
-<script>import { createClasses } from "../../utils/props";
-import { getContext } from "svelte";
-export let type = "content", userClasses = void 0;
-export { userClasses as class };
-$:
-  ctx = getContext("hasMultipleLines");
-$:
-  if (type === "content") {
-    $ctx = $$slots.headline && [$$slots.line1, $$slots.line2, $$slots.line3].filter(Boolean).length >= 2;
+<script lang="ts">
+  import { getContext, type Snippet } from "svelte";
+  import { QContext } from "../../classes/QContext.svelte";
+  import { QItemCtxName } from "../../utils";
+  import type { QItemSectionProps } from "./props";
+
+  let {
+    type = "content",
+    children,
+    headline = children,
+    line1,
+    line2,
+    line3,
+    ...props
+  }: QItemSectionProps = $props();
+
+  const activeClass = getContext<() => string>(QItemCtxName.activeClass);
+
+  const multiline = QContext.get<boolean>(QItemCtxName.multiline);
+
+  $effect(() => {
+    if (type === "content") {
+      multiline?.update(
+        !!headline && [line1, line2, line3].filter(Boolean).length >= 2,
+      );
+    }
+  });
+
+  function getClass(snip: Snippet) {
+    return snip === headline ? "q-item__section--headline" : undefined;
   }
-$:
-  classes = createClasses([`q-item__section `, `q-item__section--${type}`, userClasses]);
 </script>
 
-<div class={classes} {...$$restProps}>
+<div
+  {...props}
+  class={[
+    "q-item__section",
+    props.class,
+    `q-item__section--${type}`,
+    type === "trailingText" && "q-item__section--trailing",
+  ]}
+  data-quaff
+>
   {#if type === "content"}
-    {#if [$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(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" />
-      {/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 !headline && !line1 && !line2 && !line3}
+      {@render children?.()}
+    {:else}
+      {@render line(headline)}
+
+      {@render line(line1)}
+
+      {@render line(line2)}
+
+      {@render line(line3)}
     {/if}
   {:else if type === "trailingText"}
-    <div class="label-small on-surface-variant-text">
-      <slot />
+    <div class={["label-small", activeClass()]}>
+      {@render children?.()}
     </div>
   {:else}
-    <slot />
+    <div class={activeClass() || undefined}>
+      {@render children?.()}
+    </div>
   {/if}
 </div>
+
+{#snippet line(snip: Snippet | undefined)}
+  {#if snip}
+    <div class={[getClass(snip), activeClass()]}>
+      {@render snip()}
+    </div>
+  {/if}
+{/snippet}

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

@@ -1,25 +1,14 @@
-import { SvelteComponent } from "svelte";
-import type { QItemSectionProps } from "./props";
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: import("./props").QItemSectionTypes | undefined;
-        class?: string | undefined;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-        headline: {};
-        line1: {};
-        line2: {};
-        line3: {};
-    };
+    slots: {};
 };
 type QItemSectionProps_ = typeof __propDef.props;
 export { QItemSectionProps_ as QItemSectionProps };
 export type QItemSectionEvents = typeof __propDef.events;
 export type QItemSectionSlots = typeof __propDef.slots;
-export default class QItemSection extends SvelteComponent<QItemSectionProps, QItemSectionEvents, QItemSectionSlots> {
+export default class QItemSection extends SvelteComponentTyped<QItemSectionProps_, QItemSectionEvents, QItemSectionSlots> {
 }