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

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";
 import {
   markRaw,
   getCurrentInstance,
@@ -13,14 +13,15 @@ import {
   unref,
   DefineComponent,
 } from "vue";
-import { PopupPlugin, UsePopupInternal, UsePopupProps } from "./../../types";
-import { popupPluginInstance } from "./../../plugin";
+import { PopupPluginKey } from "@shared/components/popup-handler/keys";
+import { PopupPlugin, UsePopupInternal, UsePopupProps } from "@shared/components/popup-handler/types";
+import { popupPluginInstance } from "@shared/components/popup-handler/plugin";
 import { useI18n } from "vue-i18n";
-import { ComponentPublicInstanceConstructor } from "../../../../utilities/vueUtils";
+import { ComponentPublicInstanceConstructor } from "@shared/utilities/vueUtils";
 import * as _ from "lodash-es";
-import vcPopupWarning from "../../../common/popup/vc-popup-warning.vue";
-import vcPopupError from "../../../common/popup/vc-popup-error.vue";
-import vcPopupInfo from "../../../common/popup/vc-popup-info.vue";
+import vcPopupWarning from "@shared/components/common/popup/vc-popup-warning.vue";
+import vcPopupError from "@shared/components/common/popup/vc-popup-error.vue";
+import vcPopupInfo from "@shared/components/common/popup/vc-popup-info.vue";
 interface IUsePopup {
   open(): void;
   close(): void;
@@ -31,7 +32,7 @@ interface IUsePopup {
 
 function usePopupInternal() {
   const instance = getCurrentInstance();
-  const popupInstance: PopupPlugin = (instance && inject("popupPlugin")) || popupPluginInstance;
+  const popupInstance: PopupPlugin = (instance && inject(PopupPluginKey, undefined)) || popupPluginInstance;
 
   return popupInstance;
 }

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

@@ -1,5 +1,5 @@
-import * as components from "./components";
-import { PopupPlugin } from "./types";
+import * as components from "@shared/components/popup-handler/components";
+import { PopupPlugin } from "@shared/components/popup-handler/types";
 
 // Declare globally
 declare module "@vue/runtime-core" {
@@ -12,8 +12,8 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export * from "./plugin";
-export * from "./components";
-export * from "./composables";
-export * from "./types";
-export * from "./utils";
+export * from "@shared/components/popup-handler/plugin";
+export * from "@shared/components/popup-handler/components";
+export * from "@shared/components/popup-handler/composables";
+export * from "@shared/components/popup-handler/types";
+export * from "@shared/components/popup-handler/utils";

package/shared/components/popup-handler/keys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue";
+import type { PopupPlugin } from "@shared/components/popup-handler/types";
+
+export const PopupPluginKey: InjectionKey<PopupPlugin> = Symbol("PopupPlugin");

package/shared/components/popup-handler/plugin.ts

@@ -1,7 +1,8 @@
 import { App, shallowReactive, DefineComponent } from "vue";
-import * as components from "./components";
-import { PopupPlugin, UsePopupProps, UsePopupInternal } from "./types";
-import { createModule } from "./../../../core/plugins";
+import * as components from "@shared/components/popup-handler/components";
+import { PopupPlugin, UsePopupProps, UsePopupInternal } from "@shared/components/popup-handler/types";
+import { PopupPluginKey } from "@shared/components/popup-handler/keys";
+import { createModule } from "@core/plugins";
 
 export let popupPluginInstance: PopupPlugin;
 
@@ -18,7 +19,7 @@ export const VcPopupHandler = {
     };
 
     app.config.globalProperties.$popupPlugin = popupPlugin;
-    app.provide("popupPlugin", popupPlugin);
+    app.provide(PopupPluginKey, popupPlugin);
     popupPluginInstance = popupPlugin;
   },
 };

package/shared/components/popup-handler/types/index.ts

@@ -1,5 +1,5 @@
 import { Component, DefineComponent, Slot as VueSlot } from "vue";
-import { ComponentPublicInstanceConstructor, ComponentEmit } from "../../../utilities/vueUtils";
+import { ComponentPublicInstanceConstructor, ComponentEmit } from "@shared/utilities/vueUtils";
 
 export type RawProps<T extends ComponentPublicInstanceConstructor> = Omit<InstanceType<T>["$props"], `on${string}`>;
 export type RawEmits<T extends ComponentPublicInstanceConstructor> = ComponentEmit<T>;

package/shared/components/popup-handler/utils/index.ts

@@ -1,9 +1,9 @@
 import { getCurrentInstance, inject } from "vue";
-import { PopupPlugin } from "../types";
+import { PopupPluginKey } from "@shared/components/popup-handler/keys";
 
 export function getPopupPlugin() {
   const instance = getCurrentInstance();
   if (instance) {
-    return inject<PopupPlugin>("popupPlugin");
+    return inject(PopupPluginKey, undefined);
   }
 }

package/shared/components/settings-menu/index.ts

@@ -1 +1 @@
-export { default as SettingsMenu } from "./settings-menu.vue";
+export { default as SettingsMenu } from "@shared/components/settings-menu/settings-menu.vue";

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

@@ -0,0 +1,104 @@
+import { defineComponent, onUnmounted } from "vue";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import SettingsMenu from "@shared/components/settings-menu/settings-menu.vue";
+import { provideSettingsMenu } from "@core/composables/useSettingsMenu";
+import { SettingsMenuItem } from "@shared/components/settings-menu-item";
+import { ThemeSelector } from "@shared/components/theme-selector";
+import { LanguageSelector } from "@shared/components/language-selector";
+
+const MockActionItem = defineComponent({
+  name: "MockActionItem",
+  components: { SettingsMenuItem },
+  props: {
+    title: { type: String, required: true },
+    icon: { type: String, required: true },
+  },
+  template: `
+    <SettingsMenuItem
+      :title="title"
+      :icon="icon"
+    />
+  `,
+});
+
+const BASE_ITEM_IDS = [
+  "story-theme-selector",
+  "story-language-selector",
+  "story-security-action",
+  "story-logout-action",
+] as const;
+
+function unregisterAllItems() {
+  const settingsMenu = provideSettingsMenu();
+  BASE_ITEM_IDS.forEach((id) => settingsMenu.unregister(id));
+}
+
+function registerGroupedItems() {
+  const settingsMenu = provideSettingsMenu();
+  unregisterAllItems();
+
+  settingsMenu.register({
+    id: "story-theme-selector",
+    group: "preferences",
+    order: 10,
+    component: ThemeSelector,
+  });
+  settingsMenu.register({
+    id: "story-language-selector",
+    group: "preferences",
+    order: 20,
+    component: LanguageSelector,
+  });
+  settingsMenu.register({
+    id: "story-security-action",
+    group: "account",
+    order: 30,
+    component: MockActionItem,
+    props: {
+      title: "Security audit",
+      icon: "lucide-shield-check",
+    },
+  });
+  settingsMenu.register({
+    id: "story-logout-action",
+    group: "account",
+    order: 100,
+    component: MockActionItem,
+    props: {
+      title: "Sign out",
+      icon: "lucide-log-out",
+    },
+  });
+}
+
+const meta = {
+  title: "Shared/SettingsMenu",
+  component: SettingsMenu,
+  tags: ["autodocs"],
+  decorators: [
+    () => ({
+      setup() {
+        registerGroupedItems();
+        onUnmounted(() => unregisterAllItems());
+      },
+      template: `
+        <div class="tw-w-[300px] tw-rounded-lg tw-border tw-border-solid tw-border-neutrals-200 tw-bg-additional-50 tw-py-1">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Settings menu container that groups registered menu items by `group` and sorts by `order`. This story uses the real registration service to mirror shell behavior.",
+      },
+    },
+  },
+} satisfies Meta<typeof SettingsMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const GroupedMenu: Story = {};

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

@@ -1,22 +1,59 @@
 <template>
   <div class="vc-settings-menu">
-    <component
-      :is="item.component"
-      v-for="item in items"
-      :key="item.id"
-      v-bind="item.props || {}"
-    />
+    <template
+      v-for="(group, groupIndex) in groupedItems"
+      :key="group.name"
+    >
+      <div
+        v-if="groupIndex > 0"
+        class="vc-settings-menu__separator"
+      />
+      <div class="vc-settings-menu__group">
+        <component
+          :is="item.component"
+          v-for="item in group.items"
+          :key="item.id"
+          v-bind="item.props || {}"
+        />
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { useSettingsMenu } from "../../../core/composables/useSettingsMenu";
+import { computed } from "vue";
+import { useSettingsMenu } from "@core/composables/useSettingsMenu";
 
 const { items } = useSettingsMenu();
+
+const groupedItems = computed(() => {
+  const groups = new Map<string, typeof items.value>();
+
+  for (const item of items.value) {
+    const groupName = item.group ?? "general";
+    if (!groups.has(groupName)) {
+      groups.set(groupName, []);
+    }
+    groups.get(groupName)!.push(item);
+  }
+
+  return Array.from(groups.entries()).map(([name, groupItems]) => ({
+    name,
+    items: groupItems,
+  }));
+});
 </script>
 
 <style lang="scss">
 .vc-settings-menu {
-  @apply tw-w-full;
+  @apply tw-w-full tw-py-1;
+
+  &__separator {
+    @apply tw-mx-3 tw-my-1 tw-border-t tw-border-solid tw-border-neutrals-200;
+  }
+
+  &__group {
+    @apply tw-flex tw-flex-col;
+  }
 }
 </style>

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

@@ -1 +1 @@
-export { default as SettingsMenuItem } from "./settings-menu-item.vue";
+export { default as SettingsMenuItem } from "@shared/components/settings-menu-item/settings-menu-item.vue";

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

@@ -0,0 +1,193 @@
+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";
+
+const meta = {
+  title: "Shared/SettingsMenuItem",
+  component: SettingsMenuItem,
+  decorators: [
+    () => ({
+      template: `
+        <div style="width: 280px; background: var(--additional-50); border: 1px solid var(--neutrals-200); border-radius: 6px; overflow: hidden;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
+} satisfies Meta<typeof SettingsMenuItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Basic menu item with icon and title
+ */
+export const Basic: Story = {
+  args: {
+    icon: "lucide-log-out",
+    title: "Log out",
+  },
+};
+
+/**
+ * Menu item with current value and chevron — used for selectors
+ */
+export const WithValue: Story = {
+  args: {
+    icon: "material-palette",
+    title: "Theme",
+    value: "Light",
+    showChevron: true,
+  },
+};
+
+/**
+ * Menu item with chevron but no value — used for actions that open something
+ */
+export const WithChevron: Story = {
+  args: {
+    icon: "lucide-bolt",
+    title: "Change password",
+    showChevron: true,
+  },
+};
+
+/**
+ * Active state (when sub-menu is open)
+ */
+export const Active: Story = {
+  args: {
+    icon: "material-palette",
+    title: "Theme",
+    value: "Light",
+    showChevron: true,
+    isActive: true,
+  },
+};
+
+/**
+ * Full settings menu simulation with groups and separators
+ */
+export const FullMenu: Story = {
+  render: () => ({
+    components: { SettingsMenuItem },
+    template: `
+      <div style="padding: 4px 0;">
+        <SettingsMenuItem
+          icon="material-palette"
+          title="Theme selector"
+          value="Light"
+          :show-chevron="true"
+        />
+        <SettingsMenuItem
+          icon="material-language"
+          title="Language selector"
+          value="English"
+          :show-chevron="true"
+        />
+        <div style="margin: 4px 12px; border-top: 1px solid var(--neutrals-200);"></div>
+        <SettingsMenuItem
+          icon="lucide-key"
+          title="Change password"
+        />
+        <SettingsMenuItem
+          icon="lucide-log-out"
+          title="Log out"
+        />
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Cascading sub-menu demo — click Theme to see the floating sub-panel
+ */
+export const CascadingSubMenu: Story = {
+  render: () => ({
+    components: { SettingsMenuItem, VcDropdownPanel, VcIcon },
+    setup() {
+      const isSubMenuOpen = ref(false);
+      const menuItemRef = ref<InstanceType<typeof SettingsMenuItem> | null>(null);
+      const selectedTheme = ref("light");
+      const themes = [
+        { key: "light", name: "Light" },
+        { key: "green", name: "Green" },
+        { key: "dark", name: "Dark" },
+      ];
+      const currentThemeName = () => themes.find((t) => t.key === selectedTheme.value)?.name ?? "";
+      return { isSubMenuOpen, menuItemRef, selectedTheme, themes, currentThemeName };
+    },
+    template: `
+      <div style="padding: 4px 0;">
+        <SettingsMenuItem
+          ref="menuItemRef"
+          icon="material-palette"
+          title="Theme selector"
+          :value="currentThemeName()"
+          :show-chevron="true"
+          :is-active="isSubMenuOpen"
+          @trigger:click="isSubMenuOpen = !isSubMenuOpen"
+        />
+        <SettingsMenuItem
+          icon="material-language"
+          title="Language selector"
+          value="English"
+          :show-chevron="true"
+        />
+        <div style="margin: 4px 12px; border-top: 1px solid var(--neutrals-200);"></div>
+        <SettingsMenuItem
+          icon="lucide-key"
+          title="Change password"
+        />
+        <SettingsMenuItem
+          icon="lucide-log-out"
+          title="Log out"
+        />
+
+        <VcDropdownPanel
+          v-model:show="isSubMenuOpen"
+          :anchor-ref="menuItemRef?.triggerRef ?? null"
+          placement="right-start"
+          width="180px"
+          max-width="260px"
+        >
+          <div style="padding: 4px;">
+            <button
+              v-for="theme in themes"
+              :key="theme.key"
+              type="button"
+              style="
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                width: 100%;
+                padding: 6px 8px;
+                border-radius: 6px;
+                font-size: 14px;
+                text-align: left;
+                background: transparent;
+                border: none;
+                cursor: pointer;
+                transition: background-color 0.15s;
+              "
+              :style="{ fontWeight: theme.key === selectedTheme ? '500' : '400' }"
+              @click="selectedTheme = theme.key; isSubMenuOpen = false"
+              @mouseenter="$event.target.style.backgroundColor = 'var(--neutrals-100)'"
+              @mouseleave="$event.target.style.backgroundColor = 'transparent'"
+            >
+              <VcIcon
+                v-if="theme.key === selectedTheme"
+                icon="fas fa-check"
+                size="xs"
+                style="color: var(--additional-950); width: 14px; flex-shrink: 0; font-size: 10px;"
+              />
+              <span v-else style="width: 14px; flex-shrink: 0;" />
+              <span>{{ theme.name }}</span>
+            </button>
+          </div>
+        </VcDropdownPanel>
+      </div>
+    `,
+  }),
+};

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

@@ -9,6 +9,7 @@
   >
     <!-- Trigger -->
     <div
+      ref="triggerRef"
       class="vc-menu-item__trigger"
       @click.stop="handleTriggerClick"
     >
@@ -18,7 +19,7 @@
             <VcIcon
               v-if="icon"
               :icon="icon"
-              size="l"
+              :custom-size="16"
               class="vc-menu-item__icon"
             />
             <VcImage
@@ -33,7 +34,19 @@
             <p class="vc-menu-item__title">{{ title }}</p>
           </slot>
 
-          <slot name="additional" />
+          <slot name="additional">
+            <span
+              v-if="value"
+              class="vc-menu-item__value"
+            >{{ value }}</span>
+          </slot>
+
+          <VcIcon
+            v-if="showChevron"
+            icon="fas fa-chevron-right"
+            size="xs"
+            class="vc-menu-item__chevron"
+          />
         </div>
       </slot>
     </div>
@@ -44,8 +57,8 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { Component } from "vue";
-import { VcIcon, VcImage } from "../../../ui/components";
+import { Component, ref } from "vue";
+import { VcIcon, VcImage } from "@ui/components";
 
 interface Props {
   title?: string;
@@ -56,6 +69,8 @@ interface Props {
   disabled?: boolean;
   isVisible?: boolean;
   triggerAction?: "click" | "hover" | "none";
+  value?: string;
+  showChevron?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -76,10 +91,14 @@ const emit = defineEmits<{
   (e: "trigger:hover"): void;
 }>();
 
+const triggerRef = ref<HTMLElement | null>(null);
+
 const handleTriggerClick = () => {
   if (props.disabled || props.triggerAction === "none") return;
   emit("trigger:click");
 };
+
+defineExpose({ triggerRef });
 </script>
 
 <style lang="scss">
@@ -87,24 +106,26 @@ const handleTriggerClick = () => {
   --menu-item-text-color: var(--additional-950);
   --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);
-  --menu-item-bg-active: var(--primary-50);
+  --menu-item-bg-hover: var(--neutrals-100);
+  --menu-item-icon-color: var(--neutrals-600);
+  --menu-item-bg-active: var(--neutrals-100);
+  --menu-item-value-color: var(--neutrals-500);
+  --menu-item-chevron-color: var(--neutrals-400);
 }
 
 .vc-menu-item {
   @apply tw-flex tw-flex-col;
 
   &__trigger {
-    @apply tw-p-3 tw-text-sm tw-text-[color:var(--menu-item-text-color)]
-      tw-border-solid tw-border-b tw-border-b-[color:var(--menu-item-border-color)]
-      tw-bg-[color:var(--menu-item-bg)] tw-flex tw-flex-row tw-items-center;
+    @apply tw-mx-1 tw-px-2 tw-py-[7px] tw-rounded-md tw-text-sm tw-text-[color:var(--menu-item-text-color)]
+      tw-bg-[color:var(--menu-item-bg)] tw-flex tw-flex-row tw-items-center
+      tw-transition-colors tw-duration-150;
   }
 
   &--clickable {
     @apply tw-cursor-pointer;
 
-    &:hover {
+    .vc-menu-item__trigger:hover {
       @apply tw-bg-[color:var(--menu-item-bg-hover)];
     }
   }
@@ -114,27 +135,33 @@ const handleTriggerClick = () => {
   }
 
   &--active {
-    @apply tw-bg-[color:var(--menu-item-bg-active)];
-  }
-
-  &:last-of-type {
-    @apply tw-border-b-0;
+    .vc-menu-item__trigger {
+      @apply tw-bg-[color:var(--menu-item-bg-active)];
+    }
   }
 
   &__content {
-    @apply tw-flex tw-items-center tw-w-full;
+    @apply tw-flex tw-items-center tw-w-full tw-gap-2;
   }
 
   &__icon {
-    @apply tw-w-6 tw-mr-3 tw-text-[color:var(--menu-item-icon-color)] tw-text-[16px];
+    @apply tw-shrink-0 tw-text-[color:var(--menu-item-icon-color)];
   }
 
   &__image {
-    @apply tw-w-6 tw-h-6 tw-mr-3;
+    @apply tw-w-4 tw-h-4 tw-shrink-0 tw-object-contain;
   }
 
   &__title {
-    @apply tw-flex-grow;
+    @apply tw-flex-grow tw-truncate;
+  }
+
+  &__value {
+    @apply tw-text-[color:var(--menu-item-value-color)] tw-text-xs tw-shrink-0 tw-ml-auto;
+  }
+
+  &__chevron {
+    @apply tw-text-[color:var(--menu-item-chevron-color)] tw-text-[10px] tw-shrink-0 tw-ml-1;
   }
 }
 </style>

package/shared/components/sidebar/index.ts

@@ -1,4 +1,4 @@
-import SidebarComponent from "./sidebar.vue";
+import SidebarComponent from "@shared/components/sidebar/sidebar.vue";
 
 /**
  * @deprecated Use `VcSidebar` from `framework/ui/components` instead.

package/shared/components/sidebar/sidebar.vue

@@ -29,7 +29,8 @@
 
 <script lang="ts" setup>
 import { computed, inject, ref, type Ref } from "vue";
-import { VcSidebar } from "../../../ui/components";
+import { IsMobileKey, IsDesktopKey } from "@framework/injection-keys";
+import { VcSidebar } from "@ui/components";
 
 export interface Props {
   position?: "left" | "right";
@@ -54,8 +55,8 @@ defineSlots<{
   content?: () => unknown;
 }>();
 
-const isMobile = inject<Ref<boolean>>("isMobile", ref(false));
-const isDesktop = inject<Ref<boolean>>("isDesktop", ref(false));
+const isMobile = inject(IsMobileKey, ref(false));
+const isDesktop = inject(IsDesktopKey, ref(false));
 
 const renderMatchesViewport = computed(() => {
   if (props.render === "always") {

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

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