@vc-shell/framework 1.0.128 → 1.0.130

package/shared/components/blade-navigation/injectionKeys.ts

@@ -0,0 +1,4 @@
+import { InjectionKey } from "vue";
+import { BladeVNode } from "./types";
+
+export const navigationViewLocation = Symbol("blade navigation view location") as InjectionKey<BladeVNode>;

package/shared/components/blade-navigation/plugin.ts

@@ -1,7 +1,7 @@
-import { App, ref } from "vue";
-import { createModule } from "./../../../core/plugins";
+import { Router } from "vue-router";
+import { App } from "vue";
 import * as components from "./components";
-import { BladeNavigationPlugin, IBladeContainer, IBladeRef } from "./types";
+import { BladeNavigationPlugin } from "./types";
 
 // Declare globally
 declare module "@vue/runtime-core" {
@@ -13,17 +13,15 @@ declare module "@vue/runtime-core" {
 export let bladeNavigationInstance: BladeNavigationPlugin;
 
 export const VcBladeNavigationComponent = {
-  install(app: App) {
+  install(app: App, args: { router: Router }) {
     // Register components
-    createModule(components).install(app);
+    Object.entries(components).forEach(([componentName, component]) => {
+      app.component(componentName, component);
+    });
 
     // Plugin
-    const blades = ref<IBladeContainer[]>([]);
-    const bladesRefs = ref<IBladeRef[]>([]);
-
     const bladeNavigationPlugin: BladeNavigationPlugin = {
-      blades,
-      bladesRefs,
+      router: args.router,
     };
 
     app.config.globalProperties.$bladeNavigationPlugin = bladeNavigationPlugin;

package/shared/components/blade-navigation/types/index.ts

@@ -1,24 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { RouteRecordNormalized, Router } from "vue-router";
 import {
   AppContext,
   Component,
   ComponentOptionsBase,
   ComponentOptionsMixin,
-  ComponentPublicInstance,
-  ComputedOptions,
   VNode,
   ComponentInternalInstance,
   VNodeTypes,
-  Ref,
-  MethodOptions,
+  ComponentPublicInstance,
 } from "vue";
 import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
 
-/**
- * @deprecated use `ComponentPublicInstanceConstructor` interface instead
- */
-export type ComponentInstanceConstructor<T = any> = ComponentPublicInstanceConstructor<T>;
-
 export type CoreBladeComponentProps = {
   expanded?: boolean;
   closable?: boolean;
@@ -31,29 +24,38 @@ export type CoreDynamicBladeComponentProps = {
   composables?: any;
 };
 
-/**
- * @deprecated use `BladeInstanceConstructor` interface instead
- */
-export type BladePageComponent = BladeInstanceConstructor;
-
-export type CoreComponentData = {
-  isBladeComponent?: boolean;
-};
+export interface MenuItemConfig {
+  id?: string;
+  /**
+   * Menu item title.
+   */
+  title: string;
+  /**
+   * Menu item icon.
+   */
+  icon: string;
+  /**
+   * Menu item group. Is used to group menu items with it's provided name.
+   *
+   * If the path is not specified, the menu item is added to the root of the menu.
+   */
+  group?: string;
+  /**
+   * Position priority.
+   */
+  priority: number;
+}
 
 export type CoreBladeAdditionalSettings = {
   url?: `/${string}`;
   permissions?: string | string[];
   isWorkspace?: boolean;
+  name?: string;
+  menuItem?: MenuItemConfig;
 };
-
-export type CoreBladeNavigationData = {
-  idx?: number;
-};
-
 export interface CoreBladeExposed {
   [x: string]: any;
   title?: string;
-  onBeforeClose?: () => Promise<boolean>;
   reloadParent?: () => void;
   reload?: () => void;
 }
@@ -64,22 +66,13 @@ export interface IParentCallArgs {
   callback?: (args: unknown) => void;
 }
 
-export interface IBladeContainer extends IBladeEvent {
-  idx?: number;
-}
-
 export interface BladeComponentInternalInstance extends ComponentInternalInstance {
-  vnode: VNode & { type: VNodeTypes & CoreBladeAdditionalSettings & CoreBladeNavigationData };
+  vnode: VNode & BladeVNode;
   appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
 }
 
 export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
 
-/**
- * @deprecated use `BladeInstanceConstructor` interface instead
- */
-export type BladeConstructor<T extends ComponentPublicInstance = ComponentPublicInstance> = BladeInstanceConstructor<T>;
-
 type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
 
 export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
@@ -90,9 +83,7 @@ export type BladeInstanceConstructor<T extends Component = Component> = Extracto
     $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
   };
 } & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
-  CoreComponentData &
-  CoreBladeAdditionalSettings &
-  CoreBladeNavigationData;
+  CoreBladeAdditionalSettings;
 
 export interface IBladeEvent<T extends Component = Component> {
   blade: BladeInstanceConstructor<T>;
@@ -102,14 +93,32 @@ export interface IBladeEvent<T extends Component = Component> {
   onClose?: () => void;
 }
 
-export interface IBladeRef {
-  exposed: CoreBladeExposed;
-  blade: IBladeContainer;
-  expanded?: boolean;
-  active?: boolean;
+export interface BladeNavigationPlugin {
+  router: Router;
 }
 
-export interface BladeNavigationPlugin {
-  blades: Ref<IBladeContainer[]>;
-  bladesRefs: Ref<IBladeRef[]>;
+type VNodeMountHook = (vnode: BladeVNode | VNode) => void;
+export interface BladeVNode extends VNode {
+  props: {
+    navigation: {
+      onOpen?: () => void;
+      onClose?: () => void;
+      fullPath: string;
+      bladePath?: string;
+      idx: number;
+      uniqueRouteKey: string;
+    };
+    onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
+    onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
+  } & Omit<VNode["props"], "onVnodeUnmounted" | "onVnodeMounted"> &
+    CoreBladeComponentProps;
+  type: VNodeTypes & BladeInstanceConstructor;
+}
+
+export interface BladeRouteRecordLocationNormalized extends RouteRecordNormalized {
+  components: Record<string, BladeVNode>;
+  instances: Record<
+    string,
+    ComponentPublicInstance<CoreBladeExposed, any, CoreBladeExposed, any, CoreBladeExposed, any, any, any, any, any>
+  >;
 }

package/shared/components/index.ts

@@ -6,3 +6,5 @@ export * from "./popup-handler";
 export * from "./change-password";
 export * from "./language-selector";
 export * from "./user-dropdown-button";
+export * from "./notification-dropdown";
+export * from "./notification-template";

package/shared/components/language-selector/language-selector.vue

@@ -6,7 +6,7 @@
       }
     "
     class="tw-relative"
-    :title="title"
+    :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
     @click.stop="isDropActive = !isDropActive"
   >
     <div
@@ -43,18 +43,18 @@
 import { VcIcon } from "./../../../ui/components";
 import { ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
+import { useI18n } from "vue-i18n";
 
-export interface Props {
-  title: string;
-  value: string;
-  languageItems: { lang: string; title: string; clickHandler: (lang: string) => void }[];
-}
-
-withDefaults(defineProps<Props>(), {
-  title: "",
-  value: "",
-  languageItems: () => [],
-});
+const { locale: currentLocale, availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
 
 const isDropActive = ref(false);
+
+const languageItems = availableLocales.map((locale: string) => ({
+  lang: locale,
+  title: (getLocaleMessage(locale) as { language_name: string }).language_name,
+  clickHandler(lang: string) {
+    currentLocale.value = lang;
+    localStorage.setItem("VC_LANGUAGE_SETTINGS", lang);
+  },
+}));
 </script>

package/{ui/components/organisms/vc-notification-dropdown → shared/components/notification-dropdown}/_internal/notification/notification.vue

@@ -5,7 +5,7 @@
         <notificationTemplateRenderer />
       </template>
       <template v-else>
-        <VcNotificationTemplate
+        <NotificationTemplate
           :color="notificationStyle.color"
           :title="notification.title ?? ''"
           :icon="notificationStyle.icon"
@@ -16,7 +16,7 @@
             class="tw-mb-1"
             >{{ notification.description }}</VcHint
           >
-        </VcNotificationTemplate>
+        </NotificationTemplate>
       </template>
     </VcRow>
   </div>
@@ -24,9 +24,10 @@
 
 <script lang="ts" setup>
 import { computed, h } from "vue";
-import { PushNotification } from "./../../../../../../core/api/platform";
-import { VcRow, VcNotificationTemplate } from "./../../../../";
-import { NotificationTemplateConstructor } from "./../../../../../../core/types";
+import { PushNotification } from "./../../../../../core/api/platform";
+import { VcRow } from "./../../../../../ui/components";
+import { NotificationTemplate } from "./../../../notification-template";
+import { NotificationTemplateConstructor } from "../../../../../core/types";
 
 export interface Props {
   notification: PushNotification;

package/shared/components/notification-dropdown/index.ts

@@ -0,0 +1,10 @@
+import _NotificationDropdown from "./notification-dropdown.vue";
+
+export const NotificationDropdown = _NotificationDropdown as typeof _NotificationDropdown;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    NotificationDropdown: typeof NotificationDropdown;
+  }
+}

package/{ui/components/organisms/vc-notification-dropdown/vc-notification-dropdown.vue → shared/components/notification-dropdown/notification-dropdown.vue}

@@ -6,7 +6,7 @@
       }
     "
     class="tw-relative tw-flex tw-items-center tw-h-full"
-    :title="title"
+    :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
     @click.stop="toggleNotificationsDrop"
   >
     <div
@@ -65,7 +65,7 @@
           >
             <NotificationItem
               :notification="item"
-              :templates="templates || []"
+              :templates="notificationTemplates || []"
               @on-click="() => (isDropdownVisible = false)"
             />
           </div>
@@ -74,7 +74,7 @@
           v-else
           class="tw-flex tw-justify-center tw-items-center tw-p-4"
         >
-          {{ t("COMPONENTS.ORGANISMS.VC_NOTIFICATION_DROPDOWN.EMPTY") }}
+          {{ t("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY") }}
         </div>
       </VcContainer>
     </div>
@@ -82,30 +82,34 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, inject, computed } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
-import { PushNotification } from "./../../../../core/api/platform";
-import { VcCol, VcContainer, VcIcon } from "./../../";
+import { VcCol, VcContainer, VcIcon } from "../../../ui/components";
 import { vOnClickOutside } from "@vueuse/components";
-import { NotificationTemplateConstructor } from "./../../../../core/types";
 import { useI18n } from "vue-i18n";
+import { NotificationTemplateConstructor } from "../../../core/types";
+import { useNotifications } from "../../../core/composables";
 
-export interface Props {
-  title: string;
-  isAccent?: boolean;
-  notifications: PushNotification[];
-  templates?: NotificationTemplateConstructor[];
-  onOpen?: () => void;
-}
+const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
 
-const props = defineProps<Props>();
 const { t } = useI18n({ useScope: "global" });
+const { notifications, markAllAsRead } = useNotifications();
+
 const isDropdownVisible = ref(false);
 
+const isAccent = computed(() => {
+  return notifications.value.some((item) => item.isNew);
+});
+
 function toggleNotificationsDrop() {
   isDropdownVisible.value = !isDropdownVisible.value;
-  if (props.onOpen && typeof props.onOpen === "function") {
-    props.onOpen();
+
+  onOpen();
+}
+
+function onOpen() {
+  if (notifications.value.some((x) => x.isNew)) {
+    markAllAsRead();
   }
 }
 </script>

package/shared/components/notification-template/index.ts

@@ -0,0 +1,10 @@
+import _NotificationTemplate from "./notification-template.vue";
+
+export const NotificationTemplate = _NotificationTemplate as typeof _NotificationTemplate;
+
+// Declare globally
+declare module "@vue/runtime-core" {
+  export interface GlobalComponents {
+    NotificationTemplate: typeof NotificationTemplate;
+  }
+}

package/{ui/components/organisms/vc-notification-template/vc-notification-template.vue → shared/components/notification-template/notification-template.vue}

@@ -30,9 +30,9 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { VcIcon } from "./../../";
+import { VcIcon } from "../../../ui/components";
 import moment from "moment";
-import { PushNotification } from "../../../../core/api/platform";
+import { PushNotification } from "../../../core/api/platform";
 
 export interface Props {
   color: string;

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { VcPopup } from "./../../../../../ui/components";
 import {
   markRaw,
@@ -16,6 +17,7 @@ import { PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
 import { popupPluginInstance } from "./../../plugin";
 import { useI18n } from "vue-i18n";
 import { ComponentPublicInstanceConstructor } from "../../../../utilities/vueUtils";
+import * as _ from "lodash-es";
 
 interface IUsePopup {
   open(): void;
@@ -24,12 +26,18 @@ interface IUsePopup {
   showError(message: string | Ref<string>): void;
 }
 
+function usePopupInternal() {
+  const instance = getCurrentInstance();
+  const popupInstance: PopupPlugin = (instance && inject("popupPlugin")) || popupPluginInstance;
+
+  return popupInstance;
+}
+
 export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-  options?: MaybeRef<UsePopupProps<T>>
+  options?: MaybeRef<UsePopupProps<T>>,
 ): IUsePopup {
   const { t } = useI18n({ useScope: "global" });
-  const instance = getCurrentInstance();
-  const popupInstance: PopupPlugin = (instance && inject("popupPlugin")) || popupPluginInstance;
+  const popupInstance = usePopupInternal();
   let rawPopup: UsePopupProps<DefineComponent> & UsePopupInternal;
 
   if (options) {
@@ -43,9 +51,16 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
         rawPopup = createInstance(unref(newVal));
       }
     },
-    { deep: true }
+    { deep: true },
   );
 
+  function destroy(confirmation: UsePopupProps<DefineComponent>): void {
+    const popupInstanceInternal = usePopupInternal();
+    const index = popupInstanceInternal.popups.findIndex((x) => _.isEqualWith(x, confirmation, (val) => val.component));
+
+    if (index !== -1) popupInstanceInternal.popups.splice(index, 1);
+  }
+
   async function open(customInstance?: UsePopupProps<DefineComponent>) {
     let activeInstance;
     await nextTick();
@@ -53,6 +68,8 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       activeInstance = popupInstance;
     }
 
+    destroy(rawPopup || customInstance);
+
     activeInstance?.popups.push(rawPopup || customInstance);
   }
 
@@ -89,6 +106,8 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       },
     });
 
+    destroy(confirmation);
+
     popupInstance.popups.push(confirmation);
 
     return new Promise((resolve) => {
@@ -114,20 +133,21 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       },
     });
 
+    destroy(confirmation);
+
     popupInstance.popups.push(confirmation);
   }
 
   function createInstance<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-    options: UsePopupProps<T>
+    options: UsePopupProps<T>,
   ) {
     return (
       options &&
       (reactive({
-        id: Symbol("usePopup"),
         ...createComponent(options),
         close: close,
         open: open,
-      }) as UsePopupProps<DefineComponent> & UsePopupInternal)
+      }) as unknown as UsePopupProps<DefineComponent> & UsePopupInternal)
     );
   }
 
