@vc-shell/framework 1.0.289 → 1.0.291

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>

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

@@ -1,72 +1,83 @@
 <template>
-  <div
-    v-on-click-outside="onClose"
-    class="user-dropdown-button"
-    :class="{
-      'user-dropdown-button_active': accountMenuVisible,
-      'tw-w-auto': disabled,
-    }"
-    @click.stop="toggleAccountMenuVisible"
+  <AppBarButtonTemplate
+    position="bottom-start"
+    :before-open="beforeOpen"
   >
-    <div class="user-dropdown-button__wrap tw-flex tw-justify-between tw-items-center tw-flex-auto">
+    <template #button="{ opened }">
       <div
-        v-if="avatarUrl"
-        class="user-dropdown-button__avatar"
-        :style="imageHandler"
-      ></div>
-      <VcIcon
-        v-else
-        icon="fas fa-user-circle"
-        size="xxl"
-        class="tw-text-[color:var(--app-bar-button-color)]"
-      />
-      <div class="tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden">
-        <div class="user-dropdown-button__name tw-truncate">
-          {{ name || user?.userName }}
-        </div>
-        <div class="user-dropdown-button__role">
-          {{
-            (role && $t(`SHELL.USER.ROLE.${role}`)) ||
-            (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
-          }}
-        </div>
-      </div>
-      <div
-        v-if="!disabled && menu && menu.length"
-        class="user-dropdown-button__chevron"
+        class="vc-user-dropdown-button"
+        :class="{
+          'vc-user-dropdown-button--active': opened,
+          'vc-user-dropdown-button--auto-width': disabled,
+        }"
       >
-        <VcIcon
-          icon="fas fa-chevron-down"
-          size="xl"
-        ></VcIcon>
+        <div
+          class="vc-user-dropdown-button__wrap"
+          :class="{
+            'vc-user-dropdown-button__wrap--active': opened,
+          }"
+        >
+          <div
+            v-if="avatarUrl"
+            class="vc-user-dropdown-button__avatar"
+            :style="imageHandler"
+          ></div>
+          <VcIcon
+            v-else
+            icon="fas fa-user-circle"
+            size="xxl"
+            class="vc-user-dropdown-button__icon"
+          />
+          <div class="vc-user-dropdown-button__info">
+            <div class="vc-user-dropdown-button__name">
+              {{ name || user?.userName }}
+            </div>
+            <div class="vc-user-dropdown-button__role">
+              {{
+                (role && $t(`SHELL.USER.ROLE.${role}`)) ||
+                (user?.isAdministrator ? $t("SHELL.USER.ROLE.ADMINISTRATOR") : "")
+              }}
+            </div>
+          </div>
+          <div
+            v-if="!disabled && menu && menu.length"
+            class="vc-user-dropdown-button__chevron"
+          >
+            <VcIcon
+              icon="fas fa-chevron-down"
+              size="xl"
+            ></VcIcon>
+          </div>
+        </div>
       </div>
-    </div>
-    <div
-      v-if="menu && accountMenuVisible"
-      class="user-dropdown-button__menu"
-      @click.stop="accountMenuVisible = false"
-    >
+    </template>
+    <template #dropdown-content="{ opened, toggle }">
       <div
-        v-for="(item, i) in menu"
-        :key="`menu_item_${i}`"
-        class="user-dropdown-button__menu-item tw-group"
-        @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
+        v-if="menu && opened"
+        class="vc-user-dropdown-button__menu"
+        @click.stop="toggle"
       >
-        <VcIcon
-          v-if="item.icon"
-          :icon="item.icon"
-          size="l"
-          class="tw-mr-3 tw-text-[color:var(--app-bar-button-color)] group-hover:tw-text-[color:var(--app-bar-button-color-hover)]"
-        ></VcIcon>
-        <p>{{ item.title }}</p>
+        <div
+          v-for="(item, i) in menu"
+          :key="`menu_item_${i}`"
+          class="vc-user-dropdown-button__menu-item"
+          @click="item.hasOwnProperty('clickHandler') ? item.clickHandler?.() : null"
+        >
+          <VcIcon
+            v-if="item.icon"
+            :icon="item.icon"
+            size="l"
+            class="vc-user-dropdown-button__menu-icon"
+          ></VcIcon>
+          <p>{{ item.title }}</p>
+        </div>
       </div>
