@docsector/docsector-reader 3.1.0 → 3.2.1

package/src/pages/manual/components/d-page-section.showcase.pt-BR.md

@@ -1,43 +0,0 @@
-## Demonstração
-
-Aqui está o source Markdown que renderiza o conteúdo que você vê na aba Overview:
-
-```
-## Título da Seção
-
-Texto de parágrafo com **negrito** e *itálico*.
-
-- Item um
-- Item dois
-- Item três
-
-| Coluna A | Coluna B |
-|----------|----------|
-| Célula 1 | Célula 2 |
-
-### Sub-Seção
-
-Mais conteúdo aqui.
-```
-
-Cada elemento se torna um token no tokenizador do DPageSection. Títulos criam âncoras na árvore de ToC à direita.
-
-## Elementos Markdown Suportados
-
-DPageSection renderiza os seguintes elementos Markdown:
-
-- Títulos (H2 até H6)
-- Parágrafos com formatação inline (negrito, itálico, links, código)
-- Listas ordenadas e não ordenadas
-- Tabelas com cabeçalhos
-- Blocos de código cercados com syntax highlighting
-
-## Bloco de Código com Nome de Arquivo
-
-Use o atributo `:filename;` para exibir um cabeçalho com nome de arquivo:
-
-```php
-echo "Olá, Docsector!";
-```
-
-O nome do arquivo aparece na barra de info acima do bloco de código junto com o identificador de linguagem.

package/src/pages/manual/components/d-page-source-code.overview.en-US.md

@@ -1,68 +0,0 @@
-## Overview
-
-`DPageSourceCode` renders **fenced code blocks** with syntax highlighting, line numbers, copy-to-clipboard functionality, optional filename display, tabs, and breadcrumbs. It uses **Prism.js** for highlighting.
-
-## Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `index` | `Number` | Yes | — | Unique index for anchor generation |
-| `language` | `String` | No | `'html'` | Programming language for highlighting |
-| `text` | `String` | No | `''` | Raw code text to display in simple mode |
-| `filename` | `String` | No | `''` | Optional filename shown in the info bar |
-| `breadcrumbs` | `Array` | No | `[]` | Breadcrumb segments shown above the code block |
-| `tabs` | `Array` | No | `[]` | Tab items with label, language, text, and breadcrumbs |
-
-## Supported Languages
-
-Out of the box, DPageSourceCode supports:
-
-- **PHP** — via `prismjs/components/prism-php`
-- **Bash** — via `prismjs/components/prism-bash`
-- **HTML** — built-in Prism support
-- **JavaScript** — built-in Prism support
-
-To add more languages, import additional Prism components in `DPageSourceCode.vue`.
-
-## Features
-
-### Syntax Highlighting
-
-Code is highlighted at render time using `Prism.highlight()`. The highlighted HTML is injected via `v-html` into a `<code>` element.
-
-### Line Numbers
-
-When the code block has more than 1 line, line numbers are displayed on the left side. Each line number is a clickable anchor link.
-
-### Copy to Clipboard
-
-A copy button appears in the info bar. When clicked, it selects the current code content and copies it to the clipboard using `document.execCommand('copy')`.
-
-### Tabs
-
-Consecutive fenced code blocks with the same `group` attribute are rendered as tabs. Each block can define its visible tab label with `tab`; use that label as the filename when the group should look like editor tabs.
-
-### Breadcrumbs
-
-When a `breadcrumb` attribute is provided, it is rendered above the code block. Use `>` between segments, such as `src > components > DPageSourceCode.vue`.
-
-### File Icons
-
-Tab labels that look like filenames, such as `App.vue`, receive a Material Icon Theme file icon inline before the text. Breadcrumbs add the same file icon only to the final segment when that segment looks like a filename.
-
-### Filename Display
-
-When a `filename` prop is provided (extracted from the `:filename;` Markdown attribute), it appears in the info bar alongside the language identifier.
-
-## Dark/Light Theme
-
-DPageSourceCode has completely separate color schemes for:
-
-- **Light mode** (`.white` class) — Traditional light syntax colors
-- **Dark mode** (`.dark` class) — Dark background with vibrant token colors
-
-The color scheme is automatically selected based on `$q.dark.isActive`.
-
-## Anchor System
-
-Each code block gets a letter-based anchor (A, B, C, ..., Z, AA, AB, ...) generated from its index. Line numbers within the code block are appended to this anchor (e.g., `#A1`, `#A2`).

