@quaffui/quaff 1.0.0-beta1 → 1.0.0-beta13

package/dist/components/header/QHeader.svelte

@@ -1,12 +1,22 @@
 <script lang="ts">
-  import { getContext, onMount, untrack } 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 { onMount } from "svelte";
+  import { useRevealScrollObserver } from "../../composables";
+  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,37 @@
     children,
     ...props
   }: QHeaderProps = $props();
+  // #endregion: --- Props
 
-  const uid = $props.id();
-
-  let headerEl = $state<HTMLElement>();
+  // #region:    --- Derived values
+  const revealObserver = useRevealScrollObserver("header", uid, () => reveal);
+  const revealScroll = $derived(revealObserver.scroll);
 
-  const headerContext = QContext.get<AppbarContext>(QLayoutCtxName.header);
-  const layoutView = getContext<{ value: NonNullable<QLayoutProps["view"]> }>(
-    QLayoutCtxName.view,
+  const offset = $derived(
+    revealScroll ? revealScroll.position - height : undefined,
   );
-  if (!headerContext || !layoutView) {
-    throw new Error("QHeader should be used inside QLayout");
-  }
 
-  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,
+    reveal && revealScroll?.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 +68,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 +92,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/header/QHeader.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 QHeaderProps_ = typeof __propDef.props;
-export { QHeaderProps_ as QHeaderProps };
-export type QHeaderEvents = typeof __propDef.events;
-export type QHeaderSlots = typeof __propDef.slots;
-export default class QHeader extends SvelteComponentTyped<QHeaderProps_, QHeaderEvents, QHeaderSlots> {
-}
+import type { QHeaderProps } from "./props";
+declare const QHeader: import("svelte").Component<QHeaderProps, {}, "">;
+type QHeader = ReturnType<typeof QHeader>;
+export default QHeader;

package/dist/components/icon/QIcon.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import { useSize } from "../../composables";
+  import { useSize, useColor } from "../../composables";
   import type { QIconProps } from "./props";
 
+  // #region:    --- Props
   let {
     size = "md",
     name,
@@ -14,12 +15,12 @@
     children,
     ...props
   }: QIconProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const qSize = $derived(useSize(size, "q-icon"));
 
-  const parsedColor = $derived(
-    color && `var(--${color.replace("#", "")}, ${color})`,
-  );
+  const parsedColor = $derived(color && useColor(color));
 
   const imgAttrs = $derived({
     alt: "Quaff Image Icon",
@@ -27,6 +28,7 @@
   });
 
   const typeClass = $derived(`q-icon--${type}`);
+  // #endregion: --- Derived values
 </script>
 
 <i

package/dist/components/icon/QIcon.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 QIconProps_ = typeof __propDef.props;
-export { QIconProps_ as QIconProps };
-export type QIconEvents = typeof __propDef.events;
-export type QIconSlots = typeof __propDef.slots;
-export default class QIcon extends SvelteComponentTyped<QIconProps_, QIconEvents, QIconSlots> {
-}
+import type { QIconProps } from "./props";
+declare const QIcon: import("svelte").Component<QIconProps, {}, "">;
+type QIcon = ReturnType<typeof QIcon>;
+export default QIcon;

package/dist/components/index.d.ts

@@ -11,6 +11,7 @@ import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
+import QExpansionItem from "./expansion-item/QExpansionItem.svelte";
 import QFooter from "./footer/QFooter.svelte";
 import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
@@ -21,6 +22,7 @@ import QList from "./list/QList.svelte";
 import QItem from "./list/QItem.svelte";
 import QItemSection from "./list/QItemSection.svelte";
 import QLinearProgress from "./progress/QLinearProgress.svelte";
+import QMenu from "./menu/QMenu.svelte";
 import QRadio from "./radio/QRadio.svelte";
 import QRailbar from "./railbar/QRailbar.svelte";
 import QSeparator from "./separator/QSeparator.svelte";
@@ -31,4 +33,4 @@ import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QExpansionItem, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QMenu, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/index.js

@@ -11,6 +11,7 @@ import QCircularProgress from "./progress/QCircularProgress.svelte";
 import QCodeBlock from "./codeBlock/QCodeBlock.svelte";
 import QDialog from "./dialog/QDialog.svelte";
 import QDrawer from "./drawer/QDrawer.svelte";
+import QExpansionItem from "./expansion-item/QExpansionItem.svelte";
 import QFooter from "./footer/QFooter.svelte";
 import QHeader from "./header/QHeader.svelte";
 import QIcon from "./icon/QIcon.svelte";
@@ -21,6 +22,7 @@ import QList from "./list/QList.svelte";
 import QItem from "./list/QItem.svelte";
 import QItemSection from "./list/QItemSection.svelte";
 import QLinearProgress from "./progress/QLinearProgress.svelte";
+import QMenu from "./menu/QMenu.svelte";
 import QRadio from "./radio/QRadio.svelte";
 import QRailbar from "./railbar/QRailbar.svelte";
 import QSeparator from "./separator/QSeparator.svelte";
@@ -31,4 +33,4 @@ import QSwitch from "./switch/QSwitch.svelte";
 import QToolbar from "./toolbar/QToolbar.svelte";
 import QToolbarTitle from "./toolbar/QToolbarTitle.svelte";
 import QTooltip from "./tooltip/QTooltip.svelte";
-export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };
+export { QAvatar, QBreadcrumbs, QBreadcrumbsEl, QBtn, QCard, QCardSection, QCardActions, QCheckbox, QChip, QCircularProgress, QCodeBlock, QDialog, QDrawer, QExpansionItem, QFooter, QHeader, QIcon, QInput, QSelect, QLayout, QList, QItem, QItemSection, QLinearProgress, QMenu, QRadio, QRailbar, QSeparator, QTabs, QTab, QTable, QSwitch, QToolbar, QToolbarTitle, QTooltip, };

