@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -0,0 +1,219 @@
+<template>
+  <div class="vc-dropdown">
+    <div
+      ref="referenceEl"
+      class="vc-dropdown__trigger"
+    >
+      <slot
+        name="trigger"
+        :is-active="opened"
+      ></slot>
+    </div>
+
+    <teleport
+      to="body"
+      :disabled="!floating"
+    >
+      <div
+        v-if="opened"
+        ref="floatingEl"
+        v-on-click-outside="[() => $emit('update:opened', false), { ignore: [referenceEl] }]"
+        class="vc-dropdown__dropdown"
+        :class="dropdownClasses"
+        :style="floatingStyle"
+      >
+        <VcContainer
+          :no-padding="true"
+          @click.stop
+        >
+          <VcCol v-if="items && items.length">
+            <div
+              v-for="(item, index) in items"
+              :key="index"
+              class="vc-dropdown__item"
+              :class="{
+                'vc-dropdown__item--mobile': $isMobile.value,
+                'vc-dropdown__item--active': isItemActive?.(item),
+              }"
+              @click="() => $emit('item-click', item)"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :click="() => $emit('item-click', item)"
+              >
+                {{ itemText?.(item) }}
+              </slot>
+            </div>
+          </VcCol>
+          <div
+            v-else
+            class="vc-dropdown__empty"
+          >
+            <slot name="empty">
+              {{ emptyText }}
+            </slot>
+          </div>
+        </VcContainer>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup generic="T">
+import { VcCol, VcContainer } from "../../../ui/components";
+import { ref, computed, Ref, inject } from "vue";
+import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+export interface Props<T> {
+  opened?: boolean;
+  items: T[];
+  emptyText?: string;
+  itemText?: (item: T) => string;
+  isItemActive?: (item: T) => boolean;
+  floating?: boolean;
+  placement?: "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
+  variant?: "default" | "light";
+}
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  opened: true,
+  items: () => [],
+  floating: false,
+  placement: "bottom",
+  variant: "default",
+});
+
+defineEmits<{
+  (e: "item-click", item: T): void;
+  (e: "update:opened", opened: boolean): void;
+}>();
+
+defineSlots<{
+  item: (args: { item: T; click: () => void }) => any;
+  empty: () => any;
+  trigger: (args: { isActive: boolean }) => any;
+}>();
+
+const isMobile = inject("isMobile") as Ref<boolean>;
+
+const referenceEl = ref<HTMLElement | null>(null);
+const floatingEl = ref<HTMLElement | null>(null);
+
+const floater = useFloating(referenceEl, floatingEl, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [shift({ mainAxis: false })],
+});
+
+const dropdownClasses = computed(() => {
+  const placement = floater.placement.value;
+  return [
+    {
+      "vc-dropdown__dropdown--mobile": isMobile.value,
+      "vc-dropdown__dropdown--floating": props.floating,
+      "vc-dropdown__dropdown--top": placement?.startsWith("top"),
+    },
+    `vc-dropdown__dropdown--${props.variant}`,
+  ];
+});
+
+const floatingStyle = computed(() => {
+  if (!props.floating) return {};
+
+  return {
+    position: "absolute" as const,
+    top: `${floater.y.value ?? 0}px`,
+    left: `${floater.x.value ?? 0}px`,
+    zIndex: 10000,
+    width: "max-content",
+  };
+});
+</script>
+
+<style lang="scss">
+:root {
+  --dropdown-bg-color: var(--neutrals-50);
+  --dropdown-text-color: var(--neutrals-950);
+  --dropdown-border-color: var(--app-bar-divider-color);
+  --dropdown-hover-bg-color: var(--primary-50);
+  --dropdown-divider-color: var(--neutrals-200);
+  --dropdown-divider-item-color: var(--neutrals-100);
+
+  --dropdown-bg-color-light: var(--additional-50);
+  --dropdown-divider-item-color-light: var(--neutrals-200);
+}
+
+.vc-dropdown {
+  @apply tw-relative tw-flex tw-w-full tw-h-full;
+
+  &__trigger {
+    @apply tw-flex tw-items-center tw-justify-center;
+  }
+
+  &__dropdown {
+    @apply tw-rounded-[6px] tw-w-full tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-h-max;
+
+    &--top {
+      @apply tw-rounded-t-[6px] tw-rounded-b-none;
+    }
+
+    &:not(&--top) {
+      @apply tw-rounded-t-none tw-rounded-b-[6px];
+    }
+
+    &--mobile {
+      @apply tw-w-full;
+      display: flex !important;
+    }
+
+    &--floating {
+      box-shadow:
+        0px 2px 10px 0px rgb(0 0 0 / 0.1),
+        0px 14px 25px -5px rgb(0 0 0 / 0.1);
+    }
+
+    &--light {
+      @apply tw-bg-[color:var(--dropdown-bg-color-light)];
+
+      .vc-dropdown__item {
+        @apply tw-border-b-[color:var(--dropdown-divider-item-color-light)];
+      }
+    }
+
+    &--default {
+      @apply tw-bg-[color:var(--dropdown-bg-color)];
+      .vc-dropdown__item {
+        @apply tw-border-b-[color:var(--dropdown-divider-item-color)];
+      }
+    }
+  }
+
+  &__item {
+    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
+    transition: background-color 0.2s;
+
+    &:last-of-type {
+      @apply tw-border-b-0;
+    }
+
+    &:hover {
+      background-color: var(--dropdown-hover-bg-color);
+    }
+
+    &--active {
+      @apply tw-bg-[color:var(--dropdown-hover-bg-color)];
+    }
+
+    &--mobile:not(:last-of-type) {
+      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--dropdown-divider-color)];
+    }
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
+  }
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as GenericDropdown } from "./generic-dropdown.vue";

