@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha20

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,60 +1,82 @@
-<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 } 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 === true || hasLink === true || tag === "label";
-$:
-  isClickable = disable !== true && isActionable === true;
-$:
-  isActive = isRouteActive($Quaff.router, to);
-$:
-  classes = createClasses([
-    "q-item flex middle-align",
-    $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
+  } = $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 -->
-  <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
+      ? ` ${routerInfo.linkClasses}`
+      : ''}{isActive ? ' ' + activeClass : ''}{props.class
+      ? ` ${props.class}`
+      : ''}"
+    class:q-item--multiline={multiline.value}
+    class:q-item--dense={dense}
+    class:q-item--active={isActive}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
+    {...routerInfo.linkAttributes}
+  >
+    {@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
+      ? ` ${routerInfo.linkClasses}`
+      : ''}{isActive ? ' ' + activeClass : ''}{props.class
+      ? ` ${props.class}`
+      : ''}"
+    class:q-item--multiline={multiline.value}
+    class:q-item--dense={dense}
+    class:q-item--active={isActive}
+    tabindex={isClickable ? tabindex || 0 : undefined}
+    aria-disabled={isActionable && disabled ? true : undefined}
+  >
+    {@render children?.()}
+  </svelte:element>
 {/if}

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

@@ -1,34 +1,3 @@
-import { SvelteComponent } from "svelte";
 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;
-        href?: QItemProps["href"];
-        to?: QItemProps["to"];
-        disable?: boolean | undefined;
-        activeClass?: QItemProps["activeClass"];
-        replace?: boolean | undefined;
-        class?: string | undefined;
-    };
-    events: {
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        click: MouseEvent;
-    } & {
-        [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,47 +1,60 @@
-<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 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";
   }
-$:
-  classes = createClasses([`q-item__section `, `q-item__section--${type}`, userClasses]);
 </script>
 
-<div class={classes} {...$$restProps}>
+<div
+  {...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) === 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 text-on-surface-variant">
+      {@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?: import("./props").QItemSectionTypes | undefined;
-        class?: string | 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,23 +1,33 @@
-<script>import { setIndex } from "../../composables/use-index";
-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 };
-let listElement;
-onMount(() => listElement.querySelector(".q-separator__wrapper:first-child")?.remove());
-$:
-  setContext("separator", separator === true ? separatorOptions : void 0);
-$:
-  classes = createClasses([
-    "q-list",
-    bordered && "border",
-    dense && "dense",
-    padding && "q-py-sm",
-    roundedBorders && "rounded-borders",
-    userClasses
-  ]);
+<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={classes} {...$$restProps} bind:this={listElement} on:scroll>
-  <slot />
+<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--dense={dense}
+  class:q-list--rounded={roundedBorders}
+>
+  {@render children?.()}
 </svelte:element>

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

@@ -1,36 +1,3 @@
-import { SvelteComponent } from "svelte";
 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;
-        tag?: QListProps["tag"];
-        class?: string | 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

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

package/dist/components/list/docs.js

@@ -0,0 +1,11 @@
+import { QListDocsProps } from "./docs.props";
+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: {
+        props: QListDocsProps,
+        slots: [],
+        methods: [],
+        events: [],
+    },
+};