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

package/ui/components/organisms/vc-app/vc-app.stories.ts

@@ -1,214 +1,214 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcApp } from "./";
-import { usePopup } from "../../../..";
-import { VcPopup } from "..";
-import { useMenuService } from "../../../../core/composables/useMenuService";
-
-export default {
-  title: "organisms/VcApp",
-  component: VcApp,
-  args: {
-    isReady: true,
-    version: "0.0.100",
-    title: "VC-Shell Application",
-    logo: "images/main-logo.svg",
-  },
-  decorators: [
-    () => ({
-      template: `
-      <div
-        class="tw-h-[600px]"
-        style="--app-bar-divider-color: #ffffff;">
-        <story/>
-      </div>`,
-    }),
-  ],
-} satisfies Meta<typeof VcApp>;
-
-export const Primary: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    const { addMenuItem } = useMenuService();
-
-    addMenuItem({
-      title: "SHELL.MENU.DASHBOARD",
-      icon: "fas fa-home",
-      priority: 0,
-      url: "/",
-    });
-    return { args };
-  },
-  template: `
-  <vc-app v-bind="args"></vc-app>
-`,
-});
-
-export const CustomAppSwitcherSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    return { args };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #app-switcher>
-      <VcButton>Custom App Switcher</VcButton>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomAppSwitcherSlot.parameters = {
-  docs: {
-    description: {
-      story: "You could use the `app-switcher` slot to customize the app switcher or to remove it.",
-    },
-  },
-};
-
-export const CustomToolbarSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    return { args };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #toolbar="{
-      LanguageSelector,
-      UserDropdownButton,
-      NotificationDropdown
-    }">
-      <div class="tw-flex tw-items-center tw-space-x-4">
-        <component :is="LanguageSelector" />
-        <component :is="UserDropdownButton" />
-        <component :is="NotificationDropdown" />
-
-        <VcButton>Custom Toolbar</VcButton>
-      </div>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomToolbarSlot.parameters = {
-  docs: {
-    description: {
-      story: "You could use the `toolbar` slot to customize the toolbar or to remove it.",
-    },
-  },
-};
-
-export const CustomToolbarPrependSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    return { args };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #toolbar:prepend>
-      <VcButton>Custom Toolbar Prepend</VcButton>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomToolbarPrependSlot.parameters = {
-  docs: {
-    description: {
-      story: "You could use the `toolbar:prepend` slot to prepend content to the toolbar.",
-    },
-  },
-};
-
-export const CustomToolbarLanguageSelectorSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    const { open } = usePopup({
-      component: VcPopup,
-      props: {
-        title: "Select a language",
-      },
-      slots: {
-        content: "Lorem ipsum dolor",
-      },
-    });
-    return { args, open };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #toolbar:language-selector>
-      <VcButton @click="open">Click me!</VcButton>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomToolbarLanguageSelectorSlot.parameters = {
-  docs: {
-    description: {
-      story: "You could use the `toolbar:language-selector` slot to customize the language selector or to remove it.",
-    },
-  },
-};
-
-export const CustomNotificationsDropdownSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    const { open } = usePopup({
-      component: VcPopup,
-      props: {
-        title: "Notifications",
-      },
-      slots: {
-        content: "Lorem ipsum dolor",
-      },
-    });
-    return { args, open };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #toolbar:notifications-dropdown>
-      <VcButton @click="open">Click me!</VcButton>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomNotificationsDropdownSlot.parameters = {
-  docs: {
-    description: {
-      story:
-        "You could use the `toolbar:notifications-dropdown` slot to customize the notifications dropdown or to remove it.",
-    },
-  },
-};
-
-export const CustomUserDropdownButtonSlot: StoryFn<typeof VcApp> = (args) => ({
-  components: { VcApp },
-  setup() {
-    const { open } = usePopup({
-      component: VcPopup,
-      props: {
-        title: "User",
-      },
-      slots: {
-        content: "Lorem ipsum dolor",
-      },
-    });
-    return { args, open };
-  },
-  template: `
-  <vc-app v-bind="args">
-    <template #toolbar:user-dropdown>
-      <VcButton @click="open">Click me!</VcButton>
-    </template>
-  </vc-app>
-`,
-});
-
-CustomUserDropdownButtonSlot.parameters = {
-  docs: {
-    description: {
-      story: "You could use the `toolbar:user-dropdown` slot to customize the user dropdown button or to remove it.",
-    },
-  },
-};
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcApp } from "./";
+import { usePopup } from "../../../..";
+import { VcPopup } from "..";
+import { useMenuService } from "../../../../core/composables/useMenuService";
+
+export default {
+  title: "organisms/VcApp",
+  component: VcApp,
+  args: {
+    isReady: true,
+    version: "0.0.100",
+    title: "VC-Shell Application",
+    logo: "images/main-logo.svg",
+  },
+  decorators: [
+    () => ({
+      template: `
+      <div
+        class="tw-h-[600px]"
+        style="--app-bar-divider-color: #ffffff;">
+        <story/>
+      </div>`,
+    }),
+  ],
+} satisfies Meta<typeof VcApp>;
+
+export const Primary: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { addMenuItem } = useMenuService();
+
+    addMenuItem({
+      title: "SHELL.MENU.DASHBOARD",
+      icon: "fas fa-home",
+      priority: 0,
+      url: "/",
+    });
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args"></vc-app>
+`,
+});
+
+export const CustomAppSwitcherSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #app-switcher>
+      <VcButton>Custom App Switcher</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomAppSwitcherSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `app-switcher` slot to customize the app switcher or to remove it.",
+    },
+  },
+};
+
+export const CustomToolbarSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar="{
+      LanguageSelector,
+      UserDropdownButton,
+      NotificationDropdown
+    }">
+      <div class="tw-flex tw-items-center tw-space-x-4">
+        <component :is="LanguageSelector" />
+        <component :is="UserDropdownButton" />
+        <component :is="NotificationDropdown" />
+
+        <VcButton>Custom Toolbar</VcButton>
+      </div>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar` slot to customize the toolbar or to remove it.",
+    },
+  },
+};
+
+export const CustomToolbarPrependSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:prepend>
+      <VcButton>Custom Toolbar Prepend</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarPrependSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:prepend` slot to prepend content to the toolbar.",
+    },
+  },
+};
+
+export const CustomToolbarLanguageSelectorSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "Select a language",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:language-selector>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomToolbarLanguageSelectorSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:language-selector` slot to customize the language selector or to remove it.",
+    },
+  },
+};
+
+export const CustomNotificationsDropdownSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "Notifications",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:notifications-dropdown>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomNotificationsDropdownSlot.parameters = {
+  docs: {
+    description: {
+      story:
+        "You could use the `toolbar:notifications-dropdown` slot to customize the notifications dropdown or to remove it.",
+    },
+  },
+};
+
+export const CustomUserDropdownButtonSlot: StoryFn<typeof VcApp> = (args) => ({
+  components: { VcApp },
+  setup() {
+    const { open } = usePopup({
+      component: VcPopup,
+      props: {
+        title: "User",
+      },
+      slots: {
+        content: "Lorem ipsum dolor",
+      },
+    });
+    return { args, open };
+  },
+  template: `
+  <vc-app v-bind="args">
+    <template #toolbar:user-dropdown>
+      <VcButton @click="open">Click me!</VcButton>
+    </template>
+  </vc-app>
+`,
+});
+
+CustomUserDropdownButtonSlot.parameters = {
+  docs: {
+    description: {
+      story: "You could use the `toolbar:user-dropdown` slot to customize the user dropdown button or to remove it.",
+    },
+  },
+};

