@umbra.ui/core 0.1.0

package/src/components/navigation/adaptive/AdaptiveLayout.vue

@@ -0,0 +1,779 @@
+<!-- AdaptiveLayout2.vue -->
+<script setup lang="ts">
+import {
+  markRaw,
+  type Component,
+  defineExpose,
+  ref,
+  computed,
+  onMounted,
+  onUnmounted,
+  watch,
+  nextTick,
+  watchEffect,
+} from "vue";
+import { useAdaptiveLayoutState } from "./useAdaptiveLayout";
+import { useResponsiveContainer } from "./useContainerMonitor";
+import { View, InternalView, ViewLayout } from "./types";
+import { useViewAnimation } from "./useViewAnimation";
+import { useBreakpoints } from "./useBreakpoints";
+import {
+  useViewResize,
+  type ResizeConfig,
+  type ResizableView,
+} from "./useViewResize";
+
+export interface Props {
+  initialViews: View[];
+  instanceKey?: string;
+  padding?: string;
+  gap?: string;
+  canHideViews?: boolean;
+  canResizeViews?: boolean;
+  layout?: ViewLayout;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  initialViews: () => [],
+  instanceKey: () => "adaptive-layout",
+  padding: "0",
+  gap: "0",
+  canHideViews: true,
+  canResizeViews: true,
+  layout: "adaptive",
+});
+
+// View state management
+const layoutState = useAdaptiveLayoutState(props.instanceKey);
+const views = layoutState.views;
+
+// Initialize views with the initial data
+views.value = props.initialViews.map((view) => ({
+  ...view,
+  location: "onscreen",
+}));
+
+const offScreenViewsLeading = layoutState.offScreenViewsLeading;
+const offScreenViewsTrailing = layoutState.offScreenViewsTrailing;
+const onScreenViews = layoutState.onScreenViews;
+const overlayViews = layoutState.overlayViews;
+
+onMounted(() => {
+  layoutState.methods.setMethods({
+    add,
+    remove,
+    replace,
+    show,
+    hide,
+    push,
+    pop,
+  });
+});
+
+// Container ref and monitoring
+const containerRef = ref<HTMLElement>();
+const monitor = useResponsiveContainer(containerRef);
+
+// Share the monitor with the state whenever it's available
+watchEffect(() => {
+  if (monitor && containerRef.value) {
+    layoutState.methods.setMonitor(monitor);
+  }
+});
+
+// Extract view animation functionality
+const {
+  getOnscreenId,
+  getViewId,
+  getOffscreenLeadingId,
+  getOffscreenTrailingId,
+  getDarkenId,
+  getOverlayId,
+  splitViewShow,
+  splitViewHide,
+  splitViewPush,
+  splitViewPop,
+  slideoverShow,
+  slideoverHide,
+  slideoverPush,
+  slideoverPop,
+  navstackShow,
+  navstackPush,
+  navstackPop,
+  hasPrecedingViews,
+  getSingleViewBefore,
+  getSingleViewAfter,
+  isOverlayOpen,
+} = useViewAnimation(
+  views,
+  props.instanceKey,
+  monitor.dimensions,
+  props.padding,
+  props.gap
+);
+
+// Extract breakpoint handling
+const { setupForBreakpoint } = useBreakpoints(views);
+
+const getViewIdForResize = (view: ResizableView) => {
+  return `${props.instanceKey}-view-${view.id}`;
+};
+
+// Resize configuration
+const resizeConfig: ResizeConfig = {
+  defaultMinWidth: 150,
+  gap: Number(props.gap) || 0,
+  padding: Number(props.padding) || 0,
+};
+
+// Extract resize functionality with the updated signature
+const { resizeTooltip, startResize } = useViewResize(
+  onScreenViews,
+  resizeConfig,
+  props,
+  getViewIdForResize, // Now passes the correct signature
+  getOnscreenId
+);
+
+// Public methods
+
+const add = (view: View, animated: boolean = true) => {
+  console.error("add not implemented");
+};
+
+const remove = (id: string, animated: boolean = true) => {
+  console.error("remove not implemented");
+};
+
+const replace = (id: string, view: View, animated: boolean = true) => {
+  console.error("replace not implemented");
+};
+
+const show = (id: string, animated: boolean = true) => {
+  switch (props.layout) {
+    case "splitview":
+      splitViewShow(id);
+      return;
+    case "slideover":
+      slideoverShow(id);
+      return;
+    case "navstack":
+      navstackShow(id);
+      return;
+  }
+  switch (monitor.currentBreakpoint.value) {
+    case "desktop":
+      splitViewShow(id);
+      return;
+    case "tablet":
+      slideoverShow(id);
+      return;
+    case "mobile":
+      navstackShow(id);
+      return;
+  }
+};
+
+const hide = (id: string, animated: boolean = true) => {
+  switch (props.layout) {
+    case "splitview":
+      splitViewHide(id);
+      return;
+    case "slideover":
+      slideoverHide();
+      return;
+    case "navstack":
+      navstackShow(views.value[0].id);
+      return;
+  }
+  switch (monitor.currentBreakpoint.value) {
+    case "desktop":
+      splitViewHide(id);
+      return;
+    case "tablet":
+      slideoverHide();
+      return;
+    case "mobile":
+      navstackShow(views.value[0].id);
+      return;
+  }
+};
+
+const push = (id: string, animated: boolean = true) => {
+  switch (props.layout) {
+    case "splitview":
+      splitViewPush(id);
+      return;
+    case "slideover":
+      slideoverPush(id);
+      return;
+    case "navstack":
+      navstackPush();
+      return;
+  }
+  switch (monitor.currentBreakpoint.value) {
+    case "desktop":
+      splitViewPush(id);
+      return;
+    case "tablet":
+      slideoverPush(id);
+      return;
+    case "mobile":
+      navstackPush();
+      return;
+  }
+};
+
+const pop = (id: string, animated: boolean = true) => {
+  switch (props.layout) {
+    case "splitview":
+      splitViewPop(id);
+      return;
+    case "slideover":
+      slideoverPop(id);
+      return;
+    case "navstack":
+      navstackPop(id);
+      return;
+  }
+  switch (monitor.currentBreakpoint.value) {
+    case "desktop":
+      splitViewPop(id);
+      return;
+    case "tablet":
+      slideoverPop(id);
+      return;
+    case "mobile":
+      navstackPop(id);
+      return;
+  }
+};
+
+const toggle = (id: string, animated: boolean = true) => {
+  const view = views.value.find((view) => view.id === id);
+  if (!view) return;
+  if (view.location === "onscreen") {
+    hide(view.id);
+  } else {
+    show(view.id);
+  }
+  // const next = getSingleViewAfter(view.id);
+  // if (!next) return;
+  // handleClicked(next);
+};
+
+defineExpose({
+  add,
+  remove,
+  replace,
+  show,
+  hide,
+  push,
+  pop,
+  toggle,
+});
+
+// Watch for breakpoint changes
+watch(
+  () => monitor.currentBreakpoint.value,
+  (newBreakpoint, oldBreakpoint) => {
+    if (props.layout !== "adaptive") {
+      return;
+    }
+    // ensure the overlay is hidden if showing
+    if (isOverlayOpen.value) {
+      slideoverHide();
+    }
+    setupForBreakpoint(oldBreakpoint, newBreakpoint);
+  }
+);
+
+/*
+ * Internal Functions
+ */
+
+const darkenClicked = async () => {
+  slideoverHide();
+};
+
+const handleClicked = async (view: InternalView) => {
+  switch (props.layout) {
+    case "splitview":
+      toggleSplitView(view);
+      return;
+    case "slideover":
+      toggleSlideover(view);
+      return;
+    case "navstack":
+      toggleNavstack(view);
+      return;
+  }
+  switch (monitor.currentBreakpoint.value) {
+    case "desktop":
+      toggleSplitView(view);
+      return;
+    case "tablet":
+      toggleSlideover(view);
+      return;
+    case "mobile":
+      toggleNavstack(view);
+      return;
+  }
+};
+
+const toggleSplitView = async (view: InternalView) => {
+  // If there are any preceding views that are onscreen, hide this view (and they will be hidden too)
+  if (hasPrecedingViews(view.id, "onscreen")) {
+    pop(view.id);
+  } else {
+    // All preceding views are offscreen (or there are no preceding views), so show the preceding view
+    push(view.id);
+  }
+};
+const toggleSlideover = async (view: InternalView) => {
+  switch (view.location) {
+    case "onscreen":
+      const previous = getSingleViewBefore(view.id);
+      if (previous) {
+        slideoverShow(previous.id);
+      }
+      break;
+    case "overlay":
+      if (hasPrecedingViews(view.id, "leading")) {
+        slideoverPush(view.id);
+      } else {
+        slideoverPop(view.id);
+      }
+      break;
+  }
+};
+const toggleNavstack = async (view: InternalView) => {
+  popNavstack(view);
+};
+const pushNavstack = async (view: InternalView) => {
+  navstackPush();
+};
+const popNavstack = async (view: InternalView) => {
+  navstackPop(view.id);
+};
+
+const shouldShowLeftHandle = (index: number): boolean => {
+  return (
+    props.canHideViews &&
+    (index > 0 || (index === 0 && offScreenViewsLeading.value.length > 0))
+  );
+};
+const shouldShowRightHandle = (index: number): boolean => {
+  if (props.layout === "navstack" && props.canHideViews) {
+    return offScreenViewsTrailing.value.length > 0;
+  }
+  if (
+    props.layout === "adaptive" &&
+    props.canHideViews &&
+    monitor.currentBreakpoint.value === "mobile"
+  ) {
+    return offScreenViewsTrailing.value.length > 0;
+  }
+  return false;
+};
+
+const getViewMinWidthOnscreen = (view: InternalView): string => {
+  if (props.layout === "navstack") {
+    return "";
+  }
+  if (
+    props.layout === "adaptive" &&
+    monitor.currentBreakpoint.value === "mobile"
+  ) {
+    return "";
+  }
+  return `${view.minWidth || 100}px`;
+};
+const getViewMaxWidthOnscreen = (view: InternalView): string => {
+  if (props.layout === "navstack") {
+    return "";
+  }
+  if (
+    props.layout === "adaptive" &&
+    monitor.currentBreakpoint.value === "mobile"
+  ) {
+    return "";
+  }
+  return `${view.maxWidth || Infinity}px`;
+};
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    :class="$style.container"
+    :style="{
+      '--padding': props.padding,
+      '--gap': props.gap,
+      '--width': `${monitor.dimensions.value.width}px`,
+    }"
+  >
+    <div :id="getOnscreenId()" :class="$style.onscreen">
+      <div
+        v-for="(view, index) in onScreenViews"
+        :key="view.id"
+        :class="[
+          $style.viewWrapper,
+          {
+            [$style.lastView]: index === onScreenViews.length - 1,
+          },
+        ]"
+        :style="{
+          order: index,
+          minWidth: getViewMinWidthOnscreen(view),
+          maxWidth: getViewMaxWidthOnscreen(view),
+          width:
+            view.currentWidth && index < onScreenViews.length - 1
+              ? `${view.currentWidth}px`
+              : undefined,
+          flexShrink: index === onScreenViews.length - 1 ? 1 : 0,
+        }"
+        :id="getViewId(view)"
+      >
+        <!-- Toggle Button: Left -->
+        <div
+          v-if="shouldShowLeftHandle(index)"
+          :class="[$style.handle_container, $style.handle_container_left]"
+          @click="handleClicked(view)"
+        >
+          <div :class="$style.handle"></div>
+        </div>
+
+        <!-- Toggle Button: Right (Only for navstack layout) -->
+        <div
+          v-if="shouldShowRightHandle(index)"
+          :class="[$style.handle_container, $style.handle_container_right]"
+          @click="pushNavstack(view)"
+        >
+          <div :class="$style.handle"></div>
+        </div>
+
+        <!-- Component-->
+        <component :is="view.component" v-bind="view.props || {}" />
+
+        <!-- Resize handle (not on last element) -->
+        <div
+          v-if="props.canResizeViews && index < onScreenViews.length - 1"
+          :class="$style.resizeHandle"
+          @mousedown="startResize(view.id, $event)"
+        >
+          <div :class="$style.resizeHandleBar" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Resize tooltip -->
+    <div
+      v-if="resizeTooltip.visible"
+      :class="$style.resizeTooltip"
+      :style="{
+        left: `${resizeTooltip.x}px`,
+        top: `${resizeTooltip.y}px`,
+      }"
+    >
+      {{ resizeTooltip.width }}px
+    </div>
+
+    <!-- Offscreen Leading -->
+    <div :id="getOffscreenLeadingId()" :class="$style.offscreenLeading">
+      <div
+        v-for="(view, index) in offScreenViewsLeading"
+        :key="view.id"
+        :class="$style.viewWrapper"
+        :style="{
+          order: index,
+          minWidth: `${view.minWidth || 100}px`,
+          maxWidth: view.maxWidth ? `${view.maxWidth}px` : undefined,
+          width: view.currentWidth ? `${view.currentWidth}px` : undefined,
+          flexShrink: 0,
+        }"
+        :id="getViewId(view)"
+      >
+        <component :is="view.component" v-bind="view.props || {}" />
+      </div>
+    </div>
+
+    <!-- Offscreen Trailing -->
+    <div :id="getOffscreenTrailingId()" :class="$style.offscreenTrailing">
+      <div
+        v-for="(view, index) in offScreenViewsTrailing"
+        :key="view.id"
+        :class="$style.viewWrapper"
+        :style="{
+          order: index,
+          minWidth: `${view.minWidth || 100}px`,
+          maxWidth: view.maxWidth ? `${view.maxWidth}px` : undefined,
+          width: view.currentWidth ? `${view.currentWidth}px` : undefined,
+          flexShrink: 0,
+        }"
+        :id="getViewId(view)"
+      >
+        <component :is="view.component" v-bind="view.props || {}" />
+      </div>
+    </div>
+
+    <!-- Darken -->
+    <div
+      :id="getDarkenId()"
+      :class="[$style.darken, { [$style.darkenVisible]: isOverlayOpen }]"
+      @click="darkenClicked"
+    ></div>
+
+    <!-- Overlay -->
+    <div :id="getOverlayId()" :class="$style.overlay">
+      <div
+        v-for="(view, index) in overlayViews"
+        :key="view.id"
+        :class="$style.viewWrapper"
+        :style="{
+          order: index,
+          minWidth: `${view.minWidth || 100}px`,
+          maxWidth: view.maxWidth ? `${view.maxWidth}px` : undefined,
+          width: view.currentWidth ? `${view.currentWidth}px` : undefined,
+          flexShrink: 0,
+        }"
+        :id="getViewId(view)"
+      >
+        <!-- Close/toggle button (not on first view unless there are offscreen views) -->
+        <div
+          v-if="
+            props.canHideViews &&
+            (index > 0 ||
+              (index === 0 &&
+                (offScreenViewsLeading.length > 0 ||
+                  offScreenViewsTrailing.length > 0)))
+          "
+          :class="$style.handle_container"
+          @click="handleClicked(view)"
+        >
+          <div :class="$style.handle"></div>
+        </div>
+
+        <component :is="view.component" v-bind="view.props || {}" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style module>
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.offscreenLeading {
+  width: var(--width);
+  position: absolute;
+  top: 0;
+  left: calc(var(--width) * -1);
+  bottom: 0;
+
+  margin-top: var(--padding);
+  margin-bottom: var(--padding);
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  justify-items: end;
+}
+
+.offscreenLeading > * {
+  grid-area: content;
+}
+
+.offscreenTrailing {
+  width: var(--width);
+  position: absolute;
+  top: 0;
+  right: calc(var(--width) * -1);
+  bottom: 0;
+
+  margin-top: var(--padding);
+  margin-bottom: var(--padding);
+
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+  justify-items: start;
+}
+
+.offscreenTrailing > * {
+  grid-area: content;
+}
+
+.onscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--padding);
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap);
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  transition: filter 0.3s ease;
+  /*
+  overflow: hidden;
+  */
+  overflow: scroll;
+  max-width: 100%;
+}
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  pointer-events: none;
+  width: auto;
+  transition: opacity 3.3s ease;
+  transform: translateX(calc((110% + 10px) * -1));
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+  z-index: 3;
+  display: flex;
+  flex-direction: row;
+  gap: var(--gap);
+  padding: var(--padding);
+}
+.darken {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: black;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.darkenVisible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.viewWrapper {
+  flex: 0 0 auto;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+}
+.viewWrapper > *:not(.handle_container):not(.resizeHandle) {
+  width: 100%;
+  height: 100%;
+}
+.lastView {
+  flex: 1 1 auto;
+  /*min-width: 0;  Allow the last view to shrink below its content size */
+}
+
+.handle_container {
+  width: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+}
+.handle_container_left {
+  left: 0;
+}
+.handle_container_right {
+  right: 0;
+}
+.handle {
+  width: var(--slideover-handle-default-width, 4px);
+  height: var(--slideover-handle-default-height, 24px);
+  opacity: var(--slideover-handle-default-opacity, 0.3);
+  background-color: var(--slideover-handle-bg, #666);
+  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, 6px);
+  height: var(--slideover-handle-hover-height, 32px);
+  opacity: var(--slideover-handle-hover-opacity, 0.6);
+}
+
+.resizeHandle {
+  position: absolute;
+  right: -5px;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+}
+
+.resizeHandle:hover .resizeHandleBar {
+  background: #4a5568;
+  opacity: 0.5;
+}
+
+.resizeHandleBar {
+  width: 2px;
+  height: 30%;
+  background: transparent;
+  border-radius: 999px;
+  transition: all 0.2s ease;
+}
+
+.resizeHandle:active .resizeHandleBar {
+  background: var(--accent);
+  opacity: 0.8;
+  height: 100%;
+}
+
+.resizeTooltip {
+  position: fixed;
+  background: #2d3748;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  pointer-events: none;
+  z-index: 1000;
+  transform: translateX(-50%);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+}
+
+.resizeTooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid #2d3748;
+}
+</style>