-    </div>
-  </div>
+    </template>
+  </AppBarButtonTemplate>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
 import { useUser } from "../../../core/composables";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -75,12 +86,14 @@ import { BladeMenu } from "../../../core/types";
 import { usePopup } from "../popup-handler/composables/usePopup";
 import { ChangePassword } from "../change-password";
 import { useBladeNavigation } from "..";
+import { AppBarButtonTemplate } from "./../app-bar-button";
 
 export interface Props {
   avatarUrl?: string | undefined;
   name?: string | undefined;
   role?: string | undefined;
   menuItems?: BladeMenu[];
+  baseMenuItemsHandler?: (defaultMenuItems: BladeMenu[]) => BladeMenu[];
   disabled?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -95,9 +108,8 @@ const { open } = usePopup({
   component: ChangePassword,
 });
 const { closeBlade } = useBladeNavigation();
-const accountMenuVisible = ref(false);
-const menu = computed(() => [
-  ...props.menuItems,
+
+const defaultMenuItems = ref([
   {
     title: t("SHELL.ACCOUNT.CHANGE_PASSWORD"),
     icon: "fas fa-key",
@@ -119,15 +131,25 @@ const menu = computed(() => [
   },
 ]);
 
-const toggleAccountMenuVisible = () => {
-  if (!props.disabled && menu.value && menu.value.length) {
-    accountMenuVisible.value = !accountMenuVisible.value;
+const menu = computed(() => {
+  const defaultItems = handleDefaultMenuItems();
+
+  if (defaultItems?.length) {
+    return [...props.menuItems, ...defaultItems];
+  }
+  return [...props.menuItems];
+});
+
+function handleDefaultMenuItems() {
+  if (props.baseMenuItemsHandler && typeof props.baseMenuItemsHandler === "function") {
+    return props.baseMenuItemsHandler(defaultMenuItems.value);
   }
-};
+  return defaultMenuItems.value;
+}
 
-const onClose = () => {
-  accountMenuVisible.value = false;
-};
+function beforeOpen() {
+  return !props.disabled && menu.value?.length > 0;
+}
 
 const imageHandler = computed(() => {
   if (props.avatarUrl) {
@@ -138,53 +160,96 @@ const imageHandler = computed(() => {
 </script>
 
 <style lang="scss">
-.user-dropdown-button {
-  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--app-bar-divider-color)] tw-px-4 tw-cursor-pointer
-    tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
+:root {
+  --user-dropdown-account-info-name-color: var(--base-text-color, var(--neutrals-950));
+  --user-dropdown-account-info-role-color: var(--secondary-600);
+  --user-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
+  --user-dropdown-border-color: var(--app-bar-divider-color);
+  --user-dropdown-button-color: var(--primary-500);
+  --user-dropdown-button-color-hover: var(--primary-700);
+  --user-dropdown-menu-item-bg-hover: var(--primary-50);
+  --user-dropdown-menu-item-bg: var(--additional-50);
+  --user-dropdown-menu-text-color: var(--additional-950);
+  --user-dropdown-chevron-color: var(--secondary-600);
+  --user-dropdown-chevron-color-hover: var(--secondary-700);
+  --user-dropdown-wrap-bg: var(--additional-50);
+}
+
+.vc-user-dropdown-button {
+  @apply tw-w-[240px] tw-border-l tw-border-solid tw-border-l-[color:var(--user-dropdown-border-color)]  tw-cursor-pointer
+  tw-relative tw-flex tw-h-full tw-flex-col tw-select-none;
+
+  .vc-app_mobile & {
+    @apply tw-w-full #{!important};
+  }
 
-  &:hover,
-  &_active {
-    @apply tw-bg-[color:var(--app-bar-toolbar-icon-background-hover)];
+  &--auto-width {
+    @apply tw-w-auto;
+  }
+
+  &__wrap {
+    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-px-4 tw-bg-[--user-dropdown-wrap-bg];
   }
 
   &__avatar {
-    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] tw-bg-[color:var(--app-bar-account-info-role-color)]
-      tw-bg-cover tw-bg-center tw-shrink-0;
+    @apply tw-rounded-full tw-overflow-hidden tw-w-[34px] tw-h-[34px] 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)];
+  }
+
+  &__info {
+    @apply tw-grow tw-basis-0 tw-ml-3 tw-overflow-hidden;
   }
 
   &__name {
-    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-name-color)];
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-truncate;
   }
 
   &__role {
-    @apply tw-text-base tw-text-[color:var(--app-bar-account-info-role-color)];
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-role-color)];
   }
 
   &__chevron {
-    @apply tw-text-[#7e8e9d] [transition:color_0.2s_ease];
+    @apply tw-text-[color:var(--user-dropdown-chevron-color)] tw-transition-colors tw-duration-200;
   }
 
   &:hover &__chevron {
-    @apply tw-text-[color:#34414f];
+    @apply tw-text-[color:var(--user-dropdown-chevron-color-hover)];
   }
 
-  &_active &__chevron {
+  &--active &__chevron {
     @apply -tw-scale-y-100;
   }
 
   &__menu {
-    @apply tw-absolute -tw-left-px tw-right-0 tw-top-[var(--app-bar-height)] tw-bg-white tw-z-[10000] tw-shadow-[0_-6px_6px_white,1px_1px_22px_rgba(126,142,157,0.2)];
+    @apply tw-w-full;
 
     &-item {
-      @apply 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-bg-white hover:tw-bg-[#eff7fc] tw-flex tw-flex-row tw-items-center;
+      @apply tw-p-3 tw-text-sm tw-text-[color:var(--user-dropdown-menu-text-color)] tw-border-solid tw-border-b tw-border-b-[color:var(--user-dropdown-divider-color)] tw-bg-[color:var(--user-dropdown-menu-item-bg)] tw-flex tw-flex-row tw-items-center tw-cursor-pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        @apply tw-bg-[color:var(--user-dropdown-menu-item-bg-hover)];
+
+        .vc-user-dropdown-button__menu-icon {
+          @apply tw-text-[color:var(--user-dropdown-button-color-hover)];
+        }
+      }
+
+      &:last-of-type {
+        @apply tw-border-b-0;
+      }
     }
   }
 
-  .vc-app_mobile & {
-    &__wrap {
-      height: var(--app-bar-height);
-    }
+  &__menu-icon {
+    @apply tw-mr-3 tw-text-[color:var(--user-dropdown-button-color)];
+  }
 
+  .vc-app_mobile & {
     &__menu {
       @apply tw-static tw-shadow-none #{!important};
     }
@@ -192,6 +257,10 @@ const imageHandler = computed(() => {
     &__menu-item {
       @apply tw-border-none #{!important};
     }
+
+    &__wrap--active {
+      @apply tw-shadow-none;
+    }
   }
 }
 </style>

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -10,7 +10,7 @@
     @collapse="$emit('collapse:blade')"
   >
     <!-- Blade contents -->
-    <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[#eaedf3]">
+    <div class="tw-flex tw-grow-1 tw-border-t tw-border-solid tw-border-t-[--assets-details-border]">
       <div class="assets-details__content tw-grow tw-basis-0 tw-w-full">
         <VcContainer :no-padding="true">
           <div class="tw-p-4">
@@ -27,7 +27,7 @@
                 <template v-else>
                   <VcIcon
                     :icon="getFileThumbnail(defaultAsset.name)"
-                    class="tw-text-[#a9bfd2] tw-text-[128px] tw-shrink-0"
+                    class="tw-text-[color:var(--assets-details-thumbnail-color)] tw-text-[128px] tw-shrink-0"
                   ></VcIcon>
                 </template>
                 <VcCol class="tw-ml-6">
@@ -217,3 +217,10 @@ function openLink(link: string | undefined) {
   location.href = link;
 }
 </script>
+
+<style lang="scss">
+:root {
+  --assets-details-border: var(--base-border-color, var(--neutrals-200));
+  --assets-details-thumbnail-color: var(--secondary-500);
+}
+</style>