@umbra.ui/core 0.1.0

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

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useAdaptiveLayoutState } from "./useAdaptiveLayout";
+
+const props = withDefaults(
+  defineProps<{
+    instanceKey?: string | symbol;
+    separator?: string;
+    showTooltip?: boolean;
+    maxLabelLength?: number;
+  }>(),
+  {
+    instanceKey: () => Symbol("adaptive-layout"),
+    separator: "/",
+    showTooltip: true,
+    maxLabelLength: 20,
+  }
+);
+
+// Get the same shared state
+const layoutState = useAdaptiveLayoutState(props.instanceKey);
+
+// Access monitor properties safely
+const currentBreakpoint = computed(
+  () => layoutState.monitor.value?.currentBreakpoint.value ?? null
+);
+
+// Build breadcrumbs from the shared state
+const breadcrumbs = computed(() => {
+  // Get all views in order
+  const allViews = layoutState.views.value;
+
+  return allViews.map((view) => ({
+    id: view.id,
+    label: view.label || view.id,
+    isActive:
+      (view.location === "onscreen" &&
+        layoutState.overlayViews.value.length === 0) ||
+      view.location === "overlay",
+  }));
+});
+
+const isInitialized = computed(() => layoutState.initialized.value);
+
+const truncateLabel = (label: string): string => {
+  if (label.length <= props.maxLabelLength) return label;
+  return `${label.substring(0, props.maxLabelLength - 3)}...`;
+};
+
+const handleBreadcrumbClick = (crumb: {
+  id: string;
+  label: string;
+  isActive: boolean;
+}) => {
+  if (!isInitialized.value) {
+    console.warn("Layout not yet initialized");
+    return;
+  }
+  if (crumb.isActive) {
+    layoutState.methods.hide(crumb.id);
+  } else {
+    layoutState.methods.show(crumb.id);
+  }
+};
+</script>
+
+<template>
+  <!-- Tablet Navigation Breadcrumbs -->
+  <nav :class="$style.breadcrumbs">
+    <div v-if="!isInitialized" :class="$style.loading">Loading...</div>
+    <div
+      v-else
+      :class="[
+        {
+          [$style.breadcrumbListDesktop]: currentBreakpoint === 'desktop',
+          [$style.breadcrumbListTablet]: currentBreakpoint === 'tablet',
+          [$style.breadcrumbListMobile]: currentBreakpoint === 'mobile',
+        },
+      ]"
+    >
+      <template v-for="(crumb, index) in breadcrumbs" :key="crumb.id">
+        <button
+          :class="[$style.crumb, { [$style.active]: crumb.isActive }]"
+          @click="handleBreadcrumbClick(crumb)"
+          :title="showTooltip ? `Show ${crumb.label}` : undefined"
+        >
+          {{ truncateLabel(crumb.label) }}
+        </button>
+        <span v-if="index < breadcrumbs.length - 1" :class="$style.separator">
+          {{ separator }}
+        </span>
+      </template>
+    </div>
+  </nav>
+</template>
+
+<style module>
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  background: var(--background-1);
+  border-bottom: 1px solid var(--border-2);
+  font-size: 14px;
+  min-height: 40px;
+  width: 100%;
+}
+.loading {
+  color: #999;
+  font-size: 14px;
+}
+
+.breadcrumbListDesktop {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+
+.breadcrumbListTablet {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+}
+.breadcrumbListMobile {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.crumb {
+  padding: 4px 8px;
+  background: transparent;
+  border: none;
+  color: var(--text-1);
+  cursor: default;
+  font-size: 14px;
+  border-radius: 4px;
+  opacity: 0.5;
+  position: relative;
+  white-space: nowrap;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-variation-settings: "wght" var(--font-weight-regular);
+  transition: opacity 0.5s ease, transform 0.5s ease, color 0.5s ease,
+    font-variation-settings 0.3s ease;
+}
+
+.breadcrumbListMobile .crumb {
+  background: var(--control-2);
+  width: 100%;
+}
+
+.crumb:hover {
+  opacity: var(--slideover-breadcrumb-hover-opacity);
+  transform: scale(1.05);
+}
+
+.crumb:active {
+  transform: scale(0.98);
+}
+
+.crumb.active {
+  color: var(--text-1);
+  font-variation-settings: "wght" var(--font-weight-medium);
+  transform: scale(1.05);
+  opacity: 1;
+}
+
+.breadcrumbListMobile .crumb.active {
+  scale: 0.98;
+}
+
+.separator {
+  color: var(--border-1);
+  user-select: none;
+  padding: 0 2px;
+}
+
+.breadcrumbListMobile .separator {
+  display: none;
+}
+</style>

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

@@ -0,0 +1,149 @@
+<!-- AdaptiveLayoutMenuButton.vue -->
+<script setup lang="ts">
+import { computed, useCssModule } from "vue";
+import { useAdaptiveLayoutState } from "./useAdaptiveLayout";
+import { IconButton } from "@umbra-ui/core";
+import { MenuIcon } from "@umbra-ui/icons";
+
+// Props
+const props = withDefaults(
+  defineProps<{
+    instanceKey?: string | symbol; // Optional key for shared instances
+    isolated?: boolean; // Use completely isolated instance
+    showCount?: boolean; // Whether to show the count badge
+    customIcon?: {
+      open?: string;
+      closed?: string;
+    };
+  }>(),
+  {
+    isolated: false,
+    showCount: true,
+  }
+);
+
+const style = useCssModule();
+
+// Use shared or isolated state based on props
+const layoutState = props.isolated
+  ? useAdaptiveLayoutState(Symbol())
+  : useAdaptiveLayoutState(props.instanceKey);
+
+// Computed properties for menu button functionality
+const isOverlayOpen = computed(() => layoutState.overlayViews.value.length > 0);
+
+const hasOffscreenViews = computed(
+  () =>
+    layoutState.offScreenViewsLeading.value.length > 0 ||
+    layoutState.offScreenViewsTrailing.value.length > 0
+);
+
+const totalOffscreenCount = computed(
+  () =>
+    layoutState.offScreenViewsLeading.value.length +
+    layoutState.offScreenViewsTrailing.value.length
+);
+
+const isInitialized = computed(() => layoutState.initialized.value);
+
+// Toggle overlay visibility
+const toggleOverlay = () => {
+  if (!isInitialized.value) {
+    console.warn("Layout not yet initialized");
+    return;
+  }
+
+  if (isOverlayOpen.value) {
+    // Close overlay - hide all overlay views
+    layoutState.overlayViews.value.forEach((view) => {
+      layoutState.methods.hide(view.id);
+    });
+  } else {
+    // Show all offscreen views in overlay
+    const allOffscreenViews = [
+      ...layoutState.offScreenViewsLeading.value,
+      ...layoutState.offScreenViewsTrailing.value,
+    ];
+
+    // Show each offscreen view (this should move them to overlay based on your layout logic)
+    allOffscreenViews.forEach((view) => {
+      layoutState.methods.show(view.id);
+    });
+  }
+};
+
+const allViewsOnScreen = computed(() => {
+  return (
+    layoutState.onScreenViews.value.length === layoutState.views.value.length
+  );
+});
+</script>
+
+<template>
+  <div
+    :class="style.container"
+    :style="{
+      pointerEvents: allViewsOnScreen ? 'none' : 'auto',
+      opacity: allViewsOnScreen ? 0.3 : 1,
+    }"
+  >
+    <IconButton
+      iconName="menu"
+      buttonType="square"
+      buttonStyle="secondary"
+      size="18"
+      @click="toggleOverlay"
+      :disabled="!isInitialized"
+    />
+    <span
+      class="caption"
+      :style="{
+        transform: showCount && hasOffscreenViews ? 'scale(1)' : 'scale(0.25)',
+        opacity: showCount && hasOffscreenViews ? 1 : 0,
+      }"
+      :class="$style.toggleCount"
+    >
+      {{ totalOffscreenCount }}
+    </span>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  position: relative;
+  width: fit-content;
+}
+.toggleLeft {
+  left: 0;
+  border-radius: 0 8px 8px 0;
+}
+
+.toggleRight {
+  right: 0;
+  border-radius: 8px 0 0 8px;
+}
+
+.overlayToggle:hover {
+  background: #2d3748;
+}
+
+.toggleIcon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.toggleCount {
+  background: var(--error);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 12px;
+  min-width: 20px;
+  text-align: center;
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  transition: 0.3s ease-in-out transform, 0.3s ease-in-out opacity;
+}
+</style>