@vc-shell/framework 1.0.290 → 1.0.291

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

@@ -1,54 +1,44 @@
 <template>
-  <div
-    v-on-click-outside="
-      () => {
-        isDropActive = false;
-      }
-    "
-    class="tw-relative"
+  <AppBarButtonTemplate
     :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
-    @click.stop="isDropActive = !isDropActive"
+    icon="fas fa-globe"
+    position="bottom-end"
   >
-    <div
-      :class="[
-        {
-          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10000]':
-            isDropActive,
-        },
-        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
-      ]"
-    >
-      <VcIcon
-        icon="fas fa-globe"
-        size="xl"
-      ></VcIcon>
-    </div>
-    <div
-      v-if="isDropActive"
-      class="tw-absolute tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] tw-w-min tw-z-[10000]"
-    >
-      <div
-        v-for="(lang, i) in languageItems"
-        :key="i"
-        class="tw-p-3 tw-text-lg tw-text-black tw-border-l tw-border-solid tw-border-l-[#eef0f2] tw-border-b tw-border-b-[#eef0f2] tw-white tw-cursor-pointer hover:tw-bg-[#eff7fc]"
-        @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+    <template #dropdown-content="{ opened, toggle }">
+      <Sidebar
+        :is-expanded="$isMobile.value ? opened : false"
+        position="right"
+        render="mobile"
+        @close="toggle"
       >
-        {{ lang.title }}
-      </div>
-    </div>
-  </div>
+        <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"
+              @click="lang.hasOwnProperty('clickHandler') && lang.clickHandler(lang.lang)"
+            >
+              {{ lang.title }}
+            </div>
+          </div>
+        </template>
+      </Sidebar>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../ui/components";
-import { ref } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 import { useI18n } from "vue-i18n";
 import { useLanguages } from "../../../core/composables";
+import { AppBarButtonTemplate } from "./../app-bar-button";
+import { Sidebar } from "./../sidebar";
 
 const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
 const { setLocale } = useLanguages();
-const isDropActive = ref(false);
 
 const languageItems = availableLocales
   .map((locale: string) => ({
@@ -60,3 +50,29 @@ const languageItems = availableLocales
   }))
   .filter((item) => item.title);
 </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);
+}
+
+.vc-language-selector {
+  &__dropdown {
+    @apply tw-bg-[color:var(--language-selector-bg-color)] tw-w-full;
+  }
+
+  &__item {
+    @apply 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);
+    }
+  }
+}
+</style>

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

@@ -43,7 +43,7 @@ const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 const notificationStyle = computed(() => ({
-  color: "#A9BCCD",
+  color: "var(--notification-icon-color)",
   icon: "fas fa-info",
 }));
 
@@ -58,3 +58,9 @@ function notificationTemplateRenderer() {
   );
 }
 </script>
+
+<style lang="scss">
+:root {
+  --notification-icon-color: var(--secondary-600);
+}
+</style>

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

@@ -1,114 +1,90 @@
 <template>
-  <div
-    v-on-click-outside="
-      () => {
-        isDropdownVisible = false;
-      }
-    "
-    class="tw-relative tw-flex tw-items-center tw-h-full"
+  <AppBarButtonTemplate
     :title="$t('COMPONENTS.NOTIFICATION_DROPDOWN.TITLE')"
-    @click.stop="toggleNotificationsDrop"
+    position="bottom-end"
+    @toggle="onOpen"
   >
-    <div
-      :class="[
-        'tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-w-[var(--app-bar-button-width)] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-button-border-color)] tw-cursor-pointer tw-text-[color:var(--app-bar-button-color)] tw-bg-[color:var(--app-bar-button-background-color)]  tw-transition-[color]  tw-duration-200 hover:tw-text-[color:var(--app-bar-button-color-hover)] hover:tw-bg-[color:var(--app-bar-button-background-color-hover)]',
-        {
-          'tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)] [clip-path:inset(0px_-20px_0px_-20px)] tw-bg-white tw-z-[10001]':
-            isDropdownVisible && !$isMobile.value,
-        },
-      ]"
-    >
-      <VcIcon
-        icon="fas fa-bell"
-        size="xl"
-      ></VcIcon>
-      <div
-        :class="{
-          'tw-block tw-absolute tw-right-[12px] tw-top-[18px] tw-w-[7px] tw-h-[7px] tw-bg-[#ff4a4a] tw-rounded-full tw-z-[1]':
-            isAccent,
-        }"
-      ></div>
-    </div>
-    <div
-      v-if="$isMobile.value && isDropdownVisible"
-      class="tw-fixed tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-z-[10000] tw-bg-[#808c99] tw-opacity-60"
-      @click.stop="toggleNotificationsDrop"
-    ></div>
-    <div
-      v-if="isDropdownVisible"
-      class="tw-absolute tw-top-[var(--app-bar-height)] tw-z-[10000] tw-drop-shadow-[0px_4px_15px_rgba(43,67,84,0.15)] tw-bg-white tw-rounded-b-[6px] tw-w-[439px] tw-max-h-[350px] tw-min-h-[50px] tw-right-0 tw-overflow-hidden tw-flex tw-flex-col"
-      :class="{
-        'tw-hidden !tw-fixed !tw-right-0 !tw-top-0 !tw-max-h-full !tw-max-w-[300px] !tw-w-full !tw-bottom-0 !tw-z-[10000] !tw-border-0':
-          $isMobile.value,
-        '!tw-flex': $isMobile.value && isDropdownVisible,
-      }"
-    >
-      <div
-        v-if="$isMobile.value"
-        class="tw-text-[#319ed4] tw-flex tw-justify-end tw-items-center tw-p-4 tw-cursor-pointer"
-      >
+    <template #button>
+      <div class="vc-notification-dropdown__button">
         <VcIcon
