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

package/shared/components/draggable-dashboard/draggable-dashboard.stories.ts

@@ -0,0 +1,175 @@
+import { defineComponent, markRaw, onUnmounted } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import DraggableDashboard from "@shared/components/draggable-dashboard/DraggableDashboard.vue";
+import { provideDashboardService } from "@core/composables/useDashboard";
+import { LAYOUT_STORAGE_KEY } from "@shared/components/draggable-dashboard";
+
+const MetricWidget = defineComponent({
+  name: "MetricWidget",
+  props: {
+    title: { type: String, required: true },
+    value: { type: [String, Number], required: true },
+    subtitle: { type: String, default: "" },
+  },
+  template: `
+    <div class="tw-h-full tw-w-full tw-rounded-md tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4 tw-flex tw-flex-col tw-justify-between">
+      <p class="tw-m-0 tw-text-sm tw-text-neutrals-500">{{ title }}</p>
+      <p class="tw-m-0 tw-text-4xl tw-font-semibold tw-text-neutrals-950">{{ value }}</p>
+      <p class="tw-m-0 tw-text-xs tw-text-success-500">{{ subtitle }}</p>
+    </div>
+  `,
+});
+
+const ListWidget = defineComponent({
+  name: "ListWidget",
+  props: {
+    title: { type: String, required: true },
+    items: { type: Array as () => string[], default: () => [] },
+  },
+  template: `
+    <div class="tw-h-full tw-w-full tw-rounded-md tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-4 tw-flex tw-flex-col">
+      <p class="tw-m-0 tw-mb-3 tw-text-sm tw-font-medium tw-text-neutrals-700">{{ title }}</p>
+      <ul class="tw-m-0 tw-list-none tw-p-0 tw-space-y-2 tw-overflow-auto">
+        <li
+          v-for="item in items"
+          :key="item"
+          class="tw-rounded tw-bg-neutrals-100 tw-px-2 tw-py-1 tw-text-xs tw-text-neutrals-700"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+  `,
+});
+
+function registerStoryWidgets() {
+  const dashboard = provideDashboardService();
+  const existingIds = new Set(dashboard.getWidgets().map((widget) => widget.id));
+
+  const widgets = [
+    {
+      id: "story-orders",
+      name: "Orders",
+      component: markRaw(MetricWidget),
+      size: { width: 4, height: 3 },
+      position: { x: 0, y: 0 },
+      props: {
+        title: "Orders today",
+        value: "148",
+        subtitle: "+12.4% vs yesterday",
+      },
+    },
+    {
+      id: "story-revenue",
+      name: "Revenue",
+      component: markRaw(MetricWidget),
+      size: { width: 4, height: 3 },
+      position: { x: 4, y: 0 },
+      props: {
+        title: "Revenue",
+        value: "$12,480",
+        subtitle: "+8.1% this week",
+      },
+    },
+    {
+      id: "story-alerts",
+      name: "Alerts",
+      component: markRaw(ListWidget),
+      size: { width: 4, height: 3 },
+      position: { x: 8, y: 0 },
+      props: {
+        title: "Needs attention",
+        items: [
+          "4 offers waiting approval",
+          "2 shipments delayed",
+          "1 product requires changes",
+        ],
+      },
+    },
+    {
+      id: "story-top-products",
+      name: "Top Products",
+      component: markRaw(ListWidget),
+      size: { width: 6, height: 4 },
+      position: { x: 0, y: 3 },
+      props: {
+        title: "Top products this week",
+        items: [
+          "Cotton Hoodie",
+          "Winter Sneakers",
+          "Sports Bottle",
+          "Travel Backpack",
+          "Sunglasses",
+        ],
+      },
+    },
+    {
+      id: "story-funnel",
+      name: "Funnel",
+      component: markRaw(MetricWidget),
+      size: { width: 6, height: 4 },
+      position: { x: 6, y: 3 },
+      props: {
+        title: "Conversion",
+        value: "4.8%",
+        subtitle: "Checkout completion rate",
+      },
+    },
+  ];
+
+  widgets.forEach((widget) => {
+    if (!existingIds.has(widget.id)) {
+      dashboard.registerWidget(widget);
+    }
+  });
+}
+
+const meta = {
+  title: "Shared/DraggableDashboard",
+  component: DraggableDashboard,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        localStorage.removeItem(LAYOUT_STORAGE_KEY);
+        registerStoryWidgets();
+        onUnmounted(() => localStorage.removeItem(LAYOUT_STORAGE_KEY));
+      },
+      template: `
+        <div class="tw-h-[720px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-neutrals-100 tw-overflow-hidden">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  args: {
+    showDragHandles: false,
+    resizable: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Shared dashboard container used by shell and vendor portal. Story reproduces a realistic widget composition and demonstrates drag/reorder behavior with persisted layout.",
+      },
+    },
+  },
+} satisfies Meta<typeof DraggableDashboard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const DefaultLayout: Story = {};
+
+export const WithDragHandles: Story = {
+  args: {
+    showDragHandles: true,
+  },
+};
+
+export const ResizableWidgets: Story = {
+  args: {
+    showDragHandles: true,
+    resizable: true,
+  },
+};

package/shared/components/draggable-dashboard/index.ts

@@ -1,5 +1,5 @@
 // Main component
-export { default as DraggableDashboard } from "./DraggableDashboard.vue";
+export { default as DraggableDashboard } from "@shared/components/draggable-dashboard/DraggableDashboard.vue";
 
 // Types
 export type {
@@ -8,11 +8,11 @@ export type {
   DashboardWidgetSize,
   DashboardDragEvent,
   DashboardGridConfig,
-} from "./types";
+} from "@shared/components/draggable-dashboard/types";
 
 // Gridstack composables (for advanced usage)
-export { useGridstack } from "./composables/useGridstack";
-export type { UseGridstackOptions, UseGridstackReturn } from "./composables/useGridstack";
+export { useGridstack } from "@shared/components/draggable-dashboard/composables/useGridstack";
+export type { UseGridstackOptions, UseGridstackReturn } from "@shared/components/draggable-dashboard/composables/useGridstack";
 
 // Import and re-export to avoid Storybook docgen issues with direct re-exports
 import {
@@ -23,7 +23,7 @@ import {
   mergeLayoutWithWidgets as _mergeLayoutWithWidgets,
   clearLayoutStorage as _clearLayoutStorage,
   LAYOUT_STORAGE_KEY as _LAYOUT_STORAGE_KEY,
-} from "./composables/useGridstackAdapter";
+} from "@shared/components/draggable-dashboard/composables/useGridstackAdapter";
 
 export const toGridstackWidget = _toGridstackWidget;
 export const fromGridstackNode = _fromGridstackNode;

package/shared/components/error-interceptor/index.ts

@@ -1,6 +1,6 @@
 import { VNode } from "vue";
-import _Interceptor from "./interceptor";
-import { DisplayableError } from "../../../core/utilities/error";
+import _Interceptor from "@shared/components/error-interceptor/interceptor";
+import { DisplayableError } from "@core/utilities/error";
 
 export const ErrorInterceptor = _Interceptor as typeof _Interceptor & {
   new (): {

package/shared/components/error-interceptor/interceptor.ts

@@ -1,4 +1,4 @@
-import { useErrorHandler } from "./../../../core/composables";
+import { useErrorHandler } from "@core/composables";
 import { defineComponent, VNode } from "vue";
 
 export interface Props {

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

@@ -58,7 +58,7 @@
 </template>
 
 <script lang="ts" setup generic="T">
-import { VcDropdown } from "../../../ui/components";
+import { VcDropdown } from "@ui/components";
 
 export interface Props<T> {
   opened?: boolean;

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

@@ -1,4 +1,4 @@
-import GenericDropdownComponent from "./generic-dropdown.vue";
+import GenericDropdownComponent from "@shared/components/generic-dropdown/generic-dropdown.vue";
 
 /**
  * @deprecated Use `VcDropdown` from `framework/ui/components` instead.

package/shared/components/index.ts

@@ -1,26 +1,26 @@
-export * from "./app-switcher";
-export * from "./blade-navigation";
-export * from "./notifications";
-export * from "./error-interceptor";
-export * from "./popup-handler";
-export * from "./change-password";
-export * from "./language-selector";
-export * from "./user-dropdown-button";
-export * from "./notification-dropdown";
-export * from "./notification-template";
+export * from "@shared/components/app-switcher";
+export * from "@shared/components/blade-navigation";
+export * from "@shared/components/notifications";
+export * from "@shared/components/error-interceptor";
+export * from "@shared/components/popup-handler";
+export * from "@shared/components/change-password";
+export * from "@shared/components/language-selector";
+export * from "@shared/components/user-dropdown-button";
+export * from "@shared/components/notification-dropdown";
+export * from "@shared/components/notification-template";
 /**
  * @deprecated Use `VcSidebar` from `framework/ui/components` instead.
  */
-export { Sidebar } from "./sidebar";
-export * from "./theme-selector";
-export * from "./sign-in";
-export * from "./settings-menu-item";
+export { Sidebar } from "@shared/components/sidebar";
+export * from "@shared/components/theme-selector";
+export * from "@shared/components/sign-in";
+export * from "@shared/components/settings-menu-item";
 /**
  * @deprecated Use `VcDropdown` from `framework/ui/components` instead.
  */
-export { GenericDropdown } from "./generic-dropdown";
-export * from "./draggable-dashboard";
-export * from "./dashboard-widget-card";
-export * from "./multilanguage-selector";
+export { GenericDropdown } from "@shared/components/generic-dropdown";
+export * from "@shared/components/draggable-dashboard";
+export * from "@shared/components/dashboard-widget-card";
+export * from "@shared/components/multilanguage-selector";
 // ai-agent-panel is now part of the ai-agent plugin
 // export * from "./core/plugins/ai-agent";

package/shared/components/language-selector/index.ts

@@ -1,4 +1,4 @@
-import _LanguageSelector from "./language-selector.vue";
+import _LanguageSelector from "@shared/components/language-selector/language-selector.vue";
 
 export const LanguageSelector = _LanguageSelector as typeof _LanguageSelector;
 

package/shared/components/language-selector/language-selector.stories.ts

@@ -0,0 +1,44 @@
+import { onUnmounted } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import LanguageSelector from "@shared/components/language-selector/language-selector.vue";
+import { useLanguages } from "@core/composables/useLanguages";
+
+const meta = {
+  title: "Shared/LanguageSelector",
+  component: LanguageSelector,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      template: `
+        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-1">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Settings menu entry for language switching. Uses framework language service and global i18n locale list.",
+      },
+    },
+  },
+} satisfies Meta<typeof LanguageSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const GermanPreset: Story = {
+  render: () => ({
+    components: { LanguageSelector },
+    setup() {
+      const { setLocale } = useLanguages();
+      setLocale("de");
+      onUnmounted(() => setLocale("en"));
+    },
+    template: `<LanguageSelector />`,
+  }),
+};

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

