@vc-shell/framework 1.2.2 → 1.2.3

package/dist/ui/components/atoms/vc-badge/vc-badge.vue.d.ts

@@ -9,6 +9,8 @@ export interface Props {
     customPosition?: boolean;
     top?: string;
     right?: string;
+    /** When true, renders badge as inline element without absolute positioning (no slot content) */
+    inline?: boolean;
 }
 export interface Emits {
     (event: "click"): void;
@@ -30,6 +32,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     customPosition: boolean;
     top: string;
     right: string;
+    inline: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/ui/components/atoms/vc-badge/vc-badge.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-badge.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-badge/vc-badge.vue"],"names":[],"mappings":"AAmPA,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;AAeD,KAAK,WAAW,GAAG;IACjB;;SAEK;IACL,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B,CAAC;AAyGF,QAAA,MAAM,eAAe;;;;;UAvIZ,GAAG,GAAG,GAAG;WACR,OAAO;aACL,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW;oBAC5D,OAAO;SAClB,MAAM;WACJ,MAAM;6EA0Id,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"vc-badge.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/atoms/vc-badge/vc-badge.vue"],"names":[],"mappings":"AA8SA,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;IAC9E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACxB;AAgBD,KAAK,WAAW,GAAG;IACjB;;SAEK;IACL,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;CAC9B,CAAC;AAyIF,QAAA,MAAM,eAAe;;;;;UA1KZ,GAAG,GAAG,GAAG;WACR,OAAO;aACL,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW;oBAC5D,OAAO;SAClB,MAAM;WACJ,MAAM;YAEL,OAAO;6EA2KhB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAa1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/useBadge.d.ts

@@ -0,0 +1,18 @@
+import { type ComputedRef } from "vue";
+import type { MenuItemBadgeConfig } from "./../../../../../../../../../core/types";
+export interface ResolvedBadge {
+    content: string | number | undefined;
+    variant: "primary" | "success" | "warning" | "danger" | "info" | "secondary";
+    isDot: boolean;
+    isVisible: boolean;
+}
+/**
+ * Composable to resolve badge configuration for menu items.
+ * Supports direct badge config, routeId lookup, or groupId lookup.
+ *
+ * @param badgeConfig - Direct badge configuration (takes priority)
+ * @param routeId - Route ID to lookup badge from registry
+ * @param groupId - Group ID to lookup badge from registry
+ */
+export declare function useBadge(badgeConfig: MenuItemBadgeConfig | undefined, routeId?: string, groupId?: string): ComputedRef<ResolvedBadge>;
+//# sourceMappingURL=useBadge.d.ts.map

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/useBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadge.d.ts","sourceRoot":"","sources":["../../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/useBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAA0B,KAAK,WAAW,EAAY,MAAM,KAAK,CAAC;AACzE,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,yCAAyC,CAAC;AAGlG,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;IAC7E,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,WAAW,EAAE,mBAAmB,GAAG,SAAS,EAC5C,OAAO,CAAC,EAAE,MAAM,EAChB,OAAO,CAAC,EAAE,MAAM,GACf,WAAW,CAAC,aAAa,CAAC,CAwD5B"}

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.d.ts

@@ -1,5 +1,5 @@
 import { Component } from "vue";
