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

package/shared/components/notification-dropdown/notification-dropdown.vue

@@ -2,45 +2,38 @@
   <AppBarButtonTemplate
     :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
     position="bottom-end"
+    :overlayed="overlayed"
     @toggle="onOpen"
   >
-    <template #button>
+    <template #trigger>
       <div class="vc-notification-dropdown__button">
-        <VcIcon
-          :icon="BellIcon"
-          size="l"
-        />
-        <div
-          :class="{
-            'vc-notification-dropdown__accent': hasUnreadNotifications,
-          }"
-        ></div>
+        <div class="vc-notification-dropdown__button-icon">
+          <VcIcon
+            :icon="BellIcon"
+            size="l"
+          />
+          <div
+            :class="{
+              'vc-notification-dropdown__accent': hasUnreadNotifications,
+            }"
+          ></div>
+        </div>
       </div>
     </template>
 
-    <template #dropdown-content="{ opened, toggle }">
-      <Sidebar
-        :is-expanded="$isMobile.value ? opened : false"
-        position="right"
-        render="mobile"
-        @close="toggle"
+    <template #content="{ toggle }">
+      <GenericDropdown
+        :items="notifications"
+        :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
+        @item-click="toggle"
       >
-        <template #content>
-          <GenericDropdown
-            :opened="opened"
-            :items="notifications"
-            :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
-            :on-item-click="() => toggle()"
-          >
-            <template #item="{ item }">
-              <NotificationItem
-                :notification="item"
-                :templates="notificationTemplates || []"
-              />
-            </template>
-          </GenericDropdown>
+        <template #item="{ item }">
+          <NotificationItem
+            :notification="item"
+            :templates="notificationTemplates || []"
+          />
         </template>
-      </Sidebar>
+      </GenericDropdown>
     </template>
   </AppBarButtonTemplate>
 </template>
@@ -50,14 +43,21 @@ import { inject, computed } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
 import { VcIcon } from "../../../ui/components";
 import { useI18n } from "vue-i18n";
-import { NotificationTemplateConstructor } from "../../../core/types";
 import { useNotifications } from "../../../core/composables";
-import { AppBarButtonTemplate } from "./../app-bar-button";
-import { Sidebar } from "./../sidebar";
+import { AppBarButtonTemplate } from "./../../../ui/components/organisms/vc-app";
 import { GenericDropdown } from "../generic-dropdown";
-import { BellIcon } from "./../../../ui/components/atoms/vc-icon/icons";
+import { BellIcon } from "../../../ui/components/atoms/vc-icon/icons";
+import { NotificationTemplatesSymbol } from "./../../../injection-keys";
 
-const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
+export interface Props {
+  overlayed?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  overlayed: false,
+});
+
+const notificationTemplates = inject(NotificationTemplatesSymbol);
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
@@ -76,16 +76,37 @@ function onOpen(state: boolean) {
 <style lang="scss">
 :root {
   --notification-dropdown-accent-color: var(--danger-500);
-  --notification-dropdown-button-width: var(--app-bar-button-width);
 }
 
 .vc-notification-dropdown {
   &__accent {
-    @apply tw-block tw-absolute tw-right-[12px] tw-top-[30px] tw-w-[5px] tw-h-[5px] tw-bg-[--notification-dropdown-accent-color] tw-rounded-full tw-z-[1];
+    @apply tw-block tw-absolute -tw-right-[4px] tw-top-[0px] tw-w-[5px] tw-h-[5px] tw-bg-[--notification-dropdown-accent-color] tw-rounded-full tw-z-[1];
   }
 
   &__button {
-    @apply tw-w-[var(--notification-dropdown-button-width)] tw-h-full tw-flex tw-items-center tw-justify-center tw-relative;
+    @apply tw-flex tw-items-center tw-justify-center tw-relative;
+  }
+
+  &__button-icon {
+    @apply tw-relative;
+  }
+
+  &__item {
+    @apply tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid
+      tw-border-b-[var(--notification-dropdown-border-color)];
+    transition: background-color 0.2s;
+
+    &:last-of-type {
+      @apply tw-border-b-0;
+    }
+
+    &--mobile:not(:last-of-type) {
+      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--notification-dropdown-divider-color)];
+    }
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
   }
 }
 </style>

package/shared/components/notifications/styles/index.scss

