@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha1

package/dist/components/tooltip/QTooltip.scss

@@ -0,0 +1,40 @@
+@use "$css/variables";
+
+.q-tooltip {
+  --space: -0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: auto;
+  gap: 0.5rem;
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+  font-size: 0.75rem;
+  text-align: center;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  position: fixed;
+  bottom: auto;
+  right: auto;
+  width: auto;
+  white-space: nowrap;
+  font-weight: 500;
+  transition: opacity variables.$speed2;
+  z-index: 9999;
+
+  &__helper {
+    // Remove the helper element from the flow so it doesn't affect pre elements
+    position: absolute;
+  }
+
+  &:has(> .q-card) {
+    padding: 0;
+    overflow: hidden;
+    background-color: transparent;
+    text-align: unset;
+
+    & > .q-card {
+      box-shadow: none;
+    }
+  }
+}

package/dist/components/tooltip/QTooltip.svelte

@@ -1,13 +1,203 @@
-<script>import { createClasses } from "../../utils/props";
-export let value = void 0, position = "bottom", userClasses = "";
-export { userClasses as class };
-$:
-  classes = createClasses([value && "active", position || "top"], {
-    component: "q-tooltip",
-    userClasses
+<script lang="ts" generics="T extends HTMLElement | string">
+  import { mount, onMount, unmount, untrack } from "svelte";
+  import { addEventListener } from "../../utils";
+  import QTooltipBase from "./QTooltipBase.svelte";
+  import type { QTooltipProps } from "./props";
+
+  let {
+    target,
+    value = $bindable(false),
+    position = "bottom",
+    offset = { x: 0, y: 0 },
+    delay = 50,
+    hideDelay = 50,
+    children,
+    ...props
+  }: QTooltipProps<T> = $props();
+
+  let tooltipHelperEl = $state<HTMLDivElement>();
+  let tooltipEl = $state<HTMLDivElement>();
+
+  let realTarget = $state<HTMLElement>();
+
+  let timerShow = $state<ReturnType<typeof setTimeout> | null>(null);
+  let timerHide = $state<ReturnType<typeof setTimeout> | null>(null);
+
+  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();
+
+  $effect(() => {
+    value ? untrack(show) : untrack(hide);
   });
+
+  onMount(() => {
+    if (target) {
+      realTarget =
+        typeof target === "string"
+          ? document.querySelector<HTMLElement>(target) || undefined
+          : target;
+    } else {
+      let parent = tooltipHelperEl?.parentElement || null;
+
+      while (parent) {
+        if (parent.attributes.getNamedItem("data-quaff")) {
+          realTarget = parent;
+          break;
+        } else {
+          parent = parent.parentElement;
+        }
+      }
+    }
+
+    targetMouseEnterListener = addEventListener(realTarget, "mouseenter", show);
+    targetMouseLeaveListener = addEventListener(realTarget, "mouseleave", hide);
+
+    return () => {
+      targetMouseEnterListener?.remove();
+      targetMouseLeaveListener?.remove();
+
+      tooltipMouseEnterListener?.remove();
+      tooltipMouseLeaveListener?.remove();
+
+      windowWheelListener?.remove();
+
+      if (mountedTooltip) {
+        unmount(mountedTooltip);
+      }
+
+      if (timerShow) {
+        clearTimeout(timerShow);
+      }
+
+      if (timerHide) {
+        clearTimeout(timerHide);
+      }
+    };
+  });
+
+  export function show() {
+    if (timerHide) {
+      clearTimeout(timerHide);
+      timerHide = null;
+
+      return;
+    }
+
+    if (mountedTooltip) {
+      return;
+    }
+
+    if (timerShow) {
+      clearTimeout(timerShow);
+    }
+
+    timerShow = setTimeout(() => {
+      timerShow = null;
+      mountedTooltip = mountTooltip();
+
+      tooltipEl =
+        (document.getElementById(`qtooltip-${id}`) as HTMLDivElement) ||
+        undefined;
+      tooltipMouseEnterListener = addEventListener(
+        tooltipEl,
+        "mouseenter",
+        abortHide,
+      );
+      tooltipMouseLeaveListener = addEventListener(
+        tooltipEl,
+        "mouseleave",
+        hide,
+      );
+
+      windowWheelListener = addEventListener(window, "wheel", hide);
+
+      if (!value) {
+        value = true;
+      }
+
+      return;
+    }, delay);
+  }
+
+  export function hide() {
+    if (timerShow) {
+      clearTimeout(timerShow);
+      timerShow = null;
+
+      return;
+    }
+
+    if (!mountedTooltip) {
+      return;
+    }
+
+    if (timerHide) {
+      clearTimeout(timerHide);
+      timerHide = null;
+    }
+
+    timerHide = setTimeout(() => {
+      tooltipMouseEnterListener?.remove();
+
+      if (!mountedTooltip) {
+        return;
+      }
+
+      unmount(mountedTooltip);
+
+      windowWheelListener?.remove();
+
+      mountedTooltip = null;
+      timerHide = null;
+
+      if (value) {
+        value = false;
+      }
+    }, hideDelay);
+  }
+
+  export function toggle() {
+    value = !value;
+  }
+
+  function abortHide() {
+    if (timerHide) {
+      clearTimeout(timerHide);
+      timerHide = null;
+    }
+  }
+
+  function mountTooltip() {
+    if (!realTarget) {
+      return null;
+    }
+
+    return mount(QTooltipBase, {
+      target: document.body,
+      props: {
+        target: realTarget,
+        value: true,
+        position,
+        offset,
+        children,
+        id: `qtooltip-${id}`,
+        ...props,
+      },
+    });
+  }
 </script>
 
-<div class={classes} {...$$restProps}>
-  <slot />
-</div>
+{#if !target}
+  <div bind:this={tooltipHelperEl} class="q-tooltip__helper"></div>
+{/if}

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

@@ -1,22 +1,21 @@
-import { SvelteComponent } from "svelte";
-import type { QTooltipProps } from "./props";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: QTooltipProps["value"];
-        position?: "top" | "bottom" | "left" | "right" | undefined;
-        class?: string | undefined;
+import { SvelteComponentTyped } from "svelte";
+declare class __sveltets_Render<T extends HTMLElement | string> {
+    props(): {
+        show?: (() => void) | undefined;
+        hide?: (() => void) | undefined;
+        toggle?: (() => void) | undefined;
     };
-    events: {
+    events(): {} & {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
-};
-type QTooltipProps_ = typeof __propDef.props;
-export { QTooltipProps_ as QTooltipProps };
-export type QTooltipEvents = typeof __propDef.events;
-export type QTooltipSlots = typeof __propDef.slots;
-export default class QTooltip extends SvelteComponent<QTooltipProps, QTooltipEvents, QTooltipSlots> {
+    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;
 }
+export {};

package/dist/components/tooltip/QTooltipBase.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { scale } from "svelte/transition";
+  import type { QTooltipProps } from "./props";
+
+  let {
+    // At this point, target should be guaranteed to be a DOM element
+    target,
+    position = "bottom",
+    offset = { x: 0, y: 0 },
+    children,
+    ...props
+  }: QTooltipProps<HTMLElement> = $props();
+
+  let tooltipEl = $state<HTMLDivElement>();
+
+  onMount(() => {
+    setTimeout(() => {
+      if (tooltipEl) {
+        tooltipEl.style.opacity = "1";
+      }
+    }, 50);
+  });
+
+  const tooltipPosition: Record<"top" | "left", number> | undefined =
+    $derived.by(() => {
+      if (!target || !tooltipEl) {
+        return;
+      }
+
+      const top = calculatePosition(target, tooltipEl, "y");
+      const left = calculatePosition(target, tooltipEl, "x");
+
+      return { top, left };
+    });
+
+  const styles = $derived(
+    tooltipPosition && {
+      top: `${tooltipPosition.top}px`,
+      left: `${tooltipPosition.left}px`,
+    },
+  );
+
+  function calculatePosition(
+    anchor: HTMLElement,
+    tooltip: HTMLElement,
+    axis: "x" | "y",
+  ) {
+    const anchorRect = anchor.getBoundingClientRect();
+
+    const anchorPosition = {
+      start: axis === "x" ? "left" : "top",
+      end: axis === "x" ? "right" : "bottom",
+    } as const;
+    const anchorDimension = axis === "x" ? "width" : "height";
+    const tooltipDimension = axis === "x" ? "offsetWidth" : "offsetHeight";
+
+    const offsetToUse = offset[axis];
+    // 0.5rem offset so the tooltip is not stuck to the anchor
+    const defaultOffset = position.includes("-") ? 0 : 8;
+
+    return position.includes(anchorPosition.start)
+      ? anchorRect[anchorPosition.start] -
+          tooltip[tooltipDimension] +
+          (offsetToUse || 0) -
+          defaultOffset
+      : position.includes(anchorPosition.end)
+        ? anchorRect[anchorPosition.end] + (offsetToUse || 0) + defaultOffset
+        : anchorRect[anchorPosition.start] +
+          anchorRect[anchorDimension] / 2 -
+          tooltip[tooltipDimension] / 2 +
+          (offsetToUse || 0);
+  }
+</script>
+
+<div
+  bind:this={tooltipEl}
+  {...props}
+  class={["q-tooltip", props.class]}
+  style:top={styles?.top}
+  style:left={styles?.left}
+  style:transform="unset"
+  transition:scale|global={{ duration: 100 }}
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,14 @@
+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 {};

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

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

package/dist/components/tooltip/docs.js

@@ -1,10 +1,11 @@
+import { QToolbarDocsSnippets } from "../header/docs.props";
 import { QTooltipDocsProps } from "./docs.props";
-export let QTooltipDocs = {
+export const QTooltipDocs = {
     name: "QTooltip",
     description: "The Tooltip component displays informative text on hover or focus, providing additional context.",
     docs: {
         props: QTooltipDocsProps,
-        slots: [],
+        snippets: QToolbarDocsSnippets,
         methods: [],
         events: [],
     },

package/dist/components/tooltip/docs.props.d.ts

@@ -1,8 +1,3 @@
-export declare const QTooltipDocsProps: {
-    name: string;
-    type: string;
-    optional: boolean;
-    clickableType: boolean;
-    description: string;
-    default: string;
-}[];
+import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
+export declare const QTooltipDocsProps: ParsedProp[];
+export declare const QTooltipDocsSnippets: ParsedSnippet[];

package/dist/components/tooltip/docs.props.js

@@ -1,18 +1,77 @@
+// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
+// @quaffHash 444819e2121eccfade83b2988db64474
 export const QTooltipDocsProps = [
     {
-        name: "value",
-        type: "boolean",
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "target",
+        type: {
+            name: "T",
+            isClickable: true,
+        },
+        description: "The target element the tooltip should be attached to. Can be an HTML element or a CSS selector. If not specified, the tooltip will be attached to the nearest Quaff component in the parent tree.",
+        default: "undefined",
+    },
+    {
+        isArray: false,
         optional: true,
-        clickableType: false,
-        description: "",
-        default: "",
+        isSnippet: false,
+        name: "value",
+        type: {
+            name: "boolean",
+            isClickable: false,
+        },
+        description: "Defines the show/hide state of the tooltip. By default, the tooltip will be be shown on mouseenter and hidden on mouseleave.",
+        default: "false",
     },
     {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
         name: "position",
-        type: '"top" | "right" | "bottom" | "left"',
-        optional: false,
-        clickableType: false,
-        description: "",
-        default: "",
+        type: {
+            name: "QTooltipPosition",
+            isClickable: true,
+        },
+        description: "Defines the position of the tooltip.",
+        default: '"bottom"',
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "offset",
+        type: {
+            name: "QTooltipOffset",
+            isClickable: true,
+        },
+        description: "Offset of the tooltip in pixels. Positive values move the tooltip down/right, negative values move the tooltip up/left.",
+        default: "{ x: 0, y: 0 }",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "delay",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Delay in milliseconds before the tooltip appears.",
+        default: "0",
+    },
+    {
+        isArray: false,
+        optional: true,
+        isSnippet: false,
+        name: "hideDelay",
+        type: {
+            name: "number",
+            isClickable: false,
+        },
+        description: "Delay in milliseconds before the tooltip is hidden.",
+        default: "0",
     },
 ];
+export const QTooltipDocsSnippets = [];

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

@@ -1,6 +1,38 @@
-import type { NativeProps } from "../../utils/types";
-export interface QTooltipProps extends NativeProps {
+import type { HTMLAttributes } from "svelte/elements";
+export type QTooltipPosition = "top-left" | "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left";
+export type QTooltipOffset = {
+    x?: number;
+    y?: number;
+};
+export interface QTooltipProps<T extends Element | string> extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The target element the tooltip should be attached to. Can be an HTML element or a CSS selector. If not specified, the tooltip will be attached to the nearest Quaff component in the parent tree.
+     * @default undefined
+     */
+    target?: T;
+    /**
+     * Defines the show/hide state of the tooltip. By default, the tooltip will be be shown on mouseenter and hidden on mouseleave.
+     * @default false
+     */
     value?: boolean;
-    position: "top" | "right" | "bottom" | "left";
+    /**
+     * Defines the position of the tooltip.
+     * @default "bottom"
+     */
+    position?: QTooltipPosition;
+    /**
+     * Offset of the tooltip in pixels. Positive values move the tooltip down/right, negative values move the tooltip up/left.
+     * @default { x: 0, y: 0 }
+     */
+    offset?: QTooltipOffset;
+    /**
+     * Delay in milliseconds before the tooltip appears.
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Delay in milliseconds before the tooltip is hidden.
+     * @default 0
+     */
+    hideDelay?: number;
 }
-export declare const QTooltipPropsDefaults: QTooltipProps;

package/dist/components/tooltip/props.js

@@ -1,6 +1 @@
-import { NativePropsDefaults } from "../../utils/types";
-export const QTooltipPropsDefaults = {
-    value: undefined,
-    position: "bottom",
-    ...NativePropsDefaults,
-};
+export {};

package/dist/composables/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSize";

package/dist/composables/index.js

@@ -1 +1,3 @@
-"use strict";
+export * from "./useAlign";
+export * from "./useRouterLink";
+export * from "./useSize";

package/dist/composables/{use-align.d.ts → useAlign.d.ts}

@@ -5,4 +5,4 @@ export interface UseAlignProps {
     align?: UseAlignOptions;
 }
 export declare const UseAlignPropsDefaults: UseAlignProps;
-export default function useAlign(align?: UseAlignOptions): string;
+export declare function useAlign(align?: UseAlignOptions): string;

package/dist/composables/{use-align.js → useAlign.js}

@@ -11,7 +11,7 @@ const alignMap = {
     // @todo - justify-stretch isn't possible
     stretch: "stretch",
 };
-export default function useAlign(align = "top left") {
+export function useAlign(align = "top left") {
     const alignments = align
         .split(" ")
         .map((entry) => {

package/dist/composables/{use-router-link.d.ts → useRouterLink.d.ts}

@@ -2,13 +2,13 @@ import type { Page } from "@sveltejs/kit";
 export interface UseRouterLinkProps {
     href?: string;
     to?: string;
-    disable: boolean;
+    disable?: boolean;
     activeClass?: string;
-    replace: boolean;
+    replace?: boolean;
 }
 export declare const UseRouterLinkPropsDefaults: UseRouterLinkProps;
 export declare function isRouteActive(router: Page<Record<string, string>, string | null>, to: string | undefined): boolean;
-export default function <T extends UseRouterLinkProps>(props: T): {
+export declare function useRouterLink<T extends UseRouterLinkProps>(props: T): {
     hasLink: boolean;
     linkAttributes: {
         href: string | undefined;

package/dist/composables/{use-router-link.js → useRouterLink.js}

@@ -1,4 +1,4 @@
-import { createClasses } from "../utils/props";
+import { createClasses } from "../utils";
 export const UseRouterLinkPropsDefaults = {
     href: undefined,
     to: undefined,
@@ -11,12 +11,12 @@ export function isRouteActive(router, to) {
         ? router.url.pathname === to
         : router.url.pathname.slice(0, (to || "").length) === to;
 }
-export default function (props) {
-    const hasLink = props.to !== undefined || props.href !== undefined;
+export function useRouterLink(props) {
+    const hasLink = [props.to, props.href].some((entry) => typeof entry !== "undefined");
     const linkClasses = createClasses([hasLink && "q-link", props.disable && "disable"]);
     const linkAttributes = {
         href: props.to || props.href,
-        "data-sveltkit-reload": props.replace === true ? "" : undefined,
+        "data-sveltkit-reload": props.replace ? "" : undefined,
     };
     return {
         hasLink,

package/dist/composables/useSize.d.ts

@@ -0,0 +1,10 @@
+export declare const sizes: Q.Size[];
+export declare const CssUnits: Q.CssUnit[];
+/**
+ * Checks wether the input is a size like "sm" or "lg"
+ */
+export declare function isQuaffSize(size: number | string): size is Q.Size;
+export declare function useSize(size: number | string, component?: `q-${string}`): {
+    class: string;
+    style: string | undefined;
+};