@vc-shell/framework 1.1.69 → 1.1.71

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarSlots.vue

@@ -0,0 +1,118 @@
+<template>
+  <!-- Desktop version -->
+  <template v-if="isDesktop && !isMenuOpen">
+    <AppBarContent :expanded="isExpanded">
+      <template #navmenu>
+        <component
+          :is="slots.navmenu"
+          v-if="slots.navmenu"
+        />
+      </template>
+      <template #user-dropdown>
+        <component
+          :is="slots.userDropdown"
+          v-if="slots.userDropdown"
+        />
+      </template>
+    </AppBarContent>
+  </template>
+
+  <!-- Menu sidebar (both desktop and mobile) -->
+  <MenuSidebar
+    v-if="isMenuOpen"
+    :is-opened="isMenuOpen"
+    :expanded="isExpanded"
+    @update:is-opened="closeMenu"
+  >
+    <template #navmenu>
+      <component
+        :is="slots.navmenu"
+        v-if="slots.navmenu"
+      />
+    </template>
+    <template #user-dropdown>
+      <component
+        :is="slots.userDropdown"
+        v-if="slots.userDropdown"
+      />
+    </template>
+    <template #app-switcher>
+      <component
+        :is="slots.appSwitcher"
+        v-if="slots.appSwitcher"
+      />
+    </template>
+    <template #widgets>
+      <AppBarWidgetsMenu />
+    </template>
+    <template #widgets-active-content>
+      <AppBarWidgetContent />
+    </template>
+  </MenuSidebar>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, h, defineComponent } from "vue";
+import { useAppMenuState } from "../../composables/useAppMenuState";
+import { useAppSlots } from "../../../composables/useAppSlots";
+import { useAppBarWidgets } from "../composables/useAppBarWidgets";
+import AppBarContent from "./AppBarContent.vue";
+import MenuSidebar from "./MenuSidebar.vue";
+import AppBarWidgetsMenu from "./AppBarWidgetsMenu.vue";
+
+// Create AppBarWidgetContent component inline
+
+const AppBarWidgetContent = defineComponent({
+  setup() {
+    const { currentWidget, hideAllWidgets, isAnyWidgetVisible } = useAppBarWidgets();
+    const isMobile = inject("isMobile", ref(false));
+
+    return () => {
+      if (!isAnyWidgetVisible.value || !currentWidget.value?.component) return null;
+
+      return h(
+        "div",
+        {
+          class: [
+            "app-bar-widget-content",
+            {
+              "app-bar-widget-content--mobile": isMobile.value,
+            },
+          ],
+        },
+        [
+          h(currentWidget.value.component, {
+            ...currentWidget.value.props,
+            onClose: hideAllWidgets,
+          }),
+        ],
+      );
+    };
+  },
+});
+
+const { state, closeAll } = useAppMenuState();
+const slots = useAppSlots();
+
+const isDesktop = inject("isDesktop", ref(true));
+
+const isExpanded = computed(() => state.value.isSidebarExpanded);
+const isMenuOpen = computed(() => state.value.isMenuOpen);
+
+const closeMenu = () => {
+  closeAll();
+};
+</script>
+
+<style lang="scss">
+.app-bar-slots {
+  @apply tw-h-full;
+}
+
+.app-bar-widget-content {
+  @apply tw-overflow-auto tw-max-h-[250px];
+  &--mobile {
+    // Mobile specific styles if needed
+  }
+}
+</style>

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/MenuSidebar.vue

@@ -11,11 +11,12 @@
       <div
         class="menu-sidebar__wrapper"
         :class="{
+          'menu-sidebar__wrapper--desktop': $isDesktop.value,
           'menu-sidebar__wrapper--expanded': $isDesktop.value && expanded,
-          'menu-sidebar__wrapper--collapsed': $isDesktop.value && !expanded,
         }"
       >
         <div
+          v-if="!isEmbedded"
           class="menu-sidebar__header"
           :class="{
             'menu-sidebar__header--mobile': $isMobile.value,
