@vc-shell/framework 1.2.4-beta.3 → 1.2.4-beta.5

package/shared/components/notifications/styles/index.scss

@@ -3,7 +3,6 @@
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: 8px;
 
   /* Default position - top center */
   &:not([data-position]) {
@@ -67,105 +66,68 @@
   }
 }
 
-/* Animation styles for toast notifications */
-:root {
-  --notification-slide-distance: 30px;
-}
-
-/* Exit animation classes */
-.notification-exit-top-center {
-  animation: notificationExitTopCenter 0.3s ease-out forwards;
-}
-
-.notification-exit-top-right {
-  animation: notificationExitTopRight 0.3s ease-out forwards;
-}
-
-.notification-exit-top-left {
-  animation: notificationExitTopLeft 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-center {
-  animation: notificationExitBottomCenter 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-right {
-  animation: notificationExitBottomRight 0.3s ease-out forwards;
-}
-
-.notification-exit-bottom-left {
-  animation: notificationExitBottomLeft 0.3s ease-out forwards;
-}
+/* Toast group wrapper — stacking container for Sonner-style deck-of-cards */
+.notification__toast-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative; /* Positioning context for absolute back toasts */
+  transition: gap 400ms cubic-bezier(0.21, 1.02, 0.73, 1);
 
-/* Keyframes for exit animations */
-@keyframes notificationExitTopCenter {
-  from {
-    opacity: 1;
-    transform: translateY(0);
+  /* Prevent toasts from shrinking when container has max-height */
+  > * {
+    flex-shrink: 0;
   }
-  to {
-    opacity: 0;
-    transform: translateY(-30px);
-  }
-}
 
-@keyframes notificationExitTopRight {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
+  /* Top positions: reverse order so newest toast appears at top */
+  &[data-position^="top"] {
+    flex-direction: column-reverse;
   }
-  to {
-    opacity: 0;
-    transform: translate(30px, -30px);
-  }
-}
 
-@keyframes notificationExitTopLeft {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
+  /* Bottom positions: push items to the bottom of the container */
+  &[data-position^="bottom"] {
+    justify-content: flex-end;
   }
-  to {
-    opacity: 0;
-    transform: translate(-30px, -30px);
-  }
-}
 
-@keyframes notificationExitBottomCenter {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(30px);
-  }
-}
+  &[data-expanded="true"] {
+    max-height: calc(100vh - 4em);
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
 
-@keyframes notificationExitBottomRight {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(30px, 30px);
+    &::-webkit-scrollbar {
+      display: none; /* Chrome / Safari */
+    }
   }
-}
 
-@keyframes notificationExitBottomLeft {
-  from {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-30px, 30px);
+  &[data-expanded="false"] {
+    gap: 0;
   }
 }
 
-.notification__container > * {
-  transition: opacity 300ms cubic-bezier(0.55, 0, 0.1, 1), transform 300ms cubic-bezier(0.55, 0, 0.1, 1);
-  opacity: 1;
-  transform: translateY(0) scale(1);
+/* "Clear all" button — appears below the expanded toast stack */
+.notification__clear-all {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 4px 0;
+
+  button {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--neutrals-500);
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    transition: color 150ms ease, background 150ms ease;
+
+    &:hover {
+      color: var(--neutrals-700);
+      background: var(--neutrals-100);
+    }
+  }
 }

package/shared/components/notifications/types/index.ts

@@ -6,7 +6,6 @@ import { VNode, DefineComponent } from "vue";
 export type NotificationType = "success" | "error" | "warning" | "default";
 
 export interface NotificationOptions {
-  limit?: number;
   pauseOnHover?: boolean;
   timeout?: number | boolean;
   content?: Content;
@@ -18,11 +17,10 @@ export interface NotificationOptions {
   payload?: string | Record<string, any>;
   updateId?: string | number;
   position?: NotificationPosition;
+  /** Set by `actions.dismiss()` to trigger exit animation in VcToast */
+  dismissing?: boolean;
 }
 
-// Now InternalNotificationOptions doesn't need closeNotification
-export type InternalNotificationOptions = NotificationOptions;
-
 // Adding a new type for notification positioning
 export type NotificationPosition =
   | "top-center"

package/shared/components/popup-handler/components/vc-popup-container/vc-popup-container.vue

@@ -1,8 +1,8 @@
 <template>
   <component
     :is="popup.component"
-    v-for="popup in popupPlugin?.popups"
-    :key="popup.id"
+    v-for="(popup, index) in popupPlugin?.popups"
+    :key="popup.id ?? index"
     v-bind="{ ...popup.props, ...popup.emits }"
     @close="() => popup.close?.()"
   >

package/shared/components/popup-handler/composables/usePopup/index.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { VcPopup } from "@ui/components";
+import { VcPopup } from "@ui/components/organisms/vc-popup";
 import {
   markRaw,
   getCurrentInstance,
@@ -42,67 +42,80 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
 ): IUsePopup {
   const { t } = useI18n({ useScope: "global" });
   const popupInstance = usePopupInternal();
-  let rawPopup: UsePopupProps<DefineComponent> & UsePopupInternal;
+  let rawPopup: (UsePopupProps<DefineComponent> & UsePopupInternal) | undefined;
 
   if (options) {
     rawPopup = createInstance(unref(options));
   }
 
   watch(
-    () => options,
+    () => (options ? unref(options) : undefined),
     (newVal) => {
       if (newVal) {
-        rawPopup = createInstance(unref(newVal));
+        rawPopup = createInstance(newVal);
       }
     },
     { deep: true },
   );
 
-  function destroy(confirmation: UsePopupProps<DefineComponent>): void {
+  function destroy(confirmation?: Partial<UsePopupProps<DefineComponent> & UsePopupInternal>): void {
+    if (!confirmation) {
+      return;
+    }
+
     const popupInstanceInternal = usePopupInternal();
     const index = popupInstanceInternal?.popups?.findIndex((x) =>
       _.isEqualWith(x, confirmation, (val) => val.component),
     );
 
-    if (index !== -1) popupInstanceInternal?.popups?.splice(index, 1);
+    if (typeof index === "number" && index !== -1) {
+      popupInstanceInternal?.popups?.splice(index, 1);
+    }
   }
 
-  async function open(customInstance?: UsePopupProps<DefineComponent>) {
-    let activeInstance;
-    await nextTick();
-    if (popupInstance) {
-      activeInstance = popupInstance;
+  function resolveInstance(customInstance?: UsePopupProps<DefineComponent>): UsePopupProps<DefineComponent> | undefined {
+    return rawPopup ?? customInstance;
+  }
+
+  function pushInstance(popup?: UsePopupProps<DefineComponent>) {
+    if (!popup) {
+      return;
     }
 
-    destroy(rawPopup || customInstance);
+    destroy(popup);
+    popupInstance?.popups?.push(popup);
+  }
 
-    activeInstance?.popups?.push(rawPopup || customInstance);
+  async function open(customInstance?: UsePopupProps<DefineComponent>) {
+    await nextTick();
+    pushInstance(resolveInstance(customInstance));
   }
 
   function close(customInstance?: UsePopupProps<DefineComponent>) {
-    let activeInstance;
-    if (popupInstance) {
-      activeInstance = popupInstance;
+    const instanceToClose = resolveInstance(customInstance);
+    if (!instanceToClose) {
+      return;
+    }
+
+    const index = popupInstance?.popups.indexOf(instanceToClose);
+    if (typeof index === "number" && index !== -1) {
+      popupInstance?.popups?.splice(index, 1);
     }
-    const index = activeInstance?.popups.indexOf(rawPopup || customInstance);
-    if (index !== undefined && index !== -1) activeInstance?.popups?.splice(index, 1);
   }
 
-  async function showConfirmation(message: string | Ref<string>): Promise<boolean> {
-    let resolvePromise: (value: boolean | PromiseLike<boolean>) => void;
-    const confirmation = createInstance({
-      component: vcPopupWarning,
+  function showSimplePopup(
+    component: ComponentPublicInstanceConstructor<any>,
+    title: string,
+    message: string | Ref<string>,
+  ): UsePopupProps<DefineComponent> & UsePopupInternal {
+    const popup = createInstance({
+      component,
       props: {
-        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION"),
+        title,
       },
       emits: {
         onClose() {
-          resolvePromise(false);
-          close(confirmation);
-        },
-        onConfirm() {
-          resolvePromise(true);
-          close(confirmation);
+          close(popup);
         },
       },
       slots: {
@@ -110,68 +123,58 @@ export function usePopup<T extends ComponentPublicInstanceConstructor<any> = typ
       },
     });
 
-    destroy(confirmation);
-
-    popupInstance.popups.push(confirmation);
+    pushInstance(popup);
+    return popup;
+  }
 
+  function showConfirmation(message: string | Ref<string>): Promise<boolean> {
     return new Promise((resolve) => {
-      resolvePromise = resolve;
+      const confirmation = createInstance({
+        component: vcPopupWarning,
+        props: {
+          title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.CONFIRMATION"),
+        },
+        emits: {
+          onClose() {
+            resolve(false);
+            close(confirmation);
+          },
+          onConfirm() {
+            resolve(true);
+            close(confirmation);
+          },
+        },
+        slots: {
+          default: message,
+        },
+      });
+
+      pushInstance(confirmation);
     });
   }
 
   function showError(message: string | Ref<string>) {
-    const confirmation = createInstance({
-      component: vcPopupError,
-      props: {
-        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"),
-      },
-      emits: {
-        onClose() {
-          close(confirmation);
-        },
-      },
-      slots: {
-        default: message,
-      },
-    });
-
-    destroy(confirmation);
-
-    popupInstance.popups.push(confirmation);
+    showSimplePopup(vcPopupError, t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.ERROR"), message);
   }
 
   function showInfo(message: string | Ref<string>) {
-    const confirmation = createInstance({
-      component: vcPopupInfo,
-      props: {
-        title: t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.INFO"),
-      },
-      emits: {
-        onClose() {
-          close(confirmation);
-        },
-      },
-      slots: {
-        default: message,
-      },
-    });
-
-    destroy(confirmation);
-
-    popupInstance.popups.push(confirmation);
+    showSimplePopup(vcPopupInfo, t("COMPONENTS.ORGANISMS.VC_POPUP.TITLE.INFO"), message);
   }
 
   function createInstance<T extends ComponentPublicInstanceConstructor<any> = typeof VcPopup>(
     options: UsePopupProps<T>,
   ) {
-    return (
-      options &&
-      (reactive({
-        ...createComponent(options),
-        close: close,
-        open: open,
-      }) as unknown as UsePopupProps<DefineComponent> & UsePopupInternal)
-    );
+    const popup = reactive({
+      ...createComponent(options),
+      id: Symbol("vc-popup-instance"),
+      close: () => undefined,
+      open: () => undefined,
+    }) as unknown as UsePopupProps<DefineComponent> & UsePopupInternal;
+
+    popup.close = () => close(popup);
+    popup.open = () => open(popup);
+
+    return popup;
   }
 
   return {

package/shared/components/settings-menu-item/settings-menu-item.stories.ts

@@ -1,7 +1,8 @@
 import { ref } from "vue";
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import SettingsMenuItem from "@shared/components/settings-menu-item/settings-menu-item.vue";
-import { VcDropdownPanel, VcIcon } from "@ui/components";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 const meta = {
   title: "Shared/SettingsMenuItem",

package/shared/components/settings-menu-item/settings-menu-item.vue

@@ -58,7 +58,8 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Component, ref } from "vue";
-import { VcIcon, VcImage } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { VcImage } from "@ui/components/atoms/vc-image";
 
 interface Props {
   title?: string;

package/shared/components/sidebar/sidebar.vue

@@ -30,7 +30,7 @@
 <script lang="ts" setup>
 import { computed, inject, ref, type Ref } from "vue";
 import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
-import { VcSidebar } from "@ui/components";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 
 export interface Props {
   position?: "left" | "right";

package/shared/components/sign-in/external-provider.vue

@@ -15,7 +15,8 @@
 </template>
 
 <script lang="ts" setup>
-import { VcButton, VcImage } from "@ui/components";
+import { VcButton } from "@ui/components/atoms/vc-button";
+import { VcImage } from "@ui/components/atoms/vc-image";
 import { computed } from "vue";
 
 export interface Props {

package/shared/components/sign-in/external-providers.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="tw-flex tw-justify-center tw-mt-4 tw-flex-col tw-gap-2">
+  <div class="tw-flex tw-justify-center tw-flex-col tw-gap-4">
     <ExternalProvider
       v-for="provider in providers"
       :key="provider.authenticationType"

package/shared/components/theme-selector/theme-selector.vue

@@ -33,7 +33,7 @@ import { useTheme } from "@core/composables/useTheme";
 import { ref } from "vue";
 import { notification } from "..";
 import { SettingsMenuItem } from "@shared/components/settings-menu-item";
-import { VcDropdownPanel } from "@ui/components";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
 import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
 
 const { currentThemeKey, currentLocalizedName, themes, setTheme } = useTheme();

package/shared/components/user-dropdown-button/_internal/user-info.vue

@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useUserManagement } from "@core/composables/useUserManagement";
-import { VcIcon } from "@ui/components";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
 
 export interface Props {
   avatarUrl?: string;

package/shared/components/user-dropdown-button/_internal/user-sidebar.vue

@@ -21,7 +21,7 @@ import { inject, ref, type Ref } from "vue";
 import { IsDesktopKey } from "@framework/injection-keys";
 import { IMenuItem } from "@core/types";
 import { SettingsMenu } from "@shared/components/settings-menu";
-import { VcSidebar } from "@ui/components";
+import { VcSidebar } from "@ui/components/organisms/vc-sidebar";
 
 defineProps<{
   isOpened: boolean;
@@ -41,7 +41,7 @@ const isDesktop = inject(IsDesktopKey, ref(false));
     @apply tw-w-full tw-flex tw-flex-col;
   }
 
-  .vc-app_mobile & {
+  .vc-app--mobile & {
     &__menu {
       @apply tw-static tw-shadow-none #{!important};
     }

package/shared/components/user-dropdown-button/user-dropdown-button.stories.ts

@@ -5,7 +5,7 @@ import { ThemeSelector } from "@shared/components/theme-selector";
 import { LanguageSelector } from "@shared/components/language-selector";
 import { ChangePasswordButton } from "@shared/components/change-password-button";
 import { LogoutButton } from "@shared/components/logout-button";
-import { VcPopupContainer } from "@shared/components";
+import { VcPopupContainer } from "@shared/components/popup-handler";
 import { withMobileView } from "../../../../.storybook/decorators";
 import { provideSettingsMenu } from "@core/composables/useSettingsMenu";
 import { provideSidebarState } from "@core/composables/useSidebarState";

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -56,7 +56,7 @@ import { CloseSettingsMenuKey } from "@framework/injection-keys";
 import { default as UserInfo } from "@shared/components/user-dropdown-button/_internal/user-info.vue";
 import { default as UserSidebar } from "@shared/components/user-dropdown-button/_internal/user-sidebar.vue";
 import { SettingsMenu } from "@shared/components/settings-menu";
-import { VcDropdownPanel } from "@ui/components";
+import { VcDropdownPanel } from "@ui/components/molecules/vc-dropdown-panel";
 import { useSidebarState } from "@core/composables/useSidebarState";
 
 export interface Props {
@@ -113,7 +113,7 @@ function handleClick() {
     }
   }
 
-  .vc-app_mobile & {
+  .vc-app--mobile & {
     @apply tw-w-full #{!important};
   }
 

package/shared/composables/useExternalWidgets.ts

@@ -1,7 +1,7 @@
 import { computed, inject, onMounted, onUnmounted, watch, toValue, Ref, ComputedRef } from "vue";
 import { WidgetServiceKey, BladeInstance } from "@framework/injection-keys";
-import { IWidget } from "@core/services";
-import { useBlade } from "@core/composables";
+import { IWidget } from "@core/services/widget-service";
+import { useBlade } from "@core/composables/useBlade";
 import { createLogger } from "@core/utilities";
 
 const logger = createLogger("use-external-widgets");

package/shared/composables/useModificationTracker/index.ts

@@ -1,5 +1,22 @@
 import { ref, watch, Ref, computed, DeepReadonly, unref, isRef } from "vue";
-import { cloneDeep, isEqual } from "lodash-es";
+import { cloneDeep, isEqualWith } from "lodash-es";
+
+/**
+ * Custom comparator for deep equality that treats null, undefined, and ""
+ * as semantically equivalent "empty" values.
+ * This prevents false modification detection when APIs return null
+ * but local state uses undefined or empty strings (common with language switching).
+ */
+function isEmpty(value: unknown): boolean {
+  return value === null || value === undefined || value === "";
+}
+
+function semanticEqual(a: unknown, b: unknown): boolean {
+  return isEqualWith(a, b, (valA: unknown, valB: unknown) => {
+    if (isEmpty(valA) && isEmpty(valB)) return true;
+    return undefined; // fall back to default deep comparison
+  });
+}
 
 /**
  * Return values from useModificationTracker.
@@ -51,7 +68,7 @@ export function useModificationTracker<T>(initialValueProp: T | Ref<T>): UseModi
       (newExternalInitialValue) => {
         // When the external initialValueProp (Ref) changes,
         // we need to decide if we should update currentValue.
-        const wasModified = !isEqual(currentValue.value, pristineValue.value);
+        const wasModified = !semanticEqual(currentValue.value, pristineValue.value);
 
         // Always update the "pristine" value (pristineValue), to reflect the new external source.
         pristineValue.value = cloneDeep(newExternalInitialValue);
@@ -73,7 +90,7 @@ export function useModificationTracker<T>(initialValueProp: T | Ref<T>): UseModi
   watch(
     [currentValue, pristineValue], // Track changes in currentValue or pristineValue
     ([newCurrentVal, newPristineVal]) => {
-      isModified.value = !isEqual(newCurrentVal, newPristineVal);
+      isModified.value = !semanticEqual(newCurrentVal, newPristineVal);
     },
     { deep: true },
   );

package/shared/modules/assets/components/assets-details/assets-details.vue

@@ -39,7 +39,7 @@
                     <VcCol>
                       <VcLabel>{{ t("ASSETS.PAGES.DETAILS.FIELDS.CREATED_DATE") }}</VcLabel>
                       <VcHint class="tw-text-s">{{
-                        (defaultAsset.createdDate && moment(defaultAsset.createdDate).fromNow()) || "N/A"
+                        formatDateRelative(defaultAsset.createdDate) || "N/A"
                       }}</VcHint>
                     </VcCol>
                     <VcCol class="tw-w-full">
@@ -117,9 +117,14 @@
 import { ICommonAsset, IBladeToolbar } from "@core/types";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { VcBlade, VcContainer, VcForm, VcImage, VcInput, VcTextarea } from "@ui/components";
+import { VcBlade } from "@ui/components/organisms/vc-blade";
+import { VcContainer } from "@ui/components/atoms/vc-container";
+import { VcForm } from "@ui/components/molecules/vc-form";
+import { VcImage } from "@ui/components/atoms/vc-image";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcTextarea } from "@ui/components/molecules/vc-textarea";
 import { isImage, getFileThumbnail, readableSize } from "@shared/utilities/assets";
-import moment from "moment";
+import { formatDateRelative } from "@core/utilities/date";
 import { useIsFormValid, Field, useForm, useIsFormDirty } from "vee-validate";
 
 export interface Props {

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -125,7 +125,7 @@
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
                   <VcHint>{{ t("ASSETS_MANAGER.TABLE.HEADER.CREATED_DATE") }}</VcHint>
                   <div class="tw-truncate tw-mt-1">
-                    {{ item.createdDate && moment(item.createdDate).fromNow() }}
+                    {{ item.createdDate && formatDateRelative(item.createdDate) }}
                   </div>
                 </div>
                 <div class="tw-truncate tw-grow tw-basis-0 tw-mr-2">
@@ -156,10 +156,11 @@
 import { ICommonAsset, IActionBuilderResult, IBladeToolbar, ITableColumns } from "@core/types";
 import { ref, computed, onMounted, unref, watch, Ref } from "vue";
 import { useI18n } from "vue-i18n";
-import moment from "moment";
+import { formatDateRelative } from "@core/utilities/date";
 import { isImage, getFileThumbnail, readableSize } from "@shared/utilities/assets";
 import * as _ from "lodash-es";
-import { IParentCallArgs, useBladeNavigation } from "@shared/components";
+import type { IParentCallArgs } from "@shared/components/blade-navigation/types";
+import { useBladeNavigation } from "@shared/components/blade-navigation/composables";
 import { createLogger } from "@core/utilities";
 
 const logger = createLogger("assets-manager");

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -19,7 +19,7 @@ import { methodHandler } from "@shared/modules/dynamic/helpers/methodHandler";
 import { toValue } from "@vueuse/core";
 import { safeIn } from "@shared/modules/dynamic/helpers/safeIn";
 import { unrefNested } from "@shared/modules/dynamic/helpers/unrefNested";
-import { usePermissions } from "@core/composables";
+import { usePermissions } from "@core/composables/usePermissions";
 
 const schemeRenderProps = {
   context: {