@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/shared/components/user-dropdown-button/_internal/user-info.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="vc-user-info">
+    <div
+      v-if="avatarUrl"
+      class="vc-user-info__avatar"
+      :style="imageHandler"
+    ></div>
+    <VcIcon
+      v-else
+      icon="fas fa-user-circle"
+      class="vc-user-info__icon"
+    />
+    <Transition name="opacity">
+      <div
+        v-show="isExpanded || $isMobile.value"
+        class="vc-user-info__info"
+      >
+        <div class="vc-user-info__name">
+          {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
+        </div>
+        <div class="vc-user-info__role">
+          {{
+            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
+            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+          }}
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useUser } from "../../../../core/composables";
+import { VcIcon } from "../../../../ui/components";
+
+export interface Props {
+  avatarUrl?: string;
+  name?: string;
+  role?: string;
+  isExpanded?: boolean;
+}
+
+const props = defineProps<Props>();
+const { user } = useUser();
+
+const imageHandler = computed(() => {
+  if (props.avatarUrl) {
+    return `background-image: url(${CSS.escape(props.avatarUrl)})`;
+  }
+  return undefined;
+});
+</script>
+
+<style lang="scss">
+:root {
+  --user-info-avatar-width: 38px;
+  --user-info-avatar-height: 38px;
+}
+
+.vc-user-info {
+  @apply tw-flex tw-items-center tw-gap-3;
+
+  &__avatar {
+    @apply tw-rounded-full tw-overflow-hidden tw-w-[var(--user-info-avatar-width)] tw-h-[var(--user-info-avatar-height)] tw-bg-[color:var(--user-dropdown-account-info-role-color)]
+    tw-bg-cover tw-bg-center tw-shrink-0;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--user-dropdown-button-color)] tw-text-[length:var(--user-info-avatar-height)];
+  }
+
+  &__info {
+    @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-flex-col tw-items-start;
+  }
+
+  &__name {
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-max-w-[250px] tw-truncate;
+  }
+
+  &__role {
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-role-color)];
+  }
+}
+
+.opacity-enter-active,
+.opacity-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.opacity-enter-from,
+.opacity-leave-to {
+  opacity: 0;
+}
+</style>

package/shared/components/user-dropdown-button/_internal/user-sidebar.vue

