@jskit-ai/ui-generator 0.1.6 → 0.1.8

package/README.md

@@ -31,7 +31,7 @@ npx jskit generate @jskit-ai/ui-generator page --name "Reports" --surface admin
 Generate an element at a specific outlet:
 
 ```bash
-npx jskit generate @jskit-ai/ui-generator element --name "Ops Panel" --surface admin --placement workspace-settings:forms
+npx jskit generate @jskit-ai/ui-generator element --name "Ops Panel" --surface admin --placement admin-settings:forms
 ```
 
 Generate an element with custom component path:

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/ui-generator",
-  version: "0.1.6",
+  version: "0.1.8",
   kind: "generator",
   description: "Generate app-local non-CRUD UI pages and outlet elements.",
   options: {
@@ -149,7 +149,7 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@jskit-ai/users-web": "0.1.37"
+        "@jskit-ai/users-web": "0.1.40"
       },
       dev: {}
     },

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@jskit-ai/ui-generator",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "type": "module",
   "scripts": {
     "test": "node --test"
   },
   "dependencies": {
-    "@jskit-ai/kernel": "0.1.23"
+    "@jskit-ai/kernel": "0.1.25"
   },
   "exports": {
     "./server/buildTemplateContext": "./src/server/buildTemplateContext.js"

package/src/server/subcommands/container.js

@@ -331,7 +331,10 @@ function renderTabLinkItemSource() {
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { usePaths } from "@jskit-ai/users-web/client/composables/usePaths";
-import { useWorkspaceRouteContext } from "@jskit-ai/users-web/client/composables/useWorkspaceRouteContext";
+import {
+  normalizeMenuLinkPathname,
+  resolveMenuLinkTarget
+} from "@jskit-ai/users-web/client/support/menuLinkTarget";
 
 const props = defineProps({
   label: {
@@ -362,78 +365,25 @@ const props = defineProps({
 
 const route = useRoute();
 const paths = usePaths();
-const { currentSurfaceId, workspaceSlugFromRoute } = useWorkspaceRouteContext();
-
-function normalizePathname(pathname = "") {
-  const source = String(pathname || "").trim();
-  if (!source) {
-    return "";
-  }
-
-  const queryIndex = source.indexOf("?");
-  const hashIndex = source.indexOf("#");
-  const cutoff =
-    queryIndex < 0
-      ? hashIndex
-      : hashIndex < 0
-        ? queryIndex
-        : Math.min(queryIndex, hashIndex);
-  return cutoff < 0 ? source : source.slice(0, cutoff);
-}
-
-function interpolateBracketParams(pathTemplate = "", params = {}) {
-  const source = String(pathTemplate || "").trim();
-  if (!source) {
-    return "";
-  }
-
-  return source.replace(/\\[([^\\]]+)\\]/g, (_match, rawKey) => {
-    const key = String(rawKey || "").trim();
-    if (!key) {
-      return "";
-    }
-    const value = params?.[key];
-    return value == null ? "[" + key + "]" : encodeURIComponent(String(value));
-  });
-}
-
-const targetSurfaceId = computed(() => {
-  const explicitSurface = String(props.surface || "").trim().toLowerCase();
-  if (explicitSurface && explicitSurface !== "*") {
-    return explicitSurface;
-  }
-  return String(currentSurfaceId.value || paths.currentSurfaceId.value || "").trim().toLowerCase();
-});
 
 const resolvedTo = computed(() => {
-  const explicitTo = String(props.to || "").trim();
-  if (explicitTo) {
-    if (explicitTo.startsWith("./")) {
-      const workspaceSlug = String(workspaceSlugFromRoute.value || "").trim();
-      const suffixTemplate = workspaceSlug ? props.workspaceSuffix : props.nonWorkspaceSuffix;
-      const interpolatedSuffix = interpolateBracketParams(suffixTemplate, route.params || {});
-      if (interpolatedSuffix && !interpolatedSuffix.includes("[")) {
-        return paths.page(interpolatedSuffix, {
-          surface: targetSurfaceId.value,
-          mode: "auto"
-        });
-      }
+  return resolveMenuLinkTarget({
+    to: props.to,
+    surface: props.surface,
+    currentSurfaceId: paths.currentSurfaceId.value,
+    placementContext: paths.placementContext.value,
+    workspaceSuffix: props.workspaceSuffix,
+    nonWorkspaceSuffix: props.nonWorkspaceSuffix,
+    routeParams: route.params || {},
+    resolvePagePath(relativePath, options = {}) {
+      return paths.page(relativePath, options);
     }
-    return explicitTo;
-  }
-
-  const workspaceSlug = String(workspaceSlugFromRoute.value || "").trim();
-  const suffix = workspaceSlug ? props.workspaceSuffix : props.nonWorkspaceSuffix;
-  const normalizedSuffix = String(suffix || "/").trim() || "/";
-  return paths.page(normalizedSuffix, {
-    surface: targetSurfaceId.value,
-    mode: "auto"
   });
 });
 
 const isActive = computed(() => {
-  const targetPathname = normalizePathname(resolvedTo.value);
-  const currentPathname = normalizePathname(route.fullPath || route.path);
+  const targetPathname = normalizeMenuLinkPathname(resolvedTo.value);
+  const currentPathname = normalizeMenuLinkPathname(route.fullPath || route.path);
   if (!targetPathname || !currentPathname) {
     return false;
   }

package/test/buildTemplateContext.test.js

@@ -49,7 +49,7 @@ test("buildUiPageTemplateContext resolves placement from default app ShellOutlet
       "src/pages/admin/workspace/settings/index.vue",
       `<template>
   <section>
-    <ShellOutlet host="workspace-settings" position="forms" default />
+    <ShellOutlet host="admin-settings" position="forms" default />
   </section>
 </template>
 `
@@ -59,7 +59,7 @@ test("buildUiPageTemplateContext resolves placement from default app ShellOutlet
       appRoot,
       options: {}
     });
-    assert.equal(context.__JSKIT_UI_MENU_PLACEMENT_HOST__, "workspace-settings");
+    assert.equal(context.__JSKIT_UI_MENU_PLACEMENT_HOST__, "admin-settings");
     assert.equal(context.__JSKIT_UI_MENU_PLACEMENT_POSITION__, "forms");
     assert.equal(context.__JSKIT_UI_MENU_COMPONENT_TOKEN__, "users.web.shell.surface-aware-menu-link-item");
     assert.equal(context.__JSKIT_UI_MENU_WORKSPACE_SUFFIX__, "/");

package/test/containerSubcommand.test.js

@@ -115,10 +115,10 @@ test("ui-generator container subcommand creates parent route container with Shel
     assert.match(sectionShellSource, /<ShellOutlet :host="props\.host" :position="props\.position" \/>/);
 
     const tabLinkSource = await readFile(path.join(appRoot, "src", "components", "TabLinkItem.vue"), "utf8");
-    assert.match(tabLinkSource, /useWorkspaceRouteContext/);
+    assert.match(tabLinkSource, /@jskit-ai\/users-web\/client\/support\/menuLinkTarget/);
+    assert.match(tabLinkSource, /resolveMenuLinkTarget/);
+    assert.match(tabLinkSource, /normalizeMenuLinkPathname/);
     assert.match(tabLinkSource, /class="tab-link-item text-none"/);
-    assert.equal(tabLinkSource.includes("source.replace(/\\[([^\\]]+)\\]/g"), true);
-    assert.equal(tabLinkSource.includes("source.replace(/[([^]]+)]/g"), false);
 
     const providerSource = await readFile(
       path.join(appRoot, "packages", "main", "src", "client", "providers", "MainClientProvider.js"),

package/test/elementSubcommand.test.js

@@ -34,7 +34,7 @@ async function writeAppFixture(appRoot) {
     path.join(appRoot, "src", "pages", "admin", "workspace", "settings", "index.vue"),
     `<template>
   <section>
-    <ShellOutlet host="workspace-settings" position="forms" />
+    <ShellOutlet host="admin-settings" position="forms" />
   </section>
 </template>
 `,
@@ -86,7 +86,7 @@ test("ui-generator element subcommand creates component and outlet placement", a
       options: {
         name: "Ops Panel",
         surface: "admin",
-        placement: "workspace-settings:forms"
+        placement: "admin-settings:forms"
       }
     });
 
@@ -105,7 +105,7 @@ test("ui-generator element subcommand creates component and outlet placement", a
 
     const placementSource = await readFile(path.join(appRoot, "src", "placement.js"), "utf8");
     assert.match(placementSource, /id: "ui-generator\.element\.ops-panel"/);
-    assert.match(placementSource, /host: "workspace-settings"/);
+    assert.match(placementSource, /host: "admin-settings"/);
     assert.match(placementSource, /position: "forms"/);
     assert.match(placementSource, /componentToken: "local\.main\.ui\.element\.ops-panel"/);
   });