@@ -1,10 +1,10 @@
-.notification__container {
-  position: fixed;
-  top: 1em;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
+.notification__container {
+  position: fixed;
+  top: 1em;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}

package/shared/components/settings-menu/index.ts

@@ -0,0 +1 @@
+export { default as SettingsMenu } from "./settings-menu.vue";

package/shared/components/settings-menu/settings-menu.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="vc-settings-menu">
+    <component
+      :is="item.component"
+      v-for="item in items"
+      :key="item.id"
+      v-bind="item.props || {}"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { inject } from "vue";
+import { SettingsMenuKey, useSettingsMenu } from "../../composables/useSettingsMenu";
+
+const settingsMenu = inject(SettingsMenuKey, useSettingsMenu());
+const { items } = settingsMenu;
+</script>
+
+<style lang="scss">
+.vc-settings-menu {
+  @apply tw-w-full;
+}
+</style>

package/shared/components/settings-menu-item/index.ts

@@ -0,0 +1 @@
+export { default as SettingsMenuItem } from "./settings-menu-item.vue";

package/shared/components/settings-menu-item/settings-menu-item.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    class="vc-menu-item"
+    :class="{
+      'vc-menu-item--active': isActive,
+      'vc-menu-item--clickable': !disabled,
+      'vc-menu-item--invisible': !isVisible,
+    }"
+  >
+    <!-- Trigger -->
+    <div
+      class="vc-menu-item__trigger"
+      @click.stop="handleTriggerClick"
+    >
+      <slot name="trigger">
+        <div class="vc-menu-item__content">
+          <slot name="icon">
+            <VcIcon
+              v-if="icon"
+              :icon="icon"
+              size="l"
+              class="vc-menu-item__icon"
+            />
+            <VcImage
+              v-else-if="image"
+              :src="image"
+              class="vc-menu-item__image"
+              :empty-icon="emptyIcon"
+            />
+          </slot>
+
+          <slot name="title">
+            <p class="vc-menu-item__title">{{ title }}</p>
+          </slot>
+
+          <slot name="additional" />
+        </div>
+      </slot>
+    </div>
+
+    <!-- Content -->
+    <slot name="content" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Component } from "vue";
+import { VcIcon, VcImage } from "../../../ui/components";
+
+interface Props {
+  title?: string;
+  icon?: string | Component;
+  image?: string;
+  emptyIcon?: string;
+  isActive?: boolean;
+  disabled?: boolean;
+  isVisible?: boolean;
+  triggerAction?: "click" | "hover" | "none";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+  triggerAction: "click",
+});
+
+const emit = defineEmits<{
+  (e: "trigger:click"): void;
+  (e: "trigger:hover"): void;
+}>();
+
+const handleTriggerClick = () => {
+  if (props.disabled || props.triggerAction === "none") return;
+  emit("trigger:click");
+};
+</script>
+
+<style lang="scss">
+:root {
+  --menu-item-text-color: var(--additional-950);
+  --menu-item-border-color: var(--base-border-color, var(--neutrals-200));
+  --menu-item-bg: transparent;
+  --menu-item-bg-hover: var(--primary-50);
+  --menu-item-icon-color-hover: var(--primary-700);
+  --menu-item-bg-active: var(--primary-50);
+}
+
+.vc-menu-item {
+  @apply tw-flex tw-flex-col;
+
+  &__trigger {
+    @apply tw-p-3 tw-text-sm tw-text-[color:var(--menu-item-text-color)]
+      tw-border-solid tw-border-b tw-border-b-[color:var(--menu-item-border-color)]
+      tw-bg-[color:var(--menu-item-bg)] tw-flex tw-flex-row tw-items-center;
+  }
+
+  &--clickable {
+    @apply tw-cursor-pointer;
+
+    &:hover {
+      @apply tw-bg-[color:var(--menu-item-bg-hover)];
+
+      .vc-menu-item__icon {
+        @apply tw-text-[color:var(--menu-item-icon-color-hover)];
+      }
+    }
+  }
+
+  &--invisible {
+    @apply tw-hidden;
+  }
+
+  &--active {
+    @apply tw-bg-[color:var(--menu-item-bg-active)];
+  }
+
+  &:last-of-type {
+    @apply tw-border-b-0;
+  }
+
+  &__content {
+    @apply tw-flex tw-items-center tw-w-full;
+  }
+
+  &__icon {
+    @apply tw-w-6 tw-mr-3 tw-text-[color:var(--menu-item-icon-color)];
+  }
+
+  &__image {
+    @apply tw-w-6 tw-h-6 tw-mr-3;
+  }
+
+  &__title {
+    @apply tw-flex-grow;
+  }
+}
+</style>

