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

package/shared/components/error-interceptor/interceptor.ts

@@ -1,44 +1,44 @@
-import { useErrorHandler } from "./../../../core/composables";
-import { defineComponent, VNode } from "vue";
-
-export interface Props {
-  capture?: boolean;
-}
-
-export interface Emits {
-  (event: "error", value: string): void;
-  (event: "reset"): void;
-}
-
-export type Slots = {
-  slots: {
-    default: (args: { error: string | null; reset: () => void }) => VNode[];
-  };
-};
-
-export default defineComponent({
-  name: "ErrorInterceptor",
-  props: {
-    capture: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  emits: {
-    error(value: Error | string) {
-      return (value && value instanceof Error) || typeof value === "string";
-    },
-    reset(): boolean {
-      return true;
-    },
-  },
-  setup(props, { slots }) {
-    const { error, reset } = useErrorHandler(props.capture);
-
-    return () =>
-      slots.default?.({
-        error: error.value,
-        reset,
-      });
-  },
-});
+import { useErrorHandler } from "./../../../core/composables";
+import { defineComponent, VNode } from "vue";
+
+export interface Props {
+  capture?: boolean;
+}
+
+export interface Emits {
+  (event: "error", value: string): void;
+  (event: "reset"): void;
+}
+
+export type Slots = {
+  slots: {
+    default: (args: { error: string | null; reset: () => void }) => VNode[];
+  };
+};
+
+export default defineComponent({
+  name: "ErrorInterceptor",
+  props: {
+    capture: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  emits: {
+    error(value: Error | string) {
+      return (value && value instanceof Error) || typeof value === "string";
+    },
+    reset(): boolean {
+      return true;
+    },
+  },
+  setup(props, { slots }) {
+    const { error, reset } = useErrorHandler(props.capture);
+
+    return () =>
+      slots.default?.({
+        error: error.value,
+        reset,
+      });
+  },
+});

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

@@ -1,9 +1,14 @@
 <template>
-  <div
-    ref="referenceEl"
-    class="vc-dropdown-wrapper"
-  >
-    <slot name="trigger"></slot>
+  <div class="vc-dropdown">
+    <div
+      ref="referenceEl"
+      class="vc-dropdown__trigger"
+    >
+      <slot
+        name="trigger"
+        :is-active="opened"
+      ></slot>
+    </div>
 
     <teleport
       to="body"
@@ -13,11 +18,8 @@
         v-if="opened"
         ref="floatingEl"
         v-on-click-outside="[() => $emit('update:opened', false), { ignore: [referenceEl] }]"
-        class="vc-dropdown"
-        :class="{
-          'vc-dropdown--mobile': $isMobile.value,
-          'vc-dropdown--floating': floating,
-        }"
+        class="vc-dropdown__dropdown"
+        :class="dropdownClasses"
         :style="floatingStyle"
       >
         <VcContainer
@@ -33,12 +35,12 @@
                 'vc-dropdown__item--mobile': $isMobile.value,
                 'vc-dropdown__item--active': isItemActive?.(item),
               }"
-              @click="() => onItemClick?.(item)"
+              @click="() => $emit('item-click', item)"
             >
               <slot
                 name="item"
                 :item="item"
-                :click="() => onItemClick?.(item)"
+                :click="() => $emit('item-click', item)"
               >
                 {{ itemText?.(item) }}
               </slot>
@@ -61,39 +63,42 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T">
 import { VcCol, VcContainer } from "../../../ui/components";
-import { ref, computed } from "vue";
+import { ref, computed, Ref, inject } from "vue";
 import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
 import { vOnClickOutside } from "@vueuse/components";
 
 interface Props {
-  opened: boolean;
+  opened?: boolean;
   items: T[];
   emptyText?: string;
   itemText?: (item: T) => string;
   isItemActive?: (item: T) => boolean;
-  onItemClick?: (item: T) => void;
   floating?: boolean;
-  placement?: "bottom" | "bottom-end" | "bottom-start";
+  placement?: "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
+  variant?: "default" | "light";
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  opened: false,
+  opened: true,
   items: () => [],
   floating: false,
   placement: "bottom",
+  variant: "default",
 });
 
 defineEmits<{
-  (e: "item:click", item: T): void;
+  (e: "item-click", item: T): void;
   (e: "update:opened", opened: boolean): void;
 }>();
 
 defineSlots<{
   item: (args: { item: T; click: () => void }) => any;
   empty: () => any;
-  trigger: void;
+  trigger: (args: { isActive: boolean }) => any;
 }>();
 
+const isMobile = inject("isMobile") as Ref<boolean>;
+
 const referenceEl = ref<HTMLElement | null>(null);
 const floatingEl = ref<HTMLElement | null>(null);
 
