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

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

@@ -0,0 +1,102 @@
+<template>
+  <div
+    v-if="$isMobile.value"
+    class="app-bar-mobile-actions"
+  >
+    <div
+      v-for="button in getButtons"
+      :key="button.id"
+    >
+      <VcButton
+        v-if="button.isVisible !== undefined ? button.isVisible : true"
+        text
+        class="app-bar-mobile-actions__button"
+        :class="{ 'app-bar-mobile-actions__button--active': button.id === currentAction?.id }"
+        :icon="button.icon"
+        icon-size="l"
+        @click="handleButtonClick(button)"
+      />
+    </div>
+
+    <Transition name="overlay">
+      <AppBarOverlay
+        v-if="isAnyActionVisible && currentAction?.component"
+        :is-sidebar-mode="isSidebarMode"
+        :expanded="expanded"
+      >
+        <component
+          :is="currentAction?.component"
+          v-bind="currentAction?.props || {}"
+          v-on-click-outside="[handleClose, { ignore: ['.app-bar-mobile-actions__button'] }]"
+          @close="handleClose"
+        />
+      </AppBarOverlay>
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcButton } from "../../../../../../..";
+import { useAppBarMobileButtons } from "../../../../../../../core/composables/useAppBarMobileButtons";
+import AppBarOverlay from "./AppBarOverlay.vue";
+import { useAppBarMobileActions } from "./../composables/useAppBarMobileActions";
+import { MaybeRef, ref, watch } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { AppBarButtonContent } from "../../../../../../../core/services";
+import { useRoute } from "vue-router";
+export interface Props {
+  isSidebarMode: boolean;
+  expanded: MaybeRef<boolean>;
+}
+
+defineProps<Props>();
+
+const { getButtons } = useAppBarMobileButtons();
+const { currentAction, toggleAction, hideAllActions, isAnyActionVisible } = useAppBarMobileActions();
+const route = useRoute();
+
+const handleButtonClick = (button: AppBarButtonContent) => {
+  // If the current button is already active - hide it
+  if (currentAction.value?.id === button.id) {
+    button.onClose?.();
+    hideAllActions();
+    return;
+  }
+
+  // If the previous active button exists - close it
+  if (currentAction.value) {
+    currentAction.value.onClose?.();
+  }
+
+  // Enable the new button
+  toggleAction(button.id);
+
+  // Call onClick for a button without a component
+  if (!button.component && button.onClick) {
+    button.onClick();
+  }
+};
+
+const handleClose = (button: AppBarButtonContent) => {
+  button.onClose?.();
+  hideAllActions();
+};
+
+watch(route, () => {
+  hideAllActions();
+});
+</script>
+
+<style lang="scss">
+.app-bar-mobile-actions {
+  @apply tw-relative tw-flex tw-flex-row tw-gap-[30px];
+
+  &__button {
+    @apply tw-cursor-pointer tw-text-[var(--app-bar-header-actions-button-color)] #{!important};
+
+    &--active {
+      @apply tw-text-[var(--app-bar-header-actions-button-active-color)] #{!important};
+    }
+  }
+}
+</style>

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

@@ -18,9 +18,11 @@
 </template>
 
 <script lang="ts" setup>
