@todovue/tv-ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +207 -0
  3. package/dist/.htaccess +8 -0
  4. package/dist/demos/tv-alert/CHANGELOG.md +127 -0
  5. package/dist/demos/tv-alert/README.md +334 -0
  6. package/dist/demos/tv-article/CHANGELOG.md +221 -0
  7. package/dist/demos/tv-article/README.md +258 -0
  8. package/dist/demos/tv-breadcrumbs/CHANGELOG.md +135 -0
  9. package/dist/demos/tv-breadcrumbs/README.md +364 -0
  10. package/dist/demos/tv-button/CHANGELOG.md +158 -0
  11. package/dist/demos/tv-button/README.md +255 -0
  12. package/dist/demos/tv-card/CHANGELOG.md +158 -0
  13. package/dist/demos/tv-card/README.md +332 -0
  14. package/dist/demos/tv-demo/CHANGELOG.md +352 -0
  15. package/dist/demos/tv-demo/README.md +229 -0
  16. package/dist/demos/tv-footer/CHANGELOG.md +67 -0
  17. package/dist/demos/tv-footer/README.md +760 -0
  18. package/dist/demos/tv-hero/CHANGELOG.md +137 -0
  19. package/dist/demos/tv-hero/README.md +410 -0
  20. package/dist/demos/tv-label/CHANGELOG.md +138 -0
  21. package/dist/demos/tv-label/README.md +357 -0
  22. package/dist/demos/tv-menu/CHANGELOG.md +145 -0
  23. package/dist/demos/tv-menu/README.md +389 -0
  24. package/dist/demos/tv-modal/CHANGELOG.md +127 -0
  25. package/dist/demos/tv-modal/README.md +466 -0
  26. package/dist/demos/tv-pagination/CHANGELOG.md +125 -0
  27. package/dist/demos/tv-pagination/README.md +275 -0
  28. package/dist/demos/tv-progress-bar/CHANGELOG.md +84 -0
  29. package/dist/demos/tv-progress-bar/README.md +894 -0
  30. package/dist/demos/tv-relative-time/CHANGELOG.md +122 -0
  31. package/dist/demos/tv-relative-time/README.md +405 -0
  32. package/dist/demos/tv-scroll-top/CHANGELOG.md +69 -0
  33. package/dist/demos/tv-scroll-top/README.md +445 -0
  34. package/dist/demos/tv-search/CHANGELOG.md +155 -0
  35. package/dist/demos/tv-search/README.md +407 -0
  36. package/dist/demos/tv-settings/CHANGELOG.md +94 -0
  37. package/dist/demos/tv-settings/README.md +314 -0
  38. package/dist/demos/tv-sidebar/CHANGELOG.md +229 -0
  39. package/dist/demos/tv-sidebar/README.md +592 -0
  40. package/dist/demos/tv-theme-button/CHANGELOG.md +136 -0
  41. package/dist/demos/tv-theme-button/README.md +392 -0
  42. package/dist/demos/tv-toc/CHANGELOG.md +80 -0
  43. package/dist/demos/tv-toc/README.md +288 -0
  44. package/dist/entry.d.ts +48 -0
  45. package/dist/favicon.ico +0 -0
  46. package/dist/tv-ui.cjs.js +1 -0
  47. package/dist/tv-ui.css +1 -0
  48. package/dist/tv-ui.d.ts +6 -0
  49. package/dist/tv-ui.es.js +92 -0
  50. package/nuxt.js +58 -0
  51. package/package.json +92 -0
