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

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"
+        />
+        <!-- <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 } = 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-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));
   --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-relative 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,16 @@
+import { useLocalStorage } from "@vueuse/core";
+
+const STORAGE_KEY = "VC_APP_MENU_EXPANDED";
+
+export const useMenuExpanded = () => {
+  const isExpanded = useLocalStorage(STORAGE_KEY, true);
+
+  const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+  };
+
+  return {
+    isExpanded,
+    toggleExpanded,
+  };
+};

package/shared/composables/useSettingsMenu.ts

@@ -0,0 +1,44 @@
+import { ref, computed, Component } from "vue";
+import type { InjectionKey } from "vue";
+
+export interface SettingsMenuItem {
+  id: string;
+  order?: number;
+  component: Component;
+  props?: Record<string, unknown>;
+}
+
+export interface RegisterSettingsMenuItemOptions extends Omit<SettingsMenuItem, "id"> {
+  id?: string;
+}
+
+const settingsMenuItems = ref<Map<string, SettingsMenuItem>>(new Map());
+
+export const useSettingsMenu = () => {
+  const registerMenuItem = (options: RegisterSettingsMenuItemOptions): string => {
+    const id = options.id || crypto.randomUUID();
+    settingsMenuItems.value.set(id, {
+      id,
+      order: options.order ?? settingsMenuItems.value.size,
+      component: options.component,
+      props: options.props,
+    });
+    return id;
+  };
+
+  const unregisterMenuItem = (id: string): void => {
+    settingsMenuItems.value.delete(id);
+  };
+
+  const items = computed(() => {
+    return Array.from(settingsMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  });
+
+  return {
+    registerMenuItem,
+    unregisterMenuItem,
+    items,
+  };
+};
+
+export const SettingsMenuKey: InjectionKey<ReturnType<typeof useSettingsMenu>> = Symbol("SettingsMenu");

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 = [];

package/shared/modules/dynamic/components/FIELD_MAP.ts

@@ -1,53 +1,53 @@
-import SelectField from "./fields/SelectField";
-import Card from "./fields/Card";
-import InputField from "./fields/InputField";
-import Fieldset from "./fields/Fieldset";
-import InputCurrency from "./fields/InputCurrency";
-import Checkbox from "./fields/Checkbox";
-import DynamicProperty from "./fields/DynamicProperty";
-import EditorField from "./fields/EditorField";
-import GalleryField from "./fields/GalleryField";
-import Button from "./fields/Button";
-import StatusField from "./fields/StatusField";
-import ContentField from "./fields/ContentField";
-import VideoField from "./fields/VideoField";
-import ImageField from "./fields/ImageField";
-import TextareaField from "./fields/TextareaField";
-import MultivalueField from "./fields/MultivalueField";
-import SwitchField from "./fields/SwitchField";
-import Table from "./fields/Table";
-
-import { ControlSchema } from "../types";
-import CustomComponent from "./fields/CustomComponent";
-import RatingField from "./fields/RatingField";
-import RadioButtonGroup from "./fields/RadioButtonGroup";
-
-type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type TFieldMap = Record<AvailableComponents, any>;
-
-const FIELD_MAP: TFieldMap = {
-  "vc-select": SelectField,
-  "vc-card": Card,
-  "vc-input": InputField,
-  "vc-fieldset": Fieldset,
-  "vc-input-currency": InputCurrency,
-  "vc-checkbox": Checkbox,
-  "vc-dynamic-properties": DynamicProperty,
-  "vc-editor": EditorField,
-  "vc-gallery": GalleryField,
-  "vc-button": Button,
-  "vc-status": StatusField,
-  "vc-field": ContentField,
-  "vc-video": VideoField,
-  "vc-image": ImageField,
-  "vc-textarea": TextareaField,
-  "vc-multivalue": MultivalueField,
-  "vc-switch": SwitchField,
-  "vc-table": Table,
-  "vc-custom": CustomComponent,
-  "vc-rating": RatingField,
-  "vc-radio-button-group": RadioButtonGroup,
-};
-
-export default FIELD_MAP;
+import SelectField from "./fields/SelectField";
+import Card from "./fields/Card";
+import InputField from "./fields/InputField";
+import Fieldset from "./fields/Fieldset";
+import InputCurrency from "./fields/InputCurrency";
+import Checkbox from "./fields/Checkbox";
+import DynamicProperty from "./fields/DynamicProperty";
+import EditorField from "./fields/EditorField";
+import GalleryField from "./fields/GalleryField";
+import Button from "./fields/Button";
+import StatusField from "./fields/StatusField";
+import ContentField from "./fields/ContentField";
+import VideoField from "./fields/VideoField";
+import ImageField from "./fields/ImageField";
+import TextareaField from "./fields/TextareaField";
+import MultivalueField from "./fields/MultivalueField";
+import SwitchField from "./fields/SwitchField";
+import Table from "./fields/Table";
+
+import { ControlSchema } from "../types";
+import CustomComponent from "./fields/CustomComponent";
+import RatingField from "./fields/RatingField";
+import RadioButtonGroup from "./fields/RadioButtonGroup";
+
+type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TFieldMap = Record<AvailableComponents, any>;
+
+const FIELD_MAP: TFieldMap = {
+  "vc-select": SelectField,
+  "vc-card": Card,
+  "vc-input": InputField,
+  "vc-fieldset": Fieldset,
+  "vc-input-currency": InputCurrency,
+  "vc-checkbox": Checkbox,
+  "vc-dynamic-properties": DynamicProperty,
+  "vc-editor": EditorField,
+  "vc-gallery": GalleryField,
+  "vc-button": Button,
+  "vc-status": StatusField,
+  "vc-field": ContentField,
+  "vc-video": VideoField,
+  "vc-image": ImageField,
+  "vc-textarea": TextareaField,
+  "vc-multivalue": MultivalueField,
+  "vc-switch": SwitchField,
+  "vc-table": Table,
+  "vc-custom": CustomComponent,
+  "vc-rating": RatingField,
+  "vc-radio-button-group": RadioButtonGroup,
+};
+
+export default FIELD_MAP;