@jskit-ai/shell-web 0.1.56 → 0.1.57

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.56",
+  version: "0.1.57",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],
@@ -122,7 +122,7 @@ export default Object.freeze({
       runtime: {
         "@mdi/js": "^7.4.47",
         "@tanstack/vue-query": "^5.90.5",
-        "@jskit-ai/kernel": "0.1.57",
+        "@jskit-ai/kernel": "0.1.58",
         "vuetify": "^4.0.0"
       },
       dev: {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -25,7 +25,7 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-query": "^5.90.5",
-    "@jskit-ai/kernel": "0.1.57",
+    "@jskit-ai/kernel": "0.1.58",
     "pinia": "^3.0.4",
     "vuetify": "^4.0.0"
   },

package/src/client/components/ShellTabLinkItem.vue

@@ -7,10 +7,8 @@ import {
   resolveSurfaceNavigationTargetFromPlacementContext,
   useWebPlacementContext
 } from "../placement/index.js";
-import {
-  normalizeMenuLinkPathname,
-  resolveMenuLinkTarget
-} from "../support/menuLinkTarget.js";
+import { resolveMenuLinkIcon } from "../lib/menuIcons.js";
+import { resolveMenuLinkTarget } from "../support/menuLinkTarget.js";
 
 const props = defineProps({
   label: {
@@ -21,6 +19,10 @@ const props = defineProps({
     type: String,
     default: ""
   },
+  icon: {
+    type: String,
+    default: ""
+  },
   surface: {
     type: String,
     default: ""
@@ -88,41 +90,30 @@ const resolvedTarget = computed(() => {
   };
 });
 
-const isActive = computed(() => {
-  if (!resolvedTarget.value.sameOrigin) {
-    return false;
-  }
-
-  const targetPath = normalizeMenuLinkPathname(resolvedTarget.value.href);
-  const currentPath = normalizeMenuLinkPathname(route.fullPath || route.path || "");
-  if (!targetPath || !currentPath) {
-    return false;
-  }
+const resolvedIcon = computed(() =>
+  resolveMenuLinkIcon({
+    icon: props.icon,
+    label: props.label,
+    to: resolvedTarget.value.href || resolvedTo.value
+  })
+);
 
-  return currentPath === targetPath || currentPath.startsWith(`${targetPath}/`);
-});
 </script>
 
 <template>
-  <v-btn
+  <v-list-item
     v-if="resolvedTarget.href"
     class="tab-link-item"
-    variant="text"
-    size="small"
     :to="resolvedTarget.sameOrigin ? resolvedTarget.href : undefined"
     :href="resolvedTarget.sameOrigin ? undefined : resolvedTarget.href"
-    :active="isActive"
+    :prepend-icon="resolvedIcon || undefined"
     :disabled="disabled"
-    color="primary"
-  >
-    {{ label || "Tab" }}
-  </v-btn>
+    :title="label || 'Tab'"
+  />
 </template>
 
 <style scoped>
 .tab-link-item {
-  text-transform: none;
-  font-weight: 600;
-  border-radius: 999px;
+  flex: 0 0 auto;
 }
 </style>

package/templates/src/components/menus/TabLinkItem.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: ""
   },
+  icon: {
+    type: String,
+    default: ""
+  },
   surface: {
     type: String,
     default: ""

package/test/linkItemScaffoldContract.test.js

@@ -71,6 +71,7 @@ test("shell-web scaffolds app-owned local link-item wrappers under src/component
   assert.match(tabWrapperSource, /@jskit-ai\/shell-web\/client\/components\/ShellTabLinkItem/);
   assert.match(menuWrapperSource, /exact:\s*\{/);
   assert.match(surfaceAwareWrapperSource, /exact:\s*\{/);
+  assert.match(tabWrapperSource, /icon:\s*\{/);
 
   assert.deepEqual(findFileMutation("shell-web-component-menu-link-item"), {
     from: "templates/src/components/menus/MenuLinkItem.vue",
@@ -129,7 +130,7 @@ test("shell-web scaffolds app-owned local link-item wrappers under src/component
   assert.equal(await readLocalLinkItemComponentSource("local.main.ui.tab-link-item"), tabWrapperSource);
 });
 
-test("shell-web generic menu link items support exact route matching", async () => {
+test("shell-web generic link items support the expected shared route and icon behavior", async () => {
   const shellMenuSource = await readFile(
     path.join(PACKAGE_DIR, "src", "client", "components", "ShellMenuLinkItem.vue"),
     "utf8"
@@ -138,11 +139,19 @@ test("shell-web generic menu link items support exact route matching", async ()
     path.join(PACKAGE_DIR, "src", "client", "components", "ShellSurfaceAwareMenuLinkItem.vue"),
     "utf8"
   );
+  const shellTabSource = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "components", "ShellTabLinkItem.vue"),
+    "utf8"
+  );
 
   assert.match(shellMenuSource, /exact:\s*\{/);
   assert.match(shellMenuSource, /:exact="props\.exact"/);
   assert.match(shellSurfaceAwareSource, /exact:\s*\{/);
   assert.match(shellSurfaceAwareSource, /:exact="props\.exact"/);
+  assert.match(shellTabSource, /icon:\s*\{/);
+  assert.match(shellTabSource, /resolveMenuLinkIcon/);
+  assert.match(shellTabSource, /<v-list-item/);
+  assert.match(shellTabSource, /:prepend-icon="resolvedIcon \|\| undefined"/);
 });
 
 test("shell-web binds the local link-item wrapper tokens into MainClientProvider", () => {