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

package/shared/components/notifications/core/notification.ts

@@ -1,5 +1,5 @@
 import { mergeProps } from "vue";
-import { Content, InternalNotificationOptions, NotificationOptions } from "../types";
+import { Content, InternalNotificationOptions, NotificationOptions, NotificationPosition } from "../types";
 import { useContainer } from "../composables";
 
 const {
@@ -10,25 +10,43 @@ const {
   getAllNotifications,
   appendInstance,
   generateNotificationId,
+  hasNotification,
 } = useContainer();
 
-function checkPending(limit?: number) {
-  const visibleCount = getAllNotifications().length;
+function checkPending(limit?: number, position?: NotificationPosition) {
+  // If position is not specified, use the default position
+  const posToCheck = position || (defaultOptions.position as NotificationPosition);
   const limitCount = limit ?? 0;
-  return limitCount > 0 && visibleCount + pending.items.length >= limitCount;
+
+  // Check the limit for a specific position
+  const visibleCount = getAllNotifications().filter(
+    (notification) => (notification.position || defaultOptions.position) === posToCheck,
+  ).length;
+
+  return (
+    limitCount > 0 && visibleCount + pending.items.filter((item) => item.position === posToCheck).length >= limitCount
+  );
 }
 
 function resolvePending(options: InternalNotificationOptions) {
-  if (checkPending(options.limit) && options.notificationId) {
+  const position = options.position || (defaultOptions.position as NotificationPosition);
+
+  if (checkPending(options.limit, position) && options.notificationId) {
     pending.items.push({
       notificationId: options.notificationId,
       notificationProps: options,
+      position,
     });
+    return true;
   }
+  return false;
 }
 
 function showNotification(content: Content, options: InternalNotificationOptions) {
-  options = mergeProps(defaultOptions as Record<string, unknown>, options as Record<string, unknown>);
+  options = mergeProps(
+    defaultOptions as Record<string, unknown>,
+    options as Record<string, unknown>,
+  ) as InternalNotificationOptions;
 
   if (
     !options.notificationId ||
@@ -40,15 +58,21 @@ function showNotification(content: Content, options: InternalNotificationOptions
   options = {
     ...options,
     content,
-    closeNotification: () => notification.remove(options.notificationId),
   };
 
-  resolvePending(options);
-
-  if (!pending.items.length) {
+  // If this is an update (has updateId), don't check the limit and don't add to the waiting queue
+  if (options.updateId) {
     appendInstance(options);
+    return options.notificationId;
+  }
+
+  // If the notification has been added to the queue, just return the ID
+  if (resolvePending(options)) {
+    return options.notificationId;
   }
 
+  // Otherwise, display it
+  appendInstance(options);
   return options.notificationId;
 }
 
@@ -77,20 +101,151 @@ notification.remove = (notificationId?: number | string) => {
 };
 
 notification.update = (notificationId: string | number, options: NotificationOptions) => {
+  // Check if notification exists
+  if (!hasNotification(notificationId)) {
+    console.warn(`Cannot update: notification with ID ${notificationId} not found`);
+    return notificationId;
+  }
+
+  // Get the current notification
   const item = getNotification(String(notificationId));
+
   if (item) {
-    const updatedOptions = {
-      ...item,
-      ...options,
-      updateId: generateNotificationId(),
-      notificationId: options.notificationId || notificationId,
-    };
+    // First update option: if the position changes, recreate the notification
+    if (options.position && options.position !== item.position) {
+      // Create new options with required fields
+      const updatedOptions: NotificationOptions = {
+        ...item, // Copy all current properties
+        ...options, // Apply new properties
+        updateId: generateNotificationId(), // Mark as update
+        notificationId: notificationId, // Keep the original ID
+      };
+
+      // Determine content for update
+      let contentToUse: Content | undefined;
+
+      // If new content is explicitly provided, use it
+      if (options.content !== undefined) {
+        contentToUse = options.content;
+        delete updatedOptions.content; // Remove content from options
+      }
+      // Otherwise use existing content
+      else if (item.content) {
+        contentToUse = item.content;
+        delete updatedOptions.content; // Remove content from options
+      }
+
+      // Proceed with the update only if there is content
+      if (contentToUse) {
+        // Remove the old notification
+        actions.remove(notificationId);
+        // Create a new one with the new position
+        return showNotification(contentToUse, updatedOptions);
+      }
+    }
+    // Second option: update content without changing position
+    else {
+      // Use direct update through actions.update
+      const updateOptions = {
+        ...options,
+        updateId: generateNotificationId(),
+        notificationId: notificationId,
+      };
+
+      // If we're only updating content, use a special method
+      if (options.content !== undefined) {
+        // Apply the update directly through actions
+        const result = actions.update(updateOptions);
+        return notificationId;
+      } else {
+        // Update other properties
+        const result = actions.update(updateOptions);
+        return notificationId;
+      }
+    }
+  }
 
-    const content = updatedOptions.content || item.content;
-    delete updatedOptions.content;
+  return notificationId;
+};
 
-    if (content) showNotification(content, updatedOptions);
-  }
+// New method for setting notification position
+notification.setPosition = (position: NotificationPosition) => {
+  defaultOptions.position = position;
+};
+
+// New method for clearing notifications only in a specific position
+notification.clearPosition = (position: NotificationPosition) => {
+  // Find all notifications in the specified position
+  const notificationsInPosition = getAllNotifications().filter(
+    (item) => (item.position || defaultOptions.position) === position,
+  );
+
+  // Remove each notification
+  notificationsInPosition.forEach((item) => {
+    if (item.notificationId) {
+      actions.dismiss(item.notificationId);
+    }
+  });
+
+  // Remove pending notifications for this position
+  pending.items = pending.items.filter((item) => item.position !== position);
+};
+
+// Useful debugging method
+notification.debug = () => {
+  // Default settings information
+  Object.entries(defaultOptions).forEach(([key, value]) => {
+    console.log(`Default option ${key}: `, value);
+  });
+
+  // Available actions
+  Object.entries(actions).forEach(([key]) => {
+    console.log(`Available action: ${key}`);
+  });
+
+  // Collect statistics on notifications in different positions
+  const groupedNotifications = getAllNotifications().reduce<
+    Record<
+      string,
+      Array<{
+        id: string | number;
+        type?: string;
+        content: string;
+      }>
+    >
+  >((acc, item) => {
+    const position = (item.position as string) || (defaultOptions.position as string);
+
+    if (!acc[position]) {
+      acc[position] = [];
+    }
+
+    acc[position].push({
+      id: item.notificationId || "unknown",
+      type: item.type,
+      content: typeof item.content === "string" ? item.content : "[Component]",
+    });
+
+    return acc;
+  }, {});
+
+  // Display group information
+  Object.entries(groupedNotifications).forEach(([position, items]) => {
+    console.log(`Position ${position}: ${items.length} notifications`);
+    items.forEach((item) => console.log(`  - ${item.id} (${item.type}): ${item.content}`));
+  });
+
+  // Collect statistics on pending notifications
+  console.log(`Pending notifications: ${pending.items.length}`);
+  pending.items.forEach((item) => {
+    console.log(`  - ${item.notificationId} (position: ${item.position})`);
+  });
+
+  return {
+    active: getAllNotifications(),
+    pending: pending.items,
+    defaultOptions,
+  };
 };
 
 export { notification };

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

@@ -1,10 +1,171 @@
-.notification__container {
-  position: fixed;
-  top: 1em;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
+.notification__container {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  /* Default position - top center */
+  &:not([data-position]) {
+    top: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Top center */
+  &[data-position="top-center"] {
+    top: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Top right */
+  &[data-position="top-right"] {
+    top: 1em;
+    right: 1em;
+  }
+
+  /* Top left */
+  &[data-position="top-left"] {
+    top: 1em;
+    left: 1em;
+  }
+
+  /* Bottom center */
+  &[data-position="bottom-center"] {
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Bottom right */
+  &[data-position="bottom-right"] {
+    bottom: 1em;
+    right: 1em;
+  }
+
+  /* Bottom left */
+  &[data-position="bottom-left"] {
+    bottom: 1em;
+    left: 1em;
+  }
+
+  /* Mobile styles */
+  @media screen and (max-width: 768px) {
+    width: 90%;
+    max-width: 400px;
+
+    &[data-position="top-left"],
+    &[data-position="bottom-left"] {
+      left: 5%;
+    }
+
+    &[data-position="top-right"],
+    &[data-position="bottom-right"] {
+      right: 5%;
+    }
+  }
+}
+
+/* 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;
+}
+
+/* Keyframes for exit animations */
+@keyframes notificationExitTopCenter {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+}
+
+@keyframes notificationExitTopRight {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(30px, -30px);
+  }
+}
+
+@keyframes notificationExitTopLeft {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-30px, -30px);
+  }
+}
+
+@keyframes notificationExitBottomCenter {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+}
+
+@keyframes notificationExitBottomRight {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(30px, 30px);
+  }
+}
+
+@keyframes notificationExitBottomLeft {
+  from {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-30px, 30px);
+  }
+}
+
+.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);
+}

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

@@ -17,10 +17,19 @@ export interface NotificationOptions {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload?: string | Record<string, any>;
   updateId?: string | number;
+  position?: NotificationPosition;
 }
 
-export interface InternalNotificationOptions extends NotificationOptions {
-  closeNotification?(): void;
-}
+// Now InternalNotificationOptions doesn't need closeNotification
+export type InternalNotificationOptions = NotificationOptions;
+
+// Adding a new type for notification positioning
+export type NotificationPosition =
+  | "top-center"
+  | "top-right"
+  | "top-left"
+  | "bottom-center"
+  | "bottom-right"
+  | "bottom-left";
 
 export type Content = string | VNode | DefineComponent<{}, {}, any>;

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

@@ -11,9 +11,10 @@
 
 <script lang="ts" setup>
 import { inject } from "vue";
-import { SettingsMenuKey, useSettingsMenu } from "../../composables/useSettingsMenu";
+import { useSettingsMenu } from "../../../core/composables/useSettingsMenu";
+import { SettingsMenuServiceKey } from "../../../injection-keys";
 
-const settingsMenu = inject(SettingsMenuKey, useSettingsMenu());
+const settingsMenu = useSettingsMenu();
 const { items } = settingsMenu;
 </script>
 

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

@@ -77,7 +77,7 @@ const handleTriggerClick = () => {
 <style lang="scss">
 :root {
   --menu-item-text-color: var(--additional-950);
-  --menu-item-border-color: var(--base-border-color, var(--neutrals-200));
+  --menu-item-border-color: var(--neutrals-200);
   --menu-item-bg: transparent;
   --menu-item-bg-hover: var(--primary-50);
   --menu-item-icon-color-hover: var(--primary-700);

package/shared/components/sidebar/sidebar.vue

@@ -1,5 +1,8 @@
 <template>
-  <Teleport to="body">
+  <Teleport
+    to="body"
+    :disabled="$isDesktop.value"
+  >
     <template v-if="isExpanded">
       <div
         v-if="isExpanded"
@@ -81,7 +84,7 @@ const header = h("div", { class: "sidebar__header" }, [
   --sidebar-bg-color: var(--neutrals-100);
   --sidebar-header-height: 82px;
   --sidebar-dropdown-mobile-icon-color: var(--primary-500);
-  --sidebar-title-color: var(--base-text-color, var(--additional-950));
+  --sidebar-title-color: var(--additional-950);
   --sidebar-header-padding: 18px;
   --sidebar-dropdown-icon-color: var(--neutrals-500);
   --sidebar-overlay-color: var(--additional-950);

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

@@ -3,7 +3,7 @@
     <template #trigger>
       <div class="vc-theme-selector__trigger">
         <VcIcon
-          icon="fas fa-palette"
+          icon="material-palette"
           class="vc-theme-selector__icon"
         />
         <span class="vc-theme-selector__title">
@@ -74,7 +74,7 @@ watch(
   }
 
   &__item {
-    @apply tw-flex tw-items-center tw-w-full tw-px-3
+    @apply tw-flex tw-items-center tw-w-full tw-px-6 tw-py-3
       tw-cursor-pointer tw-transition-colors
       hover:tw-bg-[color:var(--menu-item-bg-hover)];
 

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

@@ -7,7 +7,7 @@
     ></div>
     <VcIcon
       v-else
-      icon="fas fa-user-circle"
+      icon="material-account_circle"
       class="vc-user-info__icon"
     />
     <Transition name="opacity">
@@ -59,7 +59,7 @@ const imageHandler = computed(() => {
 }
 
 .vc-user-info {
-  @apply tw-flex tw-items-center tw-gap-3;
+  @apply tw-flex tw-items-center tw-gap-3 tw-truncate;
 
   &__avatar {
     @apply tw-rounded-full tw-overflow-hidden tw-w-[var(--user-info-avatar-width)] tw-h-[var(--user-info-avatar-height)] tw-bg-[color:var(--user-dropdown-account-info-role-color)]
@@ -67,7 +67,7 @@ const imageHandler = computed(() => {
   }
 
   &__icon {
-    @apply tw-text-[color:var(--user-dropdown-button-color)] tw-text-[length:var(--user-info-avatar-height)];
+    @apply tw-text-[color:var(--user-dropdown-button-color)] tw-text-[length:var(--user-info-avatar-height)] #{!important};
   }
 
   &__info {
@@ -75,7 +75,7 @@ const imageHandler = computed(() => {
   }
 
   &__name {
-    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-max-w-[250px] tw-truncate;
+    @apply tw-text-sm tw-text-[color:var(--user-dropdown-account-info-name-color)] tw-max-w-[250px] tw-truncate tw-w-full;
   }
 
   &__role {

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

@@ -45,7 +45,7 @@ import { ref } from "vue";
 import type { IMenuItem } from "../../../core/types";
 import { default as UserInfo } from "./_internal/user-info.vue";
 import { default as UserSidebar } from "./_internal/user-sidebar.vue";
-import { useMenuExpanded } from "../../../shared/composables/useMenuExpanded";
+import { useMenuExpanded } from "../../../shared/composables";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
@@ -78,7 +78,7 @@ function handleClick() {
   --user-dropdown-button-bg-logout: var(--danger-500);
   --user-dropdown-button-bg-logout-hover: var(--danger-700);
   --user-dropdown-button-icon-color: var(--additional-50);
-  --user-dropdown-account-info-name-color: var(--base-text-color, var(--neutrals-950));
+  --user-dropdown-account-info-name-color: var(--neutrals-950);
   --user-dropdown-account-info-role-color: var(--secondary-600);
   --user-dropdown-border-color: var(--app-bar-divider-color);
   --user-dropdown-button-color: var(--primary-500);

package/shared/composables/index.ts

@@ -0,0 +1 @@
+export * from "./useMenuExpanded";

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

@@ -53,7 +53,7 @@
                           >
                         </div>
                         <VcButton
-                          icon="far fa-copy"
+                          icon="material-content_copy"
                           icon-size="m"
                           class="tw-ml-2"
                           text
@@ -174,7 +174,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "save",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.SAVE"),
-    icon: "fas fa-save",
+    icon: "material-save",
     async clickHandler() {
       if (props.options?.assetEditHandler && typeof props.options?.assetEditHandler === "function") {
         await props.options?.assetEditHandler(defaultAsset.value);
@@ -186,7 +186,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "delete",
     title: t("ASSETS.PAGES.DETAILS.TOOLBAR.DELETE"),
-    icon: "fas fa-trash",
+    icon: "material-delete",
     async clickHandler() {
       if (props.options?.assetRemoveHandler && typeof props.options?.assetRemoveHandler === "function") {
         await props.options?.assetRemoveHandler(defaultAsset.value);
@@ -220,7 +220,7 @@ function openLink(link: string | undefined) {
 
 <style lang="scss">
 :root {
-  --assets-details-border: var(--base-border-color, var(--neutrals-200));
+  --assets-details-border: var(--neutrals-200);
   --assets-details-thumbnail-color: var(--secondary-500);
 }
 </style>

package/shared/modules/assets/components/assets-details/index.ts

@@ -1 +1,3 @@
-export { default as AssetsDetails } from "./assets-details.vue";
+import _AssetsDetails from "./assets-details.vue";
+
+export const AssetsDetails = _AssetsDetails as typeof _AssetsDetails;

package/shared/modules/assets/index.ts

@@ -9,4 +9,4 @@ declare module "@vue/runtime-core" {
 
 export const AssetsDetailsModule = createAppModule(components);
 
-export * from "./components";
+export default components;

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

@@ -16,6 +16,7 @@
       @dragleave.prevent="dragLeave"
       @drop.prevent.stop="onDrop"
     >
+      <!-- @vue-generic {ICommonAsset} -->
       <VcTable
         :columns="columns"
         :expanded="expanded"
@@ -37,7 +38,7 @@
           <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center">
             <template v-if="!readonly">
               <VcIcon
-                icon="fas fa-cloud-upload-alt"
+                icon="material-cloud_upload"
                 class="tw-text-[100px] tw-text-[color:var(--assets-manager-empty-icon-color)]"
               ></VcIcon>
               <div class="tw-m-4 tw-text-l tw-font-medium tw-text-center">
@@ -209,7 +210,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "add",
     title: computed(() => t("ASSETS_MANAGER.TOOLBAR.ADD")),
-    icon: "fas fa-plus",
+    icon: "material-add",
     clickHandler() {
       toggleUploader();
     },
@@ -219,7 +220,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
   {
     id: "delete",
     title: computed(() => t("ASSETS_MANAGER.TOOLBAR.DELETE")),
-    icon: "fas fa-trash",
+    icon: "material-delete",
     async clickHandler() {
       if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
         defaultAssets.value = await props.options.assetsRemoveHandler(selectedItems.value);
@@ -389,7 +390,7 @@ const actionBuilder = (): IActionBuilderResult<ICommonAsset>[] => {
   const result: IActionBuilderResult<ICommonAsset>[] = [];
 
   result.push({
-    icon: "fas fa-trash",
+    icon: "material-delete",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
     type: "danger",
     async clickHandler(item: ICommonAsset) {

package/shared/modules/dynamic/components/fields/storybook/Button.stories.ts

@@ -176,11 +176,11 @@ Text.args = {
 
 export const Icon = Template.bind({});
 Icon.args = {
-  icon: "fas fa-truck-moving",
+  icon: "material-delivery_truck_speed",
 };
 
 export const IconSize = Template.bind({});
 IconSize.args = {
-  icon: "fas fa-truck-moving",
+  icon: "material-delivery_truck_speed",
   iconSize: "xxl",
 };