-import { MenuItem } from "./../../../../../../../../../core/types";
+import { MenuItem, MenuItemBadgeConfig } from "./../../../../../../../../../core/types";
 export interface Props {
     children?: MenuItem[];
     sticky?: boolean;
@@ -8,6 +8,9 @@ export interface Props {
     url?: string;
     expand?: boolean;
     id?: string | number;
+    badge?: MenuItemBadgeConfig;
+    routeId?: string;
+    groupId?: string;
 }
 export interface Emits {
     (event: "onClick", item?: MenuItem): void;

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app-menu-link.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue"],"names":[],"mappings":"AAAA,OAqZO,EAAmC,SAAS,EAAmB,MAAM,KAAK,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AAInE,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3C;;;;;;YAVU,OAAO;;AAiVlB,wBAQG"}
+{"version":3,"file":"vc-app-menu-link.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue"],"names":[],"mappings":"AAAA,OAgcO,EAAmC,SAAS,EAAmB,MAAM,KAAK,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,yCAAyC,CAAC;AAKxF,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CAC3C;;;;;;YAbU,OAAO;;AA+YlB,wBAQG"}

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue.d.ts

@@ -1,4 +1,4 @@
-import { MenuItem } from "../../../../../../../../core/types";
+import { MenuItem, MenuItemBadgeConfig } from "../../../../../../../../core/types";
 import type { Component } from "vue";
 export interface Props {
     sticky?: boolean;
@@ -9,6 +9,9 @@ export interface Props {
     children?: MenuItem[];
     expand?: boolean;
     id?: string | number;
+    badge?: MenuItemBadgeConfig;
+    routeId?: string;
+    groupId?: string;
 }
 export interface Emits {
     (event: "click", item?: MenuItem): void;

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app-menu-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue"],"names":[],"mappings":"AAgEA,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzC;;;;;;cAPY,QAAQ,EAAE;YALZ,OAAO;;AA8IlB,wBAQG"}
+{"version":3,"file":"vc-app-menu-item.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue"],"names":[],"mappings":"AAyEA,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACnF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzC;;;;;;cAVY,QAAQ,EAAE;YALZ,OAAO;;AA6JlB,wBAQG"}

package/dist/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-app-menu.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue"],"names":[],"mappings":"AAiPA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAIxD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CAChC;;;;;;;;aANU,MAAM,GAAG,SAAS;;AA4J7B,wBAQG"}
+{"version":3,"file":"vc-app-menu.vue.d.ts","sourceRoot":"","sources":["../../../../../../../ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue"],"names":[],"mappings":"AAoPA,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAIxD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,KAAK;IACpB,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,CAAC;CAChC;;;;;;;;aANU,MAAM,GAAG,SAAS;;AAkK7B,wBAQG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -90,9 +90,9 @@
     "@fullhuman/postcss-purgecss": "^7.0.2",
     "@laynezh/vite-plugin-lib-assets": "v1.1.0",
     "@types/dompurify": "^3.0.5",
-    "@vc-shell/api-client-generator": "1.2.2",
-    "@vc-shell/config-generator": "1.2.2",
-    "@vc-shell/ts-config": "1.2.2",
+    "@vc-shell/api-client-generator": "1.2.3",
+    "@vc-shell/config-generator": "1.2.3",
+    "@vc-shell/ts-config": "1.2.3",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.5",
     "cypress-signalr-mock": "^1.5.0",
@@ -112,5 +112,5 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "gitHead": "c969535a7f96eeb66aa9ab2289c369286d8933fd"
+  "gitHead": "6270dab6a5a8149c8380d17d55b77531bad13531"
 }

package/shared/composables/index.ts

@@ -1,4 +1,5 @@
 export * from "./useMenuExpanded";
 export * from "./useModificationTracker";
 export * from "./useTableSort";
+export * from "./useTableSelection";
 export * from "./useExternalWidgets";

package/shared/composables/useTableSelection.ts

@@ -0,0 +1,145 @@
+import { ref, computed, Ref, ComputedRef } from "vue";
+
+export interface UseTableSelectionOptions<T> {
+  /**
+   * The field to use for extracting IDs from items.
+   * Can be a key of T or a function that extracts the ID.
+   * @default 'id'
+   */
+  idField?: keyof T | ((item: T) => string | undefined);
+}
+
+export interface UseTableSelectionReturn<T> {
+  /**
+   * Array of currently selected item objects.
+   */
+  selectedItems: Ref<T[]>;
+
+  /**
+   * Computed array of IDs extracted from selected items.
+   */
+  selectedIds: ComputedRef<string[]>;
+
+  /**
+   * Whether "select all" across pagination is active.
+   */
+  allSelected: Ref<boolean>;
+
+  /**
+   * Number of currently selected items.
+   */
+  selectionCount: ComputedRef<number>;
+
+  /**
+   * Whether any items are currently selected.
+   */
+  hasSelection: ComputedRef<boolean>;
+
+  /**
+   * Handler for VcTable's @selection-changed event.
+   */
+  handleSelectionChange: (items: T[]) => void;
+
+  /**
+   * Handler for VcTable's @select:all event.
+   */
+  handleSelectAll: (selected: boolean) => void;
+
+  /**
+   * Clears all selection state.
+   */
+  resetSelection: () => void;
+
+  /**
+   * Checks if a specific item is selected.
+   */
+  isSelected: (item: T) => boolean;
+
+  /**
+   * Programmatically select items.
+   */
+  selectItems: (items: T[]) => void;
+
+  /**
+   * Deselect items by their IDs.
+   */
+  deselectByIds: (ids: string[]) => void;
+}
+
+export function useTableSelection<T extends object>(
+  options?: UseTableSelectionOptions<T>
+): UseTableSelectionReturn<T> {
+  const idField = options?.idField ?? ("id" as keyof T);
+
+  const getItemId = (item: T): string | undefined => {
+    if (typeof idField === "function") {
+      return idField(item);
+    }
+    const value = item[idField as keyof T];
+    return typeof value === "string" ? value : undefined;
+  };
+
+  const selectedItems = ref<T[]>([]) as Ref<T[]>;
+  const allSelected = ref(false);
+
+  const selectedIds = computed<string[]>(() => {
+    return selectedItems.value.flatMap((item) => {
+      const id = getItemId(item);
+      return id ? [id] : [];
+    });
+  });
+
+  const selectionCount = computed(() => selectedItems.value.length);
+  const hasSelection = computed(() => selectedItems.value.length > 0);
+  const selectedIdSet = computed(() => new Set(selectedIds.value));
+
+  const handleSelectionChange = (items: T[]): void => {
+    selectedItems.value = items;
+    if (items.length === 0) {
+      allSelected.value = false;
+    }
+  };
+
+  const handleSelectAll = (selected: boolean): void => {
+    allSelected.value = selected;
+    if (!selected) {
+      selectedItems.value = [];
+    }
+  };
+
+  const resetSelection = (): void => {
+    selectedItems.value = [];
+    allSelected.value = false;
+  };
+
+  const isSelected = (item: T): boolean => {
+    const id = getItemId(item);
+    return id ? selectedIdSet.value.has(id) : false;
+  };
+
+  const selectItems = (items: T[]): void => {
+    selectedItems.value = items;
+  };
+
+  const deselectByIds = (ids: string[]): void => {
+    const idsToRemove = new Set(ids);
+    selectedItems.value = selectedItems.value.filter((item) => {
+      const id = getItemId(item);
+      return id ? !idsToRemove.has(id) : true;
+    });
+  };
+
+  return {
+    selectedItems,
+    selectedIds,
+    allSelected,
+    selectionCount,
+    hasSelection,
+    handleSelectionChange,
+    handleSelectAll,
+    resetSelection,
+    isSelected,
+    selectItems,
+    deselectByIds,
+  };
+}

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -1,5 +1,34 @@
 <template>
+  <!-- Inline mode: render badge element directly without wrapper -->
   <div
+    v-if="inline && (typeof content !== 'undefined' || isDot)"
+    ref="badge"
+    class="vc-badge__badge vc-badge__badge--inline"
+    :class="[
+      `vc-badge__badge--${variant}`,
+      {
+        'vc-badge__badge--active': active,
+        'vc-badge__badge--clickable': clickable,
+        'vc-badge__badge--disabled': disabled,
+        'vc-badge__badge--content-long': String(content).length > 1,
+        'vc-badge__badge--content-very-long': String(content).length > 2,
+        'vc-badge__badge--dot': isDot,
+        'vc-badge__badge--inline-small': size === 's',
+        'vc-badge__badge--inline-medium': size === 'm',
+      },
+    ]"
+    @click="onClick"
+  >
+    <span
+      v-if="!isDot"
+      class="vc-badge__text"
+      >{{ content }}</span
+    >
+  </div>
+
+  <!-- Standard mode: wrapper with slot and positioned badge -->
+  <div
+    v-else
     ref="badgeContainer"
     class="vc-badge"
     :class="{
@@ -53,6 +82,8 @@ export interface Props {
   customPosition?: boolean;
   top?: string;
   right?: string;
+  /** When true, renders badge as inline element without absolute positioning (no slot content) */
+  inline?: boolean;
 }
 
 export interface Emits {
@@ -66,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
   customPosition: false,
   top: undefined,
   right: undefined,
+  inline: false,
 });
 
 const emit = defineEmits<Emits>();