package/src/pages/manual/components/d-page-source-code.overview.pt-BR.md

@@ -1,68 +0,0 @@
-## Visão Geral
-
-`DPageSourceCode` renderiza **blocos de código cercados** com syntax highlighting, números de linha, funcionalidade de copiar para clipboard, exibição opcional de nome de arquivo, abas e breadcrumbs. Usa **Prism.js** para highlighting.
-
-## Props
-
-| Prop | Tipo | Obrigatório | Padrão | Descrição |
-|------|------|-------------|--------|-----------|
-| `index` | `Number` | Sim | — | Índice único para geração de âncora |
-| `language` | `String` | Não | `'html'` | Linguagem de programação para highlighting |
-| `text` | `String` | Não | `''` | Texto de código bruto para exibir no modo simples |
-| `filename` | `String` | Não | `''` | Nome de arquivo opcional exibido na barra de info |
-| `breadcrumbs` | `Array` | Não | `[]` | Segmentos de breadcrumb exibidos acima do bloco de código |
-| `tabs` | `Array` | Não | `[]` | Itens de aba com label, linguagem, texto e breadcrumbs |
-
-## Linguagens Suportadas
-
-Por padrão, DPageSourceCode suporta:
-
-- **PHP** — via `prismjs/components/prism-php`
-- **Bash** — via `prismjs/components/prism-bash`
-- **HTML** — suporte embutido do Prism
-- **JavaScript** — suporte embutido do Prism
-
-Para adicionar mais linguagens, importe componentes adicionais do Prism em `DPageSourceCode.vue`.
-
-## Funcionalidades
-
-### Syntax Highlighting
-
-O código é destacado em tempo de renderização usando `Prism.highlight()`. O HTML destacado é injetado via `v-html` em um elemento `<code>`.
-
-### Números de Linha
-
-Quando o bloco de código tem mais de 1 linha, números de linha são exibidos no lado esquerdo. Cada número de linha é um link de âncora clicável.
-
-### Copiar para Clipboard
-
-Um botão de cópia aparece na barra de info. Quando clicado, seleciona o conteúdo de código atual e copia para o clipboard usando `document.execCommand('copy')`.
-
-### Abas
-
-Blocos de código cercados consecutivos com o mesmo atributo `group` são renderizados como abas. Cada bloco pode definir seu rótulo visível com `tab`; use esse rótulo como nome do arquivo quando o grupo deve parecer abas de editor.
-
-### Breadcrumbs
-
-Quando um atributo `breadcrumb` é fornecido, ele é renderizado acima do bloco de código. Use `>` entre segmentos, como `src > components > DPageSourceCode.vue`.
-
-### Ícones de Arquivo
-
-Labels de abas que parecem nomes de arquivo, como `App.vue`, recebem um ícone do Material Icon Theme inline antes do texto. Breadcrumbs adicionam o mesmo ícone apenas ao segmento final quando esse segmento parece um nome de arquivo.
-
-### Exibição de Nome de Arquivo
-
-Quando a prop `filename` é fornecida (extraída do atributo Markdown `:filename;`), ela aparece na barra de info junto com o identificador de linguagem.
-
-## Tema Escuro/Claro
-
-DPageSourceCode tem esquemas de cores completamente separados para:
-
-- **Modo claro** (classe `.white`) — Cores de sintaxe tradicionais claras
-- **Modo escuro** (classe `.dark`) — Fundo escuro com cores vibrantes de token
-
-O esquema de cores é selecionado automaticamente baseado em `$q.dark.isActive`.
-
-## Sistema de Âncoras
-
-Cada bloco de código recebe uma âncora baseada em letras (A, B, C, ..., Z, AA, AB, ...) gerada a partir do seu índice. Números de linha dentro do bloco são adicionados a esta âncora (ex: `#A1`, `#A2`).

package/src/pages/manual/components/d-page.overview.en-US.md