@@ -0,0 +1,221 @@
1
+ # Changelog
2
+
3
+ All notable changes to `@todovue/tv-article` will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [1.3.4] - 2026-01-27
9
+
10
+ ### Changed
11
+ - Simplified the file list in `package.json` to include only essential assets.
12
+ - Simplified the build configuration by removing demo-specific logic.
13
+ - Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
14
+ - Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
15
+ - Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
16
+
17
+ ### Added
18
+ - Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
19
+
20
+ ### Removed
21
+ - Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
22
+
23
+ ### Dependencies
24
+ - Updated `@todovue/tv-demo` to `^1.4.11`.
25
+ - Updated `@todovue/tv-alert` to `^1.2.1`.
26
+ - Updated `@todovue/tv-label` to `^1.2.3`.
27
+ - Updated `@todovue/tv-relative-time` to `^1.3.1`.
28
+ - Updated `vue` to `^3.5.27`.
29
+ - Updated `sass` to `^1.97.3`.
30
+
31
+ ## [1.3.3] - 2026-01-22
32
+
33
+ ### Changed
34
+ - Refined icon handling by separating monochrome and colored assets.
35
+ - Enhanced the `getIconClass` function to support specific file extensions.
36
+
37
+ ## [1.3.2] - 2026-01-21
38
+
39
+ ### Changed
40
+ - Refined the `getIconClass` function to utilize file names for more accurate icon determination.
41
+
42
+ ## [1.3.1] - 2026-01-21
43
+
44
+ ### Added
45
+ - Introduced titles to success messages for copy actions, localized based on the user's language.
46
+
47
+ ### Changed
48
+ - Enhanced file name handling within the parseInfo function.
49
+ - Improved logic for grouping code functionality.
50
+
51
+ ## [1.3.0] - 2026-01-21
52
+
53
+ ### Added
54
+ - Implemented code grouping functionality to allow toggling between different programming language examples.
55
+ - Introduced a tabbed interface for code blocks to improve documentation readability and organization.
56
+ - Added support for file type icons within code blocks to provide better context for different programming languages and formats.
57
+
58
+ ### Changed
59
+ - Adjusted the spacing for article headers to ensure consistent layout alignment.
60
+ - Updated mixins to utilize medium spacing constants across the stylesheet.
61
+ - Enhanced code block styling to improve readability and visual clarity.
62
+ - Updated the icon mapping logic to ensure correct file type associations in code blocks.
63
+ - Enhanced the visual styling of icons within code blocks for better integration and visibility.
64
+ - Adjusted the positioning of heading anchor buttons to improve accessibility and responsiveness on smaller screens.
65
+ - Enhanced the visibility of heading anchor buttons to ensure they are easily discoverable across various viewport sizes.
66
+
67
+ ### Dependencies
68
+ - Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
69
+ - Updated the `@todovue/tv-alert` dependency to `^1.2.0`.
70
+ - Updated the `@todovue/tv-label` dependency to `^1.2.1`.
71
+ - Updated the `@todovue/tv-relative-time` dependency to `^1.3.0`.
72
+ - Updated the `sass` dependency to `^1.97.2`.
73
+ - Updated the `vite` dependency to `^7.3.1`.
74
+
75
+ ## [1.2.3] - 2026-01-06
76
+
77
+ ### Fixed
78
+ - Fixed responsive behavior for tables.
79
+ - Fixed the copy button in code blocks.
80
+ - Fixed text breaking when there are very long words without spaces.
81
+
82
+ ## [1.2.2] - 2025-12-27
83
+
84
+ ### Added
85
+ - Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
86
+ - Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
87
+
88
+ ### Changed
89
+ - Changed the `base` option in `vite.config.js` for website deployment in cpanel.
90
+
91
+ ### Fixed
92
+ - Fixed repository URL in `package.json` to point to the correct GitHub repository.
93
+ - Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
94
+
95
+ ### Dependencies
96
+ - Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
97
+ - Added `@todovue/tv-alert` dependency to `package.json` for enhanced alert functionalities.
98
+
99
+ ## [1.2.1] - 2025-11-24
100
+
101
+ ### Added
102
+ - Added `highlight.js` for syntax highlighting.
103
+
104
+ ### Changed
105
+ - Updated background and text colors for dark and light themes to improve readability and visual comfort.
106
+ - Changed render pre to `highlight.js`
107
+
108
+ ### Dependencies
109
+ - Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
110
+
111
+ ## [1.2.0] - 2025-11-21
112
+
113
+ ### Added
114
+ - Added `nux.js` configuration file for Nuxt 4 integration.
115
+ - Added `tsconfig.json` for proper type checking during build.
116
+ - Create `global.d.ts` to declare module for TypeScript users.
117
+ - Added Nuxt module for automatic style injection and auto-registration of the `TvArticle` component.
118
+ - The `@todovue/tv-article` component is now externalized from the final build, reducing bundle size.
119
+ - Added `CHANGELOG.md` in script to generate demo and documentation site.
120
+
121
+ ### Dependencies
122
+ - Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
123
+ - Updated the `@todovue/tv-label` dependency to `^1.1.1` to ensure compatibility with the latest changes.
124
+ - Updated the `@todovue/tv-relative-time` dependency to `^1.2.0` to ensure compatibility with the latest changes.
125
+
126
+ ## [1.1.1] - 2025-11-15
127
+
128
+ ### Changed
129
+ - Styles are now served as a separate CSS file (`dist/tv-article.css`) generated by Vite during the build process.
130
+ - Users must now explicitly import the stylesheet in their application:
131
+ - For Vue/Vite SPA: `import '@todovue/tv-article/style.css'` in `main.ts`
132
+ - For Nuxt 3/4: Add `'@todovue/tv-article/style.css'` to the `css` array in `nuxt.config.ts`
133
+
134
+ ### Added
135
+ - Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
136
+ - Added `./style.css` export path in `package.json` for explicit CSS imports.
137
+ - Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
138
+
139
+ ### Dependencies
140
+ - Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
141
+
142
+ ## [1.1.0] - 2025-11-12
143
+
144
+ ### Added
145
+ - Added body rendering for the object received from Nuxt Content.
146
+ - Added dynamic timer color changes.
147
+
148
+ ### Dependencies
149
+ - Added `markdown-it` dependency for Markdown parsing.
150
+
151
+ ## [1.0.2] - 2025-11-04
152
+
153
+ ### Changed
154
+ * Improved accessibility for the copy link button with better focus styles and screen reader support.
155
+ * Enhanced external link indicator styling for better visibility and user experience.
156
+
157
+ ## [1.0.1] – 2025-10-30
158
+
159
+ ### Added
160
+ * Copy link button (`ui.showCopy`, enabled by default) next to the article title, with accessible feedback (`aria-live`) and full styling through `.tv-article__copy`.
161
+ * Automatic link enhancement in the article body:
162
+ * External links: `target="_blank"`, `rel="noopener noreferrer"`, and a visual indicator `↗`.
163
+ * Internal anchors (`#id`): smooth scrolling and URL hash updates.
164
+ * New cover configuration options (`coverLoading`, `coverDecoding`, `coverFetchPriority`, `coverAspect`).
165
+ * Responsive prose width variants: `.tv-prose--sm`, `.tv-prose--md`, `.tv-prose--lg`, `.tv-prose--full`.
166
+ * Copy button now includes `aria-label` and uses `aria-live="polite"` feedback for copy success/failure.
167
+ * Decorative icons marked with `aria-hidden="true"`.
168
+ * External links clearly differentiated visually.
169
+ * Complete styling for `.tv-article__copy`: focus ring, tooltip feedback, hover states, and dark-mode adjustments.
170
+ * Better spacing and color hierarchy for meta info and tags.
171
+ * External link indicator styling using `:deep(a[data-external="true"])`.
172
+ * Updated `tv-prose` sizing and responsive behavior for different prose widths.
173
+
174
+ ### Changed
175
+ * Reading time logic now prioritizes a numeric `readingTime` prop; otherwise, it auto-calculates by real word count (≈200 wpm).
176
+ * Localized reading time format:
177
+ * `es`: `X min de lectura`
178
+ * `en`: `X min read`
179
+ * `fr`, `pt` supported as well.
180
+ * Improved slug generation (`slugify`) for titles with accents or emojis — produces stable IDs.
181
+ * Header structure updated: new wrapper `.tv-article__header-top` to align the title and copy button horizontally.
182
+
183
+ ### Fixed
184
+ * Server-side rendering safety for all DOM-dependent logic (guards for `window`, `document`, `navigator`).
185
+ * Clipboard fallback: when `navigator.clipboard` is unavailable, uses `execCommand('copy')`.
186
+ * Re-applies anchor enhancements when the article body content changes.
187
+
188
+ ## [1.0.0] - 2025-10-21
189
+
190
+ ### Added
191
+ - Initial stable release of `@todovue/tv-article`.
192
+ - `TvArticle` Vue 3 component for rich article rendering with polished typography.
193
+ - Props:
194
+ - `content`: `title`, `description`, `date`, `readingTime`, `tags` (string or `{ tag, color }`), `cover`, `coverAlt`, `coverCaption`, `body` (HTML).
195
+ - `ui`: `showTitle`, `showMeta`, `showCover`, `center`, `proseSize` (`'sm'|'base'|'md'|'lg'|'full'`), `coverLoading`, `coverDecoding`, `coverFetchPriority`, `coverAspect`.
196
+ - `lang`: localized labels for `'en'` (default), `'es'`, `'fr'`, `'pt'`.
197
+ - Event: `anchor-copied` (emits heading anchor id when the link is copied).
198
+ - Slots: `header`, `before`, `after`, `footer`, and default.
199
+ - Reading time estimation (~200 wpm) when `readingTime` is not provided.
200
+ - Heading anchors (H2–H4) with “copy link” button and localized feedback.
201
+ - External link hardening (opens external links in a new tab with `rel="noopener noreferrer"`).
202
+ - Cover image options: `loading`, `decoding`, `fetchpriority`, and aspect ratio control via `ui.coverAspect`.
203
+ - Auto-injected CSS via Vite (no manual CSS import needed).
204
+ - SSR-friendly (Nuxt 3) — DOM enhancements run in `onMounted`.
205
+ - Build artifacts: ESM/CJS bundles and type definitions in `dist/`.
206
+ - Integrations: `@todovue/tv-label` for tags and `@todovue/tv-relative-time` for dates.
207
+
208
+ [1.3.4]: https://github.com/TODOvue/tv-article/pull/14/files
209
+ [1.3.3]: https://github.com/TODOvue/tv-article/pull/14/files
210
+ [1.3.2]: https://github.com/TODOvue/tv-article/pull/13/files
211
+ [1.3.1]: https://github.com/TODOvue/tv-article/pull/12/files
212
+ [1.3.0]: https://github.com/TODOvue/tv-article/pull/11/files
213
+ [1.2.3]: https://github.com/TODOvue/tv-article/pull/10/files
214
+ [1.2.2]: https://github.com/TODOvue/tv-article/pull/9/files
215
+ [1.2.1]: https://github.com/TODOvue/tv-article/pull/8/files
216
+ [1.2.0]: https://github.com/TODOvue/tv-article/pull/7/files
217
+ [1.1.1]: https://github.com/TODOvue/tv-article/pull/6/files
218
+ [1.1.0]: https://github.com/TODOvue/tv-article/pull/5/files
219
+ [1.0.2]: https://github.com/TODOvue/tv-article/pull/4/files
220
+ [1.0.1]: https://github.com/TODOvue/tv-article/pull/3/files
221
+ [1.0.0]: https://github.com/TODOvue/tv-article/pull/1/files
@@ -0,0 +1,258 @@
1
+ <p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo"></p>
2
+
3
+ # TODOvue Article (TvArticle)
4
+ A Vue 3 component to display rich article content with polished typography, optional cover image, metadata (date, reading time, tags), and copyable heading anchors. Works in SPA and SSR (e.g., Nuxt 4) and injects styles automatically.
5
+
6
+ [![npm](https://img.shields.io/npm/v/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
7
+ [![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
8
+ [![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-article.svg)](https://www.npmjs.com/package/@todovue/tv-article)
9
+ ![License](https://img.shields.io/github/license/TODOvue/tv-article)
10
+ ![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-article)
11
+ ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-article)
12
+ ![Node Version](https://img.shields.io/node/v/@todovue/tv-article)
13
+ ![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-article)
14
+ ![Stars](https://img.shields.io/github/stars/TODOvue/tv-article?style=social)
15
+ > Demo: https://ui.todovue.blog/article
16
+
17
+ ## Table of Contents
18
+ - [Features](#features)
19
+ - [Installation](#installation)
20
+ - [Quick Start (SPA)](#quick-start-spa)
21
+ - [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
22
+ - [Component Registration Options](#component-registration-options)
23
+ - [Props](#props)
24
+ - [Events](#events)
25
+ - [Slots](#slots)
26
+ - [Customization (Styles / UI)](#customization-styles--ui)
27
+ - [Accessibility](#accessibility)
28
+ - [SSR Notes](#ssr-notes)
29
+ - [Examples](#examples)
30
+ - [Development](#development)
31
+ - [Contributing](#contributing)
32
+ - [License](#license)
33
+
34
+ ## Features
35
+ - Polished prose typography for long content (paragraphs, lists, tables, quotes, code, images, etc.).
36
+ - H2–H4 headings get a “copy link” anchor button with localized feedback text.
37
+ - Optional metadata: date (rendered with relative-time component), reading time (estimated or forced), and colored tags.
38
+ - Cover image with `loading`, `decoding`, `fetchpriority` and aspect ratio control.
39
+ - Configurable layout: centered container and prose width (`sm`, `base`, `md`, `lg`, `full`).
40
+ - Slots for header/before/after/footer; default slot used when `content.body` is not provided.
41
+ - External links safety: open in a new tab with `rel="noopener noreferrer"` automatically.
42
+ - CSS auto-injected via JS: no manual CSS import required.
43
+
44
+ Internal deps: uses `@todovue/tv-label` (tags) and `@todovue/tv-relative-time` (date). You only need to install `@todovue/tv-article`.
45
+
46
+ ## Installation
47
+ Using npm:
48
+ ```bash
49
+ npm install @todovue/tv-article
50
+ ```
51
+ Using yarn:
52
+ ```bash
53
+ yarn add @todovue/tv-article
54
+ ```
55
+ Using pnpm:
56
+ ```bash
57
+ pnpm add @todovue/tv-article
58
+ ```
59
+ Peer: Vue ^3.
60
+
61
+ ## Quick Start (SPA)
62
+ **Important**: You must explicitly import the stylesheet in your application.
63
+
64
+ Global registration (main.js / main.ts):
65
+ ```js
66
+ import { createApp } from 'vue'
67
+ import App from './App.vue'
68
+
69
+ import { TvArticle } from '@todovue/tv-article'
70
+ import '@todovue/tv-article/style.css' // import styles
71
+ import '@todovue/tv-label/style.css' // tv-article depends on tv-label
72
+
73
+ const app = createApp(App)
74
+ app.component('TvArticle', TvArticle)
75
+ app.mount('#app')
76
+ ```
77
+ Local import inside a component:
78
+ ```vue
79
+ <script setup>
80
+ import { TvArticle } from '@todovue/tv-article'
81
+ import '@todovue/tv-article/style.css'
82
+
83
+ const article = {
84
+ title: 'Introduction to Vue 3',
85
+ description: 'Key concepts and the Composition API',
86
+ date: '2025-10-15',
87
+ readingTime: 8, // optional; if missing, it is estimated from body
88
+ tags: [ 'Vue', { tag: 'JavaScript', color: '#F7DF1E' } ],
89
+ body: `
90
+ <h2 id="what-is-vue">What is Vue?</h2>
91
+ <p>Provide safe HTML to v-html…</p>
92
+ `
93
+ }
94
+ </script>
95
+
96
+ <template>
97
+ <TvArticle :content="article" lang="en"></TvArticle>
98
+ </template>
99
+ ```
100
+
101
+ ## Nuxt 4 / SSR Usage
102
+ Create a plugin file: `plugins/tv-article.client.ts` (or without suffix; SSR-safe since DOM access happens in `onMounted`):
103
+ ```ts
104
+ // nuxt.config.ts
105
+ export default defineNuxtConfig({
106
+ modules: [
107
+ '@todovue/tv-card/nuxt'
108
+ ]
109
+ })
110
+ ```
111
+ Use anywhere:
112
+ ```vue
113
+ <TvArticle :content="{ title: 'Post', body: '<p>Hello</p>' }"></TvArticle>
114
+ ```
115
+
116
+ ## Component Registration Options
117
+ | Approach | When to use |
118
+ |------------------------------------------|------------------------------------------------|
119
+ | Global via `app.use(TvArticle)` | Many usages across app / design system install |
120
+ | Local named import `{ TvArticle }` | Isolated or code-split contexts |
121
+ | Direct default import `import TvArticle` | Single usage or manual registration |
122
+
123
+ ## Props
124
+ All content is expected to be safe HTML for `content.body` (it is rendered via `v-html`).
125
+
126
+ - Prop: `content` (Object) [default: `{ title: '', body: '' }`]
127
+ - title: string
128
+ - description: string
129
+ - date: string | Date (rendered relatively via `@todovue/tv-relative-time`)
130
+ - readingTime: number (minutes; if omitted, estimated at ~200 wpm)
131
+ - tags: Array<string | { tag: string, color?: string }>
132
+ - cover: string (image URL)
133
+ - coverAlt: string
134
+ - coverCaption: string
135
+ - body: string (HTML)
136
+
137
+ - Prop: `ui` (Object) [defaults below]
138
+ - showTitle: boolean (true)
139
+ - showMeta: boolean (true)
140
+ - showCover: boolean (true)
141
+ - center: boolean (true)
142
+ - proseSize: 'sm' | 'base' | 'md' | 'lg' | 'full' ('full')
143
+ - coverLoading: 'lazy' | 'eager' ('lazy')
144
+ - coverDecoding: 'async' | 'sync' ('async')
145
+ - coverFetchPriority: 'auto' | 'high' | 'low' ('auto')
146
+ - coverAspect: string | null (e.g., '16 / 9')
147
+
148
+ - Prop: `lang` (String) [default: 'en']
149
+ - Affects reading time text and anchor button labels ('en', 'es', 'fr', 'pt').
150
+
151
+ ## Events
152
+ | Event (kebab) | Payload | Description |
153
+ |------------------|---------------------|--------------------------------------------|
154
+ | `anchor-copied` | `string` (anchorId) | Emitted when a heading link is copied |
155
+
156
+ Usage:
157
+ ```vue
158
+ <TvArticle @anchor-copied="onCopied"></TvArticle>
159
+ ```
160
+ ```js
161
+ function onCopied(id) {
162
+ console.log('Anchor copied:', id)
163
+ }
164
+ ```
165
+
166
+ ## Slots
167
+ - `header`: Replace the entire header (title, description, meta, cover). If not provided, TvArticle renders the header based on `ui` and `content`.
168
+ - `before`: Content before the article body.
169
+ - `after`: Content after the article body.
170
+ - `footer`: Footer area (author, share, etc.).
171
+ - default: When `content.body` is missing, the default slot is rendered inside the prose container.
172
+
173
+ ## Customization (Styles / UI)
174
+ - Styles: the package injects CSS automatically when you import the component (no extra CSS import needed).
175
+ - Layout: control width with `ui.proseSize` and centering with `ui.center`.
176
+ - Cover: adjust `ui.coverAspect`, `coverLoading`, `coverDecoding`, and `coverFetchPriority`.
177
+ - Tags: `content.tags` accepts strings or `{ tag, color }` objects.
178
+ - For deeper theming, override the `.tv-article*` classes in your app.
179
+
180
+ ## Accessibility
181
+ - `aria-labelledby` is applied to `<article>` when a title is present.
182
+ - Anchor button on H2–H4 with localized `aria-label`/`title` and copied feedback.
183
+ - External links are marked with `target="_blank"` and `rel="noopener noreferrer"` for safety.
184
+
185
+ ## SSR Notes
186
+ - No DOM access during `setup`; enhancements (anchors/links) happen in `onMounted`, making it SSR-safe.
187
+ - Styles are injected on the client via JS; no need to import CSS manually.
188
+
189
+ ## Examples
190
+ Basic:
191
+ ```vue
192
+ <TvArticle :content="{
193
+ title: 'Introduction to Vue 3',
194
+ date: '2025-10-15',
195
+ readingTime: 8,
196
+ tags: ['Vue', 'JavaScript'],
197
+ body: '<h2 id=&quot;what-is&quot;>What is it?</h2><p>…</p>'
198
+ }" lang="en"></TvArticle>
199
+ ```
200
+ With cover and aspect ratio:
201
+ ```vue
202
+ <TvArticle
203
+ :content="{
204
+ title: 'Nuxt Content Guide',
205
+ description: 'Build blogs and docs',
206
+ date: '2025-10-20',
207
+ readingTime: 12,
208
+ tags: ['Nuxt', 'Markdown'],
209
+ cover: 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=675&fit=crop',
210
+ coverAlt: 'Laptop with code',
211
+ coverCaption: 'Content with cover image',
212
+ body: '<h2 id=&quot;intro&quot;>Introduction</h2><p>…</p>'
213
+ }"
214
+ :ui="{ coverAspect: '16 / 9', center: true }"
215
+ ></TvArticle>
216
+ ```
217
+ Custom UI + footer slot:
218
+ ```vue
219
+ <TvArticle
220
+ :content="{ title: 'Typography', body: '<h2 id=&quot;h2&quot;>H2</h2><p>…</p>' }"
221
+ :ui="{ proseSize: 'lg', center: true }"
222
+ @anchor-copied="id => console.log(id)"
223
+ >
224
+ <template #footer>
225
+ <hr />
226
+ <small>Author: TvArticle Team</small>
227
+ </template>
228
+ </TvArticle>
229
+ ```
230
+ Minimal:
231
+ ```vue
232
+ <TvArticle :content="{ title: 'Minimal', body: '<p>Only content</p>' }" :ui="{ showMeta: false, showCover: false, proseSize: 'base' }"></TvArticle>
233
+ ```
234
+
235
+ ## Development
236
+ ```bash
237
+ git clone https://github.com/TODOvue/tv-article.git
238
+ cd tv-article
239
+ npm install
240
+ npm run dev # demo playground with Vite
241
+ npm run build # library build (ESM/CJS + d.ts)
242
+ npm run build:demo # demo site build (dist-demo)
243
+ ```
244
+ The library marks `vue` as external and generates `dist/tv-article.es.js`, `dist/tv-article.cjs.js`, `dist/tv-article.css`, and type definitions.
245
+
246
+ ### Notes
247
+ - `content.body` is rendered with `v-html`: provide sanitized HTML if it comes from Markdown or external sources.
248
+ - Reading time falls back to an estimation of ~200 wpm when `readingTime` is not provided.
249
+ - Supported internal locales for UI text: `en`, `es`, `fr`, `pt`.
250
+
251
+ ## Contributing
252
+ PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
253
+
254
+ ## License
255
+ MIT © TODOvue
256
+
257
+ ### Attributions
258
+ Crafted for the TODOvue component ecosystem
@@ -0,0 +1,135 @@
1
+ # Changelog
2
+
3
+ All notable changes to `@todovue/tv-breadcrumbs` will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
+ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+
8
+ ## [1.1.4] - 2026-01-27
9
+
10
+ ### Changed
11
+ - Simplified the file list in `package.json` to include only essential assets.
12
+ - Simplified the build configuration by removing demo-specific logic.
13
+ - Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
14
+ - Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
15
+ - Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
16
+
17
+ ### Added
18
+ - Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
19
+
20
+ ### Removed
21
+ - Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
22
+
23
+ ### Dependencies
24
+ - Updated `@todovue/tv-demo` to `^1.4.11`.
25
+ - Updated `vue` to `^3.5.27`.
26
+ - Updated `sass` to `^1.97.3`.
27
+
28
+ ## [1.1.3] - 2026-01-20
29
+
30
+ ### Added
31
+ - Added support for icons in breadcrumb items via the `icon` property.
32
+ - Added interactive dropdown for truncated items (when using `maxItems`), allowing users to access hidden links.
33
+ - Added `activeLink` prop to optionally render the current page item as a clickable link.
34
+
35
+ ### Dependencies
36
+ - Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
37
+ - Updated the `sass` dependency to `^1.97.2`.
38
+ - Updated the `vite` dependency to `^7.3.1`.
39
+
40
+ ## [1.1.2] - 2025-12-27
41
+
42
+ ### Added
43
+ - Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
44
+ - Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
45
+
46
+ ### Changed
47
+ - Changed the `base` option in `vite.config.js` for website deployment in cpanel.
48
+
49
+ ### Fixed
50
+ - Fixed repository URL in `package.json` to point to the correct GitHub repository.
51
+ - Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
52
+
53
+ ### Dependencies
54
+ - Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
55
+
56
+ ## [1.1.1] - 2025-11-24
57
+
58
+ ### Changed
59
+ - Updated background and text colors for dark and light themes to improve readability and visual comfort.
60
+ - Removed `_variables.scss` file as it is no longer needed.
61
+
62
+ ### Dependencies
63
+ - Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
64
+
65
+ ## [1.1.0] - 2025-11-21
66
+
67
+ ### Added
68
+ - Added `nux.js` configuration file for Nuxt 4 integration.
69
+ - Added `tsconfig.json` for proper type checking during build.
70
+ - Create `global.d.ts` to declare module for TypeScript users.
71
+ - Added Nuxt module for automatic style injection and auto-registration of the `TvBreadcrumbs` component.
72
+ - The `@todovue/tv-breadcrumbs` component is now externalized from the final build, reducing bundle size.
73
+ - Added `CHANGELOG.md` in script to generate demo and documentation site.
74
+
75
+ ### Dependencies
76
+ - Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
77
+
78
+ ## [1.0.1] - 2025-11-15
79
+
80
+ ### Changed
81
+ - Styles are now served as a separate CSS file (`dist/tv-breadcrumbs.css`) generated by Vite during the build process.
82
+ - Users must now explicitly import the stylesheet in their application:
83
+ - For Vue/Vite SPA: `import '@todovue/tv-breadcrumbs/style.css'` in `main.ts`
84
+ - For Nuxt 3/4: Add `'@todovue/tv-breadcrumbs/style.css'` to the `css` array in `nuxt.config.ts`
85
+
86
+ ### Added
87
+ - Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
88
+ - Added `./style.css` export path in `package.json` for explicit CSS imports.
89
+ - Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
90
+
91
+ ### Dependencies
92
+ - Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
93
+
94
+ ## [1.0.0] - 2025-11-08
95
+
96
+ ### Added
97
+ - Initial release of TvBreadcrumbs component
98
+ - Manual breadcrumb items via `items` prop
99
+ - Auto-generation mode from Vue Router routes (`autoGenerate` prop)
100
+ - Custom separator support via `separator` prop (default: `›`)
101
+ - Max items control with ellipsis collapse (`maxItems` prop)
102
+ - Customizable home label for auto-generated breadcrumbs (`homeLabel` prop)
103
+ - ARIA accessibility label customization (`ariaLabel` prop)
104
+ - `item-click` event emitted when breadcrumb item is clicked
105
+ - `navigate` event emitted when router navigation occurs
106
+ - Three customizable slots:
107
+ - `item` - Customize breadcrumb link rendering
108
+ - `current` - Customize current (last) item rendering
109
+ - `separator` - Customize separator rendering
110
+ - Full Vue Router integration with automatic detection
111
+ - Route meta breadcrumb support (string, array, or function)
112
+ - Disabled item state support
113
+ - Full ARIA accessibility support:
114
+ - Semantic HTML structure (`<nav>`, `<ol>`, `<li>`)
115
+ - `aria-current="page"` for current item
116
+ - `aria-disabled` for disabled items
117
+ - `aria-hidden` for separators
118
+ - Schema.org structured data markup for SEO
119
+ - SSR-ready implementation (works with Nuxt 3)
120
+ - BEM-style CSS classes for easy customization
121
+ - Keyboard navigation support
122
+ - Responsive SCSS styling
123
+ - TypeScript definitions
124
+ - Plugin installation support
125
+ - Composable architecture with `useBreadcrumb`
126
+ - Auto-normalization of breadcrumb items
127
+ - Path segment humanization (converts kebab-case to Title Case)
128
+
129
+ [1.1.4]: https://github.com/TODOvue/tv-breadcrumbs/pull/7/files
130
+ [1.1.3]: https://github.com/TODOvue/tv-breadcrumbs/pull/6/files
131
+ [1.1.2]: https://github.com/TODOvue/tv-breadcrumbs/pull/5/files
132
+ [1.1.1]: https://github.com/TODOvue/tv-breadcrumbs/pull/4/files
133
+ [1.1.0]: https://github.com/TODOvue/tv-breadcrumbs/pull/3/files
134
+ [1.0.1]: https://github.com/TODOvue/tv-breadcrumbs/pull/2/files
135
+ [1.0.0]: https://github.com/TODOvue/tv-breadcrumbs/pull/1/files