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

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

@@ -1,55 +1,37 @@
 <template>
-  <AppBarButtonTemplate
-    :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    position="bottom-end"
-  >
-    <template #button>
-      <div class="vc-language-selector__button-wrap">
-        <VcImage
-          :src="currLocaleFlag"
-          class="vc-language-selector__img vc-language-selector__img--button"
-          empty-icon="fas fa-globe"
+  <div>
+    <SettingsMenuItem
+      :image="currLocaleFlag"
+      :empty-icon="'fas fa-globe'"
+      :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
+      @click="opened = !opened"
+    />
+
+    <GenericDropdown
+      :opened="opened"
+      :items="languageItems"
+      :is-item-active="(lang) => lang.lang === $i18n.locale"
+      :on-item-click="(lang) => lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+    >
+      <template #item="{ item: lang, click }">
+        <SettingsMenuItem
+          class="tw-py-0"
+          :image="lang.flag"
+          :title="lang.title"
+          :is-active="lang.lang === $i18n.locale"
+          @click="click"
         />
-      </div>
-    </template>
-    <template #dropdown-content="{ opened, toggle }">
-      <Sidebar
-        :is-expanded="$isMobile.value ? opened : false"
-        position="right"
-        render="mobile"
-        @close="toggle"
-      >
-        <template #content>
-          <div
-            v-if="opened"
-            class="vc-language-selector__dropdown"
-          >
-            <div
-              v-for="(lang, i) in languageItems"
-              :key="i"
-              class="vc-language-selector__item"
-              :class="{ 'vc-language-selector__item--active': lang.lang === $i18n.locale }"
-              @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
-            >
-              <VcImage
-                :src="lang.flag"
-                class="vc-language-selector__img"
-              />
-              {{ lang.title }}
-            </div>
-          </div>
-        </template>
-      </Sidebar>
-    </template>
-  </AppBarButtonTemplate>
+      </template>
+    </GenericDropdown>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
-import { AppBarButtonTemplate } from "./../app-bar-button";
-import { Sidebar } from "./../sidebar";
+import { GenericDropdown } from "../generic-dropdown";
 import { watch, ref } from "vue";
+import { SettingsMenuItem } from "../menu-item";
 
 interface ILanguage {
   lang: string;
@@ -61,6 +43,8 @@ interface ILanguage {
 const { availableLocales, getLocaleMessage, locale } = useI18n({ useScope: "global" });
 const { setLocale, getFlag } = useLanguages();
 
+const opened = ref(false);
+
 const languageItems: ILanguage[] = availableLocales
   .map((locale: string) => ({
     lang: locale,
@@ -97,25 +81,6 @@ watch(
 }
 
 .vc-language-selector {
-  &__dropdown {
-    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-min-w-max;
-  }
-
-  &__item {
-    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--language-selector-text-color)]
-      tw-border-l tw-border-solid tw-border-l-[var(--language-selector-border-color)]
-      tw-border-b tw-border-b-[var(--language-selector-border-color)] tw-w-full tw-cursor-pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--language-selector-hover-bg-color);
-    }
-
-    &--active {
-      @apply tw-bg-[color:var(--language-selector-hover-bg-color)];
-    }
-  }
-
   &__img {
     @apply tw-w-6 tw-h-6 tw-mr-2;
 
@@ -125,7 +90,7 @@ watch(
   }
 
   &__button-wrap {
-    @apply tw-w-[var(--language-selector-button-width)] tw-flex tw-justify-center;
+    @apply tw-flex tw-justify-center;
   }
 }
 </style>

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

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

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

@@ -0,0 +1,111 @@
+<template>
+  <div
+    class="vc-menu-item"
+    :class="{
+      'vc-menu-item--active': isActive,
+      'vc-menu-item--clickable': !disabled,
+      'vc-menu-item--invisible': !isVisible,
+    }"
+    @click.stop="!disabled && $emit('click')"
+  >
+    <slot>
+      <div class="vc-menu-item__content">
+        <!-- Icon slot -->
+        <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>
+
+        <!-- Title slot -->
+        <slot name="title">
+          <p class="vc-menu-item__title">{{ title }}</p>
+        </slot>
+
+        <!-- Additional content slot -->
+        <slot name="additional" />
+      </div>
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Component } from "vue";
+import { VcIcon, VcImage } from "../../../ui/components";
+
+withDefaults(
+  defineProps<{
+    title?: string;
+    icon?: string | Component;
+    image?: string;
+    emptyIcon?: string;
+    isActive?: boolean;
+    disabled?: boolean;
+    isVisible?: boolean;
+  }>(),
+  {
+    isVisible: true,
+  },
+);
+
+defineEmits<{
+  (e: "click"): void;
+}>();
+</script>
+
+<style lang="scss">
+.vc-menu-item {
+  @apply tw-p-3 tw-text-sm tw-text-[color:var(--menu-item-text-color,var(--user-dropdown-menu-text-color))]
+    tw-border-solid tw-border-b tw-border-b-[color:var(--menu-item-border-color,var(--user-dropdown-divider-color))]
+    tw-bg-[color:var(--menu-item-bg,var(--user-dropdown-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,var(--user-dropdown-menu-item-bg-hover))];
+
+      .vc-menu-item__icon {
+        @apply tw-text-[color:var(--menu-item-icon-color-hover,var(--user-dropdown-button-color-hover))];
+      }
+    }
+  }
+
+  &--invisible {
+    @apply tw-hidden;
+  }
+
+  &--active {
+    @apply tw-bg-[color:var(--menu-item-bg-active,var(--user-dropdown-menu-item-bg-hover))];
+  }
+
+  &: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,var(--user-dropdown-button-color))];
+  }
+
+  &__image {
+    @apply tw-w-6 tw-h-6 tw-mr-3;
+  }
+
+  &__title {
+    @apply tw-flex-grow;
+  }
+}
+</style>

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

