@todovue/tv-ui 0.1.0 → 0.1.2

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

@@ -1,389 +0,0 @@
-<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
-</p>
-
-# TODOvue Menu (TvMenu)
-A flexible, responsive Vue 3 menu component with integrated search functionality, mobile-friendly navigation, and easy customization. Perfect for Single Page Apps or Server-Side Rendered (SSR) environments like Nuxt 3.
-
-[![npm](https://img.shields.io/npm/v/@todovue/tv-menu.svg)](https://www.npmjs.com/package/@todovue/tv-menu)
-[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-menu.svg)](https://www.npmjs.com/package/@todovue/tv-menu)
-[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-menu.svg)](https://www.npmjs.com/package/@todovue/tv-menu)
-![License](https://img.shields.io/github/license/TODOvue/tv-menu)
-![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-menu)
-![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-menu)
-![Node Version](https://img.shields.io/node/v/@todovue/tv-menu)
-![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-menu)
-![Stars](https://img.shields.io/github/stars/TODOvue/tv-menu?style=social)
-
-> Demo: https://ui.todovue.blog/menu
-
-## 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)
-- [Usage Examples](#usage-examples)
-- [Responsive Behavior](#responsive-behavior)
-- [Customization (Styles / Theming)](#customization-styles--theming)
-- [Accessibility](#accessibility)
-- [SSR Notes](#ssr-notes)
-- [Development](#development)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Features
-- Responsive navigation menu with desktop and mobile views
-- Integrated search functionality powered by `@todovue/tv-search`
-- Logo/image click support with custom event handling
-- Menu item click events with data payload
-- Automatic mobile menu toggle with hamburger icon
-- Clean, modern design with customizable styling
-- Works seamlessly in SPA and SSR (Nuxt 3) contexts
-- Tree-shake friendly (Vue marked external in library build)
-
-## Installation
-Using npm:
-```bash
-npm install @todovue/tv-menu
-```
-Using yarn:
-```bash
-yarn add @todovue/tv-menu
-```
-Using pnpm:
-```bash
-pnpm add @todovue/tv-menu
-```
-
-## Quick Start (SPA)
-Global registration (main.js / main.ts):
-```js
-import { createApp } from 'vue'
-import App from './App.vue'
-import TvMenu from '@todovue/tv-menu'
-import '@todovue/tv-menu/style.css' // import styles
-import '@todovue/tv-search/style.css' // import styles
-import '@todovue/tv-button/style.css' // import styles
-
-createApp(App)
-  .use(TvMenu) // enables <TvMenu /> globally
-  .mount('#app')
-```
-Local import inside a component:
-```vue
-<script setup>
-import { TvMenu } from '@todovue/tv-menu'
-import '@todovue/tv-menu/style.css' // import styles
-import '@todovue/tv-search/style.css' // import styles
-import '@todovue/tv-button/style.css' // import styles
-
-const menuItems = [
-  { id: 1, title: 'Home', url: '/' },
-  { id: 2, title: 'About', url: '/about' },
-  { id: 3, title: 'Contact', url: '/contact' }
-]
-
-function handleMenuClick(menu) {
-  console.log('Clicked:', menu)
-  // Navigate to menu.url or perform custom action
-}
-
-function handleImageClick() {
-  console.log('Logo clicked')
-}
-
-function handleSearch(searchTerm) {
-  console.log('Search:', searchTerm)
-}
-</script>
-
-<template>
-  <TvMenu
-    :menus="menuItems"
-    placeholder="Search..."
-    titleButton="Search"
-    imageMenu="https://example.com/logo.png"
-    @clickImage="handleImageClick"
-    @clickMenu="handleMenuClick"
-    @searchMenu="handleSearch"
-  />
-</template>
-```
-
-## Nuxt 4 / SSR Usage
-Create a plugin file: `plugins/tv-menu.client.ts`:
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    '@todovue/tv-menu/nuxt'
-  ]
-})
-```
-Use anywhere in your Nuxt app:
-```vue
-<template>
-  <TvMenu
-    :menus="navigationItems"
-    placeholder="Search..."
-    imageMenu="/logo.png"
-    @clickMenu="navigateTo"
-  />
-</template>
-```
-
-## Component Registration Options
-| Approach                                                        | When to use                                    |
-|-----------------------------------------------------------------|------------------------------------------------|
-| Global via `app.use(TvMenu)`                                    | Many usages across app / design system install |
-| Local named import `{ TvMenu }`                                 | Isolated / code-split contexts                 |
-| Direct default import `import TvMenu from '@todovue/tv-menu'`   | Single usage or manual registration            |
-
-## Props
-| Prop          | Type          | Default            | Description                                              |
-|---------------|---------------|--------------------|----------------------------------------------------------|
-| menus         | Array         | []                 | Array of menu items with `{ id, title, url }` structure. |
-| placeholder   | String        | ''                 | Placeholder text for the search input.                   |
-| titleButton   | String        | ''                 | Label for the search button.                             |
-| imageMenu     | String        | ''                 | URL of the logo/image to display in the menu header.     |
-| noResultsText | String        | 'No results found' | Text displayed when search yields no results.            |
-| activeMenu    | String/Number | null               | The ID of the currently active menu item.                |
-
-### Menu Item Structure
-Each item in the `menus` array should have this structure:
-```js
-{
-  id: Number,      // unique identifier
-  title: String,   // display text
-  url: String      // navigation path or identifier
-}
-```
-
-## Events
-| Event name (kebab)  | Payload     | Description                                      |
-|---------------------|-------------|--------------------------------------------------|
-| `clickImage`        | —           | Emitted when the logo/image is clicked.          |
-| `clickMenu`         | menu object | Emitted when a menu item is clicked.             |
-| `searchMenu`        | search term | Emitted when search is performed (string value). |
-| `update:activeMenu` | menu id     | Emitted when the active menu item changes.       |
-
-Usage examples:
-```vue
-<TvMenu
-  @clickImage="handleLogoClick"
-  @clickMenu="handleNavigation"
-  @searchMenu="performSearch"
-/>
-```
-
-## Slots
-| Slot Name     | Props                  | Description                                            |
-|---------------|------------------------|--------------------------------------------------------|
-| `logo`        | —                      | Replace the default logo image.                        |
-| `item`        | `{ menu, isActive }`   | Customize the rendering of each menu item.             |
-| `action-end`  | —                      | Add content after the search bar (e.g., User Profile). |
-
-### Example with Slots
-```vue
-<TvMenu :menus="menus" v-model:activeMenu="activeId">
-  <template #logo>
-    <div class="my-logo">My App</div>
-  </template>
-  
-  <template #item="{ menu, isActive }">
-    <span :class="{ 'highlight': isActive }">
-      <i class="icon" v-if="menu.icon" :class="menu.icon"></i>
-      {{ menu.title }}
-    </span>
-  </template>
-
-  <template #action-end>
-     <div class="user-profile">User</div>
-  </template>
-</TvMenu>
-```
-
-## Usage Examples
-
-### Basic Navigation Menu
-```vue
-<script setup>
-import { TvMenu } from '@todovue/tv-menu'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
-
-const menus = [
-  { id: 1, title: 'Home', url: '/' },
-  { id: 2, title: 'About', url: '/about' },
-  { id: 3, title: 'Blog', url: '/blog' },
-  { id: 4, title: 'Contact', url: '/contact' }
-]
-
-function navigateToPage(menu) {
-  router.push(menu.url)
-}
-</script>
-
-<template>
-  <TvMenu
-    :menus="menus"
-    placeholder="Search pages..."
-    titleButton="Go"
-    imageMenu="/logo.png"
-    @clickMenu="navigateToPage"
-  />
-</template>
-```
-
-### With Search Functionality
-```vue
-<script setup>
-import { TvMenu } from '@todovue/tv-menu'
-import { ref } from 'vue'
-
-const searchResults = ref([])
-
-function handleSearch(term) {
-  // Perform search logic
-  fetch(`/api/search?q=${term}`)
-    .then(res => res.json())
-    .then(data => searchResults.value = data)
-}
-</script>
-
-<template>
-  <TvMenu
-    :menus="navigationItems"
-    placeholder="Search our site..."
-    titleButton="Search"
-    imageMenu="/brand-logo.png"
-    @searchMenu="handleSearch"
-  />
-</template>
-```
-
-### E-commerce Navigation
-```vue
-<script setup>
-import '@todovue/tv-menu/style.css'
-import { TvMenu } from '@todovue/tv-menu'
-
-const categories = [
-  { id: 1, title: 'Shop', url: '/shop' },
-  { id: 2, title: 'New Arrivals', url: '/new' },
-  { id: 3, title: 'Sale', url: '/sale' },
-  { id: 4, title: 'My Account', url: '/account' }
-]
-
-function onLogoClick() {
-  window.location.href = '/'
-}
-
-function navigateTo(menu) {
-  window.location.href = menu.url
-}
-
-function searchProducts(query) {
-  // Product search logic
-  console.log('Searching products:', query)
-}
-</script>
-
-<template>
-  <TvMenu
-    :menus="categories"
-    placeholder="Search products..."
-    titleButton="Find"
-    imageMenu="https://example.com/store-logo.png"
-    @clickImage="onLogoClick"
-    @clickMenu="navigateTo"
-    @searchMenu="searchProducts"
-  />
-</template>
-```
-
-## Responsive Behavior
-- **Desktop view**: Full horizontal menu with all items visible + integrated search
-- **Mobile view**: Hamburger icon that toggles a slide-in menu overlay
-- **Automatic breakpoint**: Menu adapts automatically using CSS media queries
-- **Touch-friendly**: All interactive elements are optimized for touch devices
-
-## Customization (Styles / Theming)
-The component uses SCSS with a modular structure. You can override styles by targeting the following CSS classes:
-
-### Main Classes
-- `.tv-menu-container` - Main menu wrapper
-- `.tv-menu-image` - Logo container
-- `.tv-menu-items` - Desktop menu items container
-- `.tv-menu-item` - Individual menu item (desktop)
-- `.tv-menu-icon` - Hamburger menu icon
-- `.tv-menu-items-mobile` - Mobile menu overlay
-- `.tv-menu-item-mobile` - Individual menu item (mobile)
-
-### Example Custom Styling
-```css
-/* Custom menu colors */
-.tv-menu-container {
-  background-color: #0f2e5b;
-}
-
-.tv-menu-item {
-  color: #ffffff;
-  font-weight: 600;
-}
-
-.tv-menu-item:hover {
-  color: #ff4081;
-}
-
-/* Custom logo size */
-.tv-menu-image img {
-  width: 200px;
-  height: auto;
-}
-```
-
-## Accessibility
-- Semantic HTML5 elements (`<header>`, `<nav>`, `<ul>`, `<li>`)
-- Keyboard navigation support for all interactive elements
-- Alt text support for logo image
-- Click events work with keyboard (Enter/Space)
-- Mobile menu properly handles focus management
-
-### Best Practices
-- Always provide meaningful `alt` text via the logo image URL
-- Ensure menu items have descriptive titles
-- Test keyboard navigation (Tab, Enter, Escape)
-
-## SSR Notes
-- No direct DOM (`window` / `document`) access in core component → safe for SSR
-- Styles are automatically injected when you import the library
-- Works with Vite-based SSR and Nuxt 3 out of the box
-- Mobile menu state is managed via Vue reactivity (no localStorage dependencies)
-
-## Development
-```bash
-git clone https://github.com/TODOvue/tv-menu.git
-cd tv-menu
-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).
-
-Please ensure:
-- Code follows existing style conventions
-- Tests pass (when available)
-- Documentation is updated for new features
-
-## License
-MIT © TODOvue
-
-### Attributions
-Crafted for the TODOvue component ecosystem

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

@@ -1,127 +0,0 @@
-# Changelog
-
-All notable changes to `@todovue/tv-modal` will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
-and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
-## [1.2.1] - 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-button` to `^1.2.5`.
-- Updated `vue` to `^3.5.27`.
-- Updated `sass` to `^1.97.3`.
-
-## [1.2.0] - 2026-01-20
-
-### Added
-- Enhanced the Modal component with dedicated slot support for headers and footers, allowing for greater customization of layout and content.
-- Enhanced button variant support to include specific styles for confirm and cancel actions, improving visual clarity for user decision-making.
-- Introduced the `closeOnBackdrop` property to provide control over whether the modal closes when the backdrop is clicked.
-
-### Changed
-- Replaced background images in modal alerts with SVG icons to improve scaling, performance, and color customization.
-
-### Dependencies
-- Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
-- Updated the `@todovue/tv-button` dependency to `^1.2.4`.
-- Updated the `sass` dependency to `^1.97.2`.
-- Updated the `vite` dependency to `^7.3.1`.
-
-## [1.1.2] - 2025-12-24
-
-### 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-24
-
-### Changed
-- Updated background and text colors for dark and light themes to improve readability and visual comfort.
-- Deleted unused styles files.
-
-### Dependencies
-- Updated the `@todovue/tv-demo` dependency to `^1.2.2` to ensure compatibility with the latest changes.
-
-## [1.1.0] - 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 `TvModal` component.
-- The `@todovue/tv-modal` 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.2.1` to ensure compatibility with the latest changes.
-- Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
-
-## [1.0.1] - 2025-11-15
-
-### Changed
-- Styles are now served as a separate CSS file (`dist/tv-modal.css`) generated by Vite during the build process.
-- Users must now explicitly import the stylesheet in their application:
-- For Vue/Vite SPA: `import '@todovue/tv-modal/style.css'` in `main.ts`
-- For Nuxt 3/4: Add `'@todovue/tv-modal/style.css'` to the `css` array in `nuxt.config.ts`
-
-### Added
-- Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
-- Added `./style.css` export path in `package.json` for explicit CSS imports.
-- Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
-
-### Dependencies
-- Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`.
-
-## [1.0.0] - 2025-10-20
-
-### Added
-- Initial release of TvModal component
-- Multiple modal variants: success, error, warning, and info icons
-- Configurable modal with `configModal` prop accepting title, description, and button texts
-- Theme support with automatic detection of dark-mode and light-mode
-- Manual theme override via `theme` prop
-- Built-in animations: scale-up on open, scale-down on close, and rotate shake on overlay click
-- Vue Teleport integration for proper modal rendering at body level
-- Keyboard navigation support (ESC key to close/cancel)
-- Focus management: automatically focuses modal on open and restores focus on close
-- Custom events: `accepted` and `canceled` for user actions
-- Accessibility features: ARIA attributes (role="dialog", aria-modal, aria-labelledby, aria-describedby)
-- Integration with @todovue/tv-button for action buttons
-- SSR compatibility (Nuxt 3 ready)
-- Composable `useModal` for modal state and behavior management
-- Dynamic theme detection with MutationObserver for real-time updates
-- Customizable confirm and cancel buttons with conditional rendering
-- Flexible modal configuration with validation
-
-[1.2.1]: https://github.com/TODOvue/tv-modal/pull/7/files
-[1.2.0]: https://github.com/TODOvue/tv-modal/pull/6/files
-[1.1.2]: https://github.com/TODOvue/tv-modal/pull/5/files
-[1.1.1]: https://github.com/TODOvue/tv-modal/pull/4/files
-[1.1.0]: https://github.com/TODOvue/tv-modal/pull/3/files
-[1.0.1]: https://github.com/TODOvue/tv-modal/pull/2/files
-[1.0.0]: https://github.com/TODOvue/tv-modal/pull/1/files