package/dist/components/input/QInput.svelte

@@ -1,17 +1,27 @@
 <script lang="ts">
-  import type { QEvent } from "../../utils";
+  import { type QEvent } from "../../utils";
+  import {
+    deleteMaskedToken,
+    maskCaretPosition,
+    maskValue,
+    unmaskValue,
+  } from "./mask";
+  import type { QInputProps } from "./props";
 
-  type QInputFocusEvent = QEvent<FocusEvent, HTMLDivElement>;
+  type QInputFocusEvent = QEvent<FocusEvent, HTMLInputElement>;
+  type QInputInputEvent = QEvent<Event, HTMLInputElement>;
+  type QInputKeyboardEvent = QEvent<KeyboardEvent, HTMLInputElement>;
 
+  // #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,
+    disabled = false,
     error = false,
     errorMessage = undefined,
     filled = false,
@@ -24,29 +34,136 @@
     append = undefined,
     after = undefined,
     value = $bindable(),
-    ...props
+    class: userClass,
+    style,
+    onfocus,
+    onblur,
+    placeholder = "",
+    tabindex,
+    type,
+    mask,
+    fillMask,
+    unmaskedValue = false,
+    oninput,
+    onkeydown,
+    ...inputProps
   }: QInputProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Derived values
+  const displayValue = $derived(
+    mask ? maskValue(String(value ?? ""), mask, fillMask) : (value ?? ""),
+  );
+  const hasValue = $derived(
+    value !== "" && value !== undefined && value !== null,
+  );
+  const hasNativePlaceholder = $derived(
+    ["date", "datetime-local", "month", "time", "week"].includes(String(type)),
+  );
+  const active = $derived(
+    hasValue ||
+      focus ||
+      !!placeholder ||
+      hasNativePlaceholder ||
+      (!!mask && fillMask !== undefined),
+  );
+  const inputType = $derived(mask ? (type ?? "text") : type);
+  // #endregion: --- Derived values
+
+  // #region:    --- Functions
+  function setCaret(input: HTMLInputElement, position: number) {
+    try {
+      input.setSelectionRange(position, position);
+    } catch {
+      // Some native input types do not support text selection.
+    }
+  }
+
+  function onInput(e: QInputInputEvent) {
+    const input = e.currentTarget;
+
+    if (!mask) {
+      if (type === "number" || type === "range") {
+        value = Number.isNaN(input.valueAsNumber) ? "" : input.valueAsNumber;
+      } else {
+        value = input.value;
+      }
+      oninput?.(e);
+      return;
+    }
+
+    const cursor = input.selectionStart ?? input.value.length;
+    const previousDisplayLength = String(displayValue).length;
+    const masked = maskValue(input.value, mask, fillMask);
+    const unmasked = unmaskValue(masked, mask, fillMask);
+    const tokenCount =
+      fillMask !== undefined &&
+      fillMask !== false &&
+      cursor > previousDisplayLength
+        ? unmasked.length
+        : unmaskValue(input.value.slice(0, cursor), mask, fillMask).length;
+    const nextCaret = maskCaretPosition(tokenCount, mask, masked.length);
 
-  const active = $derived(value || focus);
+    input.value = masked;
+    value = unmaskedValue ? unmasked : masked;
+    setCaret(input, nextCaret);
+    queueMicrotask(() => setCaret(input, nextCaret));
+    oninput?.(e);
+  }
+
+  function onKeydown(e: QInputKeyboardEvent) {
+    onkeydown?.(e);
+    if (
+      e.defaultPrevented ||
+      !mask ||
+      (e.key !== "Backspace" && e.key !== "Delete")
+    ) {
+      return;
+    }
+
+    const input = e.currentTarget;
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start === null || end === null || start !== end) {
+      return;
+    }
+
+    const next = deleteMaskedToken(
+      input.value,
+      mask,
+      start,
+      e.key === "Backspace" ? "backward" : "forward",
+      fillMask,
+    );
+    if (!next) {
+      return;
+    }
+
+    e.preventDefault();
+    input.value = next.masked;
+    value = next[unmaskedValue ? "unmasked" : "masked"];
+    setCaret(input, next.caret);
+    queueMicrotask(() => setCaret(input, next.caret));
+  }
 
   function onFocus(e: QInputFocusEvent) {
     focus = true;
-    props.onfocus?.(e);
+    onfocus?.(e);
   }
 
   function onBlur(e: QInputFocusEvent) {
     focus = false;
-    props.onblur?.(e);
+    onblur?.(e);
   }