@@ -64,7 +65,8 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Sidebar } from "../../../../../../../shared/components/sidebar";
-import { MaybeRef } from "vue";
+import { MaybeRef, inject } from "vue";
+import { EMBEDDED_MODE } from "../../../../../../../injection-keys";
 
 defineProps<{
   isOpened: boolean;
@@ -82,24 +84,26 @@ defineSlots<{
   "widgets-active-content": (props: any) => any;
   widgets: (props: any) => any;
 }>();
+
+const isEmbedded = inject(EMBEDDED_MODE);
 </script>
 
 <style lang="scss">
 .menu-sidebar {
   &__wrapper {
-    @apply tw-absolute tw-top-0 tw-left-0 tw-w-full  tw-bottom-0 tw-z-10 tw-flex tw-flex-col;
+    @apply tw-absolute tw-top-0 tw-left-0 tw-w-full tw-bottom-0 tw-z-10 tw-flex tw-flex-col;
 
-    &--expanded {
-      @apply tw-absolute tw-top-0 tw-left-0;
+    &--desktop {
+      @apply tw-w-[var(--app-bar-width)] tw-z-[12];
     }
 
-    &--collapsed {
-      @apply tw-w-[var(--app-bar-width)] tw-z-[12];
+    &--expanded {
+      @apply tw-absolute tw-top-0 tw-left-0;
     }
   }
 
   &__content {
-    @apply tw-flex tw-flex-col tw-h-full tw-bg-[var(--app-bar-background)] tw-flex-1 tw-relative;
+    @apply tw-flex tw-flex-col tw-h-[calc(100vh-var(--app-bar-height))] tw-bg-[var(--app-bar-background)] tw-flex-1 tw-relative;
 
     &:before {
       content: "";

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -37,8 +37,6 @@
           'vc-app-bar__wrapper--mobile': $isMobile.value,
           'vc-app-bar__wrapper--hover-collapsed': $isDesktop.value && !isHoverExpanded && !state.isSidebarExpanded,
         }"
-        @mouseenter="collapseButtonHover = true"
-        @mouseleave="collapseButtonHover = false"
       >
         <AppBarHeader
           :logo="logo"
@@ -59,49 +57,7 @@
           </template>
         </AppBarHeader>
 
-        <MenuSidebar
-          v-if="state.isMenuOpen"
-          :is-opened="state.isMenuOpen"
-          :expanded="state.isSidebarExpanded"
-          @update:is-opened="handleMenuClose"
-        >
-          <template #navmenu>
-            <slot name="navmenu" />
-          </template>
-          <template #user-dropdown>
-            <slot name="user-dropdown" />
-          </template>
-          <template #app-switcher>
-            <slot name="app-switcher" />
-          </template>
-          <template #widgets>
-            <AppBarWidgetsMenu />
-          </template>
-          <template #widgets-active-content>
-            <div
-              v-if="isAnyWidgetVisible"
-              :class="['vc-app-bar__menu-dropdowns', { 'vc-app-bar__menu-dropdowns--mobile': $isMobile.value }]"
-            >
-              <component
-                :is="currentWidget?.component"
-                v-bind="currentWidget?.props || {}"
-                @close="hideAllWidgets"
-              />
-            </div>
-          </template>
-        </MenuSidebar>
-
-        <AppBarContent
-          v-if="$isDesktop.value"
-          :expanded="state.isSidebarExpanded"
-        >
-          <template #navmenu>
-            <slot name="navmenu" />
-          </template>
-          <template #user-dropdown>
-            <slot name="user-dropdown" />
-          </template>
-        </AppBarContent>
+        <AppBarSlots />
       </div>
     </div>
   </div>
@@ -110,12 +66,9 @@
 <script lang="ts" setup>
 import { VcIcon } from "../../../../";
 import { useAppMenuState } from "../composables/useAppMenuState";
-import { useAppBarWidgets } from "./composables/useAppBarWidgets";
 import AppBarHeader from "./_internal/AppBarHeader.vue";
 import AppBarMobileActions from "./_internal/AppBarMobileActions.vue";
-import MenuSidebar from "./_internal/MenuSidebar.vue";
-import AppBarContent from "./_internal/AppBarContent.vue";
-import AppBarWidgetsMenu from "./_internal/AppBarWidgetsMenu.vue";
+import AppBarSlots from "./_internal/AppBarSlots.vue";
 import { ref, computed, provide, inject } from "vue";
 
 export interface Props {
@@ -139,38 +92,14 @@ defineProps<Props>();
 defineEmits<Emits>();
 defineSlots<Slots>();
 
-const {
-  state,
-  toggleSidebar,
-  toggleMenu: toggleMenuState,
-  closeAll,
-  toggleHoverExpanded,
-  isHoverExpanded,
-} = useAppMenuState();
-
-const { currentWidget, hideAllWidgets, isAnyWidgetVisible } = useAppBarWidgets();
+const { state, toggleSidebar, toggleMenu, closeAll, toggleHoverExpanded, isHoverExpanded } = useAppMenuState();
 
 const isMobile = inject("isMobile", ref(false));
 const isDesktop = inject("isDesktop", ref(true));
-const collapseButtonHover = ref(false);
 
 // Provide appMenuState for child components
 provide("appMenuState", { closeAll });
 
-const toggleMenu = () => {
-  toggleMenuState();
-  if (!state.value.isMenuOpen) {
-    hideAllWidgets();
-  }
-};
-
-const handleMenuClose = (value: boolean) => {
-  if (!value) {
-    closeAll();
-    hideAllWidgets();
-  }
-};
-
 // Simple hover effect processing
 const handleHoverExpand = (shouldExpand?: boolean) => {
   toggleHoverExpanded(shouldExpand);

package/ui/components/organisms/vc-app/composables/useAppSlots.ts

@@ -0,0 +1,75 @@
+import { inject, provide, InjectionKey, Slots, VNode, h, Ref } from "vue";
+import VcAppMenu from "../_internal/vc-app-menu/vc-app-menu.vue";
+import { UserDropdownButton } from "../../../../../shared/components";
+import { components } from "../../../../../shared/components/app-switcher";
+import { AppDescriptor } from "../../../../../core/api/platform";
+import { EMBEDDED_MODE } from "../../../../../injection-keys";
+
+export interface AppSlots {
+  navmenu?: () => VNode | VNode[];
+  userDropdown?: () => VNode | VNode[];
+  appSwitcher?: () => VNode | VNode[];
+}
+
+const APP_SLOTS_KEY: InjectionKey<AppSlots> = Symbol("app-slots");
+
+/**
+ * Provide app slots to child components
+ */
+export function provideAppSlots(
+  slots: Slots,
+  props: {
+    disableMenu?: boolean;
+    disableAppSwitcher?: boolean;
+    version?: string;
+    avatar?: string;
+    name?: string;
+    role?: string;
+    appsList?: Ref<AppDescriptor[]>;
+    isEmbedded?: boolean;
+  },
+  handlers: {
+    onMenuItemClick?: (item: any) => void;
+    switchApp?: (event: any) => void;
+  },
+) {
+
+  const appSlots: AppSlots = {
+    navmenu: () => {
+      if (props.disableMenu) return [];
+      return h(VcAppMenu, {
+        version: props.version,
+        "onItem:click": handlers.onMenuItemClick,
+      });
+    },
+    userDropdown: () => {
+      if (props.isEmbedded) return [];
+      return h(UserDropdownButton, {
+        avatarUrl: props.avatar,
+        name: props.name,
+        role: props.role,
+      });
+    },
+    appSwitcher: () => {
+      if (props.disableAppSwitcher) return [];
+      return (
+        slots["app-switcher"]?.() ||
+        h(components.VcAppSwitcher, {
+          appsList: props.appsList?.value ?? [],
+          onClick: handlers.switchApp,
+        })
+      );
+    },
+  };
+
+  provide(APP_SLOTS_KEY, appSlots);
+  return appSlots;
+}
+
+/**
+ * Inject app slots in child components
+ */
+export function useAppSlots() {
+  const slots = inject(APP_SLOTS_KEY, {});
+  return slots;
+}

package/ui/components/organisms/vc-app/vc-app.vue

@@ -22,38 +22,7 @@
         :disable-menu="disableMenu"
         @backlink:click="closeBlade(blades.length - 1)"
         @logo:click="openRoot"
-      >
-        <template
-          v-if="!disableAppSwitcher"
-          #app-switcher
-        >
-          <slot name="app-switcher">
-            <VcAppSwitcher
-              :apps-list="appsList"
-              @on-click="switchApp($event)"
-            />
-          </slot>
-        </template>
-
-        <template #navmenu>
-          <VcAppMenu
-            v-if="!disableMenu"
-            ref="menu"
-            class="vc-app__app-menu"
-            :version="version"
-            @item:click="onMenuItemClick"
-          >
-          </VcAppMenu>
-        </template>
-
-        <template #user-dropdown>
-          <UserDropdownButton
-            :avatar-url="avatar"
-            :name="name"
-            :role="role"
-          />
-        </template>
-      </VcAppBar>
+      />
 
       <!-- Blade navigation -->
       <div
@@ -70,12 +39,11 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { inject, provide, watch, ref, onUnmounted, computed } from "vue";
+import { inject, provide, watch, ref, onUnmounted, computed, useSlots } from "vue";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
-import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
+import { provideAppSlots } from "./composables/useAppSlots";
 import {
   VcPopupContainer,
-  UserDropdownButton,
   useBladeNavigation,
   NotificationDropdown,
   BladeRoutesRecord,
@@ -90,7 +58,6 @@ import { LanguageSelector } from "../../../../shared/components/language-selecto
 import { ThemeSelector } from "../../../../shared/components/theme-selector";
 import { ChangePasswordButton } from "../../../../shared/components/change-password-button";
 import { LogoutButton } from "../../../../shared/components/logout-button";
-import { useI18n } from "vue-i18n";
 import { provideGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 import { provideDashboardService } from "../../../../core/composables/useDashboard";
 import { DynamicModulesKey, EMBEDDED_MODE } from "../../../../injection-keys";
@@ -110,7 +77,7 @@ export interface Props {
   role?: string;
 }
 
-const emit = defineEmits<{
+defineEmits<{
   (e: "logo-click", goToRoot: () => void): void;
 }>();
 
@@ -123,6 +90,7 @@ defineSlots<{
 }>();
 
 const props = defineProps<Props>();
+const slots = useSlots();
 
 console.debug("vc-app: Init vc-app");
 
@@ -131,13 +99,16 @@ const dynamicModules = inject(DynamicModulesKey, undefined);
 
 const isAppReady = ref(props.isReady);
 
+const route = useRoute();
 const router = useRouter();
 
+const isEmbedded = route.query.EmbeddedMode === "true";
+
 const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
 const { appsList, switchApp, getApps } = useAppSwitcher();
 
-const { loadFromHistory, notifications, markAllAsRead } = useNotifications();
-const route = useRoute();
+const { loadFromHistory, notifications } = useNotifications();
+
 const { isAuthenticated } = useUserManagement();
 
 const routes = router.getRoutes();
@@ -149,8 +120,6 @@ const hasUnreadNotifications = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
 
-const { t } = useI18n({ useScope: "global" });
-
 const { register: registerMobileButton } = provideAppBarMobileButtonsService();
 
 registerMenuItem({
@@ -190,6 +159,7 @@ registerMobileButton({
   component: NotificationDropdown,
   icon: "lucide-bell",
   order: 10,
+  isVisible: !isEmbedded,
 });
 
 const onMenuItemClick = function (item: MenuItem) {
@@ -247,7 +217,25 @@ provide(DynamicModulesKey, dynamicModules);
 provideDashboardService();
 provideMenuService();
 provideGlobalSearch();
-provide(EMBEDDED_MODE, route.query.EmbeddedMode === "true");
+provide(EMBEDDED_MODE, isEmbedded);
+// Provide slots to child components with all necessary props and handlers
+provideAppSlots(
+  slots,
+  {
+    disableMenu: props.disableMenu,
+    disableAppSwitcher: props.disableAppSwitcher,
+    version: props.version,
+    avatar: props.avatar,
+    name: props.name,
+    role: props.role,
+    appsList: appsList,
+    isEmbedded,
+  },
+  {
+    onMenuItemClick,
+    switchApp,
+  },
+);
 
 onUnmounted(() => {
   isAppReady.value = false;

package/ui/components/organisms/vc-blade/_internal/vc-blade-header/vc-blade-header.vue

@@ -19,7 +19,7 @@
         @mouseenter="tooltipVisible = true"
         @mouseleave="tooltipVisible = false"
       >
-        <teleport to="body">
+        <teleport  to=".vc-app" defer>
           <span
             v-if="tooltipVisible"
             ref="tooltipRef"

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-row/vc-table-row.vue

@@ -43,7 +43,11 @@
       :key="`${(item && typeof item === 'object' && 'id' in item && item.id) || index}_${cell.id}`"
       class="vc-table-row__cell"
       :class="[cell.class, { 'vc-table-row__cell--fixed-width': !!cell.width }]"
-      :style="cell.width ? { maxWidth: cell.width, width: cell.width, flex: '0 1 auto', minWidth: '60px' } : { flex: '1 1 0', minWidth: '60px' }"
+      :style="
+        cell.width
+          ? { maxWidth: cell.width, width: cell.width, flex: '0 1 auto', minWidth: '60px' }
+          : { flex: '1 1 0', minWidth: '60px' }
+      "
     >
       <div class="vc-table-row__cell-content">
         <slot

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -48,7 +48,6 @@ export function useTableColumnResize(
     document.body.style.overflow = "hidden";
     document.body.style.userSelect = "none";
 
-
     // If resizing any column and there are flexible columns, fix all column widths
     if (headerRef.value) {
       const hasFlexibleColumns = internalColumns.value.some((col) => col.visible !== false && !col.width);

package/ui/components/organisms/vc-table/composables/useTableState.ts

@@ -55,11 +55,11 @@ export function useTableState(options: UseTableStateOptions) {
   function mergeColumns(storedCol: TableColPartial, predefinedCol: TableColPartial | undefined) {
     if (predefinedCol) {
       if (predefinedCol.predefined && !storedCol.predefined) {
-        return { 
-          ...predefinedCol, 
+        return {
+          ...predefinedCol,
           predefined: true,
           width: storedCol.width || predefinedCol.width,
-          visible: storedCol.visible !== undefined ? storedCol.visible : predefinedCol.visible
+          visible: storedCol.visible !== undefined ? storedCol.visible : predefinedCol.visible,
         };
       } else {
         return {
@@ -161,37 +161,38 @@ export function useTableState(options: UseTableStateOptions) {
         title: item.title || originalColumn?.title || "",
         width: item.width || originalColumn?.width,
       };
-      
+
       // Don't set any width for new columns - they'll take available space
       // The flexbox will handle the distribution
       if (!newCol.width) {
         // Keep it undefined to use flexbox
         newCol.width = undefined;
       }
-      
+
       internalColumns.value.push(newCol);
-      
+
       // When adding a new column, check if we need to adjust widths to prevent overflow
-      const visibleColumns = internalColumns.value.filter(col => col.visible !== false);
-      const hasFixedWidths = visibleColumns.some(col => col.width);
-      
+      const visibleColumns = internalColumns.value.filter((col) => col.visible !== false);
+      const hasFixedWidths = visibleColumns.some((col) => col.width);
+
       if (hasFixedWidths) {
         // Calculate total fixed width
         let totalFixedWidth = 0;
-        visibleColumns.forEach(col => {
-          if (col.width && typeof col.width === 'string') {
+        visibleColumns.forEach((col) => {
+          if (col.width && typeof col.width === "string") {
             const width = parseInt(col.width);
             if (!isNaN(width)) {
               totalFixedWidth += width;
             }
           }
         });
-        
+
         // If total fixed width is too large, remove fixed widths to allow flex distribution
-        if (totalFixedWidth > 800) { // Assuming a reasonable container width
-          internalColumns.value = internalColumns.value.map(col => ({
+        if (totalFixedWidth > 800) {
+          // Assuming a reasonable container width
+          internalColumns.value = internalColumns.value.map((col) => ({
             ...col,
-            width: undefined // Let flexbox handle it
+            width: undefined, // Let flexbox handle it
           }));
         }
       }
@@ -205,7 +206,7 @@ export function useTableState(options: UseTableStateOptions) {
             title: item.title || originalColumn?.title || x.title || "",
             width: item.width || originalColumn?.width || x.width,
           };
-          
+
           return updatedCol;
         }
         return x;