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

package/ui/components/atoms/vc-widget/vc-widget.vue

@@ -5,6 +5,7 @@
       crossAxis: 0,
       mainAxis: -10,
     }"
+    :delay="1000"
   >
     <div
       class="vc-widget"
@@ -18,20 +19,20 @@
     >
       <VcBadge
         :content="truncateCount"
-        :size="isExpanded ? 'm' : 's'"
+        size="s"
       >
         <div class="vc-widget__icon-container">
           <VcIcon
             v-if="icon"
             class="vc-widget__icon"
             :icon="icon"
-            :size="isExpanded ? 'xxl' : 'l'"
+            size="m"
           ></VcIcon>
         </div>
       </VcBadge>
       <div class="vc-widget__content">
         <div
-          v-if="title && isExpanded"
+          v-if="title"
           class="vc-widget__title"
         >
           {{ title }}
@@ -86,34 +87,42 @@ function onClick() {
 
 <style lang="scss">
 :root {
-  --widget-bg-color: var(--additional-50);
-  --widget-border-color: var(--base-border-color, var(--neutrals-200));
-  --widget-bg-hover-color: var(--primary-50);
-  --widget-icon-color: var(--secondary-500);
-  --widget-icon-disabled-color: var(--neutrals-300);
-  --widget-title-color: var(--base-text-color, var(--neutrals-950));
-  --widget-title-disabled-color: var(--neutrals-300);
-  --widget-value-color: var(--primary-400);
-  --widget-value-disabled-color: var(--neutrals-300);
+  --widget-bg-color: transparent;
+  --widget-bg-hover-color: transparent;
+  --widget-icon-color: var(--neutrals-700);
+  --widget-icon-hover-color: var(--primary-600);
+  --widget-icon-disabled-color: var(--neutrals-400);
+  --widget-title-color: var(--neutrals-600);
+  --widget-title-hover-color: var(--primary-600);
+  --widget-title-disabled-color: var(--neutrals-400);
 }
 
 .vc-widget {
-  @apply tw-relative tw-shrink-0 tw-py-4 tw-px-2;
-  @apply tw-flex tw-overflow-hidden tw-box-border tw-flex-col tw-items-center tw-justify-center tw-border-b tw-border-solid tw-cursor-pointer;
-  @apply tw-bg-[color:var(--widget-bg-color)] tw-border-b-[color:var(--widget-border-color)];
+  @apply tw-relative tw-shrink-0 tw-px-2;
+  @apply tw-flex tw-overflow-hidden tw-box-border tw-flex-col tw-items-center tw-justify-center tw-cursor-pointer;
+  @apply tw-bg-[color:var(--widget-bg-color)];
+  @apply tw-transition-colors tw-duration-200;
 
   &:hover {
     @apply tw-bg-[color:var(--widget-bg-hover-color)];
-  }
 
-  &--expanded {
-    @apply tw-w-32 tw-h-32;
-  }
+    .vc-widget__title {
+      @apply tw-text-[color:var(--widget-title-hover-color)];
+    }
 
-  &--collapsed {
-    @apply tw-w-12 tw-h-12;
+    .vc-widget__icon {
+      @apply tw-text-[color:var(--widget-icon-hover-color)];
+    }
   }
 
+  // &--expanded {
+  //   @apply tw-w-32 tw-h-32;
+  // }
+
+  // &--collapsed {
+  //   @apply tw-w-12 tw-h-12;
+  // }
+
   &--mobile {
     @apply tw-w-28;
     @apply tw-border-none #{!important};
@@ -132,7 +141,7 @@ function onClick() {
   }
 
   &__title {
-    @apply tw-font-medium tw-text-sm tw-text-[color:var(--widget-title-color)] tw-mt-2 tw-mx-0 tw-text-center tw-line-clamp-2;
+    @apply tw-font-medium tw-text-xs tw-text-[color:var(--widget-title-color)] tw-mt-1 tw-mx-0 tw-text-center tw-line-clamp-2;
   }
 
   &--disabled &__title {

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -9,7 +9,7 @@
       >
         <VcIcon
           size="xs"
-          icon="fas fa-arrow-left"
+          :icon="ArrowLeftIcon"
         ></VcIcon>
       </div>
 
@@ -33,7 +33,7 @@
       >
         <VcIcon
           size="xs"
-          icon="fas fa-arrow-right"
+          :icon="ArrowRightIcon"
         ></VcIcon>
       </div>
 
@@ -69,6 +69,7 @@
 <script lang="ts" setup>
 import { ref, computed, toRefs } from "vue";
 import { VcIcon, VcInput } from "./../../";
+import { ArrowLeftIcon, ArrowRightIcon } from "./../../atoms/vc-icon/icons";
 
 export interface Props {
   expanded?: boolean;
@@ -166,7 +167,7 @@ const pagesToShow = computed(() => {
 :root {
   --pagination-item-width: 30px;
   --pagination-item-height: 30px;
-  --pagination-item-color: var(--base-text-color, var(--neutrals-950));
+  --pagination-item-color: var(--neutrals-500);
   --pagination-item-color-hover: var(--primary-500);
   --pagination-item-color-current: var(--additional-50);
   --pagination-item-color-disabled: var(--neutrals-400);
@@ -202,18 +203,15 @@ const pagesToShow = computed(() => {
   &__item {
     @apply tw-flex tw-items-center tw-justify-center tw-w-[var(--pagination-item-width)]
     tw-h-[var(--pagination-item-height)]
-    tw-bg-[color:var(--pagination-item-background-color)]
-    tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color)]
-    tw-rounded-[var(--pagination-item-border-radius)]
+    tw-rounded-full
     tw-text-[color:var(--pagination-item-color)]
     tw-box-border
     tw-transition tw-duration-200
-    tw-mr-3 tw-select-none last:tw-mr-0 tw-text-xs tw-cursor-pointer;
+    tw-mr-3 tw-select-none last:tw-mr-0 tw-text-xs tw-cursor-pointer tw-shrink-0;
 
     &:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-hover)]
       tw-text-[color:var(--pagination-item-color-hover)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-hover)]
       tw-cursor-pointer;
     }
 
@@ -221,7 +219,6 @@ const pagesToShow = computed(() => {
     &_current:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-current)]
       tw-text-[color:var(--pagination-item-color-current)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-current)]
       tw-cursor-auto;
     }
 
@@ -229,26 +226,21 @@ const pagesToShow = computed(() => {
     &_disabled:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-disabled)]
       tw-text-[color:var(--pagination-item-color-disabled)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-disabled)]
       tw-cursor-auto;
     }
 
     &_hover {
       @apply hover:tw-bg-[color:var(--pagination-item-background-color-hover)]
-    hover:tw-text-[color:var(--pagination-item-color-hover)]
-    hover:tw-border hover:tw-border-solid
-    hover:tw-border-[color:var(--pagination-item-border-color-hover)] tw-cursor-pointer;
+    hover:tw-text-[color:var(--pagination-item-color-hover)] tw-cursor-pointer;
     }
   }
 
   &__jump {
-    display: flex;
-    align-items: center;
+    @apply tw-flex tw-items-center tw-text-sm;
   }
 
   &__jump input {
-    width: 50px;
-    text-align: center;
+    @apply tw-w-10 tw-text-center;
   }
 
   &__input {

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -3,33 +3,103 @@
     class="vc-app-bar"
     :class="{ 'vc-app-bar--mobile': $isMobile.value }"
   >
-    <slot name="app-switcher"></slot>
-
-    <template v-if="!$isMobile.value || quantity === 0">
-      <div class="tw-w-auto tw-h-[var(--app-bar-height)] tw-flex tw-items-center">
-        <!-- Logo -->
-        <img
-          class="vc-app-bar__logo"
-          :class="{
-            'vc-app-bar__logo--mobile': $isMobile.value,
-          }"
-          alt="logo"
-          :src="logo"
-          @click="$emit('logo:click')"
-        />
-      </div>
+    <div class="vc-app-bar__header">
+      <template v-if="!$isMobile.value || quantity === 0">
+        <div class="tw-w-auto tw-h-[var(--app-bar-height)] tw-flex tw-items-center">
+          <!-- Logo -->
+          <img
+            class="vc-app-bar__logo"
+            :class="{
+              'vc-app-bar__logo--mobile': $isMobile.value,
+            }"
+            alt="logo"
+            :src="logo"
+            @click="$emit('logo:click')"
+          />
+        </div>
 
