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

package/shared/components/app-bar-button/app-bar-button.vue

@@ -3,6 +3,7 @@
     <VcTooltip
       placement="bottom"
       :offset="{ crossAxis: 0, mainAxis: -10 }"
+      :delay="1000"
       class="tw-w-full"
     >
       <template
@@ -35,33 +36,35 @@
           </slot>
         </div>
       </button>
-
-      <div
-        v-if="isDropdownVisible"
-        ref="floatingDrop"
-        v-on-click-outside="[
-          () => {
-            isDropdownVisible = false;
-          },
-          { ignore: [referenceButton] },
-        ]"
-        :style="floatingDropStyle"
-        :class="['app-bar-button__dropdown']"
-      >
-        <slot
-          name="dropdown-content"
-          :opened="isDropdownVisible"
-          :toggle="toggleNotificationsDrop"
-        ></slot>
-      </div>
     </VcTooltip>
+
+    <div
+      v-if="isDropdownVisible"
+      v-on-click-outside="[
+        () => {
+          isDropdownVisible = false;
+        },
+        { ignore: [referenceButton] },
+      ]"
+      class="app-bar-button__dropdown"
+    >
+      <Teleport to="#vc-app-bar__menu-dropdowns">
+        <div class="app-bar-button__menu-dropdowns">
+          <slot
+            name="dropdown-content"
+            :opened="isDropdownVisible"
+            :toggle="toggleNotificationsDrop"
+          ></slot>
+        </div>
+      </Teleport>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
-import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+// import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
 
 export interface Props {
   title?: string;
@@ -88,20 +91,19 @@ defineSlots<{
 const isDropdownVisible = ref(false);
 
 const referenceButton = ref<HTMLDivElement | null>(null);
-const floatingDrop = ref<HTMLDivElement | null>(null);
 
-const floater = useFloating(referenceButton, floatingDrop, {
-  placement: props.position,
-  whileElementsMounted: autoUpdate,
-  middleware: [shift({ mainAxis: false })],
-});
+// const floater = useFloating(referenceButton, null, {
+//   placement: props.position,
+//   whileElementsMounted: autoUpdate,
+//   middleware: [shift({ mainAxis: false })],
+// });
 
-const floatingDropStyle = computed(() => {
-  return {
-    top: `${floater.y.value ?? 0}px`,
-    left: `${floater.x.value ?? 0}px`,
-  };
-});
+// const floatingDropStyle = computed(() => {
+//   return {
+//     top: `${floater.y.value ?? 0}px`,
+//     left: `${floater.x.value ?? 0}px`,
+//   };
+// });
 
 function toggleNotificationsDrop() {
   if (props.beforeOpen && typeof props.beforeOpen === "function" && props.beforeOpen() === false) {
@@ -122,38 +124,50 @@ function toggleNotificationsDrop() {
   --app-bar-button-bg-color: var(--additional-50);
   --app-bar-button-dropdown-bg-color: var(--additional-50);
   --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-border-width: 2px;
 }
 
 .app-bar-button {
   @apply tw-relative tw-flex;
 
+  &::after {
+    content: "";
+    @apply tw-absolute tw-left-0 tw-bottom-0 tw-w-full
+        tw-border-b-[2px]
+        tw-border-[color:var(--app-bar-button-border-color)]
+        tw-opacity-0 tw-transition-opacity tw-duration-200 tw-z-[2];
+  }
+
+  &:hover::after {
+    @apply tw-opacity-100;
+  }
+
   &__button {
-    @apply tw-flex tw-text-left tw-w-full;
+    @apply tw-flex tw-text-left tw-w-full tw-box-border tw-relative;
   }
 
   &__button-container {
     @apply tw-w-full tw-relative tw-h-full tw-flex tw-items-center tw-justify-center
-      tw-border-l tw-border-solid
-      tw-border-l-[color:var(--app-bar-button-dropdown-button-border)] tw-cursor-pointer
+     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-transition-colors tw-duration-200;
+      tw-transition-colors tw-duration-200 tw-box-border;
 
-    &:hover {
-      @apply tw-text-[color:var(--app-bar-button-dropdown-button-color-hover)]
-        tw-bg-[color:var(--app-bar-button-dropdown-button-background-color-hover)];
+    &:hover:not(&--active) {
+      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-color-hover)];
     }
 
     &--active {
-      box-shadow: var(--app-bar-button-shadow);
-      clip-path: inset(0px -20px 0px -20px);
-      background-color: var(--app-bar-button-dropdown-bg-color);
-      z-index: 9999;
+      @apply tw-bg-[color:var(--app-bar-button-dropdown-button-active-bg)];
     }
   }
 
@@ -162,8 +176,11 @@ function toggleNotificationsDrop() {
   }
 
   &__dropdown {
-    @apply tw-absolute tw-top-[var(--app-bar-button-height)] tw-z-[10000] tw-min-w-[100%];
-    box-shadow: var(--app-bar-button-shadow);
+    @apply tw-min-w-[100%];
+  }
+
+  &__menu-dropdowns {
+    //@apply tw-w-full tw-h-full tw-border-t-[2px] tw-border-[color:var(--app-bar-button-border-color)] tw-border-solid tw-border-b-[2px] tw-border-b-[color:var(--app-bar-button-border-color)];
   }
 }
 </style>

package/shared/components/app-switcher/components/vc-app-switcher/vc-app-switcher.vue

@@ -1,70 +1,36 @@
 <template>
-  <button
-    class="vc-app-switcher__button"
-    @click.stop="toggleAppSwitch"
+  <div
+    v-if="appsList && appsList.length"
+    ref="container"
+    class="vc-app-switcher"
+    @contextmenu.prevent
   >
-    <div class="vc-app-switcher__icon"></div>
-  </button>
-  <Sidebar
-    :is-expanded="isVisible"
-    render="always"
-    position="left"
-    @close="onClose"
-  >
-    <template #header>
-      <div
-        class="vc-app-switcher__button-wrap"
-        :class="{
-          'vc-app-switcher__button-wrap--mobile': $isMobile.value,
-        }"
-      >
-        <button
-          class="vc-app-switcher__button vc-app-switcher__button--header"
-          @click.stop="isVisible = false"
-        >
-          <div class="vc-app-switcher__icon"></div>
-        </button>
-        <p class="vc-app-switcher__title">{{ $t("COMPONENTS.APP_SWITCHER.TITLE") }}</p>
-      </div>
-    </template>
-    <template #content>
-      <div
-        v-if="isVisible && appsList && appsList.length"
-        ref="container"
-        class="vc-app-switcher"
-        @contextmenu.prevent
-      >
-        <div class="vc-app-switcher__dropdown">
-          <ul class="vc-app-switcher__list">
-            <li
-              v-for="item in appsList"
-              :key="item.id"
-              class="vc-app-switcher__list-item"
-              :class="{
-                'vc-app-switcher__list-item--active': locationHandler(item.relativeUrl ?? ''),
-              }"
-              @click="switchApp(item)"
-            >
-              <img
-                :src="imageUrl(item.iconUrl ?? '')"
-                :alt="`icon_${item.id}`"
-                class="vc-app-switcher__item-icon"
-              />
-              <p class="vc-app-switcher__item-title">
-                {{ item.title }}
-              </p>
-            </li>
-          </ul>
+    <GenericDropdown
+      :opened="true"
+      :items="appsList"
+      :is-item-active="(item) => locationHandler(item.relativeUrl ?? '')"
+      :on-item-click="switchApp"
+    >
+      <template #item="{ item }">
+        <div class="vc-app-switcher__item">
+          <img
+            :src="imageUrl(item.iconUrl ?? '')"
+            :alt="`icon_${item.id}`"
+            class="vc-app-switcher__item-icon"
+          />
+          <p class="vc-app-switcher__item-title">
+            {{ item.title }}
+          </p>
         </div>
-      </div>
-    </template>
-  </Sidebar>
+      </template>
+    </GenericDropdown>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref } from "vue";
 import { AppDescriptor } from "../../../../../core/api/platform";
