@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,51 +0,0 @@
-<template>
-  <SettingsMenuItem
-    ref="menuItemRef"
-    icon="material-palette"
-    :title="$t('COMPONENTS.THEME_SELECTOR.THEME_SELECTOR')"
-    :value="currentLocalizedName"
-    :show-chevron="true"
-    :is-active="isSubMenuOpen"
-    @trigger:click="isSubMenuOpen = !isSubMenuOpen"
-  />
-
-  <VcDropdownPanel
-    v-model:show="isSubMenuOpen"
-    :anchor-ref="menuItemRef?.triggerRef ?? null"
-    placement="right-start"
-    width="180px"
-    max-width="260px"
-  >
-    <div class="tw-p-1">
-      <VcDropdownItem
-        v-for="theme in themes"
-        :key="theme.key"
-        :title="theme.name"
-        :active="theme.key === currentThemeKey"
-        @click="handleThemeSelect(theme)"
-      />
-    </div>
-  </VcDropdownPanel>
-</template>
-
-<script lang="ts" setup>
-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/molecules/vc-dropdown-panel";
-import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
-
-const { currentThemeKey, currentLocalizedName, themes, setTheme } = useTheme();
-const isSubMenuOpen = ref(false);
-const menuItemRef = ref<InstanceType<typeof SettingsMenuItem> | null>(null);
-
-const handleThemeSelect = (theme: { key: string; name: string }) => {
-  setTheme(theme.key);
-  isSubMenuOpen.value = false;
-
-  if (currentLocalizedName.value) {
-    notification(currentLocalizedName.value);
-  }
-};
-</script>

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

