@vc-shell/framework 1.1.22 → 1.1.24

package/shared/components/blade-navigation/composables/useBladeNavigation/internal/routerUtils.ts

@@ -0,0 +1,150 @@
+import { computed, shallowRef, Ref, markRaw, watch } from "vue";
+import { RouteLocationNormalized, Router, LocationQuery, RouteRecordNameGeneric, RouteParamsGeneric } from "vue-router";
+import type { BladeVNode } from "../../../types";
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+
+// --- Router and URL Utilities Module ---
+export function _createRouterUtils(router: Router, route: RouteLocationNormalized) {
+  const mainRouteBaseParamURL: Ref<string | undefined> = shallowRef<string>();
+  const routes = markRaw(router.getRoutes());
+
+  function _updateMainRouteBaseParamURL() {
+    const firstParamValue = Object.values(route.params)?.[0] ?? "";
+    mainRouteBaseParamURL.value = "/" + firstParamValue;
+  }
+  // Initial calculation
+  _updateMainRouteBaseParamURL();
+  // Update when route params change, as this might affect the base URL
+  watch(() => route.params, _updateMainRouteBaseParamURL, { deep: true });
+
+  function parseUrlParams(
+    url: string,
+    currentRouteParams: RouteParamsGeneric,
+  ): { workspace?: string; blade?: string; param?: string } | undefined {
+    let pathSegments = url.split("/").filter(Boolean);
+
+    const firstParamFromCurrentRoute = Object.values(currentRouteParams)?.[0];
+    let basePathFromCurrentRoute: string | undefined;
+
+    if (typeof firstParamFromCurrentRoute === "string" && firstParamFromCurrentRoute) {
+      basePathFromCurrentRoute = "/" + firstParamFromCurrentRoute;
+    }
+
+    // If the URL starts with the determined base path (like a UUID tenant ID from currentRouteParams),
+    // we should parse the segments *after* it for workspace, blade, param.
+    if (basePathFromCurrentRoute && basePathFromCurrentRoute !== "/" && url.startsWith(basePathFromCurrentRoute)) {
+      const baseSegmentsCount = basePathFromCurrentRoute.split("/").filter(Boolean).length;
+      pathSegments = pathSegments.slice(baseSegmentsCount);
+    }
+    // Now, pathSegments should contain parts of the URL after the base parameter,
+    // e.g., ["workspace-name", "blade-name", "item-id"] or ["workspace-name"], etc.
+
+    if (pathSegments.length === 0) {
+      // This means the path was likely just the base parameter itself (e.g., "/some-uuid/")
+      // or an empty path "/".
+      // parseUrlParams returns undefined for workspace, blade, param in this case.
+      // routeResolver will handle this, typically by navigating to a default workspace or root.
+      return { workspace: undefined, blade: undefined, param: undefined };
+    }
+
+    // The first segment after the base is potentially the workspace.
+    // The second is potentially the blade.
+    // The third is potentially the param.
+    // Validation of these segments against actual components happens later in routeResolver.
+    const workspace = pathSegments[0];
+    const blade = pathSegments[1];
+    const param = pathSegments[2];
+
+    return { workspace, blade, param };
+  }
+
+  function parseWorkspaceUrlPath(path: string): string {
+    _updateMainRouteBaseParamURL(); // Ensure base URL is current
+    const pathWithoutBase = path.startsWith(mainRouteBaseParamURL.value || "###") // Use unlikely string if base is undefined
+      ? path.slice((mainRouteBaseParamURL.value || "").length)
+      : path;
+    const segments = pathWithoutBase.split("/").filter(Boolean);
+    const workspaceUrl = segments.slice(0, 1).join("/");
+    return "/" + workspaceUrl;
+  }
+
+  function getURLQuery(): { params: string; obj: LocationQuery } {
+    if (route.query && Object.keys(route.query).length) {
+      return {
+        params: new URLSearchParams(route.query as Record<string, string>).toString(),
+        obj: route.query,
+      };
+    }
+    // Fallback for scenarios where route.query might not be populated (e.g., initial load before router is fully ready)
+    const hash = window.location.hash || "#";
+    const queryPart = hash.split("?")[1] || "";
+    const params = new URLSearchParams(queryPart).toString();
+    return { params, obj: Object.fromEntries(new URLSearchParams(queryPart)) };
+  }
+
+  function constructBladePath(workspace: BladeVNode, lastBlade?: BladeVNode): string | undefined {
+    const wsBladeUrl = workspace?.type.url;
+
+    if (!wsBladeUrl) {
+      return undefined;
+    }
+
+    // Normalize workspace URL (e.g., "products" -> "/products")
+    // Ensure basePath starts with a slash and does not end with one (unless it's just "/")
+    let basePath = wsBladeUrl.startsWith("/") ? wsBladeUrl : "/" + wsBladeUrl;
+    if (basePath.endsWith("/") && basePath.length > 1) {
+      basePath = basePath.slice(0, -1);
+    }
+
+    if (lastBlade && lastBlade.type.url && lastBlade.type.url !== wsBladeUrl) {
+      // This is a child blade different from the workspace
+      let childPathSegment = lastBlade.type.url;
+      const param = lastBlade.props?.param;
+
+      // Normalize childPathSegment (e.g., "details" -> "/details")
+      if (!childPathSegment.startsWith("/")) {
+        childPathSegment = "/" + childPathSegment;
+      }
+
+      let fullPath = basePath + childPathSegment;
+
+      if (param) {
+        fullPath += "/" + String(param);
+      }
+      return fullPath;
+    } else {
+      // This is just the workspace, or lastBlade is the workspace itself, or lastBlade has no distinct URL.
+      // The param should be taken from lastBlade if it's the one defining the current end of the path,
+      // otherwise from the workspace's own props.
+      const param = lastBlade ? lastBlade.props?.param : workspace.props?.param;
+      if (param) {
+        return basePath + "/" + String(param);
+      }
+      return basePath;
+    }
+  }
+
+  function getResolvedRouteComponent(path: string): BladeVNode | undefined {
+    return router.resolve({ path })?.matched?.[1]?.components?.default as BladeVNode | undefined;
+  }
+
+  return {
+    mainRouteBaseParamURL: computed(() => mainRouteBaseParamURL.value),
+    parseUrlParams,
+    parseWorkspaceUrlPath,
+    getURLQuery,
+    constructBladePath,
+    getResolvedRouteComponent,
+    allRoutes: routes,
+    goToRoot: () => {
+      const mainRoute = routes.find((r) => r.meta?.root);
+      const mainRouteAlias = routes.find((r) => r.aliasOf?.path === mainRoute?.path) || mainRoute;
+      if (mainRouteAlias?.name) {
+        return { name: mainRouteAlias.name as RouteRecordNameGeneric, params: route.params as RouteParamsGeneric };
+      }
+      console.error("goToRoot: Main route or its alias with a name not found!");
+      return { path: "/" };
+    },
+  };
+}