@@ -1,68 +1,52 @@
 <template>
-  <SettingsMenuItem @trigger:click="opened = !opened">
-    <template #trigger>
-      <div class="vc-language-selector__trigger">
-        <VcImage
-          v-if="currLocaleFlag"
-          :src="currLocaleFlag"
-          class="vc-language-selector__flag"
-        />
-        <VcIcon
-          v-else
-          icon="material-language"
-          class="vc-language-selector__flag"
-          size="m"
-        />
-        <span class="vc-language-selector__title">
-          {{ $t("COMPONENTS.LANGUAGE_SELECTOR.TITLE") }}
-        </span>
-      </div>
-    </template>
+  <SettingsMenuItem
+    ref="menuItemRef"
+    icon="material-language"
+    :title="$t('COMPONENTS.LANGUAGE_SELECTOR.TITLE')"
+    :value="currentLanguageName"
+    :show-chevron="true"
+    :is-active="isSubMenuOpen"
+    @trigger:click="isSubMenuOpen = !isSubMenuOpen"
+  />
 
-    <template #content>
-      <VcDropdown
-        :model-value="opened"
-        :items="languageItems"
-        :is-item-active="(lang) => lang.lang === currentLocale"
-        @item-click="handleLanguageSelect"
-      >
-        <template #item="{ item: lang, click }">
-          <div
-            class="vc-language-selector__item"
-            :class="{ 'vc-language-selector__item--active': lang.lang === currentLocale }"
-            @click="click"
-          >
-            <VcImage
-              :src="lang.flag"
-              class="vc-language-selector__flag"
-            />
-            <span class="vc-language-selector__item-title">{{ lang.title }}</span>
-          </div>
-        </template>
-      </VcDropdown>
-    </template>
-  </SettingsMenuItem>
+  <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="lang in languageItems"
+        :key="lang.lang"
+        :title="lang.title"
+        :active="lang.lang === currentLocale"
+        @click="handleLanguageSelect(lang)"
+      />
+    </div>
+  </VcDropdownPanel>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useLanguages } from "../../../core/composables";
-import { watch, ref } from "vue";
-import { SettingsMenuItem } from "../settings-menu-item";
-import { VcDropdown, VcImage } from "../../../ui/components";
+import { useLanguages } from "@core/composables";
+import { ref, computed } from "vue";
+import { SettingsMenuItem } from "@shared/components/settings-menu-item";
+import { VcDropdownPanel } from "@ui/components";
+import VcDropdownItem from "@ui/components/molecules/vc-dropdown/_internal/VcDropdownItem.vue";
 
 interface ILanguage {
   lang: string;
   title: string;
   clickHandler: (lang: string) => void;
-  flag: string;
 }
 