+import { MaybeRef } from "vue";
+
 defineProps<{
   isSidebarMode: boolean;
-  expanded: boolean;
+  expanded: MaybeRef<boolean>;
 }>();
 
 defineEmits<{
@@ -34,7 +36,7 @@ defineEmits<{
          tw-bg-[color:var(--app-bar-background)];
 
   &--standalone-mobile {
-    @apply tw-w-full !important;
+    @apply tw-w-full #{!important};
   }
 
   &--sidebar {
@@ -42,7 +44,7 @@ defineEmits<{
   }
 
   &--mobile {
-    @apply tw-fixed tw-top-[var(--app-bar-mobile-height)] tw-left-0 tw-bottom-0 tw-flex-1 tw-w-[var(--app-bar-mobile-width)] tw-z-[10001];
+    @apply tw-fixed tw-top-[var(--app-bar-mobile-height)] tw-left-0 tw-bottom-0 tw-flex-1 tw-w-[var(--app-bar-mobile-width)] tw-z-[9999];
 
     .app-bar-overlay__content {
       @apply tw-flex tw-flex-col tw-h-[calc(100%-var(--app-bar-mobile-height))];

package/ui/components/organisms/vc-app/_internal/vc-app-bar/{components/app-bar-button/app-bar-button.vue → _internal/AppBarWidgetItem.vue}

@@ -4,13 +4,13 @@
     :class="{ 'app-bar-button--mobile': $isMobile.value }"
   >
     <VcTooltip
-      :placement="position"
+      placement="bottom"
       :offset="{ crossAxis: 0, mainAxis: -10 }"
       :delay="1000"
       class="tw-w-full"
     >
       <template
-        v-if="!isContentVisible && !!title"
+        v-if="!isActive && !!title"
         #tooltip
         >{{ title }}</template
       >
@@ -19,21 +19,17 @@
         class="app-bar-button__button"
         @click.stop="toggleContent"
       >
-        <div
-          :class="[
-            'app-bar-button__button-container',
-            { 'app-bar-button__button-container--active': isContentVisible && $slots['content'] },
-          ]"
-        >
+        <div :class="['app-bar-button__button-container']">
           <slot
             name="trigger"
-            :opened="isContentVisible"
+            :is-active="isActive"
             :toggle="toggleContent"
           >
             <div class="app-bar-button__button-wrap">
               <VcIcon
                 :icon="icon"
                 size="xl"
+                :class="['app-bar-button__icon', { 'app-bar-button__icon--active': isActive }]"
               ></VcIcon>
             </div>
           </slot>
@@ -44,102 +40,49 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, getCurrentInstance, onUnmounted, useSlots, Slots, h, withDirectives, onMounted } from "vue";
-import { useAppBarOverlay } from "./../../composables/useAppBarOverlay";
-import { vOnClickOutside } from "@vueuse/components";
+import { ref, computed, onMounted, type Component } from "vue";
+import { useAppBarWidgets } from "./../composables/useAppBarWidgets";
 
 export interface Props {
   title?: string;
-  icon?: string;
-  position: "bottom" | "bottom-end" | "bottom-start";
+  icon?: string | Component;
   beforeOpen?: () => boolean;
-  overlayed?: boolean;
   isOpened?: boolean;
+  widgetId?: string;
 }
 
 export interface Emits {
   (event: "toggle", state: boolean): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  position: "bottom",
-  overlayed: false,
-});
-
+const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 defineSlots<{
   content: (props: { opened: boolean; toggle: () => void }) => void;
-  trigger: void;
+  trigger: (props: { isActive: boolean; toggle: () => void }) => void;
 }>();
 
-const isContentVisible = ref(false);
+const { toggleWidget, currentWidget } = useAppBarWidgets();
 const referenceButton = ref<HTMLDivElement | null>(null);
-const contentRef = ref<HTMLDivElement | null>(null);
 
-const slots = useSlots();
-const instance = getCurrentInstance();
-const { showContent, hideContent } = useAppBarOverlay();
+// Check if the current widget is active
+const isActive = computed(() => (props.widgetId ? currentWidget.value?.id === props.widgetId : false));
 
 function toggleContent() {
   if (props.beforeOpen && typeof props.beforeOpen === "function" && props.beforeOpen() === false) {
     return;
   }
 
-  isContentVisible.value = !isContentVisible.value;
-
-  if (isContentVisible.value && slots["content"]) {
-    const content = () => {
-      return withDirectives(
-        h(
-          "div",
-          {
-            style: {
-              height: "-webkit-fill-available",
-            },
-            ref: contentRef,
-          },
-          [
-            h(slots["content"]!, {
-              opened: isContentVisible.value,
-              toggle: toggleContent,
-            }),
-          ],
-        ),
-        [[vOnClickOutside, [onClose, { ignore: [referenceButton, contentRef] }]]],
-      );
-    };
-
-    showContent({
-      id: instance?.uid?.toString() ?? "",
-      content,
-      overlayed: props.overlayed,
-      props: {
-        opened: isContentVisible.value,
-        toggle: toggleContent,
-      },
-    });
-  } else {
-    hideContent();
+  if (props.widgetId) {
+    toggleWidget(props.widgetId);
+    emit("toggle", isActive.value);
   }
-
-  emit("toggle", isContentVisible.value);
 }
 
-const onClose = () => {
-  isContentVisible.value = false;
-  hideContent();
-};
-
-onUnmounted(() => {
-  if (isContentVisible.value) {
-    hideContent();
-  }
-});
-
 onMounted(() => {
-  if (props.isOpened) {
-    toggleContent();
+  if (props.isOpened && props.widgetId) {
+    toggleWidget(props.widgetId);
   }
 });
 </script>
@@ -156,14 +99,14 @@ onMounted(() => {
   --app-bar-button-dropdown-button-width: var(--app-bar-button-width);
   --app-bar-button-border-color: var(--accent-500);
   --app-bar-button-dropdown-button-border: var(--app-bar-button-border-color);
-  --app-bar-button-dropdown-button-color: var(--app-bar-button-color);
+
   --app-bar-button-dropdown-button-background-color: var(--app-bar-button-background-color);
-  --app-bar-button-dropdown-button-color-hover: var(--app-bar-button-color-hover);
+
   --app-bar-button-dropdown-button-background-color-hover: var(--app-bar-button-background-color-hover);
   --app-bar-button-mobile-bg-color: var(--neutral-500);
 
-  --app-bar-button-dropdown-button-color-hover: var(--neutrals-100);
-  --app-bar-button-dropdown-button-active-bg: var(--neutrals-200);
+  --app-bar-button-dropdown-button-text-color: var(--neutrals-500);
+  --app-bar-button-dropdown-button-active-text-color: var(--primary-500);
   --app-bar-button-border-width: 2px;
 }
 
@@ -193,22 +136,22 @@ onMounted(() => {
   &__button-container {
     @apply tw-w-full tw-relative tw-h-full tw-flex tw-items-center tw-justify-center
      tw-cursor-pointer
-      tw-text-[color:var(--app-bar-button-dropdown-button-color)] tw-bg-[color:var(--app-bar-button-dropdown-button-background-color)]
+      tw-text-[color:var(--app-bar-button-dropdown-button-text-color)] tw-bg-[color:var(--app-bar-button-dropdown-button-background-color)]
       tw-transition-colors tw-duration-200 tw-box-border;
-
-    &:hover:not(&--active) {
-      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-color-hover)];
-    }
-
-    &--active {
-      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-active-bg)];
-    }
   }
 
   &__button-wrap {
     @apply tw-w-[var(--app-bar-button-dropdown-button-width)] tw-flex tw-justify-center;
   }
 
+  &__icon {
+    @apply tw-text-[color:var(--app-bar-button-dropdown-button-text-color)] tw-transition-colors tw-duration-300 tw-ease-in-out;
+
+    &--active {
+      @apply tw-text-[color:var(--app-bar-button-dropdown-button-active-text-color)];
+    }
+  }
+
   &__dropdown {
     @apply tw-min-w-[100%];
   }

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

@@ -0,0 +1,110 @@
+<template>
+  <div class="vc-app-toolbar-menu">
+    <div
+      v-for="item in items"
+      :key="item.id"
+      class="vc-app-toolbar-menu__item"
+    >
+      <AppBarWidgetItem
+        v-if="item.component"
+        :is-opened="isBadgeActive(item)"
+        :widget-id="item.id"
+        @toggle="item.onClick && item.onClick()"
+      >
+        <template #trigger="{ isActive }">
+          <div class="vc-app-toolbar-menu__button">
+            <div
+              class="vc-app-toolbar-menu__button-icon"
+              :class="{
+                'vc-app-toolbar-menu__button-icon--active': isActive,
+              }"
+            >
+              <VcIcon
+                v-if="item.icon"
+                :icon="item.icon"
+                size="l"
+              />
+              <div
+                v-if="isBadgeActive(item)"
+                class="vc-app-toolbar-menu__accent"
+              ></div>
+            </div>
+          </div>
+        </template>
+      </AppBarWidgetItem>
+
+      <AppBarWidgetItem
+        v-else-if="item.onClick"
+        @toggle="item.onClick"
+      >
+        <template #trigger="{ isActive }">
+          <div
+            class="vc-app-toolbar-menu__button-icon"
+            :class="{
+              'vc-app-toolbar-menu__button-icon--active': isActive,
+            }"
+          >
+            <VcIcon
+              v-if="item.icon"
+              :icon="item.icon"
+              size="l"
+            />
+            <div
+              v-if="isBadgeActive(item)"
+              class="vc-app-toolbar-menu__accent"
+            ></div>
+          </div>
+        </template>
+      </AppBarWidgetItem>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import AppBarWidgetItem from "./AppBarWidgetItem.vue";
+import { VcIcon } from "../../../../..";
+import { useAppBarWidget } from "../../../../../../../core/composables";
+import type { AppBarWidget } from "../../../../../../../core/services";
+
+const { items } = useAppBarWidget();
+
+function isBadgeActive(item: AppBarWidget): boolean {
+  if (item.badge === undefined) {
+    return false;
+  }
+
+  if (typeof item.badge === "function") {
+    return item.badge();
+  }
+
+  return !!item.badge;
+}
+</script>
+
+<style lang="scss">
+:root {
+  --app-toolbar-menu-accent-color: var(--danger-500);
+  --app-toolbar-menu-icon-color: var(--neutrals-500);
+  --app-toolbar-menu-icon-color-active: var(--primary-500);
+}
+
+.vc-app-toolbar-menu {
+  @apply tw-flex tw-items-center;
+
+  &__accent {
+    @apply tw-block tw-absolute -tw-right-[4px] tw-top-[0px] tw-w-[5px] tw-h-[5px] tw-bg-[--app-toolbar-menu-accent-color] tw-rounded-full tw-z-[1];
+  }
+
+  &__button {
+    @apply tw-flex tw-items-center tw-justify-center tw-relative tw-cursor-pointer;
+  }
+
+  &__button-icon {
+    @apply tw-relative tw-text-[color:var(--app-toolbar-menu-icon-color)];
+
+    &--active {
+      @apply tw-text-[color:var(--app-toolbar-menu-icon-color-active)];
+    }
+  }
+}
+</style>

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

@@ -21,8 +21,8 @@
             'menu-sidebar__header--mobile': $isMobile.value,
           }"
         >