package/shared/components/index.ts

@@ -8,7 +8,10 @@ export * from "./language-selector";
 export * from "./user-dropdown-button";
 export * from "./notification-dropdown";
 export * from "./notification-template";
-export * from "./app-bar-button";
 export * from "./sidebar";
 export * from "./theme-selector";
 export * from "./sign-in";
+export * from "./settings-menu-item";
+export * from "./generic-dropdown";
+export * from "./draggable-dashboard";
+export * from "./dashboard-widget-card";

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

@@ -1,55 +1,50 @@
 <template>
-  <AppBarButtonTemplate
-    :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    position="bottom-end"
-  >
-    <template #button>
-      <div class="vc-language-selector__button-wrap">
+  <SettingsMenuItem @trigger:click="opened = !opened">
+    <template #trigger>
+      <div class="vc-language-selector__trigger">
         <VcImage
           :src="currLocaleFlag"
-          class="vc-language-selector__img vc-language-selector__img--button"
-          empty-icon="fas fa-globe"
+          :empty-icon="'fas fa-globe'"
+          class="vc-language-selector__flag"
         />
+        <span class="vc-language-selector__title">
+          {{ $t("COMPONENTS.LANGUAGE_SELECTOR.TITLE") }}
+        </span>
       </div>
     </template>
-    <template #dropdown-content="{ opened, toggle }">
-      <Sidebar
-        :is-expanded="$isMobile.value ? opened : false"
-        position="right"
-        render="mobile"
-        @close="toggle"
+
+    <template #content>
+      <GenericDropdown
+        :opened="opened"
+        :items="languageItems"
+        :is-item-active="(lang) => lang.lang === $i18n.locale"
+        @item-click="handleLanguageSelect"
       >
-        <template #content>
+        <template #item="{ item: lang, click }">
           <div
-            v-if="opened"
-            class="vc-language-selector__dropdown"
+            class="vc-language-selector__item"
+            :class="{ 'vc-language-selector__item--active': lang.lang === $i18n.locale }"
+            @click="click"
           >
-            <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>
+            <VcImage
+              :src="lang.flag"
+              class="vc-language-selector__flag"
+            />
+            <span class="vc-language-selector__item-title">{{ lang.title }}</span>
           </div>
         </template>
-      </Sidebar>
+      </GenericDropdown>
     </template>
-  </AppBarButtonTemplate>
+  </SettingsMenuItem>
 </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 "../settings-menu-item";