@@ -0,0 +1,48 @@
+<template>
+  <Sidebar
+    :is-expanded="isOpened"
+    position="left"
+    render="always"
+    :title="$t('SHELL.ACCOUNT.SETTINGS')"
+    @close="$emit('update:isOpened', false)"
+  >
+    <template #content>
+      <div
+        v-if="isOpened"
+        class="vc-user-sidebar__menu"
+        @click.stop="$emit('update:isOpened', false)"
+      >
+        <SettingsMenu />
+      </div>
+    </template>
+  </Sidebar>
+</template>
+
+<script lang="ts" setup>
+import { Sidebar } from "../../sidebar";
+import { IMenuItem } from "../../../../core/types";
+import { SettingsMenu } from "../../settings-menu";
+
+defineProps<{
+  isOpened: boolean;
+}>();
+
+defineEmits<{
+  (e: "update:isOpened", value: boolean): void;
+  (e: "item:click", item: IMenuItem): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-user-sidebar {
+  &__menu {
+    @apply tw-w-full tw-flex tw-flex-col;
+  }
+
+  .vc-app_mobile & {
+    &__menu {
+      @apply tw-static tw-shadow-none #{!important};
+    }
+  }
+}
+</style>

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -1,341 +1,125 @@
 <template>
-  <AppBarButtonTemplate
-    position="bottom-start"
-    :before-open="beforeOpen"
-    :title="user?.userName"
-  >
-    <template #button="{ opened }">
-      <template v-if="$isDesktop.value">
-        <div
-          class="vc-user-dropdown-button"
-          :class="{
-            'vc-user-dropdown-button--active': opened,
-            'vc-user-dropdown-button--auto-width': disabled,
-            'vc-user-dropdown-button--mobile': $isMobile.value,
-          }"
-        >
-          <div
-            class="vc-user-dropdown-button__wrap"
-            :class="{
-              'vc-user-dropdown-button__wrap--active': opened,
-            }"
-          >
-            <div
-              v-if="avatarUrl"
-              class="vc-user-dropdown-button__avatar"
-              :style="imageHandler"
-            ></div>
-            <VcIcon
-              v-else
-              icon="fas fa-user-circle"
-              size="xxl"
-              class="vc-user-dropdown-button__icon"
-            />
-            <div class="vc-user-dropdown-button__info">
-              <div class="vc-user-dropdown-button__name">
-                {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
-              </div>
-              <div class="vc-user-dropdown-button__role">
-                {{
-                  (role && $t(`SHELL.USER.ROLE.${role}`)) ||
-                  (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-                }}
-              </div>
-            </div>
-            <div
-              v-if="!disabled && menu && menu.length"
-              class="vc-user-dropdown-button__chevron"
-            >
-              <VcIcon
-                icon="fas fa-chevron-down"
-                size="xl"
-              ></VcIcon>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template v-else>
-        <div class="vc-user-dropdown-button__button">
-          <div
-            v-if="avatarUrl"
-            class="vc-user-dropdown-button__avatar"
-            :style="imageHandler"
-          ></div>
-          <VcIcon
-            v-else
-            icon="fas fa-user-circle"
-            size="xxl"
-            class="vc-user-dropdown-button__icon"
-          />
-        </div>
-      </template>
-    </template>
-    <template #dropdown-content="{ opened, toggle }">
-      <Sidebar
-        :is-expanded="$isMobile.value ? opened : false"
-        position="right"
-        render="mobile"
-        @close="toggle"
+  <div>
+    <button
+      type="button"
+      class="vc-user-dropdown-button"
+      :class="{
+        'vc-user-dropdown-button--active': false,
+        'vc-user-dropdown-button--auto-width': disabled,
+        'vc-user-dropdown-button--mobile': $isMobile.value,
+        'vc-user-dropdown-button--collapsed': !isExpanded && $isDesktop.value,
+      }"
+      @click="handleClick"
+    >
+      <div
+        class="vc-user-dropdown-button__wrap"
+        :class="{
+          'vc-user-dropdown-button__wrap--active': false,
+        }"
       >