@@ -103,6 +108,18 @@ const floater = useFloating(referenceEl, floatingEl, {
   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 {};
 
@@ -124,23 +141,58 @@ const floatingStyle = computed(() => {
   --dropdown-hover-bg-color: var(--primary-50);
   --dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
   --dropdown-divider-item-color: var(--neutrals-100);
+
+  --dropdown-bg-color-light: var(--additional-50);
+  --dropdown-divider-item-color-light: var(--base-border-color, var(--neutrals-200));
 }
 
 .vc-dropdown {
-  @apply tw-bg-[color:var(--dropdown-bg-color)] tw-rounded-b-[6px] tw-w-full
-    tw-max-h-[350px] tw-overflow-hidden tw-flex tw-flex-col tw-relative;
+  @apply tw-relative tw-flex tw-w-full tw-h-full;
 
-  &--mobile {
-    @apply tw-max-h-full tw-w-full;
-    display: flex !important;
+  &__trigger {
+    @apply tw-flex tw-items-center tw-justify-center;
   }
 
-  &--floating {
-    box-shadow: var(--dropdown-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  &__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 tw-border-b-[color:var(--dropdown-divider-item-color)];
+    @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 {
@@ -164,8 +216,4 @@ const floatingStyle = computed(() => {
     @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
   }
 }
-
-.vc-dropdown-wrapper {
-  @apply tw-relative tw-flex tw-w-full;
-}
 </style>

package/shared/components/index.ts

@@ -8,9 +8,8 @@ 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 "./menu-item";
+export * from "./settings-menu-item";
 export * from "./generic-dropdown";

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

@@ -1,29 +1,41 @@
 <template>
-  <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"
+  <SettingsMenuItem @trigger:click="opened = !opened">
+    <template #trigger>
+      <div class="vc-language-selector__trigger">
+        <VcImage
+          :src="currLocaleFlag"
+          :empty-icon="'fas fa-globe'"
+          class="vc-language-selector__flag"
         />
-      </template>
-    </GenericDropdown>
-  </div>
+        <span class="vc-language-selector__title">
+          {{ $t("COMPONENTS.LANGUAGE_SELECTOR.TITLE") }}
+        </span>
+      </div>
+    </template>
+
+    <template #content>
+      <GenericDropdown
+        :opened="opened"
+        :items="languageItems"
+        :is-item-active="(lang) => lang.lang === $i18n.locale"
+        @item-click="handleLanguageSelect"
+      >
+        <template #item="{ item: lang, click }">
+          <div
+            class="vc-language-selector__item"
+            :class="{ 'vc-language-selector__item--active': lang.lang === $i18n.locale }"
+            @click="click"
+          >
+            <VcImage
+              :src="lang.flag"
+              class="vc-language-selector__flag"
+            />
+            <span class="vc-language-selector__item-title">{{ lang.title }}</span>
+          </div>
+        </template>
+      </GenericDropdown>
+    </template>
+  </SettingsMenuItem>
 </template>
 
 <script lang="ts" setup>
@@ -31,7 +43,8 @@ import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
 import { GenericDropdown } from "../generic-dropdown";
 import { watch, ref } from "vue";
-import { SettingsMenuItem } from "../menu-item";
+import { SettingsMenuItem } from "../settings-menu-item";
+import { VcImage } from "../../../ui/components";
 
 interface ILanguage {
   lang: string;
@@ -44,6 +57,7 @@ const { availableLocales, getLocaleMessage, locale } = useI18n({ useScope: "glob
 const { setLocale, getFlag } = useLanguages();
 
 const opened = ref(false);
+const currLocaleFlag = ref<string>();
 
 const languageItems: ILanguage[] = availableLocales
   .map((locale: string) => ({
@@ -56,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 },
@@ -72,25 +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 {
-  &__img {
-    @apply tw-w-6 tw-h-6 tw-mr-2;
+  &__trigger {
+    @apply tw-flex tw-items-center tw-w-full;
+  }
+
+  &__flag {
+    @apply tw-w-6 tw-h-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)];
 
-    &--button {
-      @apply tw-mr-0;
+    &--active {
+      @apply tw-bg-[color:var(--menu-item-bg-active)];
     }
   }
 
-  &__button-wrap {
-    @apply 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/_internal/notification/notification.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="tw-flex">
     <VcRow class="tw-justify-between tw-grow tw-basis-0 !tw-flex">
-      <template v-if="currentTemplate">
-        <notificationTemplateRenderer />
-      </template>
-      <template v-else>
+      <div @click="handleClick">
+        <component
+          :is="currentTemplate"
+          v-if="currentTemplate"
+          v-bind="templateProps"
+        />
         <NotificationTemplate
+          v-else
           :color="notificationStyle.color"
           :title="notification.title ?? ''"
           :icon="notificationStyle.icon"
@@ -14,20 +17,20 @@
           <VcHint
             v-if="notification.description"
             class="tw-mb-1"
-            >{{ notification.description }}</VcHint
           >
+            {{ notification.description }}
+          </VcHint>
         </NotificationTemplate>
-      </template>
+      </div>
     </VcRow>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, h } from "vue";
+import { computed } from "vue";
 import { PushNotification } from "./../../../../../core/api/platform";
-import { VcRow } from "./../../../../../ui/components";
-import { NotificationTemplate } from "./../../../notification-template";
 import { NotificationTemplateConstructor } from "../../../../../core/types";
+import { NotificationTemplate } from "../../../notification-template";
 
 export interface Props {
   notification: PushNotification;
@@ -35,28 +38,26 @@ export interface Props {
 }
 
 export interface Emits {
-  (event: "onClick"): void;
+  (event: "onClick", notification: PushNotification): void;
 }
 
 const props = defineProps<Props>();
-
 const emit = defineEmits<Emits>();
 
+const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
+
+const templateProps = computed(() => ({
+  notification: props.notification,
+}));
+
+const handleClick = () => {
+  emit("onClick", props.notification);
+};
+
 const notificationStyle = computed(() => ({
   color: "var(--notification-icon-color)",
   icon: "fas fa-info",
 }));
-
-const currentTemplate = computed(() => props.templates?.find((x) => x?.notifyType === props.notification.notifyType));
-
-function notificationTemplateRenderer() {
-  const notificationTemplate = currentTemplate.value;
-
-  return (
-    notificationTemplate &&
-    h(notificationTemplate, { notification: props.notification, onNotificationClick: () => emit("onClick") })
-  );
-}
 </script>
 
 <style lang="scss">