@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

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

@@ -1,158 +0,0 @@
-<template>
-  <div
-    v-if="visibleMenuItems.length"
-    class="vc-app-menu"
-  >
-    <VcContainer
-      :no-padding="true"
-      class="vc-app-menu__container"
-    >
-      <div class="vc-app-menu__items">
-        <template
-          v-for="item in visibleMenuItems"
-          :key="item.id ?? item.routeId ?? item.url ?? item.title"
-        >
-          <!-- Group items (have children) -->
-          <VcAppMenuGroup
-            v-if="item.children?.length"
-            :data-test-id="item.routeId"
-            :group-id="getGroupId(item)"
-            :icon="item.groupIcon || item.icon"
-            :title="item.title"
-            :children="accessibleChildren(item)"
-            :expanded="expanded"
-            :badge="item.badge"
-            :route-id="item.routeId"
-            @item:click="handleItemClick"
-          />
-
-          <!-- Standalone items -->
-          <template v-else>
-            <router-link
-              v-if="item.url"
-              :to="item.url"
-              custom
-            >
-              <VcAppMenuItem
-                :data-test-id="item.routeId"
-                :icon="item.groupIcon || item.icon"
-                :title="item.title"
-                :expanded="expanded"
-                :badge="item.badge"
-                :route-id="item.routeId"
-                :group-id="item.groupId"
-                :is-active="isItemActive(item.url)"
-                @click="handleItemClick(item)"
-              />
-            </router-link>
-
-            <VcAppMenuItem
-              v-else
-              :data-test-id="item.routeId"
-              :icon="item.groupIcon || item.icon"
-              :title="item.title"
-              :expanded="expanded"
-              :badge="item.badge"
-              :route-id="item.routeId"
-              :group-id="item.groupId"
-              :is-active="isItemActive(item.url)"
-              @click="handleItemClick(item)"
-            />
-          </template>
-        </template>
-      </div>
-    </VcContainer>
-  </div>
-</template>
-
-<script lang="ts" setup>
-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/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";
-
-export interface Props {
-  expanded?: boolean;
-}
-
-withDefaults(defineProps<Props>(), {
-  expanded: true,
-});
-
-const emit = defineEmits<{
-  (event: "item:click", item: MenuItem): void;
-}>();
-
-const route = useRoute();
-const { menuItems } = useMenuService();
-const { hasAccess } = usePermissions();
-
-const hasAccessToItem = (item: MenuItem): boolean => hasAccess(item.permissions);
-
-const accessibleChildren = (item: MenuItem): MenuItem[] => {
-  return (item.children ?? []).filter((child) => hasAccessToItem(child));
-};
-
-const visibleMenuItems = computed(() => {
-  // Progressive reveal: items appear as modules install and register them
-  return menuItems.value.filter((item) => {
-    if (!hasAccessToItem(item)) {
-      return false;
-    }
-
-    if (item.children?.length) {
-      return accessibleChildren(item).length > 0;
-    }
-
-    return true;
-  });
-});
-
-const getGroupId = (item: MenuItem): string => {
-  return item.groupId ?? String(item.id ?? item.routeId ?? item.title);
-};
-
-const handleItemClick = (item: MenuItem) => {
-  emit("item:click", item);
-};
-
-const isItemActive = (url?: string): boolean => {
-  if (!url) return false;
-  const path = stripTenantPrefix(route);
-  return path === url || path.startsWith(url + "/");
-};
-</script>
-
-<style lang="scss">
-:root {
-  --app-menu-background: var(--primary-50);
-  --app-menu-background-color: var(--app-bar-background, var(--neutrals-50));
-  --app-menu-version-color: var(--neutrals-400);
-
-  --app-menu-close-color: var(--app-menu-burger-color, var(--primary-500));
-  --app-menu-burger-color: var(--primary-500);
-
-  --app-backdrop-overlay: var(--overlay-bg);
-
-  --app-backdrop-shadow-color: var(--additional-950);
-  --app-backdrop-shadow:
-    0 -6px 6px var(--additional-50),
-    1px 1px 22px rgb(from var(--notification-dropdown-shadow-color) r g b / 7%);
-}
-
-.vc-app-menu {
-  @apply tw-h-full;
-
-  &__container {
-    @apply tw-grow tw-basis-0;
-  }
-
-  &__items {
-    @apply tw-gap-1 tw-flex tw-flex-col tw-h-full;
-  }
-}
-</style>

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