-          <div class="menu-sidebar__toolbar">
-            <slot name="toolbar" />
+          <div class="menu-sidebar__widgets">
+            <slot name="widgets" />
           </div>
           <div class="menu-sidebar__spacer" />
           <div
@@ -40,10 +40,10 @@
         </div>
         <div class="menu-sidebar__content">
           <div
-            v-if="$slots['active-content']"
+            v-if="$slots['widgets-active-content']"
             class="menu-sidebar__content-main"
           >
-            <slot name="active-content" />
+            <slot name="widgets-active-content" />
           </div>
 
           <template v-if="$isMobile.value">
@@ -66,10 +66,11 @@
 <script lang="ts" setup>
 import { Sidebar } from "../../../../../../../shared/components/sidebar";
 import { CrossSignIcon } from "../../../../../atoms/vc-icon/icons";
+import { MaybeRef } from "vue";
 
 defineProps<{
   isOpened: boolean;
-  expanded: boolean;
+  expanded: MaybeRef<boolean>;
 }>();
 
 defineEmits<{
@@ -77,11 +78,11 @@ defineEmits<{
 }>();
 
 defineSlots<{
-  toolbar: () => void;
   navmenu: () => void;
   "user-dropdown": () => void;
   "app-switcher": () => void;
-  "active-content": () => void;
+  "widgets-active-content": () => void;
+  widgets: () => void;
 }>();
 </script>
 
@@ -164,7 +165,7 @@ defineSlots<{
     }
   }
 
