@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

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

@@ -40,10 +40,12 @@
           '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"
-          :expanded="state.isSidebarExpanded"
+          :expanded="state.isSidebarExpanded || isHoverExpanded"
           class="vc-app-bar__header"
           :class="{
             'vc-app-bar__header--hover-expanded': $isDesktop.value && isHoverExpanded && !state.isSidebarExpanded,
@@ -52,34 +54,20 @@
           @logo:click="$emit('logo:click')"
           @toggle-menu="toggleMenu"
         >
-          <template #notifications>
-            <slot name="notifications-dropdown" />
+          <template #actions>
+            <AppBarMobileActions
+              :is-sidebar-mode="state.isMenuOpen"
+              :expanded="state.isSidebarExpanded"
+            />
           </template>
         </AppBarHeader>
 
-        <Transition name="overlay">
-          <AppBarOverlay
-            v-if="shouldShowOverlay"
-            :is-sidebar-mode="state.isMenuOpen"
-            :expanded="state.isSidebarExpanded"
-          >
-            <component
-              :is="overlayContent"
-              v-bind="overlayProps"
-            />
-          </AppBarOverlay>
-        </Transition>
-
         <MenuSidebar
           v-if="state.isMenuOpen"
           :is-opened="state.isMenuOpen"
           :expanded="state.isSidebarExpanded"
           @update:is-opened="handleMenuClose"
         >
-          <template #toolbar>
-            <slot name="notifications-dropdown" />
-            <slot name="toolbar" />
-          </template>
           <template #navmenu>
             <slot name="navmenu" />
           </template>
@@ -89,14 +77,18 @@
           <template #app-switcher>
             <slot name="app-switcher" />
           </template>
-          <template #active-content>
+          <template #widgets>
+            <AppBarWidgetsMenu />
+          </template>
+          <template #widgets-active-content>
             <div
-              v-if="shouldShowInMenu"
+              v-if="isAnyWidgetVisible"
               :class="['vc-app-bar__menu-dropdowns', { 'vc-app-bar__menu-dropdowns--mobile': $isMobile.value }]"
             >
               <component
-                :is="overlayContent"
-                v-bind="overlayProps || {}"
+                :is="currentWidget?.component"
+                v-bind="currentWidget?.props || {}"
+                @close="hideAllWidgets"
               />
             </div>
           </template>
@@ -122,13 +114,13 @@
 import { VcIcon } from "../../../../";
 import { ChevronLeftIcon } from "../../../../atoms/vc-icon/icons";
 import { useAppMenuState } from "../composables/useAppMenuState";
-import { useAppBarOverlay } from "./composables/useAppBarOverlay";
+import { useAppBarWidgets } from "./composables/useAppBarWidgets";
 import AppBarHeader from "./_internal/AppBarHeader.vue";