@@ -140,7 +160,7 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
 }
 
 function createComponent<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
-  options: UsePopupProps<T>
+  options: UsePopupProps<T>,
 ) {
   const slots =
     typeof options.slots === "undefined"
@@ -151,7 +171,7 @@ function createComponent<T extends ComponentPublicInstanceConstructor<any> = typ
               return [slotName, slotContent];
             }
             return [slotName, markRaw(slotContent)];
-          })
+          }),
         );
 
   return {

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

@@ -9,19 +9,26 @@
     @click.stop="toggleAccountMenuVisible"
   >
     <div
+      v-if="avatarUrl"
       class="user-dropdown-button__avatar"
       :style="imageHandler"
     ></div>
+    <VcIcon
+      v-else
+      icon="fas fa-user-circle"
+      size="xxl"
+      class="tw-text-[color:var(--app-bar-button-color)]"
+    />
     <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
       <div class="user-dropdown-button__name tw-truncate">
-        {{ name }}
+        {{ name || user?.userName }}
       </div>
       <div class="user-dropdown-button__role">
-        {{ role }}
+        {{ role || (user?.isAdministrator ? "Administrator" : "") }}
       </div>
     </div>
     <div
-      v-if="menuItems && menuItems.length"
+      v-if="menu && menu.length && !$isMobile.value"
       class="user-dropdown-button__chevron"
     >
       <VcIcon
@@ -30,12 +37,12 @@
       ></VcIcon>
     </div>
     <div
-      v-if="menuItems && accountMenuVisible"
+      v-if="menu && accountMenuVisible"
       class="user-dropdown-button__menu"
       @click.stop="accountMenuVisible = false"
     >
       <div
-        v-for="(item, i) in menuItems"
+        v-for="(item, i) in menu"
         :key="`menu_item_${i}`"
         class="user-dropdown-button__menu-item"
         @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
@@ -47,31 +54,58 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { Ref, computed, inject, ref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { BladeMenu } from "./../../../core/types";
+import { useUser } from "../../../core/composables";
+import { useBladeNavigation } from "../blade-navigation";
+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";
 
 export interface Props {
-  avatar: string;
-  name: string;
-  role: string;
+  avatarUrl?: string | undefined;
+  name?: string | undefined;
+  role?: string | undefined;
   menuItems?: BladeMenu[];
 }
 const props = withDefaults(defineProps<Props>(), {
   menuItems: () => [],
 });
 
-const imageHandler = computed(() => {
-  if (props.avatar) {
-    return `background-image: url(${CSS.escape(props.avatar)})`;
-  }
-  return undefined;
+const isMobile = inject("isMobile") as Ref<boolean>;
+
+const { user, signOut } = useUser();
+const { closeBlade } = useBladeNavigation();
+const router = useRouter();
+const { t } = useI18n({ useScope: "global" });
+
+const { open } = usePopup({
+  component: ChangePassword,
 });
 
 const accountMenuVisible = ref(false);
+const menu = computed(() => [
+  ...props.menuItems,
+  {
+    title: t("Change password"),
+    clickHandler() {
+      open();
+    },
+  },
+  {
+    title: t("Log Out"),
+    async clickHandler() {
+      await signOut();
+      router.push({ name: "Login" });
+    },
+  },
+]);
 
 const toggleAccountMenuVisible = () => {
-  if (props.menuItems && props.menuItems.length) {
+  if (menu.value && menu.value.length && !isMobile.value) {
     accountMenuVisible.value = !accountMenuVisible.value;
   }
 };
@@ -79,6 +113,13 @@ const toggleAccountMenuVisible = () => {
 const onClose = () => {
   accountMenuVisible.value = false;
 };
+
+const imageHandler = computed(() => {
+  if (props.avatarUrl) {
+    return `background-image: url(${CSS.escape(props.avatarUrl)})`;
+  }
+  return undefined;
+});
 </script>
 
 <style lang="scss">
@@ -109,7 +150,7 @@ const onClose = () => {
   }
 
   &__chevron {
-    @apply tw-text-[#7e8e9d] [transition:transform_0.2s_ease] [transition:color_0.2s_ease];
+    @apply tw-text-[#7e8e9d] [transition:color_0.2s_ease];
   }
 
   &:hover &__chevron {

package/shared/index.ts

@@ -1,3 +1,4 @@
+import { Router } from "vue-router";
 import { App } from "vue";
 import { AssetsDetailsModule } from "./modules/assets";
 import { VcAppSwitcherComponent } from "./components/app-switcher";
@@ -8,7 +9,7 @@ import * as locales from "./locales";
 import { i18n } from "./../core/plugins";
 
 export const SharedModule = {
-  install(app: App): void {
+  install(app: App, args: { router: Router }): void {
     // Load locales
     if (locales) {
       Object.entries(locales).forEach(([key, message]) => {
@@ -19,7 +20,7 @@ export const SharedModule = {
     app
       .use(AssetsDetailsModule)
       .use(AssetsManagerModule)
-      .use(VcBladeNavigationComponent)
+      .use(VcBladeNavigationComponent, { router: args.router })
       .use(VcAppSwitcherComponent)
       .use(VcPopupHandler);
   },

package/shared/locales/en.json

@@ -30,6 +30,13 @@
         "Incorrect password.": "You entered an incorrect password",
         "You have used this password in the past. Choose another one.": "You have used this password in the past. Choose another one."
       }
+    },
+    "NOTIFICATION_DROPDOWN": {
+      "TITLE": "Notifications",
+      "EMPTY": "No notifications yet"
+    },
+    "LANGUAGE_SELECTOR": {
+      "TITLE": "Language selector"
     }
   }
 }