-import { Sidebar } from "./../../../sidebar";
+import { GenericDropdown } from "../../../generic-dropdown";
 
 export interface Props {
   appsList: AppDescriptor[];
@@ -80,102 +46,33 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const isVisible = ref(false);
-
 const imageUrl = (url: string) => url;
 
 const locationHandler = (url: string) => {
   const cleanUrl = window.location.pathname.replace(/\/+$/, "");
   const match = url.match(cleanUrl);
   if (match) {
-    return match[0];
+    return !!match[0];
   }
-  return null;
+  return false;
 };
 
 const switchApp = (app: AppDescriptor) => {
   emit("onClick", app);
-  onClose();
-};
-
-const toggleAppSwitch = () => {
-  if (props.appsList && props.appsList.length) {
-    isVisible.value = !isVisible.value;
-  }
-};
-
-const onClose = () => {
-  isVisible.value = false;
 };
 </script>
 
 <style lang="scss">
 :root {
-  --app-switcher-button-color: var(--neutrals-400);
-  --app-switcher-button-color-hover: var(--neutrals-500);
   --app-switcher-item-text-color: var(--additional-950);
-  --app-switcher-dropdown-bg-color: var(--additional-50);
-  --app-switcher-dropdown-shadow: 4px 4px 20px rgba(47, 86, 108, 0.25);
   --app-switcher-height: var(--app-bar-height);
-  --app-switcher-item-bg-hover: var(--primary-50);
 }
 
 .vc-app-switcher {
-  @apply tw-relative tw-flex tw-mx-3 tw-shrink-0 tw-mt-4;
-
-  &__button {
-    @apply hover:tw-relative tw-p-0 tw-border-0 tw-bg-transparent tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-shrink-0 tw-mx-3;
-
-    &:hover .vc-app-switcher__icon {
-      @apply tw-bg-[color:var(--app-switcher-button-color-hover)];
-    }
-
-    &--header {
-      @apply tw-h-auto tw-block tw-mx-0 #{!important};
-    }
-  }
-
-  &__button-wrap {
-    @apply tw-min-h-[--app-switcher-height] tw-px-4 tw-flex tw-items-center tw-justify-between tw-h-[var(--app-switcher-height)] tw-mx-3;
-
-    &--mobile {
-      @apply tw-mx-2 #{!important};
-    }
-  }
-
-  &__title {
-    @apply tw-text-lg tw-font-bold tw-text-[color:var(--app-switcher-item-text-color)];
-  }
-
-  &__icon {
-    @apply tw-h-[22px] tw-w-[22px] tw-bg-[color:var(--app-switcher-button-color)] tw-duration-200;
-    mask: url(/assets/app-select.svg) no-repeat center;
-    mask-size: contain;
-  }
-
-  &__dropdown {
-    @apply tw-bg-[color:var(--app-switcher-dropdown-bg-color)] tw-w-full;
-  }
-
-  &__list {
-    @apply tw-flex tw-flex-col tw-gap-3 tw-overflow-hidden;
-  }
-
-  &__list-item {
-    @apply tw-p-3 tw-text-sm tw-text-[color:var(--app-switcher-item-text-color)] tw-flex tw-flex-row tw-items-center tw-cursor-pointer tw-w-full;
-    transition: background-color 0.2s;
-
-    &--active {
-      @apply tw-font-extrabold;
-    }
-
-    &:hover .vc-app-switcher__item-title {
-      @apply tw-opacity-80;
-    }
+  @apply tw-relative tw-flex tw-shrink-0;
 
-    &:hover {
-      @apply tw-bg-[color:var(--app-switcher-item-bg-hover)];
-    }
+  &__item {
+    @apply tw-flex tw-items-center tw-w-full;
   }
 
   &__item-icon {
@@ -183,7 +80,7 @@ const onClose = () => {
   }
 
   &__item-title {
-    @apply tw-font-normal tw-text-sm tw-truncate;
+    @apply tw-font-normal tw-text-sm tw-leading-5 tw-truncate;
     color: var(--app-switcher-item-text-color);
     transition: opacity 0.3s ease;
   }

package/shared/components/blade-navigation/components/vc-blade-navigation/vc-blade-navigation.vue

@@ -3,10 +3,9 @@
     <VcBreadcrumbs
       v-if="blades && blades.length > 2"
       :items="breadcrumbs"
-      class="tw-bg-[--blade-navigation-bg-color] tw-p-2 [box-shadow:var(--blade-navigation-shadow)] tw-rounded-[var(--blade-navigation-border-radius)]"
+      class="tw-bg-[--blade-navigation-bg-color] tw-p-2"
       :class="[
         {
-          'tw-mt-4 tw-mx-2': !$isMobile.value,
           'tw-p-4': $isMobile.value,
         },
       ]"
@@ -18,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, computed, inject, withDirectives, h, vShow, toRef, VNode, nextTick } from "vue";
+import { Ref, computed, inject, withDirectives, h, vShow, toRef, VNode, nextTick, provide } from "vue";
 import { RouterView, useRoute } from "vue-router";
 import { BladeVNode, IParentCallArgs, useBladeNavigation } from "./../../../../../shared";
 import { ErrorInterceptor } from "./../../../error-interceptor";
@@ -79,7 +78,6 @@ const render = () => {
           const hiddenQuantity = blades.value.filter(
             (x) => x.props.navigation.isVisible === false && x.props.navigation.idx < index,
           ).length;
-
           arr.push(
             h(
               ErrorInterceptor,
@@ -95,13 +93,16 @@ const render = () => {
                   return withDirectives(
                     h(
                       VcBladeView,
-                      { key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`, blade: bladeVNode },
+                      {
+                        key: `${bladeVNode.type?.name}_${index}` || `blade_${index}`,
+                        blade: bladeVNode,
+                        expandable: quantity.value > 1,
+                        error,
+                      },
                       {
                         default: ({ Component }: { Component: BladeVNode }) => {
                           return h(Component, {
-                            error,
                             closable: index >= 1,
-                            expandable: quantity.value > 1,
                             expanded: index - hiddenQuantity === quantity.value - 1,
                             "onClose:blade": () => {
                               if (index === 0) return;

package/shared/components/blade-navigation/components/vc-blade-view/vc-blade-view.ts

@@ -1,4 +1,4 @@
-import { Slot, defineComponent, h, provide, ref, VNode, PropType, Component, reactive } from "vue";
+import { Slot, defineComponent, h, provide, ref, VNode, PropType, Component, reactive, computed } from "vue";
 import { navigationViewLocation } from "./../../injectionKeys";
 import { BladeVNode, CoreBladeExposed } from "../../types";
 import { toRef, watchTriggerable } from "@vueuse/core";
@@ -10,8 +10,15 @@ export const VcBladeView = defineComponent({
     blade: {
       type: Object as PropType<BladeVNode>,
     },
+    expandable: {
+      type: Boolean,
+    },
+    error: {
+      type: String,
+    },
   },
   setup(props, { attrs, slots }) {
+    const maximized = ref(false);
     const viewRef = ref<CoreBladeExposed>();
 
     const bl = toRef(props.blade);
@@ -34,6 +41,14 @@ export const VcBladeView = defineComponent({
     );
 
     provide(navigationViewLocation, bl.value!);
+    provide(
+      "$blade",
+      computed(() => ({
+        expandable: props.expandable,
+        maximized: maximized.value,
+        error: props.error,
+      })),
+    );
     return () => {
       /**
        * Callback function onClose, which is passed while opening blade, called when a BladeVNode is unmounted.
@@ -60,8 +75,6 @@ export const VcBladeView = defineComponent({
         }
       };
 
-      const maximized = ref(false);
-
       function onExpand() {
         maximized.value = true;
       }
@@ -79,7 +92,6 @@ export const VcBladeView = defineComponent({
             onVnodeMounted,
             "onExpand:blade": onExpand,
             "onCollapse:blade": onCollapse,
-            maximized,
           }),
         );
 

package/shared/components/change-password/change-password.vue

@@ -16,7 +16,7 @@
             :outline="false"
             variant="info-dark"
           >
-            <div class="tw-flex tw-flex-row tw-items-center">
+            <div class="tw-flex tw-flex-row tw-items-center tw-text-[color:var(--change-password-text-color)]">
               <VcIcon
                 icon="far fa-lightbulb"
                 size="l"
@@ -223,5 +223,6 @@ function validate() {
 <style lang="scss">
 :root {
   --change-password-error-color: var(--base-error-color, var(--danger-500));
+  --change-password-text-color: var(--base-text-color, var(--additional-950));
 }
 </style>

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

@@ -0,0 +1,171 @@
+<template>
+  <div
+    ref="referenceEl"
+    class="vc-dropdown-wrapper"
+  >
+    <slot name="trigger"></slot>
+
+    <teleport
+      to="body"
+      :disabled="!floating"
+    >
+      <div
+        v-if="opened"
+        ref="floatingEl"
+        v-on-click-outside="[() => $emit('update:opened', false), { ignore: [referenceEl] }]"
+        class="vc-dropdown"
+        :class="{
+          'vc-dropdown--mobile': $isMobile.value,
+          'vc-dropdown--floating': floating,
+        }"
+        :style="floatingStyle"
+      >
+        <VcContainer
+          :no-padding="true"
+          @click.stop
+        >
+          <VcCol v-if="items && items.length">
+            <div
+              v-for="(item, index) in items"
+              :key="index"
+              class="vc-dropdown__item"
+              :class="{
+                'vc-dropdown__item--mobile': $isMobile.value,
+                'vc-dropdown__item--active': isItemActive?.(item),
+              }"
+              @click="() => onItemClick?.(item)"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :click="() => onItemClick?.(item)"
+              >
+                {{ itemText?.(item) }}
+              </slot>
+            </div>
+          </VcCol>
+          <div
+            v-else
+            class="vc-dropdown__empty"
+          >
+            <slot name="empty">
+              {{ emptyText }}
+            </slot>
+          </div>
+        </VcContainer>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup generic="T">
+import { VcCol, VcContainer } from "../../../ui/components";
+import { ref, computed } from "vue";
+import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+interface Props {
+  opened: boolean;
+  items: T[];
+  emptyText?: string;
+  itemText?: (item: T) => string;
+  isItemActive?: (item: T) => boolean;
+  onItemClick?: (item: T) => void;
+  floating?: boolean;
+  placement?: "bottom" | "bottom-end" | "bottom-start";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  opened: false,
+  items: () => [],
+  floating: false,
+  placement: "bottom",
+});
+
+defineEmits<{
+  (e: "item:click", item: T): void;
+  (e: "update:opened", opened: boolean): void;
+}>();
+
+defineSlots<{
+  item: (args: { item: T; click: () => void }) => any;
+  empty: () => any;
+  trigger: void;
+}>();
+
+const referenceEl = ref<HTMLElement | null>(null);
+const floatingEl = ref<HTMLElement | null>(null);
+
+const floater = useFloating(referenceEl, floatingEl, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [shift({ mainAxis: false })],
+});
+
+const floatingStyle = computed(() => {
+  if (!props.floating) return {};
+
+  return {
+    position: "absolute" as const,
+    top: `${floater.y.value ?? 0}px`,
+    left: `${floater.x.value ?? 0}px`,
+    zIndex: 10000,
+    width: "max-content",
+  };
+});
+</script>
+
+<style lang="scss">
+:root {
+  --dropdown-bg-color: var(--neutrals-50);
+  --dropdown-text-color: var(--base-text-color, var(--neutrals-950));
+  --dropdown-border-color: var(--app-bar-divider-color);
+  --dropdown-hover-bg-color: var(--primary-50);
+  --dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
+  --dropdown-divider-item-color: var(--neutrals-100);
+}
+
+.vc-dropdown {
+  @apply tw-bg-[color:var(--dropdown-bg-color)] tw-rounded-b-[6px] tw-w-full
+    tw-max-h-[350px] tw-overflow-hidden tw-flex tw-flex-col tw-relative;
+
+  &--mobile {
+    @apply tw-max-h-full tw-w-full;
+    display: flex !important;
+  }
+
+  &--floating {
+    box-shadow: var(--dropdown-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  }
+
+  &__item {
+    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b tw-border-b-[color:var(--dropdown-divider-item-color)];
+    transition: background-color 0.2s;
+
+    &:last-of-type {
+      @apply tw-border-b-0;
+    }
+
+    &:hover {
+      background-color: var(--dropdown-hover-bg-color);
+    }
+
+    &--active {
+      @apply tw-bg-[color:var(--dropdown-hover-bg-color)];
+    }
+
+    &--mobile:not(:last-of-type) {
+      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--dropdown-divider-color)];
+    }
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
+  }
+}
+
+.vc-dropdown-wrapper {
+  @apply tw-relative tw-flex tw-w-full;
+}
+</style>

package/shared/components/generic-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as GenericDropdown } from "./generic-dropdown.vue";

package/shared/components/index.ts

@@ -12,3 +12,5 @@ export * from "./app-bar-button";
 export * from "./sidebar";
 export * from "./theme-selector";
 export * from "./sign-in";
+export * from "./menu-item";
+export * from "./generic-dropdown";