package/shared/components/blade-navigation/plugin.ts

@@ -1,7 +1,7 @@
 import { Router } from "vue-router";
-import { App, inject, ref } from "vue";
+import { App, ref } from "vue";
 import * as components from "./components";
-import { BladeNavigationPlugin, BladeRoutesRecord } from "./types";
+import { BladeNavigationPlugin } from "./types";
 
 // Declare globally
 declare module "@vue/runtime-core" {
@@ -14,22 +14,27 @@ export let bladeNavigationInstance: BladeNavigationPlugin;
 
 export const VcBladeNavigationComponent = {
   install(app: App, args: { router: Router }) {
-    // Register components
+    // Register framework's own blade UI components like VcBladeNavigation
     Object.entries(components).forEach(([componentName, component]) => {
       app.component(componentName, component);
     });
 
-    const internalRoutes = app.runWithContext(() => inject("bladeRoutes")) as BladeRoutesRecord[];
-
-    // Plugin
-    const bladeNavigationPlugin: BladeNavigationPlugin = {
+    // The plugin instance primarily provides the router.
+    // Blade resolution is now handled by useBladeNavigation via useBladeRegistry.
+    const bladeNavigationPluginData: BladeNavigationPlugin = {
       router: args.router,
-      internalRoutes,
-      blades: ref([]),
+      // blades: ref([]), // This state was for useBladeNavigation, it should manage its own state internally or via its singleton.
+      // If blades ref is truly global and shared, it needs careful consideration.
+      // For now, assuming blade state management is within useBladeNavigationSingleton.
     };
 
-    app.config.globalProperties.$bladeNavigationPlugin = bladeNavigationPlugin;
-    bladeNavigationInstance = bladeNavigationPlugin;
-    app.provide("bladeNavigationPlugin", bladeNavigationPlugin);
+    // This global instance is used as a fallback in useBladeNavigation.
+    // It should contain at least what useBladeNavigation might try to access from it.
+    // Primarily, the router.
+    bladeNavigationInstance = bladeNavigationPluginData;
+
+    // Provide the plugin instance (mainly for the router) for useBladeNavigation to inject.
+    // useBladeNavigation can then also useBladeRegistry() independently.
+    app.provide("bladeNavigationPlugin", bladeNavigationPluginData);
   },
 };

package/shared/components/blade-navigation/types/index.ts

@@ -80,7 +80,7 @@ export type BladeInstanceConstructor<T extends Component = Component> = Extracto
   CoreBladeAdditionalSettings;
 
 export interface IBladeEvent<T extends Component = Component> {
-  blade: BladeInstanceConstructor<T>;
+  blade: BladeInstanceConstructor<T> | { name: string } | undefined;
   options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
   param?: string;
   onOpen?: () => void;
@@ -90,12 +90,10 @@ export interface IBladeEvent<T extends Component = Component> {
 
 export interface BladeNavigationPlugin {
   router: Router;
-  internalRoutes: BladeRoutesRecord[];
-  blades: Ref<BladeVNode[]>;
 }
 
 export interface BladeRoutesRecord {
-  component: BladeVNode;
+  component: BladeInstanceConstructor;
   name: string;
   isWorkspace: boolean;
   route: string;

package/shared/components/notification-template/notification-template.vue

@@ -30,13 +30,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import moment from "moment";
-import { PushNotification } from "../../../core/api/platform";
+import { IPushNotification } from "../../../core/api/platform";
 
 export interface Props {
   color?: string;
   icon?: string;
   title: string;
-  notification: PushNotification;
+  notification: IPushNotification;
 }
 
 const props = defineProps<Props>();

package/shared/modules/dynamic/index.ts

@@ -55,18 +55,12 @@ const createBladeInstanceConstructor = (
   existingComposables?: { [key: string]: (...args: any[]) => any },
   existingMixins?: ((...args: any[]) => any)[],
 ) => {
-  if (json.settings.url) {
-    const rawUrl = json.settings.url as `/${string}`;
-    bladeComponent.url = rawUrl;
-  }
-
-  if (json.settings.permissions) {
-    bladeComponent.permissions = json.settings.permissions;
-  }
 
   return defineComponent({
     ...bladeComponent,
     name: bladeName,
+    url: json.settings.url ? (json.settings.url as `/${string}`) : undefined,
+    permissions: json.settings.permissions,
     isWorkspace: "isWorkspace" in json.settings && json.settings.isWorkspace,
     menuItem: ("menuItem" in json.settings && json.settings.menuItem) ?? undefined,
     moduleUid: args.moduleUid,

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue

@@ -11,6 +11,8 @@
     :required="required"
     :model-value="option"
     :tooltip="tooltip"
+    :multilanguage="multilanguage"
+    :current-language="currentLanguage"
     @update:model-value="$emit('update:option', $event)"
   >
     <template #option="scope">
@@ -202,6 +204,8 @@ export interface Props {
    * Default: text
    */
   inputType?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
+  multilanguage?: boolean;
+  currentLanguage?: string;
 }
 
 export interface Emits {

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

@@ -192,12 +192,17 @@ const onMenuItemClick = function (item: MenuItem) {
   console.debug(`vc-app#onMenuItemClick() called.`);
 
   if (item.routeId) {
-    openBlade(
-      {
-        blade: resolveBladeByName(item.routeId),
-      },
-      true,
-    );
+    const bladeComponent = resolveBladeByName(item.routeId);
+    if (bladeComponent) {
+      openBlade(
+        {
+          blade: bladeComponent,
+        },
+        true,
+      );
+    } else {
+      console.error(`Blade component with routeId '${item.routeId}' not found.`);
+    }
   } else if (!item.routeId && item.url) {
     const menuRoute = routes.find((r) => {
       return "/" + r.path.split("/").filter((part) => part !== "")[1] === item.url || r.path === item.url;

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -199,6 +199,8 @@
         option-label="displayName"
         option-value="id"
         input-type="number"
+        :multilanguage="multilanguage"
+        :current-language="currentLanguage"
         :label="computedProperty.displayName"
         :placeholder="computedProperty.placeholder"
         :required="computedProperty.required"
@@ -213,7 +215,7 @@
             @keydown.enter.stop.prevent="scope.toggleHandler"
             @keydown.space.stop.prevent="scope.toggleHandler"
           >
-            {{ measurementOptions?.find((e) => e.id === measureUnit)?.displaySymbol }}
+            {{ measurementSymbol }}
           </button>
         </template>
       </VcInputDropdown>
@@ -318,6 +320,13 @@ watch(
   },
 );
 
+const measurementSymbol = computed(() => {
+  const option = measurementOptions.value.find((x) => x.id === measureUnit.value);
+  const displaySymbol = option?.displaySymbol;
+  const localizedSymbol = option?.localizedSymbol.values[props.currentLanguage as string];
+  return localizedSymbol ? localizedSymbol : displaySymbol;
+});
+
 const computedProperty = computed(() => {
   const rules: IValidationRules = {};
   if (props.required) {