@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

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

@@ -1,24 +1,76 @@
-import { SvelteComponentTyped } from "svelte";
-export interface AppbarContext {
+import type { QLayoutProps } from "./props";
+interface AppbarContext {
+    readonly view: string;
     height: number;
     collapsed: boolean;
     ready: boolean;
 }
-export interface DrawerContext {
+interface DrawerContext {
+    readonly view: string;
     width: number;
     takesSpace: boolean;
     ready: boolean;
 }
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+export declare const headerCtx: {
+    readonly symbol: symbol;
+    get(): AppbarContext | undefined;
+    assertGet(errorMsg?: string): AppbarContext;
+    set(context: AppbarContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof AppbarContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<AppbarContext>): void;
 };
-type QLayoutProps_ = typeof __propDef.props;
-export { QLayoutProps_ as QLayoutProps };
-export type QLayoutEvents = typeof __propDef.events;
-export type QLayoutSlots = typeof __propDef.slots;
-export default class QLayout extends SvelteComponentTyped<QLayoutProps_, QLayoutEvents, QLayoutSlots> {
-}
+export declare const footerCtx: {
+    readonly symbol: symbol;
+    get(): AppbarContext | undefined;
+    assertGet(errorMsg?: string): AppbarContext;
+    set(context: AppbarContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof AppbarContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<AppbarContext>): void;
+};
+export declare const leftRailbarCtx: {
+    readonly symbol: symbol;
+    get(): DrawerContext | undefined;
+    assertGet(errorMsg?: string): DrawerContext;
+    set(context: DrawerContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof DrawerContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<DrawerContext>): void;
+};
+export declare const rightRailbarCtx: {
+    readonly symbol: symbol;
+    get(): DrawerContext | undefined;
+    assertGet(errorMsg?: string): DrawerContext;
+    set(context: DrawerContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof DrawerContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<DrawerContext>): void;
+};
+export declare const leftDrawerCtx: {
+    readonly symbol: symbol;
+    get(): DrawerContext | undefined;
+    assertGet(errorMsg?: string): DrawerContext;
+    set(context: DrawerContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof DrawerContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<DrawerContext>): void;
+};
+export declare const rightDrawerCtx: {
+    readonly symbol: symbol;
+    get(): DrawerContext | undefined;
+    assertGet(errorMsg?: string): DrawerContext;
+    set(context: DrawerContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof DrawerContext, value: string | number | boolean): void;
+    updateEntries(updates: Partial<DrawerContext>): void;
+};
+declare const QLayout: import("svelte").Component<QLayoutProps, {}, "">;
+type QLayout = ReturnType<typeof QLayout>;
+export default QLayout;

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

@@ -5,7 +5,7 @@ export type QLayoutViewOptions = `${"l" | "h"}${"h" | "H"}${"r" | "h"} ${"l" | "
 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>.
+     * Controls how layout components (header, railbars, drawers, footer) are displayed on screen.
      * @default "hhh lpr fff"
      */
     view?: QLayoutViewOptions;

package/dist/components/list/QItem.scss

@@ -13,7 +13,10 @@
   margin-top: 0 !important;
   margin: 0;
   padding: 0.5rem 1.5rem 0.5rem 1rem;
-  gap: 1rem;
+
+  border-radius: 0;
+
+  isolation: isolate;
 
   &--clickable {
     cursor: pointer;
@@ -55,14 +58,14 @@
   }
 
   &--multiline {
+    white-space: normal;
     padding-block: 0.75rem;
 
-    & > .q-item__section:is(.avatar, .icon, .thumbnail, .trailingIcon, .trailingText) {
+    & > .q-item__section:is(.q-item__section--thumbnail, .q-item__section--video) {
       align-self: start;
     }
 
-    > .q-item__section.video {
-      margin-left: -1rem !important;
+    > .q-item__section--video {
       padding-block: 0;
     }
   }

package/dist/components/list/QItem.svelte

@@ -1,16 +1,22 @@
+<script lang="ts" module>
+  import { QContext } from "../../utils";
+
+  interface QItemContext {
+    readonly activeClass: string | false;
+    multiline: boolean;
+  }
+
+  export const itemCtx = QContext<QItemContext>("QItem");
+</script>
+
 <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 { getRouterInfo, isRouteActive } from "../../utils";
   import QSeparator from "../separator/QSeparator.svelte";
-  import type { QItemProps, QListProps } from "./props";
+  import { listCtx } from "./QList.svelte";
+  import type { QItemProps } from "./props";
 
+  // #region:    --- Props
   let {
     tag = "div",
     active = false,
@@ -26,7 +32,15 @@
     children,
     ...props
   }: QItemProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Reactive variables
+  let multiline = $state(false);
+
+  const ctx = listCtx.assertGet("QItem should be used inside QList");
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Derived values
   const routerInfo = $derived(
     getRouterInfo({
       href,
@@ -37,30 +51,35 @@
     }),
   );
 
-  const listActiveClass = getContext<() => string>(QListCtxName.activeClass);
-
   const activeClassToUse = $derived(
-    activeClass === "active" ? listActiveClass() || activeClass : activeClass,
+    activeClass === "active" ? ctx.activeClass || 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);
+  // #endregion: --- Derived values
+
+  // #region:    --- Context
+  itemCtx.set({
+    get multiline() {
+      return multiline;
+    },
+    set multiline(newValue) {
+      multiline = newValue;
+    },
+    get activeClass() {
+      return active && activeClassToUse;
+    },
+  });
+  // #endregion: --- Context
 </script>
 
-{#if separatorOptions}
-  <QSeparator {...separatorOptions} />
+{#if ctx.separatorOptions}
+  <QSeparator {...ctx.separatorOptions} />
 {/if}
 
 {#if routerInfo.linkAttributes.href}
@@ -73,7 +92,7 @@
       routerInfo.linkClasses,
       isActive && activeClassToUse,
       props.class,
-      multiline.value && "q-item--multiline",
+      multiline && "q-item--multiline",
       dense && "q-item--dense",
       isActive && "q-item--active",
       clickable && "q-item--clickable",
@@ -88,13 +107,14 @@
 {:else}
   <svelte:element
     this={tag}
+    use:ripple={{ disabled: !isClickable || noRipple }}
     {...props}
     class={[
       "q-item",
       routerInfo.linkClasses,
       isActive && activeClassToUse,
       props.class,
-      multiline.value && "q-item--multiline",
+      multiline && "q-item--multiline",
       dense && "q-item--dense",
       isActive && "q-item--active",
       clickable && "q-item--clickable",

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

@@ -1,14 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 SvelteComponentTyped<QItemProps_, QItemEvents, QItemSlots> {
+interface QItemContext {
+    readonly activeClass: string | false;
+    multiline: boolean;
 }
+export declare const itemCtx: {
+    readonly symbol: symbol;
+    get(): QItemContext | undefined;
+    assertGet(errorMsg?: string): QItemContext;
+    set(context: QItemContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof QItemContext, value: string | boolean): void;
+    updateEntries(updates: Partial<QItemContext>): void;
+};
+import type { QItemProps } from "./props";
+declare const QItem: import("svelte").Component<QItemProps, {}, "">;
+type QItem = ReturnType<typeof QItem>;
+export default QItem;

package/dist/components/list/QItemSection.scss

@@ -17,7 +17,6 @@
   }
 
   &--video {
-    margin-left: -1rem;
     padding-block: 0.25rem;
 
     & video {
@@ -32,11 +31,16 @@
     height: 2.5rem;
     width: 2.5rem;
   }
+
   &--icon {
     height: 1.5rem;
     width: 1.5rem;
   }
 
+  &--thumbnail {
+    border-radius: 0;
+  }
+
   &--thumbnail img {
     width: 3.5rem;
     height: 3.5rem;
@@ -46,12 +50,29 @@
 
   &--content {
     flex-direction: column;
-    flex: 10000 1 0;
+    flex: 1 1 auto;
+    min-width: 0;
     justify-content: center;
-    align-items: start;
+    align-items: flex-start;
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  &--side {
+    flex: 0 1 auto;
+    align-items: flex-start;
+    justify-content: center;
+    width: auto;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  &--content ~ &--side {
+    align-items: flex-end;
   }
 
   &--toggle {
+    flex: 0 0 auto;
     align-items: center;
     justify-content: center;
     height: 1.5rem;

package/dist/components/list/QItemSection.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import { getContext, type Snippet } from "svelte";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QItemCtxName } from "../../utils";
+  import { itemCtx } from "./QItem.svelte";
+  import type { Snippet } from "svelte";
   import type { QItemSectionProps } from "./props";
 
+  // #region:    --- Props
   let {
     type = "content",
     children,
@@ -13,22 +13,20 @@
     line3,
     ...props
   }: QItemSectionProps = $props();
+  // #endregion: --- Props
 
-  const activeClass = getContext<() => string>(QItemCtxName.activeClass);
-
-  const multiline = QContext.get<boolean>(QItemCtxName.multiline);
+  // #region:    --- Reactive variables
+  const ctx = itemCtx.assertGet();
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Effects
   $effect(() => {
     if (type === "content") {
-      multiline?.update(
-        !!headline && [line1, line2, line3].filter(Boolean).length >= 2,
-      );
+      ctx.multiline =
+        !!headline && [line1, line2, line3].filter(Boolean).length >= 2;
     }
   });
-
-  function getClass(snip: Snippet) {
-    return snip === headline ? "q-item__section--headline" : undefined;
-  }
+  // #endregion: --- Effects
 </script>
 
 <div
@@ -42,10 +40,8 @@
   data-quaff
 >
   {#if type === "content"}
-    {#if !headline && !line1 && !line2 && !line3}
-      {@render children?.()}
-    {:else}
-      {@render line(headline)}
+    {#if headline || line1 || line2 || line3}
+      {@render line(headline, true)}
 
       {@render line(line1)}
 
@@ -54,19 +50,21 @@
       {@render line(line3)}
     {/if}
   {:else if type === "trailingText"}
-    <div class={["label-small", activeClass()]}>
+    <div class={["label-small", ctx.activeClass]}>
       {@render children?.()}
     </div>
+  {:else if type === "side"}
+    {@render children?.()}
   {:else}
-    <div class={activeClass() || undefined}>
+    <div class={ctx.activeClass || undefined}>
       {@render children?.()}
     </div>
   {/if}
 </div>
 
-{#snippet line(snip: Snippet | undefined)}
+{#snippet line(snip: Snippet | undefined, isHeadline = false)}
   {#if snip}
-    <div class={[getClass(snip), activeClass()]}>
+    <div class={[isHeadline && "q-item__section--headline", ctx.activeClass]}>
       {@render snip()}
     </div>
   {/if}

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

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    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 SvelteComponentTyped<QItemSectionProps_, QItemSectionEvents, QItemSectionSlots> {
-}
+import type { QItemSectionProps } from "./props";
+declare const QItemSection: import("svelte").Component<QItemSectionProps, {}, "">;
+type QItemSection = ReturnType<typeof QItemSection>;
+export default QItemSection;

package/dist/components/list/QList.scss

@@ -6,13 +6,14 @@
   align-items: center;
   justify-content: center;
   width: 100%;
+  border-radius: 1rem;
 
-  &--bordered {
-    @include mixins.border;
+  &--no-round {
+    border-radius: 0;
   }
 
-  &--rounded {
-    border-radius: 0.25rem;
+  &--bordered {
+    @include mixins.border;
   }
 
   &--dense {
@@ -24,6 +25,18 @@
     }
   }
 
+  & > .q-item {
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+
   & > .q-separator__wrapper:first-child {
     display: none !important;
   }

package/dist/components/list/QList.svelte

@@ -1,11 +1,20 @@
-<script lang="ts">
-  import { setContext } from "svelte";
-  import { QListCtxName } from "../../utils";
+<script lang="ts" module>
+  import { QContext } from "../../utils";
   import type { QListProps } from "./props";
 
+  interface QListContext {
+    readonly activeClass: string | undefined;
+    readonly separatorOptions: QListProps["separatorOptions"];
+  }
+
+  export const listCtx = QContext<QListContext>("QList");
+</script>
+
+<script lang="ts">
+  // #region:    --- Props
   let {
     bordered = false,
-    roundedBorders = false,
+    noRound = false,
     dense = false,
     separator = false,
     separatorOptions = {},
@@ -15,15 +24,28 @@
     children,
     ...props
   }: QListProps = $props();
+  // #endregion: --- Props
 
-  setContext(QListCtxName.activeClass, () => activeClass);
-  setContext(QListCtxName.separator, separator ? separatorOptions : undefined);
-
+  // #region:    --- Non-reactive variables
   let listEl: HTMLElement;
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Context
+  listCtx.set({
+    get activeClass() {
+      return activeClass;
+    },
+    get separatorOptions() {
+      return separator ? separatorOptions : undefined;
+    },
+  });
+  // #endregion: --- Context
 
+  // #region:    --- Effects
   $effect(() => {
     listEl.querySelector(".q-separator__wrapper:first-child")?.remove();
   });
+  // #endregion: --- Effects
 </script>
 
 <svelte:element
@@ -38,7 +60,7 @@
     props.class,
     bordered && "q-list--bordered",
     dense && "q-list--dense",
-    roundedBorders && "q-list--rounded",
+    noRound && "q-list--no-round",
   ]}
   data-quaff
 >

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

@@ -1,14 +1,18 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-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 SvelteComponentTyped<QListProps_, QListEvents, QListSlots> {
+import type { QListProps } from "./props";
+interface QListContext {
+    readonly activeClass: string | undefined;
+    readonly separatorOptions: QListProps["separatorOptions"];
 }
+export declare const listCtx: {
+    readonly symbol: symbol;
+    get(): QListContext | undefined;
+    assertGet(errorMsg?: string): QListContext;
+    set(context: QListContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof QListContext, value: string | Omit<import("../separator/props").QSeparatorHorizontalProps, "vertical"> | undefined): void;
+    updateEntries(updates: Partial<QListContext>): void;
+};
+declare const QList: import("svelte").Component<QListProps, {}, "">;
+type QList = ReturnType<typeof QList>;
+export default QList;

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

@@ -10,11 +10,11 @@ export interface QListProps extends HTMLAttributes<HTMLElement> {
      */
     bordered?: boolean;
     /**
-     * Makes the borders of the list rounded when bordered is true.
+     * Removes the rounded borders when bordered is true.
      *
      * @default false
      */
-    roundedBorders?: boolean;
+    noRound?: boolean;
     /**
      * Makes all the items in the list more compact.
      *
@@ -96,7 +96,7 @@ export interface QItemProps extends RouterProps, HTMLAttributes<HTMLElement> {
      */
     target?: HTMLAnchorAttributes["target"];
 }
-export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
+export type QItemSectionTypes = "thumbnail" | "video" | "avatar" | "side" | "toggle" | "icon" | "trailingIcon" | "trailingText" | "content";
 export interface QItemSectionProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Type of the section, determines its layout and styling.

package/dist/components/menu/QMenu.scss

@@ -0,0 +1,37 @@
+.q-menu {
+  display: block;
+  inset: auto;
+  margin: 0;
+  border: none;
+  padding: 0;
+  width: max-content;
+  height: auto;
+  min-width: 8rem;
+  max-width: min(90vw, 28rem);
+  max-height: min(50vh, calc(100vh - 1rem));
+  overflow: auto;
+  border-radius: 1rem;
+  background: var(--surface-container);
+  color: var(--on-surface);
+  box-shadow: var(--elevate2);
+  z-index: 6000;
+
+  &:popover-open {
+    display: block;
+  }
+
+  > :is(.q-card, .q-list) {
+    border-radius: inherit;
+  }
+
+  > .q-list {
+    align-items: stretch;
+    justify-content: flex-start;
+    width: max-content;
+    min-width: 100%;
+  }
+}
+
+.q-menu__helper {
+  display: none;
+}