@todovue/tv-ui 0.1.0

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

@@ -0,0 +1,364 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue Breadcrumbs (TvBreadcrumbs)
+A flexible, framework‑agnostic Vue 3 breadcrumb navigation component with auto-generation from routes, custom separators, max items control, and full customization. Works seamlessly in Single Page Apps or Server-Side Rendered (SSR) environments (e.g. Nuxt 3).
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-breadcrumbs.svg)](https://www.npmjs.com/package/@todovue/tv-breadcrumbs)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-breadcrumbs.svg)](https://www.npmjs.com/package/@todovue/tv-breadcrumbs)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-breadcrumbs.svg)](https://www.npmjs.com/package/@todovue/tv-breadcrumbs)
+![License](https://img.shields.io/github/license/TODOvue/tv-breadcrumbs)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-breadcrumbs)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-breadcrumbs)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-breadcrumbs)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-breadcrumbs)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-breadcrumbs?style=social)
+
+> Demo: https://ui.todovue.blog/breadcrumbs
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Events](#events)
+- [Slots](#slots)
+- [Auto-Generate Mode](#auto-generate-mode)
+- [Max Items & Ellipsis](#max-items--ellipsis)
+- [Router Integration](#router-integration)
+- [Customization (Styles / Theming)](#customization-styles--theming)
+- [Accessibility](#accessibility)
+- [SSR Notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- **Manual items**: Provide a static array of breadcrumb items
+- **Auto-generation**: Automatically generate breadcrumbs from Vue Router routes
+- **Max items control**: Collapse long breadcrumb trails with ellipsis (`…`)
+- **Custom separators**: Choose your own separator character or component
+- **Customizable slots**: Override item, current item, and separator rendering
+- **Router integration**: Automatically integrates with Vue Router for navigation
+- **Accessibility**: Full ARIA support with semantic HTML and structured data
+- **SSR-ready**: Works in both SPA and SSR (Nuxt 3) contexts
+- **Lightweight**: Tree-shakeable with Vue marked external in library build
+
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-breadcrumbs
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-breadcrumbs
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-breadcrumbs
+```
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'
+import '@todovue/tv-breadcrumbs/style.css' // import styles
+
+createApp(App)
+  .use(TvBreadcrumbs) // enables <TvBreadcrumbs /> globally
+  .mount('#app')
+```
+Local import inside a component:
+```vue
+<script setup>
+import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'
+
+const items = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Category', href: '/products/category' },
+  { label: 'Item Details' }
+]
+
+function onItemClick({ item, index, event }) {
+  console.log('Clicked:', item.label)
+}
+</script>
+
+<template>
+  <TvBreadcrumbs :items="items" @item-click="onItemClick" />
+</template>
+```
+
+## Nuxt 4 / SSR Usage
+First, add the stylesheet to your Nuxt config:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-breadcrumbs/nuxt'
+  ]
+})
+```
+
+Then create a plugin file: `plugins/tv-breadcrumbs.client.ts` (or without `.client` suffix as it's SSR-safe):
+```ts
+import { defineNuxtPlugin } from '#app'
+import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.use(TvBreadcrumbs)
+})
+```
+Use anywhere:
+```vue
+<TvBreadcrumbs auto-generate />
+```
+Optional direct import (no plugin):
+```vue
+<script setup>
+import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'
+</script>
+```
+
+## Component Registration Options
+| Approach                                                                        | When to use                                    |
+|---------------------------------------------------------------------------------|------------------------------------------------|
+| Global via `app.use(TvBreadcrumbs)`                                             | Many usages across app / design system install |
+| Local named import `{ TvBreadcrumbs }`                                          | Isolated / code-split contexts                 |
+| Direct default import `import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'` | Single usage or manual registration            |
+
+## Props
+| Prop         | Type    | Default        | Description                                                                                      |
+|--------------|---------|----------------|--------------------------------------------------------------------------------------------------|
+| items        | Array   | `[]`           | Array of breadcrumb items. Each item: `{ label, href?, disabled?, key? }`.                       |
+| separator    | String  | `'›'`          | Character or string to display between breadcrumb items.                                         |
+| maxItems     | Number  | `0`            | Maximum items to display. If exceeded, shows first item + ellipsis + last N items. 0 = no limit. |
+| autoGenerate | Boolean | `false`        | Auto-generate breadcrumbs from `$route.path` or route meta (`breadcrumb`).                       |
+| homeLabel    | String  | `'Home'`       | Label for the home item when auto-generating breadcrumbs.                                        |
+| activeLink   | Boolean | `false`        | If `true`, the current page item (last item) is rendered as a link.                              |
+| ariaLabel    | String  | `'Breadcrumb'` | ARIA label for the `<nav>` element.                                                              |
+
+### Item Object Structure
+Each item in the `items` array can have:
+```typescript
+{
+  label: string       // Display text (required)
+  href?: string       // Link URL (optional, null for current page)
+  icon?: string       // Icon CSS class (e.g. "fa-solid fa-home") (optional)
+  disabled?: boolean  // Disable interaction (optional)
+  key?: string        // Unique key for rendering (optional, auto-generated if not provided)
+}
+```
+
+## Events
+| Event name (kebab) | Payload                  | Description                                                           |
+|--------------------|--------------------------|-----------------------------------------------------------------------|
+| `item-click`       | `{ item, index, event }` | Emitted when any breadcrumb item is clicked.                          |
+| `navigate`         | `{ to, item, index }`    | Emitted when navigation occurs via Vue Router (if router is present). |
+
+Usage:
+```vue
+<TvBreadcrumbs 
+  :items="items" 
+  @item-click="handleClick"
+  @navigate="handleNavigate"
+/>
+```
+
+```js
+function handleClick({ item, index, event }) {
+  console.log('Clicked item:', item.label, 'at index:', index)
+}
+
+function handleNavigate({ to, item, index }) {
+  console.log('Navigating to:', to)
+}
+```
+
+## Slots
+The component provides three slots for full customization:
+
+### `item` slot
+Customize the rendering of each breadcrumb link (except the last one).
+```vue
+<TvBreadcrumbs :items="items">
+  <template #item="{ item, index }">
+    <strong>{{ item.label }}</strong>
+  </template>
+</TvBreadcrumbs>
+```
+
+### `current` slot
+Customize the rendering of the current (last) breadcrumb item.
+```vue
+<TvBreadcrumbs :items="items">
+  <template #current="{ item, index }">
+    <em>{{ item.label }}</em>
+  </template>
+</TvBreadcrumbs>
+```
+
+### `separator` slot
+Customize the separator between breadcrumb items.
+```vue
+<TvBreadcrumbs :items="items">
+  <template #separator>
+    <span> / </span>
+  </template>
+</TvBreadcrumbs>
+```
+
+## Auto-Generate Mode
+When `autoGenerate` is enabled, the component automatically creates breadcrumbs from your current route.
+
+### Basic Auto-Generation
+```vue
+<TvBreadcrumbs auto-generate />
+```
+This reads `$route.path` and creates breadcrumb items. For example:
+- Path: `/docs/guides/installation`
+- Result: `Home › Docs › Guides › Installation`
+
+### Custom Home Label
+```vue
+<TvBreadcrumbs auto-generate home-label="Dashboard" />
+```
+
+### Route Meta Integration
+You can define breadcrumbs in your route configuration:
+```js
+const routes = [
+  {
+    path: '/products',
+    meta: {
+      breadcrumb: 'Products'
+    }
+  },
+  {
+    path: '/products/:id',
+    meta: {
+      breadcrumb: (route) => [
+        { label: 'Products', href: '/products' },
+        { label: route.params.id }
+      ]
+    }
+  }
+]
+```
+
+The component will use:
+1. Route meta `breadcrumb` if defined (string, array, or function)
+2. Fallback to auto-generated path segments if no meta found
+
+## Max Items & Ellipsis
+Control long breadcrumb trails with the `maxItems` prop:
+
+```vue
+<TvBreadcrumbs :items="longItemsList" :max-items="4" />
+```
+
+**Example:**
+- Original: `Home › Docs › API › v1 › Auth › Scopes`
+- With `max-items="4"`: `Home › … › Auth › Scopes`
+
+The algorithm keeps:
+- First item (always visible)
+- Ellipsis (`…`) which is interactive: **click to show hidden items in a dropdown**
+- Last N-1 items (where N = maxItems)
+
+## Router Integration
+TvBreadcrumbs automatically detects and integrates with Vue Router:
+
+1. **Automatic navigation**: Clicks on breadcrumb links call `router.push()` instead of native navigation
+2. **Route reading**: Accesses `$route` for auto-generation
+3. **Navigate event**: Emits when programmatic navigation occurs
+
+**Without router**: Links work as standard `<a>` tags with `href`.
+
+**With router**: Navigation is handled programmatically, and the `navigate` event fires.
+
+## Customization (Styles / Theming)
+The component uses scoped styles with BEM-like class names for easy customization:
+
+### CSS Classes
+- `.tv-breadcrumb-root`: Main `<nav>` container
+- `.tv-breadcrumb-list`: `<ol>` list wrapper
+- `.tv-breadcrumb-item`: Each `<li>` item
+  - `.tv-breadcrumb-item--link`: Non-current items
+  - `.tv-breadcrumb-item--current`: Current (last) item
+  - `.tv-breadcrumb-item--disabled`: Disabled items
+- `.tv-breadcrumb-link`: `<a>` link element
+- `.tv-breadcrumb-current`: Current item `<span>`
+- `.tv-breadcrumb-separator`: Separator `<span>`
+
+### Custom Styling Example
+```css
+/* Override default styles */
+.tv-breadcrumb-list {
+  font-size: 14px;
+  color: #333;
+}
+
+.tv-breadcrumb-link {
+  color: #0066cc;
+  text-decoration: none;
+}
+
+.tv-breadcrumb-link:hover {
+  text-decoration: underline;
+}
+
+.tv-breadcrumb-separator {
+  margin: 0 8px;
+  color: #999;
+}
+
+.tv-breadcrumb-current {
+  font-weight: 600;
+  color: #000;
+}
+```
+
+## Accessibility
+TvBreadcrumbs follows WAI-ARIA best practices:
+
+- **Semantic HTML**: Uses `<nav>`, `<ol>`, `<li>` for proper structure
+- **ARIA attributes**: 
+  - `aria-label` on `<nav>` (customizable via prop)
+  - `aria-current="page"` on the current item
+  - `aria-disabled` on disabled items
+  - `aria-hidden` on separator
+- **Structured data**: Implements Schema.org `ListItem` markup for search engines
+- **Keyboard navigation**: All interactive elements are focusable and keyboard-accessible
+- **Screen reader friendly**: Proper semantic structure and ARIA labels
+
+## SSR Notes
+- No direct DOM (`window` / `document`) access → safe for SSR
+- Router access is wrapped with safe guards (checks for `$route` / `$router` existence)
+- Works with Nuxt 3 out of the box
+- Styles are automatically injected when importing the component
+- Auto-generation mode gracefully handles missing router in SSR context
+
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-breadcrumbs.git
+cd tv-breadcrumbs
+npm install
+npm run dev     # run demo playground
+npm run 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-button/CHANGELOG.md

@@ -0,0 +1,158 @@
+# Changelog
+
+All notable changes to `@todovue/tv-button` will be documented in this file.
+
+This project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.2.6] - 2026-01-28
+
+### Changed
+- Simplified build scripts to improve maintainability.
+- Updated package configuration files to the latest versions.
+
+## [1.2.5] - 2025-01-27
+
+### Changed
+- 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.
+- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
+
+### Removed
+- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.10`.
+- Updated `vue` to `^3.5.27`.
+- Updated `sass` to `^1.97.3`.
+
+## [1.2.4] - 2026-01-19
+
+### Added
+- Add `dashboard`, `folder`, `image`, `link`, `mail`, `save` icons.
+- Added support for `href` and `to` properties to enable native link and client-side routing functionality within the component.
+
+### Dependencies
+- Update `@todovue/tv-demo` to `^1.4.3`.
+- Update `sass` to `^1.97.2`.
+- Update `vite` to `^7.3.1`.
+
+### Changed
+- Standardized button properties to ensure consistent API usage across the application.
+- Refactored the component structure to improve maintainability and code readability.
+- Updated the `README.md` documentation to reflect the standardization of button properties using `variant` and `size` terminology.
+- Simplified button mixins to streamline the styling architecture.
+- Improved hover and active states to enhance visual feedback and user interaction.
+
+## [1.2.3] - 2025-12-19
+
+### 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.2.2] - 2025-11-21
+
+### Fixed
+- Prevent duplicate CSS import for TvButton
+
+## [1.2.1] - 2025-11-20
+
+### Fixed
+- Fixed missing export of `nux.js` file in the package.
+- Create `global.d.ts` to declare module for TypeScript users.
+- Create `tsconfig.json` for proper type checking during build.
+
+## [1.2.0] - 2025-11-20
+
+### Dependencies
+- Update `@todovue/tv-demo` to `^1.2.0` for demo improvements.
+
+### Added
+- Add `double-arrow-left`, `double-arrow-right`, `home`, `dots-vertical`, `eye-off`, `trash` and `upload` icons.
+- Add `nux.js` configuration file for Nuxt 4 integration.
+
+### Changed
+- Update icon `remove` to `trash`
+
+## [1.1.3] - 2025-11-15
+
+### Changed
+- Removed CSS injection via `vite-plugin-css-injected-by-js` for the library build.
+- 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).
+- Improved compatibility with SSR/SSG environments (especially Nuxt) by avoiding runtime CSS injection.
+
+## [1.1.2] - 2025-10-17
+
+### Fixed
+- Fixed CSS export to avoid the need for manual import wherever the component is used.
+
+## [1.1.1] - 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-button.css` file optimized for SSR/Nuxt.
+- Changed node-version to workflows release.yml to 20.
+
+### Added
+- Plugin installation support: `app.use(TvButton)` or `app.use(TvButtonPlugin)`.
+- Explicit export of the style file: `import '@todovue/tv-button/style.css'`.
+- Documentation for usage in SSR and Nuxt 3 applications.
+
+### Dependencies
+- `package.json` exposes `style`, `sideEffects`, and the export of `./style.css` for safe tree-shaking.
+- Updated Vite to `^7.0.0` to ensure compatibility with Node.js 20.19+.
+- Updated @vitejs/plugin-vue to `^6.0.0`.
+
+## [1.1.0] - 2025-05-08
+
+### Added
+- Add icon-only button support with styling and documentation updates
+- Add loading state support with spinner and update documentation
+
+### Fixed
+- Fixed button layout and icon positioning
+- Fixed tv-btn-text styles for improved accessibility and hover effects
+
+## [1.0.0] - 2025-05-05
+
+### Added
+- Introduced `TvButton` as a reusable and fully customizable button component.
+- Support for multiple button variants: `default`, `outlined`, `text`, `icon-only`.
+- Size options: `small`, `default`, `large`.
+- Status-based styles: `success`, `info`, `warning`, `error`.
+- `disabled` state with the appropriate accessibility handling.
+- Support for custom styles via `customStyle` prop.
+- Icon integration using the `icon` and `iconPosition` props.
+- ARIA accessibility via `ariaLabel` prop.
+- Dual-event emission: `click` and `click-button`.
+
+### Included Icons
+- 40+ built-in icons (`account`, `add-user`, `check`, `info`, `logout`, `settings`, etc.)
+- All icons are SVG-based and support `currentColor` for theme compatibility.
+
+### Tooling & Setup
+- Bundled and built using Vite.
+- Ready-to-use as a standalone or global Vue component.
+- Scoped styles using SCSS.
+
+[1.2.6]: https://github.com/TODOvue/tv-button/pull/24/files
+[1.2.5]: https://github.com/TODOvue/tv-button/pull/23/files
+[1.2.4]: https://github.com/TODOvue/tv-button/pull/22/files
+[1.2.3]: https://github.com/TODOvue/tv-button/pull/21/files
+[1.2.2]: https://github.com/TODOvue/tv-button/pull/20/files
+[1.2.1]: https://github.com/TODOvue/tv-button/pull/19/files
+[1.2.0]: https://github.com/TODOvue/tv-button/pull/18/files
+[1.1.3]: https://github.com/TODOvue/tv-button/pull/17/files
+[1.1.2]: https://github.com/TODOvue/tv-button/pull/16/files
+[1.1.1]: https://github.com/TODOvue/tv-button/pull/15/files
+[1.1.0]: https://github.com/TODOvue/tv-button/pull/13/files
+[1.0.0]: https://github.com/TODOvue/tv-button/pull/12/files