@quaffui/quaff 1.0.0-alpha2 → 1.0.0-beta12

package/dist/components/menu/QMenu.svelte

@@ -0,0 +1,314 @@
+<script lang="ts">
+  import { onMount, tick, untrack } from "svelte";
+  import { on } from "svelte/events";
+  import { innerHeight, innerWidth } from "svelte/reactivity/window";
+  import { browser } from "$app/environment";
+  import {
+    doesOverlayUsePopover,
+    getOverlayPortalTarget,
+    usePortal,
+  } from "../../utils";
+  import type { QMenuAnchor, QMenuProps } from "./props";
+
+  // #region:    --- Props
+  let {
+    value = $bindable(false),
+    target,
+    anchor = "bottom left",
+    self = "top left",
+    fit = false,
+    persistent = false,
+    autoClose = true,
+    children,
+    class: userClass,
+    ...props
+  }: QMenuProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Reactive variables
+  let helperEl = $state<HTMLDivElement>();
+  let menuEl = $state<HTMLDivElement>();
+  let anchorEl = $state<HTMLElement | null>(null);
+  let menuTop = $state(0);
+  let menuLeft = $state(0);
+  let menuWidth = $state<string | undefined>();
+  let menuMaxWidth = $state<string | undefined>();
+  let menuPosition = $state<"fixed" | "absolute">("fixed");
+  let wasMenuOpen = false;
+  // #endregion: --- Reactive variables
+
+  // #region:    --- Derived values
+  const [anchorX, anchorY] = $derived(parseAnchor(anchor));
+  const [selfX, selfY] = $derived(parseAnchor(self));
+  const portalTarget = $derived(
+    browser ? getOverlayPortalTarget(anchorEl) : undefined,
+  );
+  // #endregion: --- Derived values
+
+  // #region:    --- Effects
+  $effect(() => {
+    if (!browser || !helperEl) {
+      return;
+    }
+
+    if (target) {
+      anchorEl = target;
+      return;
+    }
+
+    anchorEl = findParentQuaffElement(helperEl);
+  });
+
+  $effect(() => {
+    if (!browser) {
+      return;
+    }
+
+    if (value && !wasMenuOpen) {
+      wasMenuOpen = true;
+      untrack(openMenu);
+      return;
+    }
+
+    if (!value && wasMenuOpen) {
+      wasMenuOpen = false;
+      untrack(closeMenu);
+    }
+  });
+
+  $effect(() => {
+    if (!browser || !value || !anchorEl || !menuEl) {
+      return;
+    }
+
+    const viewportWidth = innerWidth.current;
+    const viewportHeight = innerHeight.current;
+    const syncCurrentPosition = () =>
+      syncPosition(viewportWidth, viewportHeight);
+
+    syncCurrentPosition();
+    const removeWindowScrollListener = on(
+      window,
+      "scroll",
+      syncCurrentPosition,
+      { capture: true },
+    );
+
+    return () => {
+      removeWindowScrollListener();
+    };
+  });
+
+  $effect(() => {
+    if (!browser || !value) {
+      return;
+    }
+
+    const removeDocumentPointerdownListener = on(
+      document,
+      "pointerdown",
+      handleDocumentPointerdown,
+      {
+        capture: true,
+      },
+    );
+    const removeDocumentKeydownListener = on(
+      document,
+      "keydown",
+      handleDocumentKeydown,
+      {
+        capture: true,
+      },
+    );
+
+    return () => {
+      removeDocumentPointerdownListener();
+      removeDocumentKeydownListener();
+    };
+  });
+  // #endregion: --- Effects
+
+  // #region:    --- Lifecycle
+  onMount(() => hidePopover);
+  // #endregion: --- Lifecycle
+
+  // #region:    --- Methods
+  export function show() {
+    value = true;
+  }
+
+  export function hide() {
+    value = false;
+  }
+
+  export function toggle() {
+    value = !value;
+  }
+
+  // #endregion: --- Methods
+
+  // #region:    --- Functions
+  function findParentQuaffElement(el: HTMLElement) {
+    let parent = el.parentElement;
+
+    while (parent) {
+      if (parent.hasAttribute("data-quaff")) {
+        return parent;
+      }
+      parent = parent.parentElement;
+    }
+
+    return el.parentElement;
+  }
+
+  function parseAnchor(anchorValue: QMenuAnchor): [number, number] {
+    const [vertical, horizontal] = anchorValue.split(" ") as [string, string];
+    const verticalMap: Record<string, number> = {
+      top: 0,
+      center: 0.5,
+      bottom: 1,
+    };
+    const horizontalMap: Record<string, number> = {
+      left: 0,
+      middle: 0.5,
+      right: 1,
+    };
+
+    return [horizontalMap[horizontal] ?? 0, verticalMap[vertical] ?? 0];
+  }
+
+  async function openMenu() {
+    await tick();
+
+    if (menuEl && doesOverlayUsePopover(anchorEl) && "showPopover" in menuEl) {
+      menuEl.showPopover();
+      await tick();
+    }
+
+    syncPosition();
+    requestAnimationFrame(() => syncPosition());
+  }
+
+  function closeMenu() {
+    hidePopover();
+  }
+
+  function hidePopover() {
+    if (!menuEl || !("hidePopover" in menuEl)) {
+      return;
+    }
+
+    try {
+      menuEl.hidePopover();
+    } catch {
+      /* already closed */
+    }
+  }
+
+  function syncPosition(
+    viewportWidth = innerWidth.current,
+    viewportHeight = innerHeight.current,
+  ) {
+    if (
+      !browser ||
+      !anchorEl ||
+      !menuEl ||
+      viewportWidth === undefined ||
+      viewportHeight === undefined
+    ) {
+      return;
+    }
+
+    const rect = anchorEl.getBoundingClientRect();
+    const dialog = anchorEl.closest("dialog");
+    const shouldUsePopover = doesOverlayUsePopover(anchorEl);
+    const dialogRect =
+      dialog?.open && !shouldUsePopover ? dialog.getBoundingClientRect() : null;
+    const margin = 8;
+    const maxViewportWidth = viewportWidth - margin * 2;
+    const baseTop = rect.top + rect.height * anchorY;
+    const baseLeft = rect.left + rect.width * anchorX;
+    const measured = menuEl.getBoundingClientRect();
+    const measuredWidth = fit
+      ? Math.min(rect.width, maxViewportWidth)
+      : measured.width;
+
+    const top = baseTop - measured.height * selfY;
+    const left = baseLeft - measuredWidth * selfX;
+
+    menuWidth = fit ? `${rect.width}px` : undefined;
+    menuMaxWidth = fit ? `${maxViewportWidth}px` : undefined;
+
+    if (dialogRect) {
+      menuPosition = "absolute";
+      menuTop = top - dialogRect.top;
+      menuLeft = left - dialogRect.left;
+      return;
+    }
+
+    menuPosition = "fixed";
+    menuTop = Math.max(
+      margin,
+      Math.min(top, viewportHeight - measured.height - margin),
+    );
+    menuLeft = Math.max(
+      margin,
+      Math.min(left, viewportWidth - measuredWidth - margin),
+    );
+  }
+
+  function handleDocumentPointerdown(event: PointerEvent) {
+    if (!value || persistent) {
+      return;
+    }
+
+    const targetNode = event.target as Node;
+    if (anchorEl?.contains(targetNode) || menuEl?.contains(targetNode)) {
+      return;
+    }
+
+    hide();
+  }
+
+  function handleDocumentKeydown(event: KeyboardEvent) {
+    if (!value || event.key !== "Escape") {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    hide();
+  }
+
+  function handleMenuClick() {
+    if (autoClose) {
+      hide();
+    }
+  }
+  // #endregion: --- Functions
+</script>
+
+<div bind:this={helperEl} class="q-menu__helper" aria-hidden="true"></div>
+
+{#if value}
+  <div
+    bind:this={menuEl}
+    use:usePortal={portalTarget}
+    popover={doesOverlayUsePopover(anchorEl) ? "manual" : undefined}
+    data-quaff
+    data-quaff-overlay
+    data-quaff-menu
+    role="menu"
+    tabindex="-1"
+    {...props}
+    class={["q-menu", userClass]}
+    style:position={menuPosition}
+    style:top="{menuTop}px"
+    style:left="{menuLeft}px"
+    style:width={menuWidth}
+    style:max-width={menuMaxWidth}
+    onclick={handleMenuClick}
+  >
+    {@render children?.()}
+  </div>
+{/if}

package/dist/components/menu/QMenu.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { QMenuProps } from "./props";
+declare const QMenu: import("svelte").Component<QMenuProps, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, "value">;
+type QMenu = ReturnType<typeof QMenu>;
+export default QMenu;

package/dist/components/menu/docs.d.ts

@@ -0,0 +1,2 @@
+import type { QComponentDocs } from "../../utils";
+export declare const QMenuDocs: QComponentDocs;

package/dist/components/menu/docs.js

@@ -0,0 +1,27 @@
+import { QMenuDocsProps, QMenuDocsSnippets } from "./docs.props";
+export const QMenuDocs = {
+    name: "QMenu",
+    description: "QMenu displays anchored popup content. It handles positioning, outside-click dismissal, Escape dismissal, and native dialog layering.",
+    docs: {
+        props: QMenuDocsProps,
+        snippets: QMenuDocsSnippets,
+        methods: [
+            {
+                name: "show",
+                type: "() => void",
+                description: "Opens the menu.",
+            },
+            {
+                name: "hide",
+                type: "() => void",
+                description: "Closes the menu.",
+            },
+            {
+                name: "toggle",
+                type: "() => void",
+                description: "Toggles the menu open state.",
+            },
+        ],
+        events: [],
+    },
+};

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

@@ -0,0 +1,48 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export type QMenuAnchor = "top left" | "top middle" | "top right" | "center left" | "center middle" | "center right" | "bottom left" | "bottom middle" | "bottom right";
+export interface QMenuProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Bound open state.
+     *
+     * @default false
+     */
+    value?: boolean;
+    /**
+     * Element to anchor the menu to. When omitted, QMenu anchors to the nearest parent Quaff component.
+     *
+     * @default undefined
+     */
+    target?: HTMLElement;
+    /**
+     * Anchor point on the target element.
+     *
+     * @default "bottom left"
+     */
+    anchor?: QMenuAnchor;
+    /**
+     * Anchor point on the menu element.
+     *
+     * @default "top left"
+     */
+    self?: QMenuAnchor;
+    /**
+     * Sets the menu width to the target width.
+     *
+     * @default false
+     */
+    fit?: boolean;
+    /**
+     * Prevents outside click dismissal.
+     *
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Closes the menu when its content is clicked.
+     *
+     * @default true
+     */
+    autoClose?: boolean;
+    children?: Snippet;
+}

package/dist/components/menu/props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/progress/QCircularProgress.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { useSize } from "../../composables";
+  import { useColor, useSize } from "../../composables";
   import { between } from "../../utils";
   import type { QCircularProgressProps } from "./props";
 
@@ -10,11 +10,7 @@
     rounded?: boolean;
   };
 
