ebt-vue3 2.49.2 → 2.50.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ebt-vue3",
-  "version": "2.49.2",
+  "version": "2.50.2",
   "description": "Vue3 Library for SuttaCentral Voice EBT-Sites",
   "author": "Karl Lew",
   "scripts": {
@@ -46,7 +46,7 @@
     "merkle-json": "^2.13.0",
     "pinia": "^2.0.16",
     "roboto-fontface": "*",
-    "scv-esm": "^1.132.25",
+    "scv-esm": "^1.132.27",
     "serve-favicon": "^2.5.0",
     "uuid": "^9.0.0",
     "vite-plugin-vuetify": "^2.0.3",

package/src/components/SuttaView.vue

@@ -119,6 +119,46 @@
 
       card.onAfterMounted({settings, volatile});
     },
+    watch: {
+      'card.location': {
+        async handler(newLoc, oldLoc) {
+          const msg = 'SuttaView.watch.card.location()';
+          const dbg = DBG.MOUNTED;
+
+          // Skip if no previous location (initial mount handles this)
+          if (!oldLoc || !newLoc) return;
+
+          // Skip if same sutta_uid (just segment change)
+          if (newLoc[0] === oldLoc[0]) return;
+
+          dbg && console.log(msg, '[1]location changed', {newLoc, oldLoc});
+
+          // Reload sutta data for new location
+          let { suttas, settings, volatile, card, config } = this;
+          let ref = {
+            sutta_uid: newLoc[0],
+            lang: newLoc[1],
+            author: newLoc[2],
+          };
+          let suttaRef = SuttaRef.create(ref);
+          if (suttaRef == null) {
+            let eMsg = `Invalid SuttaRef ${JSON.stringify(ref)}`;
+            console.log(msg, eMsg);
+            volatile.alert(eMsg);
+            return;
+          }
+          let { sutta_uid, lang, author } = suttaRef;
+          dbg && console.log(msg, `[2]reloading suttaRef:${suttaRef}`);
+          let idbSuttaRef = await suttas.getIdbSuttaRef({
+            sutta_uid, lang, author
+          });
+          this.idbSuttaRef = idbSuttaRef?.value;
+
+          card.onAfterMounted({settings, volatile});
+        },
+        deep: true,
+      },
+    },
     methods: {
       segKey(card, seg) {
         let rawId = `${seg.scid}_CARD${card.id.substring(0,8)}`;

package/test/card-factory.mjs

@@ -164,6 +164,84 @@ class MockSettings {
 
     should(nAdd).equal(1);
   });
+  it("pathToCard() creates new card for different sutta", () => {
+    // Bug test: navigating from mn1 to mn3 should create separate cards
+    let cf = new CardFactory();
+    let cards = [];
+    let langTrans = "en";
+    let defaultLang = langTrans;
+    let addCard = (opts) => {
+      let card = new EbtCard(Object.assign({langTrans}, opts));
+      cards.push(card);
+      return card;
+    };
+
+    // Create card for mn1
+    let cardMN1 = cf.pathToCard({
+      path: '/sutta/mn1/en/sujato',
+      cards,
+      addCard,
+      defaultLang
+    });
+    should(cards.length).equal(1);
+    should(cardMN1.location[0]).match(/mn1/);
+
+    // Navigate to mn3 - should create NEW card (different sutta_uid)
+    let cardMN3 = cf.pathToCard({
+      path: '/sutta/mn3/en/sujato',
+      cards,
+      addCard,
+      defaultLang
+    });
+
+    // Bug check: If mn3 card !== mn1 card, new card was created (correct)
+    // If mn3 card === mn1 card with location still mn1, bug exists
+    should(cards.length).equal(2); // Two separate cards
+    should(cardMN3.location[0]).match(/mn3/);
+    should(cardMN3).not.equal(cardMN1);
+  });
+  it("pathToCard() handles path with query params before hash", () => {
+    // Test: URL like ?src=sc#/sutta/mn3/en/sujato
+    let cf = new CardFactory();
+    let cards = [];
+    let langTrans = "en";
+    let defaultLang = langTrans;
+    let addCard = (opts) => {
+      let card = new EbtCard(Object.assign({langTrans}, opts));
+      cards.push(card);
+      return card;
+    };
+
+    // Test various path formats that might come from Vue Router
+    let card1 = cf.pathToCard({
+      path: '/sutta/mn3/en/sujato',  // Normal path
+      cards,
+      addCard,
+      defaultLang
+    });
+    should(cards.length).equal(1);
+    should(card1.location[0]).match(/mn3/);
+
+    // Test with hash prefix (shouldn't happen from Vue Router, but test anyway)
+    let card2 = cf.pathToCard({
+      path: '#/sutta/mn4/en/sujato',
+      cards,
+      addCard,
+      defaultLang
+    });
+    should(cards.length).equal(2);
+    should(card2.location[0]).match(/mn4/);
+
+    // Test with full URL format including query string (edge case)
+    let card3 = cf.pathToCard({
+      path: '?src=sc#/sutta/mn5/en/sujato',
+      cards,
+      addCard,
+      defaultLang
+    });
+    should(cards.length).equal(3);
+    should(card3.location[0]).match(/mn5/);
+  });
   it("pathToCard() /#", ()=>{
     let cf = new CardFactory();
     let cards = [];