@@ -1,114 +0,0 @@
-<template>
-  <div class="vc-user-info">
-    <div
-      v-if="avatarUrl"
-      class="vc-user-info__avatar"
-      :style="imageHandler"
-    ></div>
-    <div
-      v-else
-      class="vc-user-info__avatar-fallback"
-    >
-      <VcIcon
-        icon="lucide-circle-user"
-        size="l"
-      />
-    </div>
-    <Transition name="opacity">
-      <div
-        v-show="isExpanded || $isMobile.value"
-        class="vc-user-info__info"
-      >
-        <div class="vc-user-info__name">
-          {{ name || (user && "fullName" in user && user.fullName) || user?.userName }}
-        </div>
-        <div class="vc-user-info__role">
-          {{
-            role
-              ? $te(`SHELL.USER.ROLE.${role}`)
-                ? $t(`SHELL.USER.ROLE.${role}`)
-                : role
-              : user?.isAdministrator
-                ? $t("SHELL.USER.ROLE.ADMINISTRATOR")
-                : ""
-          }}
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from "vue";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-
-export interface Props {
-  avatarUrl?: string;
-  name?: string;
-  role?: string;
-  isExpanded?: boolean;
-}
-
-const props = defineProps<Props>();
-const { user } = useUserManagement();
-
-const imageHandler = computed(() => {
-  if (props.avatarUrl) {
-    return `background-image: url(${CSS.escape(props.avatarUrl)})`;
-  }
-  return undefined;
-});
-</script>
-
-<style lang="scss">
-:root {
-  --user-info-avatar-size: 32px;
-}
-
-.vc-user-info {
-  @apply tw-flex tw-items-center tw-gap-2.5 tw-truncate tw-w-full;
-  @apply tw-overflow-visible #{!important};
-
-  &__avatar {
-    @apply tw-rounded-lg tw-overflow-hidden tw-bg-cover tw-bg-center tw-shrink-0;
-    width: var(--user-info-avatar-size);
-    height: var(--user-info-avatar-size);
-    background-color: var(--user-dropdown-account-info-role-color);
-  }
-
-  &__avatar-fallback {
-    @apply tw-rounded-lg tw-shrink-0 tw-flex tw-items-center tw-justify-center;
-    width: var(--user-info-avatar-size);
-    height: var(--user-info-avatar-size);
-    background: var(--neutrals-100, #f5f5f5);
-    color: var(--neutrals-400, #a3a3a3);
-  }
-
-  &__info {
-    @apply tw-grow tw-basis-0 tw-overflow-hidden tw-flex tw-flex-col tw-items-start;
-  }
-
-  &__name {
-    @apply tw-font-semibold tw-truncate tw-w-full tw-text-left tw-max-w-[250px];
-    font-size: 13px;
-    color: var(--neutrals-800, #262626);
-  }
-
-  &__role {
-    @apply tw-truncate tw-text-left tw-w-full tw-max-w-[250px];
-    font-size: 11px;
-    color: var(--neutrals-400, #a3a3a3);
-  }
-}
-
-.opacity-enter-active,
-.opacity-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.opacity-enter-from,
-.opacity-leave-to {
-  opacity: 0;
-}
-</style>

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

@@ -1,50 +0,0 @@
-<template>
-  <VcSidebar
-    :model-value="isOpened"
-    position="left"
-    :teleport="!isDesktop"
-    :title="$t('SHELL.ACCOUNT.SETTINGS')"
-    @update:model-value="$emit('update:isOpened', $event)"
-  >
-    <div
-      v-if="isOpened"
-      class="vc-user-sidebar__menu"
-      @click.stop="$emit('update:isOpened', false)"
-    >
-      <SettingsMenu />
-    </div>
-  </VcSidebar>
-</template>
-
-<script lang="ts" setup>
-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/organisms/vc-sidebar";
-
-defineProps<{
-  isOpened: boolean;
-}>();
-
-defineEmits<{
-  (e: "update:isOpened", value: boolean): void;
-  (e: "item:click", item: IMenuItem): void;
-}>();
-
-const isDesktop = inject(IsDesktopKey, ref(false));
-</script>
-
-<style lang="scss">
-.vc-user-sidebar {
-  &__menu {
-    @apply tw-w-full tw-flex tw-flex-col;
-  }
-
-  .vc-app--mobile & {
-    &__menu {
-      @apply tw-static tw-shadow-none #{!important};
-    }
-  }
-}
-</style>

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

@@ -1,10 +0,0 @@
-import _UserDropdownButton from "@shared/components/user-dropdown-button/user-dropdown-button.vue";
-
-export const UserDropdownButton = _UserDropdownButton as typeof _UserDropdownButton;
-
-// Declare globally
-declare module "@vue/runtime-core" {
-  export interface GlobalComponents {
-    UserDropdownButton: typeof UserDropdownButton;
-  }
-}

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

@@ -1,153 +0,0 @@
-import { defineComponent, onUnmounted } from "vue";
-import type { Meta, StoryObj } from "@storybook/vue3-vite";
-import UserDropdownButton from "@shared/components/user-dropdown-button/user-dropdown-button.vue";
-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/popup-handler";
-import { withMobileView } from "../../../../.storybook/decorators";
-import { provideSettingsMenu } from "@core/composables/useSettingsMenu";
-import { provideSidebarState } from "@core/composables/useSidebarState";
-import { useUserManagement } from "@core/composables/useUserManagement";
-import { useRouter } from "vue-router";
-import { IdentityResult, SecurityResult } from "@core/api/platform";
-
-const MENU_ITEM_IDS = [
-  "story-user-theme-selector",
-  "story-user-language-selector",
-  "story-user-change-password",
-  "story-user-logout",
-] as const;
-
-function setupSettingsMenu() {
-  const settingsMenu = provideSettingsMenu();
-
-  MENU_ITEM_IDS.forEach((id) => settingsMenu.unregister(id));
-
-  settingsMenu.register({
-    id: "story-user-theme-selector",
-    group: "preferences",
-    order: 10,
-    component: ThemeSelector,
-  });
-  settingsMenu.register({
-    id: "story-user-language-selector",
-    group: "preferences",
-    order: 20,
-    component: LanguageSelector,
-  });
-  settingsMenu.register({
-    id: "story-user-change-password",
-    group: "account",
-    order: 30,
-    component: ChangePasswordButton,
-  });
-  settingsMenu.register({
-    id: "story-user-logout",
-    group: "account",
-    order: 100,
-    component: LogoutButton,
-  });
-
-  onUnmounted(() => {
-    MENU_ITEM_IDS.forEach((id) => settingsMenu.unregister(id));
-  });
-}
-
-function patchUserManagement() {
-  const userManagement = useUserManagement();
-  const originalSignOut = userManagement.signOut;
-  const originalValidatePassword = userManagement.validatePassword;
-  const originalChangeUserPassword = userManagement.changeUserPassword;
-
-  userManagement.signOut = async () => {};
-  userManagement.validatePassword = async () =>
-    new IdentityResult({
-      succeeded: true,
-      errors: [],
-    });
-  userManagement.changeUserPassword = async () =>
-    new SecurityResult({
-      succeeded: true,
-      errors: [],
-    });
-
-  onUnmounted(() => {
-    userManagement.signOut = originalSignOut;
-    userManagement.validatePassword = originalValidatePassword;
-    userManagement.changeUserPassword = originalChangeUserPassword;
-  });
-}
-
-function ensureLoginRoute() {
-  const router = useRouter();
-
-  if (!router.hasRoute("Login")) {
-    router.addRoute({
-      name: "Login",
-      path: "/login",
-      component: defineComponent({
-        name: "StorybookLoginPage",
-        template: "<div />",
-      }),
-    });
-  }
-}
-
-const meta = {
-  title: "Shared/UserDropdownButton",
-  component: UserDropdownButton,
-  tags: ["autodocs"],
-  args: {
-    name: "Emma Collins",
-    role: "Vendor Manager",
-    avatarUrl: "https://i.pravatar.cc/64?img=12",
-    disabled: false,
-  },
-  decorators: [
-    () => ({
-      components: { VcPopupContainer },
-      setup() {
-        provideSidebarState();
-        setupSettingsMenu();
-        patchUserManagement();
-        ensureLoginRoute();
-      },
-      template: `
-        <div class="tw-w-[320px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50">
-          <story />
-          <VcPopupContainer />
-        </div>
-      `,
-    }),
-  ],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "User account trigger used in shell sidebar/footer. Opens settings menu on desktop and sidebar variant on mobile. Story registers real menu items through settings-menu service.",
-      },
-    },
-  },
-} satisfies Meta<typeof UserDropdownButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Desktop: Story = {};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Mobile: Story = {
-  decorators: [withMobileView],
-  parameters: {
-    viewport: {
-      defaultViewport: "mobile1",
-    },
-  },
-};

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

@@ -1,142 +0,0 @@
-<template>
-  <div class="vc-user-dropdown-button-container">
-    <button
-      ref="buttonRef"
-      type="button"
-      class="vc-user-dropdown-button"
-      :class="{
-        'vc-user-dropdown-button--active': isMenuOpened,
-        'vc-user-dropdown-button--auto-width': disabled,
-        'vc-user-dropdown-button--mobile': $isMobile.value,
-        'vc-user-dropdown-button--collapsed': !isPinned && $isDesktop.value,
-      }"
-      @click="handleClick"
-    >
-      <div
-        class="vc-user-dropdown-button__wrap"
-        :class="{
-          'vc-user-dropdown-button__wrap--active': isMenuOpened,
-        }"
-      >
-        <UserInfo
-          :avatar-url="avatarUrl"
-          :name="name"
-          :role="role"
-          :is-expanded="isExpanded"
-        />
-        <div class="vc-user-dropdown-button__actions">
-          <div class="vc-user-dropdown-button__trigger"></div>
-        </div>
-      </div>
-    </button>
-
-    <!-- Desktop: floating dropdown panel -->
-    <VcDropdownPanel
-      v-if="$isDesktop.value"
-      v-model:show="isMenuOpened"
-      :anchor-ref="buttonRef"
-      placement="right"
-      width="260px"
-      max-width="300px"
-    >
-      <SettingsMenu />
-    </VcDropdownPanel>
-
-    <!-- Mobile: full sidebar fallback -->
-    <UserSidebar
-      v-else
-      v-model:is-opened="isMenuOpened"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, provide } from "vue";
-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/molecules/vc-dropdown-panel";
-import { useSidebarState } from "@core/composables/useSidebarState";
-
-export interface Props {
-  avatarUrl?: string | undefined;
-  name?: string | undefined;
-  role?: string | undefined;
-  disabled?: boolean;
-}
-
-defineProps<Props>();
-
-const isMenuOpened = ref(false);
-const buttonRef = ref<HTMLElement | null>(null);
-const { isPinned, isExpanded } = useSidebarState();
-
-function closeMenu() {
-  isMenuOpened.value = false;
-}
-
-provide(CloseSettingsMenuKey, closeMenu);
-
-function handleClick() {
-  isMenuOpened.value = !isMenuOpened.value;
-}
-</script>
-
-<style lang="scss">
-:root {
-  --user-dropdown-height: 54px;
-  --user-dropdown-button-bg: var(--primary-500);
-  --user-dropdown-button-bg-hover: var(--primary-700);
-  --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(--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);
-  --user-dropdown-wrap-bg: var(--neutrals-50);
-  --user-dropdown-border-color: var(--neutrals-200);
-  --user-dropdown-wrap-padding-left: 18px;
-}
-
-.vc-user-dropdown-button-container {
-  @apply tw-flex tw-flex-col;
-}
-
-.vc-user-dropdown-button {
-  @apply tw-w-full tw-cursor-pointer tw-relative tw-flex tw-h-[var(--user-dropdown-height)] tw-flex-col tw-select-none tw-overflow-hidden tw-border-solid tw-border-t tw-border-t-[var(--user-dropdown-border-color)] tw-pl-[var(--user-dropdown-wrap-padding-left)];
-
-  &:hover {
-    .vc-user-dropdown-button__trigger {
-      @apply tw-visible tw-translate-x-0;
-    }
-  }
-
-  .vc-app--mobile & {
-    @apply tw-w-full #{!important};
-  }
-
-  &--mobile {
-  }
-
-  &--auto-width {
-    @apply tw-w-auto;
-  }
-
-  &__wrap {
-    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
-  }
-
-  &--collapsed {
-  }
-
-  &__actions {
-    @apply tw-h-full;
-  }
-
-  &__trigger {
-    @apply tw-invisible tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-1 tw-bg-[--user-dropdown-button-bg] tw-translate-x-full tw-transition-all tw-duration-300 tw-ease-in-out;
-  }
-}
-</style>

