@todovue/tv-ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +20 -20
  2. package/dist/entry.d.ts +2 -2
  3. package/dist/tv-ui.cjs.js +1 -1
  4. package/dist/tv-ui.css +1 -1
  5. package/dist/tv-ui.es.js +50 -49
  6. package/package.json +1 -1
  7. package/dist/.htaccess +0 -8
  8. package/dist/demos/tv-alert/CHANGELOG.md +0 -127
  9. package/dist/demos/tv-alert/README.md +0 -334
  10. package/dist/demos/tv-article/CHANGELOG.md +0 -221
  11. package/dist/demos/tv-article/README.md +0 -258
  12. package/dist/demos/tv-breadcrumbs/CHANGELOG.md +0 -135
  13. package/dist/demos/tv-breadcrumbs/README.md +0 -364
  14. package/dist/demos/tv-button/CHANGELOG.md +0 -158
  15. package/dist/demos/tv-button/README.md +0 -255
  16. package/dist/demos/tv-card/CHANGELOG.md +0 -158
  17. package/dist/demos/tv-card/README.md +0 -332
  18. package/dist/demos/tv-demo/CHANGELOG.md +0 -352
  19. package/dist/demos/tv-demo/README.md +0 -229
  20. package/dist/demos/tv-footer/CHANGELOG.md +0 -67
  21. package/dist/demos/tv-footer/README.md +0 -760
  22. package/dist/demos/tv-hero/CHANGELOG.md +0 -137
  23. package/dist/demos/tv-hero/README.md +0 -410
  24. package/dist/demos/tv-label/CHANGELOG.md +0 -138
  25. package/dist/demos/tv-label/README.md +0 -357
  26. package/dist/demos/tv-menu/CHANGELOG.md +0 -145
  27. package/dist/demos/tv-menu/README.md +0 -389
  28. package/dist/demos/tv-modal/CHANGELOG.md +0 -127
  29. package/dist/demos/tv-modal/README.md +0 -466
  30. package/dist/demos/tv-pagination/CHANGELOG.md +0 -125
  31. package/dist/demos/tv-pagination/README.md +0 -275
  32. package/dist/demos/tv-progress-bar/CHANGELOG.md +0 -84
  33. package/dist/demos/tv-progress-bar/README.md +0 -894
  34. package/dist/demos/tv-relative-time/CHANGELOG.md +0 -122
  35. package/dist/demos/tv-relative-time/README.md +0 -405
  36. package/dist/demos/tv-scroll-top/CHANGELOG.md +0 -69
  37. package/dist/demos/tv-scroll-top/README.md +0 -445
  38. package/dist/demos/tv-search/CHANGELOG.md +0 -155
  39. package/dist/demos/tv-search/README.md +0 -407
  40. package/dist/demos/tv-settings/CHANGELOG.md +0 -94
  41. package/dist/demos/tv-settings/README.md +0 -314
  42. package/dist/demos/tv-sidebar/CHANGELOG.md +0 -229
  43. package/dist/demos/tv-sidebar/README.md +0 -592
  44. package/dist/demos/tv-theme-button/CHANGELOG.md +0 -136
  45. package/dist/demos/tv-theme-button/README.md +0 -392
  46. package/dist/demos/tv-toc/CHANGELOG.md +0 -80
  47. package/dist/demos/tv-toc/README.md +0 -288
  48. package/dist/favicon.ico +0 -0
