@umbra.ui/core 0.1.0

package/src/components/models/Sidebar/Sidebar.vue

@@ -0,0 +1,480 @@
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+  Teleport,
+  nextTick,
+} from "vue";
+import gsap from "gsap";
+import "./theme.css";
+
+export interface SidebarProps {
+  /**
+   * Controls whether the sidebar is visible
+   */
+  modelValue: boolean;
+  /**
+   * The side where the sidebar appears
+   * @default 'left'
+   */
+  side?: "top" | "bottom" | "left" | "right";
+  /**
+   * Whether clicking the backdrop closes the sidebar
+   * @default true
+   */
+  dismissOnBackdrop?: boolean;
+  /**
+   * Width of the sidebar (for left/right)
+   * @default '280px'
+   */
+  width?: string;
+  /**
+   * Height of the sidebar (for top/bottom)
+   * @default '280px'
+   */
+  height?: string;
+  /**
+   * Minimum width of the sidebar
+   * @default '280px'
+   */
+  minWidth?: string;
+  /**
+   * Minimum height of the sidebar
+   * @default '280px'
+   */
+  minHeight?: string;
+  /**
+   * Maximum width of the sidebar
+   * @default '90vw'
+   */
+  maxWidth?: string;
+  /**
+   * Maximum height of the sidebar
+   * @default '90vh'
+   */
+  maxHeight?: string;
+  /**
+   * Animation duration in seconds
+   * @default 0.4
+   */
+  animationDuration?: number;
+  /**
+   * Backdrop style: 'blur' or 'dim'
+   * @default 'blur'
+   */
+  backdropStyle?: "blur" | "dim";
+  /**
+   * Z-index for the sidebar
+   * @default 1000
+   */
+  zIndex?: number;
+  /**
+   * Teleport target
+   * @default 'body'
+   */
+  teleportTo?: string | HTMLElement;
+}
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+  side: "left",
+  dismissOnBackdrop: true,
+  width: "280px",
+  height: "280px",
+  minWidth: "280px",
+  minHeight: "280px",
+  maxWidth: "90vw",
+  maxHeight: "90vh",
+  animationDuration: 0.4,
+  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 sidebarRef = ref<HTMLElement>();
+const backdropRef = ref<HTMLElement>();
+const wrapperRef = ref<HTMLElement>();
+
+// Store animation timeline
+let timeline: gsap.core.Timeline | null = null;
+
+const sidebarStyles = computed(() => {
+  const styles: Record<string, string> = {
+    zIndex: String(props.zIndex + 1),
+  };
+
+  switch (props.side) {
+    case "left":
+      styles.left = "0";
+      styles.top = "0";
+      styles.bottom = "0";
+      styles.width = props.width;
+      styles.minWidth = props.minWidth;
+      styles.maxWidth = props.maxWidth;
+      break;
+    case "right":
+      styles.right = "0";
+      styles.top = "0";
+      styles.bottom = "0";
+      styles.width = props.width;
+      styles.minWidth = props.minWidth;
+      styles.maxWidth = props.maxWidth;
+      break;
+    case "top":
+      styles.top = "0";
+      styles.left = "0";
+      styles.right = "0";
+      styles.height = props.height;
+      styles.minHeight = props.minHeight;
+      styles.maxHeight = props.maxHeight;
+      break;
+    case "bottom":
+      styles.bottom = "0";
+      styles.left = "0";
+      styles.right = "0";
+      styles.height = props.height;
+      styles.minHeight = props.minHeight;
+      styles.maxHeight = props.maxHeight;
+      break;
+  }
+
+  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 { x: "-100%", y: 0 };
+  }
+};
+
+const open = async () => {
+  if (isAnimating.value) return;
+
+  isAnimating.value = true;
+  isVisible.value = true;
+  emit("open");
+
+  await nextTick();
+
+  if (!sidebarRef.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");
+    },
+  });
+
+  const initialPos = getInitialPosition();
+
+  // Set initial states
+  gsap.set(wrapperRef.value, { display: "block" });
+  gsap.set(sidebarRef.value, { ...initialPos, opacity: 1 });
+  gsap.set(backdropRef.value, { opacity: 0 });
+
+  // Animate in
+  timeline
+    .to(
+      backdropRef.value,
+      {
+        opacity: 1,
+        duration: props.animationDuration * 0.8,
+        ease: "power2.out",
+      },
+      0
+    )
+    .to(
+      sidebarRef.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 (!sidebarRef.value || !backdropRef.value || !wrapperRef.value) return;
+
+  // Kill any existing timeline
+  if (timeline) timeline.kill();
+
+  const exitPos = getInitialPosition();
+
+  // 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");
+    },
+  });
+
+  // Animate out with faster close
+  timeline
+    .to(
+      backdropRef.value,
+      {
+        opacity: 0,
+        duration: props.animationDuration * 0.7,
+        ease: "power2.in",
+      },
+      0
+    )
+    .to(
+      sidebarRef.value,
+      {
+        ...exitPos,
+        duration: props.animationDuration * 0.8,
+        ease: "power3.in", // Faster 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"
+      />
+
+      <!-- Sidebar -->
+      <div
+        ref="sidebarRef"
+        :class="[$style.sidebar, $style[`sidebar--${side}`]]"
+        :style="sidebarStyles"
+        @click.stop
+      >
+        <slot />
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style module>
+.wrapper {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}
+
+.backdrop {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+  will-change: opacity;
+}
+
+.backdrop--blur {
+  background-color: var(--sidebar-backdrop-blur-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.backdrop--dim {
+  background-color: var(--sidebar-backdrop-dim-bg);
+}
+
+.sidebar {
+  position: absolute;
+  background-color: var(--sidebar-bg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+  will-change: transform;
+  transform: translateZ(0); /* Force GPU acceleration */
+
+  /* Better scrollbar styling */
+  scrollbar-width: thin;
+  scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
+}
+
+/* Webkit scrollbar styling */
+.sidebar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sidebar::-webkit-scrollbar-thumb {
+  background-color: var(--sidebar-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.sidebar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sidebar-scrollbar-thumb-hover);
+}
+
+/* Shadow styles for different sides */
+.sidebar--left {
+  box-shadow: 4px 0 20px var(--sidebar-shadow-left);
+}
+
+.sidebar--right {
+  box-shadow: -4px 0 20px var(--sidebar-shadow-right);
+}
+
+.sidebar--top {
+  box-shadow: 0 4px 20px var(--sidebar-shadow-top);
+}
+
+.sidebar--bottom {
+  box-shadow: 0 -4px 20px var(--sidebar-shadow-bottom);
+}
+
+/* Handle safe areas for mobile devices */
+@supports (padding: max(0px)) {
+  .sidebar--left {
+    padding-left: env(safe-area-inset-left);
+  }
+
+  .sidebar--right {
+    padding-right: env(safe-area-inset-right);
+  }
+
+  .sidebar--top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .sidebar--bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+/* Dark mode support */
+.dark,
+.dark-theme .sidebar--left {
+  box-shadow: 4px 0 20px var(--sidebar-shadow-left);
+}
+
+.dark,
+.dark-theme .sidebar--right {
+  box-shadow: -4px 0 20px var(--sidebar-shadow-right);
+}
+
+.dark,
+.dark-theme .sidebar--top {
+  box-shadow: 0 4px 20px var(--sidebar-shadow-top);
+}
+
+.dark,
+.dark-theme .sidebar--bottom {
+  box-shadow: 0 -4px 20px var(--sidebar-shadow-bottom);
+}
+
+.dark,
+.dark-theme .backdrop--dim {
+  background-color: var(--sidebar-backdrop-dim-bg);
+}
+
+.dark,
+.dark-theme .sidebar::-webkit-scrollbar-thumb {
+  background-color: var(--sidebar-scrollbar-thumb);
+}
+
+.dark,
+.dark-theme .sidebar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sidebar-scrollbar-thumb-hover);
+}
+
+/* Prevent body scroll when sidebar is open */
+body:has(.wrapper) {
+  overflow: hidden;
+}
+</style>

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

@@ -0,0 +1,90 @@
+/* Light theme using Colors */
+:root {
+  /* Sidebar colors */
+  --sidebar-bg: #ffffff; /* white - light background for light mode */
+
+  /* Sidebar backdrop colors */
+  --sidebar-backdrop-blur-bg: rgba(
+    0,
+    0,
+    0,
+    0.3
+  ); /* blackA8 - blur backdrop for light mode */
+  --sidebar-backdrop-dim-bg: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); /* blackA12 - dim backdrop for light mode */
+
+  /* Sidebar shadow colors */
+  --sidebar-shadow-left: rgba(
+    0,
+    0,
+    0,
+    0.15
+  ); /* blackA6 - left shadow for light mode */
+  --sidebar-shadow-right: rgba(
+    0,
+    0,
+    0,
+    0.15
+  ); /* blackA6 - right shadow for light mode */
+  --sidebar-shadow-top: rgba(
+    0,
+    0,
+    0,
+    0.15
+  ); /* blackA6 - top shadow for light mode */
+  --sidebar-shadow-bottom: rgba(
+    0,
+    0,
+    0,
+    0.15
+  ); /* blackA6 - bottom shadow for light mode */
+
+  /* Sidebar scrollbar colors */
+  --sidebar-scrollbar-thumb: rgba(
+    0,
+    0,
+    0,
+    0.2
+  ); /* blackA6 - scrollbar thumb for light mode */
+  --sidebar-scrollbar-thumb-hover: rgba(
+    0,
+    0,
+    0,
+    0.3
+  ); /* blackA8 - scrollbar thumb hover for light mode */
+}
+
+/* Dark theme */
+.dark,
+.dark-theme {
+  /* Sidebar colors */
+  --sidebar-bg: #111111; /* Original dark mode value */
+
+  /* Sidebar backdrop colors */
+  --sidebar-backdrop-blur-bg: rgba(0, 0, 0, 0.3); /* Original dark mode value */
+  --sidebar-backdrop-dim-bg: rgba(0, 0, 0, 0.85); /* Original dark mode value */
+
+  /* Sidebar shadow colors */
+  --sidebar-shadow-left: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --sidebar-shadow-right: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --sidebar-shadow-top: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+  --sidebar-shadow-bottom: rgba(0, 0, 0, 0.5); /* Original dark mode value */
+
+  /* Sidebar scrollbar colors */
+  --sidebar-scrollbar-thumb: rgba(
+    255,
+    255,
+    255,
+    0.2
+  ); /* Original dark mode value */
+  --sidebar-scrollbar-thumb-hover: rgba(
+    255,
+    255,
+    255,
+    0.3
+  ); /* Original dark mode value */
+}