-      <!-- Title -->
-      <div
+        <!-- Title -->
+        <!-- <div
         v-if="title && $isDesktop.value"
         class="vc-app-bar__title"
       >
         {{ title }}
+      </div> -->
+      </template>
+      <div
+        ref="referenceButton"
+        class="vc-app-bar__menu-button"
+        @click="toggleMenu"
+      >
+        <div class="vc-app-bar__menu-button-wrap">
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 11H11M1 6H11M1 1H11"
+              stroke="#737373"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <div
+            v-if="hasUnreadNotifications"
+            class="vc-app-bar__menu-button-accent"
+          ></div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="isMenuOpen"
+      v-on-click-outside="[
+        () => {
+          isMenuOpen = false;
+        },
+        { ignore: [referenceButton] },
+      ]"
+      class="vc-app-bar__menu"
+    >
+      <div class="vc-app-bar__menu-header">
+        <slot name="toolbar"></slot>
+        <div class="vc-app__spacer"></div>
+
+        <div class="vc-app-bar__menu-close-button">
+          <VcButton
+            icon-class="vc-app-bar__menu-close-button-icon"
+            :icon="CrossSignIcon"
+            icon-size="xs"
+            text
+            @click.stop="toggleMenu"
+          >
+          </VcButton>
+        </div>
       </div>
