@vc-shell/framework 1.0.327 → 1.1.0-alpha.1

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

@@ -0,0 +1,68 @@
+<template>
+  <div class="vc-user-actions">
+    <div class="vc-user-actions__trigger">
+      <div class="vc-user-actions__buttons">
+        <button
+          v-for="(item, i) in profileMenu"
+          :key="`action_btn_${i}`"
+          class="vc-user-actions__btn"
+          @click="$emit('action:click', item)"
+        >
+          <VcIcon
+            v-if="item.icon"
+            :icon="item.icon"
+            size="l"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "../../../../ui/components";
+import type { IMenuItem } from "../../../../core/types";
+
+defineProps<{
+  profileMenu: IMenuItem[];
+}>();
+
+defineEmits<{
+  (e: "action:click", item: IMenuItem): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-user-actions {
+  @apply tw-relative tw-h-full;
+
+  &__trigger {
+    @apply tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-1 tw-bg-[--user-dropdown-button-bg];
+  }
+
+  &__buttons {
+    @apply tw-flex tw-absolute tw-right-0 tw-top-0 tw-h-full tw-translate-x-full;
+    transition: transform 0.3s ease;
+  }
+
+  &__btn {
+    @apply tw-w-12 tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--user-dropdown-button-icon-color)];
+
+    &:nth-child(1) {
+      @apply tw-bg-[--user-dropdown-button-bg];
+
+      &:hover {
+        @apply tw-bg-[--user-dropdown-button-bg-hover];
+      }
+    }
+
+    &:nth-child(2) {
+      @apply tw-bg-[--user-dropdown-button-bg-logout];
+
+      &:hover {
+        @apply tw-bg-[--user-dropdown-button-bg-logout-hover];
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<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"
+      size="xxl"
+      class="vc-user-info__icon"
+    />
+    <div 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>
+  </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;
+}
+
+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">
+.vc-user-info {
+  @apply tw-flex tw-items-center 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;
+  }
+
+  &__icon {
+    @apply tw-text-[color:var(--user-dropdown-button-color)];
+  }
+
+  &__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)];
+  }
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <Sidebar
+    :is-expanded="isOpened"
+    position="left"
+    render="always"
+    :title="$t('SHELL.ACCOUNT.SETTINGS')"
+    @close="$emit('update:isOpened', false)"
+  >
+    <template #content>
+      <div
+        v-if="menuItems && isOpened"
+        class="vc-user-sidebar__menu"
+        @click.stop="$emit('update:isOpened', false)"
+      >
+        <!-- Render components separately -->
+        <template
+          v-for="(item, i) in renderContentItems"
+          :key="`render_${i}`"
+        >
+          <component :is="item.component" />
+        </template>
+
+        <!-- Regular menu items -->
+        <template
+          v-for="(item, i) in regularMenuItems"
+          :key="`menu_${i}`"
+        >
+          <SettingsMenuItem
+            :icon="item.icon"
+            :title="$t(item.title as string)"
+            @click="$emit('item:click', item)"
+          />
+        </template>
+      </div>
+    </template>
+  </Sidebar>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { Sidebar } from "../../sidebar";
+import { IMenuItem } from "../../../../core/types";
+import { SettingsMenuItem } from "../../menu-item";
+
+const props = defineProps<{
+  isOpened: boolean;
+  menuItems: IMenuItem[];
+}>();
+
+defineEmits<{
+  (e: "update:isOpened", value: boolean): void;
+  (e: "item:click", item: IMenuItem): void;
+}>();
+
+// Separate menu items into components and regular items
+const renderContentItems = computed(() => props.menuItems.filter((item) => item.component));
+
+const regularMenuItems = computed(() => props.menuItems.filter((item) => !item.component));
+</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/composables/useUserActions.ts

