@quaffui/quaff 1.0.0-beta6 → 1.0.0-beta9

package/dist/components/layout/QLayout.svelte

@@ -1,24 +1,34 @@
 <script module lang="ts">
-  import { onMount, setContext } from "svelte";
-  import { QContext } from "../../classes/QContext.svelte";
+  import { onMount } from "svelte";
+  import { QContext } from "../../utils";
   import { ContextReseter } from "../private";
-  import { QLayoutCtxName } from "../../utils";
   import type { QLayoutProps } from "./props";
 
-  export interface AppbarContext {
+  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;
   }
+
+  export const headerCtx = QContext<AppbarContext>("QHeader");
+  export const footerCtx = QContext<AppbarContext>("QFooter");
+
+  export const leftRailbarCtx = QContext<DrawerContext>("QRailbarLeft");
+  export const rightRailbarCtx = QContext<DrawerContext>("QRailbarRight");
+  export const leftDrawerCtx = QContext<DrawerContext>("QDrawerLeft");
+  export const rightDrawerCtx = QContext<DrawerContext>("QDrawerRight");
 </script>
 
 <script lang="ts">
+  // #region:    --- Props
   let {
     view = "hhh lpr fff",
     content,
@@ -33,81 +43,56 @@
     children,
     ...props
   }: QLayoutProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let layoutEl = $state<HTMLDivElement>();
   let contentEl = $state<HTMLDivElement>();
 
