@vc-shell/framework 1.0.290 → 1.0.291

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="app-bar-button">
+    <VcTooltip
+      placement="bottom"
+      :offset="{ crossAxis: 0, mainAxis: -10 }"
+      class="tw-w-full"
+    >
+      <template
+        v-if="!isDropdownVisible && !!title"
+        #tooltip
+        >{{ title }}</template
+      >
+      <button
+        ref="referenceButton"
+        class="app-bar-button__button"
+        @click.stop="toggleNotificationsDrop"
+      >
+        <div
+          :class="[
+            'app-bar-button__button-container',
+            { 'app-bar-button__button-container--active': isDropdownVisible && $slots['dropdown-content'] },
+          ]"
+        >
+          <slot
+            name="button"
+            :opened="isDropdownVisible"
+            :toggle="toggleNotificationsDrop"
+          >
+            <div class="app-bar-button__button-wrap">
+              <VcIcon
+                :icon="icon"
+                size="xl"
+              ></VcIcon>
+            </div>
+          </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>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { vOnClickOutside } from "@vueuse/components";
+import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+
+export interface Props {
+  title?: string;
+  icon?: string;
+  position: "bottom" | "bottom-end" | "bottom-start";
+  beforeOpen?: () => boolean;
+}
+
+export interface Emits {
+  (event: "toggle", state: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  position: "bottom",
+});
+
+const emit = defineEmits<Emits>();
+
+defineSlots<{
+  "dropdown-content": (props: { opened: boolean; toggle: () => void }) => void;
+  button: void;
+}>();
+
+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 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) {
+    return;
+  }
+  isDropdownVisible.value = !isDropdownVisible.value;
+
+  emit("toggle", isDropdownVisible.value);
+}
+</script>
+
+<style lang="scss">
+:root {
+  --app-bar-button-shadow-color: var(--additional-950);
+  --app-bar-button-shadow: 0 -6px 6px var(--additional-50),
+    1px 1px 22px rgb(from var(--app-bar-button-shadow-color) r g b / 7%);
+  --app-bar-button-height: var(--app-bar-height);
+  --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-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 {
+  @apply tw-relative tw-flex;
+
+  &__button {
+    @apply tw-flex tw-text-left tw-w-full;
+  }
+
+  &__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-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;
+
+    &: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)];
+    }
+
+    &--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;
+    }
+  }
+
+  &__button-wrap {
+    @apply tw-w-[var(--app-bar-button-dropdown-button-width)] tw-flex tw-justify-center;
+  }
+
+  &__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);
+  }
+}
+</style>

package/shared/components/app-bar-button/index.ts

@@ -0,0 +1 @@
+export { default as AppBarButtonTemplate } from "./app-bar-button.vue";

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

@@ -1,49 +1,70 @@
 <template>
-  <div
-    v-on-click-outside="onClose"
-    class="tw-relative tw-h-full tw-flex tw-items-center tw-justify-center tw-mx-3 tw-shrink-0"
+  <button
+    class="vc-app-switcher__button"
+    @click.stop="toggleAppSwitch"
   >
-    <button
-      class="hover:[&>img] hover:[&_div]:tw-bg-[color:var(--app-bar-button-color-hover)]"
-      @click.stop="toggleAppSwitch"
-    >
+    <div class="vc-app-switcher__icon"></div>
+  </button>
+  <Sidebar
+    :is-expanded="isVisible"
+    render="always"
+    position="left"
+    @close="onClose"
+  >
+    <template #header>
       <div
-        class="tw-h-[22px] tw-w-[22px] [mask:url(/assets/app-select.svg)] tw-bg-[color:var(--app-bar-button-color)] tw-duration-200"
-      />
-    </button>
-
-    <div
-      v-if="isVisible && appsList && appsList.length"
-      class="tw-px-4 tw-py-3.5 tw-bg-white tw-drop-shadow-[4px_4px_20px_rgba(47,86,108,0.25)] tw-absolute tw-z-[1002] tw-rounded tw-top-[var(--app-bar-height)] tw-left-0 tw-w-max tw-max-w-[200px]"
-    >
-      <ul class="tw-flex tw-flex-col tw-gap-3 tw-overflow-hidden">
-        <li
-          v-for="item in appsList"
-          :key="item.id"
-          class="tw-flex tw-flex-row tw-items-center tw-cursor-pointer tw-group"
-          :class="{
-            '[&>p]:tw-font-extrabold': locationHandler(item.relativeUrl ?? ''),
-          }"
-          @click="switchApp(item)"
+        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"
         >
