@todovue/tv-ui 0.1.0 → 0.1.1

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 (48) hide show
  1. package/README.md +20 -20
  2. package/dist/entry.d.ts +2 -2
  3. package/dist/tv-ui.cjs.js +1 -1
  4. package/dist/tv-ui.css +1 -1
  5. package/dist/tv-ui.es.js +50 -49
  6. package/package.json +1 -1
  7. package/dist/.htaccess +0 -8
  8. package/dist/demos/tv-alert/CHANGELOG.md +0 -127
  9. package/dist/demos/tv-alert/README.md +0 -334
  10. package/dist/demos/tv-article/CHANGELOG.md +0 -221
  11. package/dist/demos/tv-article/README.md +0 -258
  12. package/dist/demos/tv-breadcrumbs/CHANGELOG.md +0 -135
  13. package/dist/demos/tv-breadcrumbs/README.md +0 -364
  14. package/dist/demos/tv-button/CHANGELOG.md +0 -158
  15. package/dist/demos/tv-button/README.md +0 -255
  16. package/dist/demos/tv-card/CHANGELOG.md +0 -158
  17. package/dist/demos/tv-card/README.md +0 -332
  18. package/dist/demos/tv-demo/CHANGELOG.md +0 -352
  19. package/dist/demos/tv-demo/README.md +0 -229
  20. package/dist/demos/tv-footer/CHANGELOG.md +0 -67
  21. package/dist/demos/tv-footer/README.md +0 -760
  22. package/dist/demos/tv-hero/CHANGELOG.md +0 -137
  23. package/dist/demos/tv-hero/README.md +0 -410
  24. package/dist/demos/tv-label/CHANGELOG.md +0 -138
  25. package/dist/demos/tv-label/README.md +0 -357
  26. package/dist/demos/tv-menu/CHANGELOG.md +0 -145
  27. package/dist/demos/tv-menu/README.md +0 -389
  28. package/dist/demos/tv-modal/CHANGELOG.md +0 -127
  29. package/dist/demos/tv-modal/README.md +0 -466
  30. package/dist/demos/tv-pagination/CHANGELOG.md +0 -125
  31. package/dist/demos/tv-pagination/README.md +0 -275
  32. package/dist/demos/tv-progress-bar/CHANGELOG.md +0 -84
  33. package/dist/demos/tv-progress-bar/README.md +0 -894
  34. package/dist/demos/tv-relative-time/CHANGELOG.md +0 -122
  35. package/dist/demos/tv-relative-time/README.md +0 -405
  36. package/dist/demos/tv-scroll-top/CHANGELOG.md +0 -69
  37. package/dist/demos/tv-scroll-top/README.md +0 -445
  38. package/dist/demos/tv-search/CHANGELOG.md +0 -155
  39. package/dist/demos/tv-search/README.md +0 -407
  40. package/dist/demos/tv-settings/CHANGELOG.md +0 -94
  41. package/dist/demos/tv-settings/README.md +0 -314
  42. package/dist/demos/tv-sidebar/CHANGELOG.md +0 -229
  43. package/dist/demos/tv-sidebar/README.md +0 -592
  44. package/dist/demos/tv-theme-button/CHANGELOG.md +0 -136
  45. package/dist/demos/tv-theme-button/README.md +0 -392
  46. package/dist/demos/tv-toc/CHANGELOG.md +0 -80
  47. package/dist/demos/tv-toc/README.md +0 -288
  48. package/dist/favicon.ico +0 -0