-          icon="fas fa-times"
+          icon="fas fa-bell"
           size="xl"
-          @click.stop="isDropdownVisible = false"
         ></VcIcon>
+        <div
+          :class="{
+            'vc-notification-dropdown__accent': isAccent,
+          }"
+        ></div>
       </div>
-      <VcContainer
-        :no-padding="true"
-        @click.stop
+    </template>
+
+    <template #dropdown-content="{ opened, toggle }">
+      <Sidebar
+        :is-expanded="$isMobile.value ? opened : false"
+        position="right"
+        render="mobile"
+        @close="toggle"
       >
-        <VcCol v-if="notifications && notifications.length">
+        <template #content>
           <div
-            v-for="item in notifications"
-            :key="`notification_${item.id}`"
-            class="tw-py-[18px] tw-px-[15px] tw-border-b tw-border-solid tw-border-b-[#e3e7ec] tw-cursor-pointer last-of-type:tw-border-b-0"
+            v-if="opened"
+            :class="[
+              'vc-notification-dropdown__dropdown',
+              { 'vc-notification-dropdown__dropdown--mobile': $isMobile.value },
+            ]"
           >
-            <NotificationItem
-              :notification="item"
-              :templates="notificationTemplates || []"
-              @on-click="() => (isDropdownVisible = false)"
-            />
+            <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"
+                >
+                  <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>
-        </VcCol>
-        <div
-          v-else
-          class="tw-flex tw-justify-center tw-items-center tw-p-4"
-        >
-          {{ t("COMPONENTS.NOTIFICATION_DROPDOWN.EMPTY") }}
-        </div>
-      </VcContainer>
-    </div>
-  </div>
+        </template>
+      </Sidebar>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
-import { ref, inject, computed } from "vue";
+import { inject, computed } from "vue";
 import NotificationItem from "./_internal/notification/notification.vue";
 import { VcCol, VcContainer, VcIcon } from "../../../ui/components";
-import { vOnClickOutside } from "@vueuse/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";
 
 const notificationTemplates = inject<NotificationTemplateConstructor[]>("notificationTemplates");
 
 const { t } = useI18n({ useScope: "global" });
 const { notifications, markAllAsRead } = useNotifications();
 
-const isDropdownVisible = ref(false);
-
 const isAccent = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
 
-function toggleNotificationsDrop() {
-  isDropdownVisible.value = !isDropdownVisible.value;
-
-  onOpen();
-}
-
-function onOpen() {
-  if (notifications.value.some((x) => x.isNew)) {
+function onOpen(state: boolean) {
+  if (state && notifications.value.some((x) => x.isNew)) {
     markAllAsRead();
   }
 }
@@ -116,6 +92,43 @@ function onOpen() {
 
 <style lang="scss">
 :root {
-  --notification-color-error: #f14e4e;
+  --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);
+}
+
+.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;
+    }
+  }
+
+  &__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;
+    }
+  }
+
+  &__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

@@ -1,30 +1,33 @@
 <template>
-  <div class="tw-flex flex-row tw-justify-between tw-grow tw-basis-0">
-    <div class="tw-flex tw-items-center">
-      <div
-        class="tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-white tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0"
-        :style="{ 'background-color': color }"
-      >
-        <VcIcon
-          :icon="icon"
-          size="l"
-        ></VcIcon>
-      </div>
-      <div>
-        <p
-          class="tw-text-[color:var(--basic-black-color)] tw-text-xl tw-leading-[19px] tw-font-bold tw-m-0 tw-mb-1 [word-break:break-word]"
-          :class="{ 'tw-mr-4': $isDesktop.value }"
+  <div class="vc-notification-template">
+    <div class="vc-notification-template__container">
+      <div class="vc-notification-template__left">
+        <div
+          class="vc-notification-template__icon-container"
+          :style="{ 'background-color': color }"
         >
-          {{ title }}
+          <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">
+        <p class="vc-notification-template__time">
+          {{ pushTime }}
         </p>
-        <slot></slot>
       </div>
     </div>