@@ -7,12 +7,12 @@
     <template #button>
       <div class="vc-notification-dropdown__button">
         <VcIcon
-          icon="fas fa-bell"
-          size="xl"
-        ></VcIcon>
+          :icon="BellIcon"
+          size="l"
+        />
         <div
           :class="{
-            'vc-notification-dropdown__accent': isAccent,
+            'vc-notification-dropdown__accent': hasUnreadNotifications,
           }"
         ></div>
       </div>
@@ -26,41 +26,19 @@
         @close="toggle"
       >
         <template #content>
-          <div
-            v-if="opened"
-            :class="[
-              'vc-notification-dropdown__dropdown',
-              { 'vc-notification-dropdown__dropdown--mobile': $isMobile.value },
-            ]"
+          <GenericDropdown
+            :opened="opened"
+            :items="notifications"
+            :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
+            :on-item-click="() => toggle()"
           >
-            <VcContainer
-              :no-padding="true"
-              @click.stop
-            >
-              <VcCol v-if="notifications && notifications.length">
-                <div
-                  v-for="item in notifications"
-                  :key="`notification_${item.id}`"
-                  class="vc-notification-dropdown__item"
-                  :class="{
-                    'vc-notification-dropdown__item--mobile': $isMobile.value,
-                  }"
-                >
-                  <NotificationItem
-                    :notification="item"
-                    :templates="notificationTemplates || []"
-                    @on-click="toggle"
-                  />
-                </div>
-              </VcCol>
-              <div
-                v-else
-                class="vc-notification-dropdown__empty"
-              >
-                {{ t("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY") }}
-              </div>
-            </VcContainer>
-          </div>
+            <template #item="{ item }">
+              <NotificationItem
+                :notification="item"
+                :templates="notificationTemplates || []"
+              />
+            </template>
+          </GenericDropdown>
         </template>
       </Sidebar>
     </template>
@@ -70,19 +48,21 @@
 <script lang="ts" setup>
 import { inject, computed } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
-import { VcCol, VcContainer, VcIcon } from "../../../ui/components";
+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 { GenericDropdown } from "../generic-dropdown";
+import { BellIcon } from "./../../../ui/components/atoms/vc-icon/icons";
 
 const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
 