@@ -1,127 +0,0 @@
1
- # Changelog
2
-
3
- All notable changes to this project 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.2.1] - 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-button` to `^1.2.5`.
26
- - Updated `vue` to `^3.5.27`.
27
- - Updated `sass` to `^1.97.3`.
28
-
29
- ## [1.2.0] - 2026-01-20
30
-
31
- ### Added
32
- - Enhanced the Alert component with support for customizable icons and titles.
33
- - Added action slots to the Alert component to support interactive elements within notifications.
34
-
35
- ### Dependencies
36
- - Updated the `@todovue/tv-button` dependency to `^1.2.4`.
37
- - Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
38
- - Updated the `sass` dependency to `^1.97.2`.
39
- - Updated the `vite` dependency to `^7.3.1`.
40
-
41
- ## [1.1.1] - 2025-12-19
42
-
43
- ### Added
44
- - Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
45
- - Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
46
-
47
- ### Changed
48
- - Changed the `base` option in `vite.config.js` for website deployment in cpanel.
49
-
50
- ### Fixed
51
- - Fixed repository URL in `package.json` to point to the correct GitHub repository.
52
- - Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
53
-
54
- ### Dependencies
55
- - Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
56
-
57
- ## [1.1.0] - 2025-11-21
58
-
59
- ### Added
60
- - Added `nux.js` configuration file for Nuxt 4 integration.
61
- - Added `tsconfig.json` for proper type checking during build.
62
- - Create `global.d.ts` to declare module for TypeScript users.
63
- - Added Nuxt module for automatic style injection and auto-registration of the `TvAlert` component.
64
- - The `@todovue/tv-alert` component is now externalized from the final build, reducing bundle size.
65
- - Added `CHANGELOG.md` in script to generate demo and documentation site.
66
-
67
- ### Dependencies
68
- - Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
69
- - Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
70
-
71
- ## [1.0.2] - 2025-11-18
72
-
73
- ### Fixed
74
- - **BREAKING FIX**: Exported `useAlert` composable from the library entry point (`src/entry.ts`). Previously, the composable was not accessible when importing from `@todovue/tv-alert`, causing errors when trying to use `import { useAlert } from '@todovue/tv-alert'`.
75
- - Fixed incorrect imports in demo files that were importing from `@todovue/tv-button` instead of `@todovue/tv-alert`.
76
-
77
- ### Added
78
- - Proper exports in both ESM and CJS bundles for `useAlert`.
79
-
80
- ## [1.0.1] - 2025-11-15
81
-
82
- ### Changed
83
- - Styles are now served as a separate CSS file (`dist/tv-alert.css`) generated by Vite during the build process.
84
- - Users must now explicitly import the stylesheet in their application:
85
- - For Vue/Vite SPA: `import '@todovue/tv-alert/style.css'` in `main.ts`
86
- - For Nuxt 3/4: Add `'@todovue/tv-alert/style.css'` to the `css` array in `nuxt.config.ts`
87
-
88
- ### Added
89
- - Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
90
- - Added `./style.css` export path in `package.json` for explicit CSS imports.
91
- - Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
92
-
93
- ### Dependencies
94
- - Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
95
-
96
- ## [1.0.0] - 2025-11-11
97
-
98
- ### Added
99
- - Initial release of TvAlert component
100
- - Multiple alert types: `info`, `success`, `warning`, `error`
101
- - Six position options: `top-right`, `top-center`, `top-left`, `bottom-right`, `bottom-center`, `bottom-left`
102
- - Auto-dismiss functionality with customizable duration
103
- - Progress bar showing remaining time
104
- - Pause on hover feature (configurable via `pauseOnHover` option)
105
- - Optional close button (configurable via `showClose` option)
106
- - Stack multiple alerts in the same position with configurable max limit
107
- - Composable API `useAlert` with programmatic methods
108
- - Type-specific convenience methods: `alert.info()`, `alert.success()`, `alert.warning()`, `alert.error()`
109
- - Generic `alert.open()` method with full options support
110
- - Smooth slide-in/slide-out transitions based on position
111
- - ARIA accessibility attributes (`aria-live`, `role`, `aria-label`)
112
- - SSR compatibility (works with Nuxt 3 and other SSR frameworks)
113
- - Vue 3 plugin support for global registration
114
- - TypeScript definitions
115
- - SCSS styling with customizable variables
116
- - Icon slot support for custom icons per alert type
117
- - Alert management methods: `removeAlert()`, `clearAll()`
118
- - Reactive alerts array access
119
- - Tree-shakeable ES module build
120
-
121
- [1.2.1]: https://github.com/TODOvue/todovue-alert/pull/8/files
122
- [1.2.0]: https://github.com/TODOvue/todovue-alert/pull/7/files
123
- [1.1.1]: https://github.com/TODOvue/todovue-alert/pull/6/files
124
- [1.1.0]: https://github.com/TODOvue/todovue-alert/pull/5/files
125
- [1.0.2]: https://github.com/TODOvue/todovue-alert/pull/4/files
126
- [1.0.1]: https://github.com/TODOvue/todovue-alert/pull/3/files
127
- [1.0.0]: https://github.com/TODOvue/todovue-alert/pull/1/files
@@ -1,334 +0,0 @@
1
- <p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
2
- </p>
3
-
4
- # TODOvue Alert (TvAlert)
5
- A flexible, framework‑agnostic Vue 3 alert/notification component with multiple positions, types, progress bar, pause on hover, and customization utilities. Ship it in Single Page Apps or Server-Side Rendered (SSR) environments (e.g. Nuxt 3) with zero DOM assumptions.
6
-
7
- [![npm](https://img.shields.io/npm/v/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
8
- [![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
9
- [![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
10
- ![License](https://img.shields.io/github/license/TODOvue/tv-alert)
11
- ![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-alert)
12
- ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-alert)
13
- ![Node Version](https://img.shields.io/node/v/@todovue/tv-alert)
14
- ![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-alert)
15
- ![Stars](https://img.shields.io/github/stars/TODOvue/tv-alert?style=social)
16
-
17
- > Demo: https://ui.todovue.blog/alert
18
-
19
- ## Table of Contents
20
- - [Features](#features)
21
- - [Installation](#installation)
22
- - [Quick Start (SPA)](#quick-start-spa)
23
- - [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
24
- - [Component Registration Options](#component-registration-options)
25
- - [Props](#props)
26
- - [Alert Options](#alert-options)
27
- - [Composable API (useAlert)](#composable-api-usealert)
28
- - [Positions](#positions)
29
- - [Alert Types](#alert-types)
30
- - [Customization (Styles / Theming)](#customization-styles--theming)
31
- - [Accessibility](#accessibility)
32
- - [SSR Notes](#ssr-notes)
33
- - [Development](#development)
34
- - [Contributing](#contributing)
35
- - [License](#license)
36
-
37
- ## Features
38
- - Multiple alert types: info, success, warning, error
39
- - Six position options: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
40
- - Auto-dismiss with customizable duration
41
- - Progress bar showing remaining time
42
- - Pause on hover (configurable)
43
- - Optional close button
44
- - Stack multiple alerts in the same position (with max limit)
45
- - Programmatic API via composable (`useAlert`)
46
- - Smooth slide-in/slide-out transitions
47
- - Works in SPA and SSR (Nuxt 3) contexts
48
- - Tree-shake friendly (Vue marked external in library build)
49
-
50
- ## Installation
51
- Using npm:
52
- ```bash
53
- npm install @todovue/tv-alert
54
- ```
55
- Using yarn:
56
- ```bash
57
- yarn add @todovue/tv-alert
58
- ```
59
- Using pnpm:
60
- ```bash
61
- pnpm add @todovue/tv-alert
62
- ```
63
-
64
- ## Quick Start (SPA)
65
- Global registration (main.js / main.ts):
66
- ```js
67
- import { createApp } from 'vue'
68
- import App from './App.vue'
69
-
70
- import '@todovue/tv-alert/style.css'
71
- import { TvAlert } from '@todovue/tv-alert'
72
-
73
- const app = createApp(App)
74
- app.component('TvAlert', TvAlert)
75
- app.mount('#app')
76
- ```
77
-
78
- In your root component (App.vue):
79
- ```vue
80
- <template>
81
- <div id="app">
82
- <TvAlert />
83
- <router-view />
84
- </div>
85
- </template>
86
- ```
87
-
88
- Using the alert in any component:
89
- ```vue
90
- <script setup>
91
- import { useAlert } from '@todovue/tv-alert'
92
-
93
- const { api } = useAlert()
94
- const alert = api()
95
-
96
- function showNotification() {
97
- alert.success('Operation completed successfully!')
98
- }
99
- </script>
100
-
101
- <template>
102
- <button @click="showNotification">Show Alert</button>
103
- </template>
104
- ```
105
-
106
- ## Nuxt 4 / SSR Usage
107
-
108
- **Step 1:** Add the stylesheet to your `nuxt.config.ts`:
109
- ```ts
110
- // nuxt.config.ts
111
- export default defineNuxtConfig({
112
- modules: [
113
- '@todovue/tv-alert/nuxt'
114
- ]
115
- })
116
- ```
117
-
118
- **Step 2:** Create a plugin file: `plugins/tv-alert.client.ts` (client-only is fine, or without suffix for SSR as it is safe):
119
- ```ts
120
- import { defineNuxtPlugin } from '#app'
121
- import { TvAlert } from '@todovue/tv-alert'
122
-
123
- export default defineNuxtPlugin(nuxtApp => {
124
- nuxtApp.vueApp.component('TvAlert', TvAlert)
125
- })
126
- ```
127
-
128
- **Step 3:** Add the component to your app.vue or layout:
129
- ```vue
130
- <template>
131
- <div>
132
- <TvAlert />
133
- <NuxtPage />
134
- </div>
135
- </template>
136
- ```
137
-
138
- Use anywhere:
139
- ```vue
140
- <script setup>
141
- import { useAlert } from '@todovue/tv-alert'
142
-
143
- const { api } = useAlert()
144
- const alert = api()
145
-
146
- function notify() {
147
- alert.info('Welcome to our app!')
148
- }
149
- </script>
150
- ```
151
-
152
- ## Component Registration Options
153
- | Approach | When to use |
154
- |-------------------------------------------------------------------|------------------------------------------------|
155
- | Global via `app.use(TvAlert)` | Recommended - single instance across app |
156
- | Local named import `{ TvAlert }` | When you need multiple alert containers |
157
- | Direct default import `import TvAlert from '@todovue/tv-alert'` | Single usage or manual registration |
158
-
159
- ## Props
160
- The `TvAlert` component accepts the following props:
161
-
162
- | Prop | Type | Default | Description |
163
- |------|--------|---------|--------------------------------------------------|
164
- | max | Number | 8 | Maximum number of alerts to display per position |
165
-
166
- Example:
167
- ```vue
168
- <TvAlert :max="5" />
169
- ```
170
-
171
- ## Alert Options
172
- When calling `alert.open()` or type-specific methods, you can pass an options object:
173
-
174
- | Option | Type | Default | Description |
175
- |---------------|---------|--------------|-------------------------------------------------------|
176
- | title | String | null | Optional bold title above the message |
177
- | message | String | '' | The message to display in the alert |
178
- | type | String | 'info' | Alert type: 'info', 'success', 'warning', or 'error' |
179
- | position | String | 'top-right' | Position of the alert (see Positions section) |
180
- | duration | Number | 4000 | Duration in milliseconds (0 = never auto-dismiss) |
181
- | showClose | Boolean | true | Show/hide close button |
182
- | pauseOnHover | Boolean | true | Pause auto-dismiss timer on mouse hover |
183
- | showProgress | Boolean | true | Show/hide progress bar |
184
- | icon | String | null | Custom icon implementation (not widely used) |
185
- | customIcon | String | null | SVG/HTML string for a custom icon replacing default |
186
- | actions | Array | [] | Array of action buttons: `{ label, handler(item) }` |
187
- | allowHtml | Boolean | false | Allow HTML content in the message |
188
-
189
- Example:
190
- ```js
191
- alert.open({
192
- message: 'Custom alert',
193
- type: 'warning',
194
- position: 'bottom-center',
195
- duration: 6000,
196
- showClose: true,
197
- pauseOnHover: true,
198
- showProgress: true
199
- })
200
- ```
201
-
202
- ## Composable API (useAlert)
203
- The `useAlert` composable provides methods to manage alerts programmatically:
204
-
205
- ```js
206
- import { useAlert } from '@todovue/tv-alert'
207
-
208
- const { api, addAlert, removeAlert, clearAll, alerts } = useAlert()
209
-
210
- // Get the simplified API
211
- const alert = api()
212
-
213
- // Type-specific methods
214
- alert.info('Information message')
215
- alert.success('Success message')
216
- alert.warning('Warning message')
217
- alert.error('Error message')
218
-
219
- // Generic method with full options
220
- alert.open({
221
- message: 'Custom alert',
222
- type: 'info',
223
- position: 'top-center',
224
- duration: 5000
225
- })
226
-
227
- // Direct methods
228
- addAlert({ message: 'Direct call', type: 'success' })
229
- clearAll() // Remove all alerts
230
-
231
- // Access reactive alerts array
232
- console.log(alerts.value) // Array of current alerts
233
- ```
234
-
235
- ### API Methods
236
-
237
- | Method | Parameters | Returns | Description |
238
- |-----------------|------------------|---------|--------------------------------------|
239
- | api() | none | Object | Returns simplified alert API |
240
- | alert.info() | message, options | Number | Show info alert, returns alert ID |
241
- | alert.success() | message, options | Number | Show success alert, returns alert ID |
242
- | alert.warning() | message, options | Number | Show warning alert, returns alert ID |
243
- | alert.error() | message, options | Number | Show error alert, returns alert ID |
244
- | alert.open() | options | Number | Show alert with custom options |
245
- | addAlert() | options | Number | Add alert directly |
246
- | removeAlert() | id | void | Remove specific alert by ID |
247
- | clearAll() | none | void | Remove all alerts |
248
-
249
- ## Positions
250
- TvAlert supports six different positions:
251
-
252
- - `top-right` (default)
253
- - `top-center`
254
- - `top-left`
255
- - `bottom-right`
256
- - `bottom-center`
257
- - `bottom-left`
258
-
259
- Example:
260
- ```js
261
- alert.success('Top left notification', { position: 'top-left' })
262
- alert.warning('Bottom center notification', { position: 'bottom-center' })
263
- ```
264
-
265
- ## Alert Types
266
- Four alert types are available, each with its own color scheme:
267
-
268
- - `info` - Blue themed (informational messages)
269
- - `success` - Green themed (success/completion messages)
270
- - `warning` - Orange/Yellow themed (warning messages)
271
- - `error` - Red themed (error/critical messages)
272
-
273
- Examples:
274
- ```js
275
- alert.info('This is an information alert')
276
- alert.success('Operation completed successfully!')
277
- alert.warning('Please review your input')
278
- alert.error('An error occurred')
279
- ```
280
-
281
- ## Customization (Styles / Theming)
282
- The component uses SCSS variables for theming. You can customize the appearance by overriding the CSS variables or by modifying the SCSS variables:
283
-
284
- Colors are automatically applied based on the alert type. The component includes:
285
- - Type-specific background colors
286
- - Progress bar animations
287
- - Smooth slide transitions
288
- - Hover effects
289
-
290
- For advanced customization, you can override the CSS classes:
291
- ```css
292
- .tv-alert {
293
- /* Custom styles */
294
- }
295
-
296
- .tv-alert--success {
297
- /* Custom success styles */
298
- }
299
-
300
- .tv-alert__progress-bar {
301
- /* Custom progress bar */
302
- }
303
- ```
304
-
305
- ## Accessibility
306
- - Each alert container has `aria-live="polite"` for screen reader announcements
307
- - Individual alerts have `role="status"` for proper ARIA semantics
308
- - Close buttons include `aria-label` for accessibility
309
- - Keyboard navigation supported (close button is focusable)
310
-
311
- ## SSR Notes
312
- - No direct DOM (`window` / `document`) access in source → safe for SSR
313
- - Styles are automatically applied when you import the library
314
- - Works seamlessly with Nuxt 3 and other SSR frameworks
315
- - The composable uses Vue's reactivity system, compatible with SSR
316
-
317
- ## Development
318
- ```bash
319
- git clone https://github.com/TODOvue/tv-alert.git
320
- cd tv-alert
321
- npm install
322
- npm run dev # run demo playground
323
- npm run build # build library
324
- ```
325
- Local demo served from Vite using `index.html` + `src/demo` examples.
326
-
327
- ## Contributing
328
- PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
329
-
330
- ## License
331
- MIT © TODOvue
332
-
333
- ### Attributions
334
- Crafted for the TODOvue component ecosystem
@@ -1,221 +0,0 @@
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