@umbra.ui/core 0.1.0

package/src/components/models/Sheet/Sheet.vue

@@ -0,0 +1,465 @@
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  Teleport,
+  nextTick,
+} from "vue";
+import gsap from "gsap";
+import "./theme.css";
+
+export interface SheetProps {
+  /**
+   * Controls whether the sheet is visible
+   */
+  modelValue: boolean;
+  /**
+   * The side from which the sheet slides in
+   * @default 'bottom'
+   */
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * Whether clicking the backdrop closes the sheet
+   * @default true
+   */
+  dismissOnBackdrop?: boolean;
+  /**
+   * Width of the sheet
+   * @default '90vw'
+   */
+  width?: string;
+  /**
+   * Height of the sheet
+   * @default 'fit-content'
+   */
+  height?: string;
+  /**
+   * Maximum width of the sheet
+   * @default '540px'
+   */
+  maxWidth?: string;
+  /**
+   * Maximum height of the sheet
+   * @default 'fit-content'
+   */
+  maxHeight?: string;
+  /**
+   * Animation duration in seconds
+   * @default 0.5
+   */
+  animationDuration?: number;
+  /**
+   * Animation type: 'slide' or 'ghost'
+   * @default 'slide'
+   */
+  animationType?: "slide" | "ghost";
+  /**
+   * Backdrop style: 'blur' or 'dim'
+   * @default 'blur'
+   */
+  backdropStyle?: "blur" | "dim";
+  /**
+   * Z-index for the sheet
+   * @default 1000
+   */
+  zIndex?: number;
+  /**
+   * Teleport target
+   * @default 'body'
+   */
+  teleportTo?: string | HTMLElement;
+}
+
+const props = withDefaults(defineProps<SheetProps>(), {
+  side: "bottom",
+  dismissOnBackdrop: true,
+  width: "90vw",
+  height: "50vh",
+  maxWidth: "540px",
+  maxHeight: "fit-content",
+  animationDuration: 0.5,
+  animationType: "slide",
+  backdropStyle: "blur",
+  zIndex: 1000,
+  teleportTo: "body",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  "backdrop-click": [];
+  open: [];
+  close: [];
+  "after-enter": [];
+  "after-leave": [];
+}>();
+
+const isVisible = ref(false);
+const isAnimating = ref(false);
+const sheetRef = ref<HTMLElement>();
+const backdropRef = ref<HTMLElement>();
+const wrapperRef = ref<HTMLElement>();
+
+// Store animation timeline
+let timeline: gsap.core.Timeline | null = null;
+
+const sheetStyles = computed(() => {
+  const styles: Record<string, string> = {
+    width: props.width,
+    height: props.height,
+    maxWidth: props.maxWidth,
+    maxHeight: props.maxHeight,
+    zIndex: String(props.zIndex + 1),
+  };
+
+  return styles;
+});
+
+const backdropStyles = computed(() => ({
+  zIndex: String(props.zIndex),
+}));
+
+const handleBackdropClick = () => {
+  emit("backdrop-click");
+  if (props.dismissOnBackdrop && !isAnimating.value) {
+    close();
+  }
+};
+
+const getInitialPosition = () => {
+  switch (props.side) {
+    case "top":
+      return { y: "-100%", x: 0 };
+    case "bottom":
+      return { y: "100%", x: 0 };
+    case "left":
+      return { x: "-100%", y: 0 };
+    case "right":
+      return { x: "100%", y: 0 };
+    default:
+      return { y: "100%", x: 0 };
+  }
+};
+
+const open = async () => {
+  if (isAnimating.value) return;
+
+  isAnimating.value = true;
+  isVisible.value = true;
+  emit("open");
+
+  await nextTick();
+
+  if (!sheetRef.value || !backdropRef.value || !wrapperRef.value) return;
+
+  // Kill any existing timeline
+  if (timeline) timeline.kill();
+
+  // Create new timeline
+  timeline = gsap.timeline({
+    onComplete: () => {
+      isAnimating.value = false;
+      emit("after-enter");
+    },
+  });
+
+  // Set initial states
+  gsap.set(wrapperRef.value, { display: "flex" });
+  gsap.set(backdropRef.value, { opacity: 0 });
+
+  if (props.animationType === "ghost") {
+    // Ghost animation: scale + opacity
+    gsap.set(sheetRef.value, {
+      opacity: 0,
+      scale: 0.8,
+      x: 0,
+      y: 0,
+    });
+
+    timeline
+      .to(
+        backdropRef.value,
+        {
+          opacity: 1,
+          duration: props.animationDuration * 0.8,
+          ease: "power2.out",
+        },
+        0
+      )
+      .to(
+        sheetRef.value,
+        {
+          opacity: 1,
+          scale: 1,
+          duration: props.animationDuration,
+          ease: "back.out(1.2)",
+        },
+        0
+      );
+  } else {
+    // Slide animation
+    const initialPos = getInitialPosition();
+    gsap.set(sheetRef.value, { ...initialPos, opacity: 1 });
+
+    timeline
+      .to(
+        backdropRef.value,
+        {
+          opacity: 1,
+          duration: props.animationDuration * 0.8,
+          ease: "power2.out",
+        },
+        0
+      )
+      .to(
+        sheetRef.value,
+        {
+          x: 0,
+          y: 0,
+          duration: props.animationDuration,
+          ease: "expo.out",
+          force3D: true, // Enable GPU acceleration
+        },
+        0
+      );
+  }
+};
+
+const close = async () => {
+  if (!isVisible.value || isAnimating.value) return;
+
+  isAnimating.value = true;
+  emit("update:modelValue", false);
+  emit("close");
+
+  if (!sheetRef.value || !backdropRef.value || !wrapperRef.value) return;
+
+  // Kill any existing timeline
+  if (timeline) timeline.kill();
+
+  // Create new timeline
+  timeline = gsap.timeline({
+    onComplete: () => {
+      isVisible.value = false;
+      isAnimating.value = false;
+      if (wrapperRef.value) {
+        gsap.set(wrapperRef.value, { display: "none" });
+      }
+      emit("after-leave");
+    },
+  });
+
+  if (props.animationType === "ghost") {
+    // Ghost animation: scale + opacity
+    timeline
+      .to(
+        backdropRef.value,
+        {
+          opacity: 0,
+          duration: props.animationDuration * 0.8,
+          ease: "power2.in",
+        },
+        0
+      )
+      .to(
+        sheetRef.value,
+        {
+          opacity: 0,
+          scale: 0.9,
+          duration: props.animationDuration * 0.8,
+          ease: "power2.in",
+        },
+        0
+      );
+  } else {
+    // Slide animation with faster close
+    const exitPos = getInitialPosition();
+
+    timeline
+      .to(
+        backdropRef.value,
+        {
+          opacity: 0,
+          duration: props.animationDuration * 0.7,
+          ease: "power2.in",
+        },
+        0
+      )
+      .to(
+        sheetRef.value,
+        {
+          ...exitPos,
+          duration: props.animationDuration * 0.8,
+          ease: "power3.in", // Faster than expo for dismissal
+          force3D: true, // Enable GPU acceleration
+        },
+        0
+      );
+  }
+};
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (event.key === "Escape" && props.modelValue && props.dismissOnBackdrop) {
+    close();
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      open();
+    } else {
+      close();
+    }
+  }
+);
+
+onMounted(() => {
+  document.addEventListener("keydown", handleEscape);
+  // Set initial hidden state
+  if (wrapperRef.value) {
+    gsap.set(wrapperRef.value, { display: "none" });
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleEscape);
+  if (timeline) timeline.kill();
+});
+
+defineExpose({
+  open,
+  close,
+  isVisible,
+  isAnimating,
+});
+</script>
+
+<template>
+  <Teleport :to="teleportTo">
+    <div ref="wrapperRef" :class="$style.wrapper">
+      <!-- Backdrop -->
+      <div
+        ref="backdropRef"
+        :class="[$style.backdrop, $style[`backdrop--${backdropStyle}`]]"
+        :style="backdropStyles"
+        @click="handleBackdropClick"
+      />
+
+      <!-- Sheet -->
+      <div
+        ref="sheetRef"
+        :class="[$style.sheet, $style[`sheet--${side}`]]"
+        :style="sheetStyles"
+        @click.stop
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style module>
+.wrapper {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  will-change: opacity;
+}
+
+.backdrop--blur {
+  background-color: var(--sheet-backdrop-blur-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.backdrop--dim {
+  background-color: var(--sheet-backdrop-dim-bg);
+}
+
+.sheet {
+  position: relative;
+  background-color: var(--sheet-bg);
+  border-radius: 0.5rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+  box-shadow: 0px 1px 0px 0px var(--sheet-shadow),
+    inset 0px 1px 0px 0px var(--sheet-inset-shadow);
+  will-change: transform, opacity;
+  transform: translateZ(0); /* Force GPU acceleration */
+
+  /* Better scrollbar styling */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sheet-scrollbar-thumb) transparent;
+}
+
+/* Webkit scrollbar styling */
+.sheet::-webkit-scrollbar {
+  width: 8px;
+}
+
+.sheet::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sheet::-webkit-scrollbar-thumb {
+  background-color: var(--sheet-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.sheet::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sheet-scrollbar-thumb-hover);
+}
+
+/* Handle safe areas for mobile devices */
+@supports (padding: max(0px)) {
+  .sheet {
+    max-height: calc(
+      100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px
+    );
+    max-width: calc(
+      100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px
+    );
+  }
+}
+
+/* Ensure sheet doesn't exceed viewport */
+.sheet {
+  max-height: calc(100vh - 40px);
+  max-width: calc(100vw - 40px);
+}
+
+/* Dark mode support */
+.dark,
+.dark-theme .backdrop--dim {
+  background-color: var(--sheet-backdrop-dim-bg);
+}
+
+.dark,
+.dark-theme .sheet::-webkit-scrollbar-thumb {
+  background-color: var(--sheet-scrollbar-thumb);
+}
+
+.dark,
+.dark-theme .sheet::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sheet-scrollbar-thumb-hover);
+}
+
+/* Prevent body scroll when sheet is open */
+body:has(.wrapper) {
+  overflow: hidden;
+}
+</style>