-const isAccent = computed(() => {
+const hasUnreadNotifications = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
 
@@ -95,48 +75,17 @@ function onOpen(state: boolean) {
 
 <style lang="scss">
 :root {
-  --notification-dropdown-border-color: var(--additional-50);
-  --notification-dropdown-bg-color: var(--additional-50);
   --notification-dropdown-accent-color: var(--danger-500);
   --notification-dropdown-button-width: var(--app-bar-button-width);
-  --notification-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
 }
 
 .vc-notification-dropdown {
   &__accent {
-    @apply tw-block tw-absolute tw-right-[12px] tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[--notification-dropdown-accent-color] tw-rounded-full tw-z-[1];
-  }
-
-  &__dropdown {
-    @apply tw-bg-[--notification-dropdown-bg-color] tw-rounded-b-[6px] tw-w-[439px]
-      tw-max-h-[350px] tw-min-h-[50px] tw-overflow-hidden tw-flex tw-flex-col;
-
-    &--mobile {
-      @apply tw-max-h-full tw-w-full;
-      display: flex !important;
-    }
+    @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];
   }
 
   &__button {
     @apply tw-w-[var(--notification-dropdown-button-width)] tw-h-full tw-flex tw-items-center tw-justify-center tw-relative;
   }
-
-  &__item {
-    @apply tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid
-      tw-border-b-[var(--notification-dropdown-border-color)] tw-cursor-pointer;
-    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/notification-template/notification-template.vue

@@ -6,34 +6,22 @@
         'vc-notification-template__container--mobile': $isMobile.value,
       }"
     >
-      <div class="vc-notification-template__left">
-        <div
-          class="vc-notification-template__icon-container"
-          :style="{ 'background-color': color }"
+      <div class="vc-notification-template__content">
+        <p
+          class="vc-notification-template__title"
+          :class="{ 'vc-notification-template__title--desktop': $isDesktop.value }"
         >
-          <VcIcon
-            :icon="icon"
-            size="l"
-            aria-label="Notification Icon"
-          ></VcIcon>
-        </div>
-        <div class="vc-notification-template__content">
-          <p
-            class="vc-notification-template__title"
-            :class="{ 'vc-notification-template__title--desktop': $isDesktop.value }"
-          >
-            {{ title }}
-          </p>
-          <slot></slot>
-        </div>
-      </div>
-      <div
-        class="vc-notification-template__right"
-        :class="{ 'vc-notification-template__right--mobile': $isMobile.value }"
-      >
+          {{ title }}
+        </p>
         <p class="vc-notification-template__time">
           {{ pushTime }}
         </p>
+        <div
+          v-if="$slots.default"
+          class="vc-notification-template__content-body"
+        >
+          <slot></slot>
+        </div>
       </div>
     </div>
   </div>
@@ -46,8 +34,8 @@ import moment from "moment";
 import { PushNotification } from "../../../core/api/platform";
 
 export interface Props {
-  color: string;
-  icon: string;
+  color?: string;
+  icon?: string;
   title: string;
   notification: PushNotification;
 }
@@ -65,7 +53,8 @@ const pushTime = computed(() => {
 :root {
   --notification-template-icon-color: var(--additional-50);
   --notification-template-text-color: var(--additional-950);
-  --notification-template-time-color: var(--neutrals-600);
+  --notification-template-time-color: var(--neutrals-500);
+  --notification-template-content-body-color: var(--neutrals-700);
 }
 
 .vc-notification-template {
@@ -89,13 +78,9 @@ const pushTime = computed(() => {
   }
 
   &__title {
-    @apply tw-text-[color:var(--notification-template-text-color)] tw-text-lg tw-leading-[19px]
-      tw-font-bold tw-m-0 tw-mb-1;
+    @apply tw-text-[color:var(--notification-template-text-color)] tw-text-xs tw-leading-[19px]
+      tw-font-bold tw-m-0 tw-text-wrap;
     word-break: break-word;
-
-    &--desktop {
-      @apply tw-mr-4;
-    }
   }
 
   &__right {
@@ -106,8 +91,12 @@ const pushTime = computed(() => {
     }
   }
 
+  &__content-body {
+    @apply tw-text-xs tw-text-[color:var(--notification-template-content-body-color)] tw-m-0 tw-text-wrap;
+  }
+
   &__time {
-    @apply tw-text-sm tw-text-[color:var(--notification-template-time-color)] tw-m-0;
+    @apply tw-text-xxs tw-text-[color:var(--notification-template-time-color)] tw-m-0 tw-mb-2;
   }
 }
 </style>

package/shared/components/sidebar/sidebar.vue

@@ -16,6 +16,7 @@
           'sidebar__dropdown--always': render === 'always',
           'sidebar__dropdown--left': position === 'left',
           'sidebar__dropdown--right': position === 'right',
+          'sidebar__dropdown--title': title,
         },
       ]"
     >
@@ -42,6 +43,7 @@ export interface Props {
   position?: "left" | "right";
   render: "always" | "mobile" | "desktop";
   isExpanded: boolean;
+  title?: string;
 }
 
 export interface Emits {
@@ -50,12 +52,13 @@ export interface Emits {
 
 const emit = defineEmits<Emits>();
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   position: "right",
   render: "always",
 });
 
 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") }),
 ]);
 </script>
@@ -64,6 +67,7 @@ const header = h("div", { class: "sidebar__header" }, [
 :root {
   --sidebar-mobile-bg-color: var(--neutral-500);
   --sidebar-dropdown-mobile-icon-color: var(--primary-500);
+  --sidebar-title-color: var(--base-text-color, var(--additional-950));
 }
 
 .sidebar {
@@ -73,10 +77,15 @@ const header = h("div", { class: "sidebar__header" }, [
     @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];
   }
+
   &__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;
   }
 
+  &__title {
+    @apply tw-text-[color:var(--sidebar-title-color)] tw-text-lg 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);
@@ -95,6 +104,12 @@ const header = h("div", { class: "sidebar__header" }, [
     &--right {
       @apply tw-right-0 tw-left-auto;
     }
+
+    &--title {
+      .sidebar__header {
+        @apply tw-justify-between #{!important};
+      }
+    }
   }
 }
 </style>

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

@@ -1,55 +1,44 @@
 <template>
-  <AppBarButtonTemplate
-    icon="fas fa-palette"
-    :title="$t('COMPONENTS.THEME_SELECTOR.THEME_SELECTOR')"
-    position="bottom-end"
-  >
-    <template #dropdown-content="{ opened, toggle }">
-      <Sidebar
-        :is-expanded="$isMobile.value ? opened : false"
-        position="right"
-        render="mobile"
-        @close="toggle"
-      >
-        <template #content>
-          <div
-            v-if="opened"
-            class="vc-theme-selector__dropdown"
-            :class="{
-              'vc-theme-selector__dropdown--mobile': $isMobile.value,
-            }"
-          >
-            <div
-              v-for="(theme, i) in themes"
-              :key="i"
-              class="vc-theme-selector__item"
-              :class="{ 'vc-theme-selector__item--active': theme === current }"
-              @click="
-                () => {
-                  setTheme(theme);
-                  toggle();
-                }
-              "
-            >
-              {{ themeText(theme) }}
-            </div>
-          </div>
-        </template>
-      </Sidebar>
-    </template>
-  </AppBarButtonTemplate>
+  <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"
+        />
+      </template>
+    </GenericDropdown>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { AppBarButtonTemplate } from "./../app-bar-button";
-import { Sidebar } from "./../sidebar";
-import { useTheme } from "./../../../core/composables/useTheme";
-import { watch, computed } from "vue";
-import { notification } from "./../";
+import { GenericDropdown } from "../generic-dropdown";
+import { useTheme } from "../../../core/composables/useTheme";
+import { ref, watch } from "vue";
+import { notification } from "..";
 import * as _ from "lodash-es";
-import { createUnrefFn } from "@vueuse/core";
+import { SettingsMenuItem } from "../menu-item";
 
 const { current, themes, setTheme } = useTheme();
+const opened = ref(false);
+
+const handleThemeSelect = (theme: string) => {
+  setTheme(theme);
+  opened.value = false;
+};
 
 watch(
   () => current.value,
@@ -58,12 +47,6 @@ watch(
   },
   { deep: true },
 );
-
-const themeText = computed(() => {
-  return createUnrefFn((theme: string) => {
-    return _.capitalize(theme);
-  });
-});
 </script>
 
 <style lang="scss">
@@ -73,29 +56,4 @@ const themeText = computed(() => {
   --theme-selector-border-color: var(--app-bar-divider-color);
   --theme-selector-hover-bg-color: var(--primary-50);
 }
-
-.vc-theme-selector {
-  &__dropdown {
-    @apply tw-bg-[color:var(--theme-selector-bg-color)] tw-min-w-20 tw-max-w-max;
-
-    &--mobile {
-      @apply tw-min-w-full tw-max-w-full;
-    }
-  }
-
-  &__item {
-    @apply tw-truncate tw-p-3 tw-text-sm tw-text-[color:var(--theme-selector-text-color)]
-      tw-border-l tw-border-solid tw-border-l-[var(--theme-selector-border-color)]
-      tw-border-b tw-border-b-[var(--theme-selector-border-color)] tw-w-full tw-cursor-pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: var(--theme-selector-hover-bg-color);
-    }
-
-    &--active {
-      @apply tw-bg-[color:var(--theme-selector-hover-bg-color)];
-    }
-  }
-}
 </style>