-const { availableLocales, getLocaleMessage, locale } = useI18n({ useScope: "global" });
-const { setLocale, getFlag, currentLocale } = useLanguages();
+const { availableLocales, getLocaleMessage } = useI18n({ useScope: "global" });
+const { setLocale, currentLocale } = useLanguages();
 
-const opened = ref(false);
-const currLocaleFlag = ref<string>();
+const isSubMenuOpen = ref(false);
+const menuItemRef = ref<InstanceType<typeof SettingsMenuItem> | null>(null);
 
 const languageItems: ILanguage[] = availableLocales
   .map((locale: string) => ({
@@ -71,59 +55,18 @@ const languageItems: ILanguage[] = availableLocales
     async clickHandler(lang: string) {
       await setLocale(lang);
     },
-    flag: "",
   }))
   .filter((item) => item.title);
 
+const currentLanguageName = computed(() => {
+  const current = languageItems.find((l) => l.lang === currentLocale.value);
+  return current?.title;
+});
+
 const handleLanguageSelect = (lang: ILanguage) => {
   if (Object.prototype.hasOwnProperty.call(lang, "clickHandler")) {
     lang.clickHandler(lang.lang);
   }
-  opened.value = false;
+  isSubMenuOpen.value = false;
 };
-
-// Watch both i18n locale and currentLocale from language service
-watch(
-  [() => languageItems, () => locale.value, () => currentLocale.value],
-  async ([newValLangItem]) => {
-    for (const lang of newValLangItem) {
-      lang.flag = await getFlag(lang.lang);
-      // Use currentLocale from language service for consistency
-      if (lang.lang === currentLocale.value) {
-        currLocaleFlag.value = lang.flag;
-      }
-    }
-  },
-  { immediate: true },
-);
 </script>
