@quaffui/quaff 1.0.0-beta7 → 1.0.0-beta9

package/dist/components/expansion-item/QExpansionItem.svelte

@@ -5,6 +5,7 @@
   import { isActivationKey, type QEvent } from "../../utils";
   import type { QExpansionItemProps } from "./props";
 
+  // #region:    --- Props
   let {
     value = $bindable(false),
     label,
@@ -29,7 +30,9 @@
     onExpandIconClick,
     ...props
   }: QExpansionItemProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   const id = $props.id();
   const contentId = `q-expansion-item__content-${id}`;
   const summaryId = `q-expansion-item__summary-${id}`;
@@ -37,7 +40,13 @@
   const supportDetailsContent = CSS.supports(
     "selector(details::details-content)",
   );
+  // #endregion: --- Non-reactive variables
 
+  // #region:    --- Reactive variables
+  let detailsEl = $state<HTMLDetailsElement>();
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Derived values
   const summaryAttributes = $derived(
     !supportDetailsContent
       ? {
@@ -58,15 +67,15 @@
       : {},
   );
 
-  let detailsEl = $state<HTMLDetailsElement>();
-
   const iconAttributes = $derived({
     [expandIconToggle ? "icon" : "name"]:
       expandedIcon && value ? expandedIcon : expandIcon,
     flat: expandIconToggle || undefined,
     "aria-label": toggleAriaLabel,
   });
+  // #endregion: --- Derived values
 
+  // #region:    --- Effects
   $effect.pre(() => {
     if (defaultOpened) {
       show();
@@ -93,7 +102,9 @@
       }
     });
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Methods
   export function toggle() {
     value = !value;
   }
@@ -105,7 +116,9 @@
   export function hide() {
     value = false;
   }
+  // #endregion: --- Methods
 
+  // #region:    --- Functions
   function preventAndStop<T extends Event>(e: T) {
     e.preventDefault();
     e.stopPropagation();
@@ -186,6 +199,7 @@
     }) as QEvent<MouseEvent, HTMLElement>;
     onIconClick(clickEvent);
   }
+  // #endregion: --- Functions
 </script>
 
 {#snippet labelSnippet()}

package/dist/components/footer/QFooter.svelte

@@ -1,14 +1,10 @@
 <script lang="ts">
-  import { getContext, onMount, untrack } from "svelte";
+  import { onMount } from "svelte";
   import { QScrollObserver } from "../..";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { QLayoutProps } from "../layout/props";
-  import type { AppbarContext } from "../layout/QLayout.svelte";
+  import { footerCtx } from "../layout/QLayout.svelte";
   import type { QFooterProps } from "./props";
 
-  let footerEl = $state<HTMLElement>();
-
+  // #region:    --- Props
   let {
     value = $bindable(true),
     bordered = false,
@@ -18,44 +14,52 @@
     children,
     ...props
   }: QFooterProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Non-reactive variables
   const uid = $props.id();
+  // #endregion: --- Non-reactive variables
 
-  const footerContext = QContext.get<AppbarContext>(QLayoutCtxName.footer);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
-  );
+  // #region:    --- Reactive variables
+  let footerEl = $state<HTMLElement>();
+  let contentScrollHeight = $state(0);
 
-  if (!footerContext || !layoutView) {
-    throw new Error("QFooter should be used inside QLayout");
-  }
+  const footerContext = footerCtx.assertGet(
+    "QFooter should be used inside QLayout",
+  );
+  // #endregion: --- Reactive variables
 
+  // #region:    --- Derived values
   const scroll = $derived(
     reveal
       ? new QScrollObserver(`.q-footer--${uid} ~ .q-layout__content`)
       : undefined,
   );
-  let contentScrollHeight = $state(0);
 
   const offset = $derived(scroll ? scroll.position + height : undefined);
-  // Collapse the footer `${reavealOffset}px` above the bottom of layout content when scrolling up
+
+  // Collapse the footer `${revealOffset}px` above the bottom of layout content when scrolling up
   const collapsed = $derived(
     reveal &&
       scroll?.direction === "up" &&
       offset! + revealOffset < contentScrollHeight,
   );
 
-  const leftOffset = () => layoutView.value.charAt(8) === "l";
-  const rightOffset = () => layoutView.value.charAt(10) === "r";
+  const leftOffset = $derived(footerContext.view.charAt(8) === "l");
+  const rightOffset = $derived(footerContext.view.charAt(10) === "r");
+  // #endregion: --- Derived values
 
