@ttdk-design-system/library-svelte 0.0.0-stage → 1.0.0

package/dist/web/popover/popover.svelte

@@ -0,0 +1,497 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount, createEventDispatcher } from "svelte";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow
+} from "@floating-ui/dom";
+import { buildUiVars } from "../../core/types";
+const dispatch = createEventDispatcher();
+export let open = void 0;
+export let defaultOpen = false;
+export let arrow = false;
+export let dismissible = true;
+export let modal = false;
+export let preventScroll = false;
+export let lockScroll = false;
+export let disabled = false;
+export let content = void 0;
+export let panel = void 0;
+export let panelContent = void 0;
+export let placement = void 0;
+export let offsetDistance = 8;
+export let block = false;
+export let ui = void 0;
+export let style = void 0;
+export let className = "";
+export let triggerClass = "";
+export let triggerStyle = void 0;
+export let contentClass = "";
+export let contentStyle = void 0;
+export let arrowClass = "";
+export let arrowStyle = void 0;
+export let overlayClass = "";
+export let overlayStyle = void 0;
+export let onUpdateOpen = void 0;
+export let onOpenChange = void 0;
+export let onOpen = void 0;
+export let onClose = void 0;
+export let onClosePrevent = void 0;
+let rootRef = null;
+let triggerRef = null;
+let popoverRef = null;
+let arrowRef = null;
+let isOpen = open !== void 0 ? open : Boolean(defaultOpen);
+let cleanupAutoUpdate = null;
+function stringifyStyles(stylesObj) {
+  if (!stylesObj || typeof stylesObj !== "object")
+    return "";
+  let styles = "";
+  for (const key in stylesObj) {
+    if (stylesObj[key] !== void 0 && stylesObj[key] !== null && stylesObj[key] !== "") {
+      const dashedKey = key.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+      styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+  }
+  return styles;
+}
+function isOptionsConfig(val) {
+  if (!val || typeof val !== "object")
+    return false;
+  return "side" in val || "align" in val || "sideOffset" in val || "alignOffset" in val || "avoidCollisions" in val || "collisionPadding" in val || "arrowPadding" in val;
+}
+function getResolvedPlacement() {
+  if (placement)
+    return placement;
+  if (content && typeof content === "object" && isOptionsConfig(content)) {
+    const side = content.side || "bottom";
+    const align = content.align || "center";
+    return align === "center" ? side : `${side}-${align}`;
+  }
+  return "bottom";
+}
+function getResolvedOffset() {
+  if (offsetDistance !== void 0 && offsetDistance !== null) {
+    return offsetDistance;
+  }
+  if (content && typeof content === "object" && isOptionsConfig(content)) {
+    if (content.sideOffset !== void 0) {
+      return content.sideOffset;
+    }
+  }
+  return 8;
+}
+function isSvelteComponent(val) {
+  return typeof val === "function" && Boolean(val.prototype && (val.prototype.$$set || val.prototype.$on || val.prototype.$destroy));
+}
+function getRenderedFunctionContent(fn) {
+  if (typeof fn !== "function")
+    return fn;
+  try {
+    const res = fn({ close: () => closePopover(true), closePopover: () => closePopover(true) });
+    return res;
+  } catch {
+    return "";
+  }
+}
+function updatePosition() {
+  if (!triggerRef || !popoverRef)
+    return;
+  const resolvedPlacement = getResolvedPlacement();
+  const offsetVal = getResolvedOffset();
+  const avoidCollisions = content && typeof content === "object" && isOptionsConfig(content) ? content.avoidCollisions !== false : true;
+  const collisionPadding = content && typeof content === "object" && isOptionsConfig(content) ? content.collisionPadding ?? 8 : 8;
+  const arrowPadding = content && typeof content === "object" && isOptionsConfig(content) ? content.arrowPadding ?? 8 : 8;
+  const middlewares = [
+    offset(offsetVal),
+    ...avoidCollisions ? [
+      flip({
+        padding: collisionPadding,
+        fallbackPlacements: [
+          "top",
+          "bottom",
+          "left",
+          "right",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end"
+        ]
+      }),
+      shift({ padding: collisionPadding })
+    ] : []
+  ];
+  if (arrow && arrowRef) {
+    middlewares.push(
+      floatingArrow({
+        element: arrowRef,
+        padding: arrowPadding
+      })
+    );
+  }
+  computePosition(triggerRef, popoverRef, {
+    placement: resolvedPlacement,
+    strategy: "absolute",
+    middleware: middlewares
+  }).then(({ x, y, placement: finalPlacement, middlewareData }) => {
+    if (!popoverRef)
+      return;
+    popoverRef.style.position = "absolute";
+    popoverRef.style.left = `${x}px`;
+    popoverRef.style.top = `${y}px`;
+    const [resolvedSide, resolvedAlign] = finalPlacement.split("-");
+    popoverRef.setAttribute("data-side", resolvedSide);
+    popoverRef.setAttribute("data-align", resolvedAlign || "center");
+    popoverRef.setAttribute("data-placement", finalPlacement);
+    if (arrow && middlewareData.arrow && arrowRef) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const staticSideMap = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      };
+      const staticSide = staticSideMap[resolvedSide] || "top";
+      Object.assign(arrowRef.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px"
+      });
+    }
+  });
+}
+function startFloating() {
+  stopFloating();
+  if (triggerRef && popoverRef) {
+    cleanupAutoUpdate = autoUpdate(triggerRef, popoverRef, () => {
+      updatePosition();
+    });
+  }
+}
+function stopFloating() {
+  if (typeof cleanupAutoUpdate === "function") {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+function openPopover() {
+  if (disabled)
+    return;
+  if (!isOpen) {
+    isOpen = true;
+    if (open !== void 0) {
+      open = true;
+    }
+    dispatch("open");
+    dispatch("update:open", true);
+    if (onOpen)
+      onOpen();
+    if (onUpdateOpen)
+      onUpdateOpen(true);
+    if (onOpenChange)
+      onOpenChange(true);
+  }
+}
+function closePopover(force) {
+  if (dismissible === false && !force) {
+    dispatch("close:prevent");
+    if (onClosePrevent)
+      onClosePrevent();
+    return;
+  }
+  if (isOpen) {
+    isOpen = false;
+    if (open !== void 0) {
+      open = false;
+    }
+    dispatch("close");
+    dispatch("update:open", false);
+    if (onClose)
+      onClose();
+    if (onUpdateOpen)
+      onUpdateOpen(false);
+    if (onOpenChange)
+      onOpenChange(false);
+  }
+}
+function togglePopover() {
+  if (disabled)
+    return;
+  if (isOpen) {
+    closePopover(true);
+  } else {
+    openPopover();
+  }
+}
+function handleTriggerClick() {
+  if (disabled)
+    return;
+  togglePopover();
+}
+function handlePointerDown(event) {
+  if (!isOpen)
+    return;
+  const target = event.target;
+  if (rootRef && !rootRef.contains(target) && popoverRef && !popoverRef.contains(target)) {
+    closePopover();
+  }
+}
+function handleKeyDown(event) {
+  if (!isOpen)
+    return;
+  if (event.key === "Escape") {
+    closePopover(dismissible !== false);
+  }
+}
+function handleOverlayClick(event) {
+  if (event) {
+    event.stopPropagation();
+  }
+  closePopover(dismissible !== false);
+}
+let lockCount = 0;
+let originalBodyOverflow = "";
+let originalBodyPaddingRight = "";
+let originalDocOverflow = "";
+let lockedContainers = [];
+function handlePreventScrollEvent(e) {
+  const target = e.target;
+  if (!target)
+    return;
+  if (target.closest && target.closest(".ttdk-popover-content, .ttdk-modal-dialog")) {
+    return;
+  }
+  e.preventDefault();
+}
+function lockBodyScroll(triggerEl) {
+  if (typeof document === "undefined")
+    return;
+  if (lockCount === 0) {
+    originalBodyOverflow = document.body.style.overflow;
+    originalBodyPaddingRight = document.body.style.paddingRight;
+    originalDocOverflow = document.documentElement.style.overflow;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    document.documentElement.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      document.body.style.paddingRight = scrollBarWidth + "px";
+    }
+    window.addEventListener("wheel", handlePreventScrollEvent, { passive: false });
+    window.addEventListener("touchmove", handlePreventScrollEvent, { passive: false });
+  }
+  if (triggerEl) {
+    let curr = triggerEl.parentElement;
+    while (curr && curr !== document.body && curr !== document.documentElement) {
+      const currStyle = window.getComputedStyle(curr);
+      const isScrollable = (currStyle.overflowY === "auto" || currStyle.overflowY === "scroll") && curr.scrollHeight > curr.clientHeight;
+      if (isScrollable && !lockedContainers.some((c) => c.element === curr)) {
+        lockedContainers.push({
+          element: curr,
+          originalOverflow: curr.style.overflowY || curr.style.overflow
+        });
+        curr.style.overflowY = "hidden";
+      }
+      curr = curr.parentElement;
+    }
+  }
+  const docsMain = document.getElementById("main-docs-content");
+  if (docsMain && docsMain.scrollHeight > docsMain.clientHeight && !lockedContainers.some((c) => c.element === docsMain)) {
+    lockedContainers.push({
+      element: docsMain,
+      originalOverflow: docsMain.style.overflowY || docsMain.style.overflow
+    });
+    docsMain.style.overflowY = "hidden";
+  }
+  lockCount++;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined")
+    return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalBodyOverflow;
+    document.body.style.paddingRight = originalBodyPaddingRight;
+    document.documentElement.style.overflow = originalDocOverflow;
+    for (const container of lockedContainers) {
+      container.element.style.overflowY = container.originalOverflow;
+    }
+    lockedContainers = [];
+    window.removeEventListener("wheel", handlePreventScrollEvent);
+    window.removeEventListener("touchmove", handlePreventScrollEvent);
+  }
+}
+let isScrollLocked = false;
+function applyScrollLock(shouldLock) {
+  if (shouldLock && !isScrollLocked) {
+    lockBodyScroll(rootRef);
+    isScrollLocked = true;
+  } else if (!shouldLock && isScrollLocked) {
+    unlockBodyScroll();
+    isScrollLocked = false;
+  }
+}
+$:
+  if (open !== void 0 && open !== isOpen) {
+    if (open) {
+      openPopover();
+    } else {
+      closePopover(true);
+    }
+  }
+$:
+  shouldLockScroll = Boolean(
+    preventScroll || lockScroll || modal && preventScroll !== false && lockScroll !== false
+  );
+$:
+  if (isOpen) {
+    if (shouldLockScroll) {
+      applyScrollLock(true);
+    }
+    setTimeout(() => {
+      startFloating();
+      updatePosition();
+    }, 0);
+  } else {
+    applyScrollLock(false);
+    stopFloating();
+  }
+onMount(() => {
+  if (typeof document !== "undefined") {
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+  }
+  if (isOpen) {
+    setTimeout(() => {
+      startFloating();
+      updatePosition();
+    }, 0);
+  }
+});
+onDestroy(() => {
+  applyScrollLock(false);
+  stopFloating();
+  if (typeof document !== "undefined") {
+    document.removeEventListener("pointerdown", handlePointerDown, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+  }
+});
+</script>
+
+<div
+  bind:this={rootRef}
+  class={`ttdk-popover-wrapper ${className || ""}`.trim()}
+  data-open={isOpen ? "true" : "false"}
+  data-disabled={disabled ? "true" : "false"}
+  data-block={block ? "true" : undefined}
+  style={stringifyStyles({
+    ...buildUiVars(ui),
+    ...(typeof style === "object" && style !== null ? style : {}),
+  })}
+>
+  <!-- 1. Popover Trigger -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div
+    role="button"
+    aria-haspopup="dialog"
+    bind:this={triggerRef}
+    class={`ttdk-popover-trigger ${triggerClass || ""}`.trim()}
+    tabindex={disabled ? -1 : 0}
+    aria-expanded={isOpen}
+    aria-disabled={disabled}
+    data-open={isOpen ? "true" : "false"}
+    data-disabled={disabled ? "true" : "false"}
+    style={stringifyStyles({
+      ...buildUiVars(triggerStyle),
+    })}
+    on:click={handleTriggerClick}
+    on:keydown={(e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    }}
+  >
+    <slot close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+  </div>
+
+  <!-- 2. Modal Backdrop Overlay -->
+  {#if isOpen && modal}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class={`ttdk-popover-overlay ${overlayClass || ""}`.trim()}
+      style={stringifyStyles({
+        ...buildUiVars(overlayStyle),
+      })}
+      on:click={handleOverlayClick}
+    />
+  {/if}
+
+  <!-- 3. Popover Content Panel -->
+  {#if isOpen}
+    <div
+      role="dialog"
+      bind:this={popoverRef}
+      class={`ttdk-popover-content ${contentClass || ""}`.trim()}
+      aria-modal={modal ? "true" : "false"}
+      tabindex="-1"
+      style={stringifyStyles({
+        ...buildUiVars(contentStyle),
+      })}
+    >
+      {#if arrow}
+        <div
+          bind:this={arrowRef}
+          class={`ttdk-popover-arrow ${arrowClass || ""}`.trim()}
+          style={stringifyStyles({
+            ...buildUiVars(arrowStyle),
+          })}
+        />
+      {/if}
+
+      {#if $$slots.content}
+        <slot name="content" close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+      {:else if $$slots.panelContent}
+        <slot name="panelContent" close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+      {:else if $$slots.panel}
+        <slot name="panel" close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+      {:else if panel}
+        {#if typeof panel === "function" && isSvelteComponent(panel)}
+          <svelte:component this={panel} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {:else if typeof panel === "function"}
+          {getRenderedFunctionContent(panel)}
+        {:else if typeof panel === "string" || typeof panel === "number"}
+          {panel}
+        {:else}
+          <svelte:component this={panel} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {/if}
+      {:else if panelContent}
+        {#if typeof panelContent === "function" && isSvelteComponent(panelContent)}
+          <svelte:component this={panelContent} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {:else if typeof panelContent === "function"}
+          {getRenderedFunctionContent(panelContent)}
+        {:else if typeof panelContent === "string" || typeof panelContent === "number"}
+          {panelContent}
+        {:else}
+          <svelte:component this={panelContent} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {/if}
+      {:else if content && !isOptionsConfig(content)}
+        {#if typeof content === "function" && isSvelteComponent(content)}
+          <svelte:component this={content} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {:else if typeof content === "function"}
+          {getRenderedFunctionContent(content)}
+        {:else if typeof content === "string" || typeof content === "number"}
+          {content}
+        {:else}
+          <svelte:component this={content} close={() => closePopover(true)} closePopover={() => closePopover(true)} />
+        {/if}
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/web/popover/popover.svelte.d.ts

@@ -0,0 +1,116 @@
+import { SvelteComponent } from "svelte";
+export interface PopoverContentOptions {
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    alignOffset?: number;
+    avoidCollisions?: boolean;
+    collisionBoundary?: any;
+    collisionPadding?: number;
+    arrowPadding?: number;
+    sticky?: "partial" | "always";
+    hideWhenDetached?: boolean;
+}
+export type PopoverUiProps = UiProps;
+export interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    arrow?: boolean;
+    dismissible?: boolean;
+    modal?: boolean;
+    preventScroll?: boolean;
+    lockScroll?: boolean;
+    disabled?: boolean;
+    content?: PopoverContentOptions | any;
+    panel?: any;
+    panelContent?: any;
+    placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+    offsetDistance?: number;
+    block?: boolean;
+    ui?: PopoverUiProps;
+    style?: any;
+    className?: string;
+    triggerClass?: string;
+    triggerStyle?: UiProps;
+    contentClass?: string;
+    contentStyle?: UiProps;
+    arrowClass?: string;
+    arrowStyle?: UiProps;
+    overlayClass?: string;
+    overlayStyle?: UiProps;
+    onUpdateOpen?: (open: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onClosePrevent?: () => void;
+    children?: any;
+}
+import { type UiProps } from "../../core/types";
+declare const __propDef: {
+    props: {
+        open?: PopoverProps["open"];
+        defaultOpen?: PopoverProps["defaultOpen"];
+        arrow?: PopoverProps["arrow"];
+        dismissible?: PopoverProps["dismissible"];
+        modal?: PopoverProps["modal"];
+        preventScroll?: PopoverProps["preventScroll"];
+        lockScroll?: PopoverProps["lockScroll"];
+        disabled?: PopoverProps["disabled"];
+        content?: PopoverProps["content"];
+        panel?: PopoverProps["panel"];
+        panelContent?: PopoverProps["panelContent"];
+        placement?: PopoverProps["placement"];
+        offsetDistance?: PopoverProps["offsetDistance"];
+        block?: PopoverProps["block"];
+        ui?: PopoverProps["ui"];
+        style?: any;
+        className?: string;
+        triggerClass?: string;
+        triggerStyle?: UiProps | undefined;
+        contentClass?: string;
+        contentStyle?: UiProps | undefined;
+        arrowClass?: string;
+        arrowStyle?: UiProps | undefined;
+        overlayClass?: string;
+        overlayStyle?: UiProps | undefined;
+        onUpdateOpen?: PopoverProps["onUpdateOpen"];
+        onOpenChange?: PopoverProps["onOpenChange"];
+        onOpen?: PopoverProps["onOpen"];
+        onClose?: PopoverProps["onClose"];
+        onClosePrevent?: PopoverProps["onClosePrevent"];
+    };
+    events: {
+        open: CustomEvent<any>;
+        'update:open': CustomEvent<any>;
+        'close:prevent': CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            close: () => void;
+            closePopover: () => void;
+        };
+        content: {
+            close: () => void;
+            closePopover: () => void;
+        };
+        panelContent: {
+            close: () => void;
+            closePopover: () => void;
+        };
+        panel: {
+            close: () => void;
+            closePopover: () => void;
+        };
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type PopoverProps_ = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponent<PopoverProps_, PopoverEvents, PopoverSlots> {
+}
+export {};