@todovue/tv-ui 0.1.0

package/dist/demos/tv-button/README.md

@@ -0,0 +1,255 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue Button (TvButton)
+A flexible, framework‑agnostic Vue 3 button component with variants, sizes, icons, loading state, and customization utilities. Ship it in Single Page Apps or Server-Side Rendered (SSR) environments (e.g. Nuxt 3) with zero DOM assumptions.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-button.svg)](https://www.npmjs.com/package/@todovue/tv-button)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-button.svg)](https://www.npmjs.com/package/@todovue/tv-button)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-button.svg)](https://www.npmjs.com/package/@todovue/tv-button)
+![License](https://img.shields.io/github/license/TODOvue/tv-button)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-button)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-button)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-button)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-button)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-button?style=social)
+
+> Demo: https://ui.todovue.blog/button/
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Style usage](#style-usage)
+- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Events](#events)
+- [Icons](#icons)
+- [Customization (Styles / Theming)](#customization-styles--theming)
+- [Icon-only & Variant Notes](#icon-only--variant-notes)
+- [Accessibility](#accessibility)
+- [SSR Notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- **Variants**: primary, secondary, success, info, warning, error
+- **Sizes**: sm, md, lg, full-width option
+- Icon support (pre-bundled SVG set via `import.meta.glob`)
+- Icon-only and pure icon modes (`type="icon"` + `iconOnly`)
+- Loading state with spinner
+- Custom inline style override via `customStyle`
+- Emits both a custom event and the native click
+- Works in SPA and SSR (Nuxt 3) contexts
+- Tree-shake friendly (Vue marked external in library build)
+
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-button
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-button
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-button
+```
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import '@todovue/tv-button/style.css'
+import TvButton from '@todovue/tv-button'
+
+createApp(App)
+  .use(TvButton) // enables <TvButton /> globally
+  .mount('#app')
+```
+Local import inside a component:
+```vue
+<script setup>
+import '@todovue/tv-button/style.css'
+import { TvButton } from '@todovue/tv-button'
+
+function onSubmit() {
+  console.log('Clicked')
+}
+</script>
+
+<template>
+  <TvButton variant="success" icon="check" @click-button="onSubmit">Submit</TvButton>
+</template>
+```
+
+## Style usage
+
+### Vue 3 SPA with Vite
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@todovue/tv-button/style.css'
+import { TvButton } from '@todovue/tv-button'
+
+const app = createApp(App)
+app.component('TvButton', TvButton)
+app.mount('#app')
+```
+
+### Nuxt 3/4
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-button/nuxt'
+  ]
+})
+```
+
+## Nuxt 4 / SSR Usage
+Create a plugin file: `plugins/tv-button.client.ts` (client-only is fine, or without suffix for SSR as it is safe):
+```ts
+import { defineNuxtPlugin } from '#app'
+import TvButton from '@todovue/tv-button'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(TvButton)
+})
+```
+Use anywhere:
+```vue
+<TvButton outlined icon="info">Details</TvButton>
+```
+Optional direct import (no plugin):
+```vue
+<script setup>
+import { TvButton } from '@todovue/tv-button'
+</script>
+```
+
+## Component Registration Options
+| Approach                                                          | When to use                                    |
+|-------------------------------------------------------------------|------------------------------------------------|
+| Global via `app.use(TvButton)`                                    | Many usages across app / design system install |
+| Local named import `{ TvButton }`                                 | Isolated / code-split contexts                 |
+| Direct default import `import TvButton from '@todovue/tv-button'` | Single usage or manual registration            |
+
+## Props
+All boolean style props have two interchangeable forms: a long form (`isSomething`) and a short alias.
+
+| Prop         | Type                                      | Default   | Description                                            |
+|--------------|-------------------------------------------|-----------|--------------------------------------------------------|
+| buttonText   | string                                    | ''        | Optional text (alternative to slot).                   |
+| variant      | 'primary' \| 'secondary' \| 'success' ... | 'primary' | Visual style variant.                                  |
+| size         | 'sm' \| 'md' \| 'lg'                      | 'md'      | Button size.                                           |
+| customStyle  | object                                    | {}        | Inline style overrides (`{ backgroundColor, color }`). |
+| icon         | string                                    | null      | Name of bundled icon.                                  |
+| iconColor    | string                                    | 'white'   | Icon color override.                                   |
+| iconPosition | 'left' \| 'right'                         | 'right'   | Icon position relative to text.                        |
+| type         | 'button' \| 'submit' \| 'reset' \| 'icon' | 'button'  | Native button type. Use 'icon' for icon-only styling.  |
+| ariaLabel    | string                                    | ''        | Accessibility label (required if no text / icon-only). |
+| iconOnly     | boolean                                   | false     | Renders only the icon (no padding/background).         |
+| outlined     | boolean                                   | false     | Outlined style.                                        |
+| rounded      | boolean                                   | false     | Rounded corners.                                       |
+| disabled     | boolean                                   | false     | Disables interaction.                                  |
+| loading      | boolean                                   | false     | Shows spinner & disables.                              |
+| full         | boolean                                   | false     | Full width.                                            |
+| text         | boolean                                   | false     | Text (minimal) style.                                  |
+| href         | string                                    | null      | URL for native anchor tag.                             |
+| to           | string \| object                          | null      | Route for RouterLink / NuxtLink.                       |
+| target       | string                                    | null      | Anchor target (e.g. '_blank').                         |
+| rel          | string                                    | null      | Anchor rel attribute.                                  |
+
+> Note: Because `type` is bound to the native `<button type="...">`, using `type="icon"` produces a non-standard button attribute. This does not break rendering but is semantically incorrect in forms. A future release will introduce `variant` and keep `htmlType` separate (see Roadmap).
+
+## Events
+| Event name (kebab) | Emits (camel) | Description                                 |
+|--------------------|---------------|---------------------------------------------|
+| `click-button`     | `clickButton` | Custom semantic click event.                |
+| `click`            | `click`       | Native passthrough (also emitted manually). |
+
+Usage:
+```vue
+<TvButton @click-button="onAction" />
+<TvButton @click="onNative" />
+```
+
+## Icons
+Set with the `icon` prop. Available names:
+`account`, `add-user`, `alert`, `arrow-down`, `arrow-left`, `arrow-right`, `arrow-up`, `block`, `calendar`, `cancel`, `check`, `clone`, `dark`, `download`, `edit`, `external-link`, `favorite`, `filter`, `help`, `info`, `light`, `loading`, `lock`, `login`, `logout`, `menu`, `minus`, `notification`, `plus`, `remove`, `search`, `settings`, `share`, `star`, `todovue`, `unlock`, `update`, `view` `double-arrow-left`, `double-arrow-right`, `home`, `dots-vertical`, `eye-off`, `trash`, `upload`, `dashboard`, `folder`, `link`, `mail` and `save`.
+
+Example:
+```vue
+<TvButton icon="check" variant="success">Saved</TvButton>
+<TvButton icon="info" iconPosition="left" outlined>Info</TvButton>
+```
+
+## Customization (Styles / Theming)
+Inline overrides via `customStyle`:
+```vue
+<TvButton :customStyle="{ backgroundColor: '#0f2e5b', color: '#fff' }">Branded</TvButton>
+```
+Outlined variant adapts automatically:
+```vue
+<TvButton outlined :customStyle="{ backgroundColor: '#ff4081', color: '#fff' }">Pink Outline</TvButton>
+```
+> A subtle hover darkening is auto-generated when `customStyle.backgroundColor` exists.
+
+## Icon-only & Variant Notes
+Pure icon button:
+```vue
+<TvButton type="icon" icon="edit" />
+```
+Inline icon-only action (no background / padding):
+```vue
+<TvButton type="icon" icon="edit" :iconOnly="true" aria-label="Edit item" />
+```
+Loading state:
+```vue
+<TvButton loading icon="download">Processing...</TvButton>
+```
+
+Link usage:
+```vue
+<!-- Native anchor -->
+<TvButton href="https://todovvue.blog" target="_blank">External Link</TvButton>
+
+<!-- Router link -->
+<TvButton to="/dashboard">Go to Dashboard</TvButton>
+```
+
+## Accessibility
+- Always provide visible text OR `aria-label`.
+- Mandatory: add `aria-label` when using `iconOnly` or when slot content is empty.
+- Disabled state uses both `disabled` attribute and styling classes.
+
+## SSR Notes
+- No direct DOM (`window` / `document`) access in source → safe for SSR.
+- Styles are now served from a separate CSS file generated by Vite (`dist/tv-button.css`). You need to import it explicitly in your app (SPA or Nuxt) using `@todovue/tv-button/style.css`.
+- SVG icons are bundled via Vite's `import.meta.glob` (works in Vite + Nuxt).
+
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-button.git
+cd tv-button
+yarn install
+yarn dev     # run demo playground
+yarn build   # build library
+```
+Local demo served from Vite using `index.html` + `src/demo` examples.
+
+## Contributing
+PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
+
+## License
+MIT © TODOvue
+
+### Attributions
+Crafted for the TODOvue component ecosystem

package/dist/demos/tv-card/CHANGELOG.md

@@ -0,0 +1,158 @@
+# Changelog
+
+All notable changes to `@todovue/tv-card` will be documented in this file.
+
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.1.4] - 2026-01-27
+
+### Changed
+- Simplified the file list in `package.json` to include only essential assets.
+- Simplified the build configuration by removing demo-specific logic.
+- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
+- Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
+- Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
+
+### Added
+- Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
+
+### Removed
+- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.11`.
+- Updated `@todovue/tv-label` to `^1.2.3`.
+- Updated `@todovue/tv-button` to `^1.2.5`.
+- Updated `vue` to `^3.5.27`.
+- Updated `sass` to `^1.97.3`.
+
+## [1.1.3] - 2026-01-21
+
+### Removed
+- Removed the `uppercase` text transformation from title styles to improve readability and allow for more flexible typography.
+
+### Dependencies
+- Updated `@todovue/tv-button` to `^1.2.4`.
+- Updated `@todovue/tv-label` to `^1.2.1`.
+- Updated `@todovue/tv-demo` to `^1.4.4`.
+- Updated `sass` to `^1.97.2`.
+- Updated `vite` to `^7.3.1`.
+
+## [1.1.2] - 2025-12-27
+
+### Added
+- Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
+- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
+
+### Changed
+- Changed the `base` option in `vite.config.js` for website deployment in cpanel.
+
+### Fixed
+- Fixed repository URL in `package.json` to point to the correct GitHub repository.
+- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
+
+### Dependencies
+- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
+
+## [1.1.1] - 2025-11-25
+
+### Fixed
+- Fixed styles for horizontal variant of the card component.
+- Fixed `small` prop styles for horizontal variant of the card component.
+- Fixed full width styles for horizontal variant of the card component.
+
+## [1.1.0] - 2025-11-25
+
+### Added
+- Added horizontal variant for the card component, allowing for a side-by-side layout of image and content.
+
+## [1.0.7] - 2025-11-24
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
+
+### Changed
+- Updated background and text colors for dark and light themes to improve readability and visual comfort.
+
+## [1.0.6] - 2025-11-21
+
+### Added
+- Added `nux.js` configuration file for Nuxt 4 integration.
+- Added `tsconfig.json` for proper type checking during build.
+- Create `global.d.ts` to declare module for TypeScript users.
+- Added Nuxt module for automatic style injection and auto-registration of the `TvCard` component.
+- The `@todovue/tv-card` component is now externalized from the final build, reducing bundle size.
+- Added `CHANGELOG.md` in script to generate demo and documentation site.
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.1.0` to ensure compatibility with the latest changes.
+- Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
+- Updated the `@todovue/tv-label` dependency to `^1.1.1` to ensure compatibility with the latest changes.
+
+## [1.0.5] - 2025-11-15
+
+### Changed
+- Removed CSS injection via `vite-plugin-css-injected-by-js`.
+- Styles are now served from a separate CSS file generated by Vite (`dist/*.css`) and must be imported explicitly in the consuming app (SPA or Nuxt).
+- These changes improve SSR/SSG compatibility, especially for Nuxt-based applications.
+
+## [1.0.4] - 2025-11-13
+
+### Fixed
+- Fixed position of title in card when the title is long and wraps into multiple lines.
+
+## [1.0.3] - 2025-11-13
+
+### Fixed
+- Fixed styles for dark and light mode in the library build.
+- Fixed the title overflow when it is too long and does not fit on a single line.
+
+### Changed
+- Corrected demo imports.
+
+## [1.0.2] - 2025-10-17
+
+### Changed
+- The library build now uses `src/entry.ts` (exports both the component and the plugin) instead of directly exporting the `.vue` file.
+- CSS injection via JS has been removed for the library build (it is only kept for the demo), generating a `tv-card.css` file optimized for SSR/Nuxt.
+- Changed node-version to workflows release.yml to 20.
+
+### Added
+- Plugin installation support: `app.use(TvLabel)` or `app.use(TvLabelPlugin)`.
+- Explicit export of the style file: `import '@todovue/tv-label/style.css'`.
+- Documentation for usage in SSR and Nuxt 3 applications.
+
+## [1.0.1] - 2025-05-07
+
+### Fixed
+- Fixed styles and global style imports
+
+## [1.0.0] - 2025-05-05
+
+### Added
+- Initial release of `TvCard` component under the `@todovue` namespace.
+- Supports basic card structure with:
+    - Title, description, image, and alt text.
+    - Primary action button.
+- Added support for:
+    - Secondary button (`secondaryButtonText`).
+    - Custom labels with optional label limit.
+    - Fully customizable color scheme: background, text, button styles.
+- Emitted events:
+    - `clickButton` (on primary button click)
+    - `clickSecondaryButton` (on secondary button click)
+    - `clickLabel` (on label click)
+
+[1.1.4]: https://github.com/TODOvue/todovue-card/pull/16/files
+[1.1.3]: https://github.com/TODOvue/todovue-card/pull/15/files
+[1.1.2]: https://github.com/TODOvue/todovue-card/pull/14/files
+[1.1.1]: https://github.com/TODOvue/todovue-card/pull/13/files
+[1.1.0]: https://github.com/TODOvue/todovue-card/pull/12/files
+[1.0.7]: https://github.com/TODOvue/todovue-card/pull/11/files
+[1.0.6]: https://github.com/TODOvue/todovue-card/pull/10/files
+[1.0.5]: https://github.com/TODOvue/todovue-card/pull/9/files
+[1.0.4]: https://github.com/TODOvue/todovue-card/pull/8/files
+[1.0.3]: https://github.com/TODOvue/todovue-card/pull/7/files
+[1.0.2]: https://github.com/TODOvue/todovue-card/pull/6/files
+[1.0.1]: https://github.com/TODOvue/todovue-card/pull/4/files
+[1.0.0]: https://github.com/TODOvue/todovue-card/pull/3/files