+
+      <div class="vc-app-bar__menu-content">
+        <!-- Dropdowns -->
+        <div
+          id="vc-app-bar__menu-dropdowns"
+          class="vc-app-bar__menu-dropdowns"
+        ></div>
+
+        <slot name="app-switcher"></slot>
+      </div>
+    </div>
+
+    <!-- <slot name="app-switcher"></slot> -->
+
+    <!-- <template v-if="isMenuOpen">
+      <div class="vc-app-bar__menu"></div>
     </template>
 
     <template v-if="$isMobile.value">
-      <!-- Show blades name when at least one blade is opened -->
+      Show blades name when at least one blade is opened
       <div
         v-if="quantity === 1"
         class="vc-app-bar__blade-title"
@@ -37,7 +107,7 @@
         {{ viewTitle }}
       </div>
 
-      <!-- Show back link when more than one blade is opened -->
+      Show back link when more than one blade is opened
       <VcLink
         v-else-if="quantity > 1"
         class="vc-app-bar__backlink"
@@ -49,14 +119,22 @@
         ></VcIcon>
         <span class="vc-app-bar__backlink-text">{{ t("COMPONENTS.ORGANISMS.VC_APP.INTERNAL.VC_APP_BAR.BACK") }}</span>
       </VcLink>
-    </template>
+    </template> -->
+
+    <div class="vc-app-bar__content">
+      <slot name="navmenu"></slot>
+    </div>
 
     <!-- Additional spacer -->
-    <div class="vc-app__spacer"></div>
+    <!-- <div class="vc-app__spacer"></div> -->
 
     <!-- Toolbar container -->
-    <div class="vc-app__toolbar">
+    <!-- <div class="vc-app__toolbar">
       <slot name="toolbar"></slot>
+    </div> -->
+
+    <div class="vc-app-bar__footer">
+      <slot name="user-dropdown"></slot>
     </div>
 
     <!-- Show menu toggler on mobile devices -->
@@ -72,11 +150,13 @@
 
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { VcIcon, VcLink } from "./../../../../";
+import { CrossSignIcon, VcIcon, VcLink } from "./../../../../";
 import { IBladeToolbar } from "./../../../../../../core/types";
 import { useBladeNavigation } from "./../../../../../../shared";
-import { Ref, ref } from "vue";
+import { Ref, computed, ref } from "vue";
 import { watchDebounced } from "@vueuse/core";
