@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.
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 +4 -2
  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,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
- [![npm](https://img.shields.io/npm/v/@todovue/tv-card.svg)](https://www.npmjs.com/package/@todovue/tv-card)
8
- [![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-card.svg)](https://www.npmjs.com/package/@todovue/tv-card)
9
- [![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-card.svg)](https://www.npmjs.com/package/@todovue/tv-card)
10
- ![License](https://img.shields.io/github/license/TODOvue/tv-card)
11
- ![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-card)
12
- ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-card)
13
- ![Node Version](https://img.shields.io/node/v/@todovue/tv-card)
14
- ![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-card)
15
- ![Stars](https://img.shields.io/github/stars/TODOvue/tv-card?style=social)
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