@@ -0,0 +1,56 @@
+import { ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useUser } from "../../../../core/composables";
+import { useRouter } from "vue-router";
+import { useBladeNavigation } from "../..";
+import { usePopup } from "../../popup-handler/composables/usePopup";
+import { ChangePassword } from "../../change-password";
+import type { IMenuItem } from "../../../../core/types";
+import { LogoutIcon, SettingsBoltIcon } from "../../../../ui/components/atoms/vc-icon/icons";
+
+export function useUserActions() {
+  const { t } = useI18n({ useScope: "global" });
+  const { signOut } = useUser();
+  const router = useRouter();
+  const { closeBlade } = useBladeNavigation();
+  const { open } = usePopup({ component: ChangePassword });
+
+  const signOutButton = ref<IMenuItem>({
+    title: computed(() => t("SHELL.ACCOUNT.LOGOUT")),
+    icon: LogoutIcon,
+    async clickHandler() {
+      const isPrevented = await closeBlade(0);
+      if (!isPrevented) {
+        await signOut();
+        router.push({ name: "Login" });
+      }
+    },
+  });
+
+  const changePasswordButton = ref<IMenuItem>({
+    title: computed(() => t("SHELL.ACCOUNT.CHANGE_PASSWORD")),
+    icon: SettingsBoltIcon,
+    clickHandler() {
+      open();
+    },
+  });
+
+  const settingsButton = ref<IMenuItem>({
+    title: computed(() => t("SHELL.ACCOUNT.SETTINGS")),
+    icon: SettingsBoltIcon,
+    clickHandler() {
+      return true;
+    },
+  });
+
+  const profileMenu = ref([settingsButton.value]);
+  const defaultMenuItems = ref([changePasswordButton.value, signOutButton.value]);
+
+  return {
+    profileMenu,
+    defaultMenuItems,
+    signOutButton,
+    changePasswordButton,
+    settingsButton,
+  };
+}

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

@@ -1,197 +1,66 @@
 <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>
+    <div
+      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,
+      }"
+    >
+      <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"
+        />
+        <UserActions
+          :profile-menu="profileMenu"
+          @action:click="handleActionClick"
+        />
+      </div>
+    </div>
+
+    <UserSidebar
+      v-model:is-opened="isSidebarOpened"
+      :menu-items="menu"
+      @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 { 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";
+import type { IMenuItem } from "../../../core/types";
+import { useUserActions } from "./composables/useUserActions";
+import { default as UserInfo } from "./_internal/user-info.vue";
+import { default as UserActions } from "./_internal/user-actions.vue";
+import { default as UserSidebar } from "./_internal/user-sidebar.vue";
+import * as _ from "lodash-es";
 
 export interface Props {
   avatarUrl?: string | undefined;
   name?: string | undefined;
   role?: string | undefined;
-  menuItems?: BladeMenu[];
-  baseMenuItemsHandler?: (defaultMenuItems: BladeMenu[]) => BladeMenu[];
+  menuItems?: IMenuItem[];
+  baseMenuItemsHandler?: (defaultMenuItems: IMenuItem[]) => IMenuItem[];
   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" });
-      }
-    },
-  },
-]);
+const isSidebarOpened = ref(false);
+const { profileMenu, defaultMenuItems, settingsButton } = useUserActions();
 
 const menu = computed(() => {
   const defaultItems = handleDefaultMenuItems();
-
   if (defaultItems?.length) {
     return [...props.menuItems, ...defaultItems];
   }
@@ -205,20 +74,27 @@ function handleDefaultMenuItems() {
   return defaultMenuItems.value;
 }
 
-function beforeOpen() {
-  return !props.disabled && menu.value?.length > 0;
+function handleActionClick(item: IMenuItem) {
+  if (_.isEqual(item, settingsButton.value)) {
+    isSidebarOpened.value = true;
+    return;
+  }
+  item.clickHandler?.();
 }
 
-const imageHandler = computed(() => {
-  if (props.avatarUrl) {
-    return `background-image: url(${CSS.escape(props.avatarUrl)})`;
-  }
-  return undefined;
-});
+function handleMenuItemClick(item: IMenuItem) {
+  item.clickHandler?.();
+}
 </script>
 
 <style lang="scss">
 :root {
+  --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(--base-text-color, var(--neutrals-950));
   --user-dropdown-account-info-role-color: var(--secondary-600);
   --user-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
@@ -226,17 +102,23 @@ const imageHandler = computed(() => {
   --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-item-bg: transparent;
   --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-wrap-bg: var(--neutrals-50);
   --user-dropdown-button-width: var(--app-bar-button-width);
+  --user-dropdown-border-color: var(--neutrals-200);
 }
 
 .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-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-actions__buttons {
+      @apply tw-translate-x-0;
+    }
+  }
 
   .vc-app_mobile & {
     @apply tw-w-full #{!important};
@@ -250,92 +132,8 @@ const imageHandler = computed(() => {
     @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;
-  }
-
-  &__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;
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--user-dropdown-button-color)];
-  }
-
-  &__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;
-    }
+    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-pl-5 tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
   }
 }
 </style>

package/tailwind.config.ts

@@ -10,7 +10,7 @@ export default {
   prefix: "tw-",
   theme: {
     fontFamily: {
-      roboto: ["Roboto", "sans-serif"],
+      jakarta: ["Plus Jakarta Sans", "sans-serif"],
     },
     fontSize: {
       xxs: [