package/src/components/models/Sheet/theme.css

@@ -0,0 +1,72 @@
+/* Light theme using Colors */
+:root {
+  /* Sheet colors */
+  --sheet-bg: #ffffff; /* white - light background for light mode */
+  --sheet-shadow: rgba(
+    0,
+    0,
+    0,
+    0.1
+  ); /* blackA6 - lighter shadow for light mode */
+  --sheet-inset-shadow: rgba(
+    255,
+    255,
+    255,
+    0.8
+  ); /* whiteA8 - inset highlight for light mode */
+
+  /* Sheet backdrop colors */
+  --sheet-backdrop-blur-bg: rgba(
+    0,
+    0,
+    0,
+    0.3
+  ); /* blackA8 - blur backdrop for light mode */
+  --sheet-backdrop-dim-bg: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); /* blackA12 - dim backdrop for light mode */
+
+  /* Sheet scrollbar colors */
+  --sheet-scrollbar-thumb: rgba(
+    0,
+    0,
+    0,
+    0.2
+  ); /* blackA6 - scrollbar thumb for light mode */
+  --sheet-scrollbar-thumb-hover: rgba(
+    0,
+    0,
+    0,
+    0.3
+  ); /* blackA8 - scrollbar thumb hover for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Sheet colors */
+  --sheet-bg: #111111; /* Original dark mode value */
+  --sheet-shadow: rgba(0, 0, 0, 0.21); /* Original dark mode value */
+  --sheet-inset-shadow: rgba(255, 255, 255, 0.1); /* Original dark mode value */
+
+  /* Sheet backdrop colors */
+  --sheet-backdrop-blur-bg: rgba(0, 0, 0, 0.3); /* Original dark mode value */
+  --sheet-backdrop-dim-bg: rgba(0, 0, 0, 0.85); /* Original dark mode value */
+
+  /* Sheet scrollbar colors */
+  --sheet-scrollbar-thumb: rgba(
+    255,
+    255,
+    255,
+    0.2
+  ); /* Original dark mode value */
+  --sheet-scrollbar-thumb-hover: rgba(
+    255,
+    255,
+    255,
+    0.3
+  ); /* Original dark mode value */
+}