-          <img
-            :src="imageUrl(item.iconUrl ?? '')"
-            :alt="`icon_${item.id}`"
-            class="tw-w-5 tw-h-5 tw-mr-2 tw-shrink-0"
-          />
-          <p class="tw-font-normal tw-text-sm tw-text-[#727C87] tw-truncate group-hover:tw-opacity-80">
-            {{ item.title }}
-          </p>
-        </li>
-      </ul>
-    </div>
-  </div>
+          <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>
+        </div>
+      </div>
+    </template>
+  </Sidebar>
 </template>
 
 <script lang="ts" setup>
 import { inject, ref } from "vue";
 import { AppDescriptor } from "../../../../../core/api/platform";
-import { vOnClickOutside } from "@vueuse/components";
+import { Sidebar } from "./../../../sidebar";
 
 export interface Props {
   appsList: AppDescriptor[];
@@ -89,4 +110,83 @@ const onClose = () => {
 };
 </script>
 
-<style lang="less" scoped></style>
+<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;
+    }
+
+    &:hover {
+      @apply tw-bg-[color:var(--app-switcher-item-bg-hover)];
+    }
+  }
+
+  &__item-icon {
+    @apply tw-w-5 tw-h-5 tw-mr-2 tw-shrink-0;
+  }
+
+  &__item-title {
+    @apply tw-font-normal tw-text-sm tw-truncate;
+    color: var(--app-switcher-item-text-color);
+    transition: opacity 0.3s ease;
+  }
+}
+</style>

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

@@ -3,7 +3,7 @@
     <VcBreadcrumbs
       v-if="blades && blades.length > 2"
       :items="breadcrumbs"
-      class="tw-bg-white tw-p-2 tw-shadow-[2px_2px_8px_rgba(54,84,117,0.14)] tw-rounded-[var(--blade-border-radius)]"
+      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-mt-4 tw-mx-2': !$isMobile.value,
@@ -141,3 +141,12 @@ const render = () => {
   ]);
 };
 </script>
+
+<style lang="scss">
+:root {
+  --blade-navigation-bg-color: var(--additional-50);
+  --blade-navigation-shadow-color: var(--additional-950);
+  --blade-navigation-shadow: 2px 2px 8px rgb(from var(--blade-navigation-shadow-color) r g b / 7%);
+  --blade-navigation-border-radius: var(--blade-border-radius);
+}
+</style>

package/shared/components/blade-navigation/composables/useBladeNavigation/index.ts