-import AppBarOverlay from "./_internal/AppBarOverlay.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 { ref, computed, provide, inject } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 
 export interface Props {
   logo?: string;
@@ -142,14 +134,12 @@ export interface Emits {
 }
 
 interface Slots {
-  "notifications-dropdown": () => void;
-  toolbar: () => void;
   "app-switcher": () => void;
   navmenu: () => void;
   "user-dropdown": () => void;
 }
 
-const props = defineProps<Props>();
+defineProps<Props>();
 defineEmits<Emits>();
 defineSlots<Slots>();
 
@@ -161,25 +151,27 @@ const {
   toggleHoverExpanded,
   isHoverExpanded,
 } = useAppMenuState();
-const { overlayContent, overlayProps, hideContent, isOverlayed } = useAppBarOverlay();
+
+const { currentWidget, hideAllWidgets, isAnyWidgetVisible } = useAppBarWidgets();
 
 const isMobile = inject("isMobile", ref(false));
 const isDesktop = inject("isDesktop", ref(true));
+const collapseButtonHover = ref(false);
 
-// Provide appMenuState для дочерних компонентов
+// Provide appMenuState for child components
 provide("appMenuState", { closeAll });
 
 const toggleMenu = () => {
   toggleMenuState();
   if (!state.value.isMenuOpen) {
-    hideContent();
+    hideAllWidgets();
   }
 };
 
 const handleMenuClose = (value: boolean) => {
   if (!value) {
     closeAll();
-    hideContent();
+    hideAllWidgets();
   }
 };
 
@@ -188,14 +180,6 @@ const handleHoverExpand = (shouldExpand?: boolean) => {
   toggleHoverExpanded(shouldExpand);
 };
 
-const shouldShowOverlay = computed(() => {
-  return isOverlayed.value || (!state.value.isMenuOpen && overlayContent.value);
-});
-
-const shouldShowInMenu = computed(() => {
-  return overlayContent.value && !isOverlayed.value && state.value.isMenuOpen;
-});
-
 const appBarClasses = computed(() => {
   return {
     "vc-app-bar--mobile": isMobile.value,
@@ -220,7 +204,7 @@ const wrapClasses = computed(() => {
 <style lang="scss">
 :root {
   // Sizes
-  --app-bar-height: 94px;
+  --app-bar-height: 70px;
   --app-bar-mobile-height: 58px;
   --app-bar-width: 246px;
   --app-bar-mobile-width: 300px;
@@ -395,13 +379,13 @@ const wrapClasses = computed(() => {
     transition-timing-function: var(--app-bar-hover-transition-timing-function);
     transition-duration: var(--app-bar-hover-transition-duration);
 
-    &--collapsed {
-      @apply tw-w-[var(--app-bar-collapsed-width)];
-    }
+    // &--collapsed {
+    //   @apply tw-w-[var(--app-bar-collapsed-width)];
+    // }
 
-    &--hover-expanded {
-      @apply tw-w-[var(--app-bar-collapsed-width)];
-    }
+    // &--hover-expanded {
+    //   @apply tw-w-[var(--app-bar-collapsed-width)];
+    // }
 
     &--hover-collapsed {
       transition-duration: var(--app-bar-hover-leave-duration);
@@ -439,7 +423,7 @@ const wrapClasses = computed(() => {
   transform: rotate(180deg);
 }
 
-// Анимация контента
+// Content animation
 .vc-app-content {
   margin-left: var(--app-bar-width);
   transition: margin-left var(--app-bar-hover-transition-duration) var(--app-bar-hover-transition-timing-function);

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

@@ -27,7 +27,7 @@
           <VcIcon
             class="vc-app-menu-link__icon-content"
             :icon="icon"
-            size="s"
+            size="m"
           />
         </div>
         <div
@@ -242,8 +242,8 @@ watch(isOpened, (newValue) => {
   --app-menu-item-title-color: var(--neutrals-600);
   --app-menu-item-title-color-active: var(--primary-700);
 
-  --app-menu-item-active-text: var(--base-text-color, var(--neutrals-950));
-  --app-menu-item-active-icon: var(--base-text-color, var(--neutrals-950));
+  --app-menu-item-active-text: var(--neutrals-950);
+  --app-menu-item-active-icon: var(--neutrals-950);
 }
 
 .vc-app-menu-link {
@@ -339,7 +339,7 @@ watch(isOpened, (newValue) => {
   }
 
   &__icon-content {
-    @apply tw-text-center  tw-text-[length:var(--app-menu-item-icon-width)];
+    @apply tw-text-center;
   }
 
   &__child {

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

@@ -58,7 +58,7 @@ import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
 import { VcContainer } from "./../../../../";
 import { useMenuService } from "../../../../../../core/composables";
 import { MenuItem } from "../../../../../../core/types";
-import { useMenuExpanded } from "../../../../../../shared/composables/useMenuExpanded";
+import { useMenuExpanded } from "../../../../../../shared/composables";
 import { useAppMenuState } from "../composables/useAppMenuState";
 
 export interface Props {
@@ -97,7 +97,7 @@ const isMenuVisible = computed(() => {
 
 <style lang="scss">
 :root {
-  --app-menu-background: var(--app-background, var(--primary-50));
+  --app-menu-background: var(--primary-50);
   --app-menu-background-color: var(--app-bar-background, var(--neutrals-50));
   --app-menu-version-color: var(--neutrals-400);
 

package/ui/components/organisms/vc-app/index.ts

@@ -1,2 +1 @@
 export { default as VcApp } from "./vc-app.vue";
-export { default as AppBarButtonTemplate } from "./_internal/vc-app-bar/components/app-bar-button/app-bar-button.vue";

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

@@ -21,7 +21,7 @@
         :title="title"
         :disable-menu="disableMenu"
         @backlink:click="closeBlade(blades.length - 1)"
-        @logo:click="operateLogoClick"
+        @logo:click="openRoot"
       >
         <template #app-switcher>
           <slot name="app-switcher">
@@ -32,22 +32,6 @@
           </slot>
         </template>
 
-        <!-- <template
-          v-if="$slots['logo:append']"
-          #logo:append
-        >
-          <slot name="logo:append"></slot>
-        </template> -->
-
-        <!-- Toolbar slot -->
-        <template #toolbar>
-          <slot name="toolbar" />
-        </template>
-
-        <template #notifications-dropdown>
-          <NotificationDropdown />
-        </template>
-
         <template #navmenu>
           <VcAppMenu
             v-if="!disableMenu"
@@ -83,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, inject, provide, computed, useAttrs, watch, toRef, ref, onBeforeUnmount, onUnmounted } from "vue";
+import { inject, provide, useAttrs, watch, ref, onUnmounted, computed } 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 {
@@ -94,20 +78,23 @@ import {
   NotificationDropdown,
   BladeRoutesRecord,
 } from "./../../../../shared/components";
-import { useNotifications, useUser } from "../../../../core/composables";
+import { provideAppBarWidget, provideWidgetService, useNotifications, useUser } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
 import { watchOnce } from "@vueuse/core";
 import { MenuItem } from "../../../../core/types";
-import { useSettingsMenu, SettingsMenuKey } from "../../../../shared/composables/useSettingsMenu";
+import { provideSettingsMenu } from "../../../../core/composables/useSettingsMenu";
 import { LanguageSelector } from "../../../../shared/components/language-selector";
 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 { createGlobalSearch } from "../../../../core/composables/useGlobalSearch";
+import { provideGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 import { provideDashboardService } from "../../../../core/composables/useDashboard";
 import { DynamicModulesKey } from "../../../../injection-keys";
 import { provideMenuService } from "../../../../core/composables/useMenuService";
+import { BellIcon } from "../../atoms/vc-icon/icons";
+import { provideAppBarMobileButtonsService } from "../../../../core/composables/useAppBarMobileButtons";
+
 export interface Props {
   isReady: boolean;
   logo?: string;
@@ -117,7 +104,6 @@ export interface Props {
   name?: string;
   disableMenu?: boolean;
   role?: string;
-  // кастомное поведение при клике на лого
 }
 
 const emit = defineEmits<{
@@ -130,14 +116,11 @@ defineOptions({
 
 defineSlots<{
   "app-switcher": void;
-  toolbar: void;
-  // "logo:append": void;
+  // toolbar: void;
 }>();
 
 const props = defineProps<Props>();
 
-const attrs = useAttrs();
-
 console.debug("vc-app: Init vc-app");
 
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
@@ -150,18 +133,22 @@ const router = useRouter();
 const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
 const { appsList, switchApp, getApps } = useAppSwitcher();
 
-const { loadFromHistory } = useNotifications();
+const { loadFromHistory, notifications, markAllAsRead } = useNotifications();
 const route = useRoute();
 const { isAuthenticated } = useUser();
 
 const routes = router.getRoutes();
 
-const settingsMenu = useSettingsMenu();
-provide(SettingsMenuKey, settingsMenu);
+const { register: registerMenuItem } = provideSettingsMenu();
+const { register: registerAppBarWidget } = provideAppBarWidget();
+
+const hasUnreadNotifications = computed(() => {
+  return notifications.value.some((item) => item.isNew);
+});
 
 const { t } = useI18n({ useScope: "global" });
 
-const { registerMenuItem } = settingsMenu;
+const { register: registerMobileButton } = provideAppBarMobileButtonsService();
 
 registerMenuItem({
   id: "language-selector",
@@ -187,6 +174,21 @@ registerMenuItem({
   order: 100,
 });
 
+registerAppBarWidget({
+  id: "notification-dropdown",
+  component: NotificationDropdown,
+  icon: BellIcon,
+  order: 10,
+  badge: () => hasUnreadNotifications.value,
+});
+
+registerMobileButton({
+  id: "notification-dropdown",
+  component: NotificationDropdown,
+  icon: BellIcon,
+  order: 10,
+});
+
 const onMenuItemClick = function (item: MenuItem) {
   console.debug(`vc-app#onMenuItemClick() called.`);
 
@@ -209,10 +211,6 @@ const onMenuItemClick = function (item: MenuItem) {
   }
 };
 
-const operateLogoClick = () => {
-  emit("logo-click", openRoot);
-};
-
 const openRoot = async () => {
   const isPrevented = await closeBlade(1);
 
@@ -240,7 +238,7 @@ provide("internalRoutes", internalRoutes);
 provide(DynamicModulesKey, dynamicModules);
 provideDashboardService();
 provideMenuService();
-createGlobalSearch();
+provideGlobalSearch();
 
 onUnmounted(() => {
   isAppReady.value = false;

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

@@ -172,8 +172,8 @@ function onClose(): void {
   --blade-header-mobile-height: 60px;
   --blade-header-background-color: var(--additional-50);
 
-  --blade-header-button-color: var(--secondary-500);
-  --blade-header-button-color-hover: var(--secondary-600);
+  --blade-header-button-color: var(--neutrals-400);
+  --blade-header-button-color-hover: var(--neutrals-500);
 
   --blade-header-breadcrumbs-button-color: var(--neutrals-500);
   --blade-header-breadcrumbs-button-color-hover: var(--neutrals-700);
@@ -181,16 +181,16 @@ function onClose(): void {
   --blade-header-icon-color: var(--secondary-500);
 
   --blade-header-title-font-size: 19px;
-  --blade-header-title-color: var(--base-text-color, var(--neutrals-950));
+  --blade-header-title-color: var(--neutrals-950);
 
   --blade-header-subtitle-color: var(--secondary-500);
 
   --blade-not-edited: var(--success-400);
   --blade-edited: var(--warning-500);
-  --blade-header-border-color: var(--base-border-color, var(--neutrals-200));
+  --blade-header-border-color: var(--neutrals-200);
 
   --blade-tooltip-background: var(--additional-50);
-  --blade-tooltip-border: var(--base-border-color, var(--neutrals-200));
+  --blade-tooltip-border: var(--neutrals-200);
   --blade-tooltip-text: var(--neutrals-600);
 }
 
@@ -214,7 +214,7 @@ function onClose(): void {
   }
 
   &__actions {
-    @apply tw-overflow-hidden;
+    @apply tw-overflow-hidden tw-flex-shrink-0;
   }
 
   &__status {
@@ -222,7 +222,7 @@ function onClose(): void {
   }
 
   &__status-container {
-    @apply tw-flex tw-flex-1 tw-flex-row tw-items-center;
+    @apply tw-flex tw-flex-1 tw-flex-row tw-items-center tw-truncate;
   }
 
   &__status-not-edited {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue

@@ -1,46 +1,39 @@
 <template>
-  <VcTooltip
-    placement="bottom"
-    :offset="{ crossAxis: 0, mainAxis: 0 }"
-    :delay="1000"
+  <button
+    class="vc-blade-toolbar-base-button"
+    :class="{
+      'vc-blade-toolbar-base-button--disabled': disabled || isWaiting,
+      'vc-blade-toolbar-base-button--with-separator-left': separator === 'left',
+      'vc-blade-toolbar-base-button--with-separator-right': separator === 'right',
+      'vc-blade-toolbar-base-button--with-separator-both': separator === 'both',
+    }"
+    :data-test-id="id ?? 'vc-blade-toolbar-button'"
+    v-bind="$attrs"
+    @click="handleClick"
   >
-    <template #tooltip>{{ title }}</template>
-    <button
-      class="vc-blade-toolbar-base-button"
-      :class="{
-        'vc-blade-toolbar-base-button--disabled': disabled || isWaiting,
-        'vc-blade-toolbar-base-button--with-separator-left': separator === 'left',
-        'vc-blade-toolbar-base-button--with-separator-right': separator === 'right',
-        'vc-blade-toolbar-base-button--with-separator-both': separator === 'both',
-      }"
-      :data-test-id="id ?? 'vc-blade-toolbar-button'"
-      v-bind="$attrs"
-      @click="handleClick"
+    <div
+      class="vc-blade-toolbar-base-button__content"
+      :style="{ flexDirection: contentDirection }"
     >
-      <div
-        class="vc-blade-toolbar-base-button__content"
-        :style="{ flexDirection: contentDirection }"
+      <VcIcon
+        class="vc-blade-toolbar-base-button__icon"
+        :class="iconClassName"
+        :icon="icon"
+        :size="size"
+      />
+      <span
+        class="vc-blade-toolbar-base-button__title"
+        :class="titleClassName"
       >
-        <VcIcon
-          class="vc-blade-toolbar-base-button__icon"
-          :class="iconClassName"
-          :icon="icon"
-          :size="size"
-        />
-        <span
-          class="vc-blade-toolbar-base-button__title"
-          :class="titleClassName"
-        >
-          {{ title }}
-        </span>
-      </div>
-    </button>
-  </VcTooltip>
+        {{ title }}
+      </span>
+    </div>
+  </button>
 </template>
 
 <script lang="ts" setup>
 import { ref, ComputedRef, Ref } from "vue";
-import { VcIcon, VcTooltip } from "../../../../../../../../";
+import { VcIcon } from "../../../../../../../../";
 
 export interface Props {
   id?: string;
@@ -82,7 +75,7 @@ async function handleClick(): Promise<void> {
 
 <style lang="scss">
 :root {
-  --blade-toolbar-base-button-separator-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-base-button-separator-color: var(--neutrals-200);
   --blade-toolbar-base-button-title-color: var(--neutrals-600);
   --blade-toolbar-base-button-hover-color: var(--primary-600);
   --blade-toolbar-base-button-disabled-color: var(--neutrals-400);
@@ -93,7 +86,7 @@ async function handleClick(): Promise<void> {
   @apply tw-px-3 tw-bg-transparent tw-border-0 tw-cursor-pointer tw-shrink;
 
   &__content {
-    @apply tw-inline-flex tw-items-center tw-gap-2;
+    @apply tw-inline-flex tw-items-center tw-gap-1;
   }
 
   &__icon {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -68,7 +68,7 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   isExpanded: true,
-  icon: "fas fa-question-circle",
+  icon: "material-help",
   title: undefined,
   dropdownItems: () => [],
   clickHandler: undefined,
@@ -112,7 +112,7 @@ async function onClick(): Promise<void> {
   --blade-toolbar-button-background-color-hover: transparent;
   --blade-toolbar-button-background-color-disabled: transparent;
 
-  --blade-toolbar-button-border-color: var(--base-border-color, var(--neutrals-200));
+  --blade-toolbar-button-border-color: var(--neutrals-200);
 
   --blade-toolbar-shadow-color: var(--secondary-200);
   --blade-toolbar-shadow: 1px 1px 22px rgb(from var(--blade-toolbar-shadow-color) r g b / 20%);