-  const radius = 50,
-    diameter = 2 * radius,
-    circumference = diameter * Math.PI,
-    strokeDashArray = Math.round(circumference * 1000) / 1000;
-
+  // #region:    --- Props
   let {
     value = $bindable(0),
     indeterminate = false,
@@ -33,17 +29,23 @@
     children = fallback,
     ...props
   }: QCircularProgressProps = $props();
+  // #endregion: --- Props
+
+  // #region:    --- Non-reactive variables
+  const radius = 50;
+
+  const diameter = 2 * radius;
+
+  const circumference = diameter * Math.PI;
 
+  const strokeDashArray = Math.round(circumference * 1000) / 1000;
+  // #endregion: --- Non-reactive variables
+
+  // #region:    --- Derived values
   const qSize = $derived(useSize(size, "q-circular-progress"));
 
-  const parsedColor = $derived(
-    color.includes("#") ? color : `var(--${color}, ${color})`,
-  );
-  const parsedTrackColor = $derived(
-    trackColor.includes("#")
-      ? trackColor
-      : `var(--${trackColor}, ${trackColor})`,
-  );
+  const parsedColor = $derived(useColor(color));
+  const parsedTrackColor = $derived(useColor(trackColor));
 
   const svgStyle = $derived(`rotate3d(0, 0, 1, ${angle - 90}deg)`);
   const circleStyle = $derived(
@@ -70,6 +72,7 @@
 
     return circumference * dashRatio + dashGap;
   });