-
-<style lang="scss">
-.vc-language-selector {
-  &__trigger {
-    @apply tw-flex tw-items-center tw-w-full;
-  }
-
-  &__flag {
-    @apply tw-w-6 tw-h-6 tw-mr-3;
-  }
-
-  &__title {
-    @apply tw-flex-grow;
-  }
-
-  &__item {
-    @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)];
-
-    &--active {
-      @apply tw-bg-[color:var(--menu-item-bg-active)];
-    }
-  }
-
-  &__item-title {
-    @apply tw-flex-grow;
-  }
-}
-</style>

package/shared/components/logout-button/index.ts

@@ -1 +1 @@
-export { default as LogoutButton } from "./logout-button.vue";
+export { default as LogoutButton } from "@shared/components/logout-button/logout-button.vue";

package/shared/components/logout-button/logout-button.stories.ts

@@ -0,0 +1,61 @@
+import { defineComponent, onUnmounted, provide } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import LogoutButton from "@shared/components/logout-button/logout-button.vue";
+import { useUserManagement } from "@core/composables/useUserManagement";
+import { CloseSettingsMenuKey } from "@framework/injection-keys";
+import { useRouter } from "vue-router";
+
+function patchLogoutFlow() {
+  const userManagement = useUserManagement();
+  const router = useRouter();
+
+  const originalSignOut = userManagement.signOut;
+  userManagement.signOut = async () => {};
+
+  if (!router.hasRoute("Login")) {
+    router.addRoute({
+      name: "Login",
+      path: "/login",
+      component: defineComponent({
+        name: "StorybookLoginPage",
+        template: "<div />",
+      }),
+    });
+  }
+
+  onUnmounted(() => {
+    userManagement.signOut = originalSignOut;
+  });
+}
+
+const meta = {
+  title: "Shared/LogoutButton",
+  component: LogoutButton,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        patchLogoutFlow();
+        provide(CloseSettingsMenuKey, () => {});
+      },
+      template: `
+        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-p-1">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Settings menu action for sign-out. Story patches user-management signOut with a no-op and ensures Login route exists, so click interactions stay local to Storybook.",
+      },
+    },
+  },
+} satisfies Meta<typeof LogoutButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/shared/components/logout-button/logout-button.vue

@@ -7,16 +7,20 @@
 </template>
 
 <script lang="ts" setup>
-import { SettingsMenuItem } from "../settings-menu-item";
-import { useUserManagement } from "../../../core/composables/useUserManagement";
+import { inject } from "vue";
+import { CloseSettingsMenuKey } from "@framework/injection-keys";
+import { SettingsMenuItem } from "@shared/components/settings-menu-item";
+import { useUserManagement } from "@core/composables/useUserManagement";
 import { useRouter } from "vue-router";
-import { useBladeNavigation } from "../blade-navigation";
+import { useBladeNavigation } from "@shared/components/blade-navigation";
 
 const { signOut } = useUserManagement();
 const router = useRouter();
 const { closeBlade } = useBladeNavigation();
+const closeSettingsMenu = inject(CloseSettingsMenuKey, undefined);
 
 const handleLogout = async () => {
+  closeSettingsMenu?.();
   const isPrevented = await closeBlade(0);
   if (!isPrevented) {
     await signOut();

package/shared/components/multilanguage-selector/index.ts

@@ -1 +1 @@
-export { default as VcLanguageSelector } from "./multilanguage-selector.vue";
+export { default as VcLanguageSelector } from "@shared/components/multilanguage-selector/multilanguage-selector.vue";