@vc-shell/framework 1.1.68 → 1.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.1.68",
+  "version": "1.1.70",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -58,7 +58,7 @@
     "@tiptap/vue-3": "^2.25.0",
     "@vee-validate/i18n": "^4.12.4",
     "@vee-validate/rules": "^4.12.4",
-    "@vuepic/vue-datepicker": "^9.0.2",
+    "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/components": "^10.7.1",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
@@ -85,9 +85,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "^1.1.68",
-    "@vc-shell/config-generator": "^1.1.68",
-    "@vc-shell/ts-config": "^1.1.68",
+    "@vc-shell/api-client-generator": "^1.1.70",
+    "@vc-shell/config-generator": "^1.1.70",
+    "@vc-shell/ts-config": "^1.1.70",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",

package/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -6,8 +6,10 @@
     @contextmenu.prevent
   >
     <GenericDropdown
+      :opened="true"
       :items="appsList"
       :is-item-active="(item) => locationHandler(item.relativeUrl ?? '')"
+      max-height="auto"
       @item-click="switchApp"
     >
       <template #item="{ item }">
@@ -67,7 +69,7 @@ const switchApp = (app: AppDescriptor) => {
 }
 
 .vc-app-switcher {
-  @apply tw-relative tw-flex tw-shrink-0;
+  @apply tw-relative tw-flex tw-shrink-0 tw-h-full;
 
   &__item {
     @apply tw-flex tw-items-center tw-w-full tw-p-3 tw-w-full;

package/shared/components/generic-dropdown/generic-dropdown.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="vc-dropdown">
     <div
+      v-if="$slots.trigger"
       ref="referenceEl"
       class="vc-dropdown__trigger"
     >
@@ -11,7 +12,8 @@
     </div>
 
     <teleport
-      to="body"
+      to=".vc-app"
+      defer
       :disabled="!floating"
     >
       <div
@@ -25,10 +27,7 @@
         }"
         :class="dropdownClasses"
       >
-        <div
-          class="vc-dropdown__content"
-          @click.stop
-        >
+        <div class="vc-dropdown__content">
           <slot
             name="items-container"
             :items="items"
@@ -95,7 +94,7 @@ export interface Props<T> {
 }
 
 const props = withDefaults(defineProps<Props<T>>(), {
-  opened: true,
+  opened: false,
   items: () => [],
   floating: false,
   placement: "bottom",
@@ -119,17 +118,23 @@ defineSlots<{
   "items-container"?: (args: { items: T[]; close: () => void }) => any;
 }>();
 
-const isMobile = inject("isMobile") as Ref<boolean>;
+const isMobile = inject<Ref<boolean>>("isMobile", ref(false));
 
 const referenceEl = ref<HTMLElement | null>(null);
 const floatingEl = ref<HTMLElement | null>(null);
 
-const floater = useFloating(referenceEl, floatingEl, {
+const { floatingStyles, placement, update, x, y } = useFloating(referenceEl, floatingEl, {
   placement: props.placement,
-  whileElementsMounted: autoUpdate,
+  whileElementsMounted: props.floating ? autoUpdate : undefined,
   middleware: [shift({ padding: 8 }), flip({ padding: 8 }), floatingOffset(props.offset)],
 });
 
+const floater = {
+  placement,
+  x,
+  y,
+};
+
 const dropdownClasses = computed(() => {
   const placement = floater.placement.value;
   return [
@@ -181,7 +186,7 @@ const calcHeight = computed(() => {
   }
 
   &__dropdown {
-    @apply tw-rounded-[6px] tw-w-full tw-overflow-auto tw-flex tw-flex-col tw-relative tw-h-max;
+    @apply tw-rounded-[6px] tw-w-full tw-overflow-auto tw-flex tw-flex-col tw-relative tw-h-full;
 
     &--mobile {
       @apply tw-w-full;

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -1,5 +1,6 @@
 <template>
   <GenericDropdown
+    opened
     :items="notifications"
     :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
   >

package/shared/components/sidebar/sidebar.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport
-    to="body"
+     to=".vc-app" defer
     :disabled="$isDesktop.value"
   >
     <template v-if="isExpanded">

package/ui/components/atoms/vc-tooltip/vc-tooltip.vue

@@ -12,7 +12,7 @@
       <slot></slot>
     </div>
 
-    <teleport to="body">
+    <teleport  to=".vc-app" defer>
       <span
         v-if="tooltipVisible && $slots['tooltip']"
         ref="tooltipRef"

package/ui/components/molecules/vc-input/vc-input.vue

@@ -772,6 +772,12 @@ function handleFocus() {
   & > div {
     @apply tw-w-full tw-h-full tw-flex tw-items-center;
   }
+
+  .vc-app_mobile & {
+    & > div {
+      @apply tw-w-auto tw-h-auto tw-flex-auto tw-items-center;
+    }
+  }
 }
 
 .dp__pm_am_button {
@@ -790,6 +796,8 @@ function handleFocus() {
 .dp__input {
   @apply tw-font-jakarta #{!important};
 
+  --dp-input-padding: 6px 12px 6px 12px;
+
   &::-ms-reveal,
   &::-ms-clear {
     @apply tw-hidden;

package/ui/components/molecules/vc-multivalue/vc-multivalue.vue

@@ -76,7 +76,7 @@
               @click.stop="toggleDropdown"
               >{{ $t("COMPONENTS.MOLECULES.VC_MULTIVALUE.ADD") }}</VcButton
             >
-            <teleport to="body">
+            <teleport  to=".vc-app" defer>
               <div
                 v-if="isOpened"
                 ref="dropdownRef"

package/ui/components/molecules/vc-select/vc-select.vue

@@ -236,7 +236,7 @@
         </slot>
       </div>
 
-      <teleport to="body">
+      <teleport  to=".vc-app" defer>
         <div
           v-if="isOpened"
           ref="dropdownRef"

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

@@ -1,15 +1,15 @@
 <template>
   <div
     class="app-bar-content"
-    :class="{ 'app-bar-content--collapsed': !expanded, 'app-bar-content--embedded': isEmbedded }"
+    :class="{
+      'app-bar-content--collapsed': !expanded,
+      // 'app-bar-content--embedded': isEmbedded
+    }"
   >
     <div class="app-bar-content__main">
       <slot name="navmenu" />
     </div>
-    <div
-      v-if="!isEmbedded"
-      class="app-bar-content__footer"
-    >
+    <div class="app-bar-content__footer">
       <slot name="user-dropdown" />
     </div>
   </div>

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

@@ -34,10 +34,7 @@
       v-if="$isMobile.value"
       class="app-bar-header__actions"
     >
-      <slot
-        v-if="$isMobile.value"
-        name="actions"
-      />
+      <slot name="actions" />
     </div>
 
     <Transition
@@ -93,10 +90,10 @@ const isMobile = inject("isMobile") as Ref<boolean>;
 const isDesktop = inject("isDesktop") as Ref<boolean>;
 
 const showAppBar = computed(() => {
-  if (isEmbedded) {
-    return false;
-  }
-  return (isMobile.value && blades.value.length <= 1) || isDesktop.value;
+  // if (isEmbedded) {
+  //   return false;
+  // }
+  return (isMobile.value && blades.value.length <= 1) || (isDesktop.value && !isEmbedded);
 });
 
 watchEffect(

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

@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport  to=".vc-app" defer>
     <div
       class="app-bar-overlay"
       :class="{

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,
+        onItemClick: 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;
+}