+  // #endregion: --- Derived values
 </script>
 
 <div

package/dist/components/progress/QCircularProgress.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 QCircularProgressProps_ = typeof __propDef.props;
-export { QCircularProgressProps_ as QCircularProgressProps };
-export type QCircularProgressEvents = typeof __propDef.events;
-export type QCircularProgressSlots = typeof __propDef.slots;
-export default class QCircularProgress extends SvelteComponentTyped<QCircularProgressProps_, QCircularProgressEvents, QCircularProgressSlots> {
-}
+import type { QCircularProgressProps } from "./props";
+declare const QCircularProgress: import("svelte").Component<QCircularProgressProps, {}, "value">;
+type QCircularProgress = ReturnType<typeof QCircularProgress>;
+export default QCircularProgress;

package/dist/components/progress/QLinearProgress.svelte

@@ -1,13 +1,8 @@
 <script lang="ts">
-  import { useSize } from "../../composables";
+  import { useColor, useSize } from "../../composables";
   import type { QLinearProgressProps } from "./props";
 
-  function width(val: number, reverse: boolean) {
-    return reverse
-      ? `translateX(100%) scale3d(-${val}, 1, 1)`
-      : `scale3d(${val}, 1, 1)`;
-  }
-
+  // #region:    --- Props
   let {
     value = $bindable(0),
     buffer,
@@ -21,20 +16,16 @@
     indeterminate = false,
     ...props
   }: QLinearProgressProps = $props();