+  // #region:    --- Effects
   $effect.pre(() => {
-    untrack(() => footerContext).updateEntries({
+    footerCtx.updateEntries({
       height,
       collapsed,
       ready: true,
     });
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Lifecycle
   onMount(() => {
     // Calculating the layout content's height
     const content = document.querySelector(
@@ -73,13 +77,14 @@
     }, 100);
 
     return () => {
-      footerContext.updateEntries({
+      footerCtx.updateEntries({
         height: 0,
         collapsed: false,
         ready: false,
       });
     };
   });
+  // #endregion: --- Lifecycle
 </script>
 
 {#if value}
@@ -92,8 +97,8 @@
       `q-footer--${uid}`,
       collapsed && "q-footer--collapsed",
       bordered && "q-footer--bordered",
-      leftOffset() && "q-footer--offset-left",
-      rightOffset() && "q-footer--offset-right",
+      leftOffset && "q-footer--offset-left",
+      rightOffset && "q-footer--offset-right",
     ]}
     style:--footer-height="{height}px"
     data-quaff

package/dist/components/header/QHeader.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
-  import { getContext, onMount, untrack } from "svelte";
+  import { onMount } from "svelte";
   import { QScrollObserver } from "../..";
-  import { QContext } from "../../classes/QContext.svelte";
-  import { QLayoutCtxName } from "../../utils";
-  import type { AppbarContext } from "../layout/QLayout.svelte";
-  import type { QLayoutProps } from "../layout/props";
+  import { headerCtx } from "../layout/QLayout.svelte";
   import type { QHeaderProps } from "./props";
 
+  // #region:    --- Non-reactive variables
+  const uid = $props.id();
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Reactive variables
+  let headerEl = $state<HTMLElement>();
+
+  const headerContext = headerCtx.assertGet(
+    "QHeader should be used inside QLayout",
+  );
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Props
   let {
     elevated = false,
     inset = false,
@@ -17,41 +27,38 @@
     children,
     ...props
   }: QHeaderProps = $props();
+  // #endregion: --- Props
 
-  const uid = $props.id();
-
-  let headerEl = $state<HTMLElement>();
-
-  const headerContext = QContext.get<AppbarContext>(QLayoutCtxName.header);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
-  );
-  if (!headerContext || !layoutView) {
-    throw new Error("QHeader should be used inside QLayout");
-  }
-
+  // #region:    --- Derived values
   const scroll = $derived(
     reveal
       ? new QScrollObserver(`.q-header--${uid} ~ .q-layout__content`)
       : undefined,
   );
+
   const offset = $derived(scroll ? scroll.position - height : undefined);
+
   // Collapse the header `${reavealOffset}px` below the top of layout content when scrolling down
   const collapsed = $derived(
     reveal && scroll?.direction === "down" && offset! - revealOffset > 0,
   );
 
-  const leftOffset = () => layoutView.value.charAt(0) === "l";
-  const rightOffset = () => layoutView.value.charAt(2) === "r";
+  const leftOffset = $derived(headerContext.view.charAt(0) === "l");
 
+  const rightOffset = $derived(headerContext.view.charAt(2) === "r");
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
   $effect.pre(() => {
-    untrack(() => headerContext).updateEntries({
+    headerCtx.updateEntries({
       height,
       collapsed,
       ready: true,
     });
   });
+  // #endregion: --- Effects
 
+  // #region:    --- Lifecycle
   onMount(() => {
     if (headerContext) {
       setTimeout(() => {
@@ -62,16 +69,18 @@
     }
 
     return () => {
-      if (headerContext && headerEl) {
+      if (headerEl) {
         headerEl.style.transition = "none";
-        headerContext.updateEntries({
-          height: 0,
-          collapsed: false,
-          ready: false,
-        });
       }
+
+      headerCtx.updateEntries({
+        height: 0,
+        collapsed: false,
+        ready: false,
+      });
     };
   });
+  // #endregion: --- Lifecycle
 </script>
 
 <header
@@ -84,8 +93,8 @@
     elevated && "q-header--elevated",
     bordered && "q-header--bordered",
     collapsed && "q-header--collapsed",
-    leftOffset() && "q-header--offset-left",
-    rightOffset() && "q-header--offset-right",
+    leftOffset && "q-header--offset-left",
+    rightOffset && "q-header--offset-right",
     inset && "q-header--inset",
   ]}
   style:--header-height="{height}px"

package/dist/components/icon/QIcon.svelte

@@ -2,6 +2,7 @@
   import { useSize } from "../../composables";
   import type { QIconProps } from "./props";
 
+  // #region:    --- Props
   let {
     size = "md",
     name,
@@ -14,7 +15,9 @@
     children,
     ...props
   }: QIconProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const qSize = $derived(useSize(size, "q-icon"));
 
   const parsedColor = $derived(
@@ -27,6 +30,7 @@
   });
 
   const typeClass = $derived(`q-icon--${type}`);
+  // #endregion: --- Derived values
 </script>
 
 <i

package/dist/components/input/QInput.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
   import type { QEvent } from "../../utils";
+  import type { QInputProps } from "./props";
 
   type QInputFocusEvent = QEvent<FocusEvent, HTMLDivElement>;
 
+  // #region:    --- Reactive variables
   let focus = $state(false);
 
   let snippetPrependWidth = $state(0);
+  // #endregion: --- Reactive variables
 
-  import type { QInputProps } from "../input/props";
-
+  // #region:    --- Props
   let {
     dense = false,
     disable = false,
@@ -26,9 +28,13 @@
     value = $bindable(),
     ...props
   }: QInputProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const active = $derived(value || focus);
+  // #endregion: --- Derived values
 
+  // #region:    --- Functions
   function onFocus(e: QInputFocusEvent) {
     focus = true;
     props.onfocus?.(e);
@@ -38,6 +44,7 @@
     focus = false;
     props.onblur?.(e);
   }
+  // #endregion: --- Functions
 
   // q-field here, q-input in classes
 </script>