@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

package/ui/components/organisms/vc-app/_internal/layouts/MobileLayout.vue

@@ -36,40 +36,151 @@
     @update:is-opened="!$event && sidebar.closeMenu()"
   >
     <template #navmenu>
-      <div class="mobile-layout__hub">
-        <AppHubContent
-          :apps-list="appsList"
-          :show-applications="!disableAppSwitcher"
-          mobile
-          @switch-app="handleSwitchApp"
-        >
-          <template
-            v-if="$slots['app-switcher'] && !disableAppSwitcher"
-            #applications="{ appsList: slotAppsList, switchApp: slotSwitchApp }"
+      <div
+        class="mobile-layout__navmenu"
+        :class="{ 'mobile-layout__navmenu--tabs': showTabs }"
+      >
+        <template v-if="showTabs">
+          <div
+            class="mobile-layout__tabs"
+            role="tablist"
           >
-            <slot
-              name="app-switcher"
-              :apps-list="slotAppsList"
-              :switch-app="slotSwitchApp"
+            <button
+              type="button"
+              class="mobile-layout__tab"
+              :class="{ 'mobile-layout__tab--active': activeIndex === MENU_TAB_INDEX }"
+              role="tab"
+              :aria-selected="activeIndex === MENU_TAB_INDEX"
+              aria-controls="mobile-layout-panel-menu"
+              @click="setActiveIndex(MENU_TAB_INDEX)"
+            >
+              <span class="mobile-layout__tab-label">
+                {{ $t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_MENU") }}
+              </span>
+            </button>
+
+            <button
+              type="button"
+              class="mobile-layout__tab"
+              :class="{ 'mobile-layout__tab--active': activeIndex === HUB_TAB_INDEX }"
+              role="tab"
+              :aria-selected="activeIndex === HUB_TAB_INDEX"
+              aria-controls="mobile-layout-panel-hub"
+              @click="setActiveIndex(HUB_TAB_INDEX)"
+            >
+              <span class="mobile-layout__tab-label">
+                {{ $t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.MOBILE_LAYOUT.TAB_HUB") }}
+                <span
+                  v-if="hasWidgetBadge"
+                  class="mobile-layout__tab-badge"
+                />
+              </span>
+            </button>
+
+            <span
+              class="mobile-layout__tab-indicator"
+              :style="indicatorStyle"
             />
-          </template>
-        </AppHubContent>
-      </div>
+          </div>
 
-      <div
-        v-if="!disableMenu"
-        class="mobile-layout__menu"
-      >
-        <slot
-          name="menu"
-          :expanded="true"
-          :on-item-click="handleMenuItemClick"
+          <div
+            ref="sliderViewportRef"
+            class="mobile-layout__slider-viewport"
+            @touchstart.passive="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend.passive="onTouchEnd"
+            @touchcancel.passive="onTouchEnd"
+          >
+            <div
+              class="mobile-layout__slider"
+              :style="sliderStyle"
+            >
+              <div
+                id="mobile-layout-panel-menu"
+                role="tabpanel"
+                class="mobile-layout__panel mobile-layout__panel--menu"
+              >
+                <VcScrollableContainer class="mobile-layout__menu-scroll">
+                  <slot
+                    name="menu"
+                    :expanded="true"
+                    :on-item-click="handleMenuItemClick"
+                  >
+                    <VcAppMenu
+                      :expanded="true"
+                      @item:click="handleMenuItemClick"
+                    />
+                  </slot>
+                </VcScrollableContainer>
+              </div>
+
+              <div
+                id="mobile-layout-panel-hub"
+                role="tabpanel"
+                class="mobile-layout__panel mobile-layout__panel--hub"
+              >
+                <AppHubContent
+                  :apps-list="props.appsList"
+                  :show-applications="!props.disableAppSwitcher"
+                  mobile
+                  @switch-app="handleSwitchApp"
+                >
+                  <template
+                    v-if="$slots['app-switcher'] && !props.disableAppSwitcher"
+                    #applications="{ appsList: slotAppsList, switchApp: slotSwitchApp }"
+                  >
+                    <slot
+                      name="app-switcher"
+                      :apps-list="slotAppsList"
+                      :switch-app="slotSwitchApp"
+                    />
+                  </template>
+                </AppHubContent>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div
+          v-else-if="props.disableMenu"
+          class="mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--hub"
         >
-          <VcAppMenu
-            :expanded="true"
-            @item:click="handleMenuItemClick"
-          />
-        </slot>
+          <AppHubContent
+            :apps-list="props.appsList"
+            :show-applications="!props.disableAppSwitcher"
+            mobile
+            @switch-app="handleSwitchApp"
+          >
+            <template
+              v-if="$slots['app-switcher'] && !props.disableAppSwitcher"
+              #applications="{ appsList: slotAppsList, switchApp: slotSwitchApp }"
+            >
+              <slot
+                name="app-switcher"
+                :apps-list="slotAppsList"
+                :switch-app="slotSwitchApp"
+              />
+            </template>
+          </AppHubContent>
+        </div>
+
+        <div
+          v-else
+          class="mobile-layout__panel mobile-layout__panel--single mobile-layout__panel--menu"
+        >
+          <VcScrollableContainer class="mobile-layout__menu-scroll">
+            <slot
+              name="menu"
+              :expanded="true"
+              :on-item-click="handleMenuItemClick"
+            >
+              <VcAppMenu
+                :expanded="true"
+                @item:click="handleMenuItemClick"
+              />
+            </slot>
+          </VcScrollableContainer>
+        </div>
       </div>
     </template>
     <template #user-dropdown>
@@ -92,17 +203,20 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, inject, watch } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import type { AppDescriptor } from "@core/api/platform";
 import type { MenuItem } from "@core/types";
 import { EmbeddedModeKey } from "@framework/injection-keys";
-import { useBladeNavigation, UserDropdownButton } from "@shared/components";
+import { useBladeNavigation } from "@shared/components/blade-navigation/composables";
+import { UserDropdownButton } from "@shared/components/user-dropdown-button";
 import { useSidebarState } from "@core/composables/useSidebarState";
+import { useAppBarWidget } from "@core/composables";
 import SidebarHeader from "@ui/components/organisms/vc-app/_internal/sidebar/SidebarHeader.vue";
 import AppBarMobileActions from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppBarMobileActions.vue";
 import MenuSidebar from "@ui/components/organisms/vc-app/_internal/app-bar/components/MenuSidebar.vue";
 import AppHubContent from "@ui/components/organisms/vc-app/_internal/app-bar/components/AppHubContent.vue";
 import VcAppMenu from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue";
+import { VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container";
 
 export interface Props {
   logo?: string;
@@ -115,7 +229,7 @@ export interface Props {
   appsList?: AppDescriptor[];
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   disableMenu: false,
   disableAppSwitcher: false,
   appsList: () => [],
@@ -136,6 +250,217 @@ defineSlots<{
 const sidebar = useSidebarState();
 const isEmbedded = inject(EmbeddedModeKey, false);
 const { blades, currentBladeNavigationData } = useBladeNavigation();
+const { items: widgetItems } = useAppBarWidget();
+
+const MENU_TAB_INDEX = 0;
+const HUB_TAB_INDEX = 1;
+const GESTURE_LOCK_THRESHOLD = 8;
+const SWIPE_DISTANCE_RATIO = 0.3;
+const SWIPE_VELOCITY_THRESHOLD = 0.3;
+const MAX_DRAG_RATIO = 1;
+const BOUNDARY_RESISTANCE_RATIO = 0.2;
+const SLIDER_TRANSITION = "transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+
+const hasWidgetBadge = computed(() =>
+  widgetItems.value.some((widget) => {
+    if (widget.badge === undefined) return false;
+    if (typeof widget.badge === "function") return widget.badge();
+    return !!widget.badge;
+  }),
+);
+
+const showHubTab = computed(
+  () => widgetItems.value.length > 0 || (!props.disableAppSwitcher && props.appsList.length > 0),
+);
+
+const showTabs = computed(() => showHubTab.value && !props.disableMenu);
+
+const activeIndex = ref(MENU_TAB_INDEX);
+const isDragging = ref(false);
+const dragOffsetX = ref(0);
+const sliderViewportRef = ref<HTMLElement | null>(null);
+const gestureState = ref<"idle" | "pending" | "horizontal" | "vertical">("idle");
+
+let touchStartX = 0;
+let touchStartY = 0;
+let lastTouchX = 0;
+let touchStartTime = 0;
+
+const sliderStyle = computed(() => {
+  const baseTranslate = activeIndex.value * -50;
+  const viewportWidth = sliderViewportRef.value?.clientWidth ?? 0;
+
+  if (isDragging.value && viewportWidth > 0) {
+    const dragTranslate = (dragOffsetX.value / viewportWidth) * 50;
+    return {
+      transform: `translateX(${baseTranslate + dragTranslate}%)`,
+      transition: "none",
+    };
+  }
+
+  return {
+    transform: `translateX(${baseTranslate}%)`,
+    transition: SLIDER_TRANSITION,
+  };
+});
+
+const indicatorStyle = computed(() => {
+  const viewportWidth = sliderViewportRef.value?.clientWidth ?? 0;
+  const dragProgress = isDragging.value && viewportWidth > 0 ? -dragOffsetX.value / viewportWidth : 0;
+  const progress = Math.max(0, Math.min(1, activeIndex.value + dragProgress));
+
+  return {
+    transform: `translateX(${progress * 100}%)`,
+    transition: isDragging.value ? "none" : SLIDER_TRANSITION,
+  };
+});
+
+function setActiveIndex(nextIndex: number) {
+  activeIndex.value = Math.max(MENU_TAB_INDEX, Math.min(HUB_TAB_INDEX, nextIndex));
+  resetDragState();
+}
+
+function resetDragState() {
+  dragOffsetX.value = 0;
+  isDragging.value = false;
+  gestureState.value = "idle";
+}
+
+function getRubberBandOffset(offset: number, dimension: number) {
+  const absoluteOffset = Math.abs(offset);
+  if (!absoluteOffset || !dimension) {
+    return 0;
+  }
+
+  const resistedOffset = (absoluteOffset * dimension) / (absoluteOffset + dimension);
+  return Math.sign(offset) * resistedOffset;
+}
+
+function getDragOffset(offset: number) {
+  const viewportWidth = sliderViewportRef.value?.clientWidth ?? 0;
+  if (!viewportWidth) {
+    return offset;
+  }
+
+  const isLeadingBoundary = activeIndex.value === MENU_TAB_INDEX && offset > 0;
+  const isTrailingBoundary = activeIndex.value === HUB_TAB_INDEX && offset < 0;
+
+  if (isLeadingBoundary || isTrailingBoundary) {
+    return getRubberBandOffset(offset, viewportWidth * BOUNDARY_RESISTANCE_RATIO);
+  }
+
+  const maxDragDistance = viewportWidth * MAX_DRAG_RATIO;
+  return Math.max(-maxDragDistance, Math.min(maxDragDistance, offset));
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (!showTabs.value || event.touches.length === 0) {
+    return;
+  }
+
+  const touch = event.touches[0];
+  touchStartX = touch.clientX;
+  touchStartY = touch.clientY;
+  lastTouchX = touch.clientX;
+  touchStartTime = Date.now();
+  dragOffsetX.value = 0;
+  isDragging.value = false;
+  gestureState.value = "pending";
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!showTabs.value || event.touches.length === 0 || gestureState.value === "idle") {
+    return;
+  }
+
+  const touch = event.touches[0];
+  const deltaX = touch.clientX - touchStartX;
+  const deltaY = touch.clientY - touchStartY;
+  const absDeltaX = Math.abs(deltaX);
+  const absDeltaY = Math.abs(deltaY);
+
+  if (gestureState.value === "pending") {
+    if (absDeltaX < GESTURE_LOCK_THRESHOLD && absDeltaY < GESTURE_LOCK_THRESHOLD) {
+      return;
+    }
+
+    if (absDeltaY > absDeltaX) {
+      gestureState.value = "vertical";
+      return;
+    }
+
+    gestureState.value = "horizontal";
+    isDragging.value = true;
+  }
+
+  if (gestureState.value !== "horizontal") {
+    return;
+  }
+
+  if (event.cancelable) {
+    event.preventDefault();
+  }
+
+  lastTouchX = touch.clientX;
+  dragOffsetX.value = getDragOffset(deltaX);
+}
+
+function onTouchEnd(event: TouchEvent) {
+  if (!showTabs.value) {
+    resetDragState();
+    return;
+  }
+
+  const touch = event.changedTouches[0];
+
+  if (gestureState.value !== "horizontal") {
+    resetDragState();
+    return;
+  }
+
+  const endX = touch?.clientX ?? lastTouchX;
+  const deltaX = endX - touchStartX;
+  const duration = Math.max(Date.now() - touchStartTime, 1);
+  const velocity = Math.abs(deltaX) / duration;
+  const viewportWidth = sliderViewportRef.value?.clientWidth ?? 0;
+  const distanceThreshold = viewportWidth * SWIPE_DISTANCE_RATIO;
+  const shouldSwitch = velocity > SWIPE_VELOCITY_THRESHOLD || Math.abs(deltaX) > distanceThreshold;
+
+  if (shouldSwitch) {
+    if (deltaX < 0) {
+      setActiveIndex(activeIndex.value + 1);
+      return;
+    }
+
+    if (deltaX > 0) {
+      setActiveIndex(activeIndex.value - 1);
+      return;
+    }
+  }
+
+  resetDragState();
+}
+
+watch(
+  () => sidebar.isMenuOpen.value,
+  (isOpen) => {
+    if (!isOpen) {
+      setActiveIndex(MENU_TAB_INDEX);
+    }
+  },
+);
+
+watch(showHubTab, (isVisible) => {
+  if (!isVisible) {
+    setActiveIndex(MENU_TAB_INDEX);
+  }
+});
+
+watch(showTabs, (isVisible) => {
+  if (!isVisible) {
+    setActiveIndex(MENU_TAB_INDEX);
+  }
+});
 
 const showHeader = computed(() => blades.value.length <= 1);
 
@@ -171,13 +496,92 @@ const handleSwitchApp = (app: AppDescriptor) => {
     background-color: var(--app-bar-background);
   }
 
-  &__hub {
-    @apply tw-py-2;
+  &__navmenu {
+    @apply tw-flex tw-flex-col tw-h-full tw-min-h-0;
+  }
+
+  &__tabs {
+    @apply tw-relative tw-flex tw-shrink-0;
+    border-bottom: 1px solid var(--app-bar-border);
+  }
+
+  &__tab {
+    @apply tw-flex-1 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-cursor-pointer tw-relative tw-border-0 tw-bg-transparent tw-z-[1];
+    color: var(--app-bar-button);
+    transition: color 0.15s ease;
+
+    &:hover {
+      color: var(--app-bar-button-hover);
+    }
+
+    &--active {
+      color: var(--app-bar-burger);
+    }
+  }
+
+  &__tab-label {
+    @apply tw-inline-flex tw-items-center tw-justify-center tw-gap-1;
+  }
+
+  &__tab-badge {
+    @apply tw-inline-block tw-w-1.5 tw-h-1.5 tw-rounded-full;
+    background-color: var(--danger-500, #ef4444);
+  }
+
+  &__tab-indicator {
+    @apply tw-absolute tw-bottom-0 tw-left-0 tw-h-0.5 tw-w-1/2 tw-pointer-events-none;
+    background-color: var(--app-bar-burger);
+  }
+
+  &__slider-viewport {
+    @apply tw-flex-1 tw-min-h-0 tw-overflow-hidden;
   }
 
-  &__menu {
-    @apply tw-mt-2 tw-pt-2 tw-border-t tw-border-solid;
-    border-color: var(--app-bar-border);
+  &__slider {
+    @apply tw-flex tw-h-full;
+    width: 200%;
+    will-change: transform;
+  }
+
+  &__menu-scroll {
+    @apply tw-h-full tw-min-h-0;
+
+    .vc-scrollable-container__viewport {
+      @apply tw-pt-2;
+      padding-left: var(--app-bar-padding);
+      padding-right: var(--app-bar-padding);
+    }
+
+    // Make nested containers transparent — VcScrollableContainer is the sole scroll owner
+    .vc-app-menu,
+    .vc-container {
+      @apply tw-h-auto tw-overflow-visible;
+    }
+
+    .vc-container__inner {
+      @apply tw-overflow-visible;
+    }
+  }
+
+  &__panel {
+    @apply tw-h-full tw-min-h-0 tw-min-w-0;
+    width: 50%;
+
+    &--single {
+      @apply tw-w-full;
+    }
+
+    &--hub {
+      @apply tw-py-2;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+      overscroll-behavior: contain;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
   }
 }
 </style>

package/ui/components/organisms/vc-app/_internal/menu/VcAppMenu.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref, defineComponent, h } from "vue";
+import { mount } from "@vue/test-utils";
+import VcAppMenu from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue";
+
+vi.mock("@core/composables", () => ({
+  useMenuService: () => ({
+    menuItems: ref([
+      { title: "Orders", priority: 1, routeId: "Orders", url: "/orders", id: undefined },
+    ]),
+  }),
+  usePermissions: () => ({
+    hasAccess: () => true,
+  }),
+}));
+
+vi.mock("vue-router", () => ({
+  useRoute: () => ({ path: "/orders", params: {}, query: {}, hash: "", name: "Orders", fullPath: "/orders", matched: [], meta: {}, redirectedFrom: undefined }),
+}));
+
+describe("VcAppMenu", () => {
+  it("renders item without explicit id using fallback key fields", () => {
+    const RouterLinkStub = defineComponent({
+      props: { to: { type: String, required: false } },
+      setup(_, { slots }) {
+        return () => h("div", slots.default?.());
+      },
+    });
+
+    const wrapper = mount(VcAppMenu, {
+      global: {
+        stubs: {
+          RouterLink: RouterLinkStub,
+          VcContainer: defineComponent({ setup(_, { slots }) { return () => h("div", slots.default?.()); } }),
+          VcAppMenuGroup: defineComponent({ setup() { return () => h("div"); } }),
+          VcAppMenuItem: defineComponent({ props: ["title"], setup(props) { return () => h("button", String(props.title)); } }),
+        },
+      },
+    });
+
+    expect(wrapper.text()).toContain("Orders");
+  });
+});

package/ui/components/organisms/vc-app/_internal/menu/VcAppMenu.vue

@@ -70,7 +70,7 @@ import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useMenuService, usePermissions } from "@core/composables";
 import type { MenuItem } from "@core/types";
-import { VcContainer } from "@ui/components";
+import { VcContainer } from "@ui/components/atoms/vc-container";
 import VcAppMenuGroup from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenuGroup.vue";
 import VcAppMenuItem from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenuItem.vue";
 import { stripTenantPrefix } from "@ui/components/organisms/vc-app/_internal/menu/composables/useMenuActiveState";
@@ -98,6 +98,7 @@ const accessibleChildren = (item: MenuItem): MenuItem[] => {
 };
 
 const visibleMenuItems = computed(() => {
+  // Progressive reveal: items appear as modules install and register them
   return menuItems.value.filter((item) => {
     if (!hasAccessToItem(item)) {
       return false;
@@ -135,8 +136,7 @@ const isItemActive = (url?: string): boolean => {
   --app-menu-close-color: var(--app-menu-burger-color, var(--primary-500));
   --app-menu-burger-color: var(--primary-500);
 
-  --app-backdrop-overlay-bg: var(--additional-50);
-  --app-backdrop-overlay: rgb(from var(--app-backdrop-overlay-bg) r g b / 75%);
+  --app-backdrop-overlay: var(--overlay-bg);
 
   --app-backdrop-shadow-color: var(--additional-950);
   --app-backdrop-shadow:

package/ui/components/organisms/vc-app/_internal/menu/VcAppMenuGroup.vue

@@ -86,7 +86,7 @@ import { useLocalStorage } from "@vueuse/core";
 import { useRoute } from "vue-router";
 import { usePermissions } from "@core/composables";
 import type { MenuItem, MenuItemBadgeConfig } from "@core/types";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 import VcAppMenuItem from "@ui/components/organisms/vc-app/_internal/menu/VcAppMenuItem.vue";
 import { stripTenantPrefix } from "@ui/components/organisms/vc-app/_internal/menu/composables/useMenuActiveState";