@@ -1,59 +0,0 @@
-## Overview
-
-`DPage` is the **main page container** component. It provides the scroll area, submenu toolbar (Overview/Showcase/Vs tabs), the right-side anchor drawer, and the `DPageMeta` footer.
-
-Every documentation page is rendered inside a `DPage` instance.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `disableNav` | `Boolean` | `false` | Hides the DPageMeta navigation footer |
-| `showBackToTopControl` | `Boolean` | `false` | Enables the floating back-to-top control with circular reading progress |
-
-## Template Structure
-
-DPage renders the following layout:
-
-- **QPageContainer** — Quasar page container
-- **QToolbar** (submenu) — Tab navigation: Overview, Showcase, Vs
-- **QPage** with **QScrollArea** — Scrollable content area with slot
-- **QDrawer** (right) — Anchor/ToC navigation tree
-
-## Slot
-
-The default slot receives the page content. Typically, `DSubpage` places `DH1` and `DPageSection` inside this slot:
-
-```html
-<d-page>
-  <header>
-    <d-h1 :id="0" />
-  </header>
-  <main>
-    <d-page-section :id="sectionId" />
-  </main>
-</d-page>
-```
-
-## Subpage Tabs
-
-DPage reads the route's `meta.subpages` configuration to determine which tabs to display:
-
-- **Overview** — Always shown when other tabs exist
-- **Showcase** — Shown when `subpages.showcase: true`
-- **Vs** — Shown when `subpages.vs: true`
-
-## Scroll Behavior
-
-DPage resets the scroll position on route changes via `router.beforeEach`. The scroll observer monitors vertical scroll position and updates the anchor selection via the `useNavigator` composable.
-
-When `showBackToTopControl` is enabled, DPage also derives reading progress from the same scroll container. The floating control stays hidden at the top, appears after a small amount of scroll, shows circular progress, and returns to anchor `0` when clicked.
-
-## Store Integration
-
-DPage reads from and writes to several Vuex store modules:
-
-- `layout/meta` — Controls the right-side anchor drawer visibility
-- `page/base` — Current page base path
-- `page/relative` — Current subpage path (`/overview`, `/showcase`, `/vs`)
-- `page/anchor` — Resets anchors on navigation

package/src/pages/manual/components/d-page.overview.pt-BR.md

@@ -1,59 +0,0 @@
-## Visão Geral
-
-`DPage` é o componente **container principal de página**. Ele fornece a área de scroll, a barra de submenu (abas Overview/Showcase/Vs), o drawer lateral de âncoras e o rodapé `DPageMeta`.
-
-Toda página de documentação é renderizada dentro de uma instância de `DPage`.
-
-## Props
-
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `disableNav` | `Boolean` | `false` | Oculta o rodapé de navegação DPageMeta |
-| `showBackToTopControl` | `Boolean` | `false` | Habilita o controle flutuante de voltar ao topo com progresso circular de leitura |
-
-## Estrutura do Template
-
-DPage renderiza o seguinte layout:
-
-- **QPageContainer** — Container de página Quasar
-- **QToolbar** (submenu) — Navegação por abas: Overview, Showcase, Vs
-- **QPage** com **QScrollArea** — Área de conteúdo com scroll e slot
-- **QDrawer** (direita) — Árvore de navegação por âncoras/ToC
-
-## Slot
-
-O slot padrão recebe o conteúdo da página. Normalmente, `DSubpage` coloca `DH1` e `DPageSection` dentro deste slot:
-
-```html
-<d-page>
-  <header>
-    <d-h1 :id="0" />
-  </header>
-  <main>
-    <d-page-section :id="sectionId" />
-  </main>
-</d-page>
-```
-
-## Abas de Sub-página
-
-DPage lê a configuração `meta.subpages` da rota para determinar quais abas exibir:
-
-- **Overview** — Sempre exibida quando outras abas existem
-- **Showcase** — Exibida quando `subpages.showcase: true`
-- **Vs** — Exibida quando `subpages.vs: true`
-
-## Comportamento de Scroll
-
-DPage reseta a posição de scroll nas mudanças de rota via `router.beforeEach`. O observador de scroll monitora a posição vertical e atualiza a seleção de âncora via composable `useNavigator`.
-
-Quando `showBackToTopControl` está habilitada, DPage também deriva o progresso de leitura a partir da mesma área de scroll. O controle flutuante fica oculto no topo, aparece após uma pequena rolagem, exibe progresso circular e retorna para a âncora `0` ao ser clicado.
-
-## Integração com Store
-
-DPage lê e escreve em vários módulos da Vuex store:
-
-- `layout/meta` — Controla a visibilidade do drawer de âncoras
-- `page/base` — Caminho base da página atual
-- `page/relative` — Caminho da sub-página (`/overview`, `/showcase`, `/vs`)
-- `page/anchor` — Reseta âncoras na navegação

