@todovue/tv-toc 1.0.2 → 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,80 @@
+# Changelog
+
+All notable changes to `@todovue/tv-toc` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.1] - 2026-01-27
+
+### Changed
+- Simplified the file list in `package.json` to include only essential assets.
+- Simplified the build configuration by removing demo-specific logic.
+- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
+- Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
+- Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
+
+### Added
+- Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
+
+### Removed
+- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.11`.
+- Updated `vue` to `^3.5.27`.
+- Updated `sass` to `^1.97.3`.
+
+## [1.1.0] - 2026-01-20
+
+### Added
+- Introduced a customizable marker for Table of Contents (ToC) items to allow for personalized bullet styles or icons.
+- Added an active class property to ToC items, enabling specific styling for the currently viewed section to improve navigation clarity.
+- Added `observerOptions` prop to customize IntersectionObserver behavior (rootMargin, threshold).
+- Introduced a scroll progress indicator to the Table of Contents, providing a visual cue of the user's current position within the document.
+- Implemented collapsible sections in the Table of Contents, allowing users to toggle the visibility of subsections for a cleaner, more focused navigation experience.
+- Introduced animated active indicators to the Table of Contents, providing smooth transitions as the user scrolls through different sections.
+- Added customizable color properties for ToC elements, allowing for deeper integration with specific brand palettes.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.4`.
+- Updated `sass` to `^1.97.2`.
+- Updated `vite` to `^7.3.1`.
+
+## [1.0.2] - 2025-12-27
+
+### Added
+- Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
+- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
+
+### Changed
+- Changed the `base` option in `vite.config.js` for website deployment in cpanel.
+
+### Fixed
+- Fixed repository URL in `package.json` to point to the correct GitHub repository.
+- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
+
+### Dependencies
+- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
+
+## [1.0.1] - 2025-11-28
+
+### Fixed
+- Correct CSS file extension for Table of Contents styles.
+
+## [1.0.0] - 2025-11-28
+
+### Added
+- Initial stable release of `@todovue/tv-toc`.
+- `TvToc` Vue 3 component to render a table of contents (TOC) from a `toc` object.
+- Support for nested sections via `children` links.
+- Smooth scrolling to headings using `scrollIntoView` and URL hash update with `history.pushState`.
+- `useToc` composable with `scrollToId` and `formatId` helpers.
+- Minimal default styles and BEM-like CSS classes for easy customization.
+- Vite demo with basic and blog-like TOC examples.
+
+[1.1.1]: https://github.com/TODOvue/tv-toc/pull/5/files
+[1.1.0]: https://github.com/TODOvue/tv-toc/pull/4/files
+[1.0.2]: https://github.com/TODOvue/tv-toc/pull/3/files
+[1.0.1]: https://github.com/TODOvue/tv-toc/pull/2/files
+[1.0.0]: https://github.com/TODOvue/tv-toc/pull/1/files

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,10 +4,11 @@
   "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.1",
   "type": "module",
   "homepage": "https://ui.todovue.blog/toc",
   "repository": {
+    "name": "@todovue/tv-toc",
     "type": "git",
     "url": "git+https://github.com/TODOvue/tv-toc.git"
   },
@@ -32,16 +33,21 @@
       "require": "./dist/tv-toc.cjs.js"
     },
     "./style.css": "./dist/tv-toc.css",
-    "./nuxt": "./nuxt.js"
+    "./nuxt": "./nuxt.js",
+    "./demo": {
+      "import": "./src/demo/Demo.vue"
+    }
   },
   "main": "dist/tv-toc.cjs.js",
   "module": "dist/tv-toc.es.js",
   "types": "dist/tv-toc.d.ts",
   "files": [
-    "dist",
+    "CHANGELOG.md",
     "LICENSE",
     "README.md",
-    "nuxt.js"
+    "dist",
+    "nuxt.js",
+    "src"
   ],
   "engines": {
     "node": ">=20.19.0"
@@ -53,17 +59,16 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "build:demo": "cp README.md public/ && cp CHANGELOG.md public/ && VITE_BUILD_TARGET=demo vite build"
+    "build": "vite build"
   },
   "peerDependencies": {
-    "vue": "^3.5.26"
+    "vue": "^3.5.27"
   },
   "devDependencies": {
-    "@todovue/tv-demo": "^1.2.7",
+    "@todovue/tv-demo": "^1.4.11",
     "@vitejs/plugin-vue": "^6.0.3",
-    "sass": "^1.97.1",
-    "vite": "^7.3.0",
+    "sass": "^1.97.3",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
 }

package/src/assets/scss/_variables.scss

@@ -0,0 +1,15 @@
+$dark-body-bg: #7A7D7D;
+$dark-button-bg: #EF233C;
+$dark-card-bg: #0E131F;
+$dark-button-text: #AFDEDC;
+$dark-text: #F4FAFF;
+
+$light-body-bg: #E0E1E1;
+$light-button-bg: #EF233C;
+$light-card-bg: #B9C4DF;
+$light-button-text: #F1F9F9;
+$light-text: #000B14;
+
+$active-color: $light-button-bg;
+$active-color-dark: $dark-button-bg;
+