@vc-shell/framework 1.1.68 → 1.1.70

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;