package/shared/composables/index.ts

@@ -1,5 +0,0 @@
-export * from "@shared/composables/useMenuExpanded";
-export * from "@shared/composables/useModificationTracker";
-export * from "@shared/composables/useTableSort";
-export * from "@shared/composables/useTableSelection";
-export * from "@shared/composables/useExternalWidgets";

package/shared/composables/useExternalWidgets.ts

@@ -1,107 +0,0 @@
-import { computed, inject, onMounted, onUnmounted, watch, toValue, Ref, ComputedRef } from "vue";
-import { WidgetServiceKey, BladeInstance } from "@framework/injection-keys";
-import { IWidget } from "@core/services/widget-service";
-import { useBlade } from "@core/composables/useBlade";
-import { createLogger } from "@core/utilities";
-
-const logger = createLogger("use-external-widgets");
-
-export interface UseExternalWidgetsOptions {
-  bladeId: Ref<string> | string;
-  bladeData: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>;
-}
-
-export function useExternalWidgets(options: UseExternalWidgetsOptions) {
-  const { bladeId, bladeData } = options;
-
-  const widgetService = inject(WidgetServiceKey);
-  const blade = useBlade();
-
-  // Normalize bladeId to lowercase for consistency
-  const normalizedBladeId = computed(() => blade?.value.id?.toLowerCase() ?? "");
-
-  const registeredExternalWidgetIds = new Set<string>();
-
-  const registerExternalWidgets = () => {
-    if (!widgetService || !blade?.value.id) {
-      logger.warn("Widget service or blade instance not available");
-      return;
-    }
-
-    const allExternalWidgets = widgetService.getAllExternalWidgets();
-    const targetBladeId = toValue(bladeId);
-
-    const filteredWidgets = allExternalWidgets.filter(
-      (widget) => widget.targetBlades?.includes(targetBladeId) ?? false,
-    );
-
-    filteredWidgets.forEach((externalWidget) => {
-      if (registeredExternalWidgetIds.has(externalWidget.id)) {
-        return;
-      }
-
-      const widgetClone = widgetService.cloneWidget(externalWidget);
-
-      const newWidget: IWidget = {
-        ...widgetClone,
-        props: widgetService.resolveWidgetProps(widgetClone, toValue(bladeData)),
-      };
-
-      try {
-        widgetService.registerWidget(newWidget, normalizedBladeId.value);
-        registeredExternalWidgetIds.add(externalWidget.id);
-      } catch (error) {
-        logger.error(`Failed to register external widget '${externalWidget.id}':`, error);
-      }
-    });
-  };
-
-  const updateWidgetProps = () => {
-    if (!widgetService || !blade?.value.id) return;
-
-    registeredExternalWidgetIds.forEach((widgetId) => {
-      const widget = widgetService.getWidgets(normalizedBladeId.value).find((w) => w.id === widgetId);
-
-      if (widget) {
-        try {
-          const resolvedProps = widgetService.resolveWidgetProps(widget, toValue(bladeData));
-          widgetService.updateWidget({
-            id: widget.id,
-            bladeId: blade.value.id,
-            widget: { props: resolvedProps },
-          });
-        } catch (error) {
-          logger.error(`Failed to update props for widget '${widget.id}':`, error);
-        }
-      }
-    });
-  };
-
-  const unregisterExternalWidgets = () => {
-    if (!widgetService || !normalizedBladeId.value) return;
-
-    registeredExternalWidgetIds.forEach((widgetId) => {
-      try {
-        widgetService.unregisterWidget(widgetId, normalizedBladeId.value);
-      } catch (error) {
-        logger.error(`Failed to unregister external widget '${widgetId}':`, error);
-      }
-    });
-    registeredExternalWidgetIds.clear();
-  };
-
-  onMounted(registerExternalWidgets);
-  onUnmounted(unregisterExternalWidgets);
-
-  watch(
-    () => toValue(bladeData),
-    () => {
-      updateWidgetProps();
-    },
-    { deep: true },
-  );
-
-  return {
-    registeredExternalWidgetIds: computed(() => Array.from(registeredExternalWidgetIds)),
-  };
-}

