@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

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/QTab.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 QTabProps_ = typeof __propDef.props;
-export { QTabProps_ as QTabProps };
-export type QTabEvents = typeof __propDef.events;
-export type QTabSlots = typeof __propDef.slots;
-export default class QTab extends SvelteComponentTyped<QTabProps_, QTabEvents, QTabSlots> {
-}
+import type { QTabProps } from "./props";
+declare const QTab: import("svelte").Component<QTabProps, {}, "">;
+type QTab = ReturnType<typeof QTab>;
+export default QTab;

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,19 +1,19 @@
-import { SvelteComponentTyped } from "svelte";
-export type QTabEl = HTMLAnchorElement | HTMLButtonElement;
-export type QTabsElementsContext = {
-    previous: QTabEl | null;
-    active: QTabEl | null;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-type QTabsProps_ = typeof __propDef.props;
-export { QTabsProps_ as QTabsProps };
-export type QTabsEvents = typeof __propDef.events;
-export type QTabsSlots = typeof __propDef.slots;
-export default class QTabs extends SvelteComponentTyped<QTabsProps_, QTabsEvents, QTabsSlots> {
+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 QTabs: import("svelte").Component<QTabsProps, {}, "value">;
+type QTabs = ReturnType<typeof QTabs>;
+export default QTabs;

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/QToolbar.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 QToolbarProps_ = typeof __propDef.props;
-export { QToolbarProps_ as QToolbarProps };
-export type QToolbarEvents = typeof __propDef.events;
-export type QToolbarSlots = typeof __propDef.slots;
-export default class QToolbar extends SvelteComponentTyped<QToolbarProps_, QToolbarEvents, QToolbarSlots> {
-}
+import type { QToolbarProps } from "./props";
+declare const QToolbar: import("svelte").Component<QToolbarProps, {}, "">;
+type QToolbar = ReturnType<typeof QToolbar>;
+export default QToolbar;

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/toolbar/QToolbarTitle.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 QToolbarTitleProps_ = typeof __propDef.props;
-export { QToolbarTitleProps_ as QToolbarTitleProps };
-export type QToolbarTitleEvents = typeof __propDef.events;
-export type QToolbarTitleSlots = typeof __propDef.slots;
-export default class QToolbarTitle extends SvelteComponentTyped<QToolbarTitleProps_, QToolbarTitleEvents, QToolbarTitleSlots> {
-}
+import type { QToolbarTitleProps } from "./props";
+declare const QToolbarTitle: import("svelte").Component<QToolbarTitleProps, {}, "">;
+type QToolbarTitle = ReturnType<typeof QToolbarTitle>;
+export default QToolbarTitle;

package/dist/components/tooltip/QTooltip.svelte

@@ -1,9 +1,10 @@
 <script lang="ts" generics="T extends HTMLElement | string">
   import { mount, onMount, unmount, untrack } from "svelte";
-  import { addEventListener } from "../../utils";
+  import { on } from "svelte/events";
   import QTooltipBase from "./QTooltipBase.svelte";
   import type { QTooltipProps } from "./props";
 
+  // #region:    --- Props
   let {
     target,
     value = $bindable(false),
@@ -14,7 +15,21 @@
     children,
     ...props
   }: QTooltipProps<T> = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
+  let mountedTooltip: ReturnType<typeof mountTooltip> | null = null;
+
+  let removeTargetMouseEnterListener: (() => void) | undefined;
+  let removeTargetMouseLeaveListener: (() => void) | undefined;
+  let removeTooltipMouseEnterListener: (() => void) | undefined;
+  let removeTooltipMouseLeaveListener: (() => void) | undefined;
+  let removeWindowWheelListener: (() => void) | undefined;
+
+  const id = $props.id();
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
   let tooltipHelperEl = $state<HTMLDivElement>();
   let tooltipEl = $state<HTMLDivElement>();
 
@@ -22,25 +37,15 @@
 
   let timerShow = $state<ReturnType<typeof setTimeout> | null>(null);
   let timerHide = $state<ReturnType<typeof setTimeout> | null>(null);
+  // #endregion: --- Reactive variables
 
-  let mountedTooltip: ReturnType<typeof mountTooltip> | null = null;
-
-  let targetMouseEnterListener: ReturnType<typeof addEventListener> | null =
-    null;
-  let targetMouseLeaveListener: ReturnType<typeof addEventListener> | null =
-    null;
-  let tooltipMouseEnterListener: ReturnType<typeof addEventListener> | null =
-    null;
-  let tooltipMouseLeaveListener: ReturnType<typeof addEventListener> | null =
-    null;
-  let windowWheelListener: ReturnType<typeof addEventListener> | null = null;
-
-  const id = Date.now();
-
+  // #region:    --- Effects
   $effect(() => {
     value ? untrack(show) : untrack(hide);
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Lifecycle
   onMount(() => {
     if (target) {
       realTarget =
@@ -60,17 +65,19 @@
       }
     }
 
-    targetMouseEnterListener = addEventListener(realTarget, "mouseenter", show);
-    targetMouseLeaveListener = addEventListener(realTarget, "mouseleave", hide);
+    if (realTarget) {
+      removeTargetMouseEnterListener = on(realTarget, "mouseenter", show);
+      removeTargetMouseLeaveListener = on(realTarget, "mouseleave", hide);
+    }
 
     return () => {
-      targetMouseEnterListener?.remove();
-      targetMouseLeaveListener?.remove();
+      removeTargetMouseEnterListener?.();
+      removeTargetMouseLeaveListener?.();
 
-      tooltipMouseEnterListener?.remove();
-      tooltipMouseLeaveListener?.remove();
+      removeTooltipMouseEnterListener?.();
+      removeTooltipMouseLeaveListener?.();
 
-      windowWheelListener?.remove();
+      removeWindowWheelListener?.();
 
       if (mountedTooltip) {
         unmount(mountedTooltip);
@@ -85,7 +92,9 @@
       }
     };
   });
+  // #endregion: --- Lifecycle
 
+  // #region:    --- Methods
   export function show() {
     if (timerHide) {
       clearTimeout(timerHide);
@@ -107,20 +116,18 @@
       mountedTooltip = mountTooltip();
 
       tooltipEl =
-        (document.getElementById(`qtooltip-${id}`) as HTMLDivElement) ||
+        (document.getElementById(`q-tooltip-${id}`) as HTMLDivElement) ||
         undefined;
-      tooltipMouseEnterListener = addEventListener(
-        tooltipEl,
-        "mouseenter",
-        abortHide,
-      );
-      tooltipMouseLeaveListener = addEventListener(
-        tooltipEl,
-        "mouseleave",
-        hide,
-      );
-
-      windowWheelListener = addEventListener(window, "wheel", hide);
+      if (tooltipEl) {
+        removeTooltipMouseEnterListener = on(
+          tooltipEl,
+          "mouseenter",
+          abortHide,
+        );
+        removeTooltipMouseLeaveListener = on(tooltipEl, "mouseleave", hide);
+      }
+
+      removeWindowWheelListener = on(window, "wheel", hide);
 
       if (!value) {
         value = true;
@@ -148,7 +155,7 @@
     }
 
     timerHide = setTimeout(() => {
-      tooltipMouseEnterListener?.remove();
+      removeTooltipMouseEnterListener?.();
 
       if (!mountedTooltip) {
         return;
@@ -156,7 +163,7 @@
 
       unmount(mountedTooltip);
 
-      windowWheelListener?.remove();
+      removeWindowWheelListener?.();
 
       mountedTooltip = null;
       timerHide = null;
@@ -170,7 +177,9 @@
   export function toggle() {
     value = !value;
   }
+  // #endregion: --- Methods
 
+  // #region:    --- Functions
   function abortHide() {
     if (timerHide) {
       clearTimeout(timerHide);
@@ -191,11 +200,12 @@
         position,
         offset,
         children,
-        id: `qtooltip-${id}`,
+        id: `q-tooltip-${id}`,
         ...props,
       },
     });
   }
+  // #endregion: --- Functions
 </script>
 
 {#if !target}

package/dist/components/tooltip/QTooltip.svelte.d.ts

@@ -1,21 +1,33 @@
-import { SvelteComponentTyped } from "svelte";
-declare class __sveltets_Render<T extends HTMLElement | string> {
-    props(): {
-        show?: (() => void) | undefined;
-        hide?: (() => void) | undefined;
-        toggle?: (() => void) | undefined;
+import type { QTooltipProps } from "./props";
+declare function $$render<T extends HTMLElement | string>(): {
+    props: QTooltipProps<T>;
+    exports: {
+        show: () => void;
+        hide: () => void;
+        toggle: () => void;
     };
-    events(): {} & {
-        [evt: string]: CustomEvent<any>;
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends HTMLElement | string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {
+        show: () => void;
+        hide: () => void;
+        toggle: () => void;
     };
-    slots(): {};
 }
-export type QTooltipProps_<T extends HTMLElement | string> = ReturnType<__sveltets_Render<T>['props']>;
-export type QTooltipEvents<T extends HTMLElement | string> = ReturnType<__sveltets_Render<T>['events']>;
-export type QTooltipSlots<T extends HTMLElement | string> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class QTooltip<T extends HTMLElement | string> extends SvelteComponentTyped<QTooltipProps_<T>, QTooltipEvents<T>, QTooltipSlots<T>> {
-    get show(): () => void;
-    get hide(): () => void;
-    get toggle(): () => void;
+interface $$IsomorphicComponent {
+    new <T extends HTMLElement | string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends HTMLElement | string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-export {};
+declare const QTooltip: $$IsomorphicComponent;
+type QTooltip<T extends HTMLElement | string> = InstanceType<typeof QTooltip<T>>;
+export default QTooltip;

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

package/dist/components/tooltip/QTooltipBase.svelte.d.ts

@@ -1,14 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type QTooltipBaseProps = typeof __propDef.props;
-export type QTooltipBaseEvents = typeof __propDef.events;
-export type QTooltipBaseSlots = typeof __propDef.slots;
-export default class QTooltipBase extends SvelteComponentTyped<QTooltipBaseProps, QTooltipBaseEvents, QTooltipBaseSlots> {
-}
-export {};
+import type { QTooltipProps } from "./props";
+declare const QTooltipBase: import("svelte").Component<QTooltipProps<HTMLElement>, {}, "">;
+type QTooltipBase = ReturnType<typeof QTooltipBase>;
+export default QTooltipBase;