package/src/pages/manual/components/d-page.showcase.en-US.md

@@ -1,35 +0,0 @@
-## Showcase
-
-Here is an example of how DPage is used inside DSubpage:
-
-```html
-<template>
-  <d-page>
-    <header>
-      <d-h1 :id="0" />
-    </header>
-    <main>
-      <d-page-section :id="id" />
-    </main>
-  </d-page>
-</template>
-```
-
-The submenu toolbar automatically adapts to the page configuration. If only Overview is configured, the toolbar shows a single tab. When Showcase or Vs tabs are enabled, the toolbar expands with labeled buttons.
-
-## Mobile Behavior
-
-On mobile devices (`$q.screen.lt.md`), the submenu button labels are hidden, showing only icons. The right-side anchor drawer becomes an overlay that can be toggled with the tree icon button.
-
-## Custom Content Example
-
-You can also use DPage with `disableNav` to create standalone pages without the bottom navigation:
-
-```html
-<d-page :disable-nav="true">
-  <div class="text-center q-pa-lg">
-    <h2>Custom Page Content</h2>
-    <p>No bottom nav, no prev/next links.</p>
-  </div>
-</d-page>
-```

package/src/pages/manual/components/d-page.showcase.pt-BR.md

@@ -1,35 +0,0 @@
-## Demonstração
-
-Veja como DPage é usado dentro do DSubpage:
-
-```html
-<template>
-  <d-page>
-    <header>
-      <d-h1 :id="0" />
-    </header>
-    <main>
-      <d-page-section :id="id" />
-    </main>
-  </d-page>
-</template>
-```
-
-A barra de submenu se adapta automaticamente à configuração da página. Se apenas Overview estiver configurado, a barra mostra uma única aba. Quando as abas Showcase ou Vs estão habilitadas, a barra expande com botões rotulados.
-
-## Comportamento Mobile
-
-Em dispositivos móveis (`$q.screen.lt.md`), os labels dos botões do submenu ficam ocultos, mostrando apenas ícones. O drawer de âncoras à direita se torna um overlay que pode ser alternado com o botão de ícone de árvore.
-
-## Exemplo de Conteúdo Customizado
-
-Você também pode usar DPage com `disableNav` para criar páginas standalone sem navegação inferior:
-
-```html
-<d-page :disable-nav="true">
-  <div class="text-center q-pa-lg">
-    <h2>Conteúdo Customizado</h2>
-    <p>Sem nav inferior, sem links prev/next.</p>
-  </div>
-</d-page>
-```

package/src/pages/manual/components/q-zoom.overview.en-US.md

