@docsector/docsector-reader 2.0.2 → 2.0.3

package/README.md

@@ -47,6 +47,7 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🌍 **Internationalization (i18n)** — Multi-language support with HJSON locale files and per-page translations
 - 🌗 **Dark/Light Mode** — Automatic theme switching with Quasar Dark Plugin
 - 🔗 **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking and auto-scroll to active section
+- 🖱️ **Active Menu Item UX** — Active menu entries keep pointer cursor, clear URL hash without redundant navigation, and prevent accidental label text selection
 - 🔎 **Search** — Menu search across all documentation content and tags
 - 🌐 **WebMCP Browser Tools** — Registers in-page tools for browser agents with `registerTool` and optional `provideContext` fallback
 - 📱 **Responsive** — Mobile-friendly with collapsible sidebar and drawers

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '2.0.2'
+const VERSION = '2.0.3'
 
 const HELP = `
   Docsector Reader v${VERSION}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/src/components/DMenuItem.vue

@@ -1,12 +1,15 @@
 <script setup>
 // defineProps is a compiler macro in <script setup>, no import needed
-import { useRoute } from 'vue-router'
-import { useQuasar } from 'quasar'
+import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 
 import { namespacedLabelI18nPath, routeTitleI18nPath } from '../i18n/path'
 
-const props = defineProps({
+const $route = useRoute()
+const $router = useRouter()
+const { t } = useI18n()
+
+defineProps({
   items: {
     type: Number,
     required: true
@@ -24,24 +27,20 @@ const props = defineProps({
     required: true
   },
   founds: {
-    type: [Boolean, Array],
+    type: [Boolean, Array, Object],
     required: true
   }
 })
 
-const $q = useQuasar()
-const $route = useRoute()
-const { t } = useI18n()
-
-const getMenuItemHeaderBackground = () => {
-  return $q.dark.isActive ? 'background-color: #1D1D1D !important' : 'background-color: #f5f5f5 !important'
-}
+const getMenuItemLabel = (item) => {
+  if (!item?.path) {
+    return ''
+  }
 
-const getMenuItemLabel = (item, index) => {
   return t(routeTitleI18nPath(item.path))
 }
 
-const getMenuItemSubheader = (meta) => {
+const getMenuItemSubheader = (meta = {}) => {
   const subheader = meta.menu?.subheader
   if (!subheader) {
     return ''
@@ -97,28 +96,54 @@ const normalizePath = (path) => {
 const isMenuItemActive = (path) => {
   return normalizePath(path) === normalizePath($route.path)
 }
+
+const getMenuItemTargetPath = (path) => {
+  return `${path}/overview/`
+}
+
+const getMenuItemTo = (path) => {
+  return getMenuItemTargetPath(path)
+}
+
+const onMenuItemClick = (event, path, currentSubpage) => {
+  const currentPath = `${path}${currentSubpage}`
+  if (!isMenuItemActive(currentPath)) {
+    return
+  }
+
+  event?.preventDefault?.()
+  event?.stopPropagation?.()
+
+  if ($route.hash) {
+    $router.replace({ path: $route.path, hash: '' })
+  }
+}
 </script>
 
 <template>
 <!-- Menu Separator - Subheader -->
-<q-item-section v-if="subitem.meta.menu?.subheader">
+<q-item-section v-if="subitem?.meta?.menu?.subheader">
   <q-item-label class="label subheader" header>
     {{ getMenuItemSubheader(subitem.meta) }}
   </q-item-label>
 </q-item-section>
 
 <q-item
-  :to="subitem.path + '/overview/'"
+  v-if="subitem?.path"
+  :to="getMenuItemTo(subitem.path)"
   :active="isMenuItemActive(subitem.path + subpage)"
+  :class="{ 'd-menu-item--active': isMenuItemActive(subitem.path + subpage) }"
+  clickable
+  @click="onMenuItemClick($event, subitem.path, subpage)"
   v-show="founds[subitem.path] || !founds"
 >
   <q-item-section side>
-    <q-icon v-if="subitem.meta.icon" :name="subitem.meta.icon" />
+    <q-icon v-if="subitem?.meta?.icon" :name="subitem.meta.icon" />
   </q-item-section>
   <q-item-section>
-    {{ getMenuItemLabel(subitem, subindex) }}
+    {{ getMenuItemLabel(subitem) }}
   </q-item-section>
-  <q-item-section class="page-status" v-if="subitem.meta.status !== 'done'" side>
+  <q-item-section class="page-status" v-if="subitem?.meta && subitem.meta.status !== 'done'" side>
     <q-badge
       :text-color="getPageStatusTextColor(subitem.meta.status)"
       :color="getPageStatusColor(subitem.meta.status)"
@@ -129,10 +154,17 @@ const isMenuItemActive = (path) => {
 </q-item>
 
 <!-- Menu Separator -->
-<li v-if="subitem.meta.menu?.separator" role="listitem">
+<li v-if="subitem?.meta?.menu?.separator" role="listitem">
   <q-separator
     :class="'separator' + (subitem.meta.menu.separator === true ? '' : subitem.meta.menu.separator)"
     role="separator"
   />
 </li>
 </template>
+
+<style lang="sass">
+.d-menu-item--active
+  cursor: pointer
+  user-select: none
+  -webkit-user-select: none
+</style>

package/src/components/DPage.vue

@@ -94,6 +94,20 @@ const pActive = (relative) => {
   return null
 }
 
+const normalizeRoutePath = (path) => {
+  const normalized = String(path || '').trim()
+  if (normalized === '' || normalized === '/') {
+    return '/'
+  }
+
+  const sanitized = normalized.replace(/\/+$/, '')
+  return sanitized === '' ? '/' : sanitized
+}
+
+const isSameEffectivePage = (from, to) => {
+  return normalizeRoutePath(from?.path) === normalizeRoutePath(to?.path)
+}
+
 const subroute = (to) => {
   const base = '/' + store.state.page.base
   const relative = store.state.page.relative
@@ -204,7 +218,7 @@ onMounted(() => {
   router.beforeEach((to, from, next) => {
     resetPageScroll()
 
-    if (to.hash === '' && from.path !== to.path) {
+    if (to.hash === '' && !isSameEffectivePage(from, to)) {
       store.commit('page/resetAnchor')
       store.commit('page/resetAnchors')
       store.commit('page/resetNodes')

package/src/layouts/DefaultLayout.vue

@@ -294,11 +294,25 @@ function onBookTabChange (bookId) {
   }
 }
 
+const normalizeRoutePath = (path) => {
+  const normalized = String(path || '').trim()
+  if (normalized === '' || normalized === '/') {
+    return '/'
+  }
+
+  const sanitized = normalized.replace(/\/+$/, '')
+  return sanitized === '' ? '/' : sanitized
+}
+
+const isSameEffectivePage = (from, to) => {
+  return normalizeRoutePath(from?.path) === normalizeRoutePath(to?.path)
+}
+
 // --- created logic (runs at setup time) ---
 store.dispatch('app/configureLanguage', route.matched)
 
 router.afterEach((to, from) => {
-  if (!to.hash || (from.path !== to.path)) {
+  if (!isSameEffectivePage(from, to)) {
     store.dispatch('app/configureLanguage', to.matched)
   }
 })

package/src/pages/guide.book.js

@@ -7,6 +7,6 @@ export default defineBook({
   order: 2,
   color: {
     active: 'white',
-    inactive: 'secondary'
+    inactive: 'white'
   }
 })

package/src/pages/manual.book.js

@@ -7,6 +7,6 @@ export default defineBook({
   order: 1,
   color: {
     active: 'white',
-    inactive: 'primary'
+    inactive: 'white'
   }
 })