package/shared/components/sidebar/sidebar.vue

@@ -26,10 +26,13 @@
       >
         <component :is="header" />
       </slot>
-
-      <slot name="content"></slot>
+      <div class="sidebar__content">
+        <slot name="content"></slot>
+      </div>
     </div>
   </template>
+
+  <!-- Pass through content if not expanded -->
   <template v-else>
     <slot name="content"></slot>
   </template>
@@ -37,13 +40,14 @@
 
 <script lang="ts" setup>
 import { h } from "vue";
-import { VcIcon } from "../../../ui/components";
+import { VcIcon, CrossSignIcon } from "../../../ui/components";
 
 export interface Props {
   position?: "left" | "right";
   render: "always" | "mobile" | "desktop";
   isExpanded: boolean;
   title?: string;
+  closeCross?: boolean;
 }
 
 export interface Emits {
@@ -55,40 +59,49 @@ const emit = defineEmits<Emits>();
 const props = withDefaults(defineProps<Props>(), {
   position: "right",
   render: "always",
+  closeCross: true,
+});
+
+defineOptions({
+  inheritAttrs: false,
 });
 
 const header = h("div", { class: "sidebar__header" }, [
   props.title ? h("h3", { class: "sidebar__title" }, props.title) : null,
-  h(VcIcon, { icon: "fas fa-times", size: "xl", onClick: () => emit("close") }),
+  props.closeCross
+    ? h(VcIcon, { icon: CrossSignIcon, size: "xs", onClick: () => emit("close"), class: "sidebar__close-icon" })
+    : null,
 ]);
 </script>
 
 <style lang="scss">
 :root {
-  --sidebar-mobile-bg-color: var(--neutral-500);
+  --sidebar-bg-color: var(--neutrals-100);
+  --sidebar-header-height: 82px;
   --sidebar-dropdown-mobile-icon-color: var(--primary-500);
   --sidebar-title-color: var(--base-text-color, var(--additional-950));
+  --sidebar-header-padding: 18px;
+  --sidebar-dropdown-icon-color: var(--neutrals-500);
+  --sidebar-overlay-color: var(--additional-950);
 }
 
 .sidebar {
   @apply tw-relative;
 
   &__overlay {
-    @apply tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000]
-      tw-bg-[--sidebar-mobile-bg-color] tw-backdrop-blur-[3px];
+    @apply tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000] tw-backdrop-blur-[3px] tw-bg-black/50;
   }
 
   &__header {
-    @apply tw-text-[color:var(--sidebar-dropdown-mobile-icon-color)] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer;
+    @apply tw-text-[color:var(--sidebar-dropdown-mobile-icon-color)] tw-flex tw-justify-end tw-items-center tw-h-[var(--sidebar-header-height)] tw-cursor-pointer tw-p-[var(--sidebar-header-padding)];
   }
 
   &__title {
-    @apply tw-text-[color:var(--sidebar-title-color)] tw-text-lg tw-font-bold;
+    @apply tw-text-[color:var(--sidebar-title-color)] tw-text-xl tw-font-bold;
   }
 
   &__dropdown {
-    @apply tw-absolute tw-top-[var(--app-bar-button-height)] tw-bg-[color:var(--app-bar-button-bg-color)] tw-z-[10000] tw-flex tw-flex-col;
-    box-shadow: var(--app-bar-button-shadow);
+    @apply tw-bg-[color:var(--sidebar-bg-color)] tw-absolute tw-top-[var(--app-bar-button-height)] tw-z-[10000] tw-flex tw-flex-col;
 
     &--mobile,
     &--always,
@@ -111,5 +124,13 @@ const header = h("div", { class: "sidebar__header" }, [
       }
     }
   }
+
+  &__close-icon {
+    @apply tw-text-[color:var(--sidebar-dropdown-icon-color)] tw-cursor-pointer;
+  }
+
+  &__content {
+    @apply tw-flex tw-flex-col tw-h-full tw-bg-[color:var(--sidebar-bg-color)] tw-flex-1 tw-relative;
+  }
 }
 </style>

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

@@ -1,27 +1,36 @@
 <template>
