@umbra.ui/core 0.1.0

package/src/components/navigation/slideover/SlideoverController.vue

@@ -0,0 +1,287 @@
+<script setup lang="ts">
+import { gsap } from "gsap";
+import { ref, computed, onMounted } from "vue";
+import { ChevronLeftIcon } from "@umbra-ui/icons";
+import { useSlideoverController } from "./useSlideoverController";
+import "../theme.css";
+
+// Define props
+const props = defineProps<{
+  panes: Array<{
+    name: string;
+    background: string;
+    foreground: string;
+    component: any;
+    props: object;
+  }>;
+  controller?: ReturnType<typeof useSlideoverController>;
+  componentId?: string;
+  showBreadcrumb?: boolean;
+}>();
+
+// Use provided componentId or generate a unique one
+const componentId =
+  props.componentId ||
+  `panel-layout-${Math.random().toString(36).substr(2, 9)}`;
+
+// Use provided controller or create internal one
+const controller =
+  props.controller || useSlideoverController(props.panes, componentId);
+
+// Computed properties
+const mainPane = computed(() => {
+  if (props.panes.length > 0) {
+    return props.panes[props.panes.length - 1];
+  }
+  return null;
+});
+
+const secondaryPanes = computed(() => {
+  if (props.panes.length > 0) {
+    return props.panes.slice(0, -1);
+  }
+  return [];
+});
+
+// Helper functions to get unique element IDs
+const getOffscreenId = () => `${componentId}-offscreen`;
+const getOnscreenId = () => `${componentId}-onscreen`;
+const getOverlayId = () => `${componentId}-overlay`;
+const getDarkenId = () => `${componentId}-darken`;
+const getPaneId = (index: number) => `${componentId}-pane-${index}`;
+
+// Initialize panes in offscreen on mount
+onMounted(() => {
+  const offscreen = document.getElementById(getOffscreenId());
+  if (offscreen) {
+    // Move all secondary panes to offscreen initially
+    for (let i = 0; i < secondaryPanes.value.length; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane) {
+        pane.parentNode?.removeChild(pane);
+        offscreen.appendChild(pane);
+      }
+    }
+  }
+});
+</script>
+
+<template>
+  <div :class="$style.container">
+    <!-- Move darken outside of the grid structure -->
+    <div
+      :id="getDarkenId()"
+      :class="$style.darken"
+      @click="controller.hideAll"
+    ></div>
+
+    <div :class="$style.content_wrapper">
+      <div :id="getOnscreenId()" :class="$style.onscreen">
+        <div
+          v-if="mainPane"
+          :id="getPaneId(props.panes.length - 1)"
+          :class="$style.pane_full"
+          :style="{
+            order: props.panes.length - 1,
+            backgroundColor: mainPane.background,
+          }"
+        >
+          <div
+            v-if="(props.showBreadcrumb ?? true) && secondaryPanes.length > 0"
+            :class="$style.navbar"
+            :style="{ backgroundColor: mainPane.background }"
+          >
+            <div :class="$style.breadcrumbs">
+              <div
+                v-for="(pane, index) in secondaryPanes"
+                :key="`breadcrumb-${index}`"
+                :class="$style.breadcrumb"
+              >
+                <p
+                  :class="$style.breadcrumb_divider"
+                  v-if="index !== 0"
+                  :style="{ color: mainPane.foreground }"
+                >
+                  /
+                </p>
+                <p
+                  :class="$style.breadcrumb_title"
+                  :style="{ color: mainPane.foreground }"
+                  @click="() => controller.showPane(index)"
+                >
+                  {{ pane.name }}
+                </p>
+              </div>
+            </div>
+          </div>
+          <component
+            :is="mainPane.component"
+            v-bind="mainPane.props"
+          ></component>
+        </div>
+      </div>
+      <div :id="getOffscreenId()" :class="$style.offscreen">
+        <div
+          v-for="(pane, index) in secondaryPanes"
+          :key="`pane-${index}`"
+          :id="getPaneId(index)"
+          :class="$style.pane"
+          :style="{ order: index, backgroundColor: pane.background }"
+        >
+          <div :class="$style.component_container">
+            <component :is="pane.component" v-bind="pane.props"></component>
+          </div>
+          <div
+            v-if="index > 0"
+            :class="$style.handle_container"
+            @click="() => controller.togglePane(index)"
+            :style="{ backgroundColor: pane.background }"
+          >
+            <div
+              :class="$style.handle"
+              :style="{ backgroundColor: pane.foreground }"
+            ></div>
+          </div>
+        </div>
+      </div>
+      <div :id="getOverlayId()" :class="$style.overlay"></div>
+    </div>
+  </div>
+</template>
+
+<style module>
+/* Same styles as before */
+.container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.darken {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--slideover-darken-bg);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 5; /* Lower than overlay */
+}
+
+.content_wrapper {
+  position: relative;
+  display: grid;
+  grid-template-areas: "content";
+  height: 100%;
+  width: 100%;
+  grid-template-rows: 1fr;
+}
+
+.offscreen {
+  position: absolute;
+  top: 0;
+  left: -20rem;
+  bottom: 0;
+  width: 20rem;
+  display: flex;
+  justify-content: end;
+  z-index: 20; /* Highest z-index */
+}
+
+.overlay {
+  display: flex;
+  position: absolute;
+  width: auto;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  z-index: 10; /* Higher than darken */
+}
+
+.onscreen {
+  grid-area: content;
+  display: flex;
+  height: 100%;
+}
+
+.pane {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "content";
+  height: 100%;
+}
+
+.pane_full {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  height: 100%;
+}
+
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.471rem;
+}
+
+.breadcrumb {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.breadcrumb_title {
+  font-weight: 600;
+  cursor: default;
+  opacity: var(--slideover-breadcrumb-default-opacity);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.breadcrumb_title:hover {
+  opacity: var(--slideover-breadcrumb-hover-opacity);
+  transform: scale(1.05);
+}
+
+.breadcrumb_divider {
+  opacity: 0.25;
+}
+
+.component_container {
+  grid-area: content;
+  overflow: hidden;
+  height: 100%;
+}
+
+.handle_container {
+  grid-area: content;
+  width: 15px;
+  min-height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.handle {
+  width: var(--slideover-handle-default-width);
+  height: var(--slideover-handle-default-height);
+  opacity: var(--slideover-handle-default-opacity);
+  background-color: var(--slideover-handle-bg);
+  border-radius: 999px;
+  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
+}
+
+.handle_container:hover .handle {
+  width: var(--slideover-handle-hover-width);
+  height: var(--slideover-handle-hover-height);
+  opacity: var(--slideover-handle-hover-opacity);
+}
+</style>

package/src/components/navigation/slideover/useSlideoverController.ts

@@ -0,0 +1,320 @@
+import { ref, Ref, computed } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+
+gsap.registerPlugin(Flip);
+
+interface Pane {
+  name: string;
+  background: string;
+  foreground: string;
+  component: any;
+  props: Record<string, any>;
+}
+
+export const useSlideoverController = (panes: Pane[], componentId: string) => {
+  // State to track visibility of panes
+  const visiblePanes: Ref<boolean[]> = ref(panes.map(() => false));
+
+  // Track the current active pane index
+  const currentPaneIndex = computed(() => {
+    // Find the highest index that's visible
+    for (let i = visiblePanes.value.length - 1; i >= 0; i--) {
+      if (visiblePanes.value[i]) {
+        return i;
+      }
+    }
+    return -1;
+  });
+
+  // Helper functions to get unique element IDs
+  const getOffscreenId = () => `${componentId}-offscreen`;
+  const getOnscreenId = () => `${componentId}-onscreen`;
+  const getOverlayId = () => `${componentId}-overlay`;
+  const getDarkenId = () => `${componentId}-darken`;
+  const getPaneId = (index: number) => `${componentId}-pane-${index}`;
+
+  // Animate darken overlay
+  const animateDarken = (show: boolean) => {
+    const darken = document.getElementById(getDarkenId());
+    if (!darken) return;
+
+    if (show) {
+      darken.style.pointerEvents = "all";
+      gsap.to(darken, { duration: 0.5, opacity: 1, ease: "circ.outOut" });
+    } else {
+      darken.style.pointerEvents = "none";
+      gsap.to(darken, { duration: 0.5, opacity: 0, ease: "circ.outOut" });
+    }
+  };
+
+  // Show a specific pane and all panes after it
+  const showPane = (index: number) => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const overlay = document.getElementById(getOverlayId());
+
+    if (!offscreen || !overlay) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Don't show if it's the main pane (last one)
+    if (index >= panes.length - 1) return;
+
+    // Get state for animation
+    const paneElements = panes
+      .slice(0, -1) // Exclude main pane
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Show all panes from the selected index onward
+    for (let i = 0; i < panes.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane) {
+        if (i >= index) {
+          visiblePanes.value[i] = true;
+          pane.parentNode?.removeChild(pane);
+          overlay.appendChild(pane);
+        } else {
+          visiblePanes.value[i] = false;
+          pane.parentNode?.removeChild(pane);
+          offscreen.appendChild(pane);
+        }
+      }
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+
+    // Show darken overlay if any panes are visible
+    animateDarken(true);
+  };
+
+  // Hide a specific pane and all panes before it
+  const hidePane = (index: number) => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const overlay = document.getElementById(getOverlayId());
+
+    if (!offscreen || !overlay) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Get state for animation
+    const paneElements = panes
+      .slice(0, -1)
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Hide all panes up to and including the specified index
+    for (let i = 0; i <= index && i < panes.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane) {
+        visiblePanes.value[i] = false;
+        pane.parentNode?.removeChild(pane);
+        offscreen.appendChild(pane);
+      }
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+
+    // Hide darken if no panes are visible
+    const anyVisible = visiblePanes.value.slice(0, -1).some((v) => v);
+    animateDarken(anyVisible);
+  };
+
+  // Toggle a pane at a specific index
+  const togglePane = (index: number) => {
+    if (index <= 0 || index >= panes.length - 1) return;
+
+    const offscreen = document.getElementById(getOffscreenId());
+    const overlay = document.getElementById(getOverlayId());
+
+    if (!offscreen || !overlay) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Get state for animation
+    const paneElements = panes
+      .slice(0, -1)
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // If the previous pane is visible, hide all before this one
+    if (visiblePanes.value[index - 1]) {
+      for (let i = 0; i < index; i++) {
+        const pane = document.getElementById(getPaneId(i));
+        if (pane) {
+          visiblePanes.value[i] = false;
+          pane.parentNode?.removeChild(pane);
+          offscreen.appendChild(pane);
+        }
+      }
+    } else {
+      // Show only the pane immediately before the clicked pane
+      const pane = document.getElementById(getPaneId(index - 1));
+      if (pane) {
+        visiblePanes.value[index - 1] = true;
+        pane.parentNode?.removeChild(pane);
+        overlay.insertBefore(pane, overlay.children[index - 1] || null);
+      }
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+
+    animateDarken(true);
+  };
+
+  // Show all secondary panes
+  const showAll = () => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const overlay = document.getElementById(getOverlayId());
+
+    if (!offscreen || !overlay) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    const paneElements = panes
+      .slice(0, -1)
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Move all secondary panes to overlay
+    for (let i = 0; i < panes.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane) {
+        visiblePanes.value[i] = true;
+        pane.parentNode?.removeChild(pane);
+        overlay.appendChild(pane);
+      }
+    }
+
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+
+    animateDarken(true);
+  };
+
+  // Hide all secondary panes
+  const hideAll = () => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const overlay = document.getElementById(getOverlayId());
+
+    if (!offscreen || !overlay) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    const paneElements = panes
+      .slice(0, -1)
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Move all panes from overlay to offscreen
+    for (let i = 0; i < panes.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane) {
+        visiblePanes.value[i] = false;
+        pane.parentNode?.removeChild(pane);
+        offscreen.appendChild(pane);
+      }
+    }
+
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+
+    animateDarken(false);
+  };
+
+  // Navigate to a specific pane (show it and hide others)
+  const navigate = (index: number, animated: boolean = true) => {
+    if (index < 0 || index >= panes.length) return;
+
+    // If navigating to the main pane, hide all
+    if (index === panes.length - 1) {
+      hideAll();
+      return;
+    }
+
+    // If not animated, directly manipulate DOM without GSAP
+    if (!animated) {
+      const offscreen = document.getElementById(getOffscreenId());
+      const overlay = document.getElementById(getOverlayId());
+
+      if (!offscreen || !overlay) return;
+
+      // Reset all panes
+      for (let i = 0; i < panes.length - 1; i++) {
+        const pane = document.getElementById(getPaneId(i));
+        if (pane) {
+          pane.parentNode?.removeChild(pane);
+          if (i === index) {
+            visiblePanes.value[i] = true;
+            overlay.appendChild(pane);
+          } else {
+            visiblePanes.value[i] = false;
+            offscreen.appendChild(pane);
+          }
+        }
+      }
+
+      // Set darken state instantly
+      const darken = document.getElementById(getDarkenId());
+      if (darken) {
+        darken.style.opacity = "1";
+        darken.style.pointerEvents = "all";
+      }
+    } else {
+      // Otherwise show the requested pane with animation
+      showPane(index);
+    }
+  };
+
+  return {
+    visiblePanes,
+    currentPaneIndex,
+    showPane,
+    hidePane,
+    togglePane,
+    showAll,
+    hideAll,
+    navigate,
+  };
+};