@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,332 +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 Card (TvCard)
|
|
5
|
-
A flexible and customizable Vue 3 card component for showcasing content with title, image, description, and action buttons. Perfect for Single Page Apps and Server-Side Rendered (SSR) environments like Nuxt 4.
|
|
6
|
-
|
|
7
|
-
[](https://www.npmjs.com/package/@todovue/tv-card)
|
|
8
|
-
[](https://www.npmjs.com/package/@todovue/tv-card)
|
|
9
|
-
[](https://www.npmjs.com/package/@todovue/tv-card)
|
|
10
|
-

|
|
11
|
-

|
|
12
|
-

|
|
13
|
-

|
|
14
|
-

|
|
15
|
-

|
|
16
|
-
|
|
17
|
-
> Demo: https://ui.todovue.blog/card
|
|
18
|
-
|
|
19
|
-
## Table of Contents
|
|
20
|
-
- [Features](#features)
|
|
21
|
-
- [Installation](#installation)
|
|
22
|
-
- [Style usage](#style-usage)
|
|
23
|
-
- [Quick Start (SPA)](#quick-start-spa)
|
|
24
|
-
- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
|
|
25
|
-
- [Component Registration Options](#component-registration-options)
|
|
26
|
-
- [Props](#props)
|
|
27
|
-
- [Events](#events)
|
|
28
|
-
- [Customization (Styles / Theming)](#customization-styles--theming)
|
|
29
|
-
- [Examples](#examples)
|
|
30
|
-
- [Accessibility](#accessibility)
|
|
31
|
-
- [SSR Notes](#ssr-notes)
|
|
32
|
-
- [Development](#development)
|
|
33
|
-
- [Contributing](#contributing)
|
|
34
|
-
- [License](#license)
|
|
35
|
-
|
|
36
|
-
## Features
|
|
37
|
-
- Clean and modern card layout with image, title, and description
|
|
38
|
-
- Primary and secondary action buttons
|
|
39
|
-
- Label/tag support with customizable limit
|
|
40
|
-
- Fully customizable color scheme (background, text, button styles)
|
|
41
|
-
- Click events for buttons and labels
|
|
42
|
-
- Works seamlessly in SPA and SSR (Nuxt 3) contexts
|
|
43
|
-
- Built on top of `@todovue/tv-button` and `@todovue/tv-label`
|
|
44
|
-
- Tree-shake friendly (Vue marked external in library build)
|
|
45
|
-
- TypeScript support
|
|
46
|
-
|
|
47
|
-
## Installation
|
|
48
|
-
Using npm:
|
|
49
|
-
```bash
|
|
50
|
-
npm install @todovue/tv-card
|
|
51
|
-
```
|
|
52
|
-
Using yarn:
|
|
53
|
-
```bash
|
|
54
|
-
yarn add @todovue/tv-card
|
|
55
|
-
```
|
|
56
|
-
Using pnpm:
|
|
57
|
-
```bash
|
|
58
|
-
pnpm add @todovue/tv-card
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
## Style usage
|
|
62
|
-
|
|
63
|
-
### Vue 3 SPA (Vite)
|
|
64
|
-
```ts
|
|
65
|
-
// main.ts
|
|
66
|
-
import { createApp } from 'vue'
|
|
67
|
-
import App from './App.vue'
|
|
68
|
-
|
|
69
|
-
import '@todovue/tv-card/style.css'
|
|
70
|
-
import '@todovue/tv-button/style.css'
|
|
71
|
-
import '@todovue/tv-style/style.css'
|
|
72
|
-
import { TvCard } from '@todovue/tv-card'
|
|
73
|
-
|
|
74
|
-
const app = createApp(App)
|
|
75
|
-
app.component('TvCard', TvCard)
|
|
76
|
-
app.mount('#app')
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
### Nuxt 3/4
|
|
80
|
-
```ts
|
|
81
|
-
// nuxt.config.ts
|
|
82
|
-
export default defineNuxtConfig({
|
|
83
|
-
modules: [
|
|
84
|
-
'@todovue/tv-card/nuxt'
|
|
85
|
-
]
|
|
86
|
-
})
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Quick Start (SPA)
|
|
90
|
-
Global registration (main.js / main.ts):
|
|
91
|
-
```js
|
|
92
|
-
import { createApp } from 'vue'
|
|
93
|
-
import App from './App.vue'
|
|
94
|
-
import { TvCard } from '@todovue/tv-card'
|
|
95
|
-
|
|
96
|
-
createApp(App)
|
|
97
|
-
.use(TvCard) // enables <TvCard /> globally
|
|
98
|
-
.mount('#app')
|
|
99
|
-
```
|
|
100
|
-
Local import inside a component:
|
|
101
|
-
```vue
|
|
102
|
-
<script setup>
|
|
103
|
-
import { TvCard } from '@todovue/tv-card'
|
|
104
|
-
import { ref } from 'vue'
|
|
105
|
-
|
|
106
|
-
const configCard = ref({
|
|
107
|
-
title: 'Create Vue.js',
|
|
108
|
-
description: 'Vue.js (commonly known as Vue; pronounced /vju/...',
|
|
109
|
-
alt: 'Card Image',
|
|
110
|
-
image: 'https://todovue.com/vue.webp',
|
|
111
|
-
primaryButtonText: 'View more',
|
|
112
|
-
})
|
|
113
|
-
|
|
114
|
-
function handleButton() {
|
|
115
|
-
console.log('Button clicked')
|
|
116
|
-
}
|
|
117
|
-
</script>
|
|
118
|
-
|
|
119
|
-
<template>
|
|
120
|
-
<TvCard :configCard="configCard" @click-button="handleButton" />
|
|
121
|
-
</template>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
## Nuxt 4 / SSR Usage
|
|
125
|
-
Create a plugin file: `plugins/tv-card.client.ts` (client-only is fine, or without suffix for SSR as it is safe):
|
|
126
|
-
```ts
|
|
127
|
-
import { defineNuxtPlugin } from '#app'
|
|
128
|
-
import { TvCard } from '@todovue/tv-card'
|
|
129
|
-
|
|
130
|
-
export default defineNuxtPlugin(nuxtApp => {
|
|
131
|
-
nuxtApp.vueApp.use(TvCard)
|
|
132
|
-
})
|
|
133
|
-
```
|
|
134
|
-
Use anywhere:
|
|
135
|
-
```vue
|
|
136
|
-
<template>
|
|
137
|
-
<TvCard :configCard="myConfig" @click-button="handleAction" />
|
|
138
|
-
</template>
|
|
139
|
-
```
|
|
140
|
-
Optional direct import (no plugin):
|
|
141
|
-
```vue
|
|
142
|
-
<script setup>
|
|
143
|
-
import { TvCard } from '@todovue/tv-card'
|
|
144
|
-
</script>
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
## Component Registration Options
|
|
148
|
-
| Approach | When to use |
|
|
149
|
-
|-------------------------------------------------------------------|------------------------------------------------|
|
|
150
|
-
| Global via `app.use(TvCard)` | Many usages across app / design system install |
|
|
151
|
-
| Local named import `{ TvCard }` | Isolated / code-split contexts |
|
|
152
|
-
| Direct default import `import { TvCard } from '@todovue/tv-card'` | Single usage or manual registration |
|
|
153
|
-
| Plugin import `{ TvCardPlugin }` | Explicit plugin installation |
|
|
154
|
-
|
|
155
|
-
## Props
|
|
156
|
-
|
|
157
|
-
| Prop Name | Type | Required | Default | Description |
|
|
158
|
-
|--------------|---------|----------|---------|-------------------------------------------------|
|
|
159
|
-
| configCard | object | Yes | - | Configuration object for the card (see below). |
|
|
160
|
-
| isHorizontal | boolean | No | false | If true, renders the card in horizontal layout. |
|
|
161
|
-
|
|
162
|
-
The component accepts a single prop `configCard` which is an object with the following structure:
|
|
163
|
-
|
|
164
|
-
| Property | Type | Required | Default | Description |
|
|
165
|
-
|----------------------------------|----------|----------|---------|--------------------------------------------------|
|
|
166
|
-
| title | string | Yes | - | Card title text. |
|
|
167
|
-
| description | string | Yes | - | Card description/content text. |
|
|
168
|
-
| image | string | Yes | - | URL of the card image. |
|
|
169
|
-
| alt | string | No | '' | Alt text for the image (accessibility). |
|
|
170
|
-
| primaryButtonText | string | Yes | - | Text for the primary action button. |
|
|
171
|
-
| secondaryButtonText | string | No | - | Text for the secondary action button (optional). |
|
|
172
|
-
| labels | array | No | - | Array of label objects `{id, name, color}`. |
|
|
173
|
-
| limitLabels | number | No | 3 | Maximum number of labels to display. |
|
|
174
|
-
| backgroundColor | string | No | - | Custom background color for the card. |
|
|
175
|
-
| color | string | No | - | Custom text color for the card. |
|
|
176
|
-
| backgroundButtonColor | string | No | - | Custom background color for primary button. |
|
|
177
|
-
| colorButton | string | No | - | Custom text color for primary button. |
|
|
178
|
-
| backgroundButtonSecondaryColor | string | No | - | Custom background color for secondary button. |
|
|
179
|
-
| colorButtonSecondary | string | No | - | Custom text color for secondary button. |
|
|
180
|
-
|
|
181
|
-
### Label Object Structure
|
|
182
|
-
```js
|
|
183
|
-
{
|
|
184
|
-
id: 1, // Unique identifier
|
|
185
|
-
name: 'JavaScript', // Label text
|
|
186
|
-
color: '#F7DF1E' // Label color (hex, rgb, etc.)
|
|
187
|
-
}
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
## Events
|
|
191
|
-
| Event name (kebab) | Payload | Description |
|
|
192
|
-
|--------------------------|--------------|-------------------------------------------------|
|
|
193
|
-
| `click-button` | - | Emitted when primary button is clicked. |
|
|
194
|
-
| `click-secondary-button` | - | Emitted when secondary button is clicked. |
|
|
195
|
-
| `click-label` | label object | Emitted when a label is clicked, returns label. |
|
|
196
|
-
|
|
197
|
-
Usage:
|
|
198
|
-
```vue
|
|
199
|
-
<TvCard
|
|
200
|
-
:configCard="config"
|
|
201
|
-
@click-button="onPrimaryAction"
|
|
202
|
-
@click-secondary-button="onSecondaryAction"
|
|
203
|
-
@click-label="onLabelClick"
|
|
204
|
-
/>
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
## Customization (Styles / Theming)
|
|
208
|
-
The card supports extensive customization through the `configCard` object:
|
|
209
|
-
|
|
210
|
-
### Basic Card with Custom Colors
|
|
211
|
-
```vue
|
|
212
|
-
<script setup>
|
|
213
|
-
import { ref } from 'vue'
|
|
214
|
-
import { TvCard } from '@todovue/tv-card'
|
|
215
|
-
|
|
216
|
-
const configCard = ref({
|
|
217
|
-
title: 'Custom Styled Card',
|
|
218
|
-
description: 'This card has custom colors applied',
|
|
219
|
-
image: 'https://example.com/image.jpg',
|
|
220
|
-
primaryButtonText: 'Action',
|
|
221
|
-
backgroundColor: '#46627f',
|
|
222
|
-
color: '#ffffff',
|
|
223
|
-
backgroundButtonColor: '#062131',
|
|
224
|
-
colorButton: '#ffffff'
|
|
225
|
-
})
|
|
226
|
-
</script>
|
|
227
|
-
|
|
228
|
-
<template>
|
|
229
|
-
<TvCard :configCard="configCard" />
|
|
230
|
-
</template>
|
|
231
|
-
```
|
|
232
|
-
|
|
233
|
-
### Card with Labels
|
|
234
|
-
```vue
|
|
235
|
-
<script setup>
|
|
236
|
-
import { ref } from 'vue'
|
|
237
|
-
import { TvCard } from '@todovue/tv-card'
|
|
238
|
-
|
|
239
|
-
const configCard = ref({
|
|
240
|
-
title: 'Vue.js Tutorial',
|
|
241
|
-
description: 'Learn Vue.js with these comprehensive guides',
|
|
242
|
-
image: 'https://todovue.com/vue.webp',
|
|
243
|
-
primaryButtonText: 'Start Learning',
|
|
244
|
-
labels: [
|
|
245
|
-
{ id: 1, name: 'JavaScript', color: '#F7DF1E' },
|
|
246
|
-
{ id: 2, name: 'HTML', color: '#E34F26' },
|
|
247
|
-
{ id: 3, name: 'CSS', color: '#1572B6' }
|
|
248
|
-
],
|
|
249
|
-
limitLabels: 2 // Only show 2 labels
|
|
250
|
-
})
|
|
251
|
-
</script>
|
|
252
|
-
|
|
253
|
-
<template>
|
|
254
|
-
<TvCard :configCard="configCard" @click-label="handleLabelClick" />
|
|
255
|
-
</template>
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
### Card with Two Buttons
|
|
259
|
-
```vue
|
|
260
|
-
<script setup>
|
|
261
|
-
import { ref } from 'vue'
|
|
262
|
-
import { TvCard } from '@todovue/tv-card'
|
|
263
|
-
|
|
264
|
-
const configCard = ref({
|
|
265
|
-
title: 'Advanced Vue Tutorial',
|
|
266
|
-
description: 'Deep dive into Vue.js advanced concepts',
|
|
267
|
-
image: 'https://todovue.com/vuejs.webp',
|
|
268
|
-
primaryButtonText: 'Read Article',
|
|
269
|
-
secondaryButtonText: 'View Source',
|
|
270
|
-
backgroundButtonColor: '#062131',
|
|
271
|
-
colorButton: '#ffffff',
|
|
272
|
-
backgroundButtonSecondaryColor: '#0eb096',
|
|
273
|
-
colorButtonSecondary: '#000000'
|
|
274
|
-
})
|
|
275
|
-
|
|
276
|
-
function handlePrimary() {
|
|
277
|
-
console.log('Primary action')
|
|
278
|
-
}
|
|
279
|
-
|
|
280
|
-
function handleSecondary() {
|
|
281
|
-
console.log('Secondary action')
|
|
282
|
-
}
|
|
283
|
-
</script>
|
|
284
|
-
|
|
285
|
-
<template>
|
|
286
|
-
<TvCard
|
|
287
|
-
:configCard="configCard"
|
|
288
|
-
@click-button="handlePrimary"
|
|
289
|
-
@click-secondary-button="handleSecondary"
|
|
290
|
-
/>
|
|
291
|
-
</template>
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
## Examples
|
|
295
|
-
Check out the demo files in `src/utils/demos/` for more examples:
|
|
296
|
-
- `default.vue` - Basic card usage
|
|
297
|
-
- `withCustomColors.vue` - Full customization example
|
|
298
|
-
- `withLabels.vue` - Card with labels
|
|
299
|
-
- `withMultipleLabels.vue` - Card with label limit
|
|
300
|
-
- `withTwoButtons.vue` - Card with primary and secondary buttons
|
|
301
|
-
|
|
302
|
-
## Accessibility
|
|
303
|
-
- Always provide `alt` text for images for screen readers.
|
|
304
|
-
- Button text should be descriptive of the action.
|
|
305
|
-
- Label clicks are keyboard accessible through the underlying `TvLabel` component.
|
|
306
|
-
- Color contrast should be considered when using custom colors.
|
|
307
|
-
|
|
308
|
-
## SSR Notes
|
|
309
|
-
- No direct DOM (`window` / `document`) access in source → safe for SSR.
|
|
310
|
-
- Styles are automatically applied when you import the library.
|
|
311
|
-
- The component works seamlessly with Nuxt 3's server-side rendering.
|
|
312
|
-
- Dependencies (`@todovue/tv-button` and `@todovue/tv-label`) are SSR-compatible.
|
|
313
|
-
- Ensure you import `@todovue/tv-card/style.css` in an SSR-compatible entry if needed.
|
|
314
|
-
|
|
315
|
-
## Development
|
|
316
|
-
```bash
|
|
317
|
-
git clone https://github.com/TODOvue/tv-card.git
|
|
318
|
-
cd tv-card
|
|
319
|
-
npm install
|
|
320
|
-
npm run dev # run demo playground
|
|
321
|
-
npm run build # build library
|
|
322
|
-
```
|
|
323
|
-
Local demo served from Vite using `index.html` + `src/demo` examples.
|
|
324
|
-
|
|
325
|
-
## Contributing
|
|
326
|
-
PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
|
|
327
|
-
|
|
328
|
-
## License
|
|
329
|
-
MIT © TODOvue
|
|
330
|
-
|
|
331
|
-
### Attributions
|
|
332
|
-
Crafted for the TODOvue component ecosystem
|
|
@@ -1,352 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to `@todovue/tv-demo` will be documented in this file.
|
|
4
|
-
|
|
5
|
-
This project adheres to [Semantic Versioning](https://semver.org/).
|
|
6
|
-
|
|
7
|
-
## [1.4.11] - 2026-01-27
|
|
8
|
-
|
|
9
|
-
### Added
|
|
10
|
-
- Integrated demonstration context to resolve file paths for `README.md` and `CHANGELOG.md`.
|
|
11
|
-
|
|
12
|
-
### Changed
|
|
13
|
-
- Included `CHANGELOG.md` in the project files list.
|
|
14
|
-
|
|
15
|
-
### Removed
|
|
16
|
-
- Deleted the `build:demo` script from the configuration.
|
|
17
|
-
|
|
18
|
-
## [1.4.10] - 2026-01-26
|
|
19
|
-
|
|
20
|
-
### Changed
|
|
21
|
-
- Simplified the file list in `package.json` to include only essential assets.
|
|
22
|
-
|
|
23
|
-
## [1.4.9] - 2026-01-26
|
|
24
|
-
|
|
25
|
-
### Removed
|
|
26
|
-
- Removed alias resolution for the src directory.
|
|
27
|
-
|
|
28
|
-
### Added
|
|
29
|
-
- Included the src/components directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
|
|
30
|
-
|
|
31
|
-
## [1.4.8] - 2026-01-26
|
|
32
|
-
|
|
33
|
-
### Changed
|
|
34
|
-
- Refactored component imports to utilize path aliases for improved codebase maintainability.
|
|
35
|
-
- Enhanced the Vite configuration to optimize the development and build processes.
|
|
36
|
-
|
|
37
|
-
## [1.4.7] - 2026-01-26
|
|
38
|
-
|
|
39
|
-
### Changed
|
|
40
|
-
- Added the src/demo directory to the files list in `package.json` to ensure its inclusion in the published package.
|
|
41
|
-
|
|
42
|
-
## [1.4.6] - 2026-01-26
|
|
43
|
-
|
|
44
|
-
### Dependencies
|
|
45
|
-
- Update `vue` to `^3.5.26`.
|
|
46
|
-
- Update `sass` to `^1.97.3`.
|
|
47
|
-
|
|
48
|
-
### Changed
|
|
49
|
-
- Updated the demo entry point to utilize the new path for the Demo.vue component.
|
|
50
|
-
|
|
51
|
-
## [1.4.5] - 2026-01-23
|
|
52
|
-
|
|
53
|
-
### Changed
|
|
54
|
-
- Updated the release workflow to utilize GitHub App tokens for improved authentication
|
|
55
|
-
- Streamlined the automated version bumping process.
|
|
56
|
-
- Simplified the installation process for the TvDemo plugin.
|
|
57
|
-
- Updated package exports to improve module accessibility and integration.
|
|
58
|
-
- Enhanced the visual styling across all themes for improved consistency.
|
|
59
|
-
- Simplified the internal structure of theme components to reduce complexity and improve maintainability.
|
|
60
|
-
- Refined button styling to ensure visual consistency across the interface.
|
|
61
|
-
- Enhanced component responsiveness to provide a more seamless experience across various screen sizes.
|
|
62
|
-
- Updated the project ignore list to include additional configuration files and directories.
|
|
63
|
-
|
|
64
|
-
## [1.4.4] - 2026-01-20
|
|
65
|
-
|
|
66
|
-
### Fixed
|
|
67
|
-
- Enhanced the responsiveness of the theme dropdown for improved mobile usability.
|
|
68
|
-
- Optimized the installation dropdown layout to ensure compatibility with smaller screen sizes.
|
|
69
|
-
- Improved the responsiveness of `TvDemo` components to ensure optimal display across various device sizes.
|
|
70
|
-
- Enhanced overflow handling to prevent layout breakage and ensure content remains accessible within constrained containers.
|
|
71
|
-
|
|
72
|
-
### Removed
|
|
73
|
-
- Streamlined the GitHub Packages publishing process by removing unnecessary workflow steps.
|
|
74
|
-
|
|
75
|
-
## [1.4.3] - 2026-01-19
|
|
76
|
-
|
|
77
|
-
### Fixed
|
|
78
|
-
- Updated the key binding for the `HighCode` component to include `selectedVariantKey`, ensuring the component re-renders correctly when the variant changes.
|
|
79
|
-
|
|
80
|
-
## [1.4.2] - 2026-01-19
|
|
81
|
-
|
|
82
|
-
### Added
|
|
83
|
-
- Updated the release workflow to enable automated publishing to GitHub Packages.
|
|
84
|
-
- Implemented a theme selection dropdown to allow user-driven UI customization.
|
|
85
|
-
|
|
86
|
-
### Changed
|
|
87
|
-
- Applied responsive styles to ensure the layout adapts correctly to various screen sizes.
|
|
88
|
-
|
|
89
|
-
## [1.4.1] - 2026-01-19
|
|
90
|
-
|
|
91
|
-
### Added
|
|
92
|
-
- Implement install command dropdown with multiple package manager options.
|
|
93
|
-
- Added support for multiple code variants with dynamic source switching.
|
|
94
|
-
- Added dynamic language support for code variants.
|
|
95
|
-
|
|
96
|
-
### Fixed
|
|
97
|
-
- Improved horizontal scrolling support and custom scrollbar styling.
|
|
98
|
-
|
|
99
|
-
## [1.4.0] - 2026-01-16
|
|
100
|
-
|
|
101
|
-
### Added
|
|
102
|
-
- Added viewport handling for responsive layout adjustments.
|
|
103
|
-
- Added RTL support and grid layout toggle.
|
|
104
|
-
- Added background color customization options.
|
|
105
|
-
- Enhanced layout controls for improved flexibility.
|
|
106
|
-
- Implemented sidebar compression feature with responsive layout adjustments.
|
|
107
|
-
- Added scroll handling for the variants list and improved viewport calculations.
|
|
108
|
-
- Added scroll-to-top button visibility logic based on scroll position.
|
|
109
|
-
|
|
110
|
-
### Fixed
|
|
111
|
-
- Fixed the key binding for selecting variants in the `HighCode` component.
|
|
112
|
-
- Enhanced layout responsiveness and adjusted viewport width settings.
|
|
113
|
-
- Adjusted alignment and layout for improved centering.
|
|
114
|
-
- Fixed `vue-highlight-code` error: Cannot read properties of null in tool panels and adding validation for `variant.html`.
|
|
115
|
-
|
|
116
|
-
### Changed
|
|
117
|
-
- Updated button styles and improved link interactions.
|
|
118
|
-
- Replaced back button styles and updated class name for consistency.
|
|
119
|
-
|
|
120
|
-
## [1.3.2] - 2026-01-14
|
|
121
|
-
|
|
122
|
-
### Fixed
|
|
123
|
-
- Fixed and improved styling and layout for better responsiveness.
|
|
124
|
-
|
|
125
|
-
## [1.3.1] - 2026-01-13
|
|
126
|
-
|
|
127
|
-
### Added
|
|
128
|
-
- Add manual emits support for custom event handling in component previews.
|
|
129
|
-
- Add TvPreviewFrame component for enhanced component preview functionality.
|
|
130
|
-
- Add enhanced tool tab functionality with improved event logging UI.
|
|
131
|
-
- Add TvNestedEditor component for editing complex reactive properties.
|
|
132
|
-
|
|
133
|
-
### Changed
|
|
134
|
-
- Refactor tab structure and improve layout for better usability.
|
|
135
|
-
|
|
136
|
-
### Dependencies
|
|
137
|
-
- Update `sass` to `^1.97.2`.
|
|
138
|
-
- Update `vite` to `^7.3.1`.
|
|
139
|
-
|
|
140
|
-
## [1.3.0] - 2026-01-13
|
|
141
|
-
|
|
142
|
-
### Updated
|
|
143
|
-
- Updated footer logo image source.
|
|
144
|
-
|
|
145
|
-
### Added
|
|
146
|
-
- Added back navigation button and styling.
|
|
147
|
-
- Implemented reactive controls for dynamic property manipulation.
|
|
148
|
-
- Added event logging functionality with clear logs option.
|
|
149
|
-
- Implemented URL parameter synchronization for selected tab, search query, variant, and viewport width.
|
|
150
|
-
|
|
151
|
-
## [1.2.7] - 2025-12-16
|
|
152
|
-
|
|
153
|
-
### Changed
|
|
154
|
-
- Changed the default value of `readmePath` and `changelogPath` to `./` to simplify configuration in monorepo projects.
|
|
155
|
-
|
|
156
|
-
## [1.2.6] - 2025-12-16
|
|
157
|
-
|
|
158
|
-
### Changed
|
|
159
|
-
- Changed the `base` option in `vite.config.js` for website deployment to `/tv-demo/`.
|
|
160
|
-
|
|
161
|
-
## [1.2.5] - 2025-12-16
|
|
162
|
-
|
|
163
|
-
### Fixed
|
|
164
|
-
- Fixed repository URL in `package.json` to point to the correct GitHub repository.
|
|
165
|
-
- Force update with new token.
|
|
166
|
-
|
|
167
|
-
## [1.2.4] - 2025-12-16
|
|
168
|
-
|
|
169
|
-
### Fixed
|
|
170
|
-
- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
|
|
171
|
-
|
|
172
|
-
## [1.2.3] - 2025-12-16
|
|
173
|
-
|
|
174
|
-
### Added
|
|
175
|
-
- Added automatic publishing to the Todovue cPanel in `release.yml` for each release, simplifying package distribution and updates.
|
|
176
|
-
- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
|
|
177
|
-
|
|
178
|
-
### Changed
|
|
179
|
-
- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
|
|
180
|
-
|
|
181
|
-
## [1.2.2] - 2025-11-24
|
|
182
|
-
|
|
183
|
-
### Changed
|
|
184
|
-
- Updated background and text colors for dark and light themes to improve readability and visual comfort.
|
|
185
|
-
|
|
186
|
-
## [1.2.1] - 2025-11-21
|
|
187
|
-
|
|
188
|
-
### Fixed
|
|
189
|
-
- Fixed links color when the component use `hide-background` demo style.
|
|
190
|
-
|
|
191
|
-
## [1.2.0] - 2025-11-20
|
|
192
|
-
|
|
193
|
-
### Added
|
|
194
|
-
- Added `CHANGELOG.md` to tab navigation for easy access to version history.
|
|
195
|
-
- Added prop `showChangelog` to toggle visibility of the changelog tab.
|
|
196
|
-
- Added prop `showDocumentation` to toggle visibility of the documentation tab.
|
|
197
|
-
- Added `ToUp` component for quick navigation to the top of the demo page.
|
|
198
|
-
|
|
199
|
-
### Changed
|
|
200
|
-
- Removed emojis from the component and changelog to maintain a more professional and consistent style.
|
|
201
|
-
- Updated header link styles, removing emojis and redundant text.
|
|
202
|
-
- Changed `conponent` to `component` prop name for correct spelling.
|
|
203
|
-
|
|
204
|
-
## [1.1.1] - 2025-11-20
|
|
205
|
-
|
|
206
|
-
### Fixed
|
|
207
|
-
- Fixed max height in sidebar to ensure it appears correctly on the screen.
|
|
208
|
-
|
|
209
|
-
## [1.1.0] - 2025-11-20
|
|
210
|
-
|
|
211
|
-
### Added
|
|
212
|
-
- Added sidebar listing component variations to improve navigation across demos.
|
|
213
|
-
- Added Toast component for copy code notifications, providing visual feedback to the user.
|
|
214
|
-
|
|
215
|
-
### Changed
|
|
216
|
-
- Updated `TvDemo` footer styles for improved visual consistency with the overall app design.
|
|
217
|
-
- Updated copy code button styles to improve usability and aesthetics.
|
|
218
|
-
- Refined global `TvDemo` styles for better user experience and visual appearance.
|
|
219
|
-
- Updated documentation markdown to improve content readability and presentation.
|
|
220
|
-
|
|
221
|
-
### Fixed
|
|
222
|
-
- Corrected property typing from `nameComponent` to `componentName` for consistency and clarity.
|
|
223
|
-
- Fixed demos and their documentation to accurately reflect `TvDemo` features and functionality.
|
|
224
|
-
|
|
225
|
-
## [1.0.10] - 2025-11-15
|
|
226
|
-
|
|
227
|
-
### Fixed
|
|
228
|
-
- Fixed: updated `package.json` style export from `./dist/style.css` to `./dist/tv-demo.css`; updated documentation.
|
|
229
|
-
|
|
230
|
-
## [1.0.9] - 2025-11-14
|
|
231
|
-
|
|
232
|
-
### Changed
|
|
233
|
-
- Removed CSS injection via `vite-plugin-css-injected-by-js`.
|
|
234
|
-
- Styles are now served from a separate CSS file generated by Vite (`dist/*.css`).
|
|
235
|
-
- The CSS must now be imported explicitly in the application (SPA or Nuxt).
|
|
236
|
-
- Improved SSR/SSG compatibility (especially for Nuxt).
|
|
237
|
-
- Theme selection now switches CSS files instead of toggling classes.
|
|
238
|
-
|
|
239
|
-
## [1.0.8] - 2025-10-17
|
|
240
|
-
|
|
241
|
-
### Changed
|
|
242
|
-
- Enhanced copy notification visual design with modern UI elements and animations for better user experience when copying code snippets.
|
|
243
|
-
|
|
244
|
-
## [1.0.7] - 2025-10-01
|
|
245
|
-
|
|
246
|
-
### Changed
|
|
247
|
-
- Updated Node.js version requirement from `>=16.0.0` to `>=20.19.0` in `package.json` to meet Vite 7.x compatibility requirements.
|
|
248
|
-
- Updated CI/CD workflow (`.github/workflows/release.yml`) to use Node.js 20 instead of Node.js 18.
|
|
249
|
-
|
|
250
|
-
### Dependencies
|
|
251
|
-
- Ensures compatibility with Vite `^7.0.0` which requires Node.js version 20.19+ or 22.12+.
|
|
252
|
-
|
|
253
|
-
## [1.0.6] - 2025-09-06
|
|
254
|
-
|
|
255
|
-
### Changed
|
|
256
|
-
- Moved `vue-highlight-code` and `vue3-markdown-it` to `peerDependencies` to avoid internal bundling that could trigger interop / synthetic default Vue imports in pre-bundling environments (esbuild / Vite optimizeDeps).
|
|
257
|
-
- Added `verify:dist` script that ensures the bundle does not contain `import <default> from 'vue'` nor mixed default + named imports.
|
|
258
|
-
|
|
259
|
-
### Fixed
|
|
260
|
-
- Additional mitigation for the error: `No matching export in "vue" for import "default"` in SPA consumers by guaranteeing only named imports and properly externalized dependencies.
|
|
261
|
-
|
|
262
|
-
## [1.0.5] - 2025-09-05
|
|
263
|
-
|
|
264
|
-
### Fixed
|
|
265
|
-
- Eliminated unintended synthetic default import of Vue by:
|
|
266
|
-
- Switching library entry to `src/entry.ts` (already in 1.0.4) and
|
|
267
|
-
- Adding `output.exports = 'named'` plus externalizing `vue3-markdown-it` and `vue-highlight-code` to prevent Rollup from generating a default import pattern.
|
|
268
|
-
- This definitively resolves: `No matching export in "vue" for import "default"` when consuming the ESM build in Vite/esbuild projects.
|
|
269
|
-
|
|
270
|
-
### Compatibility
|
|
271
|
-
- Confirmed proper usage with: `import { TvDemo } from '@todovue/tv-demo'` and `import TvDemo from '@todovue/tv-demo'` (default now maps correctly without forcing synthetic default of Vue).
|
|
272
|
-
|
|
273
|
-
## [1.0.4] - 2025-09-05
|
|
274
|
-
|
|
275
|
-
### Changed
|
|
276
|
-
- Fixed the library entry point in `vite.config.js` to point to `src/entry.ts` instead of the `.vue` file. This resolves the default import error from Vue (`No matching export in "vue" for import "default"`) and ensures full compatibility with Vue 3 in both SPA and SSR (Nuxt 3).
|
|
277
|
-
|
|
278
|
-
## [1.0.3] - 2025-09-05
|
|
279
|
-
|
|
280
|
-
### Added
|
|
281
|
-
- SSR (Server Side Rendering) compatibility: the component can now be used seamlessly in Nuxt 3 and other SSR frameworks.
|
|
282
|
-
- Automatic import of all required CSS (global styles and highlight.js) when importing the component, so no manual CSS import is needed in SPA or SSR environments.
|
|
283
|
-
- Improved documentation and usage examples for both SPA and SSR (Nuxt 3) in the README.
|
|
284
|
-
|
|
285
|
-
### Changed
|
|
286
|
-
- Refactored `entry.ts` to ensure styles are always loaded and the component is exportable for universal usage.
|
|
287
|
-
- README and changelog updated to reflect SSR support and new usage patterns.
|
|
288
|
-
|
|
289
|
-
## [1.0.2] - 2025-05-05
|
|
290
|
-
|
|
291
|
-
### Fixed
|
|
292
|
-
- Adjusted font size for demo component description for better readability.
|
|
293
|
-
|
|
294
|
-
### Dependencies
|
|
295
|
-
- Updated `vite` to version `^6.0.0` in `devDependencies`.
|
|
296
|
-
|
|
297
|
-
## [1.0.1] - 2025-05-05
|
|
298
|
-
|
|
299
|
-
### Fixed
|
|
300
|
-
- Improved layout consistency by wrapping the component preview inside `.tv-demo-component-content` with centered `flex` alignment.
|
|
301
|
-
- Moved variant description to a `<span>` with class `.tv-demo-description` for better semantic structure and styling.
|
|
302
|
-
|
|
303
|
-
## [1.0.0] - 2025-05-05
|
|
304
|
-
|
|
305
|
-
### Added
|
|
306
|
-
- Initial release of `TvDemo` component.
|
|
307
|
-
- Supports display of Vue components in isolation with configurable:
|
|
308
|
-
- `component` binding (dynamic rendering)
|
|
309
|
-
- `variants` (for multiple demo cases)
|
|
310
|
-
- `demoStyle` (layout and content customization)
|
|
311
|
-
- `theme` switch (Light/Dark)
|
|
312
|
-
- `sourceLink`, `npmInstall`, `urlClone` (for useful action links)
|
|
313
|
-
- Documentation tab using `README.md` rendering via `vue3-markdown-it`.
|
|
314
|
-
- Integrated `vue-highlight-code` for live code display.
|
|
315
|
-
- Responsive layout for desktop and mobile screens.
|
|
316
|
-
|
|
317
|
-
[1.4.11]: https://github.com/TODOvue/tv-demo/pull/56/files
|
|
318
|
-
[1.4.10]: https://github.com/TODOvue/tv-demo/pull/55/files
|
|
319
|
-
[1.4.9]: https://github.com/TODOvue/tv-demo/pull/54/files
|
|
320
|
-
[1.4.8]: https://github.com/TODOvue/tv-demo/pull/53/files
|
|
321
|
-
[1.4.7]: https://github.com/TODOvue/tv-demo/pull/52/files
|
|
322
|
-
[1.4.6]: https://github.com/TODOvue/tv-demo/pull/51/files
|
|
323
|
-
[1.4.5]: https://github.com/TODOvue/tv-demo/pull/50/files
|
|
324
|
-
[1.4.4]: https://github.com/TODOvue/tv-demo/pull/49/files
|
|
325
|
-
[1.4.3]: https://github.com/TODOvue/tv-demo/pull/48/files
|
|
326
|
-
[1.4.2]: https://github.com/TODOvue/tv-demo/pull/47/files
|
|
327
|
-
[1.4.1]: https://github.com/TODOvue/tv-demo/pull/46/files
|
|
328
|
-
[1.4.0]: https://github.com/TODOvue/tv-demo/pull/45/files
|
|
329
|
-
[1.3.2]: https://github.com/TODOvue/tv-demo/pull/44/files
|
|
330
|
-
[1.3.1]: https://github.com/TODOvue/tv-demo/pull/43/files
|
|
331
|
-
[1.3.0]: https://github.com/TODOvue/tv-demo/pull/42/files
|
|
332
|
-
[1.2.7]: https://github.com/TODOvue/tv-demo/pull/41/files
|
|
333
|
-
[1.2.6]: https://github.com/TODOvue/tv-demo/pull/40/files
|
|
334
|
-
[1.2.5]: https://github.com/TODOvue/tv-demo/pull/39/files
|
|
335
|
-
[1.2.4]: https://github.com/TODOvue/tv-demo/pull/38/files
|
|
336
|
-
[1.2.3]: https://github.com/TODOvue/tv-demo/pull/37/files
|
|
337
|
-
[1.2.2]: https://github.com/TODOvue/tv-demo/pull/36/files
|
|
338
|
-
[1.2.1]: https://github.com/TODOvue/tv-demo/pull/35/files
|
|
339
|
-
[1.2.0]: https://github.com/TODOvue/tv-demo/pull/34/files
|
|
340
|
-
[1.1.1]: https://github.com/TODOvue/tv-demo/pull/33/files
|
|
341
|
-
[1.1.0]: https://github.com/TODOvue/tv-demo/pull/32/files
|
|
342
|
-
[1.0.10]: https://github.com/TODOvue/tv-demo/pull/31/files
|
|
343
|
-
[1.0.9]: https://github.com/TODOvue/tv-demo/pull/30/files
|
|
344
|
-
[1.0.8]: https://github.com/TODOvue/tv-demo/pull/29/files
|
|
345
|
-
[1.0.7]: https://github.com/TODOvue/tv-demo/pull/28/files
|
|
346
|
-
[1.0.6]: https://github.com/TODOvue/tv-demo/pull/24/files
|
|
347
|
-
[1.0.5]: https://github.com/TODOvue/tv-demo/pull/23/files
|
|
348
|
-
[1.0.4]: https://github.com/TODOvue/tv-demo/pull/22/files
|
|
349
|
-
[1.0.3]: https://github.com/TODOvue/tv-demo/pull/21/files
|
|
350
|
-
[1.0.2]: https://github.com/TODOvue/tv-demo/pull/20/files
|
|
351
|
-
[1.0.1]: https://github.com/TODOvue/tv-demo/pull/19/files
|
|
352
|
-
[1.0.0]: https://github.com/TODOvue/tv-demo/pull/18/files
|