@@ -236,4 +268,31 @@ $sizes: small, medium;
 .vc-badge__badge--disabled {
   @apply tw-cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
 }
+
+// Inline mode - relative positioning, no wrapper
+.vc-badge__badge--inline {
+  @apply tw-relative tw-top-0 tw-right-0;
+}
+
+.vc-badge__badge--inline-small {
+  height: var(--badge-size-small);
+  min-width: var(--badge-size-small);
+
+  &.vc-badge__badge--dot {
+    height: var(--badge-dot-size-small);
+    min-width: var(--badge-dot-size-small);
+    width: var(--badge-dot-size-small);
+  }
+}
+
+.vc-badge__badge--inline-medium {
+  height: var(--badge-size-medium);
+  min-width: var(--badge-size-medium);
+
+  &.vc-badge__badge--dot {
+    height: var(--badge-dot-size-medium);
+    min-width: var(--badge-dot-size-medium);
+    width: var(--badge-dot-size-medium);
+  }
+}
 </style>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/useBadge.ts

@@ -0,0 +1,80 @@
+import { computed, unref, isRef, type ComputedRef, type Ref } from "vue";
+import type { MenuItemBadgeConfig, MenuItemBadge } from "./../../../../../../../../../core/types";
+import { getMenuBadges } from "./../../../../../../../../../core/services/menu-service";
+
+export interface ResolvedBadge {
+  content: string | number | undefined;
+  variant: "primary" | "success" | "warning" | "danger" | "info" | "secondary";
+  isDot: boolean;
+  isVisible: boolean;
+}
+
+/**
+ * Composable to resolve badge configuration for menu items.
+ * Supports direct badge config, routeId lookup, or groupId lookup.
+ *
+ * @param badgeConfig - Direct badge configuration (takes priority)
+ * @param routeId - Route ID to lookup badge from registry
+ * @param groupId - Group ID to lookup badge from registry
+ */
+export function useBadge(
+  badgeConfig: MenuItemBadgeConfig | undefined,
+  routeId?: string,
+  groupId?: string,
+): ComputedRef<ResolvedBadge> {
+  const menuBadges = getMenuBadges();
+
+  return computed(() => {
+    // Priority: direct badge config > badge from registry by routeId > badge from registry by groupId
+    let config: MenuItemBadgeConfig | undefined = badgeConfig;
+    if (!config && routeId) {
+      config = menuBadges.value.get(routeId);
+    }
+    if (!config && groupId) {
+      config = menuBadges.value.get(groupId);
+    }
+
+    if (!config) {
+      return { content: undefined, variant: "primary", isDot: false, isVisible: false };
+    }
+
+    // Normalize shorthand to full config object
+    let badge: MenuItemBadge;
+    if (typeof config === "object" && !isRef(config) && "content" in config) {
+      badge = config as MenuItemBadge;
+    } else {
+      badge = { content: config as MenuItemBadge["content"] };
+    }
+
+    // Resolve reactive content
+    let rawContent: string | number | undefined = undefined;
+    if (typeof badge.content === "function") {
+      rawContent = badge.content();
+    } else if (isRef(badge.content)) {
+      rawContent = unref(badge.content as Ref<string | number | undefined>);
+    } else {
+      rawContent = badge.content;
+    }
+
+    // Truncate values > 99
+    let displayContent: string | number | undefined = rawContent;
+    if (typeof rawContent === "number" && rawContent > 99) {
+      displayContent = "99+";
+    } else if (typeof rawContent === "string") {
+      const numValue = parseInt(rawContent, 10);
+      if (!isNaN(numValue) && numValue > 99) {
+        displayContent = "99+";
+      }
+    }
+
+    const isDot = badge.isDot ?? false;
+    const isVisible = isDot || (displayContent != null && displayContent !== "" && displayContent !== 0);
+
+    return {
+      content: displayContent,
+      variant: badge.variant ?? "primary",
+      isDot,
+      isVisible,
+    };
+  });
+}

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -45,6 +45,15 @@
             <div class="vc-app-menu-link__title-truncate">
               {{ $t(title ?? "") }}
             </div>