@@ -1,137 +0,0 @@
1
- # Changelog
2
-
3
- All notable changes to `@todovue/tv-hero` 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
- - Introduced slot support to allow for fully customizable content within components.
33
- - Introduced the `imagePosition` property to provide granular control over layout placement.
34
- - Added a reverse layout option to allow for flexible positioning of image and text elements.
35
- - Introduced the `isBackgroundImage` property to enable background image support for components.
36
- - Implemented computed styles to manage background image rendering and positioning dynamically.
37
-
38
- ### Changed
39
- - Updated the documentation to include instructions and examples for implementing the new slot functionality.
40
-
41
- ### Dependencies
42
- - Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
43
- - Updated the `@todovue/tv-button` dependency to `^1.2.4`.
44
- - Updated the `sass` dependency to `^1.97.2`.
45
- - Updated the `vite` dependency to `^7.3.1`.
46
-
47
- ## [1.1.3] - 2025-12-20
48
-
49
- ### Fixed
50
- - Fixed padding to improve layout on small screens
51
-
52
- ## [1.1.2] - 2025-12-19
53
-
54
- ### Added
55
- - Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
56
- - Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
57
-
58
- ### Changed
59
- - Changed the `base` option in `vite.config.js` for website deployment in cpanel.
60
-
61
- ### Fixed
62
- - Fixed repository URL in `package.json` to point to the correct GitHub repository.
63
- - Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
64
-
65
- ### Dependencies
66
- - Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
67
-
68
- ## [1.1.1] - 2025-11-24
69
-
70
- ### Changed
71
- - Updated background and text colors for dark and light themes to improve readability and visual comfort.
72
-
73
- ### Dependencies
74
- - Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
75
-
76
- ## [1.1.0] - 2025-11-21
77
-
78
- ### Added
79
- - Added `nux.js` configuration file for Nuxt 4 integration.
80
- - Added `tsconfig.json` for proper type checking during build.
81
- - Create `global.d.ts` to declare module for TypeScript users.
82
- - Added Nuxt module for automatic style injection and auto-registration of the `TvHero` component.
83
- - The `@todovue/tv-hero` component is now externalized from the final build, reducing bundle size.
84
- - Added `CHANGELOG.md` in script to generate demo and documentation site.
85
-
86
- ### Dependencies
87
- - Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
88
- - Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
89
-
90
- ## [1.0.1] - 2025-11-15
91
-
92
- ### Changed
93
- - Removed CSS injection via `vite-plugin-css-injected-by-js`.
94
- - Styles are now served from a separate CSS file generated by Vite (`dist/tv-hero.css`) and must be imported explicitly in the consuming app (SPA or Nuxt).
95
- - Improved compatibility with SSR/SSG environments, especially Nuxt, by avoiding runtime CSS injection.
96
-
97
- ## [1.0.0] - 2025-10-20
98
-
99
- ### Added
100
- - Initial release of `@todovue/tv-hero` component
101
- - Flexible hero component with customizable layout options
102
- - Support for images with responsive design
103
- - Primary and secondary call-to-action buttons powered by `@todovue/tv-button`
104
- - Entry/article mode for blog posts and content pages (`isEntry` prop)
105
- - Custom styling system via `customHero` prop for colors and themes
106
- - Configuration object (`configHero`) for title, description, buttons, and images
107
- - Automatic color adjustment and hover effects for custom button colors
108
- - Decorative separator bar below title with matching theme colors
109
- - Full-width hero mode (without image)
110
- - Standard hero mode (with image)
111
- - Global and local component registration options
112
- - Vue 3 Composition API with `useHero` composable
113
- - SCSS styling with variables, mixins, and global styles
114
- - Click events for primary (`click-button`) and secondary (`click-secondary-button`) buttons
115
- - Accessibility features with semantic HTML and ARIA support
116
- - Dark mode and light mode theme support with customizable colors
117
- - Responsive design for all screen sizes
118
- - TypeScript type definitions for better development experience
119
- - SSR compatibility for Nuxt 3 and other server-side rendering frameworks
120
- - Build configuration with Vite for library distribution
121
- - Comprehensive README documentation with installation, usage, and configuration examples
122
- - Demo playground with multiple examples:
123
- - Default hero with image
124
- - Hero with secondary button
125
- - Custom themed hero
126
- - Entry hero for articles
127
- - Entry hero without image
128
- - Various customization examples
129
-
130
- [1.2.1]: https://github.com/TODOvue/tv-hero/pull/9/files
131
- [1.2.0]: https://github.com/TODOvue/tv-hero/pull/8/files
132
- [1.1.3]: https://github.com/TODOvue/tv-hero/pull/7/files
133
- [1.1.2]: https://github.com/TODOvue/tv-hero/pull/6/files
134
- [1.1.1]: https://github.com/TODOvue/tv-hero/pull/5/files
135
- [1.1.0]: https://github.com/TODOvue/tv-hero/pull/4/files
136
- [1.0.1]: https://github.com/TODOvue/tv-hero/pull/3/files
137
- [1.0.0]: https://github.com/TODOvue/tv-hero/pull/1/files
@@ -1,410 +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 Hero (TvHero)
5
- A customizable, responsive Vue 3 hero component designed for web applications. Perfect for creating impactful landing sections with images, titles, descriptions, and call-to-action buttons. Fully compatible with Single Page Apps and Server-Side Rendered (SSR) environments like Nuxt 3.
6
-
7
- [![npm](https://img.shields.io/npm/v/@todovue/tv-hero.svg)](https://www.npmjs.com/package/@todovue/tv-hero)
8
- [![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-hero.svg)](https://www.npmjs.com/package/@todovue/tv-hero)
9
- [![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-hero.svg)](https://www.npmjs.com/package/@todovue/tv-hero)
10
- ![License](https://img.shields.io/github/license/TODOvue/tv-hero)
11
- ![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-hero)
12
- ![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-hero)
13
- ![Node Version](https://img.shields.io/node/v/@todovue/tv-hero)
14
- ![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-hero)
15
- ![Stars](https://img.shields.io/github/stars/TODOvue/tv-hero?style=social)
16
-
17
- > Demo: https://ui.todovue.blog/hero
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
- - [Events](#events)
27
- - [Configuration Object (configHero)](#configuration-object-confighero)
28
- - [Customization (Styles / Theming)](#customization-styles--theming)
29
- - [Layout Modes](#layout-modes)
30
- - [Examples](#examples)
31
- - [Accessibility](#accessibility)
32
- - [SSR Notes](#ssr-notes)
33
- - [Styles Usage](#styles-usage)
34
- - [Development](#development)
35
- - [Contributing](#contributing)
36
- - [License](#license)
37
-
38
- ## Features
39
- - **Flexible layouts**: Standard hero with image or full-width text-only hero
40
- - **Entry mode**: Special layout optimized for blog posts and article pages
41
- - **Customizable styling**: Override colors for background, text, and buttons
42
- - **Call-to-action support**: Primary and optional secondary buttons powered by `@todovue/tv-button`
43
- - **Responsive design**: Adapts beautifully across all screen sizes
44
- - **Dark/Light mode ready**: Built-in theme support with custom color options
45
- - **SSR compatible**: Works seamlessly in Nuxt 3 and other SSR frameworks
46
- - **TypeScript support**: Full type definitions included
47
- - **Zero configuration**: Works out of the box with sensible defaults
48
-
49
- ## Installation
50
- Using npm:
51
- ```bash
52
- npm install @todovue/tv-hero
53
- ```
54
- Using yarn:
55
- ```bash
56
- yarn add @todovue/tv-hero
57
- ```
58
- Using pnpm:
59
- ```bash
60
- pnpm add @todovue/tv-hero
61
- ```
62
-
63
- ## Quick Start (SPA)
64
- Global registration (main.js / main.ts):
65
- ```js
66
- import { createApp } from 'vue'
67
- import App from './App.vue'
68
- import '@todovue/tv-hero/style.css'
69
- import '@todovue/tv-button/style.css'
70
- import TvHero from '@todovue/tv-hero'
71
-
72
- createApp(App)
73
- .use(TvHero) // enables <TvHero /> globally
74
- .mount('#app')
75
- ```
76
- Local import inside a component:
77
- ```vue
78
- <script setup>
79
- import '@todovue/tv-hero/style.css'
80
- import '@todovue/tv-button/style.css'
81
- import { TvHero } from '@todovue/tv-hero'
82
-
83
- const heroConfig = {
84
- title: 'Welcome to TODOvue',
85
- description: 'Build amazing web applications with Vue.js',
86
- button: 'Get Started',
87
- image: 'https://example.com/hero-image.png',
88
- alt: 'Hero image'
89
- }
90
-
91
- function onButtonClick() {
92
- console.log('CTA clicked!')
93
- }
94
- </script>
95
-
96
- <template>
97
- <TvHero :configHero="heroConfig" @click-button="onButtonClick" />
98
- </template>
99
- ```
100
-
101
- ## Nuxt 4 / SSR Usage
102
- Create a plugin file: `plugins/tv-hero.client.ts` (or without suffix for SSR-safe usage):
103
- ```ts
104
- // nuxt.config.ts
105
- export default defineNuxtConfig({
106
- modules: [
107
- '@todovue/tv-card/nuxt'
108
- ]
109
- })
110
- ```
111
-
112
- Use anywhere in your Nuxt app:
113
- ```vue
114
- <template>
115
- <TvHero :configHero="heroData" @click-button="handleAction" />
116
- </template>
117
-
118
- <script setup>
119
- const heroData = {
120
- title: 'My Nuxt App',
121
- description: 'Server-side rendered with love',
122
- button: 'Learn More',
123
- image: '/images/hero.jpg'
124
- }
125
-
126
- const handleAction = () => {
127
- navigateTo('/about')
128
- }
129
- </script>
130
- ```
131
- Optional direct import (no plugin):
132
- ```vue
133
- <script setup>
134
- import '@todovue/tv-hero/style.css'
135
- import '@todovue/tv-button/style.css'
136
- import { TvHero } from '@todovue/tv-hero'
137
- </script>
138
- ```
139
-
140
- ## Component Registration Options
141
- | Approach | When to use |
142
- |---------------------------------------------------------------|--------------------------------------------|
143
- | Global via `app.use(TvHero)` | Multiple hero sections across your app |
144
- | Local named import `{ TvHero }` | Isolated usage or code-splitting scenarios |
145
- | Direct default import `import TvHero from '@todovue/tv-hero'` | Single usage or manual registration |
146
-
147
- ## Props
148
- | Prop | Type | Default | Description |
149
- |-------------------|---------|---------|------------------------------------------------------------------------|
150
- | configHero | Object | {} | Main configuration object with title, description, buttons, and image. |
151
- | customHero | Object | {} | Custom styling object for colors and themes. |
152
- | isEntry | Boolean | false | Enables entry/article layout mode (full-width, no buttons). |
153
- | imagePosition | String | 'left' | Controls image position: 'left' or 'right'. |
154
- | isBackgroundImage | Boolean | false | Enables background image mode with overlay. |
155
-
156
- ## Events
157
- | Event name (kebab) | Description |
158
- |---------------------------|---------------------------------------------|
159
- | `click-button` | Emitted when primary button is clicked. |
160
- | `click-secondary-button` | Emitted when secondary button is clicked. |
161
-
162
- Usage:
163
- ```vue
164
- <TvHero
165
- :configHero="config"
166
- @click-button="handlePrimary"
167
- @click-secondary-button="handleSecondary"
168
- />
169
- ```
170
-
171
- ## Slots
172
- The component exposes several slots to allow full customization of content areas. When using slots, the corresponding props in `configHero` act as defaults or can be omitted.
173
-
174
- | Slot Name | Description |
175
- |---------------|----------------------------------------------------------------------|
176
- | `image` | Replaces the hero image area. Useful for custom images or video. |
177
- | `title` | Replaces the title text. Use this for rich HTML titles. |
178
- | `description` | Replaces the description text. Perfect for complex HTML content. |
179
- | `actions` | Replaces the buttons. Use this to add custom forms or extra buttons. |
180
-
181
- **Example of Slot Usage:**
182
- ```vue
183
- <TvHero :configHero="heroConfig">
184
- <template #title>
185
- Hello <span class="highlight">World</span>
186
- </template>
187
-
188
- <template #description>
189
- <p>This is a <strong>custom</strong> description with HTML.</p>
190
- </template>
191
-
192
- <template #actions>
193
- <button class="my-custom-btn">Join Now</button>
194
- </template>
195
- </TvHero>
196
- ```
197
-
198
- ## Configuration Object (configHero)
199
- The `configHero` prop accepts an object with the following properties:
200
-
201
- | Property | Type | Required | Description |
202
- |------------------|--------|----------|------------------------------------------------|
203
- | title | String | Yes | Main heading text for the hero section. |
204
- | description | String | Yes | Descriptive text displayed below the title. |
205
- | image | String | No | URL of the hero image. |
206
- | alt | String | No | Alt text for the image (accessibility). |
207
- | button | String | No | Text for the primary call-to-action button. |
208
- | buttonSecondary | String | No | Text for the optional secondary button. |
209
-
210
- **Example:**
211
- ```js
212
- const configHero = {
213
- title: 'TODOvue Blog',
214
- description: 'Explore the world of Vue.js development',
215
- button: 'View All Posts',
216
- buttonSecondary: 'Latest Article',
217
- image: 'https://example.com/logo.png',
218
- alt: 'TODOvue Logo'
219
- }
220
- ```
221
-
222
- ## Customization (Styles / Theming)
223
- The `customHero` prop allows you to override default colors and styles:
224
-
225
- | Property | Type | Description |
226
- |-----------------------|--------|--------------------------------------------|
227
- | bgBody | String | Background color for the hero section. |
228
- | colorBody | String | Text color for title and description. |
229
- | bgButton | String | Background color for primary button. |
230
- | colorButton | String | Text color for primary button. |
231
- | bgButtonSecondary | String | Background color for secondary button. |
232
- | colorButtonSecondary | String | Text color for secondary button. |
233
-
234
- **Example:**
235
- ```vue
236
- <TvHero
237
- :configHero="heroConfig"
238
- :customHero="{
239
- bgBody: '#1e1d23',
240
- colorBody: '#e1e2dc',
241
- bgButton: '#8673a1',
242
- colorButton: '#ffffff',
243
- bgButtonSecondary: '#79308d',
244
- colorButtonSecondary: '#ffffff'
245
- }"
246
- />
247
- ```
248
-
249
- The component automatically:
250
- - Generates subtle hover effects for custom button colors
251
- - Creates a decorative separator bar below the title with matching colors
252
- - Applies box-shadow effects for visual depth
253
-
254
- ## Layout Modes
255
-
256
- ### Standard Hero (with image)
257
- Default layout with image on the left and content on the right:
258
- ```vue
259
- <TvHero :configHero="{
260
- title: 'Welcome',
261
- description: 'Learn Vue.js',
262
- button: 'Start',
263
- image: '/hero.png'
264
- }" />
265
- ```
266
-
267
- ### Full-width Hero (without image)
268
- Omit the `image` property for a centered, text-focused layout:
269
- ```vue
270
- <TvHero :configHero="{
271
- title: 'Welcome',
272
- description: 'Learn Vue.js',
273
- button: 'Start'
274
- }" />
275
- ```
276
-
277
- ### Entry/Article Mode
278
- Set `isEntry` to `true` for blog post headers (buttons are hidden):
279
- ```vue
280
- <TvHero
281
- :configHero="articleHero"
282
- :isEntry="true"
283
- />
284
- ```
285
-
286
- ## Examples
287
-
288
- ### Basic Hero
289
- ```vue
290
- <TvHero
291
- :configHero="{
292
- title: 'TODOvue Blog',
293
- description: 'Discover Vue.js tips and tutorials',
294
- button: 'View All Blogs',
295
- image: 'https://todovue.com/logo.png',
296
- alt: 'TODOvue Logo'
297
- }"
298
- @click-button="() => router.push('/blogs')"
299
- />
300
- ```
301
-
302
- ### Hero with Secondary Button
303
- ```vue
304
- <TvHero
305
- :configHero="{
306
- title: 'TODOvue Blog',
307
- description: 'Stay updated with the latest Vue.js content',
308
- button: 'View All Blogs',
309
- buttonSecondary: 'Read Latest',
310
- image: 'https://todovue.com/logo.png',
311
- alt: 'TODOvue Logo'
312
- }"
313
- @click-button="viewAll"
314
- @click-secondary-button="viewLatest"
315
- />
316
- ```
317
-
318
- ### Custom Themed Hero
319
- ```vue
320
- <TvHero
321
- :configHero="{
322
- title: 'Modern Design',
323
- description: 'Beautiful components for Vue 3',
324
- button: 'Explore',
325
- buttonSecondary: 'Documentation',
326
- image: '/logo.png'
327
- }"
328
- :customHero="{
329
- bgBody: '#202020',
330
- colorBody: '#ffffff',
331
- bgButton: '#8673a1',
332
- colorButton: '#e1e2dc',
333
- bgButtonSecondary: '#79308d',
334
- colorButtonSecondary: '#e1e2dc'
335
- }"
336
- />
337
- ```
338
-
339
- ### Entry/Article Hero
340
- ```vue
341
- <TvHero
342
- :configHero="{
343
- title: 'What is Vue.js?',
344
- description: 'An introduction to the progressive JavaScript framework',
345
- image: '/article-header.jpg',
346
- alt: 'Vue.js Article'
347
- }"
348
- :isEntry="true"
349
- />
350
- ```
351
-
352
- ## Accessibility
353
- - **Semantic HTML**: Uses proper heading hierarchy (`<h1>` for title)
354
- - **Alt text**: Always provide `alt` property when using images
355
- - **ARIA labels**: Buttons inherit accessibility from `@todovue/tv-button`
356
- - **Keyboard navigation**: Full keyboard support for interactive elements
357
- - **Color contrast**: Default theme meets WCAG AA standards
358
-
359
- ## SSR Notes
360
- - **Zero DOM dependencies**: No direct `window` or `document` access
361
- - **Safe for SSR**: Works in Nuxt 3, Vite SSR, and other server environments
362
- - **Image optimization**: Works with Nuxt Image and other SSR image tools
363
- - **Composable pattern**: Uses Vue 3 Composition API with computed properties
364
-
365
- ## Styles Usage
366
-
367
- ### Vue 3 / Vite SPA
368
- ```ts
369
- // main.ts
370
- import { createApp } from 'vue'
371
- import App from './App.vue'
372
-
373
- import { TvHero } from '@todovue/tv-hero'
374
- import '@todovue/tv-hero/style.css'
375
-
376
- const app = createApp(App)
377
- app.component('TvHero', TvHero)
378
- app.mount('#app')
379
- ```
380
-
381
- ### Nuxt 3 / 4
382
- ```ts
383
- // nuxt.config.ts
384
- export default defineNuxtConfig({
385
- css: ['@todovue/tv-hero/style.css'],
386
- })
387
- ```
388
-
389
- ## Development
390
- ```bash
391
- git clone https://github.com/TODOvue/tv-hero.git
392
- cd tv-hero
393
- npm install
394
- npm run dev # run demo playground
395
- npm run build # build library
396
- ```
397
- The demo playground includes multiple examples showcasing different configurations and customization options.
398
-
399
- ## Contributing
400
- PRs and issues welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
401
-
402
- ### Dependencies
403
- - **[@todovue/tv-button](https://www.npmjs.com/package/@todovue/tv-button)**: Powers the call-to-action buttons
404
- - **Vue 3**: Peer dependency (^3.0.0)
405
-
406
- ## License
407
- MIT © TODOvue
408
-
409
- ### Attributions
410
- Crafted for the TODOvue component ecosystem
@@ -1,138 +0,0 @@
1
- # Changelog
2
-
3
- All notable changes to `@todovue/tv-label` will be documented in this file.
4
-
5
- This project adheres to [Semantic Versioning](https://semver.org/).
6
-
7
- ## [1.2.4] - 2026-01-27
8
-
9
- ### Changed
10
- - Simplified build scripts to improve maintainability.
11
- - Updated package configuration files to the latest versions.
12
-
13
- ## [1.2.3] - 2026-01-27
14
-
15
- ### Changed
16
- - Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
17
-
18
- ### Removed
19
- - Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
20
-
21
- ## [1.2.2] - 2026-01-26
22
-
23
- ### Changed
24
- - Updated the release workflow to automate publishing to npm and the generation of GitHub Releases.
25
- - Added the `src` directory to the list of ignored files within the `package.json` configuration.
26
- - Added a demo entry point to the `package.json` configuration.
27
-
28
- ### Dependencies
29
- - Updated `@todovue/tv-demo` to `^1.4.10`.
30
- - Updated `vue` to `^3.5.27`.
31
- - Updated `sass` to `^1.97.3`.
32
-
33
- ## [1.2.1] - 2026-01-19
34
-
35
- ### Added
36
- - Introduced an outline variant to the component library for expanded styling options.
37
-
38
- ### Dependencies
39
- - Updated `@todovue/tv-demo` to `^1.4.3`.
40
-
41
- ### Changed
42
- * Updated the `release.yml` workflow to support automated publishing to GitHub Packages.
43
- * Modified the repository name in `package.json` to ensure consistency with the package registry.
44
- * Updated the `README.md` documentation to include details and usage examples for the new property.
45
-
46
- ## [1.2.0] - 2026-01-17
47
-
48
- ### Added
49
- - Added size variants (`sm`, `md`, `lg`) for enhanced flexibility in UI design.
50
- - Enhanced `TvLabel` styles with improved sizing, alignment, and hover effects.
51
-
52
- ### Dependencies
53
- - Updated `@todovue/tv-demo` to `^1.4.0`.
54
- - Updated `sass` to `^1.97.2`.
55
- - Updated `vite` to `^7.3.1`.
56
-
57
- ## [1.1.2] - 2025-12-19
58
-
59
- ### Added
60
- - Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
61
- - Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
62
-
63
- ### Changed
64
- - Changed the `base` option in `vite.config.js` for website deployment in cpanel.
65
-
66
- ### Fixed
67
- - Fixed repository URL in `package.json` to point to the correct GitHub repository.
68
- - Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
69
-
70
- ### Dependencies
71
- - Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
72
-
73
- ## [1.1.1] - 2025-11-21
74
-
75
- ### Fixed
76
- - Prevent duplicate CSS import for TvButton
77
-
78
- ## [1.1.0] - 2025-11-20
79
-
80
- ### Added
81
- - Added `nux.js` configuration file for Nuxt 4 integration.
82
- - Added `tsconfig.json` for proper type checking during build.
83
- - Create `global.d.ts` to declare module for TypeScript users.
84
- - Added Nuxt module for automatic style injection and auto-registration of the `TvLabel` component.
85
- - The `@todovue/tv-label` component is now externalized from the final build, reducing bundle size.
86
- - Added `CHANGELOG.md` in script to generate demo and documentation site.
87
-
88
- ### Dependencies
89
- - Updated the `@todovue/tv-demo` dependency to `^1.2.0` to ensure compatibility with the latest changes.
90
-
91
- ## [1.0.3] - 2025-11-15
92
-
93
- ### Changed
94
- - Removed CSS injection at runtime via `vite-plugin-css-injected-by-js`.
95
- - Styles are now served from separate CSS files generated by Vite (`dist/*.css`) and must be imported explicitly in the consuming app (SPA or Nuxt).
96
- - Improved SSR/SSG compatibility, especially for Nuxt applications, by relying on standard CSS assets instead of runtime style injection.
97
-
98
- ## [1.0.2] - 2025-10-17
99
-
100
- ### Fixed
101
- - Configuration of `vite.config.js`: Set `src/entry.ts` as the entry point for the library in build mode.
102
-
103
- ## [1.0.1] - 2025-10-17
104
-
105
- ### Changed
106
- - Changed node-version to workflows release.yml to 20.
107
- - The library build now uses `src/entry.ts` (exports both the component and the plugin) instead of directly exporting the `.vue` file.
108
- - Updated import demo examples.
109
- - Updated documentation for usage in SSR and Nuxt applications.
110
-
111
- ### Dependencies
112
- - Updated Vite to `^7.0.0` to ensure compatibility with Node.js 20.19+.
113
- - Updated @vitejs/plugin-vue to `^6.0.0`
114
-
115
- ## [1.0.0] - 2025-05-05
116
-
117
- ### Added
118
- - Initial release of `TvLabel` component.
119
- - Support for `color` and `textColor` props for full color customization.
120
- - Support for optional `isEdit` and `isRemove` icons with configurable `iconPosition`.
121
- - `textLabel` prop as an alternative to using slot content.
122
- - Full slot support for flexible usage.
123
- - Emits `click-label` and native `click` events.
124
- - Integrated styles for seamless appearance in any layout.
125
- - Ready-to-use demo and documentation site.
126
-
127
- [1.2.4]: https://github.com/TODOvue/todovue-label/pull/16/files
128
- [1.2.3]: https://github.com/TODOvue/todovue-label/pull/15/files
129
- [1.2.2]: https://github.com/TODOvue/todovue-label/pull/14/files
130
- [1.2.1]: https://github.com/TODOvue/todovue-label/pull/13/files
131
- [1.2.0]: https://github.com/TODOvue/todovue-label/pull/12/files
132
- [1.1.2]: https://github.com/TODOvue/todovue-label/pull/11/files
133
- [1.1.1]: https://github.com/TODOvue/todovue-label/pull/10/files
134
- [1.1.0]: https://github.com/TODOvue/todovue-label/pull/9/files
135
- [1.0.3]: https://github.com/TODOvue/todovue-label/pull/8/files
136
- [1.0.2]: https://github.com/TODOvue/todovue-label/pull/7/files
137
- [1.0.1]: https://github.com/TODOvue/todovue-label/pull/6/files
138
- [1.0.0]: https://github.com/TODOvue/todovue-label/pull/5/files