+import { vOnClickOutside } from "@vueuse/components";
+import { useNotifications } from "../../../../../../core/composables";
 
 export interface Props {
   logo?: string;
@@ -96,11 +176,22 @@ defineProps<Props>();
 defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
+const { notifications } = useNotifications();
 
 const { blades } = useBladeNavigation();
 
 const viewTitle: Ref<string> = ref("");
 const quantity = ref();
+const isMenuOpen = ref(false);
+const referenceButton = ref<HTMLElement | null>(null);
+
+const hasUnreadNotifications = computed(() => {
+  return notifications.value.some((item) => item.isNew);
+});
+
+function toggleMenu() {
+  isMenuOpen.value = !isMenuOpen.value;
+}
 
 watchDebounced(
   blades,
@@ -115,13 +206,16 @@ watchDebounced(
 
 <style lang="scss">
 :root {
-  --app-bar-height: 60px;
-  --app-bar-background-color: var(--additional-50);
+  --app-bar-height: 82px;
+  --app-bar-width: 246px;
+  --app-bar-logo-width: 125px;
+  --app-bar-logo-height: 46px;
+  --app-bar-background-color: var(--neutrals-50);
   --app-bar-button-width: 50px;
-  --app-bar-button-border-color: var(--app-bar-background-color);
-  --app-bar-button-color: var(--secondary-600);
+  --app-bar-header-bottom-border-color: var(--neutrals-200);
+  --app-bar-button-color: var(--neutrals-500);
   --app-bar-button-background-color: var(--app-bar-background-color);
-  --app-bar-button-color-hover: var(--secondary-700);
+  --app-bar-button-color-hover: var(--neutrals-600);
   --app-bar-button-background-color-hover: var(--app-bar-background-color);
   --app-bar-product-name-color: var(--neutrals-600);
   --app-bar-product-name-size: 20px;
@@ -129,6 +223,7 @@ watchDebounced(
   --app-bar-divider-color: var(--additional-50);
   --app-bar-account-info-role-color: var(--neutrals-400);
 
+  --app-bar-content-visible-border-color: var(--primary-500);
   --app-bar-burger-color: var(--primary-500);
 
   --app-bar-shadow-color: var(--additional-950);
@@ -136,19 +231,87 @@ watchDebounced(
 }
 
 .vc-app-bar {
-  @apply tw-relative tw-flex tw-items-center tw-justify-between tw-px-4;
-  height: var(--app-bar-height);
+  @apply tw-relative tw-flex tw-flex-col tw-w-[var(--app-bar-width)];
   background-color: var(--app-bar-background-color);
-  box-shadow: var(--app-bar-shadow);
   @apply tw-box-border;
 }
 
+.vc-app-bar__menu-button {
+  @apply tw-cursor-pointer tw-relative;
+
+  &-wrap {
+    @apply tw-relative;
+  }
+
+  &-accent {
+    @apply tw-block tw-absolute tw-right-[-7px] tw-top-[-5px]
+           tw-w-[5px] tw-h-[5px]
+           tw-bg-[color:var(--notification-dropdown-accent-color)]
+           tw-rounded-full tw-z-[1];
+  }
+}
+
+.vc-app-bar__header {
+  @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-4;
+  border-bottom: 1px solid var(--app-bar-border-color);
+}
+
+.vc-app-bar__menu-close-button {
+  @apply tw-pr-4 tw-flex tw-items-center tw-justify-center;
+}
+
+.vc-app-bar__menu-close-button-icon {
+  @apply tw-text-[color:var(--app-bar-button-color)];
+}
+
+.vc-app-bar__content {
+  @apply tw-flex-grow tw-px-4;
+  // border-top: 1px solid var(--app-bar-header-bottom-border-color);
+}
+
+.vc-app-bar__menu-content {
+  @apply tw-relative;
+
+  &:before {
+    content: "";
+    @apply tw-absolute tw-left-0 tw-top-[-1px] tw-w-full tw-h-[1px] tw-bg-[color:var(--app-bar-header-bottom-border-color)] tw-z-[1];
+  }
+
+  .vc-app-bar__menu-dropdowns:not(:empty) {
+    &:before {
+      content: "";
+      @apply tw-absolute tw-left-0 tw-top-[-2px] tw-w-full tw-h-[2px] tw-bg-[color:var(--app-bar-content-visible-border-color)] tw-z-[1] #{!important};
+    }
+  }
+}
+
+.vc-app-bar__footer {
+  @apply tw-flex-none;
+}
+
+.vc-app-bar__menu {
+  @apply tw-w-full tw-h-full tw-absolute tw-top-0 tw-left-0 tw-z-[999] tw-bg-[color:var(--app-bar-background-color)];
+}
+
+.vc-app-bar__menu-header {
+  @apply tw-flex tw-h-[var(--app-bar-height)];
+  // border-bottom: 1px solid var(--app-bar-header-bottom-border-color);
+}
+
+.vc-app-bar__menu-dropdowns {
+  @apply tw-w-full tw-h-full tw-invisible;
+
+  &:not(:empty) {
+    @apply tw-visible tw-border-b-[2px] tw-border-[color:var(--app-bar-header-bottom-border-color)] tw-z-[2];
+  }
+}
+
 .vc-app-bar--mobile {
   @apply tw-pr-0 tw-pl-3 #{!important};
 }
 
 .vc-app-bar__logo {
-  @apply tw-h-1/2 tw-cursor-pointer tw-mx-4;
+  @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-mx-2;
 
   &--mobile {
     @apply tw-mx-1;