@@ -1,160 +0,0 @@
-<template>
-  <div class="vc-app-menu-group">
-    <!-- Group header -->
-    <VcAppMenuItem
-      :icon="icon"
-      :title="title"
-      :expanded="expanded"
-      :badge="badge"
-      :route-id="routeId"
-      :group-id="groupId"
-      @click="toggle"
-    >
-      <template #suffix>
-        <div
-          v-if="expanded"
-          class="vc-app-menu-group__chevron"
-        >
-          <VcIcon
-            :icon="isOpen ? 'lucide-chevron-up' : 'lucide-chevron-down'"
-            size="m"
-          />
-        </div>
-      </template>
-    </VcAppMenuItem>
-
-    <!-- Children -->
-    <div
-      v-show="isOpen"
-      class="vc-app-menu-group__children"
-      :class="{ 'vc-app-menu-group__children--collapsed': !expanded }"
-    >
-      <template
-        v-for="child in visibleChildren"
-        :key="child.routeId || child.url || child.id || child.title"
-      >
-        <VcTooltip>
-          <template
-            v-if="!expanded"
-            #tooltip
-          >
-            {{ $t(child.title) }}
-          </template>
-
-          <router-link
-            v-if="child.url"
-            :to="child.url"
-            custom
-          >
-            <VcAppMenuItem
-              :data-test-id="child.routeId"
-              :icon="child.icon"
-              :title="child.title"
-              :expanded="expanded"
-              :badge="child.badge"
-              :route-id="child.routeId"
-              :group-id="child.groupId"
-              :is-active="isChildActive(child.url)"
-              nested
-              @click="$emit('item:click', child)"
-            />
-          </router-link>
-
-          <VcAppMenuItem
-            v-else
-            :data-test-id="child.routeId"
-            :icon="child.icon"
-            :title="child.title"
-            :expanded="expanded"
-            :badge="child.badge"
-            :route-id="child.routeId"
-            :group-id="child.groupId"
-            :is-active="isChildActive(child.url)"
-            nested
-            @click="$emit('item:click', child)"
-          />
-        </VcTooltip>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, watchEffect } from "vue";
-import type { Component } from "vue";
-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/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";
-
-export interface Props {
-  groupId: string;
-  icon?: string | Component;
-  title?: string;
-  children?: MenuItem[];
-  expanded?: boolean;
-  badge?: MenuItemBadgeConfig;
-  routeId?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  children: () => [],
-});
-
-defineEmits<{
-  (event: "item:click", item: MenuItem): void;
-}>();
-
-const route = useRoute();
-const { hasAccess } = usePermissions();
-
-const storageKey = (() => {
-  if (typeof window === "undefined") {
-    return `vc_menu_${props.groupId}_open`;
-  }
-
-  const pathSegments = window.location.pathname.split("/").filter(Boolean);
-  const appName = pathSegments[0] || "default";
-  return `vc_menu_${appName}_${props.groupId}_open`;
-})();
-
-// Expand/collapse persisted to localStorage
-const isOpen = useLocalStorage(storageKey, false);
-
-const visibleChildren = computed(() => {
-  return (props.children ?? []).filter((child) => hasAccess(child.permissions));
-});
-
-const isChildActive = (url?: string): boolean => {
-  if (!url) return false;
-  const path = stripTenantPrefix(route);
-  return path === url || path.startsWith(url + "/");
-};
-
-// Auto-open if an accessible child route is active
-watchEffect(() => {
-  if (visibleChildren.value.some((child) => child.url && isChildActive(child.url))) {
-    isOpen.value = true;
-  }
-});
-
-const toggle = () => {
-  isOpen.value = !isOpen.value;
-};
-</script>
-
-<style lang="scss">
-.vc-app-menu-group {
-  &__chevron {
-    @apply tw-ml-3 tw-text-[color:var(--app-menu-item-icon-color)];
-  }
-
-  &__children {
-    @apply tw-gap-1 tw-mt-1 tw-flex tw-flex-col;
-  }
-}
-</style>

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

