@vc-shell/framework 1.1.0-alpha.2 → 1.1.0-alpha.4

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

@@ -31,23 +31,32 @@
           />
         </div>
         <div
-          v-if="expand"
-          class="vc-app-menu-link__title"
+          v-if="!expand && !icon"
+          class="vc-app-menu-link__icon-letters"
         >
-          <div class="vc-app-menu-link__title-truncate">
-            {{ title }}
-          </div>
+          {{ twoLettersTitle(title) }}
+        </div>
+
+        <Transition name="opacity">
           <div
-            v-if="!!children?.length || false"
-            class="vc-app-menu-link__title-icon"
+            v-show="expand"
+            class="vc-app-menu-link__title"
           >
-            <VcIcon
-              class="vc-app-menu-item__title-icon"
-              :icon="isOpened ? ChevronUpIcon : ChevronDownIcon"
-              size="m"
-            ></VcIcon>
+            <div class="vc-app-menu-link__title-truncate">
+              {{ title }}
+            </div>
+            <div
+              v-if="(!!children?.length && expand) || false"
+              class="vc-app-menu-link__title-icon"
+            >
+              <VcIcon
+                class="vc-app-menu-item__title-icon"
+                :icon="isOpened ? ChevronUpIcon : ChevronDownIcon"
+                size="m"
+              ></VcIcon>
+            </div>
           </div>
-        </div>
+        </Transition>
       </div>
     </VcTooltip>
   </div>
@@ -92,7 +101,7 @@
             >
               <div
                 v-if="nested.icon"
-                class="vc-app-menu-link__icon"
+                class="vc-app-menu-link__icon vc-app-menu-link__icon--child"
                 :class="{
                   'vc-app-menu-link__icon-collapsed': !expand,
                 }"
@@ -103,12 +112,23 @@
                   size="m"
                 />
               </div>
-              <p
-                v-if="expand"
-                class="vc-app-menu-link__child-item-title"
+              <div
+                v-if="!expand && !nested.icon"
+                class="vc-app-menu-link__icon-letters"
               >
-                {{ nested.title }}
-              </p>
+                {{ twoLettersTitle(nested.title) }}
+              </div>
+              <Transition name="opacity">
+                <p
+                  v-show="expand"
+                  class="vc-app-menu-link__child-item-title"
+                  :class="{
+                    'vc-app-menu-link__child-item-title--no-icon': !nested.icon,
+                  }"
+                >
+                  {{ nested.title }}
+                </p>
+              </Transition>
             </div>
           </div>
         </router-link>
@@ -118,7 +138,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, computed, onMounted } from "vue";
+import { ref, watch, computed, onMounted, Component, MaybeRef, unref } from "vue";
 import { MenuItem } from "./../../../../../../../../../core/types";
 import { VcIcon } from "./../../../../../../../";
 import { useRoute } from "vue-router";
@@ -128,7 +148,7 @@ import ChevronDownIcon from "./../../../../../../../atoms/vc-icon/icons/ChevronD
 export interface Props {
   children?: MenuItem[];
   sticky?: boolean;
-  icon: string;
+  icon: string | Component;
   title?: string;
   url?: string;
   expand?: boolean;
@@ -188,6 +208,15 @@ const isActive = (url: string) => {
   }
 };
 
