@quaffui/quaff 0.1.0-prealpha16 → 0.1.0-prealpha19

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,45 +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}>
+<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)}
-      <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,22 +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}"
+  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
+  class:q-list--rounded={roundedBorders}
 >
-  <slot />
+  {@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.props.js

@@ -1,9 +1,9 @@
 // AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 709e51aed5c99e14ee5c52eee28c2998
+// @quaffHash c756ee7a64d9843e3adb179c354d8a5f
 export const QSeparatorPropsVertical = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",
@@ -36,7 +36,7 @@ export const QSeparatorPropsVertical = [
     {
         name: "size",
         type: "string",
-        optional: false,
+        optional: true,
         clickableType: false,
         description: "",
         default: "",
@@ -61,7 +61,7 @@ export const QSeparatorPropsVertical = [
 export const QSeparatorPropsHorizontal = [
     {
         name: "spacing",
-        type: "QuaffSizes",
+        type: "Q.Size",
         optional: true,
         clickableType: true,
         description: "",
@@ -241,4 +241,36 @@ export const QItemSectionDocsProps = [
         description: "",
         default: "",
     },
+    {
+        name: "headline",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line1",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line2",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
+    {
+        name: "line3",
+        type: "Snippet",
+        optional: true,
+        clickableType: true,
+        description: "",
+        default: "",
+    },
 ];

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

@@ -1,8 +1,8 @@
-import type { UseRouterLinkProps } from "../../composables/useRouterLink";
+import type { RouterProps } from "../../utils/router";
+import type { Snippet } from "svelte";
 import type { QSeparatorProps } from "../separator/props";
 import type { HTMLAnchorAttributes, HTMLAttributes } from "svelte/elements";
-import type { NativeProps } from "../../utils";
-export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
+export interface QListProps extends HTMLAttributes<HTMLElement> {
     bordered?: boolean;
     roundedBorders?: boolean;
     dense?: boolean;
@@ -18,8 +18,7 @@ export interface QListProps extends NativeProps, HTMLAttributes<HTMLElement> {
     padding?: boolean;
     tag?: string;
 }
-export declare const QListPropsDefaults: QListProps;
-export interface QItemProps extends UseRouterLinkProps, NativeProps, HTMLAttributes<HTMLElement> {
+export interface QItemProps extends RouterProps, HTMLAttributes<HTMLElement> {
     tag?: string;
     active?: boolean;
     clickable?: boolean;
@@ -28,9 +27,11 @@ export interface QItemProps extends UseRouterLinkProps, NativeProps, HTMLAttribu
     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, HTMLAttributes<HTMLDivElement> {
+export interface QItemSectionProps extends HTMLAttributes<HTMLDivElement> {
     type?: QItemSectionTypes;
+    headline?: Snippet;
+    line1?: Snippet;
+    line2?: Snippet;
+    line3?: Snippet;
 }
-export declare const QItemSectionPropsDefaults: QItemSectionProps;

package/dist/components/list/props.js

@@ -1,25 +1 @@
-import { NativePropsDefaults } from "../../utils";
-import { UseRouterLinkPropsDefaults } from "../../composables/useRouterLink";
-export const QListPropsDefaults = {
-    bordered: false,
-    roundedBorders: false,
-    dense: false,
-    separator: false,
-    separatorOptions: {},
-    padding: false,
-    tag: "div",
-    ...NativePropsDefaults,
-};
-export const QItemPropsDefaults = {
-    tag: "div",
-    active: false,
-    clickable: false,
-    dense: false,
-    tabindex: 0,
-    ...UseRouterLinkPropsDefaults,
-    ...NativePropsDefaults,
-};
-export const QItemSectionPropsDefaults = {
-    type: "content",
-    ...NativePropsDefaults,
-};
+export {};

package/dist/components/private/ContextReseter.svelte

@@ -1,13 +1,8 @@
-<script>import { setContext } from "svelte";
-export let keys;
-$:
-  if (Array.isArray(keys)) {
-    for (let key of keys) {
-      setContext(key, void 0);
-    }
-  } else {
-    setContext(keys, void 0);
-  }
+<script lang="ts">
+  import QContext from "../../classes/QContext.svelte";
+  let { keys, children } = $props();
+  const keysArr = Array.isArray(keys) ? keys : [keys];
+  keysArr.forEach((key) => QContext.reset(key));
 </script>
 
-<slot />
+{@render children?.()}

package/dist/components/private/ContextReseter.svelte.d.ts

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        keys: string | string[];
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ContextReseterProps = typeof __propDef.props;
-export type ContextReseterEvents = typeof __propDef.events;
-export type ContextReseterSlots = typeof __propDef.slots;
-export default class ContextReseter extends SvelteComponent<ContextReseterProps, ContextReseterEvents, ContextReseterSlots> {
-}
-export {};
+import type { Snippet } from "svelte";
+declare const ContextReseter: import("svelte").Component<{
+    keys: string | string[];
+    children?: Snippet;
+}, {}, "">;
+export default ContextReseter;