+  // #endregion: --- Functions
 
   // q-field here, q-input in classes
 </script>
 
 <div
-  {...props}
   class={[
     "q-field",
-    props.class,
+    userClass,
     "q-input",
     !outlined && !rounded && !filled && "q-field--default",
     outlined && "q-field--outlined",
@@ -59,11 +176,12 @@
     label && "q-field--label",
     !!append && "q-field--snippet-append",
     !!prepend && "q-field--snippet-prepend",
-    disable && "q-field--disable",
+    disabled && "q-field--disabled",
     error && "q-field--error",
   ]}
+  {style}
   style:--snippet-prepend-width="{snippetPrependWidth}px"
-  aria-disabled={disable || undefined}
+  aria-disabled={disabled || undefined}
   data-quaff
 >
   {#if before}
@@ -83,13 +201,17 @@
         </div>
       {/if}
       <input
+        {...inputProps}
         class="q-field__input"
-        bind:value
-        placeholder=""
+        value={displayValue}
+        {placeholder}
+        type={inputType}
+        oninput={onInput}
+        onkeydown={onKeydown}
         onfocus={onFocus}
         onblur={onBlur}
-        disabled={disable}
-        tabindex={disable === true ? -1 : 0}
+        {disabled}
+        tabindex={disabled === true ? -1 : (tabindex ?? 0)}
       />
       <span class="q-field__label">{label}</span>
 

package/dist/components/input/QInput.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 QInputProps_ = typeof __propDef.props;
-export { QInputProps_ as QInputProps };
-export type QInputEvents = typeof __propDef.events;
-export type QInputSlots = typeof __propDef.slots;
-export default class QInput extends SvelteComponentTyped<QInputProps_, QInputEvents, QInputSlots> {
-}
+import type { QInputProps } from "./props";
+declare const QInput: import("svelte").Component<QInputProps, {}, "value">;
+type QInput = ReturnType<typeof QInput>;
+export default QInput;

package/dist/components/input/docs.js

@@ -9,8 +9,8 @@ export const QInputDocs = {
         events: [
             {
                 name: "input",
-                type: "(value: string) => void",
-                description: "Emitted when the user types in the input component.",
+                type: "InputEvent",
+                description: "Native input event from the inner input element.",
             },
         ],
     },

package/dist/components/input/mask.d.ts

@@ -0,0 +1,10 @@
+export type QInputFillMask = boolean | string;
+export type QMaskDeleteDirection = "backward" | "forward";
+export declare function unmaskValue(value: string, mask: string, fillMask?: QInputFillMask): string;
+export declare function maskValue(value: string, mask: string, fillMask?: QInputFillMask): string;
+export declare function maskCaretPosition(tokenCount: number, mask: string, displayLength: number): number;
+export declare function deleteMaskedToken(value: string, mask: string, caret: number, direction: QMaskDeleteDirection, fillMask?: QInputFillMask): {
+    masked: string;
+    unmasked: string;
+    caret: number;
+} | null;