-  <div>
-    <SettingsMenuItem
-      icon="fas fa-palette"
-      :title="$t('COMPONENTS.THEME_SELECTOR.THEME_SELECTOR')"
-      @click="opened = !opened"
-    />
-
-    <GenericDropdown
-      :opened="opened"
-      :items="themes"
-      :is-item-active="(theme) => theme === current"
-      :on-item-click="handleThemeSelect"
-    >
-      <template #item="{ item: theme, click }">
-        <SettingsMenuItem
-          class="tw-py-0"
-          :title="_.capitalize(theme)"
-          :is-active="theme === current"
-          @click="click"
+  <SettingsMenuItem @trigger:click="opened = !opened">
+    <template #trigger>
+      <div class="vc-theme-selector__trigger">
+        <VcIcon
+          icon="fas fa-palette"
+          class="vc-theme-selector__icon"
         />
-      </template>
-    </GenericDropdown>
-  </div>
+        <span class="vc-theme-selector__title">
+          {{ $t("COMPONENTS.THEME_SELECTOR.THEME_SELECTOR") }}
+        </span>
+      </div>
+    </template>
+
+    <template #content>
+      <GenericDropdown
+        :opened="opened"
+        :items="themes"
+        :is-item-active="(theme) => theme === current"
+        @item-click="handleThemeSelect"
+      >
+        <template #item="{ item: theme, click }">
+          <div
+            class="vc-theme-selector__item"
+            :class="{ 'vc-theme-selector__item--active': theme === current }"
+            @click="click"
+          >
+            <span class="vc-theme-selector__item-title">{{ _.capitalize(theme) }}</span>
+          </div>
+        </template>
+      </GenericDropdown>
+    </template>
+  </SettingsMenuItem>
 </template>
 
 <script lang="ts" setup>
@@ -30,7 +39,8 @@ import { useTheme } from "../../../core/composables/useTheme";
 import { ref, watch } from "vue";
 import { notification } from "..";
 import * as _ from "lodash-es";
-import { SettingsMenuItem } from "../menu-item";
+import { SettingsMenuItem } from "../settings-menu-item";
+import { VcIcon } from "../../../ui/components";
 
 const { current, themes, setTheme } = useTheme();
 const opened = ref(false);
@@ -50,10 +60,31 @@ watch(
 </script>
 
 <style lang="scss">
-:root {
-  --theme-selector-bg-color: var(--additional-50);
-  --theme-selector-text-color: var(--base-text-color, var(--neutrals-950));
-  --theme-selector-border-color: var(--app-bar-divider-color);
-  --theme-selector-hover-bg-color: var(--primary-50);
+.vc-theme-selector {
+  &__trigger {
+    @apply tw-flex tw-items-center tw-w-full;
+  }
+
+  &__icon {
+    @apply tw-w-6 tw-mr-3;
+  }
+
+  &__title {
+    @apply tw-flex-grow;
+  }
+
+  &__item {
+    @apply tw-flex tw-items-center tw-w-full tw-px-3
+      tw-cursor-pointer tw-transition-colors
+      hover:tw-bg-[color:var(--menu-item-bg-hover)];
+
+    &--active {
+      @apply tw-bg-[color:var(--menu-item-bg-active)];
+    }
+  }
+
+  &__item-title {
+    @apply tw-flex-grow;
+  }
 }
 </style>

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

@@ -8,10 +8,12 @@
     <VcIcon
       v-else
       icon="fas fa-user-circle"
-      size="xxl"
       class="vc-user-info__icon"
     />
-    <div class="vc-user-info__info">
+    <div
+      v-if="isExpanded || $isMobile.value"
+      class="vc-user-info__info"
+    >
       <div class="vc-user-info__name">
         {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
       </div>
@@ -33,6 +35,7 @@ export interface Props {
   avatarUrl?: string;
   name?: string;
   role?: string;
+  isExpanded?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -47,20 +50,25 @@ const imageHandler = computed(() => {
 </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-[34px] tw-h-[34px] tw-bg-[color:var(--user-dropdown-account-info-role-color)]
+    @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)];
+    @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;
+    @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-flex-col tw-items-start;
   }
 
   &__name {

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

@@ -8,54 +8,29 @@
   >
     <template #content>
       <div
-        v-if="menuItems && isOpened"
+        v-if="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>
+        <SettingsMenu />
       </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";
+import { SettingsMenu } from "../../settings-menu";
 
-const props = defineProps<{
+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">