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

package/src/web/popover/popover.vue

@@ -0,0 +1,579 @@
+<template>
+  <div
+    ref="rootRef"
+    :class="[`ttdk-popover-wrapper ${className || ''}`.trim(), $attrs.class]"
+    :data-open="isOpen ? 'true' : 'false'"
+    :data-disabled="disabled ? 'true' : 'false'"
+    :data-block="block ? 'true' : undefined"
+    :style="{
+      ...buildUiVars(ui),
+      ...(typeof style === 'object' ? style : {}),
+    }"
+  >
+    <!-- 1. Popover Trigger -->
+    <div
+      role="button"
+      aria-haspopup="dialog"
+      ref="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="{
+        ...buildUiVars(triggerStyle),
+      }"
+      @click="handleTriggerClick"
+      @keydown="(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleTriggerClick();
+        }
+      }"
+    >
+      <slot />
+    </div>
+
+    <!-- 2. Modal Backdrop Overlay -->
+    <template v-if="isOpen && modal">
+      <div
+        :class="[`ttdk-popover-overlay ${overlayClass || ''}`.trim()]"
+        :style="{
+          ...buildUiVars(overlayStyle),
+        }"
+        @click="handleOverlayClick"
+      />
+    </template>
+
+    <!-- 3. Popover Content Panel -->
+    <template v-if="isOpen">
+      <div
+        role="dialog"
+        ref="popoverRef"
+        :class="[`ttdk-popover-content ${contentClass || ''}`.trim()]"
+        :aria-modal="modal ? 'true' : 'false'"
+        :tabIndex="-1"
+        :style="{
+          ...buildUiVars(contentStyle),
+        }"
+      >
+        <template v-if="arrow">
+          <div
+            ref="arrowRef"
+            :class="[`ttdk-popover-arrow ${arrowClass || ''}`.trim()]"
+            :style="{
+              ...buildUiVars(arrowStyle),
+            }"
+          />
+        </template>
+
+        <slot name="content" :close="() => closePopover(true)">
+          <slot name="panelContent" :close="() => closePopover(true)">
+            <slot name="panel" :close="() => closePopover(true)">
+              <template v-if="panel">
+                <template v-if="typeof renderPanelItem(panel) === 'string' || typeof renderPanelItem(panel) === 'number'">
+                  {{ renderPanelItem(panel) }}
+                </template>
+                <component
+                  :is="renderPanelItem(panel)"
+                  v-else-if="renderPanelItem(panel)"
+                  :close="() => closePopover(true)"
+                />
+              </template>
+
+              <template v-else-if="panelContent">
+                <template v-if="typeof renderPanelItem(panelContent) === 'string' || typeof renderPanelItem(panelContent) === 'number'">
+                  {{ renderPanelItem(panelContent) }}
+                </template>
+                <component
+                  :is="renderPanelItem(panelContent)"
+                  v-else-if="renderPanelItem(panelContent)"
+                  :close="() => closePopover(true)"
+                />
+              </template>
+
+              <template v-else-if="content && !isOptionsConfig(content)">
+                <template v-if="typeof renderPanelItem(content) === 'string' || typeof renderPanelItem(content) === 'number'">
+                  {{ renderPanelItem(content) }}
+                </template>
+                <component
+                  :is="renderPanelItem(content)"
+                  v-else-if="renderPanelItem(content)"
+                  :close="() => closePopover(true)"
+                />
+              </template>
+            </slot>
+          </slot>
+        </slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow,
+} from "@floating-ui/dom";
+import { buildUiVars, type UiProps } from "../../core/types";
+
+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;
+  className?: string;
+  class?: string;
+  style?: any;
+  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;
+}
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  defaultOpen: false,
+  arrow: false,
+  dismissible: true,
+  modal: false,
+  preventScroll: false,
+  lockScroll: false,
+  disabled: false,
+  offsetDistance: 8,
+});
+
+const emit = defineEmits<{
+  (e: "update:open", value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  (e: "close:prevent"): void;
+}>();
+
+const rootRef = ref<HTMLElement | null>(null);
+const triggerRef = ref<HTMLElement | null>(null);
+const popoverRef = ref<HTMLElement | null>(null);
+const arrowRef = ref<HTMLElement | null>(null);
+
+const isOpen = ref(props.open !== undefined ? props.open : props.defaultOpen);
+
+let cleanupAutoUpdate: (() => void) | null = null;
+let hoverOpenTimer: ReturnType<typeof setTimeout> | null = null;
+let hoverCloseTimer: ReturnType<typeof setTimeout> | null = null;
+
+function renderPanelItem(item: any) {
+  if (!item) return null;
+  if (typeof item === "function") {
+    return item({ close: () => closePopover(true) });
+  }
+  return item;
+}
+
+function isOptionsConfig(val: any): boolean {
+  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(): any {
+  if (props.placement) return props.placement;
+  if (props.content && typeof props.content === "object" && isOptionsConfig(props.content)) {
+    const side = props.content.side || "bottom";
+    const align = props.content.align || "center";
+    return align === "center" ? side : `${side}-${align}`;
+  }
+  return "bottom";
+}
+
+function getResolvedOffset(): number {
+  if (props.offsetDistance !== undefined && props.offsetDistance !== null) {
+    return props.offsetDistance;
+  }
+  if (props.content && typeof props.content === "object" && isOptionsConfig(props.content)) {
+    if (props.content.sideOffset !== undefined) return props.content.sideOffset;
+  }
+  return 8;
+}
+
+function updatePosition() {
+  if (!triggerRef.value || !popoverRef.value) return;
+
+  const placement = getResolvedPlacement();
+  const offsetVal = getResolvedOffset();
+  const avoidCollisions =
+    props.content && typeof props.content === "object" && isOptionsConfig(props.content)
+      ? props.content.avoidCollisions !== false
+      : true;
+  const collisionPadding =
+    props.content && typeof props.content === "object" && isOptionsConfig(props.content)
+      ? props.content.collisionPadding ?? 8
+      : 8;
+  const arrowPadding =
+    props.content && typeof props.content === "object" && isOptionsConfig(props.content)
+      ? props.content.arrowPadding ?? 8
+      : 8;
+
+  const middlewares: any[] = [
+    offset(offsetVal),
+    ...(avoidCollisions
+      ? [
+          flip({
+            padding: collisionPadding,
+            fallbackPlacements: [
+              "top",
+              "bottom",
+              "left",
+              "right",
+              "top-start",
+              "top-end",
+              "bottom-start",
+              "bottom-end",
+            ],
+          }),
+          shift({ padding: collisionPadding }),
+        ]
+      : []),
+  ];
+
+  if (props.arrow && arrowRef.value) {
+    middlewares.push(floatingArrow({ element: arrowRef.value, padding: arrowPadding }));
+  }
+
+  computePosition(triggerRef.value, popoverRef.value, {
+    placement,
+    strategy: "absolute",
+    middleware: middlewares,
+  }).then(({ x, y, placement: finalPlacement, middlewareData }: any) => {
+    if (!popoverRef.value) return;
+    popoverRef.value.style.position = "absolute";
+    popoverRef.value.style.left = `${x}px`;
+    popoverRef.value.style.top = `${y}px`;
+
+    const [resolvedSide, resolvedAlign] = finalPlacement.split("-");
+    popoverRef.value.setAttribute("data-side", resolvedSide);
+    popoverRef.value.setAttribute("data-align", resolvedAlign || "center");
+    popoverRef.value.setAttribute("data-placement", finalPlacement);
+
+    if (props.arrow && middlewareData.arrow && arrowRef.value) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const staticSideMap: Record<string, string> = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right",
+      };
+      const staticSide = staticSideMap[resolvedSide] || "top";
+
+      Object.assign(arrowRef.value.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide]: "-4px",
+      });
+    }
+  });
+}
+
+function startFloating() {
+  stopFloating();
+  if (triggerRef.value && popoverRef.value) {
+    cleanupAutoUpdate = autoUpdate(triggerRef.value, popoverRef.value, () => {
+      updatePosition();
+    });
+  }
+}
+
+function stopFloating() {
+  if (typeof cleanupAutoUpdate === "function") {
+    cleanupAutoUpdate();
+    cleanupAutoUpdate = null;
+  }
+}
+
+function openPopover() {
+  if (props.disabled) return;
+  if (!isOpen.value) {
+    isOpen.value = true;
+    emit("update:open", true);
+    emit("update:modelValue", true);
+    emit("open");
+    if (props.onOpen) props.onOpen();
+    if (props.onUpdateOpen) props.onUpdateOpen(true);
+    if (props.onOpenChange) props.onOpenChange(true);
+  }
+}
+
+function closePopover(force?: boolean) {
+  if (props.dismissible === false && !force) {
+    emit("close:prevent");
+    if (props.onClosePrevent) props.onClosePrevent();
+    return;
+  }
+  if (isOpen.value) {
+    isOpen.value = false;
+    emit("update:open", false);
+    emit("update:modelValue", false);
+    emit("close");
+    if (props.onClose) props.onClose();
+    if (props.onUpdateOpen) props.onUpdateOpen(false);
+    if (props.onOpenChange) props.onOpenChange(false);
+  }
+}
+
+function togglePopover() {
+  if (props.disabled) return;
+  if (isOpen.value) {
+    closePopover();
+  } else {
+    openPopover();
+  }
+}
+
+function handleTriggerClick() {
+  if (props.disabled) return;
+  togglePopover();
+}
+
+function handlePointerDown(event: any) {
+  if (!isOpen.value) return;
+  const target = event.target;
+  if (
+    rootRef.value &&
+    !rootRef.value.contains(target) &&
+    popoverRef.value &&
+    !popoverRef.value.contains(target)
+  ) {
+    closePopover();
+  }
+}
+
+function handleKeyDown(event: any) {
+  if (!isOpen.value) return;
+  if (event.key === "Escape") {
+    closePopover();
+  }
+}
+
+let lockCount = 0;
+let originalBodyOverflow = "";
+let originalBodyPaddingRight = "";
+let originalDocOverflow = "";
+interface LockedContainer {
+  element: HTMLElement;
+  originalOverflow: string;
+}
+let lockedContainers: LockedContainer[] = [];
+
+function handlePreventScrollEvent(e: Event) {
+  const target = e.target as Element | null;
+  if (!target) return;
+  if (target.closest && target.closest(".ttdk-popover-content, .ttdk-modal-dialog")) {
+    return;
+  }
+  e.preventDefault();
+}
+
+function lockBodyScroll(triggerEl?: HTMLElement | null) {
+  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: boolean) {
+  if (shouldLock && !isScrollLocked) {
+    lockBodyScroll(rootRef.value);
+    isScrollLocked = true;
+  } else if (!shouldLock && isScrollLocked) {
+    unlockBodyScroll();
+    isScrollLocked = false;
+  }
+}
+
+function handleOverlayClick() {
+  closePopover();
+}
+
+watch(
+  () => props.open,
+  (val) => {
+    if (val !== undefined && val !== isOpen.value) {
+      if (val) {
+        openPopover();
+      } else {
+        closePopover(true);
+      }
+    }
+  }
+);
+
+watch(
+  isOpen,
+  (val) => {
+    const shouldLock = Boolean(
+      props.preventScroll ||
+      props.lockScroll ||
+      (props.modal && props.preventScroll !== false && props.lockScroll !== false)
+    );
+    if (val) {
+      if (shouldLock) {
+        applyScrollLock(true);
+      }
+      nextTick(() => {
+        startFloating();
+        updatePosition();
+      });
+      if (typeof document !== "undefined") {
+        document.addEventListener("pointerdown", handlePointerDown, true);
+        document.addEventListener("keydown", handleKeyDown, true);
+      }
+    } else {
+      applyScrollLock(false);
+      stopFloating();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("pointerdown", handlePointerDown, true);
+        document.removeEventListener("keydown", handleKeyDown, true);
+      }
+    }
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  if (isOpen.value) {
+    nextTick(() => {
+      startFloating();
+      updatePosition();
+    });
+  }
+});
+
+onUnmounted(() => {
+  applyScrollLock(false);
+  stopFloating();
+  if (typeof document !== "undefined") {
+    document.removeEventListener("pointerdown", handlePointerDown, true);
+    document.removeEventListener("keydown", handleKeyDown, true);
+  }
+});
+</script>

package/src/web/popover/popover.vue.d.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import {
+  computePosition,
+  autoUpdate,
+  flip,
+  shift,
+  offset,
+  arrow as floatingArrow,
+} from "@floating-ui/dom";
+import { buildUiVars, type UiProps } from "../../core/types";
+
+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;
+  className?: string;
+  class?: string;
+  style?: any;
+  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;
+}
+
+declare const component: DefineComponent<PopoverProps, {}, {}, {}, {}, {}, {}, {
+  (e: "update:open", value: boolean): void;
+  (e: "update:modelValue", value: boolean): void;
+  (e: "open"): void;
+  (e: "close"): void;
+  (e: "close:prevent"): void;
+}>;
+export default component;