@@ -1,216 +0,0 @@
-<template>
-  <div
-    class="vc-app-menu-item"
-    @click="$emit('click')"
-  >
-    <VcTooltip>
-      <template
-        v-if="!expanded"
-        #tooltip
-      >
-        {{ $t(title ?? "") }}
-      </template>
-
-      <div
-        class="vc-app-menu-item__content"
-        :class="{
-          'vc-app-menu-item__content--active': isActive,
-          'vc-app-menu-item__content--nested': nested,
-          'vc-app-menu-item__content--collapsed': !expanded,
-        }"
-      >
-        <!-- Icon -->
-        <div
-          v-if="icon"
-          class="vc-app-menu-item__icon"
-        >
-          <VcIcon
-            class="vc-app-menu-item__icon-content"
-            :icon="icon"
-            size="m"
-          />
-        </div>
-
-        <!-- Letter abbreviation when collapsed and no icon -->
-        <div
-          v-else-if="!expanded"
-          class="vc-app-menu-item__letters"
-        >
-          {{ abbreviation }}
-        </div>
-
-        <!-- Title + badge (shown when expanded) -->
-        <Transition name="opacity">
-          <div
-            v-show="expanded"
-            class="vc-app-menu-item__title"
-          >
-            <span class="vc-app-menu-item__title-text">{{ $t(title ?? "") }}</span>
-            <VcBadge
-              v-if="resolvedBadge.isVisible"
-              :content="resolvedBadge.isDot ? undefined : resolvedBadge.content"
-              :variant="resolvedBadge.variant"
-              :is-dot="resolvedBadge.isDot"
-              size="s"
-              inline
-              class="vc-app-menu-item__badge"
-            />
-            <slot name="suffix" />
-          </div>
-        </Transition>
-      </div>
-    </VcTooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import type { Component } from "vue";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { VcBadge } from "@ui/components/atoms/vc-badge";
-import { useBadge } from "@ui/components/organisms/vc-app/_internal/menu/composables/useBadge";
-import type { MenuItemBadgeConfig } from "@core/types";
-
-export interface Props {
-  icon?: string | Component;
-  title?: string;
-  expanded?: boolean;
-  badge?: MenuItemBadgeConfig;
-  routeId?: string;
-  groupId?: string;
-  isActive?: boolean;
-  nested?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  expanded: true,
-  nested: false,
-  isActive: false,
-});
-
-defineEmits<{
-  (event: "click"): void;
-}>();
-
-defineSlots<{
-  suffix: () => unknown;
-}>();
-
-const resolvedBadge = useBadge(() => props.badge, () => props.routeId, () => props.groupId);
-
-const abbreviation = computed(() => {
-  return props.title
-    ?.split(" ")
-    .slice(0, 2)
-    .map((word) => word[0])
-    .join("");
-});
-</script>
-
-<style lang="scss">
-:root {
-  --app-menu-item-height: 38px;
-  --app-menu-item-icon-width: 16px;
-  --app-menu-item-icon-width-container: 23px;
-  --app-menu-item-icon-color: var(--neutrals-600);
-  --app-menu-item-icon-color-active: var(--primary-700);
-  --app-menu-item-background-color-hover: var(--neutrals-100);
-  --app-menu-item-background-color-active: var(--primary-100);
-  --app-menu-item-hover-radius: 6px;
-  --app-menu-item-title-color: var(--neutrals-600);
-  --app-menu-item-title-color-active: var(--primary-700);
-
-  --app-menu-item-active-text: var(--neutrals-950);
-  --app-menu-item-active-icon: var(--neutrals-950);
-}
-
-.vc-app-menu-item {
-  @apply tw-cursor-pointer tw-w-full;
-  @apply tw-transition-transform tw-duration-[0] tw-ease-in-out #{!important};
-
-  &:hover .vc-app-menu-item__content:not(.vc-app-menu-item__content--active) {
-    @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
-
-    .vc-app-menu-item__title {
-      @apply tw-text-[color:var(--app-menu-item-title-color-active)];
-    }
-
-    .vc-app-menu-item__icon {
-      @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-    }
-  }
-
-  &__content {
-    @apply tw-flex tw-items-center tw-w-full tw-h-[var(--app-menu-item-height)]
-      tw-border-none tw-flex-nowrap tw-box-border tw-cursor-pointer tw-relative
-      tw-uppercase tw-select-none tw-px-2 tw-gap-4;
-
-    &--active {
-      @apply tw-bg-[color:var(--app-menu-item-background-color-active)] tw-rounded;
-
-      .vc-app-menu-item__icon {
-        @apply tw-text-[color:var(--app-menu-item-icon-color-active)];
-      }
-
-      .vc-app-menu-item__title {
-        @apply tw-text-[color:var(--app-menu-item-title-color-active)] #{!important};
-      }
-    }
-
-    &--nested {
-      @apply tw-pl-7 tw-gap-5;
-
-      &.vc-app-menu-item__content--collapsed {
-        @apply tw-pl-2;
-      }
-
-      &.vc-app-menu-item__content--active {
-        @apply tw-font-medium;
-      }
-    }
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--app-menu-item-icon-color)]
-      tw-overflow-hidden tw-flex tw-justify-center tw-shrink-0
-      tw-transition-[color] tw-duration-200
-      tw-w-[var(--app-menu-item-icon-width-container)];
-  }
-
-  &__icon-content {
-    @apply tw-text-center;
-  }
-
-  &__letters {
-    @apply tw-shrink-0 tw-w-[24px] tw-h-[24px] tw-rounded-full
-      tw-flex tw-items-center tw-justify-center
-      tw-text-xxs tw-leading-[10px] tw-font-extrabold
-      tw-text-neutrals-500 tw-border-[2px] tw-border-neutrals-500;
-  }
-
-  &__title {
-    @apply tw-text-[color:var(--app-menu-item-title-color)] tw-truncate
-      tw-text-sm tw-font-normal tw-leading-normal tw-normal-case
-      [transition:color_0.2s_ease]
-      tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
-  }
-
-  &__title-text {
-    @apply tw-truncate;
-  }
-
-  &__badge {
-    @apply tw-shrink-0 tw-ml-auto;
-  }
-}
-
-.opacity-enter-active,
-.opacity-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.opacity-enter-from,
-.opacity-leave-to {
-  opacity: 0;
-}
-</style>

