@umbra.ui/core 0.1.0

package/src/components/navigation/splitview/SplitViewController.vue

@@ -0,0 +1,176 @@
+<!--SplitViewController.vue-->
+<script setup lang="ts">
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+import { ref, onMounted } from "vue";
+import { useSplitViewController } from "./useSplitViewController";
+import "../theme.css";
+import { Pane } from "../types";
+
+gsap.registerPlugin(Flip);
+
+// Define props
+const props = defineProps<{
+  panes: Array<Pane>;
+  controller?: ReturnType<typeof useSplitViewController>;
+  componentId?: string;
+}>();
+
+// 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 || useSplitViewController(props.panes, componentId);
+
+// Helper functions to get unique element IDs
+const getOffscreenId = () => `${componentId}-offscreen`;
+const getOnscreenId = () => `${componentId}-onscreen`;
+const getPaneId = (index: number) => `${componentId}-pane-${index}`;
+
+// Initialize all panes as visible on mount (they'll be positioned by CSS order)
+onMounted(() => {
+  // The controller already initializes visiblePanes, so we just need to ensure
+  // the DOM structure matches the initial state
+  const onscreen = document.getElementById(getOnscreenId());
+  const offscreen = document.getElementById(getOffscreenId());
+
+  if (onscreen && offscreen) {
+    // Move any panes that should be hidden to offscreen
+    for (let i = 0; i < props.panes.length - 1; i++) {
+      if (!controller.visiblePanes.value[i]) {
+        const pane = document.getElementById(getPaneId(i));
+        if (pane && pane.parentNode === onscreen) {
+          pane.parentNode.removeChild(pane);
+          offscreen.appendChild(pane);
+        }
+      }
+    }
+  }
+});
+
+// Mouse event handlers
+const onMouseEnter = (event: Event) => {
+  const element = (event.target as HTMLElement).lastChild;
+  gsap.to(element, {
+    duration: 0.5,
+    width: "var(--splitview-handle-hover-width)",
+    height: "var(--splitview-handle-hover-height)",
+    opacity: "var(--splitview-handle-hover-opacity)",
+    ease: "circ.inOut",
+  });
+};
+
+const onMouseLeave = (event: Event) => {
+  const element = (event.target as HTMLElement).lastChild;
+  gsap.to(element, {
+    duration: 0.5,
+    width: "var(--splitview-handle-default-width)",
+    height: "var(--splitview-handle-default-height)",
+    opacity: "var(--splitview-handle-default-opacity)",
+    ease: "circ.outOut",
+  });
+};
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :id="getOffscreenId()" :class="$style.offscreen"></div>
+    <div :id="getOnscreenId()" :class="$style.onscreen">
+      <div
+        v-for="(pane, index) in panes"
+        :key="index"
+        :id="getPaneId(index)"
+        :class="[
+          $style.pane,
+          { [$style.pane_full]: index === panes.length - 1 },
+        ]"
+        :style="{ order: index }"
+      >
+        <div
+          :class="$style.component_container"
+          :style="{ backgroundColor: pane.background }"
+        >
+          <component :is="pane.component" v-bind="pane.props"></component>
+        </div>
+        <div
+          v-if="index > 0"
+          :class="$style.handle_container"
+          @mouseenter="onMouseEnter"
+          @mouseleave="onMouseLeave"
+          @click="() => controller.togglePane(index)"
+          :style="{ backgroundColor: 'transparent' }"
+        >
+          <div
+            :class="$style.handle"
+            :style="{ backgroundColor: pane.foreground }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  position: relative;
+  display: grid;
+  grid-template-areas: "content";
+  height: 100%;
+  width: 100%;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr;
+  overflow: hidden;
+}
+.offscreen {
+  position: absolute;
+  top: 0;
+  left: -20rem;
+  bottom: 0;
+  width: 20rem;
+  display: flex;
+  justify-content: end;
+}
+.onscreen {
+  grid-area: content;
+  display: flex;
+  height: 100%;
+}
+.pane {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-areas: "content";
+  height: 100%;
+  /* Ensure non-full panes size to their content (e.g., Organizer's fixed width) */
+  flex: 0 0 auto;
+}
+.pane_full {
+  /* Allow the last pane to grow and shrink to fill remaining space */
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.component_container {
+  grid-area: content;
+  overflow: hidden;
+  height: 100%;
+}
+.handle_container {
+  grid-area: content;
+  width: 15px;
+  min-height: 30px;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.handle {
+  width: var(--splitview-handle-default-width);
+  height: var(--splitview-handle-default-height);
+  opacity: var(--splitview-handle-default-opacity);
+  background-color: var(--splitview-handle-bg);
+  border-radius: 999px;
+}
+</style>

package/src/components/navigation/splitview/useSplitViewController.ts

@@ -0,0 +1,388 @@
+//useSplitViewController.ts
+import { ref, Ref, computed, unref, watch } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+import { Pane } from "../types";
+
+gsap.registerPlugin(Flip);
+
+export const useSplitViewController = (
+  panes: Pane[] | Ref<Pane[]>,
+  componentId: string
+) => {
+  // Get the actual panes array
+  const panesArray = computed(() => unref(panes));
+
+  // State to track visibility of panes
+  const visiblePanes: Ref<boolean[]> = ref(panesArray.value.map(() => true));
+
+  // Vue-native event stream for visibility changes
+  const lastVisibilityEvent: Ref<{
+    type: "show" | "hide";
+    index: number;
+  } | null> = ref(null);
+
+  // Watch for changes in panes and update visiblePanes accordingly
+  watch(panesArray, (newPanes) => {
+    visiblePanes.value = newPanes.map((_, index) =>
+      index === newPanes.length - 1 ? true : visiblePanes.value[index] || false
+    );
+  });
+
+  // Track the current visible pane indices
+  const currentPaneIndex = computed(() => {
+    // Find the highest index that's visible (excluding the last pane which is always visible)
+    for (let i = visiblePanes.value.length - 2; 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 getPaneId = (index: number) => `${componentId}-pane-${index}`;
+
+  // Show a specific pane
+  const showPane = (index: number) => {
+    if (index < 0 || index >= panesArray.value.length - 1) return;
+
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Get state for animation
+    const paneElements = panesArray.value
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Show the specified pane
+    const pane = document.getElementById(getPaneId(index));
+    if (pane && !visiblePanes.value[index]) {
+      visiblePanes.value[index] = true;
+      pane.parentNode?.removeChild(pane);
+
+      // Insert at correct position
+      let insertBefore = null;
+      for (let i = index + 1; i < panesArray.value.length; i++) {
+        const nextPane = document.getElementById(getPaneId(i));
+        if (nextPane && nextPane.parentNode === onscreen) {
+          insertBefore = nextPane;
+          break;
+        }
+      }
+
+      if (insertBefore) {
+        onscreen.insertBefore(pane, insertBefore);
+      } else {
+        onscreen.appendChild(pane);
+      }
+
+      lastVisibilityEvent.value = { type: "show", index };
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+  };
+
+  // Hide a specific pane
+  const hidePane = (index: number) => {
+    if (index < 0 || index >= panesArray.value.length - 1) return;
+
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Get state for animation
+    const paneElements = panesArray.value
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Hide the specified pane
+    const pane = document.getElementById(getPaneId(index));
+    if (pane && visiblePanes.value[index]) {
+      visiblePanes.value[index] = false;
+      pane.parentNode?.removeChild(pane);
+      offscreen.appendChild(pane);
+      lastVisibilityEvent.value = { type: "hide", index };
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+  };
+
+  // Toggle a pane at a specific index (handle click behavior)
+  const togglePane = (index: number) => {
+    if (index <= 0) return;
+
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    // Get state for animation
+    const paneElements = panesArray.value
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Hide all panes before the clicked pane
+    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);
+          lastVisibilityEvent.value = { type: "hide", index: i };
+        }
+      }
+    } 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);
+        onscreen.insertBefore(pane, onscreen.children[index - 1] || null);
+        lastVisibilityEvent.value = { type: "show", index: index - 1 };
+      }
+    }
+
+    // Animate
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+  };
+
+  // Show all panes
+  const showAll = () => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    const paneElements = panesArray.value
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Show all panes except the last one (which is always visible)
+    for (let i = 0; i < panesArray.value.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane && !visiblePanes.value[i]) {
+        visiblePanes.value[i] = true;
+        pane.parentNode?.removeChild(pane);
+
+        // Insert at correct position
+        let insertBefore = null;
+        for (let j = i + 1; j < panesArray.value.length; j++) {
+          const nextPane = document.getElementById(getPaneId(j));
+          if (nextPane && nextPane.parentNode === onscreen) {
+            insertBefore = nextPane;
+            break;
+          }
+        }
+
+        if (insertBefore) {
+          onscreen.insertBefore(pane, insertBefore);
+        } else {
+          onscreen.appendChild(pane);
+        }
+
+        lastVisibilityEvent.value = { type: "show", index: i };
+      }
+    }
+
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+  };
+
+  // Hide all panes except the last one
+  const hideAll = () => {
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    const paneElements = panesArray.value
+      .map((_, i) => document.getElementById(getPaneId(i)))
+      .filter((el) => el !== null);
+    const state = Flip.getState(paneElements);
+
+    // Hide all panes except the last one
+    for (let i = 0; i < panesArray.value.length - 1; i++) {
+      const pane = document.getElementById(getPaneId(i));
+      if (pane && visiblePanes.value[i]) {
+        visiblePanes.value[i] = false;
+        pane.parentNode?.removeChild(pane);
+        offscreen.appendChild(pane);
+        lastVisibilityEvent.value = { type: "hide", index: i };
+      }
+    }
+
+    Flip.from(state, {
+      duration: 0.3,
+      ease: "power1.inOut",
+      absolute: true,
+    });
+  };
+
+  // Navigate to show only a specific pane (and hide others)
+  const navigate = (index: number, animated: boolean = true) => {
+    if (index < 0 || index >= panesArray.value.length) return;
+
+    // If navigating to the last pane, hide all others
+    if (index === panesArray.value.length - 1) {
+      hideAll();
+      return;
+    }
+
+    const offscreen = document.getElementById(getOffscreenId());
+    const onscreen = document.getElementById(getOnscreenId());
+
+    if (!offscreen || !onscreen) {
+      console.error(
+        `Elements are null for key '${componentId}'. Unable to animate`
+      );
+      return;
+    }
+
+    if (!animated) {
+      // Direct manipulation without animation
+      for (let i = 0; i < panesArray.value.length - 1; i++) {
+        const pane = document.getElementById(getPaneId(i));
+        if (pane) {
+          pane.parentNode?.removeChild(pane);
+          if (i === index) {
+            visiblePanes.value[i] = true;
+            // Find correct position
+            let insertBefore = null;
+            for (let j = i + 1; j < panesArray.value.length; j++) {
+              const nextPane = document.getElementById(getPaneId(j));
+              if (nextPane && nextPane.parentNode === onscreen) {
+                insertBefore = nextPane;
+                break;
+              }
+            }
+
+            if (insertBefore) {
+              onscreen.insertBefore(pane, insertBefore);
+            } else {
+              onscreen.appendChild(pane);
+            }
+            lastVisibilityEvent.value = { type: "show", index: i };
+          } else {
+            visiblePanes.value[i] = false;
+            offscreen.appendChild(pane);
+            lastVisibilityEvent.value = { type: "hide", index: i };
+          }
+        }
+      }
+    } else {
+      // Animated navigation
+      const paneElements = panesArray.value
+        .map((_, i) => document.getElementById(getPaneId(i)))
+        .filter((el) => el !== null);
+      const state = Flip.getState(paneElements);
+
+      // First hide all panes
+      for (let i = 0; i < panesArray.value.length - 1; i++) {
+        if (i !== index && visiblePanes.value[i]) {
+          const pane = document.getElementById(getPaneId(i));
+          if (pane) {
+            visiblePanes.value[i] = false;
+            pane.parentNode?.removeChild(pane);
+            offscreen.appendChild(pane);
+            lastVisibilityEvent.value = { type: "hide", index: i };
+          }
+        }
+      }
+
+      // Then show the target pane
+      const targetPane = document.getElementById(getPaneId(index));
+      if (targetPane && !visiblePanes.value[index]) {
+        visiblePanes.value[index] = true;
+        targetPane.parentNode?.removeChild(targetPane);
+
+        // Find correct position
+        let insertBefore = null;
+        for (let j = index + 1; j < panesArray.value.length; j++) {
+          const nextPane = document.getElementById(getPaneId(j));
+          if (nextPane && nextPane.parentNode === onscreen) {
+            insertBefore = nextPane;
+            break;
+          }
+        }
+
+        if (insertBefore) {
+          onscreen.insertBefore(targetPane, insertBefore);
+        } else {
+          onscreen.appendChild(targetPane);
+        }
+        lastVisibilityEvent.value = { type: "show", index };
+      }
+
+      Flip.from(state, {
+        duration: 0.3,
+        ease: "power1.inOut",
+        absolute: true,
+      });
+    }
+  };
+
+  return {
+    visiblePanes,
+    currentPaneIndex,
+    lastVisibilityEvent,
+    showPane,
+    hidePane,
+    togglePane,
+    showAll,
+    hideAll,
+    navigate,
+  };
+};