@@ -1,71 +0,0 @@
-## Overview
-
-`QZoom` is a **zoom overlay** component forked from `quasarframework/app-extension-qzoom` and ported from Vue 2 to Vue 3. It enables any content to be zoomed into a fullscreen overlay with optional scaling.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `backgroundColor` | `String` | `'white'` | Background color of the overlay |
-| `restoreOnScroll` | `Boolean` | `false` | Close zoom when user scrolls |
-| `manual` | `Boolean` | `false` | Disable automatic click-to-zoom |
-| `scale` | `Boolean` | `false` | Enable mouse wheel scaling |
-| `initialScale` | `Number` | `1.0` | Initial scale (0.05–10) |
-| `scaleText` | `Boolean` | `false` | Enable font-size scaling instead of transform |
-| `initialScaleText` | `Number` | `100` | Initial font-size percentage (50–500) |
-| `noCenter` | `Boolean` | `false` | Don't center content in overlay |
-| `noWheelScale` | `Boolean` | `false` | Disable mouse wheel scaling |
-| `noEscClose` | `Boolean` | `false` | Disable Escape key to close |
-
-## Events
-
-| Event | Payload | Description |
-|-------|---------|-------------|
-| `before-zoom` | — | Emitted before zoom animation starts |
-| `zoomed` | — | Emitted after zoom animation completes |
-| `before-restore` | — | Emitted before restore animation starts |
-| `restored` | — | Emitted after restore animation completes |
-| `scale` | `Number` | Emitted when scale value changes |
-| `scale-text` | `Number` | Emitted when text scale value changes |
-
-## Slot
-
-The default slot receives a `zoomed` Boolean indicating the current zoom state:
-
-```html
-<q-zoom>
-  <template v-slot:default="&#123; zoomed &#125;">
-    <img src="diagram.png" :class="zoomed ? 'zoomed' : ''" />
-  </template>
-</q-zoom>
-```
-
-## How It Works
-
-1. By default, clicking toggles between normal and fullscreen
-2. An overlay is created with a smooth transition (500ms zoom in, 400ms restore)
-3. During zoom, body scroll is disabled (unless `restoreOnScroll` is true)
-4. Press **Escape** to close (unless `noEscClose` is true)
-
-## Scaling Modes
-
-Two mutually exclusive scaling modes:
-
-- **Transform scale** (`scale` prop) — Scales the entire content using CSS `transform: scale()`
-- **Font-size scale** (`scaleText` prop) — Adjusts the content's `font-size` percentage
-
-Mouse wheel scrolling adjusts the scale value when zoomed (unless `noWheelScale` is true).
-
-## Boot Registration
-
-QZoom is registered globally via `src/boot/QZoom.js`:
-
-```javascript
-app.component('QZoom', QZoom)
-```
-
-This makes `<q-zoom>` available in all templates without explicit imports.
-
-## Dependencies
-
-QZoom requires the `q-colorize-mixin` package for background color handling, and `QZoom.styl` for its CSS styles.

package/src/pages/manual/components/q-zoom.overview.pt-BR.md

@@ -1,71 +0,0 @@
-## Visão Geral
-
-`QZoom` é um componente de **overlay de zoom** forked de `quasarframework/app-extension-qzoom` e portado de Vue 2 para Vue 3. Ele permite que qualquer conteúdo seja ampliado em um overlay fullscreen com escala opcional.
-
-## Props
-
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `backgroundColor` | `String` | `'white'` | Cor de fundo do overlay |
-| `restoreOnScroll` | `Boolean` | `false` | Fecha zoom quando o usuário faz scroll |
-| `manual` | `Boolean` | `false` | Desabilita click-to-zoom automático |
-| `scale` | `Boolean` | `false` | Habilita escala com roda do mouse |
-| `initialScale` | `Number` | `1.0` | Escala inicial (0.05–10) |
-| `scaleText` | `Boolean` | `false` | Habilita escala de font-size ao invés de transform |
-| `initialScaleText` | `Number` | `100` | Porcentagem inicial de font-size (50–500) |
-| `noCenter` | `Boolean` | `false` | Não centraliza conteúdo no overlay |
-| `noWheelScale` | `Boolean` | `false` | Desabilita escala com roda do mouse |
-| `noEscClose` | `Boolean` | `false` | Desabilita tecla Escape para fechar |
-
-## Eventos
-
-| Evento | Payload | Descrição |
-|--------|---------|-----------|
-| `before-zoom` | — | Emitido antes da animação de zoom iniciar |
-| `zoomed` | — | Emitido após a animação de zoom completar |
-| `before-restore` | — | Emitido antes da animação de restaurar iniciar |
-| `restored` | — | Emitido após a animação de restaurar completar |
-| `scale` | `Number` | Emitido quando o valor de escala muda |
-| `scale-text` | `Number` | Emitido quando o valor de escala de texto muda |
-
-## Slot
-
-O slot padrão recebe um Boolean `zoomed` indicando o estado de zoom atual:
-
-```html
-<q-zoom>
-  <template v-slot:default="&#123; zoomed &#125;">
-    <img src="diagrama.png" :class="zoomed ? 'zoomed' : ''" />
-  </template>
-</q-zoom>
-```
-
-## Como Funciona
-
-1. Por padrão, clicar alterna entre normal e fullscreen
-2. Um overlay é criado com transição suave (500ms zoom in, 400ms restore)
-3. Durante o zoom, o scroll do body é desabilitado (a menos que `restoreOnScroll` seja true)
-4. Pressione **Escape** para fechar (a menos que `noEscClose` seja true)
-
-## Modos de Escala
-
-Dois modos de escala mutuamente exclusivos:
-
-- **Transform scale** (prop `scale`) — Escala todo o conteúdo usando CSS `transform: scale()`
-- **Font-size scale** (prop `scaleText`) — Ajusta a porcentagem de `font-size` do conteúdo
-
-Scroll com roda do mouse ajusta o valor de escala quando ampliado (a menos que `noWheelScale` seja true).
-
-## Registro via Boot
-
-QZoom é registrado globalmente via `src/boot/QZoom.js`:
-
-```javascript
-app.component('QZoom', QZoom)
-```
-
-Isso torna `<q-zoom>` disponível em todos os templates sem imports explícitos.
-
-## Dependências
-
-QZoom requer o pacote `q-colorize-mixin` para tratamento de cor de fundo, e `QZoom.styl` para seus estilos CSS.