package/ui/components/organisms/vc-app/vc-app.vue

@@ -20,7 +20,6 @@
         :logo="logo"
         :title="title"
         :disable-menu="disableMenu"
-        @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
         @backlink:click="closeBlade(blades.length - 1)"
         @logo:click="openRoot"
       >
@@ -33,38 +32,17 @@
           </slot>
         </template>
 
+        <template #logo:append>
+          <slot name="logo:append"></slot>
+        </template>
+
         <!-- Toolbar slot -->
         <template #toolbar>
-          <!-- <slot
-            name="toolbar"
-            v-bind="{
-              LanguageSelector,
-              UserDropdownButton,
-              NotificationDropdown,
-              ThemeSelector,
-            }"
-          >
-            <slot
-              v-if="$slots['toolbar:prepend']"
-              name="toolbar:prepend"
-            ></slot>
-            <slot name="toolbar:theme-selector">
-              <ThemeSelector />
-            </slot>
-            <slot name="toolbar:language-selector">
-              <LanguageSelector />
-            </slot>
-            <slot name="toolbar:notifications-dropdown">
-              <NotificationDropdown />
-            </slot>
-          </slot> -->
-
-          <slot
-            name="toolbar:notifications-dropdown"
-            :notifications-dropdown="NotificationDropdown"
-          >
-            <NotificationDropdown />
-          </slot>
+          <slot name="toolbar" />
+        </template>
+
+        <template #notifications-dropdown>
+          <NotificationDropdown />
         </template>
 
         <template #navmenu>
@@ -79,12 +57,11 @@
         </template>
 
         <template #user-dropdown>
-          <slot
-            name="toolbar:user-dropdown"
-            :user-dropdown="UserDropdownComponent as unknown as typeof UserDropdownButton"
-          >
-            <UserDropdownComponent />
-          </slot>
+          <UserDropdownButton
+            :avatar="avatar"
+            :name="name"
+            :role="role"
+          />
         </template>
       </VcAppBar>
 
