@todovue/tv-ui 0.1.0 → 0.1.2

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

@@ -1,255 +0,0 @@
-<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

@@ -1,158 +0,0 @@
-# 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