package/ui/components/organisms/vc-app/_internal/menu/composables/useBadge.ts

@@ -1,82 +0,0 @@
-import { computed, unref, isRef, toValue, type ComputedRef, type MaybeRefOrGetter, type Ref } from "vue";
-import type { MenuItemBadgeConfig, MenuItemBadge } from "@core/types";
-import { useMenuService } from "@core/composables/useMenuService";
-
-export interface ResolvedBadge {
-  content: string | number | undefined;
-  variant: "primary" | "success" | "warning" | "danger" | "info" | "secondary";
-  isDot: boolean;
-  isVisible: boolean;
-}
-
-/**
- * Composable to resolve badge configuration for menu items.
- * Supports direct badge config, routeId lookup, or groupId lookup.
- *
- * @param badgeConfig - Direct badge configuration (takes priority). Accepts a reactive getter.
- * @param routeId - Route ID to lookup badge from registry. Accepts a reactive getter.
- * @param groupId - Group ID to lookup badge from registry. Accepts a reactive getter.
- */
-export function useBadge(
-  badgeConfig: MaybeRefOrGetter<MenuItemBadgeConfig | undefined>,
-  routeId?: MaybeRefOrGetter<string | undefined>,
-  groupId?: MaybeRefOrGetter<string | undefined>,
-): ComputedRef<ResolvedBadge> {
-  const { menuBadges } = useMenuService();
-
-  return computed(() => {
-    // Priority: direct badge config > badge from registry by routeId > badge from registry by groupId
-    let config: MenuItemBadgeConfig | undefined = toValue(badgeConfig);
-    const resolvedRouteId = toValue(routeId);
-    const resolvedGroupId = toValue(groupId);
-    if (!config && resolvedRouteId) {
-      config = menuBadges.value.get(resolvedRouteId);
-    }
-    if (!config && resolvedGroupId) {
-      config = menuBadges.value.get(resolvedGroupId);
-    }
-
-    if (!config) {
-      return { content: undefined, variant: "primary", isDot: false, isVisible: false };
-    }
-
-    // Normalize shorthand to full config object
-    let badge: MenuItemBadge;
-    if (typeof config === "object" && !isRef(config) && "content" in config) {
-      badge = config as MenuItemBadge;
-    } else {
-      badge = { content: config as MenuItemBadge["content"] };
-    }
-
-    // Resolve reactive content
-    let rawContent: string | number | undefined = undefined;
-    if (typeof badge.content === "function") {
-      rawContent = badge.content();
-    } else if (isRef(badge.content)) {
-      rawContent = unref(badge.content as Ref<string | number | undefined>);
-    } else {
-      rawContent = badge.content;
-    }
-
-    // Truncate values > 99
-    let displayContent: string | number | undefined = rawContent;
-    if (typeof rawContent === "number" && rawContent > 99) {
-      displayContent = "99+";
-    } else if (typeof rawContent === "string") {
-      const numValue = parseInt(rawContent, 10);
-      if (!isNaN(numValue) && numValue > 99) {
-        displayContent = "99+";
-      }
-    }
-
-    const isDot = badge.isDot ?? false;
-    const isVisible = isDot || (displayContent != null && displayContent !== "" && displayContent !== 0);
-
-    return {
-      content: displayContent,
-      variant: badge.variant ?? "primary",
-      isDot,
-      isVisible,
-    };
-  });
-}