+            <VcBadge
+              v-if="resolvedBadge.isVisible"
+              :content="resolvedBadge.isDot ? undefined : resolvedBadge.content"
+              :variant="resolvedBadge.variant"
+              :is-dot="resolvedBadge.isDot"
+              size="s"
+              inline
+              class="vc-app-menu-link__badge"
+            />
             <div
               v-if="(!!children?.length && expand) || false"
               class="vc-app-menu-link__title-icon"
@@ -119,15 +128,28 @@
                 {{ twoLettersTitle(nested.title) }}
               </div>
               <Transition name="opacity">
-                <p
+                <div
                   v-show="expand"
-                  class="vc-app-menu-link__child-item-title"
-                  :class="{
-                    'vc-app-menu-link__child-item-title--no-icon': !nested.icon,
-                  }"
+                  class="vc-app-menu-link__child-item-content"
                 >
-                  {{ $t(nested.title) }}
-                </p>
+                  <p
+                    class="vc-app-menu-link__child-item-title"
+                    :class="{
+                      'vc-app-menu-link__child-item-title--no-icon': !nested.icon,
+                    }"
+                  >
+                    {{ $t(nested.title) }}
+                  </p>
+                  <VcBadge
+                    v-if="getChildBadge(nested).isVisible"
+                    :content="getChildBadge(nested).isDot ? undefined : getChildBadge(nested).content"
+                    :variant="getChildBadge(nested).variant"
+                    :is-dot="getChildBadge(nested).isDot"
+                    size="s"
+                    inline
+                    class="vc-app-menu-link__badge"
+                  />
+                </div>
               </Transition>
             </div>
           </div>
