@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.
- package/LICENSE +21 -0
- package/README.md +207 -0
- package/dist/.htaccess +8 -0
- package/dist/demos/tv-alert/CHANGELOG.md +127 -0
- package/dist/demos/tv-alert/README.md +334 -0
- package/dist/demos/tv-article/CHANGELOG.md +221 -0
- package/dist/demos/tv-article/README.md +258 -0
- package/dist/demos/tv-breadcrumbs/CHANGELOG.md +135 -0
- package/dist/demos/tv-breadcrumbs/README.md +364 -0
- package/dist/demos/tv-button/CHANGELOG.md +158 -0
- package/dist/demos/tv-button/README.md +255 -0
- package/dist/demos/tv-card/CHANGELOG.md +158 -0
- package/dist/demos/tv-card/README.md +332 -0
- package/dist/demos/tv-demo/CHANGELOG.md +352 -0
- package/dist/demos/tv-demo/README.md +229 -0
- package/dist/demos/tv-footer/CHANGELOG.md +67 -0
- package/dist/demos/tv-footer/README.md +760 -0
- package/dist/demos/tv-hero/CHANGELOG.md +137 -0
- package/dist/demos/tv-hero/README.md +410 -0
- package/dist/demos/tv-label/CHANGELOG.md +138 -0
- package/dist/demos/tv-label/README.md +357 -0
- package/dist/demos/tv-menu/CHANGELOG.md +145 -0
- package/dist/demos/tv-menu/README.md +389 -0
- package/dist/demos/tv-modal/CHANGELOG.md +127 -0
- package/dist/demos/tv-modal/README.md +466 -0
- package/dist/demos/tv-pagination/CHANGELOG.md +125 -0
- package/dist/demos/tv-pagination/README.md +275 -0
- package/dist/demos/tv-progress-bar/CHANGELOG.md +84 -0
- package/dist/demos/tv-progress-bar/README.md +894 -0
- package/dist/demos/tv-relative-time/CHANGELOG.md +122 -0
- package/dist/demos/tv-relative-time/README.md +405 -0
- package/dist/demos/tv-scroll-top/CHANGELOG.md +69 -0
- package/dist/demos/tv-scroll-top/README.md +445 -0
- package/dist/demos/tv-search/CHANGELOG.md +155 -0
- package/dist/demos/tv-search/README.md +407 -0
- package/dist/demos/tv-settings/CHANGELOG.md +94 -0
- package/dist/demos/tv-settings/README.md +314 -0
- package/dist/demos/tv-sidebar/CHANGELOG.md +229 -0
- package/dist/demos/tv-sidebar/README.md +592 -0
- package/dist/demos/tv-theme-button/CHANGELOG.md +136 -0
- package/dist/demos/tv-theme-button/README.md +392 -0
- package/dist/demos/tv-toc/CHANGELOG.md +80 -0
- package/dist/demos/tv-toc/README.md +288 -0
- package/dist/entry.d.ts +48 -0
- package/dist/favicon.ico +0 -0
- package/dist/tv-ui.cjs.js +1 -0
- package/dist/tv-ui.css +1 -0
- package/dist/tv-ui.d.ts +6 -0
- package/dist/tv-ui.es.js +92 -0
- package/nuxt.js +58 -0
- 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
|
+
[](https://www.npmjs.com/package/@todovue/tv-article)
|
|
7
|
+
[](https://www.npmjs.com/package/@todovue/tv-article)
|
|
8
|
+
[](https://www.npmjs.com/package/@todovue/tv-article)
|
|
9
|
+

|
|
10
|
+

|
|
11
|
+

|
|
12
|
+

|
|
13
|
+

|
|
14
|
+

|
|
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="what-is">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="intro">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="h2">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
|