-  onMount(() => {
-    setTimeout(() => {
-      if (contentEl) {
-        contentEl.style.transition = "margin 0.3s";
-      }
-    }, 100);
-  });
-
-  setContext(QLayoutCtxName.view, {
-    get value() {
-      return view;
-    },
-  });
-
-  const headerCtx = new QContext<AppbarContext>(QLayoutCtxName.header, {
+  const headerInfo = $state({
     height: 0,
     collapsed: false,
     ready: false,
   });
-
-  const footerCtx = new QContext<AppbarContext>(QLayoutCtxName.footer, {
+  const footerInfo = $state({
     height: 0,
     collapsed: false,
     ready: false,
   });
+  const leftRailbarInfo = $state({
+    width: 0,
+    takesSpace: false,
+    ready: false,
+  });
+  const rightRailbarInfo = $state({
+    width: 0,
+    takesSpace: false,
+    ready: false,
+  });
+  const leftDrawerInfo = $state({
+    width: 0,
+    takesSpace: false,
+    ready: false,
+  });
+  const rightDrawerInfo = $state({
+    width: 0,
+    takesSpace: false,
+    ready: false,
+  });
+  // #endregion: --- Reactive variables
 
-  const leftRailbarCtx = new QContext<DrawerContext>(
-    QLayoutCtxName.railbar.left,
-    {
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    },
-  );
-  const rightRailbarCtx = new QContext<DrawerContext>(
-    QLayoutCtxName.railbar.right,
-    {
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    },
-  );
-
-  const leftDrawerCtx = new QContext<DrawerContext>(
-    QLayoutCtxName.drawer.left,
-    {
-      width: 0,
-      takesSpace: false,
-      ready: false,
-    },
-  );
-  const rightDrawerCtx = new QContext<DrawerContext>(
-    QLayoutCtxName.drawer.right,
-    {
-      width: 360,
-      takesSpace: false,
-      ready: false,
-    },
-  );
-
+  // #region:    --- Derived values
   const topOffset = $derived(
-    !header || headerCtx.value.collapsed ? 0 : headerCtx.value.height,
+    !header || headerInfo.collapsed ? 0 : headerInfo.height,
   );
   const bottomOffset = $derived(
-    !footer || footerCtx.value.collapsed ? 0 : footerCtx.value.height,
+    !footer || footerInfo.collapsed ? 0 : footerInfo.height,
   );
   const leftOffset = $derived(
-    handleDrawerCtx(leftRailbarCtx) + handleDrawerCtx(leftDrawerCtx),
+    handleDrawerCtx(leftRailbarInfo) + handleDrawerCtx(leftDrawerInfo),
   );
   const rightOffset = $derived(
-    handleDrawerCtx(rightRailbarCtx) + handleDrawerCtx(rightDrawerCtx),
+    handleDrawerCtx(rightRailbarInfo) + handleDrawerCtx(rightDrawerInfo),
   );
 
   const contentMargin = $derived(
@@ -115,39 +100,207 @@
   );
 
   const isReady = $derived(
-    (!header ||
-      headerCtx.value.ready ||
-      (layoutEl && !layoutEl.querySelector(".q-header"))) &&
-      (!footer ||
-        footerCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(".q-footer"))) &&
-      (!railbarLeft ||
-        leftRailbarCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--left"))) &&
-      (!railbarRight ||
-        rightRailbarCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(":scope > .q-railbar--right"))) &&
-      (!drawerLeft ||
-        leftDrawerCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--left"))) &&
-      (!drawerRight ||
-        rightDrawerCtx.value.ready ||
-        (layoutEl && !layoutEl.querySelector(":scope > .q-drawer--right"))),
+    appBarReady("header") &&
+      appBarReady("footer") &&
+      sideBarReady("railbar", "left") &&
+      sideBarReady("railbar", "right") &&
+      sideBarReady("drawer", "left") &&
+      sideBarReady("drawer", "right"),
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Context
+  headerCtx.set({
+    get view() {
+      return view;
+    },
+    get height() {
+      return headerInfo.height;
+    },
+    set height(newValue) {
+      headerInfo.height = newValue;
+    },
+    get collapsed() {
+      return headerInfo.collapsed;
+    },
+    set collapsed(newValue) {
+      headerInfo.collapsed = newValue;
+    },
+    get ready() {
+      return headerInfo.ready;
+    },
+    set ready(newValue) {
+      headerInfo.ready = newValue;
+    },
+  });
+  footerCtx.set({
+    get view() {
+      return view;
+    },
+    get height() {
+      return footerInfo.height;
+    },
+    set height(newValue) {
+      footerInfo.height = newValue;
+    },
+    get collapsed() {
+      return footerInfo.collapsed;
+    },
+    set collapsed(newValue) {
+      footerInfo.collapsed = newValue;
+    },
+    get ready() {
+      return footerInfo.ready;
+    },
+    set ready(newValue) {
+      footerInfo.ready = newValue;
+    },
+  });
+
+  leftRailbarCtx.set({
+    get view() {
+      return view;
+    },
+    get width() {
+      return leftRailbarInfo.width;
+    },
+    set width(newValue) {
+      leftRailbarInfo.width = newValue;
+    },
+    get takesSpace() {
+      return leftRailbarInfo.takesSpace;
+    },
+    set takesSpace(newValue) {
+      leftRailbarInfo.takesSpace = newValue;
+    },
+    get ready() {
+      return leftRailbarInfo.ready;
+    },
+    set ready(newValue) {
+      leftRailbarInfo.ready = newValue;
+    },
+  });
+  rightRailbarCtx.set({
+    get view() {
+      return view;
+    },
+    get width() {
+      return rightRailbarInfo.width;
+    },
+    set width(newValue) {
+      rightRailbarInfo.width = newValue;
+    },
+    get takesSpace() {
+      return rightRailbarInfo.takesSpace;
+    },
+    set takesSpace(newValue) {
+      rightRailbarInfo.takesSpace = newValue;
+    },
+    get ready() {
+      return rightRailbarInfo.ready;
+    },
+    set ready(newValue) {
+      rightRailbarInfo.ready = newValue;
+    },
+  });
+
+  leftDrawerCtx.set({
+    get view() {
+      return view;
+    },
+    get width() {
+      return leftDrawerInfo.width;
+    },
+    set width(newValue) {
+      leftDrawerInfo.width = newValue;
+    },
+    get takesSpace() {
+      return leftDrawerInfo.takesSpace;
+    },
+    set takesSpace(newValue) {
+      leftDrawerInfo.takesSpace = newValue;
+    },
+    get ready() {
+      return leftDrawerInfo.ready;
+    },
+    set ready(newValue) {
+      leftDrawerInfo.ready = newValue;
+    },
+  });
+  rightDrawerCtx.set({
+    get view() {
+      return view;
+    },
+    get width() {
+      return rightDrawerInfo.width;
+    },
+    set width(newValue) {
+      rightDrawerInfo.width = newValue;
+    },
+    get takesSpace() {
+      return rightDrawerInfo.takesSpace;
+    },
+    set takesSpace(newValue) {
+      rightDrawerInfo.takesSpace = newValue;
+    },
+    get ready() {
+      return rightDrawerInfo.ready;
+    },
+    set ready(newValue) {
+      rightDrawerInfo.ready = newValue;
+    },
+  });
+  // #endregion: --- Context
+
+  // #region:    --- Lifecycle
+  onMount(() => {
+    setTimeout(() => {
+      if (contentEl) {
+        contentEl.style.transition = "margin 0.3s";
+      }
+    }, 100);
+  });
+  // #endregion: --- Lifecycle
+
+  // #region:    --- Functions
+  function handleDrawerCtx(info: Omit<DrawerContext, "view">) {
+    return info.takesSpace ? info.width : 0;
+  }
+
+  function appBarReady(barType: "header" | "footer") {
+    const barReady = !header || headerInfo.ready;
+
+    return barReady || (layoutEl && !layoutEl.querySelector(`.q-${barType}`));
+  }
+
+  function sideBarReady(barType: "railbar" | "drawer", side: "left" | "right") {
+    const barReady =
+      side === "left"
+        ? {
+            railbar: !railbarLeft || leftRailbarInfo.ready,
+            drawer: !drawerLeft || leftDrawerInfo.ready,
+          }
+        : {
+            railbar: !railbarRight || rightRailbarInfo.ready,
+            drawer: !drawerRight || rightDrawerInfo.ready,
+          };
 
-  function handleDrawerCtx(ctx: QContext<DrawerContext>) {
-    return ctx.value.takesSpace ? ctx.value.width : 0;
+    return (
+      barReady[barType] ||
+      (layoutEl && !layoutEl.querySelector(`:scope > .q-${barType}--${side}`))
+    );
   }
+  // #endregion: --- Functions
 </script>
 
 <div
   bind:this={layoutEl}
   {...props}
   class={["q-layout", props.class, isReady && "q-layout--ready"]}
-  style:--left-drawer-width={`${drawerLeft ? leftDrawerCtx.value.width : 0}px`}
-  style:--right-drawer-width={`${drawerRight ? rightDrawerCtx.value.width : 0}px`}
-  style:--left-railbar-width={`${railbarLeft ? leftRailbarCtx.value.width : 0}px`}
-  style:--right-railbar-width={`${railbarRight ? rightRailbarCtx.value.width : 0}px`}
+  style:--left-drawer-width={`${drawerLeft ? leftDrawerInfo.width : 0}px`}
+  style:--right-drawer-width={`${drawerRight ? rightDrawerInfo.width : 0}px`}
+  style:--left-railbar-width={`${railbarLeft ? leftRailbarInfo.width : 0}px`}
+  style:--right-railbar-width={`${railbarRight ? rightRailbarInfo.width : 0}px`}
   style:--offset-top={`${topOffset}px`}
   style:--offset-right={`${rightOffset}px`}
   style:--offset-bottom={`${bottomOffset}px`}
@@ -164,12 +317,12 @@
 
   <ContextReseter
     keys={[
-      QLayoutCtxName.header,
-      QLayoutCtxName.footer,
-      QLayoutCtxName.railbar.left,
-      QLayoutCtxName.railbar.right,
-      QLayoutCtxName.drawer.left,
-      QLayoutCtxName.drawer.right,
+      headerCtx.symbol,
+      footerCtx.symbol,
+      leftRailbarCtx.symbol,
+      rightRailbarCtx.symbol,
+      leftDrawerCtx.symbol,
+      rightDrawerCtx.symbol,
     ]}
   >
     <div

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

@@ -1,14 +1,76 @@
 import { SvelteComponentTyped } from "svelte";
-export interface AppbarContext {
+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;
 }
+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;
+};
+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 __propDef: {
     props: Record<string, never>;
     events: {

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",
@@ -95,7 +114,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",

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

@@ -1,4 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
+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;
+};
 declare const __propDef: {
     props: Record<string, never>;
     events: {

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,26 @@
     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;
     }
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Functions
   function getClass(snip: Snippet) {
     return snip === headline ? "q-item__section--headline" : undefined;
   }
+  // #endregion: --- Functions
 </script>
 
 <div
@@ -54,11 +58,11 @@
       {@render line(line3)}
     {/if}
   {:else if type === "trailingText"}
-    <div class={["label-small", activeClass()]}>
+    <div class={["label-small", ctx.activeClass]}>
       {@render children?.()}
     </div>
   {:else}
-    <div class={activeClass() || undefined}>
+    <div class={ctx.activeClass || undefined}>
       {@render children?.()}
     </div>
   {/if}
@@ -66,7 +70,7 @@
 
 {#snippet line(snip: Snippet | undefined)}
   {#if snip}
-    <div class={[getClass(snip), activeClass()]}>
+    <div class={[getClass(snip), ctx.activeClass]}>
       {@render snip()}
     </div>
   {/if}