@todovue/tv-toc 1.0.2 → 1.1.0

package/README.md

@@ -16,13 +16,12 @@ A lightweight Vue 3 component to render a Table of Contents (TOC) for your artic
 
 > Demo: https://ui.todovue.blog/toc
 
----
 ## Table of Contents
 - [Features](#features)
 - [Installation](#installation)
 - [Usage of Styles](#usage-of-styles)
 - [Quick Start (SPA)](#quick-start-spa)
-- [Nuxt 3 / SSR Usage](#nuxt-3--ssr-usage)
+- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
 - [Component Registration Options](#component-registration-options)
 - [Props](#props)
 - [Composable: useToc](#composable-usetoc)
@@ -33,7 +32,6 @@ A lightweight Vue 3 component to render a Table of Contents (TOC) for your artic
 - [Contributing](#contributing)
 - [License](#license)
 
----
 ## Features
 - Simple and focused Table of Contents (TOC) component for Vue 3.
 - Supports nested sections via children links.
@@ -42,7 +40,6 @@ A lightweight Vue 3 component to render a Table of Contents (TOC) for your artic
 - Works in SPA (Vite, Vue CLI) and Nuxt 3 (with client-side rendering constraints).
 - Ships with minimal, customizable styles.
 
----
 ## Installation
 Using npm:
 ```bash
@@ -57,7 +54,6 @@ Using pnpm:
 pnpm add @todovue/tv-toc
 ```
 
----
 ## Usage of Styles
 
 ### Vue/Vite (SPA)
@@ -86,7 +82,6 @@ export default defineNuxtConfig({
 })
 ```
 
----
 ## Quick Start (SPA)
 Global registration (main.js / main.ts):
 ```js
@@ -139,8 +134,7 @@ const toc = {
 </template>
 ```
 
----
-## Nuxt 3 / SSR Usage
+## Nuxt 4 / SSR Usage
 Create a plugin file: `plugins/tv-toc.client.ts` (client-only because it uses `document` and `history` under the hood when scrolling):
 ```ts
 import { defineNuxtPlugin } from '#app'
@@ -169,7 +163,6 @@ import { TvToc } from '@todovue/tv-toc'
 </template>
 ```
 
----
 ## Component Registration Options
 | Approach                                      | When to use                       |
 |-----------------------------------------------|-----------------------------------|
@@ -177,11 +170,14 @@ import { TvToc } from '@todovue/tv-toc'
 | Local named import `{ TvToc }`                | Isolated/code-split contexts      |
 | Direct default import `import TvToc from ...` | Single use or manual registration |
 
----
 ## Props
-| Name | Type   | Default | Description                                                                | Required |
-|------|--------|---------|----------------------------------------------------------------------------|----------|
-| toc  | Object | -       | TOC configuration: title and list of links (with optional nested children) | `true`   |
+| Name            | Type    | Default    | Description                                                                | Required |
+|-----------------|---------|------------|----------------------------------------------------------------------------|----------|
+| toc             | Object  | -          | TOC configuration: title and list of links (with optional nested children) | `true`   |
+| marker          | Boolean | `false`    | Whether to display a visual marker for the active item.                    | `false`  |
+| collapsible     | Boolean | `false`    | Whether sublists can be collapsed/expanded.                                | `false`  |
+| activeClass     | String  | `'active'` | Custom CSS class for the active item.                                      | `false`  |
+| observerOptions | Object  | `{}`       | options to pass to the IntersectionObserver (rootMargin, threshold, etc).  | `false`  |
 
 ### `toc` shape
 ```ts
@@ -200,16 +196,17 @@ type Toc = {
 - `links`: Array of top-level sections.
   - `id`: Must match the `id` attribute of the target heading in your content.
   - `text`: Label shown in the TOC.
-  - `children`: Optional array of sub-sections, rendered as nested list.
+  - `children`: Optional array of subsections, rendered as nested list.
 
----
 ## Composable: `useToc`
 This composable is used internally by `TvToc` but can also be imported directly if needed.
 
 ```ts
 import { useToc } from '@todovue/tv-toc'
 
-const { formatId, scrollToId } = useToc()
+const { formatId, scrollToId } = useToc(links, {
+  rootMargin: '0px 0px -50% 0px'
+})
 ```
 
 ### API
@@ -220,7 +217,6 @@ const { formatId, scrollToId } = useToc()
 
 > Note: `scrollToId` accesses `document` and `history`, so it should run only in the browser (e.g. in event handlers or inside `onMounted`).
 
----
 ## Customization (Styles)
 The component ships with minimal default styles, exposed through the built CSS file and scoped CSS classes.
 
@@ -254,13 +250,11 @@ You can override these styles in your own global stylesheet:
 
 If you are using SCSS, you can also rely on your own design tokens and overrides. The package itself internally uses SCSS (see `src/assets/scss/_variables.scss` and `src/assets/scss/style.scss`).
 
----
 ## SSR Notes
 - The component can be rendered on the server (template is static), but scrolling behavior uses browser APIs.
 - `scrollToId` uses `document.getElementById` and `history.pushState`; these are only invoked in event handlers on the client.
 - When using Nuxt 3, prefer registering `TvToc` in a `*.client.ts` plugin or wrap usages in `<client-only>` to avoid hydration edge cases in environments with stricter SSR.
 
----
 ## Examples
 This repository includes a small demo application built with Vite.
 
@@ -269,7 +263,6 @@ This repository includes a small demo application built with Vite.
 
 To run the demo locally, see the [Development](#development) section.
 
----
 ## Development
 ```bash
 git clone https://github.com/TODOvue/tv-toc.git
@@ -285,15 +278,11 @@ To build the standalone demo used for documentation:
 npm run build:demo
 ```
 
----
 ## Contributing
 PRs and issues are welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
 
----
 ## License
 MIT © TODOvue
 
----
 ### Attributions
 Crafted for the TODOvue component ecosystem
-

package/dist/tv-toc.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),g=(r=[])=>{const a=e.ref(null),d=e.ref(null);let s=null;const u=c=>`#${c}`,v=c=>{const t=document.getElementById(c);t&&(t.scrollIntoView({behavior:"smooth"}),history.pushState(null,null,`#${c}`))},h=c=>{const t=[];return c.forEach(n=>{t.push({id:n.id,parentId:null}),n.children&&n.children.forEach(o=>{t.push({id:o.id,parentId:n.id})})}),t};return{formatId:u,scrollToId:v,activeId:a,activeParentId:d,setupObserver:()=>{if(typeof window>"u"||!r.length)return;const c=h(r),t=c.map(({id:n})=>document.getElementById(n)).filter(n=>n!==null);t.length&&(s=new IntersectionObserver(n=>{n.forEach(o=>{if(o.isIntersecting){const l=o.target.id,f=c.find(I=>I.id===l);f&&(a.value=l,d.value=f.parentId,history.replaceState(null,null,`#${l}`))}})},{rootMargin:"-20% 0px -70% 0px",threshold:0}),t.forEach(n=>s.observe(n)))},cleanup:()=>{s&&(s.disconnect(),s=null)}}},B={class:"tv-toc"},E={key:0,class:"tv-toc-title"},T={class:"tv-toc-list"},_=["href","onClick"],k={key:0,class:"tv-toc-sublist"},y=["href","onClick"],b={__name:"TvToc",props:{toc:{type:Object,required:!0}},setup(r){const a=r,{scrollToId:d,activeId:s,activeParentId:u,setupObserver:v,cleanup:h}=g(a.toc?.links||[]),m=t=>{d(t)},p=t=>s.value===t,c=t=>u.value===t;return e.onMounted(()=>{v()}),e.onUnmounted(()=>{h()}),(t,n)=>(e.openBlock(),e.createElementBlock("nav",B,[r.toc?.title?(e.openBlock(),e.createElementBlock("h3",E,e.toDisplayString(r.toc.title),1)):e.createCommentVNode("",!0),e.createElementVNode("ul",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.toc?.links,o=>(e.openBlock(),e.createElementBlock("li",{key:o.id,class:"tv-toc-item"},[e.createElementVNode("a",{href:`#${o.id}`,class:e.normalizeClass(["tv-toc-link",{active:p(o.id),"parent-active":c(o.id)}]),onClick:e.withModifiers(l=>m(o.id),["prevent"])},e.toDisplayString(o.text),11,_),o.children?(e.openBlock(),e.createElementBlock("ul",k,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.children,l=>(e.openBlock(),e.createElementBlock("li",{key:l.id,class:"tv-toc-subitem"},[e.createElementVNode("a",{href:`#${l.id}`,class:e.normalizeClass(["tv-toc-sublink",{active:p(l.id)}]),onClick:e.withModifiers(f=>m(l.id),["prevent"])},e.toDisplayString(l.text),11,y)]))),128))])):e.createCommentVNode("",!0)]))),128))])]))}},i=b;i.install=r=>{r.component("TvToc",i)};const C={install:i.install};exports.TvToc=i;exports.TvTocPlugin=C;exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),B=(n=[],a={})=>{const p=e.ref(null),h=e.ref(null);let d=null;const k=r=>`#${r}`,y=r=>{const c=document.getElementById(r);c&&(c.scrollIntoView({behavior:"smooth"}),history.pushState(null,null,`#${r}`))},u=r=>{const c=[];return r.forEach(s=>{c.push({id:s.id,parentId:null}),s.children&&s.children.forEach(v=>{c.push({id:v.id,parentId:s.id})})}),c};return{formatId:k,scrollToId:y,activeId:p,activeParentId:h,setupObserver:()=>{if(typeof window>"u"||!n.length)return;const r=u(n),c=r.map(({id:s})=>document.getElementById(s)).filter(s=>s!==null);c.length&&(d=new IntersectionObserver(s=>{s.forEach(v=>{if(v.isIntersecting){const m=v.target.id,t=r.find(l=>l.id===m);t&&(p.value=m,h.value=t.parentId,history.replaceState(null,null,`#${m}`))}})},{rootMargin:"-20% 0px -70% 0px",threshold:0,...a}),c.forEach(s=>d.observe(s)))},cleanup:()=>{d&&(d.disconnect(),d=null)}}},b={class:"tv-toc"},w={key:0,class:"tv-toc-progress-container"},C={key:1,class:"tv-toc-title"},I={class:"tv-toc-list"},T={class:"tv-toc-item-content"},S=["href","onClick"],x=["onClick"],V={class:"tv-toc-sublist"},N=["href","onClick"],O={__name:"TvToc",props:{toc:{type:Object,required:!0},marker:{type:Boolean,default:!1},activeClass:{type:String,default:"active"},observerOptions:{type:Object,default:()=>({})},collapsible:{type:Boolean,default:!1}},setup(n){const a=n,{scrollToId:p,activeId:h,activeParentId:d,setupObserver:k,cleanup:y}=B(a.toc?.links||[],a.observerOptions),u=e.ref(new Set),E=t=>{const l=new Set(u.value);l.has(t)?l.delete(t):l.add(t),u.value=l},g=t=>!a.collapsible||u.value.has(t),r=t=>{p(t)},c=t=>h.value===t,s=t=>d.value===t;e.watch(d,t=>{if(a.collapsible&&t&&!u.value.has(t)){const l=new Set(u.value);l.add(t),u.value=l}});const v=e.ref(0),m=e.computed(()=>{const t=[],l=o=>{if(o)for(const i of o)t.push(i.id),i.children&&l(i.children)};return l(a.toc?.links),t});return e.watch(h,t=>{if(!t)return;const l=m.value.indexOf(t);if(l!==-1){const o=m.value.length;o>0&&(v.value=(l+1)/o*100)}},{immediate:!0}),e.onMounted(()=>{a.collapsible&&d.value&&E(d.value),k()}),e.onUnmounted(()=>{y()}),(t,l)=>(e.openBlock(),e.createElementBlock("nav",b,[n.toc?.links?.length?(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",{class:"tv-toc-progress-bar",style:e.normalizeStyle({height:`${v.value}%`})},null,4)])):e.createCommentVNode("",!0),n.toc?.title?(e.openBlock(),e.createElementBlock("h3",C,e.toDisplayString(n.toc.title),1)):e.createCommentVNode("",!0),e.createElementVNode("ul",I,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.toc?.links,o=>(e.openBlock(),e.createElementBlock("li",{key:o.id,class:"tv-toc-item"},[e.createElementVNode("div",T,[e.createElementVNode("a",{href:`#${o.id}`,class:e.normalizeClass(["tv-toc-link",{[a.activeClass]:c(o.id),"parent-active":s(o.id),"tv-toc-marker":n.marker&&c(o.id)}]),onClick:e.withModifiers(i=>r(o.id),["prevent"])},e.toDisplayString(o.text),11,S),n.collapsible&&o.children&&o.children.length?(e.openBlock(),e.createElementBlock("button",{key:0,class:e.normalizeClass(["tv-toc-toggle",{"is-expanded":g(o.id)}]),onClick:e.withModifiers(i=>E(o.id),["stop"]),"aria-label":"Toggle section"},[...l[0]||(l[0]=[e.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[e.createElementVNode("polyline",{points:"6 9 12 15 18 9"})],-1)])],10,x)):e.createCommentVNode("",!0)]),o.children?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["tv-toc-sublist-wrapper",{"is-collapsed":n.collapsible&&!g(o.id)}]),style:e.normalizeStyle(n.collapsible?{"--content-height":g(o.id)?"1000px":"0px"}:{})},[e.createElementVNode("ul",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.children,i=>(e.openBlock(),e.createElementBlock("li",{key:i.id,class:"tv-toc-subitem"},[e.createElementVNode("a",{href:`#${i.id}`,class:e.normalizeClass(["tv-toc-sublink",{[a.activeClass]:c(i.id),"tv-toc-marker":n.marker&&c(i.id)}]),onClick:e.withModifiers(M=>r(i.id),["prevent"])},e.toDisplayString(i.text),11,N)]))),128))])],6)):e.createCommentVNode("",!0)]))),128))])]))}},f=O;f.install=n=>{n.component("TvToc",f)};const $={install:f.install};exports.TvToc=f;exports.TvTocPlugin=$;exports.default=f;

package/dist/tv-toc.css

@@ -1 +1 @@
-.tv-toc{padding:1rem;background-color:#b9c4df;border-radius:8px;color:#000b14;min-width:200px}@media(prefers-color-scheme:dark){.tv-toc{background-color:#0e131f;color:#f4faff}}.tv-toc .tv-toc-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.tv-toc .tv-toc-list{list-style:none;padding:0;margin:0}.tv-toc .tv-toc-item{margin-bottom:.5rem;position:relative}.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}}.tv-toc .tv-toc-link{display:block;text-decoration:none;color:inherit;font-weight:500;padding:.5rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;font-weight:700;background-color:#ef233c1a;border-left:3px solid #EF233C;padding-left:calc(1rem - 3px)}.tv-toc .tv-toc-link.parent-active{color:#ef233c;font-weight:500;border-left:2px solid rgba(239,35,60,.5);padding-left:calc(1rem - 2px)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;background-color:#ef233c1a;border-left-color:#ef233c}.tv-toc .tv-toc-link.parent-active{color:#ef233c;border-left-color:#ef233c80}}.tv-toc .tv-toc-sublist{list-style:none;padding-left:1rem;margin-top:.25rem;margin-bottom:.25rem;border-left:2px solid rgba(0,11,20,.1)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublist{border-left-color:#f4faff1a}}.tv-toc .tv-toc-subitem{margin-bottom:.25rem;position:relative}.tv-toc .tv-toc-sublink{display:block;text-decoration:none;color:inherit;font-size:.9rem;opacity:.8;padding:.4rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-sublink:hover{opacity:1;color:#ef233c}.tv-toc .tv-toc-sublink.active{opacity:1;color:#ef233c;font-weight:700;background-color:#ef233c1a;border-left:3px solid #EF233C;padding-left:calc(1rem - 3px)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublink:hover{color:#ef233c}.tv-toc .tv-toc-sublink.active{color:#ef233c;background-color:#ef233c1a;border-left-color:#ef233c}}.light-mode .tv-toc{background-color:#b9c4df;color:#000b14}.light-mode .tv-toc .tv-toc-link:hover{color:#ef233c}.light-mode .tv-toc .tv-toc-link.active,.light-mode .tv-toc .tv-toc-link.parent-active{color:#ef233c;border-left-color:#ef233c}.light-mode .tv-toc .tv-toc-link.parent-active{border-left-color:#ef233c80}.light-mode .tv-toc .tv-toc-sublist{border-left-color:#000b141a}.light-mode .tv-toc .tv-toc-sublink:hover,.light-mode .tv-toc .tv-toc-sublink.active{color:#ef233c}.light-mode .tv-toc .tv-toc-sublink.active{border-left-color:#ef233c}
+.tv-toc{position:relative;padding:1rem;background-color:#b9c4df;border-radius:8px;color:#000b14;min-width:200px;overflow:hidden;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}@media(prefers-color-scheme:dark){.tv-toc{background-color:#0e131f;color:#f4faff;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}}.tv-toc .tv-toc-progress-container{position:absolute;left:0;top:0;bottom:0;width:4px;background-color:#ef233c1a;z-index:1}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-container{background-color:#ef233c1a}}.tv-toc .tv-toc-progress-bar{width:100%;background:linear-gradient(to bottom,#ef233c,#f68290);transition:height .1s linear;border-radius:0 0 4px 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-progress-bar{background:linear-gradient(to bottom,#ef233c,#f68290)}}.tv-toc .tv-toc-title{font-size:1.2rem;font-weight:700;margin-bottom:.5rem}.tv-toc .tv-toc-list{list-style:none;padding:0;margin:0}.tv-toc .tv-toc-item{margin-bottom:.5rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-item:nth-child(1){animation-delay:.05s}.tv-toc .tv-toc-item:nth-child(2){animation-delay:.1s}.tv-toc .tv-toc-item:nth-child(3){animation-delay:.15s}.tv-toc .tv-toc-item:nth-child(4){animation-delay:.2s}.tv-toc .tv-toc-item:nth-child(5){animation-delay:.25s}.tv-toc .tv-toc-item:nth-child(6){animation-delay:.3s}.tv-toc .tv-toc-item:nth-child(7){animation-delay:.35s}.tv-toc .tv-toc-item:nth-child(8){animation-delay:.4s}.tv-toc .tv-toc-item:nth-child(9){animation-delay:.45s}.tv-toc .tv-toc-item:nth-child(10){animation-delay:.5s}.tv-toc .tv-toc-item:nth-child(11){animation-delay:.55s}.tv-toc .tv-toc-item:nth-child(12){animation-delay:.6s}.tv-toc .tv-toc-item:nth-child(13){animation-delay:.65s}.tv-toc .tv-toc-item:nth-child(14){animation-delay:.7s}.tv-toc .tv-toc-item:nth-child(15){animation-delay:.75s}.tv-toc .tv-toc-item:nth-child(16){animation-delay:.8s}.tv-toc .tv-toc-item:nth-child(17){animation-delay:.85s}.tv-toc .tv-toc-item:nth-child(18){animation-delay:.9s}.tv-toc .tv-toc-item:nth-child(19){animation-delay:.95s}.tv-toc .tv-toc-item:nth-child(20){animation-delay:1s}.tv-toc .tv-toc-item .tv-toc-item-content{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.tv-toc .tv-toc-item .tv-toc-item-content .tv-toc-link{flex:1}.tv-toc .tv-toc-item .tv-toc-toggle{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.6;transition:all .2s ease;border-radius:4px;margin-right:4px}.tv-toc .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a;opacity:1}.tv-toc .tv-toc-item .tv-toc-toggle svg{transition:transform .3s ease}.tv-toc .tv-toc-item .tv-toc-toggle.is-expanded svg{transform:rotate(180deg)}.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-item:hover .tv-toc-link,.tv-toc .tv-toc-item:hover .tv-toc-sublink{background-color:#ef233c0d}.tv-toc .tv-toc-item .tv-toc-toggle:hover{background-color:#ef233c1a}}.tv-toc .tv-toc-link{display:block;text-decoration:none;color:inherit;font-weight:500;padding:.5rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-link.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}.tv-toc .tv-toc-link.parent-active{color:#ef233c;font-weight:500;border-left:2px solid rgba(239,35,60,.5);padding-left:calc(1rem - 2px)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-link:hover{color:#ef233c}.tv-toc .tv-toc-link.active{color:#ef233c;background-color:#ef233c1a}.tv-toc .tv-toc-link.parent-active{color:#ef233c;border-left-color:#ef233c80}}.tv-toc .tv-toc-sublist-wrapper{overflow:hidden;transition:opacity .3s ease,max-height .3s ease;max-height:1000px;opacity:1}.tv-toc .tv-toc-sublist-wrapper.is-collapsed{max-height:0;opacity:0;margin-bottom:0}.tv-toc .tv-toc-sublist{list-style:none;padding-left:1rem;margin-top:.25rem;margin-bottom:.25rem;border-left:2px solid rgba(0,11,20,.1)}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublist{border-left-color:#f4faff1a}}.tv-toc .tv-toc-subitem{margin-bottom:.25rem;position:relative;opacity:0;animation:fadeSlideIn .5s ease forwards}.tv-toc .tv-toc-subitem:nth-child(1){animation-delay:.35s}.tv-toc .tv-toc-subitem:nth-child(2){animation-delay:.4s}.tv-toc .tv-toc-subitem:nth-child(3){animation-delay:.45s}.tv-toc .tv-toc-subitem:nth-child(4){animation-delay:.5s}.tv-toc .tv-toc-subitem:nth-child(5){animation-delay:.55s}.tv-toc .tv-toc-subitem:nth-child(6){animation-delay:.6s}.tv-toc .tv-toc-subitem:nth-child(7){animation-delay:.65s}.tv-toc .tv-toc-subitem:nth-child(8){animation-delay:.7s}.tv-toc .tv-toc-subitem:nth-child(9){animation-delay:.75s}.tv-toc .tv-toc-subitem:nth-child(10){animation-delay:.8s}.tv-toc .tv-toc-sublink{display:block;text-decoration:none;color:inherit;font-size:.9rem;opacity:.8;padding:.4rem .75rem;border-radius:4px;transition:all .3s ease;position:relative}.tv-toc .tv-toc-sublink:hover{opacity:1;color:#ef233c}.tv-toc .tv-toc-sublink.active{opacity:1;color:#ef233c;font-weight:700;background-color:#ef233c1a;padding-left:1rem;position:relative;animation:toc-pulse 2s infinite}.tv-toc .tv-toc-sublink.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--toc-active-color),rgba(var(--toc-active-rgb),.2),var(--toc-active-color));background-size:100% 200%;animation:border-flow 2s linear infinite;border-radius:4px 0 0 4px}@media(prefers-color-scheme:dark){.tv-toc .tv-toc-sublink:hover{color:#ef233c}.tv-toc .tv-toc-sublink.active{color:#ef233c;background-color:#ef233c1a}}.light-mode .tv-toc{background-color:#b9c4df;color:#000b14;--toc-active-rgb: 239, 35, 60;--toc-active-color: #EF233C}.light-mode .tv-toc .tv-toc-link:hover,.light-mode .tv-toc .tv-toc-link.active,.light-mode .tv-toc .tv-toc-link.parent-active{color:#ef233c}.light-mode .tv-toc .tv-toc-link.parent-active{border-left-color:#ef233c80}.light-mode .tv-toc .tv-toc-sublist{border-left-color:#000b141a}.light-mode .tv-toc .tv-toc-sublink:hover,.light-mode .tv-toc .tv-toc-sublink.active{color:#ef233c}.tv-toc-marker{border-left:2px solid var(--tv-toc-active-color, #3b82f6);padding-left:8px;transition:all .2s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes toc-pulse{0%{box-shadow:0 0 rgba(var(--toc-active-rgb),.4)}70%{box-shadow:0 0 0 6px rgba(var(--toc-active-rgb),0)}to{box-shadow:0 0 rgba(var(--toc-active-rgb),0)}}@keyframes border-flow{0%{background-position:0 0}to{background-position:0 200%}}

package/dist/tv-toc.es.js

@@ -1,107 +1,186 @@
-import { ref as T, onMounted as O, onUnmounted as w, createElementBlock as r, openBlock as i, createCommentVNode as y, createElementVNode as I, toDisplayString as _, Fragment as E, renderList as b, withModifiers as C, normalizeClass as $ } from "vue";
-const B = (s = []) => {
-  const a = T(null), d = T(null);
-  let l = null;
-  const u = (o) => `#${o}`, v = (o) => {
-    const t = document.getElementById(o);
-    t && (t.scrollIntoView({ behavior: "smooth" }), history.pushState(null, null, `#${o}`));
-  }, h = (o) => {
-    const t = [];
-    return o.forEach((e) => {
-      t.push({ id: e.id, parentId: null }), e.children && e.children.forEach((n) => {
-        t.push({ id: n.id, parentId: e.id });
+import { ref as w, watch as $, computed as _, onMounted as j, onUnmounted as A, createElementBlock as d, openBlock as u, createCommentVNode as y, createElementVNode as h, normalizeStyle as k, toDisplayString as O, Fragment as B, renderList as P, withModifiers as S, normalizeClass as I } from "vue";
+const M = (l = [], i = {}) => {
+  const g = w(null), m = w(null);
+  let a = null;
+  const x = (c) => `#${c}`, C = (c) => {
+    const s = document.getElementById(c);
+    s && (s.scrollIntoView({ behavior: "smooth" }), history.pushState(null, null, `#${c}`));
+  }, v = (c) => {
+    const s = [];
+    return c.forEach((n) => {
+      s.push({ id: n.id, parentId: null }), n.children && n.children.forEach((f) => {
+        s.push({ id: f.id, parentId: n.id });
       });
-    }), t;
+    }), s;
   };
   return {
-    formatId: u,
-    scrollToId: v,
-    activeId: a,
-    activeParentId: d,
+    formatId: x,
+    scrollToId: C,
+    activeId: g,
+    activeParentId: m,
     setupObserver: () => {
-      if (typeof window > "u" || !s.length) return;
-      const o = h(s), t = o.map(({ id: e }) => document.getElementById(e)).filter((e) => e !== null);
-      t.length && (l = new IntersectionObserver(
-        (e) => {
-          e.forEach((n) => {
-            if (n.isIntersecting) {
-              const c = n.target.id, m = o.find((x) => x.id === c);
-              m && (a.value = c, d.value = m.parentId, history.replaceState(null, null, `#${c}`));
+      if (typeof window > "u" || !l.length) return;
+      const c = v(l), s = c.map(({ id: n }) => document.getElementById(n)).filter((n) => n !== null);
+      s.length && (a = new IntersectionObserver(
+        (n) => {
+          n.forEach((f) => {
+            if (f.isIntersecting) {
+              const p = f.target.id, e = c.find((o) => o.id === p);
+              e && (g.value = p, m.value = e.parentId, history.replaceState(null, null, `#${p}`));
             }
           });
         },
         {
           rootMargin: "-20% 0px -70% 0px",
-          threshold: 0
+          threshold: 0,
+          ...i
         }
-      ), t.forEach((e) => l.observe(e)));
+      ), s.forEach((n) => a.observe(n)));
     },
     cleanup: () => {
-      l && (l.disconnect(), l = null);
+      a && (a.disconnect(), a = null);
     }
   };
-}, P = { class: "tv-toc" }, A = {
+}, V = { class: "tv-toc" }, z = {
   key: 0,
+  class: "tv-toc-progress-container"
+}, N = {
+  key: 1,
   class: "tv-toc-title"
-}, M = { class: "tv-toc-list" }, S = ["href", "onClick"], V = {
-  key: 0,
-  class: "tv-toc-sublist"
-}, N = ["href", "onClick"], j = {
+}, q = { class: "tv-toc-list" }, D = { class: "tv-toc-item-content" }, F = ["href", "onClick"], U = ["onClick"], G = { class: "tv-toc-sublist" }, H = ["href", "onClick"], J = {
   __name: "TvToc",
   props: {
     toc: {
       type: Object,
       required: !0
+    },
+    marker: {
+      type: Boolean,
+      default: !1
+    },
+    activeClass: {
+      type: String,
+      default: "active"
+    },
+    observerOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    collapsible: {
+      type: Boolean,
+      default: !1
     }
   },
-  setup(s) {
-    const a = s, { scrollToId: d, activeId: l, activeParentId: u, setupObserver: v, cleanup: h } = B(a.toc?.links || []), f = (t) => {
-      d(t);
-    }, p = (t) => l.value === t, o = (t) => u.value === t;
-    return O(() => {
-      v();
-    }), w(() => {
-      h();
-    }), (t, e) => (i(), r("nav", P, [
-      s.toc?.title ? (i(), r("h3", A, _(s.toc.title), 1)) : y("", !0),
-      I("ul", M, [
-        (i(!0), r(E, null, b(s.toc?.links, (n) => (i(), r("li", {
-          key: n.id,
+  setup(l) {
+    const i = l, { scrollToId: g, activeId: m, activeParentId: a, setupObserver: x, cleanup: C } = M(i.toc?.links || [], i.observerOptions), v = w(/* @__PURE__ */ new Set()), T = (e) => {
+      const o = new Set(v.value);
+      o.has(e) ? o.delete(e) : o.add(e), v.value = o;
+    }, b = (e) => !i.collapsible || v.value.has(e), c = (e) => {
+      g(e);
+    }, s = (e) => m.value === e, n = (e) => a.value === e;
+    $(a, (e) => {
+      if (i.collapsible && e && !v.value.has(e)) {
+        const o = new Set(v.value);
+        o.add(e), v.value = o;
+      }
+    });
+    const f = w(0), p = _(() => {
+      const e = [], o = (t) => {
+        if (t)
+          for (const r of t)
+            e.push(r.id), r.children && o(r.children);
+      };
+      return o(i.toc?.links), e;
+    });
+    return $(m, (e) => {
+      if (!e) return;
+      const o = p.value.indexOf(e);
+      if (o !== -1) {
+        const t = p.value.length;
+        t > 0 && (f.value = (o + 1) / t * 100);
+      }
+    }, { immediate: !0 }), j(() => {
+      i.collapsible && a.value && T(a.value), x();
+    }), A(() => {
+      C();
+    }), (e, o) => (u(), d("nav", V, [
+      l.toc?.links?.length ? (u(), d("div", z, [
+        h("div", {
+          class: "tv-toc-progress-bar",
+          style: k({ height: `${f.value}%` })
+        }, null, 4)
+      ])) : y("", !0),
+      l.toc?.title ? (u(), d("h3", N, O(l.toc.title), 1)) : y("", !0),
+      h("ul", q, [
+        (u(!0), d(B, null, P(l.toc?.links, (t) => (u(), d("li", {
+          key: t.id,
           class: "tv-toc-item"
         }, [
-          I("a", {
-            href: `#${n.id}`,
-            class: $(["tv-toc-link", {
-              active: p(n.id),
-              "parent-active": o(n.id)
-            }]),
-            onClick: C((c) => f(n.id), ["prevent"])
-          }, _(n.text), 11, S),
-          n.children ? (i(), r("ul", V, [
-            (i(!0), r(E, null, b(n.children, (c) => (i(), r("li", {
-              key: c.id,
-              class: "tv-toc-subitem"
-            }, [
-              I("a", {
-                href: `#${c.id}`,
-                class: $(["tv-toc-sublink", { active: p(c.id) }]),
-                onClick: C((m) => f(c.id), ["prevent"])
-              }, _(c.text), 11, N)
-            ]))), 128))
-          ])) : y("", !0)
+          h("div", D, [
+            h("a", {
+              href: `#${t.id}`,
+              class: I(["tv-toc-link", {
+                [i.activeClass]: s(t.id),
+                "parent-active": n(t.id),
+                "tv-toc-marker": l.marker && s(t.id)
+              }]),
+              onClick: S((r) => c(t.id), ["prevent"])
+            }, O(t.text), 11, F),
+            l.collapsible && t.children && t.children.length ? (u(), d("button", {
+              key: 0,
+              class: I(["tv-toc-toggle", { "is-expanded": b(t.id) }]),
+              onClick: S((r) => T(t.id), ["stop"]),
+              "aria-label": "Toggle section"
+            }, [...o[0] || (o[0] = [
+              h("svg", {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }, [
+                h("polyline", { points: "6 9 12 15 18 9" })
+              ], -1)
+            ])], 10, U)) : y("", !0)
+          ]),
+          t.children ? (u(), d("div", {
+            key: 0,
+            class: I(["tv-toc-sublist-wrapper", { "is-collapsed": l.collapsible && !b(t.id) }]),
+            style: k(l.collapsible ? { "--content-height": b(t.id) ? "1000px" : "0px" } : {})
+          }, [
+            h("ul", G, [
+              (u(!0), d(B, null, P(t.children, (r) => (u(), d("li", {
+                key: r.id,
+                class: "tv-toc-subitem"
+              }, [
+                h("a", {
+                  href: `#${r.id}`,
+                  class: I(["tv-toc-sublink", {
+                    [i.activeClass]: s(r.id),
+                    "tv-toc-marker": l.marker && s(r.id)
+                  }]),
+                  onClick: S((K) => c(r.id), ["prevent"])
+                }, O(r.text), 11, H)
+              ]))), 128))
+            ])
+          ], 6)) : y("", !0)
         ]))), 128))
       ])
     ]));
   }
-}, g = j;
-g.install = (s) => {
-  s.component("TvToc", g);
+}, E = J;
+E.install = (l) => {
+  l.component("TvToc", E);
 };
-const q = {
-  install: g.install
+const R = {
+  install: E.install
 };
 export {
-  g as TvToc,
-  q as TvTocPlugin,
-  g as default
+  E as TvToc,
+  R as TvTocPlugin,
+  E as default
 };

package/package.json

@@ -4,7 +4,7 @@
   "author": "Cristhian Daza",
   "description": "A Vue 3 component to generate a table of contents (TOC) for your articles or documentation, enhancing navigation and user experience.",
   "license": "MIT",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "homepage": "https://ui.todovue.blog/toc",
   "repository": {
@@ -60,10 +60,10 @@
     "vue": "^3.5.26"
   },
   "devDependencies": {
-    "@todovue/tv-demo": "^1.2.7",
+    "@todovue/tv-demo": "^1.4.4",
     "@vitejs/plugin-vue": "^6.0.3",
-    "sass": "^1.97.1",
-    "vite": "^7.3.0",
+    "sass": "^1.97.2",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
 }