package/shared/composables/useMenuExpanded.ts

@@ -1,64 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import { ref, onScopeDispose } from "vue";
-
-const STORAGE_KEY_PREFIX = "VC_APP_MENU_EXPANDED";
-const HOVER_DELAY = 200;
-
-/**
- * Get unique storage key for current application based on URL path
- * This ensures each application has its own menu state
- */
-function getStorageKey(): string {
-  // Extract app name from pathname (e.g., "/vendor-portal/" -> "vendor-portal")
-  const pathSegments = window.location.pathname.split("/").filter(Boolean);
-  const appName = pathSegments[0] || "default";
-  return `${STORAGE_KEY_PREFIX}_${appName}`;
-}
-
-export const useMenuExpanded = () => {
-  const isExpanded = useLocalStorage(getStorageKey(), true);
-  const isHoverExpanded = ref(false);
-
-  let expandTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  const toggleExpanded = () => {
-    isExpanded.value = !isExpanded.value;
-  };
-
-  const toggleHoverExpanded = (shouldExpand?: boolean) => {
-    if (expandTimeout) {
-      clearTimeout(expandTimeout);
-    }
-
-    if (shouldExpand) {
-      expandTimeout = setTimeout(() => {
-        if (isHoverExpanded.value !== shouldExpand) {
-          isHoverExpanded.value = shouldExpand;
-        }
-      }, HOVER_DELAY);
-    } else if (shouldExpand === false) {
-      isHoverExpanded.value = shouldExpand;
-    }
-  };
-
-  /**
-   * Cleanup timeout when the effect scope is disposed
-   * This prevents memory leaks when component using this composable is unmounted
-   */
-  const cleanup = () => {
-    if (expandTimeout) {
-      clearTimeout(expandTimeout);
-      expandTimeout = null;
-    }
-  };
-
-  // Register cleanup function to be called when effect scope is disposed
-  onScopeDispose(cleanup);
-
-  return {
-    isExpanded,
-    toggleExpanded,
-    isHoverExpanded,
-    toggleHoverExpanded,
-  };
-};