+import { VcImage } from "../../../ui/components";
 
 interface ILanguage {
   lang: string;
@@ -61,6 +56,9 @@ interface ILanguage {
 const { availableLocales, getLocaleMessage, locale } = useI18n({ useScope: "global" });
 const { setLocale, getFlag } = useLanguages();
 
+const opened = ref(false);
+const currLocaleFlag = ref<string>();
+
 const languageItems: ILanguage[] = availableLocales
   .map((locale: string) => ({
     lang: locale,
@@ -72,15 +70,21 @@ const languageItems: ILanguage[] = availableLocales
   }))
   .filter((item) => item.title);
 
-const currLocaleFlag = ref<string>();
+const handleLanguageSelect = (lang: ILanguage) => {
+  if (Object.prototype.hasOwnProperty.call(lang, "clickHandler")) {
+    lang.clickHandler(lang.lang);
+  }
+  opened.value = false;
+};
 
 watch(
   [() => languageItems, () => locale.value],
   async ([newValLangItem]) => {
     for (const lang of newValLangItem) {
       lang.flag = await getFlag(lang.lang);
-
-      currLocaleFlag.value = languageItems.find((lang) => lang.lang === locale.value)?.flag;
+      if (lang.lang === locale.value) {
+        currLocaleFlag.value = lang.flag;
+      }
     }
   },
   { immediate: true },
@@ -88,44 +92,31 @@ watch(
 </script>
 
 <style lang="scss">
-:root {
-  --language-selector-bg-color: var(--additional-50);
-  --language-selector-text-color: var(--base-text-color, var(--neutrals-950));
-  --language-selector-border-color: var(--app-bar-divider-color);
-  --language-selector-hover-bg-color: var(--primary-50);
-  --language-selector-button-width: var(--app-bar-button-width);
-}
-
 .vc-language-selector {
-  &__dropdown {
-    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-min-w-max;
+  &__trigger {
+    @apply tw-flex tw-items-center tw-w-full;
   }
 
-  &__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);
-    }
+  &__flag {
+    @apply tw-w-6 tw-h-6 tw-mr-3;
+  }
 
-    &--active {
-      @apply tw-bg-[color:var(--language-selector-hover-bg-color)];
-    }
+  &__title {
+    @apply tw-flex-grow;
   }
 
-  &__img {
-    @apply tw-w-6 tw-h-6 tw-mr-2;
+  &__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)];
 
-    &--button {
-      @apply tw-mr-0;
+    &--active {
+      @apply tw-bg-[color:var(--menu-item-bg-active)];
     }
   }
 
-  &__button-wrap {
-    @apply tw-w-[var(--language-selector-button-width)] tw-flex tw-justify-center;
+  &__item-title {
+    @apply tw-flex-grow;
   }
 }
 </style>

package/shared/components/logout-button/index.ts

@@ -0,0 +1 @@
+export { default as LogoutButton } from './logout-button.vue';

package/shared/components/logout-button/logout-button.vue

@@ -0,0 +1,27 @@
+<template>
+  <SettingsMenuItem
+    :icon="LogoutIcon"
+    :title="$t('SHELL.ACCOUNT.LOGOUT')"
+    @trigger:click="handleLogout"
+  />
+</template>
+
+<script lang="ts" setup>
+import { SettingsMenuItem } from "../settings-menu-item";
+import { LogoutIcon } from "../../../ui/components/atoms/vc-icon/icons";
+import { useUser } from "../../../core/composables";
+import { useRouter } from "vue-router";
+import { useBladeNavigation } from "../blade-navigation";
+
+const { signOut } = useUser();
+const router = useRouter();
+const { closeBlade } = useBladeNavigation();
+
+const handleLogout = async () => {
+  const isPrevented = await closeBlade(0);
+  if (!isPrevented) {
+    await signOut();
+    router.push({ name: "Login" });
+  }
+};
+</script>

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

@@ -0,0 +1 @@
+export { default as NotificationItem } from "./notification.vue";

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

@@ -1,88 +1,31 @@
 <template>
-  <AppBarButtonTemplate
-    :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
-    position="bottom-end"
-    @toggle="onOpen"
+  <GenericDropdown
+    :items="notifications"
+    :empty-text="t('COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY')"
   >
-    <template #button>
-      <div class="vc-notification-dropdown__button">
-        <VcIcon
-          icon="fas fa-bell"
-          size="xl"
-        ></VcIcon>
-        <div
-          :class="{
-            'vc-notification-dropdown__accent': isAccent,
-          }"
-        ></div>
-      </div>
+    <template #item="{ item }">
+      <NotificationItem
+        :notification="item"
+        :templates="notificationTemplates || []"
+      />
     </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-notification-dropdown__dropdown',
-              { 'vc-notification-dropdown__dropdown--mobile': $isMobile.value },
-            ]"
-          >
-            <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>
-      </Sidebar>
-    </template>
-  </AppBarButtonTemplate>
+  </GenericDropdown>
 </template>
 
 <script lang="ts" setup>
-import { inject, computed } from "vue";
+import { inject, computed, onMounted } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
-import { VcCol, VcContainer, 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 { NotificationTemplatesSymbol } from "./../../../injection-keys";
 
-const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
+const notificationTemplates = inject(NotificationTemplatesSymbol);
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
 
-const isAccent = computed(() => {
+const hasUnreadNotifications = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
 
@@ -91,36 +34,35 @@ function onOpen(state: boolean) {
     markAllAsRead();
   }
 }
+
+onMounted(() => {
+  onOpen(hasUnreadNotifications.value);
+});
 </script>
 
 <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));
+  --notification-dropdown-bell-color: var(--neutrals-500);
 }
 
 .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];
+    @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-flex tw-items-center tw-justify-center tw-relative;
   }
 
-  &__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;
+  &__button-icon {
+    @apply tw-relative;
 
     &--mobile {
-      @apply tw-max-h-full tw-w-full;
-      display: flex !important;
+      @apply tw-text-[color:var(--notification-dropdown-bell-color)];
     }
   }
 
-  &__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)];