-  &__toolbar {
+  &__widgets {
     @apply tw-flex tw-flex-row tw-items-center tw-justify-between tw-overflow-auto;
   }
 }

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

@@ -0,0 +1,51 @@
+import { ref, watch } from "vue";
+import { useAppBarMobileButtons } from "../../../../../../../core/composables/useAppBarMobileButtons";
+import { useToggleableContent } from "./useToggleableContent";
+
+// Store only ID of the active action
+const activeActionId = ref<string | null>(null);
+
+export function useAppBarMobileActions() {
+  const { getButtons } = useAppBarMobileButtons();
+
+  // Use the common composable to manage content
+  const {
+    showItem: showAction,
+    hideAllItems: hideAllActions,
+    toggleItem: toggleAction,
+    currentItem: currentAction,
+    isAnyItemVisible: isAnyActionVisible,
+    closeItem: closeAction,
+  } = useToggleableContent(getButtons, activeActionId);
+
+  // Watch for changes in the list of buttons
+  watch(
+    () => getButtons.value,
+    (newButtons) => {
+      // If the active button exists
+      if (activeActionId.value) {
+        // Check if this button still exists in the list
+        const buttonStillExists = newButtons.some((button) => button.id === activeActionId.value);
+
+        // If the button was removed - close it
+        if (!buttonStillExists) {
+          const activeButton = currentAction.value;
+          if (activeButton?.onClose) {
+            activeButton.onClose();
+          }
+          hideAllActions();
+        }
+      }
+    },
+    { deep: true },
+  );
+
+  return {
+    showAction,
+    hideAllActions,
+    toggleAction,
+    currentAction,
+    isAnyActionVisible,
+    closeAction,
+  };
+}

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