@@ -139,9 +161,10 @@
 
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted, Component, MaybeRef, unref } from "vue";
-import { MenuItem } from "./../../../../../../../../../core/types";
-import { VcIcon } from "./../../../../../../../";
+import { MenuItem, MenuItemBadgeConfig } from "./../../../../../../../../../core/types";
+import { VcIcon, VcBadge } from "./../../../../../../../";
 import { useRoute } from "vue-router";
+import { useBadge } from "./useBadge";
 
 export interface Props {
   children?: MenuItem[];
@@ -151,6 +174,9 @@ export interface Props {
   url?: string;
   expand?: boolean;
   id?: string | number;
+  badge?: MenuItemBadgeConfig;
+  routeId?: string;
+  groupId?: string;
 }
 
 export interface Emits {
@@ -163,6 +189,14 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+// Badge resolution for parent menu item
+const resolvedBadge = useBadge(props.badge, props.routeId, props.groupId);
+
+// Helper to get resolved badge for child items
+const getChildBadge = (child: MenuItem) => {
+  return useBadge(child.badge, child.routeId, child.groupId).value;
+};
+
 const isOpened = ref(false);
 const route = useRoute();
 const params = Object.fromEntries(Object.entries(route.params).filter(([key]) => key !== "pathMatch"));
@@ -346,7 +380,7 @@ watch(isOpened, (newValue) => {
 
   &__child-item {
     @apply tw-cursor-pointer tw-min-w-0 tw-flex tw-h-[var(--app-menu-item-height)]
-      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-full tw-py-2 tw-px-3
+      tw-items-center tw-transition-[padding] tw-duration-150 tw-w-full tw-py-2 tw-pl-3 tw-pr-2
     tw-text-[color:var(--app-menu-item-title-color)] tw-text-sm
     hover:tw-bg-[var(--app-menu-item-background-color-hover)]
     hover:tw-text-[color:var(--app-menu-item-title-color-active)] tw-gap-5;
@@ -389,6 +423,15 @@ watch(isOpened, (newValue) => {
   &__icon-collapsed {
     @apply tw-p-0 tw-m-0;
   }
+
+  // Badge styles for menu items - positioned after text
+  &__badge {
+    @apply tw-shrink-0 tw-ml-auto;
+  }
+
+  &__child-item-content {
+    @apply tw-flex tw-items-center tw-w-full tw-min-w-0;
+  }
 }
 
 .opacity-enter-active,

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/vc-app-menu-item.vue

@@ -13,6 +13,9 @@
           :title="title ?? ''"
           :url="url"
           :expand="expand"
+          :badge="badge"
+          :route-id="routeId"
+          :group-id="groupId"
           @on-click="$emit('click')"
         />
       </router-link>
@@ -26,6 +29,9 @@
         :icon="icon ?? ''"
         :title="title ?? ''"
         :expand="expand"
+        :badge="badge"
+        :route-id="routeId"
+        :group-id="groupId"
         @on-click="$emit('click', $event)"
       />
     </template>
@@ -34,7 +40,7 @@
 
 <script lang="ts" setup>
 import VcAppMenuLink from "./_internal/vc-app-menu-link.vue";
-import { MenuItem } from "../../../../../../../../core/types";
+import { MenuItem, MenuItemBadgeConfig } from "../../../../../../../../core/types";
 import type { Component } from "vue";
 export interface Props {
   sticky?: boolean;
@@ -45,6 +51,9 @@ export interface Props {
   children?: MenuItem[];
   expand?: boolean;
   id?: string | number;
+  badge?: MenuItemBadgeConfig;
+  routeId?: string;
+  groupId?: string;
 }
 
 export interface Emits {

package/ui/components/organisms/vc-app/_internal/vc-app-menu/vc-app-menu.vue

@@ -36,6 +36,9 @@
             :title="item.title as string"
             :children="item.children"
             :expand="$isDesktop.value ? isExpanded || isHoverExpanded : true"
+            :badge="item.badge"
+            :route-id="item.routeId"
+            :group-id="item.groupId"
             @click="handleMenuItemClick(item, $event)"
           />
         </div>