package/src/pages/manual/composables/use-navigator.overview.en-US.md

@@ -1,89 +0,0 @@
-## Overview
-
-`useNavigator` is the **core composable** that manages anchor navigation, heading registration, scroll tracking, and ToC tree construction. It is used by DH1–DH6, DPage, and DPageAnchor.
-
-## Returned API
-
-```javascript
-const {
-  register,   // Register an anchor ID
-  index,       // Add a node to the ToC tree
-  select,      // Select an anchor
-  anchor,      // Scroll to an anchor
-  scrolling,   // Scroll event handler
-  navigate,    // Navigate to an anchor (URL + scroll)
-  selected     // Ref to currently selected anchor
-} = useNavigator()
-```
-
-## Functions
-
-### register(id)
-
-Registers an anchor ID in the `page/anchors` store array. Called by heading components on mount.
-
-```javascript
-onMounted(() => {
-  register(props.id)
-})
-```
-
-### index(id, child)
-
-Pushes a node into the `page/nodes` store to build the ToC tree. Called by DH2–DH6 after rendering.
-
-### select(id)
-
-Updates `page/anchor` state and expands the corresponding tree node.
-
-### anchor(id, toSelect)
-
-Scrolls the viewport to the DOM element with the given ID using Quasar's `scroll` utility. Optionally calls `select()` to highlight the node in the ToC tree.
-
-### scrolling(scroll)
-
-The scroll event handler attached to DPage's QScrollObserver. It iterates all registered anchors, finds the one closest to the current scroll position, and selects it. Only active when `page/scrolling` is `true`.
-
-### navigate(value, toAnchor)
-
-Full navigation function that:
-
-1. Updates the URL hash via `router.push()`
-2. Scrolls to the anchor element
-3. Handles desktop vs mobile timing differences
-
-## Usage Pattern
-
-Heading components use register + index:
-
-```javascript
-const { register, index, navigate, selected } = useNavigator()
-
-onMounted(() => {
-  register(props.id)
-  selected.value = props.value
-  index(props.id)
-})
-```
-
-DPage uses scrolling:
-
-```javascript
-const { scrolling, navigate } = useNavigator()
-// scrolling is passed to QScrollObserver
-```
-
-DPageAnchor uses navigate + anchor:
-
-```javascript
-const { navigate, anchor, selected } = useNavigator()
-// navigate is triggered by QTree selection
-```
-
-## Store Dependencies
-
-- `page/anchors` — Array of registered anchor IDs
-- `page/nodes` — ToC tree structure
-- `page/nodesExpanded` — Expanded tree nodes
-- `page/anchor` — Currently selected anchor
-- `page/scrolling` — Whether scroll tracking is active