+  // #endregion: --- Props
 
+  // #region:    --- Derived values
   const normalized = $derived(value > 1 ? value / 100 : value);
   const normalizedBuffer = $derived(
     buffer && buffer > 1 ? buffer / 100 : buffer,
   );
 
-  const parsedColor = $derived(
-    color.includes("#") ? color : `var(--${color}, ${color})`,
-  );
-  const parsedTrackColor = $derived(
-    trackColor.includes("#")
-      ? trackColor
-      : `var(--${trackColor}, ${trackColor})`,
-  );
+  const parsedColor = $derived(useColor(color));
+  const parsedTrackColor = $derived(useColor(trackColor));
 
   const qSize = $derived(useSize(size, "q-linear-progress"));
 
@@ -49,6 +40,15 @@
   const indicatorTransform = $derived(
     width(+indeterminate || normalized, reverse),
   );
+  // #endregion: --- Derived values
+
+  // #region:    --- Functions
+  function width(val: number, reverse: boolean) {
+    return reverse
+      ? `translateX(100%) scale3d(-${val}, 1, 1)`
+      : `scale3d(${val}, 1, 1)`;
+  }
+  // #endregion: --- Functions
 </script>
 
 <div

package/dist/components/progress/QLinearProgress.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 QLinearProgressProps_ = typeof __propDef.props;
-export { QLinearProgressProps_ as QLinearProgressProps };
-export type QLinearProgressEvents = typeof __propDef.events;
-export type QLinearProgressSlots = typeof __propDef.slots;
-export default class QLinearProgress extends SvelteComponentTyped<QLinearProgressProps_, QLinearProgressEvents, QLinearProgressSlots> {
-}
+import type { QLinearProgressProps } from "./props";
+declare const QLinearProgress: import("svelte").Component<QLinearProgressProps, {}, "value">;
+type QLinearProgress = ReturnType<typeof QLinearProgress>;
+export default QLinearProgress;

package/dist/components/radio/QRadio.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
   import type { QRadioProps } from "./props";
 
+  // #region:    --- Props
   let {
     value = "",
     label = "",
     selected = $bindable(),
-    disable = false,
+    disabled = false,
     ...props
   }: QRadioProps = $props();
+  // #endregion: --- Props
 </script>
 
 <label
   {...props}
-  class={["q-radio", props.class, disable && "q-radio--disabled"]}
-  aria-disabled={disable || undefined}
+  class={["q-radio", props.class, disabled && "q-radio--disabled"]}
+  aria-disabled={disabled || undefined}
   data-quaff
 >
-  <input type="radio" bind:group={selected} {value} disabled={disable} />
+  <input type="radio" bind:group={selected} {value} {disabled} />
   <span>{label}</span>
 </label>

package/dist/components/radio/QRadio.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 QRadioProps_ = typeof __propDef.props;
-export { QRadioProps_ as QRadioProps };
-export type QRadioEvents = typeof __propDef.events;
-export type QRadioSlots = typeof __propDef.slots;
-export default class QRadio extends SvelteComponentTyped<QRadioProps_, QRadioEvents, QRadioSlots> {
-}
+import type { QRadioProps } from "./props";
+declare const QRadio: import("svelte").Component<QRadioProps, {}, "selected">;
+type QRadio = ReturnType<typeof QRadio>;
+export default QRadio;

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

@@ -24,5 +24,5 @@ export interface QRadioProps extends HTMLAttributes<HTMLLabelElement> {
      *
      * @default false
      */
-    disable?: boolean;
+    disabled?: boolean;
 }

package/dist/components/railbar/QRailbar.scss

@@ -48,7 +48,7 @@
     }
 
     &:not(.q-railbar--#{$side}).q-railbar--bordered {
-      @include mixins.border(var(--outline), $side);
+      @include mixins.border($position: $side);
     }
   }
 }