+const twoLettersTitle = (title: MaybeRef<string> | undefined) => {
+  // get first letters in title words and combine them. Two letters maximum
+  return unref(title)
+    ?.split(" ")
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("");
+};
+
 onMounted(() => {
   const storedState = localStorage.getItem(`vc_menu_${props.id}_isOpened`);
   if (storedState) {
@@ -204,6 +233,7 @@ watch(isOpened, (newValue) => {
 :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);
@@ -218,6 +248,7 @@ watch(isOpened, (newValue) => {
 
 .vc-app-menu-link {
   @apply tw-cursor-pointer tw-w-full;
+  @apply tw-transition-transform tw-duration-[0] tw-ease-in-out #{!important};
 
   &:hover .vc-app-menu-link__item:not(.vc-app-menu-link__item_active) {
     @apply tw-bg-[var(--app-menu-item-background-color-hover)] tw-bg-opacity-50 tw-rounded;
@@ -238,14 +269,9 @@ watch(isOpened, (newValue) => {
   &__item {
     @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-uppercase tw-select-none tw-px-2 tw-gap-4;
 
     &_collapsed {
-      @apply tw-justify-center;
-
-      .vc-app-menu-link__title {
-        @apply tw-hidden;
-      }
     }
 
     &_active {
@@ -278,7 +304,15 @@ watch(isOpened, (newValue) => {
   &__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)];
+    tw-justify-center tw-shrink-0 tw-transition-[color] tw-duration-200 tw-w-[var(--app-menu-item-icon-width-container)];
+
+    &--child {
+      // @apply tw-mr-5;
+    }
+  }
+
+  &__icon-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-[var(--neutrals-500)] tw-border-[2px] tw-border-[var(--neutrals-500)];
   }
 
   &__title {
@@ -287,7 +321,7 @@ watch(isOpened, (newValue) => {
     tw-font-normal
     tw-leading-normal
     tw-normal-case
-    tw-pl-4
+
     [transition:color_0.2s_ease]
     tw-opacity-100 tw-w-full tw-flex tw-justify-between tw-items-center;
   }
@@ -301,11 +335,11 @@ watch(isOpened, (newValue) => {
   }
 
   &__title-icon {
-    @apply tw-ml-3 tw-text-[color:var(--app-menu-item-icon-color)];
+    @apply tw-ml-3;
   }
 
   &__icon-content {
-    @apply tw-text-center;
+    @apply tw-text-center  tw-text-[length:var(--app-menu-item-icon-width)];
   }
 
   &__child {
@@ -314,17 +348,17 @@ watch(isOpened, (newValue) => {
 
   &__child-item {
     @apply tw-cursor-pointer tw-min-w-0 tw-flex tw-h-[var(--app-menu-item-height)]
-      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-fit tw-py-2 tw-px-3
+      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-full tw-py-2 tw-px-3
     tw-text-[color:var(--app-menu-item-title-color)] tw-text-sm
     hover:tw-bg-[var(--app-menu-item-background-color-hover)]
-    hover:tw-text-[color:var(--app-menu-item-title-color-active)];
+    hover:tw-text-[color:var(--app-menu-item-title-color-active)] tw-gap-5;
 
     &_expanded {
-      @apply tw-pl-5 tw-w-full #{!important};
+      @apply tw-pl-7 tw-w-full #{!important};
     }
 
     &_collapsed {
-      @apply tw-w-auto tw-justify-center;
+      @apply tw-pl-2;
     }
 
     &_active {
@@ -339,7 +373,7 @@ watch(isOpened, (newValue) => {
   }
 
   &__child-item-title {
-    @apply tw-truncate tw-pl-5;
+    @apply tw-truncate;
   }
 
   &__child-item-link {
@@ -355,7 +389,17 @@ watch(isOpened, (newValue) => {
   }
 
   &__icon-collapsed {
-    @apply tw-p-0;
+    @apply tw-p-0 tw-m-0;
   }
 }
+
+.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/vc-app-menu/vc-app-menu.vue

@@ -5,6 +5,7 @@
     :class="{
       'vc-app-menu--mobile': $isMobile.value,
       'vc-app-menu--collapsed': $isDesktop.value && !isExpanded,
+      'vc-app-menu--hover-expanded': isHoverExpanded,
     }"
   >
     <div
@@ -12,6 +13,7 @@
       :class="{
         'vc-app-menu__inner--desktop': $isDesktop.value,
         'vc-app-menu__inner--collapsed': $isDesktop.value && !isExpanded,
+        'vc-app-menu__inner--hover-expanded': isHoverExpanded,
       }"
     >
       <!-- Show scrollable area with menu items -->
@@ -32,8 +34,8 @@
             :icon="item.groupIcon || item.icon"
             :title="item.title as string"
             :children="item.children"
-            :expand="$isDesktop.value ? isExpanded : true"
-            @click="handleMenuItemClick( item, $event)"
+            :expand="$isDesktop.value ? isExpanded || isHoverExpanded : true"
+            @click="handleMenuItemClick(item, $event)"
           />
         </div>
       </VcContainer>
@@ -77,7 +79,7 @@ const emit = defineEmits<Emits>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;
 const { menuItems } = useMenuService();
-const { isExpanded } = useMenuExpanded();
+const { isExpanded, isHoverExpanded } = useMenuExpanded();
 const { closeAll } = useAppMenuState();
 
 const handleMenuItemClick = (item: MenuItem, nestedItem?: MenuItem) => {
@@ -105,8 +107,8 @@ const isMenuVisible = computed(() => {
   --app-backdrop-overlay: rgb(from var(--app-backdrop-overlay-bg) r g b / 75%);
 
   --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%);
+  --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 {

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="openRoot"
+        @logo:click="operateLogoClick"
       >
         <template #app-switcher>
           <slot name="app-switcher">
@@ -32,9 +32,12 @@
           </slot>
         </template>
 
-        <template #logo:append>
+        <!-- <template
+          v-if="$slots['logo:append']"
+          #logo:append
+        >
           <slot name="logo:append"></slot>
-        </template>
+        </template> -->
 
         <!-- Toolbar slot -->
         <template #toolbar>
@@ -58,7 +61,7 @@
 
         <template #user-dropdown>
           <UserDropdownButton
-            :avatar="avatar"
+            :avatar-url="avatar"
             :name="name"
             :role="role"
           />
@@ -80,7 +83,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, inject, provide, computed } from "vue";
+import { h, inject, provide, computed, useAttrs } 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 {
@@ -93,9 +96,8 @@ import {
 } from "./../../../../shared/components";
 import { useNotifications, useUser } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
-import { watchOnce, useLocalStorage } from "@vueuse/core";
+import { watchOnce } from "@vueuse/core";
 import { MenuItem } from "../../../../core/types";
-import { useToolbarSlots } from "./composables/useToolbarSlots";
 import { useSettingsMenu, SettingsMenuKey } from "../../../../shared/composables/useSettingsMenu";
 import { LanguageSelector } from "../../../../shared/components/language-selector";
 import { ThemeSelector } from "../../../../shared/components/theme-selector";
@@ -103,6 +105,8 @@ import { ChangePasswordButton } from "../../../../shared/components/change-passw
 import { LogoutButton } from "../../../../shared/components/logout-button";
 import { useI18n } from "vue-i18n";
 import { createGlobalSearch } from "../../../../core/composables/useGlobalSearch";
+import { provideDashboardService } from "../../../../core/composables/useDashboard";
+import { DynamicModulesKey } from "../../../../injection-keys";
 
 export interface Props {
   isReady: boolean;
@@ -113,8 +117,13 @@ export interface Props {
   name?: string;
   disableMenu?: boolean;
   role?: string;
+  // кастомное поведение при клике на лого
 }
 
+const emit = defineEmits<{
+  (e: "logo-click", goToRoot: () => void): void;
+}>();
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -122,20 +131,18 @@ defineOptions({
 defineSlots<{
   "app-switcher": void;
   toolbar: void;
-  "toolbar:user-dropdown": (props: { userDropdown: typeof UserDropdownButton }) => void;
-  "toolbar:language-selector": void;
-  "toolbar:theme-selector": void;
-  "logo:append": void;
+  // "logo:append": void;
 }>();
 
 const props = defineProps<Props>();
 
+const attrs = useAttrs();
+
 console.debug("vc-app: Init vc-app");
 
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
-const dynamicModules = inject("$dynamicModules", undefined) as Record<string, unknown> | undefined;
+const dynamicModules = inject(DynamicModulesKey, undefined);
 const router = useRouter();
-createGlobalSearch();
 
 const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
 const { appsList, switchApp, getApps } = useAppSwitcher();
@@ -143,9 +150,10 @@ const { appsList, switchApp, getApps } = useAppSwitcher();
 const { loadFromHistory } = useNotifications();
 const route = useRoute();
 const { isAuthenticated } = useUser();
-const routes = router.getRoutes();
 
-const { getToolbarMenuItems } = useToolbarSlots();
+
+
+const routes = router.getRoutes();
 
 const settingsMenu = useSettingsMenu();
 provide(SettingsMenuKey, settingsMenu);
@@ -200,6 +208,10 @@ const onMenuItemClick = function (item: MenuItem) {
   }
 };
 
+const operateLogoClick = () => {
+  emit("logo-click", openRoot);
+};
+
 const openRoot = async () => {
   const isPrevented = await closeBlade(1);
 
@@ -219,7 +231,9 @@ watchOnce(
 );
 
 provide("internalRoutes", internalRoutes);
-provide("$dynamicModules", dynamicModules);
+provide(DynamicModulesKey, dynamicModules);
+provideDashboardService();
+createGlobalSearch();
 </script>
 
 <style lang="scss">

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

@@ -39,7 +39,7 @@
         floating
         placement="bottom-end"
         variant="light"
-        @item:click="handleItemClick"
+        @item-click="handleItemClick"
         @update:opened="isMenuOpen = $event"
       >
         <template #trigger="{ isActive }">

package/ui/components/organisms/vc-table/_internal/vc-table-base-header/vc-table-base-header.vue

@@ -65,9 +65,6 @@
 <script lang="ts" setup>
 import VcTableFilter from "./../vc-table-filter/vc-table-filter.vue";
 import { VcInput } from "./../../../../molecules";
-import { inject, ref, watch, computed } from "vue";
-import { useGlobalSearch } from "../../../../../../core/composables/useGlobalSearch";
-import { useBladeNavigation } from "../../../../../../shared";
 
 export interface Props {
   searchValue?: string;
@@ -81,15 +78,16 @@ export interface Emits {
   (event: "search:change", value: string): void;
 }
 
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
+defineProps<Props>();
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">
 :root {
   --table-base-header-border-color: var(--base-border-color, var(--neutrals-200));
   --table-base-header-input-icon-color: var(--neutrals-300);
-  --table-base-header-padding: 18px;
+  --table-base-header-padding-horizontal: 12px;
+  --table-base-header-padding-vertical: 9px;
   --table-base-header-mobile-padding: 30px;
 }
 
@@ -102,7 +100,7 @@ const emit = defineEmits<Emits>();
   }
 
   &--desktop {
-    @apply tw-p-[var(--table-base-header-padding)];
+    @apply tw-px-[var(--table-base-header-padding-horizontal)] tw-py-[var(--table-base-header-padding-vertical)];
   }
 
   &__filter-mobile {

package/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/{vc-table-header/vc-table-header.vue → vc-table-columns-header/vc-table-columns-header.vue}

@@ -1,16 +1,16 @@
 <template>
   <div
     ref="headerRef"
-    class="vc-table-header"
+    class="vc-table-columns-header"
     @mouseenter="$emit('headerMouseOver', true)"
     @mouseleave="$emit('headerMouseOver', false)"
   >
-    <div class="vc-table-header__row">
+    <div class="vc-table-columns-header__row">
       <div
         v-if="multiselect && items && items.length"
-        class="vc-table-header__checkbox"
+        class="vc-table-columns-header__checkbox"
       >
-        <div class="vc-table-header__checkbox-content">
+        <div class="vc-table-columns-header__checkbox-content">
           <VcCheckbox
             :model-value="headerCheckbox"
             size="m"
@@ -18,17 +18,17 @@
             @click.stop
           />
         </div>
-        <div class="vc-table-header__checkbox-resizer" />
+        <div class="vc-table-columns-header__checkbox-resizer" />
       </div>
       <div
         v-for="(item, index) in filteredCols"
         :id="item.id"
         :key="item.id"
-        class="vc-table-header__cell"
+        class="vc-table-columns-header__cell"
         :class="[
           {
-            'vc-table-header__cell--sortable': item.sortable,
-            'vc-table-header__cell--last': index === filteredCols.length - 1,
+            'vc-table-columns-header__cell--sortable': item.sortable,
+            'vc-table-columns-header__cell--last': index === filteredCols.length - 1,
           },
           item.align ? tableAlignment[item.align] : '',
         ]"
@@ -40,18 +40,18 @@
         @drop="reorderableColumns && onColumnHeaderDrop($event, item)"
         @click="$emit('headerClick', item)"
       >
-        <div class="vc-table-header__cell-content">
-          <div class="vc-table-header__cell-title">
+        <div class="vc-table-columns-header__cell-content">
+          <div class="vc-table-columns-header__cell-title">
             <span
               v-if="editing && item.rules?.required"
-              class="vc-table-header__cell-required"
+              class="vc-table-columns-header__cell-required"
               >*</span
             >
             <slot :name="`header_${item.id}`">{{ item.title }}</slot>
           </div>
           <div
             v-if="sortField === item.id"
-            class="vc-table-header__cell-sort-icon"
+            class="vc-table-columns-header__cell-sort-icon"
           >
             <VcIcon
               size="xs"
@@ -60,7 +60,7 @@
           </div>
           <div
             v-else
-            class="vc-table-header__cell-sort-icons"
+            class="vc-table-columns-header__cell-sort-icons"
           >
             <VcIcon
               size="xs"
@@ -73,9 +73,9 @@
           </div>
         </div>
         <div
-          class="vc-table-header__cell-resizer"
+          class="vc-table-columns-header__cell-resizer"
           :class="{
-            'vc-table-header__cell-resizer--cursor': resizableColumns,
+            'vc-table-columns-header__cell-resizer--cursor': resizableColumns,
           }"
           @mousedown.stop="resizableColumns && handleMouseDown($event, item)"
         />
@@ -83,7 +83,7 @@
 
       <div
         v-if="isHeaderHover && expanded"
-        class="vc-table-header__column-switcher"
+        class="vc-table-columns-header__column-switcher"
       >
         <VcTableColumnSwitcher
           :items="internalColumnsSorted"
@@ -96,18 +96,18 @@
 
     <div
       ref="resizer"
-      class="vc-table-header__resizer"
+      class="vc-table-columns-header__resizer"
     />
     <div
       ref="reorderRef"
-      class="vc-table-header__reorder-ref"
+      class="vc-table-columns-header__reorder-ref"
     />
   </div>
 </template>
 
 <script lang="ts" setup generic="T extends TableItem | string">
 import { toRefs, ref } from "vue";
-import { VcCheckbox, VcIcon } from "../../../../../../";
+import { VcCheckbox, VcIcon } from "../../../../../..";
 import VcTableColumnSwitcher from "../../../vc-table-column-switcher/vc-table-column-switcher.vue";
 import type { ITableColumns, TableItem, TableColPartial } from "../../../../types";
 import { useTableColumnReorder } from "../../../../composables/useTableColumnReorder";
@@ -168,9 +168,11 @@ const { resizer, handleMouseDown } = useTableColumnResize(internalColumns, () =>
 <style lang="scss">
 :root {
   --table-header-height: 60px;
+  --table-header-border-color: var(--base-border-color, var(--neutrals-200));
 }
 
-.vc-table-header {
+.vc-table-columns-header {
+  @apply tw-border-y tw-border-[color:var(--table-header-border-color)] tw-border-solid;
   &__row {
     @apply tw-flex tw-flex-row [box-shadow:var(--table-header-border)] tw-bg-[--table-header-bg];
   }
@@ -194,7 +196,7 @@ const { resizer, handleMouseDown } = useTableColumnResize(internalColumns, () =>
       @apply tw-cursor-pointer;
 
       &:hover {
-        .vc-table-header__cell-sort-icons {
+        .vc-table-columns-header__cell-sort-icons {
           @apply tw-visible;
         }
       }

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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="vc-table-row"
+    role="button"
     :class="{
       'vc-table-row--odd': index % 2 === 0,
       'vc-table-row--clickable': hasClickListener,

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

@@ -89,7 +89,7 @@
 
 <script lang="ts" setup generic="T extends TableItem | string">
 import { toRefs, MaybeRef, useSlots } from "vue";
-import VcTableHeader from "./_internal/vc-table-header/vc-table-header.vue";
+import VcTableHeader from "./_internal/vc-table-columns-header/vc-table-columns-header.vue";
 import VcTableSelectAllHeader from "./_internal/vc-table-select-all-header/vc-table-select-all-header.vue";
 import VcTableBody from "./_internal/vc-table-body/vc-table-body.vue";
 import type { ITableColumns, TableItem, TableColPartial, StatusImage } from "../../types";

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

@@ -23,6 +23,7 @@ import { VNode, computed, inject, Ref, h, useSlots } from "vue";
 import { useGlobalSearch } from "../../../../../../core/composables/useGlobalSearch";
 import { BladeInstance } from "../../../../../../injection-keys";
 import VcTableBaseHeader from "../vc-table-base-header/vc-table-base-header.vue";
+import { IBladeInstance } from "../../../../../../shared";
 
 const props = defineProps<{
   hasHeaderSlot: boolean;
@@ -44,7 +45,17 @@ defineSlots<{
   header: (props: { header: VNode }) => VNode;
 }>();
 
-const blade = inject(BladeInstance);
+const blade = inject(
+  BladeInstance,
+  computed(
+    (): Partial<IBladeInstance> => ({
+      navigation: {
+        idx: 0,
+        instance: null,
+      },
+    }),
+  ),
+);
 const globalSearch = useGlobalSearch();
 const isMobile = inject("isMobile") as Ref<boolean>;
 const slots = useSlots();