@todovue/tv-ui 0.1.0

package/dist/demos/tv-toc/README.md

@@ -0,0 +1,288 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue TOC Component (TvToc)
+A lightweight Vue 3 component to render a Table of Contents (TOC) for your articles or documentation, with smooth scrolling and nested sections support.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-toc.svg)](https://www.npmjs.com/package/@todovue/tv-toc)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-toc.svg)](https://www.npmjs.com/package/@todovue/tv-toc)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-toc.svg)](https://www.npmjs.com/package/@todovue/tv-toc)
+![License](https://img.shields.io/github/license/TODOvue/tv-toc)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-toc)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-toc)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-toc)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-toc)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-toc?style=social)
+
+> 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 4 / SSR Usage](#nuxt-4--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Composable: useToc](#composable-usetoc)
+- [Customization (Styles)](#customization-styles)
+- [SSR Notes](#ssr-notes)
+- [Examples](#examples)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- Simple and focused Table of Contents (TOC) component for Vue 3.
+- Supports nested sections via children links.
+- Smooth scrolling to headings using `scrollIntoView`.
+- URL hash is updated using `history.pushState` for better navigation and shareable links.
+- Works in SPA (Vite, Vue CLI) and Nuxt 3 (with client-side rendering constraints).
+- Ships with minimal, customizable styles.
+
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-toc
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-toc
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-toc
+```
+
+## Usage of Styles
+
+### Vue/Vite (SPA)
+Import the CSS generated by the library in your main entry file:
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@todovue/tv-toc/style.css'
+import { TvToc } from '@todovue/tv-toc'
+
+const app = createApp(App)
+app.component('TvToc', TvToc)
+app.mount('#app')
+```
+
+### Nuxt 3/4
+Add the library's CSS to your Nuxt configuration:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-toc/nuxt'
+  ]
+})
+```
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import TvToc from '@todovue/tv-toc'
+
+createApp(App)
+  .component('TvToc', TvToc)
+  .mount('#app')
+```
+Local import inside a component:
+```vue
+<script setup>
+import { TvToc } from '@todovue/tv-toc'
+
+const toc = {
+  title: 'On this page',
+  links: [
+    { id: 'introduction', text: 'Introduction' },
+    {
+      id: 'getting-started',
+      text: 'Getting started',
+      children: [
+        { id: 'installation', text: 'Installation' },
+        { id: 'basic-usage', text: 'Basic usage' },
+      ],
+    },
+    { id: 'api', text: 'API Reference' },
+  ],
+}
+</script>
+
+<template>
+  <div class="page-layout">
+    <main class="page-content">
+      <h2 id="introduction">Introduction</h2>
+      <!-- ... -->
+      <h2 id="getting-started">Getting started</h2>
+      <h3 id="installation">Installation</h3>
+      <h3 id="basic-usage">Basic usage</h3>
+      <!-- ... -->
+      <h2 id="api">API Reference</h2>
+    </main>
+
+    <aside class="page-toc">
+      <TvToc :toc="toc" />
+    </aside>
+  </div>
+</template>
+```
+
+## 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'
+import TvToc from '@todovue/tv-toc'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.component('TvToc', TvToc)
+})
+```
+Use anywhere (recommended inside `<client-only>` when using Nuxt 3):
+```vue
+<template>
+  <client-only>
+    <TvToc :toc="toc" />
+  </client-only>
+</template>
+```
+Direct import (no plugin):
+```vue
+<script setup>
+import { TvToc } from '@todovue/tv-toc'
+</script>
+
+<template>
+  <TvToc :toc="toc" />
+</template>
+```
+
+## Component Registration Options
+| Approach                                      | When to use                       |
+|-----------------------------------------------|-----------------------------------|
+| Global via `app.component('TvToc', TvToc)`    | Frequent use across the app       |
+| 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`   |
+| 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
+type TocLink = {
+  id: string
+  text: string
+  children?: TocLink[]
+}
+
+type Toc = {
+  title?: string
+  links: TocLink[]
+}
+```
+- `title`: Optional title shown at the top of the TOC (`h3`).
+- `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 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(links, {
+  rootMargin: '0px 0px -50% 0px'
+})
+```
+
+### API
+| Name       | Type                     | Description                                                    |
+|------------|--------------------------|----------------------------------------------------------------|
+| formatId   | `(id: string) => string` | Returns a hash-based id string (e.g. `"#section-id"`).         |
+| scrollToId | `(id: string) => void`   | Smooth scrolls to the element with that `id` and updates hash. |
+
+> 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.
+
+Main CSS classes:
+- `.tv-toc` — Root `<nav>` container.
+- `.tv-toc-title` — Title of the TOC.
+- `.tv-toc-list` — Top-level list container.
+- `.tv-toc-item` — Top-level list item.
+- `.tv-toc-link` — Anchor for top-level items.
+- `.tv-toc-sublist` — Nested list container for children.
+- `.tv-toc-subitem` — Nested list item.
+- `.tv-toc-sublink` — Anchor for nested items.
+
+You can override these styles in your own global stylesheet:
+```css
+/* example overrides */
+.tv-toc {
+  font-size: 0.9rem;
+}
+
+.tv-toc-link,
+.tv-toc-sublink {
+  color: #4b5563;
+}
+
+.tv-toc-link:hover,
+.tv-toc-sublink:hover {
+  color: #111827;
+}
+```
+
+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.
+
+- Basic TOC example.
+- Blog-like layout with nested headings.
+
+To run the demo locally, see the [Development](#development) section.
+
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-toc.git
+cd tv-toc
+npm install
+npm run dev     # run local demo
+npm run build   # build library
+```
+The local demo is served with Vite using `index.html` and examples in `src/demo`.
+
+To build the standalone demo used for documentation:
+```bash
+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/entry.d.ts

@@ -0,0 +1,48 @@
+import { Plugin } from 'vue';
+import { TvAlert } from '@todovue/tv-alert';
+import { TvArticle } from '@todovue/tv-article';
+import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs';
+import { TvButton } from '@todovue/tv-button';
+import { TvCard } from '@todovue/tv-card';
+import { TvDemo } from '@todovue/tv-demo';
+import { TvFooter } from '@todovue/tv-footer';
+import { TvHero } from '@todovue/tv-hero';
+import { TvLabel } from '@todovue/tv-label';
+import { TvMenu } from '@todovue/tv-menu';
+import { TvModal } from '@todovue/tv-modal';
+import { TvPagination } from '@todovue/tv-pagination';
+import { TvProgressBar } from '@todovue/tv-progress-bar';
+import { TvRelativeTime } from '@todovue/tv-relative-time';
+import { TvScrollTop } from '@todovue/tv-scroll-top';
+import { TvSearch } from '@todovue/tv-search';
+import { TvSettings } from '@todovue/tv-settings';
+import { TvSidebar } from '@todovue/tv-sidebar';
+import { TvThemeButton } from '@todovue/tv-theme-button';
+import { TvToc } from '@todovue/tv-toc';
+export { TvAlert, TvArticle, TvBreadcrumbs, TvButton, TvCard, TvDemo, TvFooter, TvHero, TvLabel, TvMenu, TvModal, TvPagination, TvProgressBar, TvRelativeTime, TvScrollTop, TvSearch, TvSettings, TvSidebar, TvThemeButton, TvToc };
+export declare const TvUi: Plugin;
+export default TvUi;
+declare module 'vue' {
+    interface GlobalComponents {
+        TvAlert: typeof TvAlert;
+        TvArticle: typeof TvArticle;
+        TvBreadcrumbs: typeof TvBreadcrumbs;
+        TvButton: typeof TvButton;
+        TvCard: typeof TvCard;
+        TvDemo: typeof TvDemo;
+        TvFooter: typeof TvFooter;
+        TvHero: typeof TvHero;
+        TvLabel: typeof TvLabel;
+        TvMenu: typeof TvMenu;
+        TvModal: typeof TvModal;
+        TvPagination: typeof TvPagination;
+        TvProgressBar: typeof TvProgressBar;
+        TvRelativeTime: typeof TvRelativeTime;
+        TvScrollTop: typeof TvScrollTop;
+        TvSearch: typeof TvSearch;
+        TvSettings: typeof TvSettings;
+        TvSidebar: typeof TvSidebar;
+        TvThemeButton: typeof TvThemeButton;
+        TvToc: typeof TvToc;
+    }
+}

package/dist/tv-ui.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@todovue/tv-alert"),t=require("@todovue/tv-article"),o=require("@todovue/tv-breadcrumbs"),n=require("@todovue/tv-button"),v=require("@todovue/tv-card"),u=require("@todovue/tv-demo"),T=require("@todovue/tv-footer"),i=require("@todovue/tv-hero"),a=require("@todovue/tv-label"),c=require("@todovue/tv-menu"),l=require("@todovue/tv-modal"),b=require("@todovue/tv-pagination"),s=require("@todovue/tv-progress-bar"),d=require("@todovue/tv-relative-time"),m=require("@todovue/tv-scroll-top"),g=require("@todovue/tv-search"),P=require("@todovue/tv-settings"),p=require("@todovue/tv-sidebar"),f=require("@todovue/tv-theme-button"),j=require("@todovue/tv-toc"),q=[r.TvAlert,t.TvArticle,o.TvBreadcrumbs,n.TvButton,v.TvCard,u.TvDemo,T.TvFooter,i.TvHero,a.TvLabel,c.TvMenu,l.TvModal,b.TvPagination,s.TvProgressBar,d.TvRelativeTime,m.TvScrollTop,g.TvSearch,P.TvSettings,p.TvSidebar,f.TvThemeButton,j.TvToc],S=O=>{q.forEach(e=>{e.name&&O.component(e.name,e)})},y={install:S};Object.defineProperty(exports,"TvAlert",{enumerable:!0,get:()=>r.TvAlert});Object.defineProperty(exports,"TvArticle",{enumerable:!0,get:()=>t.TvArticle});Object.defineProperty(exports,"TvBreadcrumbs",{enumerable:!0,get:()=>o.TvBreadcrumbs});Object.defineProperty(exports,"TvButton",{enumerable:!0,get:()=>n.TvButton});Object.defineProperty(exports,"TvCard",{enumerable:!0,get:()=>v.TvCard});Object.defineProperty(exports,"TvDemo",{enumerable:!0,get:()=>u.TvDemo});Object.defineProperty(exports,"TvFooter",{enumerable:!0,get:()=>T.TvFooter});Object.defineProperty(exports,"TvHero",{enumerable:!0,get:()=>i.TvHero});Object.defineProperty(exports,"TvLabel",{enumerable:!0,get:()=>a.TvLabel});Object.defineProperty(exports,"TvMenu",{enumerable:!0,get:()=>c.TvMenu});Object.defineProperty(exports,"TvModal",{enumerable:!0,get:()=>l.TvModal});Object.defineProperty(exports,"TvPagination",{enumerable:!0,get:()=>b.TvPagination});Object.defineProperty(exports,"TvProgressBar",{enumerable:!0,get:()=>s.TvProgressBar});Object.defineProperty(exports,"TvRelativeTime",{enumerable:!0,get:()=>d.TvRelativeTime});Object.defineProperty(exports,"TvScrollTop",{enumerable:!0,get:()=>m.TvScrollTop});Object.defineProperty(exports,"TvSearch",{enumerable:!0,get:()=>g.TvSearch});Object.defineProperty(exports,"TvSettings",{enumerable:!0,get:()=>P.TvSettings});Object.defineProperty(exports,"TvSidebar",{enumerable:!0,get:()=>p.TvSidebar});Object.defineProperty(exports,"TvThemeButton",{enumerable:!0,get:()=>f.TvThemeButton});Object.defineProperty(exports,"TvToc",{enumerable:!0,get:()=>j.TvToc});exports.TvUi=y;exports.default=y;

package/dist/tv-ui.css

@@ -0,0 +1 @@
+body{background:#161e31;color:#cbd5e1;font-family:Roboto,sans-serif}

package/dist/tv-ui.d.ts

@@ -0,0 +1,6 @@
+export * from './entry'
+export {}
+import TvUi from './entry'
+export default TvUi
+export * from './entry'
+export {}

package/dist/tv-ui.es.js

@@ -0,0 +1,92 @@
+import { TvAlert as m } from "@todovue/tv-alert";
+import { TvAlert as V } from "@todovue/tv-alert";
+import { TvArticle as t } from "@todovue/tv-article";
+import { TvArticle as X } from "@todovue/tv-article";
+import { TvBreadcrumbs as e } from "@todovue/tv-breadcrumbs";
+import { TvBreadcrumbs as Z } from "@todovue/tv-breadcrumbs";
+import { TvButton as T } from "@todovue/tv-button";
+import { TvButton as $ } from "@todovue/tv-button";
+import { TvCard as f } from "@todovue/tv-card";
+import { TvCard as ro } from "@todovue/tv-card";
+import { TvDemo as p } from "@todovue/tv-demo";
+import { TvDemo as to } from "@todovue/tv-demo";
+import { TvFooter as v } from "@todovue/tv-footer";
+import { TvFooter as To } from "@todovue/tv-footer";
+import { TvHero as i } from "@todovue/tv-hero";
+import { TvHero as po } from "@todovue/tv-hero";
+import { TvLabel as a } from "@todovue/tv-label";
+import { TvLabel as io } from "@todovue/tv-label";
+import { TvMenu as x } from "@todovue/tv-menu";
+import { TvMenu as xo } from "@todovue/tv-menu";
+import { TvModal as n } from "@todovue/tv-modal";
+import { TvModal as lo } from "@todovue/tv-modal";
+import { TvPagination as l } from "@todovue/tv-pagination";
+import { TvPagination as so } from "@todovue/tv-pagination";
+import { TvProgressBar as c } from "@todovue/tv-progress-bar";
+import { TvProgressBar as Bo } from "@todovue/tv-progress-bar";
+import { TvRelativeTime as s } from "@todovue/tv-relative-time";
+import { TvRelativeTime as bo } from "@todovue/tv-relative-time";
+import { TvScrollTop as d } from "@todovue/tv-scroll-top";
+import { TvScrollTop as ho } from "@todovue/tv-scroll-top";
+import { TvSearch as u } from "@todovue/tv-search";
+import { TvSearch as Mo } from "@todovue/tv-search";
+import { TvSettings as B } from "@todovue/tv-settings";
+import { TvSettings as Co } from "@todovue/tv-settings";
+import { TvSidebar as S } from "@todovue/tv-sidebar";
+import { TvSidebar as Fo } from "@todovue/tv-sidebar";
+import { TvThemeButton as b } from "@todovue/tv-theme-button";
+import { TvThemeButton as Lo } from "@todovue/tv-theme-button";
+import { TvToc as g } from "@todovue/tv-toc";
+import { TvToc as Eo } from "@todovue/tv-toc";
+const h = [
+  m,
+  t,
+  e,
+  T,
+  f,
+  p,
+  v,
+  i,
+  a,
+  x,
+  n,
+  l,
+  c,
+  s,
+  d,
+  u,
+  B,
+  S,
+  b,
+  g
+], A = (r) => {
+  h.forEach((o) => {
+    o.name && r.component(o.name, o);
+  });
+}, N = {
+  install: A
+};
+export {
+  V as TvAlert,
+  X as TvArticle,
+  Z as TvBreadcrumbs,
+  $ as TvButton,
+  ro as TvCard,
+  to as TvDemo,
+  To as TvFooter,
+  po as TvHero,
+  io as TvLabel,
+  xo as TvMenu,
+  lo as TvModal,
+  so as TvPagination,
+  Bo as TvProgressBar,
+  bo as TvRelativeTime,
+  ho as TvScrollTop,
+  Mo as TvSearch,
+  Co as TvSettings,
+  Fo as TvSidebar,
+  Lo as TvThemeButton,
+  Eo as TvToc,
+  N as TvUi,
+  N as default
+};

package/nuxt.js

@@ -0,0 +1,58 @@
+
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@todovue/tv-ui',
+    configKey: 'tvUi'
+  },
+  setup(_options, nuxt) {
+    const alertCss = '@todovue/tv-alert/style.css';
+    const articleCss = '@todovue/tv-article/style.css';
+    const breadcrumbsCss = '@todovue/tv-breadcrumbs/style.css';
+    const cardCss = '@todovue/tv-card/style.css';
+    const footerCss = '@todovue/tv-footer/style.css';
+    const labelCss = '@todovue/tv-label/style.css';
+    const modalCss = '@todovue/tv-modal/style.css';
+    const buttonCss = '@todovue/tv-button/style.css';
+    const demoCss = '@todovue/tv-demo/style.css';
+    const heroCss = '@todovue/tv-hero/style.css';
+    const menuCss = '@todovue/tv-menu/style.css';
+    const paginationCss = '@todovue/tv-pagination/style.css';
+    const progressBarCss = '@todovue/tv-progress-bar/style.css';
+    const scrollTopCss = '@todovue/tv-scroll-top/style.css';
+    const searchCss = '@todovue/tv-search/style.css';
+    const settingsCss = '@todovue/tv-settings/style.css';
+    const sidebarCss = '@todovue/tv-sidebar/style.css';
+    const themeButtonCss = '@todovue/tv-theme-button/style.css';
+    const tocCss = '@todovue/tv-toc/style.css';
+    
+    const pushUnique = (path) => {
+      if (!nuxt.options.css.includes(path)) {
+        nuxt.options.css.push(path);
+      }
+    };
+    
+    [
+      alertCss,
+      articleCss,
+      breadcrumbsCss,
+      cardCss,
+      footerCss,
+      labelCss,
+      modalCss,
+      buttonCss,
+      demoCss,
+      heroCss,
+      menuCss,
+      paginationCss,
+      progressBarCss,
+      scrollTopCss,
+      searchCss,
+      settingsCss,
+      sidebarCss,
+      themeButtonCss,
+      tocCss
+    ].forEach(pushUnique);
+  }
+})

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@todovue/tv-ui",
+  "private": false,
+  "author": "Cristhian Daza",
+  "description": "UI component library for TODOvue application",
+  "license": "MIT",
+  "version": "0.1.0",
+  "type": "module",
+  "homepage": "https://ui.todovue.blog",
+  "repository": {
+    "name": "@todovue/tv-ui",
+    "type": "git",
+    "url": "git+https://github.com/TODOvue/tv-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/TODOvue/tv-ui/issues"
+  },
+  "keywords": [
+    "todovue",
+    "front-end",
+    "web",
+    "vue",
+    "vuejs",
+    "vue-js",
+    "ui",
+    "show-ui",
+    "vue-ui",
+    "vue-ui-component"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/tv-ui.es.js",
+      "require": "./dist/tv-ui.cjs.js"
+    },
+    "./style.css": "./dist/tv-ui.css",
+    "./nuxt": "./nuxt.js"
+  },
+  "main": "dist/tv-ui.cjs.js",
+  "module": "dist/tv-ui.es.js",
+  "types": "dist/tv-ui.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "nuxt.js"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss",
+    "dist/*.css"
+  ],
+  "scripts": {
+    "dev": "node scripts/copy-assets.js && vite",
+    "build": "vite build",
+    "build:demo": "cp README.md public/ && cp CHANGELOG.md public/ && VITE_BUILD_TARGET=demo vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.27"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.3",
+    "sass": "^1.97.2",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "dependencies": {
+    "@todovue/tv-alert": "^1.2.1",
+    "@todovue/tv-article": "^1.3.4",
+    "@todovue/tv-breadcrumbs": "^1.1.4",
+    "@todovue/tv-button": "^1.2.6",
+    "@todovue/tv-card": "^1.1.4",
+    "@todovue/tv-demo": "^1.4.11",
+    "@todovue/tv-footer": "^1.1.1",
+    "@todovue/tv-hero": "^1.2.1",
+    "@todovue/tv-label": "^1.2.4",
+    "@todovue/tv-menu": "^1.1.4",
+    "@todovue/tv-modal": "^1.2.1",
+    "@todovue/tv-pagination": "^1.1.4",
+    "@todovue/tv-progress-bar": "^1.1.1",
+    "@todovue/tv-relative-time": "^1.3.1",
+    "@todovue/tv-scroll-top": "^1.0.3",
+    "@todovue/tv-search": "^1.2.1",
+    "@todovue/tv-settings": "^1.0.4",
+    "@todovue/tv-sidebar": "^2.2.2",
+    "@todovue/tv-theme-button": "^1.2.1",
+    "@todovue/tv-toc": "^1.1.1",
+    "vue-router": "^4.6.4"
+  }
+}