@vc-shell/framework 1.1.0-alpha.8 → 1.1.0

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

@@ -0,0 +1,350 @@
+<template>
+  <div
+    :id="String(notificationId)"
+    ref="nodeRef"
+    class="vc-notification"
+    :class="[`vc-notification--${position || 'top-center'}`, `vc-notification--${type || 'default'}`]"
+    @mouseenter="onMouseEnter"
+    @mouseleave="onMouseLeave"
+  >
+    <div class="vc-notification__type-indicator"></div>
+    <div class="vc-notification__content-wrapper">
+      <VcIcon
+        :icon="types[type ?? 'default']?.icon"
+        :style="{ color: types[type ?? 'default']?.color }"
+        size="l"
+        class="vc-notification__icon"
+      ></VcIcon>
+      <div
+        v-if="typeof content === 'string'"
+        class="vc-notification__content"
+      >
+        {{ content }}
+      </div>
+      <div v-else>
+        <component :is="content"></component>
+      </div>
+    </div>
+    <VcIcon
+      icon="material-close"
+      class="vc-notification__dismiss-icon"
+      size="s"
+      @click.stop="handleClose"
+    ></VcIcon>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Content, NotificationType, NotificationPosition } from "../../../../shared/components/notifications";
+import { VcIcon } from "../..";
+import { Ref, onMounted, ref, toRefs, watch } from "vue";
+
+export interface Props {
+  content?: Content;
+  notificationId?: number | string;
+  updateId?: number | string;
+  type?: NotificationType;
+  timeout?: number | boolean;
+  pauseOnHover?: boolean;
+  limit?: number;
+  position?: NotificationPosition;
+}
+
+// Define events that the component can emit
+const emit = defineEmits<{
+  (e: "close", id: number | string | undefined): void;
+}>();
+
+const props = defineProps<Props>();
+
+const types: Record<NotificationType, { icon: string; color: string }> = {
+  default: { icon: "material-info", color: "var(--notification-info)" },
+  success: { icon: "material-check_circle", color: "var(--notification-success)" },
+  error: { icon: "material-error", color: "var(--notification-error)" },
+  warning: { icon: "material-warning", color: "var(--notification-warning)" },
+};
+const { timeout } = toRefs(props);
+
+// Timer type for improved type safety
+interface NotificationTimer {
+  pause: () => void;
+  resume: () => void;
+  start: () => void;
+}
+
+const timer = ref<NotificationTimer | null>(null);
+
+// Function to close the notification
+function handleClose() {
+  emit("close", props.notificationId);
+}
+
+watch(
+  timeout as Ref<number | boolean>,
+  (newVal) => {
+    if (newVal) {
+      timer.value = Timer(() => {
+        handleClose();
+      }, props.timeout as number);
+
+      timer.value.start();
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  if (props.timeout) {
+    timer.value?.start();
+  }
+});
+
+function Timer(callback: (...args: unknown[]) => unknown, delay: number): NotificationTimer {
+  let timerId: number;
+  let from: number;
+  let remaining = delay;
+
+  function pause() {
+    window.clearTimeout(timerId);
+    remaining -= Date.now() - from;
+  }
+
+  function resume() {
+    from = Date.now();
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(callback, remaining);
+  }
+
+  function start() {
+    remaining = delay;
+    resume();
+  }
+
+  return {
+    pause,
+    resume,
+    start,
+  };
+}
+
+function onMouseEnter() {
+  if (props.timeout) {
+    timer.value?.pause();
+  }
+}
+
+function onMouseLeave() {
+  if (props.timeout) {
+    timer.value?.resume();
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  /* Main colors and styles */
+  --notification-background: var(--additional-50);
+  --notification-border-radius: var(--multivalue-border-radius);
+  --notification-border-color: var(--neutrals-200);
+  --notification-dismiss-color: var(--secondary-500);
+  --notification-content-color: var(--neutrals-600);
+
+  /* Color indicators for types */
+  --notification-warning: var(--warning-500);
+  --notification-error: var(--danger-500);
+  --notification-success: var(--success-500);
+  --notification-info: var(--info-500);
+
+  /* Effects */
+  --notification-shadow-color: var(--neutrals-300);
+  --notification-shadow: 2px 2px 11px rgb(from var(--notification-shadow-color) r g b / 40%);
+  --notification-hover-shadow: 2px 2px 15px rgb(from var(--notification-shadow-color) r g b / 60%);
+
+  /* Variables for animation */
+  --notification-animation-duration: 300ms;
+  --notification-animation-timing: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring animation */
+  --notification-slide-distance: 30px;
+
+  /* Sizes */
+  --notification-indicator-width: 4px;
+}
+
+.vc-notification {
+  @apply tw-flex tw-items-center tw-box-border tw-relative;
+  @apply tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:var(--notification-border-color)];
+  @apply tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4;
+  @apply tw-max-w-[600px] tw-justify-between;
+  @apply tw-shadow-[var(--notification-shadow)];
+  pointer-events: all;
+
+  /* Base animation properties */
+  animation-duration: var(--notification-animation-duration);
+  animation-timing-function: var(--notification-animation-timing);
+  animation-fill-mode: both;
+  transition:
+    opacity var(--notification-animation-duration) var(--notification-animation-timing),
+    transform var(--notification-animation-duration) var(--notification-animation-timing),
+    box-shadow 0.2s ease;
+
+  /* Hover effect */
+  &:hover {
+    box-shadow: var(--notification-hover-shadow);
+  }
+
+  /* Notification type indicator */
+  &__type-indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--notification-indicator-width);
+    height: 100%;
+    background-color: var(--notification-info);
+    border-top-left-radius: var(--notification-border-radius);
+    border-bottom-left-radius: var(--notification-border-radius);
+  }
+
+  /* Styles for different types */
+  &--success .vc-notification__type-indicator {
+    background-color: var(--notification-success);
+  }
+
+  &--error .vc-notification__type-indicator {
+    background-color: var(--notification-error);
+  }
+
+  &--warning .vc-notification__type-indicator {
+    background-color: var(--notification-warning);
+  }
+
+  &--default .vc-notification__type-indicator {
+    background-color: var(--notification-info);
+  }
+
+  /* Animations for different positions */
+  &--top-center {
+    animation-name: notificationSlideInTopCenter;
+  }
+
+  &--top-right {
+    animation-name: notificationSlideInTopRight;
+  }
+
+  &--top-left {
+    animation-name: notificationSlideInTopLeft;
+  }
+
+  &--bottom-center {
+    animation-name: notificationSlideInBottomCenter;
+  }
+
+  &--bottom-right {
+    animation-name: notificationSlideInBottomRight;
+  }
+
+  &--bottom-left {
+    animation-name: notificationSlideInBottomLeft;
+  }
+
+  &__content-wrapper {
+    @apply tw-flex tw-items-center tw-flex-row;
+    padding-left: calc(var(--notification-indicator-width) + 8px);
+  }
+
+  &__icon {
+    @apply tw-mr-2;
+  }
+
+  &__content {
+    @apply tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-text-sm tw-leading-5;
+    @apply tw-max-h-[100px];
+  }
+
+  &__dismiss-icon {
+    @apply tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2;
+    @apply tw-transition-all tw-duration-200 tw-ease-in-out;
+
+    &:hover {
+      @apply tw-text-[color:var(--secondary-600)];
+      transform: rotate(90deg);
+    }
+  }
+
+  .vc-app_mobile {
+    @apply tw-max-w-[90%];
+  }
+}
+
+/* Keyframes for different directions */
+
+/* Top Center: top to bottom */
+@keyframes notificationSlideInTopCenter {
+  from {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--notification-slide-distance)));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Top Right: right to left and top to bottom */
+@keyframes notificationSlideInTopRight {
+  from {
+    opacity: 0;
+    transform: translate(var(--notification-slide-distance), calc(-1 * var(--notification-slide-distance)));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+/* Top Left: left to right and top to bottom */
+@keyframes notificationSlideInTopLeft {
+  from {
+    opacity: 0;
+    transform: translate(calc(-1 * var(--notification-slide-distance)), calc(-1 * var(--notification-slide-distance)));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+/* Bottom Center: bottom to top */
+@keyframes notificationSlideInBottomCenter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--notification-slide-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Bottom Right: right to left and bottom to top */
+@keyframes notificationSlideInBottomRight {
+  from {
+    opacity: 0;
+    transform: translate(var(--notification-slide-distance), var(--notification-slide-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+/* Bottom Left: left to right and bottom to top */
+@keyframes notificationSlideInBottomLeft {
+  from {
+    opacity: 0;
+    transform: translate(calc(-1 * var(--notification-slide-distance)), var(--notification-slide-distance));
+  }
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+</style>

package/ui/components/organisms/vc-app/_internal/composables/useAppMenuState.ts

@@ -1,5 +1,5 @@
-import { ref, readonly, computed, MaybeRef } from "vue";
-import { useMenuExpanded } from "../../../../../../shared/composables/useMenuExpanded";
+import { ref, reactive, readonly, computed, MaybeRef, ComputedRef, inject, InjectionKey, provide, Ref } from "vue";
+import { useMenuExpanded } from "../../../../../../shared/composables";
 
 export interface AppMenuState {
   isSidebarExpanded: MaybeRef<boolean>;
@@ -7,22 +7,51 @@ export interface AppMenuState {
   activeButtonId: string | null;
 }
 
-const {
-  isExpanded: isSidebarExpanded,
-  toggleExpanded: toggleSidebarExpanded,
-  isHoverExpanded,
-  toggleHoverExpanded: toggleHoverExpandedFn,
-} = useMenuExpanded();
+export interface AppMenuStateReturn {
+  state: ComputedRef<Readonly<AppMenuState>>;
+  isButtonActive: ComputedRef<(buttonId: string) => boolean>;
+  toggleSidebar: () => void;
+  toggleMenu: () => void;
+  setActiveButton: (buttonId: string | null) => void;
+  toggleHoverExpanded: (shouldExpand?: boolean) => void;
+  isHoverExpanded: Ref<boolean>;
+  closeAll: () => void;
+}
+
+// Key for injection
+export const AppMenuStateKey: InjectionKey<AppMenuStateReturn> = Symbol("AppMenuState");
+
+// Private state storage for singleton
+let _instance: AppMenuStateReturn | null = null;
+
+export const useAppMenuState = (): AppMenuStateReturn => {
+  // Check if an instance already exists for singleton pattern
+  if (_instance) {
+    return _instance;
+  }
+
+  // Try to get instance through inject
+  const injected = inject(AppMenuStateKey, null);
+  if (injected) {
+    return injected;
+  }
 
-const state = ref<AppMenuState>({
-  isSidebarExpanded,
-  isMenuOpen: false,
-  activeButtonId: null,
-});
+  const { isExpanded, toggleExpanded, isHoverExpanded, toggleHoverExpanded: toggleHoverExpandedFn } = useMenuExpanded();
+
+  // Use reactive for better performance with objects
+  const stateData = reactive<AppMenuState>({
+    isSidebarExpanded: isExpanded,
+    isMenuOpen: false,
+    activeButtonId: null,
+  });
+
+  // Wrap in readonly for protection against mutations from outside
+  const state = computed(() => readonly(stateData));
 
-export const useAppMenuState = () => {
   const toggleSidebar = () => {
-    toggleSidebarExpanded();
+    toggleExpanded();
+    // Synchronize state, since isExpanded is updated in useMenuExpanded
+    stateData.isSidebarExpanded = isExpanded.value;
   };
 
   const toggleHoverExpanded = (shouldExpand?: boolean) => {
@@ -30,25 +59,25 @@ export const useAppMenuState = () => {
   };
 
   const toggleMenu = () => {
-    state.value.isMenuOpen = !state.value.isMenuOpen;
-    if (!state.value.isMenuOpen) {
-      state.value.activeButtonId = null;
+    stateData.isMenuOpen = !stateData.isMenuOpen;
+    if (!stateData.isMenuOpen) {
+      stateData.activeButtonId = null;
     }
   };
 
   const setActiveButton = (buttonId: string | null) => {
-    state.value.activeButtonId = buttonId;
+    stateData.activeButtonId = buttonId;
   };
 
-  const isButtonActive = computed(() => (buttonId: string) => state.value.activeButtonId === buttonId);
+  const isButtonActive = computed(() => (buttonId: string) => stateData.activeButtonId === buttonId);
 
   const closeAll = () => {
-    state.value.isMenuOpen = false;
-    state.value.activeButtonId = null;
+    stateData.isMenuOpen = false;
+    stateData.activeButtonId = null;
   };
 
-  return {
-    state: readonly(state),
+  const instance: AppMenuStateReturn = {
+    state,
     isButtonActive,
     toggleSidebar,
     toggleMenu,
@@ -57,4 +86,12 @@ export const useAppMenuState = () => {
     isHoverExpanded,
     closeAll,
   };
+
+  // Save instance for singleton pattern
+  _instance = instance;
+
+  // Provide state through provide for dependency injection
+  provide(AppMenuStateKey, instance);
+
+  return instance;
 };

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

@@ -13,8 +13,10 @@
 </template>
 
 <script lang="ts" setup>
+import { MaybeRef } from "vue";
+
 defineProps<{
-  expanded: boolean;
+  expanded: MaybeRef<boolean>;
 }>();
 </script>
 

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

@@ -16,13 +16,10 @@
           :src="logo"
           @click="$isMobile.value ? $emit('toggle-menu') : $emit('logo:click')"
         />
-      </div>
-
-      <div
-        v-if="$slots['logo:append']"
-        class="app-bar-header__logo-append"
-      >
-        <slot name="logo:append"></slot>
+        <div
+          v-if="hasUnread && !expanded"
+          class="app-bar-header__menu-button-accent"
+        />
       </div>
 
       <template v-if="$isMobile.value && blades.length === 1">
@@ -37,55 +34,47 @@
       v-if="$isMobile.value"
       class="app-bar-header__actions"
     >
-      <div
-        v-if="blades.length === 1"
-        class="app-bar-header__actions"
-      >
-        <VcButton
-          text
-          :icon="SearchIcon"
-          icon-size="l"
-          class="app-bar-header__actions-button"
-          :class="{ 'app-bar-header__actions-button--active': isSearchVisible }"
-          @click="globalSearch.toggleSearch(bladeId)"
-        />
-      </div>
-      <slot name="notifications" />
+      <slot
+        v-if="$isMobile.value"
+        name="actions"
+      />
     </div>
 
-    <button
-      v-else
-      ref="menuButtonRef"
-      class="app-bar-header__menu-button"
-      @click="$emit('toggle-menu')"
+    <Transition
+      name="burger-fade"
+      mode="out-in"
     >
-      <div class="app-bar-header__menu-button-wrap">
-        <VcIcon
-          :icon="MenuBurgerIcon"
-          size="xs"
-        />
-        <div
-          v-if="hasUnread"
-          class="app-bar-header__menu-button-accent"
-        />
-      </div>
-    </button>
+      <button
+        v-if="expanded && $isDesktop.value"
+        ref="menuButtonRef"
+        class="app-bar-header__menu-button"
+        @click="$emit('toggle-menu')"
+      >
+        <div class="app-bar-header__menu-button-wrap">
+          <VcIcon
+            :icon="MenuBurgerIcon"
+            size="xs"
+          />
+          <div
+            v-if="hasUnread"
+            class="app-bar-header__menu-button-accent"
+          />
+        </div>
+      </button>
+    </Transition>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { VcIcon } from "../../../../../";
-import { MenuBurgerIcon, SearchIcon } from "../../../../../atoms/vc-icon/icons";
-import { computed, Ref, ref, watch, watchEffect } from "vue";
+import { MenuBurgerIcon } from "../../../../../atoms/vc-icon/icons";
+import { computed, ref, watchEffect, MaybeRef } from "vue";
 import { useNotifications } from "../../../../../../../core/composables";
-import { watchDebounced } from "@vueuse/core";
 import { useBladeNavigation } from "./../../../../../../../shared";
-import { useGlobalSearch } from "../../../../../../../core/composables/useGlobalSearch";
-import { FALLBACK_BLADE_ID } from "../../../../../../../core/constants";
 
 defineProps<{
   logo?: string;
-  expanded: boolean;
+  expanded: MaybeRef<boolean>;
 }>();
 
 defineEmits<{
@@ -93,25 +82,8 @@ defineEmits<{
   (e: "toggle-menu"): void;
 }>();
 
-defineSlots<{
-  notifications: () => void;
-  "logo:append": () => void;
-}>();
-
 const { notifications } = useNotifications();
 const { blades, currentBladeNavigationData } = useBladeNavigation();
-const globalSearch = useGlobalSearch();
-
-watch(
-  () => globalSearch.isSearchVisible.value,
-  (value) => {
-    console.log(value);
-  },
-);
-
-const bladeId = computed(() => {
-  return blades.value[blades.value.length - 1]?.type.name || FALLBACK_BLADE_ID;
-});
 
 const viewTitle = ref("");
 const currentBladeId = ref(0);
@@ -129,10 +101,6 @@ watchEffect(
 const hasUnread = computed(() => {
   return notifications.value.some((item) => item.isNew);
 });
-
-const isSearchVisible = computed(() => {
-  return globalSearch.isSearchVisible.value[bladeId.value];
-});
 </script>
 
 <style lang="scss">
@@ -149,7 +117,7 @@ const isSearchVisible = computed(() => {
   @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-px-[var(--app-bar-padding)] tw-h-[var(--app-bar-height)] tw-py-[var(--app-bar-header-padding-top)];
 
   &--collapsed {
-    @apply tw-flex-col tw-items-center tw-justify-between tw-border-0 tw-gap-[16px];
+    @apply tw-items-center tw-justify-between tw-border-0 tw-gap-[16px];
   }
 
   &--mobile {
@@ -157,14 +125,14 @@ const isSearchVisible = computed(() => {
   }
 
   &__logo {
-    @apply tw-w-auto tw-flex tw-items-center tw-h-full;
+    @apply tw-w-auto tw-flex tw-items-center tw-h-full tw-relative;
 
     &-container {
       @apply tw-flex tw-flex-row tw-gap-3 tw-items-center;
     }
 
     &-image {
-      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-rounded-full tw-overflow-hidden tw-w-full;
+      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-rounded-full tw-overflow-hidden tw-w-full tw-shrink-0;
 
       &--mobile {
         @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)];
@@ -189,19 +157,17 @@ const isSearchVisible = computed(() => {
   }
 
   &__actions {
-    @apply tw-flex tw-items-center tw-gap-2;
-  }
-
-  &__logo-append {
     @apply tw-flex tw-items-center;
   }
+}
 
-  &__actions-button {
-    @apply tw-cursor-pointer tw-text-[var(--app-bar-header-actions-button-color)] #{!important};
+.burger-fade-enter-active,
+.burger-fade-leave-active {
+  transition: opacity 0.1s ease;
+}
 
-    &--active {
-      @apply tw-text-[var(--app-bar-header-actions-button-active-color)] #{!important};
-    }
-  }
+.burger-fade-enter-from,
+.burger-fade-leave-to {
+  opacity: 0;
 }
 </style>