@quaffui/quaff 1.0.0-alpha2 → 1.0.0-beta12

package/dist/components/input/mask.js

@@ -0,0 +1,204 @@
+const NAMED_MASKS = {
+    date: "####/##/##",
+    datetime: "####/##/## ##:##",
+    time: "##:##",
+    fulltime: "##:##:##",
+    phone: "(###) ### - ####",
+    card: "#### #### #### ####",
+};
+const TOKENS = {
+    "#": { regex: /\d/ },
+    S: { regex: /[a-zA-Z]/ },
+    N: { regex: /[0-9a-zA-Z]/ },
+    A: { regex: /[a-zA-Z]/, transform: (value) => value.toLocaleUpperCase() },
+    a: { regex: /[a-zA-Z]/, transform: (value) => value.toLocaleLowerCase() },
+    X: { regex: /[0-9a-zA-Z]/, transform: (value) => value.toLocaleUpperCase() },
+    x: { regex: /[0-9a-zA-Z]/, transform: (value) => value.toLocaleLowerCase() },
+};
+function normalizeMask(mask) {
+    return NAMED_MASKS[mask] ?? mask;
+}
+function tokenFor(maskChar) {
+    return TOKENS[maskChar];
+}
+function fillEnabled(fillMask) {
+    return fillMask !== undefined && fillMask !== false;
+}
+function fillChar(fillMask) {
+    return typeof fillMask === "string" && fillMask.length > 0 ? fillMask[0] : "_";
+}
+function applyToken(token, value) {
+    return token.transform ? token.transform(value) : value;
+}
+function readMaskedToken(value, start, token, fillMask) {
+    const placeholder = fillChar(fillMask);
+    const fill = fillEnabled(fillMask);
+    for (let index = start; index < value.length; index += 1) {
+        const char = value[index];
+        if (fill && char === placeholder) {
+            return { value: "", next: index + 1 };
+        }
+        if (token.regex.test(char)) {
+            return { value: applyToken(token, char), next: index + 1 };
+        }
+    }
+    return { value: "", next: value.length };
+}
+function readRawToken(raw, start, token) {
+    for (let index = start; index < raw.length; index += 1) {
+        const char = raw[index];
+        if (token.regex.test(char)) {
+            return { value: applyToken(token, char), next: index + 1 };
+        }
+    }
+    return { value: "", next: raw.length };
+}
+function tokenPositions(normalizedMask) {
+    const positions = [];
+    for (let index = 0; index < normalizedMask.length; index += 1) {
+        if (tokenFor(normalizedMask[index])) {
+            positions.push(index);
+        }
+    }
+    return positions;
+}
+function isMaskLikeValue(value, normalizedMask) {
+    for (let index = 0; index < normalizedMask.length; index += 1) {
+        const maskChar = normalizedMask[index];
+        if (!tokenFor(maskChar) && value[index] === maskChar) {
+            return true;
+        }
+    }
+    return false;
+}
+function normalizeFilledValue(value, normalizedMask, fillMask) {
+    const placeholder = fillChar(fillMask);
+    const overflow = value.slice(normalizedMask.length);
+    let overflowIndex = 0;
+    let result = "";
+    for (let index = 0; index < normalizedMask.length; index += 1) {
+        const maskChar = normalizedMask[index];
+        const token = tokenFor(maskChar);
+        const valueChar = value[index];
+        if (!token) {
+            result += maskChar;
+        }
+        else if (valueChar === placeholder) {
+            const next = readRawToken(overflow, overflowIndex, token);
+            overflowIndex = next.next;
+            result += next.value || placeholder;
+        }
+        else if (valueChar && token.regex.test(valueChar)) {
+            result += applyToken(token, valueChar);
+        }
+        else {
+            const next = readRawToken(overflow, overflowIndex, token);
+            overflowIndex = next.next;
+            result += next.value || placeholder;
+        }
+    }
+    return result;
+}
+function deleteTokenIndex(caret, positions, direction) {
+    if (direction === "backward") {
+        for (let index = positions.length - 1; index >= 0; index -= 1) {
+            if (positions[index] < caret) {
+                return index;
+            }
+        }
+        return -1;
+    }
+    for (let index = 0; index < positions.length; index += 1) {
+        if (positions[index] >= caret) {
+            return index;
+        }
+    }
+    return -1;
+}
+export function unmaskValue(value, mask, fillMask) {
+    const normalizedMask = normalizeMask(mask);
+    let result = "";
+    let valueIndex = 0;
+    for (const maskChar of normalizedMask) {
+        const token = tokenFor(maskChar);
+        if (!token) {
+            valueIndex += value[valueIndex] === maskChar ? 1 : 0;
+            continue;
+        }
+        const next = readMaskedToken(value, valueIndex, token, fillMask);
+        result += next.value;
+        valueIndex = next.next;
+    }
+    return result;
+}
+export function maskValue(value, mask, fillMask) {
+    const normalizedMask = normalizeMask(mask);
+    const fill = fillEnabled(fillMask);
+    const placeholder = fillChar(fillMask);
+    if (fill && isMaskLikeValue(value, normalizedMask)) {
+        return normalizeFilledValue(value, normalizedMask, fillMask);
+    }
+    const raw = unmaskValue(value, normalizedMask, fillMask);
+    let result = "";
+    let rawIndex = 0;
+    let hasValue = false;
+    for (const maskChar of normalizedMask) {
+        const token = tokenFor(maskChar);
+        if (!token) {
+            result += fill || hasValue || rawIndex < raw.length ? maskChar : "";
+            continue;
+        }
+        const next = readRawToken(raw, rawIndex, token);
+        rawIndex = next.next;
+        if (next.value) {
+            result += next.value;
+            hasValue = true;
+        }
+        else if (fill) {
+            result += placeholder;
+        }
+        else {
+            return result;
+        }
+    }
+    return result;
+}
+export function maskCaretPosition(tokenCount, mask, displayLength) {
+    const positions = tokenPositions(normalizeMask(mask));
+    if (tokenCount <= 0) {
+        return positions[0] ?? 0;
+    }
+    return Math.min(positions[tokenCount] ?? displayLength, displayLength);
+}
+export function deleteMaskedToken(value, mask, caret, direction, fillMask) {
+    const normalizedMask = normalizeMask(mask);
+    const positions = tokenPositions(normalizedMask);
+    const tokenIndex = deleteTokenIndex(caret, positions, direction);
+    if (tokenIndex < 0) {
+        return null;
+    }
+    if (fillEnabled(fillMask)) {
+        const masked = maskValue(value, normalizedMask, fillMask);
+        const position = positions[tokenIndex];
+        if (position === undefined || masked[position] === fillChar(fillMask)) {
+            return null;
+        }
+        const nextMasked = `${masked.slice(0, position)}${fillChar(fillMask)}${masked.slice(position + 1)}`;
+        return {
+            masked: nextMasked,
+            unmasked: unmaskValue(nextMasked, normalizedMask, fillMask),
+            caret: position,
+        };
+    }
+    const raw = unmaskValue(value, normalizedMask, fillMask);
+    if (tokenIndex >= raw.length) {
+        return null;
+    }
+    const unmasked = `${raw.slice(0, tokenIndex)}${raw.slice(tokenIndex + 1)}`;
+    const masked = maskValue(unmasked, normalizedMask, fillMask);
+    return {
+        masked,
+        unmasked,
+        caret: maskCaretPosition(tokenIndex, normalizedMask, masked.length),
+    };
+}

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