@@ -104,7 +104,10 @@ const utils = (router: Router) => {
 
   function getURLQuery() {
     if (route.query && Object.keys(route.query).length) {
-      return { params: new URLSearchParams(route.query as Record<string, string>).toString(), obj: route.query };
+      return {
+        params: new URLSearchParams(route.query as Record<string, string>).toString(),
+        obj: route.query,
+      };
     }
 
     const [, query] = window.location.href.split("#")[1].split("?");
@@ -125,12 +128,12 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
   const route = useRoute();
   const { setupPageTracking } = useAppInsights();
 
-  const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
+  const instance = getCurrentInstance() as BladeComponentInternalInstance;
   const navigationInstance =
     (instance !== null && inject<BladeNavigationPlugin>("bladeNavigationPlugin")) || bladeNavigationInstance;
   const router = navigationInstance?.router;
 
-  const { parseUrl, parseWorkspaceUrl, getURLQuery } = utils(router);
+  const { parseUrl, parseWorkspaceUrl, getURLQuery, routes } = utils(router);
 
   watch(
     () => route.path,
@@ -161,7 +164,9 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
   }
 
   function updateActiveWorkspace(wsRouteComponent: BladeVNode) {
-    wsRouteComponent.props.navigation.idx = 0;
+    if (wsRouteComponent.props?.navigation) {
+      wsRouteComponent.props.navigation.idx = 0;
+    }
     navigationInstance.blades.value[0] = wsRouteComponent;
     activeWorkspace.value = wsRouteComponent;
     closeBlade(1);
@@ -202,8 +207,10 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     const wsBladeUrl = workspace?.type.url;
     const lastBladeUrl = lastBlade?.type.url;
     const param = lastBlade?.props?.param;
-    if (lastBlade && wsBladeUrl) {
-      return "/" + parseUrl(wsBladeUrl)?.workspace + lastBladeUrl + (param ? "/" + param : "");
+    const parsedWorkspaceUrl = parseUrl(wsBladeUrl || "")?.workspace;
+
+    if (lastBlade && wsBladeUrl && parsedWorkspaceUrl) {
+      return "/" + parsedWorkspaceUrl + lastBladeUrl + (param ? "/" + param : "");
     } else {
       return wsBladeUrl;
     }
@@ -234,8 +241,8 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
     try {
       const children = navigationInstance.blades.value.slice(index).reverse();
       let isPrevented = false;
-      for (let index = 0; index < children.length; index++) {
-        const element = children[index];
+      for (let i = 0; i < children.length; i++) {
+        const element = children[i];
 
         if (element.props?.navigation?.onBeforeClose) {
           const result = await element.props.navigation.onBeforeClose();
@@ -250,7 +257,7 @@ const useBladeNavigationSingleton = createSharedComposable(() => {
       }
 
       if (!isPrevented) {
-        if (navigationInstance.blades.value[index - 1]?.props?.navigation?.isVisible === false) {
+        if (index > 0 && navigationInstance.blades.value[index - 1]?.props?.navigation?.isVisible === false) {
           navigationInstance.blades.value[index - 1].props.navigation.isVisible = true;
         }
         navigationInstance.blades.value.splice(index);
@@ -276,11 +283,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
   const { hasAccess } = usePermissions();
 
-  const instance: BladeComponentInternalInstance = getCurrentInstance() as BladeComponentInternalInstance;
+  const instance = getCurrentInstance() as BladeComponentInternalInstance;
 
   const { router, route, navigationInstance, closeBlade, setupPageTracking } = useBladeNavigationSingleton();
   const { parseUrl, getURLQuery, routes: routerRoutes } = utils(router);
-  const mainRoute = routerRoutes.find((r) => r.meta?.root)!;
+  const mainRoute = routerRoutes.find((r) => r.meta?.root);
+  if (!mainRoute) {
+    throw new Error("Main route not found");
+  }
 
   async function openWorkspace<Blade extends Component>(
     { blade, param, options }: IBladeEvent<Blade>,
@@ -312,11 +322,12 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       if (!isPrevented && createdComponent.type?.url) {
         if (hasAccess(blade.permissions)) {
-          // If the blade is the same as the one we want to open, do nothing. It prevents the loose of the instance state
-          if (navigationInstance.blades.value.length > 0) {
-            if (navigationInstance.blades.value[0].type.url === createdComponent.type.url) {
-              return;
-            }
+          if (
+            hasAccess(blade.permissions) &&
+            navigationInstance.blades.value.length > 0 &&
+            navigationInstance.blades.value[0].type.url === createdComponent.type.url
+          ) {
+            return;
           }
           navigationInstance.blades.value = [createdComponent];
           // Find the route with the matching URL and update the components.default property with the new component
@@ -324,15 +335,21 @@ export function useBladeNavigation(): IUseBladeNavigation {
           if (wsroute && wsroute.components) {
             wsroute.components.default = createdComponent;
           }
-          return await router.push({ name: wsroute?.name, params: { ...params, ...route.params }, query, replace });
-        } else
+          return await router.push({
+            name: wsroute?.name,
+            params: { ...params, ...route.params },
+            query,
+            replace,
+          });
+        } else {
           notification.error(i18n.global.t("PERMISSION_MESSAGES.ACCESS_RESTRICTED"), {
             timeout: 3000,
           });
+        }
       }
     } catch (e) {
       console.error(e);
-      throw new Error(`Opening workspace '${blade.type.name}' is prevented`);
+      throw new Error(`Opening workspace '${blade?.type?.name || "Unknown"}' is prevented`);
     }
   }
 
@@ -367,7 +384,14 @@ export function useBladeNavigation(): IUseBladeNavigation {
 
       const currentBladeIdx = instanceComponent.props?.navigation?.idx ?? 0;
 
-      const bladeNode = createBladeNode<Blade>({ blade, currentBladeIdx, options, param, onClose, onOpen });
+      const bladeNode = createBladeNode<Blade>({
+        blade,
+        currentBladeIdx,
+        options,
+        param,
+        onClose,
+        onOpen,
+      });
 
       if (!isPrevented) {
         if (hasAccess(blade.permissions)) {
@@ -386,8 +410,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function findInstanceComponentIndex(instanceComponent: BladeVNode) {
-    return navigationInstance.blades.value /* @ts-expect-error  - findLastIndex is not parsed correctly by ts */
-      .findLastIndex((x) => _.isEqual(x.type, instanceComponent.type));
+    return _.findLastIndex(navigationInstance.blades.value, (x) => _.isEqual(x.type, instanceComponent.type));
   }
 
   function createBladeNode<Blade extends Component>(args: {
@@ -419,7 +442,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     console.debug(`vc-app#onParentCall({ method: ${args.method} }) called.`);
 
     if (args.method && parentExposedMethods && typeof parentExposedMethods[args.method] === "function") {
-      const method = parentExposedMethods[args.method] as (args: unknown) => Promise<unknown>;
+      const method = parentExposedMethods[args.method];
       const result = await method(args.args);
 
       if (typeof args.callback === "function") {
@@ -436,7 +459,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     if (!instance) {
       warn("resolveComponentByName can only be used in setup().");
 
-      return null as any; // Return type inferred as any due to the early return
+      return null as unknown as BladeInstanceConstructor;
     }
 
     if (!name) {
@@ -475,7 +498,7 @@ export function useBladeNavigation(): IUseBladeNavigation {
     const params = Object.fromEntries(Object.entries(to.params).filter(([key]) => key !== "pathMatch"));
 
     // Get the raw path of the main route.
-    const parentRawPath = routerRoutes.find((route) => route.name === mainRoute.name)?.path;
+    const parentRawPath = routerRoutes.find((route) => route.name === mainRoute?.name)?.path;
 
     // Determine the parent path based on the parameters.
     const parentPath =
@@ -568,11 +591,12 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function setNavigationQuery(query: Record<string, string | number>) {
-    if (instance.vnode.props.navigation.idx === 0) {
+    const typeName = instance.vnode.type.name?.toLowerCase();
+    if (typeName && instance.vnode.props.navigation.idx === 0) {
       // add blade name to query keys
       const namedQuery = _.mapKeys(
         _.mapValues(query, (value) => value?.toString()),
-        (value, key) => instance.vnode.type.name?.toLowerCase() + "_" + key,
+        (value, key) => typeName + "_" + key,
       );
       const cleanQuery = _.omitBy(namedQuery, _.isNil);
 
@@ -585,12 +609,13 @@ export function useBladeNavigation(): IUseBladeNavigation {
   }
 
   function getNavigationQuery() {
-    if (instance.vnode.props.navigation.idx === 0) {
+    const typeName = instance.vnode.type.name?.toLowerCase();
+    if (typeName && instance.vnode.props.navigation.idx === 0) {
       const queryKeys = Array.from(Object.keys(route.query));
-      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(instance.vnode.type.name?.toLowerCase() ?? ""));
+      const bladeQueryKeys = queryKeys.filter((key) => key.startsWith(typeName));
 
       const namedQuery = _.mapKeys(_.pick(route.query, bladeQueryKeys), (value, key) =>
-        key.replace(instance.vnode.type.name?.toLowerCase() + "_", ""),
+        key.replace(typeName + "_", ""),
       ) as Record<string, string | number>;
 
       const obj: typeof namedQuery = {};

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

@@ -118,7 +118,7 @@
         <VcHint
           v-for="(err, i) in form.errors"
           :key="i"
-          class="tw-mt-3 !tw-text-[#f14e4e]"
+          class="tw-mt-3 !tw-text-[color:var(--change-password-error-color)]"
         >
           <!-- TODO: stylizing-->
           {{
@@ -219,3 +219,9 @@ function validate() {
   });
 }
 </script>
+
+<style lang="scss">
+:root {
+  --change-password-error-color: var(--base-error-color, var(--danger-500));
+}
+</style>

package/shared/components/common/popup/vc-popup-error.vue

@@ -39,6 +39,6 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --confirm-button-color: #6b7987;
+  --confirm-button-color: var(--secondary-700);
 }
 </style>

package/shared/components/common/popup/vc-popup-warning.vue

@@ -42,6 +42,6 @@ defineEmits<Emits>();
 
 <style lang="scss">
 :root {
-  --confirm-button-color: #6b7987;
+  --confirm-button-color: var(--secondary-700);
 }
 </style>

package/shared/components/index.ts

@@ -8,3 +8,6 @@ export * from "./language-selector";
 export * from "./user-dropdown-button";
 export * from "./notification-dropdown";
 export * from "./notification-template";
+export * from "./app-bar-button";
+export * from "./sidebar";
+export * from "./theme-selector";