-    <div class="tw-flex tw-shrink-0">
-      <p class="tw-text-s tw-leading-[18px] tw-text-[#8e8e8e] tw-m-0">
-        {{ pushTime }}
-      </p>
-    </div>
   </div>
 </template>
 
@@ -49,3 +52,44 @@ const pushTime = computed(() => {
   return moment(props.notification.created).locale(locale).format("L LT");
 });
 </script>
+
+<style lang="scss">
+:root {
+  --notification-template-icon-color: var(--additional-50);
+  --notification-template-text-color: var(--additional-950);
+  --notification-template-time-color: var(--neutrals-600);
+}
+
+.vc-notification-template {
+  &__container {
+    @apply tw-flex tw-flex-row tw-justify-between tw-grow tw-basis-0;
+  }
+
+  &__left {
+    @apply tw-flex tw-items-center;
+  }
+
+  &__icon-container {
+    @apply tw-w-[41px] tw-h-[41px] tw-rounded-full tw-text-[color:var(--notification-template-icon-color)]
+      tw-mr-4 tw-flex tw-items-center tw-justify-center tw-shrink-0;
+  }
+
+  &__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;
+    word-break: break-word;
+
+    &--desktop {
+      @apply tw-mr-4;
+    }
+  }
+
+  &__right {
+    @apply tw-flex tw-shrink-0;
+  }
+
+  &__time {
+    @apply tw-text-sm tw-text-[color:var(--notification-template-time-color)] tw-m-0;
+  }
+}
+</style>

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

@@ -6,4 +6,5 @@
   display: flex;
   display: flex;
   flex-direction: column;
+  gap: 5px;
 }

package/shared/components/sidebar/index.ts

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

package/shared/components/sidebar/sidebar.vue

@@ -0,0 +1,96 @@
+<template>
+  <template v-if="isExpanded">
+    <div
+      v-if="isExpanded"
+      class="sidebar__overlay"
+      @click.stop="$emit('close')"
+    ></div>
+
+    <div
+      v-if="isExpanded"
+      :class="[
+        'sidebar__dropdown',
+        {
+          'sidebar__dropdown--mobile': $isMobile.value && render === 'mobile',
+          'sidebar__dropdown--desktop': $isDesktop.value && render === 'desktop',
+          'sidebar__dropdown--always': render === 'always',
+          'sidebar__dropdown--left': position === 'left',
+          'sidebar__dropdown--right': position === 'right',
+        },
+      ]"
+    >
+      <slot name="header">
+        <div class="sidebar__header">
+          <VcIcon
+            icon="fas fa-times"
+            size="xl"
+            @click.stop="$emit('close')"
+          ></VcIcon>
+        </div>
+      </slot>
+
+      <slot name="content"></slot>
+    </div>
+  </template>
+  <template v-else>
+    <slot name="content"></slot>
+  </template>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  position: "left" | "right";
+  render: "always" | "mobile" | "desktop";
+  isExpanded: boolean;
+}
+
+export interface Emits {
+  (event: "close"): void;
+}
+
+defineEmits<Emits>();
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "right",
+  render: "always",
+});
+</script>
+
+<style lang="scss">
+:root {
+  --sidebar-mobile-bg-color: var(--neutral-500);
+  --sidebar-dropdown-mobile-icon-color: var(--primary-500);
+}
+
+.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];
+  }
+  &__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;
+  }
+
+  &__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);
+
+    &--mobile,
+    &--always,
+    &--desktop {
+      @apply tw-hidden tw-fixed tw-top-0 tw-max-h-full tw-max-w-[300px] tw-w-full tw-bottom-0 tw-z-[10000] tw-border-0;
+      display: flex !important;
+    }
+
+    &--left {
+      @apply tw-left-0 tw-right-auto;
+    }
+
+    &--right {
+      @apply tw-right-0 tw-left-auto;
+    }
+  }
+}
+</style>

package/shared/components/theme-selector/index.ts

@@ -0,0 +1 @@
+export { default as ThemeSelector } from "./theme-selector.vue";

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

@@ -0,0 +1,95 @@
+<template>
+  <AppBarButtonTemplate
+    icon="fas fa-palette"
+    :title="themeText(current)"
+  >
+    <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"
+          >
+            <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>
+</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 * as _ from "lodash-es";
+import { useI18n } from "vue-i18n";
+import { createUnrefFn } from "@vueuse/core";
+
+const { current, themes, setTheme } = useTheme();
+const { t } = useI18n({ useScope: "global" });
+
+watch(
+  () => current,
+  (newVal) => {
+    notification(themeText.value(newVal));
+  },
+  { deep: true },
+);
+
+const themeText = computed(() => {
+  return createUnrefFn((theme: string) => {
+    return _.capitalize(theme) + t("COMPONENTS.THEME_SELECTOR.THEME_CHANGED");
+  });
+});
+</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 {
+  &__dropdown {
+    @apply tw-bg-[color:var(--theme-selector-bg-color)] tw-w-full;
+  }
+
+  &__item {
+    @apply 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>