@@ -0,0 +1,27 @@
+import { ref } from "vue";
+import { useAppBarWidget } from "../../../../../../../core/composables";
+import { useToggleableContent } from "./useToggleableContent";
+
+// Store only the ID of the active widget outside the function
+const activeWidgetId = ref<string | null>(null);
+
+export function useAppBarWidgets() {
+  const { items } = useAppBarWidget();
+
+  // Use the common composable to manage content
+  const {
+    showItem: showWidget,
+    hideAllItems: hideAllWidgets,
+    toggleItem: toggleWidget,
+    currentItem: currentWidget,
+    isAnyItemVisible: isAnyWidgetVisible,
+  } = useToggleableContent(items, activeWidgetId);
+
+  return {
+    showWidget,
+    hideAllWidgets,
+    toggleWidget,
+    currentWidget,
+    isAnyWidgetVisible,
+  };
+}

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

@@ -0,0 +1,66 @@
+import { ref, computed, ComputedRef, Ref } from "vue";
+
+/**
+ * Base interface for items that can be controlled through toggling
+ */
+export interface ToggleableItem {
+  id: string;
+}
+
+/**
+ * Creates a content manager with basic operations
+ *
+ * @param itemsGetter - function to get the array of items
+ * @param activeIdRef - reference for storing the active item ID
+ * @returns object with methods and computed properties for managing content
+ */
+export function useToggleableContent<T extends ToggleableItem>(
+  itemsGetter: ComputedRef<T[] | null | undefined>,
+  activeIdRef: Ref<string | null>,
+) {
+  // Get the current active item directly from the array of items
+  const currentItem = computed(() => {
+    if (!activeIdRef.value || !Array.isArray(itemsGetter.value)) {
+      return null;
+    }
+
+    return itemsGetter.value.find((item) => item.id === activeIdRef.value) || null;
+  });
+
+  // Check if any item is visible
+  const isAnyItemVisible = computed(() => activeIdRef.value !== null);
+
+  // Activate/deactivate item
+  const toggleItem = (id: string) => {
+    // If already active, hide
+    if (activeIdRef.value === id) {
+      activeIdRef.value = null;
+    } else {
+      // Otherwise, show
+      activeIdRef.value = id;
+    }
+  };
+
+  const closeItem = () => {
+    activeIdRef.value = null;
+  };
+
+  // Show specific item
+  const showItem = (id: string) => {
+    activeIdRef.value = id;
+  };
+
+  // Hide all items
+  const hideAllItems = () => {
+    activeIdRef.value = null;
+  };
+
+  return {
+    showItem,
+    hideAllItems,
+    toggleItem,
+    currentItem,
+    isAnyItemVisible,
+    closeItem,
+  };
+}