@quaffui/quaff 1.0.0-beta7 → 1.0.0-beta9

package/dist/components/table/QTable.svelte

@@ -7,6 +7,7 @@
     QTableSort,
   } from "./props";
 
+  // #region:    --- Props
   let {
     columns = [],
     rows = [],
@@ -16,19 +17,16 @@
     bodyCell,
     ...props
   }: QTableProps = $props();
+  // #endregion: --- Props
 
-  function getField(
-    fieldRaw: QTableColumn["field"],
-    row: QTableRow,
-  ): string | number {
-    return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
-  }
-
+  // #region:    --- Reactive variables
   let page = $state(1);
   let rowsPerPage = $state(5);
 
   let sort: QTableSort = $state(null);
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Derived values
   const rowsPerPageOptions = $derived(
     [5, 10, 25, 50].filter((option) => {
       return rows.length >= option || option === 5;
@@ -41,12 +39,6 @@
   );
   const numberOf: number = $derived(rows.length);
 
-  $effect(() => {
-    if (rowsPerPage * (page - 1) >= rows.length) {
-      page = 1;
-    }
-  });
-
   const rowsSorted: QTableRow[] = $derived.by(() => {
     if (sort) {
       return structuredClone(rows).sort((a: QTableRow, b: QTableRow) => {
@@ -75,6 +67,23 @@
   const rowsPaginated: QTableRow[] = $derived(
     rowsSorted.slice(numberFrom - 1, numberTo),
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
+  $effect(() => {
+    if (rowsPerPage * (page - 1) >= rows.length) {
+      page = 1;
+    }
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Functions
+  function getField(
+    fieldRaw: QTableColumn["field"],
+    row: QTableRow,
+  ): string | number {
+    return typeof fieldRaw === "function" ? fieldRaw(row) : row[fieldRaw];
+  }
 
   function getThStyle(column: QTableColumn) {
     let style = allowsSort(column) ? "cursor: pointer; " : "";
@@ -111,6 +120,7 @@
       type: !sort?.type || sort?.type === "desc" ? "asc" : "desc",
     };
   }
+  // #endregion: --- Functions
 </script>
 
 <div {...props} class="q-table" data-quaff>

package/dist/components/tabs/QTab.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import { getContext, hasContext } from "svelte";
   import { QIcon } from "../..";
-  import { QContext } from "../../classes/QContext.svelte";
   import { ripple } from "../../helpers";
   import {
     getClosestFocusableBlock,
@@ -11,36 +9,34 @@
     isArrowKey,
     isRouteActive,
     isTabKey,
-    QTabsCtxName,
     type Direction,
     type QEvent,
   } from "../../utils";
+  import { tabsCtx } from "./QTabs.svelte";
+  import type { QTabProps } from "./props";
 
-  import type { QTabEl } from "./QTabs.svelte";
-  import type { QTabProps, QTabsVariants } from "./props";
-
+  type QTabEl = HTMLAnchorElement | HTMLButtonElement;
   type QTabEvent<T> = QEvent<T, QTabEl>;
 
+  // #region:    --- Props
   let { name, to, icon, children, ...props }: QTabProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   let qTab: QTabEl;
+  // #endregion: --- Non-reactive variables
 
-  const tag = $derived(to ? "a" : "button");
+  // #region:    --- Reactive variables
+  const ctx = tabsCtx.assertGet("QTab should be use inside QTabs.");
+  // #endregion: --- Reactive variables
 
-  if (!hasContext(QTabsCtxName.value)) {
-    console.warn("QTab should be use inside QTabs.");
-  }
-
-  const qTabsRequestCtx = QContext.get<string | null>(QTabsCtxName.request)!;
+  // #region:    --- Derived values
+  const tag = $derived(to ? "a" : "button");
 
-  const qTabsValueCtx = QContext.get<string | undefined | null>(
-    QTabsCtxName.value,
-  )!;
-  const variant = getContext<QTabsVariants>(QTabsCtxName.variant);
-  const isActive = $derived(
-    to ? isRouteActive(to) : name === qTabsValueCtx.value,
-  );
+  const isActive = $derived(to ? isRouteActive(to) : name === ctx.value);
+  // #endregion: --- Derived values
 
+  // #region:    --- Functions
   function onclick(e: QTabEvent<MouseEvent>) {
     props.onclick?.(e);
 
@@ -48,7 +44,7 @@
       return;
     }
 
-    qTabsRequestCtx.update(name);
+    ctx.request = name;
   }
 
   function onkeydown(e: QTabEvent<KeyboardEvent>) {
@@ -81,6 +77,7 @@
       targetBlock?.focus();
     }
   }
+  // #endregion: --- Functions
 </script>
 
 <svelte:element
@@ -108,12 +105,12 @@
       <span>{@render children?.()}</span>
     {/if}
 
-    {#if variant === "primary"}
+    {#if ctx.variant === "primary"}
       <div class="q-tab__indicator"></div>
     {/if}
   </div>
 
-  {#if variant !== "primary"}
+  {#if ctx.variant !== "primary"}
     <div class="q-tab__indicator"></div>
   {/if}
 </svelte:element>

package/dist/components/tabs/QTabs.svelte

@@ -1,17 +1,21 @@
 <script module lang="ts">
-  export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
-  export type QTabsElementsContext = {
-    previous: QTabEl | null;
-    active: QTabEl | null;
-  };
+  import { QContext } from "../../utils";
+  import type { QTabsProps } from "./props";
+
+  interface QTabsContext {
+    readonly variant: QTabsProps["variant"];
+    value: QTabsProps["value"];
+    request: string | null;
+  }
+
+  export const tabsCtx = QContext<QTabsContext>("QTabs");
 </script>
 
 <script lang="ts">
-  import { setContext, untrack } from "svelte";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QTabsCtxName, shouldReduceMotion } from "../../utils";
-  import type { QTabsProps } from "./props";
+  import { tick, untrack } from "svelte";
+  import { shouldReduceMotion } from "../../utils";
 
+  // #region:    --- Props
   let {
     value = $bindable(),
     variant = "primary",
@@ -19,28 +23,43 @@
     children,
     ...props
   }: QTabsProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   let qTabs: HTMLElement;
   let tabList: HTMLElement[];
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
+  let request = $state<string | null>(null);
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Context
+  tabsCtx.set({
+    get value() {
+      return value;
+    },
+    set value(newValue) {
+      value = newValue;
+    },
+    get variant() {
+      return variant;
+    },
+    get request() {
+      return request;
+    },
+    set request(newValue) {
+      request = newValue;
+    },
+  });
+  // #endregion: --- Context
 
-  const valueContext = new QContext<string | undefined | null>(
-    QTabsCtxName.value,
-    value,
-  );
-  const requestContext = new QContext<string | null>(
-    QTabsCtxName.request,
-    null,
-  );
-
-  // Set the variant context
-  setContext(QTabsCtxName.variant, variant);
-
+  // #region:    --- Effects
   $effect(() => {
     tabList = Array.from(qTabs.querySelectorAll(".q-tab"));
   });
 
-  // Update the context when "value" changes
-  $effect(() => {
+  $effect.pre(() => {
     if (!value) {
       return;
     }
@@ -48,35 +67,40 @@
     untrack(() => {
       const newTab = getResquetingTab(value!);
       animateIndicator(newTab);
-
-      valueContext.update(value);
     });
   });
 
   // Try to update "value" when context changes from a QTab
   $effect(() => {
-    const request = requestContext.value;
-
     if (!request) {
       return;
     }
 
+    updateValue(request);
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Functions
+  async function updateValue(req: string) {
+    await tick();
+
     const defaultPrevented = !dispatchEvent(
       new Event("change", { bubbles: true, cancelable: true }),
     );
-    const requester = getResquetingTab(request);
+    const requester = getResquetingTab(req);
+
     if (defaultPrevented || !requester) {
       return;
     }
 
     untrack(() => {
-      value = request;
+      value = req;
     });
-  });
+  }
 
   function getResquetingTab(requestingTabName: string) {
     return (
-      tabList.find(
+      tabList?.find(
         (tab) => tab.getAttribute("aria-label") === requestingTabName,
       ) ?? null
     );
@@ -84,7 +108,8 @@
 
   function getActiveTab() {
     return (
-      tabList.find((tab) => tab.getAttribute("aria-current") === "true") ?? null
+      tabList?.find((tab) => tab.getAttribute("aria-current") === "true") ??
+      null
     );
   }
 
@@ -141,6 +166,7 @@
       !isNaN(scale)
     ) {
       const translateAnimation = (fromPos - toPos).toFixed(4);
+
       const scaleAnimation = scale.toFixed(4);
       keyframe.transform = `translate${axis}(${translateAnimation}px) scale${axis}(${scaleAnimation})`;
     } else {
@@ -151,6 +177,7 @@
     // that can hide the animation.
     return [keyframe, { transform: "none" }];
   }
+  // #endregion: --- Functions
 </script>
 
 <nav

package/dist/components/tabs/QTabs.svelte.d.ts

@@ -1,8 +1,19 @@
 import { SvelteComponentTyped } from "svelte";
-export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
-export type QTabsElementsContext = {
-    previous: QTabEl | null;
-    active: QTabEl | null;
+import type { QTabsProps } from "./props";
+interface QTabsContext {
+    readonly variant: QTabsProps["variant"];
+    value: QTabsProps["value"];
+    request: string | null;
+}
+export declare const tabsCtx: {
+    readonly symbol: symbol;
+    get(): QTabsContext | undefined;
+    assertGet(errorMsg?: string): QTabsContext;
+    set(context: QTabsContext): void;
+    reset(): void;
+    exists(): boolean;
+    updateEntry(key: keyof QTabsContext, value: string | null | undefined): void;
+    updateEntries(updates: Partial<QTabsContext>): void;
 };
 declare const __propDef: {
     props: Record<string, never>;

package/dist/components/toolbar/QToolbar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { QToolbarProps } from "./props";
 
+  // #region:    --- Props
   let {
     inset = false,
     border = false,
@@ -9,6 +10,7 @@
     children,
     ...props
   }: QToolbarProps = $props();
+  // #endregion: --- Props
 </script>
 
 <nav

package/dist/components/toolbar/QToolbarTitle.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import type { QToolbarTitleProps } from "./props";
 
+  // #region:    --- Props
   let { shrink = false, children, ...props }: QToolbarTitleProps = $props();
+  // #endregion: --- Props
 </script>
 
 <div

package/dist/components/tooltip/QTooltip.svelte

@@ -4,6 +4,7 @@
   import QTooltipBase from "./QTooltipBase.svelte";
   import type { QTooltipProps } from "./props";
 
+  // #region:    --- Props
   let {
     target,
     value = $bindable(false),
@@ -14,15 +15,9 @@
     children,
     ...props
   }: QTooltipProps<T> = $props();
+  // #endregion: --- Props
 
-  let tooltipHelperEl = $state<HTMLDivElement>();
-  let tooltipEl = $state<HTMLDivElement>();
-
-  let realTarget = $state<HTMLElement>();
-
-  let timerShow = $state<ReturnType<typeof setTimeout> | null>(null);
-  let timerHide = $state<ReturnType<typeof setTimeout> | null>(null);
-
+  // #region:    --- Non-reactive variables
   let mountedTooltip: ReturnType<typeof mountTooltip> | null = null;
 
   let targetMouseEnterListener: ReturnType<typeof addEventListener> | null =
@@ -36,11 +31,25 @@
   let windowWheelListener: ReturnType<typeof addEventListener> | null = null;
 
   const id = $props.id();
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
+  let tooltipHelperEl = $state<HTMLDivElement>();
+  let tooltipEl = $state<HTMLDivElement>();
+
+  let realTarget = $state<HTMLElement>();
+
+  let timerShow = $state<ReturnType<typeof setTimeout> | null>(null);
+  let timerHide = $state<ReturnType<typeof setTimeout> | null>(null);
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Effects
   $effect(() => {
     value ? untrack(show) : untrack(hide);
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Lifecycle
   onMount(() => {
     if (target) {
       realTarget =
@@ -85,7 +94,9 @@
       }
     };
   });
+  // #endregion: --- Lifecycle
 
+  // #region:    --- Methods
   export function show() {
     if (timerHide) {
       clearTimeout(timerHide);
@@ -170,7 +181,9 @@
   export function toggle() {
     value = !value;
   }
+  // #endregion: --- Methods
 
+  // #region:    --- Functions
   function abortHide() {
     if (timerHide) {
       clearTimeout(timerHide);
@@ -196,6 +209,7 @@
       },
     });
   }
+  // #endregion: --- Functions
 </script>
 
 {#if !target}

package/dist/components/tooltip/QTooltipBase.svelte

@@ -3,6 +3,7 @@
   import { scale } from "svelte/transition";
   import type { QTooltipProps } from "./props";
 
+  // #region:    --- Props
   let {
     // At this point, target should be guaranteed to be a DOM element
     target,
@@ -11,17 +12,13 @@
     children,
     ...props
   }: QTooltipProps<HTMLElement> = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Reactive variables
   let tooltipEl = $state<HTMLDivElement>();
+  // #endregion: --- Reactive variables
 
-  onMount(() => {
-    setTimeout(() => {
-      if (tooltipEl) {
-        tooltipEl.style.opacity = "1";
-      }
-    }, 50);
-  });
-
+  // #region:    --- Derived values
   const tooltipPosition: Record<"top" | "left", number> | undefined =
     $derived.by(() => {
       if (!target || !tooltipEl) {
@@ -40,7 +37,19 @@
       left: `${tooltipPosition.left}px`,
     },
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Lifecycle
+  onMount(() => {
+    setTimeout(() => {
+      if (tooltipEl) {
+        tooltipEl.style.opacity = "1";
+      }
+    }, 50);
+  });
+  // #endregion: --- Lifecycle
 
+  // #region:    --- Functions
   function calculatePosition(
     anchor: HTMLElement,
     tooltip: HTMLElement,
@@ -71,6 +80,7 @@
           tooltip[tooltipDimension] / 2 +
           (offsetToUse || 0);
   }
+  // #endregion: --- Functions
 </script>
 
 <div