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

|
|
11
|
-

|
|
12
|
-

|
|
13
|
-

|
|
14
|
-

|
|
15
|
-

|
|
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
|