package/ui/components/organisms/vc-app/_internal/menu/composables/useMenuActiveState.ts

@@ -1,41 +0,0 @@
-import { computed } from "vue";
-import type { MaybeRefOrGetter } from "vue";
-import { toValue } from "vue";
-import { useRoute } from "vue-router";
-import type { RouteLocationNormalizedLoaded } from "vue-router";
-
-/**
- * Strip the tenant prefix from a route path for comparison with menu URLs.
- * Route paths may include a tenant prefix (e.g., "/583818f7.../products")
- * while menu item URLs don't (e.g., "/products").
- */
-export function stripTenantPrefix(route: RouteLocationNormalizedLoaded): string {
-  const firstParam = Object.values(route.params)?.[0];
-  const tenant = typeof firstParam === "string" ? firstParam : "";
-  if (tenant && route.path.startsWith(`/${tenant}/`)) {
-    return route.path.slice(tenant.length + 1);
-  }
-  if (tenant && route.path === `/${tenant}`) {
-    return "/";
-  }
-  return route.path;
-}
-
-/**
- * Reactive route-based active detection for menu items.
- *
- * Uses `computed` over `route.path` so it stays reactive when the route changes.
- * Supports exact match and prefix match (e.g., `/products` matches `/products/edit/123`).
- */
-export function useMenuActiveState(url: MaybeRefOrGetter<string | undefined>) {
-  const route = useRoute();
-
-  const isActive = computed(() => {
-    const urlValue = toValue(url);
-    if (!urlValue) return false;
-    const path = stripTenantPrefix(route);
-    return path === urlValue || path.startsWith(urlValue + "/");
-  });
-
-  return { isActive };
-}

package/ui/components/organisms/vc-app/_internal/sidebar/SidebarCollapseButton.vue

@@ -1,47 +0,0 @@
-<template>
-  <div
-    class="sidebar-collapse-button"
-    @click="$emit('click')"
-  >
-    <div class="sidebar-collapse-button__wrap">
-      <VcIcon
-        class="sidebar-collapse-button__icon"
-        :icon="collapsed ? 'lucide-chevron-right' : 'lucide-chevron-left'"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-
-defineProps<{
-  collapsed?: boolean;
-}>();
-
-defineEmits<{
-  (event: "click"): void;
-}>();
-</script>
-
-<style lang="scss">
-.sidebar-collapse-button {
-  @apply tw-absolute tw-right-[-13px] tw-top-[50%] tw-translate-y-[-50%]
-    tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-z-[12];
-  width: var(--app-bar-collapse-button-width);
-  height: var(--app-bar-collapse-button-height);
-  border-radius: var(--app-bar-collapse-button-border-radius);
-  background-color: var(--app-bar-background);
-  border: 1px solid var(--app-bar-border);
-  opacity: 0;
-  transition: opacity var(--app-bar-hover-transition-duration) var(--app-bar-hover-transition-timing-function);
-
-  &__wrap {
-    @apply tw-flex tw-items-center tw-justify-center;
-  }
-
-  &__icon {
-    color: var(--app-bar-button);
-  }
-}
-</style>