-        <template #header="{ header }">
-          <div class="vc-user-dropdown-button__header-wrap">
-            <div class="vc-user-dropdown-button__header">
-              <div
-                v-if="avatarUrl"
-                class="vc-user-dropdown-button__avatar"
-                :style="imageHandler"
-              ></div>
-              <VcIcon
-                v-else
-                icon="fas fa-user-circle"
-                size="xxl"
-                class="vc-user-dropdown-button__icon"
-              />
-              <div class="vc-user-dropdown-button__info">
-                <div class="vc-user-dropdown-button__name">
-                  {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
-                </div>
-                <div class="vc-user-dropdown-button__role">
-                  {{
-                    (role && $t(`SHELL.USER.ROLE.${role}`)) ||
-                    (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-                  }}
-                </div>
-              </div>
-            </div>
-            <component :is="header" />
-          </div>
-        </template>
-        <template #content>
-          <div
-            v-if="menu && opened"
-            class="vc-user-dropdown-button__menu"
-            @click.stop="toggle"
-          >
-            <div
-              v-for="(item, i) in menu"
-              :key="`menu_item_${i}`"
-              class="vc-user-dropdown-button__menu-item"
-              @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
-            >
-              <VcIcon
-                v-if="item.icon"
-                :icon="item.icon"
-                size="l"
-                class="vc-user-dropdown-button__menu-icon"
-              ></VcIcon>
-              <p>{{ item.title }}</p>
-            </div>
-          </div>
-        </template>
-      </Sidebar>
-    </template>
-  </AppBarButtonTemplate>
+        <UserInfo
+          :avatar-url="avatarUrl"
+          :name="name"
+          :role="role"
+          :is-expanded="isExpanded || isHoverExpanded"
+        />
+        <!-- <UserActions
+          :profile-menu="profileMenu"
+          @action:click="handleActionClick"
+        /> -->
+        <div class="vc-user-dropdown-button__actions">
+          <div class="vc-user-dropdown-button__trigger"></div>
+        </div>
+      </div>
+    </button>
+
+    <UserSidebar
+      v-model:is-opened="isSidebarOpened"
+      @item:click="handleMenuItemClick"
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
-import { useUser } from "../../../core/composables";
-import { useRouter } from "vue-router";
+import { ref } from "vue";
+import type { IMenuItem } from "../../../core/types";
+import { default as UserInfo } from "./_internal/user-info.vue";
+import { default as UserSidebar } from "./_internal/user-sidebar.vue";
+import { useMenuExpanded } from "../../../shared/composables/useMenuExpanded";
 import { useI18n } from "vue-i18n";
-import { VcIcon } from "../../../ui/components";
-import { BladeMenu } from "../../../core/types";
-import { usePopup } from "../popup-handler/composables/usePopup";
-import { ChangePassword } from "../change-password";
-import { useBladeNavigation } from "..";
-import { AppBarButtonTemplate } from "./../app-bar-button";
-import { Sidebar } from "./../sidebar";
 
 export interface Props {
   avatarUrl?: string | undefined;
   name?: string | undefined;
   role?: string | undefined;
-  menuItems?: BladeMenu[];
-  baseMenuItemsHandler?: (defaultMenuItems: BladeMenu[]) => BladeMenu[];
   disabled?: boolean;
 }
-const props = withDefaults(defineProps<Props>(), {
-  menuItems: () => [],
-});
-
-const { user, signOut } = useUser();
-const router = useRouter();
-const { t } = useI18n({ useScope: "global" });
-
-const { open } = usePopup({
-  component: ChangePassword,
-});
-const { closeBlade } = useBladeNavigation();
-
-const defaultMenuItems = ref([
-  {
-    title: computed(() => t("SHELL.ACCOUNT.CHANGE_PASSWORD")),
-    icon: "fas fa-key",
-    clickHandler() {
-      open();
-    },
-  },
-  {
-    title: computed(() => t("SHELL.ACCOUNT.LOGOUT")),
-    icon: "fas fa-sign-out-alt",
-    async clickHandler() {
-      const isPrevented = await closeBlade(0);
 
-      if (!isPrevented) {
-        await signOut();
-        router.push({ name: "Login" });
-      }
-    },
-  },
-]);
+defineProps<Props>();
 
-const menu = computed(() => {
-  const defaultItems = handleDefaultMenuItems();
-
-  if (defaultItems?.length) {
-    return [...props.menuItems, ...defaultItems];
-  }
-  return [...props.menuItems];
-});
+const { t } = useI18n({ useScope: "global" });
+const isSidebarOpened = ref(false);
+const { isExpanded, isHoverExpanded } = useMenuExpanded();
 
-function handleDefaultMenuItems() {
-  if (props.baseMenuItemsHandler && typeof props.baseMenuItemsHandler === "function") {
-    return props.baseMenuItemsHandler(defaultMenuItems.value);
-  }
-  return defaultMenuItems.value;
+function handleMenuItemClick(item: IMenuItem) {
+  item.clickHandler?.();
 }
 
-function beforeOpen() {
-  return !props.disabled && menu.value?.length > 0;
+function handleClick() {
+  isSidebarOpened.value = !isSidebarOpened.value;
 }
-
-const imageHandler = computed(() => {
-  if (props.avatarUrl) {
-    return `background-image: url(${CSS.escape(props.avatarUrl)})`;
-  }
-  return undefined;
-});
 </script>
 
 <style lang="scss">
 :root {
-  --user-dropdown-account-info-name-color: var(--base-text-color, var(--neutrals-950));
+  --user-dropdown-height: 54px;
+  --user-dropdown-button-bg: var(--primary-500);
+  --user-dropdown-button-bg-hover: var(--primary-700);
+  --user-dropdown-button-bg-logout: var(--danger-500);
+  --user-dropdown-button-bg-logout-hover: var(--danger-700);
+  --user-dropdown-button-icon-color: var(--additional-50);
+  --user-dropdown-account-info-name-color: var(--neutrals-950);
   --user-dropdown-account-info-role-color: var(--secondary-600);
-  --user-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
   --user-dropdown-border-color: var(--app-bar-divider-color);
   --user-dropdown-button-color: var(--primary-500);
-  --user-dropdown-button-color-hover: var(--primary-700);
-  --user-dropdown-menu-item-bg-hover: var(--primary-50);
-  --user-dropdown-menu-item-bg: var(--additional-50);
-  --user-dropdown-menu-text-color: var(--additional-950);
-  --user-dropdown-chevron-color: var(--secondary-600);
-  --user-dropdown-chevron-color-hover: var(--secondary-700);
-  --user-dropdown-wrap-bg: var(--additional-50);
-  --user-dropdown-button-width: var(--app-bar-button-width);
+  --user-dropdown-wrap-bg: var(--neutrals-50);
+  --user-dropdown-border-color: var(--neutrals-200);
+  --user-dropdown-wrap-padding-left: 18px;
 }
 
 .vc-user-dropdown-button {
-  @apply tw-border-l tw-border-solid tw-border-l-[color:var(--user-dropdown-border-color)]  tw-cursor-pointer
-  tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
+  @apply tw-w-full tw-cursor-pointer tw-relative tw-flex tw-h-[var(--user-dropdown-height)] tw-flex-col tw-select-none tw-overflow-hidden tw-border-solid tw-border-t tw-border-t-[var(--user-dropdown-border-color)];
+
+  &:hover {
+    .vc-user-dropdown-button__trigger {
+      @apply tw-visible tw-translate-x-0;
+    }
+  }
 
   .vc-app_mobile & {
     @apply tw-w-full #{!important};
   }
 
   &--mobile {
-    @apply tw-h-[var(--app-bar-height)];
   }
 
   &--auto-width {
     @apply tw-w-auto;
   }
 
-  &__button {
-    @apply tw-w-[var(--user-dropdown-button-width)] tw-h-full tw-flex tw-items-center tw-justify-center tw-relative;
-  }
-
   &__wrap {
-    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-px-4 tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
-  }
-
-  &__header {
-    @apply tw-flex tw-justify-between tw-items-center tw-px-3 tw-py-3 tw-bg-[--user-dropdown-wrap-bg] tw-gap-3 tw-truncate;
-  }
-
-  &__header-wrap {
-    @apply tw-flex tw-justify-between tw-items-center;
+    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-pl-[var(--user-dropdown-wrap-padding-left)] tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
   }
 
-  &__avatar {
-    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--user-dropdown-account-info-role-color)]
-    tw-bg-cover tw-bg-center tw-shrink-0;
+  &--collapsed {
   }
 
-  &__icon {
-    @apply tw-text-[color:var(--user-dropdown-button-color)];
+  &__actions {
+    @apply tw-h-full;
   }
 
-  &__info {
-    @apply tw-grow tw-basis-0 tw-overflow-hidden;
-  }
-
-  &__name {
-    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-max-w-[250px] tw-truncate;
-  }
-
-  &__role {
-    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-role-color)];
-  }
-
-  &__chevron {
-    @apply tw-text-[color:var(--user-dropdown-chevron-color)] tw-transition-colors tw-duration-200;
-  }
-
-  &:hover &__chevron {
-    @apply tw-text-[color:var(--user-dropdown-chevron-color-hover)];
-  }
-
-  &--active &__chevron {
-    @apply -tw-scale-y-100;
-  }
-
-  &__menu {
-    @apply tw-w-full;
-
-    &-item {
-      @apply tw-p-3 tw-text-sm tw-text-[color:var(--user-dropdown-menu-text-color)] tw-border-solid tw-border-b tw-border-b-[color:var(--user-dropdown-divider-color)] tw-bg-[color:var(--user-dropdown-menu-item-bg)] tw-flex tw-flex-row tw-items-center tw-cursor-pointer;
-      transition: background-color 0.2s;
-
-      &:hover {
-        @apply tw-bg-[color:var(--user-dropdown-menu-item-bg-hover)];
-
-        .vc-user-dropdown-button__menu-icon {
-          @apply tw-text-[color:var(--user-dropdown-button-color-hover)];
-        }
-      }
-
-      &:last-of-type {
-        @apply tw-border-b-0;
-      }
-    }
-  }
-
-  &__menu-icon {
-    @apply tw-mr-3 tw-text-[color:var(--user-dropdown-button-color)];
-  }
-
-  .vc-app_mobile & {
-    &__menu {
-      @apply tw-static tw-shadow-none #{!important};
-    }
-
-    &__menu-item {
-      @apply tw-border-none #{!important};
-    }
-
-    &__wrap--active {
-      @apply tw-shadow-none;
-    }
+  &__trigger {
+    @apply tw-invisible tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-1 tw-bg-[--user-dropdown-button-bg] tw-translate-x-full tw-transition-all tw-duration-300 tw-ease-in-out;
   }
 }
 </style>

package/shared/composables/useMenuExpanded.ts

@@ -0,0 +1,40 @@
+import { useLocalStorage } from "@vueuse/core";
+import { ref } from "vue";
+
+const STORAGE_KEY = "VC_APP_MENU_EXPANDED";
+const HOVER_DELAY = 200;
+
+const isHoverExpanded = ref(false);
+
+export const useMenuExpanded = () => {
+  const isExpanded = useLocalStorage(STORAGE_KEY, true);
+
+  let expandTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+  };
+
+  const toggleHoverExpanded = (shouldExpand?: boolean) => {
+    if (expandTimeout) {
+      clearTimeout(expandTimeout);
+    }
+
+    if (shouldExpand) {
+      expandTimeout = setTimeout(() => {
+        if (isHoverExpanded.value !== shouldExpand) {
+          isHoverExpanded.value = shouldExpand;
+        }
+      }, HOVER_DELAY);
+    } else if (shouldExpand === false) {
+      isHoverExpanded.value = shouldExpand;
+    }
+  };
+
+  return {
+    isExpanded,
+    toggleExpanded,
+    isHoverExpanded,
+    toggleHoverExpanded,
+  };
+};

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -54,7 +54,7 @@
                         </div>
                         <VcButton
                           icon="far fa-copy"
-                          size="m"
+                          icon-size="m"
                           class="tw-ml-2"
                           text
                           :title="t('ASSETS.PAGES.DETAILS.FIELDS.COPY')"
@@ -220,7 +220,7 @@ function openLink(link: string | undefined) {
 
 <style lang="scss">
 :root {
-  --assets-details-border: var(--base-border-color, var(--neutrals-200));
+  --assets-details-border: var(--neutrals-200);
   --assets-details-thumbnail-color: var(--secondary-500);
 }
 </style>

package/shared/modules/assets/index.ts

@@ -1,7 +1,6 @@
 import { createAppModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 
-// Declare globally
 declare module "@vue/runtime-core" {
   export interface GlobalComponents {
     AssetsDetails: (typeof components)["AssetsDetails"];

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -392,7 +392,6 @@ const actionBuilder = (): IActionBuilderResult<ICommonAsset>[] => {
     icon: "fas fa-trash",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
     type: "danger",
-    position: "left",
     async clickHandler(item: ICommonAsset) {
       defaultAssets.value = await props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];