@@ -93,9 +70,7 @@
         v-if="isAuthenticated"
         class="vc-app__workspace"
       >
-        <slot name="blade-navigation">
-          <VcBladeNavigation />
-        </slot>
+        <VcBladeNavigation />
       </div>
 
       <!-- Popup container -->
@@ -105,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-import { h, inject, provide } from "vue";
+import { h, inject, provide, computed } 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 {
@@ -118,9 +93,16 @@ import {
 } from "./../../../../shared/components";
 import { useNotifications, useUser } from "../../../../core/composables";
 import { useRoute, useRouter } from "vue-router";
-import { watchOnce } from "@vueuse/core";
+import { watchOnce, useLocalStorage } 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";
+import { ChangePasswordButton } from "../../../../shared/components/change-password-button";
+import { LogoutButton } from "../../../../shared/components/logout-button";
+import { useI18n } from "vue-i18n";
+import { createGlobalSearch } from "../../../../core/composables/useGlobalSearch";
 
 export interface Props {
   isReady: boolean;
@@ -139,17 +121,11 @@ defineOptions({
 
 defineSlots<{
   "app-switcher": void;
-  // toolbar: (props: {
-  //   UserDropdownButton: typeof UserDropdownButton;
-  //   LanguageSelector: typeof LanguageSelector;
-  //   NotificationDropdown: typeof NotificationDropdown;
-  // }) => void;
-  "toolbar:prepend": void;
-  "toolbar:language-selector": void;
-  "toolbar:notifications-dropdown": (props: { notificationsDropdown: typeof NotificationDropdown }) => void;
+  toolbar: void;
   "toolbar:user-dropdown": (props: { userDropdown: typeof UserDropdownButton }) => void;
-  "blade-navigation": void;
+  "toolbar:language-selector": void;
   "toolbar:theme-selector": void;
+  "logo:append": void;
 }>();
 
 const props = defineProps<Props>();
@@ -159,8 +135,9 @@ console.debug("vc-app: Init vc-app");
 const internalRoutes = inject("bladeRoutes") as BladeRoutesRecord[];
 const dynamicModules = inject("$dynamicModules", undefined) as Record<string, unknown> | undefined;
 const router = useRouter();
+createGlobalSearch();
 
-const { openBlade, closeBlade, resolveBladeByName, blades } = useBladeNavigation();
+const { openBlade, closeBlade, resolveBladeByName, blades, goToRoot } = useBladeNavigation();
 const { appsList, switchApp, getApps } = useAppSwitcher();
 
 const { loadFromHistory } = useNotifications();
@@ -170,17 +147,40 @@ const routes = router.getRoutes();
 
 const { getToolbarMenuItems } = useToolbarSlots();
 
-const UserDropdownComponent = () => {
-  return h(UserDropdownButton, {
-    avatar: props.avatar,
-    role: props.role,
-    name: props.name,
-    menuItems: getToolbarMenuItems(),
-  });
-};
+const settingsMenu = useSettingsMenu();
+provide(SettingsMenuKey, settingsMenu);
+
+const { t } = useI18n({ useScope: "global" });
+
+const { registerMenuItem } = settingsMenu;
+
+registerMenuItem({
+  id: "language-selector",
+  component: LanguageSelector,
+  order: 20,
+});
+
+registerMenuItem({
+  id: "theme-selector",
+  component: ThemeSelector,
+  order: 10,
+});
+
+registerMenuItem({
+  id: "change-password",
+  component: ChangePasswordButton,
+  order: 30,
+});
+
+registerMenuItem({
+  id: "logout",
+  component: LogoutButton,
+  order: 100,
+});
 
 const onMenuItemClick = function (item: MenuItem) {
   console.debug(`vc-app#onMenuItemClick() called.`);
+
   if (item.routeId) {
     openBlade(
       {
@@ -204,10 +204,7 @@ const openRoot = async () => {
   const isPrevented = await closeBlade(1);
 
   if (!isPrevented) {
-    const mainRoute = routes.find((route) => route.meta?.root);
-    const mainRouteAlias = routes.find((route) => route.aliasOf?.path === mainRoute?.path) ?? mainRoute;
-
-    router.push({ name: mainRouteAlias?.name, params: route.params });
+    router.push(goToRoot());
   }
 };
 
@@ -261,5 +258,11 @@ provide("$dynamicModules", dynamicModules);
   &__user-dropdown-button {
     @apply tw-p-0 tw-mb-2 tw-w-full tw-h-auto;
   }
+
+  &_mobile {
+    .vc-app__main-content {
+      @apply tw-flex-col;
+    }
+  }
 }
 </style>