@@ -1,7 +1,9 @@
 import type { NativeProps } from "../../utils";
 import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement> {
+import type { HTMLAttributes, HTMLInputAttributes } from "svelte/elements";
+import type { QInputFillMask } from "./mask";
+type QInputNativeAttributes = Omit<HTMLInputAttributes, "class" | "style" | "value" | "disabled">;
+export interface QInputProps extends NativeProps, QInputNativeAttributes {
     /**
      * Makes the input component more compact.
      *
@@ -13,7 +15,7 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
      *
      * @default false
      */
-    disable?: boolean;
+    disabled?: boolean;
     /**
      * Indicates an error state for the input.
      *
@@ -56,10 +58,40 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
      * @default false
      */
     rounded?: boolean;
+    /**
+     * Applies a mask to text input. Supports tokens (#, S, N, A, a, X, x) and named masks: date, datetime, time, fulltime, phone, card.
+     *
+     * @default undefined
+     */
+    mask?: string;
+    /**
+     * Fills empty mask token positions with underscores, or with the first character of the provided string.
+     *
+     * @default undefined
+     */
+    fillMask?: QInputFillMask;
+    /**
+     * Stores only mask token characters in the bindable value.
+     *
+     * @default false
+     */
+    unmaskedValue?: boolean;
     /**
      * Current value of the input field. This property is bindable.
      */
-    value: string;
+    value: string | number;
+    /**
+     * Classes applied to the field wrapper.
+     *
+     * @default undefined
+     */
+    class?: HTMLAttributes<HTMLDivElement>["class"];
+    /**
+     * Styles applied to the field wrapper.
+     *
+     * @default undefined
+     */
+    style?: HTMLAttributes<HTMLDivElement>["style"];
     /**
      * Content to be placed before the input wrapper element, usually an icon.
      *
@@ -85,3 +117,4 @@ export interface QInputProps extends NativeProps, HTMLAttributes<HTMLDivElement>
      */
     after?: Snippet;
 }
+export {};

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 { ContextReseter } from "../private";
-  import { QLayoutCtxName } from "../../utils";
+  import { onMount } from "svelte";
+  import { QContext } from "../../utils";
+  import ContextResetter from "../../internal/ContextResetter.svelte";
   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,209 @@
   );
 
   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 hasBar = barType === "header" ? header : footer;
+    const barInfo = barType === "header" ? headerInfo : footerInfo;
+    const barReady = !hasBar || barInfo.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`}
@@ -162,14 +317,14 @@
   {@render header?.()}
   {@render footer?.()}
 
-  <ContextReseter
+  <ContextResetter
     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
@@ -183,5 +338,5 @@
         {@render children?.()}
       {/if}
     </div>
-  </ContextReseter>
+  </ContextResetter>
 </div>