@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/dist/components/layout/docs.js

@@ -1,5 +1,5 @@
 import { QLayoutDocsProps } from "./docs.props";
-export let QLayoutDocs = {
+export const QLayoutDocs = {
     name: "QLayout",
     description: "The QLayout component is designed to be the skeleton of the entire page, with navigational elements such as header, railbars, drawers and footer. This component is not mandatory but it really helps structure the page.",
     docs: {

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

@@ -1,5 +1,5 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash cce7c92a645afcabe17eef05e3f16990
+// @quaffHash 0dcefb45962cef3881e6d5b3d3ec1666
 export const QLayoutDocsProps = [
     {
         name: "view",
@@ -57,4 +57,60 @@ export const QLayoutDocsProps = [
         description: 'The width of the right railbar. Can be specified with CSS units. If no unit is specified, "px" will be used.',
         default: "88px",
     },
+    {
+        name: "content",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "railbarLeft",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "railbarRight",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "drawerLeft",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "drawerRight",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "header",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "footer",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];

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

@@ -1,4 +1,5 @@
 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, HTMLAttributes<HTMLDivElement> {
@@ -38,5 +39,12 @@ export interface QLayoutProps extends NativeProps, HTMLAttributes<HTMLDivElement
      * @default 88px
      */
     rightRailbarWidth?: string | number;
+    content?: Snippet;
+    railbarLeft?: Snippet;
+    railbarRight?: Snippet;
+    drawerLeft?: Snippet;
+    drawerRight?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
 }
 export type QLayoutEvents = "resize" | "scroll" | "scrollHeight";

package/dist/components/list/QItem.scss

@@ -0,0 +1,61 @@
+@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;
+
+  &.q-link {
+    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,63 +1,82 @@
-<script>import { useRouterLink, isRouteActive } from "../../composables";
-import { ripple } from "../../helpers";
-import { Quaff } from "../../stores/Quaff";
-import { setContext, getContext } from "svelte";
-import { writable } from "svelte/store";
-import { QSeparator } from "../..";
-export let tag = "div", active = false, clickable = false, dense = false, tabindex = 0, href = void 0, to = void 0, disable = false, activeClass = "", replace = false, noRipple = false, userClasses = "";
-export { userClasses as class };
-let hasMultipleLines = writable(false);
-setContext("hasMultipleLines", hasMultipleLines);
-$:
-  ({ hasLink, linkAttributes, linkClasses } = useRouterLink({
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { getRouterInfo, isRouteActive } from "../../utils/router";
+  import { ripple } from "../../helpers/ripple";
+  import QContext from "../../classes/QContext.svelte";
+  import QSeparator from "../separator/QSeparator.svelte";
+  let {
+    tag = "div",
+    active = false,
+    clickable = false,
+    dense = false,
+    tabindex = 0,
     href,
     to,
-    disable,
-    activeClass,
-    replace
-  }));
-$:
-  separatorOptions = getContext("separator");
-$:
-  isActionable = clickable || hasLink || tag === "label";
-$:
-  isClickable = isActionable && !disable;
-$:
-  isActive = isRouteActive($Quaff.router, to);
+    disabled = false,
+    activeClass = "active",
+    replace = false,
+    noRipple = false,
+    children,
+    ...props
+  } = $props();
+  const routerInfo = $derived(
+    getRouterInfo({
+      href,
+      to,
+      disabled,
+      activeClass,
+      replace,
+    }),
+  );
+  const multiline = new QContext("multiline", false);
+  const separatorOptions = getContext("separator");
+  const isActionable = $derived(
+    clickable || routerInfo.hasLink || tag === "label",
+  );
+  const isClickable = $derived(isActionable && !disabled);
+  const isActive = $derived(
+    $isRouteActive(to || href) || (routerInfo.hasLink && active),
+  );
 </script>
 
-{#if separatorOptions !== undefined}
+{#if separatorOptions}
   <QSeparator {...separatorOptions} />
 {/if}
-{#if linkAttributes.href !== undefined}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+
+{#if routerInfo.linkAttributes.href}
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
   <a
-    use:ripple={{ disable: !isClickable || noRipple }}
-    class="q-item {linkClasses} {userClasses}"
-    class:q-item--active={isActive || (hasLink && active)}
-    class:q-item--multiline={$hasMultipleLines}
+    use:ripple={{ disabled: !isClickable || noRipple }}
+    {...props}
+    class="q-item{routerInfo.linkClasses
+      ? ` ${routerInfo.linkClasses}`
+      : ''}{isActive ? ' ' + activeClass : ''}{props.class
+      ? ` ${props.class}`
+      : ''}"
+    class:q-item--multiline={multiline.value}
     class:q-item--dense={dense}
-    class:{activeClass}={isActive || (hasLink && active)}
-    tabindex={isClickable ? Number(tabindex) || 0 : -1}
-    aria-disabled={(isActionable && disable) || undefined}
-    {...linkAttributes}
-    {...$$restProps}
+    class:q-item--active={isActive}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
+    {...routerInfo.linkAttributes}
   >
-    <slot />
+    {@render children?.()}
   </a>
 {:else}
   <svelte:element
     this={tag}
-    class="q-item {userClasses}"
-    class:q-item--active={isActive || (hasLink && active)}
-    class:q-item--multiline={$hasMultipleLines}
+    {...props}
+    class="q-item{routerInfo.linkClasses
+      ? ` ${routerInfo.linkClasses}`
+      : ''}{isActive ? ' ' + activeClass : ''}{props.class
+      ? ` ${props.class}`
+      : ''}"
+    class:q-item--multiline={multiline.value}
     class:q-item--dense={dense}
-    class:{activeClass}={isActive || (hasLink && active)}
-    tabindex={isClickable ? Number(tabindex) || 0 : -1}
-    aria-disabled={(isActionable && disable) || undefined}
-    {...$$restProps}
+    class:q-item--active={isActive}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
   >
-    <slot />
+    {@render children?.()}
   </svelte:element>
 {/if}

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

@@ -1,31 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QItemProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        tag?: QItemProps["tag"];
-        active?: QItemProps["active"];
-        clickable?: QItemProps["clickable"];
-        dense?: QItemProps["dense"];
-        tabindex?: QItemProps["tabindex"];
-        href?: QItemProps["href"];
-        to?: QItemProps["to"];
-        disable?: QItemProps["disable"];
-        activeClass?: QItemProps["activeClass"];
-        replace?: QItemProps["replace"];
-        noRipple?: QItemProps["noRipple"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-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> {
-}
+declare const QItem: import("svelte").Component<QItemProps, {}, "">;
+export default QItem;

package/dist/components/list/QItemSection.scss

@@ -0,0 +1,45 @@
+@use "$css/mixins";
+
+.q-item__section {
+  display: flex;
+
+  &--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 {
+    height: 1.5rem;
+    width: 3.25rem;
+  }
+}

package/dist/components/list/QItemSection.svelte

@@ -1,48 +1,60 @@
-<script>import { getContext } from "svelte";
-export let type = "content", userClasses = "";
-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 QContext from "../../classes/QContext.svelte";
+  let {
+    type = "content",
+    children,
+    headline = children,
+    line1,
+    line2,
+    line3,
+    ...props
+  } = $props();
+  const multiline = QContext.get("multiline");
+  $effect(() => {
+    if (type === "content") {
+      multiline?.update(
+        !!headline && [line1, line2, line3].filter(Boolean).length >= 2,
+      );
+    }
+  });
+  function getClass(snip) {
+    return snip === headline
+      ? "body-large text-on-surface"
+      : "body-medium text-on-surface-variant";
   }
 </script>
 
 <div
-  class="q-item__section q-item__section--{type} {userClasses}"
-  {...$$restProps}
+  {...props}
+  class="q-item__section{props.class
+    ? ` ${props.class}`
+    : ''} q-item__section--{type}"
 >
   {#if type === "content"}
-    {#if ![$$slots.headline, $$slots.line2, $$slots.line2, $$slots.line3].some(Boolean)}
-      <slot />
+    {#if !headline && !line1 && !line2 && !line3}
+      {@render children?.()}
     {:else}
-      {#if $$slots.headline}
-        <div class="body-large text-on-surface">
-          <slot name="headline" />
-        </div>
-      {/if}
-      <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}
+      {@render line(headline)}
+
+      {@render line(line1)}
+
+      {@render line(line2)}
+
+      {@render line(line3)}
     {/if}
   {:else if type === "trailingText"}
     <div class="label-small text-on-surface-variant">
-      <slot />
+      {@render children?.()}
     </div>
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </div>
+
+{#snippet line(snip: Snippet | undefined)}
+  {#if snip}
+    <div class={getClass(snip)}>
+      {@render snip()}
+    </div>
+  {/if}
+{/snippet}

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

@@ -1,25 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QItemSectionProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        type?: QItemSectionProps["type"];
-        class?: string | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-        headline: {};
-        line1: {};
-        line2: {};
-        line3: {};
-    };
-};
-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> {
-}
+declare const QItemSection: import("svelte").Component<QItemSectionProps, {}, "">;
+export default QItemSection;

package/dist/components/list/QList.scss

@@ -0,0 +1,30 @@
+@use "$css/mixins";
+
+.q-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  &--bordered {
+    @include mixins.border;
+  }
+
+  &--rounded {
+    border-radius: 0.25rem;
+  }
+
+  &--dense {
+    min-height: 2rem;
+    padding-block: 0;
+
+    & > .q-item {
+      min-height: 2rem;
+    }
+  }
+
+  & > .q-separator__wrapper:first-child {
+    display: none !important;
+  }
+}

package/dist/components/list/QList.svelte

@@ -1,21 +1,33 @@
-<script>import { onMount, setContext } from "svelte";
-export let bordered = false, roundedBorders = false, dense = false, separator = false, separatorOptions = {}, padding = false, tag = "div", userClasses = "";
-export { userClasses as class };
-let listElement;
-onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.remove());
-$:
-  setContext("separator", separator === true ? separatorOptions : void 0);
+<script lang="ts">
+  import { setContext } from "svelte";
+  let {
+    bordered = false,
+    roundedBorders = false,
+    dense = false,
+    separator = false,
+    separatorOptions = {},
+    padding = false,
+    tag = "div",
+    children,
+    ...props
+  } = $props();
+  let listEl;
+  $effect(() => {
+    listEl.querySelector(".q-separator__wrapper:first-child")?.remove();
+  });
+  setContext("separator", separator ? separatorOptions : void 0);
 </script>
 
-<svelte:element 
-  this={tag} 
-  class="q-list {userClasses}"
+<svelte:element
+  this={tag}
+  bind:this={listEl}
+  {...props}
+  class="q-list{padding ? ' ' + 'q-py-sm' : ''} flex flex-center{props.class
+    ? ` ${props.class}`
+    : ''}"
   class:q-list--bordered={bordered}
-  class:q-list--rounded={roundedBorders}
   class:q-list--dense={dense}
-  class:q-py-sm={padding}
-  {...$$restProps} 
-  bind:this={listElement} 
-  on:scroll>
-  <slot />
+  class:q-list--rounded={roundedBorders}
+>
+  {@render children?.()}
 </svelte:element>

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

@@ -1,29 +1,3 @@
-import { SvelteComponent } from "svelte";
 import type { QListProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        bordered?: QListProps["bordered"];
-        roundedBorders?: QListProps["roundedBorders"];
-        dense?: QListProps["dense"];
-        separator?: QListProps["separator"];
-        separatorOptions?: QListProps["separatorOptions"];
-        padding?: QListProps["padding"];
-        tag?: QListProps["tag"];
-        class?: string | null | undefined;
-    };
-    events: {
-        scroll: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-type QListProps_ = typeof __propDef.props;
-export { QListProps_ as QListProps };
-export type QListEvents = typeof __propDef.events;
-export type QListSlots = typeof __propDef.slots;
-export default class QList extends SvelteComponent<QListProps, QListEvents, QListSlots> {
-}
+declare const QList: import("svelte").Component<QListProps, {}, "">;
+export default QList;

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

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

package/dist/components/list/docs.js

@@ -1,5 +1,5 @@
 import { QListDocsProps } from "./docs.props";
-export let QListDocs = {
+export const QListDocs = {
     name: "QList",
     description: "The QList component is used to display a list of items with options for adding text, icons and actions.",
     docs: {